@acorex/components 21.0.0-next.2 → 21.0.0-next.20

package/fesm2022/acorex-components-decorators.mjs

@@ -1,5 +1,6 @@
 import { MXBaseComponent, AXClearableComponent, AXComponent, AXClosableComponent } from '@acorex/cdk/common';
-import { NgClass, CommonModule } from '@angular/common';
+import { AXTranslatorPipe } from '@acorex/core/translation';
+import { NgClass, AsyncPipe, CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
 import { inject, HostListener, HostBinding, Input, ViewEncapsulation, ChangeDetectionStrategy, Component, input, model, NgModule } from '@angular/core';
 
@@ -46,16 +47,28 @@ class AXDecoratorClearButtonComponent extends MXBaseComponent {
         if (!this._parent.disabled && !this._parent.readonly)
             this._parent?.reset(true);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXDecoratorClearButtonComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.3", type: AXDecoratorClearButtonComponent, isStandalone: true, selector: "ax-clear-button", inputs: { icon: "icon" }, host: { listeners: { "click": "_handleOnClick($event)" }, properties: { "class": "this.hostClass" } }, providers: [{ provide: AXComponent, useExisting: AXDecoratorClearButtonComponent }], usesInheritance: true, ngImport: i0, template: `<button type="button" tabIndex="-1" role="button" aria-label="Clear" title="Clear">
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: AXDecoratorClearButtonComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.9", type: AXDecoratorClearButtonComponent, isStandalone: true, selector: "ax-clear-button", inputs: { icon: "icon" }, host: { listeners: { "click": "_handleOnClick($event)" }, properties: { "class": "this.hostClass" } }, providers: [{ provide: AXComponent, useExisting: AXDecoratorClearButtonComponent }], usesInheritance: true, ngImport: i0, template: `<button
+    type="button"
+    tabIndex="-1"
+    role="button"
+    [attr.aria-label]="'@acorex:common.general.clear' | translate | async"
+    [title]="'@acorex:common.general.clear' | translate | async"
+  >
     <i class="ax-icon-solid" [ngClass]="icon"></i>
-  </button>`, isInline: true, styles: ["ax-clear-button{max-width:fit-content}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+  </button>`, isInline: true, styles: ["ax-clear-button{max-width:fit-content}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXDecoratorClearButtonComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: AXDecoratorClearButtonComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ax-clear-button', template: `<button type="button" tabIndex="-1" role="button" aria-label="Clear" title="Clear">
+            args: [{ selector: 'ax-clear-button', template: `<button
+    type="button"
+    tabIndex="-1"
+    role="button"
+    [attr.aria-label]="'@acorex:common.general.clear' | translate | async"
+    [title]="'@acorex:common.general.clear' | translate | async"
+  >
     <i class="ax-icon-solid" [ngClass]="icon"></i>
-  </button>`, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [NgClass], providers: [{ provide: AXComponent, useExisting: AXDecoratorClearButtonComponent }], styles: ["ax-clear-button{max-width:fit-content}\n"] }]
+  </button>`, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [NgClass, AsyncPipe, AXTranslatorPipe], providers: [{ provide: AXComponent, useExisting: AXDecoratorClearButtonComponent }], styles: ["ax-clear-button{max-width:fit-content}\n"] }]
         }], propDecorators: { icon: [{
                 type: Input
             }], hostClass: [{
@@ -107,27 +120,43 @@ class AXDecoratorCloseButtonComponent extends MXBaseComponent {
             this._parent?.close();
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXDecoratorCloseButtonComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.3", type: AXDecoratorCloseButtonComponent, isStandalone: true, selector: "ax-close-button", inputs: { closeAll: { classPropertyName: "closeAll", publicName: "closeAll", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: false, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "_handleOnClick($event)" } }, providers: [{ provide: AXComponent, useExisting: AXDecoratorCloseButtonComponent }], usesInheritance: true, ngImport: i0, template: `<button
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: AXDecoratorCloseButtonComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.9", type: AXDecoratorCloseButtonComponent, isStandalone: true, selector: "ax-close-button", inputs: { closeAll: { classPropertyName: "closeAll", publicName: "closeAll", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: false, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "_handleOnClick($event)" } }, providers: [{ provide: AXComponent, useExisting: AXDecoratorCloseButtonComponent }], usesInheritance: true, ngImport: i0, template: `<button
     type="button"
     role="button"
-    [attr.aria-label]="closeAll() ? 'Close All' : 'Close'"
-    [title]="closeAll() ? 'Close All' : 'Close'"
+    [attr.aria-label]="
+      closeAll()
+        ? ('@acorex:common.general.close-all' | translate | async)
+        : ('@acorex:common.general.close' | translate | async)
+    "
+    [title]="
+      closeAll()
+        ? ('@acorex:common.general.close-all' | translate | async)
+        : ('@acorex:common.general.close' | translate | async)
+    "
   >
     <i [ngClass]="icon"></i>
-  </button>`, isInline: true, styles: ["ax-close-button button{display:flex;cursor:pointer;background-color:transparent}ax-close-button button i{--ax-sys-icon-size: 1.5rem}ax-close-button button:hover{opacity:.7}ax-close-button button:focus{opacity:.8;outline:2px solid transparent;outline-offset:2px}ax-close-button button:active{opacity:1}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+  </button>`, isInline: true, styles: ["ax-close-button button{display:flex;cursor:pointer;background-color:transparent}ax-close-button button i{--ax-sys-icon-size: 1.5rem}ax-close-button button:hover{opacity:.7}ax-close-button button:focus{opacity:.8;outline:2px solid transparent;outline-offset:2px}ax-close-button button:active{opacity:1}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXDecoratorCloseButtonComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: AXDecoratorCloseButtonComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-close-button', template: `<button
     type="button"
     role="button"
-    [attr.aria-label]="closeAll() ? 'Close All' : 'Close'"
-    [title]="closeAll() ? 'Close All' : 'Close'"
+    [attr.aria-label]="
+      closeAll()
+        ? ('@acorex:common.general.close-all' | translate | async)
+        : ('@acorex:common.general.close' | translate | async)
+    "
+    [title]="
+      closeAll()
+        ? ('@acorex:common.general.close-all' | translate | async)
+        : ('@acorex:common.general.close' | translate | async)
+    "
   >
     <i [ngClass]="icon"></i>
-  </button>`, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [NgClass], providers: [{ provide: AXComponent, useExisting: AXDecoratorCloseButtonComponent }], styles: ["ax-close-button button{display:flex;cursor:pointer;background-color:transparent}ax-close-button button i{--ax-sys-icon-size: 1.5rem}ax-close-button button:hover{opacity:.7}ax-close-button button:focus{opacity:.8;outline:2px solid transparent;outline-offset:2px}ax-close-button button:active{opacity:1}\n"] }]
-        }], propDecorators: { icon: [{
+  </button>`, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [NgClass, AsyncPipe, AXTranslatorPipe], providers: [{ provide: AXComponent, useExisting: AXDecoratorCloseButtonComponent }], styles: ["ax-close-button button{display:flex;cursor:pointer;background-color:transparent}ax-close-button button i{--ax-sys-icon-size: 1.5rem}ax-close-button button:hover{opacity:.7}ax-close-button button:focus{opacity:.8;outline:2px solid transparent;outline-offset:2px}ax-close-button button:active{opacity:1}\n"] }]
+        }], propDecorators: { closeAll: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeAll", required: false }] }], icon: [{
                 type: Input
             }], _handleOnClick: [{
                 type: HostListener,
@@ -138,44 +167,57 @@ class AXDecoratorColorIndicatorComponent {
     constructor() {
         this.previewColor = input(...(ngDevMode ? [undefined, { debugName: "previewColor" }] : []));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXDecoratorColorIndicatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.3", type: AXDecoratorColorIndicatorComponent, isStandalone: true, selector: "ax-color-indicator", inputs: { previewColor: { classPropertyName: "previewColor", publicName: "previewColor", isSignal: true, isRequired: false, transformFunction: null } }, providers: [{ provide: AXComponent, useExisting: AXDecoratorColorIndicatorComponent }], ngImport: i0, template: "<div [style]=\"{ backgroundColor: previewColor() }\" class=\"ax-indicator-color\"></div>\n", styles: ["ax-color-indicator{margin-inline:.3rem;display:block}ax-color-indicator .ax-indicator-color{width:100%;height:.2rem}\n"], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: AXDecoratorColorIndicatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.9", type: AXDecoratorColorIndicatorComponent, isStandalone: true, selector: "ax-color-indicator", inputs: { previewColor: { classPropertyName: "previewColor", publicName: "previewColor", isSignal: true, isRequired: false, transformFunction: null } }, providers: [{ provide: AXComponent, useExisting: AXDecoratorColorIndicatorComponent }], ngImport: i0, template: "<div [style]=\"{ backgroundColor: previewColor() }\" class=\"ax-indicator-color\"></div>\n", styles: ["ax-color-indicator{margin-inline:.3rem;display:block}ax-color-indicator .ax-indicator-color{width:100%;height:.2rem}\n"], encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXDecoratorColorIndicatorComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: AXDecoratorColorIndicatorComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-color-indicator', encapsulation: ViewEncapsulation.None, providers: [{ provide: AXComponent, useExisting: AXDecoratorColorIndicatorComponent }], template: "<div [style]=\"{ backgroundColor: previewColor() }\" class=\"ax-indicator-color\"></div>\n", styles: ["ax-color-indicator{margin-inline:.3rem;display:block}ax-color-indicator .ax-indicator-color{width:100%;height:.2rem}\n"] }]
-        }] });
+        }], propDecorators: { previewColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "previewColor", required: false }] }] } });
 
 class AXDecoratorFullScreenButtonComponent extends MXBaseComponent {
     constructor() {
         super(...arguments);
         this.isActive = model(false, ...(ngDevMode ? [{ debugName: "isActive" }] : []));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXDecoratorFullScreenButtonComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.3", type: AXDecoratorFullScreenButtonComponent, isStandalone: true, selector: "ax-fullscreen-button", inputs: { isActive: { classPropertyName: "isActive", publicName: "isActive", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { isActive: "isActiveChange" }, providers: [{ provide: AXComponent, useExisting: AXDecoratorFullScreenButtonComponent }], usesInheritance: true, ngImport: i0, template: ` <button type="button" tabIndex="-1" role="button" aria-label="Clear" title="Clear">
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: AXDecoratorFullScreenButtonComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.9", type: AXDecoratorFullScreenButtonComponent, isStandalone: true, selector: "ax-fullscreen-button", inputs: { isActive: { classPropertyName: "isActive", publicName: "isActive", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { isActive: "isActiveChange" }, providers: [{ provide: AXComponent, useExisting: AXDecoratorFullScreenButtonComponent }], usesInheritance: true, ngImport: i0, template: ` <button
+    type="button"
+    tabIndex="-1"
+    role="button"
+    [attr.aria-label]="'@acorex:common.general.full-screen' | translate | async"
+    [title]="'@acorex:common.general.full-screen' | translate | async"
+  >
     <i class="ax-icon {{ this.isActive() ? 'ax-icon-close' : 'ax-icon-full-screen' }} "></i>
-  </button>`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+  </button>`, isInline: true, dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXDecoratorFullScreenButtonComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: AXDecoratorFullScreenButtonComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ax-fullscreen-button',
-                    template: ` <button type="button" tabIndex="-1" role="button" aria-label="Clear" title="Clear">
+                    template: ` <button
+    type="button"
+    tabIndex="-1"
+    role="button"
+    [attr.aria-label]="'@acorex:common.general.full-screen' | translate | async"
+    [title]="'@acorex:common.general.full-screen' | translate | async"
+  >
     <i class="ax-icon {{ this.isActive() ? 'ax-icon-close' : 'ax-icon-full-screen' }} "></i>
   </button>`,
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     encapsulation: ViewEncapsulation.None,
                     providers: [{ provide: AXComponent, useExisting: AXDecoratorFullScreenButtonComponent }],
+                    imports: [AsyncPipe, AXTranslatorPipe],
                 }]
-        }] });
+        }], propDecorators: { isActive: [{ type: i0.Input, args: [{ isSignal: true, alias: "isActive", required: false }] }, { type: i0.Output, args: ["isActiveChange"] }] } });
 
 /**
  * A flexible component for various UI elements like footer, header, content, and more.
  * @category Components
  */
 class AXDecoratorGenericComponent extends MXBaseComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXDecoratorGenericComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.3", type: AXDecoratorGenericComponent, isStandalone: true, 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", providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: AXDecoratorGenericComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.9", type: AXDecoratorGenericComponent, isStandalone: true, 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", providers: [
             { provide: 'ax-footer', useExisting: AXDecoratorGenericComponent },
             { provide: 'ax-header', useExisting: AXDecoratorGenericComponent },
             { provide: 'ax-content', useExisting: AXDecoratorGenericComponent },
@@ -191,7 +233,7 @@ class AXDecoratorGenericComponent extends MXBaseComponent {
             { provide: AXComponent, useExisting: AXDecoratorGenericComponent },
         ], usesInheritance: true, ngImport: i0, template: `<ng-content></ng-content>`, isInline: true, styles: [".ax-decoration-container,ax-header,ax-footer{display:flex;justify-content:space-between;gap:.5rem;align-items:center}.ax-decoration-container>ax-prefix,.ax-decoration-container>ax-suffix,ax-header>ax-prefix,ax-header>ax-suffix,ax-footer>ax-prefix,ax-footer>ax-suffix{display:flex;flex:1 1 0%;align-items:center;gap:.5rem}.ax-decoration-container>ax-prefix,ax-header>ax-prefix,ax-footer>ax-prefix{order:-9999;align-items:center;justify-content:flex-start}.ax-decoration-container>ax-suffix,ax-header>ax-suffix,ax-footer>ax-suffix{order:9999;align-items:center;justify-content:flex-end}ax-subtitle{opacity:.75;display:block;font-weight:400;font-size:.875rem;line-height:1.25rem}ax-form-hint{margin-top:.5rem;display:block;font-size:.875rem;line-height:1.25rem;color:rgba(var(--ax-sys-color-on-surface),.75)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXDecoratorGenericComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: AXDecoratorGenericComponent, decorators: [{
             type: Component,
             args: [{ 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', template: `<ng-content></ng-content>`, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [
                         { provide: 'ax-footer', useExisting: AXDecoratorGenericComponent },
@@ -225,13 +267,13 @@ class AXDecoratorHeadingComponent extends MXBaseComponent {
     get __hostClass() {
         return `ax-heading-${this.color()} ax-${this.weight()} ${!this.darkMode() && 'ax-heading-no-dark'}`;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXDecoratorHeadingComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.3", type: AXDecoratorHeadingComponent, isStandalone: true, selector: "ax-heading", inputs: { darkMode: { classPropertyName: "darkMode", publicName: "darkMode", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, weight: { classPropertyName: "weight", publicName: "weight", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "this.__hostClass" } }, providers: [{ provide: AXComponent, useExisting: AXDecoratorHeadingComponent }], usesInheritance: true, ngImport: i0, template: `<ng-content></ng-content>`, isInline: true, styles: ["ax-heading{display:flex;flex-direction:column}ax-heading:has(h1,h2,h3){gap:.5rem}ax-heading:has(h4,h5,h6){gap:.25rem}ax-heading h1,ax-heading h2,ax-heading h3,ax-heading h4,ax-heading h5,ax-heading h6{font-weight:var(--ax-comp-heading-font-weight)}ax-heading p,ax-heading ax-subtitle{font-size:1rem;line-height:1.625rem}ax-heading h1{font-size:2rem;line-height:2.5rem;letter-spacing:-1.5%}ax-heading h2{font-size:1.625rem;line-height:2.125rem;letter-spacing:-1.5%}ax-heading h3{font-size:1.375rem;line-height:1.875rem;letter-spacing:-1%}ax-heading h4{font-size:1.125rem;line-height:1.625rem;letter-spacing:-.5%}ax-heading h5{font-size:1rem;line-height:1.5rem;letter-spacing:-.5%}ax-heading h6{font-size:.875rem;line-height:1.375rem}ax-heading.ax-regular{--ax-comp-heading-font-weight: 400}ax-heading.ax-medium{--ax-comp-heading-font-weight: 500}ax-heading.ax-semibold{--ax-comp-heading-font-weight: 600}ax-heading.ax-bold{--ax-comp-heading-font-weight: 700}ax-heading.ax-heading-lightest ax-subtitle{opacity:74%}ax-heading.ax-heading-lighter ax-subtitle{opacity:76%}ax-heading.ax-heading-light ax-subtitle{opacity:78%}ax-heading.ax-heading-surface ax-subtitle{opacity:80%}ax-heading.ax-heading-dark ax-subtitle{opacity:82%}ax-heading.ax-heading-darker ax-subtitle{opacity:84%}ax-heading.ax-heading-darkest ax-subtitle{opacity:86%}.ax-dark ax-heading.ax-heading-no-dark.ax-heading-lightest ax-subtitle{opacity:86%}.ax-dark ax-heading.ax-heading-no-dark.ax-heading-lighter ax-subtitle{opacity:84%}.ax-dark ax-heading.ax-heading-no-dark.ax-heading-light ax-subtitle{opacity:82%}.ax-dark ax-heading.ax-heading-no-dark.ax-heading-surface ax-subtitle{opacity:80%}.ax-dark ax-heading.ax-heading-no-dark.ax-heading-dark ax-subtitle{opacity:78%}.ax-dark ax-heading.ax-heading-no-dark.ax-heading-darker ax-subtitle{opacity:76%}.ax-dark ax-heading.ax-heading-no-dark.ax-heading-darkest ax-subtitle{opacity:74%}@media screen and (max-width: 768px){ax-heading h1{font-size:1.5rem;line-height:1.875rem}ax-heading h2{font-size:1.375rem;line-height:1.75rem}ax-heading h3{font-size:1.25rem;line-height:1.625rem}ax-heading h4{line-height:1.5rem}ax-heading h5{line-height:1.375rem}ax-heading h6{line-height:1.25rem}ax-heading p,ax-heading ax-subtitle{line-height:1.5rem}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: AXDecoratorHeadingComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.9", type: AXDecoratorHeadingComponent, isStandalone: true, selector: "ax-heading", inputs: { darkMode: { classPropertyName: "darkMode", publicName: "darkMode", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, weight: { classPropertyName: "weight", publicName: "weight", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "this.__hostClass" } }, providers: [{ provide: AXComponent, useExisting: AXDecoratorHeadingComponent }], usesInheritance: true, ngImport: i0, template: `<ng-content></ng-content>`, isInline: true, styles: ["ax-heading{display:flex;flex-direction:column}ax-heading:has(h1,h2,h3){gap:.5rem}ax-heading:has(h4,h5,h6){gap:.25rem}ax-heading h1,ax-heading h2,ax-heading h3,ax-heading h4,ax-heading h5,ax-heading h6{font-weight:var(--ax-comp-heading-font-weight)}ax-heading p,ax-heading ax-subtitle{font-size:1rem;line-height:1.625rem}ax-heading h1{font-size:2rem;line-height:2.5rem;letter-spacing:-1.5%}ax-heading h2{font-size:1.625rem;line-height:2.125rem;letter-spacing:-1.5%}ax-heading h3{font-size:1.375rem;line-height:1.875rem;letter-spacing:-1%}ax-heading h4{font-size:1.125rem;line-height:1.625rem;letter-spacing:-.5%}ax-heading h5{font-size:1rem;line-height:1.5rem;letter-spacing:-.5%}ax-heading h6{font-size:.875rem;line-height:1.375rem}ax-heading.ax-regular{--ax-comp-heading-font-weight: 400}ax-heading.ax-medium{--ax-comp-heading-font-weight: 500}ax-heading.ax-semibold{--ax-comp-heading-font-weight: 600}ax-heading.ax-bold{--ax-comp-heading-font-weight: 700}ax-heading.ax-heading-lightest ax-subtitle{opacity:74%}ax-heading.ax-heading-lighter ax-subtitle{opacity:76%}ax-heading.ax-heading-light ax-subtitle{opacity:78%}ax-heading.ax-heading-surface ax-subtitle{opacity:80%}ax-heading.ax-heading-dark ax-subtitle{opacity:82%}ax-heading.ax-heading-darker ax-subtitle{opacity:84%}ax-heading.ax-heading-darkest ax-subtitle{opacity:86%}.ax-dark ax-heading.ax-heading-no-dark.ax-heading-lightest ax-subtitle{opacity:86%}.ax-dark ax-heading.ax-heading-no-dark.ax-heading-lighter ax-subtitle{opacity:84%}.ax-dark ax-heading.ax-heading-no-dark.ax-heading-light ax-subtitle{opacity:82%}.ax-dark ax-heading.ax-heading-no-dark.ax-heading-surface ax-subtitle{opacity:80%}.ax-dark ax-heading.ax-heading-no-dark.ax-heading-dark ax-subtitle{opacity:78%}.ax-dark ax-heading.ax-heading-no-dark.ax-heading-darker ax-subtitle{opacity:76%}.ax-dark ax-heading.ax-heading-no-dark.ax-heading-darkest ax-subtitle{opacity:74%}@media screen and (max-width: 768px){ax-heading h1{font-size:1.5rem;line-height:1.875rem}ax-heading h2{font-size:1.375rem;line-height:1.75rem}ax-heading h3{font-size:1.25rem;line-height:1.625rem}ax-heading h4{line-height:1.5rem}ax-heading h5{line-height:1.375rem}ax-heading h6{line-height:1.25rem}ax-heading p,ax-heading ax-subtitle{line-height:1.5rem}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXDecoratorHeadingComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: AXDecoratorHeadingComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-heading', template: `<ng-content></ng-content>`, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [{ provide: AXComponent, useExisting: AXDecoratorHeadingComponent }], styles: ["ax-heading{display:flex;flex-direction:column}ax-heading:has(h1,h2,h3){gap:.5rem}ax-heading:has(h4,h5,h6){gap:.25rem}ax-heading h1,ax-heading h2,ax-heading h3,ax-heading h4,ax-heading h5,ax-heading h6{font-weight:var(--ax-comp-heading-font-weight)}ax-heading p,ax-heading ax-subtitle{font-size:1rem;line-height:1.625rem}ax-heading h1{font-size:2rem;line-height:2.5rem;letter-spacing:-1.5%}ax-heading h2{font-size:1.625rem;line-height:2.125rem;letter-spacing:-1.5%}ax-heading h3{font-size:1.375rem;line-height:1.875rem;letter-spacing:-1%}ax-heading h4{font-size:1.125rem;line-height:1.625rem;letter-spacing:-.5%}ax-heading h5{font-size:1rem;line-height:1.5rem;letter-spacing:-.5%}ax-heading h6{font-size:.875rem;line-height:1.375rem}ax-heading.ax-regular{--ax-comp-heading-font-weight: 400}ax-heading.ax-medium{--ax-comp-heading-font-weight: 500}ax-heading.ax-semibold{--ax-comp-heading-font-weight: 600}ax-heading.ax-bold{--ax-comp-heading-font-weight: 700}ax-heading.ax-heading-lightest ax-subtitle{opacity:74%}ax-heading.ax-heading-lighter ax-subtitle{opacity:76%}ax-heading.ax-heading-light ax-subtitle{opacity:78%}ax-heading.ax-heading-surface ax-subtitle{opacity:80%}ax-heading.ax-heading-dark ax-subtitle{opacity:82%}ax-heading.ax-heading-darker ax-subtitle{opacity:84%}ax-heading.ax-heading-darkest ax-subtitle{opacity:86%}.ax-dark ax-heading.ax-heading-no-dark.ax-heading-lightest ax-subtitle{opacity:86%}.ax-dark ax-heading.ax-heading-no-dark.ax-heading-lighter ax-subtitle{opacity:84%}.ax-dark ax-heading.ax-heading-no-dark.ax-heading-light ax-subtitle{opacity:82%}.ax-dark ax-heading.ax-heading-no-dark.ax-heading-surface ax-subtitle{opacity:80%}.ax-dark ax-heading.ax-heading-no-dark.ax-heading-dark ax-subtitle{opacity:78%}.ax-dark ax-heading.ax-heading-no-dark.ax-heading-darker ax-subtitle{opacity:76%}.ax-dark ax-heading.ax-heading-no-dark.ax-heading-darkest ax-subtitle{opacity:74%}@media screen and (max-width: 768px){ax-heading h1{font-size:1.5rem;line-height:1.875rem}ax-heading h2{font-size:1.375rem;line-height:1.75rem}ax-heading h3{font-size:1.25rem;line-height:1.625rem}ax-heading h4{line-height:1.5rem}ax-heading h5{line-height:1.375rem}ax-heading h6{line-height:1.25rem}ax-heading p,ax-heading ax-subtitle{line-height:1.5rem}}\n"] }]
-        }], propDecorators: { __hostClass: [{
+        }], propDecorators: { darkMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "darkMode", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], weight: [{ type: i0.Input, args: [{ isSignal: true, alias: "weight", required: false }] }], __hostClass: [{
                 type: HostBinding,
                 args: ['class']
             }] } });
@@ -257,13 +299,13 @@ class AXDecoratorIconComponent extends MXBaseComponent {
         this.cdr.detectChanges();
         return `${this.icon}`;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXDecoratorIconComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.3", type: AXDecoratorIconComponent, isStandalone: true, selector: "ax-icon", inputs: { icon: "icon" }, host: { properties: { "class": "this.__iconClass" } }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: AXDecoratorIconComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.9", type: AXDecoratorIconComponent, isStandalone: true, selector: "ax-icon", inputs: { icon: "icon" }, host: { properties: { "class": "this.__iconClass" } }, providers: [
             { provide: 'ax-icon', useExisting: AXDecoratorIconComponent },
             { provide: AXComponent, useExisting: AXDecoratorIconComponent },
         ], usesInheritance: true, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: ["ax-icon{display:inherit}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXDecoratorIconComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: AXDecoratorIconComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-icon', template: '<ng-content></ng-content>', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [
                         { provide: 'ax-icon', useExisting: AXDecoratorIconComponent },
@@ -287,8 +329,8 @@ const COMPONENT = [
 ];
 const MODULES = [CommonModule];
 class AXDecoratorModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXDecoratorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.3", ngImport: i0, type: AXDecoratorModule, imports: [CommonModule, AXDecoratorIconComponent,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: AXDecoratorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.9", ngImport: i0, type: AXDecoratorModule, imports: [CommonModule, AXDecoratorIconComponent,
             AXDecoratorClearButtonComponent,
             AXDecoratorCloseButtonComponent,
             AXDecoratorGenericComponent,
@@ -301,9 +343,9 @@ class AXDecoratorModule {
             AXDecoratorFullScreenButtonComponent,
             AXDecoratorHeadingComponent,
             AXDecoratorColorIndicatorComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXDecoratorModule, imports: [MODULES] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: AXDecoratorModule, imports: [MODULES] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXDecoratorModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: AXDecoratorModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [...MODULES, ...COMPONENT],