@acorex/components 21.0.0-next.26 → 21.0.0-next.27

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'
@@ -199,7 +222,7 @@ class AXFormComponent extends MXBaseComponent {
         this._clearSubs();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: AXFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.9", 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.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.9", 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, styles: ["form{height:100%}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
@@ -207,7 +230,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImpor
             type: Component,
             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 }], styles: ["form{height:100%}\n"] }]
+  </form>`, inputs: ['disabled', 'readonly'], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [{ provide: AXComponent, useExisting: AXFormComponent }], styles: ["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: [{