@roadtrip/components 3.23.1 → 3.24.0

package/dist/collection/components/asset/validate.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"validate.js","sourceRoot":"","sources":["../../../src/components/asset/validate.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAEhC,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,UAAkB,EAAE,EAAE;EACpD,MAAM,GAAG,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;EAC1C,GAAG,CAAC,SAAS,GAAG,UAAU,CAAC;EAE3B,oDAAoD;EACpD,KAAK,IAAI,CAAC,GAAG,GAAG,CAAC,UAAU,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE,EAAE;IACnD,IAAI,GAAG,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,WAAW,EAAE,KAAK,KAAK,EAAE;MACtD,GAAG,CAAC,WAAW,CAAC,GAAG,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC;KACpC;GACF;EAED,gCAAgC;EAChC,MAAM,MAAM,GAAG,GAAG,CAAC,iBAAiB,CAAC;EACrC,IAAI,MAAM,IAAI,MAAM,CAAC,QAAQ,CAAC,WAAW,EAAE,KAAK,KAAK,EAAE;IACrD,MAAM,QAAQ,GAAG,MAAM,CAAC,YAAY,CAAC,OAAO,CAAC,IAAI,EAAE,CAAC;IACpD,MAAM,CAAC,YAAY,CAAC,OAAO,EAAE,CAAC,QAAQ,GAAG,aAAa,CAAC,CAAC,IAAI,EAAE,CAAC,CAAC;IAEhE,8BAA8B;IAC9B,6CAA6C;IAC7C,uBAAuB;IACvB,IAAI,OAAO,CAAC,MAAa,CAAC,EAAE;MAC1B,OAAO,GAAG,CAAC,SAAS,CAAC;KACtB;GACF;EACD,OAAO,EAAE,CAAC;AACZ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG,CAAC,GAAgB,EAAE,EAAE;EAC1C,IAAI,GAAG,CAAC,QAAQ,KAAK,CAAC,EAAE;IACtB,IAAI,GAAG,CAAC,QAAQ,CAAC,WAAW,EAAE,KAAK,QAAQ,EAAE;MAC3C,OAAO,KAAK,CAAC;KACd;IAED,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,GAAG,CAAC,UAAU,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;MAC9C,MAAM,GAAG,GAAG,GAAG,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC;MACpC,IAAI,KAAK,CAAC,GAAG,CAAC,IAAI,GAAG,CAAC,WAAW,EAAE,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE;QACvD,OAAO,KAAK,CAAC;OACd;KACF;IAED,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,GAAG,CAAC,UAAU,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;MAC9C,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,UAAU,CAAC,CAAC,CAAQ,CAAC,EAAE;QACtC,OAAO,KAAK,CAAC;OACd;KACF;GACF;EACD,OAAO,IAAI,CAAC;AACd,CAAC,CAAC","sourcesContent":["import { isStr } from './utils';\n\nexport const validateContent = (svgContent: string) => {\n  const div = document.createElement('div');\n  div.innerHTML = svgContent;\n\n  // setup this way to ensure it works on our buddy IE\n  for (let i = div.childNodes.length - 1; i >= 0; i--) {\n    if (div.childNodes[i].nodeName.toLowerCase() !== 'svg') {\n      div.removeChild(div.childNodes[i]);\n    }\n  }\n\n  // must only have 1 root element\n  const svgElm = div.firstElementChild;\n  if (svgElm && svgElm.nodeName.toLowerCase() === 'svg') {\n    const svgClass = svgElm.getAttribute('class') || '';\n    svgElm.setAttribute('class', (svgClass + ' s-ion-icon').trim());\n\n    // root element must be an svg\n    // lets double check we've got valid elements\n    // do not allow scripts\n    if (isValid(svgElm as any)) {\n      return div.innerHTML;\n    }\n  }\n  return '';\n};\n\nexport const isValid = (elm: HTMLElement) => {\n  if (elm.nodeType === 1) {\n    if (elm.nodeName.toLowerCase() === 'script') {\n      return false;\n    }\n\n    for (let i = 0; i < elm.attributes.length; i++) {\n      const val = elm.attributes[i].value;\n      if (isStr(val) && val.toLowerCase().indexOf('on') === 0) {\n        return false;\n      }\n    }\n\n    for (let i = 0; i < elm.childNodes.length; i++) {\n      if (!isValid(elm.childNodes[i] as any)) {\n        return false;\n      }\n    }\n  }\n  return true;\n};\n"]}

package/dist/collection/components/button/button.css

@@ -65,9 +65,11 @@
 }
 
 :host(.focus-visible) {
-  outline: 0;
+  text-decoration: underline;
+  outline: auto;
 }
 
+
 /**
  * Native button
  */
@@ -129,6 +131,7 @@
 :host(.btn-primary:not([disabled]):hover),
 :host(.btn-primary:not([disabled]).focus-visible) {
   background: var(--road-button-primary-variant);
+  outline: 0;
 }
 
 /**
@@ -217,7 +220,7 @@
 
 :host(.btn-outline-primary) {
   color: var(--road-button-primary);
-  border-color: var(--road-button-primary);
+  border-color: var(--road-button-tertiary-outline);
 }
 
 :host(.btn-outline-primary) ::slotted(road-icon) {

package/dist/collection/components/counter/counter.css

@@ -26,11 +26,6 @@ road-input {
   --margin-bottom: 0;
 }
 
-.test{
-display: none;
-}
-
-
 /* BUTTONS
  -------------------- */
 

package/dist/collection/components/counter/counter.js

@@ -93,7 +93,17 @@ export class Counter {
     this.onValueChange(this.value);
   }
   componentDidLoad() {
-    // Cacher le label pour accessibilité
+    const buttons = this.el.querySelectorAll('road-button');
+    // Ajouter les événements pour chaque road-button
+    buttons.forEach((btn) => {
+      btn.addEventListener('touchstart', () => {
+        btn.style.backgroundColor = 'var(--road-button-tertiary-variant)'; // Appliquer le style hover
+      });
+      btn.addEventListener('touchend', () => {
+        btn.style.backgroundColor = 'var(--road-surface)'; // Supprimer le style hover après touchend
+      });
+    });
+    // Accessibilité : Cacher le label
     const label = this.el.querySelector('.form-label');
     const input = this.el.querySelector('.form-control.sc-road-input');
     if (label) {

package/dist/collection/components/counter/counter.js.map

@@ -1 +1 @@
-{"version":3,"file":"counter.js","sourceRoot":"","sources":["../../../src/components/counter/counter.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Prop, Element, Event, EventEmitter, State, Watch } from '@stencil/core';\n\n@Component({\n  tag: 'road-counter',\n  styleUrl: 'counter.css',\n  scoped: true,\n})\nexport class Counter {\n\n  @Element() el!: HTMLRoadCounterElement;\n\n  iconCounterLess!: HTMLRoadIconElement;\n\n  inputElement!: HTMLRoadInputElement;\n\n  @State() leftIconClasses: string = \"\";\n\n  @State() rightIconClasses: string = \"\";\n\n  @State() isDustbinVisible: boolean = false;\n\n  /**\n   * The id of counter\n   */\n  @Prop() inputId: string = `road-counter-${counterIds++}`;\n\n  /**\n   * The minimum value, which must not be greater than its maximum (max attribute) value.\n   */\n  @Prop() min: number = 0;\n\n  /**\n   * The maximum value, which must not be less than its minimum (min attribute) value.\n   */\n  @Prop() max?: number;\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   * The value of the counter.\n   */\n  @Prop() value: number = 1;\n\n  /**\n   * The size of the counter.\n   */\n  @Prop() size?: 'sm' | 'md' | 'lg' = \"lg\";\n\n  /**\n  * Set to `true` to add the dustbin icon if the value is equal to the min.\n  */\n  @Prop() dustbin: boolean = false;\n\n    /**\n  * Set to `true` to not modify the input field\n  */\n    @Prop() readonly: boolean = false;\n\n  /**\n   * Emitted when the plus button is clicked\n   */\n  @Event() roadIncrease!: EventEmitter<{\n    value: number | undefined | null;\n  }>;\n\n  /**\n   * Emitted when the minus button is clicked\n   */\n  @Event() roadDecrease!: EventEmitter<{\n    value: number | undefined | null;\n  }>;\n\n  /**\n   * Emitted when the minus button is clicked\n   */\n  @Event() roadChange!: EventEmitter<{\n    value: number | undefined | null;\n  }>;\n\n  /**\n   * Emitted when the dustbin is clicked\n  */\n  @Event() roadDustbinClick!: EventEmitter<void>;\n\n  @Watch('value')\n  private onValueChange(valueInput: number) {\n    this.setIsDustbinVisible(valueInput);\n    this.setIconsClasses(valueInput);\n  }\n\n  private setIconsClasses(valueInput?: number) {\n    valueInput = valueInput ?? parseInt(this.inputElement.querySelector('input')!.value as string);\n\n    this.leftIconClasses = valueInput <= this.min && !this.dustbin ? \"disabled\" : \"\";\n    this.rightIconClasses = this.max && valueInput >= this.max ? \"disabled\" : \"\";\n  }\n\n  private setIsDustbinVisible = (valueInput: number) => {\n    if (valueInput > this.min) {\n      this.isDustbinVisible = false;\n    } else if (this.dustbin) {\n      this.isDustbinVisible = true;\n    }\n    else {\n      this.isDustbinVisible = false;\n    }\n  }\n\n  private increase = () => {\n    (this.inputElement as unknown as HTMLInputElement).querySelector('input')!.stepUp();\n    let valueInput = parseInt(this.inputElement.querySelector('input')!.value as string);\n    if(!valueInput) {\n      valueInput = this.min\n    };\n    this.onValueChange(valueInput);\n    this.roadIncrease.emit({ value: valueInput });\n  };\n\n  private decrease = () => {\n    if(this.isDustbinVisible){\n      this.roadDustbinClick.emit();\n      return;\n    }\n\n    (this.inputElement as unknown as HTMLInputElement).querySelector('input')!.stepDown();\n\n    let valueInput = parseInt(this.inputElement.querySelector('input')!.value as string);\n    if(!valueInput) {\n      valueInput = this.min\n    };\n    this.onValueChange(valueInput);\n\n    this.roadDecrease.emit({ value: valueInput });\n  };\n\n  private checkValue = (ev: Event) => {\n    const input = ev.target as HTMLInputElement;\n    const value = input.value && parseInt(input.value)\n\n    if (value == null || value === \"\") return;\n\n    if (value < this.min) {\n      input.value = this.min.toString()\n    }\n    else if (this.max && value > this.max) {\n      input.value = this.max.toString()\n    }\n\n    this.onValueChange(parseInt(input.value));\n  }\n\n  private onRoadChange = (ev: Event) => {\n    ev.stopPropagation();\n    const input = ev.target as HTMLInputElement;\n    const value = input.value && parseInt(input.value)\n    if (value !== null && value !== \"\") {\n      if (value < this.min) {\n        this.roadChange.emit({ value: this.min });\n      }\n      else if (this.max && value > this.max) {\n        this.roadChange.emit({ value: this.max });\n      }\n      else {\n        this.roadChange.emit({ value: parseInt(input.value) });\n      }\n    }\n    else {\n      this.roadChange.emit({ value: null });\n    }\n  };\n\n  componentWillLoad() {\n    this.onValueChange(this.value);\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\n    const dataCi = this.isDustbinVisible ? \"road-dustbin\" : \"\";\n\n    return (\n      <road-input-group\n        class={this.size && `counter-${this.size}`}\n      >\n        <road-button\n          slot=\"prepend\"\n          size={this.size}\n          onClick={this.decrease}\n          class={this.leftIconClasses}\n          data-cy=\"road-decrease\"\n        >\n          <road-icon\n            name={this.isDustbinVisible ? \"delete-forever\" : \"navigation-add-less\"}\n            ref={(el) => this.iconCounterLess = el as HTMLRoadIconElement}\n            size={this.size}\n            data-cy={dataCi}\n            role=\"button\"\n          />\n        </road-button>\n        <road-input\n          ref={(el) => this.inputElement = el as HTMLRoadInputElement}\n          type=\"number\"\n          min={this.min.toString()}\n          max={(this.max && this.max.toString()) as string}\n          step={this.step}\n          value={this.value}\n          onRoadChange={this.onRoadChange}\n          onKeyUp={this.checkValue}\n          data-cy=\"road-input-counter\"\n          readonly={this.readonly}\n          label=\"Quantité\"\n        />\n        <road-button\n          slot=\"append\"\n          size={this.size}\n          onClick={this.increase}\n          class={this.rightIconClasses}\n          data-cy=\"road-increase\"\n        >\n          <road-icon\n            name=\"navigation-add-more\"\n            size={this.size}\n            role=\"button\"\n          />\n        </road-button>\n      </road-input-group>\n    );\n  }\n}\n\nlet counterIds = 0;\n"]}
+{"version":3,"file":"counter.js","sourceRoot":"","sources":["../../../src/components/counter/counter.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,EAAgB,KAAK,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAO/F,MAAM,OAAO,OAAO;;IA2FV,wBAAmB,GAAG,CAAC,UAAkB,EAAE,EAAE;MACnD,IAAI,UAAU,GAAG,IAAI,CAAC,GAAG,EAAE;QACzB,IAAI,CAAC,gBAAgB,GAAG,KAAK,CAAC;OAC/B;WAAM,IAAI,IAAI,CAAC,OAAO,EAAE;QACvB,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC;OAC9B;WACI;QACH,IAAI,CAAC,gBAAgB,GAAG,KAAK,CAAC;OAC/B;IACH,CAAC,CAAA;IAEO,aAAQ,GAAG,GAAG,EAAE;MACrB,IAAI,CAAC,YAA4C,CAAC,aAAa,CAAC,OAAO,CAAE,CAAC,MAAM,EAAE,CAAC;MACpF,IAAI,UAAU,GAAG,QAAQ,CAAC,IAAI,CAAC,YAAY,CAAC,aAAa,CAAC,OAAO,CAAE,CAAC,KAAe,CAAC,CAAC;MACrF,IAAG,CAAC,UAAU,EAAE;QACd,UAAU,GAAG,IAAI,CAAC,GAAG,CAAA;OACtB;MAAA,CAAC;MACF,IAAI,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC;MAC/B,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,UAAU,EAAE,CAAC,CAAC;IAChD,CAAC,CAAC;IAEM,aAAQ,GAAG,GAAG,EAAE;MACtB,IAAG,IAAI,CAAC,gBAAgB,EAAC;QACvB,IAAI,CAAC,gBAAgB,CAAC,IAAI,EAAE,CAAC;QAC7B,OAAO;OACR;MAEA,IAAI,CAAC,YAA4C,CAAC,aAAa,CAAC,OAAO,CAAE,CAAC,QAAQ,EAAE,CAAC;MAEtF,IAAI,UAAU,GAAG,QAAQ,CAAC,IAAI,CAAC,YAAY,CAAC,aAAa,CAAC,OAAO,CAAE,CAAC,KAAe,CAAC,CAAC;MACrF,IAAG,CAAC,UAAU,EAAE;QACd,UAAU,GAAG,IAAI,CAAC,GAAG,CAAA;OACtB;MAAA,CAAC;MACF,IAAI,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC;MAE/B,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,UAAU,EAAE,CAAC,CAAC;IAChD,CAAC,CAAC;IAEM,eAAU,GAAG,CAAC,EAAS,EAAE,EAAE;MACjC,MAAM,KAAK,GAAG,EAAE,CAAC,MAA0B,CAAC;MAC5C,MAAM,KAAK,GAAG,KAAK,CAAC,KAAK,IAAI,QAAQ,CAAC,KAAK,CAAC,KAAK,CAAC,CAAA;MAElD,IAAI,KAAK,IAAI,IAAI,IAAI,KAAK,KAAK,EAAE;QAAE,OAAO;MAE1C,IAAI,KAAK,GAAG,IAAI,CAAC,GAAG,EAAE;QACpB,KAAK,CAAC,KAAK,GAAG,IAAI,CAAC,GAAG,CAAC,QAAQ,EAAE,CAAA;OAClC;WACI,IAAI,IAAI,CAAC,GAAG,IAAI,KAAK,GAAG,IAAI,CAAC,GAAG,EAAE;QACrC,KAAK,CAAC,KAAK,GAAG,IAAI,CAAC,GAAG,CAAC,QAAQ,EAAE,CAAA;OAClC;MAED,IAAI,CAAC,aAAa,CAAC,QAAQ,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC;IAC5C,CAAC,CAAA;IAEO,iBAAY,GAAG,CAAC,EAAS,EAAE,EAAE;MACnC,EAAE,CAAC,eAAe,EAAE,CAAC;MACrB,MAAM,KAAK,GAAG,EAAE,CAAC,MAA0B,CAAC;MAC5C,MAAM,KAAK,GAAG,KAAK,CAAC,KAAK,IAAI,QAAQ,CAAC,KAAK,CAAC,KAAK,CAAC,CAAA;MAClD,IAAI,KAAK,KAAK,IAAI,IAAI,KAAK,KAAK,EAAE,EAAE;QAClC,IAAI,KAAK,GAAG,IAAI,CAAC,GAAG,EAAE;UACpB,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,IAAI,CAAC,GAAG,EAAE,CAAC,CAAC;SAC3C;aACI,IAAI,IAAI,CAAC,GAAG,IAAI,KAAK,GAAG,IAAI,CAAC,GAAG,EAAE;UACrC,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,IAAI,CAAC,GAAG,EAAE,CAAC,CAAC;SAC3C;aACI;UACH,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,QAAQ,CAAC,KAAK,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC;SACxD;OACF;WACI;QACH,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,CAAC,CAAC;OACvC;IACH,CAAC,CAAC;2BA5JiC,EAAE;4BACD,EAAE;4BACD,KAAK;mBAKhB,gBAAgB,UAAU,EAAE,EAAE;eAKlC,CAAC;;;iBAgBC,CAAC;gBAKW,IAAI;mBAKb,KAAK;oBAKJ,KAAK;;EA6BzB,aAAa,CAAC,UAAkB;IACtC,IAAI,CAAC,mBAAmB,CAAC,UAAU,CAAC,CAAC;IACrC,IAAI,CAAC,eAAe,CAAC,UAAU,CAAC,CAAC;EACnC,CAAC;EAEO,eAAe,CAAC,UAAmB;IACzC,UAAU,GAAG,UAAU,aAAV,UAAU,cAAV,UAAU,GAAI,QAAQ,CAAC,IAAI,CAAC,YAAY,CAAC,aAAa,CAAC,OAAO,CAAE,CAAC,KAAe,CAAC,CAAC;IAE/F,IAAI,CAAC,eAAe,GAAG,UAAU,IAAI,IAAI,CAAC,GAAG,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,CAAC;IACjF,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC,GAAG,IAAI,UAAU,IAAI,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,CAAC;EAC/E,CAAC;EA4ED,iBAAiB;IACf,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;EACjC,CAAC;EAED,gBAAgB;IACd,MAAM,OAAO,GAAG,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,aAAa,CAAsC,CAAC;IAE7F,iDAAiD;IACjD,OAAO,CAAC,OAAO,CAAC,CAAC,GAAG,EAAE,EAAE;MACtB,GAAG,CAAC,gBAAgB,CAAC,YAAY,EAAE,GAAG,EAAE;QACtC,GAAG,CAAC,KAAK,CAAC,eAAe,GAAG,qCAAqC,CAAC,CAAC,2BAA2B;MAChG,CAAC,CAAC,CAAC;MAEH,GAAG,CAAC,gBAAgB,CAAC,UAAU,EAAE,GAAG,EAAE;QACpC,GAAG,CAAC,KAAK,CAAC,eAAe,GAAG,qBAAqB,CAAC,CAAC,0CAA0C;MAC/F,CAAC,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,kCAAkC;IAClC,MAAM,KAAK,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,aAAa,CAAgB,CAAC;IAClE,MAAM,KAAK,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,6BAA6B,CAAgB,CAAC;IAClF,IAAI,KAAK,EAAE;MACT,KAAK,CAAC,KAAK,CAAC,IAAI,GAAG,eAAe,CAAC;MACnC,KAAK,CAAC,KAAK,CAAC,MAAM,GAAG,GAAG,CAAC;MACzB,KAAK,CAAC,KAAK,CAAC,MAAM,GAAG,KAAK,CAAC;MAC3B,KAAK,CAAC,KAAK,CAAC,IAAI,GAAG,GAAG,CAAC;MACvB,KAAK,CAAC,KAAK,CAAC,MAAM,GAAG,MAAM,CAAC;MAC5B,KAAK,CAAC,KAAK,CAAC,QAAQ,GAAG,QAAQ,CAAC;MAChC,KAAK,CAAC,KAAK,CAAC,OAAO,GAAG,GAAG,CAAC;MAC1B,KAAK,CAAC,KAAK,CAAC,QAAQ,GAAG,UAAU,CAAC;MAClC,KAAK,CAAC,KAAK,CAAC,GAAG,GAAG,GAAG,CAAC;MACtB,KAAK,CAAC,KAAK,CAAC,KAAK,GAAG,KAAK,CAAC;MAE1B,KAAK,CAAC,KAAK,CAAC,OAAO,GAAG,UAAU,CAAC;KAElC;EACH,CAAC;EAED,MAAM;IAEJ,MAAM,MAAM,GAAG,IAAI,CAAC,gBAAgB,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,EAAE,CAAC;IAE3D,OAAO,CACL,wBACE,KAAK,EAAE,IAAI,CAAC,IAAI,IAAI,WAAW,IAAI,CAAC,IAAI,EAAE;MAE1C,mBACE,IAAI,EAAC,SAAS,EACd,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,OAAO,EAAE,IAAI,CAAC,QAAQ,EACtB,KAAK,EAAE,IAAI,CAAC,eAAe,aACnB,eAAe;QAEvB,iBACE,IAAI,EAAE,IAAI,CAAC,gBAAgB,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,qBAAqB,EACtE,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,IAAI,CAAC,eAAe,GAAG,EAAyB,EAC7D,IAAI,EAAE,IAAI,CAAC,IAAI,aACN,MAAM,EACf,IAAI,EAAC,QAAQ,GACb,CACU;MACd,kBACE,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,IAAI,CAAC,YAAY,GAAG,EAA0B,EAC3D,IAAI,EAAC,QAAQ,EACb,GAAG,EAAE,IAAI,CAAC,GAAG,CAAC,QAAQ,EAAE,EACxB,GAAG,EAAE,CAAC,IAAI,CAAC,GAAG,IAAI,IAAI,CAAC,GAAG,CAAC,QAAQ,EAAE,CAAW,EAChD,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,YAAY,EAAE,IAAI,CAAC,YAAY,EAC/B,OAAO,EAAE,IAAI,CAAC,UAAU,aAChB,oBAAoB,EAC5B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,KAAK,EAAC,eAAU,GAChB;MACF,mBACE,IAAI,EAAC,QAAQ,EACb,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,OAAO,EAAE,IAAI,CAAC,QAAQ,EACtB,KAAK,EAAE,IAAI,CAAC,gBAAgB,aACpB,eAAe;QAEvB,iBACE,IAAI,EAAC,qBAAqB,EAC1B,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,IAAI,EAAC,QAAQ,GACb,CACU,CACG,CACpB,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF;AAED,IAAI,UAAU,GAAG,CAAC,CAAC","sourcesContent":["import { Component, h, Prop, Element, Event, EventEmitter, State, Watch } from '@stencil/core';\n\n@Component({\n  tag: 'road-counter',\n  styleUrl: 'counter.css',\n  scoped: true,\n})\nexport class Counter {\n\n  @Element() el!: HTMLRoadCounterElement;\n\n  iconCounterLess!: HTMLRoadIconElement;\n  inputElement!: HTMLRoadInputElement;\n\n  @State() leftIconClasses: string = \"\";\n  @State() rightIconClasses: string = \"\";\n  @State() isDustbinVisible: boolean = false;\n\n  /**\n   * The id of counter\n   */\n  @Prop() inputId: string = `road-counter-${counterIds++}`;\n\n  /**\n   * The minimum value, which must not be greater than its maximum (max attribute) value.\n   */\n  @Prop() min: number = 0;\n\n  /**\n   * The maximum value, which must not be less than its minimum (min attribute) value.\n   */\n  @Prop() max?: number;\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   * The value of the counter.\n   */\n  @Prop() value: number = 1;\n\n  /**\n   * The size of the counter.\n   */\n  @Prop() size?: 'sm' | 'md' | 'lg' = \"lg\";\n\n  /**\n  * Set to `true` to add the dustbin icon if the value is equal to the min.\n  */\n  @Prop() dustbin: boolean = false;\n\n    /**\n  * Set to `true` to not modify the input field\n  */\n  @Prop() readonly: boolean = false;\n\n  /**\n   * Emitted when the plus button is clicked\n   */\n  @Event() roadIncrease!: EventEmitter<{\n    value: number | undefined | null;\n  }>;\n\n  /**\n   * Emitted when the minus button is clicked\n   */\n  @Event() roadDecrease!: EventEmitter<{\n    value: number | undefined | null;\n  }>;\n\n  /**\n   * Emitted when the minus button is clicked\n   */\n  @Event() roadChange!: EventEmitter<{\n    value: number | undefined | null;\n  }>;\n\n  /**\n   * Emitted when the dustbin is clicked\n  */\n  @Event() roadDustbinClick!: EventEmitter<void>;\n\n  @Watch('value')\n  private onValueChange(valueInput: number) {\n    this.setIsDustbinVisible(valueInput);\n    this.setIconsClasses(valueInput);\n  }\n\n  private setIconsClasses(valueInput?: number) {\n    valueInput = valueInput ?? parseInt(this.inputElement.querySelector('input')!.value as string);\n\n    this.leftIconClasses = valueInput <= this.min && !this.dustbin ? \"disabled\" : \"\";\n    this.rightIconClasses = this.max && valueInput >= this.max ? \"disabled\" : \"\";\n  }\n\n  private setIsDustbinVisible = (valueInput: number) => {\n    if (valueInput > this.min) {\n      this.isDustbinVisible = false;\n    } else if (this.dustbin) {\n      this.isDustbinVisible = true;\n    }\n    else {\n      this.isDustbinVisible = false;\n    }\n  }\n\n  private increase = () => {\n    (this.inputElement as unknown as HTMLInputElement).querySelector('input')!.stepUp();\n    let valueInput = parseInt(this.inputElement.querySelector('input')!.value as string);\n    if(!valueInput) {\n      valueInput = this.min\n    };\n    this.onValueChange(valueInput);\n    this.roadIncrease.emit({ value: valueInput });\n  };\n\n  private decrease = () => {\n    if(this.isDustbinVisible){\n      this.roadDustbinClick.emit();\n      return;\n    }\n\n    (this.inputElement as unknown as HTMLInputElement).querySelector('input')!.stepDown();\n\n    let valueInput = parseInt(this.inputElement.querySelector('input')!.value as string);\n    if(!valueInput) {\n      valueInput = this.min\n    };\n    this.onValueChange(valueInput);\n\n    this.roadDecrease.emit({ value: valueInput });\n  };\n\n  private checkValue = (ev: Event) => {\n    const input = ev.target as HTMLInputElement;\n    const value = input.value && parseInt(input.value)\n\n    if (value == null || value === \"\") return;\n\n    if (value < this.min) {\n      input.value = this.min.toString()\n    }\n    else if (this.max && value > this.max) {\n      input.value = this.max.toString()\n    }\n\n    this.onValueChange(parseInt(input.value));\n  }\n\n  private onRoadChange = (ev: Event) => {\n    ev.stopPropagation();\n    const input = ev.target as HTMLInputElement;\n    const value = input.value && parseInt(input.value)\n    if (value !== null && value !== \"\") {\n      if (value < this.min) {\n        this.roadChange.emit({ value: this.min });\n      }\n      else if (this.max && value > this.max) {\n        this.roadChange.emit({ value: this.max });\n      }\n      else {\n        this.roadChange.emit({ value: parseInt(input.value) });\n      }\n    }\n    else {\n      this.roadChange.emit({ value: null });\n    }\n  };\n\n  componentWillLoad() {\n    this.onValueChange(this.value);\n  }\n\n  componentDidLoad() {\n    const buttons = this.el.querySelectorAll('road-button') as NodeListOf<HTMLRoadButtonElement>;\n\n    // Ajouter les événements pour chaque road-button\n    buttons.forEach((btn) => {\n      btn.addEventListener('touchstart', () => {\n        btn.style.backgroundColor = 'var(--road-button-tertiary-variant)'; // Appliquer le style hover\n      });\n  \n      btn.addEventListener('touchend', () => {\n        btn.style.backgroundColor = 'var(--road-surface)'; // Supprimer le style hover après touchend\n      });\n    });\n\n    // Accessibilité : Cacher le label\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\n    const dataCi = this.isDustbinVisible ? \"road-dustbin\" : \"\";\n\n    return (\n      <road-input-group\n        class={this.size && `counter-${this.size}`}\n      >\n        <road-button\n          slot=\"prepend\"\n          size={this.size}\n          onClick={this.decrease}\n          class={this.leftIconClasses}\n          data-cy=\"road-decrease\"\n        >\n          <road-icon\n            name={this.isDustbinVisible ? \"delete-forever\" : \"navigation-add-less\"}\n            ref={(el) => this.iconCounterLess = el as HTMLRoadIconElement}\n            size={this.size}\n            data-cy={dataCi}\n            role=\"button\"\n          />\n        </road-button>\n        <road-input\n          ref={(el) => this.inputElement = el as HTMLRoadInputElement}\n          type=\"number\"\n          min={this.min.toString()}\n          max={(this.max && this.max.toString()) as string}\n          step={this.step}\n          value={this.value}\n          onRoadChange={this.onRoadChange}\n          onKeyUp={this.checkValue}\n          data-cy=\"road-input-counter\"\n          readonly={this.readonly}\n          label=\"Quantité\"\n        />\n        <road-button\n          slot=\"append\"\n          size={this.size}\n          onClick={this.increase}\n          class={this.rightIconClasses}\n          data-cy=\"road-increase\"\n        >\n          <road-icon\n            name=\"navigation-add-more\"\n            size={this.size}\n            role=\"button\"\n          />\n        </road-button>\n      </road-input-group>\n    );\n  }\n}\n\nlet counterIds = 0;\n"]}

package/dist/collection/components/drawer/drawer.js

@@ -35,6 +35,8 @@ export class Drawer {
     this.backText = undefined;
     this.drawerTitle = undefined;
     this.ariaLabel = undefined;
+    this.ariaLabelBack = undefined;
+    this.ariaLabelClose = undefined;
     this.hasCloseIcon = true;
   }
   /**
@@ -55,9 +57,22 @@ export class Drawer {
   async back() {
     this.onBack.emit();
   }
+  // @Watch('isOpen')
+  // handleOpen(openValue: boolean) {
+  //   if(openValue === true) {
+  //     this.onOpen.emit();
+  //   } else {
+  //     this.el.addEventListener('transitionend', () => {
+  //       this.onClose.emit();
+  //       this.el.shadowRoot && ((this.el.shadowRoot.querySelector('.drawer-body') as HTMLElement).scrollTop = 0);
+  //     }, { once: true});
+  //   }
+  // }
   handleOpen(openValue) {
     if (openValue === true) {
       this.onOpen.emit();
+      // Focus the first button element after the drawer is opened
+      setTimeout(() => this.focusFirstButton(), 50); // Add a slight delay to ensure the element is rendered
     }
     else {
       this.el.addEventListener('transitionend', () => {
@@ -66,6 +81,16 @@ export class Drawer {
       }, { once: true });
     }
   }
+  /**
+   * Find and focus the first button element in the drawer
+   */
+  focusFirstButton() {
+    var _a;
+    const buttonElement = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('button');
+    if (buttonElement) {
+      buttonElement.focus(); // Focus the first button element
+    }
+  }
   /**
    * Close the dialog when press Escape key
    */
@@ -90,9 +115,11 @@ export class Drawer {
     const drawerIsOpenClass = this.isOpen ? 'drawer-open' : '';
     const inverseHeaderClass = this.hasInverseHeader ? 'drawer-header-inverse' : '';
     const ariaLabel = this.ariaLabel !== undefined ? this.ariaLabel : 'drawer';
+    const ariaLabelBack = this.ariaLabelBack !== undefined ? this.ariaLabelBack : 'Back';
+    const ariaLabelClose = this.ariaLabelClose !== undefined ? this.ariaLabelClose : 'Close';
     const drawerDelimiterClass = this.drawerTitle !== undefined && !this.hasInverseHeader ? 'drawer-delimiter' : '';
-    const backIconElement = this.hasBackIcon ? h("button", { type: "button", class: "drawer-action", "aria-label": "Back", onClick: this.onClickBack }, h("road-icon", { icon: navigationChevron, rotate: "180" }), this.backText) : '';
-    const closeIconElement = this.hasCloseIcon ? h("button", { type: "button", class: "drawer-close", onClick: this.onClick, "aria-label": "Close" }, h("road-icon", { icon: navigationClose, "aria-hidden": "true" })) : '';
+    const backIconElement = this.hasBackIcon ? h("button", { type: "button", class: "drawer-action", "aria-label": `${ariaLabelBack}`, onClick: this.onClickBack }, h("road-icon", { icon: navigationChevron, rotate: "180" }), this.backText) : '';
+    const closeIconElement = this.hasCloseIcon ? h("button", { type: "button", class: "drawer-close", onClick: this.onClick, "aria-label": `${ariaLabelClose}` }, h("road-icon", { icon: navigationClose, "aria-hidden": "true" })) : '';
     const drawerWidthValue = this.position === 'bottom' ? '100%' : this.drawerWidth + 'px';
     return (h(Host, { class: `${drawerIsOpenClass} drawer-${this.position}`, tabindex: "0", role: "dialog", "aria-label": `${ariaLabel}` }, h("div", { class: "drawer-overlay", onClick: this.onClick, tabindex: "-1" }), h("div", { class: "drawer-dialog", style: { maxWidth: `${drawerWidthValue}` }, role: "document", tabindex: "0" }, h("div", { class: "drawer-content" }, h("header", { class: `drawer-header ${inverseHeaderClass} ${drawerDelimiterClass}` }, backIconElement, this.drawerTitle !== undefined ? h("h2", { class: "drawer-title" }, this.drawerTitle) : h("div", { class: "drawer-title" }, h("slot", { name: "title" })), closeIconElement), h("div", { class: "drawer-body" }, h("slot", null)), this.hasFooterContent() && (h("footer", { class: "drawer-footer" }, h("slot", { name: "footer" })))))));
   }
@@ -251,6 +278,40 @@ export class Drawer {
         "attribute": "aria-label",
         "reflect": false
       },
+      "ariaLabelBack": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string | undefined",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Aria label of the drawer"
+        },
+        "attribute": "aria-label-back",
+        "reflect": false
+      },
+      "ariaLabelClose": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string | undefined",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Aria label of the drawer"
+        },
+        "attribute": "aria-label-close",
+        "reflect": false
+      },
       "hasCloseIcon": {
         "type": "boolean",
         "mutable": false,

package/dist/collection/components/drawer/drawer.js.map

@@ -1 +1 @@
-{"version":3,"file":"drawer.js","sourceRoot":"","sources":["../../../src/components/drawer/drawer.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, Listen, Method, Prop, h, Host, Watch } from '@stencil/core';\nimport { navigationClose, navigationChevron } from '../../../icons';\n\n/**\n * @slot  - Content of the drawer.\n * @slot title - replace the title with a custom title section when `'drawerTitle'` is not set\n * @slot footer - footer of the drawer\n * `<div slot=\"footer\">`\n   `<road-button color=\"primary\" outline=\"true\" expand=\"true\">Annuler</road-button>`\n   `<road-button color=\"primary\" expand=\"true\" class=\"mb-0\">Valider</road-button>`\n   ` </div>`\n */\n\n\n@Component({\n  tag: 'road-drawer',\n  styleUrl: 'drawer.css',\n  shadow: true,\n})\nexport class Drawer {\n\n  /**\n   * Current reference of the drawer\n   */\n  @Element() el!: HTMLRoadDrawerElement;\n\n  /**\n   * Set isOpen property to true to open the drawer\n   */\n  @Prop({ mutable: true }) isOpen: boolean = false;\n\n  /**\n   * position of the drawer. e.g. left, right, bottom\n   */\n  @Prop() position: string = 'left';\n\n  /**\n   * Width of the drawer\n   */\n  @Prop() drawerWidth: number = 480;\n\n  /**\n   * Inverse header colors\n   */\n  @Prop() hasInverseHeader: boolean = false;\n\n  /**\n   * Show / hide back icon\n   */\n  @Prop() hasBackIcon: boolean = false;\n\n  /**\n   * Show / hide back icon\n   */\n  @Prop() backText?: string;\n\n  /**\n   * Title of the drawer in the header bar\n   */\n  @Prop() drawerTitle?: string;\n\n   /**\n   * Aria label of the drawer\n   */\n   @Prop() ariaLabel?: string;\n\n  /**\n   * Show / hide close icon\n   */\n  @Prop() hasCloseIcon: boolean = true;\n\n  /**\n   * Indicate when opening the drawer\n   */\n  @Event({ eventName: 'open' }) onOpen!: EventEmitter<void>;\n\n  /**\n   * Indicate when closing the drawer\n   */\n  @Event({ eventName: 'close' }) onClose!: EventEmitter<void>;\n\n  /**\n   * Indicate when return to previous state of the drawer content\n   */\n  @Event({ eventName: 'back' }) onBack!: EventEmitter<void>;\n\n  /**\n   * Open the drawer\n   */\n  @Method()\n  async open() {\n    this.isOpen = true;\n  }\n\n  /**\n   * Close the drawer\n   */\n  @Method()\n  async close() {\n    this.isOpen = false;\n  }\n\n  /**\n   * Return to previous state of the drawer content\n   */\n  @Method()\n  async back() {\n    this.onBack.emit();\n  }\n\n  @Watch('isOpen')\n  handleOpen(openValue: boolean) {\n    if(openValue === true) {\n      this.onOpen.emit();\n    } else {\n      this.el.addEventListener('transitionend', () => {\n        this.onClose.emit();\n        this.el.shadowRoot && ((this.el.shadowRoot.querySelector('.drawer-body') as HTMLElement).scrollTop = 0);\n      }, { once: true});\n    }\n  }\n\n  /**\n   * Close the dialog when clicking on the cross or layer\n   */\n  private onClick = (ev: UIEvent) => {\n    ev.stopPropagation();\n    ev.preventDefault();\n\n    this.close();\n  };\n\n  /**\n   * Close the dialog when clicking on the cross or layer\n   */\n  private onClickBack = (event: MouseEvent) => {\n    event.stopPropagation();\n    event.preventDefault();\n\n    this.back();\n  };\n\n  /**\n   * Close the dialog when press Escape key\n   */\n  @Listen('keyup', { target: 'document' })\n  onEscape(event: KeyboardEvent) {\n    if (event.key === 'Escape' || event.key === \"Esc\") {\n      this.close();\n    }\n  }\n\n  /**\n   * Call close function when clicking an element with data-dismiss=\"modal\" attribute\n   */\n  componentDidLoad() {\n    this.el.querySelectorAll('[data-dismiss=\"modal\"]').forEach(item => {\n      item.addEventListener('click', () => this.close());\n    });\n  }\n\n  private hasFooterContent(): boolean {\n    const footerSlot = this.el.querySelector('[slot=\"footer\"]');\n    return footerSlot !== null && footerSlot.childElementCount > 0;\n  }\n\n  render() {\n    const drawerIsOpenClass = this.isOpen ? 'drawer-open' : '';\n    const inverseHeaderClass = this.hasInverseHeader ? 'drawer-header-inverse' : '';\n    const ariaLabel = this.ariaLabel !== undefined ? this.ariaLabel : 'drawer';\n    const drawerDelimiterClass = this.drawerTitle !== undefined && !this.hasInverseHeader ? 'drawer-delimiter' : '';\n    const backIconElement = this.hasBackIcon ? <button type=\"button\" class=\"drawer-action\" aria-label=\"Back\" onClick={this.onClickBack}><road-icon icon={navigationChevron} rotate=\"180\"></road-icon>{this.backText}</button> : '';\n    const closeIconElement = this.hasCloseIcon ? <button type=\"button\" class=\"drawer-close\" onClick={this.onClick} aria-label=\"Close\"><road-icon icon={navigationClose} aria-hidden=\"true\"></road-icon></button> : '';\n    const drawerWidthValue = this.position === 'bottom' ? '100%' : this.drawerWidth + 'px';\n\n    return (\n      <Host class={`${drawerIsOpenClass} drawer-${this.position}`} tabindex=\"0\" role=\"dialog\" aria-label={`${ariaLabel}`}>\n        <div class=\"drawer-overlay\" onClick={this.onClick} tabindex=\"-1\"></div>\n        <div class=\"drawer-dialog\" style={{ maxWidth: `${drawerWidthValue}` }} role=\"document\" tabindex=\"0\">\n          <div class=\"drawer-content\">\n            <header class={`drawer-header ${inverseHeaderClass} ${drawerDelimiterClass}`}>\n              {backIconElement}\n              {this.drawerTitle !== undefined ? <h2 class=\"drawer-title\">{this.drawerTitle}</h2> : <div class=\"drawer-title\"><slot name=\"title\" /></div>}\n              {closeIconElement}\n            </header>\n            <div class=\"drawer-body\">\n              <slot/>\n            </div>\n            {this.hasFooterContent() && (\n              <footer class=\"drawer-footer\">\n                <slot name=\"footer\"/>\n              </footer>\n            )}\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}"]}
+{"version":3,"file":"drawer.js","sourceRoot":"","sources":["../../../src/components/drawer/drawer.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, Listen, Method, Prop, h, Host, Watch } from '@stencil/core';\nimport { navigationClose, navigationChevron } from '../../../icons';\n\n/**\n * @slot  - Content of the drawer.\n * @slot title - replace the title with a custom title section when `'drawerTitle'` is not set\n * @slot footer - footer of the drawer\n * `<div slot=\"footer\">`\n   `<road-button color=\"primary\" outline=\"true\" expand=\"true\">Annuler</road-button>`\n   `<road-button color=\"primary\" expand=\"true\" class=\"mb-0\">Valider</road-button>`\n   ` </div>`\n */\n\n\n@Component({\n  tag: 'road-drawer',\n  styleUrl: 'drawer.css',\n  shadow: true,\n})\nexport class Drawer {\n\n  /**\n   * Current reference of the drawer\n   */\n  @Element() el!: HTMLRoadDrawerElement;\n\n  /**\n   * Set isOpen property to true to open the drawer\n   */\n  @Prop({ mutable: true }) isOpen: boolean = false;\n\n  /**\n   * position of the drawer. e.g. left, right, bottom\n   */\n  @Prop() position: string = 'left';\n\n  /**\n   * Width of the drawer\n   */\n  @Prop() drawerWidth: number = 480;\n\n  /**\n   * Inverse header colors\n   */\n  @Prop() hasInverseHeader: boolean = false;\n\n  /**\n   * Show / hide back icon\n   */\n  @Prop() hasBackIcon: boolean = false;\n\n  /**\n   * Show / hide back icon\n   */\n  @Prop() backText?: string;\n\n  /**\n   * Title of the drawer in the header bar\n   */\n  @Prop() drawerTitle?: string;\n\n   /**\n   * Aria label of the drawer\n   */\n   @Prop() ariaLabel?: string;\n\n  /**\n   * Aria label of the drawer\n   */\n    @Prop() ariaLabelBack?: string;\n\n  /**\n   * Aria label of the drawer\n   */\n   @Prop() ariaLabelClose?: string;\n\n  /**\n   * Show / hide close icon\n   */\n  @Prop() hasCloseIcon: boolean = true;\n\n  /**\n   * Indicate when opening the drawer\n   */\n  @Event({ eventName: 'open' }) onOpen!: EventEmitter<void>;\n\n  /**\n   * Indicate when closing the drawer\n   */\n  @Event({ eventName: 'close' }) onClose!: EventEmitter<void>;\n\n  /**\n   * Indicate when return to previous state of the drawer content\n   */\n  @Event({ eventName: 'back' }) onBack!: EventEmitter<void>;\n\n  /**\n   * Open the drawer\n   */\n  @Method()\n  async open() {\n    this.isOpen = true;\n  }\n\n  /**\n   * Close the drawer\n   */\n  @Method()\n  async close() {\n    this.isOpen = false;\n  }\n\n  /**\n   * Return to previous state of the drawer content\n   */\n  @Method()\n  async back() {\n    this.onBack.emit();\n  }\n\n  // @Watch('isOpen')\n  // handleOpen(openValue: boolean) {\n  //   if(openValue === true) {\n  //     this.onOpen.emit();\n  //   } else {\n  //     this.el.addEventListener('transitionend', () => {\n  //       this.onClose.emit();\n  //       this.el.shadowRoot && ((this.el.shadowRoot.querySelector('.drawer-body') as HTMLElement).scrollTop = 0);\n  //     }, { once: true});\n  //   }\n  // }\n\n\n  @Watch('isOpen')\n  handleOpen(openValue: boolean) {\n    if(openValue === true) {\n      this.onOpen.emit();\n      // Focus the first button element after the drawer is opened\n      setTimeout(() => this.focusFirstButton(), 50); // Add a slight delay to ensure the element is rendered\n    } else {\n      this.el.addEventListener('transitionend', () => {\n        this.onClose.emit();\n        this.el.shadowRoot && ((this.el.shadowRoot.querySelector('.drawer-body') as HTMLElement).scrollTop = 0);\n      }, { once: true });\n    }\n  }\n  \n  /**\n   * Find and focus the first button element in the drawer\n   */\n  private focusFirstButton() {\n    const buttonElement = this.el.shadowRoot?.querySelector('button') as HTMLElement;\n  \n    if (buttonElement) {\n      buttonElement.focus(); // Focus the first button element\n    }\n  }\n  \n\n  /**\n   * Close the dialog when clicking on the cross or layer\n   */\n  private onClick = (ev: UIEvent) => {\n    ev.stopPropagation();\n    ev.preventDefault();\n\n    this.close();\n  };\n\n  /**\n   * Close the dialog when clicking on the cross or layer\n   */\n  private onClickBack = (event: MouseEvent) => {\n    event.stopPropagation();\n    event.preventDefault();\n\n    this.back();\n  };\n\n  /**\n   * Close the dialog when press Escape key\n   */\n  @Listen('keyup', { target: 'document' })\n  onEscape(event: KeyboardEvent) {\n    if (event.key === 'Escape' || event.key === \"Esc\") {\n      this.close();\n    }\n  }\n\n  /**\n   * Call close function when clicking an element with data-dismiss=\"modal\" attribute\n   */\n  componentDidLoad() {\n    this.el.querySelectorAll('[data-dismiss=\"modal\"]').forEach(item => {\n      item.addEventListener('click', () => this.close());\n    });\n  }\n\n  private hasFooterContent(): boolean {\n    const footerSlot = this.el.querySelector('[slot=\"footer\"]');\n    return footerSlot !== null && footerSlot.childElementCount > 0;\n  }\n\n  render() {\n    const drawerIsOpenClass = this.isOpen ? 'drawer-open' : '';\n    const inverseHeaderClass = this.hasInverseHeader ? 'drawer-header-inverse' : '';\n    const ariaLabel = this.ariaLabel !== undefined ? this.ariaLabel : 'drawer';\n    const ariaLabelBack = this.ariaLabelBack !== undefined ? this.ariaLabelBack : 'Back';\n    const ariaLabelClose = this.ariaLabelClose !== undefined ? this.ariaLabelClose : 'Close';\n    const drawerDelimiterClass = this.drawerTitle !== undefined && !this.hasInverseHeader ? 'drawer-delimiter' : '';\n    const backIconElement = this.hasBackIcon ? <button type=\"button\" class=\"drawer-action\" aria-label={`${ariaLabelBack}`} onClick={this.onClickBack}><road-icon icon={navigationChevron} rotate=\"180\"></road-icon>{this.backText}</button> : '';\n    const closeIconElement = this.hasCloseIcon ? <button type=\"button\" class=\"drawer-close\" onClick={this.onClick} aria-label={`${ariaLabelClose}`}><road-icon icon={navigationClose} aria-hidden=\"true\"></road-icon></button> : '';\n    const drawerWidthValue = this.position === 'bottom' ? '100%' : this.drawerWidth + 'px';\n\n    return (\n      <Host class={`${drawerIsOpenClass} drawer-${this.position}`} tabindex=\"0\" role=\"dialog\" aria-label={`${ariaLabel}`}>\n        <div class=\"drawer-overlay\" onClick={this.onClick} tabindex=\"-1\"></div>\n        <div class=\"drawer-dialog\" style={{ maxWidth: `${drawerWidthValue}` }} role=\"document\" tabindex=\"0\">\n          <div class=\"drawer-content\">\n            <header class={`drawer-header ${inverseHeaderClass} ${drawerDelimiterClass}`}>\n              {backIconElement}\n              {this.drawerTitle !== undefined ? <h2 class=\"drawer-title\">{this.drawerTitle}</h2> : <div class=\"drawer-title\"><slot name=\"title\" /></div>}\n              {closeIconElement}\n            </header>\n            <div class=\"drawer-body\">\n              <slot/>\n            </div>\n            {this.hasFooterContent() && (\n              <footer class=\"drawer-footer\">\n                <slot name=\"footer\"/>\n              </footer>\n            )}\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}"]}

package/dist/collection/components/drawer/drawer.stories.js

@@ -58,6 +58,12 @@ export default {
     'aria-label': {
       control: 'text',
     },
+    'aria-label-back': {
+      control: 'text',
+    },
+    'aria-label-close': {
+      control: 'text',
+    },
     ' ': {
       control: 'text',
     },
@@ -160,7 +166,7 @@ export default {
 };
 
 const Template = (args) => html`
-<road-drawer 
+<road-drawer
   is-open="${ifDefined(args['is-open'])}" 
   position="${ifDefined(args.position)}" 
   has-back-icon="${ifDefined(args['has-back-icon'])}" 
@@ -170,6 +176,8 @@ const Template = (args) => html`
   drawer-width="${ifDefined(args['drawer-width'])}" 
   drawer-title="${ifDefined(args['drawer-title'])}"
   aria-label="${ifDefined(args['aria-label'])}"
+  aria-label-back="${ifDefined(args['aria-label-back'])}"
+  aria-label-close="${ifDefined(args['aria-label-close'])}"
 >
   ${unsafeHTML(args['title'])}
   ${unsafeHTML(args[' '])}

package/dist/collection/components/input/input.css

@@ -121,9 +121,9 @@
 /* stylelint-enable */
 
 .form-control:not(:disabled):focus,
-.form-control[autofocus] {
+.form-control[autofocus],
+.form-control:focus-visible{
   border-color: var(--road-input-outline-variant);
-  outline: 0;
 }
 
 /**

package/dist/collection/components/tab-button/tab-button.css

@@ -69,6 +69,7 @@
 
 :host(.focus-visible) {
   background: var(--tab-background-focused);
+  outline: auto;
 }
 
 

package/dist/collection/components/tooltip/tooltip.css

@@ -24,6 +24,11 @@
   display: inline-block;
 }
 
+:host(:hover) {
+  cursor: pointer;
+}
+
+
 :host([trigger="hover"]) .tooltip {
   display: none;
 }

package/dist/collection/components/tooltip/tooltip.js

@@ -21,6 +21,16 @@ export class Tooltip {
         this.close();
       }
     };
+    this.onFocus = () => {
+      if (this.hasTrigger('focus') || this.hasTrigger('hover')) {
+        this.open();
+      }
+    };
+    this.onBlur = () => {
+      if (this.hasTrigger('focus') || this.hasTrigger('hover')) {
+        this.close();
+      }
+    };
     this.tooltipId = `road-tooltip-${++tooltipIds}`;
     this.content = '';
     this.position = 'top';
@@ -45,7 +55,9 @@ export class Tooltip {
     return triggers.includes(triggerType);
   }
   render() {
-    return (h(Host, { onMouseOver: this.onMouseOver, onMouseOut: this.onMouseOut, onClick: this.onClick, "data-tooltip-position": this.position }, h("slot", { "aria-describedby": this.tooltipId }), h("div", { part: "tooltip", id: this.tooltipId, class: {
+    return (h(Host, { onMouseOver: this.onMouseOver, onMouseOut: this.onMouseOut, onClick: this.onClick, onFocus: this.onFocus, onBlur: this.onBlur, tabindex: "0" // Makes the element focusable
+      ,
+      "data-tooltip-position": this.position }, h("slot", { "aria-describedby": this.tooltipId }), h("div", { part: "tooltip", id: this.tooltipId, class: {
         tooltip: true,
         'tooltip-open': this.isOpen,
       }, role: "tooltip", "aria-hidden": !this.isOpen ? 'true' : 'false' }, this.content, h("slot", { name: "tooltip-content" }))));
@@ -166,7 +178,7 @@ export class Tooltip {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Controls how the tooltip is activated. Possible options include `click`, `hover`. Multiple\noptions can be passed by separating them with a space. When manual is used, the tooltip must be activated\nprogrammatically."
+          "text": "Controls how the tooltip is activated. Possible options include `click`, `hover`, `focus`. Multiple\noptions can be passed by separating them with a space. When manual is used, the tooltip must be activated\nprogrammatically."
         },
         "attribute": "trigger",
         "reflect": false,

package/dist/collection/components/tooltip/tooltip.js.map

@@ -1 +1 @@
-{"version":3,"file":"tooltip.js","sourceRoot":"","sources":["../../../src/components/tooltip/tooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AAE1E;;;;GAIG;AAOH,MAAM,OAAO,OAAO;;IA8DV,YAAO,GAAG,GAAG,EAAE;MACrB,IAAI,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,EAAE;QAC5B,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC;OAC1C;IACH,CAAC,CAAC;IAEM,gBAAW,GAAG,GAAG,EAAE;MACzB,IAAI,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,EAAE;QAC5B,IAAI,CAAC,IAAI,EAAE,CAAC;OACb;IACH,CAAC,CAAC;IAEM,eAAU,GAAG,GAAG,EAAE;MACxB,IAAI,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,EAAE;QAC5B,IAAI,CAAC,KAAK,EAAE,CAAC;OACd;IACH,CAAC,CAAC;qBAvE0B,gBAAgB,EAAE,UAAU,EAAE;mBAKxC,EAAE;oBAaP,KAAK;wBAOL,QAAQ;kBAKa,KAAK;mBAOb,OAAO;;EAEjC;;KAEG;EAEH,KAAK,CAAC,IAAI;IACR,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;EACrB,CAAC;EAED;;KAEG;EAEH,KAAK,CAAC,KAAK;IACT,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;EACtB,CAAC;EAoBO,UAAU,CAAC,WAAmB;IACpC,MAAM,QAAQ,GAAG,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;IACzC,OAAO,QAAQ,CAAC,QAAQ,CAAC,WAAW,CAAC,CAAC;EACxC,CAAC;EAED,MAAM;IACJ,OAAO,CACL,EAAC,IAAI,IACH,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,OAAO,EAAE,IAAI,CAAC,OAAO,2BACE,IAAI,CAAC,QAAQ;MAEpC,gCAAwB,IAAI,CAAC,SAAS,GAAI;MAE1C,WACE,IAAI,EAAC,SAAS,EACd,EAAE,EAAE,IAAI,CAAC,SAAS,EAClB,KAAK,EAAE;UACL,OAAO,EAAE,IAAI;UACb,cAAc,EAAE,IAAI,CAAC,MAAM;SAC5B,EACD,IAAI,EAAC,SAAS,iBACD,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO;QAE3C,IAAI,CAAC,OAAO;QACb,YAAM,IAAI,EAAC,iBAAiB,GAAG,CAC3B,CACD,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF;AAED,IAAI,UAAU,GAAG,CAAC,CAAC","sourcesContent":["import { Component, Host, h, Prop, Method, Element } from '@stencil/core';\n\n/**\n * @slot tooltip-content - content of the tooltip, if you need to add html content, use this slot, otherwise use directly the content prop.\n *\n * @part tooltip - tooltip container\n */\n\n@Component({\n  tag: 'road-tooltip',\n  styleUrl: 'tooltip.css',\n  shadow: true,\n})\nexport class Tooltip {\n\n  @Element() el!: HTMLRoadTooltipElement;\n\n  /**\n   * The id of tooltip\n   */\n  @Prop() tooltipId: string = `road-tooltip-${++tooltipIds}`;\n\n  /**\n   * The tooltip's content.\n   */\n  @Prop() content = '';\n\n  /**\n   * The position of the tooltip.\n   */\n  @Prop() position:\n    | 'top'\n    | 'right'\n    | 'bottom'\n    | 'top-left'\n    | 'top-right'\n    | 'bottom-left'\n    | 'bottom-right'\n    | 'left' = 'top';\n\n  /**\n   * The content align of the tooltip.\n   */\n   @Prop() contentAlign:\n    | 'center'\n    | 'left' = 'center';\n\n  /**\n   * Indicates whether or not the tooltip is open. You can use this or the open/close methods.\n   */\n  @Prop({ mutable: true }) isOpen = false;\n\n  /**\n   * Controls how the tooltip is activated. Possible options include `click`, `hover`. Multiple\n   * options can be passed by separating them with a space. When manual is used, the tooltip must be activated\n   * programmatically.\n   */\n  @Prop() trigger: string = 'hover';\n\n  /**\n   * Open the tooltip.\n   */\n  @Method()\n  async open() {\n    this.isOpen = true;\n  }\n\n  /**\n   * Close the tooltip.\n   */\n  @Method()\n  async close() {\n    this.isOpen = false;\n  }\n\n  private onClick = () => {\n    if (this.hasTrigger('click')) {\n      this.isOpen ? this.close() : this.open();\n    }\n  };\n\n  private onMouseOver = () => {\n    if (this.hasTrigger('hover')) {\n      this.open();\n    }\n  };\n\n  private onMouseOut = () => {\n    if (this.hasTrigger('hover')) {\n      this.close();\n    }\n  };\n\n  private hasTrigger(triggerType: string) {\n    const triggers = this.trigger.split(' ');\n    return triggers.includes(triggerType);\n  }\n\n  render() {\n    return (\n      <Host\n        onMouseOver={this.onMouseOver}\n        onMouseOut={this.onMouseOut}\n        onClick={this.onClick}\n        data-tooltip-position={this.position}\n      >\n        <slot aria-describedby={this.tooltipId} />\n\n        <div\n          part=\"tooltip\"\n          id={this.tooltipId}\n          class={{\n            tooltip: true,\n            'tooltip-open': this.isOpen,\n          }}\n          role=\"tooltip\"\n          aria-hidden={!this.isOpen ? 'true' : 'false'}\n          >\n          {this.content}\n          <slot name=\"tooltip-content\" />\n        </div>\n      </Host>\n    );\n  }\n}\n\nlet tooltipIds = 0;\n"]}
+{"version":3,"file":"tooltip.js","sourceRoot":"","sources":["../../../src/components/tooltip/tooltip.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, h, Prop, Method, Element } from '@stencil/core';\n\n/**\n * @slot tooltip-content - content of the tooltip, if you need to add html content, use this slot, otherwise use directly the content prop.\n *\n * @part tooltip - tooltip container\n */\n\n@Component({\n  tag: 'road-tooltip',\n  styleUrl: 'tooltip.css',\n  shadow: true,\n})\nexport class Tooltip {\n\n  @Element() el!: HTMLRoadTooltipElement;\n\n  /**\n   * The id of tooltip\n   */\n  @Prop() tooltipId: string = `road-tooltip-${++tooltipIds}`;\n\n  /**\n   * The tooltip's content.\n   */\n  @Prop() content = '';\n\n  /**\n   * The position of the tooltip.\n   */\n  @Prop() position:\n    | 'top'\n    | 'right'\n    | 'bottom'\n    | 'top-left'\n    | 'top-right'\n    | 'bottom-left'\n    | 'bottom-right'\n    | 'left' = 'top';\n\n  /**\n   * The content align of the tooltip.\n   */\n  @Prop() contentAlign:\n    | 'center'\n    | 'left' = 'center';\n\n  /**\n   * Indicates whether or not the tooltip is open. You can use this or the open/close methods.\n   */\n  @Prop({ mutable: true }) isOpen = false;\n\n  /**\n   * Controls how the tooltip is activated. Possible options include `click`, `hover`, `focus`. Multiple\n   * options can be passed by separating them with a space. When manual is used, the tooltip must be activated\n   * programmatically.\n   */\n  @Prop() trigger: string = 'hover';\n\n  /**\n   * Open the tooltip.\n   */\n  @Method()\n  async open() {\n    this.isOpen = true;\n  }\n\n  /**\n   * Close the tooltip.\n   */\n  @Method()\n  async close() {\n    this.isOpen = false;\n  }\n\n  private onClick = () => {\n    if (this.hasTrigger('click')) {\n      this.isOpen ? this.close() : this.open();\n    }\n  };\n\n  private onMouseOver = () => {\n    if (this.hasTrigger('hover')) {\n      this.open();\n    }\n  };\n\n  private onMouseOut = () => {\n    if (this.hasTrigger('hover')) {\n      this.close();\n    }\n  };\n\n  private onFocus = () => {\n    if (this.hasTrigger('focus') || this.hasTrigger('hover')) {\n      this.open();\n    }\n  };\n\n  private onBlur = () => {\n    if (this.hasTrigger('focus') || this.hasTrigger('hover')) {\n      this.close();\n    }\n  };\n\n  private hasTrigger(triggerType: string) {\n    const triggers = this.trigger.split(' ');\n    return triggers.includes(triggerType);\n  }\n\n  render() {\n    return (\n      <Host\n        onMouseOver={this.onMouseOver}\n        onMouseOut={this.onMouseOut}\n        onClick={this.onClick}\n        onFocus={this.onFocus}\n        onBlur={this.onBlur}\n        tabindex=\"0\"  // Makes the element focusable\n        data-tooltip-position={this.position}\n      >\n        <slot aria-describedby={this.tooltipId} />\n\n        <div\n          part=\"tooltip\"\n          id={this.tooltipId}\n          class={{\n            tooltip: true,\n            'tooltip-open': this.isOpen,\n          }}\n          role=\"tooltip\"\n          aria-hidden={!this.isOpen ? 'true' : 'false'}\n        >\n          {this.content}\n          <slot name=\"tooltip-content\" />\n        </div>\n      </Host>\n    );\n  }\n}\n\nlet tooltipIds = 0;\n"]}

package/dist/collection/index.js

@@ -1,3 +1,4 @@
 export { addIcons } from './components/icon/utils';
 export { addIllustrations } from './components/illustration/utils';
+export { addAssets } from './components/asset/utils';
 //# sourceMappingURL=index.js.map

package/dist/collection/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,yBAAyB,CAAC;AACnD,OAAO,EAAE,gBAAgB,EAAE,MAAM,iCAAiC,CAAC","sourcesContent":["export { addIcons } from './components/icon/utils';\nexport { addIllustrations } from './components/illustration/utils';\nexport { Components, JSX } from './components';"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,yBAAyB,CAAC;AACnD,OAAO,EAAE,gBAAgB,EAAE,MAAM,iCAAiC,CAAC;AACnE,OAAO,EAAE,SAAS,EAAE,MAAM,0BAA0B,CAAC","sourcesContent":["export { addIcons } from './components/icon/utils';\nexport { addIllustrations } from './components/illustration/utils';\nexport { addAssets } from './components/asset/utils';\nexport { Components, JSX } from './components';"]}

package/dist/esm/index-52302079.js

@@ -2621,6 +2621,10 @@ const loadModule = (cmpMeta, hostRef, hmrVersionId) => {
           return import(
             /* webpackMode: "lazy" */
             './road-area-code.entry.js').then(processMod, consoleError);
+        case 'road-asset':
+          return import(
+            /* webpackMode: "lazy" */
+            './road-asset.entry.js').then(processMod, consoleError);
         case 'road-autocomplete':
           return import(
             /* webpackMode: "lazy" */

package/dist/esm/index.js

@@ -1,5 +1,6 @@
 export { a as addIcons } from './utils-8c28c2e1.js';
 export { a as addIllustrations } from './utils-79ac6aaf.js';
+export { a as addAssets } from './utils-158dc960.js';
 import './index-52302079.js';
 
 //# sourceMappingURL=index.js.map

package/dist/esm/index.js.map

@@ -1 +1 @@
-{"file":"index.js","mappings":";;","names":[],"sources":[],"sourcesContent":[],"version":3}
+{"file":"index.js","mappings":";;;","names":[],"sources":[],"sourcesContent":[],"version":3}

package/dist/esm/loader.js

@@ -3,7 +3,7 @@ export { s as setNonce } from './index-52302079.js';
 
 const defineCustomElements = (win, options) => {
   if (typeof window === 'undefined') return undefined;
-  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);
+  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\"],\"ariaLabelBack\":[1,\"aria-label-back\"],\"ariaLabelClose\":[1,\"aria-label-close\"],\"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-asset\",[[1,\"road-asset\",{\"ariaLabel\":[1537,\"aria-label\"],\"ariaHidden\":[513,\"aria-hidden\"],\"name\":[1],\"src\":[1],\"asset\":[8],\"lazy\":[4],\"sanitize\":[4],\"assetSvgContent\":[32],\"isVisible\":[32]},null,{\"name\":[\"loadAsset\"],\"src\":[\"loadAsset\"],\"asset\":[\"loadAsset\"]}]]],[\"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);
 };
 
 export { defineCustomElements };