@roadtrip/components 3.15.0 → 3.16.1

package/dist/cjs/road-dropdown.cjs.entry.js

@@ -9,9 +9,6 @@ const dropdownCss = ":host{--margin-top:0.5rem;display:block}.dropdown{position:
 const Dropdown = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
-    /**
-     * Toggle the display when clicking element in slot
-     */
     this.onClick = () => {
       this.isOpen = !this.isOpen;
     };
@@ -21,14 +18,23 @@ const Dropdown = class {
     this.position = undefined;
     this.direction = 'bottom';
   }
+  handleDocumentClick(ev) {
+    // Check if the clicked element is the dropdown button
+    if (ev.target.closest('road-dropdown') === this.el) {
+      return; // Do nothing if clicked element is the dropdown button
+    }
+    // Close dropdown if click is outside the dropdown
+    this.isOpen = false;
+  }
   render() {
-    const isLightButtonDropDown = this.isLight == true ? `dropdown-button` : 'dropdown-button bg-white';
-    const isMediumButtonDropDown = this.isMedium == true ? `dropdown-medium-button dropdown-button` : 'dropdown-button bg-white';
-    const positionClass = this.position !== undefined ? `position-${this.position}` : '';
-    const dropdownClass = this.position !== undefined ? `dropdown-${this.position}` : '';
-    const directionClass = this.direction !== undefined ? `direction-${this.direction}` : '';
-    return (index.h("details", { class: "dropdown", open: this.isOpen }, index.h("summary", { "aria-expanded": `${this.isOpen}`, tabindex: "0", role: "button", onClick: this.onClick }, index.h("div", { class: `d-flex ${positionClass}` }, index.h("div", { class: `${isLightButtonDropDown} ${isMediumButtonDropDown}` }, index.h("road-icon", { name: "navigation-more", class: "dropdown-button-icon" })))), index.h("div", { class: `dropdown-menu ${directionClass} ${dropdownClass}` }, index.h("slot", { name: "list" }))));
+    const isLightButtonDropDown = this.isLight ? 'dropdown-button' : 'dropdown-button bg-white';
+    const isMediumButtonDropDown = this.isMedium ? 'dropdown-medium-button dropdown-button' : 'dropdown-button bg-white';
+    const positionClass = this.position ? `position-${this.position}` : '';
+    const dropdownClass = this.position ? `dropdown-${this.position}` : '';
+    const directionClass = this.direction ? `direction-${this.direction}` : '';
+    return (index.h("details", { class: "dropdown", open: this.isOpen }, index.h("summary", { "aria-expanded": this.isOpen.toString(), tabindex: "0", role: "button", onClick: this.onClick }, index.h("div", { class: `d-flex ${positionClass}` }, index.h("div", { class: `${isLightButtonDropDown} ${isMediumButtonDropDown}` }, index.h("road-icon", { name: "navigation-more", class: "dropdown-button-icon" })))), index.h("div", { class: `dropdown-menu ${directionClass} ${dropdownClass}` }, index.h("slot", { name: "list" }))));
   }
+  get el() { return index.getElement(this); }
 };
 Dropdown.style = dropdownCss;
 

package/dist/cjs/road-dropdown.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"road-dropdown.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,WAAW,GAAG,iqDAAiqD;;MCaxqD,QAAQ;;;;;;IA8BX,YAAO,GAAG;MAChB,IAAI,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,MAAM,CAAC;KAC5B,CAAC;kBA3B0C,KAAK;mBAKnB,KAAK;oBAKJ,KAAK;;qBAUsB,QAAQ;;EASlE,MAAM;IAEJ,MAAM,qBAAqB,GAAG,IAAI,CAAC,OAAO,IAAI,IAAI,GAAG,iBAAiB,GAAG,0BAA0B,CAAC;IACpG,MAAM,sBAAsB,GAAG,IAAI,CAAC,QAAQ,IAAI,IAAI,GAAG,wCAAwC,GAAG,0BAA0B,CAAC;IAC7H,MAAM,aAAa,GAAG,IAAI,CAAC,QAAQ,KAAK,SAAS,GAAG,YAAY,IAAI,CAAC,QAAQ,EAAE,GAAG,EAAE,CAAC;IACrF,MAAM,aAAa,GAAG,IAAI,CAAC,QAAQ,KAAK,SAAS,GAAG,YAAY,IAAI,CAAC,QAAQ,EAAE,GAAG,EAAE,CAAC;IACrF,MAAM,cAAc,GAAG,IAAI,CAAC,SAAS,KAAK,SAAS,GAAG,aAAa,IAAI,CAAC,SAAS,EAAE,GAAG,EAAE,CAAC;IAGzF,QACEA,qBAAS,KAAK,EAAC,UAAU,EAAC,IAAI,EAAE,IAAI,CAAC,MAAM,IACzCA,sCAAwB,GAAG,IAAI,CAAC,MAAM,EAAE,EAAE,QAAQ,EAAC,GAAG,EAAC,IAAI,EAAC,QAAQ,EAAC,OAAO,EAAE,IAAI,CAAC,OAAO,IACxFA,iBAAK,KAAK,EAAE,UAAU,aAAa,EAAE,IACnCA,iBAAK,KAAK,EAAE,GAAG,qBAAqB,IAAI,sBAAsB,EAAE,IAC9DA,uBAAW,IAAI,EAAC,iBAAiB,EAAC,KAAK,EAAC,sBAAsB,GAAa,CACvE,CACF,CACE,EACVA,iBAAK,KAAK,EAAE,iBAAiB,cAAc,IAAI,aAAa,EAAE,IAC5DA,kBAAM,IAAI,EAAC,MAAM,GAAE,CACf,CACE,EACV;GACH;;;;;;","names":["h"],"sources":["src/components/dropdown/dropdown.css?tag=road-dropdown&encapsulation=shadow","src/components/dropdown/dropdown.tsx"],"sourcesContent":["/*\n * Dropdown\n *\n * Index\n * - Dropdown\n * - Dropdown menu\n */\n\n/**\n * @prop --margin-top: Top margin of the menu\n */\n\n/* DROPDOWN\n -------------------- */\n\n:host {\n  --margin-top: 0.5rem;\n  display: block;\n}\n\n.dropdown {\n  position: relative;\n  font-family: var(--road-font);\n}\n\n.dropdown summary {\n  display: block;\n  outline: none;\n}\n\n.dropdown summary::-webkit-details-marker { /* remove native arrow */\n  display: none;\n}\n\n.dropdown-button{\n  position: relative;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 3.5rem;\n  height: 3.5rem;\n  cursor: pointer;\n  border-radius: 0.25rem;\n}\n\n.dropdown-medium-button{\n  width: 2.5rem;\n  height: 2.5rem;\n}\n\n.dropdown-button:hover{\n  background: var(--road-grey-200);\n}\n\n.position-right{\n  display: flex;\n  justify-content: flex-end;\n}\n\n.bg-white{\n  background: var(--road-grey-000);\n}\n\n.dropdown-button-icon{\n  width: 2.5rem;\n  height: 2.5rem;\n}\n\n.dropdown-medium-button .dropdown-button-icon{\n  width: 1.75rem;\n  height: 1.75rem;\n}\n\n/**\n * Open state\n */\n\n.dropdown[open] .dropdown-menu {\n  transform: scaleY(1);\n}\n\n.dropdown[open] .dropdown-menu.direction-top {\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  transform: translate3d(0, -56px, 0);\n  will-change: transform;\n}\n\n/* MENU\n -------------------- */\n\n.dropdown-menu {\n  position: absolute;\n  z-index: 1;\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  min-width: 16.875rem;\n  padding: 0.5rem 0;\n  color: var(--road-on-surface);\n  background: var(--road-surface);\n  border: 1px solid;\n  border-color: var(--road-outline-weak);\n  border-radius: 0.25rem;\n  box-shadow: var(--road-elevation-low);\n  transition: transform 0.2s ease-in-out;\n  transform: scaleY(0);\n  transform-origin: 0 0;\n}\n\n.dropdown-left {\n  left: 0;\n}\n\n.dropdown-right {\n  right: 0;\n}\n\n\n/* ITEM\n -------------------- */\n\n.dropdown-item {\n  min-height: 40px;\n  padding: 0 1rem;\n  font-size: var(--road-body-medium);\n  line-height: 1.5;\n  color: var(--road-on-surface);\n  text-align: left;\n  text-decoration: none;\n  cursor: pointer;\n  background: var(--road-surface);\n  border: none;\n  outline: none;\n}\n\n.dropdown-item-border {\n  border-color: var(--road-outline-weak);\n  border-bottom: 1px solid;\n}\n\n/**\n * Hover state\n */\n\n.dropdown-item:hover,\n.dropdown-item.focus-visible {\n  background: var(--road-surface-inverse);\n}\n\n\n","import { Component, h, Prop } from '@stencil/core';\n\n/**\n * @slot  - Element how will open the dropdown when clicked\n * @slot list - List of item values (you can add border with lines=`full` but not on the last item)\n)\n */\n\n@Component({\n  tag: 'road-dropdown',\n  styleUrl: 'dropdown.css',\n  shadow: true,\n})\nexport class Dropdown {\n\n  /**\n   * Set to `true` to open the dropdown menu and to `false` to close it.\n   */\n  @Prop({ mutable: true }) isOpen : boolean = false;\n\n  /**\n  * If you want to remove background of the dropdown button\n  */\n    @Prop() isLight : boolean = false;\n  \n  /**\n  * If you want a medium dropdown\n  */\n    @Prop() isMedium : boolean = false;\n\n    /**\n  * The button position.\n  */\n   @Prop({ reflect: true }) position?: 'left' | 'right';\n\n   /**\n  * The opening direction.\n  */\n    @Prop({ reflect: true }) direction?: 'top' | 'bottom' = 'bottom';\n\n  /**\n   * Toggle the display when clicking element in slot\n   */\n  private onClick = () => {\n    this.isOpen = !this.isOpen;\n  };\n\n  render() {\n\n    const isLightButtonDropDown = this.isLight == true ? `dropdown-button` : 'dropdown-button bg-white';\n    const isMediumButtonDropDown = this.isMedium == true ? `dropdown-medium-button dropdown-button` : 'dropdown-button bg-white';\n    const positionClass = this.position !== undefined ? `position-${this.position}` : '';\n    const dropdownClass = this.position !== undefined ? `dropdown-${this.position}` : '';\n    const directionClass = this.direction !== undefined ? `direction-${this.direction}` : '';\n\n\n    return (\n      <details class=\"dropdown\" open={this.isOpen}>\n        <summary aria-expanded={`${this.isOpen}`} tabindex=\"0\" role=\"button\" onClick={this.onClick}>\n          <div class={`d-flex ${positionClass}`}>\n            <div class={`${isLightButtonDropDown} ${isMediumButtonDropDown}`}>\n              <road-icon name=\"navigation-more\" class=\"dropdown-button-icon\"></road-icon>\n            </div>\n          </div>\n        </summary>\n        <div class={`dropdown-menu ${directionClass} ${dropdownClass}`}>\n          <slot name=\"list\"/>\n        </div>\n      </details>\n    );\n  }\n\n}\n"],"version":3}
+{"file":"road-dropdown.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,WAAW,GAAG,iqDAAiqD;;MCOxqD,QAAQ;;;IAWX,YAAO,GAAG;MAChB,IAAI,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,MAAM,CAAC;KAC5B,CAAC;kBARyC,KAAK;mBACrB,KAAK;oBACJ,KAAK;;qBAEuB,QAAQ;;EAOhE,mBAAmB,CAAC,EAAc;;IAEhC,IAAK,EAAE,CAAC,MAAsB,CAAC,OAAO,CAAC,eAAe,CAAC,KAAK,IAAI,CAAC,EAAE,EAAE;MACnE,OAAO;KACR;;IAED,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;GACrB;EAED,MAAM;IACJ,MAAM,qBAAqB,GAAG,IAAI,CAAC,OAAO,GAAG,iBAAiB,GAAG,0BAA0B,CAAC;IAC5F,MAAM,sBAAsB,GAAG,IAAI,CAAC,QAAQ,GAAG,wCAAwC,GAAG,0BAA0B,CAAC;IACrH,MAAM,aAAa,GAAG,IAAI,CAAC,QAAQ,GAAG,YAAY,IAAI,CAAC,QAAQ,EAAE,GAAG,EAAE,CAAC;IACvE,MAAM,aAAa,GAAG,IAAI,CAAC,QAAQ,GAAG,YAAY,IAAI,CAAC,QAAQ,EAAE,GAAG,EAAE,CAAC;IACvE,MAAM,cAAc,GAAG,IAAI,CAAC,SAAS,GAAG,aAAa,IAAI,CAAC,SAAS,EAAE,GAAG,EAAE,CAAC;IAE3E,QACEA,qBAAS,KAAK,EAAC,UAAU,EAAC,IAAI,EAAE,IAAI,CAAC,MAAM,IACzCA,sCAAwB,IAAI,CAAC,MAAM,CAAC,QAAQ,EAAE,EAAE,QAAQ,EAAC,GAAG,EAAC,IAAI,EAAC,QAAQ,EAAC,OAAO,EAAE,IAAI,CAAC,OAAO,IAC9FA,iBAAK,KAAK,EAAE,UAAU,aAAa,EAAE,IACnCA,iBAAK,KAAK,EAAE,GAAG,qBAAqB,IAAI,sBAAsB,EAAE,IAC9DA,uBAAW,IAAI,EAAC,iBAAiB,EAAC,KAAK,EAAC,sBAAsB,GAAa,CACvE,CACF,CACE,EACVA,iBAAK,KAAK,EAAE,iBAAiB,cAAc,IAAI,aAAa,EAAE,IAC5DA,kBAAM,IAAI,EAAC,MAAM,GAAG,CAChB,CACE,EACV;GACH;;;;;;;","names":["h"],"sources":["src/components/dropdown/dropdown.css?tag=road-dropdown&encapsulation=shadow","src/components/dropdown/dropdown.tsx"],"sourcesContent":["/*\n * Dropdown\n *\n * Index\n * - Dropdown\n * - Dropdown menu\n */\n\n/**\n * @prop --margin-top: Top margin of the menu\n */\n\n/* DROPDOWN\n -------------------- */\n\n:host {\n  --margin-top: 0.5rem;\n  display: block;\n}\n\n.dropdown {\n  position: relative;\n  font-family: var(--road-font);\n}\n\n.dropdown summary {\n  display: block;\n  outline: none;\n}\n\n.dropdown summary::-webkit-details-marker { /* remove native arrow */\n  display: none;\n}\n\n.dropdown-button{\n  position: relative;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 3.5rem;\n  height: 3.5rem;\n  cursor: pointer;\n  border-radius: 0.25rem;\n}\n\n.dropdown-medium-button{\n  width: 2.5rem;\n  height: 2.5rem;\n}\n\n.dropdown-button:hover{\n  background: var(--road-grey-200);\n}\n\n.position-right{\n  display: flex;\n  justify-content: flex-end;\n}\n\n.bg-white{\n  background: var(--road-grey-000);\n}\n\n.dropdown-button-icon{\n  width: 2.5rem;\n  height: 2.5rem;\n}\n\n.dropdown-medium-button .dropdown-button-icon{\n  width: 1.75rem;\n  height: 1.75rem;\n}\n\n/**\n * Open state\n */\n\n.dropdown[open] .dropdown-menu {\n  transform: scaleY(1);\n}\n\n.dropdown[open] .dropdown-menu.direction-top {\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  transform: translate3d(0, -56px, 0);\n  will-change: transform;\n}\n\n/* MENU\n -------------------- */\n\n.dropdown-menu {\n  position: absolute;\n  z-index: 1;\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  min-width: 16.875rem;\n  padding: 0.5rem 0;\n  color: var(--road-on-surface);\n  background: var(--road-surface);\n  border: 1px solid;\n  border-color: var(--road-outline-weak);\n  border-radius: 0.25rem;\n  box-shadow: var(--road-elevation-low);\n  transition: transform 0.2s ease-in-out;\n  transform: scaleY(0);\n  transform-origin: 0 0;\n}\n\n.dropdown-left {\n  left: 0;\n}\n\n.dropdown-right {\n  right: 0;\n}\n\n\n/* ITEM\n -------------------- */\n\n.dropdown-item {\n  min-height: 40px;\n  padding: 0 1rem;\n  font-size: var(--road-body-medium);\n  line-height: 1.5;\n  color: var(--road-on-surface);\n  text-align: left;\n  text-decoration: none;\n  cursor: pointer;\n  background: var(--road-surface);\n  border: none;\n  outline: none;\n}\n\n.dropdown-item-border {\n  border-color: var(--road-outline-weak);\n  border-bottom: 1px solid;\n}\n\n/**\n * Hover state\n */\n\n.dropdown-item:hover,\n.dropdown-item.focus-visible {\n  background: var(--road-surface-inverse);\n}\n\n\n","import { Component, h, Element, Prop, Listen } from '@stencil/core';\n\n@Component({\n  tag: 'road-dropdown',\n  styleUrl: 'dropdown.css',\n  shadow: true,\n})\nexport class Dropdown {\n\n  @Element() el!: HTMLRoadDropdownElement;\n\n\n  @Prop({ mutable: true }) isOpen: boolean = false;\n  @Prop() isLight: boolean = false;\n  @Prop() isMedium: boolean = false;\n  @Prop({ reflect: true }) position?: 'left' | 'right';\n  @Prop({ reflect: true }) direction?: 'top' | 'bottom' = 'bottom';\n\n  private onClick = () => {\n    this.isOpen = !this.isOpen;\n  };\n\n  @Listen('click', { target: 'document' })\n  handleDocumentClick(ev: MouseEvent) {\n    // Check if the clicked element is the dropdown button\n    if ((ev.target as HTMLElement).closest('road-dropdown') === this.el) {\n      return; // Do nothing if clicked element is the dropdown button\n    }\n    // Close dropdown if click is outside the dropdown\n    this.isOpen = false;\n  }\n\n  render() {\n    const isLightButtonDropDown = this.isLight ? 'dropdown-button' : 'dropdown-button bg-white';\n    const isMediumButtonDropDown = this.isMedium ? 'dropdown-medium-button dropdown-button' : 'dropdown-button bg-white';\n    const positionClass = this.position ? `position-${this.position}` : '';\n    const dropdownClass = this.position ? `dropdown-${this.position}` : '';\n    const directionClass = this.direction ? `direction-${this.direction}` : '';\n\n    return (\n      <details class=\"dropdown\" open={this.isOpen}>\n        <summary aria-expanded={this.isOpen.toString()} tabindex=\"0\" role=\"button\" onClick={this.onClick}>\n          <div class={`d-flex ${positionClass}`}>\n            <div class={`${isLightButtonDropDown} ${isMediumButtonDropDown}`}>\n              <road-icon name=\"navigation-more\" class=\"dropdown-button-icon\"></road-icon>\n            </div>\n          </div>\n        </summary>\n        <div class={`dropdown-menu ${directionClass} ${dropdownClass}`}>\n          <slot name=\"list\" />\n        </div>\n      </details>\n    );\n  }\n}\n"],"version":3}

package/dist/cjs/road-tab-bar.cjs.entry.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-12592729.js');
 require('./polyfill-b1fff766.js');
 
-const tabBarCss = ":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-grey-70);fill:currentColor;scrollbar-width:none}:host(::-webkit-scrollbar){display:none}:host(.tab-expand) ::slotted(road-tab-button){flex-grow:1}:host(.tab-secondary) ::slotted(road-tab-button){--tab-underline-selected:var(--road-secondary)}:host(.tab-center){justify-content:center}";
+const tabBarCss = ":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){flex-grow:1}:host(.tab-secondary) ::slotted(road-tab-button){--tab-underline-selected:var(--road-secondary)}:host(.tab-center){justify-content:center}";
 
 const TabBar = class {
   constructor(hostRef) {

package/dist/cjs/road-tab-bar.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"road-tab-bar.entry.cjs.js","mappings":";;;;;;;AAAA,MAAM,SAAS,GAAG,00BAA00B;;MCY/0B,MAAM;;;;;qBAOa,KAAK;kBAKT,KAAK;kBAKL,KAAK;;;EAO/B,kBAAkB;IAChB,IAAI,IAAI,CAAC,WAAW,KAAK,SAAS,EAAE;MAClC,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC;QAC1B,GAAG,EAAE,IAAI,CAAC,WAAW;OACtB,CAAC,CAAC;MACH,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC;QAC1B,GAAG,EAAE,IAAI,CAAC,WAAW;OACtB,CAAC,CAAC;KACJ;GACF;EAOD,iBAAiB;IACf,IAAI,CAAC,kBAAkB,EAAE,CAAC;GAC3B;EAED,MAAM;IACJ,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,SAAS,EAAE,GAAG,IAAI,CAAC;IAC3C,QACEA,QAACC,UAAI,IACH,IAAI,EAAC,SAAS,EACd,KAAK,EAAE;QACL,YAAY,EAAE,MAAM;QACpB,YAAY,EAAE,MAAM;QACpB,eAAe,EAAE,SAAS;OAC3B,IAEDD,qBAAO,CACF,EACP;GACH;;;;;;;;;;","names":["h","Host"],"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-grey-70);\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  flex-grow: 1;\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, 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() 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  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}"],"version":3}
+{"file":"road-tab-bar.entry.cjs.js","mappings":";;;;;;;AAAA,MAAM,SAAS,GAAG,+0BAA+0B;;MCYp1B,MAAM;;;;;qBAOa,KAAK;kBAKT,KAAK;kBAKL,KAAK;;;EAO/B,kBAAkB;IAChB,IAAI,IAAI,CAAC,WAAW,KAAK,SAAS,EAAE;MAClC,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC;QAC1B,GAAG,EAAE,IAAI,CAAC,WAAW;OACtB,CAAC,CAAC;MACH,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC;QAC1B,GAAG,EAAE,IAAI,CAAC,WAAW;OACtB,CAAC,CAAC;KACJ;GACF;EAOD,iBAAiB;IACf,IAAI,CAAC,kBAAkB,EAAE,CAAC;GAC3B;EAED,MAAM;IACJ,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,SAAS,EAAE,GAAG,IAAI,CAAC;IAC3C,QACEA,QAACC,UAAI,IACH,IAAI,EAAC,SAAS,EACd,KAAK,EAAE;QACL,YAAY,EAAE,MAAM;QACpB,YAAY,EAAE,MAAM;QACpB,eAAe,EAAE,SAAS;OAC3B,IAEDD,qBAAO,CACF,EACP;GACH;;;;;;;;;;","names":["h","Host"],"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  flex-grow: 1;\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, 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() 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  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}"],"version":3}

package/dist/cjs/roadtrip.cjs.js

@@ -17,7 +17,7 @@ const patchBrowser = () => {
 };
 
 patchBrowser().then(options => {
-  return index.bootstrapLazy(JSON.parse("[[\"road-badge_14.cjs\",[[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\",{\"button\":[4],\"detail\":[4],\"active\":[4],\"detailIcon\":[1,\"detail-icon\"],\"disabled\":[4],\"download\":[1],\"href\":[1],\"rel\":[1],\"lines\":[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\"],[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]}],[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-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.cjs\",[[1,\"road-duration\",{\"isOpen\":[1028,\"is-open\"],\"header\":[1],\"min\":[2],\"max\":[2],\"step\":[2],\"open\":[64],\"close\":[64]},[[0,\"roadcardclick\",\"handleClick\"]]]]],[\"road-content-card.cjs\",[[1,\"road-content-card\",{\"insetImage\":[4,\"inset-image\"]}]]],[\"road-phone-number-input.cjs\",[[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-plate-number.cjs\",[[2,\"road-plate-number\",{\"country\":[1],\"disabled\":[4],\"placeholder\":[1],\"readonly\":[4],\"value\":[1032],\"motorbike\":[4]},null,{\"value\":[\"valueChanged\"]}]]],[\"road-profil-dropdown.cjs\",[[1,\"road-profil-dropdown\",{\"isOpen\":[1028,\"is-open\"]}]]],[\"road-rating.cjs\",[[1,\"road-rating\",{\"size\":[513],\"rate\":[2],\"showreviews\":[4],\"readonly\":[4],\"reviews\":[2],\"reviewsText\":[1,\"reviews-text\"],\"url\":[1]}]]],[\"road-accordion.cjs\",[[1,\"road-accordion\",{\"isOpen\":[1028,\"is-open\"],\"isLight\":[4,\"is-light\"],\"isLightSeparator\":[4,\"is-light-separator\"],\"isSmall\":[4,\"is-small\"]}]]],[\"road-banner.cjs\",[[1,\"road-banner\",{\"isOpen\":[1028,\"is-open\"],\"label\":[1],\"link\":[1],\"url\":[1],\"close\":[64]}]]],[\"road-carousel.cjs\",[[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.cjs\",[[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.cjs\",[[1,\"road-chip\",{\"color\":[1],\"outline\":[4],\"size\":[1],\"hasCloseIcon\":[4,\"has-close-icon\"]}]]],[\"road-collapse.cjs\",[[1,\"road-collapse\",{\"isOpen\":[1028,\"is-open\"],\"showMore\":[1,\"show-more\"],\"showLess\":[1,\"show-less\"],\"centered\":[4]}]]],[\"road-dialog.cjs\",[[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.cjs\",[[1,\"road-dropdown\",{\"isOpen\":[1028,\"is-open\"],\"isLight\":[4,\"is-light\"],\"isMedium\":[4,\"is-medium\"],\"position\":[513],\"direction\":[513]}]]],[\"road-modal.cjs\",[[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.cjs\",[[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\"]},null,{\"value\":[\"valueChanged\"]}]]],[\"road-toast.cjs\",[[1,\"road-toast\",{\"isOpen\":[1028,\"is-open\"],\"color\":[1],\"label\":[1],\"timeout\":[2],\"open\":[64],\"close\":[64]},null,{\"isOpen\":[\"isOpenChanged\"]}]]],[\"road-alert.cjs\",[[1,\"road-alert\",{\"color\":[1],\"label\":[1],\"button\":[1],\"link\":[1],\"url\":[1]}]]],[\"road-area-code.cjs\",[[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.cjs\",[[6,\"road-autocomplete\",{\"options\":[16],\"visible\":[32]},[[0,\"roadFocus\",\"handleFocus\"],[0,\"roadfocus\",\"handleFocus\"],[4,\"click\",\"onClickOutside\"]]]]],[\"road-button-floating.cjs\",[[1,\"road-button-floating\",{\"position\":[513],\"href\":[1],\"rel\":[1],\"target\":[1]},[[9,\"scroll\",\"onScroll\"]]]]],[\"road-carousel-item.cjs\",[[4,\"road-carousel-item\"]]],[\"road-flap.cjs\",[[1,\"road-flap\",{\"color\":[1],\"filled\":[4],\"size\":[513]}]]],[\"road-global-navigation.cjs\",[[1,\"road-global-navigation\",{\"selectedTab\":[1,\"selected-tab\"]},[[0,\"roadNavbarItemClick\",\"onNavbarChanged\"],[0,\"roadnavbaritemclick\",\"onNavbarChanged\"]],{\"selectedTab\":[\"selectedTabChanged\"]}]]],[\"road-illustration.cjs\",[[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.cjs\",[[1,\"road-navbar\",{\"selectedTab\":[1,\"selected-tab\"]},[[0,\"roadNavbarItemClick\",\"onNavbarChanged\"],[0,\"roadnavbaritemclick\",\"onNavbarChanged\"]],{\"selectedTab\":[\"selectedTabChanged\"]}]]],[\"road-navbar-item.cjs\",[[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.cjs\",[[1,\"road-progress\",{\"value\":[2],\"numbersteps\":[1],\"label\":[1],\"showstep\":[4],\"animation\":[4],\"light\":[4],\"fullwidth\":[4],\"color\":[1]}]]],[\"road-progress-indicator-horizontal.cjs\",[[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.cjs\",[[1,\"road-progress-indicator-vertical\"]]],[\"road-progress-indicator-vertical-item.cjs\",[[4,\"road-progress-indicator-vertical-item\"]]],[\"road-progress-tracker.cjs\",[[1,\"road-progress-tracker\"]]],[\"road-progress-tracker-item.cjs\",[[4,\"road-progress-tracker-item\"]]],[\"road-radio.cjs\",[[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.cjs\",[[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.cjs\",[[1,\"road-segmented-button\",{\"size\":[1],\"selected\":[1028],\"tab\":[1]},[[8,\"roadSegmentedButtonBarChanged\",\"onButtonBarChanged\"],[8,\"roadSegmentedButtonbarchanged\",\"onButtonBarChanged\"]]]]],[\"road-segmented-button-bar.cjs\",[[1,\"road-segmented-button-bar\",{\"selectedTab\":[1,\"selected-tab\"]},null,{\"selectedTab\":[\"selectedTabChanged\"]}]]],[\"road-segmented-buttons.cjs\",[[1,\"road-segmented-buttons\",{\"selectedTab\":[32],\"select\":[64],\"getTab\":[64],\"getSelected\":[64]}]]],[\"road-select.cjs\",[[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.cjs\",[[6,\"road-select-filter\",{\"options\":[16],\"parameters\":[8],\"isActive\":[4,\"is-active\"],\"onlySelect\":[4,\"only-select\"],\"isOpen\":[32],\"currentValue\":[32]},[[0,\"roadFocus\",\"handleFocus\"],[0,\"roadfocus\",\"handleFocus\"],[0,\"roadBlur\",\"handleBlur\"],[0,\"roadblur\",\"handleBlur\"],[0,\"roadChange\",\"handleChange\"],[0,\"roadchange\",\"handleChange\"],[4,\"click\",\"onClickOutside\"]]]]],[\"road-skeleton.cjs\",[[1,\"road-skeleton\"]]],[\"road-spinner.cjs\",[[1,\"road-spinner\",{\"size\":[513],\"color\":[513]}]]],[\"road-switch.cjs\",[[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.cjs\",[[1,\"road-tab\",{\"active\":[1028],\"tab\":[1],\"setActive\":[64]}]]],[\"road-tab-bar.cjs\",[[1,\"road-tab-bar\",{\"secondary\":[4],\"expand\":[4],\"center\":[4],\"selectedTab\":[1,\"selected-tab\"]},null,{\"selectedTab\":[\"selectedTabChanged\"]}]]],[\"road-tab-button.cjs\",[[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.cjs\",[[6,\"road-table\"]]],[\"road-tabs.cjs\",[[1,\"road-tabs\",{\"selectedTab\":[32],\"select\":[64],\"getTab\":[64],\"getSelected\":[64]}]]],[\"road-tag.cjs\",[[1,\"road-tag\",{\"color\":[1],\"contrast\":[4]}]]],[\"road-text.cjs\",[[1,\"road-text\",{\"color\":[1]}]]],[\"road-textarea.cjs\",[[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.cjs\",[[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.cjs\",[[1,\"road-toolbar-title\"]]],[\"road-toolbar-title-page.cjs\",[[1,\"road-toolbar-title-page\"]]],[\"road-tooltip.cjs\",[[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.cjs\",[[1,\"road-avatar\",{\"size\":[513]}]]],[\"road-card.cjs\",[[1,\"road-card\",{\"elevation\":[1],\"button\":[4],\"value\":[1],\"type\":[1],\"download\":[1],\"href\":[1],\"rel\":[1],\"target\":[1]}]]],[\"road-img.cjs\",[[1,\"road-img\",{\"alt\":[1],\"src\":[1],\"loadSrc\":[32],\"loadError\":[32]},null,{\"src\":[\"srcChanged\"]}]]]]"), options);
+  return index.bootstrapLazy(JSON.parse("[[\"road-badge_14.cjs\",[[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\"],[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]}],[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-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.cjs\",[[1,\"road-duration\",{\"isOpen\":[1028,\"is-open\"],\"header\":[1],\"min\":[2],\"max\":[2],\"step\":[2],\"open\":[64],\"close\":[64]},[[0,\"roadcardclick\",\"handleClick\"]]]]],[\"road-content-card.cjs\",[[1,\"road-content-card\",{\"insetImage\":[4,\"inset-image\"]}]]],[\"road-phone-number-input.cjs\",[[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-plate-number.cjs\",[[2,\"road-plate-number\",{\"country\":[1],\"disabled\":[4],\"placeholder\":[1],\"readonly\":[4],\"value\":[1032],\"motorbike\":[4]},null,{\"value\":[\"valueChanged\"]}]]],[\"road-profil-dropdown.cjs\",[[1,\"road-profil-dropdown\",{\"isOpen\":[1028,\"is-open\"]}]]],[\"road-rating.cjs\",[[1,\"road-rating\",{\"size\":[513],\"rate\":[2],\"showreviews\":[4],\"readonly\":[4],\"reviews\":[2],\"reviewsText\":[1,\"reviews-text\"],\"url\":[1]}]]],[\"road-accordion.cjs\",[[1,\"road-accordion\",{\"isOpen\":[1028,\"is-open\"],\"isLight\":[4,\"is-light\"],\"isLightSeparator\":[4,\"is-light-separator\"],\"isSmall\":[4,\"is-small\"]}]]],[\"road-banner.cjs\",[[1,\"road-banner\",{\"isOpen\":[1028,\"is-open\"],\"label\":[1],\"link\":[1],\"url\":[1],\"close\":[64]}]]],[\"road-carousel.cjs\",[[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.cjs\",[[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.cjs\",[[1,\"road-chip\",{\"color\":[1],\"outline\":[4],\"size\":[1],\"hasCloseIcon\":[4,\"has-close-icon\"]}]]],[\"road-collapse.cjs\",[[1,\"road-collapse\",{\"isOpen\":[1028,\"is-open\"],\"showMore\":[1,\"show-more\"],\"showLess\":[1,\"show-less\"],\"centered\":[4]}]]],[\"road-dialog.cjs\",[[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.cjs\",[[1,\"road-dropdown\",{\"isOpen\":[1028,\"is-open\"],\"isLight\":[4,\"is-light\"],\"isMedium\":[4,\"is-medium\"],\"position\":[513],\"direction\":[513]},[[4,\"click\",\"handleDocumentClick\"]]]]],[\"road-modal.cjs\",[[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.cjs\",[[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\"]},null,{\"value\":[\"valueChanged\"]}]]],[\"road-toast.cjs\",[[1,\"road-toast\",{\"isOpen\":[1028,\"is-open\"],\"color\":[1],\"label\":[1],\"timeout\":[2],\"open\":[64],\"close\":[64]},null,{\"isOpen\":[\"isOpenChanged\"]}]]],[\"road-alert.cjs\",[[1,\"road-alert\",{\"color\":[1],\"label\":[1],\"button\":[1],\"link\":[1],\"url\":[1]}]]],[\"road-area-code.cjs\",[[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.cjs\",[[6,\"road-autocomplete\",{\"options\":[16],\"visible\":[32]},[[0,\"roadFocus\",\"handleFocus\"],[0,\"roadfocus\",\"handleFocus\"],[4,\"click\",\"onClickOutside\"]]]]],[\"road-button-floating.cjs\",[[1,\"road-button-floating\",{\"position\":[513],\"href\":[1],\"rel\":[1],\"target\":[1]},[[9,\"scroll\",\"onScroll\"]]]]],[\"road-carousel-item.cjs\",[[4,\"road-carousel-item\"]]],[\"road-flap.cjs\",[[1,\"road-flap\",{\"color\":[1],\"filled\":[4],\"size\":[513]}]]],[\"road-global-navigation.cjs\",[[1,\"road-global-navigation\",{\"selectedTab\":[1,\"selected-tab\"]},[[0,\"roadNavbarItemClick\",\"onNavbarChanged\"],[0,\"roadnavbaritemclick\",\"onNavbarChanged\"]],{\"selectedTab\":[\"selectedTabChanged\"]}]]],[\"road-illustration.cjs\",[[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.cjs\",[[1,\"road-navbar\",{\"selectedTab\":[1,\"selected-tab\"]},[[0,\"roadNavbarItemClick\",\"onNavbarChanged\"],[0,\"roadnavbaritemclick\",\"onNavbarChanged\"]],{\"selectedTab\":[\"selectedTabChanged\"]}]]],[\"road-navbar-item.cjs\",[[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.cjs\",[[1,\"road-progress\",{\"value\":[2],\"numbersteps\":[1],\"label\":[1],\"showstep\":[4],\"animation\":[4],\"light\":[4],\"fullwidth\":[4],\"color\":[1]}]]],[\"road-progress-indicator-horizontal.cjs\",[[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.cjs\",[[1,\"road-progress-indicator-vertical\"]]],[\"road-progress-indicator-vertical-item.cjs\",[[4,\"road-progress-indicator-vertical-item\"]]],[\"road-progress-tracker.cjs\",[[1,\"road-progress-tracker\"]]],[\"road-progress-tracker-item.cjs\",[[4,\"road-progress-tracker-item\"]]],[\"road-radio.cjs\",[[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.cjs\",[[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.cjs\",[[1,\"road-segmented-button\",{\"size\":[1],\"selected\":[1028],\"tab\":[1]},[[8,\"roadSegmentedButtonBarChanged\",\"onButtonBarChanged\"],[8,\"roadSegmentedButtonbarchanged\",\"onButtonBarChanged\"]]]]],[\"road-segmented-button-bar.cjs\",[[1,\"road-segmented-button-bar\",{\"selectedTab\":[1,\"selected-tab\"]},null,{\"selectedTab\":[\"selectedTabChanged\"]}]]],[\"road-segmented-buttons.cjs\",[[1,\"road-segmented-buttons\",{\"selectedTab\":[32],\"select\":[64],\"getTab\":[64],\"getSelected\":[64]}]]],[\"road-select.cjs\",[[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.cjs\",[[6,\"road-select-filter\",{\"options\":[16],\"parameters\":[8],\"isActive\":[4,\"is-active\"],\"onlySelect\":[4,\"only-select\"],\"isOpen\":[32],\"currentValue\":[32]},[[0,\"roadFocus\",\"handleFocus\"],[0,\"roadfocus\",\"handleFocus\"],[0,\"roadBlur\",\"handleBlur\"],[0,\"roadblur\",\"handleBlur\"],[0,\"roadChange\",\"handleChange\"],[0,\"roadchange\",\"handleChange\"],[4,\"click\",\"onClickOutside\"]]]]],[\"road-skeleton.cjs\",[[1,\"road-skeleton\"]]],[\"road-spinner.cjs\",[[1,\"road-spinner\",{\"size\":[513],\"color\":[513]}]]],[\"road-switch.cjs\",[[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.cjs\",[[1,\"road-tab\",{\"active\":[1028],\"tab\":[1],\"setActive\":[64]}]]],[\"road-tab-bar.cjs\",[[1,\"road-tab-bar\",{\"secondary\":[4],\"expand\":[4],\"center\":[4],\"selectedTab\":[1,\"selected-tab\"]},null,{\"selectedTab\":[\"selectedTabChanged\"]}]]],[\"road-tab-button.cjs\",[[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.cjs\",[[6,\"road-table\"]]],[\"road-tabs.cjs\",[[1,\"road-tabs\",{\"selectedTab\":[32],\"select\":[64],\"getTab\":[64],\"getSelected\":[64]}]]],[\"road-tag.cjs\",[[1,\"road-tag\",{\"color\":[1],\"contrast\":[4]}]]],[\"road-text.cjs\",[[1,\"road-text\",{\"color\":[1]}]]],[\"road-textarea.cjs\",[[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.cjs\",[[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.cjs\",[[1,\"road-toolbar-title\"]]],[\"road-toolbar-title-page.cjs\",[[1,\"road-toolbar-title-page\"]]],[\"road-tooltip.cjs\",[[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.cjs\",[[1,\"road-avatar\",{\"size\":[513]}]]],[\"road-card.cjs\",[[1,\"road-card\",{\"elevation\":[1],\"button\":[4],\"value\":[1],\"type\":[1],\"download\":[1],\"href\":[1],\"rel\":[1],\"target\":[1]}]]],[\"road-img.cjs\",[[1,\"road-img\",{\"alt\":[1],\"src\":[1],\"loadSrc\":[32],\"loadError\":[32]},null,{\"src\":[\"srcChanged\"]}]]]]"), options);
 });
 
 exports.setNonce = index.setNonce;

package/dist/collection/components/dropdown/dropdown.js

@@ -1,14 +1,6 @@
 import { h } from "@stencil/core";
-/**
- * @slot  - Element how will open the dropdown when clicked
- * @slot list - List of item values (you can add border with lines=`full` but not on the last item)
-)
- */
 export class Dropdown {
   constructor() {
-    /**
-     * Toggle the display when clicking element in slot
-     */
     this.onClick = () => {
       this.isOpen = !this.isOpen;
     };
@@ -18,13 +10,21 @@ export class Dropdown {
     this.position = undefined;
     this.direction = 'bottom';
   }
+  handleDocumentClick(ev) {
+    // Check if the clicked element is the dropdown button
+    if (ev.target.closest('road-dropdown') === this.el) {
+      return; // Do nothing if clicked element is the dropdown button
+    }
+    // Close dropdown if click is outside the dropdown
+    this.isOpen = false;
+  }
   render() {
-    const isLightButtonDropDown = this.isLight == true ? `dropdown-button` : 'dropdown-button bg-white';
-    const isMediumButtonDropDown = this.isMedium == true ? `dropdown-medium-button dropdown-button` : 'dropdown-button bg-white';
-    const positionClass = this.position !== undefined ? `position-${this.position}` : '';
-    const dropdownClass = this.position !== undefined ? `dropdown-${this.position}` : '';
-    const directionClass = this.direction !== undefined ? `direction-${this.direction}` : '';
-    return (h("details", { class: "dropdown", open: this.isOpen }, h("summary", { "aria-expanded": `${this.isOpen}`, tabindex: "0", role: "button", onClick: this.onClick }, h("div", { class: `d-flex ${positionClass}` }, h("div", { class: `${isLightButtonDropDown} ${isMediumButtonDropDown}` }, h("road-icon", { name: "navigation-more", class: "dropdown-button-icon" })))), h("div", { class: `dropdown-menu ${directionClass} ${dropdownClass}` }, h("slot", { name: "list" }))));
+    const isLightButtonDropDown = this.isLight ? 'dropdown-button' : 'dropdown-button bg-white';
+    const isMediumButtonDropDown = this.isMedium ? 'dropdown-medium-button dropdown-button' : 'dropdown-button bg-white';
+    const positionClass = this.position ? `position-${this.position}` : '';
+    const dropdownClass = this.position ? `dropdown-${this.position}` : '';
+    const directionClass = this.direction ? `direction-${this.direction}` : '';
+    return (h("details", { class: "dropdown", open: this.isOpen }, h("summary", { "aria-expanded": this.isOpen.toString(), tabindex: "0", role: "button", onClick: this.onClick }, h("div", { class: `d-flex ${positionClass}` }, h("div", { class: `${isLightButtonDropDown} ${isMediumButtonDropDown}` }, h("road-icon", { name: "navigation-more", class: "dropdown-button-icon" })))), h("div", { class: `dropdown-menu ${directionClass} ${dropdownClass}` }, h("slot", { name: "list" }))));
   }
   static get is() { return "road-dropdown"; }
   static get encapsulation() { return "shadow"; }
@@ -52,7 +52,7 @@ export class Dropdown {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Set to `true` to open the dropdown menu and to `false` to close it."
+          "text": ""
         },
         "attribute": "is-open",
         "reflect": false,
@@ -70,7 +70,7 @@ export class Dropdown {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "If you want to remove background of the dropdown button"
+          "text": ""
         },
         "attribute": "is-light",
         "reflect": false,
@@ -88,7 +88,7 @@ export class Dropdown {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "If you want a medium dropdown"
+          "text": ""
         },
         "attribute": "is-medium",
         "reflect": false,
@@ -106,7 +106,7 @@ export class Dropdown {
         "optional": true,
         "docs": {
           "tags": [],
-          "text": "The button position."
+          "text": ""
         },
         "attribute": "position",
         "reflect": true
@@ -123,7 +123,7 @@ export class Dropdown {
         "optional": true,
         "docs": {
           "tags": [],
-          "text": "The opening direction."
+          "text": ""
         },
         "attribute": "direction",
         "reflect": true,
@@ -131,5 +131,15 @@ export class Dropdown {
       }
     };
   }
+  static get elementRef() { return "el"; }
+  static get listeners() {
+    return [{
+        "name": "click",
+        "method": "handleDocumentClick",
+        "target": "document",
+        "capture": false,
+        "passive": false
+      }];
+  }
 }
 //# sourceMappingURL=dropdown.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"dropdown.js","sourceRoot":"","sources":["../../../src/components/dropdown/dropdown.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAEnD;;;;GAIG;AAOH,MAAM,OAAO,QAAQ;;IA2BnB;;OAEG;IACK,YAAO,GAAG,GAAG,EAAE;MACrB,IAAI,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,MAAM,CAAC;IAC7B,CAAC,CAAC;kBA3B0C,KAAK;mBAKnB,KAAK;oBAKJ,KAAK;;qBAUsB,QAAQ;;EASlE,MAAM;IAEJ,MAAM,qBAAqB,GAAG,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,0BAA0B,CAAC;IACpG,MAAM,sBAAsB,GAAG,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,CAAC,CAAC,wCAAwC,CAAC,CAAC,CAAC,0BAA0B,CAAC;IAC7H,MAAM,aAAa,GAAG,IAAI,CAAC,QAAQ,KAAK,SAAS,CAAC,CAAC,CAAC,YAAY,IAAI,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;IACrF,MAAM,aAAa,GAAG,IAAI,CAAC,QAAQ,KAAK,SAAS,CAAC,CAAC,CAAC,YAAY,IAAI,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;IACrF,MAAM,cAAc,GAAG,IAAI,CAAC,SAAS,KAAK,SAAS,CAAC,CAAC,CAAC,aAAa,IAAI,CAAC,SAAS,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;IAGzF,OAAO,CACL,eAAS,KAAK,EAAC,UAAU,EAAC,IAAI,EAAE,IAAI,CAAC,MAAM;MACzC,gCAAwB,GAAG,IAAI,CAAC,MAAM,EAAE,EAAE,QAAQ,EAAC,GAAG,EAAC,IAAI,EAAC,QAAQ,EAAC,OAAO,EAAE,IAAI,CAAC,OAAO;QACxF,WAAK,KAAK,EAAE,UAAU,aAAa,EAAE;UACnC,WAAK,KAAK,EAAE,GAAG,qBAAqB,IAAI,sBAAsB,EAAE;YAC9D,iBAAW,IAAI,EAAC,iBAAiB,EAAC,KAAK,EAAC,sBAAsB,GAAa,CACvE,CACF,CACE;MACV,WAAK,KAAK,EAAE,iBAAiB,cAAc,IAAI,aAAa,EAAE;QAC5D,YAAM,IAAI,EAAC,MAAM,GAAE,CACf,CACE,CACX,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAEF","sourcesContent":["import { Component, h, Prop } from '@stencil/core';\n\n/**\n * @slot  - Element how will open the dropdown when clicked\n * @slot list - List of item values (you can add border with lines=`full` but not on the last item)\n)\n */\n\n@Component({\n  tag: 'road-dropdown',\n  styleUrl: 'dropdown.css',\n  shadow: true,\n})\nexport class Dropdown {\n\n  /**\n   * Set to `true` to open the dropdown menu and to `false` to close it.\n   */\n  @Prop({ mutable: true }) isOpen : boolean = false;\n\n  /**\n  * If you want to remove background of the dropdown button\n  */\n    @Prop() isLight : boolean = false;\n  \n  /**\n  * If you want a medium dropdown\n  */\n    @Prop() isMedium : boolean = false;\n\n    /**\n  * The button position.\n  */\n   @Prop({ reflect: true }) position?: 'left' | 'right';\n\n   /**\n  * The opening direction.\n  */\n    @Prop({ reflect: true }) direction?: 'top' | 'bottom' = 'bottom';\n\n  /**\n   * Toggle the display when clicking element in slot\n   */\n  private onClick = () => {\n    this.isOpen = !this.isOpen;\n  };\n\n  render() {\n\n    const isLightButtonDropDown = this.isLight == true ? `dropdown-button` : 'dropdown-button bg-white';\n    const isMediumButtonDropDown = this.isMedium == true ? `dropdown-medium-button dropdown-button` : 'dropdown-button bg-white';\n    const positionClass = this.position !== undefined ? `position-${this.position}` : '';\n    const dropdownClass = this.position !== undefined ? `dropdown-${this.position}` : '';\n    const directionClass = this.direction !== undefined ? `direction-${this.direction}` : '';\n\n\n    return (\n      <details class=\"dropdown\" open={this.isOpen}>\n        <summary aria-expanded={`${this.isOpen}`} tabindex=\"0\" role=\"button\" onClick={this.onClick}>\n          <div class={`d-flex ${positionClass}`}>\n            <div class={`${isLightButtonDropDown} ${isMediumButtonDropDown}`}>\n              <road-icon name=\"navigation-more\" class=\"dropdown-button-icon\"></road-icon>\n            </div>\n          </div>\n        </summary>\n        <div class={`dropdown-menu ${directionClass} ${dropdownClass}`}>\n          <slot name=\"list\"/>\n        </div>\n      </details>\n    );\n  }\n\n}\n"]}
+{"version":3,"file":"dropdown.js","sourceRoot":"","sources":["../../../src/components/dropdown/dropdown.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AAOpE,MAAM,OAAO,QAAQ;;IAWX,YAAO,GAAG,GAAG,EAAE;MACrB,IAAI,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,MAAM,CAAC;IAC7B,CAAC,CAAC;kBARyC,KAAK;mBACrB,KAAK;oBACJ,KAAK;;qBAEuB,QAAQ;;EAOhE,mBAAmB,CAAC,EAAc;IAChC,sDAAsD;IACtD,IAAK,EAAE,CAAC,MAAsB,CAAC,OAAO,CAAC,eAAe,CAAC,KAAK,IAAI,CAAC,EAAE,EAAE;MACnE,OAAO,CAAC,uDAAuD;KAChE;IACD,kDAAkD;IAClD,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;EACtB,CAAC;EAED,MAAM;IACJ,MAAM,qBAAqB,GAAG,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,0BAA0B,CAAC;IAC5F,MAAM,sBAAsB,GAAG,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,wCAAwC,CAAC,CAAC,CAAC,0BAA0B,CAAC;IACrH,MAAM,aAAa,GAAG,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,YAAY,IAAI,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;IACvE,MAAM,aAAa,GAAG,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,YAAY,IAAI,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;IACvE,MAAM,cAAc,GAAG,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,aAAa,IAAI,CAAC,SAAS,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;IAE3E,OAAO,CACL,eAAS,KAAK,EAAC,UAAU,EAAC,IAAI,EAAE,IAAI,CAAC,MAAM;MACzC,gCAAwB,IAAI,CAAC,MAAM,CAAC,QAAQ,EAAE,EAAE,QAAQ,EAAC,GAAG,EAAC,IAAI,EAAC,QAAQ,EAAC,OAAO,EAAE,IAAI,CAAC,OAAO;QAC9F,WAAK,KAAK,EAAE,UAAU,aAAa,EAAE;UACnC,WAAK,KAAK,EAAE,GAAG,qBAAqB,IAAI,sBAAsB,EAAE;YAC9D,iBAAW,IAAI,EAAC,iBAAiB,EAAC,KAAK,EAAC,sBAAsB,GAAa,CACvE,CACF,CACE;MACV,WAAK,KAAK,EAAE,iBAAiB,cAAc,IAAI,aAAa,EAAE;QAC5D,YAAM,IAAI,EAAC,MAAM,GAAG,CAChB,CACE,CACX,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Element, Prop, Listen } from '@stencil/core';\n\n@Component({\n  tag: 'road-dropdown',\n  styleUrl: 'dropdown.css',\n  shadow: true,\n})\nexport class Dropdown {\n\n  @Element() el!: HTMLRoadDropdownElement;\n\n\n  @Prop({ mutable: true }) isOpen: boolean = false;\n  @Prop() isLight: boolean = false;\n  @Prop() isMedium: boolean = false;\n  @Prop({ reflect: true }) position?: 'left' | 'right';\n  @Prop({ reflect: true }) direction?: 'top' | 'bottom' = 'bottom';\n\n  private onClick = () => {\n    this.isOpen = !this.isOpen;\n  };\n\n  @Listen('click', { target: 'document' })\n  handleDocumentClick(ev: MouseEvent) {\n    // Check if the clicked element is the dropdown button\n    if ((ev.target as HTMLElement).closest('road-dropdown') === this.el) {\n      return; // Do nothing if clicked element is the dropdown button\n    }\n    // Close dropdown if click is outside the dropdown\n    this.isOpen = false;\n  }\n\n  render() {\n    const isLightButtonDropDown = this.isLight ? 'dropdown-button' : 'dropdown-button bg-white';\n    const isMediumButtonDropDown = this.isMedium ? 'dropdown-medium-button dropdown-button' : 'dropdown-button bg-white';\n    const positionClass = this.position ? `position-${this.position}` : '';\n    const dropdownClass = this.position ? `dropdown-${this.position}` : '';\n    const directionClass = this.direction ? `direction-${this.direction}` : '';\n\n    return (\n      <details class=\"dropdown\" open={this.isOpen}>\n        <summary aria-expanded={this.isOpen.toString()} tabindex=\"0\" role=\"button\" onClick={this.onClick}>\n          <div class={`d-flex ${positionClass}`}>\n            <div class={`${isLightButtonDropDown} ${isMediumButtonDropDown}`}>\n              <road-icon name=\"navigation-more\" class=\"dropdown-button-icon\"></road-icon>\n            </div>\n          </div>\n        </summary>\n        <div class={`dropdown-menu ${directionClass} ${dropdownClass}`}>\n          <slot name=\"list\" />\n        </div>\n      </details>\n    );\n  }\n}\n"]}

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

@@ -53,25 +53,25 @@ export default {
     'is-light': null,
     'is-medium': null,
     list: `<road-list slot="list">
-    <road-item button style="--border-radius: 0; --min-height: 2.5rem; --inner-padding: 0;">
+    <road-item button class="border-0">
       <road-icon slot="start" name="picture" size="md"></road-icon>
       <road-label>
         Label
       </road-label>
     </road-item>
-    <road-item button style="--border-radius: 0; --min-height: 2.5rem; --inner-padding: 0;">
+    <road-item button class="border-0">
       <road-icon slot="start" name="picture" size="md"></road-icon>
       <road-label>
         Label
       </road-label>
     </road-item>
-    <road-item button style="--border-radius: 0; --min-height: 2.5rem; --inner-padding: 0;">
+    <road-item button class="border-0">
       <road-icon slot="start" name="picture" size="md"></road-icon>
       <road-label>
         Label
       </road-label>
     </road-item>
-    <road-item button style="--border-radius: 0; --min-height: 2.5rem; --inner-padding: 0;">
+    <road-item button class="border-0">
       <road-icon slot="start" name="picture" size="md"></road-icon>
       <road-label>
         Label

package/dist/collection/components/icon/svg/check-list-solid.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><path fill-rule="evenodd" clip-rule="evenodd" d="M50.16 57.518H13.84a3.524 3.524 0 0 1-3.52-3.52v-42a3.524 3.524 0 0 1 3.52-3.52h33.78v.005h2.54a3.525 3.525 0 0 1 3.521 3.52v42a3.526 3.526 0 0 1-3.52 3.52l-.002-.005ZM18.955 21.135l-1.767 1.767 3.623 3.624 6.471-6.472-1.768-1.768-4.703 4.704-1.856-1.855Zm.111 20.365v3.855h3.855V41.5h-3.855Zm10.7.728v2.527H45v-2.527H29.767ZM19.13 31.374v3.855h3.855v-3.855H19.13Zm10.638.728v2.527H45v-2.527H29.767Zm0-10.126v2.527H45v-2.527H29.767Z"/></svg>

package/dist/collection/components/icon/svg/vehicle-car-search-color.svg

@@ -1 +1 @@
-<svg  xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><path d="M52.7 46.85H7.3V30.07h29.54a1.25 1.25 0 0 0 0-2.5H7.79l4.52-13.47c.22-.66.84-1.1 1.53-1.1h17.45v-2.5H13.85c-1.77 0-3.34 1.13-3.9 2.81L5.16 27.58H2.71a1.25 1.25 0 0 0 0 2.5h2.1v21.39c0 2.24 1.82 4.05 4.05 4.05 2.23 0 4.05-1.82 4.05-4.05v-2.11h34.18v2.11c0 2.24 1.82 4.05 4.05 4.05 2.23 0 4.05-1.82 4.05-4.05v-19.7h-2.5v15.08h.01Zm-42.28 4.61c0 .86-.7 1.55-1.55 1.55-.85 0-1.55-.7-1.55-1.55v-2.11h3.11v2.11h-.01Zm42.28 0c0 .86-.7 1.55-1.55 1.55-.85 0-1.55-.7-1.55-1.55v-2.11h3.11v2.11h-.01Z" /><path d="M10.7 38.61c0 2.89 2.36 5.25 5.25 5.25s5.25-2.36 5.25-5.25-2.36-5.25-5.25-5.25-5.25 2.36-5.25 5.25Zm8 0c0 1.52-1.23 2.75-2.75 2.75s-2.75-1.23-2.75-2.75 1.23-2.75 2.75-2.75 2.75 1.23 2.75 2.75ZM49.3 38.54c0-2.89-2.36-5.25-5.25-5.25s-5.25 2.36-5.25 5.25 2.36 5.25 5.25 5.25 5.25-2.36 5.25-5.25Zm-8 0c0-1.52 1.23-2.75 2.75-2.75s2.75 1.23 2.75 2.75-1.23 2.75-2.75 2.75-2.75-1.23-2.75-2.75Z" /><path d="m63.32 29.64-7.25-7.25c1.63-2.02 2.61-4.58 2.61-7.37 0-6.48-5.27-11.75-11.75-11.75S35.18 8.54 35.18 15.02s5.27 11.75 11.75 11.75c2.79 0 5.35-.98 7.37-2.61l7.25 7.25 1.77-1.77Zm-16.38-5.37c-5.1 0-9.25-4.15-9.25-9.25s4.15-9.25 9.25-9.25 9.25 4.15 9.25 9.25-4.15 9.25-9.25 9.25Z" fill="var(--road-icon-variant, rgb(252, 183, 49))"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><path d="M52.7 46.85H7.3V30.07h29.54a1.25 1.25 0 0 0 0-2.5H7.79l4.52-13.47c.22-.66.84-1.1 1.53-1.1h17.45v-2.5H13.85c-1.77 0-3.34 1.13-3.9 2.81L5.16 27.58H2.71a1.25 1.25 0 0 0 0 2.5h2.1v21.39c0 2.24 1.82 4.05 4.05 4.05 2.23 0 4.05-1.82 4.05-4.05v-2.11h34.18v2.11c0 2.24 1.82 4.05 4.05 4.05 2.23 0 4.05-1.82 4.05-4.05v-19.7h-2.5v15.08h.01Zm-42.28 4.61c0 .86-.7 1.55-1.55 1.55-.85 0-1.55-.7-1.55-1.55v-2.11h3.11v2.11h-.01Zm42.28 0c0 .86-.7 1.55-1.55 1.55-.85 0-1.55-.7-1.55-1.55v-2.11h3.11v2.11h-.01Z"/><path d="M10.7 38.61c0 2.89 2.36 5.25 5.25 5.25s5.25-2.36 5.25-5.25-2.36-5.25-5.25-5.25-5.25 2.36-5.25 5.25Zm8 0c0 1.52-1.23 2.75-2.75 2.75s-2.75-1.23-2.75-2.75 1.23-2.75 2.75-2.75 2.75 1.23 2.75 2.75Zm30.6-.07c0-2.89-2.36-5.25-5.25-5.25s-5.25 2.36-5.25 5.25 2.36 5.25 5.25 5.25 5.25-2.36 5.25-5.25Zm-8 0c0-1.52 1.23-2.75 2.75-2.75s2.75 1.23 2.75 2.75-1.23 2.75-2.75 2.75-2.75-1.23-2.75-2.75Z"/><path d="m63.32 29.64-7.25-7.25c1.63-2.02 2.61-4.58 2.61-7.37 0-6.48-5.27-11.75-11.75-11.75S35.18 8.54 35.18 15.02s5.27 11.75 11.75 11.75c2.79 0 5.35-.98 7.37-2.61l7.25 7.25 1.77-1.77Zm-16.38-5.37c-5.1 0-9.25-4.15-9.25-9.25s4.15-9.25 9.25-9.25 9.25 4.15 9.25 9.25-4.15 9.25-9.25 9.25Z" fill="var(--road-icon-variant, rgb(252, 183, 49))"/></svg>

package/dist/collection/components/icon/svg/world-solid.svg

@@ -0,0 +1 @@
+<svg  xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><path d="M23.488 39.943h17.524c.355-2.437.548-5.033.548-7.693 0-2.66-.193-5.256-.548-7.694H23.49a53.653 53.653 0 0 0-.548 7.694c0 2.66.193 5.255.547 7.693Z" /><path fill-rule="evenodd" clip-rule="evenodd" d="M14.404 50.096A25.278 25.278 0 0 0 32.25 57.5 25.278 25.278 0 0 0 57.5 32.25 25.278 25.278 0 0 0 32.25 7 25.278 25.278 0 0 0 7 32.25a25.278 25.278 0 0 0 7.404 17.846Zm15.58-40.483c-2.68 1.83-4.871 6.508-6.064 12.443h16.66c-1.193-5.935-3.385-10.613-6.067-12.443a22.58 22.58 0 0 1 4.237.839c1.972 2.793 3.499 6.833 4.398 11.604h9.431c.41.81.77 1.646 1.079 2.5H43.553c.331 2.432.507 5.016.507 7.692 0 2.677-.176 5.262-.507 7.695h10.105c-.309.855-.669 1.69-1.079 2.5h-9.43c-.9 4.771-2.426 8.813-4.397 11.605a22.555 22.555 0 0 1-4.237.839c2.681-1.83 4.873-6.508 6.066-12.444H23.92c1.192 5.936 3.383 10.615 6.063 12.448a22.56 22.56 0 0 1-4.236-.839c-1.971-2.794-3.497-6.837-4.396-11.609H11.92a22.55 22.55 0 0 1-1.079-2.5h10.105a57.273 57.273 0 0 1-.506-7.691c0-2.677.176-5.262.507-7.696H10.842c.31-.854.67-1.689 1.079-2.5h9.431c.9-4.77 2.425-8.812 4.396-11.604 1.382-.414 2.8-.695 4.236-.839Z" /></svg>

package/dist/collection/components/input/input.js

@@ -37,8 +37,18 @@ export class Input {
       this.roadInput.emit(ev);
     };
     this.onBlur = () => {
-      this.roadblur.emit();
-      this.roadBlur.emit();
+      let value = this.getValue();
+      // Vérifier si les contraintes min et max sont définies
+      if (this.min !== undefined && value !== '' && parseFloat(value) < parseFloat(this.min)) {
+        value = this.min; // Ajuster la valeur à la valeur minimale
+      }
+      if (this.max !== undefined && value !== '' && parseFloat(value) > parseFloat(this.max)) {
+        value = this.max; // Ajuster la valeur à la valeur maximale
+      }
+      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.onFocus = () => {
       this.roadfocus.emit();
@@ -107,7 +117,7 @@ export class Input {
     const hasValueClass = this.value !== '' ? 'has-value' : '';
     const lessLabelClass = this.label !== '' ? '' : 'less-label';
     const isInvalidClass = this.error !== undefined && this.error !== '' ? 'is-invalid' : '';
-    return (h(Host, { "aria-disabled": this.disabled ? 'true' : null, class: this.sizes && `input-${this.sizes}` }, h("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' }), h("label", { class: "form-label", id: labelId, htmlFor: this.inputId }, this.label), this.error && this.error !== '' && h("p", { class: "invalid-feedback" }, this.error), this.helper && this.helper !== '' && h("p", { class: "helper" }, this.helper), this.type && this.type == 'password' &&
+    return (h(Host, { "aria-disabled": this.disabled ? 'true' : null, class: this.sizes && `input-${this.sizes}`, value: value }, h("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' }), h("label", { class: "form-label", id: labelId, htmlFor: this.inputId }, this.label), this.error && this.error !== '' && h("p", { class: "invalid-feedback" }, this.error), this.helper && this.helper !== '' && h("p", { class: "helper" }, this.helper), this.type && this.type == 'password' &&
       h("slot", { name: "checklistPassword" })));
   }
   static get is() { return "road-input"; }
@@ -700,8 +710,8 @@ export class Input {
           "text": "Emitted when the input loses focus."
         },
         "complexType": {
-          "original": "void",
-          "resolved": "void",
+          "original": "string | null",
+          "resolved": "null | string",
           "references": {}
         }
       }, {
@@ -718,8 +728,8 @@ export class Input {
           "text": ""
         },
         "complexType": {
-          "original": "void",
-          "resolved": "void",
+          "original": "string | null",
+          "resolved": "null | string",
           "references": {}
         }
       }, {

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

@@ -1 +1 @@
-{"version":3,"file":"input.js","sourceRoot":"","sources":["../../../src/components/input/input.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Event, EventEmitter, Host, Prop, Watch, h } from '@stencil/core';\n\nimport { AutocompleteTypes, TextFieldTypes } from '../../interface';\n\nconst debounceEvent = (event: EventEmitter, wait: number): EventEmitter => {\n  const original = (event as any)._original || event;\n  return {\n    _original: event,\n    emit: debounce(original.emit.bind(original), wait),\n  } as EventEmitter;\n};\n\nconst debounce = (func: (...args: any[]) => void, wait = 0) => {\n  let timer: any;\n  return (...args: any[]): any => {\n    clearTimeout(timer);\n    timer = setTimeout(func, wait, ...args);\n  };\n};\n\n/**\n * @slot checklistPassword - Content the checklist Password exemple.\n * `<div class=\"checklist-password mt-16\" slot=\"checklistPassword\">`\n     ` <span class=\"checklist-password-label\"><strong>Low Safety</strong></span>`\n      `<road-progress color=\"danger\" value=\"25\" class=\"mt-8 mb-16\"></road-progress>`\n      `<p class=\"text-medium mb-8\">For optimal safety your password must have at least :</p>`\n      `<ul class=\"m-0 pl-16\">`\n        `<li id=\"letter\" class=\"invalid mb-8\">1 lowercase and 1 uppercase</li>`\n        `<li id=\"number\" class=\"invalid mb-8\">1 digit</li>`\n        `<li id=\"length\" class=\"invalid\">8 characters minimum</li>`\n      `</ul>`\n    `</div>`\n */\n\n@Component({\n  tag: 'road-input',\n  styleUrl: 'input.css',\n  scoped: true,\n})\nexport class Input {\n\n  /**\n   * The id of input\n   */\n  @Prop() inputId: string = `road-input-${inputIds++}`;\n\n  /**\n   * Indicates whether and how the text value should be automatically capitalized as it is entered/edited by the user.\n   */\n  @Prop() autocapitalize = 'off';\n\n  /**\n   * Indicates whether the value of the control can be automatically completed by the browser.\n   */\n  @Prop() autocomplete: AutocompleteTypes = 'off';\n\n  /**\n   * Whether auto correction should be enabled when the user is entering/editing the text value.\n   */\n  @Prop() autocorrect: 'on' | 'off' = 'off';\n\n  /**\n   * This Boolean attribute lets you specify that a form control should have input focus when the page loads.\n   */\n  @Prop() autofocus = false;\n\n  /**\n   * If `true`, the user cannot interact with the input.\n   */\n  @Prop() disabled = false;\n\n  /**\n   * A hint to the browser for which enter key to display.\n   * Possible values: `\"enter\"`, `\"done\"`, `\"go\"`, `\"next\"`,\n   * `\"previous\"`, `\"search\"`, and `\"send\"`.\n   */\n  @Prop() enterkeyhint?: 'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send';\n\n  /**\n   * A hint to the browser for which keyboard to display.\n   * This attribute applies when the value of the type attribute is `\"text\"`, `\"password\"`, `\"email\"`, or `\"url\"`. Possible values are: `\"verbatim\"`, `\"latin\"`, `\"latin-name\"`, `\"latin-prose\"`, `\"full-width-latin\"`, `\"kana\"`, `\"katakana\"`, `\"numeric\"`, `\"tel\"`, `\"email\"`, `\"url\"`.\n   */\n  @Prop() inputmode?: 'none' | 'text' | 'tel' | 'url' | 'email' | 'numeric' | 'decimal' | 'search';\n\n  /**\n   * The maximum value, which must not be less than its minimum (min attribute) value.\n   */\n  @Prop() max?: string;\n\n  /**\n   * If the value of the type attribute is `text`, `email`, `search`, `password`, `tel`, or `url`, this attribute specifies the maximum number of characters that the user can enter.\n   */\n  @Prop() maxlength?: number;\n\n  /**\n   * The minimum value, which must not be greater than its maximum (max attribute) value.\n   */\n  @Prop() min?: string;\n\n  /**\n   * If the value of the type attribute is `text`, `email`, `search`, `password`, `tel`, or `url`, this attribute specifies the minimum number of characters that the user can enter.\n   */\n  @Prop() minlength?: number;\n\n  /**\n   * The name of the control, which is submitted with the form data.\n   */\n  @Prop() name: string = this.inputId;\n\n  /**\n   * 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.\n   */\n  @Prop() pattern?: string;\n\n  /**\n   * Instructional text that shows before the input has a value.\n   */\n  @Prop() placeholder?: string;\n\n  /**\n   * If `true`, the user cannot modify the value.\n   */\n  @Prop() readonly = false;\n\n  /**\n   * If `true`, the user must fill in a value before submitting a form.\n   */\n  @Prop() required = false;\n\n  /**\n   * If `true`, the element will have its spelling and grammar checked.\n   */\n  @Prop() spellcheck = false;\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 initial size of the control. This value is in pixels unless the value of the type attribute is `\"text\"` or `\"password\"`, in which case it is an integer number of characters. This attribute applies only when the `type` attribute is set to `\"text\"`, `\"search\"`, `\"tel\"`, `\"url\"`, `\"email\"`, or `\"password\"`, otherwise it is ignored.\n   */\n  @Prop() size?: number;\n\n  /**\n   * The sizes of the input.\n   */\n   @Prop() sizes: 'lg' | 'xl' = 'lg';\n\n  /**\n   * The type of control to display. The default type is text.\n   */\n  @Prop() type: TextFieldTypes = 'text';\n\n  /**\n   * The value of the input.\n   */\n  @Prop({ mutable: true }) value?: string | number | null = '';\n\n  /**\n   * Label for the field\n   */\n  @Prop() label?: string = '';\n\n  /**\n   * Error message for the field\n   */\n  @Prop() error?: string;\n\n  /**\n   * Helper message for the field\n   */\n   @Prop() helper?: string;\n\n  /**\n   * Set the amount of time, in milliseconds, to wait to trigger the `roadChange` event after each keystroke.\n   */\n  @Prop() debounce = 0;\n\n  @Watch('debounce')\n  protected debounceChanged() {\n    this.roadchange = debounceEvent(this.roadchange, this.debounce);\n    this.roadChange = debounceEvent(this.roadChange, this.debounce);\n  }\n\n  /**\n   * Update the native input element when the value changes\n   */\n  @Watch('value')\n  protected valueChanged() {\n    this.roadchange.emit({ value: this.value == null ? this.value : this.value.toString() });\n    this.roadChange.emit({ value: this.value == null ? this.value : this.value.toString() });\n  }\n\n  /**\n   * Emitted when a keyboard input occurred.\n   */\n  @Event() roadinput!: EventEmitter<KeyboardEvent>;\n  /** @internal */\n  @Event() roadInput!: EventEmitter<KeyboardEvent>;\n\n  /**\n   * Emitted when the value has changed.\n   */\n  @Event() roadchange!: EventEmitter<{\n    value: string | undefined | null;\n  }>;\n  /** @internal */\n  @Event() roadChange!: EventEmitter<{\n    value: string | undefined | null;\n  }>;\n\n  /**\n   * Emitted when the input loses focus.\n   */\n  @Event() roadblur!: EventEmitter<void>;\n  /** @internal */\n  @Event() roadBlur!: EventEmitter<void>;\n\n  /**\n   * Emitted when the input has focus.\n   */\n  @Event() roadfocus!: EventEmitter<void>;\n  /** @internal */\n  @Event() roadFocus!: EventEmitter<void>;\n\n  private getValue(): string {\n    return typeof this.value === 'number'\n      ? this.value.toString()\n      : (this.value || '').toString();\n  }\n\n  private onInput = (ev: Event) => {\n    const input = ev.target as HTMLInputElement | null;\n    if (input) {\n      this.value = input.value || \"\";\n    }\n    this.roadinput.emit(ev as KeyboardEvent);\n    this.roadInput.emit(ev as KeyboardEvent);\n  };\n\n  private onBlur = () => {\n    this.roadblur.emit();\n    this.roadBlur.emit();\n  };\n\n  private onFocus = () => {\n    this.roadfocus.emit();\n    this.roadFocus.emit();\n  };\n\n  private enforceMinMax(el: HTMLInputElement): void {\n    if (el.value !== \"\") {\n        const value: number = parseInt(el.value);\n        const minValue: number = parseInt(el.min);\n        const maxValue: number = parseInt(el.max);\n\n        if (value < minValue) {\n            el.value = el.min;\n        }\n\n        if (value > maxValue) {\n            el.value = el.max;\n        }\n    }\n}\n\n  render() {\n    const value = this.getValue();\n    const labelId = this.inputId + '-label';\n    const hasValueClass = this.value !== '' ? 'has-value' : '';\n    const lessLabelClass = this.label !== '' ? '' : 'less-label';\n    const isInvalidClass = this.error !== undefined && this.error !== '' ? 'is-invalid' : '';\n\n    return (\n      <Host aria-disabled={this.disabled ? 'true' : null} class={this.sizes && `input-${this.sizes}`}>\n        <input\n          class={`form-control ${hasValueClass} ${isInvalidClass} ${lessLabelClass}`}\n          id={this.inputId}\n          aria-disabled={this.disabled ? 'true' : null}\n          aria-labelledby={labelId}\n          disabled={this.disabled}\n          autoCapitalize={this.autocapitalize}\n          autoComplete={this.autocomplete}\n          autoCorrect={this.autocorrect}\n          enterKeyHint={this.enterkeyhint}\n          autoFocus={this.autofocus}\n          inputMode={this.inputmode}\n          min={this.min}\n          max={this.max}\n          minLength={this.minlength}\n          maxLength={this.maxlength}\n          name={this.name}\n          pattern={this.pattern}\n          placeholder={this.placeholder}\n          readOnly={this.readonly}\n          required={this.required}\n          spellcheck={this.spellcheck}\n          step={this.step}\n          size={this.size}\n          type={this.type}\n          value={value}\n          onInput={this.onInput}\n          onBlur={this.onBlur}\n          onFocus={this.onFocus}\n          onKeyUp={(event: Event) => this.enforceMinMax(event.target as HTMLInputElement)}\n          data-cy='road-input'\n\n        />\n        <label class=\"form-label\" id={labelId} htmlFor={this.inputId}>{this.label}</label>\n        {this.error && this.error !== '' && <p class=\"invalid-feedback\">{this.error}</p>}\n        {this.helper && this.helper !== '' && <p class=\"helper\">{this.helper}</p>}\n        {this.type && this.type == 'password' &&\n        <slot name=\"checklistPassword\"/>}\n      </Host>\n    );\n  }\n}\n\nlet inputIds = 0;\n"]}
+{"version":3,"file":"input.js","sourceRoot":"","sources":["../../../src/components/input/input.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,EAAgB,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAIrF,MAAM,aAAa,GAAG,CAAC,KAAmB,EAAE,IAAY,EAAgB,EAAE;EACxE,MAAM,QAAQ,GAAI,KAAa,CAAC,SAAS,IAAI,KAAK,CAAC;EACnD,OAAO;IACL,SAAS,EAAE,KAAK;IAChB,IAAI,EAAE,QAAQ,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,EAAE,IAAI,CAAC;GACnC,CAAC;AACpB,CAAC,CAAC;AAEF,MAAM,QAAQ,GAAG,CAAC,IAA8B,EAAE,IAAI,GAAG,CAAC,EAAE,EAAE;EAC5D,IAAI,KAAU,CAAC;EACf,OAAO,CAAC,GAAG,IAAW,EAAO,EAAE;IAC7B,YAAY,CAAC,KAAK,CAAC,CAAC;IACpB,KAAK,GAAG,UAAU,CAAC,IAAI,EAAE,IAAI,EAAE,GAAG,IAAI,CAAC,CAAC;EAC1C,CAAC,CAAC;AACJ,CAAC,CAAC;AAEF;;;;;;;;;;;;GAYG;AAOH,MAAM,OAAO,KAAK;;IAkMR,YAAO,GAAG,CAAC,EAAS,EAAE,EAAE;MAC9B,MAAM,KAAK,GAAG,EAAE,CAAC,MAAiC,CAAC;MACnD,IAAI,KAAK,EAAE;QACT,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,KAAK,IAAI,EAAE,CAAC;OAChC;MACD,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,EAAmB,CAAC,CAAC;MACzC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,EAAmB,CAAC,CAAC;IAC3C,CAAC,CAAC;IAEM,WAAM,GAAG,GAAG,EAAE;MACpB,IAAI,KAAK,GAAG,IAAI,CAAC,QAAQ,EAAE,CAAC;MAE5B,uDAAuD;MACvD,IAAI,IAAI,CAAC,GAAG,KAAK,SAAS,IAAI,KAAK,KAAK,EAAE,IAAI,UAAU,CAAC,KAAK,CAAC,GAAG,UAAU,CAAC,IAAI,CAAC,GAAG,CAAC,EAAE;QACtF,KAAK,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,yCAAyC;OAC5D;MAED,IAAI,IAAI,CAAC,GAAG,KAAK,SAAS,IAAI,KAAK,KAAK,EAAE,IAAI,UAAU,CAAC,KAAK,CAAC,GAAG,UAAU,CAAC,IAAI,CAAC,GAAG,CAAC,EAAE;QACtF,KAAK,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,yCAAyC;OAC5D;MAED,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,CAAC,iDAAiD;MAErE,sDAAsD;MACtD,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;MAC/B,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IACjC,CAAC,CAAC;IAEM,YAAO,GAAG,GAAG,EAAE;MACrB,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE,CAAC;MACtB,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE,CAAC;IACxB,CAAC,CAAC;mBA5NwB,cAAc,QAAQ,EAAE,EAAE;0BAK3B,KAAK;wBAKY,KAAK;uBAKX,KAAK;qBAKrB,KAAK;oBAKN,KAAK;;;;;;;gBAsCD,IAAI,CAAC,OAAO;;;oBAehB,KAAK;oBAKL,KAAK;sBAKH,KAAK;;;iBAgBI,IAAI;gBAKH,MAAM;iBAKqB,EAAE;iBAKnC,EAAE;;;oBAeR,CAAC;;EAGV,eAAe;IACvB,IAAI,CAAC,UAAU,GAAG,aAAa,CAAC,IAAI,CAAC,UAAU,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC;IAChE,IAAI,CAAC,UAAU,GAAG,aAAa,CAAC,IAAI,CAAC,UAAU,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC;EAClE,CAAC;EAED;;KAEG;EAEO,YAAY;IACpB,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE,EAAE,CAAC,CAAC;IACzF,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE,EAAE,CAAC,CAAC;EAC3F,CAAC;EAkCO,QAAQ;IACd,OAAO,OAAO,IAAI,CAAC,KAAK,KAAK,QAAQ;MACnC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE;MACvB,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,IAAI,EAAE,CAAC,CAAC,QAAQ,EAAE,CAAC;EACpC,CAAC;EAmCO,aAAa,CAAC,EAAoB;IACxC,IAAI,EAAE,CAAC,KAAK,KAAK,EAAE,EAAE;MACjB,MAAM,KAAK,GAAW,QAAQ,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC;MACzC,MAAM,QAAQ,GAAW,QAAQ,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC;MAC1C,MAAM,QAAQ,GAAW,QAAQ,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC;MAE1C,IAAI,KAAK,GAAG,QAAQ,EAAE;QAClB,EAAE,CAAC,KAAK,GAAG,EAAE,CAAC,GAAG,CAAC;OACrB;MAED,IAAI,KAAK,GAAG,QAAQ,EAAE;QAClB,EAAE,CAAC,KAAK,GAAG,EAAE,CAAC,GAAG,CAAC;OACrB;KACJ;EACL,CAAC;EAEC,MAAM;IACJ,MAAM,KAAK,GAAG,IAAI,CAAC,QAAQ,EAAE,CAAC;IAC9B,MAAM,OAAO,GAAG,IAAI,CAAC,OAAO,GAAG,QAAQ,CAAC;IACxC,MAAM,aAAa,GAAG,IAAI,CAAC,KAAK,KAAK,EAAE,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE,CAAC;IAC3D,MAAM,cAAc,GAAG,IAAI,CAAC,KAAK,KAAK,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,YAAY,CAAC;IAC7D,MAAM,cAAc,GAAG,IAAI,CAAC,KAAK,KAAK,SAAS,IAAI,IAAI,CAAC,KAAK,KAAK,EAAE,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,EAAE,CAAC;IAEzF,OAAO,CACL,EAAC,IAAI,qBAAgB,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,IAAI,SAAS,IAAI,CAAC,KAAK,EAAE,EAAE,KAAK,EAAE,KAAK;MAC1G,aACE,KAAK,EAAE,gBAAgB,aAAa,IAAI,cAAc,IAAI,cAAc,EAAE,EAC1E,EAAE,EAAE,IAAI,CAAC,OAAO,mBACD,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,qBAC3B,OAAO,EACxB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,cAAc,EAAE,IAAI,CAAC,cAAc,EACnC,YAAY,EAAE,IAAI,CAAC,YAAY,EAC/B,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,YAAY,EAAE,IAAI,CAAC,YAAY,EAC/B,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,KAAK,EACZ,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,OAAO,EAAE,CAAC,KAAY,EAAE,EAAE,CAAC,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,MAA0B,CAAC,aACvE,YAAY,GAEpB;MACF,aAAO,KAAK,EAAC,YAAY,EAAC,EAAE,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,IAAG,IAAI,CAAC,KAAK,CAAS;MACjF,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,KAAK,KAAK,EAAE,IAAI,SAAG,KAAK,EAAC,kBAAkB,IAAE,IAAI,CAAC,KAAK,CAAK;MAC/E,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,MAAM,KAAK,EAAE,IAAI,SAAG,KAAK,EAAC,QAAQ,IAAE,IAAI,CAAC,MAAM,CAAK;MACxE,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,IAAI,IAAI,UAAU;QACrC,YAAM,IAAI,EAAC,mBAAmB,GAAE,CAC3B,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF;AAED,IAAI,QAAQ,GAAG,CAAC,CAAC","sourcesContent":["import { Component, Event, EventEmitter, Host, Prop, Watch, h } from '@stencil/core';\n\nimport { AutocompleteTypes, TextFieldTypes } from '../../interface';\n\nconst debounceEvent = (event: EventEmitter, wait: number): EventEmitter => {\n  const original = (event as any)._original || event;\n  return {\n    _original: event,\n    emit: debounce(original.emit.bind(original), wait),\n  } as EventEmitter;\n};\n\nconst debounce = (func: (...args: any[]) => void, wait = 0) => {\n  let timer: any;\n  return (...args: any[]): any => {\n    clearTimeout(timer);\n    timer = setTimeout(func, wait, ...args);\n  };\n};\n\n/**\n * @slot checklistPassword - Content the checklist Password exemple.\n * `<div class=\"checklist-password mt-16\" slot=\"checklistPassword\">`\n     ` <span class=\"checklist-password-label\"><strong>Low Safety</strong></span>`\n      `<road-progress color=\"danger\" value=\"25\" class=\"mt-8 mb-16\"></road-progress>`\n      `<p class=\"text-medium mb-8\">For optimal safety your password must have at least :</p>`\n      `<ul class=\"m-0 pl-16\">`\n        `<li id=\"letter\" class=\"invalid mb-8\">1 lowercase and 1 uppercase</li>`\n        `<li id=\"number\" class=\"invalid mb-8\">1 digit</li>`\n        `<li id=\"length\" class=\"invalid\">8 characters minimum</li>`\n      `</ul>`\n    `</div>`\n */\n\n@Component({\n  tag: 'road-input',\n  styleUrl: 'input.css',\n  scoped: true,\n})\nexport class Input {\n\n  /**\n   * The id of input\n   */\n  @Prop() inputId: string = `road-input-${inputIds++}`;\n\n  /**\n   * Indicates whether and how the text value should be automatically capitalized as it is entered/edited by the user.\n   */\n  @Prop() autocapitalize = 'off';\n\n  /**\n   * Indicates whether the value of the control can be automatically completed by the browser.\n   */\n  @Prop() autocomplete: AutocompleteTypes = 'off';\n\n  /**\n   * Whether auto correction should be enabled when the user is entering/editing the text value.\n   */\n  @Prop() autocorrect: 'on' | 'off' = 'off';\n\n  /**\n   * This Boolean attribute lets you specify that a form control should have input focus when the page loads.\n   */\n  @Prop() autofocus = false;\n\n  /**\n   * If `true`, the user cannot interact with the input.\n   */\n  @Prop() disabled = false;\n\n  /**\n   * A hint to the browser for which enter key to display.\n   * Possible values: `\"enter\"`, `\"done\"`, `\"go\"`, `\"next\"`,\n   * `\"previous\"`, `\"search\"`, and `\"send\"`.\n   */\n  @Prop() enterkeyhint?: 'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send';\n\n  /**\n   * A hint to the browser for which keyboard to display.\n   * This attribute applies when the value of the type attribute is `\"text\"`, `\"password\"`, `\"email\"`, or `\"url\"`. Possible values are: `\"verbatim\"`, `\"latin\"`, `\"latin-name\"`, `\"latin-prose\"`, `\"full-width-latin\"`, `\"kana\"`, `\"katakana\"`, `\"numeric\"`, `\"tel\"`, `\"email\"`, `\"url\"`.\n   */\n  @Prop() inputmode?: 'none' | 'text' | 'tel' | 'url' | 'email' | 'numeric' | 'decimal' | 'search';\n\n  /**\n   * The maximum value, which must not be less than its minimum (min attribute) value.\n   */\n  @Prop() max?: string;\n\n  /**\n   * If the value of the type attribute is `text`, `email`, `search`, `password`, `tel`, or `url`, this attribute specifies the maximum number of characters that the user can enter.\n   */\n  @Prop() maxlength?: number;\n\n  /**\n   * The minimum value, which must not be greater than its maximum (max attribute) value.\n   */\n  @Prop() min?: string;\n\n  /**\n   * If the value of the type attribute is `text`, `email`, `search`, `password`, `tel`, or `url`, this attribute specifies the minimum number of characters that the user can enter.\n   */\n  @Prop() minlength?: number;\n\n  /**\n   * The name of the control, which is submitted with the form data.\n   */\n  @Prop() name: string = this.inputId;\n\n  /**\n   * 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.\n   */\n  @Prop() pattern?: string;\n\n  /**\n   * Instructional text that shows before the input has a value.\n   */\n  @Prop() placeholder?: string;\n\n  /**\n   * If `true`, the user cannot modify the value.\n   */\n  @Prop() readonly = false;\n\n  /**\n   * If `true`, the user must fill in a value before submitting a form.\n   */\n  @Prop() required = false;\n\n  /**\n   * If `true`, the element will have its spelling and grammar checked.\n   */\n  @Prop() spellcheck = false;\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 initial size of the control. This value is in pixels unless the value of the type attribute is `\"text\"` or `\"password\"`, in which case it is an integer number of characters. This attribute applies only when the `type` attribute is set to `\"text\"`, `\"search\"`, `\"tel\"`, `\"url\"`, `\"email\"`, or `\"password\"`, otherwise it is ignored.\n   */\n  @Prop() size?: number;\n\n  /**\n   * The sizes of the input.\n   */\n   @Prop() sizes: 'lg' | 'xl' = 'lg';\n\n  /**\n   * The type of control to display. The default type is text.\n   */\n  @Prop() type: TextFieldTypes = 'text';\n\n  /**\n   * The value of the input.\n   */\n  @Prop({ mutable: true }) value?: string | number | null = '';\n\n  /**\n   * Label for the field\n   */\n  @Prop() label?: string = '';\n\n  /**\n   * Error message for the field\n   */\n  @Prop() error?: string;\n\n  /**\n   * Helper message for the field\n   */\n   @Prop() helper?: string;\n\n  /**\n   * Set the amount of time, in milliseconds, to wait to trigger the `roadChange` event after each keystroke.\n   */\n  @Prop() debounce = 0;\n\n  @Watch('debounce')\n  protected debounceChanged() {\n    this.roadchange = debounceEvent(this.roadchange, this.debounce);\n    this.roadChange = debounceEvent(this.roadChange, this.debounce);\n  }\n\n  /**\n   * Update the native input element when the value changes\n   */\n  @Watch('value')\n  protected valueChanged() {\n    this.roadchange.emit({ value: this.value == null ? this.value : this.value.toString() });\n    this.roadChange.emit({ value: this.value == null ? this.value : this.value.toString() });\n  }\n\n  /**\n   * Emitted when a keyboard input occurred.\n   */\n  @Event() roadinput!: EventEmitter<KeyboardEvent>;\n  /** @internal */\n  @Event() roadInput!: EventEmitter<KeyboardEvent>;\n\n  /**\n   * Emitted when the value has changed.\n   */\n  @Event() roadchange!: EventEmitter<{\n    value: string | undefined | null;\n  }>;\n  /** @internal */\n  @Event() roadChange!: EventEmitter<{\n    value: string | undefined | null;\n  }>;\n\n  /**\n   * Emitted when the input loses focus.\n   */\n  @Event() roadblur!: EventEmitter<string | null>; // Déclare roadblur pour transporter une valeur de type string ou null\n  /** @internal */\n  @Event() roadBlur!: EventEmitter<string | null>; // Déclare roadblur pour transporter une valeur de type string ou null\n\n  /**\n   * Emitted when the input has focus.\n   */\n  @Event() roadfocus!: EventEmitter<void>;\n  /** @internal */\n  @Event() roadFocus!: EventEmitter<void>;\n\n  private getValue(): string {\n    return typeof this.value === 'number'\n      ? this.value.toString()\n      : (this.value || '').toString();\n  }\n\n  private onInput = (ev: Event) => {\n    const input = ev.target as HTMLInputElement | null;\n    if (input) {\n      this.value = input.value || \"\";\n    }\n    this.roadinput.emit(ev as KeyboardEvent);\n    this.roadInput.emit(ev as KeyboardEvent);\n  };\n\n  private onBlur = () => {\n    let value = this.getValue();\n  \n    // Vérifier si les contraintes min et max sont définies\n    if (this.min !== undefined && value !== '' && parseFloat(value) < parseFloat(this.min)) {\n      value = this.min; // Ajuster la valeur à la valeur minimale\n    }\n  \n    if (this.max !== undefined && value !== '' && parseFloat(value) > parseFloat(this.max)) {\n      value = this.max; // Ajuster la valeur à la valeur maximale\n    }\n  \n    this.value = value; // Mettre à jour la valeur avec la valeur ajustée\n  \n    // Émettre l'événement roadblur avec la valeur ajustée\n    this.roadblur.emit(this.value);\n    this.roadBlur.emit(this.value);\n  };\n\n  private onFocus = () => {\n    this.roadfocus.emit();\n    this.roadFocus.emit();\n  };\n\n  private enforceMinMax(el: HTMLInputElement): void {\n    if (el.value !== \"\") {\n        const value: number = parseInt(el.value);\n        const minValue: number = parseInt(el.min);\n        const maxValue: number = parseInt(el.max);\n\n        if (value < minValue) {\n            el.value = el.min;\n        }\n\n        if (value > maxValue) {\n            el.value = el.max;\n        }\n    }\n}\n\n  render() {\n    const value = this.getValue();\n    const labelId = this.inputId + '-label';\n    const hasValueClass = this.value !== '' ? 'has-value' : '';\n    const lessLabelClass = this.label !== '' ? '' : 'less-label';\n    const isInvalidClass = this.error !== undefined && this.error !== '' ? 'is-invalid' : '';\n\n    return (\n      <Host aria-disabled={this.disabled ? 'true' : null} class={this.sizes && `input-${this.sizes}`} value={value}>\n        <input\n          class={`form-control ${hasValueClass} ${isInvalidClass} ${lessLabelClass}`}\n          id={this.inputId}\n          aria-disabled={this.disabled ? 'true' : null}\n          aria-labelledby={labelId}\n          disabled={this.disabled}\n          autoCapitalize={this.autocapitalize}\n          autoComplete={this.autocomplete}\n          autoCorrect={this.autocorrect}\n          enterKeyHint={this.enterkeyhint}\n          autoFocus={this.autofocus}\n          inputMode={this.inputmode}\n          min={this.min}\n          max={this.max}\n          minLength={this.minlength}\n          maxLength={this.maxlength}\n          name={this.name}\n          pattern={this.pattern}\n          placeholder={this.placeholder}\n          readOnly={this.readonly}\n          required={this.required}\n          spellcheck={this.spellcheck}\n          step={this.step}\n          size={this.size}\n          type={this.type}\n          value={value}\n          onInput={this.onInput}\n          onBlur={this.onBlur}\n          onFocus={this.onFocus}\n          onKeyUp={(event: Event) => this.enforceMinMax(event.target as HTMLInputElement)}\n          data-cy='road-input'\n\n        />\n        <label class=\"form-label\" id={labelId} htmlFor={this.inputId}>{this.label}</label>\n        {this.error && this.error !== '' && <p class=\"invalid-feedback\">{this.error}</p>}\n        {this.helper && this.helper !== '' && <p class=\"helper\">{this.helper}</p>}\n        {this.type && this.type == 'password' &&\n        <slot name=\"checklistPassword\"/>}\n      </Host>\n    );\n  }\n}\n\nlet inputIds = 0;\n"]}