npm - @acorex/components - Versions diffs - 21.0.0-next.50 → 21.0.0-next.51 - Mend

@acorex/components 21.0.0-next.50 → 21.0.0-next.51

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (108) hide show

package/code-editor/index.d.ts CHANGED Viewed

@@ -263,7 +263,7 @@ declare class AXCodeEditorComponent extends MXValueComponent<string> {
     /** Active language identifier from default plugins. Default: 'javascript'. */
     language: _angular_core.InputSignal<AXCodeEditorDefaultLanguage>;
     /** When true, the editor becomes readonly (non-editable). */
-    readOnly: _angular_core.InputSignal<boolean>;
+    editorReadonly: _angular_core.InputSignal<boolean>;
     /** Placeholder text shown when the document is empty. */
     placeholder: _angular_core.InputSignal<string>;
     /** Toggle rendering of line numbers in the gutter. */
@@ -274,12 +274,6 @@ declare class AXCodeEditorComponent extends MXValueComponent<string> {
     tabSize: _angular_core.InputSignal<number>;
     /** When true, the Tab key indents instead of moving focus. */
     indentWithTab: _angular_core.InputSignal<boolean>;
-    /** Fixed height for the editor (e.g., '320px'). */
-    height: _angular_core.InputSignal<string>;
-    /** Minimum height for the editor. */
-    minHeight: _angular_core.InputSignal<string>;
-    /** Maximum height for the editor. */
-    maxHeight: _angular_core.InputSignal<string>;
     /** Theme identifier. If null, uses platform theme mode (dark/light). */
     theme: _angular_core.InputSignal<string>;
     /** Additional CodeMirror extensions to apply. Reconfigures at runtime. */
@@ -306,7 +300,7 @@ declare class AXCodeEditorComponent extends MXValueComponent<string> {
     private pluginRegistry;
     private editorViewSig;
     private languageCompartment;
-    private readOnlyCompartment;
+    private readonlyCompartment;
     private themeCompartment;
     private placeholderCompartment;
     private wrappingCompartment;
@@ -338,7 +332,7 @@ declare class AXCodeEditorComponent extends MXValueComponent<string> {
     /** Returns the total number of lines in the current document. */
     getTotalLines(): number;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<AXCodeEditorComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AXCodeEditorComponent, "ax-code-editor", never, { "language": { "alias": "language"; "required": false; "isSignal": true; }; "readOnly": { "alias": "readOnly"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "lineNumbers": { "alias": "lineNumbers"; "required": false; "isSignal": true; }; "lineWrapping": { "alias": "lineWrapping"; "required": false; "isSignal": true; }; "tabSize": { "alias": "tabSize"; "required": false; "isSignal": true; }; "indentWithTab": { "alias": "indentWithTab"; "required": false; "isSignal": true; }; "height": { "alias": "height"; "required": false; "isSignal": true; }; "minHeight": { "alias": "minHeight"; "required": false; "isSignal": true; }; "maxHeight": { "alias": "maxHeight"; "required": false; "isSignal": true; }; "theme": { "alias": "theme"; "required": false; "isSignal": true; }; "extensions": { "alias": "extensions"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "focusOnReady": { "alias": "focusOnReady"; "required": false; "isSignal": true; }; "formatOnSave": { "alias": "formatOnSave"; "required": false; "isSignal": true; }; "customCompletions": { "alias": "customCompletions"; "required": false; "isSignal": true; }; }, { "ready": "ready"; "save": "save"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AXCodeEditorComponent, "ax-code-editor", never, { "disabled": { "alias": "disabled"; "required": false; }; "value": { "alias": "value"; "required": false; }; "state": { "alias": "state"; "required": false; }; "name": { "alias": "name"; "required": false; }; "id": { "alias": "id"; "required": false; }; "language": { "alias": "language"; "required": false; "isSignal": true; }; "editorReadonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "lineNumbers": { "alias": "lineNumbers"; "required": false; "isSignal": true; }; "lineWrapping": { "alias": "lineWrapping"; "required": false; "isSignal": true; }; "tabSize": { "alias": "tabSize"; "required": false; "isSignal": true; }; "indentWithTab": { "alias": "indentWithTab"; "required": false; "isSignal": true; }; "theme": { "alias": "theme"; "required": false; "isSignal": true; }; "extensions": { "alias": "extensions"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "focusOnReady": { "alias": "focusOnReady"; "required": false; "isSignal": true; }; "formatOnSave": { "alias": "formatOnSave"; "required": false; "isSignal": true; }; "customCompletions": { "alias": "customCompletions"; "required": false; "isSignal": true; }; }, { "onValueChanged": "onValueChanged"; "valueChange": "valueChange"; "stateChange": "stateChange"; "readonlyChange": "readonlyChange"; "disabledChange": "disabledChange"; "ready": "ready"; "save": "save"; }, never, ["ax-validation-rule"], true, never>;
 }
 declare class AXCodeEditorModule {

package/collapse/index.d.ts CHANGED Viewed

@@ -5,9 +5,8 @@ import { AfterViewInit, OnDestroy, EventEmitter, TemplateRef } from '@angular/co
 declare const AXCollapseGroupComponent_base: polytype.Polytype.ClusteredConstructor<[typeof MXBaseComponent, typeof MXLookComponent]>;
 /**
- * Container for collapsible items with configurable styling.
- *
- * @category Components
+ * @deprecated Use `accordion` instead.
+ * This component deprecated and no longer support.
  */
 declare class AXCollapseGroupComponent extends AXCollapseGroupComponent_base implements AfterViewInit, OnDestroy {
     /**
@@ -73,9 +72,8 @@ declare class AXCollapseClickEvent extends AXClickEvent {
 }
 declare const AXCollapseComponent_base: polytype.Polytype.ClusteredConstructor<[typeof MXInteractiveComponent, typeof MXLookComponent]>;
 /**
- * A component that provides a collapsible section with animated transitions.
- *
- * @category Components
+ * @deprecated Use `accordion` instead.
+ * This component deprecated and no longer support.
  */
 declare class AXCollapseComponent extends AXCollapseComponent_base {
     private parent;

package/fesm2022/acorex-components-accordion.mjs CHANGED Viewed

@@ -43,7 +43,7 @@ class AXAccordionItemComponent {
         this.isCollapsed.update((prev) => !prev);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AXAccordionItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: AXAccordionItemComponent, isStandalone: true, selector: "ax-accordion-item", inputs: { isCollapsed: { classPropertyName: "isCollapsed", publicName: "isCollapsed", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, caption: { classPropertyName: "caption", publicName: "caption", isSignal: true, isRequired: false, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null }, headerTemplate: { classPropertyName: "headerTemplate", publicName: "headerTemplate", isSignal: true, isRequired: false, transformFunction: null }, look: { classPropertyName: "look", publicName: "look", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { isCollapsed: "isCollapsedChange", isLoading: "isLoadingChange", onClick: "onClick" }, host: { properties: { "class": "this.__hostClass" } }, viewQueries: [{ propertyName: "accordionItem", first: true, predicate: AXAccordionItemDirective, descendants: true, isSignal: true }], ngImport: i0, template: "<div [(isCollapsed)]=\"isCollapsed\" axAccordionItem>\n  <div axAccordionItemHeader class=\"ax-accordion-header\">\n    @if (headerTemplate()) {\n      <div class=\"ax-accordion-custom-header-container\">\n        <ng-container\n          [ngTemplateOutlet]=\"headerTemplate()\"\n          [ngTemplateOutletContext]=\"{ $implicit: { caption: caption(), isCollapsed: isCollapsed() } }\"\n        ></ng-container>\n      </div>\n    } @else {\n      <div class=\"ax-accordion-header-container\">\n        <div class=\"ax-accordion-header-start\">\n          <span class=\"ax-accordion-header-icon\" [class]=\"icon()\"> </span>\n          <span>\n            {{ caption() }}\n          </span>\n        </div>\n        <div class=\"ax-accordion-header-end\">\n          @if (isLoading()) {\n            <ax-loading></ax-loading>\n          } @else {\n            <span\n              class=\"ax-icon ax-icon-chevron-left ax-accordion-arrow\"\n              [ngClass]=\"{ '-rotate-90': isCollapsed(), 'rotate-90': !isCollapsed() }\"\n            ></span>\n          }\n        </div>\n      </div>\n    }\n  </div>\n\n  <div axAccordionItemContent class=\"ax-accordion-body\">\n    <div class=\"ax-accordion-body-content\">\n      <ng-content></ng-content>\n    </div>\n  </div>\n</div>\n", styles: ["@layer components{ax-accordion-item{border-radius:var(--radius-lg,.5rem);width:100%;font-size:var(--text-base,1rem);line-height:var(--tw-leading,var(--text-base--line-height, 1.5 ));display:block;overflow:hidden}ax-accordion-item.ax-state-disabled{cursor:not-allowed;opacity:.5}ax-accordion-item .ax-accordion-header,ax-accordion-item .ax-accordion-body{font-size:var(--text-sm,.875rem);line-height:var(--tw-leading,var(--text-sm--line-height,calc(1.25/.875)));color:var(--color-on-lightest,rgba(var(--ax-sys-color-on-lightest-surface)))!important}ax-accordion-item .ax-accordion-header{cursor:pointer;padding:calc(var(--spacing,.25rem)*3);-webkit-user-select:none;user-select:none}ax-accordion-item .ax-accordion-header .ax-accordion-header-container{justify-content:space-between;display:flex}ax-accordion-item .ax-accordion-header .ax-accordion-header-container .ax-accordion-header-start{align-items:center;display:flex}ax-accordion-item .ax-accordion-header .ax-accordion-header-container .ax-accordion-header-start:not(:empty) .ax-accordion-header-icon{padding-inline-end:calc(var(--spacing,.25rem)*2)}ax-accordion-item .ax-accordion-header .ax-accordion-header-container .ax-accordion-header-start .ax-accordion-header-end{height:calc(var(--spacing,.25rem)*6);width:calc(var(--spacing,.25rem)*6);justify-content:center;align-items:center;display:flex}ax-accordion-item .ax-accordion-header .ax-accordion-header-container .ax-accordion-header-start .ax-accordion-header-end .ax-accordion-arrow{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}ax-accordion-item .ax-accordion-body .ax-accordion-body-content{padding:calc(var(--spacing,.25rem)*4);padding-inline-start:calc(var(--spacing,.25rem)*4);padding-inline-end:calc(var(--spacing,.25rem)*4)}}\n/*! tailwindcss v4.1.17 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: AXLoadingModule }, { kind: "component", type: i1.AXLoadingComponent, selector: "ax-loading", inputs: ["visible", "type", "context"], outputs: ["visibleChange"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: AXAccordionItemHeaderDirective, selector: "[axAccordionItemHeader]", exportAs: ["axAccordionItemHeader"] }, { kind: "directive", type: AXAccordionItemDirective, selector: "[axAccordionItem]", inputs: ["isCollapsed"], outputs: ["isCollapsedChange", "onClick"], exportAs: ["axAccordionItem"] }, { kind: "directive", type: AXAccordionItemContentDirective, selector: "[axAccordionItemContent]", inputs: ["transition"], exportAs: ["axAccordionItemContent"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: AXAccordionItemComponent, isStandalone: true, selector: "ax-accordion-item", inputs: { isCollapsed: { classPropertyName: "isCollapsed", publicName: "isCollapsed", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, caption: { classPropertyName: "caption", publicName: "caption", isSignal: true, isRequired: false, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null }, headerTemplate: { classPropertyName: "headerTemplate", publicName: "headerTemplate", isSignal: true, isRequired: false, transformFunction: null }, look: { classPropertyName: "look", publicName: "look", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { isCollapsed: "isCollapsedChange", isLoading: "isLoadingChange", onClick: "onClick" }, host: { properties: { "class": "this.__hostClass" } }, viewQueries: [{ propertyName: "accordionItem", first: true, predicate: AXAccordionItemDirective, descendants: true, isSignal: true }], ngImport: i0, template: "<div [(isCollapsed)]=\"isCollapsed\" axAccordionItem>\n  <div axAccordionItemHeader class=\"ax-accordion-header\">\n    @if (headerTemplate()) {\n      <div class=\"ax-accordion-custom-header-container\">\n        <ng-container\n          [ngTemplateOutlet]=\"headerTemplate()\"\n          [ngTemplateOutletContext]=\"{ $implicit: { caption: caption(), isCollapsed: isCollapsed() } }\"\n        ></ng-container>\n      </div>\n    } @else {\n      <div class=\"ax-accordion-header-container\">\n        <div class=\"ax-accordion-header-start\">\n          <span class=\"ax-accordion-header-icon\" [class]=\"icon()\"> </span>\n          <span>\n            {{ caption() }}\n          </span>\n        </div>\n        <div class=\"ax-accordion-header-end\">\n          @if (isLoading()) {\n            <ax-loading></ax-loading>\n          } @else {\n            <span\n              class=\"ax-icon ax-icon-chevron-left ax-accordion-arrow\"\n              [ngClass]=\"{ '-rotate-90': isCollapsed(), 'rotate-90': !isCollapsed() }\"\n            ></span>\n          }\n        </div>\n      </div>\n    }\n  </div>\n\n  <div axAccordionItemContent class=\"ax-accordion-body\">\n    <div class=\"ax-accordion-body-content\">\n      <ng-content></ng-content>\n    </div>\n  </div>\n</div>\n", styles: ["@layer components{ax-accordion-item{border-radius:var(--radius-lg,.5rem);width:100%;font-size:var(--text-base,1rem);line-height:var(--tw-leading,var(--text-base--line-height, 1.5 ));display:block;overflow:hidden}ax-accordion-item.ax-state-disabled{cursor:not-allowed;opacity:.5}ax-accordion-item .ax-accordion-header,ax-accordion-item .ax-accordion-body{font-size:var(--text-sm,.875rem);line-height:var(--tw-leading,var(--text-sm--line-height,calc(1.25/.875)));color:var(--color-on-lightest,rgba(var(--ax-sys-color-on-lightest-surface)))!important}ax-accordion-item .ax-accordion-header{cursor:pointer;padding:calc(var(--spacing,.25rem)*3);-webkit-user-select:none;user-select:none}ax-accordion-item .ax-accordion-header .ax-accordion-header-container{justify-content:space-between;display:flex}ax-accordion-item .ax-accordion-header .ax-accordion-header-container .ax-accordion-header-start{align-items:center;display:flex}ax-accordion-item .ax-accordion-header .ax-accordion-header-container .ax-accordion-header-start:not(:empty) .ax-accordion-header-icon{padding-inline-end:calc(var(--spacing,.25rem)*2)}ax-accordion-item .ax-accordion-header .ax-accordion-header-container .ax-accordion-header-start .ax-accordion-header-end{height:calc(var(--spacing,.25rem)*6);width:calc(var(--spacing,.25rem)*6);justify-content:center;align-items:center;display:flex}ax-accordion-item .ax-accordion-header .ax-accordion-header-container .ax-accordion-header-start .ax-accordion-header-end .ax-accordion-arrow{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}ax-accordion-item .ax-accordion-body .ax-accordion-body-content{padding:calc(var(--spacing,.25rem)*4);padding-inline-start:calc(var(--spacing,.25rem)*4);padding-inline-end:calc(var(--spacing,.25rem)*4)}}\n/*! tailwindcss v4.1.18 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: AXLoadingModule }, { kind: "component", type: i1.AXLoadingComponent, selector: "ax-loading", inputs: ["visible", "type", "context"], outputs: ["visibleChange"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: AXAccordionItemHeaderDirective, selector: "[axAccordionItemHeader]", exportAs: ["axAccordionItemHeader"] }, { kind: "directive", type: AXAccordionItemDirective, selector: "[axAccordionItem]", inputs: ["isCollapsed"], outputs: ["isCollapsedChange", "onClick"], exportAs: ["axAccordionItem"] }, { kind: "directive", type: AXAccordionItemContentDirective, selector: "[axAccordionItemContent]", inputs: ["transition"], exportAs: ["axAccordionItemContent"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AXAccordionItemComponent, decorators: [{
             type: Component,
@@ -53,7 +53,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                         AXAccordionItemHeaderDirective,
                         AXAccordionItemDirective,
                         AXAccordionItemContentDirective,
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div [(isCollapsed)]=\"isCollapsed\" axAccordionItem>\n  <div axAccordionItemHeader class=\"ax-accordion-header\">\n    @if (headerTemplate()) {\n      <div class=\"ax-accordion-custom-header-container\">\n        <ng-container\n          [ngTemplateOutlet]=\"headerTemplate()\"\n          [ngTemplateOutletContext]=\"{ $implicit: { caption: caption(), isCollapsed: isCollapsed() } }\"\n        ></ng-container>\n      </div>\n    } @else {\n      <div class=\"ax-accordion-header-container\">\n        <div class=\"ax-accordion-header-start\">\n          <span class=\"ax-accordion-header-icon\" [class]=\"icon()\"> </span>\n          <span>\n            {{ caption() }}\n          </span>\n        </div>\n        <div class=\"ax-accordion-header-end\">\n          @if (isLoading()) {\n            <ax-loading></ax-loading>\n          } @else {\n            <span\n              class=\"ax-icon ax-icon-chevron-left ax-accordion-arrow\"\n              [ngClass]=\"{ '-rotate-90': isCollapsed(), 'rotate-90': !isCollapsed() }\"\n            ></span>\n          }\n        </div>\n      </div>\n    }\n  </div>\n\n  <div axAccordionItemContent class=\"ax-accordion-body\">\n    <div class=\"ax-accordion-body-content\">\n      <ng-content></ng-content>\n    </div>\n  </div>\n</div>\n", styles: ["@layer components{ax-accordion-item{border-radius:var(--radius-lg,.5rem);width:100%;font-size:var(--text-base,1rem);line-height:var(--tw-leading,var(--text-base--line-height, 1.5 ));display:block;overflow:hidden}ax-accordion-item.ax-state-disabled{cursor:not-allowed;opacity:.5}ax-accordion-item .ax-accordion-header,ax-accordion-item .ax-accordion-body{font-size:var(--text-sm,.875rem);line-height:var(--tw-leading,var(--text-sm--line-height,calc(1.25/.875)));color:var(--color-on-lightest,rgba(var(--ax-sys-color-on-lightest-surface)))!important}ax-accordion-item .ax-accordion-header{cursor:pointer;padding:calc(var(--spacing,.25rem)*3);-webkit-user-select:none;user-select:none}ax-accordion-item .ax-accordion-header .ax-accordion-header-container{justify-content:space-between;display:flex}ax-accordion-item .ax-accordion-header .ax-accordion-header-container .ax-accordion-header-start{align-items:center;display:flex}ax-accordion-item .ax-accordion-header .ax-accordion-header-container .ax-accordion-header-start:not(:empty) .ax-accordion-header-icon{padding-inline-end:calc(var(--spacing,.25rem)*2)}ax-accordion-item .ax-accordion-header .ax-accordion-header-container .ax-accordion-header-start .ax-accordion-header-end{height:calc(var(--spacing,.25rem)*6);width:calc(var(--spacing,.25rem)*6);justify-content:center;align-items:center;display:flex}ax-accordion-item .ax-accordion-header .ax-accordion-header-container .ax-accordion-header-start .ax-accordion-header-end .ax-accordion-arrow{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}ax-accordion-item .ax-accordion-body .ax-accordion-body-content{padding:calc(var(--spacing,.25rem)*4);padding-inline-start:calc(var(--spacing,.25rem)*4);padding-inline-end:calc(var(--spacing,.25rem)*4)}}\n/*! tailwindcss v4.1.17 | MIT License | https://tailwindcss.com */\n"] }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div [(isCollapsed)]=\"isCollapsed\" axAccordionItem>\n  <div axAccordionItemHeader class=\"ax-accordion-header\">\n    @if (headerTemplate()) {\n      <div class=\"ax-accordion-custom-header-container\">\n        <ng-container\n          [ngTemplateOutlet]=\"headerTemplate()\"\n          [ngTemplateOutletContext]=\"{ $implicit: { caption: caption(), isCollapsed: isCollapsed() } }\"\n        ></ng-container>\n      </div>\n    } @else {\n      <div class=\"ax-accordion-header-container\">\n        <div class=\"ax-accordion-header-start\">\n          <span class=\"ax-accordion-header-icon\" [class]=\"icon()\"> </span>\n          <span>\n            {{ caption() }}\n          </span>\n        </div>\n        <div class=\"ax-accordion-header-end\">\n          @if (isLoading()) {\n            <ax-loading></ax-loading>\n          } @else {\n            <span\n              class=\"ax-icon ax-icon-chevron-left ax-accordion-arrow\"\n              [ngClass]=\"{ '-rotate-90': isCollapsed(), 'rotate-90': !isCollapsed() }\"\n            ></span>\n          }\n        </div>\n      </div>\n    }\n  </div>\n\n  <div axAccordionItemContent class=\"ax-accordion-body\">\n    <div class=\"ax-accordion-body-content\">\n      <ng-content></ng-content>\n    </div>\n  </div>\n</div>\n", styles: ["@layer components{ax-accordion-item{border-radius:var(--radius-lg,.5rem);width:100%;font-size:var(--text-base,1rem);line-height:var(--tw-leading,var(--text-base--line-height, 1.5 ));display:block;overflow:hidden}ax-accordion-item.ax-state-disabled{cursor:not-allowed;opacity:.5}ax-accordion-item .ax-accordion-header,ax-accordion-item .ax-accordion-body{font-size:var(--text-sm,.875rem);line-height:var(--tw-leading,var(--text-sm--line-height,calc(1.25/.875)));color:var(--color-on-lightest,rgba(var(--ax-sys-color-on-lightest-surface)))!important}ax-accordion-item .ax-accordion-header{cursor:pointer;padding:calc(var(--spacing,.25rem)*3);-webkit-user-select:none;user-select:none}ax-accordion-item .ax-accordion-header .ax-accordion-header-container{justify-content:space-between;display:flex}ax-accordion-item .ax-accordion-header .ax-accordion-header-container .ax-accordion-header-start{align-items:center;display:flex}ax-accordion-item .ax-accordion-header .ax-accordion-header-container .ax-accordion-header-start:not(:empty) .ax-accordion-header-icon{padding-inline-end:calc(var(--spacing,.25rem)*2)}ax-accordion-item .ax-accordion-header .ax-accordion-header-container .ax-accordion-header-start .ax-accordion-header-end{height:calc(var(--spacing,.25rem)*6);width:calc(var(--spacing,.25rem)*6);justify-content:center;align-items:center;display:flex}ax-accordion-item .ax-accordion-header .ax-accordion-header-container .ax-accordion-header-start .ax-accordion-header-end .ax-accordion-arrow{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}ax-accordion-item .ax-accordion-body .ax-accordion-body-content{padding:calc(var(--spacing,.25rem)*4);padding-inline-start:calc(var(--spacing,.25rem)*4);padding-inline-end:calc(var(--spacing,.25rem)*4)}}\n/*! tailwindcss v4.1.18 | MIT License | https://tailwindcss.com */\n"] }]
         }], propDecorators: { isCollapsed: [{ type: i0.Input, args: [{ isSignal: true, alias: "isCollapsed", required: false }] }, { type: i0.Output, args: ["isCollapsedChange"] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], caption: [{ type: i0.Input, args: [{ isSignal: true, alias: "caption", required: false }] }], isLoading: [{ type: i0.Input, args: [{ isSignal: true, alias: "isLoading", required: false }] }, { type: i0.Output, args: ["isLoadingChange"] }], headerTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "headerTemplate", required: false }] }], look: [{ type: i0.Input, args: [{ isSignal: true, alias: "look", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], accordionItem: [{ type: i0.ViewChild, args: [i0.forwardRef(() => AXAccordionItemDirective), { isSignal: true }] }], onClick: [{ type: i0.Output, args: ["onClick"] }], __hostClass: [{
                 type: HostBinding,
                 args: ['class']
@@ -92,7 +92,7 @@ class AXAccordionGroupComponent {
     >
       <ng-content select="ax-accordion-item"></ng-content>
     </div>
-  `, isInline: true, styles: ["@layer components{ax-accordion-group{width:100%;font-size:var(--text-base,1rem);line-height:var(--tw-leading,var(--text-base--line-height, 1.5 ));display:block;overflow:hidden}ax-accordion-group ax-accordion-item{margin-bottom:calc(var(--spacing,.25rem)*2)}}\n/*! tailwindcss v4.1.17 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: AXLoadingModule }, { kind: "directive", type: AXAccordionGroupDirective, selector: "[axAccordionGroup]", inputs: ["accordion", "activeIndex", "collapsedOnItemClick"], exportAs: ["axAccordionGroup"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+  `, isInline: true, styles: ["@layer components{ax-accordion-group{width:100%;font-size:var(--text-base,1rem);line-height:var(--tw-leading,var(--text-base--line-height, 1.5 ));display:block;overflow:hidden}ax-accordion-group ax-accordion-item{margin-bottom:calc(var(--spacing,.25rem)*2)}}\n/*! tailwindcss v4.1.18 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: AXLoadingModule }, { kind: "directive", type: AXAccordionGroupDirective, selector: "[axAccordionGroup]", inputs: ["accordion", "activeIndex", "collapsedOnItemClick"], exportAs: ["axAccordionGroup"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AXAccordionGroupComponent, decorators: [{
             type: Component,
@@ -111,7 +111,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                             useExisting: AXAccordionGroupComponent,
                         },
                         { provide: AXComponent, useExisting: AXAccordionGroupComponent },
-                    ], styles: ["@layer components{ax-accordion-group{width:100%;font-size:var(--text-base,1rem);line-height:var(--tw-leading,var(--text-base--line-height, 1.5 ));display:block;overflow:hidden}ax-accordion-group ax-accordion-item{margin-bottom:calc(var(--spacing,.25rem)*2)}}\n/*! tailwindcss v4.1.17 | MIT License | https://tailwindcss.com */\n"] }]
+                    ], styles: ["@layer components{ax-accordion-group{width:100%;font-size:var(--text-base,1rem);line-height:var(--tw-leading,var(--text-base--line-height, 1.5 ));display:block;overflow:hidden}ax-accordion-group ax-accordion-item{margin-bottom:calc(var(--spacing,.25rem)*2)}}\n/*! tailwindcss v4.1.18 | MIT License | https://tailwindcss.com */\n"] }]
         }], propDecorators: { accordionGroup: [{ type: i0.ViewChild, args: [i0.forwardRef(() => AXAccordionGroupDirective), { isSignal: true }] }], content: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => AXAccordionItemComponent), { ...{ descendants: true }, isSignal: true }] }], accordion: [{ type: i0.Input, args: [{ isSignal: true, alias: "accordion", required: false }] }], activeIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeIndex", required: false }] }, { type: i0.Output, args: ["activeIndexChange"] }], look: [{ type: i0.Input, args: [{ isSignal: true, alias: "look", required: false }] }], collapsedOnItemClick: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsedOnItemClick", required: false }] }] } });
 class AXAccordionModule {

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

@@ -365,7 +365,7 @@ 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: ["@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-custom-template-container{max-height:100vh;overflow-y:auto}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.17 | 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: 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 }); }
+        ], 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: ["@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-custom-template-container{max-height:100vh;overflow-y:auto}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: 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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AXActionSheetComponent, decorators: [{
             type: Component,
@@ -379,7 +379,7 @@ 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: ["@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-custom-template-container{max-height:100vh;overflow-y:auto}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.17 | MIT License | https://tailwindcss.com */\n"] }]
+                    ], 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: ["@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-custom-template-container{max-height:100vh;overflow-y:auto}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: { onKeydownHandler: [{
                 type: HostListener,
                 args: ['keydown.escape']

package/fesm2022/acorex-components-alert.mjs CHANGED Viewed

@@ -131,14 +131,14 @@ class AXAlertComponent extends MXColorComponent {
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: AXAlertComponent, isStandalone: true, selector: "ax-alert", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: false, isRequired: false, transformFunction: null }, timeOut: { classPropertyName: "timeOut", publicName: "timeOut", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { colorChange: "colorChange", onClosed: "onClosed", timeOut: "timeOutChange" }, host: { properties: { "class": "this.__hostClass" } }, providers: [
             { provide: AXClosableComponent, useExisting: AXAlertComponent },
             { provide: AXComponent, useExisting: AXAlertComponent },
-        ], queries: [{ propertyName: "axIcon", first: true, predicate: ["ax-icon"], descendants: true, isSignal: true }, { propertyName: "axTitle", first: true, predicate: ["ax-title"], descendants: true, isSignal: true }, { propertyName: "axContent", first: true, predicate: ["ax-content"], descendants: true, isSignal: true }, { propertyName: "axFooter", first: true, predicate: ["ax-footer"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "@if (showInline()) {\n  <div class=\"ax-alert-inline\">\n    <div class=\"ax-alert-icon ax-icon-solid\">\n      <ng-container [ngTemplateOutlet]=\"icon\"></ng-container>\n    </div>\n    <div class=\"ax-alert-title\">\n      <ng-container [ngTemplateOutlet]=\"title\"></ng-container>\n    </div>\n    <div class=\"ax-alert-buttons\">\n      <ng-container [ngTemplateOutlet]=\"buttons\"></ng-container>\n    </div>\n    <ng-container [ngTemplateOutlet]=\"closeButton\"></ng-container>\n  </div>\n} @else {\n  <div class=\"ax-alert-block\">\n    <div class=\"ax-alert-icon ax-icon-solid\">\n      <ng-container [ngTemplateOutlet]=\"icon\"></ng-container>\n    </div>\n    <div class=\"ax-alert-content\">\n      <div class=\"ax-alert-title\">\n        <ng-container [ngTemplateOutlet]=\"title\"></ng-container>\n      </div>\n      <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\n      <ng-container [ngTemplateOutlet]=\"footer\"></ng-container>\n    </div>\n    <div><ng-container [ngTemplateOutlet]=\"closeButton\"></ng-container></div>\n  </div>\n}\n\n@if (timeOut()) {\n  <div class=\"ax-alert-progress\" [style.animation-duration.ms]=\"timeOut()\"></div>\n}\n\n<ng-template #buttons>\n  <ng-content select=\"ax-button\"> </ng-content>\n</ng-template>\n<ng-template #closeButton>\n  <ng-content select=\"ax-close-button\"> </ng-content>\n</ng-template>\n<ng-template #title>\n  <ng-content select=\"ax-title\"> </ng-content>\n</ng-template>\n<ng-template #icon>\n  <ng-content select=\"ax-icon\"> </ng-content>\n</ng-template>\n<ng-template #content>\n  <ng-content select=\"ax-content\"> </ng-content>\n</ng-template>\n<ng-template #footer>\n  <ng-content select=\"ax-footer\"> </ng-content>\n</ng-template>\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-leading:initial;--tw-font-weight:initial}}}@layer components{ax-alert{gap:calc(var(--spacing,.25rem)*4);border-radius:var(--radius-lg,.5rem);border-style:var(--tw-border-style);border-width:1px;border-color:var(--ax-comp-bg);background-color:var(--ax-comp-bg);width:100%;display:flex;position:relative;overflow:hidden}@supports (color:color-mix(in lab,red,red)){ax-alert{background-color:color-mix(in oklab,var(--ax-comp-bg)15%,transparent)}}ax-alert{padding:calc(var(--spacing,.25rem)*4);font-size:var(--text-sm,.875rem);line-height:var(--tw-leading,var(--text-sm--line-height,calc(1.25/.875)))}ax-alert ax-title,ax-alert ax-content{color:var(--color-on-lightest,rgba(var(--ax-sys-color-on-lightest-surface)))}ax-alert .ax-alert-progress{background-color:var(--ax-comp-text)}ax-alert .ax-alert-inline{flex:1;justify-content:center;align-items:center;display:flex}ax-alert .ax-alert-block{width:100%;display:flex}ax-alert .ax-alert-block .ax-alert-content{--tw-leading:calc(var(--spacing,.25rem)*6);line-height:calc(var(--spacing,.25rem)*6);flex-direction:column;flex:1;display:flex}ax-alert .ax-alert-block .ax-alert-content .ax-alert-title:empty{display:none}ax-alert .ax-alert-block .ax-alert-content .ax-alert-title:not(:empty)+ax-content:not(:empty){margin-top:calc(var(--spacing,.25rem)*2)}ax-alert .ax-alert-block .ax-alert-content ax-footer{margin-top:calc(var(--spacing,.25rem)*4)}ax-alert .ax-alert-icon{font-size:var(--text-lg,1.125rem);line-height:var(--tw-leading,var(--text-lg--line-height,calc(1.75/1.125)));color:var(--ax-comp-bg);border-radius:3.40282e38px;align-items:flex-start;padding-inline-end:calc(var(--spacing,.25rem)*2);display:grid}ax-alert .ax-alert-icon ax-icon{--tw-leading:var(--leading-normal,1.5);line-height:var(--leading-normal,1.5)}ax-alert .ax-alert-buttons{padding-inline-start:calc(var(--spacing,.25rem)*4)}ax-alert .ax-alert-title{flex-direction:column;flex:1;display:flex}ax-alert .ax-alert-title ax-title{font-size:var(--text-sm,.875rem);line-height:var(--tw-leading,var(--text-sm--line-height,calc(1.25/.875)));--tw-font-weight:var(--font-weight-medium,500);font-weight:var(--font-weight-medium,500)}ax-alert .ax-alert-progress{inset-inline-start:calc(var(--spacing,.25rem)*0);bottom:calc(var(--spacing,.25rem)*0);height:calc(var(--spacing,.25rem)*1);position:absolute}}@property --tw-border-style{syntax:\"*\";inherits:false;initial-value:solid}@property --tw-leading{syntax:\"*\";inherits:false}@property --tw-font-weight{syntax:\"*\";inherits:false}\n/*! tailwindcss v4.1.17 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+        ], queries: [{ propertyName: "axIcon", first: true, predicate: ["ax-icon"], descendants: true, isSignal: true }, { propertyName: "axTitle", first: true, predicate: ["ax-title"], descendants: true, isSignal: true }, { propertyName: "axContent", first: true, predicate: ["ax-content"], descendants: true, isSignal: true }, { propertyName: "axFooter", first: true, predicate: ["ax-footer"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "@if (showInline()) {\n  <div class=\"ax-alert-inline\">\n    <div class=\"ax-alert-icon ax-icon-solid\">\n      <ng-container [ngTemplateOutlet]=\"icon\"></ng-container>\n    </div>\n    <div class=\"ax-alert-title\">\n      <ng-container [ngTemplateOutlet]=\"title\"></ng-container>\n    </div>\n    <div class=\"ax-alert-buttons\">\n      <ng-container [ngTemplateOutlet]=\"buttons\"></ng-container>\n    </div>\n    <ng-container [ngTemplateOutlet]=\"closeButton\"></ng-container>\n  </div>\n} @else {\n  <div class=\"ax-alert-block\">\n    <div class=\"ax-alert-icon ax-icon-solid\">\n      <ng-container [ngTemplateOutlet]=\"icon\"></ng-container>\n    </div>\n    <div class=\"ax-alert-content\">\n      <div class=\"ax-alert-title\">\n        <ng-container [ngTemplateOutlet]=\"title\"></ng-container>\n      </div>\n      <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\n      <ng-container [ngTemplateOutlet]=\"footer\"></ng-container>\n    </div>\n    <div><ng-container [ngTemplateOutlet]=\"closeButton\"></ng-container></div>\n  </div>\n}\n\n@if (timeOut()) {\n  <div class=\"ax-alert-progress\" [style.animation-duration.ms]=\"timeOut()\"></div>\n}\n\n<ng-template #buttons>\n  <ng-content select=\"ax-button\"> </ng-content>\n</ng-template>\n<ng-template #closeButton>\n  <ng-content select=\"ax-close-button\"> </ng-content>\n</ng-template>\n<ng-template #title>\n  <ng-content select=\"ax-title\"> </ng-content>\n</ng-template>\n<ng-template #icon>\n  <ng-content select=\"ax-icon\"> </ng-content>\n</ng-template>\n<ng-template #content>\n  <ng-content select=\"ax-content\"> </ng-content>\n</ng-template>\n<ng-template #footer>\n  <ng-content select=\"ax-footer\"> </ng-content>\n</ng-template>\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-leading:initial;--tw-font-weight:initial}}}@layer components{ax-alert{gap:calc(var(--spacing,.25rem)*4);border-radius:var(--radius-lg,.5rem);border-style:var(--tw-border-style);border-width:1px;border-color:var(--ax-comp-bg);background-color:var(--ax-comp-bg);width:100%;display:flex;position:relative;overflow:hidden}@supports (color:color-mix(in lab,red,red)){ax-alert{background-color:color-mix(in oklab,var(--ax-comp-bg)15%,transparent)}}ax-alert{padding:calc(var(--spacing,.25rem)*4);font-size:var(--text-sm,.875rem);line-height:var(--tw-leading,var(--text-sm--line-height,calc(1.25/.875)))}ax-alert ax-title,ax-alert ax-content{color:var(--color-on-lightest,rgba(var(--ax-sys-color-on-lightest-surface)))}ax-alert .ax-alert-progress{background-color:var(--ax-comp-text)}ax-alert .ax-alert-inline{flex:1;justify-content:center;align-items:center;display:flex}ax-alert .ax-alert-block{width:100%;display:flex}ax-alert .ax-alert-block .ax-alert-content{--tw-leading:calc(var(--spacing,.25rem)*6);line-height:calc(var(--spacing,.25rem)*6);flex-direction:column;flex:1;display:flex}ax-alert .ax-alert-block .ax-alert-content .ax-alert-title:empty{display:none}ax-alert .ax-alert-block .ax-alert-content .ax-alert-title:not(:empty)+ax-content:not(:empty){margin-top:calc(var(--spacing,.25rem)*2)}ax-alert .ax-alert-block .ax-alert-content ax-footer{margin-top:calc(var(--spacing,.25rem)*4)}ax-alert .ax-alert-icon{font-size:var(--text-lg,1.125rem);line-height:var(--tw-leading,var(--text-lg--line-height,calc(1.75/1.125)));color:var(--ax-comp-bg);border-radius:3.40282e38px;align-items:flex-start;padding-inline-end:calc(var(--spacing,.25rem)*2);display:grid}ax-alert .ax-alert-icon ax-icon{--tw-leading:var(--leading-normal,1.5);line-height:var(--leading-normal,1.5)}ax-alert .ax-alert-buttons{padding-inline-start:calc(var(--spacing,.25rem)*4)}ax-alert .ax-alert-title{flex-direction:column;flex:1;display:flex}ax-alert .ax-alert-title ax-title{font-size:var(--text-sm,.875rem);line-height:var(--tw-leading,var(--text-sm--line-height,calc(1.25/.875)));--tw-font-weight:var(--font-weight-medium,500);font-weight:var(--font-weight-medium,500)}ax-alert .ax-alert-progress{inset-inline-start:calc(var(--spacing,.25rem)*0);bottom:calc(var(--spacing,.25rem)*0);height:calc(var(--spacing,.25rem)*1);position:absolute}}@property --tw-border-style{syntax:\"*\";inherits:false;initial-value:solid}@property --tw-leading{syntax:\"*\";inherits:false}@property --tw-font-weight{syntax:\"*\";inherits:false}\n/*! tailwindcss v4.1.18 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AXAlertComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-alert', inputs: ['color'], outputs: ['colorChange'], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [
                         { provide: AXClosableComponent, useExisting: AXAlertComponent },
                         { provide: AXComponent, useExisting: AXAlertComponent },
-                    ], imports: [NgTemplateOutlet], template: "@if (showInline()) {\n  <div class=\"ax-alert-inline\">\n    <div class=\"ax-alert-icon ax-icon-solid\">\n      <ng-container [ngTemplateOutlet]=\"icon\"></ng-container>\n    </div>\n    <div class=\"ax-alert-title\">\n      <ng-container [ngTemplateOutlet]=\"title\"></ng-container>\n    </div>\n    <div class=\"ax-alert-buttons\">\n      <ng-container [ngTemplateOutlet]=\"buttons\"></ng-container>\n    </div>\n    <ng-container [ngTemplateOutlet]=\"closeButton\"></ng-container>\n  </div>\n} @else {\n  <div class=\"ax-alert-block\">\n    <div class=\"ax-alert-icon ax-icon-solid\">\n      <ng-container [ngTemplateOutlet]=\"icon\"></ng-container>\n    </div>\n    <div class=\"ax-alert-content\">\n      <div class=\"ax-alert-title\">\n        <ng-container [ngTemplateOutlet]=\"title\"></ng-container>\n      </div>\n      <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\n      <ng-container [ngTemplateOutlet]=\"footer\"></ng-container>\n    </div>\n    <div><ng-container [ngTemplateOutlet]=\"closeButton\"></ng-container></div>\n  </div>\n}\n\n@if (timeOut()) {\n  <div class=\"ax-alert-progress\" [style.animation-duration.ms]=\"timeOut()\"></div>\n}\n\n<ng-template #buttons>\n  <ng-content select=\"ax-button\"> </ng-content>\n</ng-template>\n<ng-template #closeButton>\n  <ng-content select=\"ax-close-button\"> </ng-content>\n</ng-template>\n<ng-template #title>\n  <ng-content select=\"ax-title\"> </ng-content>\n</ng-template>\n<ng-template #icon>\n  <ng-content select=\"ax-icon\"> </ng-content>\n</ng-template>\n<ng-template #content>\n  <ng-content select=\"ax-content\"> </ng-content>\n</ng-template>\n<ng-template #footer>\n  <ng-content select=\"ax-footer\"> </ng-content>\n</ng-template>\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-leading:initial;--tw-font-weight:initial}}}@layer components{ax-alert{gap:calc(var(--spacing,.25rem)*4);border-radius:var(--radius-lg,.5rem);border-style:var(--tw-border-style);border-width:1px;border-color:var(--ax-comp-bg);background-color:var(--ax-comp-bg);width:100%;display:flex;position:relative;overflow:hidden}@supports (color:color-mix(in lab,red,red)){ax-alert{background-color:color-mix(in oklab,var(--ax-comp-bg)15%,transparent)}}ax-alert{padding:calc(var(--spacing,.25rem)*4);font-size:var(--text-sm,.875rem);line-height:var(--tw-leading,var(--text-sm--line-height,calc(1.25/.875)))}ax-alert ax-title,ax-alert ax-content{color:var(--color-on-lightest,rgba(var(--ax-sys-color-on-lightest-surface)))}ax-alert .ax-alert-progress{background-color:var(--ax-comp-text)}ax-alert .ax-alert-inline{flex:1;justify-content:center;align-items:center;display:flex}ax-alert .ax-alert-block{width:100%;display:flex}ax-alert .ax-alert-block .ax-alert-content{--tw-leading:calc(var(--spacing,.25rem)*6);line-height:calc(var(--spacing,.25rem)*6);flex-direction:column;flex:1;display:flex}ax-alert .ax-alert-block .ax-alert-content .ax-alert-title:empty{display:none}ax-alert .ax-alert-block .ax-alert-content .ax-alert-title:not(:empty)+ax-content:not(:empty){margin-top:calc(var(--spacing,.25rem)*2)}ax-alert .ax-alert-block .ax-alert-content ax-footer{margin-top:calc(var(--spacing,.25rem)*4)}ax-alert .ax-alert-icon{font-size:var(--text-lg,1.125rem);line-height:var(--tw-leading,var(--text-lg--line-height,calc(1.75/1.125)));color:var(--ax-comp-bg);border-radius:3.40282e38px;align-items:flex-start;padding-inline-end:calc(var(--spacing,.25rem)*2);display:grid}ax-alert .ax-alert-icon ax-icon{--tw-leading:var(--leading-normal,1.5);line-height:var(--leading-normal,1.5)}ax-alert .ax-alert-buttons{padding-inline-start:calc(var(--spacing,.25rem)*4)}ax-alert .ax-alert-title{flex-direction:column;flex:1;display:flex}ax-alert .ax-alert-title ax-title{font-size:var(--text-sm,.875rem);line-height:var(--tw-leading,var(--text-sm--line-height,calc(1.25/.875)));--tw-font-weight:var(--font-weight-medium,500);font-weight:var(--font-weight-medium,500)}ax-alert .ax-alert-progress{inset-inline-start:calc(var(--spacing,.25rem)*0);bottom:calc(var(--spacing,.25rem)*0);height:calc(var(--spacing,.25rem)*1);position:absolute}}@property --tw-border-style{syntax:\"*\";inherits:false;initial-value:solid}@property --tw-leading{syntax:\"*\";inherits:false}@property --tw-font-weight{syntax:\"*\";inherits:false}\n/*! tailwindcss v4.1.17 | MIT License | https://tailwindcss.com */\n"] }]
+                    ], imports: [NgTemplateOutlet], template: "@if (showInline()) {\n  <div class=\"ax-alert-inline\">\n    <div class=\"ax-alert-icon ax-icon-solid\">\n      <ng-container [ngTemplateOutlet]=\"icon\"></ng-container>\n    </div>\n    <div class=\"ax-alert-title\">\n      <ng-container [ngTemplateOutlet]=\"title\"></ng-container>\n    </div>\n    <div class=\"ax-alert-buttons\">\n      <ng-container [ngTemplateOutlet]=\"buttons\"></ng-container>\n    </div>\n    <ng-container [ngTemplateOutlet]=\"closeButton\"></ng-container>\n  </div>\n} @else {\n  <div class=\"ax-alert-block\">\n    <div class=\"ax-alert-icon ax-icon-solid\">\n      <ng-container [ngTemplateOutlet]=\"icon\"></ng-container>\n    </div>\n    <div class=\"ax-alert-content\">\n      <div class=\"ax-alert-title\">\n        <ng-container [ngTemplateOutlet]=\"title\"></ng-container>\n      </div>\n      <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\n      <ng-container [ngTemplateOutlet]=\"footer\"></ng-container>\n    </div>\n    <div><ng-container [ngTemplateOutlet]=\"closeButton\"></ng-container></div>\n  </div>\n}\n\n@if (timeOut()) {\n  <div class=\"ax-alert-progress\" [style.animation-duration.ms]=\"timeOut()\"></div>\n}\n\n<ng-template #buttons>\n  <ng-content select=\"ax-button\"> </ng-content>\n</ng-template>\n<ng-template #closeButton>\n  <ng-content select=\"ax-close-button\"> </ng-content>\n</ng-template>\n<ng-template #title>\n  <ng-content select=\"ax-title\"> </ng-content>\n</ng-template>\n<ng-template #icon>\n  <ng-content select=\"ax-icon\"> </ng-content>\n</ng-template>\n<ng-template #content>\n  <ng-content select=\"ax-content\"> </ng-content>\n</ng-template>\n<ng-template #footer>\n  <ng-content select=\"ax-footer\"> </ng-content>\n</ng-template>\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-leading:initial;--tw-font-weight:initial}}}@layer components{ax-alert{gap:calc(var(--spacing,.25rem)*4);border-radius:var(--radius-lg,.5rem);border-style:var(--tw-border-style);border-width:1px;border-color:var(--ax-comp-bg);background-color:var(--ax-comp-bg);width:100%;display:flex;position:relative;overflow:hidden}@supports (color:color-mix(in lab,red,red)){ax-alert{background-color:color-mix(in oklab,var(--ax-comp-bg)15%,transparent)}}ax-alert{padding:calc(var(--spacing,.25rem)*4);font-size:var(--text-sm,.875rem);line-height:var(--tw-leading,var(--text-sm--line-height,calc(1.25/.875)))}ax-alert ax-title,ax-alert ax-content{color:var(--color-on-lightest,rgba(var(--ax-sys-color-on-lightest-surface)))}ax-alert .ax-alert-progress{background-color:var(--ax-comp-text)}ax-alert .ax-alert-inline{flex:1;justify-content:center;align-items:center;display:flex}ax-alert .ax-alert-block{width:100%;display:flex}ax-alert .ax-alert-block .ax-alert-content{--tw-leading:calc(var(--spacing,.25rem)*6);line-height:calc(var(--spacing,.25rem)*6);flex-direction:column;flex:1;display:flex}ax-alert .ax-alert-block .ax-alert-content .ax-alert-title:empty{display:none}ax-alert .ax-alert-block .ax-alert-content .ax-alert-title:not(:empty)+ax-content:not(:empty){margin-top:calc(var(--spacing,.25rem)*2)}ax-alert .ax-alert-block .ax-alert-content ax-footer{margin-top:calc(var(--spacing,.25rem)*4)}ax-alert .ax-alert-icon{font-size:var(--text-lg,1.125rem);line-height:var(--tw-leading,var(--text-lg--line-height,calc(1.75/1.125)));color:var(--ax-comp-bg);border-radius:3.40282e38px;align-items:flex-start;padding-inline-end:calc(var(--spacing,.25rem)*2);display:grid}ax-alert .ax-alert-icon ax-icon{--tw-leading:var(--leading-normal,1.5);line-height:var(--leading-normal,1.5)}ax-alert .ax-alert-buttons{padding-inline-start:calc(var(--spacing,.25rem)*4)}ax-alert .ax-alert-title{flex-direction:column;flex:1;display:flex}ax-alert .ax-alert-title ax-title{font-size:var(--text-sm,.875rem);line-height:var(--tw-leading,var(--text-sm--line-height,calc(1.25/.875)));--tw-font-weight:var(--font-weight-medium,500);font-weight:var(--font-weight-medium,500)}ax-alert .ax-alert-progress{inset-inline-start:calc(var(--spacing,.25rem)*0);bottom:calc(var(--spacing,.25rem)*0);height:calc(var(--spacing,.25rem)*1);position:absolute}}@property --tw-border-style{syntax:\"*\";inherits:false;initial-value:solid}@property --tw-leading{syntax:\"*\";inherits:false}@property --tw-font-weight{syntax:\"*\";inherits:false}\n/*! tailwindcss v4.1.18 | MIT License | https://tailwindcss.com */\n"] }]
         }], ctorParameters: () => [], propDecorators: { axIcon: [{ type: i0.ContentChild, args: ['ax-icon', { isSignal: true }] }], axTitle: [{ type: i0.ContentChild, args: ['ax-title', { isSignal: true }] }], axContent: [{ type: i0.ContentChild, args: ['ax-content', { isSignal: true }] }], axFooter: [{ type: i0.ContentChild, args: ['ax-footer', { isSignal: true }] }], onClosed: [{ type: i0.Output, args: ["onClosed"] }], timeOut: [{ type: i0.Input, args: [{ isSignal: true, alias: "timeOut", required: false }] }, { type: i0.Output, args: ["timeOutChange"] }], __hostClass: [{
                 type: HostBinding,
                 args: ['class']

package/fesm2022/acorex-components-audio-wave.mjs CHANGED Viewed

@@ -339,11 +339,11 @@ class AXAudioWaveComponent {
         this.audio.destroy();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AXAudioWaveComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: AXAudioWaveComponent, isStandalone: true, selector: "ax-audio-wave", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onStatusChanged: "onStatusChanged" }, providers: [{ provide: AXComponent, useExisting: AXAudioWaveComponent }], viewQueries: [{ propertyName: "div", first: true, predicate: ["d"], descendants: true }], ngImport: i0, template: "<div class=\"ax-audio-wave\" #d [ngStyle]=\"{ display: audioState() === 'ready' ? 'block' : 'none' }\"></div>\n\n@switch (audioState()) {\n  @case ('loading') {\n    <ax-skeleton class=\"h-5 w-full rounded-full\"></ax-skeleton>\n  }\n  @case ('error') {\n    <div class=\"ax-wave-message\">\n      {{ '@acorex:error.message' | translate: { params: { message: errorMessage() } } | async }}\n    </div>\n  }\n}\n", styles: ["@layer components{ax-audio-wave{flex:1;width:100%;display:block}ax-audio-wave .ax-wave-message{padding-inline-start:.5rem}}\n/*! tailwindcss v4.1.17 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: AXSkeletonComponent, selector: "ax-skeleton", inputs: ["animated"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: AXTranslatorPipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: AXAudioWaveComponent, isStandalone: true, selector: "ax-audio-wave", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onStatusChanged: "onStatusChanged" }, providers: [{ provide: AXComponent, useExisting: AXAudioWaveComponent }], viewQueries: [{ propertyName: "div", first: true, predicate: ["d"], descendants: true }], ngImport: i0, template: "<div class=\"ax-audio-wave\" #d [ngStyle]=\"{ display: audioState() === 'ready' ? 'block' : 'none' }\"></div>\n\n@switch (audioState()) {\n  @case ('loading') {\n    <ax-skeleton class=\"h-5 w-full rounded-full\"></ax-skeleton>\n  }\n  @case ('error') {\n    <div class=\"ax-wave-message\">\n      {{ '@acorex:error.message' | translate: { params: { message: errorMessage() } } | async }}\n    </div>\n  }\n}\n", styles: ["@layer components{ax-audio-wave{flex:1;width:100%;display:block}ax-audio-wave .ax-wave-message{padding-inline-start:.5rem}}\n/*! tailwindcss v4.1.18 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: AXSkeletonComponent, selector: "ax-skeleton", inputs: ["animated"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: AXTranslatorPipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AXAudioWaveComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ax-audio-wave', encapsulation: ViewEncapsulation.None, imports: [NgStyle, AsyncPipe, AXTranslatorPipe, AXSkeletonComponent], providers: [{ provide: AXComponent, useExisting: AXAudioWaveComponent }], template: "<div class=\"ax-audio-wave\" #d [ngStyle]=\"{ display: audioState() === 'ready' ? 'block' : 'none' }\"></div>\n\n@switch (audioState()) {\n  @case ('loading') {\n    <ax-skeleton class=\"h-5 w-full rounded-full\"></ax-skeleton>\n  }\n  @case ('error') {\n    <div class=\"ax-wave-message\">\n      {{ '@acorex:error.message' | translate: { params: { message: errorMessage() } } | async }}\n    </div>\n  }\n}\n", styles: ["@layer components{ax-audio-wave{flex:1;width:100%;display:block}ax-audio-wave .ax-wave-message{padding-inline-start:.5rem}}\n/*! tailwindcss v4.1.17 | MIT License | https://tailwindcss.com */\n"] }]
+            args: [{ selector: 'ax-audio-wave', encapsulation: ViewEncapsulation.None, imports: [NgStyle, AsyncPipe, AXTranslatorPipe, AXSkeletonComponent], providers: [{ provide: AXComponent, useExisting: AXAudioWaveComponent }], template: "<div class=\"ax-audio-wave\" #d [ngStyle]=\"{ display: audioState() === 'ready' ? 'block' : 'none' }\"></div>\n\n@switch (audioState()) {\n  @case ('loading') {\n    <ax-skeleton class=\"h-5 w-full rounded-full\"></ax-skeleton>\n  }\n  @case ('error') {\n    <div class=\"ax-wave-message\">\n      {{ '@acorex:error.message' | translate: { params: { message: errorMessage() } } | async }}\n    </div>\n  }\n}\n", styles: ["@layer components{ax-audio-wave{flex:1;width:100%;display:block}ax-audio-wave .ax-wave-message{padding-inline-start:.5rem}}\n/*! tailwindcss v4.1.18 | MIT License | https://tailwindcss.com */\n"] }]
         }], ctorParameters: () => [], propDecorators: { div: [{
                 type: ViewChild,
                 args: ['d', { static: false }]

package/fesm2022/acorex-components-avatar.mjs CHANGED Viewed

@@ -61,11 +61,11 @@ class AXAvatarComponent extends MXColorComponent {
         return `width: ${this.size()}px; height: ${this.size()}px`;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AXAvatarComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: AXAvatarComponent, isStandalone: true, selector: "ax-avatar", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: false, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, shape: { classPropertyName: "shape", publicName: "shape", isSignal: true, isRequired: false, transformFunction: null }, look: { classPropertyName: "look", publicName: "look", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { size: "sizeChange" }, host: { properties: { "class": "this.__hostClass", "style": "this.__hostStyle" } }, providers: [{ provide: AXComponent, useExisting: AXAvatarComponent }], queries: [{ propertyName: "children", predicate: ["ax-image, ax-icon, ax-text"], isSignal: true }], usesInheritance: true, ngImport: i0, template: "<ng-content select=\"ax-text, ax-image, ax-icon\"></ng-content>\n\n@if (!children()?.length) {\n  <svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" viewBox=\"0 0 512 512\">\n    <g style=\"isolation: isolate\">\n      <g id=\"Layer_2\" data-name=\"Layer 2\">\n        <g id=\"Layer_1-2\" data-name=\"Layer 1\">\n          <rect style=\"fill: var(--ax-comp-bg, rgba(var(--ax-sys-color-surface)))\" width=\"512\" height=\"512\" />\n          <path\n            d=\"M419.16,511.94s-2.85-154-142.28-176.19a139.93,139.93,0,0,0-22-1.67h0a55.8,55.8,0,0,0-5.93.29C99.25,350.35,96.26,511.94,96.26,511.94\"\n            style=\"fill: var(--ax-comp-text, rgba(var(--ax-sys-color-on-surface))); opacity: 0.7\"\n          />\n          <path\n            d=\"M256,355.18c-17.29,0-32.22-4.63-46.38-12.41-3.86,1.31-8.15,2.93-11.75,4.46A96.48,96.48,0,0,0,256,366.62a100.29,100.29,0,0,0,60.07-20c-3.6-1.49-6.41-2.55-10.27-3.83C291.48,350.79,273.58,355.18,256,355.18Z\"\n            style=\"opacity: 0.05\"\n          />\n          <circle\n            cx=\"257.71\"\n            cy=\"255.94\"\n            r=\"99.24\"\n            style=\"fill: var(--ax-comp-text, rgba(var(--ax-sys-color-on-surface)))\"\n          />\n        </g>\n      </g>\n    </g>\n  </svg>\n}\n<ng-content select=\"ax-badge\"></ng-content>\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}}}@layer components{ax-avatar-group{display:flex}ax-avatar-group ax-avatar{margin:calc(var(--spacing,.25rem)*-1);border-style:var(--tw-border-style);border-width:1px;border-color:var(--color-surface,rgba(var(--ax-sys-color-surface)));overflow:hidden}ax-avatar{justify-content:space-between;display:flex;position:relative}ax-avatar.ax-sharp{border-radius:0}ax-avatar.ax-soft{border-radius:var(--radius-default,var(--ax-sys-border-radius))}ax-avatar.ax-rounded{border-radius:3.40282e38px}ax-avatar *{border-radius:inherit}ax-avatar ax-text{font-size:var(--text-2xl,1.5rem);line-height:var(--tw-leading,var(--text-2xl--line-height,calc(2/1.5)))}ax-avatar ax-icon,ax-avatar ax-text{min-width:100%;min-height:100%;fill:var(--ax-comp-bg);justify-content:center;align-items:center;display:flex}ax-avatar ax-badge{position:absolute}}@property --tw-border-style{syntax:\"*\";inherits:false;initial-value:solid}\n/*! tailwindcss v4.1.17 | MIT License | https://tailwindcss.com */\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: AXAvatarComponent, isStandalone: true, selector: "ax-avatar", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: false, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, shape: { classPropertyName: "shape", publicName: "shape", isSignal: true, isRequired: false, transformFunction: null }, look: { classPropertyName: "look", publicName: "look", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { size: "sizeChange" }, host: { properties: { "class": "this.__hostClass", "style": "this.__hostStyle" } }, providers: [{ provide: AXComponent, useExisting: AXAvatarComponent }], queries: [{ propertyName: "children", predicate: ["ax-image, ax-icon, ax-text"], isSignal: true }], usesInheritance: true, ngImport: i0, template: "<ng-content select=\"ax-text, ax-image, ax-icon\"></ng-content>\n\n@if (!children()?.length) {\n  <svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" viewBox=\"0 0 512 512\">\n    <g style=\"isolation: isolate\">\n      <g id=\"Layer_2\" data-name=\"Layer 2\">\n        <g id=\"Layer_1-2\" data-name=\"Layer 1\">\n          <rect style=\"fill: var(--ax-comp-bg, rgba(var(--ax-sys-color-surface)))\" width=\"512\" height=\"512\" />\n          <path\n            d=\"M419.16,511.94s-2.85-154-142.28-176.19a139.93,139.93,0,0,0-22-1.67h0a55.8,55.8,0,0,0-5.93.29C99.25,350.35,96.26,511.94,96.26,511.94\"\n            style=\"fill: var(--ax-comp-text, rgba(var(--ax-sys-color-on-surface))); opacity: 0.7\"\n          />\n          <path\n            d=\"M256,355.18c-17.29,0-32.22-4.63-46.38-12.41-3.86,1.31-8.15,2.93-11.75,4.46A96.48,96.48,0,0,0,256,366.62a100.29,100.29,0,0,0,60.07-20c-3.6-1.49-6.41-2.55-10.27-3.83C291.48,350.79,273.58,355.18,256,355.18Z\"\n            style=\"opacity: 0.05\"\n          />\n          <circle\n            cx=\"257.71\"\n            cy=\"255.94\"\n            r=\"99.24\"\n            style=\"fill: var(--ax-comp-text, rgba(var(--ax-sys-color-on-surface)))\"\n          />\n        </g>\n      </g>\n    </g>\n  </svg>\n}\n<ng-content select=\"ax-badge\"></ng-content>\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}}}@layer components{ax-avatar-group{display:flex}ax-avatar-group ax-avatar{margin:calc(var(--spacing,.25rem)*-1);border-style:var(--tw-border-style);border-width:1px;border-color:var(--color-surface,rgba(var(--ax-sys-color-surface)));overflow:hidden}ax-avatar{justify-content:space-between;display:flex;position:relative}ax-avatar.ax-sharp{border-radius:0}ax-avatar.ax-soft{border-radius:var(--radius-default,var(--ax-sys-border-radius))}ax-avatar.ax-rounded{border-radius:3.40282e38px}ax-avatar *{border-radius:inherit}ax-avatar ax-text{font-size:var(--text-2xl,1.5rem);line-height:var(--tw-leading,var(--text-2xl--line-height,calc(2/1.5)))}ax-avatar ax-icon,ax-avatar ax-text{min-width:100%;min-height:100%;fill:var(--ax-comp-bg);justify-content:center;align-items:center;display:flex}ax-avatar ax-badge{position:absolute}}@property --tw-border-style{syntax:\"*\";inherits:false;initial-value:solid}\n/*! tailwindcss v4.1.18 | MIT License | https://tailwindcss.com */\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AXAvatarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ax-avatar', inputs: ['color'], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [{ provide: AXComponent, useExisting: AXAvatarComponent }], template: "<ng-content select=\"ax-text, ax-image, ax-icon\"></ng-content>\n\n@if (!children()?.length) {\n  <svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" viewBox=\"0 0 512 512\">\n    <g style=\"isolation: isolate\">\n      <g id=\"Layer_2\" data-name=\"Layer 2\">\n        <g id=\"Layer_1-2\" data-name=\"Layer 1\">\n          <rect style=\"fill: var(--ax-comp-bg, rgba(var(--ax-sys-color-surface)))\" width=\"512\" height=\"512\" />\n          <path\n            d=\"M419.16,511.94s-2.85-154-142.28-176.19a139.93,139.93,0,0,0-22-1.67h0a55.8,55.8,0,0,0-5.93.29C99.25,350.35,96.26,511.94,96.26,511.94\"\n            style=\"fill: var(--ax-comp-text, rgba(var(--ax-sys-color-on-surface))); opacity: 0.7\"\n          />\n          <path\n            d=\"M256,355.18c-17.29,0-32.22-4.63-46.38-12.41-3.86,1.31-8.15,2.93-11.75,4.46A96.48,96.48,0,0,0,256,366.62a100.29,100.29,0,0,0,60.07-20c-3.6-1.49-6.41-2.55-10.27-3.83C291.48,350.79,273.58,355.18,256,355.18Z\"\n            style=\"opacity: 0.05\"\n          />\n          <circle\n            cx=\"257.71\"\n            cy=\"255.94\"\n            r=\"99.24\"\n            style=\"fill: var(--ax-comp-text, rgba(var(--ax-sys-color-on-surface)))\"\n          />\n        </g>\n      </g>\n    </g>\n  </svg>\n}\n<ng-content select=\"ax-badge\"></ng-content>\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}}}@layer components{ax-avatar-group{display:flex}ax-avatar-group ax-avatar{margin:calc(var(--spacing,.25rem)*-1);border-style:var(--tw-border-style);border-width:1px;border-color:var(--color-surface,rgba(var(--ax-sys-color-surface)));overflow:hidden}ax-avatar{justify-content:space-between;display:flex;position:relative}ax-avatar.ax-sharp{border-radius:0}ax-avatar.ax-soft{border-radius:var(--radius-default,var(--ax-sys-border-radius))}ax-avatar.ax-rounded{border-radius:3.40282e38px}ax-avatar *{border-radius:inherit}ax-avatar ax-text{font-size:var(--text-2xl,1.5rem);line-height:var(--tw-leading,var(--text-2xl--line-height,calc(2/1.5)))}ax-avatar ax-icon,ax-avatar ax-text{min-width:100%;min-height:100%;fill:var(--ax-comp-bg);justify-content:center;align-items:center;display:flex}ax-avatar ax-badge{position:absolute}}@property --tw-border-style{syntax:\"*\";inherits:false;initial-value:solid}\n/*! tailwindcss v4.1.17 | MIT License | https://tailwindcss.com */\n"] }]
+            args: [{ selector: 'ax-avatar', inputs: ['color'], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [{ provide: AXComponent, useExisting: AXAvatarComponent }], template: "<ng-content select=\"ax-text, ax-image, ax-icon\"></ng-content>\n\n@if (!children()?.length) {\n  <svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" viewBox=\"0 0 512 512\">\n    <g style=\"isolation: isolate\">\n      <g id=\"Layer_2\" data-name=\"Layer 2\">\n        <g id=\"Layer_1-2\" data-name=\"Layer 1\">\n          <rect style=\"fill: var(--ax-comp-bg, rgba(var(--ax-sys-color-surface)))\" width=\"512\" height=\"512\" />\n          <path\n            d=\"M419.16,511.94s-2.85-154-142.28-176.19a139.93,139.93,0,0,0-22-1.67h0a55.8,55.8,0,0,0-5.93.29C99.25,350.35,96.26,511.94,96.26,511.94\"\n            style=\"fill: var(--ax-comp-text, rgba(var(--ax-sys-color-on-surface))); opacity: 0.7\"\n          />\n          <path\n            d=\"M256,355.18c-17.29,0-32.22-4.63-46.38-12.41-3.86,1.31-8.15,2.93-11.75,4.46A96.48,96.48,0,0,0,256,366.62a100.29,100.29,0,0,0,60.07-20c-3.6-1.49-6.41-2.55-10.27-3.83C291.48,350.79,273.58,355.18,256,355.18Z\"\n            style=\"opacity: 0.05\"\n          />\n          <circle\n            cx=\"257.71\"\n            cy=\"255.94\"\n            r=\"99.24\"\n            style=\"fill: var(--ax-comp-text, rgba(var(--ax-sys-color-on-surface)))\"\n          />\n        </g>\n      </g>\n    </g>\n  </svg>\n}\n<ng-content select=\"ax-badge\"></ng-content>\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}}}@layer components{ax-avatar-group{display:flex}ax-avatar-group ax-avatar{margin:calc(var(--spacing,.25rem)*-1);border-style:var(--tw-border-style);border-width:1px;border-color:var(--color-surface,rgba(var(--ax-sys-color-surface)));overflow:hidden}ax-avatar{justify-content:space-between;display:flex;position:relative}ax-avatar.ax-sharp{border-radius:0}ax-avatar.ax-soft{border-radius:var(--radius-default,var(--ax-sys-border-radius))}ax-avatar.ax-rounded{border-radius:3.40282e38px}ax-avatar *{border-radius:inherit}ax-avatar ax-text{font-size:var(--text-2xl,1.5rem);line-height:var(--tw-leading,var(--text-2xl--line-height,calc(2/1.5)))}ax-avatar ax-icon,ax-avatar ax-text{min-width:100%;min-height:100%;fill:var(--ax-comp-bg);justify-content:center;align-items:center;display:flex}ax-avatar ax-badge{position:absolute}}@property --tw-border-style{syntax:\"*\";inherits:false;initial-value:solid}\n/*! tailwindcss v4.1.18 | MIT License | https://tailwindcss.com */\n"] }]
         }], propDecorators: { children: [{ type: i0.ContentChildren, args: ['ax-image, ax-icon, ax-text', { isSignal: true }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }, { type: i0.Output, args: ["sizeChange"] }], shape: [{ type: i0.Input, args: [{ isSignal: true, alias: "shape", required: false }] }], look: [{ type: i0.Input, args: [{ isSignal: true, alias: "look", required: false }] }], __hostClass: [{
                 type: HostBinding,
                 args: ['class']

package/fesm2022/acorex-components-badge.mjs CHANGED Viewed

@@ -19,11 +19,11 @@ class AXBadgeComponent extends MXColorLookComponent {
         return `${this.look} ${this.color} ${!this.text() ? 'ax-mini-badge' : ''} ${this.text()?.length == 1 ? 'ax-single-badge' : ''}`;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AXBadgeComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: AXBadgeComponent, isStandalone: true, selector: "ax-badge", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: false, isRequired: false, transformFunction: null }, look: { classPropertyName: "look", publicName: "look", isSignal: false, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "this.__hostClass" } }, providers: [{ provide: AXComponent, useExisting: AXBadgeComponent }], usesInheritance: true, ngImport: i0, template: "<ng-content select=\"ax-prefix\"></ng-content>\n@if (text()) {\n  <span class=\"ax-badge-text\">{{ text() }}</span>\n}\n<ng-content select=\"ax-suffix\"></ng-content>\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-leading:initial}}}@layer components{ax-badge{max-height:fit-content;min-width:calc(var(--spacing,.25rem)*5);padding-inline:calc(var(--spacing,.25rem)*.5);font-size:var(--text-xs,.75rem);line-height:var(--tw-leading,var(--text-xs--line-height,calc(1/.75)));--tw-leading:1;border-radius:3.40282e38px;justify-content:center;align-items:center;line-height:1;display:inline-flex}ax-badge.ax-mini-badge{min-height:calc(var(--spacing,.25rem)*2);width:calc(var(--spacing,.25rem)*2);min-width:calc(var(--spacing,.25rem)*2)}ax-badge.ax-mini-badge .ax-badge-text{display:none}ax-badge.ax-single-badge{min-height:calc(var(--spacing,.25rem)*5);width:calc(var(--spacing,.25rem)*5);justify-content:center;align-items:center;display:flex}ax-badge.ax-single-badge .ax-badge-text{padding:calc(var(--spacing,.25rem)*0)}ax-badge .ax-badge-text{padding-inline:calc(var(--spacing,.25rem)*.5);padding-block:calc(var(--spacing,.25rem)*1);white-space:nowrap;display:inline-block}}@property --tw-leading{syntax:\"*\";inherits:false}\n/*! tailwindcss v4.1.17 | MIT License | https://tailwindcss.com */\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: AXBadgeComponent, isStandalone: true, selector: "ax-badge", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: false, isRequired: false, transformFunction: null }, look: { classPropertyName: "look", publicName: "look", isSignal: false, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "this.__hostClass" } }, providers: [{ provide: AXComponent, useExisting: AXBadgeComponent }], usesInheritance: true, ngImport: i0, template: "<ng-content select=\"ax-prefix\"></ng-content>\n@if (text()) {\n  <span class=\"ax-badge-text\">{{ text() }}</span>\n}\n<ng-content select=\"ax-suffix\"></ng-content>\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-leading:initial}}}@layer components{ax-badge{max-height:fit-content;min-width:calc(var(--spacing,.25rem)*5);padding-inline:calc(var(--spacing,.25rem)*.5);font-size:var(--text-xs,.75rem);line-height:var(--tw-leading,var(--text-xs--line-height,calc(1/.75)));--tw-leading:1;border-radius:3.40282e38px;justify-content:center;align-items:center;line-height:1;display:inline-flex}ax-badge.ax-mini-badge{min-height:calc(var(--spacing,.25rem)*2);width:calc(var(--spacing,.25rem)*2);min-width:calc(var(--spacing,.25rem)*2)}ax-badge.ax-mini-badge .ax-badge-text{display:none}ax-badge.ax-single-badge{min-height:calc(var(--spacing,.25rem)*5);width:calc(var(--spacing,.25rem)*5);justify-content:center;align-items:center;display:flex}ax-badge.ax-single-badge .ax-badge-text{padding:calc(var(--spacing,.25rem)*0)}ax-badge .ax-badge-text{padding-inline:calc(var(--spacing,.25rem)*.5);padding-block:calc(var(--spacing,.25rem)*1);white-space:nowrap;display:inline-block}}@property --tw-leading{syntax:\"*\";inherits:false}\n/*! tailwindcss v4.1.18 | MIT License | https://tailwindcss.com */\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AXBadgeComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ax-badge', inputs: ['color', 'look'], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [{ provide: AXComponent, useExisting: AXBadgeComponent }], template: "<ng-content select=\"ax-prefix\"></ng-content>\n@if (text()) {\n  <span class=\"ax-badge-text\">{{ text() }}</span>\n}\n<ng-content select=\"ax-suffix\"></ng-content>\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-leading:initial}}}@layer components{ax-badge{max-height:fit-content;min-width:calc(var(--spacing,.25rem)*5);padding-inline:calc(var(--spacing,.25rem)*.5);font-size:var(--text-xs,.75rem);line-height:var(--tw-leading,var(--text-xs--line-height,calc(1/.75)));--tw-leading:1;border-radius:3.40282e38px;justify-content:center;align-items:center;line-height:1;display:inline-flex}ax-badge.ax-mini-badge{min-height:calc(var(--spacing,.25rem)*2);width:calc(var(--spacing,.25rem)*2);min-width:calc(var(--spacing,.25rem)*2)}ax-badge.ax-mini-badge .ax-badge-text{display:none}ax-badge.ax-single-badge{min-height:calc(var(--spacing,.25rem)*5);width:calc(var(--spacing,.25rem)*5);justify-content:center;align-items:center;display:flex}ax-badge.ax-single-badge .ax-badge-text{padding:calc(var(--spacing,.25rem)*0)}ax-badge .ax-badge-text{padding-inline:calc(var(--spacing,.25rem)*.5);padding-block:calc(var(--spacing,.25rem)*1);white-space:nowrap;display:inline-block}}@property --tw-leading{syntax:\"*\";inherits:false}\n/*! tailwindcss v4.1.17 | MIT License | https://tailwindcss.com */\n"] }]
+            args: [{ selector: 'ax-badge', inputs: ['color', 'look'], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [{ provide: AXComponent, useExisting: AXBadgeComponent }], template: "<ng-content select=\"ax-prefix\"></ng-content>\n@if (text()) {\n  <span class=\"ax-badge-text\">{{ text() }}</span>\n}\n<ng-content select=\"ax-suffix\"></ng-content>\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-leading:initial}}}@layer components{ax-badge{max-height:fit-content;min-width:calc(var(--spacing,.25rem)*5);padding-inline:calc(var(--spacing,.25rem)*.5);font-size:var(--text-xs,.75rem);line-height:var(--tw-leading,var(--text-xs--line-height,calc(1/.75)));--tw-leading:1;border-radius:3.40282e38px;justify-content:center;align-items:center;line-height:1;display:inline-flex}ax-badge.ax-mini-badge{min-height:calc(var(--spacing,.25rem)*2);width:calc(var(--spacing,.25rem)*2);min-width:calc(var(--spacing,.25rem)*2)}ax-badge.ax-mini-badge .ax-badge-text{display:none}ax-badge.ax-single-badge{min-height:calc(var(--spacing,.25rem)*5);width:calc(var(--spacing,.25rem)*5);justify-content:center;align-items:center;display:flex}ax-badge.ax-single-badge .ax-badge-text{padding:calc(var(--spacing,.25rem)*0)}ax-badge .ax-badge-text{padding-inline:calc(var(--spacing,.25rem)*.5);padding-block:calc(var(--spacing,.25rem)*1);white-space:nowrap;display:inline-block}}@property --tw-leading{syntax:\"*\";inherits:false}\n/*! tailwindcss v4.1.18 | MIT License | https://tailwindcss.com */\n"] }]
         }], propDecorators: { text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: false }] }], __hostClass: [{
                 type: HostBinding,
                 args: ['class']

package/fesm2022/acorex-components-bottom-navigation.mjs CHANGED Viewed

@@ -100,11 +100,11 @@ class AXBottomNavigationComponent {
         return ` ax-look-${this.look()} ax-indicator-${this.indicatorPosition()} ${this.hasBorder() ? 'ax-has-border' : ''}`;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AXBottomNavigationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.15", type: AXBottomNavigationComponent, isStandalone: true, selector: "ax-bottom-navigation", inputs: { look: { classPropertyName: "look", publicName: "look", isSignal: true, isRequired: false, transformFunction: null }, hasBorder: { classPropertyName: "hasBorder", publicName: "hasBorder", isSignal: true, isRequired: false, transformFunction: null }, indicatorPosition: { classPropertyName: "indicatorPosition", publicName: "indicatorPosition", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onItemClick: "onItemClick" }, host: { properties: { "class": "this.__hostClass" } }, providers: [{ provide: AXComponent, useExisting: AXBottomNavigationComponent }], queries: [{ propertyName: "_contentButtons", predicate: AXBottomNavigationItemComponent }], ngImport: i0, template: "<ng-content select=\"ng-container, ax-bottom-navigation-item\"></ng-content>\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-leading:initial;--tw-font-weight:initial;--tw-border-style:solid}}}@layer components{ax-bottom-navigation{--ax-comp-bottom-navigation-text-color:var(--ax-sys-color-on-surface);--ax-comp-bottom-navigation-ripple-color:var(--ax-sys-color-primary-surface),.3;--ax-comp-bottom-navigation-active-text-color:var(--ax-sys-color-primary-surface);--ax-comp-bottom-navigation-border-size:1px;--ax-comp-bottom-navigation-indicator-width:60%;--ax-comp-bottom-navigation-indicator-height:.2rem;--ax-comp-bottom-navigation-indicator-border-radius:.125rem;justify-content:space-between;gap:calc(var(--spacing,.25rem)*1);background-color:var(--ax-comp-bottom-navigation-bg-color);display:flex}ax-bottom-navigation ax-bottom-navigation-item{cursor:pointer;padding-inline:calc(var(--spacing,.25rem)*0);padding-block:calc(var(--spacing,.25rem)*3);--tw-leading:var(--leading-snug,1.375);line-height:var(--leading-snug,1.375);--tw-font-weight:var(--font-weight-normal,400);font-weight:var(--font-weight-normal,400);color:var(--ax-comp-bottom-navigation-text-color);-webkit-user-select:none;user-select:none;flex-direction:column;flex:1;align-items:center;display:flex;position:relative}ax-bottom-navigation ax-bottom-navigation-item *{pointer-events:none}ax-bottom-navigation ax-bottom-navigation-item ax-icon{height:calc(var(--spacing,.25rem)*6);width:calc(var(--spacing,.25rem)*6);text-align:center;font-size:var(--text-xl,1.25rem);line-height:var(--tw-leading,var(--text-xl--line-height,calc(1.75/1.25)));display:block}ax-bottom-navigation ax-bottom-navigation-item ax-text{padding-top:calc(var(--spacing,.25rem)*1);font-size:var(--text-xs,.75rem);line-height:var(--tw-leading,var(--text-xs--line-height,calc(1/.75)))}ax-bottom-navigation ax-bottom-navigation-item.ax-state-active{--tw-font-weight:var(--font-weight-medium,500);font-weight:var(--font-weight-medium,500);color:rgba(var(--ax-comp-bottom-navigation-active-text-color))}ax-bottom-navigation ax-bottom-navigation-item.ax-state-active ax-icon{background-color:var(--ax-comp-bottom-navigation-active-icon-bg-color,unset);--tw-font-weight:var(--font-weight-bold,700)!important;font-weight:var(--font-weight-bold,700)!important}ax-bottom-navigation ax-bottom-navigation-item .ax-ripple{background-color:color-mix(in srgb,rgba(var(--ax-sys-color-primary-surface))30%,transparent)!important}@supports (color:color-mix(in lab,red,red)){ax-bottom-navigation ax-bottom-navigation-item .ax-ripple{background-color:color-mix(in oklab,var(--color-primary,rgba(var(--ax-sys-color-primary-surface)))30%,transparent)!important}}ax-bottom-navigation ax-bottom-navigation-item.ax-state-disabled{cursor:not-allowed;opacity:.5}ax-bottom-navigation ax-bottom-navigation-item.ax-state-disabled .ax-ripple{display:none}ax-bottom-navigation.ax-look-pills,ax-bottom-navigation.ax-look-pills-color{--ax-comp-bottom-navigation-active-text-color:var(--ax-sys-color-on-lightest-surface);--ax-comp-bottom-navigation-active-icon-bg-color:rgba(var(--ax-sys-color-on-lightest-surface),.2)}:is(ax-bottom-navigation.ax-look-pills,ax-bottom-navigation.ax-look-pills-color) ax-bottom-navigation-item{opacity:.5}:is(ax-bottom-navigation.ax-look-pills,ax-bottom-navigation.ax-look-pills-color) ax-bottom-navigation-item:hover{opacity:.75}:is(ax-bottom-navigation.ax-look-pills,ax-bottom-navigation.ax-look-pills-color) ax-bottom-navigation-item.ax-state-active{opacity:1;color:var(--ax-comp-bottom-navigation-active-text-color)!important}:is(ax-bottom-navigation.ax-look-pills,ax-bottom-navigation.ax-look-pills-color) ax-bottom-navigation-item.ax-state-disabled{opacity:.3}:is(ax-bottom-navigation.ax-look-pills,ax-bottom-navigation.ax-look-pills-color) ax-bottom-navigation-item ax-icon{border-radius:var(--radius-xl,.75rem);padding-inline:calc(var(--spacing,.25rem)*5);padding-block:calc(var(--spacing,.25rem)*1);font-size:var(--text-xl,1.25rem);line-height:var(--tw-leading,var(--text-xl--line-height,calc(1.75/1.25)));width:unset;height:unset;justify-content:center;display:block}:is(ax-bottom-navigation.ax-look-pills,ax-bottom-navigation.ax-look-pills-color) ax-bottom-navigation-item .ax-ripple{display:none}ax-bottom-navigation.ax-look-pills-color{--ax-comp-bottom-navigation-active-icon-bg-color:rgba(var(--ax-sys-color-primary-surface),.2)}ax-bottom-navigation.ax-look-with-line{--ax-comp-bottom-navigation-active-bg-color:var(--ax-sys-color-primary-surface)}ax-bottom-navigation.ax-look-with-line.ax-indicator-top ax-bottom-navigation-item:before{top:calc(var(--spacing,.25rem)*0)}ax-bottom-navigation.ax-look-with-line.ax-indicator-top ax-bottom-navigation-item.ax-state-active:before{border-bottom-right-radius:var(--radius-xs,.125rem);border-bottom-left-radius:var(--radius-xs,.125rem)}ax-bottom-navigation.ax-look-with-line.ax-indicator-bottom ax-bottom-navigation-item:before{bottom:calc(var(--spacing,.25rem)*0)}ax-bottom-navigation.ax-look-with-line.ax-indicator-bottom ax-bottom-navigation-item.ax-state-active:before{border-top-left-radius:var(--radius-xs,.125rem);border-top-right-radius:var(--radius-xs,.125rem)}ax-bottom-navigation.ax-look-with-line ax-bottom-navigation-item:before{content:\"\";background-color:#0000;width:60%;height:.2rem;position:absolute}ax-bottom-navigation.ax-look-with-line ax-bottom-navigation-item.ax-state-active:before{background-color:var(--color-primary,rgba(var(--ax-sys-color-primary-surface)))}ax-bottom-navigation.ax-has-border{border-top-style:var(--tw-border-style);border-top-width:1px;border-color:var(--color-lightest,rgba(var(--ax-sys-color-lightest-surface)));border-top-style:solid}}@property --tw-leading{syntax:\"*\";inherits:false}@property --tw-font-weight{syntax:\"*\";inherits:false}@property --tw-border-style{syntax:\"*\";inherits:false;initial-value:solid}\n/*! tailwindcss v4.1.17 | MIT License | https://tailwindcss.com */\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.15", type: AXBottomNavigationComponent, isStandalone: true, selector: "ax-bottom-navigation", inputs: { look: { classPropertyName: "look", publicName: "look", isSignal: true, isRequired: false, transformFunction: null }, hasBorder: { classPropertyName: "hasBorder", publicName: "hasBorder", isSignal: true, isRequired: false, transformFunction: null }, indicatorPosition: { classPropertyName: "indicatorPosition", publicName: "indicatorPosition", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onItemClick: "onItemClick" }, host: { properties: { "class": "this.__hostClass" } }, providers: [{ provide: AXComponent, useExisting: AXBottomNavigationComponent }], queries: [{ propertyName: "_contentButtons", predicate: AXBottomNavigationItemComponent }], ngImport: i0, template: "<ng-content select=\"ng-container, ax-bottom-navigation-item\"></ng-content>\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-leading:initial;--tw-font-weight:initial;--tw-border-style:solid}}}@layer components{ax-bottom-navigation{--ax-comp-bottom-navigation-text-color:var(--ax-sys-color-on-surface);--ax-comp-bottom-navigation-ripple-color:var(--ax-sys-color-primary-surface),.3;--ax-comp-bottom-navigation-active-text-color:var(--ax-sys-color-primary-surface);--ax-comp-bottom-navigation-border-size:1px;--ax-comp-bottom-navigation-indicator-width:60%;--ax-comp-bottom-navigation-indicator-height:.2rem;--ax-comp-bottom-navigation-indicator-border-radius:.125rem;justify-content:space-between;gap:calc(var(--spacing,.25rem)*1);background-color:var(--ax-comp-bottom-navigation-bg-color);display:flex}ax-bottom-navigation ax-bottom-navigation-item{cursor:pointer;padding-inline:calc(var(--spacing,.25rem)*0);padding-block:calc(var(--spacing,.25rem)*3);--tw-leading:var(--leading-snug,1.375);line-height:var(--leading-snug,1.375);--tw-font-weight:var(--font-weight-normal,400);font-weight:var(--font-weight-normal,400);color:var(--ax-comp-bottom-navigation-text-color);-webkit-user-select:none;user-select:none;flex-direction:column;flex:1;align-items:center;display:flex;position:relative}ax-bottom-navigation ax-bottom-navigation-item *{pointer-events:none}ax-bottom-navigation ax-bottom-navigation-item ax-icon{height:calc(var(--spacing,.25rem)*6);width:calc(var(--spacing,.25rem)*6);text-align:center;font-size:var(--text-xl,1.25rem);line-height:var(--tw-leading,var(--text-xl--line-height,calc(1.75/1.25)));display:block}ax-bottom-navigation ax-bottom-navigation-item ax-text{padding-top:calc(var(--spacing,.25rem)*1);font-size:var(--text-xs,.75rem);line-height:var(--tw-leading,var(--text-xs--line-height,calc(1/.75)))}ax-bottom-navigation ax-bottom-navigation-item.ax-state-active{--tw-font-weight:var(--font-weight-medium,500);font-weight:var(--font-weight-medium,500);color:rgba(var(--ax-comp-bottom-navigation-active-text-color))}ax-bottom-navigation ax-bottom-navigation-item.ax-state-active ax-icon{background-color:var(--ax-comp-bottom-navigation-active-icon-bg-color,unset);--tw-font-weight:var(--font-weight-bold,700)!important;font-weight:var(--font-weight-bold,700)!important}ax-bottom-navigation ax-bottom-navigation-item .ax-ripple{background-color:color-mix(in srgb,rgba(var(--ax-sys-color-primary-surface))30%,transparent)!important}@supports (color:color-mix(in lab,red,red)){ax-bottom-navigation ax-bottom-navigation-item .ax-ripple{background-color:color-mix(in oklab,var(--color-primary,rgba(var(--ax-sys-color-primary-surface)))30%,transparent)!important}}ax-bottom-navigation ax-bottom-navigation-item.ax-state-disabled{cursor:not-allowed;opacity:.5}ax-bottom-navigation ax-bottom-navigation-item.ax-state-disabled .ax-ripple{display:none}ax-bottom-navigation.ax-look-pills,ax-bottom-navigation.ax-look-pills-color{--ax-comp-bottom-navigation-active-text-color:var(--ax-sys-color-on-lightest-surface);--ax-comp-bottom-navigation-active-icon-bg-color:rgba(var(--ax-sys-color-on-lightest-surface),.2)}:is(ax-bottom-navigation.ax-look-pills,ax-bottom-navigation.ax-look-pills-color) ax-bottom-navigation-item{opacity:.5}:is(ax-bottom-navigation.ax-look-pills,ax-bottom-navigation.ax-look-pills-color) ax-bottom-navigation-item:hover{opacity:.75}:is(ax-bottom-navigation.ax-look-pills,ax-bottom-navigation.ax-look-pills-color) ax-bottom-navigation-item.ax-state-active{opacity:1;color:var(--ax-comp-bottom-navigation-active-text-color)!important}:is(ax-bottom-navigation.ax-look-pills,ax-bottom-navigation.ax-look-pills-color) ax-bottom-navigation-item.ax-state-disabled{opacity:.3}:is(ax-bottom-navigation.ax-look-pills,ax-bottom-navigation.ax-look-pills-color) ax-bottom-navigation-item ax-icon{border-radius:var(--radius-xl,.75rem);padding-inline:calc(var(--spacing,.25rem)*5);padding-block:calc(var(--spacing,.25rem)*1);font-size:var(--text-xl,1.25rem);line-height:var(--tw-leading,var(--text-xl--line-height,calc(1.75/1.25)));width:unset;height:unset;justify-content:center;display:block}:is(ax-bottom-navigation.ax-look-pills,ax-bottom-navigation.ax-look-pills-color) ax-bottom-navigation-item .ax-ripple{display:none}ax-bottom-navigation.ax-look-pills-color{--ax-comp-bottom-navigation-active-icon-bg-color:rgba(var(--ax-sys-color-primary-surface),.2)}ax-bottom-navigation.ax-look-with-line{--ax-comp-bottom-navigation-active-bg-color:var(--ax-sys-color-primary-surface)}ax-bottom-navigation.ax-look-with-line.ax-indicator-top ax-bottom-navigation-item:before{top:calc(var(--spacing,.25rem)*0)}ax-bottom-navigation.ax-look-with-line.ax-indicator-top ax-bottom-navigation-item.ax-state-active:before{border-bottom-right-radius:var(--radius-xs,.125rem);border-bottom-left-radius:var(--radius-xs,.125rem)}ax-bottom-navigation.ax-look-with-line.ax-indicator-bottom ax-bottom-navigation-item:before{bottom:calc(var(--spacing,.25rem)*0)}ax-bottom-navigation.ax-look-with-line.ax-indicator-bottom ax-bottom-navigation-item.ax-state-active:before{border-top-left-radius:var(--radius-xs,.125rem);border-top-right-radius:var(--radius-xs,.125rem)}ax-bottom-navigation.ax-look-with-line ax-bottom-navigation-item:before{content:\"\";background-color:#0000;width:60%;height:.2rem;position:absolute}ax-bottom-navigation.ax-look-with-line ax-bottom-navigation-item.ax-state-active:before{background-color:var(--color-primary,rgba(var(--ax-sys-color-primary-surface)))}ax-bottom-navigation.ax-has-border{border-top-style:var(--tw-border-style);border-top-width:1px;border-color:var(--color-lightest,rgba(var(--ax-sys-color-lightest-surface)));border-top-style:solid}}@property --tw-leading{syntax:\"*\";inherits:false}@property --tw-font-weight{syntax:\"*\";inherits:false}@property --tw-border-style{syntax:\"*\";inherits:false;initial-value:solid}\n/*! tailwindcss v4.1.18 | MIT License | https://tailwindcss.com */\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AXBottomNavigationComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ax-bottom-navigation', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [{ provide: AXComponent, useExisting: AXBottomNavigationComponent }], template: "<ng-content select=\"ng-container, ax-bottom-navigation-item\"></ng-content>\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-leading:initial;--tw-font-weight:initial;--tw-border-style:solid}}}@layer components{ax-bottom-navigation{--ax-comp-bottom-navigation-text-color:var(--ax-sys-color-on-surface);--ax-comp-bottom-navigation-ripple-color:var(--ax-sys-color-primary-surface),.3;--ax-comp-bottom-navigation-active-text-color:var(--ax-sys-color-primary-surface);--ax-comp-bottom-navigation-border-size:1px;--ax-comp-bottom-navigation-indicator-width:60%;--ax-comp-bottom-navigation-indicator-height:.2rem;--ax-comp-bottom-navigation-indicator-border-radius:.125rem;justify-content:space-between;gap:calc(var(--spacing,.25rem)*1);background-color:var(--ax-comp-bottom-navigation-bg-color);display:flex}ax-bottom-navigation ax-bottom-navigation-item{cursor:pointer;padding-inline:calc(var(--spacing,.25rem)*0);padding-block:calc(var(--spacing,.25rem)*3);--tw-leading:var(--leading-snug,1.375);line-height:var(--leading-snug,1.375);--tw-font-weight:var(--font-weight-normal,400);font-weight:var(--font-weight-normal,400);color:var(--ax-comp-bottom-navigation-text-color);-webkit-user-select:none;user-select:none;flex-direction:column;flex:1;align-items:center;display:flex;position:relative}ax-bottom-navigation ax-bottom-navigation-item *{pointer-events:none}ax-bottom-navigation ax-bottom-navigation-item ax-icon{height:calc(var(--spacing,.25rem)*6);width:calc(var(--spacing,.25rem)*6);text-align:center;font-size:var(--text-xl,1.25rem);line-height:var(--tw-leading,var(--text-xl--line-height,calc(1.75/1.25)));display:block}ax-bottom-navigation ax-bottom-navigation-item ax-text{padding-top:calc(var(--spacing,.25rem)*1);font-size:var(--text-xs,.75rem);line-height:var(--tw-leading,var(--text-xs--line-height,calc(1/.75)))}ax-bottom-navigation ax-bottom-navigation-item.ax-state-active{--tw-font-weight:var(--font-weight-medium,500);font-weight:var(--font-weight-medium,500);color:rgba(var(--ax-comp-bottom-navigation-active-text-color))}ax-bottom-navigation ax-bottom-navigation-item.ax-state-active ax-icon{background-color:var(--ax-comp-bottom-navigation-active-icon-bg-color,unset);--tw-font-weight:var(--font-weight-bold,700)!important;font-weight:var(--font-weight-bold,700)!important}ax-bottom-navigation ax-bottom-navigation-item .ax-ripple{background-color:color-mix(in srgb,rgba(var(--ax-sys-color-primary-surface))30%,transparent)!important}@supports (color:color-mix(in lab,red,red)){ax-bottom-navigation ax-bottom-navigation-item .ax-ripple{background-color:color-mix(in oklab,var(--color-primary,rgba(var(--ax-sys-color-primary-surface)))30%,transparent)!important}}ax-bottom-navigation ax-bottom-navigation-item.ax-state-disabled{cursor:not-allowed;opacity:.5}ax-bottom-navigation ax-bottom-navigation-item.ax-state-disabled .ax-ripple{display:none}ax-bottom-navigation.ax-look-pills,ax-bottom-navigation.ax-look-pills-color{--ax-comp-bottom-navigation-active-text-color:var(--ax-sys-color-on-lightest-surface);--ax-comp-bottom-navigation-active-icon-bg-color:rgba(var(--ax-sys-color-on-lightest-surface),.2)}:is(ax-bottom-navigation.ax-look-pills,ax-bottom-navigation.ax-look-pills-color) ax-bottom-navigation-item{opacity:.5}:is(ax-bottom-navigation.ax-look-pills,ax-bottom-navigation.ax-look-pills-color) ax-bottom-navigation-item:hover{opacity:.75}:is(ax-bottom-navigation.ax-look-pills,ax-bottom-navigation.ax-look-pills-color) ax-bottom-navigation-item.ax-state-active{opacity:1;color:var(--ax-comp-bottom-navigation-active-text-color)!important}:is(ax-bottom-navigation.ax-look-pills,ax-bottom-navigation.ax-look-pills-color) ax-bottom-navigation-item.ax-state-disabled{opacity:.3}:is(ax-bottom-navigation.ax-look-pills,ax-bottom-navigation.ax-look-pills-color) ax-bottom-navigation-item ax-icon{border-radius:var(--radius-xl,.75rem);padding-inline:calc(var(--spacing,.25rem)*5);padding-block:calc(var(--spacing,.25rem)*1);font-size:var(--text-xl,1.25rem);line-height:var(--tw-leading,var(--text-xl--line-height,calc(1.75/1.25)));width:unset;height:unset;justify-content:center;display:block}:is(ax-bottom-navigation.ax-look-pills,ax-bottom-navigation.ax-look-pills-color) ax-bottom-navigation-item .ax-ripple{display:none}ax-bottom-navigation.ax-look-pills-color{--ax-comp-bottom-navigation-active-icon-bg-color:rgba(var(--ax-sys-color-primary-surface),.2)}ax-bottom-navigation.ax-look-with-line{--ax-comp-bottom-navigation-active-bg-color:var(--ax-sys-color-primary-surface)}ax-bottom-navigation.ax-look-with-line.ax-indicator-top ax-bottom-navigation-item:before{top:calc(var(--spacing,.25rem)*0)}ax-bottom-navigation.ax-look-with-line.ax-indicator-top ax-bottom-navigation-item.ax-state-active:before{border-bottom-right-radius:var(--radius-xs,.125rem);border-bottom-left-radius:var(--radius-xs,.125rem)}ax-bottom-navigation.ax-look-with-line.ax-indicator-bottom ax-bottom-navigation-item:before{bottom:calc(var(--spacing,.25rem)*0)}ax-bottom-navigation.ax-look-with-line.ax-indicator-bottom ax-bottom-navigation-item.ax-state-active:before{border-top-left-radius:var(--radius-xs,.125rem);border-top-right-radius:var(--radius-xs,.125rem)}ax-bottom-navigation.ax-look-with-line ax-bottom-navigation-item:before{content:\"\";background-color:#0000;width:60%;height:.2rem;position:absolute}ax-bottom-navigation.ax-look-with-line ax-bottom-navigation-item.ax-state-active:before{background-color:var(--color-primary,rgba(var(--ax-sys-color-primary-surface)))}ax-bottom-navigation.ax-has-border{border-top-style:var(--tw-border-style);border-top-width:1px;border-color:var(--color-lightest,rgba(var(--ax-sys-color-lightest-surface)));border-top-style:solid}}@property --tw-leading{syntax:\"*\";inherits:false}@property --tw-font-weight{syntax:\"*\";inherits:false}@property --tw-border-style{syntax:\"*\";inherits:false;initial-value:solid}\n/*! tailwindcss v4.1.17 | MIT License | https://tailwindcss.com */\n"] }]
+            args: [{ selector: 'ax-bottom-navigation', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [{ provide: AXComponent, useExisting: AXBottomNavigationComponent }], template: "<ng-content select=\"ng-container, ax-bottom-navigation-item\"></ng-content>\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-leading:initial;--tw-font-weight:initial;--tw-border-style:solid}}}@layer components{ax-bottom-navigation{--ax-comp-bottom-navigation-text-color:var(--ax-sys-color-on-surface);--ax-comp-bottom-navigation-ripple-color:var(--ax-sys-color-primary-surface),.3;--ax-comp-bottom-navigation-active-text-color:var(--ax-sys-color-primary-surface);--ax-comp-bottom-navigation-border-size:1px;--ax-comp-bottom-navigation-indicator-width:60%;--ax-comp-bottom-navigation-indicator-height:.2rem;--ax-comp-bottom-navigation-indicator-border-radius:.125rem;justify-content:space-between;gap:calc(var(--spacing,.25rem)*1);background-color:var(--ax-comp-bottom-navigation-bg-color);display:flex}ax-bottom-navigation ax-bottom-navigation-item{cursor:pointer;padding-inline:calc(var(--spacing,.25rem)*0);padding-block:calc(var(--spacing,.25rem)*3);--tw-leading:var(--leading-snug,1.375);line-height:var(--leading-snug,1.375);--tw-font-weight:var(--font-weight-normal,400);font-weight:var(--font-weight-normal,400);color:var(--ax-comp-bottom-navigation-text-color);-webkit-user-select:none;user-select:none;flex-direction:column;flex:1;align-items:center;display:flex;position:relative}ax-bottom-navigation ax-bottom-navigation-item *{pointer-events:none}ax-bottom-navigation ax-bottom-navigation-item ax-icon{height:calc(var(--spacing,.25rem)*6);width:calc(var(--spacing,.25rem)*6);text-align:center;font-size:var(--text-xl,1.25rem);line-height:var(--tw-leading,var(--text-xl--line-height,calc(1.75/1.25)));display:block}ax-bottom-navigation ax-bottom-navigation-item ax-text{padding-top:calc(var(--spacing,.25rem)*1);font-size:var(--text-xs,.75rem);line-height:var(--tw-leading,var(--text-xs--line-height,calc(1/.75)))}ax-bottom-navigation ax-bottom-navigation-item.ax-state-active{--tw-font-weight:var(--font-weight-medium,500);font-weight:var(--font-weight-medium,500);color:rgba(var(--ax-comp-bottom-navigation-active-text-color))}ax-bottom-navigation ax-bottom-navigation-item.ax-state-active ax-icon{background-color:var(--ax-comp-bottom-navigation-active-icon-bg-color,unset);--tw-font-weight:var(--font-weight-bold,700)!important;font-weight:var(--font-weight-bold,700)!important}ax-bottom-navigation ax-bottom-navigation-item .ax-ripple{background-color:color-mix(in srgb,rgba(var(--ax-sys-color-primary-surface))30%,transparent)!important}@supports (color:color-mix(in lab,red,red)){ax-bottom-navigation ax-bottom-navigation-item .ax-ripple{background-color:color-mix(in oklab,var(--color-primary,rgba(var(--ax-sys-color-primary-surface)))30%,transparent)!important}}ax-bottom-navigation ax-bottom-navigation-item.ax-state-disabled{cursor:not-allowed;opacity:.5}ax-bottom-navigation ax-bottom-navigation-item.ax-state-disabled .ax-ripple{display:none}ax-bottom-navigation.ax-look-pills,ax-bottom-navigation.ax-look-pills-color{--ax-comp-bottom-navigation-active-text-color:var(--ax-sys-color-on-lightest-surface);--ax-comp-bottom-navigation-active-icon-bg-color:rgba(var(--ax-sys-color-on-lightest-surface),.2)}:is(ax-bottom-navigation.ax-look-pills,ax-bottom-navigation.ax-look-pills-color) ax-bottom-navigation-item{opacity:.5}:is(ax-bottom-navigation.ax-look-pills,ax-bottom-navigation.ax-look-pills-color) ax-bottom-navigation-item:hover{opacity:.75}:is(ax-bottom-navigation.ax-look-pills,ax-bottom-navigation.ax-look-pills-color) ax-bottom-navigation-item.ax-state-active{opacity:1;color:var(--ax-comp-bottom-navigation-active-text-color)!important}:is(ax-bottom-navigation.ax-look-pills,ax-bottom-navigation.ax-look-pills-color) ax-bottom-navigation-item.ax-state-disabled{opacity:.3}:is(ax-bottom-navigation.ax-look-pills,ax-bottom-navigation.ax-look-pills-color) ax-bottom-navigation-item ax-icon{border-radius:var(--radius-xl,.75rem);padding-inline:calc(var(--spacing,.25rem)*5);padding-block:calc(var(--spacing,.25rem)*1);font-size:var(--text-xl,1.25rem);line-height:var(--tw-leading,var(--text-xl--line-height,calc(1.75/1.25)));width:unset;height:unset;justify-content:center;display:block}:is(ax-bottom-navigation.ax-look-pills,ax-bottom-navigation.ax-look-pills-color) ax-bottom-navigation-item .ax-ripple{display:none}ax-bottom-navigation.ax-look-pills-color{--ax-comp-bottom-navigation-active-icon-bg-color:rgba(var(--ax-sys-color-primary-surface),.2)}ax-bottom-navigation.ax-look-with-line{--ax-comp-bottom-navigation-active-bg-color:var(--ax-sys-color-primary-surface)}ax-bottom-navigation.ax-look-with-line.ax-indicator-top ax-bottom-navigation-item:before{top:calc(var(--spacing,.25rem)*0)}ax-bottom-navigation.ax-look-with-line.ax-indicator-top ax-bottom-navigation-item.ax-state-active:before{border-bottom-right-radius:var(--radius-xs,.125rem);border-bottom-left-radius:var(--radius-xs,.125rem)}ax-bottom-navigation.ax-look-with-line.ax-indicator-bottom ax-bottom-navigation-item:before{bottom:calc(var(--spacing,.25rem)*0)}ax-bottom-navigation.ax-look-with-line.ax-indicator-bottom ax-bottom-navigation-item.ax-state-active:before{border-top-left-radius:var(--radius-xs,.125rem);border-top-right-radius:var(--radius-xs,.125rem)}ax-bottom-navigation.ax-look-with-line ax-bottom-navigation-item:before{content:\"\";background-color:#0000;width:60%;height:.2rem;position:absolute}ax-bottom-navigation.ax-look-with-line ax-bottom-navigation-item.ax-state-active:before{background-color:var(--color-primary,rgba(var(--ax-sys-color-primary-surface)))}ax-bottom-navigation.ax-has-border{border-top-style:var(--tw-border-style);border-top-width:1px;border-color:var(--color-lightest,rgba(var(--ax-sys-color-lightest-surface)));border-top-style:solid}}@property --tw-leading{syntax:\"*\";inherits:false}@property --tw-font-weight{syntax:\"*\";inherits:false}@property --tw-border-style{syntax:\"*\";inherits:false;initial-value:solid}\n/*! tailwindcss v4.1.18 | MIT License | https://tailwindcss.com */\n"] }]
         }], propDecorators: { _contentButtons: [{
                 type: ContentChildren,
                 args: [AXBottomNavigationItemComponent]

package/fesm2022/acorex-components-breadcrumbs.mjs CHANGED Viewed

@@ -35,11 +35,11 @@ class AXBreadCrumbsComponent extends MXBaseComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AXBreadCrumbsComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: AXBreadCrumbsComponent, isStandalone: true, selector: "ax-breadcrumbs", providers: [{ provide: AXComponent, useExisting: AXBreadCrumbsComponent }], queries: [{ propertyName: "_divider", first: true, predicate: ["divider"], descendants: true, isSignal: true }], viewQueries: [{ propertyName: "dividerTemplate", first: true, predicate: ["dividerTpl"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<ng-content select=\"ax-breadcrumbs-item\"></ng-content>\n<ng-template #dividerTpl>\n  @if (_divider()) {\n    <ng-container [ngTemplateOutlet]=\"_divider()\"></ng-container>\n  } @else {\n    <ng-container [ngTemplateOutlet]=\"default\"></ng-container>\n  }\n  <ng-template #default>\n    <div class=\"ax-breadcrumb-divider\">/</div>\n  </ng-template>\n</ng-template>\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-font-weight:initial}}}@layer components{ax-breadcrumbs{width:100%;font-size:var(--text-sm,.875rem);line-height:var(--tw-leading,var(--text-sm--line-height,calc(1.25/.875)));scrollbar-width:thin;scroll-snap-type:x proximity;overscroll-behavior-x:contain;align-items:center;display:inline-flex;overflow:auto hidden}ax-breadcrumbs ax-breadcrumbs-item{cursor:pointer;--tw-font-weight:var(--font-weight-medium,500);font-weight:var(--font-weight-medium,500);white-space:nowrap;color:#000000b3;align-items:center;display:inline-flex}@supports (color:color-mix(in lab,red,red)){ax-breadcrumbs ax-breadcrumbs-item{color:color-mix(in oklab,var(--color-black,#000)70%,transparent)}}ax-breadcrumbs ax-breadcrumbs-item{-webkit-user-select:none;user-select:none;text-decoration-thickness:0}ax-breadcrumbs ax-breadcrumbs-item:where(.dark,.dark *){color:#ffffffb3}@supports (color:color-mix(in lab,red,red)){ax-breadcrumbs ax-breadcrumbs-item:where(.dark,.dark *){color:color-mix(in oklab,var(--color-white,#fff)70%,transparent)}}ax-breadcrumbs ax-breadcrumbs-item.ax-state-active .ax-breadcrumb-item-content{color:var(--color-primary,rgba(var(--ax-sys-color-primary-surface)))!important}ax-breadcrumbs ax-breadcrumbs-item.ax-state-disabled .ax-breadcrumb-item-content{cursor:not-allowed!important;opacity:.5!important}ax-breadcrumbs ax-breadcrumbs-item ax-prefix{padding-inline:calc(var(--spacing,.25rem)*1)}ax-breadcrumbs ax-breadcrumbs-item>.ax-breadcrumb-divider{padding-inline:calc(var(--spacing,.25rem)*2)}ax-breadcrumbs ax-breadcrumbs-item:first-child .ax-breadcrumb-divider{display:none}}@property --tw-font-weight{syntax:\"*\";inherits:false}\n/*! tailwindcss v4.1.17 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: AXBreadCrumbsComponent, isStandalone: true, selector: "ax-breadcrumbs", providers: [{ provide: AXComponent, useExisting: AXBreadCrumbsComponent }], queries: [{ propertyName: "_divider", first: true, predicate: ["divider"], descendants: true, isSignal: true }], viewQueries: [{ propertyName: "dividerTemplate", first: true, predicate: ["dividerTpl"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<ng-content select=\"ax-breadcrumbs-item\"></ng-content>\n<ng-template #dividerTpl>\n  @if (_divider()) {\n    <ng-container [ngTemplateOutlet]=\"_divider()\"></ng-container>\n  } @else {\n    <ng-container [ngTemplateOutlet]=\"default\"></ng-container>\n  }\n  <ng-template #default>\n    <div class=\"ax-breadcrumb-divider\">/</div>\n  </ng-template>\n</ng-template>\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-font-weight:initial}}}@layer components{ax-breadcrumbs{width:100%;font-size:var(--text-sm,.875rem);line-height:var(--tw-leading,var(--text-sm--line-height,calc(1.25/.875)));scrollbar-width:thin;scroll-snap-type:x proximity;overscroll-behavior-x:contain;align-items:center;display:inline-flex;overflow:auto hidden}ax-breadcrumbs ax-breadcrumbs-item{cursor:pointer;--tw-font-weight:var(--font-weight-medium,500);font-weight:var(--font-weight-medium,500);white-space:nowrap;color:#000000b3;align-items:center;display:inline-flex}@supports (color:color-mix(in lab,red,red)){ax-breadcrumbs ax-breadcrumbs-item{color:color-mix(in oklab,var(--color-black,#000)70%,transparent)}}ax-breadcrumbs ax-breadcrumbs-item{-webkit-user-select:none;user-select:none;text-decoration-thickness:0}ax-breadcrumbs ax-breadcrumbs-item:where(.dark,.dark *){color:#ffffffb3}@supports (color:color-mix(in lab,red,red)){ax-breadcrumbs ax-breadcrumbs-item:where(.dark,.dark *){color:color-mix(in oklab,var(--color-white,#fff)70%,transparent)}}ax-breadcrumbs ax-breadcrumbs-item.ax-state-active .ax-breadcrumb-item-content{color:var(--color-primary,rgba(var(--ax-sys-color-primary-surface)))!important}ax-breadcrumbs ax-breadcrumbs-item.ax-state-disabled .ax-breadcrumb-item-content{cursor:not-allowed!important;opacity:.5!important}ax-breadcrumbs ax-breadcrumbs-item ax-prefix{padding-inline:calc(var(--spacing,.25rem)*1)}ax-breadcrumbs ax-breadcrumbs-item>.ax-breadcrumb-divider{padding-inline:calc(var(--spacing,.25rem)*2)}ax-breadcrumbs ax-breadcrumbs-item:first-child .ax-breadcrumb-divider{display:none}}@property --tw-font-weight{syntax:\"*\";inherits:false}\n/*! tailwindcss v4.1.18 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AXBreadCrumbsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ax-breadcrumbs', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgTemplateOutlet], providers: [{ provide: AXComponent, useExisting: AXBreadCrumbsComponent }], template: "<ng-content select=\"ax-breadcrumbs-item\"></ng-content>\n<ng-template #dividerTpl>\n  @if (_divider()) {\n    <ng-container [ngTemplateOutlet]=\"_divider()\"></ng-container>\n  } @else {\n    <ng-container [ngTemplateOutlet]=\"default\"></ng-container>\n  }\n  <ng-template #default>\n    <div class=\"ax-breadcrumb-divider\">/</div>\n  </ng-template>\n</ng-template>\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-font-weight:initial}}}@layer components{ax-breadcrumbs{width:100%;font-size:var(--text-sm,.875rem);line-height:var(--tw-leading,var(--text-sm--line-height,calc(1.25/.875)));scrollbar-width:thin;scroll-snap-type:x proximity;overscroll-behavior-x:contain;align-items:center;display:inline-flex;overflow:auto hidden}ax-breadcrumbs ax-breadcrumbs-item{cursor:pointer;--tw-font-weight:var(--font-weight-medium,500);font-weight:var(--font-weight-medium,500);white-space:nowrap;color:#000000b3;align-items:center;display:inline-flex}@supports (color:color-mix(in lab,red,red)){ax-breadcrumbs ax-breadcrumbs-item{color:color-mix(in oklab,var(--color-black,#000)70%,transparent)}}ax-breadcrumbs ax-breadcrumbs-item{-webkit-user-select:none;user-select:none;text-decoration-thickness:0}ax-breadcrumbs ax-breadcrumbs-item:where(.dark,.dark *){color:#ffffffb3}@supports (color:color-mix(in lab,red,red)){ax-breadcrumbs ax-breadcrumbs-item:where(.dark,.dark *){color:color-mix(in oklab,var(--color-white,#fff)70%,transparent)}}ax-breadcrumbs ax-breadcrumbs-item.ax-state-active .ax-breadcrumb-item-content{color:var(--color-primary,rgba(var(--ax-sys-color-primary-surface)))!important}ax-breadcrumbs ax-breadcrumbs-item.ax-state-disabled .ax-breadcrumb-item-content{cursor:not-allowed!important;opacity:.5!important}ax-breadcrumbs ax-breadcrumbs-item ax-prefix{padding-inline:calc(var(--spacing,.25rem)*1)}ax-breadcrumbs ax-breadcrumbs-item>.ax-breadcrumb-divider{padding-inline:calc(var(--spacing,.25rem)*2)}ax-breadcrumbs ax-breadcrumbs-item:first-child .ax-breadcrumb-divider{display:none}}@property --tw-font-weight{syntax:\"*\";inherits:false}\n/*! tailwindcss v4.1.17 | MIT License | https://tailwindcss.com */\n"] }]
+            args: [{ selector: 'ax-breadcrumbs', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgTemplateOutlet], providers: [{ provide: AXComponent, useExisting: AXBreadCrumbsComponent }], template: "<ng-content select=\"ax-breadcrumbs-item\"></ng-content>\n<ng-template #dividerTpl>\n  @if (_divider()) {\n    <ng-container [ngTemplateOutlet]=\"_divider()\"></ng-container>\n  } @else {\n    <ng-container [ngTemplateOutlet]=\"default\"></ng-container>\n  }\n  <ng-template #default>\n    <div class=\"ax-breadcrumb-divider\">/</div>\n  </ng-template>\n</ng-template>\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-font-weight:initial}}}@layer components{ax-breadcrumbs{width:100%;font-size:var(--text-sm,.875rem);line-height:var(--tw-leading,var(--text-sm--line-height,calc(1.25/.875)));scrollbar-width:thin;scroll-snap-type:x proximity;overscroll-behavior-x:contain;align-items:center;display:inline-flex;overflow:auto hidden}ax-breadcrumbs ax-breadcrumbs-item{cursor:pointer;--tw-font-weight:var(--font-weight-medium,500);font-weight:var(--font-weight-medium,500);white-space:nowrap;color:#000000b3;align-items:center;display:inline-flex}@supports (color:color-mix(in lab,red,red)){ax-breadcrumbs ax-breadcrumbs-item{color:color-mix(in oklab,var(--color-black,#000)70%,transparent)}}ax-breadcrumbs ax-breadcrumbs-item{-webkit-user-select:none;user-select:none;text-decoration-thickness:0}ax-breadcrumbs ax-breadcrumbs-item:where(.dark,.dark *){color:#ffffffb3}@supports (color:color-mix(in lab,red,red)){ax-breadcrumbs ax-breadcrumbs-item:where(.dark,.dark *){color:color-mix(in oklab,var(--color-white,#fff)70%,transparent)}}ax-breadcrumbs ax-breadcrumbs-item.ax-state-active .ax-breadcrumb-item-content{color:var(--color-primary,rgba(var(--ax-sys-color-primary-surface)))!important}ax-breadcrumbs ax-breadcrumbs-item.ax-state-disabled .ax-breadcrumb-item-content{cursor:not-allowed!important;opacity:.5!important}ax-breadcrumbs ax-breadcrumbs-item ax-prefix{padding-inline:calc(var(--spacing,.25rem)*1)}ax-breadcrumbs ax-breadcrumbs-item>.ax-breadcrumb-divider{padding-inline:calc(var(--spacing,.25rem)*2)}ax-breadcrumbs ax-breadcrumbs-item:first-child .ax-breadcrumb-divider{display:none}}@property --tw-font-weight{syntax:\"*\";inherits:false}\n/*! tailwindcss v4.1.18 | MIT License | https://tailwindcss.com */\n"] }]
         }], propDecorators: { _divider: [{ type: i0.ContentChild, args: ['divider', { isSignal: true }] }], dividerTemplate: [{ type: i0.ViewChild, args: ['dividerTpl', { isSignal: true }] }] } });
 /**

package/fesm2022/acorex-components-button-group.mjs CHANGED Viewed

@@ -161,11 +161,11 @@ class AXButtonGroupComponent extends classes(MXInteractiveComponent, MXColorLook
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AXButtonGroupComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.15", type: AXButtonGroupComponent, isStandalone: true, selector: "ax-button-group", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: false, isRequired: false, transformFunction: null }, look: { classPropertyName: "look", publicName: "look", isSignal: false, isRequired: false, transformFunction: null }, fitParent: { classPropertyName: "fitParent", publicName: "fitParent", isSignal: true, isRequired: false, transformFunction: null }, customClass: { classPropertyName: "customClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, selection: { classPropertyName: "selection", publicName: "selection", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { onBlur: "onBlur", onFocus: "onFocus", lookChange: "lookChange", colorChange: "colorChange", disabledChange: "disabledChange", onClick: "onClick", selectionChange: "selectionChange", selectedButtonChange: "selectedButtonChange" }, host: { listeners: { "click": "__hostClick($event)" }, properties: { "class": "this.__hostClass", "attr.role": "this.role" } }, providers: [{ provide: AXComponent, useExisting: AXButtonGroupComponent }], queries: [{ propertyName: "_contentButtons", predicate: AXButtonGroupItemComponent, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<ng-container>\n  <ng-content select=\"ax-button-group-item\"></ng-content>\n</ng-container>\n", styles: ["@layer components{ax-button-group{flex-wrap:wrap;display:flex}ax-button-group ax-button-group-item{min-width:calc(var(--spacing,.25rem)*0)}ax-button-group ax-button-group-item ax-button{display:block}ax-button-group ax-button-group-item ax-button>button .ax-button-text{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}ax-button-group ax-button-group-item.ax-state-selected ax-button{z-index:1}ax-button-group ax-button-group-item:not(:first-child,:last-child) ax-button{border-radius:0}ax-button-group ax-button-group-item:not(:first-child) ax-button{margin-inline-start:-1px}ax-button-group ax-button-group-item.ax-row-start ax-button{margin-inline-start:calc(var(--spacing,.25rem)*0)}:is(ax-button-group ax-button-group-item:first-child,ax-button-group ax-button-group-item.ax-row-start) ax-button{border-radius:0;border-start-start-radius:var(--radius-lg,.5rem);border-end-start-radius:var(--radius-lg,.5rem)}:is(ax-button-group ax-button-group-item:last-child,ax-button-group ax-button-group-item.ax-row-end) ax-button{border-radius:0;border-start-end-radius:var(--radius-lg,.5rem);border-end-end-radius:var(--radius-lg,.5rem)}ax-button-group.ax-parent-fit{flex-wrap:wrap}ax-button-group.ax-parent-fit ax-button-group-item,ax-button-group.ax-parent-fit ax-button-group-item ax-button{width:100%}}\n/*! tailwindcss v4.1.17 | MIT License | https://tailwindcss.com */\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.15", type: AXButtonGroupComponent, isStandalone: true, selector: "ax-button-group", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: false, isRequired: false, transformFunction: null }, look: { classPropertyName: "look", publicName: "look", isSignal: false, isRequired: false, transformFunction: null }, fitParent: { classPropertyName: "fitParent", publicName: "fitParent", isSignal: true, isRequired: false, transformFunction: null }, customClass: { classPropertyName: "customClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, selection: { classPropertyName: "selection", publicName: "selection", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { onBlur: "onBlur", onFocus: "onFocus", lookChange: "lookChange", colorChange: "colorChange", disabledChange: "disabledChange", onClick: "onClick", selectionChange: "selectionChange", selectedButtonChange: "selectedButtonChange" }, host: { listeners: { "click": "__hostClick($event)" }, properties: { "class": "this.__hostClass", "attr.role": "this.role" } }, providers: [{ provide: AXComponent, useExisting: AXButtonGroupComponent }], queries: [{ propertyName: "_contentButtons", predicate: AXButtonGroupItemComponent, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<ng-container>\n  <ng-content select=\"ax-button-group-item\"></ng-content>\n</ng-container>\n", styles: ["@layer components{ax-button-group{flex-wrap:wrap;display:flex}ax-button-group ax-button-group-item{min-width:calc(var(--spacing,.25rem)*0)}ax-button-group ax-button-group-item ax-button{display:block}ax-button-group ax-button-group-item ax-button>button .ax-button-text{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}ax-button-group ax-button-group-item.ax-state-selected ax-button{z-index:1}ax-button-group ax-button-group-item:not(:first-child,:last-child) ax-button{border-radius:0}ax-button-group ax-button-group-item:not(:first-child) ax-button{margin-inline-start:-1px}ax-button-group ax-button-group-item.ax-row-start ax-button{margin-inline-start:calc(var(--spacing,.25rem)*0)}:is(ax-button-group ax-button-group-item:first-child,ax-button-group ax-button-group-item.ax-row-start) ax-button{border-radius:0;border-start-start-radius:var(--radius-lg,.5rem);border-end-start-radius:var(--radius-lg,.5rem)}:is(ax-button-group ax-button-group-item:last-child,ax-button-group ax-button-group-item.ax-row-end) ax-button{border-radius:0;border-start-end-radius:var(--radius-lg,.5rem);border-end-end-radius:var(--radius-lg,.5rem)}ax-button-group.ax-parent-fit{flex-wrap:wrap}ax-button-group.ax-parent-fit ax-button-group-item,ax-button-group.ax-parent-fit ax-button-group-item ax-button{width:100%}}\n/*! tailwindcss v4.1.18 | MIT License | https://tailwindcss.com */\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AXButtonGroupComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ax-button-group', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, inputs: ['disabled', 'color', 'look'], outputs: ['onBlur', 'onFocus', 'lookChange', 'colorChange', 'disabledChange'], providers: [{ provide: AXComponent, useExisting: AXButtonGroupComponent }], template: "<ng-container>\n  <ng-content select=\"ax-button-group-item\"></ng-content>\n</ng-container>\n", styles: ["@layer components{ax-button-group{flex-wrap:wrap;display:flex}ax-button-group ax-button-group-item{min-width:calc(var(--spacing,.25rem)*0)}ax-button-group ax-button-group-item ax-button{display:block}ax-button-group ax-button-group-item ax-button>button .ax-button-text{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}ax-button-group ax-button-group-item.ax-state-selected ax-button{z-index:1}ax-button-group ax-button-group-item:not(:first-child,:last-child) ax-button{border-radius:0}ax-button-group ax-button-group-item:not(:first-child) ax-button{margin-inline-start:-1px}ax-button-group ax-button-group-item.ax-row-start ax-button{margin-inline-start:calc(var(--spacing,.25rem)*0)}:is(ax-button-group ax-button-group-item:first-child,ax-button-group ax-button-group-item.ax-row-start) ax-button{border-radius:0;border-start-start-radius:var(--radius-lg,.5rem);border-end-start-radius:var(--radius-lg,.5rem)}:is(ax-button-group ax-button-group-item:last-child,ax-button-group ax-button-group-item.ax-row-end) ax-button{border-radius:0;border-start-end-radius:var(--radius-lg,.5rem);border-end-end-radius:var(--radius-lg,.5rem)}ax-button-group.ax-parent-fit{flex-wrap:wrap}ax-button-group.ax-parent-fit ax-button-group-item,ax-button-group.ax-parent-fit ax-button-group-item ax-button{width:100%}}\n/*! tailwindcss v4.1.17 | MIT License | https://tailwindcss.com */\n"] }]
+            args: [{ selector: 'ax-button-group', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, inputs: ['disabled', 'color', 'look'], outputs: ['onBlur', 'onFocus', 'lookChange', 'colorChange', 'disabledChange'], providers: [{ provide: AXComponent, useExisting: AXButtonGroupComponent }], template: "<ng-container>\n  <ng-content select=\"ax-button-group-item\"></ng-content>\n</ng-container>\n", styles: ["@layer components{ax-button-group{flex-wrap:wrap;display:flex}ax-button-group ax-button-group-item{min-width:calc(var(--spacing,.25rem)*0)}ax-button-group ax-button-group-item ax-button{display:block}ax-button-group ax-button-group-item ax-button>button .ax-button-text{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}ax-button-group ax-button-group-item.ax-state-selected ax-button{z-index:1}ax-button-group ax-button-group-item:not(:first-child,:last-child) ax-button{border-radius:0}ax-button-group ax-button-group-item:not(:first-child) ax-button{margin-inline-start:-1px}ax-button-group ax-button-group-item.ax-row-start ax-button{margin-inline-start:calc(var(--spacing,.25rem)*0)}:is(ax-button-group ax-button-group-item:first-child,ax-button-group ax-button-group-item.ax-row-start) ax-button{border-radius:0;border-start-start-radius:var(--radius-lg,.5rem);border-end-start-radius:var(--radius-lg,.5rem)}:is(ax-button-group ax-button-group-item:last-child,ax-button-group ax-button-group-item.ax-row-end) ax-button{border-radius:0;border-start-end-radius:var(--radius-lg,.5rem);border-end-end-radius:var(--radius-lg,.5rem)}ax-button-group.ax-parent-fit{flex-wrap:wrap}ax-button-group.ax-parent-fit ax-button-group-item,ax-button-group.ax-parent-fit ax-button-group-item ax-button{width:100%}}\n/*! tailwindcss v4.1.18 | MIT License | https://tailwindcss.com */\n"] }]
         }], propDecorators: { fitParent: [{ type: i0.Input, args: [{ isSignal: true, alias: "fitParent", required: false }] }], customClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], onClick: [{
                 type: Output
             }], _contentButtons: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => AXButtonGroupItemComponent), { ...{ descendants: true }, isSignal: true }] }], selectionChange: [{