chrv-components 1.12.144 → 1.12.145

package/fesm2022/chrv-components.mjs

@@ -4361,22 +4361,23 @@ class ChrInputComponent {
                 }
             }
         };
-        this.ensureDefaultDisplayValue = () => {
-            const value = this.value() || this.ngControl()?.value;
+        // private ensureDefaultDisplayValue = () => {
+        //   const value = this.value() || this.ngControl()?.value;
+        //   if (value === null || value === undefined) {
+        //     this.displayValue.set('');
+        //     return;
+        //   }
+        //   this.displayValue.set(this.formatValue(value));
+        // };
+        this.formatValue = (value) => {
             const type = this.type();
-            if (value === null || value === undefined) {
-                this.displayValue.set('');
-                return;
-            }
             switch (type) {
                 case 'date':
-                    this.displayValue.set(formatDate$1(value, 'yyyy-MM-dd'));
-                    break;
+                    return formatDate$1(value, 'yyyy-MM-dd');
                 case 'datetime':
-                    this.displayValue.set(formatDate$1(value, "yyyy-MM-dd'T'HH:mm"));
-                    break;
+                    return formatDate$1(value, "yyyy-MM-dd'T'HH:mm");
                 default:
-                    this.displayValue.set(value);
+                    return value;
             }
         };
         this.onChange = (value) => {
@@ -4392,10 +4393,10 @@ class ChrInputComponent {
             }
             else
                 this._changeSubject.next(value);
-            // this.input.emit(value);
         };
         this.writeValue = (value) => {
             this.value.set(value ?? null);
+            this.displayValue.set(this.formatValue(value));
         };
         this.registerOnChange = (fn) => {
             this._onChange = (v) => {
@@ -4454,7 +4455,7 @@ class ChrInputComponent {
         this.configureEventListeners();
         this.ensureNgControl();
         this.ensureOutputType();
-        this.ensureDefaultDisplayValue();
+        // this.ensureDefaultDisplayValue();
     }
     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 }, tooltipPosition: { classPropertyName: "tooltipPosition", publicName: "tooltipPosition", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { id: "idChange", name: "nameChange", value: "valueChange", displayValue: "displayValueChange", outputType: "outputTypeChange", isDisabled: "isDisabledChange", isFocused: "isFocusedChange", ngControl: "ngControlChange", input: "input", 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        <label [for]=\"id()\">\n            {{label()}}\n            @if(required()){\n            <span class=\"required\">*</span>\n            }\n        </label>\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            [step]=\"type() == 'time-seconds' ? 1 : step()\" (keyup.enter)=\"enter.emit()\" />\n        <span class=\"indicators\">\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<!-- 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<!-- 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<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;min-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}.input-wrapper .input-row .input{min-width:0}.input-wrapper .input-row .indicators{display:flex;flex-direction:row;flex:1 1 auto;flex-wrap:nowrap;min-width:fit-content;gap:.25rem;max-width:fit-content;align-items:center;padding-left:.125rem;color:var(--chr-input-current-color);font-size:.75rem!important}.input-wrapper .input-row .indicators:has(chr-input-indicators:not(:empty)),.input-wrapper .input-row .indicators:has(:nth-child(2)){border-left:.125rem solid color-mix(in srgb,var(--chr-input-current-color) 40%,transparent 60%)}.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;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:after{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;padding-right:.125rem;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;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"] }] }); }
@@ -4654,8 +4655,12 @@ class ChrSearchSelectInputComponent extends ChrInputComponent {
         ...(ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []));
         this.display = input((v) => v || '', /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "display" }] : /* istanbul ignore next */ []));
-        this.writeValue = (value) => {
-            this.value.set(value);
+        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.
@@ -4705,8 +4710,8 @@ class ChrTagSelectInputComponent extends ChrInputComponent {
         ...(ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []));
         this.display = input((v) => v || '', /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "display" }] : /* istanbul ignore next */ []));
-        this.writeValue = (value) => {
-            this.value.set(value);
+        this.formatValue = (value) => {
+            return '';
         };
         /**
          * Signal calculé renvoyant le tableau d'éléments sélectionnés