chrv-components 1.12.221 → 1.12.223

package/fesm2022/chrv-components.mjs

@@ -4097,7 +4097,7 @@ class ChrPopoverDirective {
         ...(ngDevMode ? [{ debugName: "chrPopoverData" }] : /* istanbul ignore next */ []));
         this.chrPopoverOnHover = input(false, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "chrPopoverOnHover" }] : /* istanbul ignore next */ []));
-        this.isOpen = signal(false, /* @ts-ignore */
+        this.isOpen = model(false, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []));
         this.renderer = inject(Renderer2);
         this.hostElementRef = inject(ElementRef);
@@ -4151,10 +4151,10 @@ class ChrPopoverDirective {
                 this.isInsideTarget(position.x, position.y)), distinctUntilChanged(), debounceTime$1(100), takeUntilDestroyed(this.destroyRef))
                 .subscribe((isInside) => {
                 if (isInside && !this.isOpen()) {
-                    this.showPopover();
+                    this.isOpen.set(true);
                 }
                 else if (this.isOpen()) {
-                    this.hidePopover();
+                    this.isOpen.set(false);
                 }
             });
         };
@@ -4197,6 +4197,13 @@ class ChrPopoverDirective {
             const rect = this.targetElement().getBoundingClientRect();
             return this.isInsideRect(x, y, rect);
         };
+        effect(() => {
+            const open = this.isOpen();
+            if (open)
+                this.showPopover();
+            else
+                this.hidePopover();
+        });
     }
     ngOnInit() {
         const maybeTemplate = this.chrPopover();
@@ -4233,10 +4240,10 @@ class ChrPopoverDirective {
         if (!this.chrPopoverOnHover() && !isNativePopoverTrigger) {
             this.renderer.listen(this.hostElement(), 'click', () => {
                 if (this.isOpen()) {
-                    this.hidePopover();
+                    this.isOpen.set(false);
                 }
                 else {
-                    this.showPopover();
+                    this.isOpen.set(true);
                 }
             });
         }
@@ -4256,7 +4263,7 @@ class ChrPopoverDirective {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: ChrPopoverDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.8", type: ChrPopoverDirective, isStandalone: true, selector: "[chrPopover]", inputs: { chrPopover: { classPropertyName: "chrPopover", publicName: "chrPopover", isSignal: true, isRequired: true, transformFunction: null }, chrPopoverPosition: { classPropertyName: "chrPopoverPosition", publicName: "chrPopoverPosition", isSignal: true, isRequired: false, transformFunction: null }, chrPopoverData: { classPropertyName: "chrPopoverData", publicName: "chrPopoverData", isSignal: true, isRequired: false, transformFunction: null }, chrPopoverOnHover: { classPropertyName: "chrPopoverOnHover", publicName: "chrPopoverOnHover", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "keyup.escape": "hidePopover()", "document:mousemove": "updateLastKnownMousePosition($event)", "document:click": "onOutsideClick($event)" }, properties: { "style.cursor": "'pointer'", "attr.role": "'button'" } }, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.8", type: ChrPopoverDirective, isStandalone: true, selector: "[chrPopover]", inputs: { chrPopover: { classPropertyName: "chrPopover", publicName: "chrPopover", isSignal: true, isRequired: true, transformFunction: null }, chrPopoverPosition: { classPropertyName: "chrPopoverPosition", publicName: "chrPopoverPosition", isSignal: true, isRequired: false, transformFunction: null }, chrPopoverData: { classPropertyName: "chrPopoverData", publicName: "chrPopoverData", isSignal: true, isRequired: false, transformFunction: null }, chrPopoverOnHover: { classPropertyName: "chrPopoverOnHover", publicName: "chrPopoverOnHover", isSignal: true, isRequired: false, transformFunction: null }, isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { isOpen: "isOpenChange" }, host: { listeners: { "keyup.escape": "hidePopover()", "document:mousemove": "updateLastKnownMousePosition($event)", "document:click": "onOutsideClick($event)" }, properties: { "style.cursor": "'pointer'", "attr.role": "'button'" } }, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: ChrPopoverDirective, decorators: [{
             type: Directive,
@@ -4270,7 +4277,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
                         '(document:click)': 'onOutsideClick($event)',
                     },
                 }]
-        }], propDecorators: { chrPopover: [{ type: i0.Input, args: [{ isSignal: true, alias: "chrPopover", required: true }] }], chrPopoverPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "chrPopoverPosition", required: false }] }], chrPopoverData: [{ type: i0.Input, args: [{ isSignal: true, alias: "chrPopoverData", required: false }] }], chrPopoverOnHover: [{ type: i0.Input, args: [{ isSignal: true, alias: "chrPopoverOnHover", required: false }] }] } });
+        }], ctorParameters: () => [], propDecorators: { chrPopover: [{ type: i0.Input, args: [{ isSignal: true, alias: "chrPopover", required: true }] }], chrPopoverPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "chrPopoverPosition", required: false }] }], chrPopoverData: [{ type: i0.Input, args: [{ isSignal: true, alias: "chrPopoverData", required: false }] }], chrPopoverOnHover: [{ type: i0.Input, args: [{ isSignal: true, alias: "chrPopoverOnHover", required: false }] }], isOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "isOpen", required: false }] }, { type: i0.Output, args: ["isOpenChange"] }] } });
 
 class OutsideClickAwareDirective {
     constructor() {
@@ -4304,6 +4311,7 @@ class ChrInputComponent {
     // public valueChanges = output<any>();
     /* CODE */
     constructor() {
+        this.destroyRef = inject(DestroyRef);
         /**
          * Label of the input
          */
@@ -4476,7 +4484,7 @@ class ChrInputComponent {
         // 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()))
+        takeUntilDestroyed(this.destroyRef), 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)
@@ -4497,15 +4505,17 @@ class ChrInputComponent {
             this.isFocused.set(true);
         });
         this.ngControl()
-            ?.control?.events.pipe(filter((e) => e instanceof TouchedChangeEvent), map((e) => e.touched), 
+            ?.control?.events.pipe(takeUntilDestroyed(this.destroyRef), filter((e) => e instanceof TouchedChangeEvent), map((e) => e.touched), 
         // Start with will inject a starting value, it MUST be used after eventual transformation (here Event -> boolean)
         // and contain the type of the final data
         startWith(this.ngControl()?.control?.touched ?? false))
             .subscribe((e) => this.isTouched.set(e));
         this.ngControl()
-            ?.control?.events.pipe(filter((e) => e instanceof StatusChangeEvent), map((e) => e.status === 'DISABLED'), startWith(this.ngControl()?.control?.disabled ?? false))
+            ?.control?.events.pipe(takeUntilDestroyed(this.destroyRef), filter((e) => e instanceof StatusChangeEvent), map((e) => e.status === 'DISABLED'), startWith(this.ngControl()?.control?.disabled ?? false))
             .subscribe((e) => this.isDisabled.set(e));
-        this.ngControl()?.statusChanges?.subscribe((data) => {
+        this.ngControl()
+            ?.statusChanges?.pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe((data) => {
             this.ensureState(data);
         });
         this.displayValue.subscribe((v) => {
@@ -4641,7 +4651,7 @@ class ChrInputComponent {
         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 }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", 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()\"\n            [placeholder]=\"label() ? ' ' : placeholder()\" [value]=\"displayValue()\" (focus)=\"focus.emit()\"\n            (blur)=\"blur.emit()\" [disabled]=\"isDisabled()\" [type]=\"type() == 'time-seconds' ? 'time' : type()\"\n            (input)=\"input.emit($event);onChange($event)\" (change)=\"change.emit($event)\"\n            [step]=\"type() == 'time-seconds' ? 1 : step()\" (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: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"] }] }); }
+    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 }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", 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()\"\n            [placeholder]=\"label() ? ' ' : placeholder()\" [value]=\"displayValue()\" (focus)=\"focus.emit()\"\n            (blur)=\"blur.emit()\" [disabled]=\"isDisabled()\" [type]=\"type() == 'time-seconds' ? 'time' : type()\"\n            (input)=\"input.emit($event);onChange($event)\" (change)=\"change.emit($event)\"\n            [step]=\"type() == 'time-seconds' ? 1 : step()\" (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: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", "isOpen"], outputs: ["isOpenChange"] }, { 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,
@@ -5060,7 +5070,7 @@ 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: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"] }] }); }
+    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: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", "isOpen"], outputs: ["isOpenChange"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: ChrTextAreaInputComponent, decorators: [{
             type: Component,