@agorapulse/ui-components 20.4.4 → 20.4.6

package/action-dropdown/index.d.ts

@@ -1,6 +1,7 @@
 import * as _angular_core from '@angular/core';
 import { TemplateRef } from '@angular/core';
 import { BadgeColor } from '@agorapulse/ui-components/badge';
+import { DropdownOverlay } from '@agorapulse/ui-components/dropdown-base';
 import { agorapulseSymbol, SymbolColor } from '@agorapulse/ui-symbol';
 
 interface ActionDropdownItem {
@@ -36,43 +37,40 @@ interface ActionDropdownItem {
     dividerEnabled?: boolean;
     /** Optional ID for the action button item */
     id?: string;
+    /** Optional data-track attribute for analytics tracking */
+    dataTrack?: string;
 }
 /**
  * A dropdown component that displays a list of actionable items with support for icons,
  * badges, tooltips, and keyboard navigation.
  */
-declare class ActionDropdownComponent {
-    private readonly elementRef;
-    private readonly overlay;
-    private readonly positionBuilder;
+declare class ActionDropdownComponent implements DropdownOverlay {
     private readonly symbolRegistry;
-    private readonly viewContainerRef;
+    private readonly overlay;
     actionDropdownTemplate: _angular_core.Signal<TemplateRef<unknown> | undefined>;
     trigger: _angular_core.Signal<TemplateRef<unknown> | undefined>;
     /** Array of items to display in the dropdown menu */
     items: _angular_core.InputSignal<ActionDropdownItem[]>;
-    /** Whether the dropdown is disabled and cannot be opened */
-    disabled: _angular_core.InputSignal<boolean>;
     /** Whether to enable large mode styling for the dropdown */
     largeModeEnabled: _angular_core.InputSignal<boolean>;
-    /** Whether to show a backdrop that closes the dropdown when clicked */
-    showBackdrop: _angular_core.InputSignal<boolean>;
     /** Custom width for the dropdown menu in pixels */
     customWidth: _angular_core.InputSignal<number | null>;
+    /** Whether to show a backdrop that closes the dropdown when clicked */
+    showBackdrop: _angular_core.InputSignal<boolean>;
+    /** Whether the dropdown is disabled and cannot be opened */
+    disabled: _angular_core.InputSignal<boolean>;
     /** Default position for the dropdown relative to the trigger element */
     defaultPosition: _angular_core.InputSignal<"left" | "right">;
-    /** Emits when a dropdown item is clicked */
-    itemClick: _angular_core.OutputEmitterRef<ActionDropdownItem>;
     /** Emits when the dropdown menu is opened */
     opened: _angular_core.OutputEmitterRef<void>;
     /** Emits when the dropdown menu is closed */
     closed: _angular_core.OutputEmitterRef<void>;
-    private overlayRef;
-    private portal;
-    protected readonly isOpen: _angular_core.WritableSignal<boolean>;
+    /** Emits when a dropdown item is clicked */
+    itemClick: _angular_core.OutputEmitterRef<ActionDropdownItem>;
     protected readonly focusedIndex: _angular_core.WritableSignal<number>;
+    readonly isOpen: _angular_core.Signal<boolean>;
     constructor();
-    /** Opens the dropdown menu at the specified trigger element or component's element */
+    /** Opens the dropdown menu at the specified trigger element */
     open(triggerElement?: HTMLElement): void;
     /** Closes the dropdown menu and cleans up overlay resources */
     close(): void;
@@ -82,12 +80,10 @@ declare class ActionDropdownComponent {
     onItemClick(item: ActionDropdownItem): void;
     /** Handles keyboard navigation within the dropdown menu */
     onKeyDown(event: KeyboardEvent): void;
-    /** Creates positioning strategy for the overlay based on trigger element and default position */
-    private createPositionStrategy;
     /** Sets up keyboard event handling for the opened dropdown */
     private setupKeyboardNavigation;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<ActionDropdownComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ActionDropdownComponent, "ap-action-dropdown", never, { "items": { "alias": "items"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "largeModeEnabled": { "alias": "largeModeEnabled"; "required": false; "isSignal": true; }; "showBackdrop": { "alias": "showBackdrop"; "required": false; "isSignal": true; }; "customWidth": { "alias": "customWidth"; "required": false; "isSignal": true; }; "defaultPosition": { "alias": "defaultPosition"; "required": false; "isSignal": true; }; }, { "itemClick": "itemClick"; "opened": "opened"; "closed": "closed"; }, ["trigger"], never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ActionDropdownComponent, "ap-action-dropdown", never, { "items": { "alias": "items"; "required": false; "isSignal": true; }; "largeModeEnabled": { "alias": "largeModeEnabled"; "required": false; "isSignal": true; }; "customWidth": { "alias": "customWidth"; "required": false; "isSignal": true; }; "showBackdrop": { "alias": "showBackdrop"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "defaultPosition": { "alias": "defaultPosition"; "required": false; "isSignal": true; }; }, { "opened": "opened"; "closed": "closed"; "itemClick": "itemClick"; }, ["trigger"], never, true, never>;
 }
 
 /**

package/dropdown-base/index.d.ts

@@ -0,0 +1,49 @@
+import * as i0 from '@angular/core';
+import { TemplateRef } from '@angular/core';
+import { OverlayRef } from '@angular/cdk/overlay';
+
+interface DropdownOverlay {
+    open(triggerElement?: HTMLElement): void;
+    close(): void;
+    toggle(triggerElement?: HTMLElement): void;
+    isOpen(): boolean;
+}
+
+/**
+ * Generic directive that turns any element into a trigger for a dropdown component
+ * implementing the DropdownOverlay interface.
+ * Handles click and keyboard interactions to open/close the dropdown.
+ */
+declare class DropdownTriggerDirective {
+    private readonly elementRef;
+    /** Reference to the dropdown component that this trigger controls */
+    apDropdownTrigger: i0.InputSignal<DropdownOverlay>;
+    /** Handles click events to toggle the dropdown */
+    onClick(event: MouseEvent): void;
+    /** Handles keyboard events for accessibility (Enter, Space, Arrow Down, Escape) */
+    onKeyDown(event: KeyboardEvent): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DropdownTriggerDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<DropdownTriggerDirective, "[apDropdownTrigger]", never, { "apDropdownTrigger": { "alias": "apDropdownTrigger"; "required": true; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+interface DropdownOverlayConfig {
+    showBackdrop?: boolean;
+    defaultPosition?: 'right' | 'left';
+    /** Called when the overlay is closed via backdrop click or Escape key. Typically routes to the component's own close() method. */
+    onClose?: () => void;
+}
+/**
+ * Creates a composable dropdown overlay helper that manages CDK overlay creation,
+ * positioning, and disposal. Must be called within an Angular injection context
+ * (e.g., in a component constructor or field initializer).
+ */
+declare function createDropdownOverlay(): {
+    readonly overlayRef: OverlayRef | null;
+    isOpen: i0.Signal<boolean>;
+    open: (template: TemplateRef<unknown>, triggerElement?: HTMLElement, config?: DropdownOverlayConfig) => void;
+    close: () => void;
+};
+type DropdownOverlayInstance = ReturnType<typeof createDropdownOverlay>;
+
+export { DropdownTriggerDirective, createDropdownOverlay };
+export type { DropdownOverlay, DropdownOverlayConfig, DropdownOverlayInstance };

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

@@ -1,13 +1,11 @@
 import * as i0 from '@angular/core';
-import { inject, ElementRef, input, HostListener, Directive, ViewContainerRef, viewChild, contentChild, output, signal, effect, ChangeDetectionStrategy, Component } from '@angular/core';
+import { inject, ElementRef, input, HostListener, Directive, viewChild, contentChild, output, signal, effect, ChangeDetectionStrategy, Component } from '@angular/core';
 import { BadgeComponent } from '@agorapulse/ui-components/badge';
+import { createDropdownOverlay } from '@agorapulse/ui-components/dropdown-base';
 import { UI_COMPONENTS_SYMBOLS } from '@agorapulse/ui-components/providers';
 import { TooltipDirective } from '@agorapulse/ui-components/tooltip';
 import { SymbolRegistry, SymbolComponent, withSymbols, apInfo, apFeatureLock } from '@agorapulse/ui-symbol';
-import { Overlay, OverlayPositionBuilder } from '@angular/cdk/overlay';
-import { TemplatePortal } from '@angular/cdk/portal';
 import { CommonModule } from '@angular/common';
-import { take } from 'rxjs/operators';
 
 /**
  * Directive that turns any element into a trigger for an ActionDropdown component.
@@ -21,27 +19,24 @@ class ActionDropdownTriggerDirective {
     onClick(event) {
         event.preventDefault();
         event.stopPropagation();
-        const actionDropdown = this.apActionDropdownTrigger();
-        if (actionDropdown) {
-            actionDropdown.toggle(this.elementRef.nativeElement);
-        }
+        this.apActionDropdownTrigger()?.toggle(this.elementRef.nativeElement);
     }
     /** Handles keyboard events for accessibility (Enter, Space, Arrow Down, Escape) */
     onKeyDown(event) {
-        const actionDropdown = this.apActionDropdownTrigger();
-        if (actionDropdown) {
-            switch (event.key) {
-                case 'Enter':
-                case ' ':
-                case 'ArrowDown':
-                    event.preventDefault();
-                    actionDropdown.open(this.elementRef.nativeElement);
-                    break;
-                case 'Escape':
-                    event.preventDefault();
-                    actionDropdown.close();
-                    break;
-            }
+        const dropdown = this.apActionDropdownTrigger();
+        if (!dropdown)
+            return;
+        switch (event.key) {
+            case 'Enter':
+            case ' ':
+            case 'ArrowDown':
+                event.preventDefault();
+                dropdown.open(this.elementRef.nativeElement);
+                break;
+            case 'Escape':
+                event.preventDefault();
+                dropdown.close();
+                break;
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: ActionDropdownTriggerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
@@ -65,35 +60,30 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
  * badges, tooltips, and keyboard navigation.
  */
 class ActionDropdownComponent {
-    elementRef = inject(ElementRef);
-    overlay = inject(Overlay);
-    positionBuilder = inject(OverlayPositionBuilder);
     symbolRegistry = inject(SymbolRegistry);
-    viewContainerRef = inject(ViewContainerRef);
+    overlay = createDropdownOverlay();
     actionDropdownTemplate = viewChild('actionDropdownTemplate', ...(ngDevMode ? [{ debugName: "actionDropdownTemplate" }] : []));
     trigger = contentChild('trigger', ...(ngDevMode ? [{ debugName: "trigger" }] : []));
     /** Array of items to display in the dropdown menu */
     items = input([], ...(ngDevMode ? [{ debugName: "items" }] : []));
-    /** Whether the dropdown is disabled and cannot be opened */
-    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
     /** Whether to enable large mode styling for the dropdown */
     largeModeEnabled = input(false, ...(ngDevMode ? [{ debugName: "largeModeEnabled" }] : []));
-    /** Whether to show a backdrop that closes the dropdown when clicked */
-    showBackdrop = input(true, ...(ngDevMode ? [{ debugName: "showBackdrop" }] : []));
     /** Custom width for the dropdown menu in pixels */
     customWidth = input(null, ...(ngDevMode ? [{ debugName: "customWidth" }] : []));
+    /** Whether to show a backdrop that closes the dropdown when clicked */
+    showBackdrop = input(true, ...(ngDevMode ? [{ debugName: "showBackdrop" }] : []));
+    /** Whether the dropdown is disabled and cannot be opened */
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
     /** Default position for the dropdown relative to the trigger element */
     defaultPosition = input('right', ...(ngDevMode ? [{ debugName: "defaultPosition" }] : []));
-    /** Emits when a dropdown item is clicked */
-    itemClick = output();
     /** Emits when the dropdown menu is opened */
     opened = output();
     /** Emits when the dropdown menu is closed */
     closed = output();
-    overlayRef = null;
-    portal = null;
-    isOpen = signal(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : []));
+    /** Emits when a dropdown item is clicked */
+    itemClick = output();
     focusedIndex = signal(-1, ...(ngDevMode ? [{ debugName: "focusedIndex" }] : []));
+    isOpen = this.overlay.isOpen;
     constructor() {
         this.symbolRegistry.withSymbols(...(inject(UI_COMPONENTS_SYMBOLS, { optional: true })?.flat() ?? []));
         // Set up keyboard navigation when dropdown opens
@@ -103,56 +93,24 @@ class ActionDropdownComponent {
             }
         });
     }
-    /** Opens the dropdown menu at the specified trigger element or component's element */
+    /** Opens the dropdown menu at the specified trigger element */
     open(triggerElement) {
-        const actionDropdownTemplate = this.actionDropdownTemplate();
-        if (this.disabled() || this.isOpen() || !actionDropdownTemplate) {
+        const template = this.actionDropdownTemplate();
+        if (this.disabled() || this.isOpen() || !template)
             return;
-        }
-        const target = triggerElement || this.elementRef.nativeElement;
-        if (this.overlayRef) {
-            this.overlayRef.dispose();
-        }
-        const positionStrategy = this.createPositionStrategy(target);
-        this.overlayRef = this.overlay.create({
-            positionStrategy,
-            hasBackdrop: this.showBackdrop(),
-            backdropClass: '',
-            panelClass: '',
-            scrollStrategy: this.overlay.scrollStrategies.reposition(),
+        this.overlay.open(template, triggerElement, {
+            showBackdrop: this.showBackdrop(),
+            defaultPosition: this.defaultPosition(),
+            onClose: () => this.close(),
         });
-        this.portal = new TemplatePortal(actionDropdownTemplate, this.viewContainerRef);
-        this.overlayRef.attach(this.portal);
-        this.isOpen.set(true);
-        this.focusedIndex.set(-1);
         this.opened.emit();
-        this.overlayRef
-            .backdropClick()
-            .pipe(take(1))
-            .subscribe(() => {
-            this.close();
-        });
-        this.overlayRef
-            .keydownEvents()
-            .pipe(take(1))
-            .subscribe((event) => {
-            if (event.key === 'Escape') {
-                this.close();
-            }
-        });
     }
     /** Closes the dropdown menu and cleans up overlay resources */
     close() {
-        if (!this.isOpen()) {
+        if (!this.isOpen())
             return;
-        }
-        if (this.overlayRef) {
-            this.overlayRef.dispose();
-            this.overlayRef = null;
-        }
-        this.portal = null;
-        this.isOpen.set(false);
         this.focusedIndex.set(-1);
+        this.overlay.close();
         this.closed.emit();
     }
     /** Toggles the dropdown menu open or closed state */
@@ -215,112 +173,22 @@ class ActionDropdownComponent {
                 break;
         }
     }
-    /** Creates positioning strategy for the overlay based on trigger element and default position */
-    createPositionStrategy(target) {
-        const defaultPosition = this.defaultPosition();
-        const gap = 4;
-        const positions = defaultPosition === 'right'
-            ? [
-                // Bottom-right (default) - left border aligns with left side of trigger
-                {
-                    originX: 'start',
-                    originY: 'bottom',
-                    overlayX: 'start',
-                    overlayY: 'top',
-                    offsetX: 0,
-                    offsetY: gap,
-                },
-                // Bottom-left (if not enough space on right) - right border aligns with right side of trigger
-                {
-                    originX: 'end',
-                    originY: 'bottom',
-                    overlayX: 'end',
-                    overlayY: 'top',
-                    offsetX: 0,
-                    offsetY: gap,
-                },
-                // Top-right (if not enough space below) - left border aligns with left side of trigger
-                {
-                    originX: 'start',
-                    originY: 'top',
-                    overlayX: 'start',
-                    overlayY: 'bottom',
-                    offsetX: 0,
-                    offsetY: -gap,
-                },
-                // Top-left (if not enough space below and on right) - right border aligns with right side of trigger
-                {
-                    originX: 'end',
-                    originY: 'top',
-                    overlayX: 'end',
-                    overlayY: 'bottom',
-                    offsetX: 0,
-                    offsetY: -gap,
-                },
-            ]
-            : [
-                // Bottom-left (default) - right border aligns with right side of trigger
-                {
-                    originX: 'end',
-                    originY: 'bottom',
-                    overlayX: 'end',
-                    overlayY: 'top',
-                    offsetX: 0,
-                    offsetY: gap,
-                },
-                // Bottom-right (if not enough space on left) - left border aligns with left side of trigger
-                {
-                    originX: 'start',
-                    originY: 'bottom',
-                    overlayX: 'start',
-                    overlayY: 'top',
-                    offsetX: 0,
-                    offsetY: gap,
-                },
-                // Top-left (if not enough space below) - right border aligns with right side of trigger
-                {
-                    originX: 'end',
-                    originY: 'top',
-                    overlayX: 'end',
-                    overlayY: 'bottom',
-                    offsetX: 0,
-                    offsetY: -gap,
-                },
-                // Top-right (if not enough space below and on left) - left border aligns with left side of trigger
-                {
-                    originX: 'start',
-                    originY: 'top',
-                    overlayX: 'start',
-                    overlayY: 'bottom',
-                    offsetX: 0,
-                    offsetY: -gap,
-                },
-            ];
-        return this.positionBuilder
-            .flexibleConnectedTo(target)
-            .withPositions(positions)
-            .withFlexibleDimensions(true)
-            .withPush(true)
-            .withGrowAfterOpen(true)
-            .withViewportMargin(8);
-    }
     /** Sets up keyboard event handling for the opened dropdown */
     setupKeyboardNavigation() {
-        if (!this.overlayRef) {
+        const ref = this.overlay.overlayRef;
+        if (!ref)
             return;
-        }
-        const keydownEvents = this.overlayRef.keydownEvents();
-        keydownEvents.subscribe((event) => {
+        ref.keydownEvents().subscribe((event) => {
             this.onKeyDown(event);
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: ActionDropdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: ActionDropdownComponent, isStandalone: true, selector: "ap-action-dropdown", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, largeModeEnabled: { classPropertyName: "largeModeEnabled", publicName: "largeModeEnabled", isSignal: true, isRequired: false, transformFunction: null }, showBackdrop: { classPropertyName: "showBackdrop", publicName: "showBackdrop", isSignal: true, isRequired: false, transformFunction: null }, customWidth: { classPropertyName: "customWidth", publicName: "customWidth", isSignal: true, isRequired: false, transformFunction: null }, defaultPosition: { classPropertyName: "defaultPosition", publicName: "defaultPosition", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemClick: "itemClick", opened: "opened", closed: "closed" }, providers: [withSymbols(apInfo, apFeatureLock)], queries: [{ propertyName: "trigger", first: true, predicate: ["trigger"], descendants: true, isSignal: true }], viewQueries: [{ propertyName: "actionDropdownTemplate", first: true, predicate: ["actionDropdownTemplate"], descendants: true, isSignal: true }], ngImport: i0, template: "<ng-template #actionDropdownTemplate>\n    <!-- Action dropdown -->\n    <div\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.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</ng-template>\n", styles: [":host{display:none}.ap-action-dropdown__content{background-color:var(--comp-action-dropdown-background-color);border-radius:var(--comp-action-dropdown-border-radius);box-shadow:var(--comp-action-dropdown-box-shadow);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: "ngmodule", type: CommonModule }, { 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: "20.3.18", 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 }, defaultPosition: { classPropertyName: "defaultPosition", publicName: "defaultPosition", 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: "actionDropdownTemplate", first: true, predicate: ["actionDropdownTemplate"], descendants: true, isSignal: true }], ngImport: i0, template: "<ng-template #actionDropdownTemplate>\n    <!-- Action dropdown -->\n    <div\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</ng-template>\n", styles: [":host{display:none}.ap-action-dropdown__content{background-color:var(--comp-action-dropdown-background-color);border-radius:var(--comp-action-dropdown-border-radius);box-shadow:var(--comp-action-dropdown-box-shadow);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: "ngmodule", type: CommonModule }, { 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: "20.3.18", ngImport: i0, type: ActionDropdownComponent, decorators: [{
             type: Component,
-            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'ap-action-dropdown', imports: [BadgeComponent, CommonModule, SymbolComponent, TooltipDirective], providers: [withSymbols(apInfo, apFeatureLock)], template: "<ng-template #actionDropdownTemplate>\n    <!-- Action dropdown -->\n    <div\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.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</ng-template>\n", styles: [":host{display:none}.ap-action-dropdown__content{background-color:var(--comp-action-dropdown-background-color);border-radius:var(--comp-action-dropdown-border-radius);box-shadow:var(--comp-action-dropdown-box-shadow);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: { actionDropdownTemplate: [{ type: i0.ViewChild, args: ['actionDropdownTemplate', { isSignal: true }] }], trigger: [{ type: i0.ContentChild, args: ['trigger', { isSignal: true }] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], largeModeEnabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "largeModeEnabled", required: false }] }], showBackdrop: [{ type: i0.Input, args: [{ isSignal: true, alias: "showBackdrop", required: false }] }], customWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "customWidth", required: false }] }], defaultPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultPosition", required: false }] }], itemClick: [{ type: i0.Output, args: ["itemClick"] }], opened: [{ type: i0.Output, args: ["opened"] }], closed: [{ type: i0.Output, args: ["closed"] }] } });
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'ap-action-dropdown', imports: [BadgeComponent, CommonModule, SymbolComponent, TooltipDirective], providers: [withSymbols(apInfo, apFeatureLock)], template: "<ng-template #actionDropdownTemplate>\n    <!-- Action dropdown -->\n    <div\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</ng-template>\n", styles: [":host{display:none}.ap-action-dropdown__content{background-color:var(--comp-action-dropdown-background-color);border-radius:var(--comp-action-dropdown-border-radius);box-shadow:var(--comp-action-dropdown-box-shadow);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: { actionDropdownTemplate: [{ type: i0.ViewChild, args: ['actionDropdownTemplate', { 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 }] }], defaultPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultPosition", required: false }] }], opened: [{ type: i0.Output, args: ["opened"] }], closed: [{ type: i0.Output, args: ["closed"] }], itemClick: [{ type: i0.Output, args: ["itemClick"] }] } });
 
 /**
  * Generated bundle index. Do not edit.