chrv-components 1.12.200 → 1.12.202

package/fesm2022/chrv-components.mjs

@@ -4385,16 +4385,7 @@ class ChrInputComponent {
         this.tooltipPosition = input('right', /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "tooltipPosition" }] : /* istanbul ignore next */ []));
         /* VARIABLES */
-        this.required = computed(() => {
-            const control = this.ngControl()?.control;
-            if (control?.validator) {
-                const validatorResult = control.validator({});
-                if (validatorResult && validatorResult['required']) {
-                    return true;
-                }
-            }
-            return false;
-        }, /* @ts-ignore */
+        this.required = model(false, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []));
         this.state = model('IDLE', /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "state" }] : /* istanbul ignore next */ []));
@@ -4418,141 +4409,6 @@ class ChrInputComponent {
         this.focus = output();
         this.enter = output();
         this.blur = output();
-        this.configureDebouncing = () => {
-            this._changeSubject
-                .pipe(
-            // The Behavior Subject always has an initial value. Which means that subscribing to it will make it look like the input has a new value (initially null).
-            // Which is false, because we're only instanciating the object. This is why we need to skip the first value. Otherwise the form will receive a random null when this
-            // observable is subscribed to and set the value to said null.
-            skip(1), debounceTime$1(this.debounceTime()))
-                .subscribe((res) => {
-                this.debouncedInput.emit(res);
-                // If the value is an empty string, set the value to null to trigger validation and prevent an inconsitent value to be set (ex: for number type input)
-                let value = typeof res === 'string' && res.trim() === '' ? null : res;
-                // If we use the input type number, we cast the value to a number because for some reason, it may sometimes be a string.
-                // if (this.type() === 'number' && value !== null) value = Number(value);
-                this.value.set(value);
-                this._onChange(value);
-            });
-        };
-        this.configureEventListeners = () => {
-            this.blur.subscribe((data) => {
-                // this.blur.emit();
-                this.isFocused.set(false);
-                this.ensureState(this.ngControl()?.status || null);
-                // this.state.set(this._getState(this.ngControl()?.status || null));
-            });
-            this.focus.subscribe((data) => {
-                this._onTouched();
-                this.isFocused.set(true);
-                this.isTouched.set(true);
-            });
-            this.ngControl()?.statusChanges?.subscribe((data) => {
-                this.ensureState(data);
-            });
-            this.displayValue.subscribe((v) => {
-                if (v === undefined || v === null)
-                    this.displayValue.set('');
-            });
-        };
-        this.ensureNgControl = () => {
-            const control = this.ngControl();
-            if (control != null) {
-                control.valueAccessor = this;
-                this.setDisabledState(this.ngControl()?.disabled ?? false);
-            }
-        };
-        this.ensureState = (status) => {
-            const control = this.ngControl();
-            if (control !== null)
-                this.state.set(this._getState(status));
-        };
-        this.ensureOutputType = () => {
-            const type = this.type();
-            const outputType = this.outputType();
-            if (outputType == null) {
-                switch (type) {
-                    case 'number':
-                        this.outputType.set('number');
-                        break;
-                    case 'date':
-                        this.outputType.set('date');
-                        break;
-                    case 'datetime':
-                        this.outputType.set('date');
-                        break;
-                    default:
-                        this.outputType.set('text');
-                }
-            }
-        };
-        this.ensureDefaultDisplayValue = () => {
-            const value = this.value() || this.ngControl()?.value;
-            if (value === null || value === undefined) {
-                this.displayValue.set('');
-            }
-            else
-                this.displayValue.set(this.formatValue(value));
-        };
-        this.formatValue = (value) => {
-            const type = this.type();
-            switch (type) {
-                case 'date':
-                    return formatDate$1(value, 'yyyy-MM-dd');
-                case 'datetime':
-                    return formatDate$1(value, "yyyy-MM-dd'T'HH:mm");
-                default:
-                    return value;
-            }
-        };
-        this.onChange = (value) => {
-            if (value instanceof Event) {
-                const source = value.target;
-                let parsed = source.value;
-                if (this.type() == 'number' && this.outputType() == 'number')
-                    parsed = source.valueAsNumber;
-                if ((this.type() == 'date' || this.type() == 'datetime') &&
-                    this.outputType() == 'date')
-                    parsed = source.valueAsDate;
-                this._changeSubject.next(parsed);
-            }
-            else
-                this._changeSubject.next(value);
-        };
-        this.focusInput = () => {
-            this._element.focus();
-        };
-        this.setDisabledState = (isDisabled) => {
-            this.isDisabled.set(isDisabled);
-        };
-        this.getLastError = () => {
-            const errorDisplays = BaseErrorDisplays;
-            const control = this.ngControl()?.control;
-            const errors = control?.errors || this.errors();
-            if (errors != null) {
-                const errorKeys = Object.keys(errors);
-                if (errorKeys.length > 0) {
-                    const firstKey = errorKeys[0];
-                    const errorDisplay = errorDisplays[firstKey];
-                    const error = errors[firstKey];
-                    return errorDisplay
-                        ? `${errorDisplay} (limite: ${error[firstKey]}, saisie: ${error.actual})`
-                        : errorKeys[0];
-                }
-            }
-            return null;
-        };
-        this._getState = (status = null) => {
-            // Todo: check to return "idle" when both valid and unfocused
-            const value = this.value();
-            const required = this.required();
-            if (status == 'VALID' || status == null) {
-                if (value == null && !required) {
-                    return 'WARNING';
-                }
-            }
-            return status;
-        };
         this.ngControl.set(inject(NgControl, { optional: true, self: true }));
         this.ensureNgControl();
         effect(() => {
@@ -4570,10 +4426,124 @@ class ChrInputComponent {
     ngOnInit() {
         this.configureDebouncing();
         this.configureEventListeners();
+        this.ensureRequired();
         // this.ensureNgControl();
         this.ensureOutputType();
         this.ensureDefaultDisplayValue();
     }
+    configureDebouncing() {
+        this._changeSubject
+            .pipe(
+        // The Behavior Subject always has an initial value. Which means that subscribing to it will make it look like the input has a new value (initially null).
+        // Which is false, because we're only instanciating the object. This is why we need to skip the first value. Otherwise the form will receive a random null when this
+        // observable is subscribed to and set the value to said null.
+        skip(1), debounceTime$1(this.debounceTime()))
+            .subscribe((res) => {
+            this.debouncedInput.emit(res);
+            // If the value is an empty string, set the value to null to trigger validation and prevent an inconsitent value to be set (ex: for number type input)
+            let value = typeof res === 'string' && res.trim() === '' ? null : res;
+            // If we use the input type number, we cast the value to a number because for some reason, it may sometimes be a string.
+            // if (this.type() === 'number' && value !== null) value = Number(value);
+            this.value.set(value);
+            this._onChange(value);
+        });
+    }
+    configureEventListeners() {
+        this.blur.subscribe((data) => {
+            // this.blur.emit();
+            this.isFocused.set(false);
+            this.ensureState(this.ngControl()?.status || null);
+            // this.state.set(this._getState(this.ngControl()?.status || null));
+        });
+        this.focus.subscribe((data) => {
+            this._onTouched();
+            this.isFocused.set(true);
+            this.isTouched.set(true);
+        });
+        this.ngControl()?.statusChanges?.subscribe((data) => {
+            this.ensureState(data);
+        });
+        this.displayValue.subscribe((v) => {
+            if (v === undefined || v === null)
+                this.displayValue.set('');
+        });
+    }
+    ensureNgControl() {
+        const control = this.ngControl();
+        if (control != null) {
+            control.valueAccessor = this;
+            this.setDisabledState(this.ngControl()?.disabled ?? false);
+        }
+    }
+    ensureRequired() {
+        const control = this.ngControl()?.control;
+        if (control == null)
+            return;
+        if (control?.validator) {
+            const validatorResult = control.validator({});
+            if (validatorResult && validatorResult['required']) {
+                this.required.set(true);
+            }
+        }
+        this.required.set(false);
+    }
+    ensureState(status) {
+        const control = this.ngControl();
+        if (control !== null)
+            this.state.set(this._getState(status));
+    }
+    ensureOutputType() {
+        const type = this.type();
+        const outputType = this.outputType();
+        if (outputType == null) {
+            switch (type) {
+                case 'number':
+                    this.outputType.set('number');
+                    break;
+                case 'date':
+                    this.outputType.set('date');
+                    break;
+                case 'datetime':
+                    this.outputType.set('date');
+                    break;
+                default:
+                    this.outputType.set('text');
+            }
+        }
+    }
+    ensureDefaultDisplayValue() {
+        const value = this.value() || this.ngControl()?.value;
+        if (value === null || value === undefined) {
+            this.displayValue.set('');
+        }
+        else
+            this.displayValue.set(this.formatValue(value));
+    }
+    formatValue(value) {
+        const type = this.type();
+        switch (type) {
+            case 'date':
+                return formatDate$1(value, 'yyyy-MM-dd');
+            case 'datetime':
+                return formatDate$1(value, "yyyy-MM-dd'T'HH:mm");
+            default:
+                return value;
+        }
+    }
+    onChange(value) {
+        if (value instanceof Event) {
+            const source = value.target;
+            let parsed = source.value;
+            if (this.type() == 'number' && this.outputType() == 'number')
+                parsed = source.valueAsNumber;
+            if ((this.type() == 'date' || this.type() == 'datetime') &&
+                this.outputType() == 'date')
+                parsed = source.valueAsDate;
+            this._changeSubject.next(parsed);
+        }
+        else
+            this._changeSubject.next(value);
+    }
     writeValue(value) {
         this.value.set(value ?? null);
         this.displayValue.set(this.formatValue(value));
@@ -4590,13 +4560,47 @@ class ChrInputComponent {
             fn();
         };
     }
+    focusInput() {
+        this._element.focus();
+    }
+    setDisabledState(isDisabled) {
+        this.isDisabled.set(isDisabled);
+    }
+    getLastError() {
+        const errorDisplays = BaseErrorDisplays;
+        const control = this.ngControl()?.control;
+        const errors = control?.errors || this.errors();
+        if (errors != null) {
+            const errorKeys = Object.keys(errors);
+            if (errorKeys.length > 0) {
+                const firstKey = errorKeys[0];
+                const errorDisplay = errorDisplays[firstKey];
+                const error = errors[firstKey];
+                return errorDisplay
+                    ? `${errorDisplay} (limite: ${error[firstKey]}, saisie: ${error.actual})`
+                    : errorKeys[0];
+            }
+        }
+        return null;
+    }
+    _getState(status = null) {
+        // Todo: check to return "idle" when both valid and unfocused
+        const value = this.value();
+        const required = this.required();
+        if (status == 'VALID' || status == null) {
+            if (value == null && !required) {
+                return 'WARNING';
+            }
+        }
+        return status;
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: ChrInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: ChrInputComponent, isStandalone: true, selector: "chr-input", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, displayValue: { classPropertyName: "displayValue", publicName: "displayValue", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, outputType: { classPropertyName: "outputType", publicName: "outputType", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, debounceTime: { classPropertyName: "debounceTime", publicName: "debounceTime", isSignal: true, isRequired: false, transformFunction: null }, isDisabled: { classPropertyName: "isDisabled", publicName: "isDisabled", isSignal: true, isRequired: false, transformFunction: null }, isFocused: { classPropertyName: "isFocused", publicName: "isFocused", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", 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 }, ngControl: { classPropertyName: "ngControl", publicName: "ngControl", isSignal: true, isRequired: false, transformFunction: null }, tooltip: { classPropertyName: "tooltip", publicName: "tooltip", isSignal: true, isRequired: false, transformFunction: null }, isIndicatorsOpen: { classPropertyName: "isIndicatorsOpen", publicName: "isIndicatorsOpen", isSignal: true, isRequired: false, transformFunction: null }, tooltipPosition: { classPropertyName: "tooltipPosition", publicName: "tooltipPosition", isSignal: true, isRequired: false, transformFunction: null }, state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: false, transformFunction: null }, errors: { classPropertyName: "errors", publicName: "errors", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { id: "idChange", name: "nameChange", value: "valueChange", displayValue: "displayValueChange", outputType: "outputTypeChange", isDisabled: "isDisabledChange", isFocused: "isFocusedChange", ngControl: "ngControlChange", isIndicatorsOpen: "isIndicatorsOpenChange", state: "stateChange", input: "input", change: "change", debouncedInput: "debouncedInput", focus: "focus", enter: "enter", blur: "blur" }, providers: [], ngImport: i0, template: "<div class=\"input-wrapper\" [attr.data-state]=\"state()\">\n    <div class=\"input-row\">\n        @if(label()?.trim()){\n        <label [for]=\"id()\">\n            {{label()}}\n            @if(required()){\n            <span class=\"required\">*</span>\n            }\n        </label>\n        }\n        <input [multiple]=\"\" class=\"input\" #htmlInput [id]=\"id()\" [name]=\"name()\" placeholder=\" \"\n            [value]=\"displayValue()\" (focus)=\"focus.emit()\" (blur)=\"blur.emit()\" [disabled]=\"isDisabled()\"\n            [type]=\"type() == 'time-seconds' ? 'time' : type()\" (input)=\"input.emit($event);onChange($event)\"\n            (change)=\"change.emit($event)\" [step]=\"type() == 'time-seconds' ? 1 : step()\"\n            (keyup.enter)=\"enter.emit()\" />\n\n        <span [OutsideClickAware]=\"true\" class=\"indicators\" [attr.data-indicators-open]=\"isIndicatorsOpen()\"\n            (click)=\"isIndicatorsOpen.set(true)\" (outsideClick)=\"isIndicatorsOpen.set(false)\">\n            <!-- Indicators projection -->\n            <ng-content select=\"chr-input-indicators\"></ng-content>\n            @if(tooltip() != null){\n            <button type=\"button\" class=\"material-symbols tooltip-indicator\"\n                [chrPopover]=\"providedTooltipTemplate() || tooltipTemplate\" [chrPopoverOnHover]=\"false\"\n                [chrPopoverPosition]=\"tooltipPosition()\">info</button>\n            }\n        </span>\n    </div>\n</div>\n<!-- No-height slot. Should be used for \"overlay\" type data-->\n<div class=\"data-overlay\">\n    @if(isTouched()){\n    @let error = getLastError();\n    @if(error != null){\n    <div class=\"error card glass\">\n        {{getLastError() ?? null}}\n    </div>\n    }\n    }\n    <ng-content select=\"chr-input-data-overlay\">\n    </ng-content>\n</div>\n<!-- Default \"space-consuming\" Content Projection -->\n<div class=\"data\">\n    <ng-content select=\"chr-input-data\">\n        <!-- Fallback to default projection-->\n        <ng-content></ng-content>\n    </ng-content>\n</div>\n\n<ng-template #tooltipTemplate>\n    <span>{{tooltip()}}</span>\n</ng-template>", styles: [":host{display:flex;flex-direction:column;flex:1 1 auto;min-width:0}.input-wrapper{--chr-input-current-color: var(--text-neutral-color);position:relative;box-sizing:border-box;min-height:1.5rem;max-height:1.5rem;height:1.5rem;display:flex;flex:1 1 auto;min-width:0;flex-direction:column;border-bottom:.125rem solid var(--chr-input-current-color)}.input-wrapper .input-row{display:flex;flex:1 1 auto;flex-wrap:nowrap;height:inherit}.input-wrapper .input{min-width:0;height:inherit;color:var(--text-color)}.input-wrapper .indicators{display:flex;flex-direction:row;flex:1 1 auto;flex-wrap:nowrap;gap:.25rem;max-width:fit-content;height:inherit;align-items:center;color:var(--chr-input-current-color);font-size:.75rem!important}.input-wrapper .input~.indicators{position:absolute;top:0;right:0;visibility:hidden;opacity:0;transform:translate(1rem);transition:opacity .15s ease-in-out,transform .15s ease-in-out,width .15s ease-in-out .15s}.input-wrapper:focus-within .input~.indicators,.input-wrapper:hover .input~.indicators,.input-wrapper .input~.indicators[data-indicators-open=true]{position:relative;visibility:visible;padding-left:.125rem;opacity:1;transform:translate(0)}:is(.input-wrapper:focus-within .input~.indicators,.input-wrapper:hover .input~.indicators,.input-wrapper .input~.indicators[data-indicators-open=true]):has(chr-input-indicators:not(:empty)),:is(.input-wrapper:focus-within .input~.indicators,.input-wrapper:hover .input~.indicators,.input-wrapper .input~.indicators[data-indicators-open=true]):has(:nth-child(2)){border-left:.125rem solid color-mix(in srgb,var(--chr-input-current-color) 40%,transparent 60%)}.input-wrapper:focus-within .input,.input-wrapper:hover .input,.input-wrapper:has(.indicators[data-indicators-open=true]) .input{padding-right:.125rem}.input-wrapper .input:has(~.indicators:empty){padding-right:0}.input-wrapper .input~.indicators:empty{width:0;border-left:none;padding-left:0}.input-wrapper .tooltip-indicator{cursor:pointer;font-size:1.25rem;padding:0;color:var(--chr-input-current-color)}.input-wrapper .tooltip-indicator:hover{color:var(--primary-color)}.input-wrapper .required{color:var(--error-color)}.input-wrapper:has(.input:focus){--chr-input-current-color: var(--primary-color)}.input-wrapper[data-state=IDLE]{--chr-input-current-color: color-mix(in srgb, var(--text-neutral-color) 90%, transparent 10%) }.input-wrapper[data-state=INVALID],.input-wrapper[data-state=DISABLED]{--chr-input-current-color: var(--error-color)}.input-wrapper[data-state=PENDING],.input-wrapper[data-state=WARNING]{--chr-input-current-color: var(--warn-color)}.input-wrapper label{position:absolute;pointer-events:none;top:50%;color:var(--chr-input-current-color);transform:translateY(-50%);transition:transfom 125ms ease-in-out,position 125ms ease-in-out,top 125ms ease-in-out,font-size 125ms ease-in-out,left 125ms ease-in-out;font-size:.85rem;font-weight:700}.input-wrapper label:not(:empty):after{position:absolute;content:\":\"}.input-wrapper label:has(~.input:focus),.input-wrapper label:has(~.input:not(:placeholder-shown)){top:-.25rem;left:0;font-size:75%}.input-wrapper .input{width:100%;outline:none;border:none;padding:0;background-color:transparent}.data-overlay{height:0;grid-area:data / data;display:flex;flex-direction:column;flex-wrap:nowrap}.data{grid-area:data / data;display:flex;flex-direction:column;flex-wrap:nowrap}.error{grid-area:data / data;display:flex;flex:1 1 auto;flex-direction:row;flex-wrap:wrap;min-width:100%;max-width:min-content;color:var(--error-color);padding:.25rem;border-top-left-radius:0;border-top-right-radius:0;background-color:var(--background-color);z-index:2}.error:empty{display:none}.input[disabled]{--chr-input-disabled-neutral-muted-color: color-mix(in srgb, var(--text-neutral-color) 15%, transparent 85%);background:repeating-linear-gradient(45deg,var(--chr-input-disabled-neutral-muted-color),var(--chr-input-disabled-neutral-muted-color) .625rem,var(--background-color) .625rem,var(--background-color) 1.25rem);cursor:not-allowed}.input{accent-color:var(--primary-color)}.input ::-webkit-datetime-edit,.input ::-webkit-datetime-edit-fields-wrapper,.input ::-webkit-datetime-edit-text,.input ::-webkit-datetime-edit-month-field,.input ::-webkit-datetime-edit-day-field,.input ::-webkit-datetime-edit-year-field,.input ::-webkit-inner-spin-button,.input ::-webkit-calendar-picker-indicator{place-self:end;justify-self:end;background-color:red}.input[type=range]{color:red}.input[type=range]:after{content:attr(value)}.input[type=textarea]::-webkit-scrollbar{display:none!important}.no-scrollbar{-ms-overflow-style:none!important;scrollbar-width:none!important}\n"], dependencies: [{ kind: "directive", type: ChrPopoverDirective, selector: "[chrPopover]", inputs: ["chrPopover", "chrPopoverPosition", "chrPopoverData", "chrPopoverOnHover"] }, { kind: "directive", type: OutsideClickAwareDirective, selector: "[OutsideClickAware]", inputs: ["OutsideClickAware"], outputs: ["outsideClick"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: ChrInputComponent, isStandalone: true, selector: "chr-input", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, displayValue: { classPropertyName: "displayValue", publicName: "displayValue", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, outputType: { classPropertyName: "outputType", publicName: "outputType", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, debounceTime: { classPropertyName: "debounceTime", publicName: "debounceTime", isSignal: true, isRequired: false, transformFunction: null }, isDisabled: { classPropertyName: "isDisabled", publicName: "isDisabled", isSignal: true, isRequired: false, transformFunction: null }, isFocused: { classPropertyName: "isFocused", publicName: "isFocused", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", 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 }, ngControl: { classPropertyName: "ngControl", publicName: "ngControl", isSignal: true, isRequired: false, transformFunction: null }, tooltip: { classPropertyName: "tooltip", publicName: "tooltip", isSignal: true, isRequired: false, transformFunction: null }, isIndicatorsOpen: { classPropertyName: "isIndicatorsOpen", publicName: "isIndicatorsOpen", isSignal: true, isRequired: false, transformFunction: null }, tooltipPosition: { classPropertyName: "tooltipPosition", publicName: "tooltipPosition", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: false, transformFunction: null }, errors: { classPropertyName: "errors", publicName: "errors", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { id: "idChange", name: "nameChange", value: "valueChange", displayValue: "displayValueChange", outputType: "outputTypeChange", isDisabled: "isDisabledChange", isFocused: "isFocusedChange", ngControl: "ngControlChange", isIndicatorsOpen: "isIndicatorsOpenChange", required: "requiredChange", state: "stateChange", input: "input", change: "change", debouncedInput: "debouncedInput", focus: "focus", enter: "enter", blur: "blur" }, providers: [], ngImport: i0, template: "<div class=\"input-wrapper\" [attr.data-state]=\"state()\">\n    <div class=\"input-row\">\n        @if(label()?.trim()){\n        <label [for]=\"id()\">\n            {{label()}}\n            @if(required()){\n            <span class=\"required\">*</span>\n            }\n        </label>\n        }\n        <input [multiple]=\"\" class=\"input\" #htmlInput [id]=\"id()\" [name]=\"name()\" placeholder=\" \"\n            [value]=\"displayValue()\" (focus)=\"focus.emit()\" (blur)=\"blur.emit()\" [disabled]=\"isDisabled()\"\n            [type]=\"type() == 'time-seconds' ? 'time' : type()\" (input)=\"input.emit($event);onChange($event)\"\n            (change)=\"change.emit($event)\" [step]=\"type() == 'time-seconds' ? 1 : step()\"\n            (keyup.enter)=\"enter.emit()\" />\n\n        <span [OutsideClickAware]=\"true\" class=\"indicators\" [attr.data-indicators-open]=\"isIndicatorsOpen()\"\n            (click)=\"isIndicatorsOpen.set(true)\" (outsideClick)=\"isIndicatorsOpen.set(false)\">\n            <!-- Indicators projection -->\n            <ng-content select=\"chr-input-indicators\"></ng-content>\n            @if(tooltip() != null){\n            <button type=\"button\" class=\"material-symbols tooltip-indicator\"\n                [chrPopover]=\"providedTooltipTemplate() || tooltipTemplate\" [chrPopoverOnHover]=\"false\"\n                [chrPopoverPosition]=\"tooltipPosition()\">info</button>\n            }\n        </span>\n    </div>\n</div>\n<!-- No-height slot. Should be used for \"overlay\" type data-->\n<div class=\"data-overlay\">\n    @if(isTouched()){\n    @let error = getLastError();\n    @if(error != null){\n    <div class=\"error card glass\">\n        {{getLastError() ?? null}}\n    </div>\n    }\n    }\n    <ng-content select=\"chr-input-data-overlay\">\n    </ng-content>\n</div>\n<!-- Default \"space-consuming\" Content Projection -->\n<div class=\"data\">\n    <ng-content select=\"chr-input-data\">\n        <!-- Fallback to default projection-->\n        <ng-content></ng-content>\n    </ng-content>\n</div>\n\n<ng-template #tooltipTemplate>\n    <span>{{tooltip()}}</span>\n</ng-template>", styles: [":host{display:flex;flex-direction:column;flex:1 1 auto;min-width:0}.input-wrapper{--chr-input-current-color: var(--text-neutral-color);position:relative;box-sizing:border-box;min-height:1.5rem;max-height:1.5rem;height:1.5rem;display:flex;flex:1 1 auto;min-width:0;flex-direction:column;border-bottom:.125rem solid var(--chr-input-current-color)}.input-wrapper .input-row{display:flex;flex:1 1 auto;flex-wrap:nowrap;height:inherit}.input-wrapper .input{min-width:0;height:inherit;color:var(--text-color)}.input-wrapper .indicators{display:flex;flex-direction:row;flex:1 1 auto;flex-wrap:nowrap;gap:.25rem;max-width:fit-content;height:inherit;align-items:center;color:var(--chr-input-current-color);font-size:.75rem!important}.input-wrapper .input~.indicators{position:absolute;top:0;right:0;visibility:hidden;opacity:0;transform:translate(1rem);transition:opacity .15s ease-in-out,transform .15s ease-in-out,width .15s ease-in-out .15s}.input-wrapper:focus-within .input~.indicators,.input-wrapper:hover .input~.indicators,.input-wrapper .input~.indicators[data-indicators-open=true]{position:relative;visibility:visible;padding-left:.125rem;opacity:1;transform:translate(0)}:is(.input-wrapper:focus-within .input~.indicators,.input-wrapper:hover .input~.indicators,.input-wrapper .input~.indicators[data-indicators-open=true]):has(chr-input-indicators:not(:empty)),:is(.input-wrapper:focus-within .input~.indicators,.input-wrapper:hover .input~.indicators,.input-wrapper .input~.indicators[data-indicators-open=true]):has(:nth-child(2)){border-left:.125rem solid color-mix(in srgb,var(--chr-input-current-color) 40%,transparent 60%)}.input-wrapper:focus-within .input,.input-wrapper:hover .input,.input-wrapper:has(.indicators[data-indicators-open=true]) .input{padding-right:.125rem}.input-wrapper .input:has(~.indicators:empty){padding-right:0}.input-wrapper .input~.indicators:empty{width:0;border-left:none;padding-left:0}.input-wrapper .tooltip-indicator{cursor:pointer;font-size:1.25rem;padding:0;color:var(--chr-input-current-color)}.input-wrapper .tooltip-indicator:hover{color:var(--primary-color)}.input-wrapper .required{color:var(--error-color)}.input-wrapper:has(.input:focus){--chr-input-current-color: var(--primary-color)}.input-wrapper[data-state=IDLE]{--chr-input-current-color: color-mix(in srgb, var(--text-neutral-color) 90%, transparent 10%) }.input-wrapper[data-state=INVALID],.input-wrapper[data-state=DISABLED]{--chr-input-current-color: var(--error-color)}.input-wrapper[data-state=PENDING],.input-wrapper[data-state=WARNING]{--chr-input-current-color: var(--warn-color)}.input-wrapper label{position:absolute;pointer-events:none;top:50%;color:var(--chr-input-current-color);transform:translateY(-50%);transition:transfom 125ms ease-in-out,position 125ms ease-in-out,top 125ms ease-in-out,font-size 125ms ease-in-out,left 125ms ease-in-out;font-size:.85rem;font-weight:700}.input-wrapper label:not(:empty):after{position:absolute;content:\":\"}.input-wrapper label:has(~.input:focus),.input-wrapper label:has(~.input:not(:placeholder-shown)){top:-.25rem;left:0;font-size:75%}.input-wrapper .input{width:100%;outline:none;border:none;padding:0;background-color:transparent}.data-overlay{height:0;grid-area:data / data;display:flex;flex-direction:column;flex-wrap:nowrap}.data{grid-area:data / data;display:flex;flex-direction:column;flex-wrap:nowrap}.error{grid-area:data / data;display:flex;flex:1 1 auto;flex-direction:row;flex-wrap:wrap;min-width:calc(100% - .5rem);max-width:min-content;color:var(--error-color);padding:.25rem;border-top-left-radius:0;border-top-right-radius:0;background-color:var(--background-color);z-index:2}.error:empty{display:none}.input[disabled]{--chr-input-disabled-neutral-muted-color: color-mix(in srgb, var(--text-neutral-color) 15%, transparent 85%);background:repeating-linear-gradient(45deg,var(--chr-input-disabled-neutral-muted-color),var(--chr-input-disabled-neutral-muted-color) .625rem,var(--background-color) .625rem,var(--background-color) 1.25rem);cursor:not-allowed}.input{accent-color:var(--primary-color)}.input ::-webkit-datetime-edit,.input ::-webkit-datetime-edit-fields-wrapper,.input ::-webkit-datetime-edit-text,.input ::-webkit-datetime-edit-month-field,.input ::-webkit-datetime-edit-day-field,.input ::-webkit-datetime-edit-year-field,.input ::-webkit-inner-spin-button,.input ::-webkit-calendar-picker-indicator{place-self:end;justify-self:end;background-color:red}.input[type=range]{color:red}.input[type=range]:after{content:attr(value)}.input[type=textarea]::-webkit-scrollbar{display:none!important}.no-scrollbar{-ms-overflow-style:none!important;scrollbar-width:none!important}\n"], dependencies: [{ kind: "directive", type: ChrPopoverDirective, selector: "[chrPopover]", inputs: ["chrPopover", "chrPopoverPosition", "chrPopoverData", "chrPopoverOnHover"] }, { kind: "directive", type: OutsideClickAwareDirective, selector: "[OutsideClickAware]", inputs: ["OutsideClickAware"], outputs: ["outsideClick"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: ChrInputComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'chr-input', imports: [ChrPopoverDirective, OutsideClickAwareDirective], providers: [], template: "<div class=\"input-wrapper\" [attr.data-state]=\"state()\">\n    <div class=\"input-row\">\n        @if(label()?.trim()){\n        <label [for]=\"id()\">\n            {{label()}}\n            @if(required()){\n            <span class=\"required\">*</span>\n            }\n        </label>\n        }\n        <input [multiple]=\"\" class=\"input\" #htmlInput [id]=\"id()\" [name]=\"name()\" placeholder=\" \"\n            [value]=\"displayValue()\" (focus)=\"focus.emit()\" (blur)=\"blur.emit()\" [disabled]=\"isDisabled()\"\n            [type]=\"type() == 'time-seconds' ? 'time' : type()\" (input)=\"input.emit($event);onChange($event)\"\n            (change)=\"change.emit($event)\" [step]=\"type() == 'time-seconds' ? 1 : step()\"\n            (keyup.enter)=\"enter.emit()\" />\n\n        <span [OutsideClickAware]=\"true\" class=\"indicators\" [attr.data-indicators-open]=\"isIndicatorsOpen()\"\n            (click)=\"isIndicatorsOpen.set(true)\" (outsideClick)=\"isIndicatorsOpen.set(false)\">\n            <!-- Indicators projection -->\n            <ng-content select=\"chr-input-indicators\"></ng-content>\n            @if(tooltip() != null){\n            <button type=\"button\" class=\"material-symbols tooltip-indicator\"\n                [chrPopover]=\"providedTooltipTemplate() || tooltipTemplate\" [chrPopoverOnHover]=\"false\"\n                [chrPopoverPosition]=\"tooltipPosition()\">info</button>\n            }\n        </span>\n    </div>\n</div>\n<!-- No-height slot. Should be used for \"overlay\" type data-->\n<div class=\"data-overlay\">\n    @if(isTouched()){\n    @let error = getLastError();\n    @if(error != null){\n    <div class=\"error card glass\">\n        {{getLastError() ?? null}}\n    </div>\n    }\n    }\n    <ng-content select=\"chr-input-data-overlay\">\n    </ng-content>\n</div>\n<!-- Default \"space-consuming\" Content Projection -->\n<div class=\"data\">\n    <ng-content select=\"chr-input-data\">\n        <!-- Fallback to default projection-->\n        <ng-content></ng-content>\n    </ng-content>\n</div>\n\n<ng-template #tooltipTemplate>\n    <span>{{tooltip()}}</span>\n</ng-template>", styles: [":host{display:flex;flex-direction:column;flex:1 1 auto;min-width:0}.input-wrapper{--chr-input-current-color: var(--text-neutral-color);position:relative;box-sizing:border-box;min-height:1.5rem;max-height:1.5rem;height:1.5rem;display:flex;flex:1 1 auto;min-width:0;flex-direction:column;border-bottom:.125rem solid var(--chr-input-current-color)}.input-wrapper .input-row{display:flex;flex:1 1 auto;flex-wrap:nowrap;height:inherit}.input-wrapper .input{min-width:0;height:inherit;color:var(--text-color)}.input-wrapper .indicators{display:flex;flex-direction:row;flex:1 1 auto;flex-wrap:nowrap;gap:.25rem;max-width:fit-content;height:inherit;align-items:center;color:var(--chr-input-current-color);font-size:.75rem!important}.input-wrapper .input~.indicators{position:absolute;top:0;right:0;visibility:hidden;opacity:0;transform:translate(1rem);transition:opacity .15s ease-in-out,transform .15s ease-in-out,width .15s ease-in-out .15s}.input-wrapper:focus-within .input~.indicators,.input-wrapper:hover .input~.indicators,.input-wrapper .input~.indicators[data-indicators-open=true]{position:relative;visibility:visible;padding-left:.125rem;opacity:1;transform:translate(0)}:is(.input-wrapper:focus-within .input~.indicators,.input-wrapper:hover .input~.indicators,.input-wrapper .input~.indicators[data-indicators-open=true]):has(chr-input-indicators:not(:empty)),:is(.input-wrapper:focus-within .input~.indicators,.input-wrapper:hover .input~.indicators,.input-wrapper .input~.indicators[data-indicators-open=true]):has(:nth-child(2)){border-left:.125rem solid color-mix(in srgb,var(--chr-input-current-color) 40%,transparent 60%)}.input-wrapper:focus-within .input,.input-wrapper:hover .input,.input-wrapper:has(.indicators[data-indicators-open=true]) .input{padding-right:.125rem}.input-wrapper .input:has(~.indicators:empty){padding-right:0}.input-wrapper .input~.indicators:empty{width:0;border-left:none;padding-left:0}.input-wrapper .tooltip-indicator{cursor:pointer;font-size:1.25rem;padding:0;color:var(--chr-input-current-color)}.input-wrapper .tooltip-indicator:hover{color:var(--primary-color)}.input-wrapper .required{color:var(--error-color)}.input-wrapper:has(.input:focus){--chr-input-current-color: var(--primary-color)}.input-wrapper[data-state=IDLE]{--chr-input-current-color: color-mix(in srgb, var(--text-neutral-color) 90%, transparent 10%) }.input-wrapper[data-state=INVALID],.input-wrapper[data-state=DISABLED]{--chr-input-current-color: var(--error-color)}.input-wrapper[data-state=PENDING],.input-wrapper[data-state=WARNING]{--chr-input-current-color: var(--warn-color)}.input-wrapper label{position:absolute;pointer-events:none;top:50%;color:var(--chr-input-current-color);transform:translateY(-50%);transition:transfom 125ms ease-in-out,position 125ms ease-in-out,top 125ms ease-in-out,font-size 125ms ease-in-out,left 125ms ease-in-out;font-size:.85rem;font-weight:700}.input-wrapper label:not(:empty):after{position:absolute;content:\":\"}.input-wrapper label:has(~.input:focus),.input-wrapper label:has(~.input:not(:placeholder-shown)){top:-.25rem;left:0;font-size:75%}.input-wrapper .input{width:100%;outline:none;border:none;padding:0;background-color:transparent}.data-overlay{height:0;grid-area:data / data;display:flex;flex-direction:column;flex-wrap:nowrap}.data{grid-area:data / data;display:flex;flex-direction:column;flex-wrap:nowrap}.error{grid-area:data / data;display:flex;flex:1 1 auto;flex-direction:row;flex-wrap:wrap;min-width:100%;max-width:min-content;color:var(--error-color);padding:.25rem;border-top-left-radius:0;border-top-right-radius:0;background-color:var(--background-color);z-index:2}.error:empty{display:none}.input[disabled]{--chr-input-disabled-neutral-muted-color: color-mix(in srgb, var(--text-neutral-color) 15%, transparent 85%);background:repeating-linear-gradient(45deg,var(--chr-input-disabled-neutral-muted-color),var(--chr-input-disabled-neutral-muted-color) .625rem,var(--background-color) .625rem,var(--background-color) 1.25rem);cursor:not-allowed}.input{accent-color:var(--primary-color)}.input ::-webkit-datetime-edit,.input ::-webkit-datetime-edit-fields-wrapper,.input ::-webkit-datetime-edit-text,.input ::-webkit-datetime-edit-month-field,.input ::-webkit-datetime-edit-day-field,.input ::-webkit-datetime-edit-year-field,.input ::-webkit-inner-spin-button,.input ::-webkit-calendar-picker-indicator{place-self:end;justify-self:end;background-color:red}.input[type=range]{color:red}.input[type=range]:after{content:attr(value)}.input[type=textarea]::-webkit-scrollbar{display:none!important}.no-scrollbar{-ms-overflow-style:none!important;scrollbar-width:none!important}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }, { type: i0.Output, args: ["idChange"] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }, { type: i0.Output, args: ["nameChange"] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], displayValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "displayValue", required: false }] }, { type: i0.Output, args: ["displayValueChange"] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], outputType: [{ type: i0.Input, args: [{ isSignal: true, alias: "outputType", required: false }] }, { type: i0.Output, args: ["outputTypeChange"] }], step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }], debounceTime: [{ type: i0.Input, args: [{ isSignal: true, alias: "debounceTime", required: false }] }], isDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "isDisabled", required: false }] }, { type: i0.Output, args: ["isDisabledChange"] }], isFocused: [{ type: i0.Input, args: [{ isSignal: true, alias: "isFocused", required: false }] }, { type: i0.Output, args: ["isFocusedChange"] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], minLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "minLength", required: false }] }], maxLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxLength", required: false }] }], ngControl: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngControl", required: false }] }, { type: i0.Output, args: ["ngControlChange"] }], tooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltip", required: false }] }], isIndicatorsOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "isIndicatorsOpen", required: false }] }, { type: i0.Output, args: ["isIndicatorsOpenChange"] }], tooltipPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltipPosition", required: false }] }], state: [{ type: i0.Input, args: [{ isSignal: true, alias: "state", required: false }] }, { type: i0.Output, args: ["stateChange"] }], errors: [{ type: i0.Input, args: [{ isSignal: true, alias: "errors", required: false }] }], input: [{ type: i0.Output, args: ["input"] }], change: [{ type: i0.Output, args: ["change"] }], debouncedInput: [{ type: i0.Output, args: ["debouncedInput"] }], focus: [{ type: i0.Output, args: ["focus"] }], enter: [{ type: i0.Output, args: ["enter"] }], blur: [{ type: i0.Output, args: ["blur"] }] } });
+            args: [{ selector: 'chr-input', imports: [ChrPopoverDirective, OutsideClickAwareDirective], providers: [], template: "<div class=\"input-wrapper\" [attr.data-state]=\"state()\">\n    <div class=\"input-row\">\n        @if(label()?.trim()){\n        <label [for]=\"id()\">\n            {{label()}}\n            @if(required()){\n            <span class=\"required\">*</span>\n            }\n        </label>\n        }\n        <input [multiple]=\"\" class=\"input\" #htmlInput [id]=\"id()\" [name]=\"name()\" placeholder=\" \"\n            [value]=\"displayValue()\" (focus)=\"focus.emit()\" (blur)=\"blur.emit()\" [disabled]=\"isDisabled()\"\n            [type]=\"type() == 'time-seconds' ? 'time' : type()\" (input)=\"input.emit($event);onChange($event)\"\n            (change)=\"change.emit($event)\" [step]=\"type() == 'time-seconds' ? 1 : step()\"\n            (keyup.enter)=\"enter.emit()\" />\n\n        <span [OutsideClickAware]=\"true\" class=\"indicators\" [attr.data-indicators-open]=\"isIndicatorsOpen()\"\n            (click)=\"isIndicatorsOpen.set(true)\" (outsideClick)=\"isIndicatorsOpen.set(false)\">\n            <!-- Indicators projection -->\n            <ng-content select=\"chr-input-indicators\"></ng-content>\n            @if(tooltip() != null){\n            <button type=\"button\" class=\"material-symbols tooltip-indicator\"\n                [chrPopover]=\"providedTooltipTemplate() || tooltipTemplate\" [chrPopoverOnHover]=\"false\"\n                [chrPopoverPosition]=\"tooltipPosition()\">info</button>\n            }\n        </span>\n    </div>\n</div>\n<!-- No-height slot. Should be used for \"overlay\" type data-->\n<div class=\"data-overlay\">\n    @if(isTouched()){\n    @let error = getLastError();\n    @if(error != null){\n    <div class=\"error card glass\">\n        {{getLastError() ?? null}}\n    </div>\n    }\n    }\n    <ng-content select=\"chr-input-data-overlay\">\n    </ng-content>\n</div>\n<!-- Default \"space-consuming\" Content Projection -->\n<div class=\"data\">\n    <ng-content select=\"chr-input-data\">\n        <!-- Fallback to default projection-->\n        <ng-content></ng-content>\n    </ng-content>\n</div>\n\n<ng-template #tooltipTemplate>\n    <span>{{tooltip()}}</span>\n</ng-template>", styles: [":host{display:flex;flex-direction:column;flex:1 1 auto;min-width:0}.input-wrapper{--chr-input-current-color: var(--text-neutral-color);position:relative;box-sizing:border-box;min-height:1.5rem;max-height:1.5rem;height:1.5rem;display:flex;flex:1 1 auto;min-width:0;flex-direction:column;border-bottom:.125rem solid var(--chr-input-current-color)}.input-wrapper .input-row{display:flex;flex:1 1 auto;flex-wrap:nowrap;height:inherit}.input-wrapper .input{min-width:0;height:inherit;color:var(--text-color)}.input-wrapper .indicators{display:flex;flex-direction:row;flex:1 1 auto;flex-wrap:nowrap;gap:.25rem;max-width:fit-content;height:inherit;align-items:center;color:var(--chr-input-current-color);font-size:.75rem!important}.input-wrapper .input~.indicators{position:absolute;top:0;right:0;visibility:hidden;opacity:0;transform:translate(1rem);transition:opacity .15s ease-in-out,transform .15s ease-in-out,width .15s ease-in-out .15s}.input-wrapper:focus-within .input~.indicators,.input-wrapper:hover .input~.indicators,.input-wrapper .input~.indicators[data-indicators-open=true]{position:relative;visibility:visible;padding-left:.125rem;opacity:1;transform:translate(0)}:is(.input-wrapper:focus-within .input~.indicators,.input-wrapper:hover .input~.indicators,.input-wrapper .input~.indicators[data-indicators-open=true]):has(chr-input-indicators:not(:empty)),:is(.input-wrapper:focus-within .input~.indicators,.input-wrapper:hover .input~.indicators,.input-wrapper .input~.indicators[data-indicators-open=true]):has(:nth-child(2)){border-left:.125rem solid color-mix(in srgb,var(--chr-input-current-color) 40%,transparent 60%)}.input-wrapper:focus-within .input,.input-wrapper:hover .input,.input-wrapper:has(.indicators[data-indicators-open=true]) .input{padding-right:.125rem}.input-wrapper .input:has(~.indicators:empty){padding-right:0}.input-wrapper .input~.indicators:empty{width:0;border-left:none;padding-left:0}.input-wrapper .tooltip-indicator{cursor:pointer;font-size:1.25rem;padding:0;color:var(--chr-input-current-color)}.input-wrapper .tooltip-indicator:hover{color:var(--primary-color)}.input-wrapper .required{color:var(--error-color)}.input-wrapper:has(.input:focus){--chr-input-current-color: var(--primary-color)}.input-wrapper[data-state=IDLE]{--chr-input-current-color: color-mix(in srgb, var(--text-neutral-color) 90%, transparent 10%) }.input-wrapper[data-state=INVALID],.input-wrapper[data-state=DISABLED]{--chr-input-current-color: var(--error-color)}.input-wrapper[data-state=PENDING],.input-wrapper[data-state=WARNING]{--chr-input-current-color: var(--warn-color)}.input-wrapper label{position:absolute;pointer-events:none;top:50%;color:var(--chr-input-current-color);transform:translateY(-50%);transition:transfom 125ms ease-in-out,position 125ms ease-in-out,top 125ms ease-in-out,font-size 125ms ease-in-out,left 125ms ease-in-out;font-size:.85rem;font-weight:700}.input-wrapper label:not(:empty):after{position:absolute;content:\":\"}.input-wrapper label:has(~.input:focus),.input-wrapper label:has(~.input:not(:placeholder-shown)){top:-.25rem;left:0;font-size:75%}.input-wrapper .input{width:100%;outline:none;border:none;padding:0;background-color:transparent}.data-overlay{height:0;grid-area:data / data;display:flex;flex-direction:column;flex-wrap:nowrap}.data{grid-area:data / data;display:flex;flex-direction:column;flex-wrap:nowrap}.error{grid-area:data / data;display:flex;flex:1 1 auto;flex-direction:row;flex-wrap:wrap;min-width:calc(100% - .5rem);max-width:min-content;color:var(--error-color);padding:.25rem;border-top-left-radius:0;border-top-right-radius:0;background-color:var(--background-color);z-index:2}.error:empty{display:none}.input[disabled]{--chr-input-disabled-neutral-muted-color: color-mix(in srgb, var(--text-neutral-color) 15%, transparent 85%);background:repeating-linear-gradient(45deg,var(--chr-input-disabled-neutral-muted-color),var(--chr-input-disabled-neutral-muted-color) .625rem,var(--background-color) .625rem,var(--background-color) 1.25rem);cursor:not-allowed}.input{accent-color:var(--primary-color)}.input ::-webkit-datetime-edit,.input ::-webkit-datetime-edit-fields-wrapper,.input ::-webkit-datetime-edit-text,.input ::-webkit-datetime-edit-month-field,.input ::-webkit-datetime-edit-day-field,.input ::-webkit-datetime-edit-year-field,.input ::-webkit-inner-spin-button,.input ::-webkit-calendar-picker-indicator{place-self:end;justify-self:end;background-color:red}.input[type=range]{color:red}.input[type=range]:after{content:attr(value)}.input[type=textarea]::-webkit-scrollbar{display:none!important}.no-scrollbar{-ms-overflow-style:none!important;scrollbar-width:none!important}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }, { type: i0.Output, args: ["idChange"] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }, { type: i0.Output, args: ["nameChange"] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], displayValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "displayValue", required: false }] }, { type: i0.Output, args: ["displayValueChange"] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], outputType: [{ type: i0.Input, args: [{ isSignal: true, alias: "outputType", required: false }] }, { type: i0.Output, args: ["outputTypeChange"] }], step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }], debounceTime: [{ type: i0.Input, args: [{ isSignal: true, alias: "debounceTime", required: false }] }], isDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "isDisabled", required: false }] }, { type: i0.Output, args: ["isDisabledChange"] }], isFocused: [{ type: i0.Input, args: [{ isSignal: true, alias: "isFocused", required: false }] }, { type: i0.Output, args: ["isFocusedChange"] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], minLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "minLength", required: false }] }], maxLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxLength", required: false }] }], ngControl: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngControl", required: false }] }, { type: i0.Output, args: ["ngControlChange"] }], tooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltip", required: false }] }], isIndicatorsOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "isIndicatorsOpen", required: false }] }, { type: i0.Output, args: ["isIndicatorsOpenChange"] }], tooltipPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltipPosition", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }, { type: i0.Output, args: ["requiredChange"] }], state: [{ type: i0.Input, args: [{ isSignal: true, alias: "state", required: false }] }, { type: i0.Output, args: ["stateChange"] }], errors: [{ type: i0.Input, args: [{ isSignal: true, alias: "errors", required: false }] }], input: [{ type: i0.Output, args: ["input"] }], change: [{ type: i0.Output, args: ["change"] }], debouncedInput: [{ type: i0.Output, args: ["debouncedInput"] }], focus: [{ type: i0.Output, args: ["focus"] }], enter: [{ type: i0.Output, args: ["enter"] }], blur: [{ type: i0.Output, args: ["blur"] }] } });
 class ChrInputIndicators {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: ChrInputIndicators, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.8", type: ChrInputIndicators, isStandalone: true, selector: "chr-input-indicators", ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: [":host{display:flex;align-items:center}\n"] }); }
@@ -4897,7 +4901,7 @@ class ChrFileInputComponent extends ChrInputComponent {
         return crypto.randomUUID();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: ChrFileInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: ChrFileInputComponent, isStandalone: true, selector: "chr-file-input", inputs: { accept: { classPropertyName: "accept", publicName: "accept", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, base64: { classPropertyName: "base64", publicName: "base64", isSignal: true, isRequired: false, transformFunction: null }, allowChangingFileName: { classPropertyName: "allowChangingFileName", publicName: "allowChangingFileName", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "dataTemplateRef", first: true, predicate: ["data"], descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "dataTemplateControls", predicate: NgControl, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "fileNativeInput", first: true, predicate: ["fileNativeInput"], descendants: true, read: ElementRef, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"file-input-wrapper\">\n    <!-- Zone de Drop & S\u00E9lection (remplace visuellement l'input texte standard) -->\n    <div class=\"drop-zone\" [hidden]=\"files().length>0\" [class.dragging]=\"isDragging()\" [class.disabled]=\"isDisabled()\"\n        (click)=\"triggerFileSelect()\" (dragover)=\"onDragOver($event)\" (dragleave)=\"onDragLeave($event)\"\n        (drop)=\"onDrop($event)\">\n\n        <input #fileNativeInput #input type=\"file\" class=\"native-file-input\" [accept]=\"accept()\" [multiple]=\"multiple()\"\n            (change)=\"onFileSelected($event)\" />\n\n        <div class=\"drop-zone-content\">\n            <span class=\"material-symbols upload-icon\">cloud_upload</span>\n            <div class=\"drop-zone-text\">\n                <span class=\"primary-text\">\n                    @if (label()) { {{ label() }} } @else { Cliquez ou glissez un fichier ici }\n                </span>\n                <span class=\"secondary-text\">\n                    {{ multiple() ? 'S\u00E9lectionnez un ou plusieurs fichiers' : 'S\u00E9lectionnez un fichier' }}\n                </span>\n            </div>\n        </div>\n    </div>\n\n\n    <!-- Liste des fichiers s\u00E9lectionn\u00E9s sous forme de cartes/puces -->\n    @if (files().length > 0) {\n    <div class=\"file-list\">\n        @for (entry of files(); track entry.id) {\n        <div class=\"file-item\" [class.error]=\"entry.error || getFileValidationError($index)\">\n            <span class=\"material-symbols file-icon\">{{ entry.error || getFileValidationError($index) ? 'error' :\n                'description' }}</span>\n            <div class=\"file-info\">\n                <div class=\"file-data\" [class.full-width]=\"dataTemplateRef() == undefined\">\n                    <div class=\"file-name\">\n                        @if(allowChangingFileName()){\n                        <chr-input [value]=\"entry.file.name\"\n                            (valueChange)=\"entry.file.name=$event?.trim()??entry.file.file!.name.split('.')[0];onChange(this.value())\"\n                            type=\"text\"></chr-input>\n                        }@else {\n                        <span class=\"file-name\">{{\n                            entry.file.name }}\n                        </span>\n                        }\n                        <span>.{{entry.file.extension}}</span>\n                    </div>\n                    <div class=\"file-name\">\n                        <span class=\"file-size\">{{ formatFileSize(entry.file.file?.size ?? 0) }}</span>\n                        <span class=\"file-content\">|</span>\n                        <span class=\"file-content\">{{ entry.file.contentType }}</span>\n                    </div>\n                </div>\n                @if(dataTemplateRef()){\n                <div class=\"file-data\">\n                    <ng-container *ngTemplateOutlet=\"dataTemplateRef(); context: { $implicit: entry.file}\">\n                    </ng-container>\n                </div>\n                }\n                <div class=\"file-data full-width\">\n                    @if (entry.error) {\n                    <span class=\"file-error\" role=\"alert\">{{ entry.error }}</span>\n                    } @else if (getFileValidationError($index); as validationError) {\n                    <span class=\"file-error\" role=\"alert\">{{ validationError }}</span>\n                    }\n                </div>\n            </div>\n            <button type=\"button\" class=\"file-remove-btn\" (click)=\"removeFile($index, $event)\"\n                [attr.aria-label]=\"'Supprimer ' + entry.file.file?.name\">\n                <span class=\"material-symbols\">close</span>\n            </button>\n            <div class=\"file-progress\" [class.error]=\"entry.error || getFileValidationError($index)\" role=\"progressbar\"\n                [attr.aria-label]=\"entry.error || getFileValidationError($index) || 'Progression de la conversion'\"\n                [attr.aria-valuenow]=\"entry.progress\" aria-valuemin=\"0\" aria-valuemax=\"100\">\n                <div class=\"file-progress-value\" [style.width.%]=\"entry.progress\"></div>\n            </div>\n        </div>\n        }\n        @if(multiple()){\n        <button class=\"file-item fixed-size file-add-btn\" (click)=\"triggerFileSelect()\">\n            <span class=\"material-symbols\">add</span>\n        </button>\n        }\n    </div>\n    }\n</div>", styles: [":host{display:flex;flex-direction:column;flex:1 1 auto;justify-self:stretch;align-self:center;min-width:0}.file-input-wrapper{display:flex;flex-direction:column;gap:.75rem;width:100%}.native-file-input{display:none}.drop-zone{border:2px dashed var(--neutral-color);border-radius:.5rem;padding:1.25rem 1rem;background-color:var(--background-color);cursor:pointer;transition:all .2s ease-in-out}.drop-zone:hover:not(.disabled){border-color:var(--primary-color);background-color:var(--background-neutral-color)}.drop-zone.dragging{border-color:var(--tertiary-color);background-color:var(--background-neutral-color)}.drop-zone.disabled{opacity:.6;cursor:not-allowed}.drop-zone-content{display:flex;align-items:center;justify-content:center;gap:.75rem}.upload-icon{font-size:2rem;color:color-mix(in srgb,var(--primary-color) 80%,transparent 20%)}.drop-zone-text{display:flex;flex-direction:column}.primary-text{font-size:.875rem;font-weight:500;color:var(--text-color)}.secondary-text{font-size:.75rem;color:var(--text-neutral-color)}.file-list{display:flex;flex-direction:row;flex-wrap:wrap;gap:.375rem}.file-item{position:relative;display:flex;flex:1 1 auto;align-items:center;gap:.5rem;padding:.5rem .75rem;background-color:var(--background-color);border:1px solid var(--neutral-color);border-radius:.375rem;overflow:hidden}.file-item.fixed-size{flex:0 1 auto}.file-item.error{border-color:var(--error-color)}.file-icon{font-size:1.25rem;color:var(--text-neutral-color)}.file-info{display:grid;flex:1 1 auto;grid-template-columns:1fr 1fr}.file-data{grid-column:span 1;border-left:1px solid var(--neutral-color);padding-left:.5rem}.file-data.full-width{grid-column:span 2}.file-data:not(:last-of-type){padding-right:.5rem}.file-name{display:flex;flex-direction:row;align-items:center;flex-wrap:wrap;font-size:.8125rem;font-weight:500;white-space:nowrap}.file-size,.file-content{font-size:.6875rem;color:var(--text-neutral-color)}.file-content{margin-left:.25rem}.file-error{color:var(--error-color);font-size:.6875rem}.file-remove-btn{background:transparent;border:none;color:var(--text-neutral-color);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;padding:.25rem;border-radius:.25rem;transition:color .15s,background-color .15s}.file-remove-btn:hover{color:var(--error-color);background-color:color-mix(in srgb,var(--error-color) 10%,transparent 90%)}.file-remove-btn .material-symbols{font-size:1rem}.file-add-btn{color:var(--text-neutral-color);cursor:pointer}.file-add-btn:hover{color:var(--primary-color);background-color:color-mix(in srgb,var(--primary-color) 10%,transparent 90%)}.file-progress{position:absolute;right:0;bottom:0;left:0;height:.2rem;background-color:color-mix(in srgb,var(--neutral-color) 55%,transparent 45%)}.file-progress-value{height:100%;background-color:var(--primary-color);transition:width .15s ease-out}.file-progress.error{background-color:color-mix(in srgb,var(--error-color) 20%,transparent 80%)}.file-progress.error .file-progress-value{background-color:var(--error-color)}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ChrInputComponent, selector: "chr-input", inputs: ["label", "id", "name", "value", "displayValue", "type", "outputType", "step", "debounceTime", "isDisabled", "isFocused", "min", "max", "minLength", "maxLength", "ngControl", "tooltip", "isIndicatorsOpen", "tooltipPosition", "state", "errors"], outputs: ["idChange", "nameChange", "valueChange", "displayValueChange", "outputTypeChange", "isDisabledChange", "isFocusedChange", "ngControlChange", "isIndicatorsOpenChange", "stateChange", "input", "change", "debouncedInput", "focus", "enter", "blur"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: ChrFileInputComponent, isStandalone: true, selector: "chr-file-input", inputs: { accept: { classPropertyName: "accept", publicName: "accept", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, base64: { classPropertyName: "base64", publicName: "base64", isSignal: true, isRequired: false, transformFunction: null }, allowChangingFileName: { classPropertyName: "allowChangingFileName", publicName: "allowChangingFileName", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "dataTemplateRef", first: true, predicate: ["data"], descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "dataTemplateControls", predicate: NgControl, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "fileNativeInput", first: true, predicate: ["fileNativeInput"], descendants: true, read: ElementRef, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"file-input-wrapper\">\n    <!-- Zone de Drop & S\u00E9lection (remplace visuellement l'input texte standard) -->\n    <div class=\"drop-zone\" [hidden]=\"files().length>0\" [class.dragging]=\"isDragging()\" [class.disabled]=\"isDisabled()\"\n        (click)=\"triggerFileSelect()\" (dragover)=\"onDragOver($event)\" (dragleave)=\"onDragLeave($event)\"\n        (drop)=\"onDrop($event)\">\n\n        <input #fileNativeInput #input type=\"file\" class=\"native-file-input\" [accept]=\"accept()\" [multiple]=\"multiple()\"\n            (change)=\"onFileSelected($event)\" />\n\n        <div class=\"drop-zone-content\">\n            <span class=\"material-symbols upload-icon\">cloud_upload</span>\n            <div class=\"drop-zone-text\">\n                <span class=\"primary-text\">\n                    @if (label()) { {{ label() }} } @else { Cliquez ou glissez un fichier ici }\n                </span>\n                <span class=\"secondary-text\">\n                    {{ multiple() ? 'S\u00E9lectionnez un ou plusieurs fichiers' : 'S\u00E9lectionnez un fichier' }}\n                </span>\n            </div>\n        </div>\n    </div>\n\n\n    <!-- Liste des fichiers s\u00E9lectionn\u00E9s sous forme de cartes/puces -->\n    @if (files().length > 0) {\n    <div class=\"file-list\">\n        @for (entry of files(); track entry.id) {\n        <div class=\"file-item\" [class.error]=\"entry.error || getFileValidationError($index)\">\n            <span class=\"material-symbols file-icon\">{{ entry.error || getFileValidationError($index) ? 'error' :\n                'description' }}</span>\n            <div class=\"file-info\">\n                <div class=\"file-data\" [class.full-width]=\"dataTemplateRef() == undefined\">\n                    <div class=\"file-name\">\n                        @if(allowChangingFileName()){\n                        <chr-input [value]=\"entry.file.name\"\n                            (valueChange)=\"entry.file.name=$event?.trim()??entry.file.file!.name.split('.')[0];onChange(this.value())\"\n                            type=\"text\"></chr-input>\n                        }@else {\n                        <span class=\"file-name\">{{\n                            entry.file.name }}\n                        </span>\n                        }\n                        <span>.{{entry.file.extension}}</span>\n                    </div>\n                    <div class=\"file-name\">\n                        <span class=\"file-size\">{{ formatFileSize(entry.file.file?.size ?? 0) }}</span>\n                        <span class=\"file-content\">|</span>\n                        <span class=\"file-content\">{{ entry.file.contentType }}</span>\n                    </div>\n                </div>\n                @if(dataTemplateRef()){\n                <div class=\"file-data\">\n                    <ng-container *ngTemplateOutlet=\"dataTemplateRef(); context: { $implicit: entry.file}\">\n                    </ng-container>\n                </div>\n                }\n                <div class=\"file-data full-width\">\n                    @if (entry.error) {\n                    <span class=\"file-error\" role=\"alert\">{{ entry.error }}</span>\n                    } @else if (getFileValidationError($index); as validationError) {\n                    <span class=\"file-error\" role=\"alert\">{{ validationError }}</span>\n                    }\n                </div>\n            </div>\n            <button type=\"button\" class=\"file-remove-btn\" (click)=\"removeFile($index, $event)\"\n                [attr.aria-label]=\"'Supprimer ' + entry.file.file?.name\">\n                <span class=\"material-symbols\">close</span>\n            </button>\n            <div class=\"file-progress\" [class.error]=\"entry.error || getFileValidationError($index)\" role=\"progressbar\"\n                [attr.aria-label]=\"entry.error || getFileValidationError($index) || 'Progression de la conversion'\"\n                [attr.aria-valuenow]=\"entry.progress\" aria-valuemin=\"0\" aria-valuemax=\"100\">\n                <div class=\"file-progress-value\" [style.width.%]=\"entry.progress\"></div>\n            </div>\n        </div>\n        }\n        @if(multiple()){\n        <button class=\"file-item fixed-size file-add-btn\" (click)=\"triggerFileSelect()\">\n            <span class=\"material-symbols\">add</span>\n        </button>\n        }\n    </div>\n    }\n</div>", styles: [":host{display:flex;flex-direction:column;flex:1 1 auto;justify-self:stretch;align-self:center;min-width:0}.file-input-wrapper{display:flex;flex-direction:column;gap:.75rem;width:100%}.native-file-input{display:none}.drop-zone{border:2px dashed var(--neutral-color);border-radius:.5rem;padding:1.25rem 1rem;background-color:var(--background-color);cursor:pointer;transition:all .2s ease-in-out}.drop-zone:hover:not(.disabled){border-color:var(--primary-color);background-color:var(--background-neutral-color)}.drop-zone.dragging{border-color:var(--tertiary-color);background-color:var(--background-neutral-color)}.drop-zone.disabled{opacity:.6;cursor:not-allowed}.drop-zone-content{display:flex;align-items:center;justify-content:center;gap:.75rem}.upload-icon{font-size:2rem;color:color-mix(in srgb,var(--primary-color) 80%,transparent 20%)}.drop-zone-text{display:flex;flex-direction:column}.primary-text{font-size:.875rem;font-weight:500;color:var(--text-color)}.secondary-text{font-size:.75rem;color:var(--text-neutral-color)}.file-list{display:flex;flex-direction:row;flex-wrap:wrap;gap:.375rem}.file-item{position:relative;display:flex;flex:1 1 auto;align-items:center;gap:.5rem;padding:.5rem .75rem;background-color:var(--background-color);border:1px solid var(--neutral-color);border-radius:.375rem;overflow:hidden}.file-item.fixed-size{flex:0 1 auto}.file-item.error{border-color:var(--error-color)}.file-icon{font-size:1.25rem;color:var(--text-neutral-color)}.file-info{display:grid;flex:1 1 auto;grid-template-columns:1fr 1fr}.file-data{grid-column:span 1;border-left:1px solid var(--neutral-color);padding-left:.5rem}.file-data.full-width{grid-column:span 2}.file-data:not(:last-of-type){padding-right:.5rem}.file-name{display:flex;flex-direction:row;align-items:center;flex-wrap:wrap;font-size:.8125rem;font-weight:500;white-space:nowrap}.file-size,.file-content{font-size:.6875rem;color:var(--text-neutral-color)}.file-content{margin-left:.25rem}.file-error{color:var(--error-color);font-size:.6875rem}.file-remove-btn{background:transparent;border:none;color:var(--text-neutral-color);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;padding:.25rem;border-radius:.25rem;transition:color .15s,background-color .15s}.file-remove-btn:hover{color:var(--error-color);background-color:color-mix(in srgb,var(--error-color) 10%,transparent 90%)}.file-remove-btn .material-symbols{font-size:1rem}.file-add-btn{color:var(--text-neutral-color);cursor:pointer}.file-add-btn:hover{color:var(--primary-color);background-color:color-mix(in srgb,var(--primary-color) 10%,transparent 90%)}.file-progress{position:absolute;right:0;bottom:0;left:0;height:.2rem;background-color:color-mix(in srgb,var(--neutral-color) 55%,transparent 45%)}.file-progress-value{height:100%;background-color:var(--primary-color);transition:width .15s ease-out}.file-progress.error{background-color:color-mix(in srgb,var(--error-color) 20%,transparent 80%)}.file-progress.error .file-progress-value{background-color:var(--error-color)}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ChrInputComponent, selector: "chr-input", inputs: ["label", "id", "name", "value", "displayValue", "type", "outputType", "step", "debounceTime", "isDisabled", "isFocused", "min", "max", "minLength", "maxLength", "ngControl", "tooltip", "isIndicatorsOpen", "tooltipPosition", "required", "state", "errors"], outputs: ["idChange", "nameChange", "valueChange", "displayValueChange", "outputTypeChange", "isDisabledChange", "isFocusedChange", "ngControlChange", "isIndicatorsOpenChange", "requiredChange", "stateChange", "input", "change", "debouncedInput", "focus", "enter", "blur"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: ChrFileInputComponent, decorators: [{
             type: Component,
@@ -4924,7 +4928,7 @@ class ChrPasswordInputComponent extends ChrInputComponent {
         };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: ChrPasswordInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: ChrPasswordInputComponent, isStandalone: true, selector: "chr-password-input", usesInheritance: true, ngImport: i0, template: "<div class=\"search-select-input-wrapper\">\n    <chr-input [id]=\"id()\" [name]=\"name()\" [type]=\"currentType()\" [label]=\"label()\" [(displayValue)]=\"displayValue\"\n        (valueChange)=\"this.value.set($event)\" [ngControl]=\"ngControl()\">\n        <chr-input-indicators>\n            <ng-content select=\"chr-input-indicators\"></ng-content>\n            <span class=\"material-symbols visibility-indicator error\" (mousedown)=\"setTypeText()\"\n                (mouseup)=\"setTypePassword()\" (mouseleave)=\"setTypePassword()\">visibility</span>\n        </chr-input-indicators>\n        <chr-input-data-overlay>\n            @if(isTouched()){\n            @let error = getLastError();\n            @if(error != null){\n            <div class=\"error card glass\">\n                {{getLastError() ?? null}}\n            </div>\n            }\n            }\n            <ng-content select=\"chr-input-data-overlay\">\n            </ng-content>\n        </chr-input-data-overlay>\n        <chr-input-data>\n            <ng-content select=\"chr-input-data\">\n                <!-- Fallback to default projection-->\n                <ng-content></ng-content>\n            </ng-content>\n        </chr-input-data>\n    </chr-input>\n</div>", styles: [":host{display:flex;flex-direction:column;flex:1 1 auto;min-width:0}.visibility-indicator{cursor:pointer}\n"], dependencies: [{ kind: "component", type: ChrInputComponent, selector: "chr-input", inputs: ["label", "id", "name", "value", "displayValue", "type", "outputType", "step", "debounceTime", "isDisabled", "isFocused", "min", "max", "minLength", "maxLength", "ngControl", "tooltip", "isIndicatorsOpen", "tooltipPosition", "state", "errors"], outputs: ["idChange", "nameChange", "valueChange", "displayValueChange", "outputTypeChange", "isDisabledChange", "isFocusedChange", "ngControlChange", "isIndicatorsOpenChange", "stateChange", "input", "change", "debouncedInput", "focus", "enter", "blur"] }, { kind: "component", type: ChrInputIndicators, selector: "chr-input-indicators" }, { kind: "component", type: ChrInputDataOverlay, selector: "chr-input-data-overlay" }, { kind: "component", type: ChrInputData, selector: "chr-input-data" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: ChrPasswordInputComponent, isStandalone: true, selector: "chr-password-input", usesInheritance: true, ngImport: i0, template: "<div class=\"search-select-input-wrapper\">\n    <chr-input [id]=\"id()\" [name]=\"name()\" [type]=\"currentType()\" [label]=\"label()\" [(displayValue)]=\"displayValue\"\n        (valueChange)=\"this.value.set($event)\" [ngControl]=\"ngControl()\">\n        <chr-input-indicators>\n            <ng-content select=\"chr-input-indicators\"></ng-content>\n            <span class=\"material-symbols visibility-indicator error\" (mousedown)=\"setTypeText()\"\n                (mouseup)=\"setTypePassword()\" (mouseleave)=\"setTypePassword()\">visibility</span>\n        </chr-input-indicators>\n        <chr-input-data-overlay>\n            @if(isTouched()){\n            @let error = getLastError();\n            @if(error != null){\n            <div class=\"error card glass\">\n                {{getLastError() ?? null}}\n            </div>\n            }\n            }\n            <ng-content select=\"chr-input-data-overlay\">\n            </ng-content>\n        </chr-input-data-overlay>\n        <chr-input-data>\n            <ng-content select=\"chr-input-data\">\n                <!-- Fallback to default projection-->\n                <ng-content></ng-content>\n            </ng-content>\n        </chr-input-data>\n    </chr-input>\n</div>", styles: [":host{display:flex;flex-direction:column;flex:1 1 auto;min-width:0}.visibility-indicator{cursor:pointer}\n"], dependencies: [{ kind: "component", type: ChrInputComponent, selector: "chr-input", inputs: ["label", "id", "name", "value", "displayValue", "type", "outputType", "step", "debounceTime", "isDisabled", "isFocused", "min", "max", "minLength", "maxLength", "ngControl", "tooltip", "isIndicatorsOpen", "tooltipPosition", "required", "state", "errors"], outputs: ["idChange", "nameChange", "valueChange", "displayValueChange", "outputTypeChange", "isDisabledChange", "isFocusedChange", "ngControlChange", "isIndicatorsOpenChange", "requiredChange", "stateChange", "input", "change", "debouncedInput", "focus", "enter", "blur"] }, { kind: "component", type: ChrInputIndicators, selector: "chr-input-indicators" }, { kind: "component", type: ChrInputDataOverlay, selector: "chr-input-data-overlay" }, { kind: "component", type: ChrInputData, selector: "chr-input-data" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: ChrPasswordInputComponent, decorators: [{
             type: Component,
@@ -4943,13 +4947,6 @@ class ChrSearchSelectInputComponent extends ChrInputComponent {
         ...(ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []));
         this.display = input((v) => v || '', /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "display" }] : /* istanbul ignore next */ []));
-        this.formatValue = (value) => {
-            const displayFn = this.display();
-            const formated = displayFn(value);
-            if (formated == undefined || formated == null)
-                return '';
-            return formated;
-        };
         /**
          * Force the value to be null when the user types.
          * Only a click on the datalist or a full text match should select a value
@@ -4972,8 +4969,15 @@ class ChrSearchSelectInputComponent extends ChrInputComponent {
     ngOnInit() {
         super.ngOnInit();
     }
+    formatValue(value) {
+        const displayFn = this.display();
+        const formated = displayFn(value);
+        if (formated == undefined || formated == null)
+            return '';
+        return formated;
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: ChrSearchSelectInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: ChrSearchSelectInputComponent, isStandalone: true, selector: "chr-search-select-input", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, display: { classPropertyName: "display", publicName: "display", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: "<div class=\"input-wrapper\" [attr.data-state]=\"state()\">\r\n    <chr-input [id]=\"id()\" [name]=\"name()\" type=\"text\" [label]=\"label()\" [displayValue]=\"displayValue() ?? ''\"\r\n        [state]=\"state()\" [errors]=\"ngControl()?.errors\" [value]=\"displayValue()\" (input)=\"dl.open();onInput($event);\">\r\n        <chr-input-indicators>\r\n            <ng-content select=\"chr-input-indicators\"></ng-content>\r\n            <!-- @if(isFocused()){ -->\r\n            @if(value() == null){\r\n            <span class=\"material-symbols selection-status-indicator\" [class.indicator-warning]=\"!required()\"\r\n                [class.indicator-error]=\"required()\">close</span>\r\n            }@else {\r\n            <span class=\"material-symbols selection-status-indicator indicator-success\">check</span>\r\n            }\r\n            <span class=\"selection-status-indicator indicator-spacer\"></span>\r\n            <!-- } -->\r\n        </chr-input-indicators>\r\n        <chr-input-data-overlay>\r\n            <chr-data-list #dl [for]=\"''+name()\" [suggestions]=\"data()\" [display]=\"display()\" [selectOnFullMatch]=\"true\"\r\n                (optionSelected)=\"selectOption($event.value)\"></chr-data-list>\r\n        </chr-input-data-overlay>\r\n    </chr-input>\r\n</div>\r\n\r\n<div class=\"data-overlay\">\r\n    @if(isTouched()){\r\n    @let error = getLastError();\r\n    @if(error != null){\r\n    <div class=\"error card glass\">\r\n        {{getLastError() ?? null}}\r\n    </div>\r\n    }\r\n    }\r\n    <ng-content select=\"chr-input-data-overlay\">\r\n    </ng-content>\r\n</div>\r\n<div class=\"data\">\r\n    <ng-content select=\"chr-input-data\">\r\n        <!-- Fallback to default projection-->\r\n        <ng-content></ng-content>\r\n    </ng-content>\r\n</div>", styles: [".input-wrapper{--chr-input-current-color: var(--text-neutral-color);position:relative;box-sizing:border-box;min-height:1.5rem;max-height:1.5rem;height:1.5rem;display:flex;flex:1 1 auto;min-width:0;flex-direction:column;border-bottom:.125rem solid var(--chr-input-current-color)}.input-wrapper .input-row{display:flex;flex:1 1 auto;flex-wrap:nowrap;height:inherit}.input-wrapper .input{min-width:0;height:inherit;color:var(--text-color)}.input-wrapper .indicators{display:flex;flex-direction:row;flex:1 1 auto;flex-wrap:nowrap;gap:.25rem;max-width:fit-content;height:inherit;align-items:center;color:var(--chr-input-current-color);font-size:.75rem!important}.input-wrapper .input~.indicators{position:absolute;top:0;right:0;visibility:hidden;opacity:0;transform:translate(1rem);transition:opacity .15s ease-in-out,transform .15s ease-in-out,width .15s ease-in-out .15s}.input-wrapper:focus-within .input~.indicators,.input-wrapper:hover .input~.indicators,.input-wrapper .input~.indicators[data-indicators-open=true]{position:relative;visibility:visible;padding-left:.125rem;opacity:1;transform:translate(0)}:is(.input-wrapper:focus-within .input~.indicators,.input-wrapper:hover .input~.indicators,.input-wrapper .input~.indicators[data-indicators-open=true]):has(chr-input-indicators:not(:empty)),:is(.input-wrapper:focus-within .input~.indicators,.input-wrapper:hover .input~.indicators,.input-wrapper .input~.indicators[data-indicators-open=true]):has(:nth-child(2)){border-left:.125rem solid color-mix(in srgb,var(--chr-input-current-color) 40%,transparent 60%)}.input-wrapper:focus-within .input,.input-wrapper:hover .input,.input-wrapper:has(.indicators[data-indicators-open=true]) .input{padding-right:.125rem}.input-wrapper .input:has(~.indicators:empty){padding-right:0}.input-wrapper .input~.indicators:empty{width:0;border-left:none;padding-left:0}.input-wrapper .tooltip-indicator{cursor:pointer;font-size:1.25rem;padding:0;color:var(--chr-input-current-color)}.input-wrapper .tooltip-indicator:hover{color:var(--primary-color)}.input-wrapper .required{color:var(--error-color)}.input-wrapper:has(.input:focus){--chr-input-current-color: var(--primary-color)}.input-wrapper[data-state=IDLE]{--chr-input-current-color: color-mix(in srgb, var(--text-neutral-color) 90%, transparent 10%) }.input-wrapper[data-state=INVALID],.input-wrapper[data-state=DISABLED]{--chr-input-current-color: var(--error-color)}.input-wrapper[data-state=PENDING],.input-wrapper[data-state=WARNING]{--chr-input-current-color: var(--warn-color)}.input-wrapper label{position:absolute;pointer-events:none;top:50%;color:var(--chr-input-current-color);transform:translateY(-50%);transition:transfom 125ms ease-in-out,position 125ms ease-in-out,top 125ms ease-in-out,font-size 125ms ease-in-out,left 125ms ease-in-out;font-size:.85rem;font-weight:700}.input-wrapper label:not(:empty):after{position:absolute;content:\":\"}.input-wrapper label:has(~.input:focus),.input-wrapper label:has(~.input:not(:placeholder-shown)){top:-.25rem;left:0;font-size:75%}.input-wrapper .input{width:100%;outline:none;border:none;padding:0;background-color:transparent}.data-overlay{height:0;grid-area:data / data;display:flex;flex-direction:column;flex-wrap:nowrap}.data{grid-area:data / data;display:flex;flex-direction:column;flex-wrap:nowrap}.error{grid-area:data / data;display:flex;flex:1 1 auto;flex-direction:row;flex-wrap:wrap;min-width:100%;max-width:min-content;color:var(--error-color);padding:.25rem;border-top-left-radius:0;border-top-right-radius:0;background-color:var(--background-color);z-index:2}.error:empty{display:none}.input[disabled]{--chr-input-disabled-neutral-muted-color: color-mix(in srgb, var(--text-neutral-color) 15%, transparent 85%);background:repeating-linear-gradient(45deg,var(--chr-input-disabled-neutral-muted-color),var(--chr-input-disabled-neutral-muted-color) .625rem,var(--background-color) .625rem,var(--background-color) 1.25rem);cursor:not-allowed}.input{accent-color:var(--primary-color)}.input ::-webkit-datetime-edit,.input ::-webkit-datetime-edit-fields-wrapper,.input ::-webkit-datetime-edit-text,.input ::-webkit-datetime-edit-month-field,.input ::-webkit-datetime-edit-day-field,.input ::-webkit-datetime-edit-year-field,.input ::-webkit-inner-spin-button,.input ::-webkit-calendar-picker-indicator{place-self:end;justify-self:end;background-color:red}.input[type=range]{color:red}.input[type=range]:after{content:attr(value)}.input[type=textarea]::-webkit-scrollbar{display:none!important}.no-scrollbar{-ms-overflow-style:none!important;scrollbar-width:none!important}:host{display:flex;flex-direction:column;flex:1 1 auto;min-width:0}.input-wrapper{position:relative;min-height:1.5rem;max-height:1.5rem;display:flex;flex:1 1 auto;min-width:0;flex-direction:column}.selection-status-indicator.indicator-success{color:var(--success-color)}.selection-status-indicator.indicator-warning{color:var(--warn-color)}.selection-status-indicator.indicator-error{color:var(--error-color)}.selection-status-indicator.indicator-spacer{width:1rem}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: ChrInputComponent, selector: "chr-input", inputs: ["label", "id", "name", "value", "displayValue", "type", "outputType", "step", "debounceTime", "isDisabled", "isFocused", "min", "max", "minLength", "maxLength", "ngControl", "tooltip", "isIndicatorsOpen", "tooltipPosition", "state", "errors"], outputs: ["idChange", "nameChange", "valueChange", "displayValueChange", "outputTypeChange", "isDisabledChange", "isFocusedChange", "ngControlChange", "isIndicatorsOpenChange", "stateChange", "input", "change", "debouncedInput", "focus", "enter", "blur"] }, { kind: "component", type: ChrInputIndicators, selector: "chr-input-indicators" }, { kind: "component", type: DataListComponent, selector: "chr-data-list", inputs: ["suggestions", "for", "allowStringify", "display", "targetElement", "blurOnSelect", "selectOnFullMatch"], outputs: ["optionSelected"] }, { kind: "component", type: ChrInputDataOverlay, selector: "chr-input-data-overlay" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: ChrSearchSelectInputComponent, isStandalone: true, selector: "chr-search-select-input", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, display: { classPropertyName: "display", publicName: "display", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: "<div class=\"input-wrapper\" [attr.data-state]=\"state()\">\r\n    <chr-input [id]=\"id()\" [name]=\"name()\" type=\"text\" [label]=\"label()\" [displayValue]=\"displayValue() ?? ''\"\r\n        [required]=\"required()\" (focus)=\"focus.emit()\" (blur)=\"blur.emit()\" [state]=\"state()\"\r\n        [errors]=\"ngControl()?.errors\" [value]=\"displayValue()\" (input)=\"dl.open();onInput($event);\">\r\n        <chr-input-indicators>\r\n            <ng-content select=\"chr-input-indicators\"></ng-content>\r\n            <!-- @if(isFocused()){ -->\r\n            @if(value() == null){\r\n            <span class=\"material-symbols selection-status-indicator\" [class.indicator-warning]=\"!required()\"\r\n                [class.indicator-error]=\"required()\">close</span>\r\n            }@else {\r\n            <span class=\"material-symbols selection-status-indicator indicator-success\">check</span>\r\n            }\r\n            <span class=\"selection-status-indicator indicator-spacer\"></span>\r\n            <!-- } -->\r\n        </chr-input-indicators>\r\n        <chr-input-data-overlay>\r\n            <chr-data-list #dl [for]=\"''+name()\" [suggestions]=\"data()\" [display]=\"display()\" [selectOnFullMatch]=\"true\"\r\n                (optionSelected)=\"selectOption($event.value)\"></chr-data-list>\r\n        </chr-input-data-overlay>\r\n    </chr-input>\r\n</div>\r\n\r\n<div class=\"data-overlay\">\r\n    @if(isTouched()){\r\n    @let error = getLastError();\r\n    @if(error != null){\r\n    <div class=\"error card glass\">\r\n        {{getLastError() ?? null}}\r\n    </div>\r\n    }\r\n    }\r\n    <ng-content select=\"chr-input-data-overlay\">\r\n    </ng-content>\r\n</div>\r\n<div class=\"data\">\r\n    <ng-content select=\"chr-input-data\">\r\n        <!-- Fallback to default projection-->\r\n        <ng-content></ng-content>\r\n    </ng-content>\r\n</div>", styles: [".input-wrapper{--chr-input-current-color: var(--text-neutral-color);position:relative;box-sizing:border-box;min-height:1.5rem;max-height:1.5rem;height:1.5rem;display:flex;flex:1 1 auto;min-width:0;flex-direction:column;border-bottom:.125rem solid var(--chr-input-current-color)}.input-wrapper .input-row{display:flex;flex:1 1 auto;flex-wrap:nowrap;height:inherit}.input-wrapper .input{min-width:0;height:inherit;color:var(--text-color)}.input-wrapper .indicators{display:flex;flex-direction:row;flex:1 1 auto;flex-wrap:nowrap;gap:.25rem;max-width:fit-content;height:inherit;align-items:center;color:var(--chr-input-current-color);font-size:.75rem!important}.input-wrapper .input~.indicators{position:absolute;top:0;right:0;visibility:hidden;opacity:0;transform:translate(1rem);transition:opacity .15s ease-in-out,transform .15s ease-in-out,width .15s ease-in-out .15s}.input-wrapper:focus-within .input~.indicators,.input-wrapper:hover .input~.indicators,.input-wrapper .input~.indicators[data-indicators-open=true]{position:relative;visibility:visible;padding-left:.125rem;opacity:1;transform:translate(0)}:is(.input-wrapper:focus-within .input~.indicators,.input-wrapper:hover .input~.indicators,.input-wrapper .input~.indicators[data-indicators-open=true]):has(chr-input-indicators:not(:empty)),:is(.input-wrapper:focus-within .input~.indicators,.input-wrapper:hover .input~.indicators,.input-wrapper .input~.indicators[data-indicators-open=true]):has(:nth-child(2)){border-left:.125rem solid color-mix(in srgb,var(--chr-input-current-color) 40%,transparent 60%)}.input-wrapper:focus-within .input,.input-wrapper:hover .input,.input-wrapper:has(.indicators[data-indicators-open=true]) .input{padding-right:.125rem}.input-wrapper .input:has(~.indicators:empty){padding-right:0}.input-wrapper .input~.indicators:empty{width:0;border-left:none;padding-left:0}.input-wrapper .tooltip-indicator{cursor:pointer;font-size:1.25rem;padding:0;color:var(--chr-input-current-color)}.input-wrapper .tooltip-indicator:hover{color:var(--primary-color)}.input-wrapper .required{color:var(--error-color)}.input-wrapper:has(.input:focus){--chr-input-current-color: var(--primary-color)}.input-wrapper[data-state=IDLE]{--chr-input-current-color: color-mix(in srgb, var(--text-neutral-color) 90%, transparent 10%) }.input-wrapper[data-state=INVALID],.input-wrapper[data-state=DISABLED]{--chr-input-current-color: var(--error-color)}.input-wrapper[data-state=PENDING],.input-wrapper[data-state=WARNING]{--chr-input-current-color: var(--warn-color)}.input-wrapper label{position:absolute;pointer-events:none;top:50%;color:var(--chr-input-current-color);transform:translateY(-50%);transition:transfom 125ms ease-in-out,position 125ms ease-in-out,top 125ms ease-in-out,font-size 125ms ease-in-out,left 125ms ease-in-out;font-size:.85rem;font-weight:700}.input-wrapper label:not(:empty):after{position:absolute;content:\":\"}.input-wrapper label:has(~.input:focus),.input-wrapper label:has(~.input:not(:placeholder-shown)){top:-.25rem;left:0;font-size:75%}.input-wrapper .input{width:100%;outline:none;border:none;padding:0;background-color:transparent}.data-overlay{height:0;grid-area:data / data;display:flex;flex-direction:column;flex-wrap:nowrap}.data{grid-area:data / data;display:flex;flex-direction:column;flex-wrap:nowrap}.error{grid-area:data / data;display:flex;flex:1 1 auto;flex-direction:row;flex-wrap:wrap;min-width:calc(100% - .5rem);max-width:min-content;color:var(--error-color);padding:.25rem;border-top-left-radius:0;border-top-right-radius:0;background-color:var(--background-color);z-index:2}.error:empty{display:none}.input[disabled]{--chr-input-disabled-neutral-muted-color: color-mix(in srgb, var(--text-neutral-color) 15%, transparent 85%);background:repeating-linear-gradient(45deg,var(--chr-input-disabled-neutral-muted-color),var(--chr-input-disabled-neutral-muted-color) .625rem,var(--background-color) .625rem,var(--background-color) 1.25rem);cursor:not-allowed}.input{accent-color:var(--primary-color)}.input ::-webkit-datetime-edit,.input ::-webkit-datetime-edit-fields-wrapper,.input ::-webkit-datetime-edit-text,.input ::-webkit-datetime-edit-month-field,.input ::-webkit-datetime-edit-day-field,.input ::-webkit-datetime-edit-year-field,.input ::-webkit-inner-spin-button,.input ::-webkit-calendar-picker-indicator{place-self:end;justify-self:end;background-color:red}.input[type=range]{color:red}.input[type=range]:after{content:attr(value)}.input[type=textarea]::-webkit-scrollbar{display:none!important}.no-scrollbar{-ms-overflow-style:none!important;scrollbar-width:none!important}:host{display:flex;flex-direction:column;flex:1 1 auto;min-width:0}.input-wrapper{position:relative;min-height:1.5rem;max-height:1.5rem;display:flex;flex:1 1 auto;min-width:0;flex-direction:column}.selection-status-indicator.indicator-success{color:var(--success-color)}.selection-status-indicator.indicator-warning{color:var(--warn-color)}.selection-status-indicator.indicator-error{color:var(--error-color)}.selection-status-indicator.indicator-spacer{width:1rem}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: ChrInputComponent, selector: "chr-input", inputs: ["label", "id", "name", "value", "displayValue", "type", "outputType", "step", "debounceTime", "isDisabled", "isFocused", "min", "max", "minLength", "maxLength", "ngControl", "tooltip", "isIndicatorsOpen", "tooltipPosition", "required", "state", "errors"], outputs: ["idChange", "nameChange", "valueChange", "displayValueChange", "outputTypeChange", "isDisabledChange", "isFocusedChange", "ngControlChange", "isIndicatorsOpenChange", "requiredChange", "stateChange", "input", "change", "debouncedInput", "focus", "enter", "blur"] }, { kind: "component", type: ChrInputIndicators, selector: "chr-input-indicators" }, { kind: "component", type: DataListComponent, selector: "chr-data-list", inputs: ["suggestions", "for", "allowStringify", "display", "targetElement", "blurOnSelect", "selectOnFullMatch"], outputs: ["optionSelected"] }, { kind: "component", type: ChrInputDataOverlay, selector: "chr-input-data-overlay" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: ChrSearchSelectInputComponent, decorators: [{
             type: Component,
@@ -4983,7 +4987,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
                         ChrInputIndicators,
                         DataListComponent,
                         ChrInputDataOverlay,
-                    ], template: "<div class=\"input-wrapper\" [attr.data-state]=\"state()\">\r\n    <chr-input [id]=\"id()\" [name]=\"name()\" type=\"text\" [label]=\"label()\" [displayValue]=\"displayValue() ?? ''\"\r\n        [state]=\"state()\" [errors]=\"ngControl()?.errors\" [value]=\"displayValue()\" (input)=\"dl.open();onInput($event);\">\r\n        <chr-input-indicators>\r\n            <ng-content select=\"chr-input-indicators\"></ng-content>\r\n            <!-- @if(isFocused()){ -->\r\n            @if(value() == null){\r\n            <span class=\"material-symbols selection-status-indicator\" [class.indicator-warning]=\"!required()\"\r\n                [class.indicator-error]=\"required()\">close</span>\r\n            }@else {\r\n            <span class=\"material-symbols selection-status-indicator indicator-success\">check</span>\r\n            }\r\n            <span class=\"selection-status-indicator indicator-spacer\"></span>\r\n            <!-- } -->\r\n        </chr-input-indicators>\r\n        <chr-input-data-overlay>\r\n            <chr-data-list #dl [for]=\"''+name()\" [suggestions]=\"data()\" [display]=\"display()\" [selectOnFullMatch]=\"true\"\r\n                (optionSelected)=\"selectOption($event.value)\"></chr-data-list>\r\n        </chr-input-data-overlay>\r\n    </chr-input>\r\n</div>\r\n\r\n<div class=\"data-overlay\">\r\n    @if(isTouched()){\r\n    @let error = getLastError();\r\n    @if(error != null){\r\n    <div class=\"error card glass\">\r\n        {{getLastError() ?? null}}\r\n    </div>\r\n    }\r\n    }\r\n    <ng-content select=\"chr-input-data-overlay\">\r\n    </ng-content>\r\n</div>\r\n<div class=\"data\">\r\n    <ng-content select=\"chr-input-data\">\r\n        <!-- Fallback to default projection-->\r\n        <ng-content></ng-content>\r\n    </ng-content>\r\n</div>", styles: [".input-wrapper{--chr-input-current-color: var(--text-neutral-color);position:relative;box-sizing:border-box;min-height:1.5rem;max-height:1.5rem;height:1.5rem;display:flex;flex:1 1 auto;min-width:0;flex-direction:column;border-bottom:.125rem solid var(--chr-input-current-color)}.input-wrapper .input-row{display:flex;flex:1 1 auto;flex-wrap:nowrap;height:inherit}.input-wrapper .input{min-width:0;height:inherit;color:var(--text-color)}.input-wrapper .indicators{display:flex;flex-direction:row;flex:1 1 auto;flex-wrap:nowrap;gap:.25rem;max-width:fit-content;height:inherit;align-items:center;color:var(--chr-input-current-color);font-size:.75rem!important}.input-wrapper .input~.indicators{position:absolute;top:0;right:0;visibility:hidden;opacity:0;transform:translate(1rem);transition:opacity .15s ease-in-out,transform .15s ease-in-out,width .15s ease-in-out .15s}.input-wrapper:focus-within .input~.indicators,.input-wrapper:hover .input~.indicators,.input-wrapper .input~.indicators[data-indicators-open=true]{position:relative;visibility:visible;padding-left:.125rem;opacity:1;transform:translate(0)}:is(.input-wrapper:focus-within .input~.indicators,.input-wrapper:hover .input~.indicators,.input-wrapper .input~.indicators[data-indicators-open=true]):has(chr-input-indicators:not(:empty)),:is(.input-wrapper:focus-within .input~.indicators,.input-wrapper:hover .input~.indicators,.input-wrapper .input~.indicators[data-indicators-open=true]):has(:nth-child(2)){border-left:.125rem solid color-mix(in srgb,var(--chr-input-current-color) 40%,transparent 60%)}.input-wrapper:focus-within .input,.input-wrapper:hover .input,.input-wrapper:has(.indicators[data-indicators-open=true]) .input{padding-right:.125rem}.input-wrapper .input:has(~.indicators:empty){padding-right:0}.input-wrapper .input~.indicators:empty{width:0;border-left:none;padding-left:0}.input-wrapper .tooltip-indicator{cursor:pointer;font-size:1.25rem;padding:0;color:var(--chr-input-current-color)}.input-wrapper .tooltip-indicator:hover{color:var(--primary-color)}.input-wrapper .required{color:var(--error-color)}.input-wrapper:has(.input:focus){--chr-input-current-color: var(--primary-color)}.input-wrapper[data-state=IDLE]{--chr-input-current-color: color-mix(in srgb, var(--text-neutral-color) 90%, transparent 10%) }.input-wrapper[data-state=INVALID],.input-wrapper[data-state=DISABLED]{--chr-input-current-color: var(--error-color)}.input-wrapper[data-state=PENDING],.input-wrapper[data-state=WARNING]{--chr-input-current-color: var(--warn-color)}.input-wrapper label{position:absolute;pointer-events:none;top:50%;color:var(--chr-input-current-color);transform:translateY(-50%);transition:transfom 125ms ease-in-out,position 125ms ease-in-out,top 125ms ease-in-out,font-size 125ms ease-in-out,left 125ms ease-in-out;font-size:.85rem;font-weight:700}.input-wrapper label:not(:empty):after{position:absolute;content:\":\"}.input-wrapper label:has(~.input:focus),.input-wrapper label:has(~.input:not(:placeholder-shown)){top:-.25rem;left:0;font-size:75%}.input-wrapper .input{width:100%;outline:none;border:none;padding:0;background-color:transparent}.data-overlay{height:0;grid-area:data / data;display:flex;flex-direction:column;flex-wrap:nowrap}.data{grid-area:data / data;display:flex;flex-direction:column;flex-wrap:nowrap}.error{grid-area:data / data;display:flex;flex:1 1 auto;flex-direction:row;flex-wrap:wrap;min-width:100%;max-width:min-content;color:var(--error-color);padding:.25rem;border-top-left-radius:0;border-top-right-radius:0;background-color:var(--background-color);z-index:2}.error:empty{display:none}.input[disabled]{--chr-input-disabled-neutral-muted-color: color-mix(in srgb, var(--text-neutral-color) 15%, transparent 85%);background:repeating-linear-gradient(45deg,var(--chr-input-disabled-neutral-muted-color),var(--chr-input-disabled-neutral-muted-color) .625rem,var(--background-color) .625rem,var(--background-color) 1.25rem);cursor:not-allowed}.input{accent-color:var(--primary-color)}.input ::-webkit-datetime-edit,.input ::-webkit-datetime-edit-fields-wrapper,.input ::-webkit-datetime-edit-text,.input ::-webkit-datetime-edit-month-field,.input ::-webkit-datetime-edit-day-field,.input ::-webkit-datetime-edit-year-field,.input ::-webkit-inner-spin-button,.input ::-webkit-calendar-picker-indicator{place-self:end;justify-self:end;background-color:red}.input[type=range]{color:red}.input[type=range]:after{content:attr(value)}.input[type=textarea]::-webkit-scrollbar{display:none!important}.no-scrollbar{-ms-overflow-style:none!important;scrollbar-width:none!important}:host{display:flex;flex-direction:column;flex:1 1 auto;min-width:0}.input-wrapper{position:relative;min-height:1.5rem;max-height:1.5rem;display:flex;flex:1 1 auto;min-width:0;flex-direction:column}.selection-status-indicator.indicator-success{color:var(--success-color)}.selection-status-indicator.indicator-warning{color:var(--warn-color)}.selection-status-indicator.indicator-error{color:var(--error-color)}.selection-status-indicator.indicator-spacer{width:1rem}\n"] }]
+                    ], template: "<div class=\"input-wrapper\" [attr.data-state]=\"state()\">\r\n    <chr-input [id]=\"id()\" [name]=\"name()\" type=\"text\" [label]=\"label()\" [displayValue]=\"displayValue() ?? ''\"\r\n        [required]=\"required()\" (focus)=\"focus.emit()\" (blur)=\"blur.emit()\" [state]=\"state()\"\r\n        [errors]=\"ngControl()?.errors\" [value]=\"displayValue()\" (input)=\"dl.open();onInput($event);\">\r\n        <chr-input-indicators>\r\n            <ng-content select=\"chr-input-indicators\"></ng-content>\r\n            <!-- @if(isFocused()){ -->\r\n            @if(value() == null){\r\n            <span class=\"material-symbols selection-status-indicator\" [class.indicator-warning]=\"!required()\"\r\n                [class.indicator-error]=\"required()\">close</span>\r\n            }@else {\r\n            <span class=\"material-symbols selection-status-indicator indicator-success\">check</span>\r\n            }\r\n            <span class=\"selection-status-indicator indicator-spacer\"></span>\r\n            <!-- } -->\r\n        </chr-input-indicators>\r\n        <chr-input-data-overlay>\r\n            <chr-data-list #dl [for]=\"''+name()\" [suggestions]=\"data()\" [display]=\"display()\" [selectOnFullMatch]=\"true\"\r\n                (optionSelected)=\"selectOption($event.value)\"></chr-data-list>\r\n        </chr-input-data-overlay>\r\n    </chr-input>\r\n</div>\r\n\r\n<div class=\"data-overlay\">\r\n    @if(isTouched()){\r\n    @let error = getLastError();\r\n    @if(error != null){\r\n    <div class=\"error card glass\">\r\n        {{getLastError() ?? null}}\r\n    </div>\r\n    }\r\n    }\r\n    <ng-content select=\"chr-input-data-overlay\">\r\n    </ng-content>\r\n</div>\r\n<div class=\"data\">\r\n    <ng-content select=\"chr-input-data\">\r\n        <!-- Fallback to default projection-->\r\n        <ng-content></ng-content>\r\n    </ng-content>\r\n</div>", styles: [".input-wrapper{--chr-input-current-color: var(--text-neutral-color);position:relative;box-sizing:border-box;min-height:1.5rem;max-height:1.5rem;height:1.5rem;display:flex;flex:1 1 auto;min-width:0;flex-direction:column;border-bottom:.125rem solid var(--chr-input-current-color)}.input-wrapper .input-row{display:flex;flex:1 1 auto;flex-wrap:nowrap;height:inherit}.input-wrapper .input{min-width:0;height:inherit;color:var(--text-color)}.input-wrapper .indicators{display:flex;flex-direction:row;flex:1 1 auto;flex-wrap:nowrap;gap:.25rem;max-width:fit-content;height:inherit;align-items:center;color:var(--chr-input-current-color);font-size:.75rem!important}.input-wrapper .input~.indicators{position:absolute;top:0;right:0;visibility:hidden;opacity:0;transform:translate(1rem);transition:opacity .15s ease-in-out,transform .15s ease-in-out,width .15s ease-in-out .15s}.input-wrapper:focus-within .input~.indicators,.input-wrapper:hover .input~.indicators,.input-wrapper .input~.indicators[data-indicators-open=true]{position:relative;visibility:visible;padding-left:.125rem;opacity:1;transform:translate(0)}:is(.input-wrapper:focus-within .input~.indicators,.input-wrapper:hover .input~.indicators,.input-wrapper .input~.indicators[data-indicators-open=true]):has(chr-input-indicators:not(:empty)),:is(.input-wrapper:focus-within .input~.indicators,.input-wrapper:hover .input~.indicators,.input-wrapper .input~.indicators[data-indicators-open=true]):has(:nth-child(2)){border-left:.125rem solid color-mix(in srgb,var(--chr-input-current-color) 40%,transparent 60%)}.input-wrapper:focus-within .input,.input-wrapper:hover .input,.input-wrapper:has(.indicators[data-indicators-open=true]) .input{padding-right:.125rem}.input-wrapper .input:has(~.indicators:empty){padding-right:0}.input-wrapper .input~.indicators:empty{width:0;border-left:none;padding-left:0}.input-wrapper .tooltip-indicator{cursor:pointer;font-size:1.25rem;padding:0;color:var(--chr-input-current-color)}.input-wrapper .tooltip-indicator:hover{color:var(--primary-color)}.input-wrapper .required{color:var(--error-color)}.input-wrapper:has(.input:focus){--chr-input-current-color: var(--primary-color)}.input-wrapper[data-state=IDLE]{--chr-input-current-color: color-mix(in srgb, var(--text-neutral-color) 90%, transparent 10%) }.input-wrapper[data-state=INVALID],.input-wrapper[data-state=DISABLED]{--chr-input-current-color: var(--error-color)}.input-wrapper[data-state=PENDING],.input-wrapper[data-state=WARNING]{--chr-input-current-color: var(--warn-color)}.input-wrapper label{position:absolute;pointer-events:none;top:50%;color:var(--chr-input-current-color);transform:translateY(-50%);transition:transfom 125ms ease-in-out,position 125ms ease-in-out,top 125ms ease-in-out,font-size 125ms ease-in-out,left 125ms ease-in-out;font-size:.85rem;font-weight:700}.input-wrapper label:not(:empty):after{position:absolute;content:\":\"}.input-wrapper label:has(~.input:focus),.input-wrapper label:has(~.input:not(:placeholder-shown)){top:-.25rem;left:0;font-size:75%}.input-wrapper .input{width:100%;outline:none;border:none;padding:0;background-color:transparent}.data-overlay{height:0;grid-area:data / data;display:flex;flex-direction:column;flex-wrap:nowrap}.data{grid-area:data / data;display:flex;flex-direction:column;flex-wrap:nowrap}.error{grid-area:data / data;display:flex;flex:1 1 auto;flex-direction:row;flex-wrap:wrap;min-width:calc(100% - .5rem);max-width:min-content;color:var(--error-color);padding:.25rem;border-top-left-radius:0;border-top-right-radius:0;background-color:var(--background-color);z-index:2}.error:empty{display:none}.input[disabled]{--chr-input-disabled-neutral-muted-color: color-mix(in srgb, var(--text-neutral-color) 15%, transparent 85%);background:repeating-linear-gradient(45deg,var(--chr-input-disabled-neutral-muted-color),var(--chr-input-disabled-neutral-muted-color) .625rem,var(--background-color) .625rem,var(--background-color) 1.25rem);cursor:not-allowed}.input{accent-color:var(--primary-color)}.input ::-webkit-datetime-edit,.input ::-webkit-datetime-edit-fields-wrapper,.input ::-webkit-datetime-edit-text,.input ::-webkit-datetime-edit-month-field,.input ::-webkit-datetime-edit-day-field,.input ::-webkit-datetime-edit-year-field,.input ::-webkit-inner-spin-button,.input ::-webkit-calendar-picker-indicator{place-self:end;justify-self:end;background-color:red}.input[type=range]{color:red}.input[type=range]:after{content:attr(value)}.input[type=textarea]::-webkit-scrollbar{display:none!important}.no-scrollbar{-ms-overflow-style:none!important;scrollbar-width:none!important}:host{display:flex;flex-direction:column;flex:1 1 auto;min-width:0}.input-wrapper{position:relative;min-height:1.5rem;max-height:1.5rem;display:flex;flex:1 1 auto;min-width:0;flex-direction:column}.selection-status-indicator.indicator-success{color:var(--success-color)}.selection-status-indicator.indicator-warning{color:var(--warn-color)}.selection-status-indicator.indicator-error{color:var(--error-color)}.selection-status-indicator.indicator-spacer{width:1rem}\n"] }]
         }], ctorParameters: () => [], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], display: [{ type: i0.Input, args: [{ isSignal: true, alias: "display", required: false }] }] } });
 
 class ChrTagSelectInputComponent extends ChrInputComponent {
@@ -4993,9 +4997,6 @@ class ChrTagSelectInputComponent extends ChrInputComponent {
         ...(ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []));
         this.display = input((v) => v || '', /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "display" }] : /* istanbul ignore next */ []));
-        this.formatValue = (value) => {
-            return '';
-        };
         this.selectedItems = computed(() => {
             const val = this.value();
             return Array.isArray(val) ? val : [];
@@ -5031,8 +5032,11 @@ class ChrTagSelectInputComponent extends ChrInputComponent {
         super.writeValue(value);
         this.displayValue.set('');
     }
+    formatValue(value) {
+        return '';
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: ChrTagSelectInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: ChrTagSelectInputComponent, isStandalone: true, selector: "chr-tag-select-input", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, display: { classPropertyName: "display", publicName: "display", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: "<div class=\"input-wrapper\" [attr.data-state]=\"state()\">\r\n    <!-- Champ de recherche enfant -->\r\n    <chr-input [id]=\"id()\" [name]=\"name()\" type=\"text\" [label]=\"label()\" [displayValue]=\"displayValue() ?? ''\"\r\n        [state]=\"state()\" [errors]=\"ngControl()?.errors\" [value]=\"displayValue()\" (input)=\"dl.open()\">\r\n\r\n        <chr-input-indicators>\r\n            <ng-content select=\"chr-input-indicators\"></ng-content>\r\n            <span class=\"material-symbols\">data_array</span>\r\n            <span style=\"width: 1rem;\"></span>\r\n        </chr-input-indicators>\r\n        <chr-input-data-overlay>\r\n            <chr-data-list #dl [for]=\"'' + name()\" [suggestions]=\"filteredOptions()\" [selectOnFullMatch]=\"true\"\r\n                [display]=\"display()\" (optionSelected)=\"selectOption($event.value)\">\r\n            </chr-data-list>\r\n            <ng-content select=\"chr-input-data-overlay\">\r\n            </ng-content>\r\n        </chr-input-data-overlay>\r\n        <chr-input-data>\r\n\r\n        </chr-input-data>\r\n    </chr-input>\r\n</div>\r\n\r\n<!-- No-height slot. Should be used for \"overlay\" type data-->\r\n<div class=\"data-overlay\">\r\n    @if(isTouched()){\r\n    @let error = getLastError();\r\n    @if(error != null){\r\n    <div class=\"error card glass\">\r\n        {{getLastError() ?? null}}\r\n    </div>\r\n    }\r\n    }\r\n    <ng-content select=\"chr-input-data-overlay\">\r\n    </ng-content>\r\n</div>\r\n<!-- Default \"space-consuming\" Content Projection -->\r\n<div class=\"data\">\r\n    <!-- Affichage des Tags (Chips) -->\r\n    @if (selectedItems().length > 0) {\r\n    <div class=\"tags-container\">\r\n        @for (item of selectedItems(); track $index) {\r\n        <div class=\"tag-chip\">\r\n            <span class=\"tag-label\">{{ display()(item) }}</span>\r\n            <button type=\"button\" class=\"tag-remove-btn\" (click)=\"removeTag($index)\"\r\n                [attr.aria-label]=\"'Supprimer ' + display()(item)\">\r\n                <span class=\"material-symbols\">close</span>\r\n            </button>\r\n        </div>\r\n        }\r\n    </div>\r\n    }\r\n    <ng-content select=\"chr-input-data\">\r\n        <!-- Fallback to default projection-->\r\n        <ng-content></ng-content>\r\n    </ng-content>\r\n</div>", styles: [".input-wrapper{--chr-input-current-color: var(--text-neutral-color);position:relative;box-sizing:border-box;min-height:1.5rem;max-height:1.5rem;height:1.5rem;display:flex;flex:1 1 auto;min-width:0;flex-direction:column;border-bottom:.125rem solid var(--chr-input-current-color)}.input-wrapper .input-row{display:flex;flex:1 1 auto;flex-wrap:nowrap;height:inherit}.input-wrapper .input{min-width:0;height:inherit;color:var(--text-color)}.input-wrapper .indicators{display:flex;flex-direction:row;flex:1 1 auto;flex-wrap:nowrap;gap:.25rem;max-width:fit-content;height:inherit;align-items:center;color:var(--chr-input-current-color);font-size:.75rem!important}.input-wrapper .input~.indicators{position:absolute;top:0;right:0;visibility:hidden;opacity:0;transform:translate(1rem);transition:opacity .15s ease-in-out,transform .15s ease-in-out,width .15s ease-in-out .15s}.input-wrapper:focus-within .input~.indicators,.input-wrapper:hover .input~.indicators,.input-wrapper .input~.indicators[data-indicators-open=true]{position:relative;visibility:visible;padding-left:.125rem;opacity:1;transform:translate(0)}:is(.input-wrapper:focus-within .input~.indicators,.input-wrapper:hover .input~.indicators,.input-wrapper .input~.indicators[data-indicators-open=true]):has(chr-input-indicators:not(:empty)),:is(.input-wrapper:focus-within .input~.indicators,.input-wrapper:hover .input~.indicators,.input-wrapper .input~.indicators[data-indicators-open=true]):has(:nth-child(2)){border-left:.125rem solid color-mix(in srgb,var(--chr-input-current-color) 40%,transparent 60%)}.input-wrapper:focus-within .input,.input-wrapper:hover .input,.input-wrapper:has(.indicators[data-indicators-open=true]) .input{padding-right:.125rem}.input-wrapper .input:has(~.indicators:empty){padding-right:0}.input-wrapper .input~.indicators:empty{width:0;border-left:none;padding-left:0}.input-wrapper .tooltip-indicator{cursor:pointer;font-size:1.25rem;padding:0;color:var(--chr-input-current-color)}.input-wrapper .tooltip-indicator:hover{color:var(--primary-color)}.input-wrapper .required{color:var(--error-color)}.input-wrapper:has(.input:focus){--chr-input-current-color: var(--primary-color)}.input-wrapper[data-state=IDLE]{--chr-input-current-color: color-mix(in srgb, var(--text-neutral-color) 90%, transparent 10%) }.input-wrapper[data-state=INVALID],.input-wrapper[data-state=DISABLED]{--chr-input-current-color: var(--error-color)}.input-wrapper[data-state=PENDING],.input-wrapper[data-state=WARNING]{--chr-input-current-color: var(--warn-color)}.input-wrapper label{position:absolute;pointer-events:none;top:50%;color:var(--chr-input-current-color);transform:translateY(-50%);transition:transfom 125ms ease-in-out,position 125ms ease-in-out,top 125ms ease-in-out,font-size 125ms ease-in-out,left 125ms ease-in-out;font-size:.85rem;font-weight:700}.input-wrapper label:not(:empty):after{position:absolute;content:\":\"}.input-wrapper label:has(~.input:focus),.input-wrapper label:has(~.input:not(:placeholder-shown)){top:-.25rem;left:0;font-size:75%}.input-wrapper .input{width:100%;outline:none;border:none;padding:0;background-color:transparent}.data-overlay{height:0;grid-area:data / data;display:flex;flex-direction:column;flex-wrap:nowrap}.data{grid-area:data / data;display:flex;flex-direction:column;flex-wrap:nowrap}.error{grid-area:data / data;display:flex;flex:1 1 auto;flex-direction:row;flex-wrap:wrap;min-width:100%;max-width:min-content;color:var(--error-color);padding:.25rem;border-top-left-radius:0;border-top-right-radius:0;background-color:var(--background-color);z-index:2}.error:empty{display:none}.input[disabled]{--chr-input-disabled-neutral-muted-color: color-mix(in srgb, var(--text-neutral-color) 15%, transparent 85%);background:repeating-linear-gradient(45deg,var(--chr-input-disabled-neutral-muted-color),var(--chr-input-disabled-neutral-muted-color) .625rem,var(--background-color) .625rem,var(--background-color) 1.25rem);cursor:not-allowed}.input{accent-color:var(--primary-color)}.input ::-webkit-datetime-edit,.input ::-webkit-datetime-edit-fields-wrapper,.input ::-webkit-datetime-edit-text,.input ::-webkit-datetime-edit-month-field,.input ::-webkit-datetime-edit-day-field,.input ::-webkit-datetime-edit-year-field,.input ::-webkit-inner-spin-button,.input ::-webkit-calendar-picker-indicator{place-self:end;justify-self:end;background-color:red}.input[type=range]{color:red}.input[type=range]:after{content:attr(value)}.input[type=textarea]::-webkit-scrollbar{display:none!important}.no-scrollbar{-ms-overflow-style:none!important;scrollbar-width:none!important}:host{display:flex;flex-direction:column;flex:1 1 auto;min-width:0}.input-wrapper{position:relative;min-height:fit-content;display:flex;flex:1 1 auto;min-width:0;flex-direction:column;border-bottom:none}.tags-container{display:flex;flex-wrap:wrap;gap:.375rem;margin-top:.25rem}.tag-chip{display:inline-flex;align-items:center;gap:.25rem;padding:.25rem .5rem;background-color:color-mix(in srgb,var(--primary-color) 10%,transparent 90%);color:var(--primary-color);border-radius:9999px;font-size:.875rem;font-weight:500;line-height:1}.tag-remove-btn{display:inline-flex;align-items:center;justify-content:center;border:none;background:transparent;color:inherit;cursor:pointer;padding:0;border-radius:50%;width:1.125rem;height:1.125rem;opacity:.7;transition:opacity .15s ease,background-color .15s ease}::ng-deep .tag-select-input-wrapper span.custom-datalist-arrow{top:.8rem}.tag-remove-btn:hover{opacity:1;background-color:#0000001a}.tag-remove-btn .material-symbols{font-size:1rem}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: ChrInputComponent, selector: "chr-input", inputs: ["label", "id", "name", "value", "displayValue", "type", "outputType", "step", "debounceTime", "isDisabled", "isFocused", "min", "max", "minLength", "maxLength", "ngControl", "tooltip", "isIndicatorsOpen", "tooltipPosition", "state", "errors"], outputs: ["idChange", "nameChange", "valueChange", "displayValueChange", "outputTypeChange", "isDisabledChange", "isFocusedChange", "ngControlChange", "isIndicatorsOpenChange", "stateChange", "input", "change", "debouncedInput", "focus", "enter", "blur"] }, { kind: "component", type: ChrInputIndicators, selector: "chr-input-indicators" }, { kind: "component", type: DataListComponent, selector: "chr-data-list", inputs: ["suggestions", "for", "allowStringify", "display", "targetElement", "blurOnSelect", "selectOnFullMatch"], outputs: ["optionSelected"] }, { kind: "component", type: ChrInputData, selector: "chr-input-data" }, { kind: "component", type: ChrInputDataOverlay, selector: "chr-input-data-overlay" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: ChrTagSelectInputComponent, isStandalone: true, selector: "chr-tag-select-input", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, display: { classPropertyName: "display", publicName: "display", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: "<div class=\"input-wrapper\" [attr.data-state]=\"state()\">\r\n    <!-- Champ de recherche enfant -->\r\n    <chr-input [id]=\"id()\" [name]=\"name()\" type=\"text\" [label]=\"label()\" [displayValue]=\"displayValue() ?? ''\"\r\n        [required]=\"required()\" (focus)=\"focus.emit()\" (blur)=\"blur.emit()\" [state]=\"state()\"\r\n        [errors]=\"ngControl()?.errors\" [value]=\"displayValue()\" (input)=\"dl.open()\">\r\n\r\n        <chr-input-indicators>\r\n            <ng-content select=\"chr-input-indicators\"></ng-content>\r\n            <span class=\"material-symbols\">data_array</span>\r\n            <span style=\"width: 1rem;\"></span>\r\n        </chr-input-indicators>\r\n        <chr-input-data-overlay>\r\n            <chr-data-list #dl [for]=\"'' + name()\" [suggestions]=\"filteredOptions()\" [selectOnFullMatch]=\"true\"\r\n                [display]=\"display()\" (optionSelected)=\"selectOption($event.value)\">\r\n            </chr-data-list>\r\n            <ng-content select=\"chr-input-data-overlay\">\r\n            </ng-content>\r\n        </chr-input-data-overlay>\r\n        <chr-input-data>\r\n\r\n        </chr-input-data>\r\n    </chr-input>\r\n</div>\r\n\r\n<!-- No-height slot. Should be used for \"overlay\" type data-->\r\n<div class=\"data-overlay\">\r\n    @if(isTouched()){\r\n    @let error = getLastError();\r\n    @if(error != null){\r\n    <div class=\"error card glass\">\r\n        {{getLastError() ?? null}}\r\n    </div>\r\n    }\r\n    }\r\n    <ng-content select=\"chr-input-data-overlay\">\r\n    </ng-content>\r\n</div>\r\n<!-- Default \"space-consuming\" Content Projection -->\r\n<div class=\"data\">\r\n    <!-- Affichage des Tags (Chips) -->\r\n    @if (selectedItems().length > 0) {\r\n    <div class=\"tags-container\">\r\n        @for (item of selectedItems(); track $index) {\r\n        <div class=\"tag-chip\">\r\n            <span class=\"tag-label\">{{ display()(item) }}</span>\r\n            <button type=\"button\" class=\"tag-remove-btn\" (click)=\"removeTag($index)\"\r\n                [attr.aria-label]=\"'Supprimer ' + display()(item)\">\r\n                <span class=\"material-symbols\">close</span>\r\n            </button>\r\n        </div>\r\n        }\r\n    </div>\r\n    }\r\n    <ng-content select=\"chr-input-data\">\r\n        <!-- Fallback to default projection-->\r\n        <ng-content></ng-content>\r\n    </ng-content>\r\n</div>", styles: [".input-wrapper{--chr-input-current-color: var(--text-neutral-color);position:relative;box-sizing:border-box;min-height:1.5rem;max-height:1.5rem;height:1.5rem;display:flex;flex:1 1 auto;min-width:0;flex-direction:column;border-bottom:.125rem solid var(--chr-input-current-color)}.input-wrapper .input-row{display:flex;flex:1 1 auto;flex-wrap:nowrap;height:inherit}.input-wrapper .input{min-width:0;height:inherit;color:var(--text-color)}.input-wrapper .indicators{display:flex;flex-direction:row;flex:1 1 auto;flex-wrap:nowrap;gap:.25rem;max-width:fit-content;height:inherit;align-items:center;color:var(--chr-input-current-color);font-size:.75rem!important}.input-wrapper .input~.indicators{position:absolute;top:0;right:0;visibility:hidden;opacity:0;transform:translate(1rem);transition:opacity .15s ease-in-out,transform .15s ease-in-out,width .15s ease-in-out .15s}.input-wrapper:focus-within .input~.indicators,.input-wrapper:hover .input~.indicators,.input-wrapper .input~.indicators[data-indicators-open=true]{position:relative;visibility:visible;padding-left:.125rem;opacity:1;transform:translate(0)}:is(.input-wrapper:focus-within .input~.indicators,.input-wrapper:hover .input~.indicators,.input-wrapper .input~.indicators[data-indicators-open=true]):has(chr-input-indicators:not(:empty)),:is(.input-wrapper:focus-within .input~.indicators,.input-wrapper:hover .input~.indicators,.input-wrapper .input~.indicators[data-indicators-open=true]):has(:nth-child(2)){border-left:.125rem solid color-mix(in srgb,var(--chr-input-current-color) 40%,transparent 60%)}.input-wrapper:focus-within .input,.input-wrapper:hover .input,.input-wrapper:has(.indicators[data-indicators-open=true]) .input{padding-right:.125rem}.input-wrapper .input:has(~.indicators:empty){padding-right:0}.input-wrapper .input~.indicators:empty{width:0;border-left:none;padding-left:0}.input-wrapper .tooltip-indicator{cursor:pointer;font-size:1.25rem;padding:0;color:var(--chr-input-current-color)}.input-wrapper .tooltip-indicator:hover{color:var(--primary-color)}.input-wrapper .required{color:var(--error-color)}.input-wrapper:has(.input:focus){--chr-input-current-color: var(--primary-color)}.input-wrapper[data-state=IDLE]{--chr-input-current-color: color-mix(in srgb, var(--text-neutral-color) 90%, transparent 10%) }.input-wrapper[data-state=INVALID],.input-wrapper[data-state=DISABLED]{--chr-input-current-color: var(--error-color)}.input-wrapper[data-state=PENDING],.input-wrapper[data-state=WARNING]{--chr-input-current-color: var(--warn-color)}.input-wrapper label{position:absolute;pointer-events:none;top:50%;color:var(--chr-input-current-color);transform:translateY(-50%);transition:transfom 125ms ease-in-out,position 125ms ease-in-out,top 125ms ease-in-out,font-size 125ms ease-in-out,left 125ms ease-in-out;font-size:.85rem;font-weight:700}.input-wrapper label:not(:empty):after{position:absolute;content:\":\"}.input-wrapper label:has(~.input:focus),.input-wrapper label:has(~.input:not(:placeholder-shown)){top:-.25rem;left:0;font-size:75%}.input-wrapper .input{width:100%;outline:none;border:none;padding:0;background-color:transparent}.data-overlay{height:0;grid-area:data / data;display:flex;flex-direction:column;flex-wrap:nowrap}.data{grid-area:data / data;display:flex;flex-direction:column;flex-wrap:nowrap}.error{grid-area:data / data;display:flex;flex:1 1 auto;flex-direction:row;flex-wrap:wrap;min-width:calc(100% - .5rem);max-width:min-content;color:var(--error-color);padding:.25rem;border-top-left-radius:0;border-top-right-radius:0;background-color:var(--background-color);z-index:2}.error:empty{display:none}.input[disabled]{--chr-input-disabled-neutral-muted-color: color-mix(in srgb, var(--text-neutral-color) 15%, transparent 85%);background:repeating-linear-gradient(45deg,var(--chr-input-disabled-neutral-muted-color),var(--chr-input-disabled-neutral-muted-color) .625rem,var(--background-color) .625rem,var(--background-color) 1.25rem);cursor:not-allowed}.input{accent-color:var(--primary-color)}.input ::-webkit-datetime-edit,.input ::-webkit-datetime-edit-fields-wrapper,.input ::-webkit-datetime-edit-text,.input ::-webkit-datetime-edit-month-field,.input ::-webkit-datetime-edit-day-field,.input ::-webkit-datetime-edit-year-field,.input ::-webkit-inner-spin-button,.input ::-webkit-calendar-picker-indicator{place-self:end;justify-self:end;background-color:red}.input[type=range]{color:red}.input[type=range]:after{content:attr(value)}.input[type=textarea]::-webkit-scrollbar{display:none!important}.no-scrollbar{-ms-overflow-style:none!important;scrollbar-width:none!important}:host{display:flex;flex-direction:column;flex:1 1 auto;min-width:0}.input-wrapper{position:relative;min-height:fit-content;display:flex;flex:1 1 auto;min-width:0;flex-direction:column;border-bottom:none}.tags-container{display:flex;flex-wrap:wrap;gap:.375rem;margin-top:.25rem}.tag-chip{display:inline-flex;align-items:center;gap:.25rem;padding:.25rem .5rem;background-color:color-mix(in srgb,var(--primary-color) 10%,transparent 90%);color:var(--primary-color);border-radius:9999px;font-size:.875rem;font-weight:500;line-height:1}.tag-remove-btn{display:inline-flex;align-items:center;justify-content:center;border:none;background:transparent;color:inherit;cursor:pointer;padding:0;border-radius:50%;width:1.125rem;height:1.125rem;opacity:.7;transition:opacity .15s ease,background-color .15s ease}::ng-deep .tag-select-input-wrapper span.custom-datalist-arrow{top:.8rem}.tag-remove-btn:hover{opacity:1;background-color:#0000001a}.tag-remove-btn .material-symbols{font-size:1rem}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: ChrInputComponent, selector: "chr-input", inputs: ["label", "id", "name", "value", "displayValue", "type", "outputType", "step", "debounceTime", "isDisabled", "isFocused", "min", "max", "minLength", "maxLength", "ngControl", "tooltip", "isIndicatorsOpen", "tooltipPosition", "required", "state", "errors"], outputs: ["idChange", "nameChange", "valueChange", "displayValueChange", "outputTypeChange", "isDisabledChange", "isFocusedChange", "ngControlChange", "isIndicatorsOpenChange", "requiredChange", "stateChange", "input", "change", "debouncedInput", "focus", "enter", "blur"] }, { kind: "component", type: ChrInputIndicators, selector: "chr-input-indicators" }, { kind: "component", type: DataListComponent, selector: "chr-data-list", inputs: ["suggestions", "for", "allowStringify", "display", "targetElement", "blurOnSelect", "selectOnFullMatch"], outputs: ["optionSelected"] }, { kind: "component", type: ChrInputData, selector: "chr-input-data" }, { kind: "component", type: ChrInputDataOverlay, selector: "chr-input-data-overlay" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: ChrTagSelectInputComponent, decorators: [{
             type: Component,
@@ -5043,7 +5047,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
                         DataListComponent,
                         ChrInputData,
                         ChrInputDataOverlay,
-                    ], template: "<div class=\"input-wrapper\" [attr.data-state]=\"state()\">\r\n    <!-- Champ de recherche enfant -->\r\n    <chr-input [id]=\"id()\" [name]=\"name()\" type=\"text\" [label]=\"label()\" [displayValue]=\"displayValue() ?? ''\"\r\n        [state]=\"state()\" [errors]=\"ngControl()?.errors\" [value]=\"displayValue()\" (input)=\"dl.open()\">\r\n\r\n        <chr-input-indicators>\r\n            <ng-content select=\"chr-input-indicators\"></ng-content>\r\n            <span class=\"material-symbols\">data_array</span>\r\n            <span style=\"width: 1rem;\"></span>\r\n        </chr-input-indicators>\r\n        <chr-input-data-overlay>\r\n            <chr-data-list #dl [for]=\"'' + name()\" [suggestions]=\"filteredOptions()\" [selectOnFullMatch]=\"true\"\r\n                [display]=\"display()\" (optionSelected)=\"selectOption($event.value)\">\r\n            </chr-data-list>\r\n            <ng-content select=\"chr-input-data-overlay\">\r\n            </ng-content>\r\n        </chr-input-data-overlay>\r\n        <chr-input-data>\r\n\r\n        </chr-input-data>\r\n    </chr-input>\r\n</div>\r\n\r\n<!-- No-height slot. Should be used for \"overlay\" type data-->\r\n<div class=\"data-overlay\">\r\n    @if(isTouched()){\r\n    @let error = getLastError();\r\n    @if(error != null){\r\n    <div class=\"error card glass\">\r\n        {{getLastError() ?? null}}\r\n    </div>\r\n    }\r\n    }\r\n    <ng-content select=\"chr-input-data-overlay\">\r\n    </ng-content>\r\n</div>\r\n<!-- Default \"space-consuming\" Content Projection -->\r\n<div class=\"data\">\r\n    <!-- Affichage des Tags (Chips) -->\r\n    @if (selectedItems().length > 0) {\r\n    <div class=\"tags-container\">\r\n        @for (item of selectedItems(); track $index) {\r\n        <div class=\"tag-chip\">\r\n            <span class=\"tag-label\">{{ display()(item) }}</span>\r\n            <button type=\"button\" class=\"tag-remove-btn\" (click)=\"removeTag($index)\"\r\n                [attr.aria-label]=\"'Supprimer ' + display()(item)\">\r\n                <span class=\"material-symbols\">close</span>\r\n            </button>\r\n        </div>\r\n        }\r\n    </div>\r\n    }\r\n    <ng-content select=\"chr-input-data\">\r\n        <!-- Fallback to default projection-->\r\n        <ng-content></ng-content>\r\n    </ng-content>\r\n</div>", styles: [".input-wrapper{--chr-input-current-color: var(--text-neutral-color);position:relative;box-sizing:border-box;min-height:1.5rem;max-height:1.5rem;height:1.5rem;display:flex;flex:1 1 auto;min-width:0;flex-direction:column;border-bottom:.125rem solid var(--chr-input-current-color)}.input-wrapper .input-row{display:flex;flex:1 1 auto;flex-wrap:nowrap;height:inherit}.input-wrapper .input{min-width:0;height:inherit;color:var(--text-color)}.input-wrapper .indicators{display:flex;flex-direction:row;flex:1 1 auto;flex-wrap:nowrap;gap:.25rem;max-width:fit-content;height:inherit;align-items:center;color:var(--chr-input-current-color);font-size:.75rem!important}.input-wrapper .input~.indicators{position:absolute;top:0;right:0;visibility:hidden;opacity:0;transform:translate(1rem);transition:opacity .15s ease-in-out,transform .15s ease-in-out,width .15s ease-in-out .15s}.input-wrapper:focus-within .input~.indicators,.input-wrapper:hover .input~.indicators,.input-wrapper .input~.indicators[data-indicators-open=true]{position:relative;visibility:visible;padding-left:.125rem;opacity:1;transform:translate(0)}:is(.input-wrapper:focus-within .input~.indicators,.input-wrapper:hover .input~.indicators,.input-wrapper .input~.indicators[data-indicators-open=true]):has(chr-input-indicators:not(:empty)),:is(.input-wrapper:focus-within .input~.indicators,.input-wrapper:hover .input~.indicators,.input-wrapper .input~.indicators[data-indicators-open=true]):has(:nth-child(2)){border-left:.125rem solid color-mix(in srgb,var(--chr-input-current-color) 40%,transparent 60%)}.input-wrapper:focus-within .input,.input-wrapper:hover .input,.input-wrapper:has(.indicators[data-indicators-open=true]) .input{padding-right:.125rem}.input-wrapper .input:has(~.indicators:empty){padding-right:0}.input-wrapper .input~.indicators:empty{width:0;border-left:none;padding-left:0}.input-wrapper .tooltip-indicator{cursor:pointer;font-size:1.25rem;padding:0;color:var(--chr-input-current-color)}.input-wrapper .tooltip-indicator:hover{color:var(--primary-color)}.input-wrapper .required{color:var(--error-color)}.input-wrapper:has(.input:focus){--chr-input-current-color: var(--primary-color)}.input-wrapper[data-state=IDLE]{--chr-input-current-color: color-mix(in srgb, var(--text-neutral-color) 90%, transparent 10%) }.input-wrapper[data-state=INVALID],.input-wrapper[data-state=DISABLED]{--chr-input-current-color: var(--error-color)}.input-wrapper[data-state=PENDING],.input-wrapper[data-state=WARNING]{--chr-input-current-color: var(--warn-color)}.input-wrapper label{position:absolute;pointer-events:none;top:50%;color:var(--chr-input-current-color);transform:translateY(-50%);transition:transfom 125ms ease-in-out,position 125ms ease-in-out,top 125ms ease-in-out,font-size 125ms ease-in-out,left 125ms ease-in-out;font-size:.85rem;font-weight:700}.input-wrapper label:not(:empty):after{position:absolute;content:\":\"}.input-wrapper label:has(~.input:focus),.input-wrapper label:has(~.input:not(:placeholder-shown)){top:-.25rem;left:0;font-size:75%}.input-wrapper .input{width:100%;outline:none;border:none;padding:0;background-color:transparent}.data-overlay{height:0;grid-area:data / data;display:flex;flex-direction:column;flex-wrap:nowrap}.data{grid-area:data / data;display:flex;flex-direction:column;flex-wrap:nowrap}.error{grid-area:data / data;display:flex;flex:1 1 auto;flex-direction:row;flex-wrap:wrap;min-width:100%;max-width:min-content;color:var(--error-color);padding:.25rem;border-top-left-radius:0;border-top-right-radius:0;background-color:var(--background-color);z-index:2}.error:empty{display:none}.input[disabled]{--chr-input-disabled-neutral-muted-color: color-mix(in srgb, var(--text-neutral-color) 15%, transparent 85%);background:repeating-linear-gradient(45deg,var(--chr-input-disabled-neutral-muted-color),var(--chr-input-disabled-neutral-muted-color) .625rem,var(--background-color) .625rem,var(--background-color) 1.25rem);cursor:not-allowed}.input{accent-color:var(--primary-color)}.input ::-webkit-datetime-edit,.input ::-webkit-datetime-edit-fields-wrapper,.input ::-webkit-datetime-edit-text,.input ::-webkit-datetime-edit-month-field,.input ::-webkit-datetime-edit-day-field,.input ::-webkit-datetime-edit-year-field,.input ::-webkit-inner-spin-button,.input ::-webkit-calendar-picker-indicator{place-self:end;justify-self:end;background-color:red}.input[type=range]{color:red}.input[type=range]:after{content:attr(value)}.input[type=textarea]::-webkit-scrollbar{display:none!important}.no-scrollbar{-ms-overflow-style:none!important;scrollbar-width:none!important}:host{display:flex;flex-direction:column;flex:1 1 auto;min-width:0}.input-wrapper{position:relative;min-height:fit-content;display:flex;flex:1 1 auto;min-width:0;flex-direction:column;border-bottom:none}.tags-container{display:flex;flex-wrap:wrap;gap:.375rem;margin-top:.25rem}.tag-chip{display:inline-flex;align-items:center;gap:.25rem;padding:.25rem .5rem;background-color:color-mix(in srgb,var(--primary-color) 10%,transparent 90%);color:var(--primary-color);border-radius:9999px;font-size:.875rem;font-weight:500;line-height:1}.tag-remove-btn{display:inline-flex;align-items:center;justify-content:center;border:none;background:transparent;color:inherit;cursor:pointer;padding:0;border-radius:50%;width:1.125rem;height:1.125rem;opacity:.7;transition:opacity .15s ease,background-color .15s ease}::ng-deep .tag-select-input-wrapper span.custom-datalist-arrow{top:.8rem}.tag-remove-btn:hover{opacity:1;background-color:#0000001a}.tag-remove-btn .material-symbols{font-size:1rem}\n"] }]
+                    ], template: "<div class=\"input-wrapper\" [attr.data-state]=\"state()\">\r\n    <!-- Champ de recherche enfant -->\r\n    <chr-input [id]=\"id()\" [name]=\"name()\" type=\"text\" [label]=\"label()\" [displayValue]=\"displayValue() ?? ''\"\r\n        [required]=\"required()\" (focus)=\"focus.emit()\" (blur)=\"blur.emit()\" [state]=\"state()\"\r\n        [errors]=\"ngControl()?.errors\" [value]=\"displayValue()\" (input)=\"dl.open()\">\r\n\r\n        <chr-input-indicators>\r\n            <ng-content select=\"chr-input-indicators\"></ng-content>\r\n            <span class=\"material-symbols\">data_array</span>\r\n            <span style=\"width: 1rem;\"></span>\r\n        </chr-input-indicators>\r\n        <chr-input-data-overlay>\r\n            <chr-data-list #dl [for]=\"'' + name()\" [suggestions]=\"filteredOptions()\" [selectOnFullMatch]=\"true\"\r\n                [display]=\"display()\" (optionSelected)=\"selectOption($event.value)\">\r\n            </chr-data-list>\r\n            <ng-content select=\"chr-input-data-overlay\">\r\n            </ng-content>\r\n        </chr-input-data-overlay>\r\n        <chr-input-data>\r\n\r\n        </chr-input-data>\r\n    </chr-input>\r\n</div>\r\n\r\n<!-- No-height slot. Should be used for \"overlay\" type data-->\r\n<div class=\"data-overlay\">\r\n    @if(isTouched()){\r\n    @let error = getLastError();\r\n    @if(error != null){\r\n    <div class=\"error card glass\">\r\n        {{getLastError() ?? null}}\r\n    </div>\r\n    }\r\n    }\r\n    <ng-content select=\"chr-input-data-overlay\">\r\n    </ng-content>\r\n</div>\r\n<!-- Default \"space-consuming\" Content Projection -->\r\n<div class=\"data\">\r\n    <!-- Affichage des Tags (Chips) -->\r\n    @if (selectedItems().length > 0) {\r\n    <div class=\"tags-container\">\r\n        @for (item of selectedItems(); track $index) {\r\n        <div class=\"tag-chip\">\r\n            <span class=\"tag-label\">{{ display()(item) }}</span>\r\n            <button type=\"button\" class=\"tag-remove-btn\" (click)=\"removeTag($index)\"\r\n                [attr.aria-label]=\"'Supprimer ' + display()(item)\">\r\n                <span class=\"material-symbols\">close</span>\r\n            </button>\r\n        </div>\r\n        }\r\n    </div>\r\n    }\r\n    <ng-content select=\"chr-input-data\">\r\n        <!-- Fallback to default projection-->\r\n        <ng-content></ng-content>\r\n    </ng-content>\r\n</div>", styles: [".input-wrapper{--chr-input-current-color: var(--text-neutral-color);position:relative;box-sizing:border-box;min-height:1.5rem;max-height:1.5rem;height:1.5rem;display:flex;flex:1 1 auto;min-width:0;flex-direction:column;border-bottom:.125rem solid var(--chr-input-current-color)}.input-wrapper .input-row{display:flex;flex:1 1 auto;flex-wrap:nowrap;height:inherit}.input-wrapper .input{min-width:0;height:inherit;color:var(--text-color)}.input-wrapper .indicators{display:flex;flex-direction:row;flex:1 1 auto;flex-wrap:nowrap;gap:.25rem;max-width:fit-content;height:inherit;align-items:center;color:var(--chr-input-current-color);font-size:.75rem!important}.input-wrapper .input~.indicators{position:absolute;top:0;right:0;visibility:hidden;opacity:0;transform:translate(1rem);transition:opacity .15s ease-in-out,transform .15s ease-in-out,width .15s ease-in-out .15s}.input-wrapper:focus-within .input~.indicators,.input-wrapper:hover .input~.indicators,.input-wrapper .input~.indicators[data-indicators-open=true]{position:relative;visibility:visible;padding-left:.125rem;opacity:1;transform:translate(0)}:is(.input-wrapper:focus-within .input~.indicators,.input-wrapper:hover .input~.indicators,.input-wrapper .input~.indicators[data-indicators-open=true]):has(chr-input-indicators:not(:empty)),:is(.input-wrapper:focus-within .input~.indicators,.input-wrapper:hover .input~.indicators,.input-wrapper .input~.indicators[data-indicators-open=true]):has(:nth-child(2)){border-left:.125rem solid color-mix(in srgb,var(--chr-input-current-color) 40%,transparent 60%)}.input-wrapper:focus-within .input,.input-wrapper:hover .input,.input-wrapper:has(.indicators[data-indicators-open=true]) .input{padding-right:.125rem}.input-wrapper .input:has(~.indicators:empty){padding-right:0}.input-wrapper .input~.indicators:empty{width:0;border-left:none;padding-left:0}.input-wrapper .tooltip-indicator{cursor:pointer;font-size:1.25rem;padding:0;color:var(--chr-input-current-color)}.input-wrapper .tooltip-indicator:hover{color:var(--primary-color)}.input-wrapper .required{color:var(--error-color)}.input-wrapper:has(.input:focus){--chr-input-current-color: var(--primary-color)}.input-wrapper[data-state=IDLE]{--chr-input-current-color: color-mix(in srgb, var(--text-neutral-color) 90%, transparent 10%) }.input-wrapper[data-state=INVALID],.input-wrapper[data-state=DISABLED]{--chr-input-current-color: var(--error-color)}.input-wrapper[data-state=PENDING],.input-wrapper[data-state=WARNING]{--chr-input-current-color: var(--warn-color)}.input-wrapper label{position:absolute;pointer-events:none;top:50%;color:var(--chr-input-current-color);transform:translateY(-50%);transition:transfom 125ms ease-in-out,position 125ms ease-in-out,top 125ms ease-in-out,font-size 125ms ease-in-out,left 125ms ease-in-out;font-size:.85rem;font-weight:700}.input-wrapper label:not(:empty):after{position:absolute;content:\":\"}.input-wrapper label:has(~.input:focus),.input-wrapper label:has(~.input:not(:placeholder-shown)){top:-.25rem;left:0;font-size:75%}.input-wrapper .input{width:100%;outline:none;border:none;padding:0;background-color:transparent}.data-overlay{height:0;grid-area:data / data;display:flex;flex-direction:column;flex-wrap:nowrap}.data{grid-area:data / data;display:flex;flex-direction:column;flex-wrap:nowrap}.error{grid-area:data / data;display:flex;flex:1 1 auto;flex-direction:row;flex-wrap:wrap;min-width:calc(100% - .5rem);max-width:min-content;color:var(--error-color);padding:.25rem;border-top-left-radius:0;border-top-right-radius:0;background-color:var(--background-color);z-index:2}.error:empty{display:none}.input[disabled]{--chr-input-disabled-neutral-muted-color: color-mix(in srgb, var(--text-neutral-color) 15%, transparent 85%);background:repeating-linear-gradient(45deg,var(--chr-input-disabled-neutral-muted-color),var(--chr-input-disabled-neutral-muted-color) .625rem,var(--background-color) .625rem,var(--background-color) 1.25rem);cursor:not-allowed}.input{accent-color:var(--primary-color)}.input ::-webkit-datetime-edit,.input ::-webkit-datetime-edit-fields-wrapper,.input ::-webkit-datetime-edit-text,.input ::-webkit-datetime-edit-month-field,.input ::-webkit-datetime-edit-day-field,.input ::-webkit-datetime-edit-year-field,.input ::-webkit-inner-spin-button,.input ::-webkit-calendar-picker-indicator{place-self:end;justify-self:end;background-color:red}.input[type=range]{color:red}.input[type=range]:after{content:attr(value)}.input[type=textarea]::-webkit-scrollbar{display:none!important}.no-scrollbar{-ms-overflow-style:none!important;scrollbar-width:none!important}:host{display:flex;flex-direction:column;flex:1 1 auto;min-width:0}.input-wrapper{position:relative;min-height:fit-content;display:flex;flex:1 1 auto;min-width:0;flex-direction:column;border-bottom:none}.tags-container{display:flex;flex-wrap:wrap;gap:.375rem;margin-top:.25rem}.tag-chip{display:inline-flex;align-items:center;gap:.25rem;padding:.25rem .5rem;background-color:color-mix(in srgb,var(--primary-color) 10%,transparent 90%);color:var(--primary-color);border-radius:9999px;font-size:.875rem;font-weight:500;line-height:1}.tag-remove-btn{display:inline-flex;align-items:center;justify-content:center;border:none;background:transparent;color:inherit;cursor:pointer;padding:0;border-radius:50%;width:1.125rem;height:1.125rem;opacity:.7;transition:opacity .15s ease,background-color .15s ease}::ng-deep .tag-select-input-wrapper span.custom-datalist-arrow{top:.8rem}.tag-remove-btn:hover{opacity:1;background-color:#0000001a}.tag-remove-btn .material-symbols{font-size:1rem}\n"] }]
         }], ctorParameters: () => [], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], display: [{ type: i0.Input, args: [{ isSignal: true, alias: "display", required: false }] }] } });
 
 class ChrTextAreaInputComponent extends ChrInputComponent {
@@ -5057,11 +5061,11 @@ class ChrTextAreaInputComponent extends ChrInputComponent {
         };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: ChrTextAreaInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: ChrTextAreaInputComponent, isStandalone: true, selector: "chr-textarea-input", providers: [], usesInheritance: true, ngImport: i0, template: "<div class=\"input-wrapper\" [attr.data-state]=\"state()\">\n    <div class=\"input-row\">\n        <label [for]=\"id()\">\n            {{label()}}\n            @if(required()){\n            <span class=\"required\">*</span>\n            }\n        </label>\n        <textarea #textArea class=\"input no-scrollbar !resize-none\" #htmlInput [id]=\"id()\" [name]=\"name()\"\n            placeholder=\" \" [value]=\"displayValue()\" (focus)=\"focus.emit()\" (blur)=\"blur.emit()\"\n            [disabled]=\"isDisabled()\" (input)=\"resize(textArea);input.emit($event);onChange($event)\"\n            (keyup.enter)=\"enter.emit()\">\n            </textarea>\n        <span class=\"indicators\">\n            <!-- Indicators projection -->\n            <ng-content select=\"chr-input-indicators\">\n                <span></span>\n                <span class=\"material-symbols\">format_paragraph</span>\n            </ng-content>\n            @if(tooltip() != null){\n            <button type=\"button\" class=\"material-symbols tooltip-indicator\"\n                [chrPopover]=\"providedTooltipTemplate() || tooltipTemplate\" [chrPopoverOnHover]=\"false\"\n                [chrPopoverPosition]=\"tooltipPosition()\">info</button>\n            }\n        </span>\n    </div>\n</div>\n<!-- No-height slot. Should be used for \"overlay\" type data-->\n<div class=\"data-overlay\">\n    @if(isTouched()){\n    @let error = getLastError();\n    @if(error != null){\n    <div class=\"error card glass\">\n        {{getLastError() ?? null}}\n    </div>\n    }\n    }\n    <ng-content select=\"chr-input-data-overlay\">\n    </ng-content>\n</div>\n\n<!-- Default \"space-consuming\" Content Projection -->\n<div class=\"data\">\n    <ng-content select=\"chr-input-data\">\n        <!-- Fallback to default projection-->\n        <ng-content></ng-content>\n    </ng-content>\n</div>\n<ng-template #tooltipTemplate>\n    <span>{{tooltip()}}</span>\n</ng-template>", styles: [":host{display:flex;flex-direction:column;flex:1 1 auto;min-width:0}.input-wrapper{--chr-input-current-color: var(--text-neutral-color);position:relative;box-sizing:border-box;min-height:1.5rem;max-height:1.5rem;height:1.5rem;display:flex;flex:1 1 auto;min-width:0;flex-direction:column;border-bottom:.125rem solid var(--chr-input-current-color)}.input-wrapper .input-row{display:flex;flex:1 1 auto;flex-wrap:nowrap;height:inherit}.input-wrapper .input{min-width:0;height:inherit;color:var(--text-color)}.input-wrapper .indicators{display:flex;flex-direction:row;flex:1 1 auto;flex-wrap:nowrap;gap:.25rem;max-width:fit-content;height:inherit;align-items:center;color:var(--chr-input-current-color);font-size:.75rem!important}.input-wrapper .input~.indicators{position:absolute;top:0;right:0;visibility:hidden;opacity:0;transform:translate(1rem);transition:opacity .15s ease-in-out,transform .15s ease-in-out,width .15s ease-in-out .15s}.input-wrapper:focus-within .input~.indicators,.input-wrapper:hover .input~.indicators,.input-wrapper .input~.indicators[data-indicators-open=true]{position:relative;visibility:visible;padding-left:.125rem;opacity:1;transform:translate(0)}:is(.input-wrapper:focus-within .input~.indicators,.input-wrapper:hover .input~.indicators,.input-wrapper .input~.indicators[data-indicators-open=true]):has(chr-input-indicators:not(:empty)),:is(.input-wrapper:focus-within .input~.indicators,.input-wrapper:hover .input~.indicators,.input-wrapper .input~.indicators[data-indicators-open=true]):has(:nth-child(2)){border-left:.125rem solid color-mix(in srgb,var(--chr-input-current-color) 40%,transparent 60%)}.input-wrapper:focus-within .input,.input-wrapper:hover .input,.input-wrapper:has(.indicators[data-indicators-open=true]) .input{padding-right:.125rem}.input-wrapper .input:has(~.indicators:empty){padding-right:0}.input-wrapper .input~.indicators:empty{width:0;border-left:none;padding-left:0}.input-wrapper .tooltip-indicator{cursor:pointer;font-size:1.25rem;padding:0;color:var(--chr-input-current-color)}.input-wrapper .tooltip-indicator:hover{color:var(--primary-color)}.input-wrapper .required{color:var(--error-color)}.input-wrapper:has(.input:focus){--chr-input-current-color: var(--primary-color)}.input-wrapper[data-state=IDLE]{--chr-input-current-color: color-mix(in srgb, var(--text-neutral-color) 90%, transparent 10%) }.input-wrapper[data-state=INVALID],.input-wrapper[data-state=DISABLED]{--chr-input-current-color: var(--error-color)}.input-wrapper[data-state=PENDING],.input-wrapper[data-state=WARNING]{--chr-input-current-color: var(--warn-color)}.input-wrapper label{position:absolute;pointer-events:none;top:50%;color:var(--chr-input-current-color);transform:translateY(-50%);transition:transfom 125ms ease-in-out,position 125ms ease-in-out,top 125ms ease-in-out,font-size 125ms ease-in-out,left 125ms ease-in-out;font-size:.85rem;font-weight:700}.input-wrapper label:not(:empty):after{position:absolute;content:\":\"}.input-wrapper label:has(~.input:focus),.input-wrapper label:has(~.input:not(:placeholder-shown)){top:-.25rem;left:0;font-size:75%}.input-wrapper .input{width:100%;outline:none;border:none;padding:0;background-color:transparent}.data-overlay{height:0;grid-area:data / data;display:flex;flex-direction:column;flex-wrap:nowrap}.data{grid-area:data / data;display:flex;flex-direction:column;flex-wrap:nowrap}.error{grid-area:data / data;display:flex;flex:1 1 auto;flex-direction:row;flex-wrap:wrap;min-width:100%;max-width:min-content;color:var(--error-color);padding:.25rem;border-top-left-radius:0;border-top-right-radius:0;background-color:var(--background-color);z-index:2}.error:empty{display:none}.input[disabled]{--chr-input-disabled-neutral-muted-color: color-mix(in srgb, var(--text-neutral-color) 15%, transparent 85%);background:repeating-linear-gradient(45deg,var(--chr-input-disabled-neutral-muted-color),var(--chr-input-disabled-neutral-muted-color) .625rem,var(--background-color) .625rem,var(--background-color) 1.25rem);cursor:not-allowed}.input{accent-color:var(--primary-color)}.input ::-webkit-datetime-edit,.input ::-webkit-datetime-edit-fields-wrapper,.input ::-webkit-datetime-edit-text,.input ::-webkit-datetime-edit-month-field,.input ::-webkit-datetime-edit-day-field,.input ::-webkit-datetime-edit-year-field,.input ::-webkit-inner-spin-button,.input ::-webkit-calendar-picker-indicator{place-self:end;justify-self:end;background-color:red}.input[type=range]{color:red}.input[type=range]:after{content:attr(value)}.input[type=textarea]::-webkit-scrollbar{display:none!important}.no-scrollbar{-ms-overflow-style:none!important;scrollbar-width:none!important}:host{display:flex;flex-direction:column;flex:1 1 auto;justify-self:stretch;align-self:center;min-width:0}.input-wrapper{max-height:none;height:auto}.input-wrapper .input{height:1.5rem}\n"], dependencies: [{ kind: "directive", type: ChrPopoverDirective, selector: "[chrPopover]", inputs: ["chrPopover", "chrPopoverPosition", "chrPopoverData", "chrPopoverOnHover"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: ChrTextAreaInputComponent, isStandalone: true, selector: "chr-textarea-input", providers: [], usesInheritance: true, ngImport: i0, template: "<div class=\"input-wrapper\" [attr.data-state]=\"state()\">\n    <div class=\"input-row\">\n        <label [for]=\"id()\">\n            {{label()}}\n            @if(required()){\n            <span class=\"required\">*</span>\n            }\n        </label>\n        <textarea #textArea class=\"input no-scrollbar !resize-none\" #htmlInput [id]=\"id()\" [name]=\"name()\"\n            placeholder=\" \" [value]=\"displayValue()\" (focus)=\"focus.emit()\" (blur)=\"blur.emit()\"\n            [disabled]=\"isDisabled()\" (input)=\"resize(textArea);input.emit($event);onChange($event)\"\n            (keyup.enter)=\"enter.emit()\">\n            </textarea>\n        <span class=\"indicators\">\n            <!-- Indicators projection -->\n            <ng-content select=\"chr-input-indicators\">\n                <span></span>\n                <span class=\"material-symbols\">format_paragraph</span>\n            </ng-content>\n            @if(tooltip() != null){\n            <button type=\"button\" class=\"material-symbols tooltip-indicator\"\n                [chrPopover]=\"providedTooltipTemplate() || tooltipTemplate\" [chrPopoverOnHover]=\"false\"\n                [chrPopoverPosition]=\"tooltipPosition()\">info</button>\n            }\n        </span>\n    </div>\n</div>\n<!-- No-height slot. Should be used for \"overlay\" type data-->\n<div class=\"data-overlay\">\n    @if(isTouched()){\n    @let error = getLastError();\n    @if(error != null){\n    <div class=\"error card glass\">\n        {{getLastError() ?? null}}\n    </div>\n    }\n    }\n    <ng-content select=\"chr-input-data-overlay\">\n    </ng-content>\n</div>\n\n<!-- Default \"space-consuming\" Content Projection -->\n<div class=\"data\">\n    <ng-content select=\"chr-input-data\">\n        <!-- Fallback to default projection-->\n        <ng-content></ng-content>\n    </ng-content>\n</div>\n<ng-template #tooltipTemplate>\n    <span>{{tooltip()}}</span>\n</ng-template>", styles: [":host{display:flex;flex-direction:column;flex:1 1 auto;min-width:0}.input-wrapper{--chr-input-current-color: var(--text-neutral-color);position:relative;box-sizing:border-box;min-height:1.5rem;max-height:1.5rem;height:1.5rem;display:flex;flex:1 1 auto;min-width:0;flex-direction:column;border-bottom:.125rem solid var(--chr-input-current-color)}.input-wrapper .input-row{display:flex;flex:1 1 auto;flex-wrap:nowrap;height:inherit}.input-wrapper .input{min-width:0;height:inherit;color:var(--text-color)}.input-wrapper .indicators{display:flex;flex-direction:row;flex:1 1 auto;flex-wrap:nowrap;gap:.25rem;max-width:fit-content;height:inherit;align-items:center;color:var(--chr-input-current-color);font-size:.75rem!important}.input-wrapper .input~.indicators{position:absolute;top:0;right:0;visibility:hidden;opacity:0;transform:translate(1rem);transition:opacity .15s ease-in-out,transform .15s ease-in-out,width .15s ease-in-out .15s}.input-wrapper:focus-within .input~.indicators,.input-wrapper:hover .input~.indicators,.input-wrapper .input~.indicators[data-indicators-open=true]{position:relative;visibility:visible;padding-left:.125rem;opacity:1;transform:translate(0)}:is(.input-wrapper:focus-within .input~.indicators,.input-wrapper:hover .input~.indicators,.input-wrapper .input~.indicators[data-indicators-open=true]):has(chr-input-indicators:not(:empty)),:is(.input-wrapper:focus-within .input~.indicators,.input-wrapper:hover .input~.indicators,.input-wrapper .input~.indicators[data-indicators-open=true]):has(:nth-child(2)){border-left:.125rem solid color-mix(in srgb,var(--chr-input-current-color) 40%,transparent 60%)}.input-wrapper:focus-within .input,.input-wrapper:hover .input,.input-wrapper:has(.indicators[data-indicators-open=true]) .input{padding-right:.125rem}.input-wrapper .input:has(~.indicators:empty){padding-right:0}.input-wrapper .input~.indicators:empty{width:0;border-left:none;padding-left:0}.input-wrapper .tooltip-indicator{cursor:pointer;font-size:1.25rem;padding:0;color:var(--chr-input-current-color)}.input-wrapper .tooltip-indicator:hover{color:var(--primary-color)}.input-wrapper .required{color:var(--error-color)}.input-wrapper:has(.input:focus){--chr-input-current-color: var(--primary-color)}.input-wrapper[data-state=IDLE]{--chr-input-current-color: color-mix(in srgb, var(--text-neutral-color) 90%, transparent 10%) }.input-wrapper[data-state=INVALID],.input-wrapper[data-state=DISABLED]{--chr-input-current-color: var(--error-color)}.input-wrapper[data-state=PENDING],.input-wrapper[data-state=WARNING]{--chr-input-current-color: var(--warn-color)}.input-wrapper label{position:absolute;pointer-events:none;top:50%;color:var(--chr-input-current-color);transform:translateY(-50%);transition:transfom 125ms ease-in-out,position 125ms ease-in-out,top 125ms ease-in-out,font-size 125ms ease-in-out,left 125ms ease-in-out;font-size:.85rem;font-weight:700}.input-wrapper label:not(:empty):after{position:absolute;content:\":\"}.input-wrapper label:has(~.input:focus),.input-wrapper label:has(~.input:not(:placeholder-shown)){top:-.25rem;left:0;font-size:75%}.input-wrapper .input{width:100%;outline:none;border:none;padding:0;background-color:transparent}.data-overlay{height:0;grid-area:data / data;display:flex;flex-direction:column;flex-wrap:nowrap}.data{grid-area:data / data;display:flex;flex-direction:column;flex-wrap:nowrap}.error{grid-area:data / data;display:flex;flex:1 1 auto;flex-direction:row;flex-wrap:wrap;min-width:calc(100% - .5rem);max-width:min-content;color:var(--error-color);padding:.25rem;border-top-left-radius:0;border-top-right-radius:0;background-color:var(--background-color);z-index:2}.error:empty{display:none}.input[disabled]{--chr-input-disabled-neutral-muted-color: color-mix(in srgb, var(--text-neutral-color) 15%, transparent 85%);background:repeating-linear-gradient(45deg,var(--chr-input-disabled-neutral-muted-color),var(--chr-input-disabled-neutral-muted-color) .625rem,var(--background-color) .625rem,var(--background-color) 1.25rem);cursor:not-allowed}.input{accent-color:var(--primary-color)}.input ::-webkit-datetime-edit,.input ::-webkit-datetime-edit-fields-wrapper,.input ::-webkit-datetime-edit-text,.input ::-webkit-datetime-edit-month-field,.input ::-webkit-datetime-edit-day-field,.input ::-webkit-datetime-edit-year-field,.input ::-webkit-inner-spin-button,.input ::-webkit-calendar-picker-indicator{place-self:end;justify-self:end;background-color:red}.input[type=range]{color:red}.input[type=range]:after{content:attr(value)}.input[type=textarea]::-webkit-scrollbar{display:none!important}.no-scrollbar{-ms-overflow-style:none!important;scrollbar-width:none!important}:host{display:flex;flex-direction:column;flex:1 1 auto;justify-self:stretch;align-self:center;min-width:0}.input-wrapper{max-height:none;height:auto}.input-wrapper .input{height:1.5rem}\n"], dependencies: [{ kind: "directive", type: ChrPopoverDirective, selector: "[chrPopover]", inputs: ["chrPopover", "chrPopoverPosition", "chrPopoverData", "chrPopoverOnHover"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: ChrTextAreaInputComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'chr-textarea-input', imports: [ChrPopoverDirective], providers: [], template: "<div class=\"input-wrapper\" [attr.data-state]=\"state()\">\n    <div class=\"input-row\">\n        <label [for]=\"id()\">\n            {{label()}}\n            @if(required()){\n            <span class=\"required\">*</span>\n            }\n        </label>\n        <textarea #textArea class=\"input no-scrollbar !resize-none\" #htmlInput [id]=\"id()\" [name]=\"name()\"\n            placeholder=\" \" [value]=\"displayValue()\" (focus)=\"focus.emit()\" (blur)=\"blur.emit()\"\n            [disabled]=\"isDisabled()\" (input)=\"resize(textArea);input.emit($event);onChange($event)\"\n            (keyup.enter)=\"enter.emit()\">\n            </textarea>\n        <span class=\"indicators\">\n            <!-- Indicators projection -->\n            <ng-content select=\"chr-input-indicators\">\n                <span></span>\n                <span class=\"material-symbols\">format_paragraph</span>\n            </ng-content>\n            @if(tooltip() != null){\n            <button type=\"button\" class=\"material-symbols tooltip-indicator\"\n                [chrPopover]=\"providedTooltipTemplate() || tooltipTemplate\" [chrPopoverOnHover]=\"false\"\n                [chrPopoverPosition]=\"tooltipPosition()\">info</button>\n            }\n        </span>\n    </div>\n</div>\n<!-- No-height slot. Should be used for \"overlay\" type data-->\n<div class=\"data-overlay\">\n    @if(isTouched()){\n    @let error = getLastError();\n    @if(error != null){\n    <div class=\"error card glass\">\n        {{getLastError() ?? null}}\n    </div>\n    }\n    }\n    <ng-content select=\"chr-input-data-overlay\">\n    </ng-content>\n</div>\n\n<!-- Default \"space-consuming\" Content Projection -->\n<div class=\"data\">\n    <ng-content select=\"chr-input-data\">\n        <!-- Fallback to default projection-->\n        <ng-content></ng-content>\n    </ng-content>\n</div>\n<ng-template #tooltipTemplate>\n    <span>{{tooltip()}}</span>\n</ng-template>", styles: [":host{display:flex;flex-direction:column;flex:1 1 auto;min-width:0}.input-wrapper{--chr-input-current-color: var(--text-neutral-color);position:relative;box-sizing:border-box;min-height:1.5rem;max-height:1.5rem;height:1.5rem;display:flex;flex:1 1 auto;min-width:0;flex-direction:column;border-bottom:.125rem solid var(--chr-input-current-color)}.input-wrapper .input-row{display:flex;flex:1 1 auto;flex-wrap:nowrap;height:inherit}.input-wrapper .input{min-width:0;height:inherit;color:var(--text-color)}.input-wrapper .indicators{display:flex;flex-direction:row;flex:1 1 auto;flex-wrap:nowrap;gap:.25rem;max-width:fit-content;height:inherit;align-items:center;color:var(--chr-input-current-color);font-size:.75rem!important}.input-wrapper .input~.indicators{position:absolute;top:0;right:0;visibility:hidden;opacity:0;transform:translate(1rem);transition:opacity .15s ease-in-out,transform .15s ease-in-out,width .15s ease-in-out .15s}.input-wrapper:focus-within .input~.indicators,.input-wrapper:hover .input~.indicators,.input-wrapper .input~.indicators[data-indicators-open=true]{position:relative;visibility:visible;padding-left:.125rem;opacity:1;transform:translate(0)}:is(.input-wrapper:focus-within .input~.indicators,.input-wrapper:hover .input~.indicators,.input-wrapper .input~.indicators[data-indicators-open=true]):has(chr-input-indicators:not(:empty)),:is(.input-wrapper:focus-within .input~.indicators,.input-wrapper:hover .input~.indicators,.input-wrapper .input~.indicators[data-indicators-open=true]):has(:nth-child(2)){border-left:.125rem solid color-mix(in srgb,var(--chr-input-current-color) 40%,transparent 60%)}.input-wrapper:focus-within .input,.input-wrapper:hover .input,.input-wrapper:has(.indicators[data-indicators-open=true]) .input{padding-right:.125rem}.input-wrapper .input:has(~.indicators:empty){padding-right:0}.input-wrapper .input~.indicators:empty{width:0;border-left:none;padding-left:0}.input-wrapper .tooltip-indicator{cursor:pointer;font-size:1.25rem;padding:0;color:var(--chr-input-current-color)}.input-wrapper .tooltip-indicator:hover{color:var(--primary-color)}.input-wrapper .required{color:var(--error-color)}.input-wrapper:has(.input:focus){--chr-input-current-color: var(--primary-color)}.input-wrapper[data-state=IDLE]{--chr-input-current-color: color-mix(in srgb, var(--text-neutral-color) 90%, transparent 10%) }.input-wrapper[data-state=INVALID],.input-wrapper[data-state=DISABLED]{--chr-input-current-color: var(--error-color)}.input-wrapper[data-state=PENDING],.input-wrapper[data-state=WARNING]{--chr-input-current-color: var(--warn-color)}.input-wrapper label{position:absolute;pointer-events:none;top:50%;color:var(--chr-input-current-color);transform:translateY(-50%);transition:transfom 125ms ease-in-out,position 125ms ease-in-out,top 125ms ease-in-out,font-size 125ms ease-in-out,left 125ms ease-in-out;font-size:.85rem;font-weight:700}.input-wrapper label:not(:empty):after{position:absolute;content:\":\"}.input-wrapper label:has(~.input:focus),.input-wrapper label:has(~.input:not(:placeholder-shown)){top:-.25rem;left:0;font-size:75%}.input-wrapper .input{width:100%;outline:none;border:none;padding:0;background-color:transparent}.data-overlay{height:0;grid-area:data / data;display:flex;flex-direction:column;flex-wrap:nowrap}.data{grid-area:data / data;display:flex;flex-direction:column;flex-wrap:nowrap}.error{grid-area:data / data;display:flex;flex:1 1 auto;flex-direction:row;flex-wrap:wrap;min-width:100%;max-width:min-content;color:var(--error-color);padding:.25rem;border-top-left-radius:0;border-top-right-radius:0;background-color:var(--background-color);z-index:2}.error:empty{display:none}.input[disabled]{--chr-input-disabled-neutral-muted-color: color-mix(in srgb, var(--text-neutral-color) 15%, transparent 85%);background:repeating-linear-gradient(45deg,var(--chr-input-disabled-neutral-muted-color),var(--chr-input-disabled-neutral-muted-color) .625rem,var(--background-color) .625rem,var(--background-color) 1.25rem);cursor:not-allowed}.input{accent-color:var(--primary-color)}.input ::-webkit-datetime-edit,.input ::-webkit-datetime-edit-fields-wrapper,.input ::-webkit-datetime-edit-text,.input ::-webkit-datetime-edit-month-field,.input ::-webkit-datetime-edit-day-field,.input ::-webkit-datetime-edit-year-field,.input ::-webkit-inner-spin-button,.input ::-webkit-calendar-picker-indicator{place-self:end;justify-self:end;background-color:red}.input[type=range]{color:red}.input[type=range]:after{content:attr(value)}.input[type=textarea]::-webkit-scrollbar{display:none!important}.no-scrollbar{-ms-overflow-style:none!important;scrollbar-width:none!important}:host{display:flex;flex-direction:column;flex:1 1 auto;justify-self:stretch;align-self:center;min-width:0}.input-wrapper{max-height:none;height:auto}.input-wrapper .input{height:1.5rem}\n"] }]
+            args: [{ selector: 'chr-textarea-input', imports: [ChrPopoverDirective], providers: [], template: "<div class=\"input-wrapper\" [attr.data-state]=\"state()\">\n    <div class=\"input-row\">\n        <label [for]=\"id()\">\n            {{label()}}\n            @if(required()){\n            <span class=\"required\">*</span>\n            }\n        </label>\n        <textarea #textArea class=\"input no-scrollbar !resize-none\" #htmlInput [id]=\"id()\" [name]=\"name()\"\n            placeholder=\" \" [value]=\"displayValue()\" (focus)=\"focus.emit()\" (blur)=\"blur.emit()\"\n            [disabled]=\"isDisabled()\" (input)=\"resize(textArea);input.emit($event);onChange($event)\"\n            (keyup.enter)=\"enter.emit()\">\n            </textarea>\n        <span class=\"indicators\">\n            <!-- Indicators projection -->\n            <ng-content select=\"chr-input-indicators\">\n                <span></span>\n                <span class=\"material-symbols\">format_paragraph</span>\n            </ng-content>\n            @if(tooltip() != null){\n            <button type=\"button\" class=\"material-symbols tooltip-indicator\"\n                [chrPopover]=\"providedTooltipTemplate() || tooltipTemplate\" [chrPopoverOnHover]=\"false\"\n                [chrPopoverPosition]=\"tooltipPosition()\">info</button>\n            }\n        </span>\n    </div>\n</div>\n<!-- No-height slot. Should be used for \"overlay\" type data-->\n<div class=\"data-overlay\">\n    @if(isTouched()){\n    @let error = getLastError();\n    @if(error != null){\n    <div class=\"error card glass\">\n        {{getLastError() ?? null}}\n    </div>\n    }\n    }\n    <ng-content select=\"chr-input-data-overlay\">\n    </ng-content>\n</div>\n\n<!-- Default \"space-consuming\" Content Projection -->\n<div class=\"data\">\n    <ng-content select=\"chr-input-data\">\n        <!-- Fallback to default projection-->\n        <ng-content></ng-content>\n    </ng-content>\n</div>\n<ng-template #tooltipTemplate>\n    <span>{{tooltip()}}</span>\n</ng-template>", styles: [":host{display:flex;flex-direction:column;flex:1 1 auto;min-width:0}.input-wrapper{--chr-input-current-color: var(--text-neutral-color);position:relative;box-sizing:border-box;min-height:1.5rem;max-height:1.5rem;height:1.5rem;display:flex;flex:1 1 auto;min-width:0;flex-direction:column;border-bottom:.125rem solid var(--chr-input-current-color)}.input-wrapper .input-row{display:flex;flex:1 1 auto;flex-wrap:nowrap;height:inherit}.input-wrapper .input{min-width:0;height:inherit;color:var(--text-color)}.input-wrapper .indicators{display:flex;flex-direction:row;flex:1 1 auto;flex-wrap:nowrap;gap:.25rem;max-width:fit-content;height:inherit;align-items:center;color:var(--chr-input-current-color);font-size:.75rem!important}.input-wrapper .input~.indicators{position:absolute;top:0;right:0;visibility:hidden;opacity:0;transform:translate(1rem);transition:opacity .15s ease-in-out,transform .15s ease-in-out,width .15s ease-in-out .15s}.input-wrapper:focus-within .input~.indicators,.input-wrapper:hover .input~.indicators,.input-wrapper .input~.indicators[data-indicators-open=true]{position:relative;visibility:visible;padding-left:.125rem;opacity:1;transform:translate(0)}:is(.input-wrapper:focus-within .input~.indicators,.input-wrapper:hover .input~.indicators,.input-wrapper .input~.indicators[data-indicators-open=true]):has(chr-input-indicators:not(:empty)),:is(.input-wrapper:focus-within .input~.indicators,.input-wrapper:hover .input~.indicators,.input-wrapper .input~.indicators[data-indicators-open=true]):has(:nth-child(2)){border-left:.125rem solid color-mix(in srgb,var(--chr-input-current-color) 40%,transparent 60%)}.input-wrapper:focus-within .input,.input-wrapper:hover .input,.input-wrapper:has(.indicators[data-indicators-open=true]) .input{padding-right:.125rem}.input-wrapper .input:has(~.indicators:empty){padding-right:0}.input-wrapper .input~.indicators:empty{width:0;border-left:none;padding-left:0}.input-wrapper .tooltip-indicator{cursor:pointer;font-size:1.25rem;padding:0;color:var(--chr-input-current-color)}.input-wrapper .tooltip-indicator:hover{color:var(--primary-color)}.input-wrapper .required{color:var(--error-color)}.input-wrapper:has(.input:focus){--chr-input-current-color: var(--primary-color)}.input-wrapper[data-state=IDLE]{--chr-input-current-color: color-mix(in srgb, var(--text-neutral-color) 90%, transparent 10%) }.input-wrapper[data-state=INVALID],.input-wrapper[data-state=DISABLED]{--chr-input-current-color: var(--error-color)}.input-wrapper[data-state=PENDING],.input-wrapper[data-state=WARNING]{--chr-input-current-color: var(--warn-color)}.input-wrapper label{position:absolute;pointer-events:none;top:50%;color:var(--chr-input-current-color);transform:translateY(-50%);transition:transfom 125ms ease-in-out,position 125ms ease-in-out,top 125ms ease-in-out,font-size 125ms ease-in-out,left 125ms ease-in-out;font-size:.85rem;font-weight:700}.input-wrapper label:not(:empty):after{position:absolute;content:\":\"}.input-wrapper label:has(~.input:focus),.input-wrapper label:has(~.input:not(:placeholder-shown)){top:-.25rem;left:0;font-size:75%}.input-wrapper .input{width:100%;outline:none;border:none;padding:0;background-color:transparent}.data-overlay{height:0;grid-area:data / data;display:flex;flex-direction:column;flex-wrap:nowrap}.data{grid-area:data / data;display:flex;flex-direction:column;flex-wrap:nowrap}.error{grid-area:data / data;display:flex;flex:1 1 auto;flex-direction:row;flex-wrap:wrap;min-width:calc(100% - .5rem);max-width:min-content;color:var(--error-color);padding:.25rem;border-top-left-radius:0;border-top-right-radius:0;background-color:var(--background-color);z-index:2}.error:empty{display:none}.input[disabled]{--chr-input-disabled-neutral-muted-color: color-mix(in srgb, var(--text-neutral-color) 15%, transparent 85%);background:repeating-linear-gradient(45deg,var(--chr-input-disabled-neutral-muted-color),var(--chr-input-disabled-neutral-muted-color) .625rem,var(--background-color) .625rem,var(--background-color) 1.25rem);cursor:not-allowed}.input{accent-color:var(--primary-color)}.input ::-webkit-datetime-edit,.input ::-webkit-datetime-edit-fields-wrapper,.input ::-webkit-datetime-edit-text,.input ::-webkit-datetime-edit-month-field,.input ::-webkit-datetime-edit-day-field,.input ::-webkit-datetime-edit-year-field,.input ::-webkit-inner-spin-button,.input ::-webkit-calendar-picker-indicator{place-self:end;justify-self:end;background-color:red}.input[type=range]{color:red}.input[type=range]:after{content:attr(value)}.input[type=textarea]::-webkit-scrollbar{display:none!important}.no-scrollbar{-ms-overflow-style:none!important;scrollbar-width:none!important}:host{display:flex;flex-direction:column;flex:1 1 auto;justify-self:stretch;align-self:center;min-width:0}.input-wrapper{max-height:none;height:auto}.input-wrapper .input{height:1.5rem}\n"] }]
         }], ctorParameters: () => [] });
 
 class ChrToggleInputComponent extends ChrInputComponent {
@@ -5075,11 +5079,11 @@ class ChrToggleInputComponent extends ChrInputComponent {
         super.ngOnInit();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: ChrToggleInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: ChrToggleInputComponent, isStandalone: true, selector: "chr-toggle-input", usesInheritance: true, ngImport: i0, template: "<div class=\"input-wrapper\">\n    <input #htmlInput [id]=\"id()\" [name]=\"name()\" placeholder=\" \" [checked]=\"value()\" (change)=\"toggle($event)\"\n        class=\"hidden checkbox\" type=\"checkbox\" />\n    <label [for]=\"id()\">\n        {{label()}}\n        @if(required()){\n        <span class=\"required\">*</span>\n        }\n    </label>\n    <div class=\"input toggle-wrapper\">\n        <div (click)=\"!isDisabled() && htmlInput?.click()\" class=\"relative input toggle\"\n            [attr.disabled]=\"isDisabled() || null\">\n        </div>\n    </div>\n\n</div>\n<!-- No-height slot. Should be used for \"overlay\" type data-->\n<div class=\"data-overlay\">\n    @if(isTouched()){\n    @let error = getLastError();\n    @if(error != null){\n    <div class=\"error card glass\">\n        {{getLastError() ?? null}}\n    </div>\n    }\n    }\n    <ng-content select=\"chr-input-data-overlay\">\n    </ng-content>\n</div>\n<!-- Default \"space-consuming\" Content Projection -->\n<div class=\"data\">\n    <ng-content select=\"chr-input-data\">\n        <!-- Fallback to default projection-->\n        <ng-content>\n        </ng-content>\n    </ng-content>\n</div>\n\n<ng-template #tooltipTemplate>\n    <span>{{tooltip()}}</span>\n</ng-template>", styles: [":host{display:flex;flex-direction:column;flex:1 1 auto;min-width:0}.input-wrapper{--chr-input-current-color: var(--text-neutral-color);position:relative;box-sizing:border-box;min-height:1.5rem;max-height:1.5rem;height:1.5rem;display:flex;flex:1 1 auto;min-width:0;flex-direction:column;border-bottom:.125rem solid var(--chr-input-current-color)}.input-wrapper .input-row{display:flex;flex:1 1 auto;flex-wrap:nowrap;height:inherit}.input-wrapper .input{min-width:0;height:inherit;color:var(--text-color)}.input-wrapper .indicators{display:flex;flex-direction:row;flex:1 1 auto;flex-wrap:nowrap;gap:.25rem;max-width:fit-content;height:inherit;align-items:center;color:var(--chr-input-current-color);font-size:.75rem!important}.input-wrapper .input~.indicators{position:absolute;top:0;right:0;visibility:hidden;opacity:0;transform:translate(1rem);transition:opacity .15s ease-in-out,transform .15s ease-in-out,width .15s ease-in-out .15s}.input-wrapper:focus-within .input~.indicators,.input-wrapper:hover .input~.indicators,.input-wrapper .input~.indicators[data-indicators-open=true]{position:relative;visibility:visible;padding-left:.125rem;opacity:1;transform:translate(0)}:is(.input-wrapper:focus-within .input~.indicators,.input-wrapper:hover .input~.indicators,.input-wrapper .input~.indicators[data-indicators-open=true]):has(chr-input-indicators:not(:empty)),:is(.input-wrapper:focus-within .input~.indicators,.input-wrapper:hover .input~.indicators,.input-wrapper .input~.indicators[data-indicators-open=true]):has(:nth-child(2)){border-left:.125rem solid color-mix(in srgb,var(--chr-input-current-color) 40%,transparent 60%)}.input-wrapper:focus-within .input,.input-wrapper:hover .input,.input-wrapper:has(.indicators[data-indicators-open=true]) .input{padding-right:.125rem}.input-wrapper .input:has(~.indicators:empty){padding-right:0}.input-wrapper .input~.indicators:empty{width:0;border-left:none;padding-left:0}.input-wrapper .tooltip-indicator{cursor:pointer;font-size:1.25rem;padding:0;color:var(--chr-input-current-color)}.input-wrapper .tooltip-indicator:hover{color:var(--primary-color)}.input-wrapper .required{color:var(--error-color)}.input-wrapper:has(.input:focus){--chr-input-current-color: var(--primary-color)}.input-wrapper[data-state=IDLE]{--chr-input-current-color: color-mix(in srgb, var(--text-neutral-color) 90%, transparent 10%) }.input-wrapper[data-state=INVALID],.input-wrapper[data-state=DISABLED]{--chr-input-current-color: var(--error-color)}.input-wrapper[data-state=PENDING],.input-wrapper[data-state=WARNING]{--chr-input-current-color: var(--warn-color)}.input-wrapper label{position:absolute;pointer-events:none;top:50%;color:var(--chr-input-current-color);transform:translateY(-50%);transition:transfom 125ms ease-in-out,position 125ms ease-in-out,top 125ms ease-in-out,font-size 125ms ease-in-out,left 125ms ease-in-out;font-size:.85rem;font-weight:700}.input-wrapper label:not(:empty):after{position:absolute;content:\":\"}.input-wrapper label:has(~.input:focus),.input-wrapper label:has(~.input:not(:placeholder-shown)){top:-.25rem;left:0;font-size:75%}.input-wrapper .input{width:100%;outline:none;border:none;padding:0;background-color:transparent}.data-overlay{height:0;grid-area:data / data;display:flex;flex-direction:column;flex-wrap:nowrap}.data{grid-area:data / data;display:flex;flex-direction:column;flex-wrap:nowrap}.error{grid-area:data / data;display:flex;flex:1 1 auto;flex-direction:row;flex-wrap:wrap;min-width:100%;max-width:min-content;color:var(--error-color);padding:.25rem;border-top-left-radius:0;border-top-right-radius:0;background-color:var(--background-color);z-index:2}.error:empty{display:none}.input[disabled]{--chr-input-disabled-neutral-muted-color: color-mix(in srgb, var(--text-neutral-color) 15%, transparent 85%);background:repeating-linear-gradient(45deg,var(--chr-input-disabled-neutral-muted-color),var(--chr-input-disabled-neutral-muted-color) .625rem,var(--background-color) .625rem,var(--background-color) 1.25rem);cursor:not-allowed}.input{accent-color:var(--primary-color)}.input ::-webkit-datetime-edit,.input ::-webkit-datetime-edit-fields-wrapper,.input ::-webkit-datetime-edit-text,.input ::-webkit-datetime-edit-month-field,.input ::-webkit-datetime-edit-day-field,.input ::-webkit-datetime-edit-year-field,.input ::-webkit-inner-spin-button,.input ::-webkit-calendar-picker-indicator{place-self:end;justify-self:end;background-color:red}.input[type=range]{color:red}.input[type=range]:after{content:attr(value)}.input[type=textarea]::-webkit-scrollbar{display:none!important}.no-scrollbar{-ms-overflow-style:none!important;scrollbar-width:none!important}:host{display:flex;flex-direction:column;flex:0 1 auto;min-width:2.75rem}.relative{position:relative}.toggle:after{content:\" \";border-radius:100%;transition:all .25s linear;position:absolute;height:1.25rem;width:1.25rem;top:2px;left:2px;display:flex;align-items:center;justify-items:center;justify-content:center}.checkbox~.toggle-wrapper>.toggle:after{transition:all .15s linear;transform:translate(0);left:2px;font-family:Material Icons;content:\"close\";background-color:color-mix(in srgb,var(--text-neutral-color) 50%,var(--neutral-color) 50%)}.checkbox:checked~.toggle-wrapper>.toggle:after{transition:all .15s linear;transform:translate(calc(-100% - 2px));left:100%;font-family:Material Icons;content:\"check\";background-color:var(--primary-color);color:var(--primary-contrast-color)}.input-wrapper>.input.toggle-wrapper>.toggle{height:1.5rem;width:2.75rem;cursor:pointer;transition:all 10ms linear;background-color:var(--neutral-color);justify-items:center;margin-top:auto;margin-bottom:auto;border-radius:.8rem}.input-wrapper>.input.toggle-wrapper>.input.toggle[disabled]{background-color:var(--neutral-color);cursor:not-allowed}.checkbox:checked~.toggle-wrapper>.toggle{background-color:var(--secondary-color)}.hidden{display:none}\n"] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: ChrToggleInputComponent, isStandalone: true, selector: "chr-toggle-input", usesInheritance: true, ngImport: i0, template: "<div class=\"input-wrapper\">\n    <input #htmlInput [id]=\"id()\" [name]=\"name()\" placeholder=\" \" [checked]=\"value()\" (change)=\"toggle($event)\"\n        class=\"hidden checkbox\" type=\"checkbox\" />\n    <label [for]=\"id()\">\n        {{label()}}\n        @if(required()){\n        <span class=\"required\">*</span>\n        }\n    </label>\n    <div class=\"input toggle-wrapper\">\n        <div (click)=\"!isDisabled() && htmlInput?.click()\" class=\"relative input toggle\"\n            [attr.disabled]=\"isDisabled() || null\">\n        </div>\n    </div>\n\n</div>\n<!-- No-height slot. Should be used for \"overlay\" type data-->\n<div class=\"data-overlay\">\n    @if(isTouched()){\n    @let error = getLastError();\n    @if(error != null){\n    <div class=\"error card glass\">\n        {{getLastError() ?? null}}\n    </div>\n    }\n    }\n    <ng-content select=\"chr-input-data-overlay\">\n    </ng-content>\n</div>\n<!-- Default \"space-consuming\" Content Projection -->\n<div class=\"data\">\n    <ng-content select=\"chr-input-data\">\n        <!-- Fallback to default projection-->\n        <ng-content>\n        </ng-content>\n    </ng-content>\n</div>\n\n<ng-template #tooltipTemplate>\n    <span>{{tooltip()}}</span>\n</ng-template>", styles: [":host{display:flex;flex-direction:column;flex:1 1 auto;min-width:0}.input-wrapper{--chr-input-current-color: var(--text-neutral-color);position:relative;box-sizing:border-box;min-height:1.5rem;max-height:1.5rem;height:1.5rem;display:flex;flex:1 1 auto;min-width:0;flex-direction:column;border-bottom:.125rem solid var(--chr-input-current-color)}.input-wrapper .input-row{display:flex;flex:1 1 auto;flex-wrap:nowrap;height:inherit}.input-wrapper .input{min-width:0;height:inherit;color:var(--text-color)}.input-wrapper .indicators{display:flex;flex-direction:row;flex:1 1 auto;flex-wrap:nowrap;gap:.25rem;max-width:fit-content;height:inherit;align-items:center;color:var(--chr-input-current-color);font-size:.75rem!important}.input-wrapper .input~.indicators{position:absolute;top:0;right:0;visibility:hidden;opacity:0;transform:translate(1rem);transition:opacity .15s ease-in-out,transform .15s ease-in-out,width .15s ease-in-out .15s}.input-wrapper:focus-within .input~.indicators,.input-wrapper:hover .input~.indicators,.input-wrapper .input~.indicators[data-indicators-open=true]{position:relative;visibility:visible;padding-left:.125rem;opacity:1;transform:translate(0)}:is(.input-wrapper:focus-within .input~.indicators,.input-wrapper:hover .input~.indicators,.input-wrapper .input~.indicators[data-indicators-open=true]):has(chr-input-indicators:not(:empty)),:is(.input-wrapper:focus-within .input~.indicators,.input-wrapper:hover .input~.indicators,.input-wrapper .input~.indicators[data-indicators-open=true]):has(:nth-child(2)){border-left:.125rem solid color-mix(in srgb,var(--chr-input-current-color) 40%,transparent 60%)}.input-wrapper:focus-within .input,.input-wrapper:hover .input,.input-wrapper:has(.indicators[data-indicators-open=true]) .input{padding-right:.125rem}.input-wrapper .input:has(~.indicators:empty){padding-right:0}.input-wrapper .input~.indicators:empty{width:0;border-left:none;padding-left:0}.input-wrapper .tooltip-indicator{cursor:pointer;font-size:1.25rem;padding:0;color:var(--chr-input-current-color)}.input-wrapper .tooltip-indicator:hover{color:var(--primary-color)}.input-wrapper .required{color:var(--error-color)}.input-wrapper:has(.input:focus){--chr-input-current-color: var(--primary-color)}.input-wrapper[data-state=IDLE]{--chr-input-current-color: color-mix(in srgb, var(--text-neutral-color) 90%, transparent 10%) }.input-wrapper[data-state=INVALID],.input-wrapper[data-state=DISABLED]{--chr-input-current-color: var(--error-color)}.input-wrapper[data-state=PENDING],.input-wrapper[data-state=WARNING]{--chr-input-current-color: var(--warn-color)}.input-wrapper label{position:absolute;pointer-events:none;top:50%;color:var(--chr-input-current-color);transform:translateY(-50%);transition:transfom 125ms ease-in-out,position 125ms ease-in-out,top 125ms ease-in-out,font-size 125ms ease-in-out,left 125ms ease-in-out;font-size:.85rem;font-weight:700}.input-wrapper label:not(:empty):after{position:absolute;content:\":\"}.input-wrapper label:has(~.input:focus),.input-wrapper label:has(~.input:not(:placeholder-shown)){top:-.25rem;left:0;font-size:75%}.input-wrapper .input{width:100%;outline:none;border:none;padding:0;background-color:transparent}.data-overlay{height:0;grid-area:data / data;display:flex;flex-direction:column;flex-wrap:nowrap}.data{grid-area:data / data;display:flex;flex-direction:column;flex-wrap:nowrap}.error{grid-area:data / data;display:flex;flex:1 1 auto;flex-direction:row;flex-wrap:wrap;min-width:calc(100% - .5rem);max-width:min-content;color:var(--error-color);padding:.25rem;border-top-left-radius:0;border-top-right-radius:0;background-color:var(--background-color);z-index:2}.error:empty{display:none}.input[disabled]{--chr-input-disabled-neutral-muted-color: color-mix(in srgb, var(--text-neutral-color) 15%, transparent 85%);background:repeating-linear-gradient(45deg,var(--chr-input-disabled-neutral-muted-color),var(--chr-input-disabled-neutral-muted-color) .625rem,var(--background-color) .625rem,var(--background-color) 1.25rem);cursor:not-allowed}.input{accent-color:var(--primary-color)}.input ::-webkit-datetime-edit,.input ::-webkit-datetime-edit-fields-wrapper,.input ::-webkit-datetime-edit-text,.input ::-webkit-datetime-edit-month-field,.input ::-webkit-datetime-edit-day-field,.input ::-webkit-datetime-edit-year-field,.input ::-webkit-inner-spin-button,.input ::-webkit-calendar-picker-indicator{place-self:end;justify-self:end;background-color:red}.input[type=range]{color:red}.input[type=range]:after{content:attr(value)}.input[type=textarea]::-webkit-scrollbar{display:none!important}.no-scrollbar{-ms-overflow-style:none!important;scrollbar-width:none!important}:host{display:flex;flex-direction:column;flex:0 1 auto;min-width:2.75rem}.relative{position:relative}.toggle:after{content:\" \";border-radius:100%;transition:all .25s linear;position:absolute;height:1.25rem;width:1.25rem;top:2px;left:2px;display:flex;align-items:center;justify-items:center;justify-content:center}.checkbox~.toggle-wrapper>.toggle:after{transition:all .15s linear;transform:translate(0);left:2px;font-family:Material Icons;content:\"close\";background-color:color-mix(in srgb,var(--text-neutral-color) 50%,var(--neutral-color) 50%)}.checkbox:checked~.toggle-wrapper>.toggle:after{transition:all .15s linear;transform:translate(calc(-100% - 2px));left:100%;font-family:Material Icons;content:\"check\";background-color:var(--primary-color);color:var(--primary-contrast-color)}.input-wrapper>.input.toggle-wrapper>.toggle{height:1.5rem;width:2.75rem;cursor:pointer;transition:all 10ms linear;background-color:var(--neutral-color);justify-items:center;margin-top:auto;margin-bottom:auto;border-radius:.8rem}.input-wrapper>.input.toggle-wrapper>.input.toggle[disabled]{background-color:var(--neutral-color);cursor:not-allowed}.checkbox:checked~.toggle-wrapper>.toggle{background-color:var(--secondary-color)}.hidden{display:none}\n"] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: ChrToggleInputComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'chr-toggle-input', imports: [], template: "<div class=\"input-wrapper\">\n    <input #htmlInput [id]=\"id()\" [name]=\"name()\" placeholder=\" \" [checked]=\"value()\" (change)=\"toggle($event)\"\n        class=\"hidden checkbox\" type=\"checkbox\" />\n    <label [for]=\"id()\">\n        {{label()}}\n        @if(required()){\n        <span class=\"required\">*</span>\n        }\n    </label>\n    <div class=\"input toggle-wrapper\">\n        <div (click)=\"!isDisabled() && htmlInput?.click()\" class=\"relative input toggle\"\n            [attr.disabled]=\"isDisabled() || null\">\n        </div>\n    </div>\n\n</div>\n<!-- No-height slot. Should be used for \"overlay\" type data-->\n<div class=\"data-overlay\">\n    @if(isTouched()){\n    @let error = getLastError();\n    @if(error != null){\n    <div class=\"error card glass\">\n        {{getLastError() ?? null}}\n    </div>\n    }\n    }\n    <ng-content select=\"chr-input-data-overlay\">\n    </ng-content>\n</div>\n<!-- Default \"space-consuming\" Content Projection -->\n<div class=\"data\">\n    <ng-content select=\"chr-input-data\">\n        <!-- Fallback to default projection-->\n        <ng-content>\n        </ng-content>\n    </ng-content>\n</div>\n\n<ng-template #tooltipTemplate>\n    <span>{{tooltip()}}</span>\n</ng-template>", styles: [":host{display:flex;flex-direction:column;flex:1 1 auto;min-width:0}.input-wrapper{--chr-input-current-color: var(--text-neutral-color);position:relative;box-sizing:border-box;min-height:1.5rem;max-height:1.5rem;height:1.5rem;display:flex;flex:1 1 auto;min-width:0;flex-direction:column;border-bottom:.125rem solid var(--chr-input-current-color)}.input-wrapper .input-row{display:flex;flex:1 1 auto;flex-wrap:nowrap;height:inherit}.input-wrapper .input{min-width:0;height:inherit;color:var(--text-color)}.input-wrapper .indicators{display:flex;flex-direction:row;flex:1 1 auto;flex-wrap:nowrap;gap:.25rem;max-width:fit-content;height:inherit;align-items:center;color:var(--chr-input-current-color);font-size:.75rem!important}.input-wrapper .input~.indicators{position:absolute;top:0;right:0;visibility:hidden;opacity:0;transform:translate(1rem);transition:opacity .15s ease-in-out,transform .15s ease-in-out,width .15s ease-in-out .15s}.input-wrapper:focus-within .input~.indicators,.input-wrapper:hover .input~.indicators,.input-wrapper .input~.indicators[data-indicators-open=true]{position:relative;visibility:visible;padding-left:.125rem;opacity:1;transform:translate(0)}:is(.input-wrapper:focus-within .input~.indicators,.input-wrapper:hover .input~.indicators,.input-wrapper .input~.indicators[data-indicators-open=true]):has(chr-input-indicators:not(:empty)),:is(.input-wrapper:focus-within .input~.indicators,.input-wrapper:hover .input~.indicators,.input-wrapper .input~.indicators[data-indicators-open=true]):has(:nth-child(2)){border-left:.125rem solid color-mix(in srgb,var(--chr-input-current-color) 40%,transparent 60%)}.input-wrapper:focus-within .input,.input-wrapper:hover .input,.input-wrapper:has(.indicators[data-indicators-open=true]) .input{padding-right:.125rem}.input-wrapper .input:has(~.indicators:empty){padding-right:0}.input-wrapper .input~.indicators:empty{width:0;border-left:none;padding-left:0}.input-wrapper .tooltip-indicator{cursor:pointer;font-size:1.25rem;padding:0;color:var(--chr-input-current-color)}.input-wrapper .tooltip-indicator:hover{color:var(--primary-color)}.input-wrapper .required{color:var(--error-color)}.input-wrapper:has(.input:focus){--chr-input-current-color: var(--primary-color)}.input-wrapper[data-state=IDLE]{--chr-input-current-color: color-mix(in srgb, var(--text-neutral-color) 90%, transparent 10%) }.input-wrapper[data-state=INVALID],.input-wrapper[data-state=DISABLED]{--chr-input-current-color: var(--error-color)}.input-wrapper[data-state=PENDING],.input-wrapper[data-state=WARNING]{--chr-input-current-color: var(--warn-color)}.input-wrapper label{position:absolute;pointer-events:none;top:50%;color:var(--chr-input-current-color);transform:translateY(-50%);transition:transfom 125ms ease-in-out,position 125ms ease-in-out,top 125ms ease-in-out,font-size 125ms ease-in-out,left 125ms ease-in-out;font-size:.85rem;font-weight:700}.input-wrapper label:not(:empty):after{position:absolute;content:\":\"}.input-wrapper label:has(~.input:focus),.input-wrapper label:has(~.input:not(:placeholder-shown)){top:-.25rem;left:0;font-size:75%}.input-wrapper .input{width:100%;outline:none;border:none;padding:0;background-color:transparent}.data-overlay{height:0;grid-area:data / data;display:flex;flex-direction:column;flex-wrap:nowrap}.data{grid-area:data / data;display:flex;flex-direction:column;flex-wrap:nowrap}.error{grid-area:data / data;display:flex;flex:1 1 auto;flex-direction:row;flex-wrap:wrap;min-width:100%;max-width:min-content;color:var(--error-color);padding:.25rem;border-top-left-radius:0;border-top-right-radius:0;background-color:var(--background-color);z-index:2}.error:empty{display:none}.input[disabled]{--chr-input-disabled-neutral-muted-color: color-mix(in srgb, var(--text-neutral-color) 15%, transparent 85%);background:repeating-linear-gradient(45deg,var(--chr-input-disabled-neutral-muted-color),var(--chr-input-disabled-neutral-muted-color) .625rem,var(--background-color) .625rem,var(--background-color) 1.25rem);cursor:not-allowed}.input{accent-color:var(--primary-color)}.input ::-webkit-datetime-edit,.input ::-webkit-datetime-edit-fields-wrapper,.input ::-webkit-datetime-edit-text,.input ::-webkit-datetime-edit-month-field,.input ::-webkit-datetime-edit-day-field,.input ::-webkit-datetime-edit-year-field,.input ::-webkit-inner-spin-button,.input ::-webkit-calendar-picker-indicator{place-self:end;justify-self:end;background-color:red}.input[type=range]{color:red}.input[type=range]:after{content:attr(value)}.input[type=textarea]::-webkit-scrollbar{display:none!important}.no-scrollbar{-ms-overflow-style:none!important;scrollbar-width:none!important}:host{display:flex;flex-direction:column;flex:0 1 auto;min-width:2.75rem}.relative{position:relative}.toggle:after{content:\" \";border-radius:100%;transition:all .25s linear;position:absolute;height:1.25rem;width:1.25rem;top:2px;left:2px;display:flex;align-items:center;justify-items:center;justify-content:center}.checkbox~.toggle-wrapper>.toggle:after{transition:all .15s linear;transform:translate(0);left:2px;font-family:Material Icons;content:\"close\";background-color:color-mix(in srgb,var(--text-neutral-color) 50%,var(--neutral-color) 50%)}.checkbox:checked~.toggle-wrapper>.toggle:after{transition:all .15s linear;transform:translate(calc(-100% - 2px));left:100%;font-family:Material Icons;content:\"check\";background-color:var(--primary-color);color:var(--primary-contrast-color)}.input-wrapper>.input.toggle-wrapper>.toggle{height:1.5rem;width:2.75rem;cursor:pointer;transition:all 10ms linear;background-color:var(--neutral-color);justify-items:center;margin-top:auto;margin-bottom:auto;border-radius:.8rem}.input-wrapper>.input.toggle-wrapper>.input.toggle[disabled]{background-color:var(--neutral-color);cursor:not-allowed}.checkbox:checked~.toggle-wrapper>.toggle{background-color:var(--secondary-color)}.hidden{display:none}\n"] }]
+            args: [{ selector: 'chr-toggle-input', imports: [], template: "<div class=\"input-wrapper\">\n    <input #htmlInput [id]=\"id()\" [name]=\"name()\" placeholder=\" \" [checked]=\"value()\" (change)=\"toggle($event)\"\n        class=\"hidden checkbox\" type=\"checkbox\" />\n    <label [for]=\"id()\">\n        {{label()}}\n        @if(required()){\n        <span class=\"required\">*</span>\n        }\n    </label>\n    <div class=\"input toggle-wrapper\">\n        <div (click)=\"!isDisabled() && htmlInput?.click()\" class=\"relative input toggle\"\n            [attr.disabled]=\"isDisabled() || null\">\n        </div>\n    </div>\n\n</div>\n<!-- No-height slot. Should be used for \"overlay\" type data-->\n<div class=\"data-overlay\">\n    @if(isTouched()){\n    @let error = getLastError();\n    @if(error != null){\n    <div class=\"error card glass\">\n        {{getLastError() ?? null}}\n    </div>\n    }\n    }\n    <ng-content select=\"chr-input-data-overlay\">\n    </ng-content>\n</div>\n<!-- Default \"space-consuming\" Content Projection -->\n<div class=\"data\">\n    <ng-content select=\"chr-input-data\">\n        <!-- Fallback to default projection-->\n        <ng-content>\n        </ng-content>\n    </ng-content>\n</div>\n\n<ng-template #tooltipTemplate>\n    <span>{{tooltip()}}</span>\n</ng-template>", styles: [":host{display:flex;flex-direction:column;flex:1 1 auto;min-width:0}.input-wrapper{--chr-input-current-color: var(--text-neutral-color);position:relative;box-sizing:border-box;min-height:1.5rem;max-height:1.5rem;height:1.5rem;display:flex;flex:1 1 auto;min-width:0;flex-direction:column;border-bottom:.125rem solid var(--chr-input-current-color)}.input-wrapper .input-row{display:flex;flex:1 1 auto;flex-wrap:nowrap;height:inherit}.input-wrapper .input{min-width:0;height:inherit;color:var(--text-color)}.input-wrapper .indicators{display:flex;flex-direction:row;flex:1 1 auto;flex-wrap:nowrap;gap:.25rem;max-width:fit-content;height:inherit;align-items:center;color:var(--chr-input-current-color);font-size:.75rem!important}.input-wrapper .input~.indicators{position:absolute;top:0;right:0;visibility:hidden;opacity:0;transform:translate(1rem);transition:opacity .15s ease-in-out,transform .15s ease-in-out,width .15s ease-in-out .15s}.input-wrapper:focus-within .input~.indicators,.input-wrapper:hover .input~.indicators,.input-wrapper .input~.indicators[data-indicators-open=true]{position:relative;visibility:visible;padding-left:.125rem;opacity:1;transform:translate(0)}:is(.input-wrapper:focus-within .input~.indicators,.input-wrapper:hover .input~.indicators,.input-wrapper .input~.indicators[data-indicators-open=true]):has(chr-input-indicators:not(:empty)),:is(.input-wrapper:focus-within .input~.indicators,.input-wrapper:hover .input~.indicators,.input-wrapper .input~.indicators[data-indicators-open=true]):has(:nth-child(2)){border-left:.125rem solid color-mix(in srgb,var(--chr-input-current-color) 40%,transparent 60%)}.input-wrapper:focus-within .input,.input-wrapper:hover .input,.input-wrapper:has(.indicators[data-indicators-open=true]) .input{padding-right:.125rem}.input-wrapper .input:has(~.indicators:empty){padding-right:0}.input-wrapper .input~.indicators:empty{width:0;border-left:none;padding-left:0}.input-wrapper .tooltip-indicator{cursor:pointer;font-size:1.25rem;padding:0;color:var(--chr-input-current-color)}.input-wrapper .tooltip-indicator:hover{color:var(--primary-color)}.input-wrapper .required{color:var(--error-color)}.input-wrapper:has(.input:focus){--chr-input-current-color: var(--primary-color)}.input-wrapper[data-state=IDLE]{--chr-input-current-color: color-mix(in srgb, var(--text-neutral-color) 90%, transparent 10%) }.input-wrapper[data-state=INVALID],.input-wrapper[data-state=DISABLED]{--chr-input-current-color: var(--error-color)}.input-wrapper[data-state=PENDING],.input-wrapper[data-state=WARNING]{--chr-input-current-color: var(--warn-color)}.input-wrapper label{position:absolute;pointer-events:none;top:50%;color:var(--chr-input-current-color);transform:translateY(-50%);transition:transfom 125ms ease-in-out,position 125ms ease-in-out,top 125ms ease-in-out,font-size 125ms ease-in-out,left 125ms ease-in-out;font-size:.85rem;font-weight:700}.input-wrapper label:not(:empty):after{position:absolute;content:\":\"}.input-wrapper label:has(~.input:focus),.input-wrapper label:has(~.input:not(:placeholder-shown)){top:-.25rem;left:0;font-size:75%}.input-wrapper .input{width:100%;outline:none;border:none;padding:0;background-color:transparent}.data-overlay{height:0;grid-area:data / data;display:flex;flex-direction:column;flex-wrap:nowrap}.data{grid-area:data / data;display:flex;flex-direction:column;flex-wrap:nowrap}.error{grid-area:data / data;display:flex;flex:1 1 auto;flex-direction:row;flex-wrap:wrap;min-width:calc(100% - .5rem);max-width:min-content;color:var(--error-color);padding:.25rem;border-top-left-radius:0;border-top-right-radius:0;background-color:var(--background-color);z-index:2}.error:empty{display:none}.input[disabled]{--chr-input-disabled-neutral-muted-color: color-mix(in srgb, var(--text-neutral-color) 15%, transparent 85%);background:repeating-linear-gradient(45deg,var(--chr-input-disabled-neutral-muted-color),var(--chr-input-disabled-neutral-muted-color) .625rem,var(--background-color) .625rem,var(--background-color) 1.25rem);cursor:not-allowed}.input{accent-color:var(--primary-color)}.input ::-webkit-datetime-edit,.input ::-webkit-datetime-edit-fields-wrapper,.input ::-webkit-datetime-edit-text,.input ::-webkit-datetime-edit-month-field,.input ::-webkit-datetime-edit-day-field,.input ::-webkit-datetime-edit-year-field,.input ::-webkit-inner-spin-button,.input ::-webkit-calendar-picker-indicator{place-self:end;justify-self:end;background-color:red}.input[type=range]{color:red}.input[type=range]:after{content:attr(value)}.input[type=textarea]::-webkit-scrollbar{display:none!important}.no-scrollbar{-ms-overflow-style:none!important;scrollbar-width:none!important}:host{display:flex;flex-direction:column;flex:0 1 auto;min-width:2.75rem}.relative{position:relative}.toggle:after{content:\" \";border-radius:100%;transition:all .25s linear;position:absolute;height:1.25rem;width:1.25rem;top:2px;left:2px;display:flex;align-items:center;justify-items:center;justify-content:center}.checkbox~.toggle-wrapper>.toggle:after{transition:all .15s linear;transform:translate(0);left:2px;font-family:Material Icons;content:\"close\";background-color:color-mix(in srgb,var(--text-neutral-color) 50%,var(--neutral-color) 50%)}.checkbox:checked~.toggle-wrapper>.toggle:after{transition:all .15s linear;transform:translate(calc(-100% - 2px));left:100%;font-family:Material Icons;content:\"check\";background-color:var(--primary-color);color:var(--primary-contrast-color)}.input-wrapper>.input.toggle-wrapper>.toggle{height:1.5rem;width:2.75rem;cursor:pointer;transition:all 10ms linear;background-color:var(--neutral-color);justify-items:center;margin-top:auto;margin-bottom:auto;border-radius:.8rem}.input-wrapper>.input.toggle-wrapper>.input.toggle[disabled]{background-color:var(--neutral-color);cursor:not-allowed}.checkbox:checked~.toggle-wrapper>.toggle{background-color:var(--secondary-color)}.hidden{display:none}\n"] }]
         }], ctorParameters: () => [] });
 
 class ChrSearchbarComponent {