@mozaic-ds/angular 2.0.0-beta.29 → 2.0.0-beta.30

package/fesm2022/mozaic-ds-angular.mjs

@@ -1763,6 +1763,8 @@ class MozTextarea {
     minLength = input(...(ngDevMode ? [undefined, { debugName: "minLength" }] : []));
     maxLength = input(...(ngDevMode ? [undefined, { debugName: "maxLength" }] : []));
     _value = signal('', ...(ngDevMode ? [{ debugName: "_value" }] : []));
+    _isDisabled = signal(false, ...(ngDevMode ? [{ debugName: "_isDisabled" }] : []));
+    isDisabledState = computed(() => this.disabled() || this._isDisabled(), ...(ngDevMode ? [{ debugName: "isDisabledState" }] : []));
     onChange = () => void 0;
     onTouched = () => void 0;
     constructor(elementRef, renderer) {
@@ -1804,10 +1806,11 @@ class MozTextarea {
         this.onTouched = fn;
     }
     setDisabledState(isDisabled) {
+        this._isDisabled.set(isDisabled);
         this.renderer.setProperty(this.elementRef.nativeElement, 'disabled', isDisabled);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: MozTextarea, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.0", type: MozTextarea, isStandalone: true, selector: "textarea[moz-text-area]", inputs: { isInvalid: { classPropertyName: "isInvalid", publicName: "isInvalid", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, minLength: { classPropertyName: "minLength", publicName: "minLength", isSignal: true, isRequired: false, transformFunction: null }, maxLength: { classPropertyName: "maxLength", publicName: "maxLength", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "input": "handleInput($event)", "blur": "onTouched()" }, properties: { "class.textarea": "true", "class.is-invalid": "isInvalid()", "class.is-disabled": "disabled()", "attr.aria-invalid": "isInvalid()", "disabled": "disabled()" } }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.0", type: MozTextarea, isStandalone: true, selector: "textarea[moz-text-area]", inputs: { isInvalid: { classPropertyName: "isInvalid", publicName: "isInvalid", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, minLength: { classPropertyName: "minLength", publicName: "minLength", isSignal: true, isRequired: false, transformFunction: null }, maxLength: { classPropertyName: "maxLength", publicName: "maxLength", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "input": "handleInput($event)", "blur": "onTouched()" }, properties: { "class.textarea": "true", "class.is-invalid": "isInvalid()", "class.is-disabled": "isDisabledState()", "attr.aria-invalid": "isInvalid()", "disabled": "isDisabledState()" } }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => MozTextarea),
@@ -1826,9 +1829,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
                     ], encapsulation: ViewEncapsulation.None, host: {
                         '[class.textarea]': 'true',
                         '[class.is-invalid]': 'isInvalid()',
-                        '[class.is-disabled]': 'disabled()',
+                        '[class.is-disabled]': 'isDisabledState()',
                         '[attr.aria-invalid]': 'isInvalid()',
-                        '[disabled]': 'disabled()',
+                        '[disabled]': 'isDisabledState()',
                         '(input)': 'handleInput($event)',
                         '(blur)': 'onTouched()',
                     }, styles: [".mc-textarea,.textarea{font-family:inherit;transition:box-shadow .2s ease;background-color:var(--forms-color-background-default, #ffffff);border:var(--border-width-s, .0625rem) solid var(--forms-color-border-default, #666666);border-radius:var(--forms-border-radius, .25rem);transition:all ease .2s;color:var(--forms-color-text-default, #000000);display:block;width:100%;font-size:var(--font-size-150, 1rem);line-height:var(--line-height-m, 1.5);min-height:4rem;padding:.5rem .75rem}.mc-textarea::placeholder,.textarea::placeholder{color:var(--forms-color-placeholder, #666666)}.mc-textarea:hover,.textarea:hover{border-color:var(--forms-color-border-hover, #4d4d4d);box-shadow:0 0 0 var(--border-width-s, .0625rem) var(--forms-color-border-hover, #4d4d4d)}.mc-textarea:focus,.textarea:focus{box-shadow:0 0 0 .125rem var(--focus-color-mid, var(--focus-color-outline-mid, #ffffff)),0 0 0 .25rem var(--focus-color-outer, var(--focus-color-outline-outer, #000000));outline:.125rem solid transparent;outline-offset:.125rem}.mc-textarea:disabled,.textarea:disabled{background-color:var(--forms-color-background-disabled, #d9d9d9);cursor:not-allowed;border-color:transparent;box-shadow:none;color:var(--forms-color-text-disabled, #737373)}.mc-textarea[readonly],[readonly].textarea{border-color:var(--forms-color-border-read-only, #cccccc);pointer-events:none}.mc-textarea.is-invalid,.is-invalid.textarea{border-color:var(--forms-color-border-invalid, #ea302d);box-shadow:0 0 0 var(--border-width-s, .0625rem) var(--forms-color-border-invalid, #ea302d)}.mc-textarea.is-invalid:hover,.is-invalid.textarea:hover{border-color:var(--forms-color-border-invalid-hover, #c61112);box-shadow:0 0 0 var(--border-width-s, .0625rem) var(--forms-color-border-invalid-hover, #c61112)}\n"] }]
@@ -1852,7 +1855,9 @@ class MozTextInput {
     iconContainer = null;
     iconComponentRef = null;
     _value = signal('', ...(ngDevMode ? [{ debugName: "_value" }] : []));
+    _isDisabled = signal(false, ...(ngDevMode ? [{ debugName: "_isDisabled" }] : []));
     isClearable = computed(() => this.clearable() && this._value(), ...(ngDevMode ? [{ debugName: "isClearable" }] : []));
+    isDisabledState = computed(() => this.disabled() || this._isDisabled(), ...(ngDevMode ? [{ debugName: "isDisabledState" }] : []));
     environmentInjector = inject(EnvironmentInjector);
     constructor(elementRef, renderer) {
         this.elementRef = elementRef;
@@ -1979,8 +1984,12 @@ class MozTextInput {
     registerOnTouched(fn) {
         this.onTouched = fn;
     }
+    setDisabledState(isDisabled) {
+        this._isDisabled.set(isDisabled);
+        this.renderer.setProperty(this.elementRef.nativeElement, 'disabled', isDisabled);
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: MozTextInput, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.0", type: MozTextInput, isStandalone: true, selector: "input[moz-text-input]", inputs: { isInvalid: { classPropertyName: "isInvalid", publicName: "isInvalid", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, clearLabel: { classPropertyName: "clearLabel", publicName: "clearLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "input": "onInput($event)", "blur": "onTouched()" }, properties: { "class": "\"text-input__control\"", "attr.aria-invalid": "isInvalid()", "disabled": "disabled()" } }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.0", type: MozTextInput, isStandalone: true, selector: "input[moz-text-input]", inputs: { isInvalid: { classPropertyName: "isInvalid", publicName: "isInvalid", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, clearLabel: { classPropertyName: "clearLabel", publicName: "clearLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "input": "onInput($event)", "blur": "onTouched()" }, properties: { "class": "\"text-input__control\"", "attr.aria-invalid": "isInvalid()", "disabled": "isDisabledState()" } }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => MozTextInput),
@@ -1999,7 +2008,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
                     ], encapsulation: ViewEncapsulation.None, host: {
                         '[class]': '"text-input__control"',
                         '[attr.aria-invalid]': 'isInvalid()',
-                        '[disabled]': 'disabled()',
+                        '[disabled]': 'isDisabledState()',
                         '(input)': 'onInput($event)',
                         '(blur)': 'onTouched()',
                     }, styles: [".mc-controls-options,.controls-options{align-items:center;display:inline-flex;justify-content:center;gap:.5rem}.mc-controls-options__button,.controls-options__button{background-color:transparent;border-width:0;color:initial;font-family:inherit;outline:none;appearance:none;cursor:pointer;padding:0;border-radius:var(--border-radius-full, 100%)}.mc-controls-options__button:hover .mc-controls-options__icon,.controls-options__button:hover .mc-controls-options__icon,.mc-controls-options__button:hover .controls-options__icon,.controls-options__button:hover .controls-options__icon{fill:var(--forms-color-icon-clear-hover, #4d4d4d)}.mc-controls-options__button:focus-visible,.controls-options__button:focus-visible{box-shadow:0 0 0 .125rem var(--focus-color-mid, var(--focus-color-outline-mid, #ffffff)),0 0 0 .25rem var(--focus-color-outer, var(--focus-color-outline-outer, #000000));outline:.125rem solid transparent;outline-offset:.125rem}.mc-controls-options__icon,.controls-options__icon{fill:var(--forms-color-icon-clear, #666666)}.mc-controls-options__button,.controls-options__button,.mc-controls-options__icon,.controls-options__icon{height:1.5rem;width:1.5rem}.mc-controls-options__label,.controls-options__label{clip-path:inset(100%);clip:rect(1px,1px,1px,1px);height:1px;overflow:hidden;position:absolute;white-space:nowrap;padding:0;width:1px}.mc-controls-options__unit{font-size:var(--font-size-150, 1rem);line-height:var(--line-height-s, 1.3);font-weight:var(--font-weight-semi-bold, 600);color:var(--forms-color-text-default, #000000)}.mc-text-input,.text-input{transition:box-shadow .2s ease;background-color:var(--forms-color-background-default, #ffffff);border:var(--border-width-s, .0625rem) solid var(--forms-color-border-default, #666666);border-radius:var(--forms-border-radius, .25rem);transition:all ease .2s;color:var(--forms-color-text-default, #000000);display:block;width:100%;height:3rem;box-sizing:border-box;display:flex;align-items:center;gap:.5rem}.mc-text-input__control,.text-input__control{background-color:transparent;border-width:0;font-family:inherit;outline:none}.mc-text-input__control[type=number]::-webkit-inner-spin-button,[type=number].text-input__control::-webkit-inner-spin-button,.mc-text-input__control[type=number]::-webkit-outer-spin-button,[type=number].text-input__control::-webkit-outer-spin-button{appearance:none;margin:0}.mc-text-input__control[type=number],[type=number].text-input__control{appearance:textfield}.mc-text-input__control[type=search]::-webkit-search-decoration,[type=search].text-input__control::-webkit-search-decoration,.mc-text-input__control[type=search]::-webkit-search-cancel-button,[type=search].text-input__control::-webkit-search-cancel-button{appearance:none}.mc-text-input__control,.text-input__control{padding:.75rem .6875rem;font-size:var(--font-size-150, 1rem);line-height:var(--line-height-s, 1.3);font-weight:var(--font-weight-regular, 400);flex-grow:1}.mc-text-input__control::placeholder,.text-input__control::placeholder{color:var(--forms-color-placeholder, #666666)}.mc-text-input__icon,.text-input__icon{fill:var(--forms-color-icon-default, #666666);height:1.5rem;width:1.5rem;flex-shrink:0}.mc-text-input:focus-within,.text-input:focus-within{box-shadow:0 0 0 .125rem var(--focus-color-mid, var(--focus-color-outline-mid, #ffffff)),0 0 0 .25rem var(--focus-color-outer, var(--focus-color-outline-outer, #000000));outline:.125rem solid transparent;outline-offset:.125rem}.mc-text-input:hover:not(:focus-within),.text-input:hover:not(:focus-within){border-color:var(--forms-color-border-hover, #4d4d4d);box-shadow:0 0 0 var(--border-width-s, .0625rem) var(--forms-color-border-hover, #4d4d4d)}.mc-text-input:has(input:disabled),.text-input:has(input:disabled){background-color:var(--forms-color-background-disabled, #d9d9d9);cursor:not-allowed;border-color:transparent;box-shadow:none;color:var(--forms-color-text-disabled, #737373);pointer-events:none}.mc-text-input:has(input[readonly]),.text-input:has(input[readonly]){border-color:var(--forms-color-border-read-only, #cccccc);pointer-events:none}.mc-text-input:has(.mc-text-input__icon,.text-input__icon),.text-input:has(.mc-text-input__icon,.text-input__icon){padding-inline-start:.6875rem}.mc-text-input:has(.mc-text-input__icon,.text-input__icon) .mc-text-input__control,.text-input:has(.mc-text-input__icon,.text-input__icon) .mc-text-input__control,.mc-text-input:has(.mc-text-input__icon,.text-input__icon) .text-input__control,.text-input:has(.mc-text-input__icon,.text-input__icon) .text-input__control{padding-inline-start:0}.mc-text-input:has(.mc-controls-options,.controls-options),.text-input:has(.mc-controls-options,.controls-options){padding-inline-end:.6875rem}.mc-text-input:has(.mc-controls-options,.controls-options) .mc-text-input__control,.text-input:has(.mc-controls-options,.controls-options) .mc-text-input__control,.mc-text-input:has(.mc-controls-options,.controls-options) .text-input__control,.text-input:has(.mc-controls-options,.controls-options) .text-input__control{padding-inline-end:0}.mc-text-input--s,.text-input--s{height:2rem}.mc-text-input--s .mc-text-input__control,.text-input--s .mc-text-input__control,.mc-text-input--s .text-input__control,.text-input--s .text-input__control{padding:.375rem .6875rem;font-size:var(--font-size-100, .875rem);line-height:var(--line-height-s, 1.3)}.mc-text-input--s:has(.mc-text-input__icon,.text-input__icon),.text-input--s:has(.mc-text-input__icon,.text-input__icon){padding-inline-start:.4375rem}.mc-text-input--s:has(.mc-controls-options,.controls-options),.text-input--s:has(.mc-controls-options,.controls-options){padding-inline-end:.4375rem}.mc-text-input.is-invalid,.is-invalid.text-input{border-color:var(--forms-color-border-invalid, #ea302d);box-shadow:0 0 0 var(--border-width-s, .0625rem) var(--forms-color-border-invalid, #ea302d)}.mc-text-input.is-invalid:hover:not(:focus-within),.is-invalid.text-input:hover:not(:focus-within){border-color:var(--forms-color-border-invalid-hover, #c61112);box-shadow:0 0 0 var(--border-width-s, .0625rem) var(--forms-color-border-invalid-hover, #c61112)}.mc-text-input *,.text-input *{box-sizing:border-box}.text-input__icon:empty{display:none}\n"] }]