chrv-components 1.12.143 → 1.12.145

package/fesm2022/chrv-components.mjs

@@ -4026,10 +4026,7 @@ class ChrPopoverDirective {
             x: -1,
             y: -1,
         });
-        // private readonly isInsidePopover$ = new BehaviorSubject<boolean>(false);
         this.destroyRef = inject(DestroyRef);
-        // private readonly isInsideHost = signal(false);
-        // private readonly isInsideTarget = signal(false);
         this._targetElementView = signal(null, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "_targetElementView" }] : /* istanbul ignore next */ []));
         this.targetElement = computed(() => {
@@ -4058,27 +4055,6 @@ class ChrPopoverDirective {
                 y: event.clientY,
             });
         };
-        // private isInsideHostBoundingBox = (event: MouseEvent) => {
-        //   const hostRect = this.hostElement().getBoundingClientRect();
-        //   return this.isInsideRect(event, hostRect);
-        // };
-        // private isInsideTargetBoundingBox = (event: MouseEvent) => {
-        //   const trgRect = this.targetElement().getBoundingClientRect();
-        //   return this.isInsideRect(event, trgRect);
-        // };
-        // private isInsideRect = (event: MouseEvent, rect: DOMRect) => {
-        //   var x = event.clientX;
-        //   if (x < rect.left || x >= rect.right) return false;
-        //   var y = event.clientY;
-        //   if (y < rect.top || y >= rect.bottom) return false;
-        //   return true;
-        // };
-        // updateMousePosition = (event: MouseEvent) => {
-        //   this.lastKnowMousePosition.next({
-        //     x: event.clientX,
-        //     y: event.clientY,
-        //   });
-        // };
         this.setupSubject = () => {
             combineLatest([
                 this.isHostHovered$,
@@ -4100,93 +4076,28 @@ class ChrPopoverDirective {
         };
         this.setupHostListeners = () => {
             this.renderer.listen(this.hostElement(), 'mouseenter', (event) => {
-                // this.isInsidePopover$.next(true);
-                // this.isHostHovered$.next({
-                //   hover: true,
-                //   position: { x: event.clientX, y: event.clientY },
-                // });
-                // this.lastKnownMousePosition$.next({
-                //   x: event.clientX,
-                //   y: event.clientY,
-                // });
                 this.isHostHovered$.next(true);
-                // if (!this.isOpen()) {
-                //   this.showPopover();
-                // }
             });
             this.renderer.listen(this.hostElement(), 'mouseleave', (event) => {
-                // this.isInsideHost.set(false);
-                // setTimeout(() => {
-                //   if (!this.isInsideTarget() && !this.isInsideHostBoundingBox(event)) {
-                //     this.hidePopover();
-                //   }
-                // }, 100);
-                // this.isInsidePopover$.next(false);
-                // if (this.isPointerInsideElements(event)) {
-                //   return;
-                // }
-                // this.isHostHovered$.next({
-                //   hover: false,
-                //   position: { x: event.clientX, y: event.clientY },
-                // });
-                // this.lastKnownMousePosition$.next({
-                //   x: event.clientX,
-                //   y: event.clientY,
-                // });
                 this.isHostHovered$.next(false);
             });
         };
         this.setupTargetListeners = () => {
             this.renderer.listen(this.targetElement(), 'mouseenter', (event) => {
-                // this.isInsideTarget.set(true);
-                // this.shopPopover();
-                // this.isTargetHovered$.next({
-                //   hover: true,
-                //   position: { x: event.clientX, y: event.clientY },
-                // });
-                // this.lastKnownMousePosition$.next({
-                //   x: event.clientX,
-                //   y: event.clientY,
-                // });
                 this.isTargetHovered$.next(true);
-                // this.isInsidePopover$.next(true);
             });
             this.renderer.listen(this.targetElement(), 'mouseleave', (event) => {
-                // this.isInsideTarget.set(false);
-                // this.isInsidePopover$.next(false);
-                // if (this.isPointerInsideElements(event)) {
-                //   return;
-                // }
-                // this.isTargetHovered$.next({
-                //   hover: false,
-                //   position: { x: event.clientX, y: event.clientY },
-                // });
-                // this.lastKnownMousePosition$.next({
-                //   x: event.clientX,
-                //   y: event.clientY,
-                // });
                 this.isTargetHovered$.next(false);
-                // setTimeout(() => {
-                //   if (!this.isInsideHost() && !this.isInsideTargetBoundingBox(event))
-                //     this.hidePopover();
-                // }, 100);
             });
         };
         this.showPopover = () => {
             this.isOpen.set(true);
-            // this.isInsidePopover$.next(true);
             this.targetElement().showPopover({ source: this.hostElement() });
         };
         this.hidePopover = () => {
             this.isOpen.set(false);
-            // this.isInsidePopover$.next(false);
             this.targetElement().hidePopover();
         };
-        this.isEventInsideRect = (event, rect) => {
-            const x = event.clientX;
-            const y = event.clientY;
-            return this.isInsideRect(x, y, rect);
-        };
         this.isInsideRect = (x, y, rect) => {
             return (x >= rect.left && x <= rect.right && y >= rect.top && y <= rect.bottom);
         };
@@ -4202,20 +4113,15 @@ class ChrPopoverDirective {
             const rect = this.targetElement().getBoundingClientRect();
             return this.isInsideRect(x, y, rect);
         };
-        this.isPointerInsideElements = (x, y) => {
-            // private isPointerInsideElements = (event: MouseEvent): boolean => {
-            const hostRect = this.hostElement().getBoundingClientRect();
-            const targetRect = this.targetElement().getBoundingClientRect();
-            return (this.isInsideRect(x, y, hostRect) || this.isInsideRect(x, y, targetRect));
-        };
     }
     ngOnInit() {
         const maybeTemplate = this.chrPopover();
         const templateData = this.chrPopoverData();
         if (maybeTemplate instanceof TemplateRef) {
-            const ref = this.viewContainerRef.createEmbeddedView(maybeTemplate, {
-                $implicit: templateData,
-            });
+            const data = typeof templateData === 'object'
+                ? { $implicit: templateData, ...templateData }
+                : { $implicit: templateData };
+            const ref = this.viewContainerRef.createEmbeddedView(maybeTemplate, data);
             this._targetElementView.set(ref.rootNodes[0]);
         }
     }
@@ -4455,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) => {
@@ -4486,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) => {
@@ -4548,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"] }] }); }
@@ -4748,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.
@@ -4799,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