@roadtrip/components 3.33.2 → 3.33.3

package/dist/cjs/road-badge_14.cjs.entry.js

@@ -129,7 +129,7 @@ const Col = class {
 };
 Col.style = RoadColStyle0;
 
-const counterCss = ".sc-road-counter-h{position:relative;z-index:0;display:block}road-input.sc-road-counter{--input-text-align:center;--border-radius:0;--margin-bottom:0}road-button.sc-road-counter{width:3rem;font-size:var(--road-font-size-24);line-height:1.4;background:var(--road-surface);border:1px solid var(--road-button-tertiary-outline)}road-button.sc-road-counter:hover,road-button.sc-road-counter:focus{background:var(--road-button-tertiary-variant)}road-button.sc-road-counter road-icon.sc-road-counter{display:flex;fill:var(--road-primary)}.disabled.sc-road-counter{margin-right:-1px;margin-left:-1px;pointer-events:none;cursor:not-allowed;background:var(--road-surface-disabled);border:1px solid var(--road-on-surface-disabled);opacity:inherit}.disabled.sc-road-counter:focus{background:var(--road-disabled)}.disabled.sc-road-counter road-icon.sc-road-counter{fill:var(--road-grey-50)}road-button.btn-md.sc-road-counter{width:2.5rem}road-button.btn-sm.sc-road-counter{width:2rem}.counter-md.sc-road-counter{height:2.5rem}.counter-sm.sc-road-counter{height:2rem}.counter-md.sc-road-counter road-input.sc-road-counter{--height:2.5rem}.counter-md.sc-road-counter road-button.sc-road-counter{min-width:2.5rem}.counter-sm.sc-road-counter road-input.sc-road-counter{--height:2rem}.counter-sm.sc-road-counter road-button.sc-road-counter{min-width:2rem}";
+const counterCss = ".sc-road-counter-h{position:relative;z-index:0;display:block}road-input.sc-road-counter{--input-text-align:center;--border-radius:0;--margin-bottom:0}road-button.sc-road-counter{position:relative;width:3rem;font-size:var(--road-font-size-24);line-height:1.4;background:var(--road-surface);border:1px solid var(--road-button-tertiary-outline)}road-button.sc-road-counter:hover,road-button.sc-road-counter:focus{background:var(--road-button-tertiary-variant)}road-button.sc-road-counter road-icon.sc-road-counter{display:flex;fill:var(--road-primary)}.disabled.sc-road-counter{margin-right:-1px;margin-left:-1px;pointer-events:none;cursor:not-allowed;background:var(--road-surface-disabled);border:1px solid var(--road-on-surface-disabled);opacity:inherit}.disabled.sc-road-counter:focus{background:var(--road-disabled)}.disabled.sc-road-counter road-icon.sc-road-counter{fill:var(--road-grey-50)}road-button.btn-md.sc-road-counter{width:2.5rem}road-button.btn-sm.sc-road-counter{width:2rem}.counter-md.sc-road-counter{height:2.5rem}.counter-sm.sc-road-counter{height:2rem}.counter-md.sc-road-counter road-input.sc-road-counter{--height:2.5rem}.counter-md.sc-road-counter road-button.sc-road-counter{min-width:2.5rem}.counter-sm.sc-road-counter road-input.sc-road-counter{--height:2rem}.counter-sm.sc-road-counter road-button.sc-road-counter{min-width:2rem}";
 const RoadCounterStyle0 = counterCss;
 
 const Counter = class {
@@ -17893,54 +17893,57 @@ const Input = class {
             if (this.type === 'number' && this.blockdecimal) {
                 newValue = newValue.replace(/[.,]/g, ''); // Supprime les décimales si `blockdecimal` est activé
             }
-            // Convertir en nombre et ajuster selon min/max
-            let numericValue = parseFloat(newValue);
-            const minValue = this.min !== undefined ? parseFloat(this.min) : undefined;
-            const maxValue = this.max !== undefined ? parseFloat(this.max) : undefined;
-            if (!isNaN(numericValue)) {
-                if (minValue !== undefined && numericValue < minValue) {
-                    numericValue = minValue;
-                }
-                if (maxValue !== undefined && numericValue > maxValue) {
-                    numericValue = maxValue;
-                }
-                newValue = numericValue.toString();
-            }
             if (this.type === 'number') {
+                // Convertir en nombre et ajuster selon min/max
+                let numericValue = parseFloat(newValue);
+                const minValue = this.min !== undefined ? parseFloat(this.min) : undefined;
+                const maxValue = this.max !== undefined ? parseFloat(this.max) : undefined;
+                if (!isNaN(numericValue)) {
+                    if (minValue !== undefined && numericValue < minValue) {
+                        numericValue = minValue;
+                    }
+                    if (maxValue !== undefined && numericValue > maxValue) {
+                        numericValue = maxValue;
+                    }
+                    newValue = numericValue.toString();
+                    input.value = newValue; // Force l'affichage de la valeur max
+                    ev.preventDefault(); // Empêche la saisie supplémentaire
+                }
                 this.value = newValue;
-                input.value = newValue; // Mise à jour immédiate du champ
             }
-            else {
+            // Vérification si la valeur a réellement changé avant de la mettre à jour
+            if (this.value !== newValue) {
                 this.value = newValue;
+                this.roadInput.emit(ev);
             }
-            this.roadInput.emit(ev);
-            this.roadChange.emit({ value: newValue });
             // Appeler enforceMinMaxValue à chaque modification de la valeur
             this.enforceMinMaxValue();
         };
         this.onBlur = () => {
             let value = this.getValue();
-            const minValue = this.min !== undefined ? parseFloat(this.min) : undefined;
-            const maxValue = this.max !== undefined ? parseFloat(this.max) : undefined;
-            let numericValue = parseFloat(value);
-            if (!isNaN(numericValue)) {
-                if (minValue !== undefined && numericValue < minValue) {
-                    numericValue = minValue;
-                }
-                if (maxValue !== undefined && numericValue > maxValue) {
-                    numericValue = maxValue;
-                }
-                value = numericValue.toString();
-            }
             if (this.type === 'number') {
+                const minValue = this.min !== undefined ? parseFloat(this.min) : undefined;
+                const maxValue = this.max !== undefined ? parseFloat(this.max) : undefined;
+                let numericValue = parseFloat(value);
+                if (!isNaN(numericValue)) {
+                    if (minValue !== undefined && numericValue < minValue) {
+                        numericValue = minValue;
+                    }
+                    if (maxValue !== undefined && numericValue > maxValue) {
+                        numericValue = maxValue;
+                    }
+                    value = numericValue.toString();
+                }
                 this.value = value;
                 const input = document.getElementById(this.inputId);
                 input.value = value;
             }
-            else {
+            // Vérification si la valeur a changé avant mise à jour
+            if (this.value !== value) {
                 this.value = value;
+                this.roadBlur.emit(value);
+                this.roadChange.emit({ value });
             }
-            this.roadBlur.emit(value);
             // Appeler enforceMinMaxValue lors de la perte de focus
             this.enforceMinMaxValue();
         };
@@ -17968,10 +17971,10 @@ const Input = class {
     /**
      * Update the native input element when the value changes
      */
-    valueChanged() {
-        this.debouncedRoadChange(this.value);
-        // Appeler enforceMinMaxValue après chaque changement de valeur
-        this.enforceMinMaxValue();
+    valueChanged(newValue, oldValue) {
+        if (newValue !== oldValue) {
+            this.debouncedRoadChange(newValue);
+        }
     }
     async enforceMinMaxValue() {
         let value = this.getValue();
@@ -17987,12 +17990,9 @@ const Input = class {
             }
             value = numericValue.toString();
         }
-        if (this.type === 'number') {
-            this.value = value;
-            const input = document.getElementById(this.inputId);
-            input.value = value;
+        if (this.type === 'number' && this.value !== value) {
+            this.value = value; // Déclenche @Watch('value')
         }
-        this.roadChange.emit({ value });
     }
     getValue() {
         return typeof this.value === 'number'
@@ -18008,7 +18008,7 @@ const Input = class {
         const hasValueClass = this.value !== '' && this.value !== null ? 'has-value' : '';
         const lessLabelClass = this.label !== '' ? '' : 'less-label';
         const isInvalidClass = this.error !== undefined && this.error !== '' ? 'is-invalid' : '';
-        return (index.h(index.Host, { key: '4af2964df51193dacd3ea36a1fd79f2c6b01fcfc', "aria-disabled": this.disabled ? 'true' : null, class: this.sizes && `input-${this.sizes}`, value: value, blockdecimal: this.blockdecimal }, index.h("input", { key: '82db811a6fff01df156a857bdf2168d62a5455b7', class: `form-control ${hasValueClass} ${isInvalidClass} ${lessLabelClass}`, id: this.inputId, "aria-disabled": this.disabled ? 'true' : null, "aria-labelledby": labelId, disabled: this.disabled, autoCapitalize: this.autocapitalize, autoComplete: this.autocomplete, autoCorrect: this.autocorrect, enterKeyHint: this.enterkeyhint, autoFocus: this.autofocus, inputMode: this.inputmode, min: this.min, max: this.max, minLength: this.minlength, maxLength: this.maxlength, name: this.name, pattern: this.pattern, placeholder: this.placeholder, readOnly: this.readonly, required: this.required, spellcheck: this.spellcheck, step: this.step, size: this.size, type: this.type, value: value, onInput: this.onInput, onBlur: this.onBlur, onFocus: this.onFocus, onKeyDown: this.type === 'number' ? (event) => this.handleKeyDown(event) : undefined, "data-cy": 'road-input' }), index.h("label", { key: '5d3fa862ed44249d044043892df85beada63b70b', class: "form-label", id: labelId, htmlFor: this.inputId }, this.label), this.error && this.error !== '' && index.h("p", { key: 'fc369a8e4fe6ae36fefb24063f025db5badb62a8', class: "invalid-feedback" }, index.h("road-icon", { key: '1371b9544470df3fc800af1b36e4ed1a6f292511', slot: "start", name: "alert-error-solid", "aria-hidden": "true", size: "sm" }), this.error), this.helper && this.helper !== '' && index.h("p", { key: 'a2ff9b16b7fac10183ef756ba8994db79dd8b205', class: "helper" }, this.helper), this.type && this.type == 'password' && index.h("slot", { key: 'aa664412f19a89162c4b89519dadded5d67954e3', name: "checklistPassword" })));
+        return (index.h(index.Host, { key: 'e8296b902967681ad3483560e720236c98dc4f9f', "aria-disabled": this.disabled ? 'true' : null, class: this.sizes && `input-${this.sizes}`, value: value, blockdecimal: this.blockdecimal }, index.h("input", { key: '8ad175738f8fca4ca345aff156e3124db00afbdf', class: `form-control ${hasValueClass} ${isInvalidClass} ${lessLabelClass}`, id: this.inputId, "aria-disabled": this.disabled ? 'true' : null, "aria-labelledby": labelId, disabled: this.disabled, autoCapitalize: this.autocapitalize, autoComplete: this.autocomplete, autoCorrect: this.autocorrect, enterKeyHint: this.enterkeyhint, autoFocus: this.autofocus, inputMode: this.inputmode, min: this.min, max: this.max, minLength: this.minlength, maxLength: this.maxlength, name: this.name, pattern: this.pattern, placeholder: this.placeholder, readOnly: this.readonly, required: this.required, spellcheck: this.spellcheck, step: this.step, size: this.size, type: this.type, value: value, onInput: this.onInput, onBlur: this.onBlur, onFocus: this.onFocus, onKeyDown: this.type === 'number' ? (event) => this.handleKeyDown(event) : undefined, "data-cy": 'road-input' }), index.h("label", { key: 'f9e63512f533d2cf89a8bbfd6fffd8824a721211', class: "form-label", id: labelId, htmlFor: this.inputId }, this.label), this.error && this.error !== '' && index.h("p", { key: 'ec34468bc61c42943ee5b275081e02be859e45e2', class: "invalid-feedback" }, index.h("road-icon", { key: '83204d0fecc77eb3d8e8bc9697cd9bfc7ddb3be5', slot: "start", name: "alert-error-solid", "aria-hidden": "true", size: "sm" }), this.error), this.helper && this.helper !== '' && index.h("p", { key: 'b639735e1508e1aac0ba5800edf9649fb1847155', class: "helper" }, this.helper), this.type && this.type == 'password' && index.h("slot", { key: 'c33c73bc53ae22f3b3bd97021a5c4f320cff89f9', name: "checklistPassword" })));
     }
     static get watchers() { return {
         "debounce": ["debounceChanged"],