src/app/core/setup/assistant-button/assistant-button.component.ts
Button for the toolbar to access a context-aware assistant dialog for demo, setup and other user guidance.
| changeDetection | ChangeDetectionStrategy.OnPush |
| selector | app-assistant-button |
| standalone | true |
| imports |
MatButtonModule
MatTooltip
|
| styleUrls | ./assistant-button.component.scss |
| templateUrl | ./assistant-button.component.html |
| styleUrl | ./assistant-button.component.scss |
MatButtonModule
MatTooltip
OnInit
Properties |
|
Methods |
|
| Async openAssistant |
openAssistant()
|
|
Returns :
unknown
|
| Protected Readonly assistantService |
Type : unknown
|
Default value : inject(AssistantService)
|
import {
Component,
inject,
OnInit,
ChangeDetectionStrategy,
} from "@angular/core";
import { MatButtonModule } from "@angular/material/button";
import { ConfigService } from "app/core/config/config.service";
import { SetupService } from "../setup.service";
import { MatTooltip } from "@angular/material/tooltip";
import { AssistantService } from "../assistant.service";
/**
* Button for the toolbar to access a context-aware assistant dialog
* for demo, setup and other user guidance.
*/
@Component({
changeDetection: ChangeDetectionStrategy.OnPush,
selector: "app-assistant-button",
imports: [MatButtonModule, MatTooltip],
templateUrl: "./assistant-button.component.html",
styleUrl: "./assistant-button.component.scss",
})
export class AssistantButtonComponent implements OnInit {
private readonly configService = inject(ConfigService);
private readonly setupService = inject(SetupService);
protected readonly assistantService = inject(AssistantService);
async ngOnInit() {
await this.setupService.waitForConfigReady();
if (!this.configService.hasConfig()) {
// If we do not have a config yet, we open the setup dialog immediately
// to allow the user to select a base config.
await this.openAssistant();
}
}
async openAssistant() {
return this.assistantService.openAssistant();
}
}
@if (assistantService.assistantEnabled) {
<button
mat-raised-button
color="accent"
class="demo-assistant-btn"
(click)="openAssistant()"
matTooltip="Get help and customization options."
matTooltipShowDelay="2000"
i18n-matTooltip
>
<span i18n>Virtual</span>
<span i18n>Assistant</span>
</button>
}
./assistant-button.component.scss
@use "variables/breakpoints";
.demo-assistant-btn {
min-height: 65px;
min-width: 120px;
border-radius: 0;
clip-path: polygon(0 0, 100% 0, 100% 100%, 30px 100%);
::ng-deep .mdc-button__label {
width: 100%;
line-height: 16px;
display: flex;
flex-direction: column;
align-items: end;
}
@media screen and (max-width: breakpoints.$sm) {
min-height: 56px;
}
}