@acorex/components 21.0.0-next.3 → 21.0.0-next.31

package/fesm2022/acorex-components-form.mjs

@@ -1,9 +1,9 @@
-import { AXEvent, MXBaseComponent, AXComponent, AXValuableComponent } from '@acorex/cdk/common';
+import { AXEvent, MXValueComponent, AXComponent, MXBaseComponent, AXValuableComponent } from '@acorex/cdk/common';
 import { AXLabelComponent } from '@acorex/components/label';
 import { AXSelectBoxComponent } from '@acorex/components/select-box';
 import { AXUnsubscriber } from '@acorex/core/utils';
 import * as i0 from '@angular/core';
-import { input, contentChildren, effect, EventEmitter, Input, Output, ChangeDetectionStrategy, ViewEncapsulation, Component, signal, inject, ViewContainerRef, afterNextRender, HostBinding, ContentChild, InjectionToken, Directive, NgModule } from '@angular/core';
+import { input, contentChildren, effect, afterNextRender, EventEmitter, Input, Output, ChangeDetectionStrategy, ViewEncapsulation, Component, signal, inject, ViewContainerRef, HostBinding, ContentChild, InjectionToken, Directive, NgModule } from '@angular/core';
 import { AXAlertComponent, AXAlertModule } from '@acorex/components/alert';
 import { AXButtonComponent, AXButtonModule } from '@acorex/components/button';
 import { AXDecoratorIconComponent, AXDecoratorGenericComponent, AXDecoratorModule } from '@acorex/components/decorators';
@@ -23,8 +23,9 @@ class AXFormValidationEvent extends AXEvent {
  *
  * @category Components
  */
-class AXFormComponent extends MXBaseComponent {
+class AXFormComponent extends MXValueComponent {
     #applyLooks;
+    #init;
     /**
      * Determines when the form should be updated.
      */
@@ -79,6 +80,28 @@ class AXFormComponent extends MXBaseComponent {
                 }
             });
         }, ...(ngDevMode ? [{ debugName: "#applyLooks" }] : []));
+        this.#init = afterNextRender(() => {
+            this.content().forEach((item) => {
+                if (item.input) {
+                    item.input.disabled = this.disabled;
+                    item.input.readonly = this.readonly;
+                }
+            });
+            this.disabledChange.subscribe((disabled) => {
+                this.content().forEach((item) => {
+                    if (item.input) {
+                        item.input.disabled = disabled;
+                    }
+                });
+            });
+            this.readonlyChange.subscribe((readonly) => {
+                this.content().forEach((item) => {
+                    if (item.input) {
+                        item.input.readonly = readonly;
+                    }
+                });
+            });
+        });
         /**
          * Determines the style of the message in the form field.
          * @defaultValue 'bottom'
@@ -198,23 +221,17 @@ class AXFormComponent extends MXBaseComponent {
     ngOnDestroy() {
         this._clearSubs();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.3", type: AXFormComponent, isStandalone: true, selector: "ax-form", inputs: { labelMode: { classPropertyName: "labelMode", publicName: "labelMode", isSignal: true, isRequired: false, transformFunction: null }, look: { classPropertyName: "look", publicName: "look", isSignal: true, isRequired: false, transformFunction: null }, messageStyle: { classPropertyName: "messageStyle", publicName: "messageStyle", isSignal: true, isRequired: false, transformFunction: null }, updateOn: { classPropertyName: "updateOn", publicName: "updateOn", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { onValidate: "onValidate", updateOnChange: "updateOnChange" }, providers: [{ provide: AXComponent, useExisting: AXFormComponent }], queries: [{ propertyName: "content", predicate: AXFormFieldComponent, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: `<form (submit)="_handleSubmit($event)" (reset)="_handleReset()" class="ax-{{ messageStyle() }}-error">
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.12", type: AXFormComponent, isStandalone: true, selector: "ax-form", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: false, isRequired: false, transformFunction: null }, labelMode: { classPropertyName: "labelMode", publicName: "labelMode", isSignal: true, isRequired: false, transformFunction: null }, look: { classPropertyName: "look", publicName: "look", isSignal: true, isRequired: false, transformFunction: null }, messageStyle: { classPropertyName: "messageStyle", publicName: "messageStyle", isSignal: true, isRequired: false, transformFunction: null }, updateOn: { classPropertyName: "updateOn", publicName: "updateOn", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { onValidate: "onValidate", updateOnChange: "updateOnChange" }, providers: [{ provide: AXComponent, useExisting: AXFormComponent }], queries: [{ propertyName: "content", predicate: AXFormFieldComponent, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: `<form (submit)="_handleSubmit($event)" (reset)="_handleReset()" class="ax-{{ messageStyle() }}-error">
     <ng-content></ng-content>
-  </form>`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+  </form>`, isInline: true, styles: ["ax-form{width:100%}ax-form form{height:100%}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXFormComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXFormComponent, decorators: [{
             type: Component,
-            args: [{
-                    selector: 'ax-form',
-                    template: `<form (submit)="_handleSubmit($event)" (reset)="_handleReset()" class="ax-{{ messageStyle() }}-error">
+            args: [{ selector: 'ax-form', template: `<form (submit)="_handleSubmit($event)" (reset)="_handleReset()" class="ax-{{ messageStyle() }}-error">
     <ng-content></ng-content>
-  </form>`,
-                    encapsulation: ViewEncapsulation.None,
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    providers: [{ provide: AXComponent, useExisting: AXFormComponent }],
-                }]
-        }], ctorParameters: () => [], propDecorators: { onValidate: [{
+  </form>`, inputs: ['disabled', 'readonly'], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [{ provide: AXComponent, useExisting: AXFormComponent }], styles: ["ax-form{width:100%}ax-form form{height:100%}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { labelMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelMode", required: false }] }], look: [{ type: i0.Input, args: [{ isSignal: true, alias: "look", required: false }] }], content: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => AXFormFieldComponent), { ...{ descendants: true }, isSignal: true }] }], messageStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "messageStyle", required: false }] }], onValidate: [{
                 type: Output
             }], updateOnChange: [{
                 type: Output
@@ -249,7 +266,7 @@ class AXFormFieldComponent extends MXBaseComponent {
             this.setRequired();
             this.setLabelMode();
             this.listeningEvent();
-            this.calcIndentSize();
+            // this.calcIndentSize();
             this.autoSetLabelAssociation();
         });
         effect(() => {
@@ -257,7 +274,7 @@ class AXFormFieldComponent extends MXBaseComponent {
         });
     }
     ngAfterContentChecked() {
-        this.calcIndentSize();
+        // this.calcIndentSize();
     }
     /**
      * Calculates and sets the indentation size for the label based on the width of the prefix element.
@@ -266,7 +283,7 @@ class AXFormFieldComponent extends MXBaseComponent {
     calcIndentSize() {
         const prefix = this.input?.getHostElement()?.querySelector('ax-prefix');
         if (prefix && this.label) {
-            this.label.getHostElement().style.insetInlineStart = `calc(${prefix?.clientWidth}px + var(--ax-comp-editor-gap))`;
+            this.label.getHostElement().style.insetInlineStart = `calc(${prefix?.clientWidth}px + calc(var(--spacing) * 2) + calc(var(--spacing) * 3))`;
             this.label.getHostElement().style.paddingInline = '0px';
         }
     }
@@ -353,13 +370,13 @@ class AXFormFieldComponent extends MXBaseComponent {
         }
         return [`ax-state-${this._labelMode()}-label`, `${hasValue && 'ax-state-has-value'}`];
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXFormFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.3", type: AXFormFieldComponent, isStandalone: true, selector: "ax-form-field", inputs: { labelMode: { classPropertyName: "labelMode", publicName: "labelMode", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "this.__hostClass" } }, providers: [AXUnsubscriber, { provide: AXComponent, useExisting: AXFormFieldComponent }], queries: [{ propertyName: "input", first: true, predicate: AXValuableComponent, descendants: true }, { propertyName: "label", first: true, predicate: AXLabelComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: `<ng-content></ng-content>`, isInline: true, styles: ["ax-form-field{position:relative;display:block;width:100%}ax-form-field.ax-state-floating-label{--ax-sys-size-base: 3.5rem}ax-form-field.ax-state-floating-label>ax-label{position:absolute;top:calc(var(--ax-sys-size-base, 3.5rem) / 2);transform:translateY(-50%);inset-inline-start:1rem;pointer-events:none;z-index:10;display:inline-grid;transition-property:transform,top;transition-duration:var(--ax-sys-transition-duration);transition-timing-function:var(--ax-sys-transition-timing-function)}ax-form-field.ax-state-floating-label>ax-label label{margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}ax-form-field.ax-state-floating-label .ax-input::placeholder,ax-form-field.ax-state-floating-label .ax-input .ax-placeholder{opacity:0}ax-form-field.ax-state-floating-label.ax-state-focused>ax-label,ax-form-field.ax-state-floating-label.ax-state-has-value>ax-label{transform:translateY(-115%) translate(-2.5%) scale(.95);inset-inline-start:.5rem}ax-form-field.ax-state-floating-label.ax-state-focused>ax-label label,ax-form-field.ax-state-floating-label.ax-state-has-value>ax-label label{font-size:.75rem;color:rgba(var(--ax-sys-body-text-color),.5)}ax-form-field.ax-state-floating-label.ax-state-focused .ax-input,ax-form-field.ax-state-floating-label.ax-state-focused .ax-content,ax-form-field.ax-state-floating-label.ax-state-focused ax-text-area,ax-form-field.ax-state-floating-label.ax-state-has-value .ax-input,ax-form-field.ax-state-floating-label.ax-state-has-value .ax-content,ax-form-field.ax-state-floating-label.ax-state-has-value ax-text-area{padding-top:.875rem}ax-form-field.ax-state-floating-label.ax-state-focused .ax-input::placeholder,ax-form-field.ax-state-floating-label.ax-state-focused .ax-content::placeholder,ax-form-field.ax-state-floating-label.ax-state-focused ax-text-area::placeholder,ax-form-field.ax-state-floating-label.ax-state-has-value .ax-input::placeholder,ax-form-field.ax-state-floating-label.ax-state-has-value .ax-content::placeholder,ax-form-field.ax-state-floating-label.ax-state-has-value ax-text-area::placeholder{opacity:1}ax-form-field.ax-state-floating-label.ax-state-focused .ax-chips-container,ax-form-field.ax-state-floating-label.ax-state-has-value .ax-chips-container{padding:0}ax-form-field.ax-state-floating-label.ax-state-focused ax-text-area .ax-editor-container,ax-form-field.ax-state-floating-label.ax-state-has-value ax-text-area .ax-editor-container{padding-top:1.5rem}ax-form-field.ax-state-floating-label.ax-state-focused ax-text-area textarea,ax-form-field.ax-state-floating-label.ax-state-has-value ax-text-area textarea{padding-top:0!important}ax-form-field.ax-state-over-label{--ax-sys-size-base: 3.5rem}ax-form-field.ax-state-over-label>ax-label{position:absolute;pointer-events:none;z-index:10;display:inline-grid;top:10%;transform:translateY(-10%);inset-inline-start:.5rem;transition-property:transform,top;transition-duration:var(--ax-sys-transition-duration);transition-timing-function:var(--ax-sys-transition-timing-function)}ax-form-field.ax-state-over-label>ax-label label{margin:0;overflow:hidden;text-overflow:ellipsis;font-size:.75rem;white-space:nowrap}ax-form-field.ax-state-over-label .ax-input,ax-form-field.ax-state-over-label .ax-content,ax-form-field.ax-state-over-label ax-text-area{padding-top:1rem}ax-form-field.ax-state-over-label.ax-state-focused ax-text-area .ax-editor-container,ax-form-field.ax-state-over-label.ax-state-has-value ax-text-area .ax-editor-container{padding-top:1.5rem}ax-form-field.ax-state-over-label.ax-state-focused ax-text-area textarea,ax-form-field.ax-state-over-label.ax-state-has-value ax-text-area textarea{padding-top:0!important}ax-form-field.ax-state-floating-label .ax-chips-container.ax-multiple,ax-form-field.ax-state-over-label .ax-chips-container.ax-multiple{padding-top:1.5rem!important;padding-inline-start:.75rem}ax-form-field .ax-error-message{margin-top:.25rem;margin-bottom:.25rem;display:block;font-size:.75rem;line-height:1rem}ax-form{width:100%}ax-form form.ax-bottom-error .ax-error-message{color:rgba(var(--ax-sys-color-danger-surface))}ax-form form.ax-float-error .ax-error-message{position:absolute;bottom:-2.5rem;z-index:20;display:block;width:fit-content;border-radius:.375rem;border-width:1px;border-color:rgba(var(--ax-sys-color-border-danger-surface));background-color:rgba(var(--ax-sys-color-danger-surface));color:rgba(var(--ax-sys-color-on-danger-surface));padding:.25rem .5rem;font-weight:400}ax-form form.ax-float-error .ax-error-message:before,ax-form form.ax-float-error .ax-error-message:after{pointer-events:none;position:absolute;bottom:100%;inset-inline-start:.75rem;z-index:20;height:0px;width:0px;border-bottom-color:rgba(var(--ax-sys-color-danger-surface));border-inline-end-color:transparent;border-inline-start-color:transparent;border-top-color:transparent;content:\"\"}ax-form form.ax-float-error .ax-error-message:before{margin-inline-start:-1px;border-width:4px;border-bottom-color:rgba(var(--ax-sys-color-danger-surface))}ax-form form.ax-float-error .ax-error-message:after{border-width:4px}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXFormFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.12", type: AXFormFieldComponent, isStandalone: true, selector: "ax-form-field", inputs: { labelMode: { classPropertyName: "labelMode", publicName: "labelMode", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "this.__hostClass" } }, providers: [AXUnsubscriber, { provide: AXComponent, useExisting: AXFormFieldComponent }], queries: [{ propertyName: "input", first: true, predicate: AXValuableComponent, descendants: true }, { propertyName: "label", first: true, predicate: AXLabelComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: `<ng-content></ng-content>`, isInline: true, 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-translate-x:0;--tw-translate-y:0;--tw-translate-z:0}}}@layer components{form .ax-error-message{margin-top:calc(var(--spacing,.25rem)*1);font-size:var(--text-sm,.875rem);line-height:var(--tw-leading,var(--text-sm--line-height,calc(1.25/.875)));color:var(--color-danger-600,rgba(var(--ax-sys-color-danger-600)))}form.ax-float-error .ax-error-message:before{content:\"\";inset-inline-start:calc(var(--spacing,.25rem)*2);top:calc(var(--spacing,.25rem)*-1);z-index:-10;width:calc(var(--spacing,.25rem)*3);height:calc(var(--spacing,.25rem)*3);background-color:var(--color-danger-600,rgba(var(--ax-sys-color-danger-600)));position:absolute;rotate:45deg}form.ax-float-error .ax-error-message{inset-inline-start:calc(var(--spacing,.25rem)*0);bottom:calc(var(--spacing,.25rem)*0);z-index:20;--tw-translate-y:100%;height:fit-content;translate:var(--tw-translate-x)var(--tw-translate-y);border-radius:var(--radius-sm,.25rem);background-color:var(--color-danger-600,rgba(var(--ax-sys-color-danger-600)));padding-inline:calc(var(--spacing,.25rem)*2);padding-block:calc(var(--spacing,.25rem)*.5);font-size:var(--text-xs,.75rem);line-height:var(--tw-leading,var(--text-xs--line-height,calc(1/.75)));color:var(--color-on-danger,rgba(var(--ax-sys-color-on-danger-surface)));position:absolute}:is(.ax-md ax-form-field.ax-state-floating-label,.ax-md ax-form-field.ax-state-over-label) .ax-editor-container{height:calc(var(--spacing,.25rem)*14)}:is(.ax-sm ax-form-field.ax-state-floating-label,.ax-sm ax-form-field.ax-state-over-label) .ax-editor-container{height:calc(var(--spacing,.25rem)*12)}:is(.ax-xs ax-form-field.ax-state-floating-label,.ax-xs ax-form-field.ax-state-over-label) .ax-editor-container{height:calc(var(--spacing,.25rem)*10)}:is(.ax-lg ax-form-field.ax-state-floating-label,.ax-lg ax-form-field.ax-state-over-label) .ax-editor-container{height:calc(var(--spacing,.25rem)*16)}:is(.ax-xl ax-form-field.ax-state-floating-label,.ax-xl ax-form-field.ax-state-over-label) .ax-editor-container{height:calc(var(--spacing,.25rem)*18)}ax-form-field{width:100%;display:block;position:relative}:is(ax-form-field.ax-state-floating-label,ax-form-field.ax-state-over-label,ax-form-field.ax-state-over-label.ax-md) .ax-editor-container{height:calc(var(--spacing,.25rem)*14)}:is(ax-form-field.ax-state-floating-label,ax-form-field.ax-state-over-label) .ax-editor-container{align-items:center}:is(ax-form-field.ax-state-floating-label,ax-form-field.ax-state-over-label) .ax-editor-container .ax-content,:is(ax-form-field.ax-state-floating-label,ax-form-field.ax-state-over-label) .ax-editor-container .ax-input,:is(ax-form-field.ax-state-floating-label,ax-form-field.ax-state-over-label) .ax-editor-container ax-prefix,:is(ax-form-field.ax-state-floating-label,ax-form-field.ax-state-over-label) .ax-editor-container ax-suffix{padding-top:calc(var(--spacing,.25rem)*7)!important;padding-bottom:calc(var(--spacing,.25rem)*3)!important}:is(ax-form-field.ax-state-floating-label,ax-form-field.ax-state-over-label) .ax-editor-container .ax-editor-container .ax-content{padding-top:calc(var(--spacing,.25rem)*3)!important}:is(ax-form-field.ax-state-floating-label,ax-form-field.ax-state-over-label) ax-label{z-index:10;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));--tw-translate-y: -50% ;translate:var(--tw-translate-x)var(--tw-translate-y);inset-inline-start:calc(var(--spacing,.25rem)*3);position:absolute;top:50%}:is(ax-form-field.ax-state-floating-label,ax-form-field.ax-state-over-label) ax-label label{margin-bottom:calc(var(--spacing,.25rem)*0)}:is(ax-form-field.ax-state-floating-label,ax-form-field.ax-state-over-label) .ax-input::placeholder,:is(ax-form-field.ax-state-floating-label,ax-form-field.ax-state-over-label) .ax-placeholder,:is(ax-form-field.ax-state-floating-label,ax-form-field.ax-state-over-label) ax-prefix,:is(ax-form-field.ax-state-floating-label,ax-form-field.ax-state-over-label) ax-suffix{opacity:0}:is(ax-form-field.ax-state-has-value,ax-form-field.ax-state-focused,ax-form-field.ax-state-over-label) ax-label{inset-inline-start:calc(var(--spacing,.25rem)*3);top:calc(var(--spacing,.25rem)*4);padding-inline:calc(var(--spacing,.25rem)*1);padding:calc(var(--spacing,.25rem)*0)!important}:is(ax-form-field.ax-state-has-value,ax-form-field.ax-state-focused,ax-form-field.ax-state-over-label) ax-label label{margin-bottom:calc(var(--spacing,.25rem)*0);font-size:var(--text-xs,.75rem);line-height:var(--tw-leading,var(--text-xs--line-height,calc(1/.75)))}:is(ax-form-field.ax-state-has-value,ax-form-field.ax-state-focused,ax-form-field.ax-state-over-label) .ax-input::placeholder,:is(ax-form-field.ax-state-has-value,ax-form-field.ax-state-focused,ax-form-field.ax-state-over-label) .ax-placeholder,:is(ax-form-field.ax-state-has-value,ax-form-field.ax-state-focused,ax-form-field.ax-state-over-label) ax-prefix,:is(ax-form-field.ax-state-has-value,ax-form-field.ax-state-focused,ax-form-field.ax-state-over-label) ax-suffix{opacity:1}:is(ax-form-field.ax-state-has-value,ax-form-field.ax-state-focused,ax-form-field.ax-state-over-label) ax-prefix .ax-editor-container .ax-input,:is(ax-form-field.ax-state-has-value,ax-form-field.ax-state-focused,ax-form-field.ax-state-over-label) ax-prefix .ax-editor-container .ax-content{padding-top:calc(var(--spacing,.25rem)*1)!important}}@property --tw-translate-x{syntax:\"*\";inherits:false;initial-value:0}@property --tw-translate-y{syntax:\"*\";inherits:false;initial-value:0}@property --tw-translate-z{syntax:\"*\";inherits:false;initial-value:0}\n/*! tailwindcss v4.1.17 | MIT License | https://tailwindcss.com */\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXFormFieldComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXFormFieldComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ax-form-field', template: `<ng-content></ng-content>`, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [AXUnsubscriber, { provide: AXComponent, useExisting: AXFormFieldComponent }], styles: ["ax-form-field{position:relative;display:block;width:100%}ax-form-field.ax-state-floating-label{--ax-sys-size-base: 3.5rem}ax-form-field.ax-state-floating-label>ax-label{position:absolute;top:calc(var(--ax-sys-size-base, 3.5rem) / 2);transform:translateY(-50%);inset-inline-start:1rem;pointer-events:none;z-index:10;display:inline-grid;transition-property:transform,top;transition-duration:var(--ax-sys-transition-duration);transition-timing-function:var(--ax-sys-transition-timing-function)}ax-form-field.ax-state-floating-label>ax-label label{margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}ax-form-field.ax-state-floating-label .ax-input::placeholder,ax-form-field.ax-state-floating-label .ax-input .ax-placeholder{opacity:0}ax-form-field.ax-state-floating-label.ax-state-focused>ax-label,ax-form-field.ax-state-floating-label.ax-state-has-value>ax-label{transform:translateY(-115%) translate(-2.5%) scale(.95);inset-inline-start:.5rem}ax-form-field.ax-state-floating-label.ax-state-focused>ax-label label,ax-form-field.ax-state-floating-label.ax-state-has-value>ax-label label{font-size:.75rem;color:rgba(var(--ax-sys-body-text-color),.5)}ax-form-field.ax-state-floating-label.ax-state-focused .ax-input,ax-form-field.ax-state-floating-label.ax-state-focused .ax-content,ax-form-field.ax-state-floating-label.ax-state-focused ax-text-area,ax-form-field.ax-state-floating-label.ax-state-has-value .ax-input,ax-form-field.ax-state-floating-label.ax-state-has-value .ax-content,ax-form-field.ax-state-floating-label.ax-state-has-value ax-text-area{padding-top:.875rem}ax-form-field.ax-state-floating-label.ax-state-focused .ax-input::placeholder,ax-form-field.ax-state-floating-label.ax-state-focused .ax-content::placeholder,ax-form-field.ax-state-floating-label.ax-state-focused ax-text-area::placeholder,ax-form-field.ax-state-floating-label.ax-state-has-value .ax-input::placeholder,ax-form-field.ax-state-floating-label.ax-state-has-value .ax-content::placeholder,ax-form-field.ax-state-floating-label.ax-state-has-value ax-text-area::placeholder{opacity:1}ax-form-field.ax-state-floating-label.ax-state-focused .ax-chips-container,ax-form-field.ax-state-floating-label.ax-state-has-value .ax-chips-container{padding:0}ax-form-field.ax-state-floating-label.ax-state-focused ax-text-area .ax-editor-container,ax-form-field.ax-state-floating-label.ax-state-has-value ax-text-area .ax-editor-container{padding-top:1.5rem}ax-form-field.ax-state-floating-label.ax-state-focused ax-text-area textarea,ax-form-field.ax-state-floating-label.ax-state-has-value ax-text-area textarea{padding-top:0!important}ax-form-field.ax-state-over-label{--ax-sys-size-base: 3.5rem}ax-form-field.ax-state-over-label>ax-label{position:absolute;pointer-events:none;z-index:10;display:inline-grid;top:10%;transform:translateY(-10%);inset-inline-start:.5rem;transition-property:transform,top;transition-duration:var(--ax-sys-transition-duration);transition-timing-function:var(--ax-sys-transition-timing-function)}ax-form-field.ax-state-over-label>ax-label label{margin:0;overflow:hidden;text-overflow:ellipsis;font-size:.75rem;white-space:nowrap}ax-form-field.ax-state-over-label .ax-input,ax-form-field.ax-state-over-label .ax-content,ax-form-field.ax-state-over-label ax-text-area{padding-top:1rem}ax-form-field.ax-state-over-label.ax-state-focused ax-text-area .ax-editor-container,ax-form-field.ax-state-over-label.ax-state-has-value ax-text-area .ax-editor-container{padding-top:1.5rem}ax-form-field.ax-state-over-label.ax-state-focused ax-text-area textarea,ax-form-field.ax-state-over-label.ax-state-has-value ax-text-area textarea{padding-top:0!important}ax-form-field.ax-state-floating-label .ax-chips-container.ax-multiple,ax-form-field.ax-state-over-label .ax-chips-container.ax-multiple{padding-top:1.5rem!important;padding-inline-start:.75rem}ax-form-field .ax-error-message{margin-top:.25rem;margin-bottom:.25rem;display:block;font-size:.75rem;line-height:1rem}ax-form{width:100%}ax-form form.ax-bottom-error .ax-error-message{color:rgba(var(--ax-sys-color-danger-surface))}ax-form form.ax-float-error .ax-error-message{position:absolute;bottom:-2.5rem;z-index:20;display:block;width:fit-content;border-radius:.375rem;border-width:1px;border-color:rgba(var(--ax-sys-color-border-danger-surface));background-color:rgba(var(--ax-sys-color-danger-surface));color:rgba(var(--ax-sys-color-on-danger-surface));padding:.25rem .5rem;font-weight:400}ax-form form.ax-float-error .ax-error-message:before,ax-form form.ax-float-error .ax-error-message:after{pointer-events:none;position:absolute;bottom:100%;inset-inline-start:.75rem;z-index:20;height:0px;width:0px;border-bottom-color:rgba(var(--ax-sys-color-danger-surface));border-inline-end-color:transparent;border-inline-start-color:transparent;border-top-color:transparent;content:\"\"}ax-form form.ax-float-error .ax-error-message:before{margin-inline-start:-1px;border-width:4px;border-bottom-color:rgba(var(--ax-sys-color-danger-surface))}ax-form form.ax-float-error .ax-error-message:after{border-width:4px}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { input: [{
+            args: [{ selector: 'ax-form-field', template: `<ng-content></ng-content>`, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [AXUnsubscriber, { provide: AXComponent, useExisting: AXFormFieldComponent }], 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-translate-x:0;--tw-translate-y:0;--tw-translate-z:0}}}@layer components{form .ax-error-message{margin-top:calc(var(--spacing,.25rem)*1);font-size:var(--text-sm,.875rem);line-height:var(--tw-leading,var(--text-sm--line-height,calc(1.25/.875)));color:var(--color-danger-600,rgba(var(--ax-sys-color-danger-600)))}form.ax-float-error .ax-error-message:before{content:\"\";inset-inline-start:calc(var(--spacing,.25rem)*2);top:calc(var(--spacing,.25rem)*-1);z-index:-10;width:calc(var(--spacing,.25rem)*3);height:calc(var(--spacing,.25rem)*3);background-color:var(--color-danger-600,rgba(var(--ax-sys-color-danger-600)));position:absolute;rotate:45deg}form.ax-float-error .ax-error-message{inset-inline-start:calc(var(--spacing,.25rem)*0);bottom:calc(var(--spacing,.25rem)*0);z-index:20;--tw-translate-y:100%;height:fit-content;translate:var(--tw-translate-x)var(--tw-translate-y);border-radius:var(--radius-sm,.25rem);background-color:var(--color-danger-600,rgba(var(--ax-sys-color-danger-600)));padding-inline:calc(var(--spacing,.25rem)*2);padding-block:calc(var(--spacing,.25rem)*.5);font-size:var(--text-xs,.75rem);line-height:var(--tw-leading,var(--text-xs--line-height,calc(1/.75)));color:var(--color-on-danger,rgba(var(--ax-sys-color-on-danger-surface)));position:absolute}:is(.ax-md ax-form-field.ax-state-floating-label,.ax-md ax-form-field.ax-state-over-label) .ax-editor-container{height:calc(var(--spacing,.25rem)*14)}:is(.ax-sm ax-form-field.ax-state-floating-label,.ax-sm ax-form-field.ax-state-over-label) .ax-editor-container{height:calc(var(--spacing,.25rem)*12)}:is(.ax-xs ax-form-field.ax-state-floating-label,.ax-xs ax-form-field.ax-state-over-label) .ax-editor-container{height:calc(var(--spacing,.25rem)*10)}:is(.ax-lg ax-form-field.ax-state-floating-label,.ax-lg ax-form-field.ax-state-over-label) .ax-editor-container{height:calc(var(--spacing,.25rem)*16)}:is(.ax-xl ax-form-field.ax-state-floating-label,.ax-xl ax-form-field.ax-state-over-label) .ax-editor-container{height:calc(var(--spacing,.25rem)*18)}ax-form-field{width:100%;display:block;position:relative}:is(ax-form-field.ax-state-floating-label,ax-form-field.ax-state-over-label,ax-form-field.ax-state-over-label.ax-md) .ax-editor-container{height:calc(var(--spacing,.25rem)*14)}:is(ax-form-field.ax-state-floating-label,ax-form-field.ax-state-over-label) .ax-editor-container{align-items:center}:is(ax-form-field.ax-state-floating-label,ax-form-field.ax-state-over-label) .ax-editor-container .ax-content,:is(ax-form-field.ax-state-floating-label,ax-form-field.ax-state-over-label) .ax-editor-container .ax-input,:is(ax-form-field.ax-state-floating-label,ax-form-field.ax-state-over-label) .ax-editor-container ax-prefix,:is(ax-form-field.ax-state-floating-label,ax-form-field.ax-state-over-label) .ax-editor-container ax-suffix{padding-top:calc(var(--spacing,.25rem)*7)!important;padding-bottom:calc(var(--spacing,.25rem)*3)!important}:is(ax-form-field.ax-state-floating-label,ax-form-field.ax-state-over-label) .ax-editor-container .ax-editor-container .ax-content{padding-top:calc(var(--spacing,.25rem)*3)!important}:is(ax-form-field.ax-state-floating-label,ax-form-field.ax-state-over-label) ax-label{z-index:10;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));--tw-translate-y: -50% ;translate:var(--tw-translate-x)var(--tw-translate-y);inset-inline-start:calc(var(--spacing,.25rem)*3);position:absolute;top:50%}:is(ax-form-field.ax-state-floating-label,ax-form-field.ax-state-over-label) ax-label label{margin-bottom:calc(var(--spacing,.25rem)*0)}:is(ax-form-field.ax-state-floating-label,ax-form-field.ax-state-over-label) .ax-input::placeholder,:is(ax-form-field.ax-state-floating-label,ax-form-field.ax-state-over-label) .ax-placeholder,:is(ax-form-field.ax-state-floating-label,ax-form-field.ax-state-over-label) ax-prefix,:is(ax-form-field.ax-state-floating-label,ax-form-field.ax-state-over-label) ax-suffix{opacity:0}:is(ax-form-field.ax-state-has-value,ax-form-field.ax-state-focused,ax-form-field.ax-state-over-label) ax-label{inset-inline-start:calc(var(--spacing,.25rem)*3);top:calc(var(--spacing,.25rem)*4);padding-inline:calc(var(--spacing,.25rem)*1);padding:calc(var(--spacing,.25rem)*0)!important}:is(ax-form-field.ax-state-has-value,ax-form-field.ax-state-focused,ax-form-field.ax-state-over-label) ax-label label{margin-bottom:calc(var(--spacing,.25rem)*0);font-size:var(--text-xs,.75rem);line-height:var(--tw-leading,var(--text-xs--line-height,calc(1/.75)))}:is(ax-form-field.ax-state-has-value,ax-form-field.ax-state-focused,ax-form-field.ax-state-over-label) .ax-input::placeholder,:is(ax-form-field.ax-state-has-value,ax-form-field.ax-state-focused,ax-form-field.ax-state-over-label) .ax-placeholder,:is(ax-form-field.ax-state-has-value,ax-form-field.ax-state-focused,ax-form-field.ax-state-over-label) ax-prefix,:is(ax-form-field.ax-state-has-value,ax-form-field.ax-state-focused,ax-form-field.ax-state-over-label) ax-suffix{opacity:1}:is(ax-form-field.ax-state-has-value,ax-form-field.ax-state-focused,ax-form-field.ax-state-over-label) ax-prefix .ax-editor-container .ax-input,:is(ax-form-field.ax-state-has-value,ax-form-field.ax-state-focused,ax-form-field.ax-state-over-label) ax-prefix .ax-editor-container .ax-content{padding-top:calc(var(--spacing,.25rem)*1)!important}}@property --tw-translate-x{syntax:\"*\";inherits:false;initial-value:0}@property --tw-translate-y{syntax:\"*\";inherits:false;initial-value:0}@property --tw-translate-z{syntax:\"*\";inherits:false;initial-value:0}\n/*! tailwindcss v4.1.17 | MIT License | https://tailwindcss.com */\n"] }]
+        }], ctorParameters: () => [], propDecorators: { labelMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelMode", required: false }] }], input: [{
                 type: ContentChild,
                 args: [AXValuableComponent]
             }], label: [{
@@ -418,13 +435,13 @@ class AXValidationRuleDirective {
     get ruleOptions() {
         return Object.assign({ message: this.message(), name: this.host.name }, this.options());
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXValidationRuleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.3", type: AXValidationRuleDirective, isStandalone: true, selector: "ax-validation-rule", inputs: { rule: { classPropertyName: "rule", publicName: "rule", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXValidationRuleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.12", type: AXValidationRuleDirective, isStandalone: true, selector: "ax-validation-rule", inputs: { rule: { classPropertyName: "rule", publicName: "rule", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXValidationRuleDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXValidationRuleDirective, decorators: [{
             type: Directive,
             args: [{ selector: 'ax-validation-rule' }]
-        }] });
+        }], propDecorators: { rule: [{ type: i0.Input, args: [{ isSignal: true, alias: "rule", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], message: [{ type: i0.Input, args: [{ isSignal: true, alias: "message", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }] } });
 
 /**
  * Displays validation summaries in the form of an alert.
@@ -516,8 +533,8 @@ class AXValidationSummaryComponent extends MXBaseComponent {
     ngOnDestroy() {
         this.sub?.unsubscribe();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXValidationSummaryComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.3", type: AXValidationSummaryComponent, isStandalone: true, selector: "ax-validation-summary", inputs: { title: "title", displayMode: "displayMode", timeOut: "timeOut", autoHide: "autoHide" }, providers: [{ provide: AXComponent, useExisting: AXValidationSummaryComponent }], usesInheritance: true, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXValidationSummaryComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.12", type: AXValidationSummaryComponent, isStandalone: true, selector: "ax-validation-summary", inputs: { title: "title", displayMode: "displayMode", timeOut: "timeOut", autoHide: "autoHide" }, providers: [{ provide: AXComponent, useExisting: AXValidationSummaryComponent }], usesInheritance: true, ngImport: i0, template: `
     @if (displayMode === 'alert' && _content) {
       <ax-alert color="danger" [timeOut]="_timeOut" #a (onClosed)="_handleOnDismissed()">
         <ax-icon></ax-icon>
@@ -534,7 +551,7 @@ class AXValidationSummaryComponent extends MXBaseComponent {
     }
   `, isInline: true, dependencies: [{ kind: "component", type: AXAlertComponent, selector: "ax-alert", inputs: ["color", "timeOut"], outputs: ["colorChange", "onClosed", "timeOutChange"] }, { kind: "component", type: AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { 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: AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { 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: AXValidationSummaryComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXValidationSummaryComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ax-validation-summary',
@@ -577,8 +594,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImpor
             }] } });
 
 class AXFormModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXFormModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.3", ngImport: i0, type: AXFormModule, imports: [CommonModule,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXFormModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.12", ngImport: i0, type: AXFormModule, imports: [CommonModule,
             AXDecoratorModule,
             AXAlertModule,
             AXButtonModule,
@@ -588,7 +605,7 @@ class AXFormModule {
             AXFormComponent,
             AXValidationRuleDirective,
             AXValidationSummaryComponent], exports: [AXFormFieldComponent, AXFormComponent, AXValidationRuleDirective, AXValidationSummaryComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXFormModule, imports: [CommonModule,
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXFormModule, imports: [CommonModule,
             AXDecoratorModule,
             AXAlertModule,
             AXButtonModule,
@@ -596,7 +613,7 @@ class AXFormModule {
             AXTranslationModule,
             AXValidationSummaryComponent] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXFormModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXFormModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [