@roadtrip/components 3.20.0 → 3.20.2

package/dist/roadtrip/p-74e359b7.entry.js

@@ -0,0 +1,2 @@
+import{r as t,h as a,H as s,a as e}from"./p-f3d586b3.js";const i=":host{display:block}:host(.tab-hidden){display:none}";const n=class{constructor(a){t(this,a);this.active=false;this.tab=undefined}async componentWillLoad(){if(this.active){await this.setActive()}}onTabBarChanged(t){this.active=this.tab===t.detail.tab}async setActive(){this.active=true}render(){const{tab:t,active:e}=this;return a(s,{role:"tabpanel","aria-hidden":!e?"true":null,"aria-labelledby":`tab-button-${t}`,class:{"tab-hidden":!e}},a("slot",null))}get el(){return e(this)}};n.style=i;export{n as road_tab};
+//# sourceMappingURL=p-74e359b7.entry.js.map

package/dist/roadtrip/p-74e359b7.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["tabCss","Tab","componentWillLoad","this","active","setActive","onTabBarChanged","ev","tab","detail","render","h","Host","role","class"],"sources":["src/components/tab/tab.css?tag=road-tab&encapsulation=shadow","src/components/tab/tab.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n\n:host(.tab-hidden) {\n  display: none;\n}\n","import { Component, Element, Host, Listen, Method, Prop, h } from '@stencil/core';\n\n/**\n * @slot  - content of the tab sync with selected tab.\n */\n\n@Component({\n  tag: 'road-tab',\n  styleUrl: 'tab.css',\n  shadow: true,\n})\nexport class Tab {\n\n  @Element() el!: HTMLRoadTabElement;\n\n  /** @internal */\n  @Prop({ mutable: true }) active = false;\n\n  /**\n   * A tab id must be provided for each `road-tab`. It's used internally to reference\n   * the selected tab or by the router to switch between them.\n   */\n  @Prop() tab!: string;\n\n  async componentWillLoad() {\n    if (this.active) {\n      await this.setActive();\n    }\n  }\n\n  @Listen('roadtabbarchanged', { target: 'window' })\n  onTabBarChanged(ev: CustomEvent) {\n    this.active = this.tab === ev.detail.tab;\n  }\n\n  /** Set the active component for the tab */\n  @Method()\n  async setActive() {\n    this.active = true;\n  }\n\n  render() {\n    const { tab, active } = this;\n    return (\n      <Host\n        role=\"tabpanel\"\n        aria-hidden={!active ? 'true' : null}\n        aria-labelledby={`tab-button-${tab}`}\n        class={{\n          'tab-hidden': !active,\n        }}\n      >\n        <slot/>\n      </Host>\n    );\n  }\n}\n"],"mappings":"yDAAA,MAAMA,EAAS,uD,MCWFC,EAAG,M,qCAKoB,M,mBAQlC,uBAAMC,GACJ,GAAIC,KAAKC,OAAQ,OACTD,KAAKE,W,EAKf,eAAAC,CAAgBC,GACdJ,KAAKC,OAASD,KAAKK,MAAQD,EAAGE,OAAOD,G,CAKvC,eAAMH,GACJF,KAAKC,OAAS,I,CAGhB,MAAAM,GACE,MAAMF,IAAEA,EAAGJ,OAAEA,GAAWD,KACxB,OACEQ,EAACC,EAAI,CACHC,KAAK,WAAU,eACDT,EAAS,OAAS,KAAI,kBACnB,cAAcI,IAC/BM,MAAO,CACL,cAAeV,IAGjBO,EAAA,a"}

package/dist/roadtrip/p-b09c076d.entry.js.map

@@ -1 +1 @@
-{"version":3,"names":["tabButtonCss","TabButton","this","onKeyUp","ev","key","selectTab","onClick","onTabBarChanged","dispatchedFrom","target","parent","el","parentElement","composedPath","includes","contains","selected","tab","detail","undefined","roadtabbuttonclick","emit","href","roadTabButtonClick","preventDefault","hasLabel","querySelector","hasIcon","tabIndex","hasTabIndex","hasAttribute","getAttribute","render","rel","layout","attrs","download","h","Host","onKeyup","role","tabindex","id","class","Object","assign","part"],"sources":["src/components/tab-button/tab-button.css?tag=road-tab-button&encapsulation=shadow","src/components/tab-button/tab-button.tsx"],"sourcesContent":["/*\n * Tab button\n *\n * Index\n * - Button\n * - Native\n * - Underline\n * - Inner\n * - Icon\n * - Label\n *\n */\n\n/**\n * @prop --padding-start: Left padding  of the button\n * @prop --padding-end: Right padding of the button\n * @prop --tab-color: Default color of the tab button text\n * @prop --tab-color-selected: Color of the tab button text when selected\n * @prop --tab-unerline-selected: Color of the tab button underline when selected\n * @prop --tab-background-hover: Color of the tab button when hover by a mouse\n * @prop --tab-background-focused: Color of the tab button when focused with the tab key\n */\n\n\n/* BUTTON\n -------------------- */\n\n:host {\n  box-sizing: border-box;\n  font-weight: 700;\n  color: var(--tab-color);\n  outline: 0;\n  transition: background 0.15s ease-in-out;\n}\n\n/**\n * Active state\n */\n\n:host(.tab-secondary) {\n  --tab-underline-selected: var(--road-secondary-600);\n}\n\n:host(.tab-selected) {\n  color: var(--tab-color-selected);\n}\n\n:host(.tab-selected) ::slotted(road-icon) {\n  color: var(--tab-color-selected);\n}\n\n:host(.tab-selected) .button-native::after {\n  background: var(--tab-underline-selected);\n  opacity: 1;\n  transform: none;\n}\n\n/**\n * Hover state\n */\n\n:host(:hover) {\n  background: var(--tab-background-hover);\n}\n\n/**\n * Focus state\n */\n\n:host(.focus-visible) {\n  background: var(--tab-background-focused);\n}\n\n\n/* NATIVE\n -------------------- */\n\n.button-native {\n  position: relative;\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: inherit;\n  align-items: inherit;\n  justify-content: inherit;\n  width: 100%;\n  height: 100%;\n  min-height: 3.5rem;\n  padding: 0.75rem var(--padding-end, 1.5rem) 0.75rem var(--padding-start, 1.5rem);\n  margin: 0;\n  overflow: hidden;\n  font-family: inherit;\n  font-size: inherit;\n  font-style: inherit;\n  font-weight: inherit;\n  color: inherit;\n  text-align: inherit;\n  text-decoration: none;\n  text-indent: inherit;\n  text-overflow: inherit;\n  text-transform: inherit;\n  letter-spacing: inherit;\n  white-space: inherit;\n  cursor: pointer;\n  background: transparent;\n  -webkit-user-drag: none;\n  border-color: initial;\n  border-style: initial;\n  border-width: 0;\n  border-radius: inherit;\n  border-image: initial;\n  outline: none;\n  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n}\n\n/* UNDERLINE\n -------------------- */\n\n.button-native::after {\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  display: block;\n  width: 100%;\n  height: 2px;\n  content: \"\";\n  opacity: 0;\n  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);\n  transform: scaleX(0);\n  transform-origin: center;\n}\n\n/* INNER\n -------------------- */\n\n.button-inner {\n  position: relative;\n  z-index: 1;\n  display: flex;\n  flex-flow: inherit;\n  align-items: center;\n  justify-content: center;\n  width: 100%;\n  height: 100%;\n}\n\n/* ICON\n -------------------- */\n\n:host ::slotted(road-icon) {\n  color: var(--tab-color);\n}\n\n:host(.tab-layout-icon-start) ::slotted(road-icon) {\n  margin-right: 0.5rem;\n}\n\n:host(.tab-layout-icon-top) .button-inner {\n  flex-direction: column;\n}\n\n/* LABEL\n -------------------- */\n\n:host ::slotted(road-label) {\n  display: -webkit-box;\n  font-size: 1rem;\n  -webkit-line-clamp: 2;\n  -webkit-box-orient: vertical;\n  white-space: inherit;\n}\n\n:host(.tab-layout-icon-top) ::slotted(road-label) {\n  margin-top: 0.25rem;\n  font-size: 1rem;\n}\n","import { Component, Element, Event, EventEmitter, Host, Listen, Prop, h } from '@stencil/core';\n\n/**\n * @slot  - Content of the tab-button, it should be road-icon and road-label elements.\n *\n * @part native - The native HTML anchor element that wraps all child elements.\n */\n\n@Component({\n  tag: 'road-tab-button',\n  styleUrl: 'tab-button.css',\n  shadow: true,\n})\nexport class TabButton {\n\n  @Element() el!: HTMLRoadTabButtonElement;\n\n  /**\n   * This attribute instructs browsers to download a URL instead of navigating to\n   * it, so the user will be prompted to save it as a local file. If the attribute\n   * has a value, it is used as the pre-filled file name in the Save prompt\n   * (the user can still change the file name if they want).\n   */\n  @Prop() download: string | undefined;\n\n  /**\n   * Contains a URL or a URL fragment that the hyperlink points to.\n   * If this property is set, an anchor tag will be rendered.\n   */\n  @Prop() href: string | undefined;\n\n  /**\n   * Specifies the relationship of the target object to the link object.\n   * The value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types).\n   */\n  @Prop() rel: string | undefined;\n\n  /**\n   * Set the layout of the text and icon in the tab bar.\n   * It defaults to `'icon-top'`.\n   */\n  @Prop() layout?: 'icon-start' | 'icon-top' = 'icon-start';\n\n  /**\n   * The selected tab component\n   */\n  @Prop({ mutable: true }) selected = false;\n\n  /**\n   * A tab id must be provided for each `road-tab`. It's used internally to reference\n   */\n  @Prop() tab?: string;\n\n  /**\n   * Specifies where to display the linked URL.\n   * Only applies when an `href` is provided.\n   * Special keywords: `\"_blank\"`, `\"_self\"`, `\"_parent\"`, `\"_top\"`.\n   */\n  @Prop() target: string | undefined;\n\n  /**\n   * Emitted when the tab bar is clicked\n   * @internal\n   */\n  @Event() roadtabbuttonclick!: EventEmitter;\n  /** @internal */\n  @Event() roadTabButtonClick!: EventEmitter;\n\n  @Listen('roadTabBarChanged', { target: 'window' })\n  @Listen('roadTabbarchanged', { target: 'window' })\n  onTabBarChanged(ev: CustomEvent) {\n    const dispatchedFrom = ev.target as HTMLElement;\n    const parent = this.el.parentElement as EventTarget;\n\n    if ((ev.composedPath && ev.composedPath().includes(parent)) || (dispatchedFrom && dispatchedFrom.contains(this.el))) {\n      this.selected = this.tab === ev.detail.tab;\n    }\n  }\n\n  private selectTab(ev: Event | KeyboardEvent) {\n    if (this.tab !== undefined) {\n      this.roadtabbuttonclick.emit({\n        tab: this.tab,\n        href: this.href,\n        selected: this.selected,\n      });\n      this.roadTabButtonClick.emit({\n        tab: this.tab,\n        href: this.href,\n        selected: this.selected,\n      });\n\n      ev.preventDefault();\n    }\n  }\n\n  private get hasLabel() {\n    return !!this.el.querySelector('road-label');\n  }\n\n  private get hasIcon() {\n    return !!this.el.querySelector('road-icon');\n  }\n\n  private get tabIndex() {\n    const hasTabIndex = this.el.hasAttribute('tabindex');\n\n    if (hasTabIndex) {\n      return this.el.getAttribute('tabindex');\n    }\n\n    return 0;\n  }\n\n  private onKeyUp = (ev: KeyboardEvent) => {\n    if (ev.key === 'Enter' || ev.key === ' ') {\n      this.selectTab(ev);\n    }\n  };\n\n  private onClick = (ev: Event) => {\n    this.selectTab(ev);\n  };\n\n  render() {\n    const { hasIcon, hasLabel, tabIndex, href, rel, target, layout, selected, tab } = this;\n    const attrs = {\n      download: this.download,\n      href,\n      rel,\n      target,\n    };\n\n    return (\n      <Host\n        onClick={this.onClick}\n        onKeyup={this.onKeyUp}\n        role=\"tab\"\n        tabindex={tabIndex}\n        aria-selected={selected ? 'true' : null}\n        id={tab !== undefined ? `tab-button-${tab}` : null}\n        class={{\n          'tab-selected': selected,\n          'tab-has-label': hasLabel,\n          'tab-has-icon': hasIcon,\n          'tab-has-label-only': hasLabel && !hasIcon,\n          'tab-has-icon-only': hasIcon && !hasLabel,\n          [`tab-layout-${layout}`]: true,\n        }}\n      >\n        <a {...attrs} tabIndex={-1} class=\"button-native\" part=\"native\">\n          <span class=\"button-inner\">\n            <slot/>\n          </span>\n        </a>\n      </Host>\n    );\n  }\n}"],"mappings":"gEAAA,MAAMA,EAAe,o/D,MCaRC,EAAS,M,uIAqGZC,KAAAC,QAAWC,IACjB,GAAIA,EAAGC,MAAQ,SAAWD,EAAGC,MAAQ,IAAK,CACxCH,KAAKI,UAAUF,E,GAIXF,KAAAK,QAAWH,IACjBF,KAAKI,UAAUF,EAAG,E,2EAhFyB,a,cAKT,M,yCAwBpC,eAAAI,CAAgBJ,GACd,MAAMK,EAAiBL,EAAGM,OAC1B,MAAMC,EAAST,KAAKU,GAAGC,cAEvB,GAAKT,EAAGU,cAAgBV,EAAGU,eAAeC,SAASJ,IAAaF,GAAkBA,EAAeO,SAASd,KAAKU,IAAM,CACnHV,KAAKe,SAAWf,KAAKgB,MAAQd,EAAGe,OAAOD,G,EAInC,SAAAZ,CAAUF,GAChB,GAAIF,KAAKgB,MAAQE,UAAW,CAC1BlB,KAAKmB,mBAAmBC,KAAK,CAC3BJ,IAAKhB,KAAKgB,IACVK,KAAMrB,KAAKqB,KACXN,SAAUf,KAAKe,WAEjBf,KAAKsB,mBAAmBF,KAAK,CAC3BJ,IAAKhB,KAAKgB,IACVK,KAAMrB,KAAKqB,KACXN,SAAUf,KAAKe,WAGjBb,EAAGqB,gB,EAIP,YAAYC,GACV,QAASxB,KAAKU,GAAGe,cAAc,a,CAGjC,WAAYC,GACV,QAAS1B,KAAKU,GAAGe,cAAc,Y,CAGjC,YAAYE,GACV,MAAMC,EAAc5B,KAAKU,GAAGmB,aAAa,YAEzC,GAAID,EAAa,CACf,OAAO5B,KAAKU,GAAGoB,aAAa,W,CAG9B,OAAO,C,CAaT,MAAAC,GACE,MAAML,QAAEA,EAAOF,SAAEA,EAAQG,SAAEA,EAAQN,KAAEA,EAAIW,IAAEA,EAAGxB,OAAEA,EAAMyB,OAAEA,EAAMlB,SAAEA,EAAQC,IAAEA,GAAQhB,KAClF,MAAMkC,EAAQ,CACZC,SAAUnC,KAAKmC,SACfd,OACAW,MACAxB,UAGF,OACE4B,EAACC,EAAI,CACHhC,QAASL,KAAKK,QACdiC,QAAStC,KAAKC,QACdsC,KAAK,MACLC,SAAUb,EAAQ,gBACHZ,EAAW,OAAS,KACnC0B,GAAIzB,IAAQE,UAAY,cAAcF,IAAQ,KAC9C0B,MAAO,CACL,eAAgB3B,EAChB,gBAAiBS,EACjB,eAAgBE,EAChB,qBAAsBF,IAAaE,EACnC,oBAAqBA,IAAYF,EACjC,CAAC,cAAcS,KAAW,OAG5BG,EAAA,IAAAO,OAAAC,OAAA,GAAOV,EAAK,CAAEP,UAAW,EAAGe,MAAM,gBAAgBG,KAAK,WACrDT,EAAA,QAAMM,MAAM,gBACVN,EAAA,e"}
+{"version":3,"names":["tabButtonCss","TabButton","this","onKeyUp","ev","key","selectTab","onClick","onTabBarChanged","dispatchedFrom","target","parent","el","parentElement","composedPath","includes","contains","selected","tab","detail","undefined","roadtabbuttonclick","emit","href","roadTabButtonClick","preventDefault","hasLabel","querySelector","hasIcon","tabIndex","hasTabIndex","hasAttribute","getAttribute","render","rel","layout","attrs","download","h","Host","onKeyup","role","tabindex","id","class","Object","assign","part"],"sources":["src/components/tab-button/tab-button.css?tag=road-tab-button&encapsulation=shadow","src/components/tab-button/tab-button.tsx"],"sourcesContent":["/*\n * Tab button\n *\n * Index\n * - Button\n * - Native\n * - Underline\n * - Inner\n * - Icon\n * - Label\n *\n */\n\n/**\n * @prop --padding-start: Left padding  of the button\n * @prop --padding-end: Right padding of the button\n * @prop --tab-color: Default color of the tab button text\n * @prop --tab-color-selected: Color of the tab button text when selected\n * @prop --tab-unerline-selected: Color of the tab button underline when selected\n * @prop --tab-background-hover: Color of the tab button when hover by a mouse\n * @prop --tab-background-focused: Color of the tab button when focused with the tab key\n */\n\n\n/* BUTTON\n -------------------- */\n\n:host {\n  box-sizing: border-box;\n  font-weight: 700;\n  color: var(--tab-color);\n  outline: 0;\n  transition: background 0.15s ease-in-out;\n}\n\n/**\n * Active state\n */\n\n:host(.tab-secondary) {\n  --tab-underline-selected: var(--road-secondary-600);\n}\n\n:host(.tab-selected) {\n  color: var(--tab-color-selected);\n}\n\n:host(.tab-selected) ::slotted(road-icon) {\n  color: var(--tab-color-selected);\n}\n\n:host(.tab-selected) .button-native::after {\n  background: var(--tab-underline-selected);\n  opacity: 1;\n  transform: none;\n}\n\n/**\n * Hover state\n */\n\n:host(:hover) {\n  background: var(--tab-background-hover);\n}\n\n/**\n * Focus state\n */\n\n:host(.focus-visible) {\n  background: var(--tab-background-focused);\n}\n\n\n/* NATIVE\n -------------------- */\n\n.button-native {\n  position: relative;\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: inherit;\n  align-items: inherit;\n  justify-content: inherit;\n  width: 100%;\n  height: 100%;\n  min-height: 3.5rem;\n  padding: 0.75rem var(--padding-end, 1.5rem) 0.75rem var(--padding-start, 1.5rem);\n  margin: 0;\n  overflow: hidden;\n  font-family: inherit;\n  font-size: inherit;\n  font-style: inherit;\n  font-weight: inherit;\n  color: inherit;\n  text-align: inherit;\n  text-decoration: none;\n  text-indent: inherit;\n  text-overflow: inherit;\n  text-transform: inherit;\n  letter-spacing: inherit;\n  white-space: inherit;\n  cursor: pointer;\n  background: transparent;\n  -webkit-user-drag: none;\n  border-color: initial;\n  border-style: initial;\n  border-width: 0;\n  border-radius: inherit;\n  border-image: initial;\n  outline: none;\n  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n}\n\n/* UNDERLINE\n -------------------- */\n\n.button-native::after {\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  display: block;\n  width: 100%;\n  height: 2px;\n  content: \"\";\n  opacity: 0;\n  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);\n  transform: scaleX(0);\n  transform-origin: center;\n}\n\n/* INNER\n -------------------- */\n\n.button-inner {\n  position: relative;\n  z-index: 1;\n  display: flex;\n  flex-flow: inherit;\n  align-items: center;\n  justify-content: center;\n  width: 100%;\n  height: 100%;\n}\n\n/* ICON\n -------------------- */\n\n:host ::slotted(road-icon) {\n  color: var(--tab-color);\n}\n\n:host(.tab-layout-icon-start) ::slotted(road-icon) {\n  margin-right: 0.5rem;\n}\n\n:host(.tab-layout-icon-top) .button-inner {\n  flex-direction: column;\n}\n\n/* LABEL\n -------------------- */\n\n:host ::slotted(road-label) {\n  display: -webkit-box;\n  font-size: 1rem;\n  -webkit-line-clamp: 2;\n  -webkit-box-orient: vertical;\n  white-space: inherit;\n}\n\n:host(.tab-layout-icon-top) ::slotted(road-label) {\n  margin-top: 0.25rem;\n  font-size: 1rem;\n}\n","import { Component, Element, Event, EventEmitter, Host, Listen, Prop, h } from '@stencil/core';\n\n/**\n * @slot  - Content of the tab-button, it should be road-icon and road-label elements.\n *\n * @part native - The native HTML anchor element that wraps all child elements.\n */\n\n@Component({\n  tag: 'road-tab-button',\n  styleUrl: 'tab-button.css',\n  shadow: true,\n})\nexport class TabButton {\n\n  @Element() el!: HTMLRoadTabButtonElement;\n\n  /**\n   * This attribute instructs browsers to download a URL instead of navigating to\n   * it, so the user will be prompted to save it as a local file. If the attribute\n   * has a value, it is used as the pre-filled file name in the Save prompt\n   * (the user can still change the file name if they want).\n   */\n  @Prop() download: string | undefined;\n\n  /**\n   * Contains a URL or a URL fragment that the hyperlink points to.\n   * If this property is set, an anchor tag will be rendered.\n   */\n  @Prop() href: string | undefined;\n\n  /**\n   * Specifies the relationship of the target object to the link object.\n   * The value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types).\n   */\n  @Prop() rel: string | undefined;\n\n  /**\n   * Set the layout of the text and icon in the tab bar.\n   * It defaults to `'icon-start'`.\n   */\n  @Prop() layout?: 'icon-start' | 'icon-top' = 'icon-start';\n\n  /**\n   * The selected tab component\n   */\n  @Prop({ mutable: true }) selected = false;\n\n  /**\n   * A tab id must be provided for each `road-tab`. It's used internally to reference\n   */\n  @Prop() tab?: string;\n\n  /**\n   * Specifies where to display the linked URL.\n   * Only applies when an `href` is provided.\n   * Special keywords: `\"_blank\"`, `\"_self\"`, `\"_parent\"`, `\"_top\"`.\n   */\n  @Prop() target: string | undefined;\n\n  /**\n   * Emitted when the tab bar is clicked\n   * @internal\n   */\n  @Event() roadtabbuttonclick!: EventEmitter;\n  /** @internal */\n  @Event() roadTabButtonClick!: EventEmitter;\n\n  @Listen('roadTabBarChanged', { target: 'window' })\n  @Listen('roadTabbarchanged', { target: 'window' })\n  onTabBarChanged(ev: CustomEvent) {\n    const dispatchedFrom = ev.target as HTMLElement;\n    const parent = this.el.parentElement as EventTarget;\n\n    if ((ev.composedPath && ev.composedPath().includes(parent)) || (dispatchedFrom && dispatchedFrom.contains(this.el))) {\n      this.selected = this.tab === ev.detail.tab;\n    }\n  }\n\n  private selectTab(ev: Event | KeyboardEvent) {\n    if (this.tab !== undefined) {\n      this.roadtabbuttonclick.emit({\n        tab: this.tab,\n        href: this.href,\n        selected: this.selected,\n      });\n      this.roadTabButtonClick.emit({\n        tab: this.tab,\n        href: this.href,\n        selected: this.selected,\n      });\n\n      ev.preventDefault();\n    }\n  }\n\n  private get hasLabel() {\n    return !!this.el.querySelector('road-label');\n  }\n\n  private get hasIcon() {\n    return !!this.el.querySelector('road-icon');\n  }\n\n  private get tabIndex() {\n    const hasTabIndex = this.el.hasAttribute('tabindex');\n\n    if (hasTabIndex) {\n      return this.el.getAttribute('tabindex');\n    }\n\n    return 0;\n  }\n\n  private onKeyUp = (ev: KeyboardEvent) => {\n    if (ev.key === 'Enter' || ev.key === ' ') {\n      this.selectTab(ev);\n    }\n  };\n\n  private onClick = (ev: Event) => {\n    this.selectTab(ev);\n  };\n\n  render() {\n    const { hasIcon, hasLabel, tabIndex, href, rel, target, layout, selected, tab } = this;\n    const attrs = {\n      download: this.download,\n      href,\n      rel,\n      target,\n    };\n\n    return (\n      <Host\n        onClick={this.onClick}\n        onKeyup={this.onKeyUp}\n        role=\"tab\"\n        tabindex={tabIndex}\n        aria-selected={selected ? 'true' : null}\n        id={tab !== undefined ? `tab-button-${tab}` : null}\n        class={{\n          'tab-selected': selected,\n          'tab-has-label': hasLabel,\n          'tab-has-icon': hasIcon,\n          'tab-has-label-only': hasLabel && !hasIcon,\n          'tab-has-icon-only': hasIcon && !hasLabel,\n          [`tab-layout-${layout}`]: true,\n        }}\n      >\n        <a {...attrs} tabIndex={-1} class=\"button-native\" part=\"native\">\n          <span class=\"button-inner\">\n            <slot/>\n          </span>\n        </a>\n      </Host>\n    );\n  }\n}\n"],"mappings":"gEAAA,MAAMA,EAAe,o/D,MCaRC,EAAS,M,uIAqGZC,KAAAC,QAAWC,IACjB,GAAIA,EAAGC,MAAQ,SAAWD,EAAGC,MAAQ,IAAK,CACxCH,KAAKI,UAAUF,E,GAIXF,KAAAK,QAAWH,IACjBF,KAAKI,UAAUF,EAAG,E,2EAhFyB,a,cAKT,M,yCAwBpC,eAAAI,CAAgBJ,GACd,MAAMK,EAAiBL,EAAGM,OAC1B,MAAMC,EAAST,KAAKU,GAAGC,cAEvB,GAAKT,EAAGU,cAAgBV,EAAGU,eAAeC,SAASJ,IAAaF,GAAkBA,EAAeO,SAASd,KAAKU,IAAM,CACnHV,KAAKe,SAAWf,KAAKgB,MAAQd,EAAGe,OAAOD,G,EAInC,SAAAZ,CAAUF,GAChB,GAAIF,KAAKgB,MAAQE,UAAW,CAC1BlB,KAAKmB,mBAAmBC,KAAK,CAC3BJ,IAAKhB,KAAKgB,IACVK,KAAMrB,KAAKqB,KACXN,SAAUf,KAAKe,WAEjBf,KAAKsB,mBAAmBF,KAAK,CAC3BJ,IAAKhB,KAAKgB,IACVK,KAAMrB,KAAKqB,KACXN,SAAUf,KAAKe,WAGjBb,EAAGqB,gB,EAIP,YAAYC,GACV,QAASxB,KAAKU,GAAGe,cAAc,a,CAGjC,WAAYC,GACV,QAAS1B,KAAKU,GAAGe,cAAc,Y,CAGjC,YAAYE,GACV,MAAMC,EAAc5B,KAAKU,GAAGmB,aAAa,YAEzC,GAAID,EAAa,CACf,OAAO5B,KAAKU,GAAGoB,aAAa,W,CAG9B,OAAO,C,CAaT,MAAAC,GACE,MAAML,QAAEA,EAAOF,SAAEA,EAAQG,SAAEA,EAAQN,KAAEA,EAAIW,IAAEA,EAAGxB,OAAEA,EAAMyB,OAAEA,EAAMlB,SAAEA,EAAQC,IAAEA,GAAQhB,KAClF,MAAMkC,EAAQ,CACZC,SAAUnC,KAAKmC,SACfd,OACAW,MACAxB,UAGF,OACE4B,EAACC,EAAI,CACHhC,QAASL,KAAKK,QACdiC,QAAStC,KAAKC,QACdsC,KAAK,MACLC,SAAUb,EAAQ,gBACHZ,EAAW,OAAS,KACnC0B,GAAIzB,IAAQE,UAAY,cAAcF,IAAQ,KAC9C0B,MAAO,CACL,eAAgB3B,EAChB,gBAAiBS,EACjB,eAAgBE,EAChB,qBAAsBF,IAAaE,EACnC,oBAAqBA,IAAYF,EACjC,CAAC,cAAcS,KAAW,OAG5BG,EAAA,IAAAO,OAAAC,OAAA,GAAOV,EAAK,CAAEP,UAAW,EAAGe,MAAM,gBAAgBG,KAAK,WACrDT,EAAA,QAAMM,MAAM,gBACVN,EAAA,e"}

package/dist/roadtrip/p-f64453a3.entry.js

@@ -0,0 +1,2 @@
+import{r as t,c as s,h as i,H as e,a as n}from"./p-f3d586b3.js";const a=":host{position:relative;display:block}";const r=class{constructor(i){t(this,i);this.roadtabswillchange=s(this,"roadtabswillchange",3);this.roadTabsWillChange=s(this,"roadTabsWillChange",3);this.roadtabsdidchange=s(this,"roadtabsdidchange",3);this.roadTabsDidChange=s(this,"roadTabsDidChange",3);this.transitioning=false;this.onTabClicked=t=>{const{tab:s}=t.detail;this.select(s)};this.selectedTab=undefined}async componentWillLoad(){const t=this.tabs;const s=this.el.querySelector("road-tab-bar");const i=s?s.getAttribute("selected-tab"):null;if(t.length>0){if(i){const s=t.find((t=>t.tab===i));if(s){await this.select(s)}else{await this.select(t[0])}}else{await this.select(t[0])}}}componentWillRender(){const t=this.el.querySelector("road-tab-bar");if(t){const s=this.selectedTab?this.selectedTab.tab:undefined;t.selectedTab=s}}async select(t){const s=h(this.tabs,t);if(!this.shouldSwitch(s)){return false}await this.setActive(s);this.tabSwitch();return true}async getTab(t){return h(this.tabs,t)}getSelected(){return Promise.resolve(this.selectedTab?this.selectedTab.tab:undefined)}setActive(t){if(this.transitioning){return Promise.reject("transitioning already happening")}this.transitioning=true;this.leavingTab=this.selectedTab;this.selectedTab=t;this.roadTabsWillChange.emit({tab:t.tab});t.active=true;return Promise.resolve()}tabSwitch(){const t=this.selectedTab;const s=this.leavingTab;this.leavingTab=undefined;this.transitioning=false;if(!t){return}if(s!==t){if(s){s.active=false}this.roadTabsDidChange.emit({tab:t.tab})}}shouldSwitch(t){const s=this.selectedTab;return t!==undefined&&t!==s&&!this.transitioning}get tabs(){return Array.from(this.el.querySelectorAll("road-tab"))}render(){return i(e,{onRoadTabButtonClick:this.onTabClicked},i("slot",{name:"top"}),i("div",{class:"tabs-inner"},i("slot",null)))}get el(){return n(this)}};const h=(t,s)=>{const i=typeof s==="string"?t.find((t=>t.tab===s)):s;if(!i){console.error(`tab with id: "${i}" does not exist`)}return i};r.style=a;export{r as road_tabs};
+//# sourceMappingURL=p-f64453a3.entry.js.map

package/dist/roadtrip/p-f64453a3.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["tabsCss","Tabs","this","transitioning","onTabClicked","ev","tab","detail","select","componentWillLoad","tabs","tabBar","el","querySelector","selectedTabId","getAttribute","length","selectedTab","find","componentWillRender","undefined","getTab","shouldSwitch","setActive","tabSwitch","getSelected","Promise","resolve","reject","leavingTab","roadTabsWillChange","emit","active","roadTabsDidChange","Array","from","querySelectorAll","render","h","Host","onRoadTabButtonClick","name","class","tabEl","t","console","error"],"sources":["src/components/tabs/tabs.css?tag=road-tabs&encapsulation=shadow","src/components/tabs/tabs.tsx"],"sourcesContent":["/*\n * Tabs\n *\n */\n\n:host {\n  position: relative;\n  display: block;\n}\n","import { Component, Element, Event, EventEmitter, Host, Method, State, h } from '@stencil/core';\n\n/**\n * @slot - Content is placed between the named slots if provided without a slot.\n * @slot top - Content is placed at the top of the screen.\n */\n@Component({\n  tag: 'road-tabs',\n  styleUrl: 'tabs.css',\n  shadow: true,\n})\nexport class Tabs {\n\n  private transitioning = false;\n  private leavingTab?: HTMLRoadTabElement;\n\n  @Element() el!: HTMLRoadTabsElement;\n\n  @State() selectedTab?: HTMLRoadTabElement;\n\n  /**\n   * Emitted when the navigation is about to transition to a new component.\n   */\n  @Event({ bubbles: false }) roadtabswillchange!: EventEmitter<{tab: string}>;\n  /** @internal */\n  @Event({ bubbles: false }) roadTabsWillChange!: EventEmitter<{tab: string}>;\n\n  /**\n   * Emitted when the navigation has finished transitioning to a new component.\n   */\n  @Event({ bubbles: false }) roadtabsdidchange!: EventEmitter<{tab: string}>;\n  /** @internal */\n  @Event({ bubbles: false }) roadTabsDidChange!: EventEmitter<{tab: string}>;\n\n  async componentWillLoad() {\n    const tabs = this.tabs;\n    const tabBar = this.el.querySelector('road-tab-bar');\n    const selectedTabId = tabBar ? tabBar.getAttribute('selected-tab') : null;\n    \n    if (tabs.length > 0) {\n      if (selectedTabId) {\n        const selectedTab = tabs.find(tab => tab.tab === selectedTabId);\n        if (selectedTab) {\n          await this.select(selectedTab);\n        } else {\n          await this.select(tabs[0]);\n        }\n      } else {\n        await this.select(tabs[0]);\n      }\n    }\n  }\n\n  componentWillRender() {\n    const tabBar = this.el.querySelector('road-tab-bar');\n    if (tabBar) {\n      const tab = this.selectedTab ? this.selectedTab.tab : undefined;\n      tabBar.selectedTab = tab;\n    }\n  }\n\n  /**\n   * Select a tab by the value of its `tab` property or an element reference.\n   *\n   * @param tab The tab instance to select. If passed a string, it should be the value of the tab's `tab` property.\n   */\n  @Method()\n  async select(tab: string | HTMLRoadTabElement): Promise<boolean> {\n    const selectedTab = getTab(this.tabs, tab);\n    if (!this.shouldSwitch(selectedTab)) {\n      return false;\n    }\n    await this.setActive(selectedTab);\n    this.tabSwitch();\n\n    return true;\n  }\n\n  /**\n   * Get a specific tab by the value of its `tab` property or an element reference.\n   *\n   * @param tab The tab instance to select. If passed a string, it should be the value of the tab's `tab` property.\n   */\n  @Method()\n  async getTab(tab: string | HTMLRoadTabElement): Promise<HTMLRoadTabElement | undefined> {\n    return getTab(this.tabs, tab);\n  }\n\n  /**\n   * Get the currently selected tab.\n   */\n  @Method()\n  getSelected(): Promise<string | undefined> {\n    return Promise.resolve(this.selectedTab ? this.selectedTab.tab : undefined);\n  }\n\n  private setActive(selectedTab: HTMLRoadTabElement): Promise<void> {\n    if (this.transitioning) {\n      return Promise.reject('transitioning already happening');\n    }\n\n    this.transitioning = true;\n    this.leavingTab = this.selectedTab;\n    this.selectedTab = selectedTab;\n    this.roadTabsWillChange.emit({ tab: selectedTab.tab });\n    selectedTab.active = true;\n    return Promise.resolve();\n  }\n\n  private tabSwitch() {\n    const selectedTab = this.selectedTab;\n    const leavingTab = this.leavingTab;\n\n    this.leavingTab = undefined;\n    this.transitioning = false;\n    if (!selectedTab) {\n      return;\n    }\n\n    if (leavingTab !== selectedTab) {\n      if (leavingTab) {\n        leavingTab.active = false;\n      }\n      this.roadTabsDidChange.emit({ tab: selectedTab.tab });\n    }\n  }\n\n  private shouldSwitch(selectedTab: HTMLRoadTabElement | undefined): selectedTab is HTMLRoadTabElement {\n    const leavingTab = this.selectedTab;\n    return selectedTab !== undefined && selectedTab !== leavingTab && !this.transitioning;\n  }\n\n  private get tabs() {\n    return Array.from(this.el.querySelectorAll('road-tab'));\n  }\n\n  private onTabClicked = (ev: CustomEvent) => {\n    const { tab } = ev.detail;\n    this.select(tab);\n  };\n\n  render() {\n    return (\n      <Host\n        onRoadTabButtonClick={this.onTabClicked}\n      >\n        <slot name=\"top\"/>\n        <div class=\"tabs-inner\">\n          <slot/>\n        </div>\n      </Host>\n    );\n  }\n}\n\nconst getTab = (tabs: HTMLRoadTabElement[], tab: string | HTMLRoadTabElement): HTMLRoadTabElement | undefined => {\n  const tabEl = (typeof tab === 'string')\n    ? tabs.find(t => t.tab === tab)\n    : tab;\n\n  if (!tabEl) {\n    console.error(`tab with id: \"${tabEl}\" does not exist`);\n  }\n  return tabEl;\n};"],"mappings":"gEAAA,MAAMA,EAAU,yC,MCWHC,EAAI,M,iPAEPC,KAAAC,cAAgB,MA2HhBD,KAAAE,aAAgBC,IACtB,MAAMC,IAAEA,GAAQD,EAAGE,OACnBL,KAAKM,OAAOF,EAAI,E,2BAxGlB,uBAAMG,GACJ,MAAMC,EAAOR,KAAKQ,KAClB,MAAMC,EAAST,KAAKU,GAAGC,cAAc,gBACrC,MAAMC,EAAgBH,EAASA,EAAOI,aAAa,gBAAkB,KAErE,GAAIL,EAAKM,OAAS,EAAG,CACnB,GAAIF,EAAe,CACjB,MAAMG,EAAcP,EAAKQ,MAAKZ,GAAOA,EAAIA,MAAQQ,IACjD,GAAIG,EAAa,OACTf,KAAKM,OAAOS,E,KACb,OACCf,KAAKM,OAAOE,EAAK,G,MAEpB,OACCR,KAAKM,OAAOE,EAAK,G,GAK7B,mBAAAS,GACE,MAAMR,EAAST,KAAKU,GAAGC,cAAc,gBACrC,GAAIF,EAAQ,CACV,MAAML,EAAMJ,KAAKe,YAAcf,KAAKe,YAAYX,IAAMc,UACtDT,EAAOM,YAAcX,C,EAUzB,YAAME,CAAOF,GACX,MAAMW,EAAcI,EAAOnB,KAAKQ,KAAMJ,GACtC,IAAKJ,KAAKoB,aAAaL,GAAc,CACnC,OAAO,K,OAEHf,KAAKqB,UAAUN,GACrBf,KAAKsB,YAEL,OAAO,I,CAST,YAAMH,CAAOf,GACX,OAAOe,EAAOnB,KAAKQ,KAAMJ,E,CAO3B,WAAAmB,GACE,OAAOC,QAAQC,QAAQzB,KAAKe,YAAcf,KAAKe,YAAYX,IAAMc,U,CAG3D,SAAAG,CAAUN,GAChB,GAAIf,KAAKC,cAAe,CACtB,OAAOuB,QAAQE,OAAO,kC,CAGxB1B,KAAKC,cAAgB,KACrBD,KAAK2B,WAAa3B,KAAKe,YACvBf,KAAKe,YAAcA,EACnBf,KAAK4B,mBAAmBC,KAAK,CAAEzB,IAAKW,EAAYX,MAChDW,EAAYe,OAAS,KACrB,OAAON,QAAQC,S,CAGT,SAAAH,GACN,MAAMP,EAAcf,KAAKe,YACzB,MAAMY,EAAa3B,KAAK2B,WAExB3B,KAAK2B,WAAaT,UAClBlB,KAAKC,cAAgB,MACrB,IAAKc,EAAa,CAChB,M,CAGF,GAAIY,IAAeZ,EAAa,CAC9B,GAAIY,EAAY,CACdA,EAAWG,OAAS,K,CAEtB9B,KAAK+B,kBAAkBF,KAAK,CAAEzB,IAAKW,EAAYX,K,EAI3C,YAAAgB,CAAaL,GACnB,MAAMY,EAAa3B,KAAKe,YACxB,OAAOA,IAAgBG,WAAaH,IAAgBY,IAAe3B,KAAKC,a,CAG1E,QAAYO,GACV,OAAOwB,MAAMC,KAAKjC,KAAKU,GAAGwB,iBAAiB,Y,CAQ7C,MAAAC,GACE,OACEC,EAACC,EAAI,CACHC,qBAAsBtC,KAAKE,cAE3BkC,EAAA,QAAMG,KAAK,QACXH,EAAA,OAAKI,MAAM,cACTJ,EAAA,c,2BAOV,MAAMjB,EAAS,CAACX,EAA4BJ,KAC1C,MAAMqC,SAAgBrC,IAAQ,SAC1BI,EAAKQ,MAAK0B,GAAKA,EAAEtC,MAAQA,IACzBA,EAEJ,IAAKqC,EAAO,CACVE,QAAQC,MAAM,iBAAiBH,oB,CAEjC,OAAOA,CAAK,E"}

package/dist/roadtrip/p-faf16a12.entry.js

@@ -0,0 +1,2 @@
+import{r as a,c as t,h as r,H as e,a as o}from"./p-f3d586b3.js";import"./p-1ccae339.js";const s=":host{--tab-bar-background:var(--road-surface);--tab-color:var(--road-on-surface-weak);--tab-color-selected:var(--road-on-surface);--tab-underline-selected:var(--road-primary);--tab-background:var(--road-surface);--tab-background-hover:var(--road-surface-inverse);--tab-background-focused:var(--road-grey-70);display:flex;width:100%;margin:0;overflow:scroll;overflow-x:inherit;font-family:var(--road-font, sans-serif);line-height:1.5;color:var(--road-on-surface-weak);list-style:none;background:var(--tab-bar-background);border-bottom:1px solid var(--road-outline-weak);fill:currentColor;scrollbar-width:none}:host(::-webkit-scrollbar){display:none}:host(.tab-expand) ::slotted(road-tab-button){width:100%}:host(.tab-secondary) ::slotted(road-tab-button){--tab-underline-selected:var(--road-secondary)}:host(.tab-center){justify-content:center}";const n=class{constructor(r){a(this,r);this.roadtabbarchanged=t(this,"roadtabbarchanged",7);this.roadTabBarChanged=t(this,"roadTabBarChanged",7);this.secondary=false;this.expand=false;this.center=false;this.selectedTab=undefined}selectedTabChanged(){if(this.selectedTab!==undefined){this.roadtabbarchanged.emit({tab:this.selectedTab});this.roadTabBarChanged.emit({tab:this.selectedTab})}}onTabButtonClick(a){this.selectedTab=a.detail.tab}componentWillLoad(){this.selectedTabChanged()}render(){const{expand:a,center:t,secondary:o}=this;return r(e,{role:"tablist",class:{"tab-expand":a,"tab-center":t,"tab-secondary":o}},r("slot",null))}get el(){return o(this)}static get watchers(){return{selectedTab:["selectedTabChanged"]}}};n.style=s;export{n as road_tab_bar};
+//# sourceMappingURL=p-faf16a12.entry.js.map

package/dist/roadtrip/p-faf16a12.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["tabBarCss","TabBar","selectedTabChanged","this","selectedTab","undefined","roadtabbarchanged","emit","tab","roadTabBarChanged","onTabButtonClick","ev","detail","componentWillLoad","render","expand","center","secondary","h","Host","role","class"],"sources":["src/components/tab-bar/tab-bar.css?tag=road-tab-bar&encapsulation=shadow","src/components/tab-bar/tab-bar.tsx"],"sourcesContent":["/*\n * Tab bar\n *\n */\n\n/**\n * @prop --tab-background: background color of the tab bar\n */\n\n\n:host {\n  --tab-bar-background: var(--road-surface);\n  --tab-color: var(--road-on-surface-weak);\n  --tab-color-selected: var(--road-on-surface);\n  --tab-underline-selected: var(--road-primary);\n  --tab-background: var(--road-surface);\n  --tab-background-hover: var(--road-surface-inverse);\n  --tab-background-focused: var(--road-grey-70);\n\n  display: flex;\n  width: 100%;\n  margin: 0;\n  overflow: scroll;\n  overflow-x: inherit;\n  font-family: var(--road-font, sans-serif);\n  line-height: 1.5;\n  color: var(--road-on-surface-weak);\n  list-style: none;\n  background: var(--tab-bar-background);\n  border-bottom: 1px solid var(--road-outline-weak);\n  fill: currentColor;\n  scrollbar-width: none;\n}\n\n:host(::-webkit-scrollbar) {\n  display: none;\n}\n\n:host(.tab-expand) ::slotted(road-tab-button) {\n  width: 100%;\n}\n\n:host(.tab-secondary) ::slotted(road-tab-button) {\n  --tab-underline-selected: var(--road-secondary);\n}\n\n:host(.tab-center) {\n  justify-content: center;\n}\n","import { Component, Element, Event, EventEmitter, Host, Prop, Watch, Listen, h } from '@stencil/core';\nimport './../../utils/polyfill';\n\n/**\n * @slot  - Content of the tabBar, it should be road-tab-button elements.\n */\n\n@Component({\n  tag: 'road-tab-bar',\n  styleUrl: 'tab-bar.css',\n  shadow: true,\n})\nexport class TabBar {\n\n  @Element() el!: HTMLRoadTabBarElement;\n\n  /**\n   * The color to use the color Secondary from your application's color palette.\n   */\n  @Prop() secondary: boolean = false;\n\n  /**\n   * Set to `true` to expand buttons width to take the full size of the bar.\n   */\n  @Prop() expand: boolean = false;\n\n  /**\n   * Set to `true` to center buttons in the bar.\n   */\n  @Prop() center: boolean = false;\n\n  /**\n   * The selected tab component\n   */\n  @Prop({ mutable: true, reflect: true }) selectedTab?: string;\n  @Watch('selectedTab')\n  selectedTabChanged() {\n    if (this.selectedTab !== undefined) {\n      this.roadtabbarchanged.emit({\n        tab: this.selectedTab,\n      });\n      this.roadTabBarChanged.emit({\n        tab: this.selectedTab,\n      });\n    }\n  }\n\n  /** @internal */\n  @Event() roadtabbarchanged!: EventEmitter;\n  /** @internal */\n  @Event() roadTabBarChanged!: EventEmitter;\n\n  @Listen('roadTabButtonClick')\n  onTabButtonClick(ev: CustomEvent) {\n    this.selectedTab = ev.detail.tab;\n  }\n\n  componentWillLoad() {\n    this.selectedTabChanged();\n  }\n\n  render() {\n    const { expand, center, secondary } = this;\n    return (\n      <Host\n        role=\"tablist\"\n        class={{\n          'tab-expand': expand,\n          'tab-center': center,\n          'tab-secondary': secondary,\n        }}\n      >\n        <slot/>\n      </Host>\n    );\n  }\n}\n"],"mappings":"wFAAA,MAAMA,EAAY,+0B,MCYLC,EAAM,M,kJAOY,M,YAKH,M,YAKA,M,2BAO1B,kBAAAC,GACE,GAAIC,KAAKC,cAAgBC,UAAW,CAClCF,KAAKG,kBAAkBC,KAAK,CAC1BC,IAAKL,KAAKC,cAEZD,KAAKM,kBAAkBF,KAAK,CAC1BC,IAAKL,KAAKC,a,EAWhB,gBAAAM,CAAiBC,GACfR,KAAKC,YAAcO,EAAGC,OAAOJ,G,CAG/B,iBAAAK,GACEV,KAAKD,oB,CAGP,MAAAY,GACE,MAAMC,OAAEA,EAAMC,OAAEA,EAAMC,UAAEA,GAAcd,KACtC,OACEe,EAACC,EAAI,CACHC,KAAK,UACLC,MAAO,CACL,aAAcN,EACd,aAAcC,EACd,gBAAiBC,IAGnBC,EAAA,a"}

package/dist/roadtrip/roadtrip.esm.js

@@ -1,2 +1,2 @@
-import{p as e,b as a}from"./p-f3d586b3.js";export{s as setNonce}from"./p-f3d586b3.js";const o=()=>{const a=import.meta.url;const o={};if(a!==""){o.resourcesUrl=new URL(".",a).href}return e(o)};o().then((e=>a(JSON.parse('[["p-ef720618",[[2,"road-counter",{"inputId":[1,"input-id"],"min":[2],"max":[2],"step":[1],"value":[2],"size":[1],"dustbin":[4],"readonly":[4],"leftIconClasses":[32],"rightIconClasses":[32],"isDustbinVisible":[32]},null,{"value":["onValueChange"]}],[1,"road-item",{"titleItem":[1,"title-item"],"text":[1],"button":[4],"detail":[4],"active":[4],"detailIcon":[1,"detail-icon"],"disabled":[4],"download":[1],"href":[1],"rel":[1],"lines":[1],"layout":[1],"target":[1],"type":[1],"multipleInputs":[32]}],[1,"road-badge",{"color":[1],"bubble":[4]}],[1,"road-list",{"lines":[1]}],[1,"road-toolbar",{"color":[1]}],[1,"road-drawer",{"isOpen":[1028,"is-open"],"position":[1],"drawerWidth":[2,"drawer-width"],"hasInverseHeader":[4,"has-inverse-header"],"hasBackIcon":[4,"has-back-icon"],"backText":[1,"back-text"],"drawerTitle":[1,"drawer-title"],"hasCloseIcon":[4,"has-close-icon"],"open":[64],"close":[64],"back":[64]},[[4,"keyup","onEscape"]],{"isOpen":["handleOpen"]}],[1,"road-col"],[1,"road-grid"],[1,"road-row"],[6,"road-input",{"inputId":[1,"input-id"],"autocapitalize":[1],"autocomplete":[1],"autocorrect":[1],"autofocus":[4],"disabled":[4],"enterkeyhint":[1],"inputmode":[1],"max":[1],"maxlength":[2],"min":[1],"minlength":[2],"name":[1],"pattern":[1],"placeholder":[1],"readonly":[4],"required":[4],"spellcheck":[4],"step":[1],"size":[2],"sizes":[1],"type":[1],"value":[1032],"label":[1],"error":[1],"helper":[1],"debounce":[2]},null,{"debounce":["debounceChanged"],"value":["valueChanged"]}],[1,"road-button",{"color":[1],"size":[513],"buttonType":[1,"button-type"],"iconOnly":[516,"icon-only"],"disabled":[516],"expand":[516],"download":[1],"href":[1],"rel":[1],"target":[1],"outline":[4]}],[1,"road-input-group"],[1,"road-label"],[1,"road-icon",{"color":[1],"ariaLabel":[1537,"aria-label"],"ariaHidden":[513,"aria-hidden"],"name":[1],"src":[1],"icon":[8],"size":[1],"rotate":[1],"lazy":[4],"sanitize":[4],"svgContent":[32],"isVisible":[32]},null,{"name":["loadIcon"],"src":["loadIcon"],"icon":["loadIcon"]}]]],["p-1c5ac353",[[1,"road-duration",{"isOpen":[1028,"is-open"],"header":[1],"min":[2],"max":[2],"step":[2],"open":[64],"close":[64]},[[0,"roadcardclick","handleClick"]]]]],["p-c6a552b7",[[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"]}]]],["p-09bfd80b",[[1,"road-content-card",{"insetImage":[4,"inset-image"]}]]],["p-27d2770a",[[2,"road-plate-number",{"country":[1],"disabled":[4],"placeholder":[1],"readonly":[4],"value":[1032],"motorbike":[4]},null,{"value":["valueChanged"]}]]],["p-5203acea",[[1,"road-profil-dropdown",{"isOpen":[1028,"is-open"]},[[4,"click","handleDocumentClick"]]]]],["p-cfc0a3a7",[[1,"road-rating",{"size":[513],"rate":[2],"showreviews":[4],"readonly":[4],"reviews":[2],"reviewsText":[1,"reviews-text"],"url":[1]}]]],["p-17ae87b0",[[1,"road-accordion",{"isOpen":[1028,"is-open"],"isLight":[4,"is-light"],"isLightSeparator":[4,"is-light-separator"],"isSmall":[4,"is-small"]}]]],["p-b510e552",[[1,"road-banner",{"isOpen":[1028,"is-open"],"label":[1],"link":[1],"url":[1],"close":[64]}]]],["p-72b3b34a",[[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"]}]]],["p-e8c9c816",[[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"]}]]],["p-31cf9b61",[[1,"road-chip",{"color":[1],"outline":[4],"size":[1],"hasCloseIcon":[4,"has-close-icon"]}]]],["p-7a14e5b7",[[1,"road-collapse",{"isOpen":[1028,"is-open"],"showMore":[1,"show-more"],"showLess":[1,"show-less"],"centered":[4]}]]],["p-18967429",[[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"]]]]],["p-cdefa79c",[[1,"road-dropdown",{"isOpen":[1028,"is-open"],"isLight":[4,"is-light"],"isMedium":[4,"is-medium"],"position":[513],"direction":[513]},[[4,"click","handleDocumentClick"]]]]],["p-233eb25c",[[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"]]]]],["p-9a929988",[[6,"road-range",{"rangeId":[1,"range-id"],"value":[1032],"min":[1],"max":[1],"step":[1],"showValue":[4,"show-value"],"showTick":[4,"show-tick"],"showLabels":[4,"show-labels"]},[[2,"focus","handleFocus"],[2,"blur","handleBlur"]],{"value":["valueChanged"]}]]],["p-16c934bc",[[1,"road-toast",{"isOpen":[1028,"is-open"],"color":[1],"label":[1],"timeout":[2],"open":[64],"close":[64]},null,{"isOpen":["isOpenChanged"]}]]],["p-7db968e6",[[1,"road-alert",{"color":[1],"label":[1],"button":[1],"link":[1],"url":[1]}]]],["p-efe6e22f",[[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"]}]]],["p-dcbb0d20",[[6,"road-autocomplete",{"options":[16],"visible":[32]},[[0,"roadFocus","handleFocus"],[0,"roadfocus","handleFocus"],[4,"click","onClickOutside"]]]]],["p-6ad5091d",[[1,"road-button-floating",{"position":[513],"href":[1],"rel":[1],"target":[1]},[[9,"scroll","onScroll"]]]]],["p-0fca389a",[[4,"road-carousel-item"]]],["p-25ade729",[[1,"road-flap",{"color":[1],"filled":[4],"size":[513]}]]],["p-a5eee655",[[1,"road-global-navigation",{"selectedTab":[1,"selected-tab"]},[[0,"roadNavbarItemClick","onNavbarChanged"],[0,"roadnavbaritemclick","onNavbarChanged"]],{"selectedTab":["selectedTabChanged"]}]]],["p-3bce3bdc",[[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"]}]]],["p-14ecc91e",[[1,"road-navbar",{"selectedTab":[1,"selected-tab"]},[[0,"roadNavbarItemClick","onNavbarChanged"],[0,"roadnavbaritemclick","onNavbarChanged"]],{"selectedTab":["selectedTabChanged"]}]]],["p-9ff79904",[[1,"road-navbar-item",{"disabled":[4],"download":[1],"href":[1],"rel":[1],"selected":[1028],"tab":[1],"target":[1]},[[8,"roadNavbarChanged","onNavbarChanged"],[8,"roadnavbarchanged","onNavbarChanged"]]]]],["p-ebd19369",[[1,"road-progress",{"value":[2],"numbersteps":[1],"label":[1],"showstep":[4],"animation":[4],"light":[4],"fullwidth":[4],"color":[1]}]]],["p-254ba3c4",[[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"]}]]],["p-054acf61",[[1,"road-progress-indicator-vertical"]]],["p-68599145",[[4,"road-progress-indicator-vertical-item"]]],["p-f90af0e1",[[1,"road-progress-tracker"]]],["p-e42a9ec4",[[4,"road-progress-tracker-item"]]],["p-76ccfc61",[[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"]]]]],["p-96abbe85",[[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"]}]]],["p-08b0be1b",[[1,"road-segmented-button",{"size":[1],"selected":[1028],"tab":[1]},[[8,"roadSegmentedButtonBarChanged","onButtonBarChanged"],[8,"roadSegmentedButtonbarchanged","onButtonBarChanged"]]]]],["p-20b115ed",[[1,"road-segmented-button-bar",{"selectedTab":[1,"selected-tab"]},null,{"selectedTab":["selectedTabChanged"]}]]],["p-4ba769a9",[[1,"road-segmented-buttons",{"selectedTab":[32],"select":[64],"getTab":[64],"getSelected":[64]}]]],["p-4a2f2612",[[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"]}]]],["p-73b4f413",[[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"]]]]],["p-b614a9fb",[[1,"road-skeleton"]]],["p-f6d47cda",[[1,"road-spinner",{"size":[513],"color":[513]}]]],["p-30fa62f4",[[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"]}]]],["p-6a27b5fc",[[1,"road-tab",{"active":[1028],"tab":[1],"setActive":[64]}]]],["p-e214386f",[[1,"road-tab-bar",{"secondary":[4],"expand":[4],"center":[4],"selectedTab":[1,"selected-tab"]},null,{"selectedTab":["selectedTabChanged"]}]]],["p-b09c076d",[[1,"road-tab-button",{"download":[1],"href":[1],"rel":[1],"layout":[1],"selected":[1028],"tab":[1],"target":[1]},[[8,"roadTabBarChanged","onTabBarChanged"],[8,"roadTabbarchanged","onTabBarChanged"]]]]],["p-d651deea",[[6,"road-table"]]],["p-db7cb1c8",[[1,"road-tabs",{"selectedTab":[32],"select":[64],"getTab":[64],"getSelected":[64]}]]],["p-cbe0c628",[[1,"road-tag",{"color":[1],"contrast":[4]}]]],["p-5483109e",[[1,"road-text",{"color":[1]}]]],["p-c7866ae4",[[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"]}]]],["p-c1dca3cc",[[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"]}]]],["p-e2c6d81f",[[1,"road-toolbar-title"]]],["p-25683dc7",[[1,"road-toolbar-title-page"]]],["p-c096723c",[[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]}]]],["p-78e9bbd5",[[1,"road-avatar",{"size":[513]}]]],["p-dcbaee2f",[[1,"road-card",{"elevation":[1],"button":[4],"value":[1],"type":[1],"download":[1],"href":[1],"rel":[1],"target":[1]}]]],["p-bfcedcfb",[[1,"road-img",{"alt":[1],"src":[1],"loadSrc":[32],"loadError":[32]},null,{"src":["srcChanged"]}]]]]'),e)));
+import{p as e,b as a}from"./p-f3d586b3.js";export{s as setNonce}from"./p-f3d586b3.js";const o=()=>{const a=import.meta.url;const o={};if(a!==""){o.resourcesUrl=new URL(".",a).href}return e(o)};o().then((e=>a(JSON.parse('[["p-27dcbb18",[[2,"road-counter",{"inputId":[1,"input-id"],"min":[2],"max":[2],"step":[1],"value":[2],"size":[1],"dustbin":[4],"readonly":[4],"leftIconClasses":[32],"rightIconClasses":[32],"isDustbinVisible":[32]},null,{"value":["onValueChange"]}],[1,"road-item",{"titleItem":[1,"title-item"],"text":[1],"button":[4],"detail":[4],"active":[4],"detailIcon":[1,"detail-icon"],"disabled":[4],"download":[1],"href":[1],"rel":[1],"lines":[1],"layout":[1],"target":[1],"type":[1],"multipleInputs":[32]}],[1,"road-badge",{"color":[1],"bubble":[4]}],[1,"road-list",{"lines":[1]}],[1,"road-toolbar",{"color":[1]}],[1,"road-drawer",{"isOpen":[1028,"is-open"],"position":[1],"drawerWidth":[2,"drawer-width"],"hasInverseHeader":[4,"has-inverse-header"],"hasBackIcon":[4,"has-back-icon"],"backText":[1,"back-text"],"drawerTitle":[1,"drawer-title"],"hasCloseIcon":[4,"has-close-icon"],"open":[64],"close":[64],"back":[64]},[[4,"keyup","onEscape"]],{"isOpen":["handleOpen"]}],[1,"road-col"],[1,"road-grid"],[1,"road-row"],[6,"road-input",{"inputId":[1,"input-id"],"autocapitalize":[1],"autocomplete":[1],"autocorrect":[1],"autofocus":[4],"disabled":[4],"enterkeyhint":[1],"inputmode":[1],"max":[1],"maxlength":[2],"min":[1],"minlength":[2],"name":[1],"pattern":[1],"placeholder":[1],"readonly":[4],"required":[4],"spellcheck":[4],"step":[1],"size":[2],"sizes":[1],"type":[1],"value":[1032],"label":[1],"error":[1],"helper":[1],"debounce":[2]},null,{"debounce":["debounceChanged"],"value":["valueChanged"]}],[1,"road-button",{"color":[1],"size":[513],"buttonType":[1,"button-type"],"iconOnly":[516,"icon-only"],"disabled":[516],"expand":[516],"download":[1],"href":[1],"rel":[1],"target":[1],"outline":[4]}],[1,"road-input-group"],[1,"road-label"],[1,"road-icon",{"color":[1],"ariaLabel":[1537,"aria-label"],"ariaHidden":[513,"aria-hidden"],"name":[1],"src":[1],"icon":[8],"size":[1],"rotate":[1],"lazy":[4],"sanitize":[4],"svgContent":[32],"isVisible":[32]},null,{"name":["loadIcon"],"src":["loadIcon"],"icon":["loadIcon"]}]]],["p-1c5ac353",[[1,"road-duration",{"isOpen":[1028,"is-open"],"header":[1],"min":[2],"max":[2],"step":[2],"open":[64],"close":[64]},[[0,"roadcardclick","handleClick"]]]]],["p-c6a552b7",[[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"]}]]],["p-09bfd80b",[[1,"road-content-card",{"insetImage":[4,"inset-image"]}]]],["p-27d2770a",[[2,"road-plate-number",{"country":[1],"disabled":[4],"placeholder":[1],"readonly":[4],"value":[1032],"motorbike":[4]},null,{"value":["valueChanged"]}]]],["p-5203acea",[[1,"road-profil-dropdown",{"isOpen":[1028,"is-open"]},[[4,"click","handleDocumentClick"]]]]],["p-cfc0a3a7",[[1,"road-rating",{"size":[513],"rate":[2],"showreviews":[4],"readonly":[4],"reviews":[2],"reviewsText":[1,"reviews-text"],"url":[1]}]]],["p-17ae87b0",[[1,"road-accordion",{"isOpen":[1028,"is-open"],"isLight":[4,"is-light"],"isLightSeparator":[4,"is-light-separator"],"isSmall":[4,"is-small"]}]]],["p-b510e552",[[1,"road-banner",{"isOpen":[1028,"is-open"],"label":[1],"link":[1],"url":[1],"close":[64]}]]],["p-72b3b34a",[[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"]}]]],["p-e8c9c816",[[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"]}]]],["p-31cf9b61",[[1,"road-chip",{"color":[1],"outline":[4],"size":[1],"hasCloseIcon":[4,"has-close-icon"]}]]],["p-7a14e5b7",[[1,"road-collapse",{"isOpen":[1028,"is-open"],"showMore":[1,"show-more"],"showLess":[1,"show-less"],"centered":[4]}]]],["p-18967429",[[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"]]]]],["p-cdefa79c",[[1,"road-dropdown",{"isOpen":[1028,"is-open"],"isLight":[4,"is-light"],"isMedium":[4,"is-medium"],"position":[513],"direction":[513]},[[4,"click","handleDocumentClick"]]]]],["p-233eb25c",[[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"]]]]],["p-9a929988",[[6,"road-range",{"rangeId":[1,"range-id"],"value":[1032],"min":[1],"max":[1],"step":[1],"showValue":[4,"show-value"],"showTick":[4,"show-tick"],"showLabels":[4,"show-labels"]},[[2,"focus","handleFocus"],[2,"blur","handleBlur"]],{"value":["valueChanged"]}]]],["p-16c934bc",[[1,"road-toast",{"isOpen":[1028,"is-open"],"color":[1],"label":[1],"timeout":[2],"open":[64],"close":[64]},null,{"isOpen":["isOpenChanged"]}]]],["p-7db968e6",[[1,"road-alert",{"color":[1],"label":[1],"button":[1],"link":[1],"url":[1]}]]],["p-efe6e22f",[[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"]}]]],["p-dcbb0d20",[[6,"road-autocomplete",{"options":[16],"visible":[32]},[[0,"roadFocus","handleFocus"],[0,"roadfocus","handleFocus"],[4,"click","onClickOutside"]]]]],["p-6ad5091d",[[1,"road-button-floating",{"position":[513],"href":[1],"rel":[1],"target":[1]},[[9,"scroll","onScroll"]]]]],["p-0fca389a",[[4,"road-carousel-item"]]],["p-25ade729",[[1,"road-flap",{"color":[1],"filled":[4],"size":[513]}]]],["p-a5eee655",[[1,"road-global-navigation",{"selectedTab":[1,"selected-tab"]},[[0,"roadNavbarItemClick","onNavbarChanged"],[0,"roadnavbaritemclick","onNavbarChanged"]],{"selectedTab":["selectedTabChanged"]}]]],["p-3bce3bdc",[[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"]}]]],["p-14ecc91e",[[1,"road-navbar",{"selectedTab":[1,"selected-tab"]},[[0,"roadNavbarItemClick","onNavbarChanged"],[0,"roadnavbaritemclick","onNavbarChanged"]],{"selectedTab":["selectedTabChanged"]}]]],["p-9ff79904",[[1,"road-navbar-item",{"disabled":[4],"download":[1],"href":[1],"rel":[1],"selected":[1028],"tab":[1],"target":[1]},[[8,"roadNavbarChanged","onNavbarChanged"],[8,"roadnavbarchanged","onNavbarChanged"]]]]],["p-ebd19369",[[1,"road-progress",{"value":[2],"numbersteps":[1],"label":[1],"showstep":[4],"animation":[4],"light":[4],"fullwidth":[4],"color":[1]}]]],["p-254ba3c4",[[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"]}]]],["p-054acf61",[[1,"road-progress-indicator-vertical"]]],["p-68599145",[[4,"road-progress-indicator-vertical-item"]]],["p-f90af0e1",[[1,"road-progress-tracker"]]],["p-e42a9ec4",[[4,"road-progress-tracker-item"]]],["p-76ccfc61",[[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"]]]]],["p-96abbe85",[[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"]}]]],["p-08b0be1b",[[1,"road-segmented-button",{"size":[1],"selected":[1028],"tab":[1]},[[8,"roadSegmentedButtonBarChanged","onButtonBarChanged"],[8,"roadSegmentedButtonbarchanged","onButtonBarChanged"]]]]],["p-20b115ed",[[1,"road-segmented-button-bar",{"selectedTab":[1,"selected-tab"]},null,{"selectedTab":["selectedTabChanged"]}]]],["p-4ba769a9",[[1,"road-segmented-buttons",{"selectedTab":[32],"select":[64],"getTab":[64],"getSelected":[64]}]]],["p-4a2f2612",[[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"]}]]],["p-73b4f413",[[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"]]]]],["p-b614a9fb",[[1,"road-skeleton"]]],["p-f6d47cda",[[1,"road-spinner",{"size":[513],"color":[513]}]]],["p-30fa62f4",[[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"]}]]],["p-74e359b7",[[1,"road-tab",{"active":[1028],"tab":[1],"setActive":[64]},[[8,"roadtabbarchanged","onTabBarChanged"]]]]],["p-faf16a12",[[1,"road-tab-bar",{"secondary":[4],"expand":[4],"center":[4],"selectedTab":[1537,"selected-tab"]},[[0,"roadTabButtonClick","onTabButtonClick"]],{"selectedTab":["selectedTabChanged"]}]]],["p-b09c076d",[[1,"road-tab-button",{"download":[1],"href":[1],"rel":[1],"layout":[1],"selected":[1028],"tab":[1],"target":[1]},[[8,"roadTabBarChanged","onTabBarChanged"],[8,"roadTabbarchanged","onTabBarChanged"]]]]],["p-d651deea",[[6,"road-table"]]],["p-f64453a3",[[1,"road-tabs",{"selectedTab":[32],"select":[64],"getTab":[64],"getSelected":[64]}]]],["p-cbe0c628",[[1,"road-tag",{"color":[1],"contrast":[4]}]]],["p-5483109e",[[1,"road-text",{"color":[1]}]]],["p-c7866ae4",[[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"]}]]],["p-c1dca3cc",[[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"]}]]],["p-e2c6d81f",[[1,"road-toolbar-title"]]],["p-25683dc7",[[1,"road-toolbar-title-page"]]],["p-c096723c",[[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]}]]],["p-78e9bbd5",[[1,"road-avatar",{"size":[513]}]]],["p-dcbaee2f",[[1,"road-card",{"elevation":[1],"button":[4],"value":[1],"type":[1],"download":[1],"href":[1],"rel":[1],"target":[1]}]]],["p-bfcedcfb",[[1,"road-img",{"alt":[1],"src":[1],"loadSrc":[32],"loadError":[32]},null,{"src":["srcChanged"]}]]]]'),e)));
 //# sourceMappingURL=roadtrip.esm.js.map

package/dist/roadtrip/roadtrip.esm.js.map

@@ -1 +1 @@
-{"version":3,"names":["patchBrowser","importMeta","url","opts","resourcesUrl","URL","href","promiseResolve","then","options","bootstrapLazy","JSON","parse"],"sources":["node_modules/@stencil/core/internal/client/patch-browser.js","@lazy-browser-entrypoint?app-data=conditional"],"sourcesContent":["/*\n Stencil Client Patch Browser v4.7.2 | MIT Licensed | https://stenciljs.com\n */\nimport { BUILD, NAMESPACE } from '@stencil/core/internal/app-data';\nimport { consoleDevInfo, doc, promiseResolve, H } from '@stencil/core';\nconst patchBrowser = () => {\n    // NOTE!! This fn cannot use async/await!\n    if (BUILD.isDev && !BUILD.isTesting) {\n        consoleDevInfo('Running in development mode.');\n    }\n    if (BUILD.cloneNodeFix) {\n        // opted-in to polyfill cloneNode() for slot polyfilled components\n        patchCloneNodeFix(H.prototype);\n    }\n    const scriptElm = BUILD.scriptDataOpts\n        ? Array.from(doc.querySelectorAll('script')).find((s) => new RegExp(`\\/${NAMESPACE}(\\\\.esm)?\\\\.js($|\\\\?|#)`).test(s.src) ||\n            s.getAttribute('data-stencil-namespace') === NAMESPACE)\n        : null;\n    const importMeta = import.meta.url;\n    const opts = BUILD.scriptDataOpts ? (scriptElm || {})['data-opts'] || {} : {};\n    if (importMeta !== '') {\n        opts.resourcesUrl = new URL('.', importMeta).href;\n    }\n    return promiseResolve(opts);\n};\nconst patchCloneNodeFix = (HTMLElementPrototype) => {\n    const nativeCloneNodeFn = HTMLElementPrototype.cloneNode;\n    HTMLElementPrototype.cloneNode = function (deep) {\n        if (this.nodeName === 'TEMPLATE') {\n            return nativeCloneNodeFn.call(this, deep);\n        }\n        const clonedNode = nativeCloneNodeFn.call(this, false);\n        const srcChildNodes = this.childNodes;\n        if (deep) {\n            for (let i = 0; i < srcChildNodes.length; i++) {\n                // Node.ATTRIBUTE_NODE === 2, and checking because IE11\n                if (srcChildNodes[i].nodeType !== 2) {\n                    clonedNode.appendChild(srcChildNodes[i].cloneNode(true));\n                }\n            }\n        }\n        return clonedNode;\n    };\n};\nexport { patchBrowser };\n","export { setNonce } from '@stencil/core';\nimport { bootstrapLazy } from '@stencil/core';\nimport { patchBrowser } from '@stencil/core/internal/client/patch-browser';\nimport { globalScripts } from '@stencil/core/internal/app-globals';\npatchBrowser().then(options => {\n  globalScripts();\n  return bootstrapLazy([/*!__STENCIL_LAZY_DATA__*/], options);\n});\n"],"mappings":"sFAKA,MAAMA,EAAe,KAajB,MAAMC,cAAyBC,IAC/B,MAAMC,EAAqE,GAC3E,GAAIF,IAAe,GAAI,CACnBE,EAAKC,aAAe,IAAIC,IAAI,IAAKJ,GAAYK,IACrD,CACI,OAAOC,EAAeJ,EAAK,ECnB/BH,IAAeQ,MAAKC,GAEXC,EAAcC,KAAAC,MAAA,6/WAAuCH"}
+{"version":3,"names":["patchBrowser","importMeta","url","opts","resourcesUrl","URL","href","promiseResolve","then","options","bootstrapLazy","JSON","parse"],"sources":["node_modules/@stencil/core/internal/client/patch-browser.js","@lazy-browser-entrypoint?app-data=conditional"],"sourcesContent":["/*\n Stencil Client Patch Browser v4.7.2 | MIT Licensed | https://stenciljs.com\n */\nimport { BUILD, NAMESPACE } from '@stencil/core/internal/app-data';\nimport { consoleDevInfo, doc, promiseResolve, H } from '@stencil/core';\nconst patchBrowser = () => {\n    // NOTE!! This fn cannot use async/await!\n    if (BUILD.isDev && !BUILD.isTesting) {\n        consoleDevInfo('Running in development mode.');\n    }\n    if (BUILD.cloneNodeFix) {\n        // opted-in to polyfill cloneNode() for slot polyfilled components\n        patchCloneNodeFix(H.prototype);\n    }\n    const scriptElm = BUILD.scriptDataOpts\n        ? Array.from(doc.querySelectorAll('script')).find((s) => new RegExp(`\\/${NAMESPACE}(\\\\.esm)?\\\\.js($|\\\\?|#)`).test(s.src) ||\n            s.getAttribute('data-stencil-namespace') === NAMESPACE)\n        : null;\n    const importMeta = import.meta.url;\n    const opts = BUILD.scriptDataOpts ? (scriptElm || {})['data-opts'] || {} : {};\n    if (importMeta !== '') {\n        opts.resourcesUrl = new URL('.', importMeta).href;\n    }\n    return promiseResolve(opts);\n};\nconst patchCloneNodeFix = (HTMLElementPrototype) => {\n    const nativeCloneNodeFn = HTMLElementPrototype.cloneNode;\n    HTMLElementPrototype.cloneNode = function (deep) {\n        if (this.nodeName === 'TEMPLATE') {\n            return nativeCloneNodeFn.call(this, deep);\n        }\n        const clonedNode = nativeCloneNodeFn.call(this, false);\n        const srcChildNodes = this.childNodes;\n        if (deep) {\n            for (let i = 0; i < srcChildNodes.length; i++) {\n                // Node.ATTRIBUTE_NODE === 2, and checking because IE11\n                if (srcChildNodes[i].nodeType !== 2) {\n                    clonedNode.appendChild(srcChildNodes[i].cloneNode(true));\n                }\n            }\n        }\n        return clonedNode;\n    };\n};\nexport { patchBrowser };\n","export { setNonce } from '@stencil/core';\nimport { bootstrapLazy } from '@stencil/core';\nimport { patchBrowser } from '@stencil/core/internal/client/patch-browser';\nimport { globalScripts } from '@stencil/core/internal/app-globals';\npatchBrowser().then(options => {\n  globalScripts();\n  return bootstrapLazy([/*!__STENCIL_LAZY_DATA__*/], options);\n});\n"],"mappings":"sFAKA,MAAMA,EAAe,KAajB,MAAMC,cAAyBC,IAC/B,MAAMC,EAAqE,GAC3E,GAAIF,IAAe,GAAI,CACnBE,EAAKC,aAAe,IAAIC,IAAI,IAAKJ,GAAYK,IACrD,CACI,OAAOC,EAAeJ,EAAK,ECnB/BH,IAAeQ,MAAKC,GAEXC,EAAcC,KAAAC,MAAA,qlXAAuCH"}

package/dist/types/components/input/input.d.ts

@@ -3,15 +3,15 @@ import { AutocompleteTypes, TextFieldTypes } from '../../interface';
 /**
  * @slot checklistPassword - Content the checklist Password exemple.
  * `<div class="checklist-password mt-16" slot="checklistPassword">`
-     ` <span class="checklist-password-label"><strong>Low Safety</strong></span>`
-      `<road-progress color="danger" value="25" class="mt-8 mb-16"></road-progress>`
-      `<p class="text-medium mb-8">For optimal safety your password must have at least :</p>`
-      `<ul class="m-0 pl-16">`
-        `<li id="letter" class="invalid mb-8">1 lowercase and 1 uppercase</li>`
-        `<li id="number" class="invalid mb-8">1 digit</li>`
-        `<li id="length" class="invalid">8 characters minimum</li>`
-      `</ul>`
-    `</div>`
+ *   `<span class="checklist-password-label"><strong>Low Safety</strong></span>`
+ *   `<road-progress color="danger" value="25" class="mt-8 mb-16"></road-progress>`
+ *   `<p class="text-medium mb-8">For optimal safety your password must have at least :</p>`
+ *   `<ul class="m-0 pl-16">`
+ *     `<li id="letter" class="invalid mb-8">1 lowercase and 1 uppercase</li>`
+ *     `<li id="number" class="invalid mb-8">1 digit</li>`
+ *     `<li id="length" class="invalid">8 characters minimum</li>`
+ *   `</ul>`
+ * `</div>`
  */
 export declare class Input {
   /**
@@ -107,7 +107,7 @@ export declare class Input {
    */
   type: TextFieldTypes;
   /**
-   * The value of the input.
+   * The value of the input.(for dynamic use use v-model for vue instead)
    */
   value?: string | number | null;
   /**
@@ -126,7 +126,9 @@ export declare class Input {
    * Set the amount of time, in milliseconds, to wait to trigger the `roadChange` event after each keystroke.
    */
   debounce: number;
-  protected debounceChanged(): void;
+  private debouncedRoadChange;
+  private createDebouncedRoadChange;
+  debounceChanged(): void;
   /**
    * Update the native input element when the value changes
    */
@@ -134,15 +136,11 @@ export declare class Input {
   /**
    * Emitted when a keyboard input occurred.
    */
-  roadinput: EventEmitter<KeyboardEvent>;
   /** @internal */
   roadInput: EventEmitter<KeyboardEvent>;
   /**
    * Emitted when the value has changed.
    */
-  roadchange: EventEmitter<{
-    value: string | undefined | null;
-  }>;
   /** @internal */
   roadChange: EventEmitter<{
     value: string | undefined | null;
@@ -150,13 +148,11 @@ export declare class Input {
   /**
    * Emitted when the input loses focus.
    */
-  roadblur: EventEmitter<string | null>;
   /** @internal */
   roadBlur: EventEmitter<string | null>;
   /**
    * Emitted when the input has focus.
    */
-  roadfocus: EventEmitter<void>;
   /** @internal */
   roadFocus: EventEmitter<void>;
   private getValue;
@@ -164,5 +160,6 @@ export declare class Input {
   private onBlur;
   private onFocus;
   private enforceMinMax;
+  componentWillLoad(): void;
   render(): any;
 }

package/dist/types/components/tab/tab.d.ts

@@ -11,6 +11,7 @@ export declare class Tab {
    */
   tab: string;
   componentWillLoad(): Promise<void>;
+  onTabBarChanged(ev: CustomEvent): void;
   /** Set the active component for the tab */
   setActive(): Promise<void>;
   render(): any;

package/dist/types/components/tab-bar/tab-bar.d.ts

@@ -26,6 +26,7 @@ export declare class TabBar {
   roadtabbarchanged: EventEmitter;
   /** @internal */
   roadTabBarChanged: EventEmitter;
+  onTabButtonClick(ev: CustomEvent): void;
   componentWillLoad(): void;
   render(): any;
 }

package/dist/types/components/tab-button/tab-button.d.ts

@@ -25,7 +25,7 @@ export declare class TabButton {
   rel: string | undefined;
   /**
    * Set the layout of the text and icon in the tab bar.
-   * It defaults to `'icon-top'`.
+   * It defaults to `'icon-start'`.
    */
   layout?: 'icon-start' | 'icon-top';
   /**

package/dist/types/components.d.ts

@@ -731,7 +731,7 @@ export namespace Components {
          */
         "type": TextFieldTypes;
         /**
-          * The value of the input.
+          * The value of the input.(for dynamic use use v-model for vue instead)
          */
         "value"?: string | number | null;
     }
@@ -1365,7 +1365,7 @@ export namespace Components {
          */
         "href": string | undefined;
         /**
-          * Set the layout of the text and icon in the tab bar. It defaults to `'icon-top'`.
+          * Set the layout of the text and icon in the tab bar. It defaults to `'icon-start'`.
          */
         "layout"?: 'icon-start' | 'icon-top';
         /**
@@ -2165,17 +2165,11 @@ declare global {
         new (): HTMLRoadImgElement;
     };
     interface HTMLRoadInputElementEventMap {
-        "roadinput": KeyboardEvent;
         "roadInput": KeyboardEvent;
-        "roadchange": {
-    value: string | undefined | null;
-  };
         "roadChange": {
     value: string | undefined | null;
   };
-        "roadblur": string | null;
         "roadBlur": string | null;
-        "roadfocus": void;
         "roadFocus": void;
     }
     interface HTMLRoadInputElement extends Components.RoadInput, HTMLStencilElement {
@@ -3612,24 +3606,6 @@ declare namespace LocalJSX {
           * The name of the control, which is submitted with the form data.
          */
         "name"?: string;
-        /**
-          * Emitted when the input loses focus.
-         */
-        "onRoadblur"?: (event: RoadInputCustomEvent<string | null>) => void;
-        /**
-          * Emitted when the value has changed.
-         */
-        "onRoadchange"?: (event: RoadInputCustomEvent<{
-    value: string | undefined | null;
-  }>) => void;
-        /**
-          * Emitted when the input has focus.
-         */
-        "onRoadfocus"?: (event: RoadInputCustomEvent<void>) => void;
-        /**
-          * Emitted when a keyboard input occurred.
-         */
-        "onRoadinput"?: (event: RoadInputCustomEvent<KeyboardEvent>) => void;
         /**
           * A regular expression that the value is checked against. The pattern must match the entire value, not just some subset. Use the title attribute to describe the pattern to help the user. This attribute applies when the value of the type attribute is `"text"`, `"search"`, `"tel"`, `"url"`, `"email"`, or `"password"`, otherwise it is ignored.
          */
@@ -3667,7 +3643,7 @@ declare namespace LocalJSX {
          */
         "type"?: TextFieldTypes;
         /**
-          * The value of the input.
+          * The value of the input.(for dynamic use use v-model for vue instead)
          */
         "value"?: string | number | null;
     }
@@ -4374,7 +4350,7 @@ declare namespace LocalJSX {
          */
         "href"?: string | undefined;
         /**
-          * Set the layout of the text and icon in the tab bar. It defaults to `'icon-top'`.
+          * Set the layout of the text and icon in the tab bar. It defaults to `'icon-start'`.
          */
         "layout"?: 'icon-start' | 'icon-top';
         /**

package/hydrate/index.js

@@ -31532,43 +31532,32 @@ var lodash = createCommonjsModule(function (module, exports) {
 
 const inputCss = ".sc-road-input-h{--height:3rem;--border-radius:0.25rem;--input-text-align:left;--margin-bottom:1rem;position:relative;display:block;margin-bottom:var(--margin-bottom);font-family:var(--road-font, sans-serif);color:var(--road-grey-10)}.form-control.sc-road-input{box-sizing:border-box;display:block;width:100%;height:var(--height);padding:0.75rem 1rem 0;margin:0;font-size:var(--road-body-medium);color:var(--road-on-surface);text-align:var(--input-text-align);background:var(--road-surface);border:1px solid var(--road-input-outline);border-radius:var(--border-radius);box-shadow:none;-webkit-appearance:none;appearance:none}.form-control[type=\"number\"].sc-road-input{-webkit-appearance:textfield;appearance:textfield}.form-control.sc-road-input::-webkit-calendar-picker-indicator{margin-top:-0.75rem}.form-control.sc-road-input::-webkit-date-and-time-value{padding-top:0.625rem}.form-control.sc-road-input::placeholder{color:var(--road-on-surface-extra-weak);opacity:1}@media (hover: hover){.form-control.sc-road-input:not(:disabled):hover{border-color:var(--road-input-outline-variant)}}.form-control.sc-road-input:focus~.form-label.sc-road-input,.form-control[required].sc-road-input:valid~.form-label.sc-road-input,.form-control.has-value.sc-road-input~.form-label.sc-road-input,.form-control[type=\"date\"].sc-road-input~.form-label.sc-road-input,.form-control[type=\"time\"].sc-road-input~.form-label.sc-road-input{transform:scale(0.625) translateY(-0.625rem)}.form-control.sc-road-input:placeholder-shown~.form-label.sc-road-input{transform:scale(0.625) translateY(-0.625rem)}.form-control.sc-road-input:-ms-input-placeholder~.form-label.sc-road-input{transform:scale(0.625) translateY(-0.625rem)}.form-control.sc-road-input:not(:disabled):focus,.form-control[autofocus].sc-road-input{border-color:var(--road-input-outline-variant);outline:0}.form-control.sc-road-input:disabled,.form-control[readonly].sc-road-input{cursor:not-allowed;background:var(--road-surface-disabled);opacity:1}.form-label.sc-road-input{position:absolute;top:0.75rem;left:1rem;display:block;font-size:var(--road-body-medium);line-height:1.5;color:var(--road-on-surface-weak);pointer-events:none;transition:transform 200ms cubic-bezier(0, 0, 0.2, 1) 0ms;transform-origin:0 0}.form-control.sc-road-input:required~.form-label.sc-road-input::after{color:var(--road-danger-default);content:\" *\"}.less-label.sc-road-input{padding-top:0}.input-xl.sc-road-input-h{--height:3.5rem}.input-xl.sc-road-input-h .form-control.sc-road-input{padding:1rem 1rem 0}.phone-number.sc-road-input-h .form-control.sc-road-input{padding-left:2rem}.phone-number.sc-road-input-h .form-label.sc-road-input{left:2rem}.input-xl.sc-road-input-h .form-label.sc-road-input{top:1rem}.input-xl.sc-road-input-h .form-control.sc-road-input:focus~.form-label.sc-road-input,.input-xl.sc-road-input-h .form-control[autofocus].sc-road-input~.form-label.sc-road-input,.input-xl.sc-road-input-h .form-control[required].sc-road-input:valid~.form-label.sc-road-input,.input-xl.sc-road-input-h .form-control.has-value.sc-road-input~.form-label.sc-road-input,.input-xl.sc-road-input-h .form-control[type=\"date\"].sc-road-input~.form-label.sc-road-input,.input-xl.sc-road-input-h .form-control[type=\"time\"].sc-road-input~.form-label.sc-road-input{transform:scale(0.75) translateY(-0.625rem)}.input-xl.sc-road-input-h .form-control.sc-road-input:placeholder-shown~.form-label.sc-road-input{transform:scale(0.625) translateY(-0.625rem)}.invalid-feedback.sc-road-input{display:none;width:100%;margin-top:0.5rem;font-size:var(--road-helper-medium);color:var(--road-on-danger-surface)}.invalid-feedback.sc-road-input road-icon.sc-road-input{color:var(--road-danger-icon);margin-right:var(--road-spacing-02)}.form-control.is-invalid.sc-road-input,.was-validated.sc-road-input .form-control.sc-road-input:invalid{border-color:var(--road-danger-outline)}.form-control.is-invalid.sc-road-input~.invalid-feedback.sc-road-input,.was-validated.sc-road-input .form-control.sc-road-input:invalid~.invalid-feedback.sc-road-input{display:flex}.helper.sc-road-input{margin-top:0.5rem;font-size:var(--road-body-small);color:var(--road-on-surface-weak)}.form-control[type=\"password\"].sc-road-input~.checklist-password.sc-road-input .invalid.sc-road-input{color:var(--road-on-surface-weak)}";
 
-const debounceEvent = (event, wait) => {
-  const original = event._original || event;
-  return {
-    _original: event,
-    emit: lodash.debounce(original.emit.bind(original), wait),
-  };
-};
 /**
  * @slot checklistPassword - Content the checklist Password exemple.
  * `<div class="checklist-password mt-16" slot="checklistPassword">`
-     ` <span class="checklist-password-label"><strong>Low Safety</strong></span>`
-      `<road-progress color="danger" value="25" class="mt-8 mb-16"></road-progress>`
-      `<p class="text-medium mb-8">For optimal safety your password must have at least :</p>`
-      `<ul class="m-0 pl-16">`
-        `<li id="letter" class="invalid mb-8">1 lowercase and 1 uppercase</li>`
-        `<li id="number" class="invalid mb-8">1 digit</li>`
-        `<li id="length" class="invalid">8 characters minimum</li>`
-      `</ul>`
-    `</div>`
+ *   `<span class="checklist-password-label"><strong>Low Safety</strong></span>`
+ *   `<road-progress color="danger" value="25" class="mt-8 mb-16"></road-progress>`
+ *   `<p class="text-medium mb-8">For optimal safety your password must have at least :</p>`
+ *   `<ul class="m-0 pl-16">`
+ *     `<li id="letter" class="invalid mb-8">1 lowercase and 1 uppercase</li>`
+ *     `<li id="number" class="invalid mb-8">1 digit</li>`
+ *     `<li id="length" class="invalid">8 characters minimum</li>`
+ *   `</ul>`
+ * `</div>`
  */
 class Input {
   constructor(hostRef) {
     registerInstance(this, hostRef);
-    this.roadinput = createEvent(this, "roadinput", 7);
     this.roadInput = createEvent(this, "roadInput", 7);
-    this.roadchange = createEvent(this, "roadchange", 7);
     this.roadChange = createEvent(this, "roadChange", 7);
-    this.roadblur = createEvent(this, "roadblur", 7);
     this.roadBlur = createEvent(this, "roadBlur", 7);
-    this.roadfocus = createEvent(this, "roadfocus", 7);
     this.roadFocus = createEvent(this, "roadFocus", 7);
+    this.debouncedRoadChange = this.createDebouncedRoadChange();
     this.onInput = (ev) => {
       const input = ev.target;
       if (input) {
         this.value = input.value || "";
       }
-      this.roadinput.emit(ev);
       this.roadInput.emit(ev);
     };
     this.onBlur = () => {
@@ -31582,11 +31571,9 @@ class Input {
       }
       this.value = value; // Mettre à jour la valeur avec la valeur ajustée
       // Émettre l'événement roadblur avec la valeur ajustée
-      this.roadblur.emit(this.value);
-      this.roadBlur.emit(this.value);
+      this.roadBlur.emit(value);
     };
     this.onFocus = () => {
-      this.roadfocus.emit();
       this.roadFocus.emit();
     };
     this.inputId = `road-input-${inputIds++}`;
@@ -31617,16 +31604,20 @@ class Input {
     this.helper = undefined;
     this.debounce = 0;
   }
+  createDebouncedRoadChange() {
+    return lodash.debounce((value) => {
+      this.roadChange.emit({ value: value == null ? value : value.toString() });
+    }, this.debounce);
+  }
   debounceChanged() {
-    this.roadchange = debounceEvent(this.roadchange, this.debounce);
-    this.roadChange = debounceEvent(this.roadChange, this.debounce);
+    // Créez une nouvelle fonction debouncedRoadChange avec la nouvelle valeur de debounce
+    this.debouncedRoadChange = this.createDebouncedRoadChange();
   }
   /**
    * Update the native input element when the value changes
    */
   valueChanged() {
-    this.roadchange.emit({ value: this.value == null ? this.value : this.value.toString() });
-    this.roadChange.emit({ value: this.value == null ? this.value : this.value.toString() });
+    this.debouncedRoadChange(this.value);
   }
   getValue() {
     return typeof this.value === 'number'
@@ -31646,14 +31637,16 @@ class Input {
       }
     }
   }
+  componentWillLoad() {
+    this.debounceChanged(); // Initialize debounce on component load
+  }
   render() {
     const value = this.getValue();
     const labelId = this.inputId + '-label';
     const hasValueClass = this.value !== '' ? 'has-value' : '';
     const lessLabelClass = this.label !== '' ? '' : 'less-label';
     const isInvalidClass = this.error !== undefined && this.error !== '' ? 'is-invalid' : '';
-    return (hAsync(Host, { "aria-disabled": this.disabled ? 'true' : null, class: this.sizes && `input-${this.sizes}`, value: value }, hAsync("input", { class: `form-control ${hasValueClass} ${isInvalidClass} ${lessLabelClass}`, id: this.inputId, "aria-disabled": this.disabled ? 'true' : null, "aria-labelledby": labelId, disabled: this.disabled, autoCapitalize: this.autocapitalize, autoComplete: this.autocomplete, autoCorrect: this.autocorrect, enterKeyHint: this.enterkeyhint, autoFocus: this.autofocus, inputMode: this.inputmode, min: this.min, max: this.max, minLength: this.minlength, maxLength: this.maxlength, name: this.name, pattern: this.pattern, placeholder: this.placeholder, readOnly: this.readonly, required: this.required, spellcheck: this.spellcheck, step: this.step, size: this.size, type: this.type, value: value, onInput: this.onInput, onBlur: this.onBlur, onFocus: this.onFocus, onKeyUp: (event) => this.enforceMinMax(event.target), "data-cy": 'road-input' }), hAsync("label", { class: "form-label", id: labelId, htmlFor: this.inputId }, this.label), this.error && this.error !== '' && hAsync("p", { class: "invalid-feedback" }, hAsync("road-icon", { slot: "start", name: "alert-error-solid", "aria-hidden": "true", size: "sm" }), this.error), this.helper && this.helper !== '' && hAsync("p", { class: "helper" }, this.helper), this.type && this.type == 'password' &&
-      hAsync("slot", { name: "checklistPassword" })));
+    return (hAsync(Host, { "aria-disabled": this.disabled ? 'true' : null, class: this.sizes && `input-${this.sizes}`, value: value }, hAsync("input", { class: `form-control ${hasValueClass} ${isInvalidClass} ${lessLabelClass}`, id: this.inputId, "aria-disabled": this.disabled ? 'true' : null, "aria-labelledby": labelId, disabled: this.disabled, autoCapitalize: this.autocapitalize, autoComplete: this.autocomplete, autoCorrect: this.autocorrect, enterKeyHint: this.enterkeyhint, autoFocus: this.autofocus, inputMode: this.inputmode, min: this.min, max: this.max, minLength: this.minlength, maxLength: this.maxlength, name: this.name, pattern: this.pattern, placeholder: this.placeholder, readOnly: this.readonly, required: this.required, spellcheck: this.spellcheck, step: this.step, size: this.size, type: this.type, value: value, onInput: this.onInput, onBlur: this.onBlur, onFocus: this.onFocus, onKeyUp: (event) => this.enforceMinMax(event.target), "data-cy": 'road-input' }), hAsync("label", { class: "form-label", id: labelId, htmlFor: this.inputId }, this.label), this.error && this.error !== '' && hAsync("p", { class: "invalid-feedback" }, hAsync("road-icon", { slot: "start", name: "alert-error-solid", "aria-hidden": "true", size: "sm" }), this.error), this.helper && this.helper !== '' && hAsync("p", { class: "helper" }, this.helper), this.type && this.type == 'password' && hAsync("slot", { name: "checklistPassword" })));
   }
   static get watchers() { return {
     "debounce": ["debounceChanged"],
@@ -36470,6 +36463,9 @@ class Tab {
       await this.setActive();
     }
   }
+  onTabBarChanged(ev) {
+    this.active = this.tab === ev.detail.tab;
+  }
   /** Set the active component for the tab */
   async setActive() {
     this.active = true;
@@ -36490,13 +36486,13 @@ class Tab {
       "tab": [1],
       "setActive": [64]
     },
-    "$listeners$": undefined,
+    "$listeners$": [[8, "roadtabbarchanged", "onTabBarChanged"]],
     "$lazyBundleId$": "-",
     "$attrsToReflect$": []
   }; }
 }
 
-const tabBarCss = "/*!@:host*/.sc-road-tab-bar-h{--tab-bar-background:var(--road-surface);--tab-color:var(--road-on-surface-weak);--tab-color-selected:var(--road-on-surface);--tab-underline-selected:var(--road-primary);--tab-background:var(--road-surface);--tab-background-hover:var(--road-surface-inverse);--tab-background-focused:var(--road-grey-70);display:flex;width:100%;margin:0;overflow:scroll;overflow-x:inherit;font-family:var(--road-font, sans-serif);line-height:1.5;color:var(--road-on-surface-weak);list-style:none;background:var(--tab-bar-background);border-bottom:1px solid var(--road-outline-weak);fill:currentColor;scrollbar-width:none}/*!@:host(::-webkit-scrollbar)*/.sc-road-tab-bar-h::-webkit-scrollbar{display:none}/*!@:host(.tab-expand) ::slotted(road-tab-button)*/.sc-road-tab-bar-h.tab-expand .sc-road-tab-bar-s>road-tab-button{flex-grow:1}/*!@:host(.tab-secondary) ::slotted(road-tab-button)*/.sc-road-tab-bar-h.tab-secondary .sc-road-tab-bar-s>road-tab-button{--tab-underline-selected:var(--road-secondary)}/*!@:host(.tab-center)*/.tab-center.sc-road-tab-bar-h{justify-content:center}";
+const tabBarCss = "/*!@:host*/.sc-road-tab-bar-h{--tab-bar-background:var(--road-surface);--tab-color:var(--road-on-surface-weak);--tab-color-selected:var(--road-on-surface);--tab-underline-selected:var(--road-primary);--tab-background:var(--road-surface);--tab-background-hover:var(--road-surface-inverse);--tab-background-focused:var(--road-grey-70);display:flex;width:100%;margin:0;overflow:scroll;overflow-x:inherit;font-family:var(--road-font, sans-serif);line-height:1.5;color:var(--road-on-surface-weak);list-style:none;background:var(--tab-bar-background);border-bottom:1px solid var(--road-outline-weak);fill:currentColor;scrollbar-width:none}/*!@:host(::-webkit-scrollbar)*/.sc-road-tab-bar-h::-webkit-scrollbar{display:none}/*!@:host(.tab-expand) ::slotted(road-tab-button)*/.sc-road-tab-bar-h.tab-expand .sc-road-tab-bar-s>road-tab-button{width:100%}/*!@:host(.tab-secondary) ::slotted(road-tab-button)*/.sc-road-tab-bar-h.tab-secondary .sc-road-tab-bar-s>road-tab-button{--tab-underline-selected:var(--road-secondary)}/*!@:host(.tab-center)*/.tab-center.sc-road-tab-bar-h{justify-content:center}";
 
 /**
  * @slot  - Content of the tabBar, it should be road-tab-button elements.
@@ -36521,6 +36517,9 @@ class TabBar {
       });
     }
   }
+  onTabButtonClick(ev) {
+    this.selectedTab = ev.detail.tab;
+  }
   componentWillLoad() {
     this.selectedTabChanged();
   }
@@ -36544,11 +36543,11 @@ class TabBar {
       "secondary": [4],
       "expand": [4],
       "center": [4],
-      "selectedTab": [1, "selected-tab"]
+      "selectedTab": [1537, "selected-tab"]
     },
-    "$listeners$": undefined,
+    "$listeners$": [[0, "roadTabButtonClick", "onTabButtonClick"]],
     "$lazyBundleId$": "-",
-    "$attrsToReflect$": []
+    "$attrsToReflect$": [["selectedTab", "selected-tab"]]
   }; }
 }
 
@@ -36820,8 +36819,21 @@ class Tabs {
   }
   async componentWillLoad() {
     const tabs = this.tabs;
+    const tabBar = this.el.querySelector('road-tab-bar');
+    const selectedTabId = tabBar ? tabBar.getAttribute('selected-tab') : null;
     if (tabs.length > 0) {
-      this.select(tabs[0]);
+      if (selectedTabId) {
+        const selectedTab = tabs.find(tab => tab.tab === selectedTabId);
+        if (selectedTab) {
+          await this.select(selectedTab);
+        }
+        else {
+          await this.select(tabs[0]);
+        }
+      }
+      else {
+        await this.select(tabs[0]);
+      }
     }
   }
   componentWillRender() {