@acorex/components 21.0.2-next.34 → 21.0.2-next.36

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

@@ -24,7 +24,7 @@ import { Subject } from 'rxjs';
 class AXActionSheetComponentBase {
     constructor() {
         /** Reference to the parent action sheet */
-        this.__actionSheet__ = input(...(ngDevMode ? [undefined, { debugName: "__actionSheet__" }] : /* istanbul ignore next */ []));
+        this.__actionSheet__ = input(...(ngDevMode ? [undefined, { debugName: "__actionSheet__" }] : []));
     }
     /**
      * Closes the action sheet with optional result data.
@@ -33,12 +33,12 @@ class AXActionSheetComponentBase {
     close(data = null) {
         this.__actionSheet__()?.close(data);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXActionSheetComponentBase, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.9", type: AXActionSheetComponentBase, isStandalone: true, inputs: { __actionSheet__: { classPropertyName: "__actionSheet__", publicName: "__actionSheet__", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXActionSheetComponentBase, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.3", 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: "21.2.9", ngImport: i0, type: AXActionSheetComponentBase, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXActionSheetComponentBase, decorators: [{
             type: Directive
-        }], propDecorators: { __actionSheet__: [{ type: i0.Input, args: [{ isSignal: true, alias: "__actionSheet__", required: false }] }] } });
+        }] });
 
 class AXActionSheetService {
     constructor() {
@@ -177,10 +177,10 @@ class AXActionSheetService {
     setActionSheetEventState(event) {
         this.actionSheetEvent.next(event);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXActionSheetService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXActionSheetService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXActionSheetService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXActionSheetService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXActionSheetService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXActionSheetService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -196,13 +196,13 @@ class AXActionSheetComponent extends MXBaseComponent {
     constructor() {
         super(...arguments);
         /** Action sheet configuration data */
-        this.data = input.required(...(ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []));
+        this.data = input.required(...(ngDevMode ? [{ debugName: "data" }] : []));
         /** @internal Callback function to close the action sheet */
-        this.onClose = input(...(ngDevMode ? [undefined, { debugName: "onClose" }] : /* istanbul ignore next */ []));
+        this.onClose = input(...(ngDevMode ? [undefined, { debugName: "onClose" }] : []));
         /** @internal Overlay reference for event tracking */
-        this.overlayRef = input(...(ngDevMode ? [undefined, { debugName: "overlayRef" }] : /* istanbul ignore next */ []));
+        this.overlayRef = input(...(ngDevMode ? [undefined, { debugName: "overlayRef" }] : []));
         /** @internal Reference to the action sheet for content components */
-        this.__actionSheetRef__ = input(...(ngDevMode ? [undefined, { debugName: "__actionSheetRef__" }] : /* istanbul ignore next */ []));
+        this.__actionSheetRef__ = input(...(ngDevMode ? [undefined, { debugName: "__actionSheetRef__" }] : []));
         this.document = inject(DOCUMENT);
         this.platformID = inject(PLATFORM_ID);
         this.renderer = inject(Renderer2);
@@ -211,12 +211,12 @@ class AXActionSheetComponent extends MXBaseComponent {
         this.onMouseUpListenerFn = () => undefined;
         this.onTouchMoveListenerFn = () => undefined;
         this.onTouchUpListenerFn = () => undefined;
-        this.isDragging = signal(false, ...(ngDevMode ? [{ debugName: "isDragging" }] : /* istanbul ignore next */ []));
-        this.isFullScreen = signal(false, ...(ngDevMode ? [{ debugName: "isFullScreen" }] : /* istanbul ignore next */ []));
-        this.curserOffset = signal(0, ...(ngDevMode ? [{ debugName: "curserOffset" }] : /* istanbul ignore next */ []));
-        this.actionSheetHeight = signal(0, ...(ngDevMode ? [{ debugName: "actionSheetHeight" }] : /* istanbul ignore next */ []));
-        this.isActionSheetHeightSet = signal(false, ...(ngDevMode ? [{ debugName: "isActionSheetHeightSet" }] : /* istanbul ignore next */ []));
-        this.transitionDuration = signal(300, ...(ngDevMode ? [{ debugName: "transitionDuration" }] : /* istanbul ignore next */ []));
+        this.isDragging = signal(false, ...(ngDevMode ? [{ debugName: "isDragging" }] : []));
+        this.isFullScreen = signal(false, ...(ngDevMode ? [{ debugName: "isFullScreen" }] : []));
+        this.curserOffset = signal(0, ...(ngDevMode ? [{ debugName: "curserOffset" }] : []));
+        this.actionSheetHeight = signal(0, ...(ngDevMode ? [{ debugName: "actionSheetHeight" }] : []));
+        this.isActionSheetHeightSet = signal(false, ...(ngDevMode ? [{ debugName: "isActionSheetHeightSet" }] : []));
+        this.transitionDuration = signal(300, ...(ngDevMode ? [{ debugName: "transitionDuration" }] : []));
         /**
          *  @ignore
          */
@@ -225,19 +225,19 @@ class AXActionSheetComponent extends MXBaseComponent {
         this.templateContent = computed(() => {
             const content = this.data().content;
             return content instanceof TemplateRef ? content : null;
-        }, ...(ngDevMode ? [{ debugName: "templateContent" }] : /* istanbul ignore next */ []));
+        }, ...(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" }] : /* istanbul ignore next */ []));
+        }, ...(ngDevMode ? [{ debugName: "componentContent" }] : []));
         /** Template context for ngTemplateOutlet */
         this.templateContext = computed(() => ({
             $implicit: this.data(),
             ref: this,
-        }), ...(ngDevMode ? [{ debugName: "templateContext" }] : /* istanbul ignore next */ []));
+        }), ...(ngDevMode ? [{ debugName: "templateContext" }] : []));
         /** Whether content has been rendered (for component content) */
-        this.isContentRendered = signal(false, ...(ngDevMode ? [{ debugName: "isContentRendered" }] : /* istanbul ignore next */ []));
+        this.isContentRendered = signal(false, ...(ngDevMode ? [{ debugName: "isContentRendered" }] : []));
     }
     /**
      *  @ignore
@@ -512,8 +512,8 @@ class AXActionSheetComponent extends MXBaseComponent {
             this.close(null);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXActionSheetComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", 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: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXActionSheetComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.3", 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,
@@ -523,9 +523,9 @@ class AXActionSheetComponent extends MXBaseComponent {
                 provide: AXFocusableComponent,
                 useExisting: AXActionSheetComponent,
             },
-        ], 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: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(.ax-dark,.ax-dark *){background-color: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: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: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.3.0 | 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 }); }
+        ], 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 line-clamp\">{{ data().title | translate | async }}</ax-title>\n\n      @if (data().subTitle) {\n        <ax-subtitle class=\"line-clamp-2 line-clamp\">\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: ["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-panel{position:fixed!important;bottom:0!important;left:50%!important;transform:translate(-50%)!important;top:auto!important;right:auto!important}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 .line-clamp{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical}ax-action-sheet .line-clamp-1{-webkit-line-clamp:1}ax-action-sheet .line-clamp-2{-webkit-line-clamp:2}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: 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: "21.2.9", ngImport: i0, type: AXActionSheetComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXActionSheetComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-action-sheet', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
                         '(keydown.escape)': 'onKeydownHandler()',
@@ -545,18 +545,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                         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: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(.ax-dark,.ax-dark *){background-color: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: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: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.3.0 | 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: [{
+                    ], 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 line-clamp\">{{ data().title | translate | async }}</ax-title>\n\n      @if (data().subTitle) {\n        <ax-subtitle class=\"line-clamp-2 line-clamp\">\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: ["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-panel{position:fixed!important;bottom:0!important;left:50%!important;transform:translate(-50%)!important;top:auto!important;right:auto!important}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 .line-clamp{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical}ax-action-sheet .line-clamp-1{-webkit-line-clamp:1}ax-action-sheet .line-clamp-2{-webkit-line-clamp:2}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: { contentContainerRef: [{
                 type: ViewChild,
                 args: ['contentContainer', { read: ViewContainerRef }]
             }] } });
 
 class AXActionSheetModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXActionSheetModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.9", ngImport: i0, type: AXActionSheetModule, imports: [AXActionSheetComponent], exports: [AXActionSheetComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXActionSheetModule, providers: [AXActionSheetService], imports: [AXActionSheetComponent] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXActionSheetModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.3", ngImport: i0, type: AXActionSheetModule, imports: [AXActionSheetComponent], exports: [AXActionSheetComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXActionSheetModule, providers: [AXActionSheetService], imports: [AXActionSheetComponent] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXActionSheetModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXActionSheetModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [AXActionSheetComponent],