chrv-components 1.12.117 → 1.12.119

package/fesm2022/chrv-components.mjs

@@ -4185,7 +4185,7 @@ class ChrInputComponent {
         /**
          * The type of the value that will be returned.
          * @description Used to return either a number from a number input (instead of the text value of the number) or a javascript Date object instead of the text value of said date.
-         * @default The default is 'text' for all input but 'number' type inputs that defaults to 'number'
+         * @default The default is 'text' . If the input type is 'number', 'date', or 'datetime' however, it will default to the correct type but may be overriden by setting this property.
          */
         this.outputType = model('text', /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "outputType" }] : /* istanbul ignore next */ []));
@@ -4331,8 +4331,11 @@ class ChrInputComponent {
             }
         };
         this.ensureOutputType = () => {
-            if (this.type() == 'number')
+            const type = this.type();
+            if (type == 'number')
                 this.outputType.set('number');
+            if (type == 'date' || type == 'datetime')
+                this.outputType.set('date');
         };
         this.onChange = (value) => {
             if (value instanceof Event) {
@@ -4621,6 +4624,10 @@ class ChrSearchSelectInputComponent extends ChrInputComponent {
             this.displayValue.set('' + this.display()(event));
         };
     }
+    ngOnInit() {
+        super.ngOnInit();
+        this.displayValue.set(this.display()(this.value()));
+    }
     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=\"search-select-input-wrapper\">\n    <chr-input [id]=\"id()\" [name]=\"name()\" type=\"text\" [label]=\"label()\" [displayValue]=\"displayValue()\"\n        [value]=\"value()\" (input)=\"dl.open();onInput($event);\">\n        <chr-input-indicators>\n            <!-- @if(isFocused()){ -->\n            @if(value() == null){\n            <span class=\"material-symbols selection-status-indicator error\">close</span>\n            }@else {\n            <span class=\"material-symbols selection-status-indicator success\">check</span>\n            }\n            <span class=\"selection-status-indicator\" style=\"width: 1rem; \"></span>\n            <!-- } -->\n        </chr-input-indicators>\n        <chr-input-data-overlay>\n            <chr-data-list #dl [for]=\"''+name()\" [suggestions]=\"data()\" [display]=\"display()\" [selectOnFullMatch]=\"true\"\n                (optionSelected)=\"selectOption($event.value)\"></chr-data-list>\n        </chr-input-data-overlay>\n    </chr-input>\n</div>", styles: [":host{display:flex;flex-direction:column;flex:1 1 auto;justify-self:stretch;align-self:center;min-width:0}.search-select-input-wrapper{position:relative}.selection-status-indicator.success{color:var(--success-color)}.selection-status-indicator.error{color:var(--error-color)}\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", "tooltipPosition"], outputs: ["idChange", "nameChange", "valueChange", "displayValueChange", "outputTypeChange", "isDisabledChange", "isFocusedChange", "ngControlChange", "input", "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" }] }); }
 }
@@ -4690,6 +4697,10 @@ class ChrTagSelectInputComponent extends ChrInputComponent {
             this.onChange(value);
         };
     }
+    ngOnInit() {
+        super.ngOnInit();
+        this.displayValue.set('');
+    }
     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=\"tag-select-input-wrapper\">\n    <!-- Champ de recherche enfant -->\n    <chr-input [id]=\"id()\" [name]=\"name()\" type=\"text\" [label]=\"label()\" [displayValue]=\"displayValue() ?? ''\"\n        [value]=\"value()\" (input)=\"dl.open();onInput($event);\" (input)=\"dl.open();onInput($event);\">\n\n        <chr-input-indicators>\n            <span class=\"material-symbols\">data_array</span>\n            <span style=\"width: 1rem;\"></span>\n        </chr-input-indicators>\n        <chr-input-data-overlay>\n            <chr-data-list #dl [for]=\"'' + name()\" [suggestions]=\"filteredOptions()\" [selectOnFullMatch]=\"true\"\n                [display]=\"display()\" (optionSelected)=\"selectOption($event.value)\">\n            </chr-data-list>\n        </chr-input-data-overlay>\n        <chr-input-data>\n            <!-- Affichage des Tags (Chips) -->\n            @if (selectedItems().length > 0) {\n            <div class=\"tags-container\">\n                @for (item of selectedItems(); track $index) {\n                <div class=\"tag-chip\">\n                    <span class=\"tag-label\">{{ display()(item) }}</span>\n                    <button type=\"button\" class=\"tag-remove-btn\" (click)=\"removeTag($index)\"\n                        [attr.aria-label]=\"'Supprimer ' + display()(item)\">\n                        <span class=\"material-symbols\">close</span>\n                    </button>\n                </div>\n                }\n            </div>\n            }\n        </chr-input-data>\n    </chr-input>\n</div>", styles: [":host{display:flex;flex-direction:column;flex:1 1 auto;justify-self:stretch;align-self:center;min-width:0}.tag-select-input-wrapper{position:relative}.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", "tooltipPosition"], outputs: ["idChange", "nameChange", "valueChange", "displayValueChange", "outputTypeChange", "isDisabledChange", "isFocusedChange", "ngControlChange", "input", "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" }] }); }
 }