@testgorilla/tgo-ui 11.5.0-beta.1 → 11.6.0

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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"}

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

@@ -223,10 +223,10 @@ class DialogComponent {
             this.dismiss();
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: DialogComponent, deps: [{ token: 'CANOPYUI_DEFAULT_APPLICATION_THEME', optional: true }, { token: i1.MatDialogRef }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.18", type: DialogComponent, isStandalone: true, selector: "ui-dialog", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: false, isRequired: false, transformFunction: null }, showCloseButton: { classPropertyName: "showCloseButton", publicName: "showCloseButton", isSignal: false, isRequired: false, transformFunction: null }, canCloseFn: { classPropertyName: "canCloseFn", publicName: "canCloseFn", isSignal: false, isRequired: false, transformFunction: null }, secondaryButtonLabel: { classPropertyName: "secondaryButtonLabel", publicName: "secondaryButtonLabel", isSignal: false, isRequired: false, transformFunction: null }, footerMessage: { classPropertyName: "footerMessage", publicName: "footerMessage", isSignal: false, isRequired: false, transformFunction: null }, primaryButtonLabel: { classPropertyName: "primaryButtonLabel", publicName: "primaryButtonLabel", isSignal: false, isRequired: false, transformFunction: null }, primaryButtonIconName: { classPropertyName: "primaryButtonIconName", publicName: "primaryButtonIconName", isSignal: false, isRequired: false, transformFunction: null }, secondaryButtonType: { classPropertyName: "secondaryButtonType", publicName: "secondaryButtonType", isSignal: false, isRequired: false, transformFunction: null }, primaryButtonType: { classPropertyName: "primaryButtonType", publicName: "primaryButtonType", isSignal: false, isRequired: false, transformFunction: null }, primaryButtonDataTestId: { classPropertyName: "primaryButtonDataTestId", publicName: "primaryButtonDataTestId", isSignal: false, isRequired: false, transformFunction: null }, secondaryButtonDataTestId: { classPropertyName: "secondaryButtonDataTestId", publicName: "secondaryButtonDataTestId", isSignal: false, isRequired: false, transformFunction: null }, companyColor: { classPropertyName: "companyColor", publicName: "companyColor", isSignal: false, isRequired: false, transformFunction: null }, applicationTheme: { classPropertyName: "applicationTheme", publicName: "applicationTheme", isSignal: false, isRequired: false, transformFunction: null }, disablePrimaryButton: { classPropertyName: "disablePrimaryButton", publicName: "disablePrimaryButton", isSignal: false, isRequired: false, transformFunction: null }, primaryButtonTooltip: { classPropertyName: "primaryButtonTooltip", publicName: "primaryButtonTooltip", isSignal: false, isRequired: false, transformFunction: null }, disableClose: { classPropertyName: "disableClose", publicName: "disableClose", isSignal: false, isRequired: false, transformFunction: null }, shouldDisableButtons: { classPropertyName: "shouldDisableButtons", publicName: "shouldDisableButtons", isSignal: false, isRequired: false, transformFunction: null }, ariaLabelledby: { classPropertyName: "ariaLabelledby", publicName: "ariaLabelledby", isSignal: false, isRequired: false, transformFunction: null }, ariaDescribedby: { classPropertyName: "ariaDescribedby", publicName: "ariaDescribedby", isSignal: false, isRequired: false, transformFunction: null }, keyboardOpen: { classPropertyName: "keyboardOpen", publicName: "keyboardOpen", isSignal: false, isRequired: false, transformFunction: null }, primaryButtonIconPosition: { classPropertyName: "primaryButtonIconPosition", publicName: "primaryButtonIconPosition", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closeEvent: "closeEvent", secondaryButtonClickEvent: "secondaryButtonClickEvent", primaryButtonClickEvent: "primaryButtonClickEvent" }, host: { listeners: { "keydown.esc": "onEsc()" }, properties: { "style.--color": "this.companyColor" } }, queries: [{ propertyName: "customHeader", first: true, predicate: ["dialogHeader"], descendants: true }], viewQueries: [{ propertyName: "closeButton", first: true, predicate: ["closeButton"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"dialog-container\" [attr.theme]=\"applicationTheme\">\n  <div\n    mat-dialog-title\n    class=\"dialog-title\"\n    [attr.aria-modal]=\"true\"\n    [attr.aria-labelledby]=\"'labelledby'\"\n    [attr.aria-describedby]=\"'ariaDescribedby'\"\n  >\n    <span [style.display]=\"'none'\" id=\"ariaDescribedby\">{{ ariaDescribedby }}</span>\n\n    <!-- Default header content -->\n    @if (!hasCustomHeader) {\n      <h3 class=\"bold\" id=\"labelledby\">{{ title }}</h3>\n      @if (showCloseButton) {\n        <div>\n          <ui-button\n            #closeButton\n            [variant]=\"'icon-button'\"\n            [iconName]=\"'Close'\"\n            [companyColor]=\"applicationTheme === 'classic' ? '#000' : '#242424'\"\n            [applicationTheme]=\"applicationTheme\"\n            [tooltip]=\"('COMMON.CLOSE' | uiTranslate | async)!\"\n            (click)=\"onClose($event)\"\n            (buttonClickEvent)=\"dismiss()\"\n            id=\"dialog-close-button\"\n          ></ui-button>\n        </div>\n      }\n    }\n\n    <!-- Custom header content projection -->\n    <ng-content select=\"[dialogHeader]\"></ng-content>\n  </div>\n  <mat-dialog-content>\n    <ng-content></ng-content>\n  </mat-dialog-content>\n  @if (secondaryButtonLabel !== '' || primaryButtonLabel !== '') {\n    <div mat-dialog-actions [class.dialog-action-w-message]=\"!!footerMessage\">\n      @if (footerMessage) {\n        <div class=\"actions-footer-message\">{{ footerMessage }}</div>\n      }\n\n      <!-- Projected footer content, rendered to the left of the action buttons -->\n      <ng-content select=\"[dialogFooter]\"></ng-content>\n\n      @if (!!secondaryButtonLabel) {\n        <ui-button\n          [companyColor]=\"companyColor\"\n          [variant]=\"secondaryButtonType\"\n          [applicationTheme]=\"applicationTheme\"\n          [label]=\"secondaryButtonLabel\"\n          [attr.data-testid]=\"secondaryButtonDataTestId\"\n          (click)=\"onSecondaryButtonClick($event)\"\n        ></ui-button>\n      }\n      @if (!!primaryButtonLabel) {\n        <!-- The tooltip wraps the button: a disabled ui-button receives no pointer\n             events, so the tooltip must trigger from an enclosing element. -->\n        <ui-tooltip\n          class=\"primary-button-tooltip-trigger\"\n          [message]=\"primaryButtonTooltip\"\n          [applicationTheme]=\"applicationTheme\"\n        >\n          <ui-button\n            [iconPosition]=\"primaryButtonIconPosition()\"\n            [iconName]=\"primaryButtonIconName ? primaryButtonIconName : undefined\"\n            [variant]=\"primaryButtonType\"\n            [disabled]=\"disableButtons || disablePrimaryButton\"\n            [applicationTheme]=\"applicationTheme\"\n            (click)=\"onPrimaryButtonClick($event)\"\n            [label]=\"primaryButtonLabel\"\n            [companyColor]=\"companyColor\"\n            [attr.data-testid]=\"primaryButtonDataTestId\"\n          ></ui-button>\n        </ui-tooltip>\n      }\n    </div>\n  }\n\n  <!--  This is announcement for screen reader that dialog was closed-->\n  <div aria-live=\"assertive\" role=\"alert\" style=\"position: absolute; left: -9999px\">\n    @if (modalClosed) {\n      <span>{{ 'DIALOG.CLOSED' | uiTranslate | async }}</span>\n    }\n  </div>\n</div>\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-dialog-wrapper{display:flex;flex-flow:column}.ui-dialog-wrapper.small{width:600px}.ui-dialog-wrapper.large{width:956px}.ui-dialog-wrapper.x-large{width:1312px}.ui-dialog-wrapper .mat-mdc-dialog-container .mdc-dialog__container .mat-mdc-dialog-surface{border-radius:8px;padding:16px}.ui-dialog-wrapper.dark .mat-mdc-dialog-container .mdc-dialog__container .mat-mdc-dialog-surface,.ui-dialog-wrapper.light .mat-mdc-dialog-container .mdc-dialog__container .mat-mdc-dialog-surface{padding:32px}.ui-dialog-wrapper.dark .mat-mdc-dialog-container .mdc-dialog__container .mat-mdc-dialog-surface,.ui-dialog-wrapper.light .mat-mdc-dialog-container .mdc-dialog__container .mat-mdc-dialog-surface{border-radius:10px}.ui-dialog-wrapper.dark .dialog-title,.ui-dialog-wrapper.light .dialog-title{height:40px;padding:0;margin-bottom:32px}.ui-dialog-wrapper.dark .mat-mdc-dialog-content,.ui-dialog-wrapper.light .mat-mdc-dialog-content{padding:0}.ui-dialog-wrapper.dark .mat-mdc-dialog-actions,.ui-dialog-wrapper.light .mat-mdc-dialog-actions{padding:0;margin-top:32px}.ui-dialog-wrapper .mat-mdc-dialog-content{font-size:14px;color:#000;line-height:20px}.ui-dialog-wrapper.dark .mat-mdc-dialog-container{--mdc-dialog-container-color: #424242}.ui-dialog-wrapper.dark .mat-mdc-dialog-content{color:#fff!important}.ui-dialog-wrapper.dark .dialog-title{--mdc-dialog-subhead-color: #ffffff}.dialog-title{display:flex;flex-direction:row;justify-content:space-between;align-items:center;margin:0}.dialog-title .close{margin-right:-24px}.dialog-title:before{content:none}.mat-mdc-dialog-actions{display:flex;justify-content:flex-end;column-gap:16px;padding:16px 0 0;margin-bottom:0;min-height:48px}.mat-mdc-dialog-actions.dialog-action-w-message{justify-content:space-between}.mat-mdc-dialog-actions .actions-footer-message{flex:1 0 auto}.mat-mdc-dialog-actions [dialogFooter]{margin-right:auto}.mat-mdc-dialog-actions .primary-button-tooltip-trigger{display:inline-flex}@media(max-width:1024px){.ui-dialog-wrapper .mat-mdc-dialog-container .mdc-dialog__container .mat-mdc-dialog-surface{min-width:320px;max-width:600px;border-radius:0}.mat-mdc-dialog-content{max-height:524px}}@media(max-width:600px){.cdk-overlay-pane.ui-dialog-wrapper{max-width:100%!important;min-height:100%;display:flex;justify-content:center}.cdk-overlay-pane.ui-dialog-wrapper .mat-mdc-dialog-container .mdc-dialog__container .mat-mdc-dialog-surface{min-width:100%;max-width:100%;height:100%;display:flex;flex-grow:1;border-radius:0}.cdk-overlay-pane.ui-dialog-wrapper.x-large{height:100%}.cdk-overlay-pane.ui-dialog-wrapper.x-large .mat-mdc-dialog-container .mdc-dialog__container .mat-mdc-dialog-surface{padding:16px}ui-dialog{height:100%;display:flex;flex-flow:column}.mat-mdc-dialog-content{max-height:unset;display:flex;flex-grow:1;flex-direction:column}}\n"], dependencies: [{ kind: "directive", type: MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "component", type: TooltipComponent, selector: "ui-tooltip", inputs: ["position", "disabled", "message", "applicationTheme", "labelForDefinition", "definitionTooltipSize", "variant"] }, { kind: "component", type: 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: "directive", type: MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: UiTranslatePipe, name: "uiTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: DialogComponent, deps: [{ token: 'CANOPYUI_DEFAULT_APPLICATION_THEME', optional: true }, { token: i1.MatDialogRef }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: DialogComponent, isStandalone: true, selector: "ui-dialog", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: false, isRequired: false, transformFunction: null }, showCloseButton: { classPropertyName: "showCloseButton", publicName: "showCloseButton", isSignal: false, isRequired: false, transformFunction: null }, canCloseFn: { classPropertyName: "canCloseFn", publicName: "canCloseFn", isSignal: false, isRequired: false, transformFunction: null }, secondaryButtonLabel: { classPropertyName: "secondaryButtonLabel", publicName: "secondaryButtonLabel", isSignal: false, isRequired: false, transformFunction: null }, footerMessage: { classPropertyName: "footerMessage", publicName: "footerMessage", isSignal: false, isRequired: false, transformFunction: null }, primaryButtonLabel: { classPropertyName: "primaryButtonLabel", publicName: "primaryButtonLabel", isSignal: false, isRequired: false, transformFunction: null }, primaryButtonIconName: { classPropertyName: "primaryButtonIconName", publicName: "primaryButtonIconName", isSignal: false, isRequired: false, transformFunction: null }, secondaryButtonType: { classPropertyName: "secondaryButtonType", publicName: "secondaryButtonType", isSignal: false, isRequired: false, transformFunction: null }, primaryButtonType: { classPropertyName: "primaryButtonType", publicName: "primaryButtonType", isSignal: false, isRequired: false, transformFunction: null }, primaryButtonDataTestId: { classPropertyName: "primaryButtonDataTestId", publicName: "primaryButtonDataTestId", isSignal: false, isRequired: false, transformFunction: null }, secondaryButtonDataTestId: { classPropertyName: "secondaryButtonDataTestId", publicName: "secondaryButtonDataTestId", isSignal: false, isRequired: false, transformFunction: null }, companyColor: { classPropertyName: "companyColor", publicName: "companyColor", isSignal: false, isRequired: false, transformFunction: null }, applicationTheme: { classPropertyName: "applicationTheme", publicName: "applicationTheme", isSignal: false, isRequired: false, transformFunction: null }, disablePrimaryButton: { classPropertyName: "disablePrimaryButton", publicName: "disablePrimaryButton", isSignal: false, isRequired: false, transformFunction: null }, primaryButtonTooltip: { classPropertyName: "primaryButtonTooltip", publicName: "primaryButtonTooltip", isSignal: false, isRequired: false, transformFunction: null }, disableClose: { classPropertyName: "disableClose", publicName: "disableClose", isSignal: false, isRequired: false, transformFunction: null }, shouldDisableButtons: { classPropertyName: "shouldDisableButtons", publicName: "shouldDisableButtons", isSignal: false, isRequired: false, transformFunction: null }, ariaLabelledby: { classPropertyName: "ariaLabelledby", publicName: "ariaLabelledby", isSignal: false, isRequired: false, transformFunction: null }, ariaDescribedby: { classPropertyName: "ariaDescribedby", publicName: "ariaDescribedby", isSignal: false, isRequired: false, transformFunction: null }, keyboardOpen: { classPropertyName: "keyboardOpen", publicName: "keyboardOpen", isSignal: false, isRequired: false, transformFunction: null }, primaryButtonIconPosition: { classPropertyName: "primaryButtonIconPosition", publicName: "primaryButtonIconPosition", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closeEvent: "closeEvent", secondaryButtonClickEvent: "secondaryButtonClickEvent", primaryButtonClickEvent: "primaryButtonClickEvent" }, host: { listeners: { "keydown.esc": "onEsc()" }, properties: { "style.--color": "this.companyColor" } }, queries: [{ propertyName: "customHeader", first: true, predicate: ["dialogHeader"], descendants: true }], viewQueries: [{ propertyName: "closeButton", first: true, predicate: ["closeButton"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"dialog-container\" [attr.theme]=\"applicationTheme\">\n  <div\n    mat-dialog-title\n    class=\"dialog-title\"\n    [attr.aria-modal]=\"true\"\n    [attr.aria-labelledby]=\"'labelledby'\"\n    [attr.aria-describedby]=\"'ariaDescribedby'\"\n  >\n    <span [style.display]=\"'none'\" id=\"ariaDescribedby\">{{ ariaDescribedby }}</span>\n\n    <!-- Default header content -->\n    @if (!hasCustomHeader) {\n      <h3 class=\"bold\" id=\"labelledby\">{{ title }}</h3>\n      @if (showCloseButton) {\n        <div>\n          <ui-button\n            #closeButton\n            [variant]=\"'icon-button'\"\n            [iconName]=\"'Close'\"\n            [companyColor]=\"applicationTheme === 'classic' ? '#000' : '#242424'\"\n            [applicationTheme]=\"applicationTheme\"\n            [tooltip]=\"('COMMON.CLOSE' | uiTranslate | async)!\"\n            (click)=\"onClose($event)\"\n            (buttonClickEvent)=\"dismiss()\"\n            id=\"dialog-close-button\"\n          ></ui-button>\n        </div>\n      }\n    }\n\n    <!-- Custom header content projection -->\n    <ng-content select=\"[dialogHeader]\"></ng-content>\n  </div>\n  <mat-dialog-content>\n    <ng-content></ng-content>\n  </mat-dialog-content>\n  @if (secondaryButtonLabel !== '' || primaryButtonLabel !== '') {\n    <div mat-dialog-actions [class.dialog-action-w-message]=\"!!footerMessage\">\n      @if (footerMessage) {\n        <div class=\"actions-footer-message\">{{ footerMessage }}</div>\n      }\n\n      <!-- Projected footer content, rendered to the left of the action buttons -->\n      <ng-content select=\"[dialogFooter]\"></ng-content>\n\n      @if (!!secondaryButtonLabel) {\n        <ui-button\n          [companyColor]=\"companyColor\"\n          [variant]=\"secondaryButtonType\"\n          [applicationTheme]=\"applicationTheme\"\n          [label]=\"secondaryButtonLabel\"\n          [attr.data-testid]=\"secondaryButtonDataTestId\"\n          (click)=\"onSecondaryButtonClick($event)\"\n        ></ui-button>\n      }\n      @if (!!primaryButtonLabel) {\n        <!-- The tooltip wraps the button: a disabled ui-button receives no pointer\n             events, so the tooltip must trigger from an enclosing element. -->\n        <ui-tooltip\n          class=\"primary-button-tooltip-trigger\"\n          [message]=\"primaryButtonTooltip\"\n          [applicationTheme]=\"applicationTheme\"\n        >\n          <ui-button\n            [iconPosition]=\"primaryButtonIconPosition()\"\n            [iconName]=\"primaryButtonIconName ? primaryButtonIconName : undefined\"\n            [variant]=\"primaryButtonType\"\n            [disabled]=\"disableButtons || disablePrimaryButton\"\n            [applicationTheme]=\"applicationTheme\"\n            (click)=\"onPrimaryButtonClick($event)\"\n            [label]=\"primaryButtonLabel\"\n            [companyColor]=\"companyColor\"\n            [attr.data-testid]=\"primaryButtonDataTestId\"\n          ></ui-button>\n        </ui-tooltip>\n      }\n    </div>\n  }\n\n  <!--  This is announcement for screen reader that dialog was closed-->\n  <div aria-live=\"assertive\" role=\"alert\" style=\"position: absolute; left: -9999px\">\n    @if (modalClosed) {\n      <span>{{ 'DIALOG.CLOSED' | uiTranslate | async }}</span>\n    }\n  </div>\n</div>\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-dialog-wrapper{display:flex;flex-flow:column}.ui-dialog-wrapper.small{width:600px}.ui-dialog-wrapper.large{width:956px}.ui-dialog-wrapper.x-large{width:1312px}.ui-dialog-wrapper .mat-mdc-dialog-container .mdc-dialog__container .mat-mdc-dialog-surface{border-radius:8px;padding:16px}.ui-dialog-wrapper.dark .mat-mdc-dialog-container .mdc-dialog__container .mat-mdc-dialog-surface,.ui-dialog-wrapper.light .mat-mdc-dialog-container .mdc-dialog__container .mat-mdc-dialog-surface{padding:32px}.ui-dialog-wrapper.dark .mat-mdc-dialog-container .mdc-dialog__container .mat-mdc-dialog-surface,.ui-dialog-wrapper.light .mat-mdc-dialog-container .mdc-dialog__container .mat-mdc-dialog-surface{border-radius:10px}.ui-dialog-wrapper.dark .dialog-title,.ui-dialog-wrapper.light .dialog-title{height:40px;padding:0;margin-bottom:32px}.ui-dialog-wrapper.dark .mat-mdc-dialog-content,.ui-dialog-wrapper.light .mat-mdc-dialog-content{padding:0}.ui-dialog-wrapper.dark .mat-mdc-dialog-actions,.ui-dialog-wrapper.light .mat-mdc-dialog-actions{padding:0;margin-top:32px}.ui-dialog-wrapper .mat-mdc-dialog-content{font-size:14px;color:#000;line-height:20px}.ui-dialog-wrapper.dark .mat-mdc-dialog-container{--mdc-dialog-container-color: #424242}.ui-dialog-wrapper.dark .mat-mdc-dialog-content{color:#fff!important}.ui-dialog-wrapper.dark .dialog-title{--mdc-dialog-subhead-color: #ffffff}.dialog-title{display:flex;flex-direction:row;justify-content:space-between;align-items:center;margin:0}.dialog-title .close{margin-right:-24px}.dialog-title:before{content:none}.mat-mdc-dialog-actions{display:flex;justify-content:flex-end;column-gap:16px;padding:16px 0 0;margin-bottom:0;min-height:48px}.mat-mdc-dialog-actions.dialog-action-w-message{justify-content:space-between}.mat-mdc-dialog-actions .actions-footer-message{flex:1 0 auto}.mat-mdc-dialog-actions [dialogFooter]{margin-right:auto}.mat-mdc-dialog-actions .primary-button-tooltip-trigger{display:inline-flex}@media(max-width:1024px){.ui-dialog-wrapper .mat-mdc-dialog-container .mdc-dialog__container .mat-mdc-dialog-surface{min-width:320px;max-width:600px;border-radius:0}.mat-mdc-dialog-content{max-height:524px}}@media(max-width:600px){.cdk-overlay-pane.ui-dialog-wrapper{max-width:100%!important;min-height:100%;display:flex;justify-content:center}.cdk-overlay-pane.ui-dialog-wrapper .mat-mdc-dialog-container .mdc-dialog__container .mat-mdc-dialog-surface{min-width:100%;max-width:100%;height:100%;display:flex;flex-grow:1;border-radius:0}.cdk-overlay-pane.ui-dialog-wrapper.x-large{height:100%}.cdk-overlay-pane.ui-dialog-wrapper.x-large .mat-mdc-dialog-container .mdc-dialog__container .mat-mdc-dialog-surface{padding:16px}ui-dialog{height:100%;display:flex;flex-flow:column}.mat-mdc-dialog-content{max-height:unset;display:flex;flex-grow:1;flex-direction:column}}\n"], dependencies: [{ kind: "directive", type: MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "component", type: TooltipComponent, selector: "ui-tooltip", inputs: ["position", "disabled", "message", "applicationTheme", "labelForDefinition", "definitionTooltipSize", "variant"] }, { kind: "component", type: 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: "directive", type: MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: UiTranslatePipe, name: "uiTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: DialogComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: DialogComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ui-dialog', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [
                         MatDialogTitle,
@@ -328,10 +328,10 @@ class DialogService {
                 : ['ui-dialog-wrapper', panelClass, applicationTheme, size],
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: DialogService, deps: [{ token: i1.MatDialog }, { token: 'CANOPYUI_DEFAULT_APPLICATION_THEME', optional: true }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: DialogService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: DialogService, deps: [{ token: i1.MatDialog }, { token: 'CANOPYUI_DEFAULT_APPLICATION_THEME', optional: true }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: DialogService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: DialogService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: DialogService, decorators: [{
             type: Injectable
         }], ctorParameters: () => [{ type: i1.MatDialog }, { type: undefined, decorators: [{
                     type: Optional
@@ -341,11 +341,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImpo
                 }] }] });
 
 class DialogComponentModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: DialogComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.18", ngImport: i0, type: DialogComponentModule, imports: [CommonModule, MatDialogModule, ButtonComponentModule, UiTranslatePipe, DialogComponent], exports: [DialogComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: DialogComponentModule, providers: [{ provide: MAT_DIALOG_DATA, useValue: {} }, { provide: MatDialogRef, useValue: {} }, DialogService], imports: [CommonModule, MatDialogModule, ButtonComponentModule, DialogComponent] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: DialogComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.19", ngImport: i0, type: DialogComponentModule, imports: [CommonModule, MatDialogModule, ButtonComponentModule, UiTranslatePipe, DialogComponent], exports: [DialogComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: DialogComponentModule, providers: [{ provide: MAT_DIALOG_DATA, useValue: {} }, { provide: MatDialogRef, useValue: {} }, DialogService], imports: [CommonModule, MatDialogModule, ButtonComponentModule, DialogComponent] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: DialogComponentModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: DialogComponentModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule, MatDialogModule, ButtonComponentModule, UiTranslatePipe, DialogComponent],
@@ -397,10 +397,10 @@ class ConfirmDialogComponent {
         }
         this.dialogRef.close(true);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ConfirmDialogComponent, deps: [{ token: 'CANOPYUI_DEFAULT_APPLICATION_THEME', optional: true }, { token: i1.MatDialogRef }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.18", type: ConfirmDialogComponent, isStandalone: true, selector: "ui-confirm-dialog", inputs: { applicationTheme: "applicationTheme" }, ngImport: i0, template: "<ng-container>\n  <ui-dialog\n    [title]=\"title ?? ('COMMON.CONFIRM' | uiTranslate | async)!\"\n    [primaryButtonLabel]=\"confirmButtonText ?? ('COMMON.YES' | uiTranslate | async)!\"\n    [secondaryButtonLabel]=\"\n      showSecondaryButton ? (cancelButtonText ?? ('COMMON.CANCEL' | uiTranslate | async)!) : undefined\n    \"\n    (primaryButtonClickEvent)=\"onConfirm()\"\n    (secondaryButtonClickEvent)=\"dialogRef.close(false)\"\n    (closeEvent)=\"dialogRef.close(null)\"\n    [primaryButtonType]=\"primaryButtonType\"\n    [primaryButtonIconName]=\"primaryButtonIconName\"\n    [secondaryButtonType]=\"secondaryButtonType\"\n    [applicationTheme]=\"applicationTheme\"\n    [showCloseButton]=\"showCloseButton\"\n    [companyColor]=\"color\"\n    [primaryButtonDataTestId]=\"primaryButtonDataTestId\"\n    [secondaryButtonDataTestId]=\"secondaryButtonDataTestId\"\n    [primaryButtonIconPosition]=\"primaryButtonIconPosition\"\n  >\n    <div class=\"message\">{{ confirmMessage }}</div>\n    @if (confirmMessageHtml) {\n      <div class=\"message\" [innerHTML]=\"confirmMessageHtml\"></div>\n    }\n  </ui-dialog>\n</ng-container>\n", styles: ["::ng-deep .ui-dialog-wrapper{max-width:600px!important}\n"], dependencies: [{ kind: "component", type: DialogComponent, selector: "ui-dialog", inputs: ["title", "showCloseButton", "canCloseFn", "secondaryButtonLabel", "footerMessage", "primaryButtonLabel", "primaryButtonIconName", "secondaryButtonType", "primaryButtonType", "primaryButtonDataTestId", "secondaryButtonDataTestId", "companyColor", "applicationTheme", "disablePrimaryButton", "primaryButtonTooltip", "disableClose", "shouldDisableButtons", "ariaLabelledby", "ariaDescribedby", "keyboardOpen", "primaryButtonIconPosition"], outputs: ["closeEvent", "secondaryButtonClickEvent", "primaryButtonClickEvent"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: UiTranslatePipe, name: "uiTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: ConfirmDialogComponent, deps: [{ token: 'CANOPYUI_DEFAULT_APPLICATION_THEME', optional: true }, { token: i1.MatDialogRef }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: ConfirmDialogComponent, isStandalone: true, selector: "ui-confirm-dialog", inputs: { applicationTheme: "applicationTheme" }, ngImport: i0, template: "<ng-container>\n  <ui-dialog\n    [title]=\"title ?? ('COMMON.CONFIRM' | uiTranslate | async)!\"\n    [primaryButtonLabel]=\"confirmButtonText ?? ('COMMON.YES' | uiTranslate | async)!\"\n    [secondaryButtonLabel]=\"\n      showSecondaryButton ? (cancelButtonText ?? ('COMMON.CANCEL' | uiTranslate | async)!) : undefined\n    \"\n    (primaryButtonClickEvent)=\"onConfirm()\"\n    (secondaryButtonClickEvent)=\"dialogRef.close(false)\"\n    (closeEvent)=\"dialogRef.close(null)\"\n    [primaryButtonType]=\"primaryButtonType\"\n    [primaryButtonIconName]=\"primaryButtonIconName\"\n    [secondaryButtonType]=\"secondaryButtonType\"\n    [applicationTheme]=\"applicationTheme\"\n    [showCloseButton]=\"showCloseButton\"\n    [companyColor]=\"color\"\n    [primaryButtonDataTestId]=\"primaryButtonDataTestId\"\n    [secondaryButtonDataTestId]=\"secondaryButtonDataTestId\"\n    [primaryButtonIconPosition]=\"primaryButtonIconPosition\"\n  >\n    <div class=\"message\">{{ confirmMessage }}</div>\n    @if (confirmMessageHtml) {\n      <div class=\"message\" [innerHTML]=\"confirmMessageHtml\"></div>\n    }\n  </ui-dialog>\n</ng-container>\n", styles: ["::ng-deep .ui-dialog-wrapper{max-width:600px!important}\n"], dependencies: [{ kind: "component", type: DialogComponent, selector: "ui-dialog", inputs: ["title", "showCloseButton", "canCloseFn", "secondaryButtonLabel", "footerMessage", "primaryButtonLabel", "primaryButtonIconName", "secondaryButtonType", "primaryButtonType", "primaryButtonDataTestId", "secondaryButtonDataTestId", "companyColor", "applicationTheme", "disablePrimaryButton", "primaryButtonTooltip", "disableClose", "shouldDisableButtons", "ariaLabelledby", "ariaDescribedby", "keyboardOpen", "primaryButtonIconPosition"], outputs: ["closeEvent", "secondaryButtonClickEvent", "primaryButtonClickEvent"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: UiTranslatePipe, name: "uiTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ConfirmDialogComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: ConfirmDialogComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ui-confirm-dialog', changeDetection: ChangeDetectionStrategy.OnPush, imports: [DialogComponent, AsyncPipe, UiTranslatePipe], template: "<ng-container>\n  <ui-dialog\n    [title]=\"title ?? ('COMMON.CONFIRM' | uiTranslate | async)!\"\n    [primaryButtonLabel]=\"confirmButtonText ?? ('COMMON.YES' | uiTranslate | async)!\"\n    [secondaryButtonLabel]=\"\n      showSecondaryButton ? (cancelButtonText ?? ('COMMON.CANCEL' | uiTranslate | async)!) : undefined\n    \"\n    (primaryButtonClickEvent)=\"onConfirm()\"\n    (secondaryButtonClickEvent)=\"dialogRef.close(false)\"\n    (closeEvent)=\"dialogRef.close(null)\"\n    [primaryButtonType]=\"primaryButtonType\"\n    [primaryButtonIconName]=\"primaryButtonIconName\"\n    [secondaryButtonType]=\"secondaryButtonType\"\n    [applicationTheme]=\"applicationTheme\"\n    [showCloseButton]=\"showCloseButton\"\n    [companyColor]=\"color\"\n    [primaryButtonDataTestId]=\"primaryButtonDataTestId\"\n    [secondaryButtonDataTestId]=\"secondaryButtonDataTestId\"\n    [primaryButtonIconPosition]=\"primaryButtonIconPosition\"\n  >\n    <div class=\"message\">{{ confirmMessage }}</div>\n    @if (confirmMessageHtml) {\n      <div class=\"message\" [innerHTML]=\"confirmMessageHtml\"></div>\n    }\n  </ui-dialog>\n</ng-container>\n", styles: ["::ng-deep .ui-dialog-wrapper{max-width:600px!important}\n"] }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
@@ -416,14 +416,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImpo
             }] } });
 
 class ConfirmDialogComponentModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ConfirmDialogComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.18", ngImport: i0, type: ConfirmDialogComponentModule, imports: [CommonModule,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: ConfirmDialogComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.19", ngImport: i0, type: ConfirmDialogComponentModule, imports: [CommonModule,
             MatDialogModule,
             ButtonComponentModule,
             DialogComponentModule,
             UiTranslatePipe,
             ConfirmDialogComponent], exports: [ConfirmDialogComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ConfirmDialogComponentModule, providers: [
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: ConfirmDialogComponentModule, providers: [
             { provide: MAT_DIALOG_DATA, useValue: {} },
             { provide: MatDialogRef, useValue: {} },
         ], imports: [CommonModule,
@@ -432,7 +432,7 @@ class ConfirmDialogComponentModule {
             DialogComponentModule,
             ConfirmDialogComponent] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ConfirmDialogComponentModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: ConfirmDialogComponentModule, decorators: [{
             type: NgModule,
             args: [{
                     exports: [ConfirmDialogComponent],
@@ -484,12 +484,12 @@ class DialogCustomComponent {
     canCloseTrue() {
         return true;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: DialogCustomComponent, deps: [{ token: 'CANOPYUI_DEFAULT_APPLICATION_THEME', optional: true }, { token: MAT_DIALOG_DATA }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.18", type: DialogCustomComponent, isStandalone: true, selector: "ui-dialog-custom", inputs: { applicationTheme: "applicationTheme" }, ngImport: i0, template: "<ui-dialog\n  [title]=\"data.title\"\n  [showCloseButton]=\"data.showCloseButton\"\n  [applicationTheme]=\"applicationTheme\"\n  [primaryButtonLabel]=\"'OK'\"\n  [secondaryButtonLabel]=\"'Cancel'\"\n  [canCloseFn]=\"canClose\"\n  [keyboardOpen]=\"data.keyboardOpen\"\n  [footerMessage]=\"data.footerMessage\"\n>\n  <!-- Custom header content -->\n  @if (data.type === 'custom-header') {\n    <div dialogHeader class=\"custom-header\">\n      <div class=\"button-group\">\n        <ui-button label=\"Action 1\" [variant]=\"'ghost'\" [applicationTheme]=\"applicationTheme\"></ui-button>\n        <ui-button label=\"Action 2\" [variant]=\"'primary'\" [applicationTheme]=\"applicationTheme\"></ui-button>\n      </div>\n    </div>\n  }\n\n  <!-- Custom footer content projection -->\n  @if (data.type === 'footer-content') {\n    <ui-toggle dialogFooter label=\"Don't show this again\" [applicationTheme]=\"applicationTheme\"></ui-toggle>\n  }\n\n  <!-- Dialog content -->\n  <div class=\"dialog-content\">\n    @if (data.type === 'default') {\n      <p class=\"dialog-message\">This is a default dialog example with a standard header.</p>\n    }\n    @if (data.type === 'custom-header') {\n      <p class=\"dialog-message\">This dialog uses a custom header with content projection.</p>\n    }\n    @if (data.type === 'footer-content') {\n      <p class=\"dialog-message\">\n        This dialog projects a <code>ui-toggle</code> into the footer, to the left of the action buttons.\n      </p>\n    }\n    <p class=\"dialog-message\">The dialog will be closeable in 2 seconds (demonstrating canCloseFn).</p>\n  </div>\n</ui-dialog>\n", styles: [".custom-header{width:100%}.custom-header .button-group{display:flex;gap:8px;align-items:center;margin-left:auto}\n"], dependencies: [{ kind: "component", type: DialogComponent, selector: "ui-dialog", inputs: ["title", "showCloseButton", "canCloseFn", "secondaryButtonLabel", "footerMessage", "primaryButtonLabel", "primaryButtonIconName", "secondaryButtonType", "primaryButtonType", "primaryButtonDataTestId", "secondaryButtonDataTestId", "companyColor", "applicationTheme", "disablePrimaryButton", "primaryButtonTooltip", "disableClose", "shouldDisableButtons", "ariaLabelledby", "ariaDescribedby", "keyboardOpen", "primaryButtonIconPosition"], outputs: ["closeEvent", "secondaryButtonClickEvent", "primaryButtonClickEvent"] }, { kind: "component", type: 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: "component", type: ToggleComponent, selector: "ui-toggle", inputs: ["selected", "disabled", "label", "message", "maxWidth", "applicationTheme", "ariaLabel", "ariaRequired", "preventClick", "loading", "ariaDescribedby"], outputs: ["toggle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: DialogCustomComponent, deps: [{ token: 'CANOPYUI_DEFAULT_APPLICATION_THEME', optional: true }, { token: MAT_DIALOG_DATA }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: DialogCustomComponent, isStandalone: true, selector: "ui-dialog-custom", inputs: { applicationTheme: "applicationTheme" }, ngImport: i0, template: "<ui-dialog\n  [title]=\"data.title\"\n  [showCloseButton]=\"data.showCloseButton\"\n  [applicationTheme]=\"applicationTheme\"\n  [primaryButtonLabel]=\"'OK'\"\n  [secondaryButtonLabel]=\"'Cancel'\"\n  [canCloseFn]=\"canClose\"\n  [keyboardOpen]=\"data.keyboardOpen\"\n  [footerMessage]=\"data.footerMessage\"\n  [disablePrimaryButton]=\"data.type === 'disabled-primary-tooltip'\"\n  [primaryButtonTooltip]=\"data.primaryButtonTooltip ?? ''\"\n>\n  <!-- Custom header content -->\n  @if (data.type === 'custom-header') {\n    <div dialogHeader class=\"custom-header\">\n      <div class=\"button-group\">\n        <ui-button label=\"Action 1\" [variant]=\"'ghost'\" [applicationTheme]=\"applicationTheme\"></ui-button>\n        <ui-button label=\"Action 2\" [variant]=\"'primary'\" [applicationTheme]=\"applicationTheme\"></ui-button>\n      </div>\n    </div>\n  }\n\n  <!-- Custom footer content projection -->\n  @if (data.type === 'footer-content') {\n    <ui-toggle dialogFooter label=\"Don't show this again\" [applicationTheme]=\"applicationTheme\"></ui-toggle>\n  }\n\n  <!-- Dialog content -->\n  <div class=\"dialog-content\">\n    @if (data.type === 'default') {\n      <p class=\"dialog-message\">This is a default dialog example with a standard header.</p>\n    }\n    @if (data.type === 'custom-header') {\n      <p class=\"dialog-message\">This dialog uses a custom header with content projection.</p>\n    }\n    @if (data.type === 'footer-content') {\n      <p class=\"dialog-message\">\n        This dialog projects a <code>ui-toggle</code> into the footer, to the left of the action buttons.\n      </p>\n    }\n    @if (data.type === 'disabled-primary-tooltip') {\n      <p class=\"dialog-message\">\n        The primary button is disabled; hover it to see the tooltip explaining why the action is unavailable.\n      </p>\n    }\n    <p class=\"dialog-message\">The dialog will be closeable in 2 seconds (demonstrating canCloseFn).</p>\n  </div>\n</ui-dialog>\n", styles: [".custom-header{width:100%}.custom-header .button-group{display:flex;gap:8px;align-items:center;margin-left:auto}\n"], dependencies: [{ kind: "component", type: DialogComponent, selector: "ui-dialog", inputs: ["title", "showCloseButton", "canCloseFn", "secondaryButtonLabel", "footerMessage", "primaryButtonLabel", "primaryButtonIconName", "secondaryButtonType", "primaryButtonType", "primaryButtonDataTestId", "secondaryButtonDataTestId", "companyColor", "applicationTheme", "disablePrimaryButton", "primaryButtonTooltip", "disableClose", "shouldDisableButtons", "ariaLabelledby", "ariaDescribedby", "keyboardOpen", "primaryButtonIconPosition"], outputs: ["closeEvent", "secondaryButtonClickEvent", "primaryButtonClickEvent"] }, { kind: "component", type: 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: "component", type: ToggleComponent, selector: "ui-toggle", inputs: ["selected", "disabled", "label", "message", "maxWidth", "applicationTheme", "ariaLabel", "ariaRequired", "preventClick", "loading", "ariaDescribedby"], outputs: ["toggle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: DialogCustomComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: DialogCustomComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ui-dialog-custom', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [DialogComponent, ButtonComponent, ToggleComponent], template: "<ui-dialog\n  [title]=\"data.title\"\n  [showCloseButton]=\"data.showCloseButton\"\n  [applicationTheme]=\"applicationTheme\"\n  [primaryButtonLabel]=\"'OK'\"\n  [secondaryButtonLabel]=\"'Cancel'\"\n  [canCloseFn]=\"canClose\"\n  [keyboardOpen]=\"data.keyboardOpen\"\n  [footerMessage]=\"data.footerMessage\"\n>\n  <!-- Custom header content -->\n  @if (data.type === 'custom-header') {\n    <div dialogHeader class=\"custom-header\">\n      <div class=\"button-group\">\n        <ui-button label=\"Action 1\" [variant]=\"'ghost'\" [applicationTheme]=\"applicationTheme\"></ui-button>\n        <ui-button label=\"Action 2\" [variant]=\"'primary'\" [applicationTheme]=\"applicationTheme\"></ui-button>\n      </div>\n    </div>\n  }\n\n  <!-- Custom footer content projection -->\n  @if (data.type === 'footer-content') {\n    <ui-toggle dialogFooter label=\"Don't show this again\" [applicationTheme]=\"applicationTheme\"></ui-toggle>\n  }\n\n  <!-- Dialog content -->\n  <div class=\"dialog-content\">\n    @if (data.type === 'default') {\n      <p class=\"dialog-message\">This is a default dialog example with a standard header.</p>\n    }\n    @if (data.type === 'custom-header') {\n      <p class=\"dialog-message\">This dialog uses a custom header with content projection.</p>\n    }\n    @if (data.type === 'footer-content') {\n      <p class=\"dialog-message\">\n        This dialog projects a <code>ui-toggle</code> into the footer, to the left of the action buttons.\n      </p>\n    }\n    <p class=\"dialog-message\">The dialog will be closeable in 2 seconds (demonstrating canCloseFn).</p>\n  </div>\n</ui-dialog>\n", styles: [".custom-header{width:100%}.custom-header .button-group{display:flex;gap:8px;align-items:center;margin-left:auto}\n"] }]
+            args: [{ selector: 'ui-dialog-custom', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [DialogComponent, ButtonComponent, ToggleComponent], template: "<ui-dialog\n  [title]=\"data.title\"\n  [showCloseButton]=\"data.showCloseButton\"\n  [applicationTheme]=\"applicationTheme\"\n  [primaryButtonLabel]=\"'OK'\"\n  [secondaryButtonLabel]=\"'Cancel'\"\n  [canCloseFn]=\"canClose\"\n  [keyboardOpen]=\"data.keyboardOpen\"\n  [footerMessage]=\"data.footerMessage\"\n  [disablePrimaryButton]=\"data.type === 'disabled-primary-tooltip'\"\n  [primaryButtonTooltip]=\"data.primaryButtonTooltip ?? ''\"\n>\n  <!-- Custom header content -->\n  @if (data.type === 'custom-header') {\n    <div dialogHeader class=\"custom-header\">\n      <div class=\"button-group\">\n        <ui-button label=\"Action 1\" [variant]=\"'ghost'\" [applicationTheme]=\"applicationTheme\"></ui-button>\n        <ui-button label=\"Action 2\" [variant]=\"'primary'\" [applicationTheme]=\"applicationTheme\"></ui-button>\n      </div>\n    </div>\n  }\n\n  <!-- Custom footer content projection -->\n  @if (data.type === 'footer-content') {\n    <ui-toggle dialogFooter label=\"Don't show this again\" [applicationTheme]=\"applicationTheme\"></ui-toggle>\n  }\n\n  <!-- Dialog content -->\n  <div class=\"dialog-content\">\n    @if (data.type === 'default') {\n      <p class=\"dialog-message\">This is a default dialog example with a standard header.</p>\n    }\n    @if (data.type === 'custom-header') {\n      <p class=\"dialog-message\">This dialog uses a custom header with content projection.</p>\n    }\n    @if (data.type === 'footer-content') {\n      <p class=\"dialog-message\">\n        This dialog projects a <code>ui-toggle</code> into the footer, to the left of the action buttons.\n      </p>\n    }\n    @if (data.type === 'disabled-primary-tooltip') {\n      <p class=\"dialog-message\">\n        The primary button is disabled; hover it to see the tooltip explaining why the action is unavailable.\n      </p>\n    }\n    <p class=\"dialog-message\">The dialog will be closeable in 2 seconds (demonstrating canCloseFn).</p>\n  </div>\n</ui-dialog>\n", styles: [".custom-header{width:100%}.custom-header .button-group{display:flex;gap:8px;align-items:center;margin-left:auto}\n"] }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Optional
                 }, {
@@ -503,11 +503,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImpo
             }] } });
 
 class DialogCustomComponentModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: DialogCustomComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.18", ngImport: i0, type: DialogCustomComponentModule, imports: [CommonModule, DialogComponentModule, ButtonComponentModule, ToggleComponentModule, DialogCustomComponent], exports: [DialogCustomComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: DialogCustomComponentModule, imports: [CommonModule, DialogComponentModule, ButtonComponentModule, ToggleComponentModule, DialogCustomComponent] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: DialogCustomComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.19", ngImport: i0, type: DialogCustomComponentModule, imports: [CommonModule, DialogComponentModule, ButtonComponentModule, ToggleComponentModule, DialogCustomComponent], exports: [DialogCustomComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: DialogCustomComponentModule, imports: [CommonModule, DialogComponentModule, ButtonComponentModule, ToggleComponentModule, DialogCustomComponent] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: DialogCustomComponentModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: DialogCustomComponentModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule, DialogComponentModule, ButtonComponentModule, ToggleComponentModule, DialogCustomComponent],