@roadtrip/components 3.13.3 → 3.14.0

package/dist/esm/road-content-card.entry.js

@@ -0,0 +1,19 @@
+import { r as registerInstance, h, H as Host } from './index-52302079.js';
+
+const contentCardCss = ":host{box-sizing:border-box;display:flex;flex-direction:column;flex-shrink:0;align-items:flex-start;justify-content:center;width:100%;margin:0 0 1rem;cursor:pointer;-webkit-user-select:none;user-select:none;background:var(--road-surface);border:1px solid var(--road-outline-weak);border-radius:var(--road-spacing-02)}.content-card-image{width:-webkit-fill-available;padding:var(--road-spacing-05) var(--road-spacing-05) 0}.content-card-description{width:-webkit-fill-available;padding:var(--road-spacing-03) var(--road-spacing-05) var(--road-spacing-05)}.content-card-description-title{padding:var(--road-spacing-03) 0;margin:0;font-size:var(--road-font-size-16);font-weight:700;color:var(--road-on-surface)}.content-card-description-text{padding-bottom:var(--road-spacing-03);margin:0;font-size:var(--road-font-size-16)}.content-card-description-buttons{display:flex;flex-direction:column}@media (min-width: 768px){.content-card-image{padding:var(--road-spacing-06) var(--road-spacing-06) 0}.content-card-description{padding:var(--road-spacing-04) var(--road-spacing-06) var(--road-spacing-06)}.content-card-description-buttons{flex-direction:row}.content-card-description-buttons ::slotted(road-button){margin-right:var(--road-spacing-04)}.content-card-description-buttons ::slotted(road-button):last-child{margin-right:0}}";
+
+const ContentCard = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.insetImage = false;
+  }
+  render() {
+    const insetImageClass = this.insetImage ? '' : 'content-card-image';
+    return (h(Host, null, h("road-img", { src: "https://s1.medias-norauto.fr/visuals/desktop/fr/banners/blog_loimontagne.png", alt: "loi montagne", class: insetImageClass }), h("div", { class: "content-card-description" }, h("road-label", { class: "content-card-description-title" }, h("slot", { name: "label" })), h("p", { class: "content-card-description-text" }, h("slot", { name: "description" })), h("div", { class: "content-card-description-buttons" }, h("slot", null)))));
+  }
+};
+ContentCard.style = contentCardCss;
+
+export { ContentCard as road_content_card };
+
+//# sourceMappingURL=road-content-card.entry.js.map

package/dist/esm/road-content-card.entry.js.map

@@ -0,0 +1 @@
+{"file":"road-content-card.entry.js","mappings":";;AAAA,MAAM,cAAc,GAAG,+yCAA+yC;;MCczzC,WAAW;;;sBAKY,KAAK;;EAGvC,MAAM;IAEJ,MAAM,eAAe,GAAG,IAAI,CAAC,UAAU,GAAG,EAAE,GAAG,oBAAoB,CAAC;IAEpE,QACE,EAAC,IAAI,QACH,gBAAU,GAAG,EAAC,8EAA8E,EAAC,GAAG,EAAC,cAAc,EAAC,KAAK,EAAE,eAAe,GAAa,EACnJ,WAAK,KAAK,EAAC,0BAA0B,IACnC,kBAAY,KAAK,EAAC,gCAAgC,IAChD,YAAM,IAAI,EAAC,OAAO,GAAE,CACT,EACb,SAAG,KAAK,EAAC,+BAA+B,IACtC,YAAM,IAAI,EAAC,aAAa,GAAE,CACxB,EACJ,WAAK,KAAK,EAAC,kCAAkC,IAC3C,eAAQ,CACJ,CACF,CACD,EACP;GACH;;;;;;","names":[],"sources":["src/components/content-card/content-card.css?tag=road-content-card&encapsulation=shadow","src/components/content-card/content-card.tsx"],"sourcesContent":["/*\n * ContentCard\n *\n * Index\n * - Card\n */\n\n/* ContentCARD\n -------------------- */\n\n:host {\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  flex-shrink: 0;\n  align-items: flex-start;\n  justify-content: center;\n  width: 100%;\n  margin: 0 0 1rem;\n  cursor: pointer;\n  user-select: none;\n  background: var(--road-surface);\n  border: 1px solid var(--road-outline-weak);\n  border-radius: var(--road-spacing-02);\n}\n\n\n.content-card-image{\n  width: -webkit-fill-available;\n  padding: var(--road-spacing-05) var(--road-spacing-05) 0;\n}\n\n\n.content-card-description {\n  width: -webkit-fill-available;\n  padding: var(--road-spacing-03) var(--road-spacing-05) var(--road-spacing-05);\n}\n\n.content-card-description-title {\n  padding: var(--road-spacing-03) 0;\n  margin: 0;\n  font-size: var(--road-font-size-16);\n  font-weight: 700;\n  color: var(--road-on-surface);\n}\n\n.content-card-description-text {\n  padding-bottom: var(--road-spacing-03);\n  margin: 0;\n  font-size: var(--road-font-size-16);\n}\n\n.content-card-description-buttons {\n  display: flex;\n  flex-direction: column;\n}\n\n\n@media (min-width: 768px) {\n\n  .content-card-image{\n    padding: var(--road-spacing-06) var(--road-spacing-06) 0;\n  }\n\n  .content-card-description {\n    padding: var(--road-spacing-04) var(--road-spacing-06) var(--road-spacing-06);\n  }\n\n  .content-card-description-buttons{\n    flex-direction: row;\n  }\n\n  .content-card-description-buttons ::slotted(road-button){\n    margin-right: var(--road-spacing-04);\n  }\n\n  .content-card-description-buttons ::slotted(road-button):last-child{\n    margin-right: 0;\n  }\n}\n\n","import { Component, h, Host, Prop } from '@stencil/core';\n\n/**\n* @slot label - Content of the title.\n* @slot description - Content of the description.\n* @slot - Content buttons sections - Minimum 1 button 2 max\n\n*/\n\n@Component({\n  tag: 'road-content-card',\n  styleUrl: 'content-card.css',\n  shadow: true,\n})\nexport class ContentCard {\n\n     /**\n   * Set to `true` to add padding around img.\n   */\n     @Prop() insetImage : boolean = false;\n\n\n  render() {\n\n    const insetImageClass = this.insetImage ? '' : 'content-card-image';\n\n    return (\n      <Host>\n        <road-img src=\"https://s1.medias-norauto.fr/visuals/desktop/fr/banners/blog_loimontagne.png\" alt=\"loi montagne\" class={insetImageClass}></road-img>\n        <div class=\"content-card-description\">\n          <road-label class=\"content-card-description-title\">\n            <slot name=\"label\"/>\n          </road-label>\n          <p class=\"content-card-description-text\">\n            <slot name=\"description\"/>\n          </p>\n          <div class=\"content-card-description-buttons\">\n            <slot />\n          </div>\n        </div>\n      </Host>\n    );\n  }\n\n}\n"],"version":3}

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

@@ -1,6 +1,6 @@
 import { r as registerInstance, h } from './index-52302079.js';
 
-const dropdownCss = ":host{--margin-top:0.5rem;display:block}.dropdown{position:relative;font-family:var(--road-font)}.dropdown summary{display:block;outline:none}.dropdown summary::-webkit-details-marker{display:none}.dropdown-button{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;width:3.5rem;height:3.5rem;cursor:pointer;border-radius:0.25rem}.dropdown-medium-button{width:2.5rem;height:2.5rem}.dropdown-button:hover{background:var(--road-grey-200)}.position-right{display:flex;justify-content:flex-end}.bg-white{background:var(--road-grey-000)}.dropdown-button-icon{width:2.5rem;height:2.5rem}.dropdown-medium-button .dropdown-button-icon{width:1.75rem;height:1.75rem}.dropdown[open] .dropdown-menu{transform:scaleY(1)}.dropdown[open] .dropdown-menu.direction-top{position:absolute;bottom:0;left:0;transform:translate3d(0, -56px, 0);will-change:transform}.dropdown-menu{position:relative;display:flex;flex-direction:column;width:100%;min-width:16.875rem;padding:0.5rem 0;color:var(--road-on-surface);background:var(--road-surface);border:1px solid;border-color:var(--road-outline-weak);border-radius:0.25rem;box-shadow:var(--road-elevation-low);transition:transform 0.2s ease-in-out;transform:scaleY(0);transform-origin:0 0}.dropdown-item{min-height:40px;padding:0 1rem;font-size:var(--road-body-medium);line-height:1.5;color:var(--road-on-surface);text-align:left;text-decoration:none;cursor:pointer;background:var(--road-surface);border:none;outline:none}.dropdown-item-border{border-color:var(--road-outline-weak);border-bottom:1px solid}.dropdown-item:hover,.dropdown-item.focus-visible{background:var(--road-surface-inverse)}";
+const dropdownCss = ":host{--margin-top:0.5rem;display:block}.dropdown{position:relative;font-family:var(--road-font)}.dropdown summary{display:block;outline:none}.dropdown summary::-webkit-details-marker{display:none}.dropdown-button{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;width:3.5rem;height:3.5rem;cursor:pointer;border-radius:0.25rem}.dropdown-medium-button{width:2.5rem;height:2.5rem}.dropdown-button:hover{background:var(--road-grey-200)}.position-right{display:flex;justify-content:flex-end}.bg-white{background:var(--road-grey-000)}.dropdown-button-icon{width:2.5rem;height:2.5rem}.dropdown-medium-button .dropdown-button-icon{width:1.75rem;height:1.75rem}.dropdown[open] .dropdown-menu{transform:scaleY(1)}.dropdown[open] .dropdown-menu.direction-top{position:absolute;bottom:0;left:0;transform:translate3d(0, -56px, 0);will-change:transform}.dropdown-menu{position:absolute;display:flex;flex-direction:column;width:100%;min-width:16.875rem;padding:0.5rem 0;color:var(--road-on-surface);background:var(--road-surface);border:1px solid;border-color:var(--road-outline-weak);border-radius:0.25rem;box-shadow:var(--road-elevation-low);transition:transform 0.2s ease-in-out;transform:scaleY(0);transform-origin:0 0}.dropdown-item{min-height:40px;padding:0 1rem;font-size:var(--road-body-medium);line-height:1.5;color:var(--road-on-surface);text-align:left;text-decoration:none;cursor:pointer;background:var(--road-surface);border:none;outline:none}.dropdown-item-border{border-color:var(--road-outline-weak);border-bottom:1px solid}.dropdown-item:hover,.dropdown-item.focus-visible{background:var(--road-surface-inverse)}";
 
 const Dropdown = class {
   constructor(hostRef) {

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

@@ -1 +1 @@
-{"file":"road-dropdown.entry.js","mappings":";;AAAA,MAAM,WAAW,GAAG,mnDAAmnD;;MCa1nD,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,cAAc,GAAG,IAAI,CAAC,SAAS,KAAK,SAAS,GAAG,aAAa,IAAI,CAAC,SAAS,EAAE,GAAG,EAAE,CAAC;IAGzF,QACE,eAAS,KAAK,EAAC,UAAU,EAAC,IAAI,EAAE,IAAI,CAAC,MAAM,IACzC,gCAAwB,GAAG,IAAI,CAAC,MAAM,EAAE,EAAE,QAAQ,EAAC,GAAG,EAAC,IAAI,EAAC,QAAQ,EAAC,OAAO,EAAE,IAAI,CAAC,OAAO,IACxF,WAAK,KAAK,EAAE,UAAU,aAAa,EAAE,IACnC,WAAK,KAAK,EAAE,GAAG,qBAAqB,IAAI,sBAAsB,EAAE,IAC9D,iBAAW,IAAI,EAAC,iBAAiB,EAAC,KAAK,EAAC,sBAAsB,GAAa,CACvE,CACF,CACE,EACV,WAAK,KAAK,EAAE,iBAAiB,cAAc,EAAE,IAC3C,YAAM,IAAI,EAAC,MAAM,GAAE,CACf,CACE,EACV;GACH;;;;;;","names":[],"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  z-index: 1;\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: relative;\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/* 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 to remove background of the dropdown button\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 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}`}>\n          <slot name=\"list\"/>\n        </div>\n      </details>\n    );\n  }\n\n}\n"],"version":3}
+{"file":"road-dropdown.entry.js","mappings":";;AAAA,MAAM,WAAW,GAAG,mnDAAmnD;;MCa1nD,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,cAAc,GAAG,IAAI,CAAC,SAAS,KAAK,SAAS,GAAG,aAAa,IAAI,CAAC,SAAS,EAAE,GAAG,EAAE,CAAC;IAGzF,QACE,eAAS,KAAK,EAAC,UAAU,EAAC,IAAI,EAAE,IAAI,CAAC,MAAM,IACzC,gCAAwB,GAAG,IAAI,CAAC,MAAM,EAAE,EAAE,QAAQ,EAAC,GAAG,EAAC,IAAI,EAAC,QAAQ,EAAC,OAAO,EAAE,IAAI,CAAC,OAAO,IACxF,WAAK,KAAK,EAAE,UAAU,aAAa,EAAE,IACnC,WAAK,KAAK,EAAE,GAAG,qBAAqB,IAAI,sBAAsB,EAAE,IAC9D,iBAAW,IAAI,EAAC,iBAAiB,EAAC,KAAK,EAAC,sBAAsB,GAAa,CACvE,CACF,CACE,EACV,WAAK,KAAK,EAAE,iBAAiB,cAAc,EAAE,IAC3C,YAAM,IAAI,EAAC,MAAM,GAAE,CACf,CACE,EACV;GACH;;;;;;","names":[],"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  z-index: 1;\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  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/* 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 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}`}>\n          <slot name=\"list\"/>\n        </div>\n      </details>\n    );\n  }\n\n}\n"],"version":3}

package/dist/esm/road-phone-number-input.entry.js

@@ -1193,7 +1193,7 @@ i18n.phonenumbers.AsYouTypeFormatter.prototype.inputDigitHelper_=function(a){var
 });
 });
 
-const phoneNumberInputCss = ".sc-road-phone-number-input-h #phone-number.sc-road-phone-number-input .invalid-feedback.sc-road-input.sc-road-phone-number-input{margin-left:-4.5rem}.is-invalid.sc-road-phone-number-input .form-control.sc-road-input.sc-road-phone-number-input{border-color:var(--road-danger-outline)}.road-phone-input-select.sc-road-phone-number-input{position:relative;display:block;margin-bottom:1rem;font-family:var(--road-font, sans-serif);color:var(--road-on-surface);background-color:var(--road-surface);border:1px solid var(--road-input-outline);border-radius:0.25rem;border-top-right-radius:0;border-bottom-right-radius:0;box-shadow:none;-webkit-appearance:none;appearance:none;width:5rem;height:3.5rem}.sc-road-phone-number-input-h .is-error.sc-road-phone-number-input{border-color:var(--road-danger-outline)}.form-select-area.sc-road-phone-number-input{box-sizing:border-box;display:block;width:100%;height:3rem;padding:0.75rem 3rem 0 1rem;margin:0;font-size:var(--road-body-medium);line-height:1.5;color:var(--road-on-surface);background:url(\"data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2NCA2NCIgZmlsbD0icmdiYSgyMywgMzAsIDUyLCAwLjcyKSI+PHBhdGggZD0iTTIzIDI2bDkgMTIgOS0xMnoiLz48L3N2Zz4=\") no-repeat right 1rem center/1.5rem 2rem;position:absolute;top:0;left:0;height:100%;width:100%;z-index:1;border:0;opacity:0;cursor:pointer}.form-select-area.sc-road-phone-number-input:-moz-focusring{color:transparent;text-shadow:0 0 0 #000000}.form-select-area.sc-road-phone-number-input::-ms-expand{display:none}.form-select-area.sc-road-phone-number-input::placeholder{color:var(--road-on-surface-extra-weak)}@media (hover: hover){.form-select-area.sc-road-phone-number-input:not(:disabled):hover{border-color:var(--road-input-outline-variant)}}.form-select-area.sc-road-phone-number-input:focus~.form-select-area-label.sc-road-phone-number-input,.form-select-area[required].sc-road-phone-number-input:valid~.form-select-area-label.sc-road-phone-number-input,.form-select-area.has-value.sc-road-phone-number-input~.form-select-area-label.sc-road-phone-number-input{transform:scale(0.625) translateY(-0.625rem)}.form-select-area.sc-road-phone-number-input:not(:disabled):focus{border-color:var(--road-input-outline-variant);outline:0}.form-select-area.sc-road-phone-number-input:disabled,.form-select-area[readonly].sc-road-phone-number-input{color:var(--road-on-surface-disabled);cursor:not-allowed;background-color:var(--road-surface-disabled);opacity:1}.form-select-area-label.sc-road-phone-number-input{position:absolute;top:0.9rem;left:1rem;display:block;font-size:var(--road-font-size-18);line-height:1.5;color:var(--road-on-surface-extra-weak);pointer-events:none;transition:transform 200ms cubic-bezier(0, 0, 0.2, 1) 0ms;transform-origin:0 0}.form-select-area.sc-road-phone-number-input:required~.form-select-area-label.sc-road-phone-number-input::after{color:var(--road-on-danger-surface);content:\" *\"}.form-select-area-value.sc-road-phone-number-input{position:absolute;top:1.4rem;left:1rem;display:block;font-size:var(--road-label-medium);line-height:1.5;color:var(--road-on-surface);pointer-events:none;transition:transform 200ms cubic-bezier(0, 0, 0.2, 1) 0ms;transform-origin:0 0}.select-xl.sc-road-phone-number-input-h .form-select-area.sc-road-phone-number-input{height:3.5rem;padding:0.75rem 0 0 1rem}.select-xl.sc-road-phone-number-input-h .form-select-area-label.sc-road-phone-number-input{top:1rem}.select-xl.sc-road-phone-number-input-h .form-select-area.sc-road-phone-number-input:focus~.form-select-area-label.sc-road-phone-number-input,.select-xl.sc-road-phone-number-input-h .form-select-area[required].sc-road-phone-number-input:valid~.form-select-area-label.sc-road-phone-number-input,.select-xl.sc-road-phone-number-input-h .form-select-area.has-value.sc-road-phone-number-input~.form-select-area-label.sc-road-phone-number-input,.select-xl.sc-road-phone-number-input-h .form-select-area[type=\"date\"].sc-road-phone-number-input~.form-select-area-label.sc-road-phone-number-input,.select-xl.sc-road-phone-number-input-h .form-select-area[type=\"time\"].sc-road-phone-number-input~.form-select-area-label.sc-road-phone-number-input{transform:scale(0.75) translateY(-0.625rem)}.select-xl.sc-road-phone-number-input-h .form-select-area.sc-road-phone-number-input:placeholder-shown~.form-select-area-label.sc-road-phone-number-input{transform:scale(0.75) translateY(-0.625rem)}.invalid-feedback.sc-road-phone-number-input{display:none;width:100%;margin-top:0.5rem;font-size:var(--road-body-small);color:var(--road-on-danger-surface)}.form-select-area.is-invalid.sc-road-phone-number-input,.was-validated.sc-road-phone-number-input .form-select-area.sc-road-phone-number-input:invalid{border-color:var(--road-on-danger-surface)}.form-select-area.is-invalid.sc-road-phone-number-input~.invalid-feedback.sc-road-phone-number-input,.was-validated.sc-road-phone-number-input .form-select-area.sc-road-phone-number-input:invalid~.invalid-feedback.sc-road-phone-number-input{display:block}.form-select-area.sc-road-phone-number-input option.sc-road-phone-number-input:checked::after{position:absolute;top:0;left:0;content:attr(data-content)}.form-select-area.sc-road-phone-number-input::after{position:absolute;top:0;left:0;content:var(--selected-content, '')}";
+const phoneNumberInputCss = ".sc-road-phone-number-input-h #phone-number.sc-road-phone-number-input .invalid-feedback.sc-road-input.sc-road-phone-number-input{margin-left:-4.5rem}.is-invalid.sc-road-phone-number-input .form-control.sc-road-input.sc-road-phone-number-input{border-color:var(--road-danger-outline)}.road-phone-input-select.sc-road-phone-number-input{position:relative;display:block;margin-bottom:1rem;font-family:var(--road-font, sans-serif);color:var(--road-on-surface);background-color:var(--road-surface);border:1px solid var(--road-input-outline);border-radius:0.25rem;border-top-right-radius:0;border-bottom-right-radius:0;box-shadow:none;-webkit-appearance:none;appearance:none;width:5rem;height:3.5rem}.sc-road-phone-number-input-h .is-error.sc-road-phone-number-input{border-color:var(--road-danger-outline)}.form-select-area.sc-road-phone-number-input{box-sizing:border-box;display:block;width:100%;height:3rem;padding:0.75rem 3rem 0 2rem;margin:0;font-size:var(--road-body-medium);line-height:1.5;color:var(--road-on-surface);background:url(\"data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2NCA2NCIgZmlsbD0icmdiYSgyMywgMzAsIDUyLCAwLjcyKSI+PHBhdGggZD0iTTIzIDI2bDkgMTIgOS0xMnoiLz48L3N2Zz4=\") no-repeat right -5px center/2.5rem 2rem;position:absolute;top:0;left:0;height:100%;width:95%;z-index:1;border:0;-webkit-appearance:none;appearance:none;opacity:1;cursor:pointer}.form-select-area.sc-road-phone-number-input:-moz-focusring{color:transparent;text-shadow:0 0 0 #000000}.form-select-area.sc-road-phone-number-input::-ms-expand{display:none}.form-select-area.sc-road-phone-number-input::placeholder{color:var(--road-on-surface-extra-weak)}@media (hover: hover){.form-select-area.sc-road-phone-number-input:not(:disabled):hover{border-color:var(--road-input-outline-variant)}}.form-select-area.sc-road-phone-number-input:focus~.form-select-area-label.sc-road-phone-number-input,.form-select-area[required].sc-road-phone-number-input:valid~.form-select-area-label.sc-road-phone-number-input,.form-select-area.has-value.sc-road-phone-number-input~.form-select-area-label.sc-road-phone-number-input{transform:scale(0.625) translateY(-0.625rem)}.form-select-area.sc-road-phone-number-input:not(:disabled):focus{border-color:var(--road-input-outline-variant);outline:0}.form-select-area.sc-road-phone-number-input:disabled,.form-select-area[readonly].sc-road-phone-number-input{color:transparent;cursor:not-allowed;background:var(--road-surface-disabled);opacity:1}.form-select-area-label.sc-road-phone-number-input{position:absolute;top:0.9rem;left:1rem;display:block;font-size:var(--road-font-size-18);line-height:1.5;color:var(--road-on-surface-extra-weak);pointer-events:none;transition:transform 200ms cubic-bezier(0, 0, 0.2, 1) 0ms;transform-origin:0 0}.form-select-area.sc-road-phone-number-input:required~.form-select-area-label.sc-road-phone-number-input::after{color:var(--road-on-danger-surface);content:\" *\"}.form-select-area-value.sc-road-phone-number-input{position:absolute;top:1.4rem;left:1rem;display:block;font-size:var(--road-label-medium);line-height:1.5;color:var(--road-on-surface);pointer-events:none;transition:transform 200ms cubic-bezier(0, 0, 0.2, 1) 0ms;transform-origin:0 0}.select-xl.sc-road-phone-number-input-h .form-select-area.sc-road-phone-number-input{height:3.5rem;padding:0.75rem 0 0 1rem}.select-xl.sc-road-phone-number-input-h .form-select-area-label.sc-road-phone-number-input{top:1rem}.select-xl.sc-road-phone-number-input-h .form-select-area.sc-road-phone-number-input:focus~.form-select-area-label.sc-road-phone-number-input,.select-xl.sc-road-phone-number-input-h .form-select-area[required].sc-road-phone-number-input:valid~.form-select-area-label.sc-road-phone-number-input,.select-xl.sc-road-phone-number-input-h .form-select-area.has-value.sc-road-phone-number-input~.form-select-area-label.sc-road-phone-number-input,.select-xl.sc-road-phone-number-input-h .form-select-area[type=\"date\"].sc-road-phone-number-input~.form-select-area-label.sc-road-phone-number-input,.select-xl.sc-road-phone-number-input-h .form-select-area[type=\"time\"].sc-road-phone-number-input~.form-select-area-label.sc-road-phone-number-input{transform:scale(0.75) translateY(-0.625rem)}.select-xl.sc-road-phone-number-input-h .form-select-area.sc-road-phone-number-input:placeholder-shown~.form-select-area-label.sc-road-phone-number-input{transform:scale(0.75) translateY(-0.625rem)}.invalid-feedback.sc-road-phone-number-input{display:none;width:100%;margin-top:0.5rem;font-size:var(--road-body-small);color:var(--road-on-danger-surface)}.form-select-area.is-invalid.sc-road-phone-number-input,.was-validated.sc-road-phone-number-input .form-select-area.sc-road-phone-number-input:invalid{border-color:var(--road-on-danger-surface)}.form-select-area.is-invalid.sc-road-phone-number-input~.invalid-feedback.sc-road-phone-number-input,.was-validated.sc-road-phone-number-input .form-select-area.sc-road-phone-number-input:invalid~.invalid-feedback.sc-road-phone-number-input{display:block}.form-select-area.sc-road-phone-number-input option.sc-road-phone-number-input:checked::after{position:absolute;top:0;left:0;content:attr(data-content)}.form-select-area.sc-road-phone-number-input::after{position:absolute;top:0;left:0;content:var(--selected-content, '')}";
 
 let selectIds = 0;
 const RoadPhoneNumberInput = class {