@roadtrip/components 3.33.2 → 3.33.4

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 {
@@ -244,8 +244,24 @@ const Counter = class {
     componentWillLoad() {
         this.onValueChange(this.value);
     }
+    /** Vérifie et applique le `text-indent` si `prepend` est présent */
+    updateIndentation() {
+        const hasPrepend = !!this.el.querySelector('[slot="prepend"]');
+        const formControl = this.el.querySelector('.form-control');
+        const formLabel = this.el.querySelector('.form-label');
+        if (formControl) {
+            formControl.style.textIndent = hasPrepend ? '' : '';
+        }
+        if (formLabel) {
+            formLabel.style.textIndent = hasPrepend ? '' : '';
+        }
+    }
     componentDidLoad() {
         const buttons = this.el.querySelectorAll('road-button');
+        this.updateIndentation(); // Appliquer les styles au montage
+        // Observer les mutations (au cas où des éléments sont ajoutés dynamiquement)
+        const observer = new MutationObserver(() => this.updateIndentation());
+        observer.observe(this.el, { childList: true, subtree: true });
         // Ajouter les événements pour chaque road-button
         buttons.forEach((btn) => {
             btn.addEventListener('touchstart', () => {
@@ -274,7 +290,7 @@ const Counter = class {
     }
     render() {
         const dataCi = this.isDustbinVisible ? "road-dustbin" : "";
-        return (index.h("road-input-group", { key: '8c5c49f3a335f5becc5b1c67823b3bede8847d7b', class: this.size && `counter-${this.size}` }, index.h("road-button", { key: 'b31f4ea302a78333283578875bfe488891da73e9', slot: "prepend", size: this.size, onClick: this.decrease, class: this.leftIconClasses, "data-cy": "road-decrease" }, index.h("road-icon", { key: '1b18e482d8cc3d2975c9cf3c52a42f3ae4660238', name: this.isDustbinVisible ? "delete-forever" : "navigation-add-less", ref: (el) => this.iconCounterLess = el, size: this.size, "data-cy": dataCi, role: "button" })), index.h("road-input", { key: '01475e769b04aa4080be3e24cf1f16d1651bb5a1', ref: (el) => this.inputElement = el, type: "number", min: this.min.toString(), max: (this.max && this.max.toString()), step: this.step, value: this.value, onRoadChange: this.onRoadChange, onKeyUp: this.checkValue, "data-cy": "road-input-counter", readonly: this.readonly, label: "Quantit\u00E9" }), index.h("road-button", { key: '4a27e374ce3cee4d1c47a5f921af4b2e2d6fbc53', slot: "append", size: this.size, onClick: this.increase, class: this.rightIconClasses, "data-cy": "road-increase" }, index.h("road-icon", { key: '3a53a84956795e8576a3e4ba240a17f074d96575', name: "navigation-add-more", size: this.size, role: "button" }))));
+        return (index.h("road-input-group", { key: '0f8b1b0a35803e52ba57c371654f65069ee24eb1', class: this.size && `counter-${this.size}` }, index.h("road-button", { key: '769528d0e5b027e1b28cb9ef04b3c8f8c26f34d5', slot: "prepend", size: this.size, onClick: this.decrease, class: this.leftIconClasses, "data-cy": "road-decrease" }, index.h("road-icon", { key: 'fe666f6455a7dfd2f944df71fdac8fb858dc9d56', name: this.isDustbinVisible ? "delete-forever" : "navigation-add-less", ref: (el) => this.iconCounterLess = el, size: this.size, "data-cy": dataCi, role: "button" })), index.h("road-input", { key: '315b93bf129f7ae04138f584f060b1c9d5eac6c9', ref: (el) => this.inputElement = el, type: "number", min: this.min.toString(), max: (this.max && this.max.toString()), step: this.step, value: this.value, onRoadChange: this.onRoadChange, onKeyUp: this.checkValue, "data-cy": "road-input-counter", readonly: this.readonly, label: "Quantit\u00E9" }), index.h("road-button", { key: 'e17851794c015e99c34c8d04bccce046b57bad05', slot: "append", size: this.size, onClick: this.increase, class: this.rightIconClasses, "data-cy": "road-increase" }, index.h("road-icon", { key: 'e0b4898bdb9bab9f48acf38a4a6a2b31520c955d', name: "navigation-add-more", size: this.size, role: "button" }))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {
@@ -284,7 +300,7 @@ const Counter = class {
 let counterIds = 0;
 Counter.style = RoadCounterStyle0;
 
-const drawerCss = ":host{--background:var(--road-surface);--color:var(--road-on-surface);--header-icon:var(--road-on-surface);--header-color:var(--road-on-surface);--header-background:var(--road-surface);--header-delimiter:0;--back-chevron-color:var(--road-icon);--max-height:auto;--z-index:10;position:fixed;top:0;left:0;z-index:var(--z-index);display:flex;justify-content:flex-start;width:100%;height:100%;overflow:hidden;font-family:var(--road-font, sans-serif);line-height:1.5;color:var(--color);visibility:hidden !important;opacity:0;transition:opacity 0.15s linear, visibility 0.15s}.drawer-overlay{position:absolute;top:0;right:0;bottom:0;left:0;display:block;touch-action:none;cursor:pointer;background:var(--road-overlay)}.drawer-dialog{position:relative;width:100%;pointer-events:none;transition:transform 0.3s ease-out;transform:translateX(-100%)}:host(.drawer-right){justify-content:flex-end}:host(.drawer-right) .drawer-dialog{transform:translateX(100%)}:host(.drawer-bottom){align-items:flex-end}:host(.drawer-bottom) .drawer-dialog{width:100%;max-height:var(--max-height);transform:translateY(100%)}:host(.drawer-bottom) .drawer-content{height:auto}.drawer-content{position:relative;display:flex;flex-direction:column;width:100%;height:100vh;pointer-events:auto;background-color:var(--background);background-clip:padding-box;box-shadow:var(--road-elevation-hight)}.drawer-header{display:flex;flex-shrink:0;align-items:center;justify-content:flex-end;height:3.5rem;color:var(--header-color);background:var(--header-background);border-color:var(--road-grey-300);border-style:solid;border-width:var(--header-delimiter)}.drawer-header road-icon{flex-shrink:0;color:var(--header-icon)}.drawer-footer{padding:var(--road-spacing-05);background-color:var(--road-surface)}.drawer-footer.remove-padding{padding:0}.drawer-header-inverse{--header-icon:var(--road-on-primary);--header-color:var(--road-on-primary);--header-background:var(--road-primary-variant);margin-bottom:2.5rem}.drawer-action,.drawer-close{display:flex;align-items:center;justify-content:center;height:3.5rem;padding:0.5rem;font-family:inherit;font-size:0.875rem;color:inherit;cursor:pointer;background:transparent;border:0;appearance:none;-webkit-tap-highlight-color:rgba(0, 0, 0, 0)}.drawer-header:not(.drawer-header-inverse) .drawer-action road-icon{color:var(--back-chevron-color)}.drawer-action~.drawer-title,.drawer-close~.drawer-title{padding-left:0}.drawer-action-left,.drawer-close-left{margin-right:auto}.drawer-title{display:flex;flex-grow:1;align-items:center;justify-content:center;height:3.5rem;padding-left:3.5rem;margin:0;font-size:var(--road-body-medium)}.drawer-body{overflow-y:auto;padding:0 var(--road-spacing-05) var(--road-spacing-05)}.drawer-body.remove-padding{padding:0}:host(.drawer-right) .drawer-body,:host(.drawer-left) .drawer-body{height:calc(100vh - 3.5rem)}.drawer-inner{padding:0 1rem 2.5rem}@media (min-width: 768px){.drawer-inner{padding:0 2rem 2.5rem}.drawer-body{padding:0 var(--road-spacing-08) var(--road-spacing-05)}.drawer-body.remove-padding{padding:0}.drawer-footer{padding:var(--road-spacing-05) var(--road-spacing-08)}.drawer-footer.remove-padding{padding:0}}:host(.drawer-open){visibility:visible !important;opacity:1}:host(.drawer-open) .drawer-dialog{transform:none}";
+const drawerCss = ":host{--background:var(--road-surface);--color:var(--road-on-surface);--header-icon:var(--road-on-surface);--header-color:var(--road-on-surface);--header-background:var(--road-surface);--header-delimiter:0;--back-chevron-color:var(--road-icon);--max-height:auto;--z-index:10;position:fixed;top:0;left:0;z-index:var(--z-index);display:flex;justify-content:flex-start;width:100%;height:100%;overflow:hidden;font-family:var(--road-font, sans-serif);line-height:1.5;color:var(--color);visibility:hidden !important;opacity:0;transition:opacity 0.15s linear, visibility 0.15s}.drawer-overlay{position:absolute;top:0;right:0;bottom:0;left:0;display:block;touch-action:none;cursor:pointer;background:var(--road-overlay)}.drawer-dialog{position:relative;width:100%;pointer-events:none;transition:transform 0.3s ease-out;transform:translateX(-100%)}:host(.drawer-right){justify-content:flex-end}:host(.drawer-right) .drawer-dialog{transform:translateX(100%)}:host(.drawer-bottom){align-items:flex-end}:host(.drawer-bottom) .drawer-dialog{width:100%;max-height:var(--max-height);transform:translateY(100%)}:host(.drawer-bottom) .drawer-content{height:auto}.drawer-content{position:relative;display:flex;flex-direction:column;width:100%;height:100vh;max-height:100vh;pointer-events:auto;background-color:var(--background);background-clip:padding-box;box-shadow:var(--road-elevation-hight)}.drawer-header{display:flex;flex-shrink:0;align-items:center;justify-content:flex-end;height:3.5rem;color:var(--header-color);background:var(--header-background);border-color:var(--road-grey-300);border-style:solid;border-width:var(--header-delimiter)}.drawer-header road-icon{flex-shrink:0;color:var(--header-icon)}.drawer-footer{padding:var(--road-spacing-05);background-color:var(--road-surface)}.drawer-footer.remove-padding{padding:0}.drawer-header-inverse{--header-icon:var(--road-on-primary);--header-color:var(--road-on-primary);--header-background:var(--road-primary-variant);margin-bottom:2.5rem}.drawer-action,.drawer-close{display:flex;align-items:center;justify-content:center;height:3.5rem;padding:0.5rem;font-family:inherit;font-size:0.875rem;color:inherit;cursor:pointer;background:transparent;border:0;appearance:none;-webkit-tap-highlight-color:rgba(0, 0, 0, 0)}.drawer-header:not(.drawer-header-inverse) .drawer-action road-icon{color:var(--back-chevron-color)}.drawer-action~.drawer-title,.drawer-close~.drawer-title{padding-left:0}.drawer-action-left,.drawer-close-left{margin-right:auto}.drawer-title{display:flex;flex-grow:1;align-items:center;justify-content:center;height:3.5rem;padding-left:3.5rem;margin:0;font-size:var(--road-body-medium)}.drawer-body{overflow-y:auto;padding:0 var(--road-spacing-05) var(--road-spacing-05)}.drawer-body.remove-padding{padding:0}:host(.drawer-right) .drawer-body,:host(.drawer-left) .drawer-body{height:calc(100vh - 3.5rem)}.drawer-inner{padding:0 1rem 2.5rem}@media (min-width: 768px){.drawer-inner{padding:0 2rem 2.5rem}.drawer-body{padding:0 var(--road-spacing-08) var(--road-spacing-05)}.drawer-body.remove-padding{padding:0}.drawer-footer{padding:var(--road-spacing-05) var(--road-spacing-08)}.drawer-footer.remove-padding{padding:0}}:host(.drawer-open){visibility:visible !important;opacity:1}:host(.drawer-open) .drawer-dialog{transform:none}";
 const RoadDrawerStyle0 = drawerCss;
 
 const Drawer = class {
@@ -17893,54 +17909,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 +17987,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 +18006,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 +18024,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"],