@roadtrip/components 3.32.1 → 3.32.3

package/dist/roadtrip/{p-f9c66715.entry.js.map → p-db243855.entry.js.map}

@@ -1 +1 @@
-{"version":3,"names":["rangeCss","RoadRangeStyle0","Range","constructor","hostRef","this","rangeId","rangeIds","value","showValue","showTick","showLabels","disabled","onInput","ev","input","target","undefined","el","style","setProperty","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","h","Host","key","tabindex","class","icon","navigationAddLessSolid","size","min","max","name","type","id","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,0tGACjB,MAAAC,EAAeD,E,MCkCFE,EAAK,MALlB,WAAAC,CAAAC,G,wFAWUC,KAAAC,QAAkB,cAAcC,MAKfF,KAAAG,MAAiC,GAqBlDH,KAAAI,UAAqB,MAKrBJ,KAAAK,SAAoB,MAKpBL,KAAAM,WAAsB,MAKtBN,KAAAO,SAAoB,MAgCpBP,KAAAQ,QAAWC,IACjB,MAAMC,EAAQD,EAAGE,OACjB,GAAID,EAAO,CACTV,KAAKG,MAAQO,EAAMP,OAAS,E,CAE9B,GAAIH,KAAKG,QAAU,MAAQH,KAAKG,QAAUS,UAAW,CACnDZ,KAAKa,GAAGC,MAAMC,YAAY,UAAW,GAAGf,KAAKG,Q,GAhCvC,YAAAa,GACRhB,KAAKiB,WAAWC,KAAK,CACnBf,MAAOH,KAAKG,OAAS,KAAOH,KAAKG,MAAQH,KAAKG,MAAMgB,aAEtDnB,KAAKoB,WAAWF,KAAK,CACnBf,MAAOH,KAAKG,OAAS,KAAOH,KAAKG,MAAQH,KAAKG,MAAMgB,Y,CAehD,QAAAE,GACN,cAAcrB,KAAKG,QAAU,SACzBH,KAAKG,MAAMgB,YACVnB,KAAKG,OAAS,IAAIgB,U,CAczB,WAAAG,GACEtB,KAAKa,GAAGU,UAAUC,IAAI,gB,CAIxB,UAAAC,GACEzB,KAAKa,GAAGU,UAAUG,OAAO,gB,CAG3B,gBAAAC,GAGE,MAAMC,EAAQ5B,KAAKa,GAAGgB,cAAc,eACpC,MAAMnB,EAAQV,KAAKa,GAAGgB,cACpB,+BAEF,GAAID,EAAO,CACTA,EAAMd,MAAMgB,KAAO,gBACnBF,EAAMd,MAAMiB,OAAS,IACrBH,EAAMd,MAAMkB,OAAS,MACrBJ,EAAMd,MAAMmB,KAAO,IACnBL,EAAMd,MAAMoB,OAAS,OACrBN,EAAMd,MAAMqB,SAAW,SACvBP,EAAMd,MAAMsB,QAAU,IACtBR,EAAMd,MAAMuB,SAAW,WACvBT,EAAMd,MAAMwB,IAAM,IAClBV,EAAMd,MAAMyB,MAAQ,MAEpB7B,EAAMI,MAAMsB,QAAU,U,EAI1B,MAAAI,GACE,MAAMrC,EAAQH,KAAKqB,WACnB,MAAMoB,EAAWzC,KAAKM,aAAeM,UAAY,YAAc,GAE/D,OACE8B,EAACC,EAAI,CAAAC,IAAA,2CAACC,SAAS,IAAIC,MAAO,CAAEvC,SAAUP,KAAKO,WACzCmC,EAAA,OAAAE,IAAA,2CAAKE,MAAM,qCACR9C,KAAKK,UACJqC,EAAA,aAAAE,IAAA,2CACEG,KAAMC,EACNF,MAAM,OACNG,KAAK,OAGTP,EAAA,OAAAE,IAAA,2CACEE,MAAM,aACNhC,MAAO,CACL,QAASd,KAAKkD,IACd,QAASlD,KAAKmD,IACd,UAAWhD,EACX,qBAAsBH,KAAKO,SACvB,+BACA,YAGLP,KAAKI,WAAasC,EAAA,UAAAE,IAAA,6CAClB5C,KAAKM,YAAcoC,EAAA,QAAAE,IAAA,2CAAMQ,KAAK,aAC/BV,EAAA,SAAAE,IAAA,2CACES,KAAK,QACLP,MAAM,mBACNQ,GAAItD,KAAKC,QACTiD,IAAKlD,KAAKkD,IACVC,IAAKnD,KAAKmD,IACVhD,MAAOA,EACPK,QAASR,KAAKQ,QACd+C,KAAMd,EAAQ,aACH,SACXI,SAAS,IACTtC,SAAUP,KAAKO,WAEjBmC,EAAA,SAAAE,IAAA,2CAAOE,MAAM,oBAAkB,UAC/BJ,EAAA,OAAAE,IAAA,2CAAKE,MAAM,yBAEZ9C,KAAKK,UACJqC,EAAA,aAAAE,IAAA,2CACEG,KAAMS,EACNV,MAAM,OACNG,KAAK,Q,gFASnB,IAAI/C,EAAW,E","ignoreList":[]}
+{"version":3,"names":["rangeCss","RoadRangeStyle0","Range","constructor","hostRef","this","rangeId","rangeIds","value","showValue","showTick","showLabels","disabled","onInput","ev","input","target","undefined","el","style","setProperty","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","h","Host","key","tabindex","class","icon","navigationAddLessSolid","size","min","max","name","type","id","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":"sGAAA,MAAMA,EAAW,0tGACjB,MAAAC,EAAeD,E,MCkCFE,EAAK,MALlB,WAAAC,CAAAC,G,wFAWUC,KAAAC,QAAkB,cAAcC,MAKfF,KAAAG,MAAiC,GAqBlDH,KAAAI,UAAqB,MAKrBJ,KAAAK,SAAoB,MAKpBL,KAAAM,WAAsB,MAKtBN,KAAAO,SAAoB,MAgCpBP,KAAAQ,QAAWC,IACjB,MAAMC,EAAQD,EAAGE,OACjB,GAAID,EAAO,CACTV,KAAKG,MAAQO,EAAMP,OAAS,E,CAE9B,GAAIH,KAAKG,QAAU,MAAQH,KAAKG,QAAUS,UAAW,CACnDZ,KAAKa,GAAGC,MAAMC,YAAY,UAAW,GAAGf,KAAKG,Q,GAhCvC,YAAAa,GACRhB,KAAKiB,WAAWC,KAAK,CACnBf,MAAOH,KAAKG,OAAS,KAAOH,KAAKG,MAAQH,KAAKG,MAAMgB,aAEtDnB,KAAKoB,WAAWF,KAAK,CACnBf,MAAOH,KAAKG,OAAS,KAAOH,KAAKG,MAAQH,KAAKG,MAAMgB,Y,CAehD,QAAAE,GACN,cAAcrB,KAAKG,QAAU,SACzBH,KAAKG,MAAMgB,YACVnB,KAAKG,OAAS,IAAIgB,U,CAczB,WAAAG,GACEtB,KAAKa,GAAGU,UAAUC,IAAI,gB,CAIxB,UAAAC,GACEzB,KAAKa,GAAGU,UAAUG,OAAO,gB,CAG3B,gBAAAC,GAGE,MAAMC,EAAQ5B,KAAKa,GAAGgB,cAAc,eACpC,MAAMnB,EAAQV,KAAKa,GAAGgB,cACpB,+BAEF,GAAID,EAAO,CACTA,EAAMd,MAAMgB,KAAO,gBACnBF,EAAMd,MAAMiB,OAAS,IACrBH,EAAMd,MAAMkB,OAAS,MACrBJ,EAAMd,MAAMmB,KAAO,IACnBL,EAAMd,MAAMoB,OAAS,OACrBN,EAAMd,MAAMqB,SAAW,SACvBP,EAAMd,MAAMsB,QAAU,IACtBR,EAAMd,MAAMuB,SAAW,WACvBT,EAAMd,MAAMwB,IAAM,IAClBV,EAAMd,MAAMyB,MAAQ,MAEpB7B,EAAMI,MAAMsB,QAAU,U,EAI1B,MAAAI,GACE,MAAMrC,EAAQH,KAAKqB,WACnB,MAAMoB,EAAWzC,KAAKM,aAAeM,UAAY,YAAc,GAE/D,OACE8B,EAACC,EAAI,CAAAC,IAAA,2CAACC,SAAS,IAAIC,MAAO,CAAEvC,SAAUP,KAAKO,WACzCmC,EAAA,OAAAE,IAAA,2CAAKE,MAAM,qCACR9C,KAAKK,UACJqC,EAAA,aAAAE,IAAA,2CACEG,KAAMC,EACNF,MAAM,OACNG,KAAK,OAGTP,EAAA,OAAAE,IAAA,2CACEE,MAAM,aACNhC,MAAO,CACL,QAASd,KAAKkD,IACd,QAASlD,KAAKmD,IACd,UAAWhD,EACX,qBAAsBH,KAAKO,SACvB,+BACA,YAGLP,KAAKI,WAAasC,EAAA,UAAAE,IAAA,6CAClB5C,KAAKM,YAAcoC,EAAA,QAAAE,IAAA,2CAAMQ,KAAK,aAC/BV,EAAA,SAAAE,IAAA,2CACES,KAAK,QACLP,MAAM,mBACNQ,GAAItD,KAAKC,QACTiD,IAAKlD,KAAKkD,IACVC,IAAKnD,KAAKmD,IACVhD,MAAOA,EACPK,QAASR,KAAKQ,QACd+C,KAAMd,EAAQ,aACH,SACXI,SAAS,IACTtC,SAAUP,KAAKO,WAEjBmC,EAAA,SAAAE,IAAA,2CAAOE,MAAM,oBAAkB,UAC/BJ,EAAA,OAAAE,IAAA,2CAAKE,MAAM,yBAEZ9C,KAAKK,UACJqC,EAAA,aAAAE,IAAA,2CACEG,KAAMS,EACNV,MAAM,OACNG,KAAK,Q,gFASnB,IAAI/C,EAAW,E","ignoreList":[]}

package/dist/roadtrip/{p-c1fc3902.entry.js → p-e0421465.entry.js}

@@ -1,2 +1,2 @@
-import{r as t,c as e,h as i,H as a}from"./p-763109be.js";import"./p-453fa8b4.js";const n=":host{--z-index:3;position:fixed;bottom:0;left:0;z-index:var(--z-index);box-sizing:border-box;display:flex;align-items:center;width:100%;height:5.125rem;padding-left:0;margin:0;text-align:center;-webkit-user-select:none;user-select:none;background-color:var(--road-surface);border-top:1px solid var(--road-outline-weak)}@media (max-width: 576px){:host{overflow-x:auto}}@media (min-width: 1200px){:host{flex-direction:column;align-items:flex-start;width:260px;height:100%;padding:var(--road-spacing-05);text-align:left;border-top:0;border-right:1px solid var(--road-outline-weak);justify-content:space-between;height:100%}}::slotted(.drawer-button-save){position:absolute;bottom:0;width:100%}.button-native{position:relative;display:flex;flex-flow:row nowrap;flex-shrink:0;align-items:center;justify-content:center;width:100%;height:100%;padding:var(--padding-end) var(--padding-end) var(--padding-start) 0;margin:0;font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;color:inherit;text-align:inherit;text-decoration:none;text-indent:inherit;text-overflow:inherit;text-transform:inherit;letter-spacing:inherit;white-space:inherit;cursor:pointer;background:transparent;border:none;-webkit-tap-highlight-color:rgba(0, 0, 0, 0)}@media (min-width: 1200px){:host(.compact){max-width:5.5rem}.compact ::slotted(.compact-container){max-width:3.5rem}.compact ::slotted(.compact-container) .compact-logo{justify-content:center}}";const o=n;const r=class{constructor(i){t(this,i);this.roadnavbarchanged=e(this,"roadnavbarchanged",7);this.roadNavbarChanged=e(this,"roadNavbarChanged",7);this.compact=false}selectedTabChanged(){if(this.selectedTab!==undefined){this.roadnavbarchanged.emit({tab:this.selectedTab});this.roadNavbarChanged.emit({tab:this.selectedTab})}}onNavbarChanged(t){this.selectedTab=t.detail.tab}componentWillLoad(){this.selectedTabChanged()}render(){const t=this.compact?"compact":"";return i(a,{key:"e4fe4a407edcf036a5f3da534cc88eb4b863ab71",role:"menubar",class:`${t}`},i("slot",{key:"ef7df2d2775c533592267b1b420e522e23836d7e"}))}static get watchers(){return{selectedTab:["selectedTabChanged"]}}};r.style=o;export{r as road_navbar_v2};
-//# sourceMappingURL=p-c1fc3902.entry.js.map
+import{r as t,c as e,h as i,H as a}from"./p-d7aae05d.js";import"./p-453fa8b4.js";const n=":host{--z-index:3;position:fixed;bottom:0;left:0;z-index:var(--z-index);box-sizing:border-box;display:flex;align-items:center;width:100%;height:5.125rem;padding-left:0;margin:0;text-align:center;-webkit-user-select:none;user-select:none;background-color:var(--road-surface);border-top:1px solid var(--road-outline-weak)}@media (max-width: 576px){:host{overflow-x:auto}}@media (min-width: 1200px){:host{flex-direction:column;align-items:flex-start;width:260px;height:100%;padding:var(--road-spacing-05);text-align:left;border-top:0;border-right:1px solid var(--road-outline-weak);justify-content:space-between;height:100%}}::slotted(.drawer-button-save){position:absolute;bottom:0;width:100%}.button-native{position:relative;display:flex;flex-flow:row nowrap;flex-shrink:0;align-items:center;justify-content:center;width:100%;height:100%;padding:var(--padding-end) var(--padding-end) var(--padding-start) 0;margin:0;font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;color:inherit;text-align:inherit;text-decoration:none;text-indent:inherit;text-overflow:inherit;text-transform:inherit;letter-spacing:inherit;white-space:inherit;cursor:pointer;background:transparent;border:none;-webkit-tap-highlight-color:rgba(0, 0, 0, 0)}@media (min-width: 1200px){:host(.compact){max-width:5.5rem}.compact ::slotted(.compact-container){max-width:3.5rem}.compact ::slotted(.compact-container) .compact-logo{justify-content:center}}";const o=n;const r=class{constructor(i){t(this,i);this.roadnavbarchanged=e(this,"roadnavbarchanged",7);this.roadNavbarChanged=e(this,"roadNavbarChanged",7);this.compact=false}selectedTabChanged(){if(this.selectedTab!==undefined){this.roadnavbarchanged.emit({tab:this.selectedTab});this.roadNavbarChanged.emit({tab:this.selectedTab})}}onNavbarChanged(t){this.selectedTab=t.detail.tab}componentWillLoad(){this.selectedTabChanged()}render(){const t=this.compact?"compact":"";return i(a,{key:"e4fe4a407edcf036a5f3da534cc88eb4b863ab71",role:"menubar",class:`${t}`},i("slot",{key:"ef7df2d2775c533592267b1b420e522e23836d7e"}))}static get watchers(){return{selectedTab:["selectedTabChanged"]}}};r.style=o;export{r as road_navbar_v2};
+//# sourceMappingURL=p-e0421465.entry.js.map