src/app/core/setup/assistant-button/assistant-button.component.ts

Description

Button for the toolbar to access a context-aware assistant dialog for demo, setup and other user guidance.

Implements

OnInit

Example

Metadata

Relationships

Used by

Depends on

  • MatButtonModule
  • MatTooltip
  • OnInit

Index

Properties
Methods

Methods

Async openAssistant
openAssistant()
Returns : unknown

Properties

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;
  }
}
Legend
Html element
Component
Html element with directive

results matching ""

    No results matching ""