@roadtrip/components 3.21.0 → 3.22.0

package/dist/esm/road-range.entry.js

@@ -1,7 +1,7 @@
 import { r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-52302079.js';
 import { h as navigationAddLessSolid, i as navigationAddMoreSolid } from './index-7a0158a4.js';
 
-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}";
 
 const Range = class {
   constructor(hostRef) {
@@ -11,61 +11,73 @@ const Range = class {
     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 (h(Host, { tabindex: "0" }, h("div", { class: "form-group d-flex align-items-end" }, this.showTick && h("road-icon", { icon: navigationAddLessSolid, class: "mr-8", size: 'sm' }), h("div", { class: "form-range", style: { '--min:': this.min, '--max': this.max, '--value': value } }, this.showValue && h("output", null), this.showLabels && h("slot", { name: "datalist" }), h("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" }), h("label", { class: "form-range-label" }, "Valeur"), h("div", { class: "form-range-progress" })), this.showTick && h("road-icon", { icon: navigationAddMoreSolid, class: "ml-8", size: 'sm' }))));
+    const datalist = this.showLabels !== undefined ? `tickmarks` : "";
+    return (h(Host, { tabindex: "0", class: { disabled: this.disabled } }, h("div", { class: "form-group d-flex align-items-end" }, this.showTick && (h("road-icon", { icon: navigationAddLessSolid, class: "mr-8", size: "sm" })), h("div", { class: "form-range", style: {
+        "--min": this.min,
+        "--max": this.max,
+        "--value": value,
+        "--background-color": this.disabled
+          ? "var(--road-surface-disabled)"
+          : "initial",
+      } }, this.showValue && h("output", null), this.showLabels && h("slot", { name: "datalist" }), h("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 }), h("label", { class: "form-range-label" }, "Valeur"), h("div", { class: "form-range-progress" })), this.showTick && (h("road-icon", { icon: navigationAddMoreSolid, class: "ml-8", size: "sm" })))));
   }
   get el() { return getElement(this); }
   static get watchers() { return {

package/dist/esm/road-range.entry.js.map

@@ -1 +1 @@
-{"file":"road-range.entry.js","mappings":"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","names":[],"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"],"version":3}
+{"file":"road-range.entry.js","mappings":"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","names":[],"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.sc-road-range::after {\n  position: absolute;\n  top: 0;\n  right: 0;\n  left: 0;\n  display: block;\n  width: calc(((var(--value) - var(--min)) * 100%) / (var(--max) - var(--min)));\n  height: 0.5rem;\n  content: \"\";\n  background: var(--road-primary);\n  border-radius: 1.125rem;\n}\n\n:host(.disabled) .form-range-progress.sc-road-range::after {\n  background: var(--road-surface-disabled);\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/* Styles for disabled state */\n:host(.disabled) .form-range-input::-webkit-slider-thumb,\n:host(.disabled) .form-range-input::-moz-range-thumb {\n  cursor: not-allowed;\n  background: var(--road-on-surface-disabled);\n  box-shadow: none;\n}\n\n:host(.disabled) .form-range-input {\n  pointer-events: none;\n}\n\n:host(.disabled) {\n  cursor: not-allowed;\n}\n\n/**\n *  Focus state\n */\n\n:host(:not(.disabled).focus-visible) .form-range-input::-webkit-slider-thumb,\n:host(:not(.disabled):active) .form-range-input::-webkit-slider-thumb,\n:host(:not(.disabled):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(:not(.disabled).focus-visible) .form-range-input::-moz-range-thumb,\n:host(:not(.disabled):active) .form-range-input::-moz-range-thumb,\n:host(:not(.disabled):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 {\n  Component,\n  h,\n  Element,\n  Prop,\n  Event,\n  Host,\n  EventEmitter,\n  Watch,\n  Listen,\n} 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  @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   * If true, the range will be disabled\n   */\n  @Prop() disabled: 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({\n      value: this.value == null ? this.value : this.value.toString(),\n    });\n    this.roadChange.emit({\n      value: this.value == null ? this.value : this.value.toString(),\n    });\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(\n      \".form-control.sc-road-input\"\n    ) 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  render() {\n    const value = this.getValue();\n    const datalist = this.showLabels !== undefined ? `tickmarks` : \"\";\n\n    return (\n      <Host tabindex=\"0\" class={{ disabled: this.disabled }}>\n        <div class=\"form-group d-flex align-items-end\">\n          {this.showTick && (\n            <road-icon\n              icon={navigationAddLessSolid}\n              class=\"mr-8\"\n              size=\"sm\"\n            ></road-icon>\n          )}\n          <div\n            class=\"form-range\"\n            style={{\n              \"--min\": this.min,\n              \"--max\": this.max,\n              \"--value\": value,\n              \"--background-color\": this.disabled\n                ? \"var(--road-surface-disabled)\"\n                : \"initial\",\n            }}\n          >\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              disabled={this.disabled}\n            />\n            <label class=\"form-range-label\">Valeur</label>\n            <div class=\"form-range-progress\"></div>\n          </div>\n          {this.showTick && (\n            <road-icon\n              icon={navigationAddMoreSolid}\n              class=\"ml-8\"\n              size=\"sm\"\n            ></road-icon>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n\nlet rangeIds = 0;\n"],"version":3}

package/dist/esm/roadtrip.js

@@ -14,7 +14,7 @@ const patchBrowser = () => {
 };
 
 patchBrowser().then(options => {
-  return bootstrapLazy(JSON.parse("[[\"road-badge_14\",[[2,\"road-counter\",{\"inputId\":[1,\"input-id\"],\"min\":[2],\"max\":[2],\"step\":[1],\"value\":[2],\"size\":[1],\"dustbin\":[4],\"readonly\":[4],\"leftIconClasses\":[32],\"rightIconClasses\":[32],\"isDustbinVisible\":[32]},null,{\"value\":[\"onValueChange\"]}],[1,\"road-item\",{\"titleItem\":[1,\"title-item\"],\"text\":[1],\"button\":[4],\"detail\":[4],\"active\":[4],\"detailIcon\":[1,\"detail-icon\"],\"disabled\":[4],\"download\":[1],\"href\":[1],\"rel\":[1],\"lines\":[1],\"layout\":[1],\"target\":[1],\"type\":[1],\"multipleInputs\":[32]}],[1,\"road-badge\",{\"color\":[1],\"bubble\":[4]}],[1,\"road-list\",{\"lines\":[1]}],[1,\"road-toolbar\",{\"color\":[1]}],[1,\"road-drawer\",{\"isOpen\":[1028,\"is-open\"],\"position\":[1],\"drawerWidth\":[2,\"drawer-width\"],\"hasInverseHeader\":[4,\"has-inverse-header\"],\"hasBackIcon\":[4,\"has-back-icon\"],\"backText\":[1,\"back-text\"],\"drawerTitle\":[1,\"drawer-title\"],\"hasCloseIcon\":[4,\"has-close-icon\"],\"open\":[64],\"close\":[64],\"back\":[64]},[[4,\"keyup\",\"onEscape\"]],{\"isOpen\":[\"handleOpen\"]}],[1,\"road-col\"],[1,\"road-grid\"],[1,\"road-row\"],[6,\"road-input\",{\"inputId\":[1,\"input-id\"],\"autocapitalize\":[1],\"autocomplete\":[1],\"autocorrect\":[1],\"autofocus\":[4],\"disabled\":[4],\"enterkeyhint\":[1],\"inputmode\":[1],\"max\":[1],\"maxlength\":[2],\"min\":[1],\"minlength\":[2],\"name\":[1],\"pattern\":[1],\"placeholder\":[1],\"readonly\":[4],\"required\":[4],\"spellcheck\":[4],\"step\":[1],\"size\":[2],\"sizes\":[1],\"type\":[1],\"value\":[1032],\"label\":[1],\"error\":[1],\"helper\":[1],\"debounce\":[2]},null,{\"debounce\":[\"debounceChanged\"],\"value\":[\"valueChanged\"]}],[1,\"road-button\",{\"color\":[1],\"size\":[513],\"buttonType\":[1,\"button-type\"],\"iconOnly\":[516,\"icon-only\"],\"disabled\":[516],\"expand\":[516],\"download\":[1],\"href\":[1],\"rel\":[1],\"target\":[1],\"outline\":[4]}],[1,\"road-input-group\"],[1,\"road-label\"],[1,\"road-icon\",{\"color\":[1],\"ariaLabel\":[1537,\"aria-label\"],\"ariaHidden\":[513,\"aria-hidden\"],\"name\":[1],\"src\":[1],\"icon\":[8],\"size\":[1],\"rotate\":[1],\"lazy\":[4],\"sanitize\":[4],\"svgContent\":[32],\"isVisible\":[32]},null,{\"name\":[\"loadIcon\"],\"src\":[\"loadIcon\"],\"icon\":[\"loadIcon\"]}]]],[\"road-duration\",[[1,\"road-duration\",{\"isOpen\":[1028,\"is-open\"],\"header\":[1],\"min\":[2],\"max\":[2],\"step\":[2],\"open\":[64],\"close\":[64]},[[0,\"roadcardclick\",\"handleClick\"]]]]],[\"road-phone-number-input\",[[2,\"road-phone-number-input\",{\"disabled\":[4],\"countryData\":[16],\"language\":[1],\"codeLabel\":[1,\"code-label\"],\"phoneLabel\":[1,\"phone-label\"],\"phoneValue\":[1,\"phone-value\"],\"countryCode\":[1,\"country-code\"],\"errorMessage\":[1,\"error-message\"],\"required\":[4],\"selectedCountry\":[32],\"selectedCountryCode\":[32],\"phoneNumber\":[32],\"countryOptions\":[32],\"returnObject\":[32]},null,{\"errorMessage\":[\"updateMessagePosition\"]}]]],[\"road-content-card\",[[1,\"road-content-card\",{\"insetImage\":[4,\"inset-image\"]}]]],[\"road-plate-number\",[[2,\"road-plate-number\",{\"country\":[1],\"disabled\":[4],\"placeholder\":[1],\"readonly\":[4],\"value\":[1032],\"motorbike\":[4]},null,{\"value\":[\"valueChanged\"]}]]],[\"road-profil-dropdown\",[[1,\"road-profil-dropdown\",{\"isOpen\":[1028,\"is-open\"]},[[4,\"click\",\"handleDocumentClick\"]]]]],[\"road-rating\",[[1,\"road-rating\",{\"size\":[513],\"rate\":[2],\"showreviews\":[4],\"readonly\":[4],\"reviews\":[2],\"reviewsText\":[1,\"reviews-text\"],\"url\":[1]}]]],[\"road-accordion\",[[1,\"road-accordion\",{\"isOpen\":[1028,\"is-open\"],\"isLight\":[4,\"is-light\"],\"isLightSeparator\":[4,\"is-light-separator\"],\"isSmall\":[4,\"is-small\"]}]]],[\"road-banner\",[[1,\"road-banner\",{\"isOpen\":[1028,\"is-open\"],\"label\":[1],\"link\":[1],\"url\":[1],\"close\":[64]}]]],[\"road-carousel\",[[1,\"road-carousel\",{\"options\":[8],\"pager\":[4],\"arrows\":[4],\"update\":[64],\"updateAutoHeight\":[64],\"slideTo\":[64],\"slideNext\":[64],\"slidePrev\":[64],\"getActiveIndex\":[64],\"getPreviousIndex\":[64],\"length\":[64],\"isEnd\":[64],\"isBeginning\":[64],\"startAutoplay\":[64],\"stopAutoplay\":[64],\"lockSwipeToNext\":[64],\"lockSwipeToPrev\":[64],\"lockSwipes\":[64],\"getSwiper\":[64]},null,{\"options\":[\"optionsChanged\"]}]]],[\"road-checkbox\",[[6,\"road-checkbox\",{\"checkboxId\":[1,\"checkbox-id\"],\"name\":[1],\"required\":[4],\"checked\":[1028],\"indeterminate\":[4],\"disabled\":[4],\"value\":[1],\"label\":[1],\"inverse\":[4],\"error\":[1],\"helper\":[1]},null,{\"checked\":[\"checkedChanged\"]}]]],[\"road-chip\",[[1,\"road-chip\",{\"color\":[1],\"outline\":[4],\"size\":[1],\"hasCloseIcon\":[4,\"has-close-icon\"]}]]],[\"road-collapse\",[[1,\"road-collapse\",{\"isOpen\":[1028,\"is-open\"],\"showMore\":[1,\"show-more\"],\"showLess\":[1,\"show-less\"],\"centered\":[4]}]]],[\"road-dialog\",[[1,\"road-dialog\",{\"isOpen\":[1028,\"is-open\"],\"hasCloseIcon\":[4,\"has-close-icon\"],\"color\":[1],\"icon\":[1],\"label\":[1],\"description\":[1],\"open\":[64],\"close\":[64]},[[4,\"keyup\",\"onEscape\"]]]]],[\"road-dropdown\",[[1,\"road-dropdown\",{\"isOpen\":[1028,\"is-open\"],\"isLight\":[4,\"is-light\"],\"isMedium\":[4,\"is-medium\"],\"position\":[513],\"direction\":[513]},[[4,\"click\",\"handleDocumentClick\"]]]]],[\"road-modal\",[[1,\"road-modal\",{\"maxWidth\":[2,\"max-width\"],\"isOpen\":[1028,\"is-open\"],\"hasInverseHeader\":[4,\"has-inverse-header\"],\"modalTitle\":[1,\"modal-title\"],\"hasCloseIcon\":[4,\"has-close-icon\"],\"open\":[64],\"close\":[64]},[[4,\"keyup\",\"onEscape\"]]]]],[\"road-range\",[[6,\"road-range\",{\"rangeId\":[1,\"range-id\"],\"value\":[1032],\"min\":[1],\"max\":[1],\"step\":[1],\"showValue\":[4,\"show-value\"],\"showTick\":[4,\"show-tick\"],\"showLabels\":[4,\"show-labels\"]},[[2,\"focus\",\"handleFocus\"],[2,\"blur\",\"handleBlur\"]],{\"value\":[\"valueChanged\"]}]]],[\"road-toast\",[[1,\"road-toast\",{\"isOpen\":[1028,\"is-open\"],\"color\":[1],\"label\":[1],\"timeout\":[2],\"open\":[64],\"close\":[64]},null,{\"isOpen\":[\"isOpenChanged\"]}]]],[\"road-alert\",[[1,\"road-alert\",{\"color\":[1],\"label\":[1],\"button\":[1],\"link\":[1],\"url\":[1]}]]],[\"road-area-code\",[[2,\"road-area-code\",{\"selectId\":[1,\"select-id\"],\"options\":[16],\"autofocus\":[4],\"disabled\":[4],\"name\":[1],\"required\":[4],\"size\":[2],\"sizes\":[1],\"label\":[1],\"error\":[1],\"value\":[1025],\"triggerRender\":[1026,\"trigger-render\"],\"selectedValue\":[32]},null,{\"value\":[\"valueChanged\"]}]]],[\"road-autocomplete\",[[6,\"road-autocomplete\",{\"options\":[16],\"visible\":[32]},[[0,\"roadFocus\",\"handleFocus\"],[0,\"roadfocus\",\"handleFocus\"],[4,\"click\",\"onClickOutside\"]]]]],[\"road-button-floating\",[[1,\"road-button-floating\",{\"position\":[513],\"href\":[1],\"rel\":[1],\"target\":[1]},[[9,\"scroll\",\"onScroll\"]]]]],[\"road-carousel-item\",[[4,\"road-carousel-item\"]]],[\"road-flap\",[[1,\"road-flap\",{\"color\":[1],\"filled\":[4],\"size\":[513]}]]],[\"road-global-navigation\",[[1,\"road-global-navigation\",{\"selectedTab\":[1,\"selected-tab\"]},[[0,\"roadNavbarItemClick\",\"onNavbarChanged\"],[0,\"roadnavbaritemclick\",\"onNavbarChanged\"]],{\"selectedTab\":[\"selectedTabChanged\"]}]]],[\"road-illustration\",[[1,\"road-illustration\",{\"ariaLabel\":[1537,\"aria-label\"],\"ariaHidden\":[513,\"aria-hidden\"],\"name\":[1],\"src\":[1],\"illustration\":[8],\"size\":[1],\"rotate\":[1],\"lazy\":[4],\"sanitize\":[4],\"illustrationSvgContent\":[32],\"isVisible\":[32]},null,{\"name\":[\"loadIllustration\"],\"src\":[\"loadIllustration\"],\"illustration\":[\"loadIllustration\"]}]]],[\"road-navbar\",[[1,\"road-navbar\",{\"selectedTab\":[1,\"selected-tab\"]},[[0,\"roadNavbarItemClick\",\"onNavbarChanged\"],[0,\"roadnavbaritemclick\",\"onNavbarChanged\"]],{\"selectedTab\":[\"selectedTabChanged\"]}]]],[\"road-navbar-item\",[[1,\"road-navbar-item\",{\"disabled\":[4],\"download\":[1],\"href\":[1],\"rel\":[1],\"selected\":[1028],\"tab\":[1],\"target\":[1]},[[8,\"roadNavbarChanged\",\"onNavbarChanged\"],[8,\"roadnavbarchanged\",\"onNavbarChanged\"]]]]],[\"road-progress\",[[1,\"road-progress\",{\"value\":[2],\"numbersteps\":[1],\"label\":[1],\"showstep\":[4],\"animation\":[4],\"light\":[4],\"fullwidth\":[4],\"color\":[1]}]]],[\"road-progress-indicator-horizontal\",[[1,\"road-progress-indicator-horizontal\",{\"color\":[513],\"numberStep\":[2,\"number-step\"],\"stateFirstStep\":[1,\"state-first-step\"],\"stateSecondStep\":[1,\"state-second-step\"],\"stateThirdStep\":[1,\"state-third-step\"],\"urlStep1\":[1,\"url-step-1\"],\"urlStep2\":[1,\"url-step-2\"],\"urlStep3\":[1,\"url-step-3\"]}]]],[\"road-progress-indicator-vertical\",[[1,\"road-progress-indicator-vertical\"]]],[\"road-progress-indicator-vertical-item\",[[4,\"road-progress-indicator-vertical-item\"]]],[\"road-progress-tracker\",[[1,\"road-progress-tracker\"]]],[\"road-progress-tracker-item\",[[4,\"road-progress-tracker-item\"]]],[\"road-radio\",[[2,\"road-radio\",{\"radioId\":[1,\"radio-id\"],\"name\":[1],\"required\":[4],\"disabled\":[4],\"value\":[8],\"label\":[1],\"inverse\":[4],\"error\":[4],\"helper\":[1],\"inline\":[4],\"checked\":[32]},[[8,\"roadChange\",\"onRoadChangedChanged\"],[8,\"roadchange\",\"onRoadChangedChanged\"]]]]],[\"road-radio-group\",[[6,\"road-radio-group\",{\"radioGroupId\":[1,\"radio-group-id\"],\"allowEmptySelection\":[4,\"allow-empty-selection\"],\"name\":[1],\"value\":[1032],\"label\":[1],\"asterisk\":[4],\"ariaLabel\":[513,\"aria-label\"],\"error\":[1025],\"helper\":[1]},null,{\"value\":[\"valueChanged\"],\"error\":[\"errorChanged\"]}]]],[\"road-segmented-button\",[[1,\"road-segmented-button\",{\"size\":[1],\"selected\":[1028],\"tab\":[1]},[[8,\"roadSegmentedButtonBarChanged\",\"onButtonBarChanged\"],[8,\"roadSegmentedButtonbarchanged\",\"onButtonBarChanged\"]]]]],[\"road-segmented-button-bar\",[[1,\"road-segmented-button-bar\",{\"selectedTab\":[1,\"selected-tab\"]},null,{\"selectedTab\":[\"selectedTabChanged\"]}]]],[\"road-segmented-buttons\",[[1,\"road-segmented-buttons\",{\"selectedTab\":[32],\"select\":[64],\"getTab\":[64],\"getSelected\":[64]}]]],[\"road-select\",[[2,\"road-select\",{\"selectId\":[1,\"select-id\"],\"options\":[16],\"autofocus\":[4],\"disabled\":[4],\"name\":[1],\"required\":[4],\"size\":[2],\"sizes\":[1],\"label\":[1],\"error\":[1],\"value\":[1032]},null,{\"value\":[\"valueChanged\"]}]]],[\"road-select-filter\",[[6,\"road-select-filter\",{\"options\":[16],\"parameters\":[8],\"isActive\":[4,\"is-active\"],\"onlySelect\":[4,\"only-select\"],\"isOpen\":[32],\"currentValue\":[32],\"activeIndex\":[32]},[[0,\"roadFocus\",\"handleFocus\"],[0,\"roadfocus\",\"handleFocus\"],[0,\"roadBlur\",\"handleBlur\"],[0,\"roadblur\",\"handleBlur\"],[0,\"roadChange\",\"handleChange\"],[0,\"roadchange\",\"handleChange\"],[4,\"click\",\"onClickOutside\"],[8,\"keydown\",\"handleKeydown\"]]]]],[\"road-skeleton\",[[1,\"road-skeleton\"]]],[\"road-spinner\",[[1,\"road-spinner\",{\"size\":[513],\"color\":[513]}]]],[\"road-switch\",[[2,\"road-switch\",{\"switchId\":[1,\"switch-id\"],\"name\":[1],\"checked\":[1028],\"disabled\":[4],\"label\":[1],\"color\":[1],\"hasLeftLabel\":[4,\"has-left-label\"],\"isSpaced\":[4,\"is-spaced\"],\"value\":[1],\"on\":[1],\"off\":[1]},null,{\"checked\":[\"checkedChanged\"]}]]],[\"road-tab\",[[1,\"road-tab\",{\"active\":[1028],\"tab\":[1],\"setActive\":[64]},[[8,\"roadtabbarchanged\",\"onTabBarChanged\"]]]]],[\"road-tab-bar\",[[1,\"road-tab-bar\",{\"secondary\":[4],\"expand\":[4],\"center\":[4],\"selectedTab\":[1537,\"selected-tab\"]},[[0,\"roadTabButtonClick\",\"onTabButtonClick\"]],{\"selectedTab\":[\"selectedTabChanged\"]}]]],[\"road-tab-button\",[[1,\"road-tab-button\",{\"download\":[1],\"href\":[1],\"rel\":[1],\"layout\":[1],\"selected\":[1028],\"tab\":[1],\"target\":[1]},[[8,\"roadTabBarChanged\",\"onTabBarChanged\"],[8,\"roadTabbarchanged\",\"onTabBarChanged\"]]]]],[\"road-table\",[[6,\"road-table\"]]],[\"road-tabs\",[[1,\"road-tabs\",{\"selectedTab\":[32],\"select\":[64],\"getTab\":[64],\"getSelected\":[64]}]]],[\"road-tag\",[[1,\"road-tag\",{\"color\":[1],\"contrast\":[4]}]]],[\"road-text\",[[1,\"road-text\",{\"color\":[1]}]]],[\"road-textarea\",[[2,\"road-textarea\",{\"textareaId\":[1,\"textarea-id\"],\"autocapitalize\":[1],\"autofocus\":[4],\"disabled\":[4],\"inputmode\":[1],\"enterkeyhint\":[1],\"maxlength\":[2],\"minlength\":[2],\"name\":[1],\"placeholder\":[1],\"sizes\":[1],\"readonly\":[4],\"required\":[4],\"spellcheck\":[4],\"resize\":[4],\"cols\":[2],\"rows\":[2],\"wrap\":[1],\"value\":[1025],\"label\":[1],\"error\":[1],\"helper\":[1]},null,{\"value\":[\"valueChanged\"]}]]],[\"road-toggle\",[[2,\"road-toggle\",{\"toggleId\":[1,\"toggle-id\"],\"name\":[1],\"checked\":[1028],\"disabled\":[4],\"label\":[1],\"hasLeftLabel\":[4,\"has-left-label\"],\"isSpaced\":[4,\"is-spaced\"],\"value\":[1],\"on\":[1],\"off\":[1]},null,{\"checked\":[\"checkedChanged\"]}]]],[\"road-toolbar-title\",[[1,\"road-toolbar-title\"]]],[\"road-toolbar-title-page\",[[1,\"road-toolbar-title-page\"]]],[\"road-tooltip\",[[1,\"road-tooltip\",{\"tooltipId\":[1,\"tooltip-id\"],\"content\":[1],\"position\":[1],\"contentAlign\":[1,\"content-align\"],\"isOpen\":[1028,\"is-open\"],\"trigger\":[1],\"open\":[64],\"close\":[64]}]]],[\"road-avatar\",[[1,\"road-avatar\",{\"size\":[513]}]]],[\"road-card\",[[1,\"road-card\",{\"elevation\":[1],\"button\":[4],\"value\":[1],\"type\":[1],\"download\":[1],\"href\":[1],\"rel\":[1],\"target\":[1]}]]],[\"road-img\",[[1,\"road-img\",{\"alt\":[1],\"src\":[1],\"loadSrc\":[32],\"loadError\":[32]},null,{\"src\":[\"srcChanged\"]}]]]]"), options);
+  return bootstrapLazy(JSON.parse("[[\"road-badge_14\",[[2,\"road-counter\",{\"inputId\":[1,\"input-id\"],\"min\":[2],\"max\":[2],\"step\":[1],\"value\":[2],\"size\":[1],\"dustbin\":[4],\"readonly\":[4],\"leftIconClasses\":[32],\"rightIconClasses\":[32],\"isDustbinVisible\":[32]},null,{\"value\":[\"onValueChange\"]}],[1,\"road-item\",{\"titleItem\":[1,\"title-item\"],\"text\":[1],\"button\":[4],\"detail\":[4],\"active\":[4],\"detailIcon\":[1,\"detail-icon\"],\"disabled\":[4],\"download\":[1],\"href\":[1],\"rel\":[1],\"lines\":[1],\"layout\":[1],\"target\":[1],\"type\":[1],\"multipleInputs\":[32]}],[1,\"road-badge\",{\"color\":[1],\"bubble\":[4]}],[1,\"road-list\",{\"lines\":[1]}],[1,\"road-toolbar\",{\"color\":[1]}],[1,\"road-drawer\",{\"isOpen\":[1028,\"is-open\"],\"position\":[1],\"drawerWidth\":[2,\"drawer-width\"],\"hasInverseHeader\":[4,\"has-inverse-header\"],\"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],\"back\":[64]},[[4,\"keyup\",\"onEscape\"]],{\"isOpen\":[\"handleOpen\"]}],[1,\"road-col\"],[1,\"road-grid\"],[1,\"road-row\"],[6,\"road-input\",{\"inputId\":[1,\"input-id\"],\"autocapitalize\":[1],\"autocomplete\":[1],\"autocorrect\":[1],\"autofocus\":[4],\"disabled\":[4],\"enterkeyhint\":[1],\"inputmode\":[1],\"max\":[1],\"maxlength\":[2],\"min\":[1],\"minlength\":[2],\"name\":[1],\"pattern\":[1],\"placeholder\":[1],\"readonly\":[4],\"required\":[4],\"spellcheck\":[4],\"step\":[1],\"size\":[2],\"sizes\":[1],\"type\":[1],\"value\":[1032],\"label\":[1],\"error\":[1],\"helper\":[1],\"debounce\":[2]},null,{\"debounce\":[\"debounceChanged\"],\"value\":[\"valueChanged\"]}],[1,\"road-button\",{\"color\":[1],\"size\":[513],\"buttonType\":[1,\"button-type\"],\"iconOnly\":[516,\"icon-only\"],\"disabled\":[516],\"expand\":[516],\"download\":[1],\"href\":[1],\"rel\":[1],\"target\":[1],\"outline\":[4]}],[1,\"road-input-group\"],[1,\"road-label\"],[1,\"road-icon\",{\"color\":[1],\"ariaLabel\":[1537,\"aria-label\"],\"ariaHidden\":[513,\"aria-hidden\"],\"name\":[1],\"src\":[1],\"icon\":[8],\"size\":[1],\"rotate\":[1],\"lazy\":[4],\"sanitize\":[4],\"svgContent\":[32],\"isVisible\":[32]},null,{\"name\":[\"loadIcon\"],\"src\":[\"loadIcon\"],\"icon\":[\"loadIcon\"]}]]],[\"road-duration\",[[1,\"road-duration\",{\"isOpen\":[1028,\"is-open\"],\"header\":[1],\"min\":[2],\"max\":[2],\"step\":[2],\"open\":[64],\"close\":[64]},[[0,\"roadcardclick\",\"handleClick\"]]]]],[\"road-phone-number-input\",[[2,\"road-phone-number-input\",{\"disabled\":[4],\"countryData\":[16],\"language\":[1],\"codeLabel\":[1,\"code-label\"],\"phoneLabel\":[1,\"phone-label\"],\"phoneValue\":[1,\"phone-value\"],\"countryCode\":[1,\"country-code\"],\"errorMessage\":[1,\"error-message\"],\"required\":[4],\"selectedCountry\":[32],\"selectedCountryCode\":[32],\"phoneNumber\":[32],\"countryOptions\":[32],\"returnObject\":[32]},null,{\"errorMessage\":[\"updateMessagePosition\"]}]]],[\"road-content-card\",[[1,\"road-content-card\",{\"insetImage\":[4,\"inset-image\"]}]]],[\"road-plate-number\",[[2,\"road-plate-number\",{\"country\":[1],\"disabled\":[4],\"placeholder\":[1],\"readonly\":[4],\"value\":[1032],\"motorbike\":[4]},null,{\"value\":[\"valueChanged\"]}]]],[\"road-profil-dropdown\",[[1,\"road-profil-dropdown\",{\"isOpen\":[1028,\"is-open\"]},[[4,\"click\",\"handleDocumentClick\"]]]]],[\"road-rating\",[[1,\"road-rating\",{\"size\":[513],\"rate\":[2],\"showreviews\":[4],\"readonly\":[4],\"reviews\":[2],\"reviewsText\":[1,\"reviews-text\"],\"url\":[1]}]]],[\"road-accordion\",[[1,\"road-accordion\",{\"isOpen\":[1028,\"is-open\"],\"isLight\":[4,\"is-light\"],\"isLightSeparator\":[4,\"is-light-separator\"],\"isSmall\":[4,\"is-small\"]}]]],[\"road-banner\",[[1,\"road-banner\",{\"isOpen\":[1028,\"is-open\"],\"label\":[1],\"link\":[1],\"url\":[1],\"close\":[64]}]]],[\"road-carousel\",[[1,\"road-carousel\",{\"options\":[8],\"pager\":[4],\"arrows\":[4],\"update\":[64],\"updateAutoHeight\":[64],\"slideTo\":[64],\"slideNext\":[64],\"slidePrev\":[64],\"getActiveIndex\":[64],\"getPreviousIndex\":[64],\"length\":[64],\"isEnd\":[64],\"isBeginning\":[64],\"startAutoplay\":[64],\"stopAutoplay\":[64],\"lockSwipeToNext\":[64],\"lockSwipeToPrev\":[64],\"lockSwipes\":[64],\"getSwiper\":[64]},null,{\"options\":[\"optionsChanged\"]}]]],[\"road-checkbox\",[[6,\"road-checkbox\",{\"checkboxId\":[1,\"checkbox-id\"],\"name\":[1],\"required\":[4],\"checked\":[1028],\"indeterminate\":[4],\"disabled\":[4],\"value\":[1],\"label\":[1],\"inverse\":[4],\"error\":[1],\"helper\":[1]},null,{\"checked\":[\"checkedChanged\"]}]]],[\"road-chip\",[[1,\"road-chip\",{\"color\":[1],\"outline\":[4],\"size\":[1],\"hasCloseIcon\":[4,\"has-close-icon\"]}]]],[\"road-collapse\",[[1,\"road-collapse\",{\"isOpen\":[1028,\"is-open\"],\"showMore\":[1,\"show-more\"],\"showLess\":[1,\"show-less\"],\"centered\":[4]}]]],[\"road-dialog\",[[1,\"road-dialog\",{\"isOpen\":[1028,\"is-open\"],\"hasCloseIcon\":[4,\"has-close-icon\"],\"color\":[1],\"icon\":[1],\"label\":[1],\"description\":[1],\"open\":[64],\"close\":[64]},[[4,\"keyup\",\"onEscape\"]]]]],[\"road-dropdown\",[[1,\"road-dropdown\",{\"isOpen\":[1028,\"is-open\"],\"isLight\":[4,\"is-light\"],\"isMedium\":[4,\"is-medium\"],\"position\":[513],\"direction\":[513]},[[4,\"click\",\"handleDocumentClick\"]]]]],[\"road-modal\",[[1,\"road-modal\",{\"maxWidth\":[2,\"max-width\"],\"isOpen\":[1028,\"is-open\"],\"hasInverseHeader\":[4,\"has-inverse-header\"],\"modalTitle\":[1,\"modal-title\"],\"hasCloseIcon\":[4,\"has-close-icon\"],\"open\":[64],\"close\":[64]},[[4,\"keyup\",\"onEscape\"]]]]],[\"road-range\",[[6,\"road-range\",{\"rangeId\":[1,\"range-id\"],\"value\":[1032],\"min\":[1],\"max\":[1],\"step\":[1],\"showValue\":[4,\"show-value\"],\"showTick\":[4,\"show-tick\"],\"showLabels\":[4,\"show-labels\"],\"disabled\":[4]},[[2,\"focus\",\"handleFocus\"],[2,\"blur\",\"handleBlur\"]],{\"value\":[\"valueChanged\"]}]]],[\"road-toast\",[[1,\"road-toast\",{\"isOpen\":[1028,\"is-open\"],\"color\":[1],\"label\":[1],\"timeout\":[2],\"open\":[64],\"close\":[64]},null,{\"isOpen\":[\"isOpenChanged\"]}]]],[\"road-alert\",[[1,\"road-alert\",{\"color\":[1],\"label\":[1],\"button\":[1],\"link\":[1],\"url\":[1]}]]],[\"road-area-code\",[[2,\"road-area-code\",{\"selectId\":[1,\"select-id\"],\"options\":[16],\"autofocus\":[4],\"disabled\":[4],\"name\":[1],\"required\":[4],\"size\":[2],\"sizes\":[1],\"label\":[1],\"error\":[1],\"value\":[1025],\"triggerRender\":[1026,\"trigger-render\"],\"selectedValue\":[32]},null,{\"value\":[\"valueChanged\"]}]]],[\"road-autocomplete\",[[6,\"road-autocomplete\",{\"options\":[16],\"visible\":[32]},[[0,\"roadFocus\",\"handleFocus\"],[0,\"roadfocus\",\"handleFocus\"],[4,\"click\",\"onClickOutside\"]]]]],[\"road-button-floating\",[[1,\"road-button-floating\",{\"position\":[513],\"href\":[1],\"rel\":[1],\"target\":[1]},[[9,\"scroll\",\"onScroll\"]]]]],[\"road-carousel-item\",[[4,\"road-carousel-item\"]]],[\"road-flap\",[[1,\"road-flap\",{\"color\":[1],\"filled\":[4],\"size\":[513]}]]],[\"road-global-navigation\",[[1,\"road-global-navigation\",{\"selectedTab\":[1,\"selected-tab\"]},[[0,\"roadNavbarItemClick\",\"onNavbarChanged\"],[0,\"roadnavbaritemclick\",\"onNavbarChanged\"]],{\"selectedTab\":[\"selectedTabChanged\"]}]]],[\"road-illustration\",[[1,\"road-illustration\",{\"ariaLabel\":[1537,\"aria-label\"],\"ariaHidden\":[513,\"aria-hidden\"],\"name\":[1],\"src\":[1],\"illustration\":[8],\"size\":[1],\"rotate\":[1],\"lazy\":[4],\"sanitize\":[4],\"illustrationSvgContent\":[32],\"isVisible\":[32]},null,{\"name\":[\"loadIllustration\"],\"src\":[\"loadIllustration\"],\"illustration\":[\"loadIllustration\"]}]]],[\"road-navbar\",[[1,\"road-navbar\",{\"selectedTab\":[1,\"selected-tab\"]},[[0,\"roadNavbarItemClick\",\"onNavbarChanged\"],[0,\"roadnavbaritemclick\",\"onNavbarChanged\"]],{\"selectedTab\":[\"selectedTabChanged\"]}]]],[\"road-navbar-item\",[[1,\"road-navbar-item\",{\"disabled\":[4],\"download\":[1],\"href\":[1],\"rel\":[1],\"selected\":[1028],\"tab\":[1],\"target\":[1]},[[8,\"roadNavbarChanged\",\"onNavbarChanged\"],[8,\"roadnavbarchanged\",\"onNavbarChanged\"]]]]],[\"road-progress\",[[1,\"road-progress\",{\"value\":[2],\"numbersteps\":[1],\"label\":[1],\"showstep\":[4],\"animation\":[4],\"light\":[4],\"fullwidth\":[4],\"color\":[1]}]]],[\"road-progress-indicator-horizontal\",[[1,\"road-progress-indicator-horizontal\",{\"color\":[513],\"numberStep\":[2,\"number-step\"],\"stateFirstStep\":[1,\"state-first-step\"],\"stateSecondStep\":[1,\"state-second-step\"],\"stateThirdStep\":[1,\"state-third-step\"],\"urlStep1\":[1,\"url-step-1\"],\"urlStep2\":[1,\"url-step-2\"],\"urlStep3\":[1,\"url-step-3\"]}]]],[\"road-progress-indicator-vertical\",[[1,\"road-progress-indicator-vertical\"]]],[\"road-progress-indicator-vertical-item\",[[4,\"road-progress-indicator-vertical-item\"]]],[\"road-progress-tracker\",[[1,\"road-progress-tracker\"]]],[\"road-progress-tracker-item\",[[4,\"road-progress-tracker-item\"]]],[\"road-radio\",[[2,\"road-radio\",{\"radioId\":[1,\"radio-id\"],\"name\":[1],\"required\":[4],\"disabled\":[4],\"value\":[8],\"label\":[1],\"inverse\":[4],\"error\":[4],\"helper\":[1],\"inline\":[4],\"checked\":[32]},[[8,\"roadChange\",\"onRoadChangedChanged\"],[8,\"roadchange\",\"onRoadChangedChanged\"]]]]],[\"road-radio-group\",[[6,\"road-radio-group\",{\"radioGroupId\":[1,\"radio-group-id\"],\"allowEmptySelection\":[4,\"allow-empty-selection\"],\"name\":[1],\"value\":[1032],\"label\":[1],\"asterisk\":[4],\"ariaLabel\":[513,\"aria-label\"],\"error\":[1025],\"helper\":[1]},null,{\"value\":[\"valueChanged\"],\"error\":[\"errorChanged\"]}]]],[\"road-segmented-button\",[[1,\"road-segmented-button\",{\"size\":[1],\"selected\":[1028],\"tab\":[1]},[[8,\"roadSegmentedButtonBarChanged\",\"onButtonBarChanged\"],[8,\"roadSegmentedButtonbarchanged\",\"onButtonBarChanged\"]]]]],[\"road-segmented-button-bar\",[[1,\"road-segmented-button-bar\",{\"selectedTab\":[1,\"selected-tab\"]},null,{\"selectedTab\":[\"selectedTabChanged\"]}]]],[\"road-segmented-buttons\",[[1,\"road-segmented-buttons\",{\"selectedTab\":[32],\"select\":[64],\"getTab\":[64],\"getSelected\":[64]}]]],[\"road-select\",[[2,\"road-select\",{\"selectId\":[1,\"select-id\"],\"options\":[16],\"autofocus\":[4],\"disabled\":[4],\"name\":[1],\"required\":[4],\"size\":[2],\"sizes\":[1],\"label\":[1],\"error\":[1],\"value\":[1032]},null,{\"value\":[\"valueChanged\"]}]]],[\"road-select-filter\",[[6,\"road-select-filter\",{\"options\":[16],\"parameters\":[8],\"isActive\":[4,\"is-active\"],\"onlySelect\":[4,\"only-select\"],\"isOpen\":[32],\"currentValue\":[32],\"activeIndex\":[32]},[[0,\"roadFocus\",\"handleFocus\"],[0,\"roadfocus\",\"handleFocus\"],[0,\"roadBlur\",\"handleBlur\"],[0,\"roadblur\",\"handleBlur\"],[0,\"roadChange\",\"handleChange\"],[0,\"roadchange\",\"handleChange\"],[4,\"click\",\"onClickOutside\"],[8,\"keydown\",\"handleKeydown\"]]]]],[\"road-skeleton\",[[1,\"road-skeleton\"]]],[\"road-spinner\",[[1,\"road-spinner\",{\"size\":[513],\"color\":[513]}]]],[\"road-switch\",[[2,\"road-switch\",{\"switchId\":[1,\"switch-id\"],\"name\":[1],\"checked\":[1028],\"disabled\":[4],\"label\":[1],\"color\":[1],\"hasLeftLabel\":[4,\"has-left-label\"],\"isSpaced\":[4,\"is-spaced\"],\"value\":[1],\"on\":[1],\"off\":[1]},null,{\"checked\":[\"checkedChanged\"]}]]],[\"road-tab\",[[1,\"road-tab\",{\"active\":[1028],\"tab\":[1],\"setActive\":[64]},[[8,\"roadtabbarchanged\",\"onTabBarChanged\"]]]]],[\"road-tab-bar\",[[1,\"road-tab-bar\",{\"secondary\":[4],\"expand\":[4],\"center\":[4],\"selectedTab\":[1537,\"selected-tab\"]},[[0,\"roadTabButtonClick\",\"onTabButtonClick\"]],{\"selectedTab\":[\"selectedTabChanged\"]}]]],[\"road-tab-button\",[[1,\"road-tab-button\",{\"download\":[1],\"href\":[1],\"rel\":[1],\"layout\":[1],\"selected\":[1028],\"tab\":[1],\"target\":[1]},[[8,\"roadTabBarChanged\",\"onTabBarChanged\"],[8,\"roadTabbarchanged\",\"onTabBarChanged\"]]]]],[\"road-table\",[[6,\"road-table\"]]],[\"road-tabs\",[[1,\"road-tabs\",{\"selectedTab\":[32],\"select\":[64],\"getTab\":[64],\"getSelected\":[64]}]]],[\"road-tag\",[[1,\"road-tag\",{\"color\":[1],\"contrast\":[4]}]]],[\"road-text\",[[1,\"road-text\",{\"color\":[1]}]]],[\"road-textarea\",[[2,\"road-textarea\",{\"textareaId\":[1,\"textarea-id\"],\"autocapitalize\":[1],\"autofocus\":[4],\"disabled\":[4],\"inputmode\":[1],\"enterkeyhint\":[1],\"maxlength\":[2],\"minlength\":[2],\"name\":[1],\"placeholder\":[1],\"sizes\":[1],\"readonly\":[4],\"required\":[4],\"spellcheck\":[4],\"resize\":[4],\"cols\":[2],\"rows\":[2],\"wrap\":[1],\"value\":[1025],\"label\":[1],\"error\":[1],\"helper\":[1]},null,{\"value\":[\"valueChanged\"]}]]],[\"road-toggle\",[[2,\"road-toggle\",{\"toggleId\":[1,\"toggle-id\"],\"name\":[1],\"checked\":[1028],\"disabled\":[4],\"label\":[1],\"hasLeftLabel\":[4,\"has-left-label\"],\"isSpaced\":[4,\"is-spaced\"],\"value\":[1],\"on\":[1],\"off\":[1]},null,{\"checked\":[\"checkedChanged\"]}]]],[\"road-toolbar-title\",[[1,\"road-toolbar-title\"]]],[\"road-toolbar-title-page\",[[1,\"road-toolbar-title-page\"]]],[\"road-tooltip\",[[1,\"road-tooltip\",{\"tooltipId\":[1,\"tooltip-id\"],\"content\":[1],\"position\":[1],\"contentAlign\":[1,\"content-align\"],\"isOpen\":[1028,\"is-open\"],\"trigger\":[1],\"open\":[64],\"close\":[64]}]]],[\"road-avatar\",[[1,\"road-avatar\",{\"size\":[513]}]]],[\"road-card\",[[1,\"road-card\",{\"elevation\":[1],\"button\":[4],\"value\":[1],\"type\":[1],\"download\":[1],\"href\":[1],\"rel\":[1],\"target\":[1]}]]],[\"road-img\",[[1,\"road-img\",{\"alt\":[1],\"src\":[1],\"loadSrc\":[32],\"loadError\":[32]},null,{\"src\":[\"srcChanged\"]}]]]]"), options);
 });
 
 //# sourceMappingURL=roadtrip.js.map

package/dist/html.html-data.json

@@ -810,6 +810,10 @@
         "value": ""
       },
       "attributes": [
+        {
+          "name": "aria-label",
+          "description": "Aria label of the drawer"
+        },
         {
           "name": "back-text",
           "description": "Show / hide back icon"
@@ -2338,6 +2342,10 @@
         "value": ""
       },
       "attributes": [
+        {
+          "name": "disabled",
+          "description": "If true, the range will be disabled"
+        },
         {
           "name": "max",
           "description": "The maximum value, which must not be less than its minimum (min attribute) value."

package/dist/roadtrip/p-18c7fb2f.entry.js

@@ -0,0 +1,2 @@
+import{r,c as a,h as e,H as o,a as n}from"./p-f3d586b3.js";import{h as s,i}from"./p-ac7a8bca.js";const t='.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}';const d=class{constructor(e){r(this,e);this.roadchange=a(this,"roadchange",7);this.roadChange=a(this,"roadChange",7);this.onInput=r=>{const a=r.target;if(a){this.value=a.value||""}if(this.value!==null&&this.value!==undefined){this.el.style.setProperty("--value",`${this.value}`)}};this.rangeId=`road-range-${l++}`;this.value="";this.min=undefined;this.max=undefined;this.step=undefined;this.showValue=false;this.showTick=false;this.showLabels=false;this.disabled=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 a=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";a.style.padding="0 1rem 0"}}render(){const r=this.getValue();const a=this.showLabels!==undefined?`tickmarks`:"";return e(o,{tabindex:"0",class:{disabled:this.disabled}},e("div",{class:"form-group d-flex align-items-end"},this.showTick&&e("road-icon",{icon:s,class:"mr-8",size:"sm"}),e("div",{class:"form-range",style:{"--min":this.min,"--max":this.max,"--value":r,"--background-color":this.disabled?"var(--road-surface-disabled)":"initial"}},this.showValue&&e("output",null),this.showLabels&&e("slot",{name:"datalist"}),e("input",{type:"range",class:"form-range-input",id:this.rangeId,min:this.min,max:this.max,value:r,onInput:this.onInput,list:a,"aria-label":"Valeur",tabindex:"0",disabled:this.disabled}),e("label",{class:"form-range-label"},"Valeur"),e("div",{class:"form-range-progress"})),this.showTick&&e("road-icon",{icon:i,class:"ml-8",size:"sm"})))}get el(){return n(this)}static get watchers(){return{value:["valueChanged"]}}};let l=0;d.style=t;export{d as road_range};
+//# sourceMappingURL=p-18c7fb2f.entry.js.map

package/dist/roadtrip/p-18c7fb2f.entry.js.map

@@ -0,0 +1 @@
+{"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","disabled","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.sc-road-range::after {\n  position: absolute;\n  top: 0;\n  right: 0;\n  left: 0;\n  display: block;\n  width: calc(((var(--value) - var(--min)) * 100%) / (var(--max) - var(--min)));\n  height: 0.5rem;\n  content: \"\";\n  background: var(--road-primary);\n  border-radius: 1.125rem;\n}\n\n:host(.disabled) .form-range-progress.sc-road-range::after {\n  background: var(--road-surface-disabled);\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/* Styles for disabled state */\n:host(.disabled) .form-range-input::-webkit-slider-thumb,\n:host(.disabled) .form-range-input::-moz-range-thumb {\n  cursor: not-allowed;\n  background: var(--road-on-surface-disabled);\n  box-shadow: none;\n}\n\n:host(.disabled) .form-range-input {\n  pointer-events: none;\n}\n\n:host(.disabled) {\n  cursor: not-allowed;\n}\n\n/**\n *  Focus state\n */\n\n:host(:not(.disabled).focus-visible) .form-range-input::-webkit-slider-thumb,\n:host(:not(.disabled):active) .form-range-input::-webkit-slider-thumb,\n:host(:not(.disabled):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(:not(.disabled).focus-visible) .form-range-input::-moz-range-thumb,\n:host(:not(.disabled):active) .form-range-input::-moz-range-thumb,\n:host(:not(.disabled):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 {\n  Component,\n  h,\n  Element,\n  Prop,\n  Event,\n  Host,\n  EventEmitter,\n  Watch,\n  Listen,\n} 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  @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   * If true, the range will be disabled\n   */\n  @Prop() disabled: 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({\n      value: this.value == null ? this.value : this.value.toString(),\n    });\n    this.roadChange.emit({\n      value: this.value == null ? this.value : this.value.toString(),\n    });\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(\n      \".form-control.sc-road-input\"\n    ) 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  render() {\n    const value = this.getValue();\n    const datalist = this.showLabels !== undefined ? `tickmarks` : \"\";\n\n    return (\n      <Host tabindex=\"0\" class={{ disabled: this.disabled }}>\n        <div class=\"form-group d-flex align-items-end\">\n          {this.showTick && (\n            <road-icon\n              icon={navigationAddLessSolid}\n              class=\"mr-8\"\n              size=\"sm\"\n            ></road-icon>\n          )}\n          <div\n            class=\"form-range\"\n            style={{\n              \"--min\": this.min,\n              \"--max\": this.max,\n              \"--value\": value,\n              \"--background-color\": this.disabled\n                ? \"var(--road-surface-disabled)\"\n                : \"initial\",\n            }}\n          >\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              disabled={this.disabled}\n            />\n            <label class=\"form-range-label\">Valeur</label>\n            <div class=\"form-range-progress\"></div>\n          </div>\n          {this.showTick && (\n            <road-icon\n              icon={navigationAddMoreSolid}\n              class=\"ml-8\"\n              size=\"sm\"\n            ></road-icon>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n\nlet rangeIds = 0;\n"],"mappings":"iGAAA,MAAMA,EAAW,0tG,MCmCJC,EAAK,M,uGA+ERC,KAAAC,QAAWC,IACjB,MAAMC,EAAQD,EAAGE,OACjB,GAAID,EAAO,CACTH,KAAKK,MAAQF,EAAME,OAAS,E,CAE9B,GAAIL,KAAKK,QAAU,MAAQL,KAAKK,QAAUC,UAAW,CACnDN,KAAKO,GAAGC,MAAMC,YAAY,UAAW,GAAGT,KAAKK,Q,gBA/EvB,cAAcK,M,WAKkB,G,yEAqB7B,M,cAKD,M,gBAKE,M,cAKF,K,CAMlB,YAAAC,GACRX,KAAKY,WAAWC,KAAK,CACnBR,MAAOL,KAAKK,OAAS,KAAOL,KAAKK,MAAQL,KAAKK,MAAMS,aAEtDd,KAAKe,WAAWF,KAAK,CACnBR,MAAOL,KAAKK,OAAS,KAAOL,KAAKK,MAAQL,KAAKK,MAAMS,Y,CAehD,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,GAGE,MAAMC,EAAQvB,KAAKO,GAAGiB,cAAc,eACpC,MAAMrB,EAAQH,KAAKO,GAAGiB,cACpB,+BAEF,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,EAI1B,MAAAI,GACE,MAAM9B,EAAQL,KAAKgB,WACnB,MAAMoB,EAAWpC,KAAKqC,aAAe/B,UAAY,YAAc,GAE/D,OACEgC,EAACC,EAAI,CAACC,SAAS,IAAIC,MAAO,CAAEC,SAAU1C,KAAK0C,WACzCJ,EAAA,OAAKG,MAAM,qCACRzC,KAAK2C,UACJL,EAAA,aACEM,KAAMC,EACNJ,MAAM,OACNK,KAAK,OAGTR,EAAA,OACEG,MAAM,aACNjC,MAAO,CACL,QAASR,KAAK+C,IACd,QAAS/C,KAAKgD,IACd,UAAW3C,EACX,qBAAsBL,KAAK0C,SACvB,+BACA,YAGL1C,KAAKiD,WAAaX,EAAA,eAClBtC,KAAKqC,YAAcC,EAAA,QAAMY,KAAK,aAC/BZ,EAAA,SACEa,KAAK,QACLV,MAAM,mBACNW,GAAIpD,KAAKqD,QACTN,IAAK/C,KAAK+C,IACVC,IAAKhD,KAAKgD,IACV3C,MAAOA,EACPJ,QAASD,KAAKC,QACdqD,KAAMlB,EAAQ,aACH,SACXI,SAAS,IACTE,SAAU1C,KAAK0C,WAEjBJ,EAAA,SAAOG,MAAM,oBAAkB,UAC/BH,EAAA,OAAKG,MAAM,yBAEZzC,KAAK2C,UACJL,EAAA,aACEM,KAAMW,EACNd,MAAM,OACNK,KAAK,Q,gFASnB,IAAIpC,EAAW,E"}