@crowdfarming/oliva-ds 1.29.0-rc.8 → 1.30.0

package/fesm2022/crowdfarming-oliva-ds.mjs

@@ -3200,16 +3200,21 @@ class OverlayComponent {
     destroyRef = inject(DestroyRef);
     focusTrapFactory = inject(FocusTrapFactory);
     router = inject(Router);
+    // Portal and container management
     triggerButtonRef;
     portal;
     portalOutlet;
     portalContainer;
-    originalBodyOverflow;
+    boundPortalClickHandler;
+    // Focus and accessibility management
     focusTrap;
     previouslyFocusedElement;
     triggerKeydownHandler;
+    inertElements = [];
+    escapeKeyHandler;
+    // Scroll and navigation management
+    originalBodyOverflow;
     navigationSub;
-    boundPortalClickHandler;
     // Helper to get the correct document context (important for Storybook)
     getDocument() {
         return this.elementRef.nativeElement.ownerDocument || document;
@@ -3235,19 +3240,22 @@ class OverlayComponent {
             this.destroyFocusTrap();
             this.cleanupTriggerListener();
             this.navigationSub?.unsubscribe();
+            this.removeEscapeKeyListener();
         });
     }
+    // ================== MOBILE DETECTION ==================
     updateMobileDetection() {
         this._isMobile.set(isPlatformBrowser(this.platformId)
             ? window.innerWidth <= OverlayComponent.MOBILE_BREAKPOINT
             : false);
     }
+    // ================== TRIGGER MANAGEMENT ==================
     setTriggerButton(element) {
         this.triggerButtonRef = element;
         this.triggerKeydownHandler = (event) => {
-            if (event.key === 'Tab' && this.isOpen() && !this.isClosing()) {
+            if (event.key === 'Enter' || event.key === ' ') {
                 event.preventDefault();
-                this.focusFirstElementInOverlay();
+                this.toggleOverlay();
             }
         };
         element.addEventListener('keydown', this.triggerKeydownHandler);
@@ -3266,12 +3274,18 @@ class OverlayComponent {
     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);
@@ -3295,13 +3309,16 @@ class OverlayComponent {
         this._isOpen.set(true);
         this.addResizeListener();
         this.listenToNavigation();
-        this.focusFirstElementInOverlay();
     }
     closeOverlay() {
         this.initializeOverlayClosing();
         this.cleanupOverlayResources();
         this.restoreScrollBehavior();
         this.destroyOverlayComponents();
+        // Restore focus AFTER destroying DOM to avoid interference
+        requestAnimationFrame(() => {
+            this.restoreFocusToTrigger();
+        });
         this.scheduleOverlayFinalization();
     }
     initializeOverlayClosing() {
@@ -3323,6 +3340,8 @@ class OverlayComponent {
     destroyOverlayComponents() {
         this.destroyFocusTrap();
         this.destroyPortal();
+        // Ensure elements are restored after destroying components
+        this.restoreOutsideElements();
     }
     scheduleOverlayFinalization() {
         setTimeout(() => {
@@ -3332,50 +3351,8 @@ class OverlayComponent {
     finalizeOverlayClosing() {
         this._isOpen.set(false);
         this._isClosing.set(false);
-        this.restoreFocusToPreviousElement();
-    }
-    async restoreFocusToPreviousElement() {
-        const doc = this.getDocument();
-        const elementToFocus = this.triggerButtonRef ?? this.previouslyFocusedElement;
-        if (!elementToFocus)
-            return;
-        await new Promise(requestAnimationFrame);
-        if (doc.contains(elementToFocus)) {
-            elementToFocus.focus({ preventScroll: true });
-        }
-        else {
-            this.focusFirstFocusableElementInPage();
-        }
-        this.previouslyFocusedElement = undefined;
-    }
-    focusFirstFocusableElementInPage() {
-        const focusableSelectors = [
-            'button:not([disabled])',
-            'input:not([disabled])',
-            'select:not([disabled])',
-            'textarea:not([disabled])',
-            'a[href]',
-            '[tabindex]:not([tabindex="-1"])'
-        ];
-        const firstFocusable = this.getDocument().querySelector(focusableSelectors.join(', '));
-        if (firstFocusable) {
-            firstFocusable.focus();
-        }
-    }
-    focusTriggerOrFirstElement() {
-        if (this.triggerButtonRef) {
-            this.triggerButtonRef.focus();
-            return;
-        }
-        this.focusFirstFocusableElementInPage();
-    }
-    focusTriggerOrLastElement() {
-        if (this.triggerButtonRef) {
-            this.triggerButtonRef.focus();
-            return;
-        }
-        this.focusLastElementInMainPage();
     }
+    // ================== EVENT HANDLING ==================
     onPortalClick = (event) => {
         if (!this.isOpen() || this.isClosing())
             return;
@@ -3391,6 +3368,7 @@ class OverlayComponent {
         }
         this.closeOverlay();
     };
+    // ================== POSITIONING ==================
     calculatePosition() {
         if (!this.triggerButtonRef)
             return;
@@ -3457,6 +3435,7 @@ class OverlayComponent {
         const w = parseFloat(this.width());
         return isNaN(w) ? OverlayComponent.DEFAULT_MENU_WIDTH : w;
     }
+    // ================== RESIZE HANDLING ==================
     addResizeListener() {
         if (!isPlatformBrowser(this.platformId))
             return;
@@ -3484,6 +3463,7 @@ class OverlayComponent {
             this.calculatePosition();
         }
     };
+    // ================== PORTAL MANAGEMENT ==================
     createPortal() {
         if (!this.menuTemplate || !this.contentTemplate)
             return;
@@ -3492,7 +3472,7 @@ class OverlayComponent {
         this.setupPortalEventListeners();
         this.createPortalOutlet();
         this.attachPortalContent();
-        this.setupFocusTrap();
+        // Focus trap will be set up in openOverlay()
         this.applyMenuPositioning();
     }
     createPortalTemplate() {
@@ -3530,9 +3510,6 @@ class OverlayComponent {
             return;
         this.portalOutlet.attach(this.portal);
     }
-    setupFocusTrap() {
-        this.createFocusTrap();
-    }
     applyMenuPositioning() {
         const menuEl = this.portalContainer?.querySelector('.c-overlay__menu');
         if (!menuEl)
@@ -3580,6 +3557,7 @@ class OverlayComponent {
         }
         this.portalContainer = undefined;
     }
+    // ================== SCROLL MANAGEMENT ==================
     blockBodyScroll() {
         if (!isPlatformBrowser(this.platformId))
             return;
@@ -3609,68 +3587,75 @@ class OverlayComponent {
         }
         this.originalBodyOverflow = undefined;
     }
-    createFocusTrap() {
-        if (!this.portalContainer)
+    // ================== FOCUS MANAGEMENT ==================
+    trapFocus() {
+        if (!this.portalContainer) {
             return;
-        const menuEl = this.portalContainer.querySelector('.c-overlay__menu');
-        if (menuEl) {
-            this.setupManualFocusManagement(menuEl);
         }
-    }
-    setupManualFocusManagement(menuEl) {
+        // Search for menu element in entire document, not just within portalContainer
         const doc = this.getDocument();
-        const keydownHandler = (event) => {
-            if (event.key !== 'Tab')
-                return;
-            const focusableElements = this.getFocusableElements(menuEl);
-            const current = doc.activeElement;
-            const first = focusableElements[0];
-            const last = focusableElements[focusableElements.length - 1];
-            if (!event.shiftKey && current === last) {
-                event.preventDefault();
-                this.closeOverlay();
-                this.focusTriggerOrFirstElement();
-                return;
-            }
-            if (event.shiftKey && current === first) {
+        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();
+    }
+    // ================== ESCAPE KEY HANDLING ==================
+    setupEscapeKeyListener() {
+        if (!isPlatformBrowser(this.platformId))
+            return;
+        this.escapeKeyHandler = (event) => {
+            if (event.key === 'Escape' && this.isOpen() && !this.isClosing()) {
                 event.preventDefault();
                 this.closeOverlay();
-                this.focusTriggerOrLastElement();
-                return;
             }
         };
-        menuEl.addEventListener('keydown', keydownHandler);
-        menuEl._keydownHandler = keydownHandler;
+        this.getDocument().addEventListener('keydown', this.escapeKeyHandler);
     }
-    getFocusableElements(container) {
-        const focusableSelectors = [
-            'button:not([disabled])',
-            'input:not([disabled])',
-            'select:not([disabled])',
-            'textarea:not([disabled])',
-            'a[href]',
-            '[tabindex]:not([tabindex="-1"])'
-        ];
-        return Array.from(container.querySelectorAll(focusableSelectors.join(', ')));
+    removeEscapeKeyListener() {
+        if (!isPlatformBrowser(this.platformId))
+            return;
+        if (this.escapeKeyHandler) {
+            this.getDocument().removeEventListener('keydown', this.escapeKeyHandler);
+            this.escapeKeyHandler = undefined;
+        }
     }
-    focusFirstElementInMainPage() {
-        const focusableSelectors = [
-            'button:not([disabled])',
-            'input:not([disabled])',
-            'select:not([disabled])',
-            'textarea:not([disabled])',
-            'a[href]',
-            '[tabindex]:not([tabindex="-1"])'
-        ];
-        const allFocusable = Array.from(this.getDocument().querySelectorAll(focusableSelectors.join(', ')));
-        const mainPageFocusable = allFocusable.filter(el => {
-            return !this.portalContainer?.contains(el) && this.isElementVisible(el);
-        });
-        if (mainPageFocusable.length > 0) {
-            mainPageFocusable[0].focus();
+    // ================== 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();
     }
-    focusLastElementInMainPage() {
+    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])',
@@ -3679,52 +3664,41 @@ class OverlayComponent {
             'a[href]',
             '[tabindex]:not([tabindex="-1"])'
         ];
-        const allFocusable = Array.from(this.getDocument().querySelectorAll(focusableSelectors.join(', ')));
-        const mainPageFocusable = allFocusable.filter(el => {
-            return !this.portalContainer?.contains(el) && this.isElementVisible(el);
-        });
-        if (mainPageFocusable.length > 0) {
-            mainPageFocusable[mainPageFocusable.length - 1].focus();
-        }
+        const focusable = element.querySelector(focusableSelectors.join(', '));
+        return focusable;
     }
-    isElementVisible(element) {
-        const style = window.getComputedStyle(element);
-        return style.display !== 'none' && style.visibility !== 'hidden' && element.offsetParent !== null;
+    releaseFocusTrap() {
+        if (this.focusTrap) {
+            this.focusTrap.destroy();
+            this.focusTrap = undefined;
+        }
+        this.removeEscapeKeyListener();
     }
-    focusFirstElementInOverlay() {
-        if (!this.portalContainer)
+    // ================== INERT OUTSIDE ELEMENTS ==================
+    makeOutsideElementsInert() {
+        if (!isPlatformBrowser(this.platformId))
             return;
-        const menuEl = this.portalContainer.querySelector('.c-overlay__menu');
-        if (menuEl) {
-            const firstFocusable = this.findFirstFocusableElement(menuEl);
-            if (firstFocusable) {
-                firstFocusable.focus();
+        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);
             }
-        }
+        });
     }
-    findFirstFocusableElement(container) {
-        const focusableSelectors = [
-            'button:not([disabled])',
-            'input:not([disabled])',
-            'select:not([disabled])',
-            'textarea:not([disabled])',
-            'a[href]',
-            '[tabindex]:not([tabindex="-1"])',
-            '[contenteditable="true"]'
-        ].join(', ');
-        const focusableElements = container.querySelectorAll(focusableSelectors);
-        return focusableElements.length > 0 ? focusableElements[0] : null;
+    restoreOutsideElements() {
+        if (!isPlatformBrowser(this.platformId))
+            return;
+        this.inertElements.forEach(el => {
+            el.inert = false;
+        });
+        this.inertElements = [];
     }
     destroyFocusTrap() {
-        if (this.focusTrap) {
-            this.focusTrap.destroy();
-            this.focusTrap = undefined;
-        }
-        const menuEl = this.portalContainer?.querySelector('.c-overlay__menu');
-        if (menuEl && menuEl._keydownHandler) {
-            menuEl.removeEventListener('keydown', menuEl._keydownHandler);
-            delete menuEl._keydownHandler;
-        }
+        this.releaseFocusTrap();
+        this.restoreOutsideElements();
     }
     cleanupTriggerListener() {
         if (this.triggerButtonRef && this.triggerKeydownHandler) {
@@ -5328,11 +5302,11 @@ class ModalComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: ModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", type: ModalComponent, isStandalone: true, selector: "lib-modal", viewQueries: [{ propertyName: "modalContentRef", first: true, predicate: ["modalContent"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (isModalOpen()) {\n<div class=\"c-modal\" [ngClass]=\"getClasses()\">\n  <!-- Backdrop -->\n  <div\n    class=\"c-modal__backdrop\"\n    [ngClass]=\"getBackdropClasses()\"\n    (click)=\"onBackdropClick()\"\n    (keydown.escape)=\"onEscapeKey()\"\n    tabindex=\"0\"\n    role=\"button\"\n    aria-label=\"Close modal\"\n  ></div>\n\n  <!-- Modal Content -->\n  <div\n    class=\"c-modal__content\"\n    [ngClass]=\"getContentClasses()\"\n    (keydown.escape)=\"onEscapeKey()\"\n    role=\"dialog\"\n    tabindex=\"-1\"\n    [attr.aria-labelledby]=\"getTitle() ? 'modal-title' : null\"\n    [attr.aria-describedby]=\"getDescription() ? 'modal-description' : null\"\n  >\n    <!-- Header -->\n    @if (getTitle() || getShowCloseButton()) {\n    <div class=\"c-modal__content__header\">\n      <div class=\"c-modal__content__header__left\">\n        @if (getTitle()) {\n        <p id=\"modal-title\" class=\"c-modal__content__header__title\">\n          {{ getTitle() }}\n        </p>\n        }\n      </div>\n      @if (getShowCloseButton()) {\n      <div class=\"c-modal__content__header__right\">\n        <lib-button-icon\n          iconName=\"x-regular\"\n          size=\"sm\"\n          variant=\"neutral\"\n          (click)=\"onCloseButtonClick()\"\n          aria-label=\"Close modal\"\n        ></lib-button-icon>\n      </div>\n      }\n    </div>\n    }\n\n    <!-- Description -->\n    <div class=\"c-modal__content__body\">\n      @if (getDescription()) {\n      <div id=\"modal-description\" class=\"c-modal__content__body__description\">\n        <p>{{ getDescription() }}</p>\n      </div>\n      }\n\n      <!-- Body Content -->\n      <div #modalContent class=\"c-modal__content__body__content\">\n        <ng-content></ng-content>\n      </div>\n    </div>\n\n    <!-- Footer with Buttons -->\n    @if (getPrimaryButton() || getSecondaryButton()) {\n    <div class=\"c-modal__content__footer\">\n      @if (getSecondaryButton()) {\n      <lib-button\n        class=\"c-modal__content__footer__button secondary\"\n        [text]=\"getSecondaryButton()!.text\"\n        [variant]=\"getSecondaryButton()!.variant\"\n        [disabled]=\"getSecondaryButton()!.disabled ?? false\"\n        [loading]=\"getSecondaryButton()!.loading ?? false\"\n        [fullWidth]=\"true\"\n        (clicked)=\"onSecondaryButtonClick()\"\n      ></lib-button>\n      } @if (getPrimaryButton()) {\n      <lib-button\n        class=\"c-modal__content__footer__button primary\"\n        [text]=\"getPrimaryButton()!.text\"\n        [variant]=\"getPrimaryButton()!.variant\"\n        [disabled]=\"getPrimaryButton()!.disabled ?? false\"\n        [loading]=\"getPrimaryButton()!.loading ?? false\"\n        [fullWidth]=\"true\"\n        (clicked)=\"onPrimaryButtonClick()\"\n      ></lib-button>\n      }\n    </div>\n    }\n  </div>\n</div>\n}\n", styles: [".c-modal{position:fixed;top:0;left:0;width:100%;height:100%;z-index:100;display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transition:opacity .2s ease-in-out,visibility .2s ease-in-out}.c-modal--open{opacity:1;visibility:visible}.c-modal__content{background-color:var(--color-core-background-surface-floating);padding:var(--space-container-padding-sm) 0;box-shadow:var(--elevation-floating);border-radius:var(--size-border-radius-lg);overflow:hidden;display:flex;flex-direction:column;width:100%}.c-modal__content--open{transform:scale(1)}.c-modal__content--sm{max-width:416px}.c-modal__content--md{max-width:636px}.c-modal__content--lg{max-width:856px}.c-modal__content__header{display:flex;align-items:center;padding:0 var(--space-container-padding-sm) var(--space-container-padding-sm);gap:var(--space-container-gap-sm)}.c-modal__content__header__right{flex:1;display:flex;justify-content:flex-end}.c-modal__content__header__title{margin:0;font-family:var(--typography-label-lg-strong-family),sans-serif;font-weight:var(--typography-label-lg-strong-weight);font-size:var(--typography-label-lg-strong-size);line-height:var(--typography-label-lg-strong-line-height);letter-spacing:var(--typography-label-lg-strong-letter-spacing);color:var(--color-core-content-default)}.c-modal__content__body{display:flex;flex-direction:column;flex:1;gap:var(--space-container-gap-md);padding:0 var(--space-container-padding-sm)}.c-modal__content__body__description p{margin:0;color:var(--color-core-content-soft);font-family:var(--typography-body-md-family),sans-serif;font-weight:var(--typography-body-md-weight);font-size:var(--typography-body-md-size);line-height:var(--typography-body-md-line-height);letter-spacing:var(--typography-body-md-letter-spacing)}.c-modal__content__body__content{overflow-y:auto;margin:-2px;padding:2px}.c-modal__content--sm .c-modal__content__body__content{max-height:200px}.c-modal__content--md .c-modal__content__body__content{min-height:200px;max-height:600px}.c-modal__content--lg .c-modal__content__body__content{min-height:600px;max-height:800px}.c-modal__content__footer{display:flex;justify-content:flex-end;gap:var(--space-component-gap-md);padding:var(--space-container-padding-sm) var(--space-container-padding-sm) 0}@media (max-width: 768px){.c-modal__content__footer{flex-direction:column;gap:var(--space-component-gap-md)}}@media (max-width: 768px){.c-modal__content__footer__button{width:100%}}.c-modal__content__footer__button.primary{order:2}.c-modal__content__footer__button.secondary{order:1}.c-modal__backdrop{position:absolute;top:0;left:0;width:100%;height:100%;background-color:var(--color-effect-overlay);opacity:0;transition:opacity .2s ease-in-out}.c-modal__backdrop--open{opacity:1}@media (max-width: 768px){.c-modal{align-items:flex-end}.c-modal--sm .c-modal__content,.c-modal--md .c-modal__content{position:fixed;bottom:0;left:0;right:0;width:100%;max-width:none;transform:translateY(100%);transition:transform .3s ease-in-out;border-bottom-left-radius:0;border-bottom-right-radius:0}.c-modal--sm.c-modal--open .c-modal__content,.c-modal--md.c-modal--open .c-modal__content{transform:none;perspective:none;contain:none}.c-modal--lg{align-items:stretch}.c-modal--lg .c-modal__content{position:fixed;inset:0;width:100%;height:100%;max-width:none;border-radius:0;transform:scale(.95);transition:transform .3s ease-in-out}.c-modal--lg.c-modal--open .c-modal__content{transform:scale(1)}}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ButtonComponent, selector: "lib-button", inputs: ["text", "ariaLabel", "disabled", "loading", "skeletonActive", "variant", "size", "loadingText", "fullWidth", "iconBefore", "iconAfter", "type"], outputs: ["clicked"] }, { kind: "component", type: ButtonIconComponent, selector: "lib-button-icon", inputs: ["ariaLabel", "variant", "size", "iconName", "disabled", "loading", "skeletonActive"], outputs: ["clicked"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", type: ModalComponent, isStandalone: true, selector: "lib-modal", viewQueries: [{ propertyName: "modalContentRef", first: true, predicate: ["modalContent"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (isModalOpen()) {\n<div class=\"c-modal\" [ngClass]=\"getClasses()\">\n  <!-- Backdrop -->\n  <div\n    class=\"c-modal__backdrop\"\n    [ngClass]=\"getBackdropClasses()\"\n    (click)=\"onBackdropClick()\"\n    (keydown.escape)=\"onEscapeKey()\"\n    tabindex=\"0\"\n    role=\"button\"\n    aria-label=\"Close modal\"\n  ></div>\n\n  <!-- Modal Content -->\n  <div\n    class=\"c-modal__content\"\n    [ngClass]=\"getContentClasses()\"\n    (keydown.escape)=\"onEscapeKey()\"\n    role=\"dialog\"\n    tabindex=\"-1\"\n    [attr.aria-labelledby]=\"getTitle() ? 'modal-title' : null\"\n    [attr.aria-describedby]=\"getDescription() ? 'modal-description' : null\"\n  >\n    <!-- Header -->\n    @if (getTitle() || getShowCloseButton()) {\n    <div class=\"c-modal__content__header\">\n      <div class=\"c-modal__content__header__left\">\n        @if (getTitle()) {\n        <p id=\"modal-title\" class=\"c-modal__content__header__title\">\n          {{ getTitle() }}\n        </p>\n        }\n      </div>\n      @if (getShowCloseButton()) {\n      <div class=\"c-modal__content__header__right\">\n        <lib-button-icon\n          iconName=\"x-regular\"\n          size=\"sm\"\n          variant=\"neutral\"\n          (click)=\"onCloseButtonClick()\"\n          aria-label=\"Close modal\"\n        ></lib-button-icon>\n      </div>\n      }\n    </div>\n    }\n\n    <!-- Description -->\n    <div class=\"c-modal__content__body\">\n      @if (getDescription()) {\n      <div id=\"modal-description\" class=\"c-modal__content__body__description\">\n        <p>{{ getDescription() }}</p>\n      </div>\n      }\n\n      <!-- Body Content -->\n      <div #modalContent class=\"c-modal__content__body__content\">\n        <ng-content></ng-content>\n      </div>\n    </div>\n\n    <!-- Footer with Buttons -->\n    @if (getPrimaryButton() || getSecondaryButton()) {\n    <div class=\"c-modal__content__footer\">\n      @if (getSecondaryButton()) {\n      <lib-button\n        class=\"c-modal__content__footer__button secondary\"\n        [text]=\"getSecondaryButton()!.text\"\n        [variant]=\"getSecondaryButton()!.variant\"\n        [disabled]=\"getSecondaryButton()!.disabled ?? false\"\n        [loading]=\"getSecondaryButton()!.loading ?? false\"\n        [fullWidth]=\"true\"\n        (clicked)=\"onSecondaryButtonClick()\"\n      ></lib-button>\n      } @if (getPrimaryButton()) {\n      <lib-button\n        class=\"c-modal__content__footer__button primary\"\n        [text]=\"getPrimaryButton()!.text\"\n        [variant]=\"getPrimaryButton()!.variant\"\n        [disabled]=\"getPrimaryButton()!.disabled ?? false\"\n        [loading]=\"getPrimaryButton()!.loading ?? false\"\n        [fullWidth]=\"true\"\n        (clicked)=\"onPrimaryButtonClick()\"\n      ></lib-button>\n      }\n    </div>\n    }\n  </div>\n</div>\n}\n", styles: [".c-modal{position:fixed;top:0;left:0;width:100%;height:100%;z-index:10000;display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transition:opacity .2s ease-in-out,visibility .2s ease-in-out}.c-modal--open{opacity:1;visibility:visible}.c-modal__content{background-color:var(--color-core-background-surface-floating);padding:var(--space-container-padding-sm) 0;box-shadow:var(--elevation-floating);border-radius:var(--size-border-radius-lg);overflow:hidden;display:flex;flex-direction:column;width:100%}.c-modal__content--open{transform:scale(1)}.c-modal__content--sm{max-width:416px}.c-modal__content--md{max-width:636px}.c-modal__content--lg{max-width:856px}.c-modal__content__header{display:flex;align-items:center;padding:0 var(--space-container-padding-sm) var(--space-container-padding-sm);gap:var(--space-container-gap-sm)}.c-modal__content__header__right{flex:1;display:flex;justify-content:flex-end}.c-modal__content__header__title{margin:0;font-family:var(--typography-label-lg-strong-family),sans-serif;font-weight:var(--typography-label-lg-strong-weight);font-size:var(--typography-label-lg-strong-size);line-height:var(--typography-label-lg-strong-line-height);letter-spacing:var(--typography-label-lg-strong-letter-spacing);color:var(--color-core-content-default)}.c-modal__content__body{display:flex;flex-direction:column;flex:1;gap:var(--space-container-gap-md);padding:0 var(--space-container-padding-sm)}.c-modal__content__body__description p{margin:0;color:var(--color-core-content-soft);font-family:var(--typography-body-md-family),sans-serif;font-weight:var(--typography-body-md-weight);font-size:var(--typography-body-md-size);line-height:var(--typography-body-md-line-height);letter-spacing:var(--typography-body-md-letter-spacing)}.c-modal__content__body__content{overflow-y:auto;margin:-2px;padding:2px}.c-modal__content--sm .c-modal__content__body__content{max-height:200px}.c-modal__content--md .c-modal__content__body__content{min-height:200px;max-height:600px}.c-modal__content--lg .c-modal__content__body__content{min-height:600px;max-height:800px}.c-modal__content__footer{display:flex;justify-content:flex-end;gap:var(--space-component-gap-md);padding:var(--space-container-padding-sm) var(--space-container-padding-sm) 0}@media (max-width: 768px){.c-modal__content__footer{flex-direction:column;gap:var(--space-component-gap-md)}}@media (max-width: 768px){.c-modal__content__footer__button{width:100%}}.c-modal__content__footer__button.primary{order:2}.c-modal__content__footer__button.secondary{order:1}.c-modal__backdrop{position:absolute;top:0;left:0;width:100%;height:100%;background-color:var(--color-effect-overlay);opacity:0;transition:opacity .2s ease-in-out}.c-modal__backdrop--open{opacity:1}@media (max-width: 768px){.c-modal{align-items:flex-end}.c-modal--sm .c-modal__content,.c-modal--md .c-modal__content{position:fixed;bottom:0;left:0;right:0;width:100%;max-width:none;transform:translateY(100%);transition:transform .3s ease-in-out;border-bottom-left-radius:0;border-bottom-right-radius:0}.c-modal--sm.c-modal--open .c-modal__content,.c-modal--md.c-modal--open .c-modal__content{transform:none;perspective:none;contain:none}.c-modal--lg{align-items:stretch}.c-modal--lg .c-modal__content{position:fixed;inset:0;width:100%;height:100%;max-width:none;border-radius:0;transform:scale(.95);transition:transform .3s ease-in-out}.c-modal--lg.c-modal--open .c-modal__content{transform:scale(1)}}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ButtonComponent, selector: "lib-button", inputs: ["text", "ariaLabel", "disabled", "loading", "skeletonActive", "variant", "size", "loadingText", "fullWidth", "iconBefore", "iconAfter", "type"], outputs: ["clicked"] }, { kind: "component", type: ButtonIconComponent, selector: "lib-button-icon", inputs: ["ariaLabel", "variant", "size", "iconName", "disabled", "loading", "skeletonActive"], outputs: ["clicked"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: ModalComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-modal', imports: [NgClass, ButtonComponent, ButtonIconComponent], template: "@if (isModalOpen()) {\n<div class=\"c-modal\" [ngClass]=\"getClasses()\">\n  <!-- Backdrop -->\n  <div\n    class=\"c-modal__backdrop\"\n    [ngClass]=\"getBackdropClasses()\"\n    (click)=\"onBackdropClick()\"\n    (keydown.escape)=\"onEscapeKey()\"\n    tabindex=\"0\"\n    role=\"button\"\n    aria-label=\"Close modal\"\n  ></div>\n\n  <!-- Modal Content -->\n  <div\n    class=\"c-modal__content\"\n    [ngClass]=\"getContentClasses()\"\n    (keydown.escape)=\"onEscapeKey()\"\n    role=\"dialog\"\n    tabindex=\"-1\"\n    [attr.aria-labelledby]=\"getTitle() ? 'modal-title' : null\"\n    [attr.aria-describedby]=\"getDescription() ? 'modal-description' : null\"\n  >\n    <!-- Header -->\n    @if (getTitle() || getShowCloseButton()) {\n    <div class=\"c-modal__content__header\">\n      <div class=\"c-modal__content__header__left\">\n        @if (getTitle()) {\n        <p id=\"modal-title\" class=\"c-modal__content__header__title\">\n          {{ getTitle() }}\n        </p>\n        }\n      </div>\n      @if (getShowCloseButton()) {\n      <div class=\"c-modal__content__header__right\">\n        <lib-button-icon\n          iconName=\"x-regular\"\n          size=\"sm\"\n          variant=\"neutral\"\n          (click)=\"onCloseButtonClick()\"\n          aria-label=\"Close modal\"\n        ></lib-button-icon>\n      </div>\n      }\n    </div>\n    }\n\n    <!-- Description -->\n    <div class=\"c-modal__content__body\">\n      @if (getDescription()) {\n      <div id=\"modal-description\" class=\"c-modal__content__body__description\">\n        <p>{{ getDescription() }}</p>\n      </div>\n      }\n\n      <!-- Body Content -->\n      <div #modalContent class=\"c-modal__content__body__content\">\n        <ng-content></ng-content>\n      </div>\n    </div>\n\n    <!-- Footer with Buttons -->\n    @if (getPrimaryButton() || getSecondaryButton()) {\n    <div class=\"c-modal__content__footer\">\n      @if (getSecondaryButton()) {\n      <lib-button\n        class=\"c-modal__content__footer__button secondary\"\n        [text]=\"getSecondaryButton()!.text\"\n        [variant]=\"getSecondaryButton()!.variant\"\n        [disabled]=\"getSecondaryButton()!.disabled ?? false\"\n        [loading]=\"getSecondaryButton()!.loading ?? false\"\n        [fullWidth]=\"true\"\n        (clicked)=\"onSecondaryButtonClick()\"\n      ></lib-button>\n      } @if (getPrimaryButton()) {\n      <lib-button\n        class=\"c-modal__content__footer__button primary\"\n        [text]=\"getPrimaryButton()!.text\"\n        [variant]=\"getPrimaryButton()!.variant\"\n        [disabled]=\"getPrimaryButton()!.disabled ?? false\"\n        [loading]=\"getPrimaryButton()!.loading ?? false\"\n        [fullWidth]=\"true\"\n        (clicked)=\"onPrimaryButtonClick()\"\n      ></lib-button>\n      }\n    </div>\n    }\n  </div>\n</div>\n}\n", styles: [".c-modal{position:fixed;top:0;left:0;width:100%;height:100%;z-index:100;display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transition:opacity .2s ease-in-out,visibility .2s ease-in-out}.c-modal--open{opacity:1;visibility:visible}.c-modal__content{background-color:var(--color-core-background-surface-floating);padding:var(--space-container-padding-sm) 0;box-shadow:var(--elevation-floating);border-radius:var(--size-border-radius-lg);overflow:hidden;display:flex;flex-direction:column;width:100%}.c-modal__content--open{transform:scale(1)}.c-modal__content--sm{max-width:416px}.c-modal__content--md{max-width:636px}.c-modal__content--lg{max-width:856px}.c-modal__content__header{display:flex;align-items:center;padding:0 var(--space-container-padding-sm) var(--space-container-padding-sm);gap:var(--space-container-gap-sm)}.c-modal__content__header__right{flex:1;display:flex;justify-content:flex-end}.c-modal__content__header__title{margin:0;font-family:var(--typography-label-lg-strong-family),sans-serif;font-weight:var(--typography-label-lg-strong-weight);font-size:var(--typography-label-lg-strong-size);line-height:var(--typography-label-lg-strong-line-height);letter-spacing:var(--typography-label-lg-strong-letter-spacing);color:var(--color-core-content-default)}.c-modal__content__body{display:flex;flex-direction:column;flex:1;gap:var(--space-container-gap-md);padding:0 var(--space-container-padding-sm)}.c-modal__content__body__description p{margin:0;color:var(--color-core-content-soft);font-family:var(--typography-body-md-family),sans-serif;font-weight:var(--typography-body-md-weight);font-size:var(--typography-body-md-size);line-height:var(--typography-body-md-line-height);letter-spacing:var(--typography-body-md-letter-spacing)}.c-modal__content__body__content{overflow-y:auto;margin:-2px;padding:2px}.c-modal__content--sm .c-modal__content__body__content{max-height:200px}.c-modal__content--md .c-modal__content__body__content{min-height:200px;max-height:600px}.c-modal__content--lg .c-modal__content__body__content{min-height:600px;max-height:800px}.c-modal__content__footer{display:flex;justify-content:flex-end;gap:var(--space-component-gap-md);padding:var(--space-container-padding-sm) var(--space-container-padding-sm) 0}@media (max-width: 768px){.c-modal__content__footer{flex-direction:column;gap:var(--space-component-gap-md)}}@media (max-width: 768px){.c-modal__content__footer__button{width:100%}}.c-modal__content__footer__button.primary{order:2}.c-modal__content__footer__button.secondary{order:1}.c-modal__backdrop{position:absolute;top:0;left:0;width:100%;height:100%;background-color:var(--color-effect-overlay);opacity:0;transition:opacity .2s ease-in-out}.c-modal__backdrop--open{opacity:1}@media (max-width: 768px){.c-modal{align-items:flex-end}.c-modal--sm .c-modal__content,.c-modal--md .c-modal__content{position:fixed;bottom:0;left:0;right:0;width:100%;max-width:none;transform:translateY(100%);transition:transform .3s ease-in-out;border-bottom-left-radius:0;border-bottom-right-radius:0}.c-modal--sm.c-modal--open .c-modal__content,.c-modal--md.c-modal--open .c-modal__content{transform:none;perspective:none;contain:none}.c-modal--lg{align-items:stretch}.c-modal--lg .c-modal__content{position:fixed;inset:0;width:100%;height:100%;max-width:none;border-radius:0;transform:scale(.95);transition:transform .3s ease-in-out}.c-modal--lg.c-modal--open .c-modal__content{transform:scale(1)}}\n"] }]
+            args: [{ selector: 'lib-modal', imports: [NgClass, ButtonComponent, ButtonIconComponent], template: "@if (isModalOpen()) {\n<div class=\"c-modal\" [ngClass]=\"getClasses()\">\n  <!-- Backdrop -->\n  <div\n    class=\"c-modal__backdrop\"\n    [ngClass]=\"getBackdropClasses()\"\n    (click)=\"onBackdropClick()\"\n    (keydown.escape)=\"onEscapeKey()\"\n    tabindex=\"0\"\n    role=\"button\"\n    aria-label=\"Close modal\"\n  ></div>\n\n  <!-- Modal Content -->\n  <div\n    class=\"c-modal__content\"\n    [ngClass]=\"getContentClasses()\"\n    (keydown.escape)=\"onEscapeKey()\"\n    role=\"dialog\"\n    tabindex=\"-1\"\n    [attr.aria-labelledby]=\"getTitle() ? 'modal-title' : null\"\n    [attr.aria-describedby]=\"getDescription() ? 'modal-description' : null\"\n  >\n    <!-- Header -->\n    @if (getTitle() || getShowCloseButton()) {\n    <div class=\"c-modal__content__header\">\n      <div class=\"c-modal__content__header__left\">\n        @if (getTitle()) {\n        <p id=\"modal-title\" class=\"c-modal__content__header__title\">\n          {{ getTitle() }}\n        </p>\n        }\n      </div>\n      @if (getShowCloseButton()) {\n      <div class=\"c-modal__content__header__right\">\n        <lib-button-icon\n          iconName=\"x-regular\"\n          size=\"sm\"\n          variant=\"neutral\"\n          (click)=\"onCloseButtonClick()\"\n          aria-label=\"Close modal\"\n        ></lib-button-icon>\n      </div>\n      }\n    </div>\n    }\n\n    <!-- Description -->\n    <div class=\"c-modal__content__body\">\n      @if (getDescription()) {\n      <div id=\"modal-description\" class=\"c-modal__content__body__description\">\n        <p>{{ getDescription() }}</p>\n      </div>\n      }\n\n      <!-- Body Content -->\n      <div #modalContent class=\"c-modal__content__body__content\">\n        <ng-content></ng-content>\n      </div>\n    </div>\n\n    <!-- Footer with Buttons -->\n    @if (getPrimaryButton() || getSecondaryButton()) {\n    <div class=\"c-modal__content__footer\">\n      @if (getSecondaryButton()) {\n      <lib-button\n        class=\"c-modal__content__footer__button secondary\"\n        [text]=\"getSecondaryButton()!.text\"\n        [variant]=\"getSecondaryButton()!.variant\"\n        [disabled]=\"getSecondaryButton()!.disabled ?? false\"\n        [loading]=\"getSecondaryButton()!.loading ?? false\"\n        [fullWidth]=\"true\"\n        (clicked)=\"onSecondaryButtonClick()\"\n      ></lib-button>\n      } @if (getPrimaryButton()) {\n      <lib-button\n        class=\"c-modal__content__footer__button primary\"\n        [text]=\"getPrimaryButton()!.text\"\n        [variant]=\"getPrimaryButton()!.variant\"\n        [disabled]=\"getPrimaryButton()!.disabled ?? false\"\n        [loading]=\"getPrimaryButton()!.loading ?? false\"\n        [fullWidth]=\"true\"\n        (clicked)=\"onPrimaryButtonClick()\"\n      ></lib-button>\n      }\n    </div>\n    }\n  </div>\n</div>\n}\n", styles: [".c-modal{position:fixed;top:0;left:0;width:100%;height:100%;z-index:10000;display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transition:opacity .2s ease-in-out,visibility .2s ease-in-out}.c-modal--open{opacity:1;visibility:visible}.c-modal__content{background-color:var(--color-core-background-surface-floating);padding:var(--space-container-padding-sm) 0;box-shadow:var(--elevation-floating);border-radius:var(--size-border-radius-lg);overflow:hidden;display:flex;flex-direction:column;width:100%}.c-modal__content--open{transform:scale(1)}.c-modal__content--sm{max-width:416px}.c-modal__content--md{max-width:636px}.c-modal__content--lg{max-width:856px}.c-modal__content__header{display:flex;align-items:center;padding:0 var(--space-container-padding-sm) var(--space-container-padding-sm);gap:var(--space-container-gap-sm)}.c-modal__content__header__right{flex:1;display:flex;justify-content:flex-end}.c-modal__content__header__title{margin:0;font-family:var(--typography-label-lg-strong-family),sans-serif;font-weight:var(--typography-label-lg-strong-weight);font-size:var(--typography-label-lg-strong-size);line-height:var(--typography-label-lg-strong-line-height);letter-spacing:var(--typography-label-lg-strong-letter-spacing);color:var(--color-core-content-default)}.c-modal__content__body{display:flex;flex-direction:column;flex:1;gap:var(--space-container-gap-md);padding:0 var(--space-container-padding-sm)}.c-modal__content__body__description p{margin:0;color:var(--color-core-content-soft);font-family:var(--typography-body-md-family),sans-serif;font-weight:var(--typography-body-md-weight);font-size:var(--typography-body-md-size);line-height:var(--typography-body-md-line-height);letter-spacing:var(--typography-body-md-letter-spacing)}.c-modal__content__body__content{overflow-y:auto;margin:-2px;padding:2px}.c-modal__content--sm .c-modal__content__body__content{max-height:200px}.c-modal__content--md .c-modal__content__body__content{min-height:200px;max-height:600px}.c-modal__content--lg .c-modal__content__body__content{min-height:600px;max-height:800px}.c-modal__content__footer{display:flex;justify-content:flex-end;gap:var(--space-component-gap-md);padding:var(--space-container-padding-sm) var(--space-container-padding-sm) 0}@media (max-width: 768px){.c-modal__content__footer{flex-direction:column;gap:var(--space-component-gap-md)}}@media (max-width: 768px){.c-modal__content__footer__button{width:100%}}.c-modal__content__footer__button.primary{order:2}.c-modal__content__footer__button.secondary{order:1}.c-modal__backdrop{position:absolute;top:0;left:0;width:100%;height:100%;background-color:var(--color-effect-overlay);opacity:0;transition:opacity .2s ease-in-out}.c-modal__backdrop--open{opacity:1}@media (max-width: 768px){.c-modal{align-items:flex-end}.c-modal--sm .c-modal__content,.c-modal--md .c-modal__content{position:fixed;bottom:0;left:0;right:0;width:100%;max-width:none;transform:translateY(100%);transition:transform .3s ease-in-out;border-bottom-left-radius:0;border-bottom-right-radius:0}.c-modal--sm.c-modal--open .c-modal__content,.c-modal--md.c-modal--open .c-modal__content{transform:none;perspective:none;contain:none}.c-modal--lg{align-items:stretch}.c-modal--lg .c-modal__content{position:fixed;inset:0;width:100%;height:100%;max-width:none;border-radius:0;transform:scale(.95);transition:transform .3s ease-in-out}.c-modal--lg.c-modal--open .c-modal__content{transform:scale(1)}}\n"] }]
         }], ctorParameters: () => [] });
 
 class ModalService {
@@ -7205,11 +7179,11 @@ class TileComponent {
         return this.variant === 'neutral' && this.name ? this.name : null;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: TileComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", type: TileComponent, isStandalone: true, selector: "lib-tile", inputs: { variant: "variant", paddingSize: "paddingSize", title: "title", name: "name", selected: "selected", disabled: "disabled", isLoading: "isLoading" }, outputs: { selectedChange: "selectedChange" }, ngImport: i0, template: "<div\n  class=\"c-tile\"\n  [class.c-tile--selected]=\"selected\"\n  [class.c-tile--neutral]=\"variant === 'neutral'\"\n  [class.c-tile--disabled]=\"disabled\"\n  [class.c-tile--padding-xs]=\"paddingSize === 'xs'\"\n  [class.is-loading]=\"isLoading\"\n  [attr.name]=\"tileName\"\n  [tabindex]=\"variant === 'neutral' ? 0 : -1\"\n  role=\"button\"\n  (click)=\"onClick()\"\n  (keyup.enter)=\"onClick()\"\n>\n  <div class=\"c-tile__wrapper\">\n    @if (isLoading) {\n    <div class=\"c-tile__skeleton\">\n      <span aria-hidden=\"true\"></span>\n    </div>\n    } @else {\n    <p *ngIf=\"title\" class=\"c-tile__title\">{{ title }}</p>\n    }\n    <lib-radio\n      *ngIf=\"variant === 'radio'\"\n      [name]=\"controlName\"\n      label=\"\"\n      [disabled]=\"disabled\"\n      [value]=\"selected ? 'true' : ''\"\n      [checked]=\"selected\"\n      (click)=\"onRadioClick($event)\"\n      class=\"c-tile__check\"\n    ></lib-radio>\n    <lib-checkbox\n      *ngIf=\"variant === 'checkbox'\"\n      [name]=\"controlName\"\n      label=\"\"\n      [disabled]=\"disabled\"\n      [state]=\"selected ? 'checked' : 'unchecked'\"\n    ></lib-checkbox>\n  </div>\n  <div class=\"c-tile__content\">\n    <ng-content></ng-content>\n  </div>\n</div>\n", styles: [".c-tile{display:flex;padding:var(--space-component-padding-lg);flex-direction:column;align-items:flex-start;border-radius:var(--size-border-radius-md);border:var(--size-border-width-sm) solid var(--color-tile-border-default);background:var(--color-tile-background-default);cursor:pointer}.c-tile:has(.c-tile__content:not(:empty)){gap:var(--space-container-gap-sm)}.c-tile:hover{border:var(--size-border-width-sm) solid var(--color-tile-border-hover);background:var(--color-tile-background-hover)}.c-tile--padding-xs{padding:4px}.c-tile--disabled{border:var(--size-border-width-sm) solid var(--color-tile-border-disabled);background:var(--color-tile-background-disabled);cursor:not-allowed}.c-tile--disabled:hover,.c-tile--disabled.c-tile--selected,.c-tile--disabled.c-tile--selected:hover{border:var(--size-border-width-sm) solid var(--color-tile-border-disabled);background:var(--color-tile-background-disabled)}.c-tile__wrapper{display:flex;gap:var(--space-component-gap-sm);width:100%;height:100%;align-items:center;justify-content:space-between}.c-tile__content{width:100%}.c-tile--selected,.c-tile--selected:hover{border:var(--size-border-width-sm, 1px) solid var(--color-tile-checked-border-default, #217870);background:var(--color-tile-checked-background-default, #edfdfa)}.c-tile:focus-visible{box-shadow:var(--focus-outset);outline:none}.c-tile__title{flex-grow:1;margin:0;color:var(--color-tile-content-default);font-family:var(--typography-label-md-strong-family);font-size:var(--typography-label-md-strong-size);font-style:normal;font-weight:var(--typography-label-md-strong-weight);line-height:var(--typography-label-md-strong-line-height);letter-spacing:var(--typography-label-md-strong-letter-spacing)}.c-tile--disabled .c-tile__title{color:var(--color-tile-content-disabled)}.c-tile.is-loading .c-tile__skeleton{flex-grow:1;display:flex;align-items:center;max-width:70px}.c-tile.is-loading .c-tile__skeleton span{display:block;width:100%;height:8px;background:var(--color-effect-skeleton-strong);border-radius:var(--size-border-radius-sm)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: RadioComponent, selector: "lib-radio", inputs: ["name", "label", "value", "disabled", "checked", "error", "isLoading", "id"], outputs: ["optionSelected"] }, { kind: "component", type: CheckboxComponent, selector: "lib-checkbox", inputs: ["label", "state", "errorActive", "skeletonActive", "disabled", "name", "value", "innerHTML", "ariaLabel"], outputs: ["changed"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", type: TileComponent, isStandalone: true, selector: "lib-tile", inputs: { variant: "variant", paddingSize: "paddingSize", title: "title", name: "name", selected: "selected", disabled: "disabled", isLoading: "isLoading" }, outputs: { selectedChange: "selectedChange" }, ngImport: i0, template: "<div\n  class=\"c-tile\"\n  [class.c-tile--selected]=\"selected\"\n  [class.c-tile--neutral]=\"variant === 'neutral'\"\n  [class.c-tile--disabled]=\"disabled\"\n  [class.c-tile--padding-xs]=\"paddingSize === 'xs'\"\n  [class.is-loading]=\"isLoading\"\n  [attr.name]=\"tileName\"\n  [tabindex]=\"variant === 'neutral' ? 0 : -1\"\n  role=\"button\"\n  (click)=\"onClick()\"\n  (keyup.enter)=\"onClick()\"\n>\n  @if (title) {\n  <div class=\"c-tile__wrapper\">\n    @if (isLoading) {\n    <div class=\"c-tile__skeleton\">\n      <span aria-hidden=\"true\"></span>\n    </div>\n    } @else {\n    <p class=\"c-tile__title\">{{ title }}</p>\n    }\n    <lib-radio\n      *ngIf=\"variant === 'radio'\"\n      [name]=\"controlName\"\n      label=\"\"\n      [disabled]=\"disabled\"\n      [value]=\"selected ? 'true' : ''\"\n      [checked]=\"selected\"\n      (click)=\"onRadioClick($event)\"\n      class=\"c-tile__check\"\n    ></lib-radio>\n    <lib-checkbox\n      *ngIf=\"variant === 'checkbox'\"\n      [name]=\"controlName\"\n      label=\"\"\n      [disabled]=\"disabled\"\n      [state]=\"selected ? 'checked' : 'unchecked'\"\n    ></lib-checkbox>\n  </div>\n  }\n  <div class=\"c-tile__content\">\n    <ng-content></ng-content>\n  </div>\n</div>\n", styles: [".c-tile{display:flex;padding:var(--space-component-padding-lg);flex-direction:column;align-items:flex-start;border-radius:var(--size-border-radius-md);border:var(--size-border-width-sm) solid var(--color-tile-border-default);background:var(--color-tile-background-default);cursor:pointer}.c-tile:has(.c-tile__content:not(:empty)){gap:var(--space-container-gap-sm)}.c-tile:hover{border:var(--size-border-width-sm) solid var(--color-tile-border-hover);background:var(--color-tile-background-hover)}.c-tile--padding-xs{padding:4px}.c-tile--disabled{border:var(--size-border-width-sm) solid var(--color-tile-border-disabled);background:var(--color-tile-background-disabled);cursor:not-allowed}.c-tile--disabled:hover,.c-tile--disabled.c-tile--selected,.c-tile--disabled.c-tile--selected:hover{border:var(--size-border-width-sm) solid var(--color-tile-border-disabled);background:var(--color-tile-background-disabled)}.c-tile__wrapper{display:flex;gap:var(--space-component-gap-sm);width:100%;height:100%;align-items:center;justify-content:space-between}.c-tile__content{width:100%}.c-tile--selected,.c-tile--selected:hover{border:var(--size-border-width-sm, 1px) solid var(--color-tile-checked-border-default, #217870);background:var(--color-tile-checked-background-default, #edfdfa)}.c-tile:focus-visible{box-shadow:var(--focus-outset);outline:none}.c-tile__title{flex-grow:1;margin:0;color:var(--color-tile-content-default);font-family:var(--typography-label-md-strong-family);font-size:var(--typography-label-md-strong-size);font-style:normal;font-weight:var(--typography-label-md-strong-weight);line-height:var(--typography-label-md-strong-line-height);letter-spacing:var(--typography-label-md-strong-letter-spacing)}.c-tile--disabled .c-tile__title{color:var(--color-tile-content-disabled)}.c-tile.is-loading .c-tile__skeleton{flex-grow:1;display:flex;align-items:center;max-width:70px}.c-tile.is-loading .c-tile__skeleton span{display:block;width:100%;height:8px;background:var(--color-effect-skeleton-strong);border-radius:var(--size-border-radius-sm)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: RadioComponent, selector: "lib-radio", inputs: ["name", "label", "value", "disabled", "checked", "error", "isLoading", "id"], outputs: ["optionSelected"] }, { kind: "component", type: CheckboxComponent, selector: "lib-checkbox", inputs: ["label", "state", "errorActive", "skeletonActive", "disabled", "name", "value", "innerHTML", "ariaLabel"], outputs: ["changed"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: TileComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-tile', imports: [CommonModule, RadioComponent, CheckboxComponent], template: "<div\n  class=\"c-tile\"\n  [class.c-tile--selected]=\"selected\"\n  [class.c-tile--neutral]=\"variant === 'neutral'\"\n  [class.c-tile--disabled]=\"disabled\"\n  [class.c-tile--padding-xs]=\"paddingSize === 'xs'\"\n  [class.is-loading]=\"isLoading\"\n  [attr.name]=\"tileName\"\n  [tabindex]=\"variant === 'neutral' ? 0 : -1\"\n  role=\"button\"\n  (click)=\"onClick()\"\n  (keyup.enter)=\"onClick()\"\n>\n  <div class=\"c-tile__wrapper\">\n    @if (isLoading) {\n    <div class=\"c-tile__skeleton\">\n      <span aria-hidden=\"true\"></span>\n    </div>\n    } @else {\n    <p *ngIf=\"title\" class=\"c-tile__title\">{{ title }}</p>\n    }\n    <lib-radio\n      *ngIf=\"variant === 'radio'\"\n      [name]=\"controlName\"\n      label=\"\"\n      [disabled]=\"disabled\"\n      [value]=\"selected ? 'true' : ''\"\n      [checked]=\"selected\"\n      (click)=\"onRadioClick($event)\"\n      class=\"c-tile__check\"\n    ></lib-radio>\n    <lib-checkbox\n      *ngIf=\"variant === 'checkbox'\"\n      [name]=\"controlName\"\n      label=\"\"\n      [disabled]=\"disabled\"\n      [state]=\"selected ? 'checked' : 'unchecked'\"\n    ></lib-checkbox>\n  </div>\n  <div class=\"c-tile__content\">\n    <ng-content></ng-content>\n  </div>\n</div>\n", styles: [".c-tile{display:flex;padding:var(--space-component-padding-lg);flex-direction:column;align-items:flex-start;border-radius:var(--size-border-radius-md);border:var(--size-border-width-sm) solid var(--color-tile-border-default);background:var(--color-tile-background-default);cursor:pointer}.c-tile:has(.c-tile__content:not(:empty)){gap:var(--space-container-gap-sm)}.c-tile:hover{border:var(--size-border-width-sm) solid var(--color-tile-border-hover);background:var(--color-tile-background-hover)}.c-tile--padding-xs{padding:4px}.c-tile--disabled{border:var(--size-border-width-sm) solid var(--color-tile-border-disabled);background:var(--color-tile-background-disabled);cursor:not-allowed}.c-tile--disabled:hover,.c-tile--disabled.c-tile--selected,.c-tile--disabled.c-tile--selected:hover{border:var(--size-border-width-sm) solid var(--color-tile-border-disabled);background:var(--color-tile-background-disabled)}.c-tile__wrapper{display:flex;gap:var(--space-component-gap-sm);width:100%;height:100%;align-items:center;justify-content:space-between}.c-tile__content{width:100%}.c-tile--selected,.c-tile--selected:hover{border:var(--size-border-width-sm, 1px) solid var(--color-tile-checked-border-default, #217870);background:var(--color-tile-checked-background-default, #edfdfa)}.c-tile:focus-visible{box-shadow:var(--focus-outset);outline:none}.c-tile__title{flex-grow:1;margin:0;color:var(--color-tile-content-default);font-family:var(--typography-label-md-strong-family);font-size:var(--typography-label-md-strong-size);font-style:normal;font-weight:var(--typography-label-md-strong-weight);line-height:var(--typography-label-md-strong-line-height);letter-spacing:var(--typography-label-md-strong-letter-spacing)}.c-tile--disabled .c-tile__title{color:var(--color-tile-content-disabled)}.c-tile.is-loading .c-tile__skeleton{flex-grow:1;display:flex;align-items:center;max-width:70px}.c-tile.is-loading .c-tile__skeleton span{display:block;width:100%;height:8px;background:var(--color-effect-skeleton-strong);border-radius:var(--size-border-radius-sm)}\n"] }]
+            args: [{ selector: 'lib-tile', imports: [CommonModule, RadioComponent, CheckboxComponent], template: "<div\n  class=\"c-tile\"\n  [class.c-tile--selected]=\"selected\"\n  [class.c-tile--neutral]=\"variant === 'neutral'\"\n  [class.c-tile--disabled]=\"disabled\"\n  [class.c-tile--padding-xs]=\"paddingSize === 'xs'\"\n  [class.is-loading]=\"isLoading\"\n  [attr.name]=\"tileName\"\n  [tabindex]=\"variant === 'neutral' ? 0 : -1\"\n  role=\"button\"\n  (click)=\"onClick()\"\n  (keyup.enter)=\"onClick()\"\n>\n  @if (title) {\n  <div class=\"c-tile__wrapper\">\n    @if (isLoading) {\n    <div class=\"c-tile__skeleton\">\n      <span aria-hidden=\"true\"></span>\n    </div>\n    } @else {\n    <p class=\"c-tile__title\">{{ title }}</p>\n    }\n    <lib-radio\n      *ngIf=\"variant === 'radio'\"\n      [name]=\"controlName\"\n      label=\"\"\n      [disabled]=\"disabled\"\n      [value]=\"selected ? 'true' : ''\"\n      [checked]=\"selected\"\n      (click)=\"onRadioClick($event)\"\n      class=\"c-tile__check\"\n    ></lib-radio>\n    <lib-checkbox\n      *ngIf=\"variant === 'checkbox'\"\n      [name]=\"controlName\"\n      label=\"\"\n      [disabled]=\"disabled\"\n      [state]=\"selected ? 'checked' : 'unchecked'\"\n    ></lib-checkbox>\n  </div>\n  }\n  <div class=\"c-tile__content\">\n    <ng-content></ng-content>\n  </div>\n</div>\n", styles: [".c-tile{display:flex;padding:var(--space-component-padding-lg);flex-direction:column;align-items:flex-start;border-radius:var(--size-border-radius-md);border:var(--size-border-width-sm) solid var(--color-tile-border-default);background:var(--color-tile-background-default);cursor:pointer}.c-tile:has(.c-tile__content:not(:empty)){gap:var(--space-container-gap-sm)}.c-tile:hover{border:var(--size-border-width-sm) solid var(--color-tile-border-hover);background:var(--color-tile-background-hover)}.c-tile--padding-xs{padding:4px}.c-tile--disabled{border:var(--size-border-width-sm) solid var(--color-tile-border-disabled);background:var(--color-tile-background-disabled);cursor:not-allowed}.c-tile--disabled:hover,.c-tile--disabled.c-tile--selected,.c-tile--disabled.c-tile--selected:hover{border:var(--size-border-width-sm) solid var(--color-tile-border-disabled);background:var(--color-tile-background-disabled)}.c-tile__wrapper{display:flex;gap:var(--space-component-gap-sm);width:100%;height:100%;align-items:center;justify-content:space-between}.c-tile__content{width:100%}.c-tile--selected,.c-tile--selected:hover{border:var(--size-border-width-sm, 1px) solid var(--color-tile-checked-border-default, #217870);background:var(--color-tile-checked-background-default, #edfdfa)}.c-tile:focus-visible{box-shadow:var(--focus-outset);outline:none}.c-tile__title{flex-grow:1;margin:0;color:var(--color-tile-content-default);font-family:var(--typography-label-md-strong-family);font-size:var(--typography-label-md-strong-size);font-style:normal;font-weight:var(--typography-label-md-strong-weight);line-height:var(--typography-label-md-strong-line-height);letter-spacing:var(--typography-label-md-strong-letter-spacing)}.c-tile--disabled .c-tile__title{color:var(--color-tile-content-disabled)}.c-tile.is-loading .c-tile__skeleton{flex-grow:1;display:flex;align-items:center;max-width:70px}.c-tile.is-loading .c-tile__skeleton span{display:block;width:100%;height:8px;background:var(--color-effect-skeleton-strong);border-radius:var(--size-border-radius-sm)}\n"] }]
         }], propDecorators: { variant: [{
                 type: Input
             }], paddingSize: [{