@agorapulse/ui-components 22.1.6 → 22.1.8

package/fesm2022/agorapulse-ui-components-action-dropdown.mjs

@@ -1,6 +1,8 @@
 import * as i0 from '@angular/core';
-import { inject, ElementRef, input, HostListener, Directive, viewChild, contentChild, output, signal, computed, effect, ChangeDetectionStrategy, Component } from '@angular/core';
+import { inject, ElementRef, input, HostListener, Directive, viewChild, contentChild, output, viewChildren, signal, Injector, computed, effect, untracked, ChangeDetectionStrategy, Component } from '@angular/core';
 import { BadgeComponent } from '@agorapulse/ui-components/badge';
+import { FocusKeyManager } from '@angular/cdk/a11y';
+import { DropdownOptionDirective } from '@agorapulse/ui-components/dropdown-base';
 import { DropdownPanelComponent, DropdownContentDirective } from '@agorapulse/ui-components/dropdown-panel';
 import { UI_COMPONENTS_SYMBOLS } from '@agorapulse/ui-components/providers';
 import { TooltipDirective } from '@agorapulse/ui-components/tooltip';
@@ -80,7 +82,6 @@ class ActionDropdownComponent {
     /** Whether the dropdown is disabled and cannot be opened */
     disabled = input(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
-    /** Default position for the dropdown relative to the trigger element */
     /** Panel placement. Unset means derived from the anchor mode, i.e. `bottom-start`. */
     placement = input(/* @ts-ignore */
     ...(ngDevMode ? [undefined, { debugName: "placement" }] : /* istanbul ignore next */ []));
@@ -90,17 +91,30 @@ class ActionDropdownComponent {
     closed = output();
     /** Emits when a dropdown item is clicked */
     itemClick = output();
-    focusedIndex = signal(-1, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "focusedIndex" }] : /* istanbul ignore next */ []));
+    menuItems = viewChildren(DropdownOptionDirective, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "menuItems" }] : /* istanbul ignore next */ []));
+    /** Mirrors the key manager's active index, so the roving tabindex can be bound. */
+    activeIndex = signal(-1, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "activeIndex" }] : /* istanbul ignore next */ []));
+    keyManager = new FocusKeyManager(this.menuItems, inject(Injector)).withWrap().withTypeAhead().withHomeAndEnd();
+    primed = false;
     isOpen = computed(() => this.panel()?.isOpen() ?? false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []));
     constructor() {
         this.symbolRegistry.withSymbols(...(inject(UI_COMPONENTS_SYMBOLS, { optional: true })?.flat() ?? []));
-        // Set up keyboard navigation when dropdown opens
+        this.keyManager.change.subscribe(index => this.activeIndex.set(index));
+        // APG: Tab leaves a menu and closes it, rather than walking its items.
+        this.keyManager.tabOut.subscribe(() => this.close());
+        // The items only exist once the panel has stamped its template.
         effect(() => {
-            if (this.isOpen()) {
-                this.setupKeyboardNavigation();
-            }
+            const open = this.isOpen();
+            const items = this.menuItems();
+            untracked(() => {
+                if (open && items.length > 0 && !this.primed) {
+                    this.primed = true;
+                    this.keyManager.setFirstItemActive();
+                }
+            });
         });
     }
     /** Opens the dropdown menu at the specified trigger element */
@@ -115,7 +129,8 @@ class ActionDropdownComponent {
         this.panel()?.close();
     }
     onPanelClosed() {
-        this.focusedIndex.set(-1);
+        this.primed = false;
+        this.activeIndex.set(-1);
         this.closed.emit();
     }
     /** Toggles the dropdown menu open or closed state */
@@ -135,65 +150,17 @@ class ActionDropdownComponent {
         this.itemClick.emit(item);
         this.close();
     }
-    /** Handles keyboard navigation within the dropdown menu */
+    /** Enter and Space need nothing: focus is real, so the button fires its own click. Escape belongs to the panel. */
     onKeyDown(event) {
-        const items = this.items();
-        const currentIndex = this.focusedIndex();
-        let nextIndex;
-        let prevIndex;
-        switch (event.key) {
-            case 'ArrowDown':
-                event.preventDefault();
-                nextIndex = currentIndex < items.length - 1 ? currentIndex + 1 : 0;
-                this.focusedIndex.set(nextIndex);
-                break;
-            case 'ArrowUp':
-                event.preventDefault();
-                prevIndex = currentIndex > 0 ? currentIndex - 1 : items.length - 1;
-                this.focusedIndex.set(prevIndex);
-                break;
-            case 'Enter':
-            case ' ':
-                event.preventDefault();
-                if (currentIndex >= 0 && currentIndex < items.length) {
-                    this.onItemClick(items[currentIndex]);
-                }
-                break;
-            case 'Escape':
-                event.preventDefault();
-                this.close();
-                break;
-            case 'Tab':
-                event.preventDefault();
-                if (event.shiftKey) {
-                    // Shift+Tab - move to previous item
-                    prevIndex = currentIndex > 0 ? currentIndex - 1 : items.length - 1;
-                    this.focusedIndex.set(prevIndex);
-                }
-                else {
-                    // Tab - move to next item
-                    nextIndex = currentIndex < items.length - 1 ? currentIndex + 1 : 0;
-                    this.focusedIndex.set(nextIndex);
-                }
-                break;
-        }
-    }
-    /** Sets up keyboard event handling for the opened dropdown */
-    setupKeyboardNavigation() {
-        const ref = this.panel()?.overlayRef;
-        if (!ref)
-            return;
-        ref.keydownEvents().subscribe((event) => {
-            this.onKeyDown(event);
-        });
+        this.keyManager.onKeydown(event);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: ActionDropdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: ActionDropdownComponent, isStandalone: true, selector: "ap-action-dropdown", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, largeModeEnabled: { classPropertyName: "largeModeEnabled", publicName: "largeModeEnabled", isSignal: true, isRequired: false, transformFunction: null }, customWidth: { classPropertyName: "customWidth", publicName: "customWidth", isSignal: true, isRequired: false, transformFunction: null }, showBackdrop: { classPropertyName: "showBackdrop", publicName: "showBackdrop", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { opened: "opened", closed: "closed", itemClick: "itemClick" }, providers: [withSymbols(apInfo, apFeatureLock)], queries: [{ propertyName: "trigger", first: true, predicate: ["trigger"], descendants: true, isSignal: true }], viewQueries: [{ propertyName: "panel", first: true, predicate: DropdownPanelComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<ap-dropdown-panel\n    [placement]=\"placement()\"\n    [showBackdrop]=\"showBackdrop()\"\n    (closed)=\"onPanelClosed()\">\n    <!-- Action dropdown -->\n    <div\n        *apDropdownContent\n        class=\"ap-action-dropdown__content\"\n        role=\"menu\"\n        tabindex=\"-1\"\n        [attr.aria-label]=\"'Action dropdown'\"\n        [class.ap-action-dropdown__content--default]=\"!largeModeEnabled() && !customWidth()\"\n        [class.ap-action-dropdown__content--large]=\"largeModeEnabled()\"\n        [style.width]=\"customWidth() ? customWidth() + 'px' : undefined\"\n        (keydown)=\"onKeyDown($event)\">\n        <!-- Action dropdown items -->\n        @for (item of items(); track item.label) {\n            <!-- Divider -->\n            @if (item.dividerEnabled) {\n                <div\n                    class=\"ap-action-dropdown__divider\"\n                    role=\"separator\"></div>\n            }\n            <!-- Action dropdown item -->\n            <div [apTooltip]=\"item.itemTooltipText\">\n                <button\n                    type=\"button\"\n                    role=\"menuitem\"\n                    class=\"ap-action-dropdown__item\"\n                    [class.ap-action-dropdown__item--has-description]=\"item.description\"\n                    [class.ap-action-dropdown__item--focused]=\"focusedIndex() === $index\"\n                    [class.ap-action-dropdown__item--red-mode]=\"item.redModeEnabled\"\n                    [class.ap-action-dropdown__item--feature-lock]=\"item.featureLockEnabled\"\n                    [attr.aria-disabled]=\"item.disabled\"\n                    [attr.data-track]=\"item.dataTrack\"\n                    [attr.id]=\"item.id\"\n                    [disabled]=\"item.disabled\"\n                    (click)=\"onItemClick(item)\">\n                    <!-- Start icon -->\n                    @if (item.startSymbolId) {\n                        <ap-symbol\n                            class=\"ap-action-dropdown__item-start-icon\"\n                            size=\"sm\"\n                            [color]=\"item.startSymbolColor ? item.startSymbolColor : item.redModeEnabled ? 'red' : 'basic-grey'\"\n                            [symbolId]=\"item.startSymbolId\"\n                            [apTooltip]=\"item.startSymbolTooltipText\" />\n                    }\n                    <!-- Label -->\n                    <div class=\"ap-action-dropdown__item-text-container\">\n                        <div class=\"ap-action-dropdown__item-label-container\">\n                            <div\n                                class=\"ap-action-dropdown__item-label\"\n                                [class.ap-action-dropdown__item-label--bold]=\"item.description\">\n                                {{ item.label }}\n                            </div>\n                            <!-- Badge -->\n                            @if (item.badgeLabel) {\n                                <ap-badge [color]=\"item.badgeColor ?? 'blue'\">\n                                    {{ item.badgeLabel }}\n                                </ap-badge>\n                            }\n                        </div>\n                        <!-- Description -->\n                        <div class=\"ap-action-dropdown__item-description\">{{ item.description }}</div>\n                    </div>\n                    <!-- End icon -->\n                    @if (item.endSymbolId) {\n                        <ap-symbol\n                            class=\"ap-action-dropdown__item-end-icon\"\n                            size=\"sm\"\n                            color=\"#858FA1\"\n                            [symbolId]=\"item.endSymbolId\"\n                            [apTooltip]=\"item.endSymbolTooltipText\" />\n                    }\n                    <!-- Feature lock icon -->\n                    @if (item.featureLockEnabled) {\n                        <ap-symbol\n                            class=\"ap-action-dropdown__item-end-icon\"\n                            size=\"sm\"\n                            color=\"purple\"\n                            symbolId=\"feature-lock\" />\n                    }\n                </button>\n            </div>\n        }\n    </div>\n</ap-dropdown-panel>\n", styles: [":host{display:none}.ap-action-dropdown__content{padding:var(--comp-action-dropdown-padding);outline:none;overflow:hidden;z-index:1000}.ap-action-dropdown__content.ap-action-dropdown__content--default{width:250px}.ap-action-dropdown__content.ap-action-dropdown__content--large{width:340px}.ap-action-dropdown__content:focus{outline:2px solid var(--comp-action-dropdown-item-background-color-focused);outline-offset:2px}.ap-action-dropdown__item{display:flex;align-items:center;width:100%;height:40px;padding:var(--comp-action-dropdown-item-padding);border:none;background:transparent;color:var(--comp-action-dropdown-item-text-color);cursor:pointer;font-family:Averta;font-size:var(--comp-action-dropdown-item-text-size);line-height:var(--comp-action-dropdown-item-text-line-height);text-align:left}.ap-action-dropdown__item:hover{background-color:var(--comp-action-dropdown-item-background-color-hover)}.ap-action-dropdown__item:focus{outline:none;background-color:var(--comp-action-dropdown-item-background-color-focused)}.ap-action-dropdown__item:disabled{cursor:not-allowed;opacity:.4}.ap-action-dropdown__item.ap-action-dropdown__item--has-description{height:auto;min-height:50px}.ap-action-dropdown__item.ap-action-dropdown__item--focused{background-color:var(--comp-action-dropdown-item-background-color-focused)}.ap-action-dropdown__item.ap-action-dropdown__item--red-mode{color:var(--comp-action-dropdown-item-text-color-red-mode)}.ap-action-dropdown__item.ap-action-dropdown__item--red-mode:hover{background-color:var(--comp-action-dropdown-item-background-color-red-mode-hover)}.ap-action-dropdown__item.ap-action-dropdown__item--red-mode:focus{background-color:var(--comp-action-dropdown-item-background-color-red-mode-focused)}.ap-action-dropdown__item.ap-action-dropdown__item--red-mode.ap-action-dropdown__item--focused{background-color:var(--comp-action-dropdown-item-background-color-red-mode-focused)}.ap-action-dropdown__item.ap-action-dropdown__item--feature-lock:hover{background-color:var(--comp-action-dropdown-item-background-color-feature-lock-hover)}.ap-action-dropdown__item.ap-action-dropdown__item--feature-lock:focus{background-color:var(--comp-action-dropdown-item-background-color-feature-lock-focused)}.ap-action-dropdown__item.ap-action-dropdown__item--feature-lock.ap-action-dropdown__item--focused{background-color:var(--comp-action-dropdown-item-background-color-feature-lock-focused)}.ap-action-dropdown__item.ap-action-dropdown__item--disabled:hover{background-color:transparent}.ap-action-dropdown__item .ap-action-dropdown__item-start-icon{margin-right:var(--comp-action-dropdown-item-icon-spacing)}.ap-action-dropdown__item .ap-action-dropdown__item-end-icon{margin-left:var(--comp-action-dropdown-item-icon-spacing)}.ap-action-dropdown__item .ap-action-dropdown__item-text-container{display:flex;flex-direction:column;flex:1;min-width:0}.ap-action-dropdown__item .ap-action-dropdown__item-text-container .ap-action-dropdown__item-label-container{display:flex;align-items:center;gap:var(--comp-action-dropdown-item-label-spacing);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ap-action-dropdown__item .ap-action-dropdown__item-text-container .ap-action-dropdown__item-label-container .ap-action-dropdown__item-label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ap-action-dropdown__item .ap-action-dropdown__item-text-container .ap-action-dropdown__item-label-container .ap-action-dropdown__item-label.ap-action-dropdown__item-label--bold{font-weight:var(--ref-font-weight-bold)}.ap-action-dropdown__item .ap-action-dropdown__item-text-container .ap-action-dropdown__item-description{color:var(--comp-action-dropdown-item-description-color);font-size:var(--comp-action-dropdown-item-description-size);line-height:var(--comp-action-dropdown-item-description-line-height)}.ap-action-dropdown__divider{height:1px;background-color:var(--comp-action-dropdown-divider-color);margin:var(--comp-action-dropdown-divider-margin)}\n"], dependencies: [{ kind: "component", type: BadgeComponent, selector: "ap-badge", inputs: ["color"] }, { kind: "directive", type: DropdownContentDirective, selector: "ng-template[apDropdownContent]" }, { kind: "component", type: DropdownPanelComponent, selector: "ap-dropdown-panel", inputs: ["placement", "showBackdrop", "panelClass", "canDismiss"], outputs: ["opened", "closed"] }, { kind: "component", type: SymbolComponent, selector: "ap-symbol", inputs: ["symbolId", "color", "size"], outputs: ["sizeChange"] }, { kind: "directive", type: TooltipDirective, selector: "[apTooltip]", inputs: ["apTooltip", "apTooltipPosition", "apTooltipShowDelay", "apTooltipHideDelay", "apTooltipDuration", "apTooltipDisabled", "apTooltipTruncatedTextOnly", "apTooltipTemplateContext", "apTooltipVirtualScrollElement", "apTooltipTrigger", "apTooltipType", "apTooltipPresentationContext", "apTooltipListItems", "apTooltipShowAvatarCaption"], exportAs: ["apTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: ActionDropdownComponent, isStandalone: true, selector: "ap-action-dropdown", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, largeModeEnabled: { classPropertyName: "largeModeEnabled", publicName: "largeModeEnabled", isSignal: true, isRequired: false, transformFunction: null }, customWidth: { classPropertyName: "customWidth", publicName: "customWidth", isSignal: true, isRequired: false, transformFunction: null }, showBackdrop: { classPropertyName: "showBackdrop", publicName: "showBackdrop", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { opened: "opened", closed: "closed", itemClick: "itemClick" }, providers: [withSymbols(apInfo, apFeatureLock)], queries: [{ propertyName: "trigger", first: true, predicate: ["trigger"], descendants: true, isSignal: true }], viewQueries: [{ propertyName: "panel", first: true, predicate: DropdownPanelComponent, descendants: true, isSignal: true }, { propertyName: "menuItems", predicate: DropdownOptionDirective, descendants: true, isSignal: true }], ngImport: i0, template: "<ap-dropdown-panel\n    [placement]=\"placement()\"\n    [showBackdrop]=\"showBackdrop()\"\n    (closed)=\"onPanelClosed()\">\n    <!-- Action dropdown -->\n    <!-- `menu` decides the keyboard: arrows are mandatory, the items are one tab stop, and Tab exits.\n         `tabindex=\"-1\"` gives the panel something to focus on opening without adding a stop. -->\n    <div\n        *apDropdownContent\n        class=\"ap-action-dropdown__content\"\n        role=\"menu\"\n        tabindex=\"-1\"\n        [attr.aria-label]=\"'Action dropdown'\"\n        [class.ap-action-dropdown__content--default]=\"!largeModeEnabled() && !customWidth()\"\n        [class.ap-action-dropdown__content--large]=\"largeModeEnabled()\"\n        [style.width]=\"customWidth() ? customWidth() + 'px' : undefined\"\n        (keydown)=\"onKeyDown($event)\">\n        <!-- Action dropdown items -->\n        @for (item of items(); track item.label) {\n            <!-- Divider -->\n            @if (item.dividerEnabled) {\n                <div\n                    class=\"ap-action-dropdown__divider\"\n                    role=\"separator\"></div>\n            }\n            <!-- Action dropdown item -->\n            <div [apTooltip]=\"item.itemTooltipText\">\n                <!-- Roving tabindex: only the active item is tabbable, which is what makes the menu one stop. -->\n                <button\n                    type=\"button\"\n                    role=\"menuitem\"\n                    class=\"ap-action-dropdown__item\"\n                    [apDropdownOption]=\"item.label ?? ''\"\n                    [apDropdownOptionDisabled]=\"!!item.disabled\"\n                    [tabindex]=\"activeIndex() === $index ? 0 : -1\"\n                    [class.ap-action-dropdown__item--has-description]=\"item.description\"\n                    [class.ap-action-dropdown__item--red-mode]=\"item.redModeEnabled\"\n                    [class.ap-action-dropdown__item--feature-lock]=\"item.featureLockEnabled\"\n                    [attr.aria-disabled]=\"item.disabled\"\n                    [attr.data-track]=\"item.dataTrack\"\n                    [attr.id]=\"item.id\"\n                    [disabled]=\"item.disabled\"\n                    (click)=\"onItemClick(item)\">\n                    <!-- Start icon -->\n                    @if (item.startSymbolId) {\n                        <ap-symbol\n                            class=\"ap-action-dropdown__item-start-icon\"\n                            size=\"sm\"\n                            [color]=\"item.startSymbolColor ? item.startSymbolColor : item.redModeEnabled ? 'red' : 'basic-grey'\"\n                            [symbolId]=\"item.startSymbolId\"\n                            [apTooltip]=\"item.startSymbolTooltipText\" />\n                    }\n                    <!-- Label -->\n                    <div class=\"ap-action-dropdown__item-text-container\">\n                        <div class=\"ap-action-dropdown__item-label-container\">\n                            <div\n                                class=\"ap-action-dropdown__item-label\"\n                                [class.ap-action-dropdown__item-label--bold]=\"item.description\">\n                                {{ item.label }}\n                            </div>\n                            <!-- Badge -->\n                            @if (item.badgeLabel) {\n                                <ap-badge [color]=\"item.badgeColor ?? 'blue'\">\n                                    {{ item.badgeLabel }}\n                                </ap-badge>\n                            }\n                        </div>\n                        <!-- Description -->\n                        <div class=\"ap-action-dropdown__item-description\">{{ item.description }}</div>\n                    </div>\n                    <!-- End icon -->\n                    @if (item.endSymbolId) {\n                        <ap-symbol\n                            class=\"ap-action-dropdown__item-end-icon\"\n                            size=\"sm\"\n                            color=\"#858FA1\"\n                            [symbolId]=\"item.endSymbolId\"\n                            [apTooltip]=\"item.endSymbolTooltipText\" />\n                    }\n                    <!-- Feature lock icon -->\n                    @if (item.featureLockEnabled) {\n                        <ap-symbol\n                            class=\"ap-action-dropdown__item-end-icon\"\n                            size=\"sm\"\n                            color=\"purple\"\n                            symbolId=\"feature-lock\" />\n                    }\n                </button>\n            </div>\n        }\n    </div>\n</ap-dropdown-panel>\n", styles: [":host{display:none}.ap-action-dropdown__content{padding:var(--comp-action-dropdown-padding);outline:none;z-index:1000;max-height:var(--ap-floating-available-height, none);overflow-y:auto}.ap-action-dropdown__content.ap-action-dropdown__content--default{width:250px}.ap-action-dropdown__content.ap-action-dropdown__content--large{width:340px}.ap-action-dropdown__content:focus-visible{outline:2px solid var(--comp-action-dropdown-item-background-color-focused);outline-offset:2px}.ap-action-dropdown__item{display:flex;align-items:center;width:100%;height:40px;padding:var(--comp-action-dropdown-item-padding);border:none;background:transparent;color:var(--comp-action-dropdown-item-text-color);cursor:pointer;font-family:Averta;font-size:var(--comp-action-dropdown-item-text-size);line-height:var(--comp-action-dropdown-item-text-line-height);text-align:left}.ap-action-dropdown__item:hover{background-color:var(--comp-action-dropdown-item-background-color-hover)}.ap-action-dropdown__item:focus{outline:none;background-color:var(--comp-action-dropdown-item-background-color-focused)}.ap-action-dropdown__item:disabled{cursor:not-allowed;opacity:.4}.ap-action-dropdown__item.ap-action-dropdown__item--has-description{height:auto;min-height:50px}.ap-action-dropdown__item:focus-visible{background-color:var(--comp-action-dropdown-item-background-color-focused)}.ap-action-dropdown__item.ap-action-dropdown__item--red-mode{color:var(--comp-action-dropdown-item-text-color-red-mode)}.ap-action-dropdown__item.ap-action-dropdown__item--red-mode:hover{background-color:var(--comp-action-dropdown-item-background-color-red-mode-hover)}.ap-action-dropdown__item.ap-action-dropdown__item--red-mode:focus{background-color:var(--comp-action-dropdown-item-background-color-red-mode-focused)}.ap-action-dropdown__item.ap-action-dropdown__item--red-mode:focus-visible{background-color:var(--comp-action-dropdown-item-background-color-red-mode-focused)}.ap-action-dropdown__item.ap-action-dropdown__item--feature-lock:hover{background-color:var(--comp-action-dropdown-item-background-color-feature-lock-hover)}.ap-action-dropdown__item.ap-action-dropdown__item--feature-lock:focus{background-color:var(--comp-action-dropdown-item-background-color-feature-lock-focused)}.ap-action-dropdown__item.ap-action-dropdown__item--feature-lock:focus-visible{background-color:var(--comp-action-dropdown-item-background-color-feature-lock-focused)}.ap-action-dropdown__item.ap-action-dropdown__item--disabled:hover{background-color:transparent}.ap-action-dropdown__item .ap-action-dropdown__item-start-icon{margin-right:var(--comp-action-dropdown-item-icon-spacing)}.ap-action-dropdown__item .ap-action-dropdown__item-end-icon{margin-left:var(--comp-action-dropdown-item-icon-spacing)}.ap-action-dropdown__item .ap-action-dropdown__item-text-container{display:flex;flex-direction:column;flex:1;min-width:0}.ap-action-dropdown__item .ap-action-dropdown__item-text-container .ap-action-dropdown__item-label-container{display:flex;align-items:center;gap:var(--comp-action-dropdown-item-label-spacing);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ap-action-dropdown__item .ap-action-dropdown__item-text-container .ap-action-dropdown__item-label-container .ap-action-dropdown__item-label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ap-action-dropdown__item .ap-action-dropdown__item-text-container .ap-action-dropdown__item-label-container .ap-action-dropdown__item-label.ap-action-dropdown__item-label--bold{font-weight:var(--ref-font-weight-bold)}.ap-action-dropdown__item .ap-action-dropdown__item-text-container .ap-action-dropdown__item-description{color:var(--comp-action-dropdown-item-description-color);font-size:var(--comp-action-dropdown-item-description-size);line-height:var(--comp-action-dropdown-item-description-line-height)}.ap-action-dropdown__divider{height:1px;background-color:var(--comp-action-dropdown-divider-color);margin:var(--comp-action-dropdown-divider-margin)}\n"], dependencies: [{ kind: "component", type: BadgeComponent, selector: "ap-badge", inputs: ["color"] }, { kind: "directive", type: DropdownContentDirective, selector: "ng-template[apDropdownContent]" }, { kind: "directive", type: DropdownOptionDirective, selector: "[apDropdownOption]", inputs: ["apDropdownOption", "apDropdownOptionDisabled"] }, { kind: "component", type: DropdownPanelComponent, selector: "ap-dropdown-panel", inputs: ["placement", "showBackdrop", "panelClass", "canDismiss"], outputs: ["opened", "closed"] }, { kind: "component", type: SymbolComponent, selector: "ap-symbol", inputs: ["symbolId", "color", "size"], outputs: ["sizeChange"] }, { kind: "directive", type: TooltipDirective, selector: "[apTooltip]", inputs: ["apTooltip", "apTooltipPosition", "apTooltipShowDelay", "apTooltipHideDelay", "apTooltipDuration", "apTooltipDisabled", "apTooltipTruncatedTextOnly", "apTooltipTemplateContext", "apTooltipVirtualScrollElement", "apTooltipTrigger", "apTooltipType", "apTooltipPresentationContext", "apTooltipListItems", "apTooltipShowAvatarCaption"], exportAs: ["apTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: ActionDropdownComponent, decorators: [{
             type: Component,
-            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'ap-action-dropdown', imports: [BadgeComponent, DropdownContentDirective, DropdownPanelComponent, SymbolComponent, TooltipDirective], providers: [withSymbols(apInfo, apFeatureLock)], template: "<ap-dropdown-panel\n    [placement]=\"placement()\"\n    [showBackdrop]=\"showBackdrop()\"\n    (closed)=\"onPanelClosed()\">\n    <!-- Action dropdown -->\n    <div\n        *apDropdownContent\n        class=\"ap-action-dropdown__content\"\n        role=\"menu\"\n        tabindex=\"-1\"\n        [attr.aria-label]=\"'Action dropdown'\"\n        [class.ap-action-dropdown__content--default]=\"!largeModeEnabled() && !customWidth()\"\n        [class.ap-action-dropdown__content--large]=\"largeModeEnabled()\"\n        [style.width]=\"customWidth() ? customWidth() + 'px' : undefined\"\n        (keydown)=\"onKeyDown($event)\">\n        <!-- Action dropdown items -->\n        @for (item of items(); track item.label) {\n            <!-- Divider -->\n            @if (item.dividerEnabled) {\n                <div\n                    class=\"ap-action-dropdown__divider\"\n                    role=\"separator\"></div>\n            }\n            <!-- Action dropdown item -->\n            <div [apTooltip]=\"item.itemTooltipText\">\n                <button\n                    type=\"button\"\n                    role=\"menuitem\"\n                    class=\"ap-action-dropdown__item\"\n                    [class.ap-action-dropdown__item--has-description]=\"item.description\"\n                    [class.ap-action-dropdown__item--focused]=\"focusedIndex() === $index\"\n                    [class.ap-action-dropdown__item--red-mode]=\"item.redModeEnabled\"\n                    [class.ap-action-dropdown__item--feature-lock]=\"item.featureLockEnabled\"\n                    [attr.aria-disabled]=\"item.disabled\"\n                    [attr.data-track]=\"item.dataTrack\"\n                    [attr.id]=\"item.id\"\n                    [disabled]=\"item.disabled\"\n                    (click)=\"onItemClick(item)\">\n                    <!-- Start icon -->\n                    @if (item.startSymbolId) {\n                        <ap-symbol\n                            class=\"ap-action-dropdown__item-start-icon\"\n                            size=\"sm\"\n                            [color]=\"item.startSymbolColor ? item.startSymbolColor : item.redModeEnabled ? 'red' : 'basic-grey'\"\n                            [symbolId]=\"item.startSymbolId\"\n                            [apTooltip]=\"item.startSymbolTooltipText\" />\n                    }\n                    <!-- Label -->\n                    <div class=\"ap-action-dropdown__item-text-container\">\n                        <div class=\"ap-action-dropdown__item-label-container\">\n                            <div\n                                class=\"ap-action-dropdown__item-label\"\n                                [class.ap-action-dropdown__item-label--bold]=\"item.description\">\n                                {{ item.label }}\n                            </div>\n                            <!-- Badge -->\n                            @if (item.badgeLabel) {\n                                <ap-badge [color]=\"item.badgeColor ?? 'blue'\">\n                                    {{ item.badgeLabel }}\n                                </ap-badge>\n                            }\n                        </div>\n                        <!-- Description -->\n                        <div class=\"ap-action-dropdown__item-description\">{{ item.description }}</div>\n                    </div>\n                    <!-- End icon -->\n                    @if (item.endSymbolId) {\n                        <ap-symbol\n                            class=\"ap-action-dropdown__item-end-icon\"\n                            size=\"sm\"\n                            color=\"#858FA1\"\n                            [symbolId]=\"item.endSymbolId\"\n                            [apTooltip]=\"item.endSymbolTooltipText\" />\n                    }\n                    <!-- Feature lock icon -->\n                    @if (item.featureLockEnabled) {\n                        <ap-symbol\n                            class=\"ap-action-dropdown__item-end-icon\"\n                            size=\"sm\"\n                            color=\"purple\"\n                            symbolId=\"feature-lock\" />\n                    }\n                </button>\n            </div>\n        }\n    </div>\n</ap-dropdown-panel>\n", styles: [":host{display:none}.ap-action-dropdown__content{padding:var(--comp-action-dropdown-padding);outline:none;overflow:hidden;z-index:1000}.ap-action-dropdown__content.ap-action-dropdown__content--default{width:250px}.ap-action-dropdown__content.ap-action-dropdown__content--large{width:340px}.ap-action-dropdown__content:focus{outline:2px solid var(--comp-action-dropdown-item-background-color-focused);outline-offset:2px}.ap-action-dropdown__item{display:flex;align-items:center;width:100%;height:40px;padding:var(--comp-action-dropdown-item-padding);border:none;background:transparent;color:var(--comp-action-dropdown-item-text-color);cursor:pointer;font-family:Averta;font-size:var(--comp-action-dropdown-item-text-size);line-height:var(--comp-action-dropdown-item-text-line-height);text-align:left}.ap-action-dropdown__item:hover{background-color:var(--comp-action-dropdown-item-background-color-hover)}.ap-action-dropdown__item:focus{outline:none;background-color:var(--comp-action-dropdown-item-background-color-focused)}.ap-action-dropdown__item:disabled{cursor:not-allowed;opacity:.4}.ap-action-dropdown__item.ap-action-dropdown__item--has-description{height:auto;min-height:50px}.ap-action-dropdown__item.ap-action-dropdown__item--focused{background-color:var(--comp-action-dropdown-item-background-color-focused)}.ap-action-dropdown__item.ap-action-dropdown__item--red-mode{color:var(--comp-action-dropdown-item-text-color-red-mode)}.ap-action-dropdown__item.ap-action-dropdown__item--red-mode:hover{background-color:var(--comp-action-dropdown-item-background-color-red-mode-hover)}.ap-action-dropdown__item.ap-action-dropdown__item--red-mode:focus{background-color:var(--comp-action-dropdown-item-background-color-red-mode-focused)}.ap-action-dropdown__item.ap-action-dropdown__item--red-mode.ap-action-dropdown__item--focused{background-color:var(--comp-action-dropdown-item-background-color-red-mode-focused)}.ap-action-dropdown__item.ap-action-dropdown__item--feature-lock:hover{background-color:var(--comp-action-dropdown-item-background-color-feature-lock-hover)}.ap-action-dropdown__item.ap-action-dropdown__item--feature-lock:focus{background-color:var(--comp-action-dropdown-item-background-color-feature-lock-focused)}.ap-action-dropdown__item.ap-action-dropdown__item--feature-lock.ap-action-dropdown__item--focused{background-color:var(--comp-action-dropdown-item-background-color-feature-lock-focused)}.ap-action-dropdown__item.ap-action-dropdown__item--disabled:hover{background-color:transparent}.ap-action-dropdown__item .ap-action-dropdown__item-start-icon{margin-right:var(--comp-action-dropdown-item-icon-spacing)}.ap-action-dropdown__item .ap-action-dropdown__item-end-icon{margin-left:var(--comp-action-dropdown-item-icon-spacing)}.ap-action-dropdown__item .ap-action-dropdown__item-text-container{display:flex;flex-direction:column;flex:1;min-width:0}.ap-action-dropdown__item .ap-action-dropdown__item-text-container .ap-action-dropdown__item-label-container{display:flex;align-items:center;gap:var(--comp-action-dropdown-item-label-spacing);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ap-action-dropdown__item .ap-action-dropdown__item-text-container .ap-action-dropdown__item-label-container .ap-action-dropdown__item-label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ap-action-dropdown__item .ap-action-dropdown__item-text-container .ap-action-dropdown__item-label-container .ap-action-dropdown__item-label.ap-action-dropdown__item-label--bold{font-weight:var(--ref-font-weight-bold)}.ap-action-dropdown__item .ap-action-dropdown__item-text-container .ap-action-dropdown__item-description{color:var(--comp-action-dropdown-item-description-color);font-size:var(--comp-action-dropdown-item-description-size);line-height:var(--comp-action-dropdown-item-description-line-height)}.ap-action-dropdown__divider{height:1px;background-color:var(--comp-action-dropdown-divider-color);margin:var(--comp-action-dropdown-divider-margin)}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { panel: [{ type: i0.ViewChild, args: [i0.forwardRef(() => DropdownPanelComponent), { isSignal: true }] }], trigger: [{ type: i0.ContentChild, args: ['trigger', { isSignal: true }] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], largeModeEnabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "largeModeEnabled", required: false }] }], customWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "customWidth", required: false }] }], showBackdrop: [{ type: i0.Input, args: [{ isSignal: true, alias: "showBackdrop", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], placement: [{ type: i0.Input, args: [{ isSignal: true, alias: "placement", required: false }] }], opened: [{ type: i0.Output, args: ["opened"] }], closed: [{ type: i0.Output, args: ["closed"] }], itemClick: [{ type: i0.Output, args: ["itemClick"] }] } });
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'ap-action-dropdown', imports: [BadgeComponent, DropdownContentDirective, DropdownOptionDirective, DropdownPanelComponent, SymbolComponent, TooltipDirective], providers: [withSymbols(apInfo, apFeatureLock)], template: "<ap-dropdown-panel\n    [placement]=\"placement()\"\n    [showBackdrop]=\"showBackdrop()\"\n    (closed)=\"onPanelClosed()\">\n    <!-- Action dropdown -->\n    <!-- `menu` decides the keyboard: arrows are mandatory, the items are one tab stop, and Tab exits.\n         `tabindex=\"-1\"` gives the panel something to focus on opening without adding a stop. -->\n    <div\n        *apDropdownContent\n        class=\"ap-action-dropdown__content\"\n        role=\"menu\"\n        tabindex=\"-1\"\n        [attr.aria-label]=\"'Action dropdown'\"\n        [class.ap-action-dropdown__content--default]=\"!largeModeEnabled() && !customWidth()\"\n        [class.ap-action-dropdown__content--large]=\"largeModeEnabled()\"\n        [style.width]=\"customWidth() ? customWidth() + 'px' : undefined\"\n        (keydown)=\"onKeyDown($event)\">\n        <!-- Action dropdown items -->\n        @for (item of items(); track item.label) {\n            <!-- Divider -->\n            @if (item.dividerEnabled) {\n                <div\n                    class=\"ap-action-dropdown__divider\"\n                    role=\"separator\"></div>\n            }\n            <!-- Action dropdown item -->\n            <div [apTooltip]=\"item.itemTooltipText\">\n                <!-- Roving tabindex: only the active item is tabbable, which is what makes the menu one stop. -->\n                <button\n                    type=\"button\"\n                    role=\"menuitem\"\n                    class=\"ap-action-dropdown__item\"\n                    [apDropdownOption]=\"item.label ?? ''\"\n                    [apDropdownOptionDisabled]=\"!!item.disabled\"\n                    [tabindex]=\"activeIndex() === $index ? 0 : -1\"\n                    [class.ap-action-dropdown__item--has-description]=\"item.description\"\n                    [class.ap-action-dropdown__item--red-mode]=\"item.redModeEnabled\"\n                    [class.ap-action-dropdown__item--feature-lock]=\"item.featureLockEnabled\"\n                    [attr.aria-disabled]=\"item.disabled\"\n                    [attr.data-track]=\"item.dataTrack\"\n                    [attr.id]=\"item.id\"\n                    [disabled]=\"item.disabled\"\n                    (click)=\"onItemClick(item)\">\n                    <!-- Start icon -->\n                    @if (item.startSymbolId) {\n                        <ap-symbol\n                            class=\"ap-action-dropdown__item-start-icon\"\n                            size=\"sm\"\n                            [color]=\"item.startSymbolColor ? item.startSymbolColor : item.redModeEnabled ? 'red' : 'basic-grey'\"\n                            [symbolId]=\"item.startSymbolId\"\n                            [apTooltip]=\"item.startSymbolTooltipText\" />\n                    }\n                    <!-- Label -->\n                    <div class=\"ap-action-dropdown__item-text-container\">\n                        <div class=\"ap-action-dropdown__item-label-container\">\n                            <div\n                                class=\"ap-action-dropdown__item-label\"\n                                [class.ap-action-dropdown__item-label--bold]=\"item.description\">\n                                {{ item.label }}\n                            </div>\n                            <!-- Badge -->\n                            @if (item.badgeLabel) {\n                                <ap-badge [color]=\"item.badgeColor ?? 'blue'\">\n                                    {{ item.badgeLabel }}\n                                </ap-badge>\n                            }\n                        </div>\n                        <!-- Description -->\n                        <div class=\"ap-action-dropdown__item-description\">{{ item.description }}</div>\n                    </div>\n                    <!-- End icon -->\n                    @if (item.endSymbolId) {\n                        <ap-symbol\n                            class=\"ap-action-dropdown__item-end-icon\"\n                            size=\"sm\"\n                            color=\"#858FA1\"\n                            [symbolId]=\"item.endSymbolId\"\n                            [apTooltip]=\"item.endSymbolTooltipText\" />\n                    }\n                    <!-- Feature lock icon -->\n                    @if (item.featureLockEnabled) {\n                        <ap-symbol\n                            class=\"ap-action-dropdown__item-end-icon\"\n                            size=\"sm\"\n                            color=\"purple\"\n                            symbolId=\"feature-lock\" />\n                    }\n                </button>\n            </div>\n        }\n    </div>\n</ap-dropdown-panel>\n", styles: [":host{display:none}.ap-action-dropdown__content{padding:var(--comp-action-dropdown-padding);outline:none;z-index:1000;max-height:var(--ap-floating-available-height, none);overflow-y:auto}.ap-action-dropdown__content.ap-action-dropdown__content--default{width:250px}.ap-action-dropdown__content.ap-action-dropdown__content--large{width:340px}.ap-action-dropdown__content:focus-visible{outline:2px solid var(--comp-action-dropdown-item-background-color-focused);outline-offset:2px}.ap-action-dropdown__item{display:flex;align-items:center;width:100%;height:40px;padding:var(--comp-action-dropdown-item-padding);border:none;background:transparent;color:var(--comp-action-dropdown-item-text-color);cursor:pointer;font-family:Averta;font-size:var(--comp-action-dropdown-item-text-size);line-height:var(--comp-action-dropdown-item-text-line-height);text-align:left}.ap-action-dropdown__item:hover{background-color:var(--comp-action-dropdown-item-background-color-hover)}.ap-action-dropdown__item:focus{outline:none;background-color:var(--comp-action-dropdown-item-background-color-focused)}.ap-action-dropdown__item:disabled{cursor:not-allowed;opacity:.4}.ap-action-dropdown__item.ap-action-dropdown__item--has-description{height:auto;min-height:50px}.ap-action-dropdown__item:focus-visible{background-color:var(--comp-action-dropdown-item-background-color-focused)}.ap-action-dropdown__item.ap-action-dropdown__item--red-mode{color:var(--comp-action-dropdown-item-text-color-red-mode)}.ap-action-dropdown__item.ap-action-dropdown__item--red-mode:hover{background-color:var(--comp-action-dropdown-item-background-color-red-mode-hover)}.ap-action-dropdown__item.ap-action-dropdown__item--red-mode:focus{background-color:var(--comp-action-dropdown-item-background-color-red-mode-focused)}.ap-action-dropdown__item.ap-action-dropdown__item--red-mode:focus-visible{background-color:var(--comp-action-dropdown-item-background-color-red-mode-focused)}.ap-action-dropdown__item.ap-action-dropdown__item--feature-lock:hover{background-color:var(--comp-action-dropdown-item-background-color-feature-lock-hover)}.ap-action-dropdown__item.ap-action-dropdown__item--feature-lock:focus{background-color:var(--comp-action-dropdown-item-background-color-feature-lock-focused)}.ap-action-dropdown__item.ap-action-dropdown__item--feature-lock:focus-visible{background-color:var(--comp-action-dropdown-item-background-color-feature-lock-focused)}.ap-action-dropdown__item.ap-action-dropdown__item--disabled:hover{background-color:transparent}.ap-action-dropdown__item .ap-action-dropdown__item-start-icon{margin-right:var(--comp-action-dropdown-item-icon-spacing)}.ap-action-dropdown__item .ap-action-dropdown__item-end-icon{margin-left:var(--comp-action-dropdown-item-icon-spacing)}.ap-action-dropdown__item .ap-action-dropdown__item-text-container{display:flex;flex-direction:column;flex:1;min-width:0}.ap-action-dropdown__item .ap-action-dropdown__item-text-container .ap-action-dropdown__item-label-container{display:flex;align-items:center;gap:var(--comp-action-dropdown-item-label-spacing);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ap-action-dropdown__item .ap-action-dropdown__item-text-container .ap-action-dropdown__item-label-container .ap-action-dropdown__item-label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ap-action-dropdown__item .ap-action-dropdown__item-text-container .ap-action-dropdown__item-label-container .ap-action-dropdown__item-label.ap-action-dropdown__item-label--bold{font-weight:var(--ref-font-weight-bold)}.ap-action-dropdown__item .ap-action-dropdown__item-text-container .ap-action-dropdown__item-description{color:var(--comp-action-dropdown-item-description-color);font-size:var(--comp-action-dropdown-item-description-size);line-height:var(--comp-action-dropdown-item-description-line-height)}.ap-action-dropdown__divider{height:1px;background-color:var(--comp-action-dropdown-divider-color);margin:var(--comp-action-dropdown-divider-margin)}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { panel: [{ type: i0.ViewChild, args: [i0.forwardRef(() => DropdownPanelComponent), { isSignal: true }] }], trigger: [{ type: i0.ContentChild, args: ['trigger', { isSignal: true }] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], largeModeEnabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "largeModeEnabled", required: false }] }], customWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "customWidth", required: false }] }], showBackdrop: [{ type: i0.Input, args: [{ isSignal: true, alias: "showBackdrop", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], placement: [{ type: i0.Input, args: [{ isSignal: true, alias: "placement", required: false }] }], opened: [{ type: i0.Output, args: ["opened"] }], closed: [{ type: i0.Output, args: ["closed"] }], itemClick: [{ type: i0.Output, args: ["itemClick"] }], menuItems: [{ type: i0.ViewChildren, args: [i0.forwardRef(() => DropdownOptionDirective), { isSignal: true }] }] } });
 
 /**
  * Generated bundle index. Do not edit.

package/fesm2022/agorapulse-ui-components-action-dropdown.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"agorapulse-ui-components-action-dropdown.mjs","sources":["../../../libs/ui-components/action-dropdown/src/action-dropdown-trigger.directive.ts","../../../libs/ui-components/action-dropdown/src/action-dropdown.component.ts","../../../libs/ui-components/action-dropdown/src/action-dropdown.component.html","../../../libs/ui-components/action-dropdown/src/agorapulse-ui-components-action-dropdown.ts"],"sourcesContent":["import { Directive, ElementRef, HostListener, inject, input } from '@angular/core';\nimport { ActionDropdownComponent } from './action-dropdown.component';\n\n/**\n * Directive that turns any element into a trigger for an ActionDropdown component.\n * Handles click and keyboard interactions to open/close the dropdown.\n */\n@Directive({\n    selector: '[apActionDropdownTrigger]',\n})\nexport class ActionDropdownTriggerDirective {\n    private readonly elementRef = inject(ElementRef<HTMLElement>);\n\n    /** Reference to the ActionDropdown component that this trigger controls */\n    apActionDropdownTrigger = input<ActionDropdownComponent>();\n\n    /** Handles click events to toggle the dropdown */\n    @HostListener('click', ['$event'])\n    onClick(event: MouseEvent): void {\n        event.preventDefault();\n        event.stopPropagation();\n\n        this.apActionDropdownTrigger()?.toggle(this.elementRef.nativeElement);\n    }\n\n    /** Handles keyboard events for accessibility (Enter, Space, Arrow Down, Escape) */\n    @HostListener('keydown', ['$event'])\n    onKeyDown(event: KeyboardEvent): void {\n        const dropdown = this.apActionDropdownTrigger();\n        if (!dropdown) return;\n\n        switch (event.key) {\n            case 'Enter':\n            case ' ':\n            case 'ArrowDown':\n                event.preventDefault();\n                dropdown.open(this.elementRef.nativeElement);\n                break;\n\n            case 'Escape':\n                event.preventDefault();\n                dropdown.close();\n                break;\n        }\n    }\n}\n","import { BadgeColor, BadgeComponent } from '@agorapulse/ui-components/badge';\nimport { DropdownOverlay } from '@agorapulse/ui-components/dropdown-base';\nimport { DropdownContentDirective, DropdownPanelComponent } from '@agorapulse/ui-components/dropdown-panel';\nimport { FloatingPlacement } from '@agorapulse/ui-components/floating';\nimport { UI_COMPONENTS_SYMBOLS } from '@agorapulse/ui-components/providers';\nimport { TooltipDirective } from '@agorapulse/ui-components/tooltip';\nimport { agorapulseSymbol, apFeatureLock, apInfo, SymbolColor, SymbolComponent, SymbolRegistry, withSymbols } from '@agorapulse/ui-symbol';\n\nimport {\n    ChangeDetectionStrategy,\n    Component,\n    computed,\n    contentChild,\n    effect,\n    inject,\n    input,\n    output,\n    signal,\n    TemplateRef,\n    viewChild,\n} from '@angular/core';\n\nexport interface ActionDropdownItem {\n    /** Unique identifier for the item */\n    name?: string;\n    /** Display text for the item */\n    label?: string;\n    /** Secondary text displayed below the label */\n    description?: string;\n    /** Text displayed in a badge next to the item */\n    badgeLabel?: string;\n    /** Color of the badge displayed next to the item */\n    badgeColor?: BadgeColor;\n    /** Whether to show a feature lock icon */\n    featureLockEnabled?: boolean;\n    /** Whether to apply red styling for destructive actions */\n    redModeEnabled?: boolean;\n    /** Tooltip text displayed when hovering over the item */\n    itemTooltipText?: string;\n    /** Icon symbol identifier displayed at the start of the item */\n    startSymbolId?: agorapulseSymbol;\n    /** Color theme for the start symbol */\n    startSymbolColor?: SymbolColor;\n    /** Tooltip text for the start symbol */\n    startSymbolTooltipText?: string;\n    /** Icon symbol identifier displayed at the end of the item */\n    endSymbolId?: agorapulseSymbol;\n    /** Tooltip text for the end symbol */\n    endSymbolTooltipText?: string;\n    /** Whether the item is disabled and non-interactive */\n    disabled?: boolean;\n    /** Whether to add a divider before this item */\n    dividerEnabled?: boolean;\n    /** Optional ID for the action button item */\n    id?: string;\n    /** Optional data-track attribute for analytics tracking */\n    dataTrack?: string;\n}\n\n/**\n * A dropdown component that displays a list of actionable items with support for icons,\n * badges, tooltips, and keyboard navigation.\n */\n@Component({\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    selector: 'ap-action-dropdown',\n    templateUrl: './action-dropdown.component.html',\n    styleUrls: ['./action-dropdown.component.scss'],\n    imports: [BadgeComponent, DropdownContentDirective, DropdownPanelComponent, SymbolComponent, TooltipDirective],\n    providers: [withSymbols(apInfo, apFeatureLock)],\n})\nexport class ActionDropdownComponent implements DropdownOverlay {\n    private readonly symbolRegistry = inject(SymbolRegistry);\n    private readonly panel = viewChild(DropdownPanelComponent);\n\n    trigger = contentChild<TemplateRef<unknown>>('trigger');\n\n    /** Array of items to display in the dropdown menu */\n    items = input<ActionDropdownItem[]>([]);\n    /** Whether to enable large mode styling for the dropdown */\n    largeModeEnabled = input(false);\n    /** Custom width for the dropdown menu in pixels */\n    customWidth = input<number | null>(null);\n\n    /** Whether to show a backdrop that closes the dropdown when clicked */\n    showBackdrop = input(true);\n    /** Whether the dropdown is disabled and cannot be opened */\n    disabled = input(false);\n    /** Default position for the dropdown relative to the trigger element */\n    /** Panel placement. Unset means derived from the anchor mode, i.e. `bottom-start`. */\n    readonly placement = input<FloatingPlacement>();\n\n    /** Emits when the dropdown menu is opened */\n    opened = output<void>();\n    /** Emits when the dropdown menu is closed */\n    closed = output<void>();\n    /** Emits when a dropdown item is clicked */\n    itemClick = output<ActionDropdownItem>();\n\n    protected readonly focusedIndex = signal(-1);\n\n    readonly isOpen = computed(() => this.panel()?.isOpen() ?? false);\n\n    constructor() {\n        this.symbolRegistry.withSymbols(...(inject(UI_COMPONENTS_SYMBOLS, { optional: true })?.flat() ?? []));\n\n        // Set up keyboard navigation when dropdown opens\n        effect(() => {\n            if (this.isOpen()) {\n                this.setupKeyboardNavigation();\n            }\n        });\n    }\n\n    /** Opens the dropdown menu at the specified trigger element */\n    open(triggerElement?: HTMLElement): void {\n        const panel = this.panel();\n        if (this.disabled() || this.isOpen() || !panel) return;\n\n        panel.open(triggerElement);\n        this.opened.emit();\n    }\n\n    close(): void {\n        this.panel()?.close();\n    }\n\n    protected onPanelClosed(): void {\n        this.focusedIndex.set(-1);\n        this.closed.emit();\n    }\n\n    /** Toggles the dropdown menu open or closed state */\n    toggle(triggerElement?: HTMLElement): void {\n        if (this.isOpen()) {\n            this.close();\n        } else {\n            this.open(triggerElement);\n        }\n    }\n\n    /** Handles item click events, emitting the selected item and closing the dropdown */\n    onItemClick(item: ActionDropdownItem): void {\n        if (item.disabled) {\n            return;\n        }\n\n        this.itemClick.emit(item);\n\n        this.close();\n    }\n\n    /** Handles keyboard navigation within the dropdown menu */\n    onKeyDown(event: KeyboardEvent): void {\n        const items = this.items();\n        const currentIndex = this.focusedIndex();\n        let nextIndex: number;\n        let prevIndex: number;\n\n        switch (event.key) {\n            case 'ArrowDown':\n                event.preventDefault();\n                nextIndex = currentIndex < items.length - 1 ? currentIndex + 1 : 0;\n                this.focusedIndex.set(nextIndex);\n                break;\n\n            case 'ArrowUp':\n                event.preventDefault();\n                prevIndex = currentIndex > 0 ? currentIndex - 1 : items.length - 1;\n                this.focusedIndex.set(prevIndex);\n                break;\n\n            case 'Enter':\n            case ' ':\n                event.preventDefault();\n                if (currentIndex >= 0 && currentIndex < items.length) {\n                    this.onItemClick(items[currentIndex]);\n                }\n                break;\n\n            case 'Escape':\n                event.preventDefault();\n                this.close();\n                break;\n\n            case 'Tab':\n                event.preventDefault();\n                if (event.shiftKey) {\n                    // Shift+Tab - move to previous item\n                    prevIndex = currentIndex > 0 ? currentIndex - 1 : items.length - 1;\n                    this.focusedIndex.set(prevIndex);\n                } else {\n                    // Tab - move to next item\n                    nextIndex = currentIndex < items.length - 1 ? currentIndex + 1 : 0;\n                    this.focusedIndex.set(nextIndex);\n                }\n                break;\n        }\n    }\n\n    /** Sets up keyboard event handling for the opened dropdown */\n    private setupKeyboardNavigation(): void {\n        const ref = this.panel()?.overlayRef;\n        if (!ref) return;\n\n        ref.keydownEvents().subscribe((event: KeyboardEvent) => {\n            this.onKeyDown(event);\n        });\n    }\n}\n","<ap-dropdown-panel\n    [placement]=\"placement()\"\n    [showBackdrop]=\"showBackdrop()\"\n    (closed)=\"onPanelClosed()\">\n    <!-- Action dropdown -->\n    <div\n        *apDropdownContent\n        class=\"ap-action-dropdown__content\"\n        role=\"menu\"\n        tabindex=\"-1\"\n        [attr.aria-label]=\"'Action dropdown'\"\n        [class.ap-action-dropdown__content--default]=\"!largeModeEnabled() && !customWidth()\"\n        [class.ap-action-dropdown__content--large]=\"largeModeEnabled()\"\n        [style.width]=\"customWidth() ? customWidth() + 'px' : undefined\"\n        (keydown)=\"onKeyDown($event)\">\n        <!-- Action dropdown items -->\n        @for (item of items(); track item.label) {\n            <!-- Divider -->\n            @if (item.dividerEnabled) {\n                <div\n                    class=\"ap-action-dropdown__divider\"\n                    role=\"separator\"></div>\n            }\n            <!-- Action dropdown item -->\n            <div [apTooltip]=\"item.itemTooltipText\">\n                <button\n                    type=\"button\"\n                    role=\"menuitem\"\n                    class=\"ap-action-dropdown__item\"\n                    [class.ap-action-dropdown__item--has-description]=\"item.description\"\n                    [class.ap-action-dropdown__item--focused]=\"focusedIndex() === $index\"\n                    [class.ap-action-dropdown__item--red-mode]=\"item.redModeEnabled\"\n                    [class.ap-action-dropdown__item--feature-lock]=\"item.featureLockEnabled\"\n                    [attr.aria-disabled]=\"item.disabled\"\n                    [attr.data-track]=\"item.dataTrack\"\n                    [attr.id]=\"item.id\"\n                    [disabled]=\"item.disabled\"\n                    (click)=\"onItemClick(item)\">\n                    <!-- Start icon -->\n                    @if (item.startSymbolId) {\n                        <ap-symbol\n                            class=\"ap-action-dropdown__item-start-icon\"\n                            size=\"sm\"\n                            [color]=\"item.startSymbolColor ? item.startSymbolColor : item.redModeEnabled ? 'red' : 'basic-grey'\"\n                            [symbolId]=\"item.startSymbolId\"\n                            [apTooltip]=\"item.startSymbolTooltipText\" />\n                    }\n                    <!-- Label -->\n                    <div class=\"ap-action-dropdown__item-text-container\">\n                        <div class=\"ap-action-dropdown__item-label-container\">\n                            <div\n                                class=\"ap-action-dropdown__item-label\"\n                                [class.ap-action-dropdown__item-label--bold]=\"item.description\">\n                                {{ item.label }}\n                            </div>\n                            <!-- Badge -->\n                            @if (item.badgeLabel) {\n                                <ap-badge [color]=\"item.badgeColor ?? 'blue'\">\n                                    {{ item.badgeLabel }}\n                                </ap-badge>\n                            }\n                        </div>\n                        <!-- Description -->\n                        <div class=\"ap-action-dropdown__item-description\">{{ item.description }}</div>\n                    </div>\n                    <!-- End icon -->\n                    @if (item.endSymbolId) {\n                        <ap-symbol\n                            class=\"ap-action-dropdown__item-end-icon\"\n                            size=\"sm\"\n                            color=\"#858FA1\"\n                            [symbolId]=\"item.endSymbolId\"\n                            [apTooltip]=\"item.endSymbolTooltipText\" />\n                    }\n                    <!-- Feature lock icon -->\n                    @if (item.featureLockEnabled) {\n                        <ap-symbol\n                            class=\"ap-action-dropdown__item-end-icon\"\n                            size=\"sm\"\n                            color=\"purple\"\n                            symbolId=\"feature-lock\" />\n                    }\n                </button>\n            </div>\n        }\n    </div>\n</ap-dropdown-panel>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"agorapulse-ui-components-action-dropdown.mjs","sources":["../../../libs/ui-components/action-dropdown/src/action-dropdown-trigger.directive.ts","../../../libs/ui-components/action-dropdown/src/action-dropdown.component.ts","../../../libs/ui-components/action-dropdown/src/action-dropdown.component.html","../../../libs/ui-components/action-dropdown/src/agorapulse-ui-components-action-dropdown.ts"],"sourcesContent":["import { Directive, ElementRef, HostListener, inject, input } from '@angular/core';\nimport { ActionDropdownComponent } from './action-dropdown.component';\n\n/**\n * Directive that turns any element into a trigger for an ActionDropdown component.\n * Handles click and keyboard interactions to open/close the dropdown.\n */\n@Directive({\n    selector: '[apActionDropdownTrigger]',\n})\nexport class ActionDropdownTriggerDirective {\n    private readonly elementRef = inject(ElementRef<HTMLElement>);\n\n    /** Reference to the ActionDropdown component that this trigger controls */\n    apActionDropdownTrigger = input<ActionDropdownComponent>();\n\n    /** Handles click events to toggle the dropdown */\n    @HostListener('click', ['$event'])\n    onClick(event: MouseEvent): void {\n        event.preventDefault();\n        event.stopPropagation();\n\n        this.apActionDropdownTrigger()?.toggle(this.elementRef.nativeElement);\n    }\n\n    /** Handles keyboard events for accessibility (Enter, Space, Arrow Down, Escape) */\n    @HostListener('keydown', ['$event'])\n    onKeyDown(event: KeyboardEvent): void {\n        const dropdown = this.apActionDropdownTrigger();\n        if (!dropdown) return;\n\n        switch (event.key) {\n            case 'Enter':\n            case ' ':\n            case 'ArrowDown':\n                event.preventDefault();\n                dropdown.open(this.elementRef.nativeElement);\n                break;\n\n            case 'Escape':\n                event.preventDefault();\n                dropdown.close();\n                break;\n        }\n    }\n}\n","import { BadgeColor, BadgeComponent } from '@agorapulse/ui-components/badge';\nimport { FocusKeyManager } from '@angular/cdk/a11y';\nimport { DropdownOptionDirective, DropdownOverlay } from '@agorapulse/ui-components/dropdown-base';\nimport { DropdownContentDirective, DropdownPanelComponent } from '@agorapulse/ui-components/dropdown-panel';\nimport { FloatingPlacement } from '@agorapulse/ui-components/floating';\nimport { UI_COMPONENTS_SYMBOLS } from '@agorapulse/ui-components/providers';\nimport { TooltipDirective } from '@agorapulse/ui-components/tooltip';\nimport { agorapulseSymbol, apFeatureLock, apInfo, SymbolColor, SymbolComponent, SymbolRegistry, withSymbols } from '@agorapulse/ui-symbol';\n\nimport {\n    ChangeDetectionStrategy,\n    Component,\n    computed,\n    contentChild,\n    effect,\n    inject,\n    Injector,\n    input,\n    output,\n    signal,\n    TemplateRef,\n    untracked,\n    viewChild,\n    viewChildren,\n} from '@angular/core';\n\nexport interface ActionDropdownItem {\n    /** Unique identifier for the item */\n    name?: string;\n    /** Display text for the item */\n    label?: string;\n    /** Secondary text displayed below the label */\n    description?: string;\n    /** Text displayed in a badge next to the item */\n    badgeLabel?: string;\n    /** Color of the badge displayed next to the item */\n    badgeColor?: BadgeColor;\n    /** Whether to show a feature lock icon */\n    featureLockEnabled?: boolean;\n    /** Whether to apply red styling for destructive actions */\n    redModeEnabled?: boolean;\n    /** Tooltip text displayed when hovering over the item */\n    itemTooltipText?: string;\n    /** Icon symbol identifier displayed at the start of the item */\n    startSymbolId?: agorapulseSymbol;\n    /** Color theme for the start symbol */\n    startSymbolColor?: SymbolColor;\n    /** Tooltip text for the start symbol */\n    startSymbolTooltipText?: string;\n    /** Icon symbol identifier displayed at the end of the item */\n    endSymbolId?: agorapulseSymbol;\n    /** Tooltip text for the end symbol */\n    endSymbolTooltipText?: string;\n    /** Whether the item is disabled and non-interactive */\n    disabled?: boolean;\n    /** Whether to add a divider before this item */\n    dividerEnabled?: boolean;\n    /** Optional ID for the action button item */\n    id?: string;\n    /** Optional data-track attribute for analytics tracking */\n    dataTrack?: string;\n}\n\n/**\n * A dropdown component that displays a list of actionable items with support for icons,\n * badges, tooltips, and keyboard navigation.\n */\n@Component({\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    selector: 'ap-action-dropdown',\n    templateUrl: './action-dropdown.component.html',\n    styleUrls: ['./action-dropdown.component.scss'],\n    imports: [BadgeComponent, DropdownContentDirective, DropdownOptionDirective, DropdownPanelComponent, SymbolComponent, TooltipDirective],\n    providers: [withSymbols(apInfo, apFeatureLock)],\n})\nexport class ActionDropdownComponent implements DropdownOverlay {\n    private readonly symbolRegistry = inject(SymbolRegistry);\n    private readonly panel = viewChild(DropdownPanelComponent);\n\n    trigger = contentChild<TemplateRef<unknown>>('trigger');\n\n    /** Array of items to display in the dropdown menu */\n    items = input<ActionDropdownItem[]>([]);\n    /** Whether to enable large mode styling for the dropdown */\n    largeModeEnabled = input(false);\n    /** Custom width for the dropdown menu in pixels */\n    customWidth = input<number | null>(null);\n\n    /** Whether to show a backdrop that closes the dropdown when clicked */\n    showBackdrop = input(true);\n    /** Whether the dropdown is disabled and cannot be opened */\n    disabled = input(false);\n    /** Panel placement. Unset means derived from the anchor mode, i.e. `bottom-start`. */\n    readonly placement = input<FloatingPlacement>();\n\n    /** Emits when the dropdown menu is opened */\n    opened = output<void>();\n    /** Emits when the dropdown menu is closed */\n    closed = output<void>();\n    /** Emits when a dropdown item is clicked */\n    itemClick = output<ActionDropdownItem>();\n\n    private readonly menuItems = viewChildren(DropdownOptionDirective);\n\n    /** Mirrors the key manager's active index, so the roving tabindex can be bound. */\n    protected readonly activeIndex = signal(-1);\n\n    private readonly keyManager = new FocusKeyManager(this.menuItems, inject(Injector)).withWrap().withTypeAhead().withHomeAndEnd();\n\n    private primed = false;\n\n    readonly isOpen = computed(() => this.panel()?.isOpen() ?? false);\n\n    constructor() {\n        this.symbolRegistry.withSymbols(...(inject(UI_COMPONENTS_SYMBOLS, { optional: true })?.flat() ?? []));\n\n        this.keyManager.change.subscribe(index => this.activeIndex.set(index));\n        // APG: Tab leaves a menu and closes it, rather than walking its items.\n        this.keyManager.tabOut.subscribe(() => this.close());\n\n        // The items only exist once the panel has stamped its template.\n        effect(() => {\n            const open = this.isOpen();\n            const items = this.menuItems();\n            untracked(() => {\n                if (open && items.length > 0 && !this.primed) {\n                    this.primed = true;\n                    this.keyManager.setFirstItemActive();\n                }\n            });\n        });\n    }\n\n    /** Opens the dropdown menu at the specified trigger element */\n    open(triggerElement?: HTMLElement): void {\n        const panel = this.panel();\n        if (this.disabled() || this.isOpen() || !panel) return;\n\n        panel.open(triggerElement);\n        this.opened.emit();\n    }\n\n    close(): void {\n        this.panel()?.close();\n    }\n\n    protected onPanelClosed(): void {\n        this.primed = false;\n        this.activeIndex.set(-1);\n        this.closed.emit();\n    }\n\n    /** Toggles the dropdown menu open or closed state */\n    toggle(triggerElement?: HTMLElement): void {\n        if (this.isOpen()) {\n            this.close();\n        } else {\n            this.open(triggerElement);\n        }\n    }\n\n    /** Handles item click events, emitting the selected item and closing the dropdown */\n    onItemClick(item: ActionDropdownItem): void {\n        if (item.disabled) {\n            return;\n        }\n\n        this.itemClick.emit(item);\n\n        this.close();\n    }\n\n    /** Enter and Space need nothing: focus is real, so the button fires its own click. Escape belongs to the panel. */\n    onKeyDown(event: KeyboardEvent): void {\n        this.keyManager.onKeydown(event);\n    }\n}\n","<ap-dropdown-panel\n    [placement]=\"placement()\"\n    [showBackdrop]=\"showBackdrop()\"\n    (closed)=\"onPanelClosed()\">\n    <!-- Action dropdown -->\n    <!-- `menu` decides the keyboard: arrows are mandatory, the items are one tab stop, and Tab exits.\n         `tabindex=\"-1\"` gives the panel something to focus on opening without adding a stop. -->\n    <div\n        *apDropdownContent\n        class=\"ap-action-dropdown__content\"\n        role=\"menu\"\n        tabindex=\"-1\"\n        [attr.aria-label]=\"'Action dropdown'\"\n        [class.ap-action-dropdown__content--default]=\"!largeModeEnabled() && !customWidth()\"\n        [class.ap-action-dropdown__content--large]=\"largeModeEnabled()\"\n        [style.width]=\"customWidth() ? customWidth() + 'px' : undefined\"\n        (keydown)=\"onKeyDown($event)\">\n        <!-- Action dropdown items -->\n        @for (item of items(); track item.label) {\n            <!-- Divider -->\n            @if (item.dividerEnabled) {\n                <div\n                    class=\"ap-action-dropdown__divider\"\n                    role=\"separator\"></div>\n            }\n            <!-- Action dropdown item -->\n            <div [apTooltip]=\"item.itemTooltipText\">\n                <!-- Roving tabindex: only the active item is tabbable, which is what makes the menu one stop. -->\n                <button\n                    type=\"button\"\n                    role=\"menuitem\"\n                    class=\"ap-action-dropdown__item\"\n                    [apDropdownOption]=\"item.label ?? ''\"\n                    [apDropdownOptionDisabled]=\"!!item.disabled\"\n                    [tabindex]=\"activeIndex() === $index ? 0 : -1\"\n                    [class.ap-action-dropdown__item--has-description]=\"item.description\"\n                    [class.ap-action-dropdown__item--red-mode]=\"item.redModeEnabled\"\n                    [class.ap-action-dropdown__item--feature-lock]=\"item.featureLockEnabled\"\n                    [attr.aria-disabled]=\"item.disabled\"\n                    [attr.data-track]=\"item.dataTrack\"\n                    [attr.id]=\"item.id\"\n                    [disabled]=\"item.disabled\"\n                    (click)=\"onItemClick(item)\">\n                    <!-- Start icon -->\n                    @if (item.startSymbolId) {\n                        <ap-symbol\n                            class=\"ap-action-dropdown__item-start-icon\"\n                            size=\"sm\"\n                            [color]=\"item.startSymbolColor ? item.startSymbolColor : item.redModeEnabled ? 'red' : 'basic-grey'\"\n                            [symbolId]=\"item.startSymbolId\"\n                            [apTooltip]=\"item.startSymbolTooltipText\" />\n                    }\n                    <!-- Label -->\n                    <div class=\"ap-action-dropdown__item-text-container\">\n                        <div class=\"ap-action-dropdown__item-label-container\">\n                            <div\n                                class=\"ap-action-dropdown__item-label\"\n                                [class.ap-action-dropdown__item-label--bold]=\"item.description\">\n                                {{ item.label }}\n                            </div>\n                            <!-- Badge -->\n                            @if (item.badgeLabel) {\n                                <ap-badge [color]=\"item.badgeColor ?? 'blue'\">\n                                    {{ item.badgeLabel }}\n                                </ap-badge>\n                            }\n                        </div>\n                        <!-- Description -->\n                        <div class=\"ap-action-dropdown__item-description\">{{ item.description }}</div>\n                    </div>\n                    <!-- End icon -->\n                    @if (item.endSymbolId) {\n                        <ap-symbol\n                            class=\"ap-action-dropdown__item-end-icon\"\n                            size=\"sm\"\n                            color=\"#858FA1\"\n                            [symbolId]=\"item.endSymbolId\"\n                            [apTooltip]=\"item.endSymbolTooltipText\" />\n                    }\n                    <!-- Feature lock icon -->\n                    @if (item.featureLockEnabled) {\n                        <ap-symbol\n                            class=\"ap-action-dropdown__item-end-icon\"\n                            size=\"sm\"\n                            color=\"purple\"\n                            symbolId=\"feature-lock\" />\n                    }\n                </button>\n            </div>\n        }\n    </div>\n</ap-dropdown-panel>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":"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"}

package/fesm2022/agorapulse-ui-components-button.mjs

@@ -1,9 +1,9 @@
 import * as i1 from '@agorapulse/ui-components/directives';
-import { BaseButtonDirective } from '@agorapulse/ui-components/directives';
+import { BaseButtonDirective, AP_INTERACTIVE_ELEMENT } from '@agorapulse/ui-components/directives';
 import { UI_COMPONENTS_SYMBOLS } from '@agorapulse/ui-components/providers';
 import { SymbolRegistry, SymbolComponent } from '@agorapulse/ui-symbol';
 import * as i0 from '@angular/core';
-import { inject, viewChild, input, booleanAttribute, output, computed, HostListener, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
+import { inject, viewChild, input, booleanAttribute, output, computed, forwardRef, HostListener, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
 import * as i2 from '@angular/material/menu';
 import { MatMenuModule } from '@angular/material/menu';
 
@@ -14,6 +14,10 @@ const defaultButtonConfig = {
 class ButtonComponent {
     baseButtonDirective = inject(BaseButtonDirective, { self: true });
     buttonElement = viewChild.required('button');
+    /** The host is a wrapper: this is the element that takes focus and carries the ARIA state. */
+    interactiveElement() {
+        return this.buttonElement().nativeElement;
+    }
     ariaLabel = input(/* @ts-ignore */
     ...(ngDevMode ? [undefined, { debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
     disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
@@ -87,11 +91,11 @@ class ButtonComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: ButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: ButtonComponent, isStandalone: true, selector: "ap-button", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: false, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, locked: { classPropertyName: "locked", publicName: "locked", isSignal: true, isRequired: false, transformFunction: null }, menuTrigger: { classPropertyName: "menuTrigger", publicName: "menuTrigger", isSignal: true, isRequired: false, transformFunction: null }, symbolPosition: { classPropertyName: "symbolPosition", publicName: "symbolPosition", isSignal: true, isRequired: false, transformFunction: null }, symbolId: { classPropertyName: "symbolId", publicName: "symbolId", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { menuOpened: "menuOpened", menuClosed: "menuClosed", click: "click", focus: "focus", blur: "blur" }, host: { listeners: { "window:keyup.space": "onSpaceKeyUp($event)" }, properties: { "attr.disabled": "loading() || disabled() || null" } }, viewQueries: [{ propertyName: "buttonElement", first: true, predicate: ["button"], descendants: true, isSignal: true }], hostDirectives: [{ directive: i1.BaseButtonDirective }], ngImport: i0, template: "<button\n    #button\n    role=\"button\"\n    [matMenuTriggerFor]=\"menuTrigger()\"\n    [class]=\"buttonClasses()\"\n    [disabled]=\"disabled() && !locked()\"\n    [attr.name]=\"name()\"\n    [attr.data-test]=\"baseButtonDirective.hostDataTest ?? name()\"\n    [attr.id]=\"baseButtonDirective.hostId\"\n    [attr.type]=\"baseButtonDirective.hostType\"\n    [attr.form]=\"form()\"\n    [attr.aria-label]=\"ariaLabel() || null\"\n    [attr.aria-disabled]=\"disabled()?.toString()\"\n    (click)=\"onClickHandle($event)\"\n    (focus)=\"onFocusHandle($event)\"\n    (blur)=\"onBlurHandle($event)\"\n    (menuOpened)=\"menuOpened.emit()\"\n    (menuClosed)=\"menuClosed.emit()\">\n    <ng-content />\n    @if (symbolId()) {\n        <ap-symbol [symbolId]=\"symbolId()\" />\n    } @else {\n        <ng-content select=\"ap-symbol\" />\n    }\n    @if (loading() && !locked()) {\n        <div class=\"loading-bar\"></div>\n    }\n</button>\n@if (locked()) {\n    <div class=\"locked-symbol\">\n        <ap-symbol\n            symbolId=\"feature-lock\"\n            size=\"sm\" />\n    </div>\n}\n", styles: ["ap-button{--loading-bar-width: 50px;display:inline-block;position:relative}ap-button[disabled]{pointer-events:none}ap-button button{border:none;border-radius:var(--comp-button-border-radius);padding:var(--comp-button-padding-horizontal) var(--comp-button-padding-vertical);position:relative;overflow:hidden;display:flex;justify-content:center;align-items:center;gap:var(--comp-split-button-spacing);flex-direction:row;font-size:var(--comp-button-text-size);font-family:var(--comp-button-text-font-family);line-height:var(--comp-button-text-line-height);font-weight:var(--comp-button-text-weight);max-height:var(--comp-button-height);min-height:var(--comp-button-height);white-space:nowrap;text-overflow:ellipsis;width:100%}ap-button button ap-symbol{width:16px;min-width:16px;max-width:16px;height:16px;min-height:16px;max-height:16px}ap-button button.inverse{flex-direction:row-reverse}ap-button button:hover:not(:disabled):not(.loading){cursor:pointer}ap-button button:disabled{pointer-events:none}@media(hover:hover){ap-button button:focus:not(:disabled):not(:active):not(.loading){outline:2px solid var(--ref-color-electric-blue-100);outline-offset:1px}}ap-button button.loading{pointer-events:none}ap-button button.primary{color:var(--ref-color-white)}ap-button button.primary ap-symbol{color:var(--ref-color-white)}ap-button button.primary.orange{background:var(--ref-color-orange-100)}ap-button button.primary.orange:hover{background-color:var(--ref-color-orange-80)}ap-button button.primary.orange:active:not(:disabled){background-color:var(--ref-color-orange-60)}ap-button button.primary.orange:disabled{background-color:var(--ref-color-orange-20)}ap-button button.primary.orange.loading{background-color:var(--ref-color-orange-60)}ap-button button.primary.orange .loading-bar{background-color:var(--ref-color-orange-100)}ap-button button.primary.blue{background:var(--ref-color-electric-blue-100)}ap-button button.primary.blue:hover{background-color:var(--ref-color-electric-blue-80)}ap-button button.primary.blue:active:not(:disabled){background-color:var(--ref-color-electric-blue-60)}ap-button button.primary.blue:disabled{background-color:var(--ref-color-electric-blue-20)}ap-button button.primary.blue.loading{background-color:var(--ref-color-electric-blue-60)}ap-button button.primary.blue .loading-bar{background-color:var(--ref-color-electric-blue-100)}ap-button button.secondary.orange{background:var(--ref-color-orange-10);color:var(--ref-color-orange-100)}ap-button button.secondary.orange ap-symbol{color:var(--ref-color-orange-100)}ap-button button.secondary.orange:hover{background-color:var(--ref-color-orange-20)}ap-button button.secondary.orange:active:not(:disabled){background-color:var(--ref-color-orange-40)}ap-button button.secondary.orange:focus:not(:disabled):not(:active){background-color:var(--ref-color-orange-10)}ap-button button.secondary.orange:disabled{background-color:var(--ref-color-orange-10);color:var(--ref-color-orange-20)}ap-button button.secondary.orange:disabled ap-symbol{color:var(--ref-color-orange-20)}ap-button button.secondary.orange.loading{background-color:var(--ref-color-orange-40)}ap-button button.secondary.orange .loading-bar{background-color:var(--ref-color-orange-100)}ap-button button.secondary.blue{background:var(--ref-color-electric-blue-10);color:var(--ref-color-electric-blue-100)}ap-button button.secondary.blue ap-symbol{color:var(--ref-color-electric-blue-100)}ap-button button.secondary.blue:hover{background-color:var(--ref-color-electric-blue-20)}ap-button button.secondary.blue:active:not(:disabled){background-color:var(--ref-color-electric-blue-40)}ap-button button.secondary.blue:focus:not(:disabled):not(:active){background-color:var(--ref-color-electric-blue-10)}ap-button button.secondary.blue:disabled{background-color:var(--ref-color-electric-blue-10);color:var(--ref-color-electric-blue-20)}ap-button button.secondary.blue:disabled ap-symbol{color:var(--ref-color-electric-blue-20)}ap-button button.secondary.blue.loading{background-color:var(--ref-color-electric-blue-40)}ap-button button.secondary.blue .loading-bar{background-color:var(--ref-color-electric-blue-100)}ap-button button.mermaid{background:linear-gradient(90deg,#578fff,#df52ff);color:var(--ref-color-grey-100);border:none;border-radius:var(--ref-border-radius-sm);position:relative;z-index:1}ap-button button.mermaid:after{content:\"\";position:absolute;inset:1px;background:var(--ref-color-white);border-radius:calc(var(--ref-border-radius-sm) - 1px);z-index:-1;pointer-events:none}ap-button button.mermaid ng-content,ap-button button.mermaid ap-symbol,ap-button button.mermaid .loading-bar{position:relative;z-index:1}ap-button button.mermaid:first-line{position:relative;z-index:1}ap-button button.mermaid:hover:after{background:var(--ref-color-mermaid-10)}ap-button button.mermaid:active:not(:disabled):after{background:var(--ref-color-mermaid-20)}@media(hover:hover){ap-button button.mermaid:focus:not(:disabled):not(:active):not(.loading){outline:2px solid var(--ref-color-electric-blue-100);outline-offset:1px}}ap-button button.mermaid:disabled{background:linear-gradient(90deg,var(--ref-color-mermaid-gradient-from40) 0%,var(--ref-color-mermaid-gradient-to40) 100%)}ap-button button.mermaid:disabled:after{background:var(--ref-color-white)}ap-button button.mermaid:disabled ap-symbol{opacity:.4}ap-button button.mermaid:disabled{color:var(--ref-color-grey-20)}ap-button button.mermaid.loading{background:linear-gradient(90deg,var(--ref-color-mermaid-gradient-from40) 0%,var(--ref-color-mermaid-gradient-to40) 100%)}ap-button button.mermaid.loading:after{background:var(--ref-color-white)}ap-button button.mermaid.loading ap-symbol{opacity:.4}ap-button button.mermaid.loading{color:var(--ref-color-grey-40)}ap-button button.mermaid .loading-bar{background:linear-gradient(90deg,var(--ref-color-mermaid-gradient-from) 0%,var(--ref-color-mermaid-gradient-to) 100%);position:absolute;z-index:2}ap-button button.stroked{background:var(--ref-color-white);border-width:1px;border-style:solid}ap-button button.stroked.grey{border-color:var(--ref-color-grey-20);color:var(--ref-color-grey-80)}ap-button button.stroked.grey ap-symbol{color:var(--ref-color-grey-80)}ap-button button.stroked.grey:hover{border-color:var(--ref-color-grey-40)}ap-button button.stroked.grey:active:not(:disabled){border-color:var(--ref-color-grey-60)}ap-button button.stroked.grey:focus:not(:disabled):not(:active){border-color:var(--ref-color-grey-20)}ap-button button.stroked.grey:disabled{border-color:var(--ref-color-grey-20);color:var(--ref-color-grey-20)}ap-button button.stroked.grey:disabled ap-symbol{color:var(--ref-color-grey-20)}ap-button button.stroked.grey.loading{border-color:var(--ref-color-grey-20);color:var(--ref-color-grey-40)}ap-button button.stroked.grey.loading ap-symbol{color:var(--ref-color-grey-40)}ap-button button.stroked.grey .loading-bar{background-color:var(--ref-color-grey-80)}ap-button button.stroked.blue{border-color:var(--ref-color-electric-blue-60);color:var(--ref-color-electric-blue-100)}ap-button button.stroked.blue ap-symbol{color:var(--ref-color-electric-blue-100)}ap-button button.stroked.blue:hover{border-color:var(--ref-color-electric-blue-80)}ap-button button.stroked.blue:active:not(:disabled){border-color:var(--ref-color-electric-blue-100)}ap-button button.stroked.blue:focus:not(:disabled):not(:active){border-color:var(--ref-color-electric-blue-60)}ap-button button.stroked.blue:disabled{border-color:var(--ref-color-electric-blue-20);color:var(--ref-color-electric-blue-20)}ap-button button.stroked.blue:disabled ap-symbol{color:var(--ref-color-electric-blue-20)}ap-button button.stroked.blue.loading{border-color:var(--ref-color-electric-blue-20);color:var(--ref-color-electric-blue-40)}ap-button button.stroked.blue.loading ap-symbol{color:var(--ref-color-electric-blue-40)}ap-button button.stroked.blue .loading-bar{background-color:var(--ref-color-electric-blue-100)}ap-button button.stroked.red{border-color:var(--ref-color-red-60);color:var(--ref-color-red-100)}ap-button button.stroked.red ap-symbol{color:var(--ref-color-red-100)}ap-button button.stroked.red:hover{border-color:var(--ref-color-red-80)}ap-button button.stroked.red:active:not(:disabled){border-color:var(--ref-color-red-100)}ap-button button.stroked.red:focus:not(:disabled):not(:active){border-color:var(--ref-color-red-60)}ap-button button.stroked.red:disabled{border-color:var(--ref-color-red-20);color:var(--ref-color-red-20)}ap-button button.stroked.red:disabled ap-symbol{color:var(--ref-color-red-20)}ap-button button.stroked.red.loading{border-color:var(--ref-color-red-20);color:var(--ref-color-red-40)}ap-button button.stroked.red.loading ap-symbol{color:var(--ref-color-red-40)}ap-button button.stroked.red .loading-bar{background-color:var(--ref-color-red-100)}ap-button button.transparent{background:transparent}ap-button button.ghost{background:transparent}ap-button button.ghost.grey{color:var(--ref-color-grey-80)}ap-button button.ghost.grey ap-symbol{color:var(--ref-color-grey-80)}ap-button button.ghost.grey:hover{background-color:var(--ref-color-grey-05)}ap-button button.ghost.grey:active:not(:disabled){background-color:var(--ref-color-grey-10)}ap-button button.ghost.grey:focus:not(:disabled):not(:active){background-color:var(--ref-color-grey-10)}ap-button button.ghost.grey:disabled{color:var(--ref-color-grey-20)}ap-button button.ghost.grey:disabled ap-symbol{color:var(--ref-color-grey-20)}ap-button button.ghost.grey.loading:not(.locked){color:var(--ref-color-grey-40)}ap-button button.ghost.grey.loading:not(.locked) ap-symbol{color:var(--ref-color-grey-40)}ap-button button.ghost.grey .loading-bar{background-color:var(--ref-color-grey-80)}ap-button button.ghost.blue{color:var(--ref-color-electric-blue-100)}ap-button button.ghost.blue ap-symbol{color:var(--ref-color-electric-blue-100)}ap-button button.ghost.blue:hover{background-color:var(--ref-color-electric-blue-10)}ap-button button.ghost.blue:active:not(:disabled){background-color:var(--ref-color-electric-blue-20)}ap-button button.ghost.blue:focus:not(:disabled):not(:active){background-color:var(--ref-color-electric-blue-20)}ap-button button.ghost.blue:disabled{color:var(--ref-color-electric-blue-20)}ap-button button.ghost.blue:disabled ap-symbol{color:var(--ref-color-electric-blue-20)}ap-button button.ghost.blue.loading:not(.locked){color:var(--ref-color-electric-blue-40)}ap-button button.ghost.blue.loading:not(.locked) ap-symbol{color:var(--ref-color-electric-blue-40)}ap-button button.ghost.blue .loading-bar{background-color:var(--ref-color-electric-blue-100)}ap-button button.ghost.red{color:var(--ref-color-red-100)}ap-button button.ghost.red ap-symbol{color:var(--ref-color-red-100)}ap-button button.ghost.red:hover{background-color:var(--ref-color-red-10)}ap-button button.ghost.red:active:not(:disabled){background-color:var(--ref-color-red-20)}ap-button button.ghost.red:focus:not(:disabled):not(:active){background-color:var(--ref-color-red-20)}ap-button button.ghost.red:disabled{color:var(--ref-color-red-20)}ap-button button.ghost.red:disabled ap-symbol{color:var(--ref-color-red-20)}ap-button button.ghost.red.loading:not(.locked){color:var(--ref-color-red-40)}ap-button button.ghost.red.loading:not(.locked) ap-symbol{color:var(--ref-color-red-40)}ap-button button.ghost.red .loading-bar{background-color:var(--ref-color-red-100)}ap-button button.ghost.green{color:var(--ref-color-green-100)}ap-button button.ghost.green ap-symbol{color:var(--ref-color-green-100)}ap-button button.ghost.green:hover{background-color:var(--ref-color-green-10)}ap-button button.ghost.green:active:not(:disabled){background-color:var(--ref-color-green-20)}ap-button button.ghost.green:focus:not(:disabled):not(:active){background-color:var(--ref-color-green-20)}ap-button button.ghost.green:disabled{color:var(--ref-color-green-20)}ap-button button.ghost.green:disabled ap-symbol{color:var(--ref-color-green-20)}ap-button button.ghost.green.loading:not(.locked){color:var(--ref-color-green-40)}ap-button button.ghost.green.loading:not(.locked) ap-symbol{color:var(--ref-color-green-40)}ap-button button.ghost.green .loading-bar{background-color:var(--ref-color-green-100)}ap-button button.locked{background-color:var(--ref-color-purple-10);color:var(--ref-color-purple-80)}ap-button button.locked ap-symbol{color:var(--ref-color-purple-80)}ap-button button.locked:hover{background-color:var(--ref-color-purple-20);border-color:var(--ref-color-purple-40)}ap-button button.locked:active:not(:disabled){background-color:var(--ref-color-purple-40);border-color:var(--ref-color-purple-60)}ap-button button.locked:focus:not(:disabled):not(:active){background-color:var(--ref-color-purple-20);border-color:var(--ref-color-purple-20)}ap-button button.locked:disabled{color:var(--ref-color-purple-)}ap-button button.locked:disabled ap-symbol{color:var(--ref-color-purple-)}ap-button button.locked.loading:not(.locked){color:var(--ref-color-purple-)}ap-button button.locked.loading:not(.locked) ap-symbol{color:var(--ref-color-purple-)}ap-button button.locked .loading-bar{background-color:var(--ref-color-purple-)}ap-button button.locked{border:1px solid var(--ref-color-purple-20)}ap-button .loading-bar{position:absolute;bottom:0;left:var(--comp-button-padding-vertical);width:var(--loading-bar-width);height:5px;border-radius:8px;animation:slide 1.5s ease-in-out infinite}@keyframes slide{0%{left:calc(var(--loading-bar-width) * -1)}to{left:100%}}ap-button .locked-symbol{position:absolute;top:-6px;right:-6px;border-radius:100%;background:var(--ref-color-white)}ap-button .locked-symbol ap-symbol{color:var(--ref-color-purple-100)}\n"], dependencies: [{ kind: "component", type: SymbolComponent, selector: "ap-symbol", inputs: ["symbolId", "color", "size"], outputs: ["sizeChange"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "directive", type: i2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: ButtonComponent, isStandalone: true, selector: "ap-button", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: false, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, locked: { classPropertyName: "locked", publicName: "locked", isSignal: true, isRequired: false, transformFunction: null }, menuTrigger: { classPropertyName: "menuTrigger", publicName: "menuTrigger", isSignal: true, isRequired: false, transformFunction: null }, symbolPosition: { classPropertyName: "symbolPosition", publicName: "symbolPosition", isSignal: true, isRequired: false, transformFunction: null }, symbolId: { classPropertyName: "symbolId", publicName: "symbolId", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { menuOpened: "menuOpened", menuClosed: "menuClosed", click: "click", focus: "focus", blur: "blur" }, host: { listeners: { "window:keyup.space": "onSpaceKeyUp($event)" }, properties: { "attr.disabled": "loading() || disabled() || null" } }, providers: [{ provide: AP_INTERACTIVE_ELEMENT, useExisting: forwardRef(() => ButtonComponent) }], viewQueries: [{ propertyName: "buttonElement", first: true, predicate: ["button"], descendants: true, isSignal: true }], hostDirectives: [{ directive: i1.BaseButtonDirective }], ngImport: i0, template: "<button\n    #button\n    role=\"button\"\n    [matMenuTriggerFor]=\"menuTrigger()\"\n    [class]=\"buttonClasses()\"\n    [disabled]=\"disabled() && !locked()\"\n    [attr.name]=\"name()\"\n    [attr.data-test]=\"baseButtonDirective.hostDataTest ?? name()\"\n    [attr.id]=\"baseButtonDirective.hostId\"\n    [attr.type]=\"baseButtonDirective.hostType\"\n    [attr.form]=\"form()\"\n    [attr.aria-label]=\"ariaLabel() || null\"\n    [attr.aria-disabled]=\"disabled()?.toString()\"\n    (click)=\"onClickHandle($event)\"\n    (focus)=\"onFocusHandle($event)\"\n    (blur)=\"onBlurHandle($event)\"\n    (menuOpened)=\"menuOpened.emit()\"\n    (menuClosed)=\"menuClosed.emit()\">\n    <ng-content />\n    @if (symbolId()) {\n        <ap-symbol [symbolId]=\"symbolId()\" />\n    } @else {\n        <ng-content select=\"ap-symbol\" />\n    }\n    @if (loading() && !locked()) {\n        <div class=\"loading-bar\"></div>\n    }\n</button>\n@if (locked()) {\n    <div class=\"locked-symbol\">\n        <ap-symbol\n            symbolId=\"feature-lock\"\n            size=\"sm\" />\n    </div>\n}\n", styles: ["ap-button{--loading-bar-width: 50px;display:inline-block;position:relative}ap-button[disabled]{pointer-events:none}ap-button button{border:none;border-radius:var(--comp-button-border-radius);padding:var(--comp-button-padding-horizontal) var(--comp-button-padding-vertical);position:relative;overflow:hidden;display:flex;justify-content:center;align-items:center;gap:var(--comp-split-button-spacing);flex-direction:row;font-size:var(--comp-button-text-size);font-family:var(--comp-button-text-font-family);line-height:var(--comp-button-text-line-height);font-weight:var(--comp-button-text-weight);max-height:var(--comp-button-height);min-height:var(--comp-button-height);white-space:nowrap;text-overflow:ellipsis;width:100%}ap-button button ap-symbol{width:16px;min-width:16px;max-width:16px;height:16px;min-height:16px;max-height:16px}ap-button button.inverse{flex-direction:row-reverse}ap-button button:hover:not(:disabled):not(.loading){cursor:pointer}ap-button button:disabled{pointer-events:none}@media(hover:hover){ap-button button:focus:not(:disabled):not(:active):not(.loading){outline:2px solid var(--ref-color-electric-blue-100);outline-offset:1px}}ap-button button.loading{pointer-events:none}ap-button button.primary{color:var(--ref-color-white)}ap-button button.primary ap-symbol{color:var(--ref-color-white)}ap-button button.primary.orange{background:var(--ref-color-orange-100)}ap-button button.primary.orange:hover{background-color:var(--ref-color-orange-80)}ap-button button.primary.orange:active:not(:disabled){background-color:var(--ref-color-orange-60)}ap-button button.primary.orange:disabled{background-color:var(--ref-color-orange-20)}ap-button button.primary.orange.loading{background-color:var(--ref-color-orange-60)}ap-button button.primary.orange .loading-bar{background-color:var(--ref-color-orange-100)}ap-button button.primary.blue{background:var(--ref-color-electric-blue-100)}ap-button button.primary.blue:hover{background-color:var(--ref-color-electric-blue-80)}ap-button button.primary.blue:active:not(:disabled){background-color:var(--ref-color-electric-blue-60)}ap-button button.primary.blue:disabled{background-color:var(--ref-color-electric-blue-20)}ap-button button.primary.blue.loading{background-color:var(--ref-color-electric-blue-60)}ap-button button.primary.blue .loading-bar{background-color:var(--ref-color-electric-blue-100)}ap-button button.secondary.orange{background:var(--ref-color-orange-10);color:var(--ref-color-orange-100)}ap-button button.secondary.orange ap-symbol{color:var(--ref-color-orange-100)}ap-button button.secondary.orange:hover{background-color:var(--ref-color-orange-20)}ap-button button.secondary.orange:active:not(:disabled){background-color:var(--ref-color-orange-40)}ap-button button.secondary.orange:focus:not(:disabled):not(:active){background-color:var(--ref-color-orange-10)}ap-button button.secondary.orange:disabled{background-color:var(--ref-color-orange-10);color:var(--ref-color-orange-20)}ap-button button.secondary.orange:disabled ap-symbol{color:var(--ref-color-orange-20)}ap-button button.secondary.orange.loading{background-color:var(--ref-color-orange-40)}ap-button button.secondary.orange .loading-bar{background-color:var(--ref-color-orange-100)}ap-button button.secondary.blue{background:var(--ref-color-electric-blue-10);color:var(--ref-color-electric-blue-100)}ap-button button.secondary.blue ap-symbol{color:var(--ref-color-electric-blue-100)}ap-button button.secondary.blue:hover{background-color:var(--ref-color-electric-blue-20)}ap-button button.secondary.blue:active:not(:disabled){background-color:var(--ref-color-electric-blue-40)}ap-button button.secondary.blue:focus:not(:disabled):not(:active){background-color:var(--ref-color-electric-blue-10)}ap-button button.secondary.blue:disabled{background-color:var(--ref-color-electric-blue-10);color:var(--ref-color-electric-blue-20)}ap-button button.secondary.blue:disabled ap-symbol{color:var(--ref-color-electric-blue-20)}ap-button button.secondary.blue.loading{background-color:var(--ref-color-electric-blue-40)}ap-button button.secondary.blue .loading-bar{background-color:var(--ref-color-electric-blue-100)}ap-button button.mermaid{background:linear-gradient(90deg,#578fff,#df52ff);color:var(--ref-color-grey-100);border:none;border-radius:var(--ref-border-radius-sm);position:relative;z-index:1}ap-button button.mermaid:after{content:\"\";position:absolute;inset:1px;background:var(--ref-color-white);border-radius:calc(var(--ref-border-radius-sm) - 1px);z-index:-1;pointer-events:none}ap-button button.mermaid ng-content,ap-button button.mermaid ap-symbol,ap-button button.mermaid .loading-bar{position:relative;z-index:1}ap-button button.mermaid:first-line{position:relative;z-index:1}ap-button button.mermaid:hover:after{background:var(--ref-color-mermaid-10)}ap-button button.mermaid:active:not(:disabled):after{background:var(--ref-color-mermaid-20)}@media(hover:hover){ap-button button.mermaid:focus:not(:disabled):not(:active):not(.loading){outline:2px solid var(--ref-color-electric-blue-100);outline-offset:1px}}ap-button button.mermaid:disabled{background:linear-gradient(90deg,var(--ref-color-mermaid-gradient-from40) 0%,var(--ref-color-mermaid-gradient-to40) 100%)}ap-button button.mermaid:disabled:after{background:var(--ref-color-white)}ap-button button.mermaid:disabled ap-symbol{opacity:.4}ap-button button.mermaid:disabled{color:var(--ref-color-grey-20)}ap-button button.mermaid.loading{background:linear-gradient(90deg,var(--ref-color-mermaid-gradient-from40) 0%,var(--ref-color-mermaid-gradient-to40) 100%)}ap-button button.mermaid.loading:after{background:var(--ref-color-white)}ap-button button.mermaid.loading ap-symbol{opacity:.4}ap-button button.mermaid.loading{color:var(--ref-color-grey-40)}ap-button button.mermaid .loading-bar{background:linear-gradient(90deg,var(--ref-color-mermaid-gradient-from) 0%,var(--ref-color-mermaid-gradient-to) 100%);position:absolute;z-index:2}ap-button button.stroked{background:var(--ref-color-white);border-width:1px;border-style:solid}ap-button button.stroked.grey{border-color:var(--ref-color-grey-20);color:var(--ref-color-grey-80)}ap-button button.stroked.grey ap-symbol{color:var(--ref-color-grey-80)}ap-button button.stroked.grey:hover{border-color:var(--ref-color-grey-40)}ap-button button.stroked.grey:active:not(:disabled){border-color:var(--ref-color-grey-60)}ap-button button.stroked.grey:focus:not(:disabled):not(:active){border-color:var(--ref-color-grey-20)}ap-button button.stroked.grey:disabled{border-color:var(--ref-color-grey-20);color:var(--ref-color-grey-20)}ap-button button.stroked.grey:disabled ap-symbol{color:var(--ref-color-grey-20)}ap-button button.stroked.grey.loading{border-color:var(--ref-color-grey-20);color:var(--ref-color-grey-40)}ap-button button.stroked.grey.loading ap-symbol{color:var(--ref-color-grey-40)}ap-button button.stroked.grey .loading-bar{background-color:var(--ref-color-grey-80)}ap-button button.stroked.blue{border-color:var(--ref-color-electric-blue-60);color:var(--ref-color-electric-blue-100)}ap-button button.stroked.blue ap-symbol{color:var(--ref-color-electric-blue-100)}ap-button button.stroked.blue:hover{border-color:var(--ref-color-electric-blue-80)}ap-button button.stroked.blue:active:not(:disabled){border-color:var(--ref-color-electric-blue-100)}ap-button button.stroked.blue:focus:not(:disabled):not(:active){border-color:var(--ref-color-electric-blue-60)}ap-button button.stroked.blue:disabled{border-color:var(--ref-color-electric-blue-20);color:var(--ref-color-electric-blue-20)}ap-button button.stroked.blue:disabled ap-symbol{color:var(--ref-color-electric-blue-20)}ap-button button.stroked.blue.loading{border-color:var(--ref-color-electric-blue-20);color:var(--ref-color-electric-blue-40)}ap-button button.stroked.blue.loading ap-symbol{color:var(--ref-color-electric-blue-40)}ap-button button.stroked.blue .loading-bar{background-color:var(--ref-color-electric-blue-100)}ap-button button.stroked.red{border-color:var(--ref-color-red-60);color:var(--ref-color-red-100)}ap-button button.stroked.red ap-symbol{color:var(--ref-color-red-100)}ap-button button.stroked.red:hover{border-color:var(--ref-color-red-80)}ap-button button.stroked.red:active:not(:disabled){border-color:var(--ref-color-red-100)}ap-button button.stroked.red:focus:not(:disabled):not(:active){border-color:var(--ref-color-red-60)}ap-button button.stroked.red:disabled{border-color:var(--ref-color-red-20);color:var(--ref-color-red-20)}ap-button button.stroked.red:disabled ap-symbol{color:var(--ref-color-red-20)}ap-button button.stroked.red.loading{border-color:var(--ref-color-red-20);color:var(--ref-color-red-40)}ap-button button.stroked.red.loading ap-symbol{color:var(--ref-color-red-40)}ap-button button.stroked.red .loading-bar{background-color:var(--ref-color-red-100)}ap-button button.transparent{background:transparent}ap-button button.ghost{background:transparent}ap-button button.ghost.grey{color:var(--ref-color-grey-80)}ap-button button.ghost.grey ap-symbol{color:var(--ref-color-grey-80)}ap-button button.ghost.grey:hover{background-color:var(--ref-color-grey-05)}ap-button button.ghost.grey:active:not(:disabled){background-color:var(--ref-color-grey-10)}ap-button button.ghost.grey:focus:not(:disabled):not(:active){background-color:var(--ref-color-grey-10)}ap-button button.ghost.grey:disabled{color:var(--ref-color-grey-20)}ap-button button.ghost.grey:disabled ap-symbol{color:var(--ref-color-grey-20)}ap-button button.ghost.grey.loading:not(.locked){color:var(--ref-color-grey-40)}ap-button button.ghost.grey.loading:not(.locked) ap-symbol{color:var(--ref-color-grey-40)}ap-button button.ghost.grey .loading-bar{background-color:var(--ref-color-grey-80)}ap-button button.ghost.blue{color:var(--ref-color-electric-blue-100)}ap-button button.ghost.blue ap-symbol{color:var(--ref-color-electric-blue-100)}ap-button button.ghost.blue:hover{background-color:var(--ref-color-electric-blue-10)}ap-button button.ghost.blue:active:not(:disabled){background-color:var(--ref-color-electric-blue-20)}ap-button button.ghost.blue:focus:not(:disabled):not(:active){background-color:var(--ref-color-electric-blue-20)}ap-button button.ghost.blue:disabled{color:var(--ref-color-electric-blue-20)}ap-button button.ghost.blue:disabled ap-symbol{color:var(--ref-color-electric-blue-20)}ap-button button.ghost.blue.loading:not(.locked){color:var(--ref-color-electric-blue-40)}ap-button button.ghost.blue.loading:not(.locked) ap-symbol{color:var(--ref-color-electric-blue-40)}ap-button button.ghost.blue .loading-bar{background-color:var(--ref-color-electric-blue-100)}ap-button button.ghost.red{color:var(--ref-color-red-100)}ap-button button.ghost.red ap-symbol{color:var(--ref-color-red-100)}ap-button button.ghost.red:hover{background-color:var(--ref-color-red-10)}ap-button button.ghost.red:active:not(:disabled){background-color:var(--ref-color-red-20)}ap-button button.ghost.red:focus:not(:disabled):not(:active){background-color:var(--ref-color-red-20)}ap-button button.ghost.red:disabled{color:var(--ref-color-red-20)}ap-button button.ghost.red:disabled ap-symbol{color:var(--ref-color-red-20)}ap-button button.ghost.red.loading:not(.locked){color:var(--ref-color-red-40)}ap-button button.ghost.red.loading:not(.locked) ap-symbol{color:var(--ref-color-red-40)}ap-button button.ghost.red .loading-bar{background-color:var(--ref-color-red-100)}ap-button button.ghost.green{color:var(--ref-color-green-100)}ap-button button.ghost.green ap-symbol{color:var(--ref-color-green-100)}ap-button button.ghost.green:hover{background-color:var(--ref-color-green-10)}ap-button button.ghost.green:active:not(:disabled){background-color:var(--ref-color-green-20)}ap-button button.ghost.green:focus:not(:disabled):not(:active){background-color:var(--ref-color-green-20)}ap-button button.ghost.green:disabled{color:var(--ref-color-green-20)}ap-button button.ghost.green:disabled ap-symbol{color:var(--ref-color-green-20)}ap-button button.ghost.green.loading:not(.locked){color:var(--ref-color-green-40)}ap-button button.ghost.green.loading:not(.locked) ap-symbol{color:var(--ref-color-green-40)}ap-button button.ghost.green .loading-bar{background-color:var(--ref-color-green-100)}ap-button button.locked{background-color:var(--ref-color-purple-10);color:var(--ref-color-purple-80)}ap-button button.locked ap-symbol{color:var(--ref-color-purple-80)}ap-button button.locked:hover{background-color:var(--ref-color-purple-20);border-color:var(--ref-color-purple-40)}ap-button button.locked:active:not(:disabled){background-color:var(--ref-color-purple-40);border-color:var(--ref-color-purple-60)}ap-button button.locked:focus:not(:disabled):not(:active){background-color:var(--ref-color-purple-20);border-color:var(--ref-color-purple-20)}ap-button button.locked:disabled{color:var(--ref-color-purple-)}ap-button button.locked:disabled ap-symbol{color:var(--ref-color-purple-)}ap-button button.locked.loading:not(.locked){color:var(--ref-color-purple-)}ap-button button.locked.loading:not(.locked) ap-symbol{color:var(--ref-color-purple-)}ap-button button.locked .loading-bar{background-color:var(--ref-color-purple-)}ap-button button.locked{border:1px solid var(--ref-color-purple-20)}ap-button .loading-bar{position:absolute;bottom:0;left:var(--comp-button-padding-vertical);width:var(--loading-bar-width);height:5px;border-radius:8px;animation:slide 1.5s ease-in-out infinite}@keyframes slide{0%{left:calc(var(--loading-bar-width) * -1)}to{left:100%}}ap-button .locked-symbol{position:absolute;top:-6px;right:-6px;border-radius:100%;background:var(--ref-color-white)}ap-button .locked-symbol ap-symbol{color:var(--ref-color-purple-100)}\n"], dependencies: [{ kind: "component", type: SymbolComponent, selector: "ap-symbol", inputs: ["symbolId", "color", "size"], outputs: ["sizeChange"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "directive", type: i2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: ButtonComponent, decorators: [{
             type: Component,
-            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'ap-button', imports: [SymbolComponent, MatMenuModule], encapsulation: ViewEncapsulation.None, hostDirectives: [BaseButtonDirective], host: {
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'ap-button', imports: [SymbolComponent, MatMenuModule], encapsulation: ViewEncapsulation.None, hostDirectives: [BaseButtonDirective], providers: [{ provide: AP_INTERACTIVE_ELEMENT, useExisting: forwardRef(() => ButtonComponent) }], host: {
                         '[attr.disabled]': 'loading() || disabled() || null',
                     }, template: "<button\n    #button\n    role=\"button\"\n    [matMenuTriggerFor]=\"menuTrigger()\"\n    [class]=\"buttonClasses()\"\n    [disabled]=\"disabled() && !locked()\"\n    [attr.name]=\"name()\"\n    [attr.data-test]=\"baseButtonDirective.hostDataTest ?? name()\"\n    [attr.id]=\"baseButtonDirective.hostId\"\n    [attr.type]=\"baseButtonDirective.hostType\"\n    [attr.form]=\"form()\"\n    [attr.aria-label]=\"ariaLabel() || null\"\n    [attr.aria-disabled]=\"disabled()?.toString()\"\n    (click)=\"onClickHandle($event)\"\n    (focus)=\"onFocusHandle($event)\"\n    (blur)=\"onBlurHandle($event)\"\n    (menuOpened)=\"menuOpened.emit()\"\n    (menuClosed)=\"menuClosed.emit()\">\n    <ng-content />\n    @if (symbolId()) {\n        <ap-symbol [symbolId]=\"symbolId()\" />\n    } @else {\n        <ng-content select=\"ap-symbol\" />\n    }\n    @if (loading() && !locked()) {\n        <div class=\"loading-bar\"></div>\n    }\n</button>\n@if (locked()) {\n    <div class=\"locked-symbol\">\n        <ap-symbol\n            symbolId=\"feature-lock\"\n            size=\"sm\" />\n    </div>\n}\n", styles: ["ap-button{--loading-bar-width: 50px;display:inline-block;position:relative}ap-button[disabled]{pointer-events:none}ap-button button{border:none;border-radius:var(--comp-button-border-radius);padding:var(--comp-button-padding-horizontal) var(--comp-button-padding-vertical);position:relative;overflow:hidden;display:flex;justify-content:center;align-items:center;gap:var(--comp-split-button-spacing);flex-direction:row;font-size:var(--comp-button-text-size);font-family:var(--comp-button-text-font-family);line-height:var(--comp-button-text-line-height);font-weight:var(--comp-button-text-weight);max-height:var(--comp-button-height);min-height:var(--comp-button-height);white-space:nowrap;text-overflow:ellipsis;width:100%}ap-button button ap-symbol{width:16px;min-width:16px;max-width:16px;height:16px;min-height:16px;max-height:16px}ap-button button.inverse{flex-direction:row-reverse}ap-button button:hover:not(:disabled):not(.loading){cursor:pointer}ap-button button:disabled{pointer-events:none}@media(hover:hover){ap-button button:focus:not(:disabled):not(:active):not(.loading){outline:2px solid var(--ref-color-electric-blue-100);outline-offset:1px}}ap-button button.loading{pointer-events:none}ap-button button.primary{color:var(--ref-color-white)}ap-button button.primary ap-symbol{color:var(--ref-color-white)}ap-button button.primary.orange{background:var(--ref-color-orange-100)}ap-button button.primary.orange:hover{background-color:var(--ref-color-orange-80)}ap-button button.primary.orange:active:not(:disabled){background-color:var(--ref-color-orange-60)}ap-button button.primary.orange:disabled{background-color:var(--ref-color-orange-20)}ap-button button.primary.orange.loading{background-color:var(--ref-color-orange-60)}ap-button button.primary.orange .loading-bar{background-color:var(--ref-color-orange-100)}ap-button button.primary.blue{background:var(--ref-color-electric-blue-100)}ap-button button.primary.blue:hover{background-color:var(--ref-color-electric-blue-80)}ap-button button.primary.blue:active:not(:disabled){background-color:var(--ref-color-electric-blue-60)}ap-button button.primary.blue:disabled{background-color:var(--ref-color-electric-blue-20)}ap-button button.primary.blue.loading{background-color:var(--ref-color-electric-blue-60)}ap-button button.primary.blue .loading-bar{background-color:var(--ref-color-electric-blue-100)}ap-button button.secondary.orange{background:var(--ref-color-orange-10);color:var(--ref-color-orange-100)}ap-button button.secondary.orange ap-symbol{color:var(--ref-color-orange-100)}ap-button button.secondary.orange:hover{background-color:var(--ref-color-orange-20)}ap-button button.secondary.orange:active:not(:disabled){background-color:var(--ref-color-orange-40)}ap-button button.secondary.orange:focus:not(:disabled):not(:active){background-color:var(--ref-color-orange-10)}ap-button button.secondary.orange:disabled{background-color:var(--ref-color-orange-10);color:var(--ref-color-orange-20)}ap-button button.secondary.orange:disabled ap-symbol{color:var(--ref-color-orange-20)}ap-button button.secondary.orange.loading{background-color:var(--ref-color-orange-40)}ap-button button.secondary.orange .loading-bar{background-color:var(--ref-color-orange-100)}ap-button button.secondary.blue{background:var(--ref-color-electric-blue-10);color:var(--ref-color-electric-blue-100)}ap-button button.secondary.blue ap-symbol{color:var(--ref-color-electric-blue-100)}ap-button button.secondary.blue:hover{background-color:var(--ref-color-electric-blue-20)}ap-button button.secondary.blue:active:not(:disabled){background-color:var(--ref-color-electric-blue-40)}ap-button button.secondary.blue:focus:not(:disabled):not(:active){background-color:var(--ref-color-electric-blue-10)}ap-button button.secondary.blue:disabled{background-color:var(--ref-color-electric-blue-10);color:var(--ref-color-electric-blue-20)}ap-button button.secondary.blue:disabled ap-symbol{color:var(--ref-color-electric-blue-20)}ap-button button.secondary.blue.loading{background-color:var(--ref-color-electric-blue-40)}ap-button button.secondary.blue .loading-bar{background-color:var(--ref-color-electric-blue-100)}ap-button button.mermaid{background:linear-gradient(90deg,#578fff,#df52ff);color:var(--ref-color-grey-100);border:none;border-radius:var(--ref-border-radius-sm);position:relative;z-index:1}ap-button button.mermaid:after{content:\"\";position:absolute;inset:1px;background:var(--ref-color-white);border-radius:calc(var(--ref-border-radius-sm) - 1px);z-index:-1;pointer-events:none}ap-button button.mermaid ng-content,ap-button button.mermaid ap-symbol,ap-button button.mermaid .loading-bar{position:relative;z-index:1}ap-button button.mermaid:first-line{position:relative;z-index:1}ap-button button.mermaid:hover:after{background:var(--ref-color-mermaid-10)}ap-button button.mermaid:active:not(:disabled):after{background:var(--ref-color-mermaid-20)}@media(hover:hover){ap-button button.mermaid:focus:not(:disabled):not(:active):not(.loading){outline:2px solid var(--ref-color-electric-blue-100);outline-offset:1px}}ap-button button.mermaid:disabled{background:linear-gradient(90deg,var(--ref-color-mermaid-gradient-from40) 0%,var(--ref-color-mermaid-gradient-to40) 100%)}ap-button button.mermaid:disabled:after{background:var(--ref-color-white)}ap-button button.mermaid:disabled ap-symbol{opacity:.4}ap-button button.mermaid:disabled{color:var(--ref-color-grey-20)}ap-button button.mermaid.loading{background:linear-gradient(90deg,var(--ref-color-mermaid-gradient-from40) 0%,var(--ref-color-mermaid-gradient-to40) 100%)}ap-button button.mermaid.loading:after{background:var(--ref-color-white)}ap-button button.mermaid.loading ap-symbol{opacity:.4}ap-button button.mermaid.loading{color:var(--ref-color-grey-40)}ap-button button.mermaid .loading-bar{background:linear-gradient(90deg,var(--ref-color-mermaid-gradient-from) 0%,var(--ref-color-mermaid-gradient-to) 100%);position:absolute;z-index:2}ap-button button.stroked{background:var(--ref-color-white);border-width:1px;border-style:solid}ap-button button.stroked.grey{border-color:var(--ref-color-grey-20);color:var(--ref-color-grey-80)}ap-button button.stroked.grey ap-symbol{color:var(--ref-color-grey-80)}ap-button button.stroked.grey:hover{border-color:var(--ref-color-grey-40)}ap-button button.stroked.grey:active:not(:disabled){border-color:var(--ref-color-grey-60)}ap-button button.stroked.grey:focus:not(:disabled):not(:active){border-color:var(--ref-color-grey-20)}ap-button button.stroked.grey:disabled{border-color:var(--ref-color-grey-20);color:var(--ref-color-grey-20)}ap-button button.stroked.grey:disabled ap-symbol{color:var(--ref-color-grey-20)}ap-button button.stroked.grey.loading{border-color:var(--ref-color-grey-20);color:var(--ref-color-grey-40)}ap-button button.stroked.grey.loading ap-symbol{color:var(--ref-color-grey-40)}ap-button button.stroked.grey .loading-bar{background-color:var(--ref-color-grey-80)}ap-button button.stroked.blue{border-color:var(--ref-color-electric-blue-60);color:var(--ref-color-electric-blue-100)}ap-button button.stroked.blue ap-symbol{color:var(--ref-color-electric-blue-100)}ap-button button.stroked.blue:hover{border-color:var(--ref-color-electric-blue-80)}ap-button button.stroked.blue:active:not(:disabled){border-color:var(--ref-color-electric-blue-100)}ap-button button.stroked.blue:focus:not(:disabled):not(:active){border-color:var(--ref-color-electric-blue-60)}ap-button button.stroked.blue:disabled{border-color:var(--ref-color-electric-blue-20);color:var(--ref-color-electric-blue-20)}ap-button button.stroked.blue:disabled ap-symbol{color:var(--ref-color-electric-blue-20)}ap-button button.stroked.blue.loading{border-color:var(--ref-color-electric-blue-20);color:var(--ref-color-electric-blue-40)}ap-button button.stroked.blue.loading ap-symbol{color:var(--ref-color-electric-blue-40)}ap-button button.stroked.blue .loading-bar{background-color:var(--ref-color-electric-blue-100)}ap-button button.stroked.red{border-color:var(--ref-color-red-60);color:var(--ref-color-red-100)}ap-button button.stroked.red ap-symbol{color:var(--ref-color-red-100)}ap-button button.stroked.red:hover{border-color:var(--ref-color-red-80)}ap-button button.stroked.red:active:not(:disabled){border-color:var(--ref-color-red-100)}ap-button button.stroked.red:focus:not(:disabled):not(:active){border-color:var(--ref-color-red-60)}ap-button button.stroked.red:disabled{border-color:var(--ref-color-red-20);color:var(--ref-color-red-20)}ap-button button.stroked.red:disabled ap-symbol{color:var(--ref-color-red-20)}ap-button button.stroked.red.loading{border-color:var(--ref-color-red-20);color:var(--ref-color-red-40)}ap-button button.stroked.red.loading ap-symbol{color:var(--ref-color-red-40)}ap-button button.stroked.red .loading-bar{background-color:var(--ref-color-red-100)}ap-button button.transparent{background:transparent}ap-button button.ghost{background:transparent}ap-button button.ghost.grey{color:var(--ref-color-grey-80)}ap-button button.ghost.grey ap-symbol{color:var(--ref-color-grey-80)}ap-button button.ghost.grey:hover{background-color:var(--ref-color-grey-05)}ap-button button.ghost.grey:active:not(:disabled){background-color:var(--ref-color-grey-10)}ap-button button.ghost.grey:focus:not(:disabled):not(:active){background-color:var(--ref-color-grey-10)}ap-button button.ghost.grey:disabled{color:var(--ref-color-grey-20)}ap-button button.ghost.grey:disabled ap-symbol{color:var(--ref-color-grey-20)}ap-button button.ghost.grey.loading:not(.locked){color:var(--ref-color-grey-40)}ap-button button.ghost.grey.loading:not(.locked) ap-symbol{color:var(--ref-color-grey-40)}ap-button button.ghost.grey .loading-bar{background-color:var(--ref-color-grey-80)}ap-button button.ghost.blue{color:var(--ref-color-electric-blue-100)}ap-button button.ghost.blue ap-symbol{color:var(--ref-color-electric-blue-100)}ap-button button.ghost.blue:hover{background-color:var(--ref-color-electric-blue-10)}ap-button button.ghost.blue:active:not(:disabled){background-color:var(--ref-color-electric-blue-20)}ap-button button.ghost.blue:focus:not(:disabled):not(:active){background-color:var(--ref-color-electric-blue-20)}ap-button button.ghost.blue:disabled{color:var(--ref-color-electric-blue-20)}ap-button button.ghost.blue:disabled ap-symbol{color:var(--ref-color-electric-blue-20)}ap-button button.ghost.blue.loading:not(.locked){color:var(--ref-color-electric-blue-40)}ap-button button.ghost.blue.loading:not(.locked) ap-symbol{color:var(--ref-color-electric-blue-40)}ap-button button.ghost.blue .loading-bar{background-color:var(--ref-color-electric-blue-100)}ap-button button.ghost.red{color:var(--ref-color-red-100)}ap-button button.ghost.red ap-symbol{color:var(--ref-color-red-100)}ap-button button.ghost.red:hover{background-color:var(--ref-color-red-10)}ap-button button.ghost.red:active:not(:disabled){background-color:var(--ref-color-red-20)}ap-button button.ghost.red:focus:not(:disabled):not(:active){background-color:var(--ref-color-red-20)}ap-button button.ghost.red:disabled{color:var(--ref-color-red-20)}ap-button button.ghost.red:disabled ap-symbol{color:var(--ref-color-red-20)}ap-button button.ghost.red.loading:not(.locked){color:var(--ref-color-red-40)}ap-button button.ghost.red.loading:not(.locked) ap-symbol{color:var(--ref-color-red-40)}ap-button button.ghost.red .loading-bar{background-color:var(--ref-color-red-100)}ap-button button.ghost.green{color:var(--ref-color-green-100)}ap-button button.ghost.green ap-symbol{color:var(--ref-color-green-100)}ap-button button.ghost.green:hover{background-color:var(--ref-color-green-10)}ap-button button.ghost.green:active:not(:disabled){background-color:var(--ref-color-green-20)}ap-button button.ghost.green:focus:not(:disabled):not(:active){background-color:var(--ref-color-green-20)}ap-button button.ghost.green:disabled{color:var(--ref-color-green-20)}ap-button button.ghost.green:disabled ap-symbol{color:var(--ref-color-green-20)}ap-button button.ghost.green.loading:not(.locked){color:var(--ref-color-green-40)}ap-button button.ghost.green.loading:not(.locked) ap-symbol{color:var(--ref-color-green-40)}ap-button button.ghost.green .loading-bar{background-color:var(--ref-color-green-100)}ap-button button.locked{background-color:var(--ref-color-purple-10);color:var(--ref-color-purple-80)}ap-button button.locked ap-symbol{color:var(--ref-color-purple-80)}ap-button button.locked:hover{background-color:var(--ref-color-purple-20);border-color:var(--ref-color-purple-40)}ap-button button.locked:active:not(:disabled){background-color:var(--ref-color-purple-40);border-color:var(--ref-color-purple-60)}ap-button button.locked:focus:not(:disabled):not(:active){background-color:var(--ref-color-purple-20);border-color:var(--ref-color-purple-20)}ap-button button.locked:disabled{color:var(--ref-color-purple-)}ap-button button.locked:disabled ap-symbol{color:var(--ref-color-purple-)}ap-button button.locked.loading:not(.locked){color:var(--ref-color-purple-)}ap-button button.locked.loading:not(.locked) ap-symbol{color:var(--ref-color-purple-)}ap-button button.locked .loading-bar{background-color:var(--ref-color-purple-)}ap-button button.locked{border:1px solid var(--ref-color-purple-20)}ap-button .loading-bar{position:absolute;bottom:0;left:var(--comp-button-padding-vertical);width:var(--loading-bar-width);height:5px;border-radius:8px;animation:slide 1.5s ease-in-out infinite}@keyframes slide{0%{left:calc(var(--loading-bar-width) * -1)}to{left:100%}}ap-button .locked-symbol{position:absolute;top:-6px;right:-6px;border-radius:100%;background:var(--ref-color-white)}ap-button .locked-symbol ap-symbol{color:var(--ref-color-purple-100)}\n"] }]
         }], ctorParameters: () => [], propDecorators: { buttonElement: [{ type: i0.ViewChild, args: ['button', { isSignal: true }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], form: [{ type: i0.Input, args: [{ isSignal: true, alias: "form", required: false }] }], config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], locked: [{ type: i0.Input, args: [{ isSignal: true, alias: "locked", required: false }] }], menuTrigger: [{ type: i0.Input, args: [{ isSignal: true, alias: "menuTrigger", required: false }] }], symbolPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "symbolPosition", required: false }] }], symbolId: [{ type: i0.Input, args: [{ isSignal: true, alias: "symbolId", required: false }] }], menuOpened: [{ type: i0.Output, args: ["menuOpened"] }], menuClosed: [{ type: i0.Output, args: ["menuClosed"] }], click: [{ type: i0.Output, args: ["click"] }], focus: [{ type: i0.Output, args: ["focus"] }], blur: [{ type: i0.Output, args: ["blur"] }], onSpaceKeyUp: [{

package/fesm2022/agorapulse-ui-components-button.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"agorapulse-ui-components-button.mjs","sources":["../../../libs/ui-components/button/src/button.component.ts","../../../libs/ui-components/button/src/button.component.html","../../../libs/ui-components/button/src/agorapulse-ui-components-button.ts"],"sourcesContent":["import { BaseButtonDirective } from '@agorapulse/ui-components/directives';\nimport { UI_COMPONENTS_SYMBOLS } from '@agorapulse/ui-components/providers';\nimport { agorapulseSymbol, SymbolComponent, SymbolRegistry } from '@agorapulse/ui-symbol';\nimport {\n    booleanAttribute,\n    ChangeDetectionStrategy,\n    Component,\n    computed,\n    ElementRef,\n    HostListener,\n    inject,\n    input,\n    output,\n    viewChild,\n    ViewEncapsulation,\n} from '@angular/core';\nimport { MatMenuModule, MatMenuPanel } from '@angular/material/menu';\n\nexport type ButtonConfig =\n    | { style: 'primary'; color: 'orange' | 'blue' }\n    | { style: 'secondary'; color: 'orange' | 'blue' }\n    | { style: 'stroked'; color: 'grey' | 'blue' | 'red' }\n    | { style: 'stroked-transparent'; color: 'grey' | 'blue' | 'red' }\n    | { style: 'ghost'; color: 'grey' | 'blue' | 'red' | 'green' }\n    | { style: 'mermaid'; color?: never };\n\nexport const defaultButtonConfig: ButtonConfig = {\n    style: 'primary',\n    color: 'orange',\n};\n\n@Component({\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    selector: 'ap-button',\n    styleUrls: ['./button.component.scss'],\n    imports: [SymbolComponent, MatMenuModule],\n    templateUrl: './button.component.html',\n    encapsulation: ViewEncapsulation.None,\n    hostDirectives: [BaseButtonDirective],\n    host: {\n        '[attr.disabled]': 'loading() || disabled() || null',\n    },\n})\nexport class ButtonComponent {\n    readonly baseButtonDirective: BaseButtonDirective = inject(BaseButtonDirective, { self: true });\n\n    buttonElement = viewChild.required<ElementRef<HTMLButtonElement>>('button');\n\n    ariaLabel = input<string>();\n    disabled = input(false, { transform: booleanAttribute });\n    name = input<string>();\n    form = input<string>();\n    config = input(defaultButtonConfig, { transform: (value?: ButtonConfig) => value ?? defaultButtonConfig });\n    loading = input(false, { transform: booleanAttribute });\n    locked = input(false, { transform: booleanAttribute });\n    menuTrigger = input<MatMenuPanel | null>(null);\n    symbolPosition = input<'left' | 'right'>('right');\n    symbolId = input<agorapulseSymbol>();\n\n    menuOpened = output<void>();\n    menuClosed = output<void>();\n    // eslint-disable-next-line @angular-eslint/no-output-native\n    click = output<MouseEvent>();\n    // eslint-disable-next-line @angular-eslint/no-output-native\n    focus = output<FocusEvent>();\n    // eslint-disable-next-line @angular-eslint/no-output-native\n    blur = output<FocusEvent>();\n\n    buttonClasses = computed(() => {\n        const cfg = this.config();\n        const isLocked = this.locked();\n\n        return {\n            inverse: this.symbolPosition() === 'left',\n            ...(isLocked\n                ? { locked: true }\n                : {\n                      // Style\n                      [cfg.style]: true,\n                      transparent: cfg.style === 'stroked-transparent',\n                      stroked: cfg.style === 'stroked' || cfg.style === 'stroked-transparent',\n                      // Color\n                      ...(cfg.color ? { [cfg.color]: true } : {}),\n                      // Loading state\n                      loading: this.loading(),\n                  }),\n        };\n    });\n\n    focused: boolean = false;\n\n    private readonly symbolRegistry = inject(SymbolRegistry);\n\n    constructor() {\n        this.symbolRegistry.withSymbols(...(inject(UI_COMPONENTS_SYMBOLS, { optional: true })?.flat() ?? []));\n    }\n\n    onClickHandle($event: MouseEvent): void {\n        if (this.disabled() || this.loading()) {\n            return;\n        }\n        $event.stopImmediatePropagation();\n        this.click.emit($event);\n        this.buttonElement().nativeElement.blur();\n        this.blur.emit($event);\n    }\n\n    onBlurHandle($event: FocusEvent): void {\n        this.focused = false;\n        this.blur.emit($event);\n    }\n\n    onFocusHandle($event: FocusEvent): void {\n        this.focused = true;\n        this.focus.emit($event);\n    }\n\n    @HostListener('window:keyup.space', ['$event'])\n    onSpaceKeyUp(event: Event) {\n        if (this.focused && !this.disabled() && !this.loading()) {\n            event.preventDefault();\n            this.buttonElement().nativeElement.click();\n        }\n    }\n}\n","<button\n    #button\n    role=\"button\"\n    [matMenuTriggerFor]=\"menuTrigger()\"\n    [class]=\"buttonClasses()\"\n    [disabled]=\"disabled() && !locked()\"\n    [attr.name]=\"name()\"\n    [attr.data-test]=\"baseButtonDirective.hostDataTest ?? name()\"\n    [attr.id]=\"baseButtonDirective.hostId\"\n    [attr.type]=\"baseButtonDirective.hostType\"\n    [attr.form]=\"form()\"\n    [attr.aria-label]=\"ariaLabel() || null\"\n    [attr.aria-disabled]=\"disabled()?.toString()\"\n    (click)=\"onClickHandle($event)\"\n    (focus)=\"onFocusHandle($event)\"\n    (blur)=\"onBlurHandle($event)\"\n    (menuOpened)=\"menuOpened.emit()\"\n    (menuClosed)=\"menuClosed.emit()\">\n    <ng-content />\n    @if (symbolId()) {\n        <ap-symbol [symbolId]=\"symbolId()\" />\n    } @else {\n        <ng-content select=\"ap-symbol\" />\n    }\n    @if (loading() && !locked()) {\n        <div class=\"loading-bar\"></div>\n    }\n</button>\n@if (locked()) {\n    <div class=\"locked-symbol\">\n        <ap-symbol\n            symbolId=\"feature-lock\"\n            size=\"sm\" />\n    </div>\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"agorapulse-ui-components-button.mjs","sources":["../../../libs/ui-components/button/src/button.component.ts","../../../libs/ui-components/button/src/button.component.html","../../../libs/ui-components/button/src/agorapulse-ui-components-button.ts"],"sourcesContent":["import { AP_INTERACTIVE_ELEMENT, ApInteractiveElement, BaseButtonDirective } from '@agorapulse/ui-components/directives';\nimport { UI_COMPONENTS_SYMBOLS } from '@agorapulse/ui-components/providers';\nimport { agorapulseSymbol, SymbolComponent, SymbolRegistry } from '@agorapulse/ui-symbol';\nimport {\n    booleanAttribute,\n    ChangeDetectionStrategy,\n    Component,\n    computed,\n    ElementRef,\n    forwardRef,\n    HostListener,\n    inject,\n    input,\n    output,\n    viewChild,\n    ViewEncapsulation,\n} from '@angular/core';\nimport { MatMenuModule, MatMenuPanel } from '@angular/material/menu';\n\nexport type ButtonConfig =\n    | { style: 'primary'; color: 'orange' | 'blue' }\n    | { style: 'secondary'; color: 'orange' | 'blue' }\n    | { style: 'stroked'; color: 'grey' | 'blue' | 'red' }\n    | { style: 'stroked-transparent'; color: 'grey' | 'blue' | 'red' }\n    | { style: 'ghost'; color: 'grey' | 'blue' | 'red' | 'green' }\n    | { style: 'mermaid'; color?: never };\n\nexport const defaultButtonConfig: ButtonConfig = {\n    style: 'primary',\n    color: 'orange',\n};\n\n@Component({\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    selector: 'ap-button',\n    styleUrls: ['./button.component.scss'],\n    imports: [SymbolComponent, MatMenuModule],\n    templateUrl: './button.component.html',\n    encapsulation: ViewEncapsulation.None,\n    hostDirectives: [BaseButtonDirective],\n    providers: [{ provide: AP_INTERACTIVE_ELEMENT, useExisting: forwardRef(() => ButtonComponent) }],\n    host: {\n        '[attr.disabled]': 'loading() || disabled() || null',\n    },\n})\nexport class ButtonComponent implements ApInteractiveElement {\n    readonly baseButtonDirective: BaseButtonDirective = inject(BaseButtonDirective, { self: true });\n\n    buttonElement = viewChild.required<ElementRef<HTMLButtonElement>>('button');\n\n    /** The host is a wrapper: this is the element that takes focus and carries the ARIA state. */\n    interactiveElement(): HTMLElement {\n        return this.buttonElement().nativeElement;\n    }\n\n    ariaLabel = input<string>();\n    disabled = input(false, { transform: booleanAttribute });\n    name = input<string>();\n    form = input<string>();\n    config = input(defaultButtonConfig, { transform: (value?: ButtonConfig) => value ?? defaultButtonConfig });\n    loading = input(false, { transform: booleanAttribute });\n    locked = input(false, { transform: booleanAttribute });\n    menuTrigger = input<MatMenuPanel | null>(null);\n    symbolPosition = input<'left' | 'right'>('right');\n    symbolId = input<agorapulseSymbol>();\n\n    menuOpened = output<void>();\n    menuClosed = output<void>();\n    // eslint-disable-next-line @angular-eslint/no-output-native\n    click = output<MouseEvent>();\n    // eslint-disable-next-line @angular-eslint/no-output-native\n    focus = output<FocusEvent>();\n    // eslint-disable-next-line @angular-eslint/no-output-native\n    blur = output<FocusEvent>();\n\n    buttonClasses = computed(() => {\n        const cfg = this.config();\n        const isLocked = this.locked();\n\n        return {\n            inverse: this.symbolPosition() === 'left',\n            ...(isLocked\n                ? { locked: true }\n                : {\n                      // Style\n                      [cfg.style]: true,\n                      transparent: cfg.style === 'stroked-transparent',\n                      stroked: cfg.style === 'stroked' || cfg.style === 'stroked-transparent',\n                      // Color\n                      ...(cfg.color ? { [cfg.color]: true } : {}),\n                      // Loading state\n                      loading: this.loading(),\n                  }),\n        };\n    });\n\n    focused: boolean = false;\n\n    private readonly symbolRegistry = inject(SymbolRegistry);\n\n    constructor() {\n        this.symbolRegistry.withSymbols(...(inject(UI_COMPONENTS_SYMBOLS, { optional: true })?.flat() ?? []));\n    }\n\n    onClickHandle($event: MouseEvent): void {\n        if (this.disabled() || this.loading()) {\n            return;\n        }\n        $event.stopImmediatePropagation();\n        this.click.emit($event);\n        this.buttonElement().nativeElement.blur();\n        this.blur.emit($event);\n    }\n\n    onBlurHandle($event: FocusEvent): void {\n        this.focused = false;\n        this.blur.emit($event);\n    }\n\n    onFocusHandle($event: FocusEvent): void {\n        this.focused = true;\n        this.focus.emit($event);\n    }\n\n    @HostListener('window:keyup.space', ['$event'])\n    onSpaceKeyUp(event: Event) {\n        if (this.focused && !this.disabled() && !this.loading()) {\n            event.preventDefault();\n            this.buttonElement().nativeElement.click();\n        }\n    }\n}\n","<button\n    #button\n    role=\"button\"\n    [matMenuTriggerFor]=\"menuTrigger()\"\n    [class]=\"buttonClasses()\"\n    [disabled]=\"disabled() && !locked()\"\n    [attr.name]=\"name()\"\n    [attr.data-test]=\"baseButtonDirective.hostDataTest ?? name()\"\n    [attr.id]=\"baseButtonDirective.hostId\"\n    [attr.type]=\"baseButtonDirective.hostType\"\n    [attr.form]=\"form()\"\n    [attr.aria-label]=\"ariaLabel() || null\"\n    [attr.aria-disabled]=\"disabled()?.toString()\"\n    (click)=\"onClickHandle($event)\"\n    (focus)=\"onFocusHandle($event)\"\n    (blur)=\"onBlurHandle($event)\"\n    (menuOpened)=\"menuOpened.emit()\"\n    (menuClosed)=\"menuClosed.emit()\">\n    <ng-content />\n    @if (symbolId()) {\n        <ap-symbol [symbolId]=\"symbolId()\" />\n    } @else {\n        <ng-content select=\"ap-symbol\" />\n    }\n    @if (loading() && !locked()) {\n        <div class=\"loading-bar\"></div>\n    }\n</button>\n@if (locked()) {\n    <div class=\"locked-symbol\">\n        <ap-symbol\n            symbolId=\"feature-lock\"\n            size=\"sm\" />\n    </div>\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":"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"}