@crowdfarming/oliva-ds 1.33.0-rc.2 → 1.33.0

package/fesm2022/crowdfarming-oliva-ds.mjs

@@ -1,14 +1,13 @@
 import * as i0 from '@angular/core';
-import { Input, Component, EventEmitter, Output, input, computed, output, signal, effect, forwardRef, inject, ElementRef, ViewContainerRef, ApplicationRef, PLATFORM_ID, DestroyRef, TemplateRef, ContentChild, ViewChild, HostListener, Directive, ViewEncapsulation, viewChild, Injector, createComponent, Injectable, model, HostBinding } from '@angular/core';
+import { Input, Component, EventEmitter, Output, input, computed, output, signal, effect, forwardRef, inject, ElementRef, PLATFORM_ID, HostListener, ViewChild, Directive, viewChild, ApplicationRef, Injector, createComponent, Injectable, model, HostBinding } from '@angular/core';
 import * as i1$1 from '@angular/common';
-import { CommonModule, NgClass, isPlatformBrowser, NgStyle, NgTemplateOutlet } from '@angular/common';
+import { CommonModule, NgClass, isPlatformBrowser, NgStyle } from '@angular/common';
 import * as i1 from '@angular/platform-browser';
 import * as i1$2 from '@angular/router';
-import { RouterModule, Router, NavigationStart, RouterLink } from '@angular/router';
+import { RouterModule, RouterLink } from '@angular/router';
 import * as i1$3 from '@angular/forms';
 import { NG_VALUE_ACCESSOR, ReactiveFormsModule, FormControl, FormsModule } from '@angular/forms';
-import { TemplatePortal, DomPortalOutlet, PortalModule, ComponentPortal } from '@angular/cdk/portal';
-import { FocusTrapFactory } from '@angular/cdk/a11y';
+import { ComponentPortal } from '@angular/cdk/portal';
 import * as i1$4 from '@angular/cdk/overlay';
 
 // Auto-generated icons from Figma
@@ -3135,39 +3134,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImpor
         }] });
 
 class OverlayComponent {
-    static MOBILE_BREAKPOINT = 768;
-    static DROPDOWN_HEIGHT = 320;
-    static DROPDOWN_GAP = 2;
-    static VIEWPORT_MARGIN = 16;
-    static ANIMATION_DURATION = 20;
-    static DEFAULT_MENU_WIDTH = 200;
+    // Inputs
     position = input('right');
     disabled = input(false);
-    width = input(`${OverlayComponent.DEFAULT_MENU_WIDTH}px`);
+    width = input('200px');
+    // Outputs
     opened = output();
     closed = output();
+    // Private signals
     _isOpen = signal(false);
     _isClosing = signal(false);
     _isMobile = signal(false);
-    _menuPosition = signal({
-        top: 0,
-        left: 0,
-        width: OverlayComponent.DEFAULT_MENU_WIDTH,
-    });
+    // Public computed signals
     isOpen = this._isOpen.asReadonly();
     isClosing = this._isClosing.asReadonly();
-    getMenuClasses = computed(() => ['c-overlay__menu', `c-overlay__menu--${this.position()}`].join(' '));
-    getMenuStyles = computed(() => {
-        if (this._isMobile()) {
-            return {};
-        }
-        const pos = this._menuPosition();
-        return {
-            width: `${pos.width}px`,
-            top: `${pos.top}px`,
-            left: `${pos.left}px`,
-        };
-    });
+    // Computed class methods
     getClasses = computed(() => {
         const classes = ['c-overlay'];
         if (this.isOpen()) {
@@ -3182,540 +3163,105 @@ class OverlayComponent {
         }
         return classes.join(' ');
     });
+    getMenuClasses = computed(() => {
+        const classes = ['c-overlay__menu'];
+        classes.push(`c-overlay__menu--${this.position()}`);
+        return classes.join(' ');
+    });
+    getMenuStyles = computed(() => {
+        return {
+            width: this._isMobile() ? '100%' : this.width(),
+        };
+    });
+    // Element references
     elementRef = inject(ElementRef);
-    viewContainerRef = inject(ViewContainerRef);
-    applicationRef = inject(ApplicationRef);
-    platformId = inject(PLATFORM_ID);
-    destroyRef = inject(DestroyRef);
-    focusTrapFactory = inject(FocusTrapFactory);
-    router = inject(Router);
-    // Portal and container management
     triggerButtonRef;
-    portal;
-    portalOutlet;
-    portalContainer;
-    boundPortalClickHandler;
-    // Focus and accessibility management
-    focusTrap;
-    previouslyFocusedElement;
-    triggerKeydownHandler;
-    inertElements = [];
-    escapeKeyHandler;
-    // Scroll and navigation management
-    originalBodyOverflow;
-    navigationSub;
-    // Helper to get the correct document context (important for Storybook)
-    getDocument() {
-        return this.elementRef.nativeElement.ownerDocument || document;
-    }
-    menuTemplate;
-    contentTemplate;
-    footerTemplate;
+    platformId = inject(PLATFORM_ID);
+    overlayMenu;
     constructor() {
+        // Initialize mobile detection
         this.updateMobileDetection();
+        // Only add resize listener if running in browser (not in SSR)
         if (isPlatformBrowser(this.platformId)) {
             window.addEventListener('resize', () => this.updateMobileDetection());
         }
+        // Emit events when overlay state changes
         effect(() => {
-            if (this.isOpen())
+            if (this.isOpen()) {
                 this.opened.emit();
-            else if (!this.isOpen() && !this.isClosing())
+            }
+            else if (!this.isOpen() && !this.isClosing()) {
                 this.closed.emit();
-        });
-        this.destroyRef.onDestroy(() => {
-            if (this.isOpen()) {
-                this.unblockBodyScroll();
             }
-            this.destroyFocusTrap();
-            this.cleanupTriggerListener();
-            this.navigationSub?.unsubscribe();
-            this.removeEscapeKeyListener();
         });
     }
-    // ================== MOBILE DETECTION ==================
+    // Mobile detection method
     updateMobileDetection() {
-        this._isMobile.set(isPlatformBrowser(this.platformId)
-            ? window.innerWidth <= OverlayComponent.MOBILE_BREAKPOINT
-            : false);
+        // Check if running in browser (not in SSR)
+        if (isPlatformBrowser(this.platformId)) {
+            this._isMobile.set(window.innerWidth <= 768);
+        }
+        else {
+            // Default to desktop view during SSR
+            this._isMobile.set(false);
+        }
     }
-    // ================== TRIGGER MANAGEMENT ==================
+    // Public methods for trigger directive
     setTriggerButton(element) {
         this.triggerButtonRef = element;
-        this.triggerKeydownHandler = (event) => {
-            if (event.key === 'Enter' || event.key === ' ') {
-                event.preventDefault();
-                this.toggleOverlay();
-            }
-        };
-        element.addEventListener('keydown', this.triggerKeydownHandler);
     }
     toggleOverlay() {
-        if (this.disabled())
+        if (this.disabled()) {
             return;
-        if (this.isOpen() && !this.isClosing())
+        }
+        if (this.isOpen() && !this.isClosing()) {
             this.closeOverlay();
-        else if (!this.isOpen() && !this.isClosing())
+        }
+        else if (!this.isOpen() && !this.isClosing()) {
             this.openOverlay();
+        }
     }
-    onBackdropClick() {
-        this.closeOverlay();
-    }
-    onEscapeKey() {
-        this.closeOverlay();
-    }
-    // ================== OVERLAY LIFECYCLE ==================
     openOverlay() {
-        this.initializeOverlayState();
-        this.prepareOverlayForOpening();
-        this.createOverlayPortal();
-        this.configureScrollBehavior();
-        this.finalizeOverlayOpening();
-        setTimeout(() => {
-            this.trapFocus();
-            this.makeOutsideElementsInert();
-            this.setupEscapeKeyListener();
-        }, 0);
-    }
-    initializeOverlayState() {
         this._isClosing.set(false);
-        this.updateMobileDetection();
-        this.previouslyFocusedElement = this.triggerButtonRef ?? this.getDocument().activeElement;
-    }
-    prepareOverlayForOpening() {
-        if (!this._isMobile()) {
-            this.calculatePosition();
-        }
-    }
-    createOverlayPortal() {
-        this.createPortal();
-    }
-    configureScrollBehavior() {
-        // Block scroll for both mobile and desktop
-        this.blockBodyScroll();
-    }
-    finalizeOverlayOpening() {
         this._isOpen.set(true);
-        this.addResizeListener();
-        this.listenToNavigation();
     }
     closeOverlay() {
-        this.initializeOverlayClosing();
-        this.cleanupOverlayResources();
-        this.restoreScrollBehavior();
-        this.destroyOverlayComponents();
-        // Restore focus AFTER destroying DOM to avoid interference
-        requestAnimationFrame(() => {
-            this.restoreFocusToTrigger();
-        });
-        this.scheduleOverlayFinalization();
-    }
-    initializeOverlayClosing() {
         this._isClosing.set(true);
-    }
-    cleanupOverlayResources() {
-        this.removeResizeListener();
-        this.unsubscribeFromNavigation();
-    }
-    unsubscribeFromNavigation() {
-        this.navigationSub?.unsubscribe();
-        this.navigationSub = undefined;
-    }
-    restoreScrollBehavior() {
-        // Unblock scroll for both mobile and desktop
-        this.unblockBodyScroll();
-    }
-    destroyOverlayComponents() {
-        this.destroyFocusTrap();
-        this.destroyPortal();
-        // Ensure elements are restored after destroying components
-        this.restoreOutsideElements();
-    }
-    scheduleOverlayFinalization() {
         setTimeout(() => {
-            this.finalizeOverlayClosing();
-        }, OverlayComponent.ANIMATION_DURATION);
-    }
-    finalizeOverlayClosing() {
-        this._isOpen.set(false);
-        this._isClosing.set(false);
+            this._isOpen.set(false);
+            this._isClosing.set(false);
+        }, 20); // Match animation duration
     }
-    // ================== EVENT HANDLING ==================
-    onPortalClick = (event) => {
-        if (!this.isOpen() || this.isClosing())
-            return;
-        const target = event.target;
-        const onTrigger = this.triggerButtonRef?.contains(target);
-        if (onTrigger) {
-            return;
-        }
-        const menuEl = this.portalContainer?.querySelector('.c-overlay__menu');
-        const insideMenu = menuEl?.contains(target);
-        if (insideMenu) {
-            return;
-        }
+    // Backdrop and keyboard handlers
+    onBackdropClick() {
         this.closeOverlay();
-    };
-    // ================== POSITIONING ==================
-    calculatePosition() {
-        if (!this.triggerButtonRef)
-            return;
-        const rect = this.triggerButtonRef.getBoundingClientRect();
-        const menuWidth = this.parseWidth(rect.width);
-        const menuHeight = OverlayComponent.DROPDOWN_HEIGHT;
-        const viewportPosition = this.calculateViewportPosition(rect, menuWidth, menuHeight);
-        const finalPosition = this.convertToFinalCoordinates(viewportPosition, menuWidth, menuHeight);
-        this._menuPosition.set(finalPosition);
-    }
-    calculateViewportPosition(rect, menuWidth, menuHeight) {
-        const gap = OverlayComponent.DROPDOWN_GAP;
-        const viewportTop = this.calculateVerticalPosition(rect, menuHeight, gap);
-        const viewportLeft = this.calculateHorizontalPosition(rect, menuWidth);
-        return { top: viewportTop, left: viewportLeft };
-    }
-    calculateVerticalPosition(rect, menuHeight, gap) {
-        let top = rect.bottom + gap;
-        if (window.innerHeight - rect.bottom < menuHeight &&
-            rect.top > rect.bottom) {
-            top = rect.top - menuHeight - gap;
-        }
-        return top;
-    }
-    calculateHorizontalPosition(rect, menuWidth) {
-        const position = this.position();
-        switch (position) {
-            case 'right':
-                return rect.right - menuWidth;
-            case 'center': {
-                const triggerCenter = rect.left + rect.width / 2;
-                return triggerCenter;
-            }
-            case 'left':
-            default:
-                return rect.left;
-        }
-    }
-    convertToFinalCoordinates(viewportPosition, menuWidth, menuHeight) {
-        const scrollTop = window.pageYOffset || this.getDocument().documentElement.scrollTop;
-        const scrollLeft = window.pageXOffset || this.getDocument().documentElement.scrollLeft;
-        let top;
-        let left;
-        if (this._isMobile()) {
-            const clampedPosition = this.clampToViewport(viewportPosition, menuWidth, menuHeight);
-            top = clampedPosition.top;
-            left = clampedPosition.left;
-        }
-        else {
-            const clampedPosition = this.clampToViewport(viewportPosition, menuWidth, menuHeight);
-            top = clampedPosition.top + scrollTop;
-            left = clampedPosition.left + scrollLeft;
-        }
-        return { top, left, width: menuWidth };
-    }
-    clampToViewport(position, menuWidth, menuHeight) {
-        const clampedTop = Math.max(OverlayComponent.VIEWPORT_MARGIN, Math.min(position.top, window.innerHeight - menuHeight - OverlayComponent.VIEWPORT_MARGIN));
-        const clampedLeft = Math.max(OverlayComponent.VIEWPORT_MARGIN, Math.min(position.left, window.innerWidth - menuWidth - OverlayComponent.VIEWPORT_MARGIN));
-        return { top: clampedTop, left: clampedLeft };
-    }
-    parseWidth(triggerWidth) {
-        if (this.width() === 'stretch')
-            return triggerWidth;
-        const w = parseFloat(this.width());
-        return isNaN(w) ? OverlayComponent.DEFAULT_MENU_WIDTH : w;
-    }
-    // ================== RESIZE HANDLING ==================
-    addResizeListener() {
-        if (!isPlatformBrowser(this.platformId))
-            return;
-        window.addEventListener('resize', this.resizeHandler);
-    }
-    removeResizeListener() {
-        if (!isPlatformBrowser(this.platformId))
-            return;
-        window.removeEventListener('resize', this.resizeHandler);
-    }
-    resizeHandler = () => {
-        if (!this.isOpen())
-            return;
-        const wasMobile = this._isMobile();
-        this.updateMobileDetection();
-        const isNowMobile = this._isMobile();
-        if (wasMobile !== isNowMobile) {
-            this.destroyPortal();
-            this.createPortal();
-            if (!isNowMobile && this.triggerButtonRef) {
-                this.calculatePosition();
-            }
-        }
-        else if (!isNowMobile && this.triggerButtonRef) {
-            this.calculatePosition();
-        }
-    };
-    // ================== PORTAL MANAGEMENT ==================
-    createPortal() {
-        if (!this.menuTemplate || !this.contentTemplate)
-            return;
-        this.createPortalTemplate();
-        this.createPortalContainer();
-        this.setupPortalEventListeners();
-        this.createPortalOutlet();
-        this.attachPortalContent();
-        // Focus trap will be set up in openOverlay()
-        this.applyMenuPositioning();
-    }
-    createPortalTemplate() {
-        this.portal = new TemplatePortal(this.menuTemplate, this.viewContainerRef);
-    }
-    createPortalContainer() {
-        this.portalContainer = this.getDocument().createElement('div');
-        this.configurePortalContainerStyles();
-        this.getDocument().body.appendChild(this.portalContainer);
-    }
-    configurePortalContainerStyles() {
-        if (!this.portalContainer)
-            return;
-        this.portalContainer.style.position = this._isMobile() ? 'fixed' : 'absolute';
-        this.portalContainer.style.top = '0';
-        this.portalContainer.style.left = '0';
-        this.portalContainer.style.width = '100%';
-        this.portalContainer.style.height = '100%';
-        this.portalContainer.style.zIndex = '1000';
-        this.portalContainer.style.pointerEvents = 'auto';
-    }
-    setupPortalEventListeners() {
-        if (!this.portalContainer)
-            return;
-        this.boundPortalClickHandler = this.onPortalClick.bind(this);
-        this.portalContainer.addEventListener('click', this.boundPortalClickHandler);
     }
-    createPortalOutlet() {
-        if (!this.portalContainer)
-            return;
-        this.portalOutlet = new DomPortalOutlet(this.portalContainer, null, this.applicationRef, this.viewContainerRef.injector);
-    }
-    attachPortalContent() {
-        if (!this.portalOutlet || !this.portal)
-            return;
-        this.portalOutlet.attach(this.portal);
-    }
-    applyMenuPositioning() {
-        const menuEl = this.portalContainer?.querySelector('.c-overlay__menu');
-        if (!menuEl)
-            return;
-        this.configureMenuElement(menuEl);
-        this.applyPositioningStyles(menuEl);
-    }
-    configureMenuElement(menuEl) {
-        menuEl.style.pointerEvents = 'auto';
-    }
-    applyPositioningStyles(menuEl) {
-        if (this._isMobile()) {
-            this.applyMobilePositioning(menuEl);
-        }
-        else {
-            this.applyDesktopPositioning(menuEl);
-        }
-    }
-    applyMobilePositioning(menuEl) {
-        menuEl.style.position = '';
-        menuEl.style.top = '';
-        menuEl.style.left = '';
-        menuEl.style.width = '';
-    }
-    applyDesktopPositioning(menuEl) {
-        const pos = this._menuPosition();
-        menuEl.style.position = 'absolute';
-        menuEl.style.top = `${pos.top}px`;
-        menuEl.style.left = `${pos.left}px`;
-        menuEl.style.width = `${pos.width}px`;
-    }
-    destroyPortal() {
-        if (this.portalOutlet) {
-            this.portalOutlet.detach();
-            this.portalOutlet.dispose();
-            this.portalOutlet = undefined;
-            this.portal = undefined;
-        }
-        if (this.portalContainer && this.portalContainer.parentNode) {
-            if (this.boundPortalClickHandler) {
-                this.portalContainer.removeEventListener('click', this.boundPortalClickHandler);
-                this.boundPortalClickHandler = undefined;
-            }
-            this.portalContainer.parentNode.removeChild(this.portalContainer);
-        }
-        this.portalContainer = undefined;
-    }
-    // ================== SCROLL MANAGEMENT ==================
-    blockBodyScroll() {
-        if (!isPlatformBrowser(this.platformId))
-            return;
-        this.originalBodyOverflow = this.getDocument().body.style.overflow;
-        this.getDocument().body.style.overflow = 'hidden';
-        this.getDocument().body.style.position = 'fixed';
-        this.getDocument().body.style.width = '100%';
-        this.getDocument().body.style.top = `-${window.pageYOffset}px`;
-        this.getDocument().documentElement.style.overflow = 'hidden';
-    }
-    unblockBodyScroll() {
-        if (!isPlatformBrowser(this.platformId))
-            return;
-        const scrollY = this.getDocument().body.style.top;
-        if (this.originalBodyOverflow !== undefined) {
-            this.getDocument().body.style.overflow = this.originalBodyOverflow;
-        }
-        else {
-            this.getDocument().body.style.overflow = '';
-        }
-        this.getDocument().body.style.position = '';
-        this.getDocument().body.style.width = '';
-        this.getDocument().body.style.top = '';
-        this.getDocument().documentElement.style.overflow = '';
-        if (scrollY) {
-            window.scrollTo(0, parseInt(scrollY || '0') * -1);
-        }
-        this.originalBodyOverflow = undefined;
-    }
-    // ================== FOCUS MANAGEMENT ==================
-    trapFocus() {
-        if (!this.portalContainer) {
-            return;
-        }
-        // Search for menu element in entire document, not just within portalContainer
-        const doc = this.getDocument();
-        const menuEl = doc.querySelector('.c-overlay__menu');
-        if (!menuEl) {
-            setTimeout(() => this.trapFocus(), 10);
-            return;
-        }
-        // CDK FocusTrap
-        this.focusTrap = this.focusTrapFactory.create(menuEl);
-        this.focusTrap.focusInitialElement();
+    onEscapeKey() {
+        this.closeOverlay();
     }
-    // ================== ESCAPE KEY HANDLING ==================
-    setupEscapeKeyListener() {
-        if (!isPlatformBrowser(this.platformId))
-            return;
-        this.escapeKeyHandler = (event) => {
-            if (event.key === 'Escape' && this.isOpen() && !this.isClosing()) {
-                event.preventDefault();
+    // Host listeners
+    onClickOutside(event) {
+        if (this.isOpen() && !this.isClosing()) {
+            const clickedElement = event.target;
+            const isClickInsideOverlay = this.elementRef.nativeElement.contains(clickedElement);
+            const isClickOnTrigger = this.triggerButtonRef?.contains(clickedElement);
+            if (!isClickInsideOverlay && !isClickOnTrigger) {
                 this.closeOverlay();
             }
-        };
-        this.getDocument().addEventListener('keydown', this.escapeKeyHandler);
-    }
-    removeEscapeKeyListener() {
-        if (!isPlatformBrowser(this.platformId))
-            return;
-        if (this.escapeKeyHandler) {
-            this.getDocument().removeEventListener('keydown', this.escapeKeyHandler);
-            this.escapeKeyHandler = undefined;
-        }
-    }
-    // ================== FOCUS RESTORATION ==================
-    restoreFocusToTrigger() {
-        const doc = this.getDocument();
-        // Prefer to return focus to trigger button
-        if (this.triggerButtonRef && doc.contains(this.triggerButtonRef)) {
-            const focusableElement = this.findFocusableButton(this.triggerButtonRef);
-            if (focusableElement) {
-                focusableElement.focus({ preventScroll: true });
-                return;
-            }
-        }
-        // Si no hay trigger, devolvemos el foco al elemento que estaba activo antes
-        if (this.previouslyFocusedElement && doc.contains(this.previouslyFocusedElement)) {
-            const focusableElement = this.findFocusableButton(this.previouslyFocusedElement);
-            if (focusableElement) {
-                focusableElement.focus({ preventScroll: true });
-                return;
-            }
         }
-        // Safety fallback
-        doc.body.focus();
-    }
-    findFocusableButton(element) {
-        // If element is already a focusable button, return it
-        if (element.tagName === 'BUTTON' && !element.hasAttribute('disabled')) {
-            return element;
-        }
-        // If it's a lib-button or custom component, search for internal button
-        const button = element.querySelector('button:not([disabled])');
-        if (button) {
-            return button;
-        }
-        // Search for any focusable element inside
-        const focusableSelectors = [
-            'button:not([disabled])',
-            'input:not([disabled])',
-            'select:not([disabled])',
-            'textarea:not([disabled])',
-            'a[href]',
-            '[tabindex]:not([tabindex="-1"])'
-        ];
-        const focusable = element.querySelector(focusableSelectors.join(', '));
-        return focusable;
-    }
-    releaseFocusTrap() {
-        if (this.focusTrap) {
-            this.focusTrap.destroy();
-            this.focusTrap = undefined;
-        }
-        this.removeEscapeKeyListener();
-    }
-    // ================== INERT OUTSIDE ELEMENTS ==================
-    makeOutsideElementsInert() {
-        if (!isPlatformBrowser(this.platformId))
-            return;
-        this.inertElements = [];
-        const doc = this.getDocument();
-        const bodyChildren = Array.from(doc.body.children);
-        bodyChildren.forEach(el => {
-            if (el !== this.portalContainer && !el.hasAttribute('aria-hidden')) {
-                el.inert = true; // Hace que no sean focusables ni interactuables
-                this.inertElements.push(el);
-            }
-        });
-    }
-    restoreOutsideElements() {
-        if (!isPlatformBrowser(this.platformId))
-            return;
-        this.inertElements.forEach(el => {
-            el.inert = false;
-        });
-        this.inertElements = [];
-    }
-    destroyFocusTrap() {
-        this.releaseFocusTrap();
-        this.restoreOutsideElements();
-    }
-    cleanupTriggerListener() {
-        if (this.triggerButtonRef && this.triggerKeydownHandler) {
-            this.triggerButtonRef.removeEventListener('keydown', this.triggerKeydownHandler);
-            this.triggerKeydownHandler = undefined;
-        }
-    }
-    listenToNavigation() {
-        this.navigationSub?.unsubscribe(); // Clean up previous subscription
-        this.navigationSub = this.router.events.subscribe(event => {
-            if (event instanceof NavigationStart && this.isOpen()) {
-                this.closeOverlay();
-            }
-        });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: OverlayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", type: OverlayComponent, isStandalone: true, selector: "lib-overlay", inputs: { position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { opened: "opened", closed: "closed" }, queries: [{ propertyName: "contentTemplate", first: true, predicate: TemplateRef, descendants: true, static: true }, { propertyName: "footerTemplate", first: true, predicate: ["footer"], descendants: true, static: true }], viewQueries: [{ propertyName: "menuTemplate", first: true, predicate: ["menuTemplate"], descendants: true, static: true }], ngImport: i0, template: "\n\n\n<!-- Portal template for both desktop and mobile -->\n<ng-template #menuTemplate>\n  <div class=\"c-overlay\" [ngClass]=\"getClasses()\">\n    <!-- Backdrop for mobile -->\n    @if (_isMobile() && (isOpen() || isClosing())) {\n    <div\n      class=\"c-overlay__backdrop\"\n      [ngClass]=\"getBackdropClasses()\"\n      (click)=\"onBackdropClick()\"\n      (keydown.escape)=\"onEscapeKey()\"\n      tabindex=\"0\"\n      role=\"button\"\n      aria-label=\"Close overlay\"\n    ></div>\n    }\n\n    <!-- Overlay Menu -->\n    @if (isOpen() || isClosing()) {\n    <div\n      class=\"c-overlay__menu\"\n      [ngClass]=\"getMenuClasses()\"\n      [ngStyle]=\"getMenuStyles()\"\n      #overlayMenu\n    >\n      <div class=\"c-overlay__content\">\n        <!-- Main content projection -->\n        <ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container>\n      </div>\n      \n      <!-- Footer slot for mobile action buttons -->\n      @if (_isMobile() && footerTemplate) {\n      <div class=\"c-overlay__footer\">\n        <ng-container *ngTemplateOutlet=\"footerTemplate\"></ng-container>\n      </div>\n      }\n    </div>\n    }\n  </div>\n</ng-template>", styles: [".c-overlay{position:relative}.c-overlay__backdrop{position:fixed;inset:0;z-index:999;background-color:var(--color-effect-overlay);opacity:0;transition:opacity .2s ease-in-out;display:none}.c-overlay__backdrop--open{opacity:1}.c-overlay__menu{position:absolute;margin-top:2px;z-index:10000;background-color:var(--color-core-background-surface-raised);border:var(--size-border-width-sm) solid var(--color-core-border-soft);border-radius:var(--size-textfield-border-radius);box-shadow:var(--elevation-raised);max-height:320px;min-width:200px;overflow:hidden;display:flex;flex-direction:column;opacity:0;transform:scale(.95);animation:overlay-enter .2s ease-out forwards;transform-origin:top center}.c-overlay__menu--fixed{position:fixed;min-width:0}.c-overlay__menu--right{left:0;right:auto}.c-overlay__menu--left{left:auto;right:0}.c-overlay__menu--center{left:50%;right:auto;transform:translate(-50%) scale(.95);animation:overlay-enter-center .2s ease-out forwards}.c-overlay__content{flex:1;overflow-y:auto}.c-overlay__footer{display:none}@keyframes overlay-enter{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}@keyframes overlay-enter-center{0%{opacity:0;transform:translate(-50%) scale(.95)}to{opacity:1;transform:translate(-50%) scale(1)}}@keyframes overlay-exit{0%{opacity:1;transform:translateY(0) scale(1)}to{opacity:0;transform:scale(.95)}}@media (max-width: 768px){.c-overlay__backdrop{display:block;z-index:999}.c-overlay__menu{position:fixed;bottom:0;left:0;right:0;width:100%;max-width:none;max-height:100vh;margin-top:0;border-radius:0;animation:none;z-index:1001;opacity:1;display:flex;flex-direction:column}.c-overlay__content{flex:1;overflow-y:auto;overflow-x:hidden;max-height:100vh;width:100%;min-width:0}.c-overlay__content>*{max-width:100%!important;width:100%!important;box-sizing:border-box!important;word-wrap:break-word!important;overflow-wrap:break-word!important;overflow-x:hidden!important}.c-overlay__content *{max-width:100%;box-sizing:border-box;word-wrap:break-word;overflow-wrap:break-word}.c-overlay--open .c-overlay__menu{transform:translateY(0)}}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: PortalModule }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", type: OverlayComponent, isStandalone: true, selector: "lib-overlay", inputs: { position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { opened: "opened", closed: "closed" }, host: { listeners: { "document:click": "onClickOutside($event)" } }, viewQueries: [{ propertyName: "overlayMenu", first: true, predicate: ["overlayMenu"], descendants: true }], ngImport: i0, template: "<div class=\"c-overlay\" [ngClass]=\"getClasses()\">\n  <!-- Backdrop for mobile -->\n  @if (isOpen() || isClosing()) {\n  <div\n    class=\"c-overlay__backdrop\"\n    [ngClass]=\"getBackdropClasses()\"\n    (click)=\"onBackdropClick()\"\n    (keydown.escape)=\"onEscapeKey()\"\n    tabindex=\"0\"\n    role=\"button\"\n    aria-label=\"Close overlay\"\n  ></div>\n  }\n\n  <!-- Overlay Menu -->\n  @if (isOpen() || isClosing()) {\n  <div\n    class=\"c-overlay__menu\"\n    [ngClass]=\"getMenuClasses()\"\n    [ngStyle]=\"getMenuStyles()\"\n    #overlayMenu\n  >\n    <div class=\"c-overlay__content\">\n      <!-- Main content projection -->\n      <ng-content></ng-content>\n    </div>\n    \n    <!-- Footer slot for mobile action buttons -->\n    <div class=\"c-overlay__footer\">\n      <ng-content select=\"[slot=footer]\"></ng-content>\n    </div>\n  </div>\n  }\n</div>", styles: [".c-overlay{position:relative}.c-overlay__backdrop{position:fixed;inset:0;z-index:999;background-color:var(--color-effect-overlay);opacity:0;transition:opacity .2s ease-in-out;display:none}.c-overlay__backdrop--open{opacity:1}.c-overlay__menu{position:absolute;margin-top:2px;z-index:1000;background-color:var(--color-core-background-surface-raised);border:var(--size-border-width-sm) solid var(--color-core-border-soft);border-radius:var(--size-textfield-border-radius);box-shadow:var(--elevation-raised);max-height:320px;min-width:200px;overflow:hidden;display:flex;flex-direction:column;opacity:0;transform:scale(.95);animation:overlay-enter .2s ease-out forwards;transform-origin:top center}.c-overlay__menu--right{left:0;right:auto}.c-overlay__menu--left{left:auto;right:0}.c-overlay__menu--center{left:50%;right:auto;transform:translate(-50%) scale(.95);animation:overlay-enter-center .2s ease-out forwards}.c-overlay__content{flex:1;overflow-y:auto}.c-overlay__footer{display:none;height:27px}.c-overlay__footer:not(:empty){display:flex}@keyframes overlay-enter{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}@keyframes overlay-enter-center{0%{opacity:0;transform:translate(-50%) scale(.95)}to{opacity:1;transform:translate(-50%) scale(1)}}@keyframes overlay-exit{0%{opacity:1;transform:translateY(0) scale(1)}to{opacity:0;transform:scale(.95)}}@media (max-width: 768px){.c-overlay__backdrop{display:block;z-index:999}.c-overlay__menu{position:fixed;bottom:0;left:0;right:0;width:100%;max-width:none;max-height:100vh;margin-top:0;border-radius:0;animation:none;z-index:1001;opacity:1;display:flex;flex-direction:column}.c-overlay__content{flex:1;overflow-y:auto;overflow-x:hidden;max-height:calc(100vh - 27px);width:100%;min-width:0}.c-overlay__content>*{max-width:100%!important;width:100%!important;box-sizing:border-box!important;word-wrap:break-word!important;overflow-wrap:break-word!important;overflow-x:hidden!important}.c-overlay__content *{max-width:100%;box-sizing:border-box;word-wrap:break-word;overflow-wrap:break-word}.c-overlay__footer{flex-shrink:0;padding:var(--space-container-padding-sm);background-color:var(--color-core-background-surface-raised);border-top:var(--size-border-width-sm) solid var(--color-core-border-soft);display:flex;justify-content:space-between;align-items:center;height:27px}.c-overlay__footer:empty{display:none}.c-overlay--open .c-overlay__menu{transform:translateY(0)}}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: OverlayComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-overlay', imports: [NgClass, NgStyle, NgTemplateOutlet, PortalModule], template: "\n\n\n<!-- Portal template for both desktop and mobile -->\n<ng-template #menuTemplate>\n  <div class=\"c-overlay\" [ngClass]=\"getClasses()\">\n    <!-- Backdrop for mobile -->\n    @if (_isMobile() && (isOpen() || isClosing())) {\n    <div\n      class=\"c-overlay__backdrop\"\n      [ngClass]=\"getBackdropClasses()\"\n      (click)=\"onBackdropClick()\"\n      (keydown.escape)=\"onEscapeKey()\"\n      tabindex=\"0\"\n      role=\"button\"\n      aria-label=\"Close overlay\"\n    ></div>\n    }\n\n    <!-- Overlay Menu -->\n    @if (isOpen() || isClosing()) {\n    <div\n      class=\"c-overlay__menu\"\n      [ngClass]=\"getMenuClasses()\"\n      [ngStyle]=\"getMenuStyles()\"\n      #overlayMenu\n    >\n      <div class=\"c-overlay__content\">\n        <!-- Main content projection -->\n        <ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container>\n      </div>\n      \n      <!-- Footer slot for mobile action buttons -->\n      @if (_isMobile() && footerTemplate) {\n      <div class=\"c-overlay__footer\">\n        <ng-container *ngTemplateOutlet=\"footerTemplate\"></ng-container>\n      </div>\n      }\n    </div>\n    }\n  </div>\n</ng-template>", styles: [".c-overlay{position:relative}.c-overlay__backdrop{position:fixed;inset:0;z-index:999;background-color:var(--color-effect-overlay);opacity:0;transition:opacity .2s ease-in-out;display:none}.c-overlay__backdrop--open{opacity:1}.c-overlay__menu{position:absolute;margin-top:2px;z-index:10000;background-color:var(--color-core-background-surface-raised);border:var(--size-border-width-sm) solid var(--color-core-border-soft);border-radius:var(--size-textfield-border-radius);box-shadow:var(--elevation-raised);max-height:320px;min-width:200px;overflow:hidden;display:flex;flex-direction:column;opacity:0;transform:scale(.95);animation:overlay-enter .2s ease-out forwards;transform-origin:top center}.c-overlay__menu--fixed{position:fixed;min-width:0}.c-overlay__menu--right{left:0;right:auto}.c-overlay__menu--left{left:auto;right:0}.c-overlay__menu--center{left:50%;right:auto;transform:translate(-50%) scale(.95);animation:overlay-enter-center .2s ease-out forwards}.c-overlay__content{flex:1;overflow-y:auto}.c-overlay__footer{display:none}@keyframes overlay-enter{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}@keyframes overlay-enter-center{0%{opacity:0;transform:translate(-50%) scale(.95)}to{opacity:1;transform:translate(-50%) scale(1)}}@keyframes overlay-exit{0%{opacity:1;transform:translateY(0) scale(1)}to{opacity:0;transform:scale(.95)}}@media (max-width: 768px){.c-overlay__backdrop{display:block;z-index:999}.c-overlay__menu{position:fixed;bottom:0;left:0;right:0;width:100%;max-width:none;max-height:100vh;margin-top:0;border-radius:0;animation:none;z-index:1001;opacity:1;display:flex;flex-direction:column}.c-overlay__content{flex:1;overflow-y:auto;overflow-x:hidden;max-height:100vh;width:100%;min-width:0}.c-overlay__content>*{max-width:100%!important;width:100%!important;box-sizing:border-box!important;word-wrap:break-word!important;overflow-wrap:break-word!important;overflow-x:hidden!important}.c-overlay__content *{max-width:100%;box-sizing:border-box;word-wrap:break-word;overflow-wrap:break-word}.c-overlay--open .c-overlay__menu{transform:translateY(0)}}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { menuTemplate: [{
+            args: [{ selector: 'lib-overlay', imports: [NgClass, NgStyle], template: "<div class=\"c-overlay\" [ngClass]=\"getClasses()\">\n  <!-- Backdrop for mobile -->\n  @if (isOpen() || isClosing()) {\n  <div\n    class=\"c-overlay__backdrop\"\n    [ngClass]=\"getBackdropClasses()\"\n    (click)=\"onBackdropClick()\"\n    (keydown.escape)=\"onEscapeKey()\"\n    tabindex=\"0\"\n    role=\"button\"\n    aria-label=\"Close overlay\"\n  ></div>\n  }\n\n  <!-- Overlay Menu -->\n  @if (isOpen() || isClosing()) {\n  <div\n    class=\"c-overlay__menu\"\n    [ngClass]=\"getMenuClasses()\"\n    [ngStyle]=\"getMenuStyles()\"\n    #overlayMenu\n  >\n    <div class=\"c-overlay__content\">\n      <!-- Main content projection -->\n      <ng-content></ng-content>\n    </div>\n    \n    <!-- Footer slot for mobile action buttons -->\n    <div class=\"c-overlay__footer\">\n      <ng-content select=\"[slot=footer]\"></ng-content>\n    </div>\n  </div>\n  }\n</div>", styles: [".c-overlay{position:relative}.c-overlay__backdrop{position:fixed;inset:0;z-index:999;background-color:var(--color-effect-overlay);opacity:0;transition:opacity .2s ease-in-out;display:none}.c-overlay__backdrop--open{opacity:1}.c-overlay__menu{position:absolute;margin-top:2px;z-index:1000;background-color:var(--color-core-background-surface-raised);border:var(--size-border-width-sm) solid var(--color-core-border-soft);border-radius:var(--size-textfield-border-radius);box-shadow:var(--elevation-raised);max-height:320px;min-width:200px;overflow:hidden;display:flex;flex-direction:column;opacity:0;transform:scale(.95);animation:overlay-enter .2s ease-out forwards;transform-origin:top center}.c-overlay__menu--right{left:0;right:auto}.c-overlay__menu--left{left:auto;right:0}.c-overlay__menu--center{left:50%;right:auto;transform:translate(-50%) scale(.95);animation:overlay-enter-center .2s ease-out forwards}.c-overlay__content{flex:1;overflow-y:auto}.c-overlay__footer{display:none;height:27px}.c-overlay__footer:not(:empty){display:flex}@keyframes overlay-enter{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}@keyframes overlay-enter-center{0%{opacity:0;transform:translate(-50%) scale(.95)}to{opacity:1;transform:translate(-50%) scale(1)}}@keyframes overlay-exit{0%{opacity:1;transform:translateY(0) scale(1)}to{opacity:0;transform:scale(.95)}}@media (max-width: 768px){.c-overlay__backdrop{display:block;z-index:999}.c-overlay__menu{position:fixed;bottom:0;left:0;right:0;width:100%;max-width:none;max-height:100vh;margin-top:0;border-radius:0;animation:none;z-index:1001;opacity:1;display:flex;flex-direction:column}.c-overlay__content{flex:1;overflow-y:auto;overflow-x:hidden;max-height:calc(100vh - 27px);width:100%;min-width:0}.c-overlay__content>*{max-width:100%!important;width:100%!important;box-sizing:border-box!important;word-wrap:break-word!important;overflow-wrap:break-word!important;overflow-x:hidden!important}.c-overlay__content *{max-width:100%;box-sizing:border-box;word-wrap:break-word;overflow-wrap:break-word}.c-overlay__footer{flex-shrink:0;padding:var(--space-container-padding-sm);background-color:var(--color-core-background-surface-raised);border-top:var(--size-border-width-sm) solid var(--color-core-border-soft);display:flex;justify-content:space-between;align-items:center;height:27px}.c-overlay__footer:empty{display:none}.c-overlay--open .c-overlay__menu{transform:translateY(0)}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { overlayMenu: [{
                 type: ViewChild,
-                args: ['menuTemplate', { static: true }]
-            }], contentTemplate: [{
-                type: ContentChild,
-                args: [TemplateRef, { static: true }]
-            }], footerTemplate: [{
-                type: ContentChild,
-                args: ['footer', { static: true }]
+                args: ['overlayMenu']
+            }], onClickOutside: [{
+                type: HostListener,
+                args: ['document:click', ['$event']]
             }] } });
 
 class DropdownActionComponent {
@@ -3781,11 +3327,11 @@ class DropdownActionComponent {
         this._isOverlayOpen.set(false);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: DropdownActionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", type: DropdownActionComponent, isStandalone: true, selector: "lib-dropdown-action", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { actionClicked: "actionClicked" }, viewQueries: [{ propertyName: "overlay", first: true, predicate: OverlayComponent, descendants: true }], ngImport: i0, template: "<lib-overlay\n  [position]=\"position()\"\n  [disabled]=\"disabled()\"\n  (opened)=\"onOverlayOpened()\"\n  (closed)=\"onOverlayClosed()\"\n  [width]=\"width()\"\n>\n  <ng-template>\n    <!-- Options List -->\n    <div class=\"c-dropdown-action__options\">\n      @for (group of options(); track group.label) {\n      <!-- Option Group -->\n      <div class=\"c-dropdown-action__group\">\n        <!-- Group Label -->\n        @if (group.label) {\n        <div class=\"c-dropdown-action__group-label\">\n          {{ group.label }}\n        </div>\n        }\n        <!-- Group Options -->\n        @for (option of group.options; track option.value) {\n        <!-- Action button with icon and label -->\n        <button\n          type=\"button\"\n          class=\"c-dropdown-action__option\"\n          [disabled]=\"option.disabled\"\n          (click)=\"selectAction(option)\"\n        >\n          @if (option.icon) {\n          <lib-icon\n            [name]=\"option.icon\"\n            size=\"lg\"\n            class=\"c-dropdown-action__option-icon\"\n          >\n          </lib-icon>\n          }\n\n          <span class=\"c-dropdown-action__option-label\">\n            {{ option.label }}\n          </span>\n        </button>\n        }\n      </div>\n      }\n    </div>\n  </ng-template>\n</lib-overlay>\n", styles: [".c-dropdown-action__search{padding:var(--space-container-padding-sm);border-bottom:var(--size-border-width-sm) solid var(--color-core-border-soft)}.c-dropdown-action__options{flex:1;overflow-y:auto;overflow-x:hidden;padding:8px 0}.c-dropdown-action__group-label{color:var(--color-core-content-soft);padding:var(--space-component-padding-md) var(--space-component-padding-lg);font-family:var(--typography-label-sm-strong-family),sans-serif;font-weight:var(--typography-label-sm-strong-weight);font-size:var(--typography-label-sm-strong-size);letter-spacing:var(--typography-label-sm-strong-letter-spacing)}.c-dropdown-action__option{display:flex;align-items:center;width:100%;min-height:40px;gap:var(--space-component-gap-sm);padding:var(--space-component-padding-sm) var(--space-component-padding-lg);border:none;background:var(--color-action-neutral-background-default);color:var(--color-core-content-default);font-family:var(--typography-label-sm-default-family),sans-serif;font-weight:var(--typography-label-sm-default-weight);font-size:var(--typography-label-sm-default-size);letter-spacing:var(--typography-label-sm-default-letter-spacing);text-align:left;cursor:pointer}.c-dropdown-action__option:hover:not(:disabled){background-color:var(--color-action-neutral-background-hover)}.c-dropdown-action__option:focus-visible:not(:disabled){box-shadow:var(--focus-inset);outline:none}.c-dropdown-action__option:disabled{cursor:not-allowed;opacity:.5}.c-dropdown-action__option-icon{flex-shrink:0;margin-right:12px;color:var(--color-core-content-soft)}.c-dropdown-action__option-label{flex:1;min-width:0}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "lib-icon", inputs: ["size", "icon", "name", "color"] }, { kind: "component", type: OverlayComponent, selector: "lib-overlay", inputs: ["position", "disabled", "width"], outputs: ["opened", "closed"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", type: DropdownActionComponent, isStandalone: true, selector: "lib-dropdown-action", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { actionClicked: "actionClicked" }, viewQueries: [{ propertyName: "overlay", first: true, predicate: OverlayComponent, descendants: true }], ngImport: i0, template: "<lib-overlay\n  [position]=\"position()\"\n  [disabled]=\"disabled()\"\n  (opened)=\"onOverlayOpened()\"\n  (closed)=\"onOverlayClosed()\"\n  [width]=\"width()\"\n>\n  <!-- Options List -->\n  <div class=\"c-dropdown-action__options\">\n    @for (group of options(); track group.label) {\n    <!-- Option Group -->\n    <div class=\"c-dropdown-action__group\">\n      <!-- Group Label -->\n      @if (group.label) {\n      <div class=\"c-dropdown-action__group-label\">\n        {{ group.label }}\n      </div>\n      }\n      <!-- Group Options -->\n      @for (option of group.options; track option.value) {\n      <!-- Action button with icon and label -->\n      <button\n        type=\"button\"\n        class=\"c-dropdown-action__option\"\n        [disabled]=\"option.disabled\"\n        (click)=\"selectAction(option)\"\n      >\n        @if (option.icon) {\n        <lib-icon\n          [name]=\"option.icon\"\n          size=\"lg\"\n          class=\"c-dropdown-action__option-icon\"\n        >\n        </lib-icon>\n        }\n\n        <span class=\"c-dropdown-action__option-label\">\n          {{ option.label }}\n        </span>\n      </button>\n      }\n    </div>\n    }\n  </div>\n</lib-overlay>\n", styles: [".c-dropdown-action__search{padding:var(--space-container-padding-sm);border-bottom:var(--size-border-width-sm) solid var(--color-core-border-soft)}.c-dropdown-action__options{flex:1;overflow-y:auto;overflow-x:hidden;padding:8px 0}.c-dropdown-action__group-label{color:var(--color-core-content-soft);padding:var(--space-component-padding-md) var(--space-component-padding-lg);font-family:var(--typography-label-sm-strong-family),sans-serif;font-weight:var(--typography-label-sm-strong-weight);font-size:var(--typography-label-sm-strong-size);letter-spacing:var(--typography-label-sm-strong-letter-spacing)}.c-dropdown-action__option{display:flex;align-items:center;width:100%;min-height:40px;gap:var(--space-component-gap-sm);padding:var(--space-component-padding-sm) var(--space-component-padding-lg);border:none;background:var(--color-action-neutral-background-default);color:var(--color-core-content-default);font-family:var(--typography-label-sm-default-family),sans-serif;font-weight:var(--typography-label-sm-default-weight);font-size:var(--typography-label-sm-default-size);letter-spacing:var(--typography-label-sm-default-letter-spacing);text-align:left;cursor:pointer}.c-dropdown-action__option:hover:not(:disabled){background-color:var(--color-action-neutral-background-hover)}.c-dropdown-action__option:focus-visible:not(:disabled){box-shadow:var(--focus-inset);outline:none}.c-dropdown-action__option:disabled{cursor:not-allowed;opacity:.5}.c-dropdown-action__option-icon{flex-shrink:0;margin-right:12px;color:var(--color-core-content-soft)}.c-dropdown-action__option-label{flex:1;min-width:0}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "lib-icon", inputs: ["size", "icon", "name", "color"] }, { kind: "component", type: OverlayComponent, selector: "lib-overlay", inputs: ["position", "disabled", "width"], outputs: ["opened", "closed"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: DropdownActionComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-dropdown-action', imports: [IconComponent, OverlayComponent], template: "<lib-overlay\n  [position]=\"position()\"\n  [disabled]=\"disabled()\"\n  (opened)=\"onOverlayOpened()\"\n  (closed)=\"onOverlayClosed()\"\n  [width]=\"width()\"\n>\n  <ng-template>\n    <!-- Options List -->\n    <div class=\"c-dropdown-action__options\">\n      @for (group of options(); track group.label) {\n      <!-- Option Group -->\n      <div class=\"c-dropdown-action__group\">\n        <!-- Group Label -->\n        @if (group.label) {\n        <div class=\"c-dropdown-action__group-label\">\n          {{ group.label }}\n        </div>\n        }\n        <!-- Group Options -->\n        @for (option of group.options; track option.value) {\n        <!-- Action button with icon and label -->\n        <button\n          type=\"button\"\n          class=\"c-dropdown-action__option\"\n          [disabled]=\"option.disabled\"\n          (click)=\"selectAction(option)\"\n        >\n          @if (option.icon) {\n          <lib-icon\n            [name]=\"option.icon\"\n            size=\"lg\"\n            class=\"c-dropdown-action__option-icon\"\n          >\n          </lib-icon>\n          }\n\n          <span class=\"c-dropdown-action__option-label\">\n            {{ option.label }}\n          </span>\n        </button>\n        }\n      </div>\n      }\n    </div>\n  </ng-template>\n</lib-overlay>\n", styles: [".c-dropdown-action__search{padding:var(--space-container-padding-sm);border-bottom:var(--size-border-width-sm) solid var(--color-core-border-soft)}.c-dropdown-action__options{flex:1;overflow-y:auto;overflow-x:hidden;padding:8px 0}.c-dropdown-action__group-label{color:var(--color-core-content-soft);padding:var(--space-component-padding-md) var(--space-component-padding-lg);font-family:var(--typography-label-sm-strong-family),sans-serif;font-weight:var(--typography-label-sm-strong-weight);font-size:var(--typography-label-sm-strong-size);letter-spacing:var(--typography-label-sm-strong-letter-spacing)}.c-dropdown-action__option{display:flex;align-items:center;width:100%;min-height:40px;gap:var(--space-component-gap-sm);padding:var(--space-component-padding-sm) var(--space-component-padding-lg);border:none;background:var(--color-action-neutral-background-default);color:var(--color-core-content-default);font-family:var(--typography-label-sm-default-family),sans-serif;font-weight:var(--typography-label-sm-default-weight);font-size:var(--typography-label-sm-default-size);letter-spacing:var(--typography-label-sm-default-letter-spacing);text-align:left;cursor:pointer}.c-dropdown-action__option:hover:not(:disabled){background-color:var(--color-action-neutral-background-hover)}.c-dropdown-action__option:focus-visible:not(:disabled){box-shadow:var(--focus-inset);outline:none}.c-dropdown-action__option:disabled{cursor:not-allowed;opacity:.5}.c-dropdown-action__option-icon{flex-shrink:0;margin-right:12px;color:var(--color-core-content-soft)}.c-dropdown-action__option-label{flex:1;min-width:0}\n"] }]
+            args: [{ selector: 'lib-dropdown-action', imports: [IconComponent, OverlayComponent], template: "<lib-overlay\n  [position]=\"position()\"\n  [disabled]=\"disabled()\"\n  (opened)=\"onOverlayOpened()\"\n  (closed)=\"onOverlayClosed()\"\n  [width]=\"width()\"\n>\n  <!-- Options List -->\n  <div class=\"c-dropdown-action__options\">\n    @for (group of options(); track group.label) {\n    <!-- Option Group -->\n    <div class=\"c-dropdown-action__group\">\n      <!-- Group Label -->\n      @if (group.label) {\n      <div class=\"c-dropdown-action__group-label\">\n        {{ group.label }}\n      </div>\n      }\n      <!-- Group Options -->\n      @for (option of group.options; track option.value) {\n      <!-- Action button with icon and label -->\n      <button\n        type=\"button\"\n        class=\"c-dropdown-action__option\"\n        [disabled]=\"option.disabled\"\n        (click)=\"selectAction(option)\"\n      >\n        @if (option.icon) {\n        <lib-icon\n          [name]=\"option.icon\"\n          size=\"lg\"\n          class=\"c-dropdown-action__option-icon\"\n        >\n        </lib-icon>\n        }\n\n        <span class=\"c-dropdown-action__option-label\">\n          {{ option.label }}\n        </span>\n      </button>\n      }\n    </div>\n    }\n  </div>\n</lib-overlay>\n", styles: [".c-dropdown-action__search{padding:var(--space-container-padding-sm);border-bottom:var(--size-border-width-sm) solid var(--color-core-border-soft)}.c-dropdown-action__options{flex:1;overflow-y:auto;overflow-x:hidden;padding:8px 0}.c-dropdown-action__group-label{color:var(--color-core-content-soft);padding:var(--space-component-padding-md) var(--space-component-padding-lg);font-family:var(--typography-label-sm-strong-family),sans-serif;font-weight:var(--typography-label-sm-strong-weight);font-size:var(--typography-label-sm-strong-size);letter-spacing:var(--typography-label-sm-strong-letter-spacing)}.c-dropdown-action__option{display:flex;align-items:center;width:100%;min-height:40px;gap:var(--space-component-gap-sm);padding:var(--space-component-padding-sm) var(--space-component-padding-lg);border:none;background:var(--color-action-neutral-background-default);color:var(--color-core-content-default);font-family:var(--typography-label-sm-default-family),sans-serif;font-weight:var(--typography-label-sm-default-weight);font-size:var(--typography-label-sm-default-size);letter-spacing:var(--typography-label-sm-default-letter-spacing);text-align:left;cursor:pointer}.c-dropdown-action__option:hover:not(:disabled){background-color:var(--color-action-neutral-background-hover)}.c-dropdown-action__option:focus-visible:not(:disabled){box-shadow:var(--focus-inset);outline:none}.c-dropdown-action__option:disabled{cursor:not-allowed;opacity:.5}.c-dropdown-action__option-icon{flex-shrink:0;margin-right:12px;color:var(--color-core-content-soft)}.c-dropdown-action__option-label{flex:1;min-width:0}\n"] }]
         }], ctorParameters: () => [], propDecorators: { overlay: [{
                 type: ViewChild,
                 args: [OverlayComponent]
@@ -4340,19 +3886,18 @@ class DropdownSelectComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: DropdownSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", type: DropdownSelectComponent, isStandalone: true, selector: "lib-dropdown-select", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, selectedValues: { classPropertyName: "selectedValues", publicName: "selectedValues", isSignal: true, isRequired: false, transformFunction: null }, searchBarEnabled: { classPropertyName: "searchBarEnabled", publicName: "searchBarEnabled", isSignal: true, isRequired: false, transformFunction: null }, searchPlaceholder: { classPropertyName: "searchPlaceholder", publicName: "searchPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, cancelButtonText: { classPropertyName: "cancelButtonText", publicName: "cancelButtonText", isSignal: true, isRequired: false, transformFunction: null }, acceptButtonText: { classPropertyName: "acceptButtonText", publicName: "acceptButtonText", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { optionSelected: "optionSelected", optionDeselected: "optionDeselected", searchChanged: "searchChanged", valueChange: "valueChange", cancelClicked: "cancelClicked", acceptClicked: "acceptClicked" }, viewQueries: [{ propertyName: "overlay", first: true, predicate: OverlayComponent, descendants: true }], ngImport: i0, template: "<lib-overlay\n  [position]=\"position()\"\n  [disabled]=\"disabled()\"\n  (opened)=\"onOverlayOpened()\"\n  (closed)=\"onOverlayClosed()\"\n  [width]=\"width()\"\n>\n  <ng-template>\n    <!-- Search Input (if enabled and not multiselect) -->\n    @if (showSearchBar()) {\n    <div class=\"c-dropdown-select__search\">\n      <lib-input-search\n        [placeholder]=\"searchPlaceholder()\"\n        [formControl]=\"searchControl\"\n        size=\"lg\"\n        [fullWidth]=\"true\"\n      ></lib-input-search>\n    </div>\n    }\n\n    <!-- Options List -->\n    <div class=\"c-dropdown-select__options\" [ngClass]=\"{ 'c-dropdown-select__options--with-mobile-actions': showMobileActions() }\">\n      @for (group of filteredOptions(); track group.label) {\n      <!-- Option Group -->\n      <div class=\"c-dropdown-select__group\">\n        <!-- Group Label -->\n        @if (group.label) {\n        <div class=\"c-dropdown-select__group-label\">\n          {{ group.label }}\n        </div>\n        }\n        <!-- Group Options -->\n        @for (option of group.options; track option.value) { @if (isMultiSelect())\n        {\n        <!-- For multiselect: use full checkbox component with label -->\n        <div\n          class=\"c-dropdown-select__option c-dropdown-select__option--multiselect\"\n        >\n          <lib-checkbox\n            [label]=\"option.label\"\n            [name]=\"'option-' + option.value\"\n            [value]=\"option.value\"\n            [ariaLabel]=\"'Select ' + option.label\"\n            [state]=\"isSelected(option) ? 'checked' : 'unchecked'\"\n            [disabled]=\"option.disabled || false\"\n            (changed)=\"onCheckboxChange(option, $event.checked)\"\n          ></lib-checkbox>\n        </div>\n        } @else {\n        <!-- For single select: use button with icon and label -->\n        <button\n          type=\"button\"\n          class=\"c-dropdown-select__option\"\n          [class.c-dropdown-select__option--selected]=\"isSelected(option)\"\n          [disabled]=\"option.disabled\"\n          (click)=\"selectOption(option)\"\n        >\n          @if (option.icon) {\n          <lib-icon\n            [name]=\"option.icon\"\n            size=\"lg\"\n            class=\"c-dropdown-select__option-icon\"\n          >\n          </lib-icon>\n          }\n\n          <span class=\"c-dropdown-select__option-label\">\n            {{ option.label }}\n          </span>\n\n          <!-- Check icon for selected option in single select -->\n          @if (isSelected(option)) {\n          <lib-icon\n            name=\"checkcircle-fill\"\n            size=\"lg\"\n            color=\"action-primary-selected-background-default\"\n          >\n          </lib-icon>\n          }\n        </button>\n        } }\n      </div>\n      }\n    </div>\n\n    <!-- Mobile Action Buttons in footer slot -->\n    @if (showMobileActions()) {\n    <div class=\"c-dropdown-select__mobile-actions\">\n      <lib-link-action\n        [text]=\"cancelButtonText()\"\n        variant=\"neutral\"\n        size=\"md\"\n        weight=\"bold\"\n        (clicked)=\"onCancelClick()\"\n      ></lib-link-action>\n      <lib-link-action\n        [text]=\"acceptButtonText()\"\n        variant=\"primary\"\n        size=\"md\"\n        weight=\"bold\"\n        (clicked)=\"onAcceptClick()\"\n      ></lib-link-action>\n    </div>\n    }\n  </ng-template>\n</lib-overlay>\n", styles: [".c-dropdown-select__search{padding:var(--space-container-padding-sm);border-bottom:var(--size-border-width-sm) solid var(--color-core-border-soft)}.c-dropdown-select__options{flex:1;overflow-y:auto;overflow-x:hidden;padding:8px 0}.c-dropdown-select__group-label{color:var(--color-core-content-soft);padding:var(--space-component-padding-md) var(--space-component-padding-lg);font-family:var(--typography-label-sm-strong-family),sans-serif;font-weight:var(--typography-label-sm-strong-weight);font-size:var(--typography-label-sm-strong-size);letter-spacing:var(--typography-label-sm-strong-letter-spacing)}.c-dropdown-select__option{display:flex;align-items:center;width:100%;min-height:40px;gap:var(--space-component-gap-sm);padding:var(--space-component-padding-sm) var(--space-component-padding-lg);border:none;background:var(--color-action-neutral-background-default);color:var(--color-core-content-default);font-family:var(--typography-label-sm-default-family),sans-serif;font-weight:var(--typography-label-sm-default-weight);font-size:var(--typography-label-sm-default-size);letter-spacing:var(--typography-label-sm-default-letter-spacing);text-align:left;cursor:pointer}.c-dropdown-select__option:hover:not(:disabled){background-color:var(--color-action-neutral-background-hover)}.c-dropdown-select__option:focus-visible:not(:disabled){box-shadow:var(--focus-inset);outline:none}.c-dropdown-select__option:disabled{cursor:not-allowed;opacity:.5}.c-dropdown-select__option--selected{background-color:var(--color-action-primary-background-selected);color:var(--color-action-primary-content-selected);-webkit-transform:translateZ(0);transform:translateZ(0);will-change:transform}.c-dropdown-select__option--multiselect{cursor:default;padding:0 var(--space-component-padding-lg)}.c-dropdown-select__option--multiselect:hover{background-color:var(--color-action-neutral-background-hover)}.c-dropdown-select__option--multiselect__option{font-family:var(--typography-label-md-default-family),sans-serif;font-weight:var(--typography-label-md-default-weight);font-size:var(--typography-label-md-default-size);letter-spacing:var(--typography-label-md-default-letter-spacing)}.c-dropdown-select__option-icon{flex-shrink:0;margin-right:12px;color:var(--color-core-content-soft)}.c-dropdown-select__option-label{flex:1;min-width:0}.c-dropdown-select__options--with-mobile-actions{margin-bottom:85px}.c-dropdown-select__mobile-actions{display:none}@media (max-width: 768px){.c-dropdown-select__mobile-actions{display:flex;justify-content:space-between;align-items:center;width:100%;position:fixed;bottom:0;height:60px;background-color:var(--color-core-background-surface-raised);padding:var(--space-container-padding-sm);border-top:var(--size-border-width-sm) solid var(--color-core-border-soft)}}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: IconComponent, selector: "lib-icon", inputs: ["size", "icon", "name", "color"] }, { kind: "component", type: CheckboxComponent, selector: "lib-checkbox", inputs: ["label", "state", "errorActive", "skeletonActive", "disabled", "name", "value", "innerHTML", "ariaLabel"], outputs: ["changed"] }, { kind: "component", type: InputSearchComponent, selector: "lib-input-search", inputs: ["label", "placeholder", "helperText", "alertText", "successText", "error", "success", "disabled", "readonly", "required", "size", "fullWidth", "clearButton"], outputs: ["emitValue"] }, { kind: "component", type: LinkActionComponent, selector: "lib-link-action", inputs: ["text", "disabled", "variant", "size", "weight", "iconBefore", "iconAfter"], outputs: ["clicked"] }, { kind: "component", type: OverlayComponent, selector: "lib-overlay", inputs: ["position", "disabled", "width"], outputs: ["opened", "closed"] }], encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", type: DropdownSelectComponent, isStandalone: true, selector: "lib-dropdown-select", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, selectedValues: { classPropertyName: "selectedValues", publicName: "selectedValues", isSignal: true, isRequired: false, transformFunction: null }, searchBarEnabled: { classPropertyName: "searchBarEnabled", publicName: "searchBarEnabled", isSignal: true, isRequired: false, transformFunction: null }, searchPlaceholder: { classPropertyName: "searchPlaceholder", publicName: "searchPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, cancelButtonText: { classPropertyName: "cancelButtonText", publicName: "cancelButtonText", isSignal: true, isRequired: false, transformFunction: null }, acceptButtonText: { classPropertyName: "acceptButtonText", publicName: "acceptButtonText", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { optionSelected: "optionSelected", optionDeselected: "optionDeselected", searchChanged: "searchChanged", valueChange: "valueChange", cancelClicked: "cancelClicked", acceptClicked: "acceptClicked" }, viewQueries: [{ propertyName: "overlay", first: true, predicate: OverlayComponent, descendants: true }], ngImport: i0, template: "<lib-overlay\n  [position]=\"position()\"\n  [disabled]=\"disabled()\"\n  (opened)=\"onOverlayOpened()\"\n  (closed)=\"onOverlayClosed()\"\n  [width]=\"width()\"\n>\n  <!-- Search Input (if enabled and not multiselect) -->\n  @if (showSearchBar()) {\n  <div class=\"c-dropdown-select__search\">\n    <lib-input-search\n      [placeholder]=\"searchPlaceholder()\"\n      [formControl]=\"searchControl\"\n      size=\"lg\"\n      [fullWidth]=\"true\"\n    ></lib-input-search>\n  </div>\n  }\n\n  <!-- Options List -->\n  <div class=\"c-dropdown-select__options\">\n    @for (group of filteredOptions(); track group.label) {\n    <!-- Option Group -->\n    <div class=\"c-dropdown-select__group\">\n      <!-- Group Label -->\n      @if (group.label) {\n      <div class=\"c-dropdown-select__group-label\">\n        {{ group.label }}\n      </div>\n      }\n      <!-- Group Options -->\n      @for (option of group.options; track option.value) { @if (isMultiSelect())\n      {\n      <!-- For multiselect: use full checkbox component with label -->\n      <div\n        class=\"c-dropdown-select__option c-dropdown-select__option--multiselect\"\n      >\n        <lib-checkbox\n          [label]=\"option.label\"\n          [name]=\"'option-' + option.value\"\n          [value]=\"option.value\"\n          [ariaLabel]=\"'Select ' + option.label\"\n          [state]=\"isSelected(option) ? 'checked' : 'unchecked'\"\n          [disabled]=\"option.disabled || false\"\n          (changed)=\"onCheckboxChange(option, $event.checked)\"\n        ></lib-checkbox>\n      </div>\n      } @else {\n      <!-- For single select: use button with icon and label -->\n      <button\n        type=\"button\"\n        class=\"c-dropdown-select__option\"\n        [class.c-dropdown-select__option--selected]=\"isSelected(option)\"\n        [disabled]=\"option.disabled\"\n        (click)=\"selectOption(option)\"\n      >\n        @if (option.icon) {\n        <lib-icon\n          [name]=\"option.icon\"\n          size=\"lg\"\n          class=\"c-dropdown-select__option-icon\"\n        >\n        </lib-icon>\n        }\n\n        <span class=\"c-dropdown-select__option-label\">\n          {{ option.label }}\n        </span>\n\n        <!-- Check icon for selected option in single select -->\n        @if (isSelected(option)) {\n        <lib-icon\n          name=\"checkcircle-fill\"\n          size=\"lg\"\n          color=\"action-primary-selected-background-default\"\n        >\n        </lib-icon>\n        }\n      </button>\n      } }\n    </div>\n    }\n  </div>\n\n  <!-- Mobile Action Buttons in footer slot -->\n  @if (showMobileActions()) {\n  <div slot=\"footer\" class=\"c-dropdown-select__mobile-actions\">\n    <lib-link-action\n      [text]=\"cancelButtonText()\"\n      variant=\"neutral\"\n      size=\"md\"\n      weight=\"bold\"\n      (clicked)=\"onCancelClick()\"\n    ></lib-link-action>\n    <lib-link-action\n      [text]=\"acceptButtonText()\"\n      variant=\"primary\"\n      size=\"md\"\n      weight=\"bold\"\n      (clicked)=\"onAcceptClick()\"\n    ></lib-link-action>\n  </div>\n  }\n</lib-overlay>\n", styles: [".c-dropdown-select__search{padding:var(--space-container-padding-sm);border-bottom:var(--size-border-width-sm) solid var(--color-core-border-soft)}.c-dropdown-select__options{flex:1;overflow-y:auto;overflow-x:hidden;padding:8px 0}.c-dropdown-select__group-label{color:var(--color-core-content-soft);padding:var(--space-component-padding-md) var(--space-component-padding-lg);font-family:var(--typography-label-sm-strong-family),sans-serif;font-weight:var(--typography-label-sm-strong-weight);font-size:var(--typography-label-sm-strong-size);letter-spacing:var(--typography-label-sm-strong-letter-spacing)}.c-dropdown-select__option{display:flex;align-items:center;width:100%;min-height:40px;gap:var(--space-component-gap-sm);padding:var(--space-component-padding-sm) var(--space-component-padding-lg);border:none;background:var(--color-action-neutral-background-default);color:var(--color-core-content-default);font-family:var(--typography-label-sm-default-family),sans-serif;font-weight:var(--typography-label-sm-default-weight);font-size:var(--typography-label-sm-default-size);letter-spacing:var(--typography-label-sm-default-letter-spacing);text-align:left;cursor:pointer}.c-dropdown-select__option:hover:not(:disabled){background-color:var(--color-action-neutral-background-hover)}.c-dropdown-select__option:focus-visible:not(:disabled){box-shadow:var(--focus-inset);outline:none}.c-dropdown-select__option:disabled{cursor:not-allowed;opacity:.5}.c-dropdown-select__option--multiselect{cursor:default;padding:0 var(--space-component-padding-lg)}.c-dropdown-select__option--multiselect:hover{background-color:var(--color-action-neutral-background-hover)}.c-dropdown-select__option--multiselect__option{font-family:var(--typography-label-md-default-family),sans-serif;font-weight:var(--typography-label-md-default-weight);font-size:var(--typography-label-md-default-size);letter-spacing:var(--typography-label-md-default-letter-spacing)}.c-dropdown-select__option-icon{flex-shrink:0;margin-right:12px;color:var(--color-core-content-soft)}.c-dropdown-select__option-label{flex:1;min-width:0}.c-dropdown-select__mobile-actions{display:flex;justify-content:space-between;align-items:center;width:100%}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: IconComponent, selector: "lib-icon", inputs: ["size", "icon", "name", "color"] }, { kind: "component", type: CheckboxComponent, selector: "lib-checkbox", inputs: ["label", "state", "errorActive", "skeletonActive", "disabled", "name", "value", "innerHTML", "ariaLabel"], outputs: ["changed"] }, { kind: "component", type: InputSearchComponent, selector: "lib-input-search", inputs: ["label", "placeholder", "helperText", "alertText", "successText", "error", "success", "disabled", "readonly", "required", "size", "fullWidth", "clearButton"], outputs: ["emitValue"] }, { kind: "component", type: LinkActionComponent, selector: "lib-link-action", inputs: ["text", "disabled", "variant", "size", "weight", "iconBefore", "iconAfter"], outputs: ["clicked"] }, { kind: "component", type: OverlayComponent, selector: "lib-overlay", inputs: ["position", "disabled", "width"], outputs: ["opened", "closed"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: DropdownSelectComponent, decorators: [{
             type: Component,
             args: [{ selector: 'lib-dropdown-select', imports: [
                         ReactiveFormsModule,
-                        NgClass,
                         IconComponent,
                         CheckboxComponent,
                         InputSearchComponent,
                         LinkActionComponent,
                         OverlayComponent,
-                    ], encapsulation: ViewEncapsulation.None, template: "<lib-overlay\n  [position]=\"position()\"\n  [disabled]=\"disabled()\"\n  (opened)=\"onOverlayOpened()\"\n  (closed)=\"onOverlayClosed()\"\n  [width]=\"width()\"\n>\n  <ng-template>\n    <!-- Search Input (if enabled and not multiselect) -->\n    @if (showSearchBar()) {\n    <div class=\"c-dropdown-select__search\">\n      <lib-input-search\n        [placeholder]=\"searchPlaceholder()\"\n        [formControl]=\"searchControl\"\n        size=\"lg\"\n        [fullWidth]=\"true\"\n      ></lib-input-search>\n    </div>\n    }\n\n    <!-- Options List -->\n    <div class=\"c-dropdown-select__options\" [ngClass]=\"{ 'c-dropdown-select__options--with-mobile-actions': showMobileActions() }\">\n      @for (group of filteredOptions(); track group.label) {\n      <!-- Option Group -->\n      <div class=\"c-dropdown-select__group\">\n        <!-- Group Label -->\n        @if (group.label) {\n        <div class=\"c-dropdown-select__group-label\">\n          {{ group.label }}\n        </div>\n        }\n        <!-- Group Options -->\n        @for (option of group.options; track option.value) { @if (isMultiSelect())\n        {\n        <!-- For multiselect: use full checkbox component with label -->\n        <div\n          class=\"c-dropdown-select__option c-dropdown-select__option--multiselect\"\n        >\n          <lib-checkbox\n            [label]=\"option.label\"\n            [name]=\"'option-' + option.value\"\n            [value]=\"option.value\"\n            [ariaLabel]=\"'Select ' + option.label\"\n            [state]=\"isSelected(option) ? 'checked' : 'unchecked'\"\n            [disabled]=\"option.disabled || false\"\n            (changed)=\"onCheckboxChange(option, $event.checked)\"\n          ></lib-checkbox>\n        </div>\n        } @else {\n        <!-- For single select: use button with icon and label -->\n        <button\n          type=\"button\"\n          class=\"c-dropdown-select__option\"\n          [class.c-dropdown-select__option--selected]=\"isSelected(option)\"\n          [disabled]=\"option.disabled\"\n          (click)=\"selectOption(option)\"\n        >\n          @if (option.icon) {\n          <lib-icon\n            [name]=\"option.icon\"\n            size=\"lg\"\n            class=\"c-dropdown-select__option-icon\"\n          >\n          </lib-icon>\n          }\n\n          <span class=\"c-dropdown-select__option-label\">\n            {{ option.label }}\n          </span>\n\n          <!-- Check icon for selected option in single select -->\n          @if (isSelected(option)) {\n          <lib-icon\n            name=\"checkcircle-fill\"\n            size=\"lg\"\n            color=\"action-primary-selected-background-default\"\n          >\n          </lib-icon>\n          }\n        </button>\n        } }\n      </div>\n      }\n    </div>\n\n    <!-- Mobile Action Buttons in footer slot -->\n    @if (showMobileActions()) {\n    <div class=\"c-dropdown-select__mobile-actions\">\n      <lib-link-action\n        [text]=\"cancelButtonText()\"\n        variant=\"neutral\"\n        size=\"md\"\n        weight=\"bold\"\n        (clicked)=\"onCancelClick()\"\n      ></lib-link-action>\n      <lib-link-action\n        [text]=\"acceptButtonText()\"\n        variant=\"primary\"\n        size=\"md\"\n        weight=\"bold\"\n        (clicked)=\"onAcceptClick()\"\n      ></lib-link-action>\n    </div>\n    }\n  </ng-template>\n</lib-overlay>\n", styles: [".c-dropdown-select__search{padding:var(--space-container-padding-sm);border-bottom:var(--size-border-width-sm) solid var(--color-core-border-soft)}.c-dropdown-select__options{flex:1;overflow-y:auto;overflow-x:hidden;padding:8px 0}.c-dropdown-select__group-label{color:var(--color-core-content-soft);padding:var(--space-component-padding-md) var(--space-component-padding-lg);font-family:var(--typography-label-sm-strong-family),sans-serif;font-weight:var(--typography-label-sm-strong-weight);font-size:var(--typography-label-sm-strong-size);letter-spacing:var(--typography-label-sm-strong-letter-spacing)}.c-dropdown-select__option{display:flex;align-items:center;width:100%;min-height:40px;gap:var(--space-component-gap-sm);padding:var(--space-component-padding-sm) var(--space-component-padding-lg);border:none;background:var(--color-action-neutral-background-default);color:var(--color-core-content-default);font-family:var(--typography-label-sm-default-family),sans-serif;font-weight:var(--typography-label-sm-default-weight);font-size:var(--typography-label-sm-default-size);letter-spacing:var(--typography-label-sm-default-letter-spacing);text-align:left;cursor:pointer}.c-dropdown-select__option:hover:not(:disabled){background-color:var(--color-action-neutral-background-hover)}.c-dropdown-select__option:focus-visible:not(:disabled){box-shadow:var(--focus-inset);outline:none}.c-dropdown-select__option:disabled{cursor:not-allowed;opacity:.5}.c-dropdown-select__option--selected{background-color:var(--color-action-primary-background-selected);color:var(--color-action-primary-content-selected);-webkit-transform:translateZ(0);transform:translateZ(0);will-change:transform}.c-dropdown-select__option--multiselect{cursor:default;padding:0 var(--space-component-padding-lg)}.c-dropdown-select__option--multiselect:hover{background-color:var(--color-action-neutral-background-hover)}.c-dropdown-select__option--multiselect__option{font-family:var(--typography-label-md-default-family),sans-serif;font-weight:var(--typography-label-md-default-weight);font-size:var(--typography-label-md-default-size);letter-spacing:var(--typography-label-md-default-letter-spacing)}.c-dropdown-select__option-icon{flex-shrink:0;margin-right:12px;color:var(--color-core-content-soft)}.c-dropdown-select__option-label{flex:1;min-width:0}.c-dropdown-select__options--with-mobile-actions{margin-bottom:85px}.c-dropdown-select__mobile-actions{display:none}@media (max-width: 768px){.c-dropdown-select__mobile-actions{display:flex;justify-content:space-between;align-items:center;width:100%;position:fixed;bottom:0;height:60px;background-color:var(--color-core-background-surface-raised);padding:var(--space-container-padding-sm);border-top:var(--size-border-width-sm) solid var(--color-core-border-soft)}}\n"] }]
+                    ], template: "<lib-overlay\n  [position]=\"position()\"\n  [disabled]=\"disabled()\"\n  (opened)=\"onOverlayOpened()\"\n  (closed)=\"onOverlayClosed()\"\n  [width]=\"width()\"\n>\n  <!-- Search Input (if enabled and not multiselect) -->\n  @if (showSearchBar()) {\n  <div class=\"c-dropdown-select__search\">\n    <lib-input-search\n      [placeholder]=\"searchPlaceholder()\"\n      [formControl]=\"searchControl\"\n      size=\"lg\"\n      [fullWidth]=\"true\"\n    ></lib-input-search>\n  </div>\n  }\n\n  <!-- Options List -->\n  <div class=\"c-dropdown-select__options\">\n    @for (group of filteredOptions(); track group.label) {\n    <!-- Option Group -->\n    <div class=\"c-dropdown-select__group\">\n      <!-- Group Label -->\n      @if (group.label) {\n      <div class=\"c-dropdown-select__group-label\">\n        {{ group.label }}\n      </div>\n      }\n      <!-- Group Options -->\n      @for (option of group.options; track option.value) { @if (isMultiSelect())\n      {\n      <!-- For multiselect: use full checkbox component with label -->\n      <div\n        class=\"c-dropdown-select__option c-dropdown-select__option--multiselect\"\n      >\n        <lib-checkbox\n          [label]=\"option.label\"\n          [name]=\"'option-' + option.value\"\n          [value]=\"option.value\"\n          [ariaLabel]=\"'Select ' + option.label\"\n          [state]=\"isSelected(option) ? 'checked' : 'unchecked'\"\n          [disabled]=\"option.disabled || false\"\n          (changed)=\"onCheckboxChange(option, $event.checked)\"\n        ></lib-checkbox>\n      </div>\n      } @else {\n      <!-- For single select: use button with icon and label -->\n      <button\n        type=\"button\"\n        class=\"c-dropdown-select__option\"\n        [class.c-dropdown-select__option--selected]=\"isSelected(option)\"\n        [disabled]=\"option.disabled\"\n        (click)=\"selectOption(option)\"\n      >\n        @if (option.icon) {\n        <lib-icon\n          [name]=\"option.icon\"\n          size=\"lg\"\n          class=\"c-dropdown-select__option-icon\"\n        >\n        </lib-icon>\n        }\n\n        <span class=\"c-dropdown-select__option-label\">\n          {{ option.label }}\n        </span>\n\n        <!-- Check icon for selected option in single select -->\n        @if (isSelected(option)) {\n        <lib-icon\n          name=\"checkcircle-fill\"\n          size=\"lg\"\n          color=\"action-primary-selected-background-default\"\n        >\n        </lib-icon>\n        }\n      </button>\n      } }\n    </div>\n    }\n  </div>\n\n  <!-- Mobile Action Buttons in footer slot -->\n  @if (showMobileActions()) {\n  <div slot=\"footer\" class=\"c-dropdown-select__mobile-actions\">\n    <lib-link-action\n      [text]=\"cancelButtonText()\"\n      variant=\"neutral\"\n      size=\"md\"\n      weight=\"bold\"\n      (clicked)=\"onCancelClick()\"\n    ></lib-link-action>\n    <lib-link-action\n      [text]=\"acceptButtonText()\"\n      variant=\"primary\"\n      size=\"md\"\n      weight=\"bold\"\n      (clicked)=\"onAcceptClick()\"\n    ></lib-link-action>\n  </div>\n  }\n</lib-overlay>\n", styles: [".c-dropdown-select__search{padding:var(--space-container-padding-sm);border-bottom:var(--size-border-width-sm) solid var(--color-core-border-soft)}.c-dropdown-select__options{flex:1;overflow-y:auto;overflow-x:hidden;padding:8px 0}.c-dropdown-select__group-label{color:var(--color-core-content-soft);padding:var(--space-component-padding-md) var(--space-component-padding-lg);font-family:var(--typography-label-sm-strong-family),sans-serif;font-weight:var(--typography-label-sm-strong-weight);font-size:var(--typography-label-sm-strong-size);letter-spacing:var(--typography-label-sm-strong-letter-spacing)}.c-dropdown-select__option{display:flex;align-items:center;width:100%;min-height:40px;gap:var(--space-component-gap-sm);padding:var(--space-component-padding-sm) var(--space-component-padding-lg);border:none;background:var(--color-action-neutral-background-default);color:var(--color-core-content-default);font-family:var(--typography-label-sm-default-family),sans-serif;font-weight:var(--typography-label-sm-default-weight);font-size:var(--typography-label-sm-default-size);letter-spacing:var(--typography-label-sm-default-letter-spacing);text-align:left;cursor:pointer}.c-dropdown-select__option:hover:not(:disabled){background-color:var(--color-action-neutral-background-hover)}.c-dropdown-select__option:focus-visible:not(:disabled){box-shadow:var(--focus-inset);outline:none}.c-dropdown-select__option:disabled{cursor:not-allowed;opacity:.5}.c-dropdown-select__option--multiselect{cursor:default;padding:0 var(--space-component-padding-lg)}.c-dropdown-select__option--multiselect:hover{background-color:var(--color-action-neutral-background-hover)}.c-dropdown-select__option--multiselect__option{font-family:var(--typography-label-md-default-family),sans-serif;font-weight:var(--typography-label-md-default-weight);font-size:var(--typography-label-md-default-size);letter-spacing:var(--typography-label-md-default-letter-spacing)}.c-dropdown-select__option-icon{flex-shrink:0;margin-right:12px;color:var(--color-core-content-soft)}.c-dropdown-select__option-label{flex:1;min-width:0}.c-dropdown-select__mobile-actions{display:flex;justify-content:space-between;align-items:center;width:100%}\n"] }]
         }], ctorParameters: () => [], propDecorators: { overlay: [{
                 type: ViewChild,
                 args: [OverlayComponent]