@testgorilla/tgo-ui 11.5.0 → 11.6.0

package/fesm2022/testgorilla-tgo-ui-components-breadcrumb.mjs

@@ -188,7 +188,7 @@ class BreadcrumbComponent {
         this.resizeObserver.observe(this.breadcrumbContainer.nativeElement);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: BreadcrumbComponent, deps: [{ token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: BreadcrumbComponent, isStandalone: true, selector: "ui-breadcrumb", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, applicationTheme: { classPropertyName: "applicationTheme", publicName: "applicationTheme", isSignal: true, isRequired: false, transformFunction: null }, includeBackButton: { classPropertyName: "includeBackButton", publicName: "includeBackButton", isSignal: true, isRequired: false, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null }, numberOfLoadingItems: { classPropertyName: "numberOfLoadingItems", publicName: "numberOfLoadingItems", isSignal: true, isRequired: false, transformFunction: null }, maxItemLength: { classPropertyName: "maxItemLength", publicName: "maxItemLength", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectItem: "selectItem", backButtonClickEvent: "backButtonClickEvent" }, viewQueries: [{ propertyName: "breadcrumbContainer", first: true, predicate: ["breadcrumbContainer"], descendants: true }], ngImport: i0, template: "@if (!isLoading()) {\n  <div class=\"breadcrumb\" [attr.theme]=\"applicationTheme()\" #breadcrumbContainer [class]=\"'breadcrumb-' + size()\">\n    @if (includeBackButton()) {\n      <ui-button\n        [variant]=\"'icon-button'\"\n        [tooltip]=\"('COMMON.BACK' | uiTranslate | async)!\"\n        [iconName]=\"'Arrow-chevron-left-filled'\"\n        (buttonClickEvent)=\"backButtonClickEvent.emit($event)\"\n      ></ui-button>\n    }\n    @if (isOverflowing()) {\n      <ui-overflow-menu\n        [applicationTheme]=\"applicationTheme()\"\n        [contentTemplateRef]=\"overflowMenu\"\n        [buttons]=\"overflowButtonItems()\"\n        [matTooltip]=\"('COMMON.OPTIONS' | uiTranslate | async)!\"\n        [matTooltipClass]=\"applicationTheme()\"\n        [isDynamicMenu]=\"true\"\n        (selectItem)=\"selectItem.emit($event)\"\n        class=\"breadcrumb-overflow-menu\"\n      ></ui-overflow-menu>\n      <ui-icon name=\"Arrow-chevron-right-filled\" [applicationTheme]=\"applicationTheme()\" color=\"gray\"></ui-icon>\n    }\n    @for (item of visibleItems(); track item.value) {\n      @if (!$last) {\n        <span\n          class=\"breadcrumb-item\"\n          tabindex=\"0\"\n          [matTooltip]=\"item.label.length > maxItemLength() ? item.label : ''\"\n          [matTooltipClass]=\"applicationTheme()\"\n          [attr.aria-label]=\"item.label\"\n          (click)=\"selectItem.emit(item.value)\"\n          (keydown.enter)=\"selectItem.emit(item.value)\"\n        >\n          {{ item.label | truncate: maxItemLength() : '...' }}\n        </span>\n        <ui-icon name=\"Arrow-chevron-right-filled\" [applicationTheme]=\"applicationTheme()\" color=\"gray\"></ui-icon>\n      } @else {\n        <strong\n          class=\"breadcrumb-item-active\"\n          tabindex=\"0\"\n          [matTooltip]=\"shouldTruncateLastItem() ? item.label : ''\"\n          [matTooltipClass]=\"applicationTheme()\"\n          [class.breadcrumb-item-active-truncated]=\"shouldTruncateLastItem()\"\n          [attr.aria-label]=\"item.label\"\n          [attr.aria-current]=\"'page'\"\n          (click)=\"selectItem.emit(item.value)\"\n          (keydown.enter)=\"selectItem.emit(item.value)\"\n        >\n          {{ item.label }}\n        </strong>\n      }\n    }\n  </div>\n} @else {\n  <div class=\"breadcrumb\">\n    @for (i of loadingItems(); track $index) {\n      <ui-skeleton count=\"1\" [theme]=\"{ width: '160px', margin: '10px 0 0' }\"></ui-skeleton>\n      @if ($index !== numberOfLoadingItems() - 1) {\n        <ui-icon name=\"Arrow-chevron-right-filled\" [applicationTheme]=\"applicationTheme()\" color=\"gray\"></ui-icon>\n      }\n    }\n  </div>\n}\n<ng-template #overflowMenu>\n  <div class=\"breadcrumb-item breadcrumb-overflow\" [class]=\"'breadcrumb-' + size()\">...</div>\n</ng-template>\n", styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}:host{min-width:0}:host .breadcrumb{display:flex;align-items:center;gap:4px;color:#666}:host .breadcrumb .breadcrumb-item{text-decoration:underline;cursor:pointer;transition:color .15s ease,transform .1s ease;white-space:nowrap}:host .breadcrumb .breadcrumb-item:hover{color:#919191}:host .breadcrumb .breadcrumb-item:active{transform:scale(.98);color:#919191}:host .breadcrumb .breadcrumb-item:focus-visible{outline:2px solid #242424;outline-offset:4px;border-radius:1px}:host .breadcrumb.breadcrumb-small{font-size:14px;line-height:22px}:host .breadcrumb.breadcrumb-medium{font-size:20px;line-height:26px}:host .breadcrumb.breadcrumb-large{font-size:32px;line-height:48px}:host .breadcrumb.breadcrumb-large .breadcrumb-item:focus-visible{outline-offset:8px}:host .breadcrumb.breadcrumb-large .breadcrumb-item-active{font-weight:900!important}:host .breadcrumb.breadcrumb-large .breadcrumb-item-active:focus-visible{outline-offset:8px}:host .breadcrumb .breadcrumb-item-active{color:#242424;white-space:nowrap}:host .breadcrumb .breadcrumb-item-active.breadcrumb-item-active-truncated{text-overflow:ellipsis;overflow:hidden}:host .breadcrumb .breadcrumb-item-active:focus-visible{outline:2px solid #242424;outline-offset:4px;border-radius:1px}:host .breadcrumb .breadcrumb-overflow-menu ::ng-deep .overflow-menu-container .mat-mdc-menu-trigger{min-width:0}:host .breadcrumb-overflow{cursor:pointer;color:#666}:host .breadcrumb-overflow:active{transform:scale(.98);color:#919191}:host .breadcrumb-overflow.breadcrumb-small{font-size:14px;line-height:22px}:host .breadcrumb-overflow.breadcrumb-medium{font-size:20px;line-height:26px}:host .breadcrumb-overflow.breadcrumb-large{font-size:32px;line-height:48px}\n"], dependencies: [{ kind: "ngmodule", type: ButtonComponentModule }, { kind: "component", type: i1.ButtonComponent, selector: "ui-button", inputs: ["size", "variant", "label", "iconPosition", "justIcon", "iconName", "disabled", "loading", "loadingWithLabel", "fullWidth", "url", "urlTarget", "value", "tooltip", "isPremium", "type", "companyColor", "buttonBadgeConfig", "applicationTheme", "disabledScaleOnClick", "ariaLabel", "ariaExpanded", "ariaControls", "ariaPressed", "ariaRequired", "ariaLabelledby", "ariaDescribedby", "preventDefault", "hasBackground", "tooltipPosition", "role", "iconFilled"], outputs: ["buttonClickEvent", "buttonHoverEvent"] }, { kind: "ngmodule", type: OverflowMenuComponentModule }, { kind: "component", type: i2.OverflowMenuComponent, selector: "ui-overflow-menu", inputs: ["buttons", "iconTrigger", "menuLabel", "applicationTheme", "ariaLabel", "ariaRequired", "describedby", "contentTemplateRef", "buttonVariant", "buttonSize", "menuConfig", "isDynamicMenu", "withRemovableOption"], outputs: ["selectItem", "menuOpened", "menuClosed"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: IconComponentModule }, { kind: "component", type: i3.IconComponent, selector: "ui-icon", inputs: ["size", "cssClass", "name", "color", "filled", "toggleIconStyle", "applicationTheme", "useFullIconName"] }, { kind: "component", type: SkeletonComponent, selector: "ui-skeleton", inputs: ["count", "theme", "appearance", "isAiTheme", "applicationTheme"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: UiTranslatePipe, name: "uiTranslate" }, { kind: "pipe", type: TruncatePipe, name: "truncate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: BreadcrumbComponent, isStandalone: true, selector: "ui-breadcrumb", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, applicationTheme: { classPropertyName: "applicationTheme", publicName: "applicationTheme", isSignal: true, isRequired: false, transformFunction: null }, includeBackButton: { classPropertyName: "includeBackButton", publicName: "includeBackButton", isSignal: true, isRequired: false, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null }, numberOfLoadingItems: { classPropertyName: "numberOfLoadingItems", publicName: "numberOfLoadingItems", isSignal: true, isRequired: false, transformFunction: null }, maxItemLength: { classPropertyName: "maxItemLength", publicName: "maxItemLength", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectItem: "selectItem", backButtonClickEvent: "backButtonClickEvent" }, viewQueries: [{ propertyName: "breadcrumbContainer", first: true, predicate: ["breadcrumbContainer"], descendants: true }], ngImport: i0, template: "@if (!isLoading()) {\n  <div class=\"breadcrumb\" [attr.theme]=\"applicationTheme()\" #breadcrumbContainer [class]=\"'breadcrumb-' + size()\">\n    @if (includeBackButton()) {\n      <ui-button\n        [variant]=\"'icon-button'\"\n        [tooltip]=\"('COMMON.BACK' | uiTranslate | async)!\"\n        [iconName]=\"'Arrow-chevron-left-filled'\"\n        (buttonClickEvent)=\"backButtonClickEvent.emit($event)\"\n      ></ui-button>\n    }\n    @if (isOverflowing()) {\n      <ui-overflow-menu\n        [applicationTheme]=\"applicationTheme()\"\n        [contentTemplateRef]=\"overflowMenu\"\n        [buttons]=\"overflowButtonItems()\"\n        [matTooltip]=\"('COMMON.OPTIONS' | uiTranslate | async)!\"\n        [matTooltipClass]=\"applicationTheme()\"\n        [isDynamicMenu]=\"true\"\n        (selectItem)=\"selectItem.emit($event)\"\n        class=\"breadcrumb-overflow-menu\"\n      ></ui-overflow-menu>\n      <ui-icon name=\"Arrow-chevron-right-filled\" [applicationTheme]=\"applicationTheme()\" color=\"gray\"></ui-icon>\n    }\n    @for (item of visibleItems(); track item.value) {\n      @if (!$last) {\n        <span\n          class=\"breadcrumb-item\"\n          tabindex=\"0\"\n          [matTooltip]=\"item.label.length > maxItemLength() ? item.label : ''\"\n          [matTooltipClass]=\"applicationTheme()\"\n          [attr.aria-label]=\"item.label\"\n          (click)=\"selectItem.emit(item.value)\"\n          (keydown.enter)=\"selectItem.emit(item.value)\"\n        >\n          {{ item.label | truncate: maxItemLength() : '...' }}\n        </span>\n        <ui-icon name=\"Arrow-chevron-right-filled\" [applicationTheme]=\"applicationTheme()\" color=\"gray\"></ui-icon>\n      } @else {\n        <strong\n          class=\"breadcrumb-item-active\"\n          tabindex=\"0\"\n          [matTooltip]=\"shouldTruncateLastItem() ? item.label : ''\"\n          [matTooltipClass]=\"applicationTheme()\"\n          [class.breadcrumb-item-active-truncated]=\"shouldTruncateLastItem()\"\n          [attr.aria-label]=\"item.label\"\n          [attr.aria-current]=\"'page'\"\n          (click)=\"selectItem.emit(item.value)\"\n          (keydown.enter)=\"selectItem.emit(item.value)\"\n        >\n          {{ item.label }}\n        </strong>\n      }\n    }\n  </div>\n} @else {\n  <div class=\"breadcrumb\">\n    @for (i of loadingItems(); track $index) {\n      <ui-skeleton count=\"1\" [theme]=\"{ width: '160px', margin: '10px 0 0' }\"></ui-skeleton>\n      @if ($index !== numberOfLoadingItems() - 1) {\n        <ui-icon name=\"Arrow-chevron-right-filled\" [applicationTheme]=\"applicationTheme()\" color=\"gray\"></ui-icon>\n      }\n    }\n  </div>\n}\n<ng-template #overflowMenu>\n  <div class=\"breadcrumb-item breadcrumb-overflow\" [class]=\"'breadcrumb-' + size()\">...</div>\n</ng-template>\n", styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}:host{min-width:0}:host .breadcrumb{display:flex;align-items:center;gap:4px;color:#666}:host .breadcrumb .breadcrumb-item{text-decoration:underline;cursor:pointer;transition:color .15s ease,transform .1s ease;white-space:nowrap}:host .breadcrumb .breadcrumb-item:hover{color:#919191}:host .breadcrumb .breadcrumb-item:active{transform:scale(.98);color:#919191}:host .breadcrumb .breadcrumb-item:focus-visible{outline:2px solid #242424;outline-offset:4px;border-radius:1px}:host .breadcrumb.breadcrumb-small{font-size:14px;line-height:22px}:host .breadcrumb.breadcrumb-medium{font-size:20px;line-height:26px}:host .breadcrumb.breadcrumb-large{font-size:32px;line-height:48px}:host .breadcrumb.breadcrumb-large .breadcrumb-item:focus-visible{outline-offset:8px}:host .breadcrumb.breadcrumb-large .breadcrumb-item-active{font-weight:900!important}:host .breadcrumb.breadcrumb-large .breadcrumb-item-active:focus-visible{outline-offset:8px}:host .breadcrumb .breadcrumb-item-active{color:#242424;white-space:nowrap}:host .breadcrumb .breadcrumb-item-active.breadcrumb-item-active-truncated{text-overflow:ellipsis;overflow:hidden}:host .breadcrumb .breadcrumb-item-active:focus-visible{outline:2px solid #242424;outline-offset:4px;border-radius:1px}:host .breadcrumb .breadcrumb-overflow-menu ::ng-deep .overflow-menu-container .mat-mdc-menu-trigger{min-width:0}:host .breadcrumb-overflow{cursor:pointer;color:#666}:host .breadcrumb-overflow:active{transform:scale(.98);color:#919191}:host .breadcrumb-overflow.breadcrumb-small{font-size:14px;line-height:22px}:host .breadcrumb-overflow.breadcrumb-medium{font-size:20px;line-height:26px}:host .breadcrumb-overflow.breadcrumb-large{font-size:32px;line-height:48px}\n"], dependencies: [{ kind: "ngmodule", type: ButtonComponentModule }, { kind: "component", type: i1.ButtonComponent, selector: "ui-button", inputs: ["size", "variant", "label", "iconPosition", "justIcon", "iconName", "disabled", "loading", "loadingWithLabel", "fullWidth", "url", "urlTarget", "value", "tooltip", "isPremium", "type", "companyColor", "buttonBadgeConfig", "applicationTheme", "disabledScaleOnClick", "ariaLabel", "ariaExpanded", "ariaControls", "ariaPressed", "ariaRequired", "ariaLabelledby", "ariaDescribedby", "preventDefault", "hasBackground", "tooltipPosition", "role", "iconFilled"], outputs: ["buttonClickEvent", "buttonHoverEvent"] }, { kind: "ngmodule", type: OverflowMenuComponentModule }, { kind: "component", type: i2.OverflowMenuComponent, selector: "ui-overflow-menu", inputs: ["buttons", "iconTrigger", "menuLabel", "applicationTheme", "ariaLabel", "ariaRequired", "describedby", "contentTemplateRef", "buttonVariant", "buttonSize", "menuConfig", "selectionMode", "isDynamicMenu", "withRemovableOption"], outputs: ["selectItem", "menuOpened", "menuClosed"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: IconComponentModule }, { kind: "component", type: i3.IconComponent, selector: "ui-icon", inputs: ["size", "cssClass", "name", "color", "filled", "toggleIconStyle", "applicationTheme", "useFullIconName"] }, { kind: "component", type: SkeletonComponent, selector: "ui-skeleton", inputs: ["count", "theme", "appearance", "isAiTheme", "applicationTheme"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: UiTranslatePipe, name: "uiTranslate" }, { kind: "pipe", type: TruncatePipe, name: "truncate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: BreadcrumbComponent, decorators: [{
             type: Component,

package/fesm2022/testgorilla-tgo-ui-components-breadcrumb.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"testgorilla-tgo-ui-components-breadcrumb.mjs","sources":["../../../components/breadcrumb/breadcrumb.component.ts","../../../components/breadcrumb/breadcrumb.component.html","../../../components/breadcrumb/breadcrumb.component.module.ts","../../../components/breadcrumb/testgorilla-tgo-ui-components-breadcrumb.ts"],"sourcesContent":["import { AsyncPipe } from '@angular/common';\nimport {\n  AfterViewInit,\n  Component,\n  input,\n  signal,\n  ViewChild,\n  OnDestroy,\n  computed,\n  EventEmitter,\n  Output,\n  effect,\n  ChangeDetectionStrategy,\n  Injector,\n  afterNextRender,\n  ElementRef,\n} from '@angular/core';\nimport { MatTooltip } from '@angular/material/tooltip';\n\nimport { ButtonComponentModule } from '@testgorilla/tgo-ui/components/button';\nimport { ApplicationTheme, TruncatePipe, UiTranslatePipe } from '@testgorilla/tgo-ui/components/core';\nimport { IconComponentModule } from '@testgorilla/tgo-ui/components/icon';\nimport { OverflowMenuButtonsType, OverflowMenuComponentModule } from '@testgorilla/tgo-ui/components/overflow-menu';\nimport { SkeletonComponent } from '@testgorilla/tgo-ui/components/skeleton';\n\nimport { BreadcrumbItem, BreadcrumbSize } from './breadcrumb.model';\n\n@Component({\n  selector: 'ui-breadcrumb',\n  templateUrl: './breadcrumb.component.html',\n  styleUrls: ['./breadcrumb.component.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  imports: [\n    ButtonComponentModule,\n    OverflowMenuComponentModule,\n    MatTooltip,\n    IconComponentModule,\n    SkeletonComponent,\n    AsyncPipe,\n    UiTranslatePipe,\n    TruncatePipe,\n  ],\n})\nexport class BreadcrumbComponent implements AfterViewInit, OnDestroy {\n  size = input<BreadcrumbSize>('large');\n  items = input<BreadcrumbItem[]>([]);\n  applicationTheme = input<ApplicationTheme>('light');\n  includeBackButton = input<boolean>(false);\n  isLoading = input<boolean>(false);\n  numberOfLoadingItems = input<number>(3);\n  maxItemLength = input<number>(18);\n  @Output() selectItem: EventEmitter<string> = new EventEmitter<string>();\n  @Output() backButtonClickEvent: EventEmitter<Event> = new EventEmitter<Event>();\n\n  loadingItems = computed(() => new Array<undefined>(this.numberOfLoadingItems()));\n  isOverflowing = signal<boolean>(false);\n  visibleItems = signal<BreadcrumbItem[]>([]);\n  overflowItems = signal<BreadcrumbItem[]>([]);\n  overflowButtonItems = computed<OverflowMenuButtonsType[]>(() =>\n    this.overflowItems().map(item => ({\n      label: item.label,\n      value: item.value,\n    }))\n  );\n  shouldTruncateLastItem = signal<boolean>(false);\n\n  @ViewChild('breadcrumbContainer') breadcrumbContainer!: ElementRef<HTMLElement>;\n\n  private resizeObserver?: ResizeObserver;\n  private itemsInOverflow = 0;\n  private previousLoadingState?: boolean;\n  private readonly injector: Injector;\n\n  constructor(private readonly parentInjector: Injector) {\n    this.injector = parentInjector;\n    // React to items changes and recalculate overflow\n    effect(() => {\n      this.items();\n      this.itemsInOverflow = 0;\n\n      // Only proceed if not in loading state\n      if (!this.isLoading()) {\n        // Use afterNextRender to ensure DOM is updated before calculating\n        afterNextRender(\n          () => {\n            if (this.breadcrumbContainer?.nativeElement) {\n              this.calculateItemDistribution();\n            }\n          },\n          { injector: this.injector }\n        );\n      }\n    });\n\n    // React to loading state changes and setup ResizeObserver when loading changes from true to false\n    effect(() => {\n      const currentLoadingState = this.isLoading();\n\n      if (this.previousLoadingState === true && currentLoadingState === false) {\n        // Use afterNextRender to ensure DOM is ready before setting up observer\n        afterNextRender(\n          () => {\n            this.setupResizeObserver();\n          },\n          { injector: this.injector }\n        );\n      }\n\n      this.previousLoadingState = currentLoadingState;\n    });\n  }\n\n  ngAfterViewInit() {\n    this.calculateItemDistribution();\n    this.setupResizeObserver();\n  }\n\n  ngOnDestroy() {\n    this.resizeObserver?.disconnect();\n  }\n\n  private calculateItemDistribution() {\n    if (!this.breadcrumbContainer?.nativeElement || this.items().length === 0) {\n      this.resetToAllVisible();\n      return;\n    }\n\n    const element = this.breadcrumbContainer.nativeElement;\n    const hasHorizontalOverflow = element.scrollWidth > element.clientWidth;\n\n    if (hasHorizontalOverflow) {\n      this.handleOverflow();\n    } else if (this.itemsInOverflow > 0) {\n      // Check if we can bring items back from overflow\n      this.tryReduceOverflow();\n    } else {\n      this.resetToAllVisible();\n    }\n  }\n\n  private handleOverflow() {\n    this.itemsInOverflow = Math.min(this.itemsInOverflow + 1, this.items().length - 1);\n\n    this.updateItemArrays();\n    this.isOverflowing.set(true);\n\n    // Wait for DOM to render the updated template after hiding items\n    // We need to measure dimensions AFTER the DOM has been updated with the new visible items\n    setTimeout(() => {\n      if (this.breadcrumbContainer?.nativeElement) {\n        const element = this.breadcrumbContainer.nativeElement;\n        const stillOverflowing = element.scrollWidth > element.clientWidth;\n\n        if (stillOverflowing && this.itemsInOverflow < this.items().length - 1) {\n          this.handleOverflow();\n        } else if (stillOverflowing && this.itemsInOverflow === this.items().length - 1) {\n          this.shouldTruncateLastItem.set(true);\n        }\n      }\n    }, 0);\n  }\n\n  private tryReduceOverflow() {\n    const testItemsInOverflow = this.itemsInOverflow - 1;\n\n    if (testItemsInOverflow >= 0) {\n      const testVisibleItems = this.items().slice(testItemsInOverflow);\n      const testOverflowItems = testItemsInOverflow > 0 ? this.items().slice(0, testItemsInOverflow) : [];\n\n      this.visibleItems.set(testVisibleItems);\n      this.overflowItems.set(testOverflowItems);\n\n      // Always reset truncation when trying to reduce overflow\n      this.shouldTruncateLastItem.set(false);\n\n      // Wait for DOM to render with test configuration before measuring\n      setTimeout(() => {\n        if (this.breadcrumbContainer?.nativeElement) {\n          const element = this.breadcrumbContainer.nativeElement;\n          const hasOverflow = element.scrollWidth > element.clientWidth;\n\n          if (!hasOverflow) {\n            // It fits! Update the counter\n            this.itemsInOverflow = testItemsInOverflow;\n            this.isOverflowing.set(this.itemsInOverflow > 0);\n\n            // Try to reduce more if there are still items in overflow\n            if (this.itemsInOverflow > 0) {\n              // Schedule next reduction attempt after current render cycle\n              setTimeout(() => this.tryReduceOverflow(), 0);\n            }\n          } else {\n            // Doesn't fit, revert to previous state\n            this.updateItemArrays();\n\n            // Wait for DOM to render reverted state before checking truncation\n            setTimeout(() => {\n              if (this.breadcrumbContainer?.nativeElement) {\n                const containerElement = this.breadcrumbContainer.nativeElement;\n                const stillOverflowing = containerElement.scrollWidth > containerElement.clientWidth;\n\n                if (stillOverflowing && this.itemsInOverflow === this.items().length - 1) {\n                  this.shouldTruncateLastItem.set(true);\n                }\n              }\n            }, 0);\n          }\n        }\n      }, 0);\n    } else {\n      // testItemsInOverflow < 0, means we're trying to show all items\n      this.resetToAllVisible();\n\n      // Wait for DOM to render all items before measuring overflow\n      setTimeout(() => {\n        if (this.breadcrumbContainer?.nativeElement) {\n          const element = this.breadcrumbContainer.nativeElement;\n          const hasOverflow = element.scrollWidth > element.clientWidth;\n\n          if (hasOverflow) {\n            // Still overflows with all items, need to go back to overflow state\n            this.itemsInOverflow = 1; // Start with minimal overflow\n            this.handleOverflow();\n          }\n        }\n      }, 0);\n    }\n  }\n\n  private updateItemArrays() {\n    if (this.itemsInOverflow > 0) {\n      this.overflowItems.set(this.items().slice(0, this.itemsInOverflow));\n      this.visibleItems.set(this.items().slice(this.itemsInOverflow));\n    } else {\n      this.resetToAllVisible();\n    }\n  }\n\n  private resetToAllVisible() {\n    this.visibleItems.set(this.items());\n    this.overflowItems.set([]);\n    this.isOverflowing.set(false);\n    this.shouldTruncateLastItem.set(false);\n    this.itemsInOverflow = 0;\n  }\n\n  private setupResizeObserver() {\n    if (!this.breadcrumbContainer?.nativeElement) {\n      return;\n    }\n\n    this.resizeObserver = new ResizeObserver(() => {\n      this.calculateItemDistribution();\n    });\n\n    this.resizeObserver.observe(this.breadcrumbContainer.nativeElement);\n  }\n}\n","@if (!isLoading()) {\n  <div class=\"breadcrumb\" [attr.theme]=\"applicationTheme()\" #breadcrumbContainer [class]=\"'breadcrumb-' + size()\">\n    @if (includeBackButton()) {\n      <ui-button\n        [variant]=\"'icon-button'\"\n        [tooltip]=\"('COMMON.BACK' | uiTranslate | async)!\"\n        [iconName]=\"'Arrow-chevron-left-filled'\"\n        (buttonClickEvent)=\"backButtonClickEvent.emit($event)\"\n      ></ui-button>\n    }\n    @if (isOverflowing()) {\n      <ui-overflow-menu\n        [applicationTheme]=\"applicationTheme()\"\n        [contentTemplateRef]=\"overflowMenu\"\n        [buttons]=\"overflowButtonItems()\"\n        [matTooltip]=\"('COMMON.OPTIONS' | uiTranslate | async)!\"\n        [matTooltipClass]=\"applicationTheme()\"\n        [isDynamicMenu]=\"true\"\n        (selectItem)=\"selectItem.emit($event)\"\n        class=\"breadcrumb-overflow-menu\"\n      ></ui-overflow-menu>\n      <ui-icon name=\"Arrow-chevron-right-filled\" [applicationTheme]=\"applicationTheme()\" color=\"gray\"></ui-icon>\n    }\n    @for (item of visibleItems(); track item.value) {\n      @if (!$last) {\n        <span\n          class=\"breadcrumb-item\"\n          tabindex=\"0\"\n          [matTooltip]=\"item.label.length > maxItemLength() ? item.label : ''\"\n          [matTooltipClass]=\"applicationTheme()\"\n          [attr.aria-label]=\"item.label\"\n          (click)=\"selectItem.emit(item.value)\"\n          (keydown.enter)=\"selectItem.emit(item.value)\"\n        >\n          {{ item.label | truncate: maxItemLength() : '...' }}\n        </span>\n        <ui-icon name=\"Arrow-chevron-right-filled\" [applicationTheme]=\"applicationTheme()\" color=\"gray\"></ui-icon>\n      } @else {\n        <strong\n          class=\"breadcrumb-item-active\"\n          tabindex=\"0\"\n          [matTooltip]=\"shouldTruncateLastItem() ? item.label : ''\"\n          [matTooltipClass]=\"applicationTheme()\"\n          [class.breadcrumb-item-active-truncated]=\"shouldTruncateLastItem()\"\n          [attr.aria-label]=\"item.label\"\n          [attr.aria-current]=\"'page'\"\n          (click)=\"selectItem.emit(item.value)\"\n          (keydown.enter)=\"selectItem.emit(item.value)\"\n        >\n          {{ item.label }}\n        </strong>\n      }\n    }\n  </div>\n} @else {\n  <div class=\"breadcrumb\">\n    @for (i of loadingItems(); track $index) {\n      <ui-skeleton count=\"1\" [theme]=\"{ width: '160px', margin: '10px 0 0' }\"></ui-skeleton>\n      @if ($index !== numberOfLoadingItems() - 1) {\n        <ui-icon name=\"Arrow-chevron-right-filled\" [applicationTheme]=\"applicationTheme()\" color=\"gray\"></ui-icon>\n      }\n    }\n  </div>\n}\n<ng-template #overflowMenu>\n  <div class=\"breadcrumb-item breadcrumb-overflow\" [class]=\"'breadcrumb-' + size()\">...</div>\n</ng-template>\n","import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { MatTooltipModule } from '@angular/material/tooltip';\n\nimport { ButtonComponentModule } from '@testgorilla/tgo-ui/components/button';\nimport { UiTranslatePipe, TruncatePipe } from '@testgorilla/tgo-ui/components/core';\nimport { IconComponentModule } from '@testgorilla/tgo-ui/components/icon';\nimport { OverflowMenuComponentModule } from '@testgorilla/tgo-ui/components/overflow-menu';\nimport { SkeletonComponent } from '@testgorilla/tgo-ui/components/skeleton';\n\nimport { BreadcrumbComponent } from './breadcrumb.component';\n\n@NgModule({\n  imports: [\n    CommonModule,\n    IconComponentModule,\n    MatTooltipModule,\n    OverflowMenuComponentModule,\n    ButtonComponentModule,\n    SkeletonComponent,\n    UiTranslatePipe,\n    TruncatePipe,\n    BreadcrumbComponent,\n  ],\n  exports: [BreadcrumbComponent],\n})\nexport class BreadcrumbComponentModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"testgorilla-tgo-ui-components-breadcrumb.mjs","sources":["../../../components/breadcrumb/breadcrumb.component.ts","../../../components/breadcrumb/breadcrumb.component.html","../../../components/breadcrumb/breadcrumb.component.module.ts","../../../components/breadcrumb/testgorilla-tgo-ui-components-breadcrumb.ts"],"sourcesContent":["import { AsyncPipe } from '@angular/common';\nimport {\n  AfterViewInit,\n  Component,\n  input,\n  signal,\n  ViewChild,\n  OnDestroy,\n  computed,\n  EventEmitter,\n  Output,\n  effect,\n  ChangeDetectionStrategy,\n  Injector,\n  afterNextRender,\n  ElementRef,\n} from '@angular/core';\nimport { MatTooltip } from '@angular/material/tooltip';\n\nimport { ButtonComponentModule } from '@testgorilla/tgo-ui/components/button';\nimport { ApplicationTheme, TruncatePipe, UiTranslatePipe } from '@testgorilla/tgo-ui/components/core';\nimport { IconComponentModule } from '@testgorilla/tgo-ui/components/icon';\nimport { OverflowMenuButtonsType, OverflowMenuComponentModule } from '@testgorilla/tgo-ui/components/overflow-menu';\nimport { SkeletonComponent } from '@testgorilla/tgo-ui/components/skeleton';\n\nimport { BreadcrumbItem, BreadcrumbSize } from './breadcrumb.model';\n\n@Component({\n  selector: 'ui-breadcrumb',\n  templateUrl: './breadcrumb.component.html',\n  styleUrls: ['./breadcrumb.component.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  imports: [\n    ButtonComponentModule,\n    OverflowMenuComponentModule,\n    MatTooltip,\n    IconComponentModule,\n    SkeletonComponent,\n    AsyncPipe,\n    UiTranslatePipe,\n    TruncatePipe,\n  ],\n})\nexport class BreadcrumbComponent implements AfterViewInit, OnDestroy {\n  size = input<BreadcrumbSize>('large');\n  items = input<BreadcrumbItem[]>([]);\n  applicationTheme = input<ApplicationTheme>('light');\n  includeBackButton = input<boolean>(false);\n  isLoading = input<boolean>(false);\n  numberOfLoadingItems = input<number>(3);\n  maxItemLength = input<number>(18);\n  @Output() selectItem: EventEmitter<string> = new EventEmitter<string>();\n  @Output() backButtonClickEvent: EventEmitter<Event> = new EventEmitter<Event>();\n\n  loadingItems = computed(() => new Array<undefined>(this.numberOfLoadingItems()));\n  isOverflowing = signal<boolean>(false);\n  visibleItems = signal<BreadcrumbItem[]>([]);\n  overflowItems = signal<BreadcrumbItem[]>([]);\n  overflowButtonItems = computed<OverflowMenuButtonsType[]>(() =>\n    this.overflowItems().map(item => ({\n      label: item.label,\n      value: item.value,\n    }))\n  );\n  shouldTruncateLastItem = signal<boolean>(false);\n\n  @ViewChild('breadcrumbContainer') breadcrumbContainer!: ElementRef<HTMLElement>;\n\n  private resizeObserver?: ResizeObserver;\n  private itemsInOverflow = 0;\n  private previousLoadingState?: boolean;\n  private readonly injector: Injector;\n\n  constructor(private readonly parentInjector: Injector) {\n    this.injector = parentInjector;\n    // React to items changes and recalculate overflow\n    effect(() => {\n      this.items();\n      this.itemsInOverflow = 0;\n\n      // Only proceed if not in loading state\n      if (!this.isLoading()) {\n        // Use afterNextRender to ensure DOM is updated before calculating\n        afterNextRender(\n          () => {\n            if (this.breadcrumbContainer?.nativeElement) {\n              this.calculateItemDistribution();\n            }\n          },\n          { injector: this.injector }\n        );\n      }\n    });\n\n    // React to loading state changes and setup ResizeObserver when loading changes from true to false\n    effect(() => {\n      const currentLoadingState = this.isLoading();\n\n      if (this.previousLoadingState === true && currentLoadingState === false) {\n        // Use afterNextRender to ensure DOM is ready before setting up observer\n        afterNextRender(\n          () => {\n            this.setupResizeObserver();\n          },\n          { injector: this.injector }\n        );\n      }\n\n      this.previousLoadingState = currentLoadingState;\n    });\n  }\n\n  ngAfterViewInit() {\n    this.calculateItemDistribution();\n    this.setupResizeObserver();\n  }\n\n  ngOnDestroy() {\n    this.resizeObserver?.disconnect();\n  }\n\n  private calculateItemDistribution() {\n    if (!this.breadcrumbContainer?.nativeElement || this.items().length === 0) {\n      this.resetToAllVisible();\n      return;\n    }\n\n    const element = this.breadcrumbContainer.nativeElement;\n    const hasHorizontalOverflow = element.scrollWidth > element.clientWidth;\n\n    if (hasHorizontalOverflow) {\n      this.handleOverflow();\n    } else if (this.itemsInOverflow > 0) {\n      // Check if we can bring items back from overflow\n      this.tryReduceOverflow();\n    } else {\n      this.resetToAllVisible();\n    }\n  }\n\n  private handleOverflow() {\n    this.itemsInOverflow = Math.min(this.itemsInOverflow + 1, this.items().length - 1);\n\n    this.updateItemArrays();\n    this.isOverflowing.set(true);\n\n    // Wait for DOM to render the updated template after hiding items\n    // We need to measure dimensions AFTER the DOM has been updated with the new visible items\n    setTimeout(() => {\n      if (this.breadcrumbContainer?.nativeElement) {\n        const element = this.breadcrumbContainer.nativeElement;\n        const stillOverflowing = element.scrollWidth > element.clientWidth;\n\n        if (stillOverflowing && this.itemsInOverflow < this.items().length - 1) {\n          this.handleOverflow();\n        } else if (stillOverflowing && this.itemsInOverflow === this.items().length - 1) {\n          this.shouldTruncateLastItem.set(true);\n        }\n      }\n    }, 0);\n  }\n\n  private tryReduceOverflow() {\n    const testItemsInOverflow = this.itemsInOverflow - 1;\n\n    if (testItemsInOverflow >= 0) {\n      const testVisibleItems = this.items().slice(testItemsInOverflow);\n      const testOverflowItems = testItemsInOverflow > 0 ? this.items().slice(0, testItemsInOverflow) : [];\n\n      this.visibleItems.set(testVisibleItems);\n      this.overflowItems.set(testOverflowItems);\n\n      // Always reset truncation when trying to reduce overflow\n      this.shouldTruncateLastItem.set(false);\n\n      // Wait for DOM to render with test configuration before measuring\n      setTimeout(() => {\n        if (this.breadcrumbContainer?.nativeElement) {\n          const element = this.breadcrumbContainer.nativeElement;\n          const hasOverflow = element.scrollWidth > element.clientWidth;\n\n          if (!hasOverflow) {\n            // It fits! Update the counter\n            this.itemsInOverflow = testItemsInOverflow;\n            this.isOverflowing.set(this.itemsInOverflow > 0);\n\n            // Try to reduce more if there are still items in overflow\n            if (this.itemsInOverflow > 0) {\n              // Schedule next reduction attempt after current render cycle\n              setTimeout(() => this.tryReduceOverflow(), 0);\n            }\n          } else {\n            // Doesn't fit, revert to previous state\n            this.updateItemArrays();\n\n            // Wait for DOM to render reverted state before checking truncation\n            setTimeout(() => {\n              if (this.breadcrumbContainer?.nativeElement) {\n                const containerElement = this.breadcrumbContainer.nativeElement;\n                const stillOverflowing = containerElement.scrollWidth > containerElement.clientWidth;\n\n                if (stillOverflowing && this.itemsInOverflow === this.items().length - 1) {\n                  this.shouldTruncateLastItem.set(true);\n                }\n              }\n            }, 0);\n          }\n        }\n      }, 0);\n    } else {\n      // testItemsInOverflow < 0, means we're trying to show all items\n      this.resetToAllVisible();\n\n      // Wait for DOM to render all items before measuring overflow\n      setTimeout(() => {\n        if (this.breadcrumbContainer?.nativeElement) {\n          const element = this.breadcrumbContainer.nativeElement;\n          const hasOverflow = element.scrollWidth > element.clientWidth;\n\n          if (hasOverflow) {\n            // Still overflows with all items, need to go back to overflow state\n            this.itemsInOverflow = 1; // Start with minimal overflow\n            this.handleOverflow();\n          }\n        }\n      }, 0);\n    }\n  }\n\n  private updateItemArrays() {\n    if (this.itemsInOverflow > 0) {\n      this.overflowItems.set(this.items().slice(0, this.itemsInOverflow));\n      this.visibleItems.set(this.items().slice(this.itemsInOverflow));\n    } else {\n      this.resetToAllVisible();\n    }\n  }\n\n  private resetToAllVisible() {\n    this.visibleItems.set(this.items());\n    this.overflowItems.set([]);\n    this.isOverflowing.set(false);\n    this.shouldTruncateLastItem.set(false);\n    this.itemsInOverflow = 0;\n  }\n\n  private setupResizeObserver() {\n    if (!this.breadcrumbContainer?.nativeElement) {\n      return;\n    }\n\n    this.resizeObserver = new ResizeObserver(() => {\n      this.calculateItemDistribution();\n    });\n\n    this.resizeObserver.observe(this.breadcrumbContainer.nativeElement);\n  }\n}\n","@if (!isLoading()) {\n  <div class=\"breadcrumb\" [attr.theme]=\"applicationTheme()\" #breadcrumbContainer [class]=\"'breadcrumb-' + size()\">\n    @if (includeBackButton()) {\n      <ui-button\n        [variant]=\"'icon-button'\"\n        [tooltip]=\"('COMMON.BACK' | uiTranslate | async)!\"\n        [iconName]=\"'Arrow-chevron-left-filled'\"\n        (buttonClickEvent)=\"backButtonClickEvent.emit($event)\"\n      ></ui-button>\n    }\n    @if (isOverflowing()) {\n      <ui-overflow-menu\n        [applicationTheme]=\"applicationTheme()\"\n        [contentTemplateRef]=\"overflowMenu\"\n        [buttons]=\"overflowButtonItems()\"\n        [matTooltip]=\"('COMMON.OPTIONS' | uiTranslate | async)!\"\n        [matTooltipClass]=\"applicationTheme()\"\n        [isDynamicMenu]=\"true\"\n        (selectItem)=\"selectItem.emit($event)\"\n        class=\"breadcrumb-overflow-menu\"\n      ></ui-overflow-menu>\n      <ui-icon name=\"Arrow-chevron-right-filled\" [applicationTheme]=\"applicationTheme()\" color=\"gray\"></ui-icon>\n    }\n    @for (item of visibleItems(); track item.value) {\n      @if (!$last) {\n        <span\n          class=\"breadcrumb-item\"\n          tabindex=\"0\"\n          [matTooltip]=\"item.label.length > maxItemLength() ? item.label : ''\"\n          [matTooltipClass]=\"applicationTheme()\"\n          [attr.aria-label]=\"item.label\"\n          (click)=\"selectItem.emit(item.value)\"\n          (keydown.enter)=\"selectItem.emit(item.value)\"\n        >\n          {{ item.label | truncate: maxItemLength() : '...' }}\n        </span>\n        <ui-icon name=\"Arrow-chevron-right-filled\" [applicationTheme]=\"applicationTheme()\" color=\"gray\"></ui-icon>\n      } @else {\n        <strong\n          class=\"breadcrumb-item-active\"\n          tabindex=\"0\"\n          [matTooltip]=\"shouldTruncateLastItem() ? item.label : ''\"\n          [matTooltipClass]=\"applicationTheme()\"\n          [class.breadcrumb-item-active-truncated]=\"shouldTruncateLastItem()\"\n          [attr.aria-label]=\"item.label\"\n          [attr.aria-current]=\"'page'\"\n          (click)=\"selectItem.emit(item.value)\"\n          (keydown.enter)=\"selectItem.emit(item.value)\"\n        >\n          {{ item.label }}\n        </strong>\n      }\n    }\n  </div>\n} @else {\n  <div class=\"breadcrumb\">\n    @for (i of loadingItems(); track $index) {\n      <ui-skeleton count=\"1\" [theme]=\"{ width: '160px', margin: '10px 0 0' }\"></ui-skeleton>\n      @if ($index !== numberOfLoadingItems() - 1) {\n        <ui-icon name=\"Arrow-chevron-right-filled\" [applicationTheme]=\"applicationTheme()\" color=\"gray\"></ui-icon>\n      }\n    }\n  </div>\n}\n<ng-template #overflowMenu>\n  <div class=\"breadcrumb-item breadcrumb-overflow\" [class]=\"'breadcrumb-' + size()\">...</div>\n</ng-template>\n","import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { MatTooltipModule } from '@angular/material/tooltip';\n\nimport { ButtonComponentModule } from '@testgorilla/tgo-ui/components/button';\nimport { UiTranslatePipe, TruncatePipe } from '@testgorilla/tgo-ui/components/core';\nimport { IconComponentModule } from '@testgorilla/tgo-ui/components/icon';\nimport { OverflowMenuComponentModule } from '@testgorilla/tgo-ui/components/overflow-menu';\nimport { SkeletonComponent } from '@testgorilla/tgo-ui/components/skeleton';\n\nimport { BreadcrumbComponent } from './breadcrumb.component';\n\n@NgModule({\n  imports: [\n    CommonModule,\n    IconComponentModule,\n    MatTooltipModule,\n    OverflowMenuComponentModule,\n    ButtonComponentModule,\n    SkeletonComponent,\n    UiTranslatePipe,\n    TruncatePipe,\n    BreadcrumbComponent,\n  ],\n  exports: [BreadcrumbComponent],\n})\nexport class BreadcrumbComponentModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;;;;;;;;;;MA2Ca,mBAAmB,CAAA;AA8B9B,IAAA,WAAA,CAA6B,cAAwB,EAAA;QAAxB,IAAA,CAAA,cAAc,GAAd,cAAc;AA7B3C,QAAA,IAAA,CAAA,IAAI,GAAG,KAAK,CAAiB,OAAO,2EAAC;AACrC,QAAA,IAAA,CAAA,KAAK,GAAG,KAAK,CAAmB,EAAE,4EAAC;AACnC,QAAA,IAAA,CAAA,gBAAgB,GAAG,KAAK,CAAmB,OAAO,uFAAC;AACnD,QAAA,IAAA,CAAA,iBAAiB,GAAG,KAAK,CAAU,KAAK,wFAAC;AACzC,QAAA,IAAA,CAAA,SAAS,GAAG,KAAK,CAAU,KAAK,gFAAC;AACjC,QAAA,IAAA,CAAA,oBAAoB,GAAG,KAAK,CAAS,CAAC,2FAAC;AACvC,QAAA,IAAA,CAAA,aAAa,GAAG,KAAK,CAAS,EAAE,oFAAC;AACvB,QAAA,IAAA,CAAA,UAAU,GAAyB,IAAI,YAAY,EAAU;AAC7D,QAAA,IAAA,CAAA,oBAAoB,GAAwB,IAAI,YAAY,EAAS;AAE/E,QAAA,IAAA,CAAA,YAAY,GAAG,QAAQ,CAAC,MAAM,IAAI,KAAK,CAAY,IAAI,CAAC,oBAAoB,EAAE,CAAC,mFAAC;AAChF,QAAA,IAAA,CAAA,aAAa,GAAG,MAAM,CAAU,KAAK,oFAAC;AACtC,QAAA,IAAA,CAAA,YAAY,GAAG,MAAM,CAAmB,EAAE,mFAAC;AAC3C,QAAA,IAAA,CAAA,aAAa,GAAG,MAAM,CAAmB,EAAE,oFAAC;AAC5C,QAAA,IAAA,CAAA,mBAAmB,GAAG,QAAQ,CAA4B,MACxD,IAAI,CAAC,aAAa,EAAE,CAAC,GAAG,CAAC,IAAI,KAAK;YAChC,KAAK,EAAE,IAAI,CAAC,KAAK;YACjB,KAAK,EAAE,IAAI,CAAC,KAAK;SAClB,CAAC,CAAC,0FACJ;AACD,QAAA,IAAA,CAAA,sBAAsB,GAAG,MAAM,CAAU,KAAK,6FAAC;QAKvC,IAAA,CAAA,eAAe,GAAG,CAAC;AAKzB,QAAA,IAAI,CAAC,QAAQ,GAAG,cAAc;;QAE9B,MAAM,CAAC,MAAK;YACV,IAAI,CAAC,KAAK,EAAE;AACZ,YAAA,IAAI,CAAC,eAAe,GAAG,CAAC;;AAGxB,YAAA,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE,EAAE;;gBAErB,eAAe,CACb,MAAK;AACH,oBAAA,IAAI,IAAI,CAAC,mBAAmB,EAAE,aAAa,EAAE;wBAC3C,IAAI,CAAC,yBAAyB,EAAE;oBAClC;gBACF,CAAC,EACD,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,CAC5B;YACH;AACF,QAAA,CAAC,CAAC;;QAGF,MAAM,CAAC,MAAK;AACV,YAAA,MAAM,mBAAmB,GAAG,IAAI,CAAC,SAAS,EAAE;YAE5C,IAAI,IAAI,CAAC,oBAAoB,KAAK,IAAI,IAAI,mBAAmB,KAAK,KAAK,EAAE;;gBAEvE,eAAe,CACb,MAAK;oBACH,IAAI,CAAC,mBAAmB,EAAE;gBAC5B,CAAC,EACD,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,CAC5B;YACH;AAEA,YAAA,IAAI,CAAC,oBAAoB,GAAG,mBAAmB;AACjD,QAAA,CAAC,CAAC;IACJ;IAEA,eAAe,GAAA;QACb,IAAI,CAAC,yBAAyB,EAAE;QAChC,IAAI,CAAC,mBAAmB,EAAE;IAC5B;IAEA,WAAW,GAAA;AACT,QAAA,IAAI,CAAC,cAAc,EAAE,UAAU,EAAE;IACnC;IAEQ,yBAAyB,GAAA;AAC/B,QAAA,IAAI,CAAC,IAAI,CAAC,mBAAmB,EAAE,aAAa,IAAI,IAAI,CAAC,KAAK,EAAE,CAAC,MAAM,KAAK,CAAC,EAAE;YACzE,IAAI,CAAC,iBAAiB,EAAE;YACxB;QACF;AAEA,QAAA,MAAM,OAAO,GAAG,IAAI,CAAC,mBAAmB,CAAC,aAAa;QACtD,MAAM,qBAAqB,GAAG,OAAO,CAAC,WAAW,GAAG,OAAO,CAAC,WAAW;QAEvE,IAAI,qBAAqB,EAAE;YACzB,IAAI,CAAC,cAAc,EAAE;QACvB;AAAO,aAAA,IAAI,IAAI,CAAC,eAAe,GAAG,CAAC,EAAE;;YAEnC,IAAI,CAAC,iBAAiB,EAAE;QAC1B;aAAO;YACL,IAAI,CAAC,iBAAiB,EAAE;QAC1B;IACF;IAEQ,cAAc,GAAA;QACpB,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,eAAe,GAAG,CAAC,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC,MAAM,GAAG,CAAC,CAAC;QAElF,IAAI,CAAC,gBAAgB,EAAE;AACvB,QAAA,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,IAAI,CAAC;;;QAI5B,UAAU,CAAC,MAAK;AACd,YAAA,IAAI,IAAI,CAAC,mBAAmB,EAAE,aAAa,EAAE;AAC3C,gBAAA,MAAM,OAAO,GAAG,IAAI,CAAC,mBAAmB,CAAC,aAAa;gBACtD,MAAM,gBAAgB,GAAG,OAAO,CAAC,WAAW,GAAG,OAAO,CAAC,WAAW;AAElE,gBAAA,IAAI,gBAAgB,IAAI,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,KAAK,EAAE,CAAC,MAAM,GAAG,CAAC,EAAE;oBACtE,IAAI,CAAC,cAAc,EAAE;gBACvB;AAAO,qBAAA,IAAI,gBAAgB,IAAI,IAAI,CAAC,eAAe,KAAK,IAAI,CAAC,KAAK,EAAE,CAAC,MAAM,GAAG,CAAC,EAAE;AAC/E,oBAAA,IAAI,CAAC,sBAAsB,CAAC,GAAG,CAAC,IAAI,CAAC;gBACvC;YACF;QACF,CAAC,EAAE,CAAC,CAAC;IACP;IAEQ,iBAAiB,GAAA;AACvB,QAAA,MAAM,mBAAmB,GAAG,IAAI,CAAC,eAAe,GAAG,CAAC;AAEpD,QAAA,IAAI,mBAAmB,IAAI,CAAC,EAAE;YAC5B,MAAM,gBAAgB,GAAG,IAAI,CAAC,KAAK,EAAE,CAAC,KAAK,CAAC,mBAAmB,CAAC;YAChE,MAAM,iBAAiB,GAAG,mBAAmB,GAAG,CAAC,GAAG,IAAI,CAAC,KAAK,EAAE,CAAC,KAAK,CAAC,CAAC,EAAE,mBAAmB,CAAC,GAAG,EAAE;AAEnG,YAAA,IAAI,CAAC,YAAY,CAAC,GAAG,CAAC,gBAAgB,CAAC;AACvC,YAAA,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,iBAAiB,CAAC;;AAGzC,YAAA,IAAI,CAAC,sBAAsB,CAAC,GAAG,CAAC,KAAK,CAAC;;YAGtC,UAAU,CAAC,MAAK;AACd,gBAAA,IAAI,IAAI,CAAC,mBAAmB,EAAE,aAAa,EAAE;AAC3C,oBAAA,MAAM,OAAO,GAAG,IAAI,CAAC,mBAAmB,CAAC,aAAa;oBACtD,MAAM,WAAW,GAAG,OAAO,CAAC,WAAW,GAAG,OAAO,CAAC,WAAW;oBAE7D,IAAI,CAAC,WAAW,EAAE;;AAEhB,wBAAA,IAAI,CAAC,eAAe,GAAG,mBAAmB;wBAC1C,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,IAAI,CAAC,eAAe,GAAG,CAAC,CAAC;;AAGhD,wBAAA,IAAI,IAAI,CAAC,eAAe,GAAG,CAAC,EAAE;;4BAE5B,UAAU,CAAC,MAAM,IAAI,CAAC,iBAAiB,EAAE,EAAE,CAAC,CAAC;wBAC/C;oBACF;yBAAO;;wBAEL,IAAI,CAAC,gBAAgB,EAAE;;wBAGvB,UAAU,CAAC,MAAK;AACd,4BAAA,IAAI,IAAI,CAAC,mBAAmB,EAAE,aAAa,EAAE;AAC3C,gCAAA,MAAM,gBAAgB,GAAG,IAAI,CAAC,mBAAmB,CAAC,aAAa;gCAC/D,MAAM,gBAAgB,GAAG,gBAAgB,CAAC,WAAW,GAAG,gBAAgB,CAAC,WAAW;AAEpF,gCAAA,IAAI,gBAAgB,IAAI,IAAI,CAAC,eAAe,KAAK,IAAI,CAAC,KAAK,EAAE,CAAC,MAAM,GAAG,CAAC,EAAE;AACxE,oCAAA,IAAI,CAAC,sBAAsB,CAAC,GAAG,CAAC,IAAI,CAAC;gCACvC;4BACF;wBACF,CAAC,EAAE,CAAC,CAAC;oBACP;gBACF;YACF,CAAC,EAAE,CAAC,CAAC;QACP;aAAO;;YAEL,IAAI,CAAC,iBAAiB,EAAE;;YAGxB,UAAU,CAAC,MAAK;AACd,gBAAA,IAAI,IAAI,CAAC,mBAAmB,EAAE,aAAa,EAAE;AAC3C,oBAAA,MAAM,OAAO,GAAG,IAAI,CAAC,mBAAmB,CAAC,aAAa;oBACtD,MAAM,WAAW,GAAG,OAAO,CAAC,WAAW,GAAG,OAAO,CAAC,WAAW;oBAE7D,IAAI,WAAW,EAAE;;AAEf,wBAAA,IAAI,CAAC,eAAe,GAAG,CAAC,CAAC;wBACzB,IAAI,CAAC,cAAc,EAAE;oBACvB;gBACF;YACF,CAAC,EAAE,CAAC,CAAC;QACP;IACF;IAEQ,gBAAgB,GAAA;AACtB,QAAA,IAAI,IAAI,CAAC,eAAe,GAAG,CAAC,EAAE;AAC5B,YAAA,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,IAAI,CAAC,KAAK,EAAE,CAAC,KAAK,CAAC,CAAC,EAAE,IAAI,CAAC,eAAe,CAAC,CAAC;AACnE,YAAA,IAAI,CAAC,YAAY,CAAC,GAAG,CAAC,IAAI,CAAC,KAAK,EAAE,CAAC,KAAK,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC;QACjE;aAAO;YACL,IAAI,CAAC,iBAAiB,EAAE;QAC1B;IACF;IAEQ,iBAAiB,GAAA;QACvB,IAAI,CAAC,YAAY,CAAC,GAAG,CAAC,IAAI,CAAC,KAAK,EAAE,CAAC;AACnC,QAAA,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,EAAE,CAAC;AAC1B,QAAA,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,KAAK,CAAC;AAC7B,QAAA,IAAI,CAAC,sBAAsB,CAAC,GAAG,CAAC,KAAK,CAAC;AACtC,QAAA,IAAI,CAAC,eAAe,GAAG,CAAC;IAC1B;IAEQ,mBAAmB,GAAA;AACzB,QAAA,IAAI,CAAC,IAAI,CAAC,mBAAmB,EAAE,aAAa,EAAE;YAC5C;QACF;AAEA,QAAA,IAAI,CAAC,cAAc,GAAG,IAAI,cAAc,CAAC,MAAK;YAC5C,IAAI,CAAC,yBAAyB,EAAE;AAClC,QAAA,CAAC,CAAC;QAEF,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,IAAI,CAAC,mBAAmB,CAAC,aAAa,CAAC;IACrE;+GArNW,mBAAmB,EAAA,IAAA,EAAA,CAAA,EAAA,KAAA,EAAA,EAAA,CAAA,QAAA,EAAA,CAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAAnB,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,IAAA,EAAA,mBAAmB,iwCC3ChC,owFAmEA,EAAA,MAAA,EAAA,CAAA,myHAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EDlCI,qBAAqB,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,eAAA,EAAA,QAAA,EAAA,WAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,SAAA,EAAA,OAAA,EAAA,cAAA,EAAA,UAAA,EAAA,UAAA,EAAA,UAAA,EAAA,SAAA,EAAA,kBAAA,EAAA,WAAA,EAAA,KAAA,EAAA,WAAA,EAAA,OAAA,EAAA,SAAA,EAAA,WAAA,EAAA,MAAA,EAAA,cAAA,EAAA,mBAAA,EAAA,kBAAA,EAAA,sBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,cAAA,EAAA,aAAA,EAAA,cAAA,EAAA,gBAAA,EAAA,iBAAA,EAAA,gBAAA,EAAA,eAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,YAAA,CAAA,EAAA,OAAA,EAAA,CAAA,kBAAA,EAAA,kBAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EACrB,2BAA2B,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,qBAAA,EAAA,QAAA,EAAA,kBAAA,EAAA,MAAA,EAAA,CAAA,SAAA,EAAA,aAAA,EAAA,WAAA,EAAA,kBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,aAAA,EAAA,oBAAA,EAAA,eAAA,EAAA,YAAA,EAAA,YAAA,EAAA,eAAA,EAAA,eAAA,EAAA,qBAAA,CAAA,EAAA,OAAA,EAAA,CAAA,YAAA,EAAA,YAAA,EAAA,YAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAC3B,UAAU,EAAA,QAAA,EAAA,cAAA,EAAA,MAAA,EAAA,CAAA,oBAAA,EAAA,4BAAA,EAAA,oBAAA,EAAA,qBAAA,EAAA,qBAAA,EAAA,yBAAA,EAAA,YAAA,EAAA,iBAAA,CAAA,EAAA,QAAA,EAAA,CAAA,YAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EACV,mBAAmB,sNACnB,iBAAiB,EAAA,QAAA,EAAA,aAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,OAAA,EAAA,YAAA,EAAA,WAAA,EAAA,kBAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,MAAA,EAAA,IAAA,EACjB,SAAS,EAAA,IAAA,EAAA,OAAA,EAAA,EAAA,EAAA,IAAA,EAAA,MAAA,EAAA,IAAA,EACT,eAAe,+CACf,YAAY,EAAA,IAAA,EAAA,UAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA;;4FAGH,mBAAmB,EAAA,UAAA,EAAA,CAAA;kBAhB/B,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,eAAe,EAAA,eAAA,EAGR,uBAAuB,CAAC,MAAM,EAAA,OAAA,EACtC;wBACP,qBAAqB;wBACrB,2BAA2B;wBAC3B,UAAU;wBACV,mBAAmB;wBACnB,iBAAiB;wBACjB,SAAS;wBACT,eAAe;wBACf,YAAY;AACb,qBAAA,EAAA,QAAA,EAAA,owFAAA,EAAA,MAAA,EAAA,CAAA,myHAAA,CAAA,EAAA;;sBAUA;;sBACA;;sBAcA,SAAS;uBAAC,qBAAqB;;;MExCrB,yBAAyB,CAAA;+GAAzB,yBAAyB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,QAAA,EAAA,CAAA,CAAA;AAAzB,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,mBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,yBAAyB,YAZlC,YAAY;YACZ,mBAAmB;YACnB,gBAAgB;YAChB,2BAA2B;YAC3B,qBAAqB;YACrB,iBAAiB;YACjB,eAAe;YACf,YAAY;AACZ,YAAA,mBAAmB,aAEX,mBAAmB,CAAA,EAAA,CAAA,CAAA;AAElB,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,mBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,yBAAyB,YAZlC,YAAY;YACZ,mBAAmB;YACnB,gBAAgB;YAChB,2BAA2B;YAC3B,qBAAqB;YACrB,iBAAiB;YAGjB,mBAAmB,CAAA,EAAA,CAAA,CAAA;;4FAIV,yBAAyB,EAAA,UAAA,EAAA,CAAA;kBAdrC,QAAQ;AAAC,YAAA,IAAA,EAAA,CAAA;AACR,oBAAA,OAAO,EAAE;wBACP,YAAY;wBACZ,mBAAmB;wBACnB,gBAAgB;wBAChB,2BAA2B;wBAC3B,qBAAqB;wBACrB,iBAAiB;wBACjB,eAAe;wBACf,YAAY;wBACZ,mBAAmB;AACpB,qBAAA;oBACD,OAAO,EAAE,CAAC,mBAAmB,CAAC;AAC/B,iBAAA;;;ACzBD;;AAEG;;;;"}

package/fesm2022/testgorilla-tgo-ui-components-device-control.mjs

@@ -0,0 +1,114 @@
+import * as i0 from '@angular/core';
+import { input, booleanAttribute, output, viewChild, inject, computed, ChangeDetectionStrategy, ViewEncapsulation, Component, NgModule } from '@angular/core';
+import { IconComponent } from '@testgorilla/tgo-ui/components/icon';
+import { OverflowMenuComponent } from '@testgorilla/tgo-ui/components/overflow-menu';
+import { TooltipPositionType, TooltipComponent } from '@testgorilla/tgo-ui/components/tooltip';
+import { CommonModule } from '@angular/common';
+
+/**
+ * Media device control: an on/off button paired with a device dropdown, generic across microphones,
+ * speakers and similar. The dropdown is `ui-overflow-menu`, so it behaves like every other menu.
+ */
+class DeviceControlComponent {
+    constructor() {
+        /**
+         * Shape of the control: `toggle` pairs an on/off button with the dropdown chevron; `menu` is a
+         * single button that opens the dropdown. Default: 'toggle'.
+         */
+        this.variant = input('toggle', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+        this.iconName = input('', ...(ngDevMode ? [{ debugName: "iconName" }] : /* istanbul ignore next */ []));
+        /** Icon shown while the device is off. Only used by the toggle variant. */
+        this.offIconName = input('', ...(ngDevMode ? [{ debugName: "offIconName" }] : /* istanbul ignore next */ []));
+        this.isOn = input(true, { ...(ngDevMode ? { debugName: "isOn" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /** Plays the icon's activity animation, for example while a test sound runs. */
+        this.isActive = input(false, { ...(ngDevMode ? { debugName: "isActive" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        this.options = input([], ...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
+        this.selectedValue = input('', ...(ngDevMode ? [{ debugName: "selectedValue" }] : /* istanbul ignore next */ []));
+        /** Tooltip and accessible name of the main button while the device is on. Rendered by the toggle variant. */
+        this.onTooltip = input.required(...(ngDevMode ? [{ debugName: "onTooltip" }] : /* istanbul ignore next */ []));
+        /** Tooltip and accessible name of the main button while the device is off. Rendered by the toggle variant. */
+        this.offTooltip = input.required(...(ngDevMode ? [{ debugName: "offTooltip" }] : /* istanbul ignore next */ []));
+        /** Tooltip and accessible name of the button that opens the dropdown, which every variant renders. */
+        this.menuTooltip = input.required(...(ngDevMode ? [{ debugName: "menuTooltip" }] : /* istanbul ignore next */ []));
+        /** Shows the error badge, for example when the device cannot be opened. */
+        this.hasError = input(false, { ...(ngDevMode ? { debugName: "hasError" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        this.errorLabel = input('', ...(ngDevMode ? [{ debugName: "errorLabel" }] : /* istanbul ignore next */ []));
+        /**
+         * Defines the application theme. Defaults to dark, the primary use case for this control; the
+         * light variant is available for reuse on light surfaces.
+         */
+        this.applicationTheme = input(undefined, ...(ngDevMode ? [{ debugName: "applicationTheme" }] : /* istanbul ignore next */ []));
+        /** Emits when the main button is used to switch the device on or off, with the new state. */
+        this.toggled = output();
+        /**
+         * Emits the value of the entry the user picked. An entry with an empty value is a placeholder,
+         * not a selectable option: picking it closes the dropdown without emitting.
+         */
+        this.optionSelected = output();
+        /** Emits when the dropdown opens, so the consumer can refresh the entries. */
+        this.menuOpened = output();
+        this.menuClosed = output();
+        this.overflowMenu = viewChild(OverflowMenuComponent, ...(ngDevMode ? [{ debugName: "overflowMenu" }] : /* istanbul ignore next */ []));
+        this.defaultAppTheme = inject('CANOPYUI_DEFAULT_APPLICATION_THEME', {
+            optional: true,
+        });
+        this.theme = computed(() => this.applicationTheme() ?? this.defaultAppTheme ?? 'dark', ...(ngDevMode ? [{ debugName: "theme" }] : /* istanbul ignore next */ []));
+        /** Open state of the dropdown, derived from the overflow menu so there is no mirror to drift. */
+        this.isMenuOpen = computed(() => this.overflowMenu()?.isMenuOpened() ?? false, ...(ngDevMode ? [{ debugName: "isMenuOpen" }] : /* istanbul ignore next */ []));
+        /** Tooltips sit above the control, which is anchored to the bottom of a call surface. */
+        this.tooltipPosition = TooltipPositionType.TOP;
+        /** The dropdown opens upwards, over the call surface the control sits at the bottom of. */
+        this.menuConfig = {
+            xPosition: 'after',
+            yPosition: 'above',
+            overlapTrigger: false,
+            panelClass: 'ui-device-control-panel',
+        };
+        this.menuButtons = computed(() => this.options().map(option => ({
+            label: option.label,
+            value: option.value,
+            isSelected: option.value === this.selectedValue(),
+        })), ...(ngDevMode ? [{ debugName: "menuButtons" }] : /* istanbul ignore next */ []));
+        this.mainTooltip = computed(() => (this.isOn() ? this.onTooltip() : this.offTooltip()), ...(ngDevMode ? [{ debugName: "mainTooltip" }] : /* istanbul ignore next */ []));
+        this.currentIconName = computed(() => (this.isOn() ? this.iconName() : this.offIconName()), ...(ngDevMode ? [{ debugName: "currentIconName" }] : /* istanbul ignore next */ []));
+    }
+    toggleDevice() {
+        this.closeMenu();
+        this.toggled.emit(!this.isOn());
+    }
+    closeMenu() {
+        this.overflowMenu()?.closeMenu();
+    }
+    selectOption(value) {
+        this.optionSelected.emit(value);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: DeviceControlComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: DeviceControlComponent, isStandalone: true, selector: "ui-device-control", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, iconName: { classPropertyName: "iconName", publicName: "iconName", isSignal: true, isRequired: false, transformFunction: null }, offIconName: { classPropertyName: "offIconName", publicName: "offIconName", isSignal: true, isRequired: false, transformFunction: null }, isOn: { classPropertyName: "isOn", publicName: "isOn", isSignal: true, isRequired: false, transformFunction: null }, isActive: { classPropertyName: "isActive", publicName: "isActive", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, selectedValue: { classPropertyName: "selectedValue", publicName: "selectedValue", isSignal: true, isRequired: false, transformFunction: null }, onTooltip: { classPropertyName: "onTooltip", publicName: "onTooltip", isSignal: true, isRequired: true, transformFunction: null }, offTooltip: { classPropertyName: "offTooltip", publicName: "offTooltip", isSignal: true, isRequired: true, transformFunction: null }, menuTooltip: { classPropertyName: "menuTooltip", publicName: "menuTooltip", isSignal: true, isRequired: true, transformFunction: null }, hasError: { classPropertyName: "hasError", publicName: "hasError", isSignal: true, isRequired: false, transformFunction: null }, errorLabel: { classPropertyName: "errorLabel", publicName: "errorLabel", isSignal: true, isRequired: false, transformFunction: null }, applicationTheme: { classPropertyName: "applicationTheme", publicName: "applicationTheme", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { toggled: "toggled", optionSelected: "optionSelected", menuOpened: "menuOpened", menuClosed: "menuClosed" }, host: { properties: { "attr.theme": "theme()" }, classAttribute: "ui-device-control" }, viewQueries: [{ propertyName: "overflowMenu", first: true, predicate: OverflowMenuComponent, descendants: true, isSignal: true }], ngImport: i0, template: "@if (variant() === 'toggle') {\n  <ui-tooltip [position]=\"tooltipPosition\" [message]=\"mainTooltip()\" [applicationTheme]=\"theme()\">\n    <button\n      type=\"button\"\n      class=\"ui-device-control__main\"\n      data-testid=\"device-control-main\"\n      [class.ui-device-control__main--off]=\"!isOn()\"\n      [class.ui-device-control__main--active]=\"isActive()\"\n      [attr.aria-label]=\"mainTooltip()\"\n      (click)=\"toggleDevice()\"\n    >\n      <ui-icon size=\"24\" color=\"currentColor\" [name]=\"currentIconName()\"></ui-icon>\n    </button>\n  </ui-tooltip>\n}\n\n<ui-tooltip [position]=\"tooltipPosition\" [message]=\"menuTooltip()\" [applicationTheme]=\"theme()\">\n  <ui-overflow-menu\n    data-testid=\"device-control-menu-toggle\"\n    selectionMode=\"single\"\n    [buttons]=\"menuButtons()\"\n    [isDynamicMenu]=\"true\"\n    [menuConfig]=\"menuConfig\"\n    [contentTemplateRef]=\"opener\"\n    [applicationTheme]=\"theme()\"\n    [ariaLabel]=\"menuTooltip()\"\n    (selectItem)=\"selectOption($event)\"\n    (menuOpened)=\"menuOpened.emit()\"\n    (menuClosed)=\"menuClosed.emit()\"\n  >\n    <div menu-content class=\"ui-device-control__menu-footer\">\n      <ng-content select=\"[uiDeviceControlMenuFooter]\"></ng-content>\n    </div>\n  </ui-overflow-menu>\n</ui-tooltip>\n\n<ng-template #opener>\n  @if (variant() === 'menu') {\n    <span\n      class=\"ui-device-control__opener-icon\"\n      [class.ui-device-control__opener-icon--active]=\"isActive()\"\n      data-testid=\"device-control-opener-icon\"\n    >\n      <ui-icon size=\"24\" color=\"currentColor\" [name]=\"iconName()\"></ui-icon>\n    </span>\n  }\n  <span class=\"ui-device-control__opener-chevron\">\n    <ui-icon\n      size=\"16\"\n      color=\"currentColor\"\n      [name]=\"isMenuOpen() ? 'Arrow-chevron-up-in-line' : 'Arrow-chevron-down-in-line'\"\n    ></ui-icon>\n  </span>\n</ng-template>\n\n@if (hasError()) {\n  <span class=\"ui-device-control__error\" role=\"img\" [attr.aria-label]=\"errorLabel()\" data-testid=\"device-control-error\">\n    <ui-icon size=\"16\" color=\"currentColor\" name=\"Error-filled\"></ui-icon>\n  </span>\n}\n", styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}.ui-device-control{--ui-device-control-surface: #242424;--ui-device-control-border: #ffffff;--ui-device-control-text: #ffffff;--ui-device-control-hover: #666666;--ui-device-control-pressed: #666666;--ui-device-control-focus-inner: #242424;--ui-device-control-focus-outer: #ffffff;position:relative;display:inline-flex;align-items:center;gap:4px;padding-right:8px;border:1px solid var(--ui-device-control-border);border-radius:999px;background-color:var(--ui-device-control-surface);color:var(--ui-device-control-text)}.ui-device-control ui-tooltip,.ui-device-control ui-overflow-menu,.ui-device-control .overflow-menu-container{display:flex}.ui-device-control .overflow-menu-opener,.ui-device-control .overflow-menu-opener.content-template{display:flex;align-items:center;justify-content:center;gap:4px;width:auto;height:40px;padding:0;border-radius:999px;color:inherit}.ui-device-control .overflow-menu-opener:hover,.ui-device-control .overflow-menu-opener.content-template:hover{background-color:var(--ui-device-control-hover)}.ui-device-control .overflow-menu-opener:active,.ui-device-control .overflow-menu-opener.content-template:active{background-color:var(--ui-device-control-pressed)}.ui-device-control .overflow-menu-opener:focus-visible,.ui-device-control .overflow-menu-opener.content-template:focus-visible{outline:none;animation:none;box-shadow:0 0 0 2px var(--ui-device-control-focus-inner),0 0 0 6px var(--ui-device-control-focus-outer)}.ui-device-control__main{display:flex;align-items:center;justify-content:center;height:40px;padding:0 20px;border:1px solid var(--ui-device-control-border);border-radius:999px;background:none;color:inherit;cursor:pointer}.ui-device-control__main:hover{background-color:var(--ui-device-control-hover)}.ui-device-control__main:active{background-color:var(--ui-device-control-pressed)}.ui-device-control__main:focus-visible{outline:none;box-shadow:0 0 0 2px var(--ui-device-control-focus-inner),0 0 0 6px var(--ui-device-control-focus-outer)}.ui-device-control__main--off{border-color:transparent;background-color:#e02800;color:#fff}.ui-device-control__main--off:hover{background-color:#ff3003}.ui-device-control__main--off:active{background-color:#ff6e4f}.ui-device-control__main--active ui-icon{animation:ui-device-control-pulse .6s ease-in-out infinite}.ui-device-control__opener-icon{display:flex;align-items:center;justify-content:center;height:40px;padding:0 20px;border:1px solid var(--ui-device-control-border);border-radius:999px}.ui-device-control__opener-icon--active ui-icon{animation:ui-device-control-pulse .6s ease-in-out infinite}.ui-device-control__opener-chevron{display:flex;align-items:center;justify-content:center;width:24px;height:40px}.ui-device-control__error{position:absolute;top:-4px;right:-4px;display:flex;width:16px;height:16px;color:#e02800;pointer-events:none}.ui-device-control[theme=light]{--ui-device-control-surface: #ffffff;--ui-device-control-border: #242424;--ui-device-control-text: #242424;--ui-device-control-hover: #e9e9e9;--ui-device-control-pressed: #d3d3d3;--ui-device-control-focus-inner: #ffffff;--ui-device-control-focus-outer: #242424}.mat-mdc-menu-panel.overflow-menu.ui-device-control-panel{width:247px;max-width:calc(100vw - 32px);border-radius:10px;background-color:#fff;color:#242424;box-shadow:0 4px 16px #24242414}.mat-mdc-menu-panel.overflow-menu.ui-device-control-panel .mat-mdc-menu-content{padding:0}.mat-mdc-menu-panel.overflow-menu.ui-device-control-panel .mat-mdc-menu-item{min-height:48px;height:48px;padding:0 16px}.mat-mdc-menu-panel.overflow-menu.ui-device-control-panel .mat-mdc-menu-item:hover,.mat-mdc-menu-panel.overflow-menu.ui-device-control-panel .mat-mdc-menu-item[aria-checked=true]{background-color:#f4f4f4}.mat-mdc-menu-panel.overflow-menu.ui-device-control-panel .mat-mdc-menu-item:active{background-color:#e9e9e9}.mat-mdc-menu-panel.overflow-menu.ui-device-control-panel .mat-mdc-menu-item:focus-visible{outline:2px solid #0165fc;outline-offset:-2px}.mat-mdc-menu-panel.overflow-menu.ui-device-control-panel .mat-mdc-menu-item-text{display:flex;align-items:center;gap:16px;width:100%;overflow:hidden;color:#242424;font-family:inherit;font-size:14px;line-height:20px}.mat-mdc-menu-panel.overflow-menu.ui-device-control-panel .mat-mdc-menu-item-text .label{flex:1 1 auto;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.mat-mdc-menu-panel.overflow-menu.ui-device-control-panel .overflow-menu-selected-check{flex:0 0 16px;display:flex}.mat-mdc-menu-panel.overflow-menu.ui-device-control-panel [uiDeviceControlFooterItem]{display:flex;align-items:center;gap:16px;width:100%;height:48px;padding:0 16px;border:0;background:none;color:inherit;font-size:14px;line-height:20px;text-align:left;cursor:pointer}.mat-mdc-menu-panel.overflow-menu.ui-device-control-panel [uiDeviceControlFooterItem]:hover{background-color:#f4f4f4}.mat-mdc-menu-panel.overflow-menu.ui-device-control-panel [uiDeviceControlFooterItem]:active{background-color:#e9e9e9}.mat-mdc-menu-panel.overflow-menu.ui-device-control-panel [uiDeviceControlFooterItem]:focus-visible{outline:2px solid #0165fc;outline-offset:-2px}.mat-mdc-menu-panel.overflow-menu.ui-device-control-panel [uiDeviceControlFooterItem] span{flex:1 1 auto;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}@keyframes ui-device-control-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.25)}}@media(prefers-reduced-motion:reduce){.ui-device-control__main--active ui-icon,.ui-device-control__opener-icon--active ui-icon{animation:none}}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "ui-icon", inputs: ["size", "cssClass", "name", "color", "filled", "toggleIconStyle", "applicationTheme", "useFullIconName"] }, { kind: "component", type: OverflowMenuComponent, selector: "ui-overflow-menu", inputs: ["buttons", "iconTrigger", "menuLabel", "applicationTheme", "ariaLabel", "ariaRequired", "describedby", "contentTemplateRef", "buttonVariant", "buttonSize", "menuConfig", "selectionMode", "isDynamicMenu", "withRemovableOption"], outputs: ["selectItem", "menuOpened", "menuClosed"] }, { kind: "component", type: TooltipComponent, selector: "ui-tooltip", inputs: ["position", "disabled", "message", "applicationTheme", "labelForDefinition", "definitionTooltipSize", "variant"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: DeviceControlComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ui-device-control', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        class: 'ui-device-control',
+                        '[attr.theme]': 'theme()',
+                    }, imports: [IconComponent, OverflowMenuComponent, TooltipComponent], template: "@if (variant() === 'toggle') {\n  <ui-tooltip [position]=\"tooltipPosition\" [message]=\"mainTooltip()\" [applicationTheme]=\"theme()\">\n    <button\n      type=\"button\"\n      class=\"ui-device-control__main\"\n      data-testid=\"device-control-main\"\n      [class.ui-device-control__main--off]=\"!isOn()\"\n      [class.ui-device-control__main--active]=\"isActive()\"\n      [attr.aria-label]=\"mainTooltip()\"\n      (click)=\"toggleDevice()\"\n    >\n      <ui-icon size=\"24\" color=\"currentColor\" [name]=\"currentIconName()\"></ui-icon>\n    </button>\n  </ui-tooltip>\n}\n\n<ui-tooltip [position]=\"tooltipPosition\" [message]=\"menuTooltip()\" [applicationTheme]=\"theme()\">\n  <ui-overflow-menu\n    data-testid=\"device-control-menu-toggle\"\n    selectionMode=\"single\"\n    [buttons]=\"menuButtons()\"\n    [isDynamicMenu]=\"true\"\n    [menuConfig]=\"menuConfig\"\n    [contentTemplateRef]=\"opener\"\n    [applicationTheme]=\"theme()\"\n    [ariaLabel]=\"menuTooltip()\"\n    (selectItem)=\"selectOption($event)\"\n    (menuOpened)=\"menuOpened.emit()\"\n    (menuClosed)=\"menuClosed.emit()\"\n  >\n    <div menu-content class=\"ui-device-control__menu-footer\">\n      <ng-content select=\"[uiDeviceControlMenuFooter]\"></ng-content>\n    </div>\n  </ui-overflow-menu>\n</ui-tooltip>\n\n<ng-template #opener>\n  @if (variant() === 'menu') {\n    <span\n      class=\"ui-device-control__opener-icon\"\n      [class.ui-device-control__opener-icon--active]=\"isActive()\"\n      data-testid=\"device-control-opener-icon\"\n    >\n      <ui-icon size=\"24\" color=\"currentColor\" [name]=\"iconName()\"></ui-icon>\n    </span>\n  }\n  <span class=\"ui-device-control__opener-chevron\">\n    <ui-icon\n      size=\"16\"\n      color=\"currentColor\"\n      [name]=\"isMenuOpen() ? 'Arrow-chevron-up-in-line' : 'Arrow-chevron-down-in-line'\"\n    ></ui-icon>\n  </span>\n</ng-template>\n\n@if (hasError()) {\n  <span class=\"ui-device-control__error\" role=\"img\" [attr.aria-label]=\"errorLabel()\" data-testid=\"device-control-error\">\n    <ui-icon size=\"16\" color=\"currentColor\" name=\"Error-filled\"></ui-icon>\n  </span>\n}\n", styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}.ui-device-control{--ui-device-control-surface: #242424;--ui-device-control-border: #ffffff;--ui-device-control-text: #ffffff;--ui-device-control-hover: #666666;--ui-device-control-pressed: #666666;--ui-device-control-focus-inner: #242424;--ui-device-control-focus-outer: #ffffff;position:relative;display:inline-flex;align-items:center;gap:4px;padding-right:8px;border:1px solid var(--ui-device-control-border);border-radius:999px;background-color:var(--ui-device-control-surface);color:var(--ui-device-control-text)}.ui-device-control ui-tooltip,.ui-device-control ui-overflow-menu,.ui-device-control .overflow-menu-container{display:flex}.ui-device-control .overflow-menu-opener,.ui-device-control .overflow-menu-opener.content-template{display:flex;align-items:center;justify-content:center;gap:4px;width:auto;height:40px;padding:0;border-radius:999px;color:inherit}.ui-device-control .overflow-menu-opener:hover,.ui-device-control .overflow-menu-opener.content-template:hover{background-color:var(--ui-device-control-hover)}.ui-device-control .overflow-menu-opener:active,.ui-device-control .overflow-menu-opener.content-template:active{background-color:var(--ui-device-control-pressed)}.ui-device-control .overflow-menu-opener:focus-visible,.ui-device-control .overflow-menu-opener.content-template:focus-visible{outline:none;animation:none;box-shadow:0 0 0 2px var(--ui-device-control-focus-inner),0 0 0 6px var(--ui-device-control-focus-outer)}.ui-device-control__main{display:flex;align-items:center;justify-content:center;height:40px;padding:0 20px;border:1px solid var(--ui-device-control-border);border-radius:999px;background:none;color:inherit;cursor:pointer}.ui-device-control__main:hover{background-color:var(--ui-device-control-hover)}.ui-device-control__main:active{background-color:var(--ui-device-control-pressed)}.ui-device-control__main:focus-visible{outline:none;box-shadow:0 0 0 2px var(--ui-device-control-focus-inner),0 0 0 6px var(--ui-device-control-focus-outer)}.ui-device-control__main--off{border-color:transparent;background-color:#e02800;color:#fff}.ui-device-control__main--off:hover{background-color:#ff3003}.ui-device-control__main--off:active{background-color:#ff6e4f}.ui-device-control__main--active ui-icon{animation:ui-device-control-pulse .6s ease-in-out infinite}.ui-device-control__opener-icon{display:flex;align-items:center;justify-content:center;height:40px;padding:0 20px;border:1px solid var(--ui-device-control-border);border-radius:999px}.ui-device-control__opener-icon--active ui-icon{animation:ui-device-control-pulse .6s ease-in-out infinite}.ui-device-control__opener-chevron{display:flex;align-items:center;justify-content:center;width:24px;height:40px}.ui-device-control__error{position:absolute;top:-4px;right:-4px;display:flex;width:16px;height:16px;color:#e02800;pointer-events:none}.ui-device-control[theme=light]{--ui-device-control-surface: #ffffff;--ui-device-control-border: #242424;--ui-device-control-text: #242424;--ui-device-control-hover: #e9e9e9;--ui-device-control-pressed: #d3d3d3;--ui-device-control-focus-inner: #ffffff;--ui-device-control-focus-outer: #242424}.mat-mdc-menu-panel.overflow-menu.ui-device-control-panel{width:247px;max-width:calc(100vw - 32px);border-radius:10px;background-color:#fff;color:#242424;box-shadow:0 4px 16px #24242414}.mat-mdc-menu-panel.overflow-menu.ui-device-control-panel .mat-mdc-menu-content{padding:0}.mat-mdc-menu-panel.overflow-menu.ui-device-control-panel .mat-mdc-menu-item{min-height:48px;height:48px;padding:0 16px}.mat-mdc-menu-panel.overflow-menu.ui-device-control-panel .mat-mdc-menu-item:hover,.mat-mdc-menu-panel.overflow-menu.ui-device-control-panel .mat-mdc-menu-item[aria-checked=true]{background-color:#f4f4f4}.mat-mdc-menu-panel.overflow-menu.ui-device-control-panel .mat-mdc-menu-item:active{background-color:#e9e9e9}.mat-mdc-menu-panel.overflow-menu.ui-device-control-panel .mat-mdc-menu-item:focus-visible{outline:2px solid #0165fc;outline-offset:-2px}.mat-mdc-menu-panel.overflow-menu.ui-device-control-panel .mat-mdc-menu-item-text{display:flex;align-items:center;gap:16px;width:100%;overflow:hidden;color:#242424;font-family:inherit;font-size:14px;line-height:20px}.mat-mdc-menu-panel.overflow-menu.ui-device-control-panel .mat-mdc-menu-item-text .label{flex:1 1 auto;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.mat-mdc-menu-panel.overflow-menu.ui-device-control-panel .overflow-menu-selected-check{flex:0 0 16px;display:flex}.mat-mdc-menu-panel.overflow-menu.ui-device-control-panel [uiDeviceControlFooterItem]{display:flex;align-items:center;gap:16px;width:100%;height:48px;padding:0 16px;border:0;background:none;color:inherit;font-size:14px;line-height:20px;text-align:left;cursor:pointer}.mat-mdc-menu-panel.overflow-menu.ui-device-control-panel [uiDeviceControlFooterItem]:hover{background-color:#f4f4f4}.mat-mdc-menu-panel.overflow-menu.ui-device-control-panel [uiDeviceControlFooterItem]:active{background-color:#e9e9e9}.mat-mdc-menu-panel.overflow-menu.ui-device-control-panel [uiDeviceControlFooterItem]:focus-visible{outline:2px solid #0165fc;outline-offset:-2px}.mat-mdc-menu-panel.overflow-menu.ui-device-control-panel [uiDeviceControlFooterItem] span{flex:1 1 auto;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}@keyframes ui-device-control-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.25)}}@media(prefers-reduced-motion:reduce){.ui-device-control__main--active ui-icon,.ui-device-control__opener-icon--active ui-icon{animation:none}}\n"] }]
+        }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], iconName: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconName", required: false }] }], offIconName: [{ type: i0.Input, args: [{ isSignal: true, alias: "offIconName", required: false }] }], isOn: [{ type: i0.Input, args: [{ isSignal: true, alias: "isOn", required: false }] }], isActive: [{ type: i0.Input, args: [{ isSignal: true, alias: "isActive", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], selectedValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedValue", required: false }] }], onTooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "onTooltip", required: true }] }], offTooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "offTooltip", required: true }] }], menuTooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "menuTooltip", required: true }] }], hasError: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasError", required: false }] }], errorLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorLabel", required: false }] }], applicationTheme: [{ type: i0.Input, args: [{ isSignal: true, alias: "applicationTheme", required: false }] }], toggled: [{ type: i0.Output, args: ["toggled"] }], optionSelected: [{ type: i0.Output, args: ["optionSelected"] }], menuOpened: [{ type: i0.Output, args: ["menuOpened"] }], menuClosed: [{ type: i0.Output, args: ["menuClosed"] }], overflowMenu: [{ type: i0.ViewChild, args: [i0.forwardRef(() => OverflowMenuComponent), { isSignal: true }] }] } });
+
+class DeviceControlComponentModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: DeviceControlComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.19", ngImport: i0, type: DeviceControlComponentModule, imports: [CommonModule, DeviceControlComponent], exports: [DeviceControlComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: DeviceControlComponentModule, imports: [CommonModule, DeviceControlComponent] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: DeviceControlComponentModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [CommonModule, DeviceControlComponent],
+                    exports: [DeviceControlComponent],
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { DeviceControlComponent, DeviceControlComponentModule };
+//# sourceMappingURL=testgorilla-tgo-ui-components-device-control.mjs.map

package/fesm2022/testgorilla-tgo-ui-components-device-control.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"testgorilla-tgo-ui-components-device-control.mjs","sources":["../../../components/device-control/device-control.component.ts","../../../components/device-control/device-control.component.html","../../../components/device-control/device-control.component.module.ts","../../../components/device-control/testgorilla-tgo-ui-components-device-control.ts"],"sourcesContent":["import {\n  booleanAttribute,\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  inject,\n  input,\n  output,\n  viewChild,\n  ViewEncapsulation,\n} from '@angular/core';\n\nimport { ApplicationTheme } from '@testgorilla/tgo-ui/components/core';\nimport { IconComponent, IconName } from '@testgorilla/tgo-ui/components/icon';\nimport {\n  MenuConfig,\n  OverflowMenuButtonsType,\n  OverflowMenuComponent,\n} from '@testgorilla/tgo-ui/components/overflow-menu';\nimport { TooltipComponent, TooltipPositionType } from '@testgorilla/tgo-ui/components/tooltip';\n\nimport { DeviceControlOption, DeviceControlVariant } from './device-control.model';\n\n/**\n * Media device control: an on/off button paired with a device dropdown, generic across microphones,\n * speakers and similar. The dropdown is `ui-overflow-menu`, so it behaves like every other menu.\n */\n@Component({\n  selector: 'ui-device-control',\n  templateUrl: './device-control.component.html',\n  styleUrls: ['./device-control.component.scss'],\n  // The dropdown renders in the CDK overlay, outside this component's subtree, so its styles have\n  // to stay global.\n  encapsulation: ViewEncapsulation.None,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n    class: 'ui-device-control',\n    '[attr.theme]': 'theme()',\n  },\n  imports: [IconComponent, OverflowMenuComponent, TooltipComponent],\n})\nexport class DeviceControlComponent {\n  /**\n   * Shape of the control: `toggle` pairs an on/off button with the dropdown chevron; `menu` is a\n   * single button that opens the dropdown. Default: 'toggle'.\n   */\n  readonly variant = input<DeviceControlVariant>('toggle');\n\n  readonly iconName = input<IconName>('');\n\n  /** Icon shown while the device is off. Only used by the toggle variant. */\n  readonly offIconName = input<IconName>('');\n\n  readonly isOn = input(true, { transform: booleanAttribute });\n\n  /** Plays the icon's activity animation, for example while a test sound runs. */\n  readonly isActive = input(false, { transform: booleanAttribute });\n\n  readonly options = input<DeviceControlOption[]>([]);\n\n  readonly selectedValue = input('');\n\n  /** Tooltip and accessible name of the main button while the device is on. Rendered by the toggle variant. */\n  readonly onTooltip = input.required<string>();\n\n  /** Tooltip and accessible name of the main button while the device is off. Rendered by the toggle variant. */\n  readonly offTooltip = input.required<string>();\n\n  /** Tooltip and accessible name of the button that opens the dropdown, which every variant renders. */\n  readonly menuTooltip = input.required<string>();\n\n  /** Shows the error badge, for example when the device cannot be opened. */\n  readonly hasError = input(false, { transform: booleanAttribute });\n\n  readonly errorLabel = input('');\n\n  /**\n   * Defines the application theme. Defaults to dark, the primary use case for this control; the\n   * light variant is available for reuse on light surfaces.\n   */\n  readonly applicationTheme = input<ApplicationTheme | undefined>(undefined);\n\n  /** Emits when the main button is used to switch the device on or off, with the new state. */\n  readonly toggled = output<boolean>();\n\n  /**\n   * Emits the value of the entry the user picked. An entry with an empty value is a placeholder,\n   * not a selectable option: picking it closes the dropdown without emitting.\n   */\n  readonly optionSelected = output<string>();\n\n  /** Emits when the dropdown opens, so the consumer can refresh the entries. */\n  readonly menuOpened = output<void>();\n\n  readonly menuClosed = output<void>();\n\n  private readonly overflowMenu = viewChild(OverflowMenuComponent);\n  private readonly defaultAppTheme = inject<ApplicationTheme>('CANOPYUI_DEFAULT_APPLICATION_THEME' as never, {\n    optional: true,\n  });\n\n  protected readonly theme = computed<ApplicationTheme>(\n    () => this.applicationTheme() ?? this.defaultAppTheme ?? 'dark'\n  );\n\n  /** Open state of the dropdown, derived from the overflow menu so there is no mirror to drift. */\n  readonly isMenuOpen = computed(() => this.overflowMenu()?.isMenuOpened() ?? false);\n\n  /** Tooltips sit above the control, which is anchored to the bottom of a call surface. */\n  protected readonly tooltipPosition = TooltipPositionType.TOP;\n\n  /** The dropdown opens upwards, over the call surface the control sits at the bottom of. */\n  protected readonly menuConfig: MenuConfig = {\n    xPosition: 'after',\n    yPosition: 'above',\n    overlapTrigger: false,\n    panelClass: 'ui-device-control-panel',\n  };\n\n  protected readonly menuButtons = computed<OverflowMenuButtonsType[]>(() =>\n    this.options().map(option => ({\n      label: option.label,\n      value: option.value,\n      isSelected: option.value === this.selectedValue(),\n    }))\n  );\n\n  protected readonly mainTooltip = computed(() => (this.isOn() ? this.onTooltip() : this.offTooltip()));\n\n  protected readonly currentIconName = computed<IconName>(() => (this.isOn() ? this.iconName() : this.offIconName()));\n\n  toggleDevice(): void {\n    this.closeMenu();\n    this.toggled.emit(!this.isOn());\n  }\n\n  closeMenu(): void {\n    this.overflowMenu()?.closeMenu();\n  }\n\n  selectOption(value: string): void {\n    this.optionSelected.emit(value);\n  }\n}\n","@if (variant() === 'toggle') {\n  <ui-tooltip [position]=\"tooltipPosition\" [message]=\"mainTooltip()\" [applicationTheme]=\"theme()\">\n    <button\n      type=\"button\"\n      class=\"ui-device-control__main\"\n      data-testid=\"device-control-main\"\n      [class.ui-device-control__main--off]=\"!isOn()\"\n      [class.ui-device-control__main--active]=\"isActive()\"\n      [attr.aria-label]=\"mainTooltip()\"\n      (click)=\"toggleDevice()\"\n    >\n      <ui-icon size=\"24\" color=\"currentColor\" [name]=\"currentIconName()\"></ui-icon>\n    </button>\n  </ui-tooltip>\n}\n\n<ui-tooltip [position]=\"tooltipPosition\" [message]=\"menuTooltip()\" [applicationTheme]=\"theme()\">\n  <ui-overflow-menu\n    data-testid=\"device-control-menu-toggle\"\n    selectionMode=\"single\"\n    [buttons]=\"menuButtons()\"\n    [isDynamicMenu]=\"true\"\n    [menuConfig]=\"menuConfig\"\n    [contentTemplateRef]=\"opener\"\n    [applicationTheme]=\"theme()\"\n    [ariaLabel]=\"menuTooltip()\"\n    (selectItem)=\"selectOption($event)\"\n    (menuOpened)=\"menuOpened.emit()\"\n    (menuClosed)=\"menuClosed.emit()\"\n  >\n    <div menu-content class=\"ui-device-control__menu-footer\">\n      <ng-content select=\"[uiDeviceControlMenuFooter]\"></ng-content>\n    </div>\n  </ui-overflow-menu>\n</ui-tooltip>\n\n<ng-template #opener>\n  @if (variant() === 'menu') {\n    <span\n      class=\"ui-device-control__opener-icon\"\n      [class.ui-device-control__opener-icon--active]=\"isActive()\"\n      data-testid=\"device-control-opener-icon\"\n    >\n      <ui-icon size=\"24\" color=\"currentColor\" [name]=\"iconName()\"></ui-icon>\n    </span>\n  }\n  <span class=\"ui-device-control__opener-chevron\">\n    <ui-icon\n      size=\"16\"\n      color=\"currentColor\"\n      [name]=\"isMenuOpen() ? 'Arrow-chevron-up-in-line' : 'Arrow-chevron-down-in-line'\"\n    ></ui-icon>\n  </span>\n</ng-template>\n\n@if (hasError()) {\n  <span class=\"ui-device-control__error\" role=\"img\" [attr.aria-label]=\"errorLabel()\" data-testid=\"device-control-error\">\n    <ui-icon size=\"16\" color=\"currentColor\" name=\"Error-filled\"></ui-icon>\n  </span>\n}\n","import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\n\nimport { DeviceControlComponent } from './device-control.component';\n\n@NgModule({\n  imports: [CommonModule, DeviceControlComponent],\n  exports: [DeviceControlComponent],\n})\nexport class DeviceControlComponentModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}