@acorex/components 21.0.1-next.3 → 21.0.1-next.30

package/fesm2022/acorex-components-action-sheet.mjs

@@ -1,17 +1,48 @@
+import * as i0 from '@angular/core';
+import { input, Directive, inject, ComponentRef, Injectable, DOCUMENT, PLATFORM_ID, Renderer2, signal, computed, TemplateRef, ViewContainerRef, ViewChild, ViewEncapsulation, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
 import { MXBaseComponent, AXComponent, AXClosableComponent, AXFocusableComponent } from '@acorex/cdk/common';
 import { AXDecoratorGenericComponent, AXDecoratorCloseButtonComponent } from '@acorex/components/decorators';
 import { AXTranslatorPipe } from '@acorex/core/translation';
-import { Dialog, DIALOG_DATA, DialogRef } from '@angular/cdk/dialog';
-import { TemplatePortal, ComponentPortal, CdkPortalOutlet } from '@angular/cdk/portal';
-import { isPlatformBrowser, AsyncPipe } from '@angular/common';
-import * as i0 from '@angular/core';
-import { inject, Injectable, DOCUMENT, PLATFORM_ID, Renderer2, signal, TemplateRef, HostListener, ViewEncapsulation, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
-import { GlobalPositionStrategy } from '@angular/cdk/overlay';
-import { Subject, BehaviorSubject } from 'rxjs';
+import { isPlatformBrowser, NgTemplateOutlet, AsyncPipe } from '@angular/common';
+import { AXOverlayService } from '@acorex/cdk/overlay';
+import { Subject } from 'rxjs';
+
+/**
+ * Base class for components that are displayed inside an action sheet.
+ * Extend this class to get access to the action sheet reference and helper methods.
+ *
+ * @example
+ * ```typescript
+ * @Component({...})
+ * export class MyActionSheetContent extends AXActionSheetComponentBase {
+ *   save() {
+ *     this.close({ saved: true });
+ *   }
+ * }
+ * ```
+ */
+class AXActionSheetComponentBase {
+    constructor() {
+        /** Reference to the parent action sheet */
+        this.__actionSheet__ = input(...(ngDevMode ? [undefined, { debugName: "__actionSheet__" }] : []));
+    }
+    /**
+     * Closes the action sheet with optional result data.
+     * @param data - Optional data to pass to the close handler
+     */
+    close(data = null) {
+        this.__actionSheet__()?.close(data);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AXActionSheetComponentBase, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.16", type: AXActionSheetComponentBase, isStandalone: true, inputs: { __actionSheet__: { classPropertyName: "__actionSheet__", publicName: "__actionSheet__", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AXActionSheetComponentBase, decorators: [{
+            type: Directive
+        }], propDecorators: { __actionSheet__: [{ type: i0.Input, args: [{ isSignal: true, alias: "__actionSheet__", required: false }] }] } });
 
 class AXActionSheetService {
     constructor() {
-        this.dialog = inject(Dialog);
+        this.overlayService = inject(AXOverlayService);
         this.actionSheetEvent = new Subject();
         this.actionSheetEvent$ = this.actionSheetEvent.asObservable();
     }
@@ -26,23 +57,24 @@ class AXActionSheetService {
      * @param isUserInteraction - Whether the action sheet is opened by user interaction (default: true).
      *                           This affects how the action sheet handles accessibility and focus management.
      * @returns A promise that resolves to a dialog reference containing methods to control the action sheet.
-     *          The reference includes methods like close() and a closed observable for tracking dialog state.
+     *          The reference includes methods like close(), setInputs() and a closed observable for tracking dialog state.
      * @example
      * ```typescript
      * const dialogRef = await actionSheetService.open({
      *   title: 'Choose an option',
-     *   items: [
-     *     { text: 'Option 1', value: 'opt1' },
-     *     { text: 'Option 2', value: 'opt2' }
-     *   ]
+     *   content: MyCustomComponent,
+     *   inputs: { userId: 123, userName: 'John' }
      * });
      *
+     * // Update inputs dynamically
+     * dialogRef.setInputs({ userName: 'Jane' });
+     *
      * dialogRef.closed.subscribe(result => {
      *   console.log('Action sheet closed with:', result.data);
      * });
      * ```
      */
-    open(config, isUserInteraction = true) {
+    async open(config, isUserInteraction = true) {
         const defaultConfig = {
             title: 'action-sheet.title',
             closeButton: true,
@@ -50,53 +82,87 @@ class AXActionSheetService {
             header: true,
         };
         config = Object.assign(defaultConfig, config);
-        const dialogRef = this.dialog.open(AXActionSheetComponent, {
-            data: config,
-            autoFocus: 'first-tabbable',
-            restoreFocus: true,
-            role: 'dialog',
-            ariaModal: true,
-            closeOnNavigation: true,
-            closeOnDestroy: true,
-            hasBackdrop: true,
-            panelClass: ['ax-action-sheet-panel'],
-            disableClose: true,
-            positionStrategy: new GlobalPositionStrategy().centerHorizontally().bottom(),
-        });
-        this.actionSheetEvent.next({
-            dialogRef,
-            data: { state: 'open' },
-            isUserInteraction,
-        });
-        if (config.closeOnBackdropClick) {
-            dialogRef.backdropClick.subscribe(() => {
-                const componentInstance = dialogRef.componentInstance;
-                if (componentInstance) {
-                    componentInstance.close();
-                }
-            });
-        }
-        const promise = new Promise((resolve) => {
-            const closed = new BehaviorSubject(null);
-            const axDialogRef = {
-                close: (e) => {
-                    dialogRef.close(e);
-                },
-                closed,
-            };
-            dialogRef.closed.subscribe((c) => {
-                if (c?.data) {
-                    closed.next({ data: c.data });
+        const closed = new Subject();
+        const onClose = new Subject();
+        // Using let because internalRef is assigned after overlayRef is created
+        // eslint-disable-next-line prefer-const
+        let internalRef;
+        const closeActionSheet = (result) => {
+            if (internalRef) {
+                internalRef.overlayRef.dispose();
+                onClose.next(result?.data);
+                onClose.complete();
+                if (result?.data) {
+                    closed.next({ data: result.data });
                 }
                 else {
                     closed.next({});
                 }
-            });
-            if (resolve) {
-                resolve(axDialogRef);
+                closed.complete();
             }
+        };
+        // Create the action sheet reference that will be passed to content components
+        const actionSheetRef = {
+            close: (data) => {
+                const component = internalRef?.overlayRef.instance;
+                if (component && 'close' in component) {
+                    component.close(data);
+                }
+                else {
+                    closeActionSheet({ data });
+                }
+            },
+            setInputs: (values) => {
+                const ref = internalRef?.overlayRef.instance;
+                if (ref && ref instanceof ComponentRef) {
+                    const componentInstance = ref.instance;
+                    componentInstance.setContentInputs(values);
+                }
+                else if (ref && 'setContentInputs' in ref) {
+                    ref.setContentInputs(values);
+                }
+            },
+            onClose,
+        };
+        const overlayRef = await this.overlayService.create(AXActionSheetComponent, {
+            inputs: {
+                data: config,
+                onClose: closeActionSheet,
+                __actionSheetRef__: actionSheetRef,
+            },
+            centered: false,
+            panelClass: ['ax-action-sheet-panel'],
+            backdrop: {
+                enabled: true,
+                background: true,
+                closeOnClick: config.closeOnBackdropClick,
+            },
+            onDispose: () => {
+                // Clean up when disposed externally (e.g., backdrop click)
+                closed.next({});
+                closed.complete();
+            },
         });
-        return promise;
+        internalRef = {
+            overlayRef,
+            close: closeActionSheet,
+        };
+        // Set the overlayRef input after creation
+        if (overlayRef.instance && 'setInput' in overlayRef.instance) {
+            overlayRef.instance.setInput('overlayRef', overlayRef);
+        }
+        // Positioning is handled by CSS via .ax-action-sheet-panel class
+        this.actionSheetEvent.next({
+            overlayRef,
+            data: { state: 'open' },
+            isUserInteraction,
+        });
+        const axDialogRef = {
+            close: actionSheetRef.close,
+            setInputs: actionSheetRef.setInputs,
+            onClose: actionSheetRef.onClose,
+        };
+        return axDialogRef;
     }
     /**
      * Sets the current state of action sheet events.
@@ -105,16 +171,16 @@ class AXActionSheetService {
      * observable for external subscribers to monitor action sheet state changes.
      *
      * @param event - The action sheet event to emit. Contains information about the event type,
-     *               associated data, user interaction status, and dialog reference.
+     *               associated data, user interaction status, and overlay reference.
      * @returns void
      */
     setActionSheetEventState(event) {
         this.actionSheetEvent.next(event);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AXActionSheetService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AXActionSheetService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AXActionSheetService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AXActionSheetService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AXActionSheetService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AXActionSheetService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -129,8 +195,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
 class AXActionSheetComponent extends MXBaseComponent {
     constructor() {
         super(...arguments);
-        this.data = inject(DIALOG_DATA);
-        this.dialogRef = inject(DialogRef);
+        /** Action sheet configuration data */
+        this.data = input.required(...(ngDevMode ? [{ debugName: "data" }] : []));
+        /** @internal Callback function to close the action sheet */
+        this.onClose = input(...(ngDevMode ? [undefined, { debugName: "onClose" }] : []));
+        /** @internal Overlay reference for event tracking */
+        this.overlayRef = input(...(ngDevMode ? [undefined, { debugName: "overlayRef" }] : []));
+        /** @internal Reference to the action sheet for content components */
+        this.__actionSheetRef__ = input(...(ngDevMode ? [undefined, { debugName: "__actionSheetRef__" }] : []));
         this.document = inject(DOCUMENT);
         this.platformID = inject(PLATFORM_ID);
         this.renderer = inject(Renderer2);
@@ -145,26 +217,56 @@ class AXActionSheetComponent extends MXBaseComponent {
         this.actionSheetHeight = signal(0, ...(ngDevMode ? [{ debugName: "actionSheetHeight" }] : []));
         this.isActionSheetHeightSet = signal(false, ...(ngDevMode ? [{ debugName: "isActionSheetHeightSet" }] : []));
         this.transitionDuration = signal(300, ...(ngDevMode ? [{ debugName: "transitionDuration" }] : []));
+        /**
+         *  @ignore
+         */
+        this._componentRef = null;
+        /** Template content if data.content is a TemplateRef */
+        this.templateContent = computed(() => {
+            const content = this.data().content;
+            return content instanceof TemplateRef ? content : null;
+        }, ...(ngDevMode ? [{ debugName: "templateContent" }] : []));
+        /** Component content if data.content is a component Type */
+        this.componentContent = computed(() => {
+            const content = this.data().content;
+            return typeof content === 'function' ? content : null;
+        }, ...(ngDevMode ? [{ debugName: "componentContent" }] : []));
+        /** Template context for ngTemplateOutlet */
+        this.templateContext = computed(() => ({
+            $implicit: this.data(),
+            ref: this,
+        }), ...(ngDevMode ? [{ debugName: "templateContext" }] : []));
+        /** Whether content has been rendered (for component content) */
+        this.isContentRendered = signal(false, ...(ngDevMode ? [{ debugName: "isContentRendered" }] : []));
     }
     /**
      *  @ignore
      */
     ngOnInit() {
         super.ngOnInit();
-        if (this.data.content) {
-            if (this.data.content instanceof TemplateRef) {
-                this._selectedPortal = new TemplatePortal(this.data.content, this.getViewContainer(), {
-                    $implicit: this.data,
-                    ref: this,
+        // Enter animation: start with height 0 and animate to natural height
+        if (isPlatformBrowser(this.platformID)) {
+            const hostElement = this.getHostElement();
+            hostElement.style.height = '0';
+            hostElement.style.overflow = 'hidden';
+            // Use requestAnimationFrame to ensure the initial height is applied before animating
+            requestAnimationFrame(() => {
+                hostElement.style.transitionDuration = `${this.transitionDuration()}ms`;
+                hostElement.style.height = 'auto';
+                // Get the natural height
+                const naturalHeight = hostElement.scrollHeight;
+                hostElement.style.height = '0';
+                requestAnimationFrame(() => {
+                    hostElement.style.height = `${naturalHeight}px`;
+                    // After animation completes, set height to auto for flexibility
+                    setTimeout(() => {
+                        hostElement.style.height = 'auto';
+                        hostElement.style.overflow = '';
+                    }, this.transitionDuration());
                 });
-                this.cdr.markForCheck();
-            }
-            else if (typeof this.data.content === 'function') {
-                this._selectedPortal = new ComponentPortal(this.data.content);
-                this.cdr.markForCheck();
-            }
+            });
         }
-        if (isPlatformBrowser(this.platformID) && this.data.draggable) {
+        if (isPlatformBrowser(this.platformID) && this.data().draggable) {
             this.onMouseMoveListenerFn = this.renderer.listen(this.document, 'mousemove', (e) => {
                 if (this.isDragging()) {
                     e.preventDefault();
@@ -184,7 +286,7 @@ class AXActionSheetComponent extends MXBaseComponent {
                         nativeEvent: e,
                         data: { state: 'dragEnd' },
                         isUserInteraction: true,
-                        dialogRef: this.dialogRef,
+                        overlayRef: this.overlayRef(),
                     });
                     this.snapToFinalPosition();
                 }
@@ -196,40 +298,106 @@ class AXActionSheetComponent extends MXBaseComponent {
                         nativeEvent: e,
                         data: { state: 'dragEnd' },
                         isUserInteraction: true,
-                        dialogRef: this.dialogRef,
+                        overlayRef: this.overlayRef(),
                     });
                     this.snapToFinalPosition();
                 }
             });
         }
     }
+    /**
+     *  @ignore
+     */
+    ngAfterViewInit() {
+        // Render component content after view is initialized (ViewChild is available)
+        this.renderComponentContent();
+    }
+    /**
+     * Renders the component content if provided.
+     * Uses ViewContainerRef to create the component and properly set inputs.
+     */
+    renderComponentContent() {
+        const componentType = this.componentContent();
+        if (!componentType || !this.contentContainerRef)
+            return;
+        const config = this.data();
+        // Create the component using ViewContainerRef
+        const componentRef = this.contentContainerRef.createComponent(componentType);
+        this._componentRef = componentRef;
+        // Get component input definitions to check before setting inputs
+        const inputDefs = componentRef.componentType?.ɵcmp
+            ?.inputs;
+        // Set data inputs (legacy support - deprecated)
+        if (config?.data && typeof config.data === 'object') {
+            Object.entries(config.data).forEach(([key, value]) => {
+                componentRef.instance[key] = value;
+            });
+        }
+        // Set inputs using setInput for proper change detection
+        if (config?.inputs && typeof config.inputs === 'object') {
+            Object.entries(config.inputs).forEach(([key, value]) => {
+                if (inputDefs && key in inputDefs) {
+                    componentRef.setInput(key, value);
+                }
+            });
+        }
+        // Set action sheet reference (only if the component has this input)
+        if (inputDefs && '__actionSheet__' in inputDefs) {
+            componentRef.setInput('__actionSheet__', this.__actionSheetRef__());
+        }
+        // Subscribe to close event if available
+        const instance = componentRef.instance;
+        if (instance.onClosed) {
+            instance.onClosed.subscribe((e) => {
+                this.close(e);
+            });
+        }
+        this.isContentRendered.set(true);
+        this.cdr.markForCheck();
+    }
+    /**
+     * Sets input values on the content component.
+     * @param values - Object containing input values to set
+     */
+    setContentInputs(values) {
+        if (this._componentRef) {
+            Object.entries(values).forEach(([key, value]) => {
+                this._componentRef.setInput(key, value);
+            });
+        }
+    }
     ngOnDestroy() {
         this.onMouseMoveListenerFn();
         this.onMouseUpListenerFn();
         this.onTouchMoveListenerFn();
         this.onTouchUpListenerFn();
+        // Clean up component reference
+        if (this._componentRef) {
+            this._componentRef.destroy();
+            this._componentRef = null;
+        }
     }
     handleMouseDown(e) {
-        if (!this.data.draggable || e.button !== 0)
+        if (!this.data().draggable || e.button !== 0)
             return;
         e.preventDefault();
         this.actionSheetService.setActionSheetEventState({
             nativeEvent: e,
             data: { state: 'dragStart' },
             isUserInteraction: true,
-            dialogRef: this.dialogRef,
+            overlayRef: this.overlayRef(),
         });
         this.handleDown(e.clientY);
     }
     handleTouchDown(e) {
-        if (!this.data.draggable || e.target.className.includes('close'))
+        if (!this.data().draggable || e.target.className.includes('close'))
             return;
         e.preventDefault();
         this.actionSheetService.setActionSheetEventState({
             nativeEvent: e,
             data: { state: 'dragStart' },
             isUserInteraction: true,
-            dialogRef: this.dialogRef,
+            overlayRef: this.overlayRef(),
         });
         this.handleDown(e.touches[0].clientY);
     }
@@ -259,18 +427,18 @@ class AXActionSheetComponent extends MXBaseComponent {
             this.actionSheetService.setActionSheetEventState({
                 data: { state: 'normalSize' },
                 isUserInteraction: true,
-                dialogRef: this.dialogRef,
+                overlayRef: this.overlayRef(),
             });
             return;
         }
-        if (this.data.dragUp && currentHeight > (windowHeight + initialHeight) / 3) {
+        if (this.data().dragUp && currentHeight > (windowHeight + initialHeight) / 3) {
             this.getHostElement().style.height = '100vh';
             this.isFullScreen.set(true);
             this.document.body.parentElement.style.overscrollBehaviorY = 'contain';
             this.actionSheetService.setActionSheetEventState({
                 data: { state: 'fullScreen' },
                 isUserInteraction: true,
-                dialogRef: this.dialogRef,
+                overlayRef: this.overlayRef(),
             });
             return;
         }
@@ -278,11 +446,11 @@ class AXActionSheetComponent extends MXBaseComponent {
         this.actionSheetService.setActionSheetEventState({
             data: { state: 'normalSize' },
             isUserInteraction: true,
-            dialogRef: this.dialogRef,
+            overlayRef: this.overlayRef(),
         });
     }
     heightCalculator(clientY) {
-        if (this.data.dragUp) {
+        if (this.data().dragUp) {
             return this.document.documentElement.clientHeight - clientY;
         }
         if (clientY >= this.document.documentElement.clientHeight - this.actionSheetHeight()) {
@@ -290,19 +458,6 @@ class AXActionSheetComponent extends MXBaseComponent {
         }
         return (this.actionSheetHeight() + (this.document.documentElement.clientHeight - clientY - this.actionSheetHeight()) / 10);
     }
-    handleAttched(ref) {
-        ref = ref;
-        if (ref.instance) {
-            this._componentRef = ref.instance;
-            Object.assign(this._componentRef, this.data);
-            Object.assign(this._componentRef, { _isPopup: true });
-            if (ref.instance.onClosed) {
-                ref.instance.onClosed.subscribe((e) => {
-                    this.close(e);
-                });
-            }
-        }
-    }
     /**
      * Handles click events on action sheet items.
      * This method is called when a user clicks on an action sheet item. It closes the action sheet
@@ -336,13 +491,16 @@ class AXActionSheetComponent extends MXBaseComponent {
             this.actionSheetService.setActionSheetEventState({
                 data: { state: 'close' },
                 isUserInteraction,
-                dialogRef: this.dialogRef,
-            });
-            this.dialogRef.close({
-                component: this._componentRef,
-                htmlElement: this.getHostElement(),
-                data: e,
+                overlayRef: this.overlayRef(),
             });
+            const closeCallback = this.onClose();
+            if (closeCallback) {
+                closeCallback({
+                    component: this._componentRef?.instance,
+                    htmlElement: this.getHostElement(),
+                    data: e,
+                });
+            }
         }, this.transitionDuration());
     }
     /**
@@ -350,12 +508,12 @@ class AXActionSheetComponent extends MXBaseComponent {
      */
     onKeydownHandler() {
         const focusedOrHasFocused = this.getHostElement().matches(':focus-within');
-        if (this.data.closeButton && focusedOrHasFocused) {
+        if (this.data().closeButton && focusedOrHasFocused) {
             this.close(null);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AXActionSheetComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: AXActionSheetComponent, isStandalone: true, selector: "ax-action-sheet", host: { listeners: { "keydown.escape": "onKeydownHandler()" } }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AXActionSheetComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: AXActionSheetComponent, isStandalone: true, selector: "ax-action-sheet", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, onClose: { classPropertyName: "onClose", publicName: "onClose", isSignal: true, isRequired: false, transformFunction: null }, overlayRef: { classPropertyName: "overlayRef", publicName: "overlayRef", isSignal: true, isRequired: false, transformFunction: null }, __actionSheetRef__: { classPropertyName: "__actionSheetRef__", publicName: "__actionSheetRef__", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "keydown.escape": "onKeydownHandler()" } }, providers: [
             { provide: AXComponent, useExisting: AXActionSheetComponent },
             {
                 provide: AXClosableComponent,
@@ -365,11 +523,13 @@ class AXActionSheetComponent extends MXBaseComponent {
                 provide: AXFocusableComponent,
                 useExisting: AXActionSheetComponent,
             },
-        ], usesInheritance: true, ngImport: i0, template: "@if (data.draggable) {\n  <div (mousedown)=\"handleMouseDown($event)\" (touchstart)=\"handleTouchDown($event)\" class=\"ax-drag-handle-container\">\n    <div class=\"ax-drag-handle\"></div>\n  </div>\n}\n@if (data.header) {\n  <ax-header\n    [class.draggable-header]=\"data.draggable\"\n    (mousedown)=\"data.draggable ? handleMouseDown($event) : null\"\n    (touchstart)=\"data.draggable ? handleTouchDown($event) : null\"\n  >\n    <ax-prefix>\n      <ax-title>{{ data.title | translate | async }}</ax-title>\n\n      @if (data.subTitle) {\n        <ax-subtitle>\n          {{ data.subTitle }}\n        </ax-subtitle>\n      }\n    </ax-prefix>\n    @if (data.closeButton) {\n      <ax-suffix>\n        <ax-close-button></ax-close-button>\n      </ax-suffix>\n    }\n  </ax-header>\n}\n@if (this.data.content) {\n  <div class=\"ax-custom-template-container\">\n    <ng-template [cdkPortalOutlet]=\"_selectedPortal\" (attached)=\"handleAttched($event)\"></ng-template>\n  </div>\n}\n\n<div class=\"ax-action-list ax-action-list-vertical\">\n  @for (item of data.items; let i = $index; track i) {\n    @if (item.group?.title) {\n      <ax-title>{{ item.group?.title }}</ax-title>\n    }\n    <div\n      class=\"ax-action-item ax-{{ item.color || 'default' }}\"\n      [class.ax-state-disabled]=\"item.disabled\"\n      [tabindex]=\"i\"\n      (click)=\"onItemClick(item)\"\n    >\n      <div class=\"ax-action-item-prefix\">\n        @if (item.icon) {\n          <span class=\"ax-item-icon\" [class]=\"item.icon\"></span>\n        }\n        <ax-text>{{ item.text | translate | async }}</ax-text>\n      </div>\n      <div class=\"ax-action-item-suffix\"></div>\n    </div>\n    @if (item.break) {\n      <ax-divider></ax-divider>\n    }\n  }\n</div>\n", styles: ["ax-action-sheet{--ax-comp-action-sheet-bg-color: var(--ax-sys-color-lightest-surface)}ax-action-sheet .ax-action-item.ax-primary{--ax-comp-action-sheet-text-color: var(--ax-sys-color-primary-surface);--ax-comp-action-sheet-hover-bg-color: var(--ax-sys-color-primary-surface), .1}ax-action-sheet .ax-action-item.ax-secondary{--ax-comp-action-sheet-text-color: var(--ax-sys-color-secondary-surface);--ax-comp-action-sheet-hover-bg-color: var(--ax-sys-color-secondary-surface), .1}ax-action-sheet .ax-action-item.ax-success{--ax-comp-action-sheet-text-color: var(--ax-sys-color-success-surface);--ax-comp-action-sheet-hover-bg-color: var(--ax-sys-color-success-surface), .1}ax-action-sheet .ax-action-item.ax-warning{--ax-comp-action-sheet-text-color: var(--ax-sys-color-warning-surface);--ax-comp-action-sheet-hover-bg-color: var(--ax-sys-color-warning-surface), .1}ax-action-sheet .ax-action-item.ax-danger{--ax-comp-action-sheet-text-color: var(--ax-sys-color-danger-surface);--ax-comp-action-sheet-hover-bg-color: var(--ax-sys-color-danger-surface), .1}ax-action-sheet .ax-action-item.ax-accent1{--ax-comp-action-sheet-text-color: var(--ax-sys-color-accent1-surface);--ax-comp-action-sheet-hover-bg-color: var(--ax-sys-color-accent1-surface), .1}ax-action-sheet .ax-action-item.ax-accent2{--ax-comp-action-sheet-text-color: var(--ax-sys-color-accent2-surface);--ax-comp-action-sheet-hover-bg-color: var(--ax-sys-color-accent2-surface), .1}ax-action-sheet .ax-action-item.ax-accent3{--ax-comp-action-sheet-text-color: var(--ax-sys-color-accent3-surface);--ax-comp-action-sheet-hover-bg-color: var(--ax-sys-color-accent3-surface), .1}ax-action-sheet .ax-action-item.ax-accent4{--ax-comp-action-sheet-text-color: var(--ax-sys-color-accent4-surface);--ax-comp-action-sheet-hover-bg-color: var(--ax-sys-color-accent4-surface), .1}ax-action-sheet .ax-action-item.ax-accent5{--ax-comp-action-sheet-text-color: var(--ax-sys-color-accent5-surface);--ax-comp-action-sheet-hover-bg-color: var(--ax-sys-color-accent5-surface), .1}ax-action-sheet .ax-action-item.ax-accent6{--ax-comp-action-sheet-text-color: var(--ax-sys-color-accent6-surface);--ax-comp-action-sheet-hover-bg-color: var(--ax-sys-color-accent6-surface), .1}ax-action-sheet .ax-action-item.ax-accent7{--ax-comp-action-sheet-text-color: var(--ax-sys-color-accent7-surface);--ax-comp-action-sheet-hover-bg-color: var(--ax-sys-color-accent7-surface), .1}ax-action-sheet{display:block;width:var(--ax-comp-action-sheet-width-sm, 100vw);position:relative;transition-property:height;transition-duration:var(--ax-sys-transition-duration);transition-timing-function:var(--ax-sys-transition-timing-function);background-color:rgba(var(--ax-comp-action-sheet-bg-color))}@media (min-width: 768px){ax-action-sheet{width:var(--ax-comp-action-sheet-width-md, 70vw)}}@media (min-width: 1024px){ax-action-sheet{width:var(--ax-comp-action-sheet-width-lg, 50vw)}}ax-action-sheet .ax-custom-template-container{overflow-y:auto;max-height:100vh}ax-action-sheet .ax-drag-handle-container{padding-top:.5rem}ax-action-sheet .ax-drag-handle-container .ax-drag-handle{height:.375rem;width:3rem;margin:auto;border-radius:.5rem;background-color:rgba(var(--ax-sys-color-surface))}ax-action-sheet ax-header{padding:1rem;border-bottom-width:1px;font-size:1rem;line-height:1.5rem;font-weight:500}@media (min-width: 768px){ax-action-sheet ax-header{font-size:1.125rem;line-height:1.75rem}}ax-action-sheet ax-header.draggable-header{padding-top:0;-webkit-user-select:none;user-select:none}ax-action-sheet ax-header ax-prefix,ax-action-sheet ax-header ax-suffix{display:flex;flex-direction:column;justify-content:flex-start}ax-action-sheet ax-header ax-prefix{align-items:flex-start}ax-action-sheet ax-header ax-prefix ax-title{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;line-clamp:1;-webkit-line-clamp:1}ax-action-sheet ax-header ax-suffix{align-items:flex-end;max-width:fit-content}ax-action-sheet .ax-action-list{overflow-y:auto;max-height:100vh}ax-action-sheet .ax-action-list ax-title{font-size:.875rem}ax-action-sheet .ax-action-list .ax-action-item{min-height:3.5rem!important;font-size:1rem!important;color:rgba(var(--ax-comp-action-sheet-text-color))}ax-action-sheet .ax-action-list .ax-action-item:hover:not(ax-action-sheet .ax-action-list .ax-action-item:hover.ax-state-disabled,ax-action-sheet .ax-action-list .ax-action-item:hover.ax-state-selected){background-color:rgba(var(--ax-comp-action-sheet-hover-bg-color, var(--ax-sys-color-surface)))!important}ax-action-sheet .ax-action-list .ax-action-item .ax-item-icon{margin-inline-end:.75rem!important;font-size:1.5rem!important;line-height:2rem!important}.ax-dark ax-action-sheet{--ax-comp-action-sheet-bg-color: var(--ax-sys-color-darker-surface)}\n"], dependencies: [{ kind: "component", type: AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "component", type: AXDecoratorCloseButtonComponent, selector: "ax-close-button", inputs: ["closeAll", "icon"] }, { kind: "directive", type: CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { kind: "pipe", type: AXTranslatorPipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+        ], viewQueries: [{ propertyName: "contentContainerRef", first: true, predicate: ["contentContainer"], descendants: true, read: ViewContainerRef }], usesInheritance: true, ngImport: i0, template: "@if (data().draggable) {\n  <div (mousedown)=\"handleMouseDown($event)\" (touchstart)=\"handleTouchDown($event)\" class=\"ax-drag-handle-container\">\n    <div class=\"ax-drag-handle\"></div>\n  </div>\n}\n@if (data().header) {\n  <ax-header\n    [class.draggable-header]=\"data().draggable\"\n    (mousedown)=\"data().draggable ? handleMouseDown($event) : null\"\n    (touchstart)=\"data().draggable ? handleTouchDown($event) : null\"\n  >\n    <ax-prefix>\n      <ax-title class=\"line-clamp-1\">{{ data().title | translate | async }}</ax-title>\n\n      @if (data().subTitle) {\n        <ax-subtitle class=\"line-clamp-2\">\n          {{ data().subTitle }}\n        </ax-subtitle>\n      }\n    </ax-prefix>\n    @if (data().closeButton) {\n      <ax-suffix>\n        <ax-close-button></ax-close-button>\n      </ax-suffix>\n    }\n  </ax-header>\n}\n@if (data().content) {\n  @if (templateContent()) {\n    <ng-container *ngTemplateOutlet=\"templateContent(); context: templateContext()\"></ng-container>\n  }\n  <!-- Component content container - always present but only populated when componentContent() is truthy -->\n  <ng-container #contentContainer></ng-container>\n}\n\n<div class=\"ax-action-list ax-action-list-vertical\">\n  @for (item of data().items; let i = $index; track i) {\n    @if (item.group?.title) {\n      <ax-title>{{ item.group?.title }}</ax-title>\n    }\n    <div\n      class=\"ax-action-item ax-{{ item.color || 'default' }}\"\n      [class.ax-state-disabled]=\"item.disabled\"\n      [tabindex]=\"i\"\n      (click)=\"onItemClick(item)\"\n    >\n      <div class=\"ax-action-item-prefix\">\n        @if (item.icon) {\n          <span class=\"ax-item-icon\" [class]=\"item.icon\"></span>\n        }\n        <ax-text>{{ item.text | translate | async }}</ax-text>\n      </div>\n      <div class=\"ax-action-item-suffix\"></div>\n    </div>\n    @if (item.break) {\n      <ax-divider></ax-divider>\n    }\n  }\n</div>\n", styles: ["@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style:solid;--tw-font-weight:initial}}}@layer components{ax-action-sheet{background-color:var(--color-lightest,rgba(var(--ax-sys-color-lightest-surface)));width:100vw;transition-property:all;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function,cubic-bezier(.4,0,.2,1)));transition-duration:var(--tw-duration,var(--default-transition-duration,.15s));display:block;position:relative}@media (min-width:48rem){ax-action-sheet{width:70vw}}@media (min-width:64rem){ax-action-sheet{width:50vw}}ax-action-sheet:where(.dark,.dark *){background-color:var(--color-darker,rgba(var(--ax-sys-color-darker-surface)))}ax-action-sheet .ax-drag-handle-container{padding-top:calc(var(--spacing,.25rem)*2)}ax-action-sheet .ax-drag-handle-container .ax-drag-handle{height:calc(var(--spacing,.25rem)*1);width:calc(var(--spacing,.25rem)*12);border-radius:var(--radius-lg,.5rem);background-color:var(--color-surface,rgba(var(--ax-sys-color-surface)));margin:auto}ax-action-sheet ax-header{border-bottom-style:var(--tw-border-style);padding:calc(var(--spacing,.25rem)*4);font-size:var(--text-base,1rem);line-height:var(--tw-leading,var(--text-base--line-height, 1.5 ));--tw-font-weight:var(--font-weight-medium,500);font-weight:var(--font-weight-medium,500);border-bottom-width:1px}@media (min-width:48rem){ax-action-sheet ax-header{font-size:var(--text-lg,1.125rem);line-height:var(--tw-leading,var(--text-lg--line-height,calc(1.75/1.125)))}}ax-action-sheet ax-header.draggable-header{padding-top:calc(var(--spacing,.25rem)*0);-webkit-user-select:none;user-select:none}ax-action-sheet ax-header ax-prefix,ax-action-sheet ax-header ax-suffix{flex-direction:column;justify-content:flex-start;display:flex}ax-action-sheet ax-header ax-prefix{align-items:flex-start}ax-action-sheet ax-header ax-prefix ax-title{-webkit-line-clamp:1;-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}ax-action-sheet ax-header ax-suffix{align-items:flex-end;max-width:fit-content}ax-action-sheet .ax-action-list{max-height:100vh;overflow-y:auto}ax-action-sheet .ax-action-list ax-title{font-size:var(--text-sm,.875rem);line-height:var(--tw-leading,var(--text-sm--line-height,calc(1.25/.875)))}ax-action-sheet .ax-action-list .ax-action-item{color:var(--ax-comp-bg);min-height:calc(var(--spacing,.25rem)*14)!important;font-size:var(--text-base,1rem)!important;line-height:var(--tw-leading,var(--text-base--line-height, 1.5 ))!important}ax-action-sheet .ax-action-list .ax-action-item:hover:not(ax-action-sheet .ax-action-list .ax-action-item:hover.ax-state-disabled,ax-action-sheet .ax-action-list .ax-action-item:hover.ax-state-selected){background-color:var(--ax-comp-bg)!important}@supports (color:color-mix(in lab,red,red)){ax-action-sheet .ax-action-list .ax-action-item:hover:not(ax-action-sheet .ax-action-list .ax-action-item:hover.ax-state-disabled,ax-action-sheet .ax-action-list .ax-action-item:hover.ax-state-selected){background-color:color-mix(in oklab,var(--ax-comp-bg)10%,transparent)!important}}ax-action-sheet .ax-action-list .ax-action-item.ax-default:hover:not(ax-action-sheet .ax-action-list .ax-action-item.ax-default:hover.ax-state-disabled,ax-action-sheet .ax-action-list .ax-action-item.ax-default:hover.ax-state-selected){background-color:var(--color-surface,rgba(var(--ax-sys-color-surface)))!important}ax-action-sheet .ax-action-list .ax-action-item .ax-item-icon{font-size:var(--text-2xl,1.5rem)!important;line-height:var(--tw-leading,var(--text-2xl--line-height,calc(2/1.5)))!important;margin-inline-end:calc(var(--spacing,.25rem)*3)!important}}@property --tw-border-style{syntax:\"*\";inherits:false;initial-value:solid}@property --tw-font-weight{syntax:\"*\";inherits:false}\n/*! tailwindcss v4.1.18 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "component", type: AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "component", type: AXDecoratorCloseButtonComponent, selector: "ax-close-button", inputs: ["closeAll", "icon"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: AXTranslatorPipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AXActionSheetComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AXActionSheetComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ax-action-sheet', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [
+            args: [{ selector: 'ax-action-sheet', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
+                        '(keydown.escape)': 'onKeydownHandler()',
+                    }, providers: [
                         { provide: AXComponent, useExisting: AXActionSheetComponent },
                         {
                             provide: AXClosableComponent,
@@ -379,18 +539,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                             provide: AXFocusableComponent,
                             useExisting: AXActionSheetComponent,
                         },
-                    ], imports: [AXDecoratorGenericComponent, AXDecoratorCloseButtonComponent, CdkPortalOutlet, AXTranslatorPipe, AsyncPipe], template: "@if (data.draggable) {\n  <div (mousedown)=\"handleMouseDown($event)\" (touchstart)=\"handleTouchDown($event)\" class=\"ax-drag-handle-container\">\n    <div class=\"ax-drag-handle\"></div>\n  </div>\n}\n@if (data.header) {\n  <ax-header\n    [class.draggable-header]=\"data.draggable\"\n    (mousedown)=\"data.draggable ? handleMouseDown($event) : null\"\n    (touchstart)=\"data.draggable ? handleTouchDown($event) : null\"\n  >\n    <ax-prefix>\n      <ax-title>{{ data.title | translate | async }}</ax-title>\n\n      @if (data.subTitle) {\n        <ax-subtitle>\n          {{ data.subTitle }}\n        </ax-subtitle>\n      }\n    </ax-prefix>\n    @if (data.closeButton) {\n      <ax-suffix>\n        <ax-close-button></ax-close-button>\n      </ax-suffix>\n    }\n  </ax-header>\n}\n@if (this.data.content) {\n  <div class=\"ax-custom-template-container\">\n    <ng-template [cdkPortalOutlet]=\"_selectedPortal\" (attached)=\"handleAttched($event)\"></ng-template>\n  </div>\n}\n\n<div class=\"ax-action-list ax-action-list-vertical\">\n  @for (item of data.items; let i = $index; track i) {\n    @if (item.group?.title) {\n      <ax-title>{{ item.group?.title }}</ax-title>\n    }\n    <div\n      class=\"ax-action-item ax-{{ item.color || 'default' }}\"\n      [class.ax-state-disabled]=\"item.disabled\"\n      [tabindex]=\"i\"\n      (click)=\"onItemClick(item)\"\n    >\n      <div class=\"ax-action-item-prefix\">\n        @if (item.icon) {\n          <span class=\"ax-item-icon\" [class]=\"item.icon\"></span>\n        }\n        <ax-text>{{ item.text | translate | async }}</ax-text>\n      </div>\n      <div class=\"ax-action-item-suffix\"></div>\n    </div>\n    @if (item.break) {\n      <ax-divider></ax-divider>\n    }\n  }\n</div>\n", styles: ["ax-action-sheet{--ax-comp-action-sheet-bg-color: var(--ax-sys-color-lightest-surface)}ax-action-sheet .ax-action-item.ax-primary{--ax-comp-action-sheet-text-color: var(--ax-sys-color-primary-surface);--ax-comp-action-sheet-hover-bg-color: var(--ax-sys-color-primary-surface), .1}ax-action-sheet .ax-action-item.ax-secondary{--ax-comp-action-sheet-text-color: var(--ax-sys-color-secondary-surface);--ax-comp-action-sheet-hover-bg-color: var(--ax-sys-color-secondary-surface), .1}ax-action-sheet .ax-action-item.ax-success{--ax-comp-action-sheet-text-color: var(--ax-sys-color-success-surface);--ax-comp-action-sheet-hover-bg-color: var(--ax-sys-color-success-surface), .1}ax-action-sheet .ax-action-item.ax-warning{--ax-comp-action-sheet-text-color: var(--ax-sys-color-warning-surface);--ax-comp-action-sheet-hover-bg-color: var(--ax-sys-color-warning-surface), .1}ax-action-sheet .ax-action-item.ax-danger{--ax-comp-action-sheet-text-color: var(--ax-sys-color-danger-surface);--ax-comp-action-sheet-hover-bg-color: var(--ax-sys-color-danger-surface), .1}ax-action-sheet .ax-action-item.ax-accent1{--ax-comp-action-sheet-text-color: var(--ax-sys-color-accent1-surface);--ax-comp-action-sheet-hover-bg-color: var(--ax-sys-color-accent1-surface), .1}ax-action-sheet .ax-action-item.ax-accent2{--ax-comp-action-sheet-text-color: var(--ax-sys-color-accent2-surface);--ax-comp-action-sheet-hover-bg-color: var(--ax-sys-color-accent2-surface), .1}ax-action-sheet .ax-action-item.ax-accent3{--ax-comp-action-sheet-text-color: var(--ax-sys-color-accent3-surface);--ax-comp-action-sheet-hover-bg-color: var(--ax-sys-color-accent3-surface), .1}ax-action-sheet .ax-action-item.ax-accent4{--ax-comp-action-sheet-text-color: var(--ax-sys-color-accent4-surface);--ax-comp-action-sheet-hover-bg-color: var(--ax-sys-color-accent4-surface), .1}ax-action-sheet .ax-action-item.ax-accent5{--ax-comp-action-sheet-text-color: var(--ax-sys-color-accent5-surface);--ax-comp-action-sheet-hover-bg-color: var(--ax-sys-color-accent5-surface), .1}ax-action-sheet .ax-action-item.ax-accent6{--ax-comp-action-sheet-text-color: var(--ax-sys-color-accent6-surface);--ax-comp-action-sheet-hover-bg-color: var(--ax-sys-color-accent6-surface), .1}ax-action-sheet .ax-action-item.ax-accent7{--ax-comp-action-sheet-text-color: var(--ax-sys-color-accent7-surface);--ax-comp-action-sheet-hover-bg-color: var(--ax-sys-color-accent7-surface), .1}ax-action-sheet{display:block;width:var(--ax-comp-action-sheet-width-sm, 100vw);position:relative;transition-property:height;transition-duration:var(--ax-sys-transition-duration);transition-timing-function:var(--ax-sys-transition-timing-function);background-color:rgba(var(--ax-comp-action-sheet-bg-color))}@media (min-width: 768px){ax-action-sheet{width:var(--ax-comp-action-sheet-width-md, 70vw)}}@media (min-width: 1024px){ax-action-sheet{width:var(--ax-comp-action-sheet-width-lg, 50vw)}}ax-action-sheet .ax-custom-template-container{overflow-y:auto;max-height:100vh}ax-action-sheet .ax-drag-handle-container{padding-top:.5rem}ax-action-sheet .ax-drag-handle-container .ax-drag-handle{height:.375rem;width:3rem;margin:auto;border-radius:.5rem;background-color:rgba(var(--ax-sys-color-surface))}ax-action-sheet ax-header{padding:1rem;border-bottom-width:1px;font-size:1rem;line-height:1.5rem;font-weight:500}@media (min-width: 768px){ax-action-sheet ax-header{font-size:1.125rem;line-height:1.75rem}}ax-action-sheet ax-header.draggable-header{padding-top:0;-webkit-user-select:none;user-select:none}ax-action-sheet ax-header ax-prefix,ax-action-sheet ax-header ax-suffix{display:flex;flex-direction:column;justify-content:flex-start}ax-action-sheet ax-header ax-prefix{align-items:flex-start}ax-action-sheet ax-header ax-prefix ax-title{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;line-clamp:1;-webkit-line-clamp:1}ax-action-sheet ax-header ax-suffix{align-items:flex-end;max-width:fit-content}ax-action-sheet .ax-action-list{overflow-y:auto;max-height:100vh}ax-action-sheet .ax-action-list ax-title{font-size:.875rem}ax-action-sheet .ax-action-list .ax-action-item{min-height:3.5rem!important;font-size:1rem!important;color:rgba(var(--ax-comp-action-sheet-text-color))}ax-action-sheet .ax-action-list .ax-action-item:hover:not(ax-action-sheet .ax-action-list .ax-action-item:hover.ax-state-disabled,ax-action-sheet .ax-action-list .ax-action-item:hover.ax-state-selected){background-color:rgba(var(--ax-comp-action-sheet-hover-bg-color, var(--ax-sys-color-surface)))!important}ax-action-sheet .ax-action-list .ax-action-item .ax-item-icon{margin-inline-end:.75rem!important;font-size:1.5rem!important;line-height:2rem!important}.ax-dark ax-action-sheet{--ax-comp-action-sheet-bg-color: var(--ax-sys-color-darker-surface)}\n"] }]
-        }], propDecorators: { onKeydownHandler: [{
-                type: HostListener,
-                args: ['keydown.escape']
+                    ], imports: [
+                        AXDecoratorGenericComponent,
+                        AXDecoratorCloseButtonComponent,
+                        NgTemplateOutlet,
+                        AXTranslatorPipe,
+                        AsyncPipe,
+                    ], template: "@if (data().draggable) {\n  <div (mousedown)=\"handleMouseDown($event)\" (touchstart)=\"handleTouchDown($event)\" class=\"ax-drag-handle-container\">\n    <div class=\"ax-drag-handle\"></div>\n  </div>\n}\n@if (data().header) {\n  <ax-header\n    [class.draggable-header]=\"data().draggable\"\n    (mousedown)=\"data().draggable ? handleMouseDown($event) : null\"\n    (touchstart)=\"data().draggable ? handleTouchDown($event) : null\"\n  >\n    <ax-prefix>\n      <ax-title class=\"line-clamp-1\">{{ data().title | translate | async }}</ax-title>\n\n      @if (data().subTitle) {\n        <ax-subtitle class=\"line-clamp-2\">\n          {{ data().subTitle }}\n        </ax-subtitle>\n      }\n    </ax-prefix>\n    @if (data().closeButton) {\n      <ax-suffix>\n        <ax-close-button></ax-close-button>\n      </ax-suffix>\n    }\n  </ax-header>\n}\n@if (data().content) {\n  @if (templateContent()) {\n    <ng-container *ngTemplateOutlet=\"templateContent(); context: templateContext()\"></ng-container>\n  }\n  <!-- Component content container - always present but only populated when componentContent() is truthy -->\n  <ng-container #contentContainer></ng-container>\n}\n\n<div class=\"ax-action-list ax-action-list-vertical\">\n  @for (item of data().items; let i = $index; track i) {\n    @if (item.group?.title) {\n      <ax-title>{{ item.group?.title }}</ax-title>\n    }\n    <div\n      class=\"ax-action-item ax-{{ item.color || 'default' }}\"\n      [class.ax-state-disabled]=\"item.disabled\"\n      [tabindex]=\"i\"\n      (click)=\"onItemClick(item)\"\n    >\n      <div class=\"ax-action-item-prefix\">\n        @if (item.icon) {\n          <span class=\"ax-item-icon\" [class]=\"item.icon\"></span>\n        }\n        <ax-text>{{ item.text | translate | async }}</ax-text>\n      </div>\n      <div class=\"ax-action-item-suffix\"></div>\n    </div>\n    @if (item.break) {\n      <ax-divider></ax-divider>\n    }\n  }\n</div>\n", styles: ["@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style:solid;--tw-font-weight:initial}}}@layer components{ax-action-sheet{background-color:var(--color-lightest,rgba(var(--ax-sys-color-lightest-surface)));width:100vw;transition-property:all;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function,cubic-bezier(.4,0,.2,1)));transition-duration:var(--tw-duration,var(--default-transition-duration,.15s));display:block;position:relative}@media (min-width:48rem){ax-action-sheet{width:70vw}}@media (min-width:64rem){ax-action-sheet{width:50vw}}ax-action-sheet:where(.dark,.dark *){background-color:var(--color-darker,rgba(var(--ax-sys-color-darker-surface)))}ax-action-sheet .ax-drag-handle-container{padding-top:calc(var(--spacing,.25rem)*2)}ax-action-sheet .ax-drag-handle-container .ax-drag-handle{height:calc(var(--spacing,.25rem)*1);width:calc(var(--spacing,.25rem)*12);border-radius:var(--radius-lg,.5rem);background-color:var(--color-surface,rgba(var(--ax-sys-color-surface)));margin:auto}ax-action-sheet ax-header{border-bottom-style:var(--tw-border-style);padding:calc(var(--spacing,.25rem)*4);font-size:var(--text-base,1rem);line-height:var(--tw-leading,var(--text-base--line-height, 1.5 ));--tw-font-weight:var(--font-weight-medium,500);font-weight:var(--font-weight-medium,500);border-bottom-width:1px}@media (min-width:48rem){ax-action-sheet ax-header{font-size:var(--text-lg,1.125rem);line-height:var(--tw-leading,var(--text-lg--line-height,calc(1.75/1.125)))}}ax-action-sheet ax-header.draggable-header{padding-top:calc(var(--spacing,.25rem)*0);-webkit-user-select:none;user-select:none}ax-action-sheet ax-header ax-prefix,ax-action-sheet ax-header ax-suffix{flex-direction:column;justify-content:flex-start;display:flex}ax-action-sheet ax-header ax-prefix{align-items:flex-start}ax-action-sheet ax-header ax-prefix ax-title{-webkit-line-clamp:1;-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}ax-action-sheet ax-header ax-suffix{align-items:flex-end;max-width:fit-content}ax-action-sheet .ax-action-list{max-height:100vh;overflow-y:auto}ax-action-sheet .ax-action-list ax-title{font-size:var(--text-sm,.875rem);line-height:var(--tw-leading,var(--text-sm--line-height,calc(1.25/.875)))}ax-action-sheet .ax-action-list .ax-action-item{color:var(--ax-comp-bg);min-height:calc(var(--spacing,.25rem)*14)!important;font-size:var(--text-base,1rem)!important;line-height:var(--tw-leading,var(--text-base--line-height, 1.5 ))!important}ax-action-sheet .ax-action-list .ax-action-item:hover:not(ax-action-sheet .ax-action-list .ax-action-item:hover.ax-state-disabled,ax-action-sheet .ax-action-list .ax-action-item:hover.ax-state-selected){background-color:var(--ax-comp-bg)!important}@supports (color:color-mix(in lab,red,red)){ax-action-sheet .ax-action-list .ax-action-item:hover:not(ax-action-sheet .ax-action-list .ax-action-item:hover.ax-state-disabled,ax-action-sheet .ax-action-list .ax-action-item:hover.ax-state-selected){background-color:color-mix(in oklab,var(--ax-comp-bg)10%,transparent)!important}}ax-action-sheet .ax-action-list .ax-action-item.ax-default:hover:not(ax-action-sheet .ax-action-list .ax-action-item.ax-default:hover.ax-state-disabled,ax-action-sheet .ax-action-list .ax-action-item.ax-default:hover.ax-state-selected){background-color:var(--color-surface,rgba(var(--ax-sys-color-surface)))!important}ax-action-sheet .ax-action-list .ax-action-item .ax-item-icon{font-size:var(--text-2xl,1.5rem)!important;line-height:var(--tw-leading,var(--text-2xl--line-height,calc(2/1.5)))!important;margin-inline-end:calc(var(--spacing,.25rem)*3)!important}}@property --tw-border-style{syntax:\"*\";inherits:false;initial-value:solid}@property --tw-font-weight{syntax:\"*\";inherits:false}\n/*! tailwindcss v4.1.18 | MIT License | https://tailwindcss.com */\n"] }]
+        }], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: true }] }], onClose: [{ type: i0.Input, args: [{ isSignal: true, alias: "onClose", required: false }] }], overlayRef: [{ type: i0.Input, args: [{ isSignal: true, alias: "overlayRef", required: false }] }], __actionSheetRef__: [{ type: i0.Input, args: [{ isSignal: true, alias: "__actionSheetRef__", required: false }] }], contentContainerRef: [{
+                type: ViewChild,
+                args: ['contentContainer', { read: ViewContainerRef }]
             }] } });
 
 class AXActionSheetModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AXActionSheetModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.15", ngImport: i0, type: AXActionSheetModule, imports: [AXActionSheetComponent], exports: [AXActionSheetComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AXActionSheetModule, providers: [AXActionSheetService], imports: [AXActionSheetComponent] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AXActionSheetModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.16", ngImport: i0, type: AXActionSheetModule, imports: [AXActionSheetComponent], exports: [AXActionSheetComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AXActionSheetModule, providers: [AXActionSheetService], imports: [AXActionSheetComponent] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AXActionSheetModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AXActionSheetModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [AXActionSheetComponent],
@@ -403,5 +569,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { AXActionSheetComponent, AXActionSheetModule, AXActionSheetService };
+export { AXActionSheetComponent, AXActionSheetComponentBase, AXActionSheetModule, AXActionSheetService };
 //# sourceMappingURL=acorex-components-action-sheet.mjs.map