@roadtrip/components 3.20.4 → 3.22.0

package/hydrate/index.js

@@ -13629,12 +13629,16 @@ class Dialog {
   }; }
 }
 
-const drawerCss = "/*!@:host*/.sc-road-drawer-h{--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*/.drawer-overlay.sc-road-drawer{position:absolute;top:0;right:0;bottom:0;left:0;display:block;touch-action:none;cursor:pointer;background:var(--road-overlay)}/*!@.drawer-dialog*/.drawer-dialog.sc-road-drawer{position:relative;width:100%;pointer-events:none;transition:transform 0.3s ease-out;transform:translateX(-100%)}/*!@:host(.drawer-right)*/.drawer-right.sc-road-drawer-h{justify-content:flex-end}/*!@:host(.drawer-right) .drawer-dialog*/.drawer-right.sc-road-drawer-h .drawer-dialog.sc-road-drawer{transform:translateX(100%)}/*!@:host(.drawer-bottom)*/.drawer-bottom.sc-road-drawer-h{align-items:flex-end}/*!@:host(.drawer-bottom) .drawer-dialog*/.drawer-bottom.sc-road-drawer-h .drawer-dialog.sc-road-drawer{width:100%;max-height:var(--max-height);transform:translateY(100%)}/*!@:host(.drawer-bottom) .drawer-content*/.drawer-bottom.sc-road-drawer-h .drawer-content.sc-road-drawer{height:auto}/*!@.drawer-content*/.drawer-content.sc-road-drawer{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*/.drawer-header.sc-road-drawer{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*/.drawer-header.sc-road-drawer road-icon.sc-road-drawer{flex-shrink:0;color:var(--header-icon)}/*!@.drawer-header-inverse*/.drawer-header-inverse.sc-road-drawer{--header-icon:var(--road-on-primary);--header-color:var(--road-on-primary);--header-background:var(--road-primary-variant);margin-bottom:2.5rem}/*!@.drawer-action,\n.drawer-close*/.drawer-action.sc-road-drawer,.drawer-close.sc-road-drawer{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*/.drawer-header.sc-road-drawer:not(.drawer-header-inverse) .drawer-action.sc-road-drawer road-icon.sc-road-drawer{color:var(--back-chevron-color)}/*!@.drawer-action ~ .drawer-title,\n.drawer-close ~ .drawer-title*/.drawer-action.sc-road-drawer~.drawer-title.sc-road-drawer,.drawer-close.sc-road-drawer~.drawer-title.sc-road-drawer{padding-left:0}/*!@.drawer-action-left,\n.drawer-close-left*/.drawer-action-left.sc-road-drawer,.drawer-close-left.sc-road-drawer{margin-right:auto}/*!@.drawer-title*/.drawer-title.sc-road-drawer{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*/.drawer-body.sc-road-drawer{overflow-y:auto}/*!@:host(.drawer-right) .drawer-body,\n:host(.drawer-left) .drawer-body*/.drawer-right.sc-road-drawer-h .drawer-body.sc-road-drawer,.drawer-left.sc-road-drawer-h .drawer-body.sc-road-drawer{height:calc(100vh - 3.5rem)}/*!@.drawer-inner*/.drawer-inner.sc-road-drawer{padding:0 1rem 2.5rem}@media (min-width: 768px){/*!@.drawer-inner*/.drawer-inner.sc-road-drawer{padding:0 2rem 2.5rem}}/*!@:host(.drawer-open)*/.drawer-open.sc-road-drawer-h{visibility:visible !important;opacity:1}/*!@:host(.drawer-open) .drawer-dialog*/.drawer-open.sc-road-drawer-h .drawer-dialog.sc-road-drawer{transform:none}";
+const drawerCss = "/*!@:host*/.sc-road-drawer-h{--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*/.drawer-overlay.sc-road-drawer{position:absolute;top:0;right:0;bottom:0;left:0;display:block;touch-action:none;cursor:pointer;background:var(--road-overlay)}/*!@.drawer-dialog*/.drawer-dialog.sc-road-drawer{position:relative;width:100%;pointer-events:none;transition:transform 0.3s ease-out;transform:translateX(-100%)}/*!@:host(.drawer-right)*/.drawer-right.sc-road-drawer-h{justify-content:flex-end}/*!@:host(.drawer-right) .drawer-dialog*/.drawer-right.sc-road-drawer-h .drawer-dialog.sc-road-drawer{transform:translateX(100%)}/*!@:host(.drawer-bottom)*/.drawer-bottom.sc-road-drawer-h{align-items:flex-end}/*!@:host(.drawer-bottom) .drawer-dialog*/.drawer-bottom.sc-road-drawer-h .drawer-dialog.sc-road-drawer{width:100%;max-height:var(--max-height);transform:translateY(100%)}/*!@:host(.drawer-bottom) .drawer-content*/.drawer-bottom.sc-road-drawer-h .drawer-content.sc-road-drawer{height:auto}/*!@.drawer-content*/.drawer-content.sc-road-drawer{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*/.drawer-header.sc-road-drawer{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*/.drawer-header.sc-road-drawer road-icon.sc-road-drawer{flex-shrink:0;color:var(--header-icon)}/*!@.drawer-footer*/.drawer-footer.sc-road-drawer{padding:var(--road-spacing-05)}/*!@.drawer-header-inverse*/.drawer-header-inverse.sc-road-drawer{--header-icon:var(--road-on-primary);--header-color:var(--road-on-primary);--header-background:var(--road-primary-variant);margin-bottom:2.5rem}/*!@.drawer-action,\n.drawer-close*/.drawer-action.sc-road-drawer,.drawer-close.sc-road-drawer{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*/.drawer-header.sc-road-drawer:not(.drawer-header-inverse) .drawer-action.sc-road-drawer road-icon.sc-road-drawer{color:var(--back-chevron-color)}/*!@.drawer-action ~ .drawer-title,\n.drawer-close ~ .drawer-title*/.drawer-action.sc-road-drawer~.drawer-title.sc-road-drawer,.drawer-close.sc-road-drawer~.drawer-title.sc-road-drawer{padding-left:0}/*!@.drawer-action-left,\n.drawer-close-left*/.drawer-action-left.sc-road-drawer,.drawer-close-left.sc-road-drawer{margin-right:auto}/*!@.drawer-title*/.drawer-title.sc-road-drawer{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*/.drawer-body.sc-road-drawer{overflow-y:auto}/*!@:host(.drawer-right) .drawer-body,\n:host(.drawer-left) .drawer-body*/.drawer-right.sc-road-drawer-h .drawer-body.sc-road-drawer,.drawer-left.sc-road-drawer-h .drawer-body.sc-road-drawer{height:calc(100vh - 3.5rem)}/*!@.drawer-inner*/.drawer-inner.sc-road-drawer{padding:0 1rem 2.5rem}@media (min-width: 768px){/*!@.drawer-inner*/.drawer-inner.sc-road-drawer{padding:0 2rem 2.5rem}}/*!@:host(.drawer-open)*/.drawer-open.sc-road-drawer-h{visibility:visible !important;opacity:1}/*!@:host(.drawer-open) .drawer-dialog*/.drawer-open.sc-road-drawer-h .drawer-dialog.sc-road-drawer{transform:none}";
 
 /**
  * @slot  - Content of the drawer.
  * @slot title - replace the title with a custom title section when `'drawerTitle'` is not set
- *
+ * @slot footer - footer of the drawer
+ * `<div slot="footer">`
+   `<road-button color="primary" outline="true" expand="true">Annuler</road-button>`
+   `<road-button color="primary" expand="true" class="mb-0">Valider</road-button>`
+   ` </div>`
  */
 class Drawer {
   constructor(hostRef) {
@@ -13665,6 +13669,7 @@ class Drawer {
     this.hasBackIcon = false;
     this.backText = undefined;
     this.drawerTitle = undefined;
+    this.ariaLabel = undefined;
     this.hasCloseIcon = true;
   }
   /**
@@ -13712,14 +13717,19 @@ class Drawer {
       item.addEventListener('click', () => this.close());
     });
   }
+  hasFooterContent() {
+    const footerSlot = this.el.querySelector('[slot="footer"]');
+    return footerSlot !== null && footerSlot.childElementCount > 0;
+  }
   render() {
     const drawerIsOpenClass = this.isOpen ? 'drawer-open' : '';
     const inverseHeaderClass = this.hasInverseHeader ? 'drawer-header-inverse' : '';
+    const ariaLabel = this.ariaLabel !== undefined ? this.ariaLabel : 'drawer';
     const drawerDelimiterClass = this.drawerTitle !== undefined && !this.hasInverseHeader ? 'drawer-delimiter' : '';
     const backIconElement = this.hasBackIcon ? hAsync("button", { type: "button", class: "drawer-action", "aria-label": "Back", onClick: this.onClickBack }, hAsync("road-icon", { icon: navigationChevron, rotate: "180" }), this.backText) : '';
     const closeIconElement = this.hasCloseIcon ? hAsync("button", { type: "button", class: "drawer-close", onClick: this.onClick, "aria-label": "Close" }, hAsync("road-icon", { icon: navigationClose, "aria-hidden": "true" })) : '';
     const drawerWidthValue = this.position === 'bottom' ? '100%' : this.drawerWidth + 'px';
-    return (hAsync(Host, { class: `${drawerIsOpenClass} drawer-${this.position}`, tabindex: "0", role: "dialog", "aria-label": "drawer" }, hAsync("div", { class: "drawer-overlay", onClick: this.onClick, tabindex: "-1" }), hAsync("div", { class: "drawer-dialog", style: { maxWidth: `${drawerWidthValue}` }, role: "document", tabindex: "0" }, hAsync("div", { class: "drawer-content" }, hAsync("header", { class: `drawer-header ${inverseHeaderClass} ${drawerDelimiterClass}` }, backIconElement, this.drawerTitle !== undefined ? hAsync("h2", { class: "drawer-title" }, this.drawerTitle) : hAsync("div", { class: "drawer-title" }, hAsync("slot", { name: "title" })), closeIconElement), hAsync("div", { class: "drawer-body" }, hAsync("slot", null))))));
+    return (hAsync(Host, { class: `${drawerIsOpenClass} drawer-${this.position}`, tabindex: "0", role: "dialog", "aria-label": `${ariaLabel}` }, hAsync("div", { class: "drawer-overlay", onClick: this.onClick, tabindex: "-1" }), hAsync("div", { class: "drawer-dialog", style: { maxWidth: `${drawerWidthValue}` }, role: "document", tabindex: "0" }, hAsync("div", { class: "drawer-content" }, hAsync("header", { class: `drawer-header ${inverseHeaderClass} ${drawerDelimiterClass}` }, backIconElement, this.drawerTitle !== undefined ? hAsync("h2", { class: "drawer-title" }, this.drawerTitle) : hAsync("div", { class: "drawer-title" }, hAsync("slot", { name: "title" })), closeIconElement), hAsync("div", { class: "drawer-body" }, hAsync("slot", null)), this.hasFooterContent() && (hAsync("footer", { class: "drawer-footer" }, hAsync("slot", { name: "footer" })))))));
   }
   get el() { return getElement(this); }
   static get watchers() { return {
@@ -13737,6 +13747,7 @@ class Drawer {
       "hasBackIcon": [4, "has-back-icon"],
       "backText": [1, "back-text"],
       "drawerTitle": [1, "drawer-title"],
+      "ariaLabel": [1, "aria-label"],
       "hasCloseIcon": [4, "has-close-icon"],
       "open": [64],
       "close": [64],
@@ -31530,7 +31541,7 @@ var lodash = createCommonjsModule(function (module, exports) {
 }.call(commonjsGlobal));
 });
 
-const inputCss = ".sc-road-input-h{--height:3rem;--border-radius:0.25rem;--input-text-align:left;--margin-bottom:1rem;position:relative;display:block;margin-bottom:var(--margin-bottom);font-family:var(--road-font, sans-serif);color:var(--road-grey-10)}.form-control.sc-road-input{box-sizing:border-box;display:block;width:100%;height:var(--height);padding:0.75rem 1rem 0;margin:0;font-size:var(--road-body-medium);color:var(--road-on-surface);text-align:var(--input-text-align);background:var(--road-surface);border:1px solid var(--road-input-outline);border-radius:var(--border-radius);box-shadow:none;appearance:none}.form-control[type=\"number\"].sc-road-input{appearance:textfield}.form-control.sc-road-input::-webkit-calendar-picker-indicator{margin-top:-0.75rem}.form-control.sc-road-input::-webkit-date-and-time-value{padding-top:0.625rem}.form-control.sc-road-input::placeholder{color:var(--road-on-surface-extra-weak);opacity:1}@media (hover: hover){.form-control.sc-road-input:not(:disabled):hover{border-color:var(--road-input-outline-variant)}}.form-control.sc-road-input:focus~.form-label.sc-road-input,.form-control[required].sc-road-input:valid~.form-label.sc-road-input,.form-control.has-value.sc-road-input~.form-label.sc-road-input,.form-control[type=\"date\"].sc-road-input~.form-label.sc-road-input,.form-control[type=\"time\"].sc-road-input~.form-label.sc-road-input{transform:scale(0.625) translateY(-0.625rem)}.form-control.sc-road-input:placeholder-shown~.form-label.sc-road-input{transform:scale(0.625) translateY(-0.625rem)}.form-control.sc-road-input:-ms-input-placeholder~.form-label.sc-road-input{transform:scale(0.625) translateY(-0.625rem)}.form-control.sc-road-input:not(:disabled):focus,.form-control[autofocus].sc-road-input{border-color:var(--road-input-outline-variant);outline:0}.form-control.sc-road-input:disabled,.form-control[readonly].sc-road-input{cursor:not-allowed;background:var(--road-surface-disabled);opacity:1}.form-label.sc-road-input{position:absolute;top:0.75rem;left:1rem;display:block;font-size:var(--road-body-medium);line-height:1.5;color:var(--road-on-surface-weak);pointer-events:none;transition:transform 200ms cubic-bezier(0, 0, 0.2, 1) 0ms;transform-origin:0 0}.form-control.sc-road-input:required~.form-label.sc-road-input::after{color:var(--road-danger-default);content:\" *\"}.less-label.sc-road-input{padding-top:0}.input-xl.sc-road-input-h{--height:3.5rem}.input-xl.sc-road-input-h .form-control.sc-road-input{padding:1rem 1rem 0}.phone-number.sc-road-input-h .form-control.sc-road-input{padding-left:2rem}.phone-number.sc-road-input-h .form-label.sc-road-input{left:2rem}.input-xl.sc-road-input-h .form-label.sc-road-input{top:1rem}.input-xl.sc-road-input-h .form-control.sc-road-input:focus~.form-label.sc-road-input,.input-xl.sc-road-input-h .form-control[autofocus].sc-road-input~.form-label.sc-road-input,.input-xl.sc-road-input-h .form-control[required].sc-road-input:valid~.form-label.sc-road-input,.input-xl.sc-road-input-h .form-control.has-value.sc-road-input~.form-label.sc-road-input,.input-xl.sc-road-input-h .form-control[type=\"date\"].sc-road-input~.form-label.sc-road-input,.input-xl.sc-road-input-h .form-control[type=\"time\"].sc-road-input~.form-label.sc-road-input{transform:scale(0.75) translateY(-0.625rem)}.input-xl.sc-road-input-h .form-control.sc-road-input:placeholder-shown~.form-label.sc-road-input{transform:scale(0.625) translateY(-0.625rem)}.invalid-feedback.sc-road-input{display:none;width:100%;margin-top:0.5rem;font-size:var(--road-helper-medium);color:var(--road-on-danger-surface)}.invalid-feedback.sc-road-input road-icon.sc-road-input{color:var(--road-danger-icon);margin-right:var(--road-spacing-02)}.form-control.is-invalid.sc-road-input,.was-validated.sc-road-input .form-control.sc-road-input:invalid{border-color:var(--road-danger-outline)}.form-control.is-invalid.sc-road-input~.invalid-feedback.sc-road-input,.was-validated.sc-road-input .form-control.sc-road-input:invalid~.invalid-feedback.sc-road-input{display:flex}.helper.sc-road-input{margin-top:0.5rem;font-size:var(--road-body-small);color:var(--road-on-surface-weak)}.form-control[type=\"password\"].sc-road-input~.checklist-password.sc-road-input .invalid.sc-road-input{color:var(--road-on-surface-weak)}";
+const inputCss = ".sc-road-input-h{--height:3rem;--border-radius:0.25rem;--input-text-align:left;--margin-bottom:1rem;position:relative;display:block;margin-bottom:var(--margin-bottom);font-family:var(--road-font, sans-serif);color:var(--road-grey-10)}.form-control.sc-road-input{box-sizing:border-box;display:block;width:100%;height:var(--height);padding:0.75rem 1rem 0;margin:0;font-size:var(--road-body-medium);color:var(--road-on-surface);text-align:var(--input-text-align);background:var(--road-surface);border:1px solid var(--road-input-outline);border-radius:var(--border-radius);box-shadow:none;appearance:none}.form-control[type=\"number\"].sc-road-input{appearance:textfield}.form-control.sc-road-input::-webkit-calendar-picker-indicator{margin-top:-0.75rem}.form-control.sc-road-input::-webkit-date-and-time-value{padding-top:0.625rem}.form-control.sc-road-input::placeholder{color:var(--road-on-surface-extra-weak);opacity:1}@media (hover: hover){.form-control.sc-road-input:not(:disabled):hover{border-color:var(--road-input-outline-variant)}}.form-control.sc-road-input:focus~.form-label.sc-road-input,.form-control[required].sc-road-input:valid~.form-label.sc-road-input,.form-control.has-value.sc-road-input~.form-label.sc-road-input,.form-control[type=\"date\"].sc-road-input~.form-label.sc-road-input,.form-control[type=\"time\"].sc-road-input~.form-label.sc-road-input{transform:scale(0.625) translateY(-0.625rem)}.form-control.sc-road-input:placeholder-shown~.form-label.sc-road-input{transform:scale(0.625) translateY(-0.625rem)}.form-control.sc-road-input:-ms-input-placeholder~.form-label.sc-road-input{transform:scale(0.625) translateY(-0.625rem)}.form-control.sc-road-input:not(:disabled):focus,.form-control[autofocus].sc-road-input{border-color:var(--road-input-outline-variant);outline:0}.form-control.sc-road-input:disabled,.form-control[readonly].sc-road-input{color:var(--road-on-surface-disabled);cursor:not-allowed;background:var(--road-surface-disabled);opacity:1}.form-label.sc-road-input{position:absolute;top:0.75rem;left:1rem;display:block;font-size:var(--road-body-medium);line-height:1.5;color:var(--road-on-surface-weak);pointer-events:none;transition:transform 200ms cubic-bezier(0, 0, 0.2, 1) 0ms;transform-origin:0 0}.form-control.sc-road-input:required~.form-label.sc-road-input::after{color:var(--road-danger-default);content:\" *\"}.sc-road-input-h:has([disabled]) .form-label.sc-road-input{color:var(--road-on-surface-disabled)}.less-label.sc-road-input{padding-top:0}.input-xl.sc-road-input-h{--height:3.5rem}.input-xl.sc-road-input-h .form-control.sc-road-input{padding:1rem 1rem 0}.phone-number.sc-road-input-h .form-control.sc-road-input{padding-left:2rem}.phone-number.sc-road-input-h .form-label.sc-road-input{left:2rem}.input-xl.sc-road-input-h .form-label.sc-road-input{top:1rem}.input-xl.sc-road-input-h .form-control.sc-road-input:focus~.form-label.sc-road-input,.input-xl.sc-road-input-h .form-control[autofocus].sc-road-input~.form-label.sc-road-input,.input-xl.sc-road-input-h .form-control[required].sc-road-input:valid~.form-label.sc-road-input,.input-xl.sc-road-input-h .form-control.has-value.sc-road-input~.form-label.sc-road-input,.input-xl.sc-road-input-h .form-control[type=\"date\"].sc-road-input~.form-label.sc-road-input,.input-xl.sc-road-input-h .form-control[type=\"time\"].sc-road-input~.form-label.sc-road-input{transform:scale(0.75) translateY(-0.625rem)}.input-xl.sc-road-input-h .form-control.sc-road-input:placeholder-shown~.form-label.sc-road-input{transform:scale(0.625) translateY(-0.625rem)}.invalid-feedback.sc-road-input{display:none;width:100%;margin-top:0.5rem;font-size:var(--road-helper-medium);color:var(--road-on-danger-surface)}.invalid-feedback.sc-road-input road-icon.sc-road-input{color:var(--road-danger-icon);margin-right:var(--road-spacing-02)}.form-control.is-invalid.sc-road-input,.was-validated.sc-road-input .form-control.sc-road-input:invalid{border-color:var(--road-danger-outline)}.form-control.is-invalid.sc-road-input~.invalid-feedback.sc-road-input,.was-validated.sc-road-input .form-control.sc-road-input:invalid~.invalid-feedback.sc-road-input{display:flex}.helper.sc-road-input{margin-top:0.5rem;font-size:var(--road-body-small);color:var(--road-on-surface-weak)}.form-control[type=\"password\"].sc-road-input~.checklist-password.sc-road-input .invalid.sc-road-input{color:var(--road-on-surface-weak)}";
 
 /**
  * @slot checklistPassword - Content the checklist Password exemple.
@@ -31727,7 +31738,7 @@ class InputGroup {
   }; }
 }
 
-const itemCss = "/*!@:host*/.sc-road-item-h{--border-radius:var(--road-spacing-02);--background-color:var(--road-surface);--detail-color:var(--road-icon);position:relative;box-sizing:border-box;display:flex;align-items:center;justify-content:space-between;overflow:hidden;font-size:var(--road-font-size-14);text-decoration:none;border:1px solid var(--road-outline-weak);border-radius:var(--border-radius);outline:none}/*!@.layout-vertical*/.layout-vertical.sc-road-item{display:flex;flex-direction:column;max-width:224px}/*!@.layout-vertical .item-inner*/.layout-vertical.sc-road-item .item-inner.sc-road-item{align-items:flex-start}/*!@.item-native*/.item-native.sc-road-item{position:relative;z-index:1;box-sizing:border-box;display:flex;align-items:inherit;justify-content:inherit;width:100%;padding:var(--road-spacing-05);margin:0;overflow:inherit;font-family:inherit;font-size:inherit;color:var(--road-on-surface);text-align:left;background-color:var(--background-color);border:2px solid var(--road-surface);outline:none;transition:background 0.15s ease-in-out;-webkit-tap-highlight-color:rgba(0, 0, 0, 0)}/*!@.item-active*/.item-active.sc-road-item{border:2px solid var(--road-outline-variant)}/*!@button.item-native:not(:disabled):not(.item-active):hover,\nbutton.item-native:not(:disabled):not(.item-active):focus*/button.item-native.sc-road-item:not(:disabled):not(.item-active):hover,button.item-native.sc-road-item:not(:disabled):not(.item-active):focus{border:2px solid var(--road-outline-variant)}/*!@.item-native::-moz-focus-inner*/.item-native.sc-road-item::-moz-focus-inner{border:0}/*!@button,\na*/button.sc-road-item,a.sc-road-item{cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-user-drag:none}/*!@.item-inner*/.item-inner.sc-road-item{position:relative;box-sizing:border-box;display:flex;flex:1;flex-direction:inherit;align-items:center;align-self:stretch;width:100%;min-height:inherit;padding:var(--inner-padding);overflow:inherit;text-align:inherit;text-decoration:none;border-color:var(--road-grey-70);border-style:solid;border-width:var(--inner-border-width, 0);outline:0}/*!@.input-wrapper*/.input-wrapper.sc-road-item{box-sizing:border-box;display:flex;flex:1;flex-direction:inherit;align-items:inherit;align-self:stretch;overflow:inherit;text-overflow:ellipsis}/*!@.input-wrapper-info-title*/.input-wrapper-info-title.sc-road-item{font-size:var(--road-font-size-16);font-weight:700}/*!@.input-wrapper-info-text*/.input-wrapper-info-text.sc-road-item{margin:0;font-size:var(--road-font-size-16);font-weight:400;color:var(--road-on-surface-weak)}/*!@.item-detail-icon*/.item-detail-icon.sc-road-item{color:var(--detail-color)}/*!@::slotted(road-icon)*/.sc-road-item-s>road-icon{flex-shrink:0;margin-right:0.5rem}/*!@::slotted(road-img)*/.sc-road-item-s>road-img{flex-shrink:0;margin-right:0.5rem}/*!@.layout-vertical ::slotted(road-img)*/.layout-vertical .sc-road-item-s>road-img{margin-bottom:0.5rem}/*!@::slotted(road-label) p*/.sc-road-item-s>road-label p{color:var(--road-on-surface-weak)}/*!@::slotted(road-button)*/.sc-road-item-s>road-button{--padding-start:0.5rem;--padding-end:0.5rem;--margin-bottom:0}/*!@:host(.item-lines-none)*/.item-lines-none.sc-road-item-h{--border-width:0 !important;--inner-border-width:0 !important}/*!@:host(.item-lines-full)*/.item-lines-full.sc-road-item-h{--border-width:0 0 1px 0 !important;--inner-border-width:0 !important}/*!@:host(.item-lines-inset)*/.item-lines-inset.sc-road-item-h{--inner-border-width:0 0 1px 0 !important}";
+const itemCss = "/*!@:host*/.sc-road-item-h{--border-radius:var(--road-spacing-02);--background-color:var(--road-surface);--border-color:var(--road-outline-variant);--detail-color:var(--road-icon);position:relative;box-sizing:border-box;display:flex;align-items:center;justify-content:space-between;overflow:hidden;font-size:var(--road-font-size-14);text-decoration:none;border:1px solid var(--road-outline-weak);border-radius:var(--border-radius);outline:none}/*!@.layout-vertical*/.layout-vertical.sc-road-item{display:flex;flex-direction:column;max-width:224px}/*!@.layout-vertical .item-inner*/.layout-vertical.sc-road-item .item-inner.sc-road-item{align-items:flex-start}/*!@.item-native*/.item-native.sc-road-item{position:relative;z-index:1;box-sizing:border-box;display:flex;align-items:inherit;justify-content:inherit;width:100%;padding:var(--road-spacing-05);margin:0;overflow:inherit;font-family:inherit;font-size:inherit;color:var(--road-on-surface);text-align:left;background-color:var(--background-color);border:2px solid transparent;outline:none;transition:background 0.15s ease-in-out;-webkit-tap-highlight-color:rgba(0, 0, 0, 0)}/*!@.item-active*/.item-active.sc-road-item{border:2px solid var(--border-color)}/*!@button.item-native:not(:disabled):not(.item-active):hover,\nbutton.item-native:not(:disabled):not(.item-active):focus*/button.item-native.sc-road-item:not(:disabled):not(.item-active):hover,button.item-native.sc-road-item:not(:disabled):not(.item-active):focus{border:2px solid var(--border-color)}/*!@.item-native::-moz-focus-inner*/.item-native.sc-road-item::-moz-focus-inner{border:0}/*!@button,\na*/button.sc-road-item,a.sc-road-item{cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-user-drag:none}/*!@.item-inner*/.item-inner.sc-road-item{position:relative;box-sizing:border-box;display:flex;flex:1;flex-direction:inherit;align-items:center;align-self:stretch;width:100%;min-height:inherit;padding:var(--inner-padding);overflow:inherit;text-align:inherit;text-decoration:none;border-color:var(--road-grey-70);border-style:solid;border-width:var(--inner-border-width, 0);outline:0}/*!@.input-wrapper*/.input-wrapper.sc-road-item{box-sizing:border-box;display:flex;flex:1;flex-direction:inherit;align-items:inherit;align-self:stretch;overflow:inherit;text-overflow:ellipsis}/*!@.input-wrapper-info-title*/.input-wrapper-info-title.sc-road-item{font-size:var(--road-font-size-16);font-weight:700}/*!@.input-wrapper-info-text*/.input-wrapper-info-text.sc-road-item{margin:0;font-size:var(--road-font-size-16);font-weight:400;color:var(--road-on-surface-weak)}/*!@.item-detail-icon*/.item-detail-icon.sc-road-item{color:var(--detail-color)}/*!@::slotted(road-icon)*/.sc-road-item-s>road-icon{flex-shrink:0;margin-right:0.5rem}/*!@::slotted(road-img)*/.sc-road-item-s>road-img{flex-shrink:0;margin-right:0.5rem}/*!@.layout-vertical ::slotted(road-img)*/.layout-vertical .sc-road-item-s>road-img{margin-bottom:0.5rem}/*!@::slotted(road-label) p*/.sc-road-item-s>road-label p{color:var(--road-on-surface-weak)}/*!@::slotted(road-button)*/.sc-road-item-s>road-button{--padding-start:0.5rem;--padding-end:0.5rem;--margin-bottom:0}/*!@:host(.item-lines-none)*/.item-lines-none.sc-road-item-h{--border-width:0 !important;--inner-border-width:0 !important}/*!@:host(.item-lines-full)*/.item-lines-full.sc-road-item-h{--border-width:0 0 1px 0 !important;--inner-border-width:0 !important}/*!@:host(.item-lines-inset)*/.item-lines-inset.sc-road-item-h{--inner-border-width:0 0 1px 0 !important}";
 
 /**
  * @slot start - Placed to the left of all other content.
@@ -32513,7 +32524,7 @@ class RadioGroup {
 }
 let radioGroupIds = 0;
 
-const rangeCss = ".sc-road-range-h{display:block}.form-group.sc-road-range{width:100%}.form-range.sc-road-range{position:relative;display:flex;flex-direction:column;width:100%;margin-bottom:6px}.form-range-input.sc-road-range{position:relative;z-index:1;width:100%;background:transparent;outline:0;appearance:none}.form-range.sc-road-range>output.sc-road-range::after{display:block;font-size:var(--road-label-medium);text-align:right;content:counter(variable);counter-reset:variable var(--value)}.form-range-label.sc-road-range{position:absolute;top:0;left:0;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);border:0}.form-range-progress.sc-road-range{position:relative;z-index:0;display:block;width:100%;margin-top:-1rem}.form-range-input.sc-road-range::-webkit-slider-runnable-track{border:0;appearance:none}.form-range-input.sc-road-range::-moz-range-track{height:0.5rem;border:0;appearance:none}.form-range-progress.sc-road-range::before{display:block;height:0.5rem;content:\"\";background-color:var(--road-on-surface-disabled);border:0;border-radius:1.125rem}.form-range-progress.sc-road-range::after{position:absolute;top:0;right:0;left:0;display:block;width:calc((var(--value) * 100%) / var(--max));height:0.5rem;content:\"\";background:var(--road-primary);border-radius:1.125rem}.form-range-input.sc-road-range::-webkit-slider-thumb{position:relative;z-index:1;width:1.625rem;height:1.625rem;cursor:grab;background:var(--road-surface);border:none;border-radius:1.625rem;box-shadow:0 0.1875rem 0.375rem rgba(0, 0, 0, 0.24);appearance:none}.form-range-input.sc-road-range::-moz-range-thumb{position:relative;z-index:1;box-sizing:border-box;width:1.625rem;height:1.625rem;margin-top:-0.625rem;cursor:grab;background:var(--road-surface);border:none;border-radius:1.625rem;box-shadow:0 0.1875rem 0.375rem rgba(0, 0, 0, 0.24);appearance:none}.focus-visible.sc-road-range-h .form-range-input.sc-road-range::-webkit-slider-thumb,.sc-road-range-h:active .form-range-input.sc-road-range::-webkit-slider-thumb,.sc-road-range-h:focus .form-range-input.sc-road-range::-webkit-slider-thumb{background:var(--road-input-surface-variant);border:0.5rem solid var(--road-grey-100-new)}.focus-visible.sc-road-range-h .form-range-input.sc-road-range::-moz-range-thumb,.sc-road-range-h:active .form-range-input.sc-road-range::-moz-range-thumb,.sc-road-range-h:focus .form-range-input.sc-road-range::-moz-range-thumb{background:var(--road-input-surface-variant);border:0.5rem solid var(--road-grey-100-new)}.sc-road-range-s>datalist{display:flex;justify-content:space-between}.sc-road-range-s>datalist option{width:32px;margin:0;font-size:var(--road-label-medium);text-align:center}";
+const rangeCss = ".sc-road-range-h{display:block}.form-group.sc-road-range{width:100%}.form-range.sc-road-range{position:relative;display:flex;flex-direction:column;width:100%;margin-bottom:6px}.form-range-input.sc-road-range{position:relative;z-index:1;width:100%;background:transparent;outline:0;appearance:none}.form-range.sc-road-range>output.sc-road-range::after{display:block;font-size:var(--road-label-medium);text-align:right;content:counter(variable);counter-reset:variable var(--value)}.form-range-label.sc-road-range{position:absolute;top:0;left:0;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);border:0}.form-range-progress.sc-road-range{position:relative;z-index:0;display:block;width:100%;margin-top:-1rem}.form-range-input.sc-road-range::-webkit-slider-runnable-track{border:0;appearance:none}.form-range-input.sc-road-range::-moz-range-track{height:0.5rem;border:0;appearance:none}.form-range-progress.sc-road-range::before{display:block;height:0.5rem;content:\"\";background-color:var(--road-on-surface-disabled);border:0;border-radius:1.125rem}.form-range-progress.sc-road-range.sc-road-range::after{position:absolute;top:0;right:0;left:0;display:block;width:calc(((var(--value) - var(--min)) * 100%) / (var(--max) - var(--min)));height:0.5rem;content:\"\";background:var(--road-primary);border-radius:1.125rem}.disabled.sc-road-range-h .form-range-progress.sc-road-range.sc-road-range::after{background:var(--road-surface-disabled)}.form-range-input.sc-road-range::-webkit-slider-thumb{position:relative;z-index:1;width:1.625rem;height:1.625rem;cursor:grab;background:var(--road-surface);border:none;border-radius:1.625rem;box-shadow:0 0.1875rem 0.375rem rgba(0, 0, 0, 0.24);appearance:none}.form-range-input.sc-road-range::-moz-range-thumb{position:relative;z-index:1;box-sizing:border-box;width:1.625rem;height:1.625rem;margin-top:-0.625rem;cursor:grab;background:var(--road-surface);border:none;border-radius:1.625rem;box-shadow:0 0.1875rem 0.375rem rgba(0, 0, 0, 0.24);appearance:none}.disabled.sc-road-range-h .form-range-input.sc-road-range::-webkit-slider-thumb,.disabled.sc-road-range-h .form-range-input.sc-road-range::-moz-range-thumb{cursor:not-allowed;background:var(--road-on-surface-disabled);box-shadow:none}.disabled.sc-road-range-h .form-range-input.sc-road-range{pointer-events:none}.disabled.sc-road-range-h{cursor:not-allowed}.sc-road-range-h:not(.disabled).focus-visible .form-range-input.sc-road-range::-webkit-slider-thumb,.sc-road-range-h:not(.disabled):active .form-range-input.sc-road-range::-webkit-slider-thumb,.sc-road-range-h:not(.disabled):focus .form-range-input.sc-road-range::-webkit-slider-thumb{background:var(--road-input-surface-variant);border:0.5rem solid var(--road-grey-100-new)}.sc-road-range-h:not(.disabled).focus-visible .form-range-input.sc-road-range::-moz-range-thumb,.sc-road-range-h:not(.disabled):active .form-range-input.sc-road-range::-moz-range-thumb,.sc-road-range-h:not(.disabled):focus .form-range-input.sc-road-range::-moz-range-thumb{background:var(--road-input-surface-variant);border:0.5rem solid var(--road-grey-100-new)}.sc-road-range-s>datalist{display:flex;justify-content:space-between}.sc-road-range-s>datalist option{width:32px;margin:0;font-size:var(--road-label-medium);text-align:center}";
 
 /**
  * @slot datalist - list of labels. also put show-labels="true" and max="10" for this exemple
@@ -32539,61 +32550,73 @@ class Range {
     this.onInput = (ev) => {
       const input = ev.target;
       if (input) {
-        this.value = input.value || '';
+        this.value = input.value || "";
       }
       if (this.value !== null && this.value !== undefined) {
-        this.el.style.setProperty('--value', `${this.value}`);
+        this.el.style.setProperty("--value", `${this.value}`);
       }
     };
     this.rangeId = `road-range-${rangeIds++}`;
-    this.value = '';
+    this.value = "";
     this.min = undefined;
     this.max = undefined;
     this.step = undefined;
     this.showValue = false;
     this.showTick = false;
     this.showLabels = false;
+    this.disabled = false;
   }
   /**
    * Update the native input element when the value changes
    */
   valueChanged() {
-    this.roadchange.emit({ value: this.value == null ? this.value : this.value.toString() });
-    this.roadChange.emit({ value: this.value == null ? this.value : this.value.toString() });
+    this.roadchange.emit({
+      value: this.value == null ? this.value : this.value.toString(),
+    });
+    this.roadChange.emit({
+      value: this.value == null ? this.value : this.value.toString(),
+    });
   }
   getValue() {
-    return typeof this.value === 'number'
+    return typeof this.value === "number"
       ? this.value.toString()
-      : (this.value || '').toString();
+      : (this.value || "").toString();
   }
   handleFocus() {
-    this.el.classList.add('focus-visible');
+    this.el.classList.add("focus-visible");
   }
   handleBlur() {
-    this.el.classList.remove('focus-visible');
+    this.el.classList.remove("focus-visible");
   }
   componentDidLoad() {
     // Cacher le label pour accessibilité
-    const label = this.el.querySelector('.form-label');
-    const input = this.el.querySelector('.form-control.sc-road-input');
+    const label = this.el.querySelector(".form-label");
+    const input = this.el.querySelector(".form-control.sc-road-input");
     if (label) {
-      label.style.clip = 'rect(0 0 0 0)';
-      label.style.border = '0';
-      label.style.height = '1px';
-      label.style.left = '0';
-      label.style.margin = '-1px';
-      label.style.overflow = 'hidden';
-      label.style.padding = '0';
-      label.style.position = 'absolute';
-      label.style.top = '0';
-      label.style.width = '1px';
-      input.style.padding = '0 1rem 0';
+      label.style.clip = "rect(0 0 0 0)";
+      label.style.border = "0";
+      label.style.height = "1px";
+      label.style.left = "0";
+      label.style.margin = "-1px";
+      label.style.overflow = "hidden";
+      label.style.padding = "0";
+      label.style.position = "absolute";
+      label.style.top = "0";
+      label.style.width = "1px";
+      input.style.padding = "0 1rem 0";
     }
   }
   render() {
     const value = this.getValue();
-    const datalist = this.showLabels !== undefined ? `tickmarks` : '';
-    return (hAsync(Host, { tabindex: "0" }, hAsync("div", { class: "form-group d-flex align-items-end" }, this.showTick && hAsync("road-icon", { icon: navigationAddLessSolid, class: "mr-8", size: 'sm' }), hAsync("div", { class: "form-range", style: { '--min:': this.min, '--max': this.max, '--value': value } }, this.showValue && hAsync("output", null), this.showLabels && hAsync("slot", { name: "datalist" }), hAsync("input", { type: "range", class: "form-range-input", id: this.rangeId, min: this.min, max: this.max, value: value, onInput: this.onInput, list: datalist, "aria-label": "Valeur", tabindex: "0" }), hAsync("label", { class: "form-range-label" }, "Valeur"), hAsync("div", { class: "form-range-progress" })), this.showTick && hAsync("road-icon", { icon: navigationAddMoreSolid, class: "ml-8", size: 'sm' }))));
+    const datalist = this.showLabels !== undefined ? `tickmarks` : "";
+    return (hAsync(Host, { tabindex: "0", class: { disabled: this.disabled } }, hAsync("div", { class: "form-group d-flex align-items-end" }, this.showTick && (hAsync("road-icon", { icon: navigationAddLessSolid, class: "mr-8", size: "sm" })), hAsync("div", { class: "form-range", style: {
+        "--min": this.min,
+        "--max": this.max,
+        "--value": value,
+        "--background-color": this.disabled
+          ? "var(--road-surface-disabled)"
+          : "initial",
+      } }, this.showValue && hAsync("output", null), this.showLabels && hAsync("slot", { name: "datalist" }), hAsync("input", { type: "range", class: "form-range-input", id: this.rangeId, min: this.min, max: this.max, value: value, onInput: this.onInput, list: datalist, "aria-label": "Valeur", tabindex: "0", disabled: this.disabled }), hAsync("label", { class: "form-range-label" }, "Valeur"), hAsync("div", { class: "form-range-progress" })), this.showTick && (hAsync("road-icon", { icon: navigationAddMoreSolid, class: "ml-8", size: "sm" })))));
   }
   get el() { return getElement(this); }
   static get watchers() { return {
@@ -32611,7 +32634,8 @@ class Range {
       "step": [1],
       "showValue": [4, "show-value"],
       "showTick": [4, "show-tick"],
-      "showLabels": [4, "show-labels"]
+      "showLabels": [4, "show-labels"],
+      "disabled": [4]
     },
     "$listeners$": [[2, "focus", "handleFocus"], [2, "blur", "handleBlur"]],
     "$lazyBundleId$": "-",
@@ -34285,7 +34309,7 @@ class Select {
     this.onChange = (ev) => {
       const select = ev.target;
       if (select) {
-        this.value = select.value || '';
+        this.value = select.value || null;
       }
     };
     this.onBlur = () => {
@@ -34309,6 +34333,12 @@ class Select {
     this.value = undefined;
   }
   valueChanged() {
+    if (this.value === null) {
+      this.resetSelection();
+    }
+    else {
+      this.addSelected();
+    }
     this.roadchange.emit({
       value: this.value,
     });
@@ -34317,32 +34347,31 @@ class Select {
     });
   }
   componentWillLoad() {
-    if (this.value) {
+    if (this.value === null) {
+      this.resetSelection();
+    }
+    else {
       this.addSelected();
     }
   }
   addSelected() {
-    var _a;
-    // Recherche de l'option correspondant à la valeur actuelle
+    // Désélection de toutes les options
+    this.options.forEach(option => option.selected = false);
+    // Sélection de la nouvelle option si elle correspond à la valeur actuelle
     const selectedOption = this.options.find(option => option.value == this.value);
-    // Recherche de l'option actuellement sélectionnée
-    const selectedOption2 = this.options.find(option => option.selected);
-    // Désélection de l'option actuellement sélectionnée
-    if (selectedOption2) {
-      selectedOption2.selected = false;
-    }
-    // Sélection de la nouvelle option
     if (selectedOption) {
       selectedOption.selected = true;
     }
-    // Retourne la valeur de l'option sélectionnée (ou une chaîne vide si aucune option n'est sélectionnée)
-    return (_a = selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.value) !== null && _a !== void 0 ? _a : '';
+  }
+  resetSelection() {
+    this.value = null;
+    this.options.forEach(option => option.selected = false);
   }
   render() {
     const labelId = this.selectId + '-label';
     const hasValueClass = this.value && this.value !== '' ? 'has-value' : '';
     const isInvalidClass = this.error !== undefined && this.error !== '' ? 'is-invalid' : '';
-    return (hAsync(Host, { class: this.sizes && `select-${this.sizes}` }, hAsync("select", { class: `form-select ${hasValueClass} ${isInvalidClass}`, id: this.selectId, "aria-disabled": this.disabled ? 'true' : null, autoFocus: this.autofocus, disabled: this.disabled, name: this.name, required: this.required, size: this.size, onChange: this.onChange, onFocus: this.onFocus, onBlur: this.onBlur }, hAsync("option", { selected: true, disabled: true, hidden: true, style: { display: 'none' }, value: "" }), this.options && this.options.map(option => (hAsync("option", { value: option.value, selected: option.selected }, option.label)))), hAsync("label", { class: "form-select-label", id: labelId, htmlFor: this.selectId }, this.label), this.error && this.error !== '' && hAsync("p", { class: "invalid-feedback" }, this.error)));
+    return (hAsync(Host, { class: this.sizes && `select-${this.sizes}` }, hAsync("select", { class: `form-select ${hasValueClass} ${isInvalidClass}`, id: this.selectId, "aria-disabled": this.disabled ? 'true' : null, autoFocus: this.autofocus, disabled: this.disabled, name: this.name, required: this.required, size: this.size, onChange: this.onChange, onFocus: this.onFocus, onBlur: this.onBlur }, hAsync("option", { selected: !this.value, disabled: true, hidden: true, style: { display: 'none' }, value: "" }), this.options && this.options.map(option => (hAsync("option", { value: option.value, selected: this.value !== null && option.value == this.value }, option.label)))), hAsync("label", { class: "form-select-label", id: labelId, htmlFor: this.selectId }, this.label), this.error && this.error !== '' && hAsync("p", { class: "invalid-feedback" }, this.error)));
   }
   static get watchers() { return {
     "value": ["valueChanged"]

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@roadtrip/components",
-  "version": "3.20.4",
+  "version": "3.22.0",
   "description": "Web Component library for Roadtrip Design System",
   "license": "Apache-2.0",
   "homepage": "https://gitlab.com/mobivia-design/roadtrip/components",

package/dist/roadtrip/p-418ca731.entry.js

@@ -1,2 +0,0 @@
-import{r,c as e,h as a,H as o,a as i}from"./p-f3d586b3.js";import{h as n,i as t}from"./p-ac7a8bca.js";const s='.sc-road-range-h{display:block}.form-group.sc-road-range{width:100%}.form-range.sc-road-range{position:relative;display:flex;flex-direction:column;width:100%;margin-bottom:6px}.form-range-input.sc-road-range{position:relative;z-index:1;width:100%;background:transparent;outline:0;appearance:none}.form-range.sc-road-range>output.sc-road-range::after{display:block;font-size:var(--road-label-medium);text-align:right;content:counter(variable);counter-reset:variable var(--value)}.form-range-label.sc-road-range{position:absolute;top:0;left:0;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);border:0}.form-range-progress.sc-road-range{position:relative;z-index:0;display:block;width:100%;margin-top:-1rem}.form-range-input.sc-road-range::-webkit-slider-runnable-track{border:0;appearance:none}.form-range-input.sc-road-range::-moz-range-track{height:0.5rem;border:0;appearance:none}.form-range-progress.sc-road-range::before{display:block;height:0.5rem;content:"";background-color:var(--road-on-surface-disabled);border:0;border-radius:1.125rem}.form-range-progress.sc-road-range::after{position:absolute;top:0;right:0;left:0;display:block;width:calc((var(--value) * 100%) / var(--max));height:0.5rem;content:"";background:var(--road-primary);border-radius:1.125rem}.form-range-input.sc-road-range::-webkit-slider-thumb{position:relative;z-index:1;width:1.625rem;height:1.625rem;cursor:grab;background:var(--road-surface);border:none;border-radius:1.625rem;box-shadow:0 0.1875rem 0.375rem rgba(0, 0, 0, 0.24);appearance:none}.form-range-input.sc-road-range::-moz-range-thumb{position:relative;z-index:1;box-sizing:border-box;width:1.625rem;height:1.625rem;margin-top:-0.625rem;cursor:grab;background:var(--road-surface);border:none;border-radius:1.625rem;box-shadow:0 0.1875rem 0.375rem rgba(0, 0, 0, 0.24);appearance:none}.focus-visible.sc-road-range-h .form-range-input.sc-road-range::-webkit-slider-thumb,.sc-road-range-h:active .form-range-input.sc-road-range::-webkit-slider-thumb,.sc-road-range-h:focus .form-range-input.sc-road-range::-webkit-slider-thumb{background:var(--road-input-surface-variant);border:0.5rem solid var(--road-grey-100-new)}.focus-visible.sc-road-range-h .form-range-input.sc-road-range::-moz-range-thumb,.sc-road-range-h:active .form-range-input.sc-road-range::-moz-range-thumb,.sc-road-range-h:focus .form-range-input.sc-road-range::-moz-range-thumb{background:var(--road-input-surface-variant);border:0.5rem solid var(--road-grey-100-new)}.sc-road-range-s>datalist{display:flex;justify-content:space-between}.sc-road-range-s>datalist option{width:32px;margin:0;font-size:var(--road-label-medium);text-align:center}';const d=class{constructor(a){r(this,a);this.roadchange=e(this,"roadchange",7);this.roadChange=e(this,"roadChange",7);this.onInput=r=>{const e=r.target;if(e){this.value=e.value||""}if(this.value!==null&&this.value!==undefined){this.el.style.setProperty("--value",`${this.value}`)}};this.rangeId=`road-range-${c++}`;this.value="";this.min=undefined;this.max=undefined;this.step=undefined;this.showValue=false;this.showTick=false;this.showLabels=false}valueChanged(){this.roadchange.emit({value:this.value==null?this.value:this.value.toString()});this.roadChange.emit({value:this.value==null?this.value:this.value.toString()})}getValue(){return typeof this.value==="number"?this.value.toString():(this.value||"").toString()}handleFocus(){this.el.classList.add("focus-visible")}handleBlur(){this.el.classList.remove("focus-visible")}componentDidLoad(){const r=this.el.querySelector(".form-label");const e=this.el.querySelector(".form-control.sc-road-input");if(r){r.style.clip="rect(0 0 0 0)";r.style.border="0";r.style.height="1px";r.style.left="0";r.style.margin="-1px";r.style.overflow="hidden";r.style.padding="0";r.style.position="absolute";r.style.top="0";r.style.width="1px";e.style.padding="0 1rem 0"}}render(){const r=this.getValue();const e=this.showLabels!==undefined?`tickmarks`:"";return a(o,{tabindex:"0"},a("div",{class:"form-group d-flex align-items-end"},this.showTick&&a("road-icon",{icon:n,class:"mr-8",size:"sm"}),a("div",{class:"form-range",style:{"--min:":this.min,"--max":this.max,"--value":r}},this.showValue&&a("output",null),this.showLabels&&a("slot",{name:"datalist"}),a("input",{type:"range",class:"form-range-input",id:this.rangeId,min:this.min,max:this.max,value:r,onInput:this.onInput,list:e,"aria-label":"Valeur",tabindex:"0"}),a("label",{class:"form-range-label"},"Valeur"),a("div",{class:"form-range-progress"})),this.showTick&&a("road-icon",{icon:t,class:"ml-8",size:"sm"})))}get el(){return i(this)}static get watchers(){return{value:["valueChanged"]}}};let c=0;d.style=s;export{d as road_range};
-//# sourceMappingURL=p-418ca731.entry.js.map

package/dist/roadtrip/p-418ca731.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["rangeCss","Range","this","onInput","ev","input","target","value","undefined","el","style","setProperty","rangeIds","valueChanged","roadchange","emit","toString","roadChange","getValue","handleFocus","classList","add","handleBlur","remove","componentDidLoad","label","querySelector","clip","border","height","left","margin","overflow","padding","position","top","width","render","datalist","showLabels","h","Host","tabindex","class","showTick","icon","navigationAddLessSolid","size","min","max","showValue","name","type","id","rangeId","list","navigationAddMoreSolid"],"sources":["src/components/range/range.css?tag=road-range&encapsulation=scoped","src/components/range/range.tsx"],"sourcesContent":["/*\n * Range\n *\n *\n * Index\n * - Input\n * - Value\n * - Slider\n * - Progress\n * - Cursor\n */\n\n:host {\n  display: block;\n}\n\n.form-group{\n  width: 100%;\n}\n\n.form-range {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  margin-bottom: 6px;\n}\n\n/* INPUT\n -------------------- */\n\n.form-range-input {\n  position: relative;\n  z-index: 1;\n  width: 100%;\n  background: transparent;\n  outline: 0;\n  appearance: none;\n}\n\n/* VALUE\n -------------------- */\n\n.form-range > output::after {\n  display: block;\n  font-size: var(--road-label-medium);\n  text-align: right;\n  content: counter(variable);\n  counter-reset: variable var(--value);\n}\n\n/* SLIDER\n -------------------- */\n\n.form-range-label {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0 0 0 0);\n  border: 0;\n}\n\n.form-range-progress {\n  position: relative;\n  z-index: 0;\n  display: block;\n  width: 100%;\n  margin-top: -1rem;\n}\n\n.form-range-input::-webkit-slider-runnable-track {\n  border: 0;\n  appearance: none;\n}\n\n.form-range-input::-moz-range-track {\n  height: 0.5rem;\n  border: 0;\n  appearance: none;\n}\n\n.form-range-progress::before {\n  display: block;\n  height: 0.5rem;\n  content: \"\";\n  background-color: var(--road-on-surface-disabled);\n  border: 0;\n  border-radius: 1.125rem;\n}\n\n/* PROGRESS\n -------------------- */\n\n.form-range-progress::after {\n  position: absolute;\n  top: 0;\n  right: 0;\n  left: 0;\n  display: block;\n  width: calc((var(--value) * 100%) / var(--max));\n  height: 0.5rem;\n  content: \"\";\n  background: var(--road-primary);\n  border-radius: 1.125rem;\n}\n\n/* CURSOR\n-------------------- */\n\n.form-range-input::-webkit-slider-thumb {\n  position: relative;\n  z-index: 1;\n  width: 1.625rem;\n  height: 1.625rem;\n  cursor: grab;\n  background: var(--road-surface);\n  border: none;\n  border-radius: 1.625rem;\n  box-shadow: 0 0.1875rem 0.375rem rgba(0, 0, 0, 0.24);\n  appearance: none;\n}\n\n.form-range-input::-moz-range-thumb {\n  position: relative;\n  z-index: 1;\n  box-sizing: border-box;\n  width: 1.625rem;\n  height: 1.625rem;\n  margin-top: -0.625rem;\n  cursor: grab;\n  background: var(--road-surface);\n  border: none;\n  border-radius: 1.625rem;\n  box-shadow: 0 0.1875rem 0.375rem rgba(0, 0, 0, 0.24);\n  appearance: none;\n}\n\n/**\n *  Focus state\n */\n\n:host(.focus-visible) .form-range-input::-webkit-slider-thumb,\n:host(:active) .form-range-input::-webkit-slider-thumb,\n:host(:focus) .form-range-input::-webkit-slider-thumb {\n  background: var(--road-input-surface-variant);\n  border: 0.5rem solid var(--road-grey-100-new);\n}\n\n:host(.focus-visible) .form-range-input::-moz-range-thumb,\n:host(:active) .form-range-input::-moz-range-thumb,\n:host(:focus) .form-range-input::-moz-range-thumb {\n  background: var(--road-input-surface-variant);\n  border: 0.5rem solid var(--road-grey-100-new);\n}\n\n/* DATALIST\n -------------------- */\n\n::slotted(datalist) {\n  display: flex;\n  justify-content: space-between;\n}\n\n::slotted(datalist) option {\n  width: 32px;\n  margin: 0;\n  font-size: var(--road-label-medium);\n  text-align: center;\n}\n\n","import { Component, h, Element, Prop, Event, Host, EventEmitter, Watch, Listen } from '@stencil/core';\nimport { navigationAddLessSolid, navigationAddMoreSolid } from '../../../icons';\n\n/**\n * @slot datalist - list of labels. also put show-labels=\"true\" and max=\"10\" for this exemple\n * `<datalist id=\"tickmarks\" slot=\"datalist\" class=\"tickmarks\">`\n      `<option value=\"0\" label=\"0%\"></option>`\n      `<option value=\"10\" label=\"10%\"></option>`\n      `<option value=\"20\" label=\"20%\"></option>`\n      `<option value=\"30\" label=\"30%\"></option>`\n      `<option value=\"40\" label=\"40%\"></option>`\n      `<option value=\"50\" label=\"50%\"></option>`\n      `<option value=\"60\" label=\"60%\"></option>`\n     `<option value=\"70\" label=\"70%\"></option>`\n     `<option value=\"80\" label=\"80%\"></option>`\n      `<option value=\"90\" label=\"90%\"></option>`\n      `<option value=\"100\" label=\"100%\"></option>`\n    `</datalist>`\n */\n\n@Component({\n  tag: 'road-range',\n  styleUrl: 'range.css',\n  scoped: true,\n})\nexport class Range {\n\n  @Element() el!: HTMLRoadRangeElement;\n\n  /**\n   * The id of range\n   */\n  @Prop() rangeId: string = `road-range-${rangeIds++}`;\n\n  /**\n   * The value of the range.\n   */\n  @Prop({ mutable: true }) value?: string | number | null = '';\n\n  /**\n   * The minimum value, which must not be greater than its maximum (max attribute) value.\n   */\n  @Prop() min!: string;\n\n  /**\n   * The maximum value, which must not be less than its minimum (min attribute) value.\n   */\n  @Prop() max!: string;\n\n  /**\n   * Works with the min and max attributes to limit the increments at which a value can be set.\n   * Possible values are: `\"any\"` or a positive floating point number.\n   */\n  @Prop() step?: string;\n\n  /**\n   * Display the current value of the range\n   */\n  @Prop() showValue: boolean = false;\n\n  /**\n   * Display Tick of the range\n   */\n  @Prop() showTick: boolean = false;\n\n    /**\n   * Display labels of the range\n   */\n     @Prop() showLabels: boolean = false;\n\n  /**\n   * Update the native input element when the value changes\n   */\n  @Watch('value')\n  protected valueChanged() {\n    this.roadchange.emit({ value: this.value == null ? this.value : this.value.toString() });\n    this.roadChange.emit({ value: this.value == null ? this.value : this.value.toString() });\n  }\n\n  /**\n   * Emitted when the value has changed.\n   */\n  @Event() roadchange!: EventEmitter<{\n    value: string | undefined | null;\n  }>;\n  /** @internal */\n  @Event() roadChange!: EventEmitter<{\n    value: string | undefined | null;\n  }>;\n\n  private getValue(): string {\n    return typeof this.value === 'number'\n      ? this.value.toString()\n      : (this.value || '').toString();\n  }\n\n  private onInput = (ev: Event) => {\n    const input = ev.target as HTMLInputElement | null;\n    if (input) {\n      this.value = input.value || '';\n    }\n    if(this.value !== null && this.value !== undefined) {\n      this.el.style.setProperty('--value', `${this.value}`);\n    }\n  };\n\n  @Listen('focus', { capture: true })\n  handleFocus() {\n    this.el.classList.add('focus-visible');\n  }\n\n  @Listen('blur', { capture: true })\n  handleBlur() {\n    this.el.classList.remove('focus-visible');\n  }\n\n  componentDidLoad() {\n    // Cacher le label pour accessibilité\n\n  const label = this.el.querySelector('.form-label') as HTMLElement;\n  const input = this.el.querySelector('.form-control.sc-road-input') as HTMLElement;\n  if (label) {\n    label.style.clip = 'rect(0 0 0 0)';\n    label.style.border = '0';\n    label.style.height = '1px';\n    label.style.left = '0';\n    label.style.margin = '-1px';\n    label.style.overflow = 'hidden';\n    label.style.padding = '0';\n    label.style.position = 'absolute';\n    label.style.top = '0';\n    label.style.width = '1px';\n\n    input.style.padding = '0 1rem 0';\n    \n  }\n}\n\n  render() {\n    const value = this.getValue();\n    const datalist = this.showLabels !== undefined ? `tickmarks` : '';\n\n    return (\n      <Host tabindex=\"0\">\n      <div class=\"form-group d-flex align-items-end\">\n        {this.showTick && <road-icon icon={navigationAddLessSolid} class=\"mr-8\" size='sm'></road-icon>}\n        <div class=\"form-range\" style={{'--min:': this.min, '--max': this.max, '--value': value}}>\n          {this.showValue && <output></output>}\n          {this.showLabels && <slot name=\"datalist\"/>}\n          <input\n            type=\"range\"\n            class=\"form-range-input\"\n            id={this.rangeId}\n            min={this.min}\n            max={this.max}\n            value={value}\n            onInput={this.onInput}\n            list={datalist}\n            aria-label=\"Valeur\"\n            tabindex=\"0\"\n          />\n          <label class=\"form-range-label\">Valeur</label>\n          <div class=\"form-range-progress\"></div>\n        </div>\n        {this.showTick && <road-icon icon={navigationAddMoreSolid} class=\"ml-8\" size='sm'></road-icon>}\n      </div>\n      </Host>\n    );\n  }\n\n}\n\nlet rangeIds = 0;\n"],"mappings":"sGAAA,MAAMA,EAAW,qnF,MCyBJC,EAAK,M,uGAuERC,KAAAC,QAAWC,IACjB,MAAMC,EAAQD,EAAGE,OACjB,GAAID,EAAO,CACTH,KAAKK,MAAQF,EAAME,OAAS,E,CAE9B,GAAGL,KAAKK,QAAU,MAAQL,KAAKK,QAAUC,UAAW,CAClDN,KAAKO,GAAGC,MAAMC,YAAY,UAAW,GAAGT,KAAKK,Q,gBAtEvB,cAAcK,M,WAKkB,G,yEAqB7B,M,cAKD,M,gBAKK,K,CAMvB,YAAAC,GACRX,KAAKY,WAAWC,KAAK,CAAER,MAAOL,KAAKK,OAAS,KAAOL,KAAKK,MAAQL,KAAKK,MAAMS,aAC3Ed,KAAKe,WAAWF,KAAK,CAAER,MAAOL,KAAKK,OAAS,KAAOL,KAAKK,MAAQL,KAAKK,MAAMS,Y,CAcrE,QAAAE,GACN,cAAchB,KAAKK,QAAU,SACzBL,KAAKK,MAAMS,YACVd,KAAKK,OAAS,IAAIS,U,CAczB,WAAAG,GACEjB,KAAKO,GAAGW,UAAUC,IAAI,gB,CAIxB,UAAAC,GACEpB,KAAKO,GAAGW,UAAUG,OAAO,gB,CAG3B,gBAAAC,GAGA,MAAMC,EAAQvB,KAAKO,GAAGiB,cAAc,eACpC,MAAMrB,EAAQH,KAAKO,GAAGiB,cAAc,+BACpC,GAAID,EAAO,CACTA,EAAMf,MAAMiB,KAAO,gBACnBF,EAAMf,MAAMkB,OAAS,IACrBH,EAAMf,MAAMmB,OAAS,MACrBJ,EAAMf,MAAMoB,KAAO,IACnBL,EAAMf,MAAMqB,OAAS,OACrBN,EAAMf,MAAMsB,SAAW,SACvBP,EAAMf,MAAMuB,QAAU,IACtBR,EAAMf,MAAMwB,SAAW,WACvBT,EAAMf,MAAMyB,IAAM,IAClBV,EAAMf,MAAM0B,MAAQ,MAEpB/B,EAAMK,MAAMuB,QAAU,U,EAKxB,MAAAI,GACE,MAAM9B,EAAQL,KAAKgB,WACnB,MAAMoB,EAAWpC,KAAKqC,aAAe/B,UAAY,YAAc,GAE/D,OACEgC,EAACC,EAAI,CAACC,SAAS,KACfF,EAAA,OAAKG,MAAM,qCACRzC,KAAK0C,UAAYJ,EAAA,aAAWK,KAAMC,EAAwBH,MAAM,OAAOI,KAAK,OAC7EP,EAAA,OAAKG,MAAM,aAAajC,MAAO,CAAC,SAAUR,KAAK8C,IAAK,QAAS9C,KAAK+C,IAAK,UAAW1C,IAC/EL,KAAKgD,WAAaV,EAAA,eAClBtC,KAAKqC,YAAcC,EAAA,QAAMW,KAAK,aAC/BX,EAAA,SACEY,KAAK,QACLT,MAAM,mBACNU,GAAInD,KAAKoD,QACTN,IAAK9C,KAAK8C,IACVC,IAAK/C,KAAK+C,IACV1C,MAAOA,EACPJ,QAASD,KAAKC,QACdoD,KAAMjB,EAAQ,aACH,SACXI,SAAS,MAEXF,EAAA,SAAOG,MAAM,oBAAkB,UAC/BH,EAAA,OAAKG,MAAM,yBAEZzC,KAAK0C,UAAYJ,EAAA,aAAWK,KAAMW,EAAwBb,MAAM,OAAOI,KAAK,Q,gFAQrF,IAAInC,EAAW,E"}