@mozaic-ds/angular 2.0.3 → 2.0.4

package/fesm2022/mozaic-ds-angular.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { input, computed, ChangeDetectionStrategy, Component, contentChild, ViewEncapsulation, signal, forwardRef, output, ContentChild, viewChild, inject, model, InjectionToken, HostListener, Injector, Injectable, TemplateRef, afterNextRender, Directive, linkedSignal, EnvironmentInjector, createComponent, ChangeDetectorRef, NgZone, viewChildren, EventEmitter, effect, Output, ContentChildren, ElementRef, Input, booleanAttribute, contentChildren } from '@angular/core';
+import { input, computed, ChangeDetectionStrategy, Component, contentChild, ViewEncapsulation, signal, forwardRef, output, ContentChild, viewChild, inject, model, InjectionToken, HostListener, Injector, Injectable, TemplateRef, afterNextRender, Directive, linkedSignal, EnvironmentInjector, createComponent, ChangeDetectorRef, NgZone, viewChildren, EventEmitter, effect, Output, ContentChildren, ApplicationRef, Renderer2, ElementRef, Input, booleanAttribute, contentChildren } from '@angular/core';
 import { RouterLink, RouterLinkActive, RouterLinkWithHref } from '@angular/router';
 import { NgTemplateOutlet, NgClass, NgComponentOutlet } from '@angular/common';
 import * as i1 from '@angular/forms';
@@ -1733,8 +1733,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }], propDecorators: { isInvalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "isInvalid", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], rows: [{ type: i0.Input, args: [{ isSignal: true, alias: "rows", required: false }] }], minLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "minLength", required: false }] }], maxLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxLength", required: false }] }] } });
 
 class MozTextInput {
-    elementRef;
-    renderer;
     isInvalid = input(false, ...(ngDevMode ? [{ debugName: "isInvalid" }] : []));
     disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
     readonly = input(false, ...(ngDevMode ? [{ debugName: "readonly" }] : []));
@@ -1752,18 +1750,49 @@ class MozTextInput {
     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;
-        this.renderer = renderer;
-    }
+    applicationRef = inject(ApplicationRef);
+    renderer = inject(Renderer2);
+    elementRef = inject((ElementRef));
+    injector = inject(Injector);
     ngAfterViewInit() {
         this.wrapInput();
+        this.setupEffects();
     }
     ngOnDestroy() {
         if (this.iconComponentRef) {
+            this.applicationRef.detachView(this.iconComponentRef.hostView);
             this.iconComponentRef.destroy();
         }
     }
+    setupEffects() {
+        // Effect pour mettre à jour la classe 'is-invalid'
+        effect(() => {
+            if (this.wrapper) {
+                if (this.isInvalid()) {
+                    this.renderer.addClass(this.wrapper, 'is-invalid');
+                }
+                else {
+                    this.renderer.removeClass(this.wrapper, 'is-invalid');
+                }
+            }
+        }, { injector: this.injector });
+        // Effect pour mettre à jour la classe de taille
+        effect(() => {
+            if (this.wrapper) {
+                // Retirer toutes les classes de taille existantes
+                this.renderer.removeClass(this.wrapper, 'text-input--s');
+                this.renderer.removeClass(this.wrapper, 'text-input--m');
+                // Ajouter la nouvelle classe de taille
+                if (this.size()) {
+                    this.renderer.addClass(this.wrapper, `text-input--${this.size()}`);
+                }
+            }
+        }, { injector: this.injector });
+        // Effect pour mettre à jour la visibilité du bouton clear
+        effect(() => {
+            this.updateClearButtonVisibility();
+        }, { injector: this.injector });
+    }
     wrapInput() {
         const input = this.elementRef.nativeElement;
         const parent = input.parentElement;
@@ -1771,6 +1800,7 @@ class MozTextInput {
             return;
         this.wrapper = this.renderer.createElement('div');
         this.renderer.addClass(this.wrapper, 'text-input');
+        // Appliquer les classes initiales
         if (this.size()) {
             this.renderer.addClass(this.wrapper, `text-input--${this.size()}`);
         }
@@ -1829,6 +1859,8 @@ class MozTextInput {
         this.iconComponentRef = createComponent(CrossCircleFilled24, {
             environmentInjector: this.environmentInjector,
         });
+        // Attacher la vue à ApplicationRef pour activer la détection de changements
+        this.applicationRef.attachView(this.iconComponentRef.hostView);
         const iconElement = this.iconComponentRef.location.nativeElement;
         this.renderer.addClass(iconElement, 'controls-options__icon');
         this.renderer.setAttribute(iconElement, 'aria-hidden', 'true');
@@ -1862,13 +1894,11 @@ class MozTextInput {
         this.onTouched();
         const event = new Event('input', { bubbles: true });
         input.dispatchEvent(event);
-        this.updateClearButtonVisibility();
     }
     onInput(event) {
         const value = event.target.value;
         this._value.set(value);
         this.onChange(value);
-        this.updateClearButtonVisibility();
     }
     onChange = () => void 0;
     onTouched = () => void 0;
@@ -1876,7 +1906,6 @@ class MozTextInput {
         const normalizedValue = value == null ? '' : String(value);
         this._value.set(normalizedValue);
         this.renderer.setProperty(this.elementRef.nativeElement, 'value', normalizedValue);
-        this.updateClearButtonVisibility();
     }
     registerOnChange(fn) {
         this.onChange = fn;
@@ -1888,8 +1917,8 @@ class MozTextInput {
         this._isDisabled.set(isDisabled);
         this.renderer.setProperty(this.elementRef.nativeElement, 'disabled', isDisabled);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", 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.3", 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 }, prefix: { classPropertyName: "prefix", publicName: "prefix", isSignal: true, isRequired: false, transformFunction: null }, suffix: { classPropertyName: "suffix", publicName: "suffix", 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: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MozTextInput, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.3", 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 }, prefix: { classPropertyName: "prefix", publicName: "prefix", isSignal: true, isRequired: false, transformFunction: null }, suffix: { classPropertyName: "suffix", publicName: "suffix", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "input": "onInput($event)", "blur": "onTouched()" }, properties: { "class": "\"text-input__control\"", "attr.aria-invalid": "isInvalid()", "readOnly": "readonly()", "disabled": "isDisabledState()" } }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => MozTextInput),
@@ -1908,11 +1937,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
                     ], encapsulation: ViewEncapsulation.None, host: {
                         '[class]': '"text-input__control"',
                         '[attr.aria-invalid]': 'isInvalid()',
+                        '[readOnly]': 'readonly()',
                         '[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__addon,.text-input__addon{font-size:var(--font-size-150, 1rem);font-weight:var(--font-weight-semi-bold, 600);color:var(--forms-color-text-default, #000000)}.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),.mc-text-input:has(.mc-text-input__addon,.text-input__addon),.text-input:has(.mc-text-input__addon,.text-input__addon){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,.mc-text-input:has(.mc-text-input__addon,.text-input__addon) .mc-text-input__control,.text-input:has(.mc-text-input__addon,.text-input__addon) .mc-text-input__control,.mc-text-input:has(.mc-text-input__addon,.text-input__addon) .text-input__control,.text-input:has(.mc-text-input__addon,.text-input__addon) .text-input__control{padding-inline-start:0}.mc-text-input:has(.mc-controls-options,.controls-options),.text-input:has(.mc-controls-options,.controls-options),.mc-text-input:has(.mc-text-input__addon,.text-input__addon),.text-input:has(.mc-text-input__addon,.text-input__addon){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,.mc-text-input:has(.mc-text-input__addon,.text-input__addon) .mc-text-input__control,.text-input:has(.mc-text-input__addon,.text-input__addon) .mc-text-input__control,.mc-text-input:has(.mc-text-input__addon,.text-input__addon) .text-input__control,.text-input:has(.mc-text-input__addon,.text-input__addon) .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"] }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }], propDecorators: { isInvalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "isInvalid", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], clearLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearLabel", required: false }] }], prefix: [{ type: i0.Input, args: [{ isSignal: true, alias: "prefix", required: false }] }], suffix: [{ type: i0.Input, args: [{ isSignal: true, alias: "suffix", required: false }] }] } });
+        }], propDecorators: { isInvalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "isInvalid", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], clearLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearLabel", required: false }] }], prefix: [{ type: i0.Input, args: [{ isSignal: true, alias: "prefix", required: false }] }], suffix: [{ type: i0.Input, args: [{ isSignal: true, alias: "suffix", required: false }] }] } });
 
 class MozToggleComponent {
     id = input.required(...(ngDevMode ? [{ debugName: "id" }] : []));