@agorapulse/ui-components 20.4.5 → 20.4.6

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

@@ -0,0 +1,199 @@
+import * as i0 from '@angular/core';
+import { inject, ElementRef, input, HostListener, Directive, ViewContainerRef, signal } from '@angular/core';
+import { Overlay, OverlayPositionBuilder } from '@angular/cdk/overlay';
+import { TemplatePortal } from '@angular/cdk/portal';
+import { take, filter } from 'rxjs/operators';
+
+/**
+ * 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.
+ */
+class DropdownTriggerDirective {
+    elementRef = inject((ElementRef));
+    /** Reference to the dropdown component that this trigger controls */
+    apDropdownTrigger = input.required(...(ngDevMode ? [{ debugName: "apDropdownTrigger" }] : []));
+    /** Handles click events to toggle the dropdown */
+    onClick(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        this.apDropdownTrigger().toggle(this.elementRef.nativeElement);
+    }
+    /** Handles keyboard events for accessibility (Enter, Space, Arrow Down, Escape) */
+    onKeyDown(event) {
+        const dropdown = this.apDropdownTrigger();
+        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: DropdownTriggerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.18", type: DropdownTriggerDirective, isStandalone: true, selector: "[apDropdownTrigger]", inputs: { apDropdownTrigger: { classPropertyName: "apDropdownTrigger", publicName: "apDropdownTrigger", isSignal: true, isRequired: true, transformFunction: null } }, host: { listeners: { "click": "onClick($event)", "keydown": "onKeyDown($event)" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: DropdownTriggerDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[apDropdownTrigger]',
+                }]
+        }], propDecorators: { apDropdownTrigger: [{ type: i0.Input, args: [{ isSignal: true, alias: "apDropdownTrigger", required: true }] }], onClick: [{
+                type: HostListener,
+                args: ['click', ['$event']]
+            }], onKeyDown: [{
+                type: HostListener,
+                args: ['keydown', ['$event']]
+            }] } });
+
+/**
+ * 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).
+ */
+function createDropdownOverlay() {
+    const elementRef = inject(ElementRef);
+    const overlay = inject(Overlay);
+    const positionBuilder = inject(OverlayPositionBuilder);
+    const viewContainerRef = inject(ViewContainerRef);
+    let _overlayRef = null;
+    let portal = null;
+    const isOpen = signal(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : []));
+    function open(template, triggerElement, config) {
+        if (isOpen())
+            return;
+        const target = triggerElement ?? elementRef.nativeElement;
+        if (_overlayRef) {
+            _overlayRef.dispose();
+        }
+        const positionStrategy = buildPositionStrategy(target, config?.defaultPosition ?? 'right');
+        _overlayRef = overlay.create({
+            positionStrategy,
+            hasBackdrop: config?.showBackdrop ?? true,
+            backdropClass: '',
+            panelClass: '',
+            scrollStrategy: overlay.scrollStrategies.reposition(),
+        });
+        portal = new TemplatePortal(template, viewContainerRef);
+        _overlayRef.attach(portal);
+        isOpen.set(true);
+        const closeHandler = config?.onClose ?? (() => close());
+        _overlayRef
+            .backdropClick()
+            .pipe(take(1))
+            .subscribe(() => closeHandler());
+        _overlayRef
+            .keydownEvents()
+            .pipe(filter((event) => event.key === 'Escape'), take(1))
+            .subscribe(() => closeHandler());
+    }
+    function close() {
+        if (!isOpen())
+            return;
+        if (_overlayRef) {
+            _overlayRef.dispose();
+            _overlayRef = null;
+        }
+        portal = null;
+        isOpen.set(false);
+    }
+    function buildPositionStrategy(target, defaultPosition) {
+        const gap = 4;
+        const positions = defaultPosition === 'right'
+            ? [
+                {
+                    originX: 'start',
+                    originY: 'bottom',
+                    overlayX: 'start',
+                    overlayY: 'top',
+                    offsetX: 0,
+                    offsetY: gap,
+                },
+                {
+                    originX: 'end',
+                    originY: 'bottom',
+                    overlayX: 'end',
+                    overlayY: 'top',
+                    offsetX: 0,
+                    offsetY: gap,
+                },
+                {
+                    originX: 'start',
+                    originY: 'top',
+                    overlayX: 'start',
+                    overlayY: 'bottom',
+                    offsetX: 0,
+                    offsetY: -gap,
+                },
+                {
+                    originX: 'end',
+                    originY: 'top',
+                    overlayX: 'end',
+                    overlayY: 'bottom',
+                    offsetX: 0,
+                    offsetY: -gap,
+                },
+            ]
+            : [
+                {
+                    originX: 'end',
+                    originY: 'bottom',
+                    overlayX: 'end',
+                    overlayY: 'top',
+                    offsetX: 0,
+                    offsetY: gap,
+                },
+                {
+                    originX: 'start',
+                    originY: 'bottom',
+                    overlayX: 'start',
+                    overlayY: 'top',
+                    offsetX: 0,
+                    offsetY: gap,
+                },
+                {
+                    originX: 'end',
+                    originY: 'top',
+                    overlayX: 'end',
+                    overlayY: 'bottom',
+                    offsetX: 0,
+                    offsetY: -gap,
+                },
+                {
+                    originX: 'start',
+                    originY: 'top',
+                    overlayX: 'start',
+                    overlayY: 'bottom',
+                    offsetX: 0,
+                    offsetY: -gap,
+                },
+            ];
+        return positionBuilder
+            .flexibleConnectedTo(target)
+            .withPositions(positions)
+            .withFlexibleDimensions(true)
+            .withPush(true)
+            .withGrowAfterOpen(true)
+            .withViewportMargin(8);
+    }
+    return {
+        get overlayRef() {
+            return _overlayRef;
+        },
+        isOpen: isOpen.asReadonly(),
+        open,
+        close,
+    };
+}
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { DropdownTriggerDirective, createDropdownOverlay };
+//# sourceMappingURL=agorapulse-ui-components-dropdown-base.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"agorapulse-ui-components-dropdown-base.mjs","sources":["../../../libs/ui-components/dropdown-base/src/dropdown-trigger.directive.ts","../../../libs/ui-components/dropdown-base/src/dropdown-overlay.helper.ts","../../../libs/ui-components/dropdown-base/src/agorapulse-ui-components-dropdown-base.ts"],"sourcesContent":["import { Directive, ElementRef, HostListener, inject, input } from '@angular/core';\nimport { DropdownOverlay } from './dropdown-overlay.interface';\n\n/**\n * Generic directive that turns any element into a trigger for a dropdown component\n * implementing the DropdownOverlay interface.\n * Handles click and keyboard interactions to open/close the dropdown.\n */\n@Directive({\n    selector: '[apDropdownTrigger]',\n})\nexport class DropdownTriggerDirective {\n    private readonly elementRef = inject(ElementRef<HTMLElement>);\n\n    /** Reference to the dropdown component that this trigger controls */\n    apDropdownTrigger = input.required<DropdownOverlay>();\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.apDropdownTrigger().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.apDropdownTrigger();\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 {\n    ConnectedPosition,\n    FlexibleConnectedPositionStrategy,\n    Overlay,\n    OverlayPositionBuilder,\n    OverlayRef,\n} from '@angular/cdk/overlay';\nimport { TemplatePortal } from '@angular/cdk/portal';\nimport { ElementRef, inject, signal, TemplateRef, ViewContainerRef } from '@angular/core';\nimport { filter, take } from 'rxjs/operators';\n\nexport interface DropdownOverlayConfig {\n    showBackdrop?: boolean;\n    defaultPosition?: 'right' | 'left';\n    /** Called when the overlay is closed via backdrop click or Escape key. Typically routes to the component's own close() method. */\n    onClose?: () => void;\n}\n\n/**\n * Creates a composable dropdown overlay helper that manages CDK overlay creation,\n * positioning, and disposal. Must be called within an Angular injection context\n * (e.g., in a component constructor or field initializer).\n */\nexport function createDropdownOverlay() {\n    const elementRef = inject(ElementRef);\n    const overlay = inject(Overlay);\n    const positionBuilder = inject(OverlayPositionBuilder);\n    const viewContainerRef = inject(ViewContainerRef);\n\n    let _overlayRef: OverlayRef | null = null;\n    let portal: TemplatePortal<unknown> | null = null;\n    const isOpen = signal(false);\n\n    function open(\n        template: TemplateRef<unknown>,\n        triggerElement?: HTMLElement,\n        config?: DropdownOverlayConfig\n    ): void {\n        if (isOpen()) return;\n\n        const target = triggerElement ?? elementRef.nativeElement;\n\n        if (_overlayRef) {\n            _overlayRef.dispose();\n        }\n\n        const positionStrategy = buildPositionStrategy(target, config?.defaultPosition ?? 'right');\n\n        _overlayRef = overlay.create({\n            positionStrategy,\n            hasBackdrop: config?.showBackdrop ?? true,\n            backdropClass: '',\n            panelClass: '',\n            scrollStrategy: overlay.scrollStrategies.reposition(),\n        });\n\n        portal = new TemplatePortal(template, viewContainerRef);\n        _overlayRef.attach(portal);\n        isOpen.set(true);\n\n        const closeHandler = config?.onClose ?? (() => close());\n\n        _overlayRef\n            .backdropClick()\n            .pipe(take(1))\n            .subscribe(() => closeHandler());\n\n        _overlayRef\n            .keydownEvents()\n            .pipe(\n                filter((event: KeyboardEvent) => event.key === 'Escape'),\n                take(1)\n            )\n            .subscribe(() => closeHandler());\n    }\n\n    function close(): void {\n        if (!isOpen()) return;\n\n        if (_overlayRef) {\n            _overlayRef.dispose();\n            _overlayRef = null;\n        }\n\n        portal = null;\n        isOpen.set(false);\n    }\n\n    function buildPositionStrategy(\n        target: HTMLElement,\n        defaultPosition: 'right' | 'left'\n    ): FlexibleConnectedPositionStrategy {\n        const gap = 4;\n\n        const positions: ConnectedPosition[] =\n            defaultPosition === 'right'\n                ? [\n                      {\n                          originX: 'start',\n                          originY: 'bottom',\n                          overlayX: 'start',\n                          overlayY: 'top',\n                          offsetX: 0,\n                          offsetY: gap,\n                      },\n                      {\n                          originX: 'end',\n                          originY: 'bottom',\n                          overlayX: 'end',\n                          overlayY: 'top',\n                          offsetX: 0,\n                          offsetY: gap,\n                      },\n                      {\n                          originX: 'start',\n                          originY: 'top',\n                          overlayX: 'start',\n                          overlayY: 'bottom',\n                          offsetX: 0,\n                          offsetY: -gap,\n                      },\n                      {\n                          originX: 'end',\n                          originY: 'top',\n                          overlayX: 'end',\n                          overlayY: 'bottom',\n                          offsetX: 0,\n                          offsetY: -gap,\n                      },\n                  ]\n                : [\n                      {\n                          originX: 'end',\n                          originY: 'bottom',\n                          overlayX: 'end',\n                          overlayY: 'top',\n                          offsetX: 0,\n                          offsetY: gap,\n                      },\n                      {\n                          originX: 'start',\n                          originY: 'bottom',\n                          overlayX: 'start',\n                          overlayY: 'top',\n                          offsetX: 0,\n                          offsetY: gap,\n                      },\n                      {\n                          originX: 'end',\n                          originY: 'top',\n                          overlayX: 'end',\n                          overlayY: 'bottom',\n                          offsetX: 0,\n                          offsetY: -gap,\n                      },\n                      {\n                          originX: 'start',\n                          originY: 'top',\n                          overlayX: 'start',\n                          overlayY: 'bottom',\n                          offsetX: 0,\n                          offsetY: -gap,\n                      },\n                  ];\n\n        return positionBuilder\n            .flexibleConnectedTo(target)\n            .withPositions(positions)\n            .withFlexibleDimensions(true)\n            .withPush(true)\n            .withGrowAfterOpen(true)\n            .withViewportMargin(8);\n    }\n\n    return {\n        get overlayRef() {\n            return _overlayRef;\n        },\n        isOpen: isOpen.asReadonly(),\n        open,\n        close,\n    };\n}\n\nexport type DropdownOverlayInstance = ReturnType<typeof createDropdownOverlay>;\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-filter-dropdown.mjs

@@ -0,0 +1,83 @@
+import { createDropdownOverlay } from '@agorapulse/ui-components/dropdown-base';
+import * as i0 from '@angular/core';
+import { viewChild, input, output, Component } from '@angular/core';
+import { ButtonComponent } from '@agorapulse/ui-components/button';
+import { provideUiComponentsSymbols } from '@agorapulse/ui-components/providers';
+import { apReset } from '@agorapulse/ui-symbol';
+
+class FilterDropdownComponent {
+    overlay = createDropdownOverlay();
+    filterGroupTemplate = viewChild('filterGroupTemplate', ...(ngDevMode ? [{ debugName: "filterGroupTemplate" }] : []));
+    /** The filter groups to display in the dropdown */
+    items = input(...(ngDevMode ? [undefined, { debugName: "items" }] : []));
+    /** Whether the filter needs the apply button to be clicked for applyFilters to emit  */
+    needApplyButton = input(true, ...(ngDevMode ? [{ debugName: "needApplyButton" }] : []));
+    /** Whether the filter group can be closed (collapsed) by the user. If false, the group will always be expanded and the user won't see a toggle button. */
+    closable = input(true, ...(ngDevMode ? [{ debugName: "closable" }] : []));
+    /** whether the mode is in preset mode */
+    savePresetsMode = input(false, ...(ngDevMode ? [{ debugName: "savePresetsMode" }] : []));
+    /** 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" }] : []));
+    savePresetsText = input('Save new presets', ...(ngDevMode ? [{ debugName: "savePresetsText" }] : []));
+    resetFilterText = input('Reset filters', ...(ngDevMode ? [{ debugName: "resetFilterText" }] : []));
+    applyFiltersText = input('Apply filters', ...(ngDevMode ? [{ debugName: "applyFiltersText" }] : []));
+    clearFilterText = input('Clear filters', ...(ngDevMode ? [{ debugName: "clearFilterText" }] : []));
+    /** Emits when the dropdown menu is opened */
+    opened = output();
+    /** Emits when the dropdown menu is closed */
+    closed = output();
+    /** Emits when save presets is clicked */
+    savePresets = output();
+    /** Emits when filters are applied */
+    applyFilters = output();
+    /** Emits when user clicks on clear filter */
+    clearFilters = output();
+    /** Emits when user clicks on reset filter */
+    resetFilters = output();
+    isOpen = this.overlay.isOpen;
+    /** Opens the dropdown menu at the specified trigger element */
+    open(triggerElement) {
+        const template = this.filterGroupTemplate();
+        if (this.disabled() || this.isOpen() || !template)
+            return;
+        this.overlay.open(template, triggerElement, {
+            showBackdrop: this.showBackdrop(),
+            defaultPosition: this.defaultPosition(),
+            onClose: () => this.close(),
+        });
+        this.opened.emit();
+    }
+    /** Closes the dropdown menu and cleans up overlay resources */
+    close() {
+        if (!this.isOpen())
+            return;
+        this.overlay.close();
+        this.closed.emit();
+    }
+    /** Toggles the dropdown menu open or closed state */
+    toggle(triggerElement) {
+        if (this.isOpen()) {
+            this.close();
+        }
+        else {
+            this.open(triggerElement);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: FilterDropdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: FilterDropdownComponent, isStandalone: true, selector: "ap-filter-dropdown", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, needApplyButton: { classPropertyName: "needApplyButton", publicName: "needApplyButton", isSignal: true, isRequired: false, transformFunction: null }, closable: { classPropertyName: "closable", publicName: "closable", isSignal: true, isRequired: false, transformFunction: null }, savePresetsMode: { classPropertyName: "savePresetsMode", publicName: "savePresetsMode", 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 }, savePresetsText: { classPropertyName: "savePresetsText", publicName: "savePresetsText", isSignal: true, isRequired: false, transformFunction: null }, resetFilterText: { classPropertyName: "resetFilterText", publicName: "resetFilterText", isSignal: true, isRequired: false, transformFunction: null }, applyFiltersText: { classPropertyName: "applyFiltersText", publicName: "applyFiltersText", isSignal: true, isRequired: false, transformFunction: null }, clearFilterText: { classPropertyName: "clearFilterText", publicName: "clearFilterText", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { opened: "opened", closed: "closed", savePresets: "savePresets", applyFilters: "applyFilters", clearFilters: "clearFilters", resetFilters: "resetFilters" }, providers: [provideUiComponentsSymbols(apReset)], viewQueries: [{ propertyName: "filterGroupTemplate", first: true, predicate: ["filterGroupTemplate"], descendants: true, isSignal: true }], ngImport: i0, template: "<ng-template #filterGroupTemplate>\n    <div\n        class=\"ap-filter-dropdown\"\n        role=\"menu\"\n        tabindex=\"-1\"\n        [attr.aria-label]=\"'Filter dropdown'\"\n        >\n\n        <div class=\"ap-filter-dropdown-content\">\n            @for (item of items(); track item.title) {\n\n            }\n        </div>\n\n        <div class=\"ap-filter-dropdown-footer\">\n            @if (savePresetsMode()) {\n                <div class=\"ap-filter-dropdown-footer-presets\">\n                    <ap-button\n                        name=\"filter-dropdown-save-preset\"\n                        [config]=\"{ color: 'blue', style: 'stroked-transparent' }\"\n                        (click)=\"savePresets.emit()\">\n                        {{ savePresetsText() }}\n                    </ap-button>\n\n                    <ap-button\n                        name=\"filter-dropdown-reset-filters\"\n                        [symbolId]=\"'reset'\"\n                        [symbolPosition]=\"'left'\"\n                        [config]=\"{ color: 'blue', style: 'ghost' }\"\n                        (click)=\"resetFilters.emit()\">\n                        {{ resetFilterText() }}\n                    </ap-button>\n                </div>\n            } @else {\n                <div class=\"ap-filter-dropdown-footer-apply\">\n                    <ap-button\n                        name=\"filter-dropdown-clear-filters\"\n                        [config]=\"{ color: 'blue', style: 'ghost' }\"\n                        (click)=\"clearFilters.emit()\">\n                        {{ clearFilterText() }}\n                    </ap-button>\n\n                    <ap-button\n                        name=\"filter-dropdown-apply-filters\"\n                        [config]=\"{ color: 'blue', style: 'primary' }\"\n                        (click)=\"applyFilters.emit()\">\n                        {{ applyFiltersText() }}\n                    </ap-button>\n                </div>\n            }\n        </div>\n    </div>\n\n</ng-template>\n", styles: [":host{display:none}.ap-filter-dropdown{width:420px;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-filter-dropdown .ap-filter-dropdown-footer{padding:var(--ref-spacing-xxs) var(--ref-spacing-sm)}.ap-filter-dropdown .ap-filter-dropdown-footer .ap-filter-dropdown-footer-presets{display:flex;justify-content:space-between}.ap-filter-dropdown .ap-filter-dropdown-footer .ap-filter-dropdown-footer-apply{display:flex;justify-content:flex-end;gap:var(--ref-spacing-sm)}\n"], dependencies: [{ kind: "component", type: ButtonComponent, selector: "ap-button", inputs: ["ariaLabel", "disabled", "name", "form", "config", "loading", "locked", "menuTrigger", "symbolPosition", "symbolId"], outputs: ["menuOpened", "menuClosed", "click", "focus", "blur"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: FilterDropdownComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ap-filter-dropdown', imports: [ButtonComponent], providers: [provideUiComponentsSymbols(apReset)], template: "<ng-template #filterGroupTemplate>\n    <div\n        class=\"ap-filter-dropdown\"\n        role=\"menu\"\n        tabindex=\"-1\"\n        [attr.aria-label]=\"'Filter dropdown'\"\n        >\n\n        <div class=\"ap-filter-dropdown-content\">\n            @for (item of items(); track item.title) {\n\n            }\n        </div>\n\n        <div class=\"ap-filter-dropdown-footer\">\n            @if (savePresetsMode()) {\n                <div class=\"ap-filter-dropdown-footer-presets\">\n                    <ap-button\n                        name=\"filter-dropdown-save-preset\"\n                        [config]=\"{ color: 'blue', style: 'stroked-transparent' }\"\n                        (click)=\"savePresets.emit()\">\n                        {{ savePresetsText() }}\n                    </ap-button>\n\n                    <ap-button\n                        name=\"filter-dropdown-reset-filters\"\n                        [symbolId]=\"'reset'\"\n                        [symbolPosition]=\"'left'\"\n                        [config]=\"{ color: 'blue', style: 'ghost' }\"\n                        (click)=\"resetFilters.emit()\">\n                        {{ resetFilterText() }}\n                    </ap-button>\n                </div>\n            } @else {\n                <div class=\"ap-filter-dropdown-footer-apply\">\n                    <ap-button\n                        name=\"filter-dropdown-clear-filters\"\n                        [config]=\"{ color: 'blue', style: 'ghost' }\"\n                        (click)=\"clearFilters.emit()\">\n                        {{ clearFilterText() }}\n                    </ap-button>\n\n                    <ap-button\n                        name=\"filter-dropdown-apply-filters\"\n                        [config]=\"{ color: 'blue', style: 'primary' }\"\n                        (click)=\"applyFilters.emit()\">\n                        {{ applyFiltersText() }}\n                    </ap-button>\n                </div>\n            }\n        </div>\n    </div>\n\n</ng-template>\n", styles: [":host{display:none}.ap-filter-dropdown{width:420px;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-filter-dropdown .ap-filter-dropdown-footer{padding:var(--ref-spacing-xxs) var(--ref-spacing-sm)}.ap-filter-dropdown .ap-filter-dropdown-footer .ap-filter-dropdown-footer-presets{display:flex;justify-content:space-between}.ap-filter-dropdown .ap-filter-dropdown-footer .ap-filter-dropdown-footer-apply{display:flex;justify-content:flex-end;gap:var(--ref-spacing-sm)}\n"] }]
+        }], propDecorators: { filterGroupTemplate: [{ type: i0.ViewChild, args: ['filterGroupTemplate', { isSignal: true }] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], needApplyButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "needApplyButton", required: false }] }], closable: [{ type: i0.Input, args: [{ isSignal: true, alias: "closable", required: false }] }], savePresetsMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "savePresetsMode", 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 }] }], savePresetsText: [{ type: i0.Input, args: [{ isSignal: true, alias: "savePresetsText", required: false }] }], resetFilterText: [{ type: i0.Input, args: [{ isSignal: true, alias: "resetFilterText", required: false }] }], applyFiltersText: [{ type: i0.Input, args: [{ isSignal: true, alias: "applyFiltersText", required: false }] }], clearFilterText: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearFilterText", required: false }] }], opened: [{ type: i0.Output, args: ["opened"] }], closed: [{ type: i0.Output, args: ["closed"] }], savePresets: [{ type: i0.Output, args: ["savePresets"] }], applyFilters: [{ type: i0.Output, args: ["applyFilters"] }], clearFilters: [{ type: i0.Output, args: ["clearFilters"] }], resetFilters: [{ type: i0.Output, args: ["resetFilters"] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { FilterDropdownComponent };
+//# sourceMappingURL=agorapulse-ui-components-filter-dropdown.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"agorapulse-ui-components-filter-dropdown.mjs","sources":["../../../libs/ui-components/filter-dropdown/src/filter-dropdown/filter-dropdown.component.ts","../../../libs/ui-components/filter-dropdown/src/filter-dropdown/filter-dropdown.component.html","../../../libs/ui-components/filter-dropdown/src/agorapulse-ui-components-filter-dropdown.ts"],"sourcesContent":["import { createDropdownOverlay, DropdownOverlay } from '@agorapulse/ui-components/dropdown-base';\nimport {\n    Component,\n    input,\n    output,\n    TemplateRef,\n    viewChild,\n} from '@angular/core';\nimport { FilterGroup } from '../filter.model';\nimport { ButtonComponent } from '@agorapulse/ui-components/button';\nimport { provideUiComponentsSymbols } from '@agorapulse/ui-components/providers';\nimport { apReset } from '@agorapulse/ui-symbol';\n\n@Component({\n    selector: 'ap-filter-dropdown',\n    templateUrl: './filter-dropdown.component.html',\n    styleUrl: './filter-dropdown.component.scss',\n    imports: [ButtonComponent],\n    providers: [provideUiComponentsSymbols(apReset)]\n})\nexport class FilterDropdownComponent implements DropdownOverlay {\n    private readonly overlay = createDropdownOverlay();\n\n    filterGroupTemplate = viewChild<TemplateRef<unknown>>('filterGroupTemplate');\n\n    /** The filter groups to display in the dropdown */\n    items = input<FilterGroup[]>();\n    /** Whether the filter needs the apply button to be clicked for applyFilters to emit  */\n    needApplyButton = input(true);\n    /** Whether the filter group can be closed (collapsed) by the user. If false, the group will always be expanded and the user won't see a toggle button. */\n    closable = input(true);\n    /** whether the mode is in preset mode */\n    savePresetsMode = input(false);\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    defaultPosition = input<'right' | 'left'>('right');\n\n    savePresetsText = input('Save new presets');\n    resetFilterText = input('Reset filters');\n\n    applyFiltersText = input('Apply filters');\n    clearFilterText = input('Clear filters');\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\n    /** Emits when save presets is clicked */\n    savePresets = output<void>();\n    /** Emits when filters are applied */\n    applyFilters = output<void>();\n    /** Emits when user clicks on clear filter */\n    clearFilters = output<void>();\n    /** Emits when user clicks on reset filter */\n    resetFilters = output<void>();\n\n    readonly isOpen = this.overlay.isOpen;\n\n    /** Opens the dropdown menu at the specified trigger element */\n    open(triggerElement?: HTMLElement): void {\n        const template = this.filterGroupTemplate();\n        if (this.disabled() || this.isOpen() || !template) return;\n\n        this.overlay.open(template, triggerElement, {\n            showBackdrop: this.showBackdrop(),\n            defaultPosition: this.defaultPosition(),\n            onClose: () => this.close(),\n        });\n        this.opened.emit();\n    }\n\n    /** Closes the dropdown menu and cleans up overlay resources */\n    close(): void {\n        if (!this.isOpen()) return;\n        this.overlay.close();\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","<ng-template #filterGroupTemplate>\n    <div\n        class=\"ap-filter-dropdown\"\n        role=\"menu\"\n        tabindex=\"-1\"\n        [attr.aria-label]=\"'Filter dropdown'\"\n        >\n\n        <div class=\"ap-filter-dropdown-content\">\n            @for (item of items(); track item.title) {\n\n            }\n        </div>\n\n        <div class=\"ap-filter-dropdown-footer\">\n            @if (savePresetsMode()) {\n                <div class=\"ap-filter-dropdown-footer-presets\">\n                    <ap-button\n                        name=\"filter-dropdown-save-preset\"\n                        [config]=\"{ color: 'blue', style: 'stroked-transparent' }\"\n                        (click)=\"savePresets.emit()\">\n                        {{ savePresetsText() }}\n                    </ap-button>\n\n                    <ap-button\n                        name=\"filter-dropdown-reset-filters\"\n                        [symbolId]=\"'reset'\"\n                        [symbolPosition]=\"'left'\"\n                        [config]=\"{ color: 'blue', style: 'ghost' }\"\n                        (click)=\"resetFilters.emit()\">\n                        {{ resetFilterText() }}\n                    </ap-button>\n                </div>\n            } @else {\n                <div class=\"ap-filter-dropdown-footer-apply\">\n                    <ap-button\n                        name=\"filter-dropdown-clear-filters\"\n                        [config]=\"{ color: 'blue', style: 'ghost' }\"\n                        (click)=\"clearFilters.emit()\">\n                        {{ clearFilterText() }}\n                    </ap-button>\n\n                    <ap-button\n                        name=\"filter-dropdown-apply-filters\"\n                        [config]=\"{ color: 'blue', style: 'primary' }\"\n                        (click)=\"applyFilters.emit()\">\n                        {{ applyFiltersText() }}\n                    </ap-button>\n                </div>\n            }\n        </div>\n    </div>\n\n</ng-template>\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-nav-selector.mjs

@@ -2567,7 +2567,7 @@ class NavSelectorLeafComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: NavSelectorLeafComponent, deps: [{ token: i0.ElementRef }, { token: NavSelectorLeafPresenter }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: NavSelectorLeafComponent, isStandalone: true, selector: "ap-nav-selector-leaf", inputs: { leaf: { classPropertyName: "leaf", publicName: "leaf", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { actionClicked: "actionClicked" }, host: { attributes: { "role": "treeitem" }, listeners: { "keydown.arrowLeft": "fold($event)", "keydown.arrowRight": "unfold($event)" }, properties: { "class.minified": "!navSelectorLeafPresenter.expanded()" } }, providers: [withSymbols(apErrorFill, apFeatureLock, apChevronDown, apChevronUp, apMore), NavSelectorLeafPresenter], viewQueries: [{ propertyName: "aliasEl", first: true, predicate: ["alias"], descendants: true, isSignal: true }], ngImport: i0, template: "<!-- eslint-disable @angular-eslint/template/interactive-supports-focus -->\n@if (navSelectorLeafPresenter.expanded()) {\n    <div\n        class=\"nav-selector-leaf\"\n        apTooltipPosition=\"right\"\n        [attr.data-test]=\"dataTestId()\"\n        [attr.aria-selected]=\"leaf().selected\"\n        [apTooltip]=\"tooltipContent()\"\n        [apTooltipDisabled]=\"tooltipDisabled()\"\n        [class.multiple-mode]=\"navSelectorLeafPresenter.isMultipleModeEnabled()\"\n        [class.feature-locked]=\"leaf().displayFeatureLocked\"\n        [class.selected]=\"leaf().selected\"\n        [class.token-error]=\"leaf().displayTokenInvalid\"\n        [class.disabled]=\"leaf().disabled\"\n        [class.detail-selected]=\"leaf().detailSelected\"\n        [class.actions-displayable]=\"leaf().actionsDisplayable\"\n        [class.details-displayable]=\"leaf().detailsDisplayable\"\n        [class.style-menu]=\"navSelectorLeafPresenter.styleMenu()\"\n        [apTreeNodeAccessibility]=\"leaf()\"\n        (keydown.space)=\"onSpaceOrEnterPressed($event)\"\n        (keydown.enter)=\"onSpaceOrEnterPressed($event)\"\n        (focusin)=\"focused.set(true)\"\n        (focusout)=\"focused.set(false)\"\n        (click)=\"onClick($event)\">\n        @if (navSelectorLeafPresenter.isMultipleModeEnabled()) {\n            <ap-checkbox\n                [name]=\"leaf().uid\"\n                [checked]=\"leaf().selected\"\n                [aria-label]=\"leaf().alias\"\n                [disabled]=\"leaf().disabled || !leaf().selectable\"\n                (click)=\"eventStopper($event)\"\n                (change)=\"onCheckboxToggle()\" />\n        }\n        @if (!navSelectorLeafPresenter.hideAvatar()) {\n            <ap-avatar\n                size=\"24\"\n                [profilePicture]=\"leaf().pictureUrl ?? undefined\"\n                [network]=\"$any(leaf().network)\"\n                [showInitials]=\"initial()\" />\n        }\n\n        @if (leaf().startSymbolId || leaf().startDotColor) {\n            <div class=\"start-elements\">\n                @if (leaf().startSymbolId) {\n                    <ap-symbol\n                        size=\"sm\"\n                        color=\"grey-blue\"\n                        [symbolId]=\"leaf().startSymbolId\" />\n                }\n                @if (leaf().startDotColor) {\n                    <div class=\"start-dot-wrapper\">\n                        <div\n                            class=\"start-dot\"\n                            [style.background-color]=\"leaf().startDotColor\"></div>\n                    </div>\n                }\n            </div>\n        }\n\n        <span\n            #alias\n            class=\"caption\">\n            {{ leaf().alias }}\n        </span>\n\n        <a\n            class=\"standalone only-button\"\n            role=\"button\"\n            [attr.aria-label]=\"'Select only ' + leaf().alias\"\n            [attr.tabindex]=\"leaf().accessibility.tabIndex\"\n            (keydown.space)=\"selectOnly($event)\"\n            (keydown.enter)=\"selectOnly($event)\"\n            (click)=\"clickOnSelectOnly($event)\">\n            {{ navSelectorLeafPresenter.texts().only }}\n        </a>\n\n        <div class=\"end-actions\">\n            @if (leaf().actionsDisplayable) {\n                <ap-symbol\n                    class=\"actions-menu\"\n                    size=\"sm\"\n                    symbolId=\"more\"\n                    color=\"basic-grey\"\n                    [id]=\"leaf().uid + '_ActionMenuTrackingClick'\"\n                    [apActionDropdownTrigger]=\"actionDropdown\"\n                    [tabindex]=\"leaf().accessibility.tabIndex\"\n                    [attr.aria-label]=\"'Action menu ' + leaf().alias\" />\n                <ap-action-dropdown\n                    #actionDropdown\n                    [items]=\"leafActions()\"\n                    (itemClick)=\"onActionClicked($event)\" />\n            }\n\n            @if (leaf().foldable) {\n                <ap-symbol\n                    class=\"folding-button\"\n                    size=\"sm\"\n                    role=\"button\"\n                    [tabindex]=\"leaf().accessibility.tabIndex\"\n                    [attr.aria-label]=\"'Toggle ' + leaf().alias\"\n                    [symbolId]=\"foldSymbol()\"\n                    (click)=\"clickOnToggleFolding($event)\"\n                    (keydown.space)=\"toggleFolding($event)\"\n                    (keydown.enter)=\"toggleFolding($event)\" />\n            }\n        </div>\n\n        @if (leaf().displayCounter) {\n            <ap-counter\n                color=\"orange\"\n                size=\"normal\"\n                [background]=\"false\">\n                {{ leaf().counter }}\n            </ap-counter>\n        }\n        @if (leaf().displayTokenInvalid) {\n            <ap-symbol\n                size=\"sm\"\n                symbolId=\"error_fill\" />\n        }\n        @if (leaf().displayFeatureLocked) {\n            <ap-symbol\n                size=\"sm\"\n                symbolId=\"feature-lock\" />\n        }\n    </div>\n\n    <div\n        class=\"details-container\"\n        [@accordion]=\"{\n            value: animationState(),\n            params: {\n                maxHeight: maxHeight(),\n            },\n        }\">\n        @if (!foldedWithDelay()) {\n            <ap-nav-selector-leaf-details\n                [details]=\"leaf().details\"\n                [leaf]=\"leaf()\" />\n        }\n    </div>\n} @else {\n    <div\n        #minified\n        class=\"nav-selector-leaf\"\n        apTooltipPosition=\"right\"\n        [attr.data-test]=\"dataTestId()\"\n        [apNavSelectorPopoverTrigger]=\"minifiedPopover\"\n        [apNavSelectorPopoverDisabled]=\"!leaf().detailsDisplayable\"\n        [apNavSelectorPopoverTriggerMode]=\"{ click: false, hover: true }\"\n        [class.feature-locked]=\"leaf().displayFeatureLocked\"\n        [class.selected]=\"leaf().selected || leaf().detailSelected\"\n        [class.token-error]=\"leaf().displayTokenInvalid\"\n        [class.multiple-mode]=\"navSelectorLeafPresenter.isMultipleModeEnabled()\"\n        [class.disabled]=\"leaf().disabled\"\n        [apTooltip]=\"tooltipContent()\"\n        [apTooltipDisabled]=\"tooltipDisabled()\"\n        [apTreeNodeAccessibility]=\"leaf()\"\n        (keydown.space)=\"onSpaceOrEnterPressed($event)\"\n        (keydown.enter)=\"onSpaceOrEnterPressed($event)\"\n        (click)=\"onClick($event)\">\n        @if (navSelectorLeafPresenter.isMultipleModeEnabled()) {\n            <ap-checkbox\n                [name]=\"leaf().uid\"\n                [checked]=\"leaf().selected\"\n                [disabled]=\"leaf().disabled || !leaf().selectable\" />\n        }\n\n        <div class=\"avatar-container\">\n            <ap-avatar\n                size=\"24\"\n                [profilePicture]=\"leaf().pictureUrl ?? undefined\"\n                [network]=\"$any(leaf().network)\"\n                [showInitials]=\"initial()\" />\n\n            <div class=\"status\">\n                @if (leaf().displayCounter) {\n                    <ap-counter\n                        class=\"counter-override\"\n                        color=\"orange\"\n                        size=\"normal\"\n                        [notif]=\"true\"\n                        [background]=\"true\">\n                        {{ leaf().counter }}\n                    </ap-counter>\n                }\n                @if (leaf().displayTokenInvalid) {\n                    <ap-symbol\n                        size=\"sm\"\n                        symbolId=\"error_fill\" />\n                }\n                @if (leaf().displayFeatureLocked) {\n                    <ap-symbol\n                        size=\"sm\"\n                        symbolId=\"feature-lock\" />\n                }\n            </div>\n        </div>\n\n        <ap-nav-selector-popover\n            #minifiedPopover\n            placement=\"right\"\n            [popoverTitle]=\"leaf().alias\"\n            [offset]=\"{ mainAxis: 0, crossAxis: -36.5 }\">\n            @for (detail of leaf().details; track detail.uid) {\n                <ap-nav-selector-popover-item\n                    item\n                    [selected]=\"detail.selected\"\n                    [disabled]=\"detail.displayError\"\n                    [name]=\"detail.alias\"\n                    (click)=\"onDetailClicked($event, detail)\">\n                    <ap-nav-selector-leaf-detail\n                        [embedded]=\"true\"\n                        [detail]=\"detail\" />\n                </ap-nav-selector-popover-item>\n            }\n        </ap-nav-selector-popover>\n    </div>\n}\n", styles: [":host{display:flex;flex-shrink:0;align-self:stretch;flex-direction:column;--nav-selector-leaf-font-size: var(--ref-font-size-xs);--nav-selector-leaf-line-height: var(--ref-font-line-height-xs)}:host .nav-selector-leaf.style-menu{--nav-selector-leaf-font-size: var(--ref-font-size-sm);--nav-selector-leaf-line-height: var(--ref-font-line-height-sm)}:host .details-container{align-self:stretch}:host .nav-selector-leaf{position:relative;display:flex;padding:0 var(--ref-spacing-xxs);height:36px;align-items:center;gap:var(--ref-spacing-xxs);flex-shrink:0;flex-grow:1;align-self:stretch}:host .nav-selector-leaf ::ng-deep ap-checkbox .checkbox .checkbox-container{padding:0}:host .start-elements{display:flex;align-items:center;gap:var(--ref-spacing-xxs)}:host .start-elements .start-dot-wrapper{padding:2px;display:flex}:host .start-elements .start-dot-wrapper .start-dot{height:12px;width:12px;border-radius:50%}:host .caption{-webkit-box-orient:vertical;-webkit-line-clamp:1;flex:1 0 0;overflow:hidden;white-space:nowrap;color:var(--ref-color-grey-100);text-overflow:ellipsis;font-family:Averta;font-size:var(--nav-selector-leaf-font-size);font-style:normal;font-weight:var(--ref-font-weight-regular);line-height:var(--nav-selector-leaf-line-height)}:host ap-symbol[symbol-id=error_fill]{color:var(--ref-color-red-100)}:host ap-symbol[symbol-id=feature-lock]{color:var(--ref-color-purple-100)}:host ap-symbol[symbol-id=chevron-down],:host ap-symbol[symbol-id=chevron-up]{color:var(--ref-color-grey-80)}:host .end-actions{display:flex;align-items:center;gap:var(--ref-spacing-xxxs)}:host .folding-button,:host .actions-menu{display:none;width:24px;height:24px;justify-content:center;align-items:center;flex-shrink:0}:host .folding-button:hover,:host .actions-menu:hover{border-radius:var(--ref-border-radius-sm);background:var(--ref-color-electric-blue-20)}:host .folding-button:active,:host .folding-button.nav-selector-popover-trigger--active,:host .actions-menu:active,:host .actions-menu.nav-selector-popover-trigger--active{border-radius:var(--ref-border-radius-sm);background:var(--ref-color-electric-blue-40)}:host .folding-button:focus-visible,:host .actions-menu:focus-visible{outline:none;border-radius:var(--ref-border-radius-sm);background:var(--ref-color-electric-blue-20);box-shadow:0 0 0 1px #fff,0 0 0 3px #178dfe}:host .nav-selector-leaf.details-displayable{cursor:pointer}:host .nav-selector-leaf.details-displayable.detail-selected .caption{font-size:var(--nav-selector-leaf-font-size);font-style:normal;font-weight:var(--ref-font-weight-bold);line-height:var(--nav-selector-leaf-line-height);color:var(--ref-color-grey-100)}:host .nav-selector-leaf.details-displayable:focus-visible{outline:none;border-radius:var(--ref-border-radius-sm);background:var(--ref-color-electric-blue-10);box-shadow:0 0 0 1px var(--ref-color-white),0 0 0 3px var(--ref-color-electric-blue-100)}:host .nav-selector-leaf.details-displayable:hover{border-radius:var(--ref-border-radius-sm);background:var(--ref-color-electric-blue-10)}:host .nav-selector-leaf.details-displayable:focus-within:not(:host .nav-selector-leaf.details-displayable.detail-selected){border-radius:var(--ref-border-radius-sm);background:var(--ref-color-electric-blue-20)}:host .nav-selector-leaf:not(.disabled):not(.feature-locked):not(.multiple-mode.token-error):not(.details-displayable){cursor:pointer}:host .nav-selector-leaf:not(.disabled):not(.feature-locked):not(.multiple-mode.token-error):not(.details-displayable):hover{border-radius:var(--ref-border-radius-sm);background:var(--ref-color-electric-blue-10)}:host .nav-selector-leaf:not(.disabled):not(.feature-locked):not(.multiple-mode.token-error):not(.details-displayable):active{border-radius:var(--ref-border-radius-sm);background:var(--ref-color-electric-blue-20)}:host .nav-selector-leaf:not(.disabled):not(.feature-locked):not(.multiple-mode.token-error):not(.details-displayable):focus-visible{outline:none;border-radius:var(--ref-border-radius-sm);background:var(--ref-color-electric-blue-10);box-shadow:0 0 0 1px var(--ref-color-white),0 0 0 3px var(--ref-color-electric-blue-100)}:host .nav-selector-leaf:not(.disabled):not(.feature-locked):not(.multiple-mode.token-error):not(.details-displayable):focus-within{border-radius:var(--ref-border-radius-sm);background:var(--ref-color-electric-blue-20)}:host .nav-selector-leaf:not(.disabled):not(.feature-locked):not(.multiple-mode.token-error):not(.details-displayable).selected:not(.multiple-mode){border-radius:var(--ref-border-radius-sm);background:var(--ref-color-electric-blue-20)}:host .nav-selector-leaf:not(.disabled):not(.feature-locked):not(.multiple-mode.token-error):not(.details-displayable).selected:not(.multiple-mode) .caption{color:var(--ref-color-electric-blue-150)}:host .nav-selector-leaf:not(.disabled):not(.feature-locked):not(.multiple-mode.token-error):not(.details-displayable).selected.multiple-mode .caption{color:var(--ref-color-grey-100)}:host .nav-selector-leaf:not(.disabled):not(.feature-locked):not(.multiple-mode.token-error):not(.details-displayable).selected .caption{overflow:hidden;text-overflow:ellipsis;font-family:Averta;font-size:var(--nav-selector-leaf-font-size);font-style:normal;font-weight:var(--ref-font-weight-bold);line-height:var(--nav-selector-leaf-line-height)}:host .nav-selector-leaf:not(.disabled):not(.feature-locked):not(.multiple-mode.token-error):not(.details-displayable).selected:focus-visible{box-shadow:0 0 0 1px var(--ref-color-white),0 0 0 3px var(--ref-color-electric-blue-100)}:host .nav-selector-leaf:not(.disabled):not(.feature-locked):not(.multiple-mode.token-error):not(.details-displayable).multiple-mode:hover ap-counter,:host .nav-selector-leaf:not(.disabled):not(.feature-locked):not(.multiple-mode.token-error):not(.details-displayable).multiple-mode:focus-within ap-counter,:host .nav-selector-leaf:not(.disabled):not(.feature-locked):not(.multiple-mode.token-error):not(.details-displayable).multiple-mode:focus-visible ap-counter{display:none}:host .nav-selector-leaf:not(.disabled):not(.feature-locked):not(.multiple-mode.token-error):not(.details-displayable).multiple-mode:hover .only-button,:host .nav-selector-leaf:not(.disabled):not(.feature-locked):not(.multiple-mode.token-error):not(.details-displayable).multiple-mode:focus-within .only-button,:host .nav-selector-leaf:not(.disabled):not(.feature-locked):not(.multiple-mode.token-error):not(.details-displayable).multiple-mode:focus-visible .only-button{display:flex}:host .nav-selector-leaf.feature-locked:not(.multiple-mode){border-radius:var(--ref-border-radius-sm);outline:none;cursor:pointer}:host .nav-selector-leaf.feature-locked:not(.multiple-mode):hover{background:var(--ref-color-purple-10)}:host .nav-selector-leaf.feature-locked:not(.multiple-mode):active{background:var(--ref-color-purple-20)}:host .nav-selector-leaf.feature-locked:not(.multiple-mode):focus-visible{background:var(--ref-color-purple-10);box-shadow:0 0 0 1px var(--ref-color-white),0 0 0 3px var(--ref-color-purple-100)}:host .nav-selector-leaf.feature-locked:not(.multiple-mode).selected{background:var(--ref-color-purple-20)}:host .nav-selector-leaf.feature-locked:not(.multiple-mode).selected .caption{overflow:hidden;color:var(--ref-color-purple-100);text-overflow:ellipsis;font-family:Averta;font-size:var(--nav-selector-leaf-font-size);font-style:normal;font-weight:var(--ref-font-weight-bold);line-height:var(--nav-selector-leaf-line-height)}:host .nav-selector-leaf.feature-locked:not(.multiple-mode).selected:focus-visible{box-shadow:0 0 0 1px var(--ref-color-white),0 0 0 3px var(--ref-color-electric-blue-100)}:host .nav-selector-leaf.actions-displayable:not(.feature-locked):not(.disabled):not(.token-error):focus-visible .actions-menu,:host .nav-selector-leaf.actions-displayable:not(.feature-locked):not(.disabled):not(.token-error):focus-within:not(:has(ap-nav-selector-leaf-detail:focus)):not(:host .nav-selector-leaf.actions-displayable:not(.feature-locked):not(.disabled):not(.token-error):focus) .actions-menu,:host .nav-selector-leaf.actions-displayable:not(.feature-locked):not(.disabled):not(.token-error):hover .actions-menu{display:flex}:host .nav-selector-leaf.details-displayable:not(.feature-locked):not(.disabled):not(.token-error):focus-visible ap-counter,:host .nav-selector-leaf.details-displayable:not(.feature-locked):not(.disabled):not(.token-error):focus-within:not(:has(ap-nav-selector-leaf-detail:focus)):not(:host .nav-selector-leaf.details-displayable:not(.feature-locked):not(.disabled):not(.token-error):focus) ap-counter,:host .nav-selector-leaf.details-displayable:not(.feature-locked):not(.disabled):not(.token-error):hover ap-counter{display:none}:host .nav-selector-leaf.details-displayable:not(.feature-locked):not(.disabled):not(.token-error):focus-visible .folding-button,:host .nav-selector-leaf.details-displayable:not(.feature-locked):not(.disabled):not(.token-error):focus-within:not(:has(ap-nav-selector-leaf-detail:focus)):not(:host .nav-selector-leaf.details-displayable:not(.feature-locked):not(.disabled):not(.token-error):focus) .folding-button,:host .nav-selector-leaf.details-displayable:not(.feature-locked):not(.disabled):not(.token-error):hover .folding-button{display:flex}:host .nav-selector-leaf.feature-locked.multiple-mode ap-avatar,:host .nav-selector-leaf.feature-locked.multiple-mode .caption{opacity:.5}:host .nav-selector-leaf.feature-locked.multiple-mode .caption{color:var(--ref-color-grey-40)}:host .nav-selector-leaf.token-error.multiple-mode ap-avatar,:host .nav-selector-leaf.token-error.multiple-mode .caption{opacity:.5}:host .nav-selector-leaf.token-error.multiple-mode .caption{color:var(--ref-color-grey-40)}:host .nav-selector-leaf.disabled.multiple-mode ap-avatar,:host .nav-selector-leaf.disabled.multiple-mode .caption{opacity:.5}:host .nav-selector-leaf.disabled.multiple-mode .caption{color:var(--ref-color-grey-40)}:host .nav-selector-leaf.disabled ap-avatar,:host .nav-selector-leaf.disabled .caption{opacity:.5}:host .nav-selector-leaf.disabled .caption{color:var(--ref-color-grey-40)}:host .status{position:absolute;right:-4px;top:-6px;background-color:var(--ref-color-white);border-radius:100%}:host .avatar-container{position:relative}:host.minified .counter-override{background-color:var(--ref-color-orange-150)}:host.minified .nav-selector-leaf{gap:var(--ref-spacing-xxxs);padding:var(--ref-spacing-xxxs)}:host.minified .nav-selector-leaf:not(.multiple-mode){justify-content:center}:host.minified ::ng-deep ap-checkbox .checkbox .checkbox-container{padding:0}:host .only-button{display:none;font-family:Averta;font-size:var(--nav-selector-leaf-font-size);font-style:normal;font-weight:var(--ref-font-weight-bold);line-height:var(--nav-selector-leaf-line-height)}::ng-deep .nav-selector-leaf-menu{position:absolute;left:55px;top:-20%;width:225px}::ng-deep .nav-selector-leaf-menu .not-displayable{display:none}::ng-deep .nav-selector-leaf-menu .caption-bold{color:var(--ref-color-grey-100);font-family:Averta;font-size:var(--nav-selector-leaf-font-size);font-style:normal;font-weight:var(--ref-font-weight-bold);line-height:var(--nav-selector-leaf-line-height)}\n"], dependencies: [{ kind: "component", type: ActionDropdownComponent, selector: "ap-action-dropdown", inputs: ["items", "disabled", "largeModeEnabled", "showBackdrop", "customWidth", "defaultPosition"], outputs: ["itemClick", "opened", "closed"] }, { kind: "directive", type: ActionDropdownTriggerDirective, selector: "[apActionDropdownTrigger]", inputs: ["apActionDropdownTrigger"] }, { kind: "component", type: AvatarComponent, selector: "ap-avatar", inputs: ["profilePicture", "alt", "network", "size", "username", "showInitials", "bigNetwork", "anonymous", "online", "youtubeAvatarMode", "rounded"] }, { kind: "component", type: CounterComponent, selector: "ap-counter", inputs: ["color", "size", "notif", "background", "role"] }, { kind: "component", type: SymbolComponent, selector: "ap-symbol", inputs: ["symbolId", "color", "size"], outputs: ["sizeChange"] }, { kind: "component", type: NavSelectorLeafDetailsComponent, selector: "ap-nav-selector-leaf-details", inputs: ["leaf", "details"] }, { kind: "component", type: CheckboxComponent, selector: "ap-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "disabled", "indeterminate", "checked", "required", "name"], outputs: ["change"] }, { kind: "directive", type: TooltipDirective, selector: "[apTooltip]", inputs: ["apTooltip", "apTooltipPosition", "apTooltipShowDelay", "apTooltipHideDelay", "apTooltipDuration", "apTooltipDisabled", "apTooltipTruncatedTextOnly", "apTooltipTemplateContext", "apTooltipVirtualScrollElement", "apTooltipTrigger", "apTooltipType", "apTooltipPresentationContext", "apTooltipListItems", "apTooltipShowAvatarCaption"], exportAs: ["apTooltip"] }, { kind: "component", type: NavSelectorLeafDetailComponent, selector: "ap-nav-selector-leaf-detail", inputs: ["detail", "embedded"] }, { kind: "directive", type: TreeNodeAccessibilityDirective, selector: "[apTreeNodeAccessibility]", inputs: ["apTreeNodeAccessibility"] }, { kind: "component", type: NavSelectorPopoverComponent, selector: "ap-nav-selector-popover", inputs: ["placement", "popoverTitle", "offset"] }, { kind: "directive", type: NavSelectorPopoverTriggerDirective, selector: "[apNavSelectorPopoverTrigger]", inputs: ["apNavSelectorPopoverTrigger", "apNavSelectorPopoverTriggerMode", "apNavSelectorPopoverDisabled"] }, { kind: "component", type: NavSelectorPopoverItemComponent, selector: "ap-nav-selector-popover-item", inputs: ["selected", "disabled", "locked", "id", "name", "ariaLabel"] }], animations: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: NavSelectorLeafComponent, isStandalone: true, selector: "ap-nav-selector-leaf", inputs: { leaf: { classPropertyName: "leaf", publicName: "leaf", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { actionClicked: "actionClicked" }, host: { attributes: { "role": "treeitem" }, listeners: { "keydown.arrowLeft": "fold($event)", "keydown.arrowRight": "unfold($event)" }, properties: { "class.minified": "!navSelectorLeafPresenter.expanded()" } }, providers: [withSymbols(apErrorFill, apFeatureLock, apChevronDown, apChevronUp, apMore), NavSelectorLeafPresenter], viewQueries: [{ propertyName: "aliasEl", first: true, predicate: ["alias"], descendants: true, isSignal: true }], ngImport: i0, template: "<!-- eslint-disable @angular-eslint/template/interactive-supports-focus -->\n@if (navSelectorLeafPresenter.expanded()) {\n    <div\n        class=\"nav-selector-leaf\"\n        apTooltipPosition=\"right\"\n        [attr.data-test]=\"dataTestId()\"\n        [attr.aria-selected]=\"leaf().selected\"\n        [apTooltip]=\"tooltipContent()\"\n        [apTooltipDisabled]=\"tooltipDisabled()\"\n        [class.multiple-mode]=\"navSelectorLeafPresenter.isMultipleModeEnabled()\"\n        [class.feature-locked]=\"leaf().displayFeatureLocked\"\n        [class.selected]=\"leaf().selected\"\n        [class.token-error]=\"leaf().displayTokenInvalid\"\n        [class.disabled]=\"leaf().disabled\"\n        [class.detail-selected]=\"leaf().detailSelected\"\n        [class.actions-displayable]=\"leaf().actionsDisplayable\"\n        [class.details-displayable]=\"leaf().detailsDisplayable\"\n        [class.style-menu]=\"navSelectorLeafPresenter.styleMenu()\"\n        [apTreeNodeAccessibility]=\"leaf()\"\n        (keydown.space)=\"onSpaceOrEnterPressed($event)\"\n        (keydown.enter)=\"onSpaceOrEnterPressed($event)\"\n        (focusin)=\"focused.set(true)\"\n        (focusout)=\"focused.set(false)\"\n        (click)=\"onClick($event)\">\n        @if (navSelectorLeafPresenter.isMultipleModeEnabled()) {\n            <ap-checkbox\n                [name]=\"leaf().uid\"\n                [checked]=\"leaf().selected\"\n                [aria-label]=\"leaf().alias\"\n                [disabled]=\"leaf().disabled || !leaf().selectable\"\n                (click)=\"eventStopper($event)\"\n                (change)=\"onCheckboxToggle()\" />\n        }\n        @if (!navSelectorLeafPresenter.hideAvatar()) {\n            <ap-avatar\n                size=\"24\"\n                [profilePicture]=\"leaf().pictureUrl ?? undefined\"\n                [network]=\"$any(leaf().network)\"\n                [showInitials]=\"initial()\" />\n        }\n\n        @if (leaf().startSymbolId || leaf().startDotColor) {\n            <div class=\"start-elements\">\n                @if (leaf().startSymbolId) {\n                    <ap-symbol\n                        size=\"sm\"\n                        color=\"grey-blue\"\n                        [symbolId]=\"leaf().startSymbolId\" />\n                }\n                @if (leaf().startDotColor) {\n                    <div class=\"start-dot-wrapper\">\n                        <div\n                            class=\"start-dot\"\n                            [style.background-color]=\"leaf().startDotColor\"></div>\n                    </div>\n                }\n            </div>\n        }\n\n        <span\n            #alias\n            class=\"caption\">\n            {{ leaf().alias }}\n        </span>\n\n        <a\n            class=\"standalone only-button\"\n            role=\"button\"\n            [attr.aria-label]=\"'Select only ' + leaf().alias\"\n            [attr.tabindex]=\"leaf().accessibility.tabIndex\"\n            (keydown.space)=\"selectOnly($event)\"\n            (keydown.enter)=\"selectOnly($event)\"\n            (click)=\"clickOnSelectOnly($event)\">\n            {{ navSelectorLeafPresenter.texts().only }}\n        </a>\n\n        <div class=\"end-actions\">\n            @if (leaf().actionsDisplayable) {\n                <ap-symbol\n                    class=\"actions-menu\"\n                    size=\"sm\"\n                    symbolId=\"more\"\n                    color=\"basic-grey\"\n                    [id]=\"leaf().uid + '_ActionMenuTrackingClick'\"\n                    [apActionDropdownTrigger]=\"actionDropdown\"\n                    [tabindex]=\"leaf().accessibility.tabIndex\"\n                    [attr.aria-label]=\"'Action menu ' + leaf().alias\" />\n                <ap-action-dropdown\n                    #actionDropdown\n                    [items]=\"leafActions()\"\n                    (itemClick)=\"onActionClicked($event)\" />\n            }\n\n            @if (leaf().foldable) {\n                <ap-symbol\n                    class=\"folding-button\"\n                    size=\"sm\"\n                    role=\"button\"\n                    [tabindex]=\"leaf().accessibility.tabIndex\"\n                    [attr.aria-label]=\"'Toggle ' + leaf().alias\"\n                    [symbolId]=\"foldSymbol()\"\n                    (click)=\"clickOnToggleFolding($event)\"\n                    (keydown.space)=\"toggleFolding($event)\"\n                    (keydown.enter)=\"toggleFolding($event)\" />\n            }\n        </div>\n\n        @if (leaf().displayCounter) {\n            <ap-counter\n                color=\"orange\"\n                size=\"normal\"\n                [background]=\"false\">\n                {{ leaf().counter }}\n            </ap-counter>\n        }\n        @if (leaf().displayTokenInvalid) {\n            <ap-symbol\n                size=\"sm\"\n                symbolId=\"error_fill\" />\n        }\n        @if (leaf().displayFeatureLocked) {\n            <ap-symbol\n                size=\"sm\"\n                symbolId=\"feature-lock\" />\n        }\n    </div>\n\n    <div\n        class=\"details-container\"\n        [@accordion]=\"{\n            value: animationState(),\n            params: {\n                maxHeight: maxHeight(),\n            },\n        }\">\n        @if (!foldedWithDelay()) {\n            <ap-nav-selector-leaf-details\n                [details]=\"leaf().details\"\n                [leaf]=\"leaf()\" />\n        }\n    </div>\n} @else {\n    <div\n        #minified\n        class=\"nav-selector-leaf\"\n        apTooltipPosition=\"right\"\n        [attr.data-test]=\"dataTestId()\"\n        [apNavSelectorPopoverTrigger]=\"minifiedPopover\"\n        [apNavSelectorPopoverDisabled]=\"!leaf().detailsDisplayable\"\n        [apNavSelectorPopoverTriggerMode]=\"{ click: false, hover: true }\"\n        [class.feature-locked]=\"leaf().displayFeatureLocked\"\n        [class.selected]=\"leaf().selected || leaf().detailSelected\"\n        [class.token-error]=\"leaf().displayTokenInvalid\"\n        [class.multiple-mode]=\"navSelectorLeafPresenter.isMultipleModeEnabled()\"\n        [class.disabled]=\"leaf().disabled\"\n        [apTooltip]=\"tooltipContent()\"\n        [apTooltipDisabled]=\"tooltipDisabled()\"\n        [apTreeNodeAccessibility]=\"leaf()\"\n        (keydown.space)=\"onSpaceOrEnterPressed($event)\"\n        (keydown.enter)=\"onSpaceOrEnterPressed($event)\"\n        (click)=\"onClick($event)\">\n        @if (navSelectorLeafPresenter.isMultipleModeEnabled()) {\n            <ap-checkbox\n                [name]=\"leaf().uid\"\n                [checked]=\"leaf().selected\"\n                [disabled]=\"leaf().disabled || !leaf().selectable\" />\n        }\n\n        <div class=\"avatar-container\">\n            <ap-avatar\n                size=\"24\"\n                [profilePicture]=\"leaf().pictureUrl ?? undefined\"\n                [network]=\"$any(leaf().network)\"\n                [showInitials]=\"initial()\" />\n\n            <div class=\"status\">\n                @if (leaf().displayCounter) {\n                    <ap-counter\n                        class=\"counter-override\"\n                        color=\"orange\"\n                        size=\"normal\"\n                        [notif]=\"true\"\n                        [background]=\"true\">\n                        {{ leaf().counter }}\n                    </ap-counter>\n                }\n                @if (leaf().displayTokenInvalid) {\n                    <ap-symbol\n                        size=\"sm\"\n                        symbolId=\"error_fill\" />\n                }\n                @if (leaf().displayFeatureLocked) {\n                    <ap-symbol\n                        size=\"sm\"\n                        symbolId=\"feature-lock\" />\n                }\n            </div>\n        </div>\n\n        <ap-nav-selector-popover\n            #minifiedPopover\n            placement=\"right\"\n            [popoverTitle]=\"leaf().alias\"\n            [offset]=\"{ mainAxis: 0, crossAxis: -36.5 }\">\n            @for (detail of leaf().details; track detail.uid) {\n                <ap-nav-selector-popover-item\n                    item\n                    [selected]=\"detail.selected\"\n                    [disabled]=\"detail.displayError\"\n                    [name]=\"detail.alias\"\n                    (click)=\"onDetailClicked($event, detail)\">\n                    <ap-nav-selector-leaf-detail\n                        [embedded]=\"true\"\n                        [detail]=\"detail\" />\n                </ap-nav-selector-popover-item>\n            }\n        </ap-nav-selector-popover>\n    </div>\n}\n", styles: [":host{display:flex;flex-shrink:0;align-self:stretch;flex-direction:column;--nav-selector-leaf-font-size: var(--ref-font-size-xs);--nav-selector-leaf-line-height: var(--ref-font-line-height-xs)}:host .nav-selector-leaf.style-menu{--nav-selector-leaf-font-size: var(--ref-font-size-sm);--nav-selector-leaf-line-height: var(--ref-font-line-height-sm)}:host .details-container{align-self:stretch}:host .nav-selector-leaf{position:relative;display:flex;padding:0 var(--ref-spacing-xxs);height:36px;align-items:center;gap:var(--ref-spacing-xxs);flex-shrink:0;flex-grow:1;align-self:stretch}:host .nav-selector-leaf ::ng-deep ap-checkbox .checkbox .checkbox-container{padding:0}:host .start-elements{display:flex;align-items:center;gap:var(--ref-spacing-xxs)}:host .start-elements .start-dot-wrapper{padding:2px;display:flex}:host .start-elements .start-dot-wrapper .start-dot{height:12px;width:12px;border-radius:50%}:host .caption{-webkit-box-orient:vertical;-webkit-line-clamp:1;flex:1 0 0;overflow:hidden;white-space:nowrap;color:var(--ref-color-grey-100);text-overflow:ellipsis;font-family:Averta;font-size:var(--nav-selector-leaf-font-size);font-style:normal;font-weight:var(--ref-font-weight-regular);line-height:var(--nav-selector-leaf-line-height)}:host ap-symbol[symbol-id=error_fill]{color:var(--ref-color-red-100)}:host ap-symbol[symbol-id=feature-lock]{color:var(--ref-color-purple-100)}:host ap-symbol[symbol-id=chevron-down],:host ap-symbol[symbol-id=chevron-up]{color:var(--ref-color-grey-80)}:host .end-actions{display:flex;align-items:center;gap:var(--ref-spacing-xxxs)}:host .folding-button,:host .actions-menu{display:none;width:24px;height:24px;justify-content:center;align-items:center;flex-shrink:0}:host .folding-button:hover,:host .actions-menu:hover{border-radius:var(--ref-border-radius-sm);background:var(--ref-color-electric-blue-20)}:host .folding-button:active,:host .folding-button.nav-selector-popover-trigger--active,:host .actions-menu:active,:host .actions-menu.nav-selector-popover-trigger--active{border-radius:var(--ref-border-radius-sm);background:var(--ref-color-electric-blue-40)}:host .folding-button:focus-visible,:host .actions-menu:focus-visible{outline:none;border-radius:var(--ref-border-radius-sm);background:var(--ref-color-electric-blue-20);box-shadow:0 0 0 1px #fff,0 0 0 3px #178dfe}:host .nav-selector-leaf.details-displayable{cursor:pointer}:host .nav-selector-leaf.details-displayable.detail-selected .caption{font-size:var(--nav-selector-leaf-font-size);font-style:normal;font-weight:var(--ref-font-weight-bold);line-height:var(--nav-selector-leaf-line-height);color:var(--ref-color-grey-100)}:host .nav-selector-leaf.details-displayable:focus-visible{outline:none;border-radius:var(--ref-border-radius-sm);background:var(--ref-color-electric-blue-10);box-shadow:0 0 0 1px var(--ref-color-white),0 0 0 3px var(--ref-color-electric-blue-100)}:host .nav-selector-leaf.details-displayable:hover{border-radius:var(--ref-border-radius-sm);background:var(--ref-color-electric-blue-10)}:host .nav-selector-leaf.details-displayable:focus-within:not(:host .nav-selector-leaf.details-displayable.detail-selected){border-radius:var(--ref-border-radius-sm);background:var(--ref-color-electric-blue-20)}:host .nav-selector-leaf:not(.disabled):not(.feature-locked):not(.multiple-mode.token-error):not(.details-displayable){cursor:pointer}:host .nav-selector-leaf:not(.disabled):not(.feature-locked):not(.multiple-mode.token-error):not(.details-displayable):hover{border-radius:var(--ref-border-radius-sm);background:var(--ref-color-electric-blue-10)}:host .nav-selector-leaf:not(.disabled):not(.feature-locked):not(.multiple-mode.token-error):not(.details-displayable):active{border-radius:var(--ref-border-radius-sm);background:var(--ref-color-electric-blue-20)}:host .nav-selector-leaf:not(.disabled):not(.feature-locked):not(.multiple-mode.token-error):not(.details-displayable):focus-visible{outline:none;border-radius:var(--ref-border-radius-sm);background:var(--ref-color-electric-blue-10);box-shadow:0 0 0 1px var(--ref-color-white),0 0 0 3px var(--ref-color-electric-blue-100)}:host .nav-selector-leaf:not(.disabled):not(.feature-locked):not(.multiple-mode.token-error):not(.details-displayable):focus-within{border-radius:var(--ref-border-radius-sm);background:var(--ref-color-electric-blue-20)}:host .nav-selector-leaf:not(.disabled):not(.feature-locked):not(.multiple-mode.token-error):not(.details-displayable).selected:not(.multiple-mode){border-radius:var(--ref-border-radius-sm);background:var(--ref-color-electric-blue-20)}:host .nav-selector-leaf:not(.disabled):not(.feature-locked):not(.multiple-mode.token-error):not(.details-displayable).selected:not(.multiple-mode) .caption{color:var(--ref-color-electric-blue-150)}:host .nav-selector-leaf:not(.disabled):not(.feature-locked):not(.multiple-mode.token-error):not(.details-displayable).selected.multiple-mode .caption{color:var(--ref-color-grey-100)}:host .nav-selector-leaf:not(.disabled):not(.feature-locked):not(.multiple-mode.token-error):not(.details-displayable).selected .caption{overflow:hidden;text-overflow:ellipsis;font-family:Averta;font-size:var(--nav-selector-leaf-font-size);font-style:normal;font-weight:var(--ref-font-weight-bold);line-height:var(--nav-selector-leaf-line-height)}:host .nav-selector-leaf:not(.disabled):not(.feature-locked):not(.multiple-mode.token-error):not(.details-displayable).selected:focus-visible{box-shadow:0 0 0 1px var(--ref-color-white),0 0 0 3px var(--ref-color-electric-blue-100)}:host .nav-selector-leaf:not(.disabled):not(.feature-locked):not(.multiple-mode.token-error):not(.details-displayable).multiple-mode:hover ap-counter,:host .nav-selector-leaf:not(.disabled):not(.feature-locked):not(.multiple-mode.token-error):not(.details-displayable).multiple-mode:focus-within ap-counter,:host .nav-selector-leaf:not(.disabled):not(.feature-locked):not(.multiple-mode.token-error):not(.details-displayable).multiple-mode:focus-visible ap-counter{display:none}:host .nav-selector-leaf:not(.disabled):not(.feature-locked):not(.multiple-mode.token-error):not(.details-displayable).multiple-mode:hover .only-button,:host .nav-selector-leaf:not(.disabled):not(.feature-locked):not(.multiple-mode.token-error):not(.details-displayable).multiple-mode:focus-within .only-button,:host .nav-selector-leaf:not(.disabled):not(.feature-locked):not(.multiple-mode.token-error):not(.details-displayable).multiple-mode:focus-visible .only-button{display:flex}:host .nav-selector-leaf.feature-locked:not(.multiple-mode){border-radius:var(--ref-border-radius-sm);outline:none;cursor:pointer}:host .nav-selector-leaf.feature-locked:not(.multiple-mode):hover{background:var(--ref-color-purple-10)}:host .nav-selector-leaf.feature-locked:not(.multiple-mode):active{background:var(--ref-color-purple-20)}:host .nav-selector-leaf.feature-locked:not(.multiple-mode):focus-visible{background:var(--ref-color-purple-10);box-shadow:0 0 0 1px var(--ref-color-white),0 0 0 3px var(--ref-color-purple-100)}:host .nav-selector-leaf.feature-locked:not(.multiple-mode).selected{background:var(--ref-color-purple-20)}:host .nav-selector-leaf.feature-locked:not(.multiple-mode).selected .caption{overflow:hidden;color:var(--ref-color-purple-100);text-overflow:ellipsis;font-family:Averta;font-size:var(--nav-selector-leaf-font-size);font-style:normal;font-weight:var(--ref-font-weight-bold);line-height:var(--nav-selector-leaf-line-height)}:host .nav-selector-leaf.feature-locked:not(.multiple-mode).selected:focus-visible{box-shadow:0 0 0 1px var(--ref-color-white),0 0 0 3px var(--ref-color-electric-blue-100)}:host .nav-selector-leaf.actions-displayable:not(.feature-locked):not(.disabled):not(.token-error):focus-visible .actions-menu,:host .nav-selector-leaf.actions-displayable:not(.feature-locked):not(.disabled):not(.token-error):focus-within:not(:has(ap-nav-selector-leaf-detail:focus)):not(:host .nav-selector-leaf.actions-displayable:not(.feature-locked):not(.disabled):not(.token-error):focus) .actions-menu,:host .nav-selector-leaf.actions-displayable:not(.feature-locked):not(.disabled):not(.token-error):hover .actions-menu{display:flex}:host .nav-selector-leaf.details-displayable:not(.feature-locked):not(.disabled):not(.token-error):focus-visible ap-counter,:host .nav-selector-leaf.details-displayable:not(.feature-locked):not(.disabled):not(.token-error):focus-within:not(:has(ap-nav-selector-leaf-detail:focus)):not(:host .nav-selector-leaf.details-displayable:not(.feature-locked):not(.disabled):not(.token-error):focus) ap-counter,:host .nav-selector-leaf.details-displayable:not(.feature-locked):not(.disabled):not(.token-error):hover ap-counter{display:none}:host .nav-selector-leaf.details-displayable:not(.feature-locked):not(.disabled):not(.token-error):focus-visible .folding-button,:host .nav-selector-leaf.details-displayable:not(.feature-locked):not(.disabled):not(.token-error):focus-within:not(:has(ap-nav-selector-leaf-detail:focus)):not(:host .nav-selector-leaf.details-displayable:not(.feature-locked):not(.disabled):not(.token-error):focus) .folding-button,:host .nav-selector-leaf.details-displayable:not(.feature-locked):not(.disabled):not(.token-error):hover .folding-button{display:flex}:host .nav-selector-leaf.feature-locked.multiple-mode ap-avatar,:host .nav-selector-leaf.feature-locked.multiple-mode .caption{opacity:.5}:host .nav-selector-leaf.feature-locked.multiple-mode .caption{color:var(--ref-color-grey-40)}:host .nav-selector-leaf.token-error.multiple-mode ap-avatar,:host .nav-selector-leaf.token-error.multiple-mode .caption{opacity:.5}:host .nav-selector-leaf.token-error.multiple-mode .caption{color:var(--ref-color-grey-40)}:host .nav-selector-leaf.disabled.multiple-mode ap-avatar,:host .nav-selector-leaf.disabled.multiple-mode .caption{opacity:.5}:host .nav-selector-leaf.disabled.multiple-mode .caption{color:var(--ref-color-grey-40)}:host .nav-selector-leaf.disabled ap-avatar,:host .nav-selector-leaf.disabled .caption{opacity:.5}:host .nav-selector-leaf.disabled .caption{color:var(--ref-color-grey-40)}:host .status{position:absolute;right:-4px;top:-6px;background-color:var(--ref-color-white);border-radius:100%}:host .avatar-container{position:relative}:host.minified .counter-override{background-color:var(--ref-color-orange-150)}:host.minified .nav-selector-leaf{gap:var(--ref-spacing-xxxs);padding:var(--ref-spacing-xxxs)}:host.minified .nav-selector-leaf:not(.multiple-mode){justify-content:center}:host.minified ::ng-deep ap-checkbox .checkbox .checkbox-container{padding:0}:host .only-button{display:none;font-family:Averta;font-size:var(--nav-selector-leaf-font-size);font-style:normal;font-weight:var(--ref-font-weight-bold);line-height:var(--nav-selector-leaf-line-height)}::ng-deep .nav-selector-leaf-menu{position:absolute;left:55px;top:-20%;width:225px}::ng-deep .nav-selector-leaf-menu .not-displayable{display:none}::ng-deep .nav-selector-leaf-menu .caption-bold{color:var(--ref-color-grey-100);font-family:Averta;font-size:var(--nav-selector-leaf-font-size);font-style:normal;font-weight:var(--ref-font-weight-bold);line-height:var(--nav-selector-leaf-line-height)}\n"], dependencies: [{ kind: "component", type: ActionDropdownComponent, selector: "ap-action-dropdown", inputs: ["items", "largeModeEnabled", "customWidth", "showBackdrop", "disabled", "defaultPosition"], outputs: ["opened", "closed", "itemClick"] }, { kind: "directive", type: ActionDropdownTriggerDirective, selector: "[apActionDropdownTrigger]", inputs: ["apActionDropdownTrigger"] }, { kind: "component", type: AvatarComponent, selector: "ap-avatar", inputs: ["profilePicture", "alt", "network", "size", "username", "showInitials", "bigNetwork", "anonymous", "online", "youtubeAvatarMode", "rounded"] }, { kind: "component", type: CounterComponent, selector: "ap-counter", inputs: ["color", "size", "notif", "background", "role"] }, { kind: "component", type: SymbolComponent, selector: "ap-symbol", inputs: ["symbolId", "color", "size"], outputs: ["sizeChange"] }, { kind: "component", type: NavSelectorLeafDetailsComponent, selector: "ap-nav-selector-leaf-details", inputs: ["leaf", "details"] }, { kind: "component", type: CheckboxComponent, selector: "ap-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "disabled", "indeterminate", "checked", "required", "name"], outputs: ["change"] }, { kind: "directive", type: TooltipDirective, selector: "[apTooltip]", inputs: ["apTooltip", "apTooltipPosition", "apTooltipShowDelay", "apTooltipHideDelay", "apTooltipDuration", "apTooltipDisabled", "apTooltipTruncatedTextOnly", "apTooltipTemplateContext", "apTooltipVirtualScrollElement", "apTooltipTrigger", "apTooltipType", "apTooltipPresentationContext", "apTooltipListItems", "apTooltipShowAvatarCaption"], exportAs: ["apTooltip"] }, { kind: "component", type: NavSelectorLeafDetailComponent, selector: "ap-nav-selector-leaf-detail", inputs: ["detail", "embedded"] }, { kind: "directive", type: TreeNodeAccessibilityDirective, selector: "[apTreeNodeAccessibility]", inputs: ["apTreeNodeAccessibility"] }, { kind: "component", type: NavSelectorPopoverComponent, selector: "ap-nav-selector-popover", inputs: ["placement", "popoverTitle", "offset"] }, { kind: "directive", type: NavSelectorPopoverTriggerDirective, selector: "[apNavSelectorPopoverTrigger]", inputs: ["apNavSelectorPopoverTrigger", "apNavSelectorPopoverTriggerMode", "apNavSelectorPopoverDisabled"] }, { kind: "component", type: NavSelectorPopoverItemComponent, selector: "ap-nav-selector-popover-item", inputs: ["selected", "disabled", "locked", "id", "name", "ariaLabel"] }], animations: [
             /**
              * Overflow hidden is put only during the animation and on the collapsed state because if it is put on the expanded state then children’s border will be cut (hover / focus)
              */