@roadtrip/components 3.32.4 → 3.33.0

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

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-fee0103c.js');
 
-const dropdownCss = ":host{--margin-top:0.5rem;display:block;width:max-content}.dropdown{position:relative;font-family:var(--road-font)}.dropdown summary{display:block;background-color:var(--road-surface);border-radius:0.25rem}.dropdown summary:focus,.dropdown summary.focus-visible,.dropdown summary:focus-within{background:var(--road-surface-inverse)}.dropdown summary::-webkit-details-marker{display:none}.dropdown-button{position:relative;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}.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:auto;transform:translate3d(0, -56px, 0);will-change:transform}.dropdown-menu{position:absolute;z-index:1;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-left{left:0}.dropdown-right{right: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}.dropdown-item-border{border-color:var(--road-outline-weak);border-bottom:1px solid}.dropdown-item:hover{background:var(--road-surface-inverse)}.dropdown-item.focus-visible{outline:auto}";
+const dropdownCss = ":host{--margin-top:0.5rem;display:block;width:max-content}.dropdown{position:relative;font-family:var(--road-font)}.dropdown summary{display:block;background-color:var(--road-surface);border-radius:0.25rem}.dropdown summary:focus,.dropdown summary.focus-visible,.dropdown summary:focus-within{background:var(--road-surface-inverse)}.dropdown summary::-webkit-details-marker{display:none}.dropdown-button{position:relative;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}.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:auto;transform:translate3d(0, -56px, 0);will-change:transform}.dropdown-menu{position:absolute;z-index:2;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-left{left:0}.dropdown-right{right: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}.dropdown-item-border{border-color:var(--road-outline-weak);border-bottom:1px solid}.dropdown-item:hover{background:var(--road-surface-inverse)}.dropdown-item.focus-visible{outline:auto}";
 const RoadDropdownStyle0 = dropdownCss;
 
 const Dropdown = class {

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

@@ -1 +1 @@
-{"file":"road-dropdown.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,WAAW,GAAG,2yDAA2yD,CAAC;AACh0D,2BAAe,WAAW;;MCMb,QAAQ;IALrB;;QAU2B,WAAM,GAAY,KAAK,CAAC;QACzC,YAAO,GAAY,KAAK,CAAC;QACzB,aAAQ,GAAY,KAAK,CAAC;QAET,cAAS,GAAsB,QAAQ,CAAC;QAEzD,YAAO,GAAG;YAChB,IAAI,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,MAAM,CAAC;SAC5B,CAAC;KAkCH;IA/BC,mBAAmB,CAAC,EAAc;;QAEhC,IAAK,EAAE,CAAC,MAAsB,CAAC,OAAO,CAAC,eAAe,CAAC,KAAK,IAAI,CAAC,EAAE,EAAE;YACnE,OAAO;SACR;;QAED,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;KACrB;IAED,MAAM;QACJ,MAAM,qBAAqB,GAAG,IAAI,CAAC,OAAO,GAAG,iBAAiB,GAAG,iBAAiB,CAAC;QACnF,MAAM,sBAAsB,GAAG,IAAI,CAAC,QAAQ,GAAG,wCAAwC,GAAG,iBAAiB,CAAC;QAC5G,MAAM,aAAa,GAAG,IAAI,CAAC,QAAQ,GAAG,YAAY,IAAI,CAAC,QAAQ,EAAE,GAAG,EAAE,CAAC;QACvE,MAAM,aAAa,GAAG,IAAI,CAAC,QAAQ,GAAG,YAAY,IAAI,CAAC,QAAQ,EAAE,GAAG,EAAE,CAAC;QACvE,MAAM,cAAc,GAAG,IAAI,CAAC,SAAS,GAAG,aAAa,IAAI,CAAC,SAAS,EAAE,GAAG,EAAE,CAAC;QAE3E,QACEA,sEAAS,KAAK,EAAC,UAAU,EAAC,IAAI,EAAE,IAAI,CAAC,MAAM,IACzCA,uFAAwB,IAAI,CAAC,MAAM,CAAC,QAAQ,EAAE,EAAE,QAAQ,EAAC,GAAG,EAAC,IAAI,EAAC,QAAQ,EAAC,OAAO,EAAE,IAAI,CAAC,OAAO,eAAY,GAAG,IAC7GA,kEAAK,KAAK,EAAE,UAAU,aAAa,EAAE,IACnCA,kEAAK,KAAK,EAAE,GAAG,qBAAqB,IAAI,sBAAsB,EAAE,IAC9DA,wEAAW,IAAI,EAAC,iBAAiB,EAAC,KAAK,EAAC,sBAAsB,iBAAa,MAAM,GAAa,CAC1F,CACF,CACE,EACVA,kEAAK,KAAK,EAAE,iBAAiB,cAAc,IAAI,aAAa,EAAE,IAC5DA,mEAAM,IAAI,EAAC,MAAM,GAAG,CAChB,CACE,EACV;KACH;;;;;;;","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  width: max-content;\n}\n\n.dropdown {\n  position: relative;\n  font-family: var(--road-font);\n}\n\n.dropdown summary {\n  display: block;\n  background-color: var(--road-surface);\n  border-radius: 0.25rem;\n}\n\n.dropdown summary:focus,\n.dropdown summary.focus-visible,\n.dropdown summary:focus-within{\n  background: var(--road-surface-inverse);\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.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: auto;\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}\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  background: var(--road-surface-inverse);\n}\n\n.dropdown-item.focus-visible{\n  outline: auto;\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';\n    const isMediumButtonDropDown = this.isMedium ? 'dropdown-medium-button dropdown-button' : 'dropdown-button';\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} tab-index=\"0\">\n          <div class={`d-flex ${positionClass}`}>\n            <div class={`${isLightButtonDropDown} ${isMediumButtonDropDown}`}>\n              <road-icon name=\"navigation-more\" class=\"dropdown-button-icon\" aria-hidden=\"true\"></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}
+{"file":"road-dropdown.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,WAAW,GAAG,2yDAA2yD,CAAC;AACh0D,2BAAe,WAAW;;MCMb,QAAQ;IALrB;;QAU2B,WAAM,GAAY,KAAK,CAAC;QACzC,YAAO,GAAY,KAAK,CAAC;QACzB,aAAQ,GAAY,KAAK,CAAC;QAET,cAAS,GAAsB,QAAQ,CAAC;QAEzD,YAAO,GAAG;YAChB,IAAI,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,MAAM,CAAC;SAC5B,CAAC;KAkCH;IA/BC,mBAAmB,CAAC,EAAc;;QAEhC,IAAK,EAAE,CAAC,MAAsB,CAAC,OAAO,CAAC,eAAe,CAAC,KAAK,IAAI,CAAC,EAAE,EAAE;YACnE,OAAO;SACR;;QAED,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;KACrB;IAED,MAAM;QACJ,MAAM,qBAAqB,GAAG,IAAI,CAAC,OAAO,GAAG,iBAAiB,GAAG,iBAAiB,CAAC;QACnF,MAAM,sBAAsB,GAAG,IAAI,CAAC,QAAQ,GAAG,wCAAwC,GAAG,iBAAiB,CAAC;QAC5G,MAAM,aAAa,GAAG,IAAI,CAAC,QAAQ,GAAG,YAAY,IAAI,CAAC,QAAQ,EAAE,GAAG,EAAE,CAAC;QACvE,MAAM,aAAa,GAAG,IAAI,CAAC,QAAQ,GAAG,YAAY,IAAI,CAAC,QAAQ,EAAE,GAAG,EAAE,CAAC;QACvE,MAAM,cAAc,GAAG,IAAI,CAAC,SAAS,GAAG,aAAa,IAAI,CAAC,SAAS,EAAE,GAAG,EAAE,CAAC;QAE3E,QACEA,sEAAS,KAAK,EAAC,UAAU,EAAC,IAAI,EAAE,IAAI,CAAC,MAAM,IACzCA,uFAAwB,IAAI,CAAC,MAAM,CAAC,QAAQ,EAAE,EAAE,QAAQ,EAAC,GAAG,EAAC,IAAI,EAAC,QAAQ,EAAC,OAAO,EAAE,IAAI,CAAC,OAAO,eAAY,GAAG,IAC7GA,kEAAK,KAAK,EAAE,UAAU,aAAa,EAAE,IACnCA,kEAAK,KAAK,EAAE,GAAG,qBAAqB,IAAI,sBAAsB,EAAE,IAC9DA,wEAAW,IAAI,EAAC,iBAAiB,EAAC,KAAK,EAAC,sBAAsB,iBAAa,MAAM,GAAa,CAC1F,CACF,CACE,EACVA,kEAAK,KAAK,EAAE,iBAAiB,cAAc,IAAI,aAAa,EAAE,IAC5DA,mEAAM,IAAI,EAAC,MAAM,GAAG,CAChB,CACE,EACV;KACH;;;;;;;","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  width: max-content;\n}\n\n.dropdown {\n  position: relative;\n  font-family: var(--road-font);\n}\n\n.dropdown summary {\n  display: block;\n  background-color: var(--road-surface);\n  border-radius: 0.25rem;\n}\n\n.dropdown summary:focus,\n.dropdown summary.focus-visible,\n.dropdown summary:focus-within{\n  background: var(--road-surface-inverse);\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.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: auto;\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: 2;\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}\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  background: var(--road-surface-inverse);\n}\n\n.dropdown-item.focus-visible{\n  outline: auto;\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';\n    const isMediumButtonDropDown = this.isMedium ? 'dropdown-medium-button dropdown-button' : 'dropdown-button';\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} tab-index=\"0\">\n          <div class={`d-flex ${positionClass}`}>\n            <div class={`${isLightButtonDropDown} ${isMediumButtonDropDown}`}>\n              <road-icon name=\"navigation-more\" class=\"dropdown-button-icon\" aria-hidden=\"true\"></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-phone-number-input.cjs.entry.js

@@ -1199,7 +1199,10 @@ i18n.phonenumbers.AsYouTypeFormatter.prototype.inputDigitHelper_=function(a){var
 });
 }(libphonenumber));
 
-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;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;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)}.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, '')}";
+// list of forbidden characters
+const forbiddenChars = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z', '!', '@', '#', '$', '%', '^', '&', '*', '(', ')', '_', '=', '[', ']', '{', '}', '|', ';', ':', "'", '"', ',', '.', '<', '>', '/', '?'];
+
+const phoneNumberInputCss = ".is-invalid.sc-road-phone-number-input .phone-number-input-field.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;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;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;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)}.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}.input-xl.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{gap:.25rem;display:flex;width:100%;margin:0.5rem 0;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, '')}.phone-number-input-label.sc-road-phone-number-input{position:absolute;top:1rem;left:6rem;display:block;font-size:var(--road-body-medium);line-height:1.5;color:var(--road-on-surface-weak);pointer-events:none;transition:transform 200ms cubic-bezier(0, 0, 0.2, 1) 0ms;transform-origin:0 0}.phone-number-input-field.sc-road-phone-number-input:required~.phone-number-input-label.sc-road-phone-number-input::after{color:var(--road-danger-default);content:\" *\"}.phone-number-input-field.sc-road-phone-number-input:focus~.phone-number-input-label.sc-road-phone-number-input,.phone-number-input-field[required].sc-road-phone-number-input:valid~.phone-number-input-label.sc-road-phone-number-input,.phone-number-input-field.has-value.sc-road-phone-number-input~.phone-number-input-label.sc-road-phone-number-input{transform:scale(0.625) translateY(-0.625rem)}.phone-number-input-field.sc-road-phone-number-input:placeholder-shown~.phone-number-input-label.sc-road-phone-number-input{transform:scale(0.625) translateY(-0.625rem)}.phone-number-input-field.sc-road-phone-number-input:-ms-input-placeholder~.phone-number-input-label.sc-road-phone-number-input{transform:scale(0.625) translateY(-0.625rem)}.phone-number-inputs-container.sc-road-phone-number-input{position:relative;display:flex}.road-phone-input-select.sc-road-phone-number-input{margin-bottom:1rem}.is-error.sc-road-phone-number-input{margin-bottom:0}.phone-number-input-field.sc-road-phone-number-input{flex-grow:1;border:1px solid var(--road-input-outline);border-left:0;border-radius:0.25rem;border-bottom-left-radius:0;border-top-left-radius:0}";
 const RoadPhoneNumberInputStyle0 = phoneNumberInputCss;
 
 let selectIds = 0;
@@ -1230,12 +1233,8 @@ const RoadPhoneNumberInput = class {
             phone: this.resetPhoneUtilData(),
         };
     }
-    updateMessagePosition() {
-        this.placeErrorMessage();
-    }
     // On component load
     componentWillLoad() {
-        this.placeErrorMessage();
         let fromSelect = false;
         if (this.phoneValue) {
             this.phoneNumber = this.phoneValue;
@@ -1252,35 +1251,17 @@ const RoadPhoneNumberInput = class {
     }
     // On user input
     handleInput(event) {
-        this.phoneNumber = event.detail.value;
+        const input = event.target;
+        this.phoneNumber = input.value;
         this.createAndDispatchPhoneData();
     }
     // On user key down
     handleKeyDown(event) {
-        // Liste des caractères interdits
-        const caracteresInterdits = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z', '!', '@', '#', '$', '%', '^', '&', '*', '(', ')', '_', '=', '[', ']', '{', '}', '|', ';', ':', "'", '"', ',', '.', '<', '>', '/', '?'];
-        // Vérifier si la touche pressée est dans la liste des caractères interdits
-        if (caracteresInterdits.includes(event.key)) {
+        // checks if the forbidden characters's list contains the pressed key
+        if (forbiddenChars.includes(event.key)) {
             event.preventDefault();
         }
     }
-    // On user key up
-    handleKeyUp(event) {
-        // Récupérer la valeur saisie
-        const inputValue = event.target.value || '';
-        // Vérifier si la valeur contient uniquement des chiffres ou le symbole "+"
-        const containsOnlyNumbersAndPlus = /^[0-9+]*$/.test(inputValue);
-        // Si la valeur ne contient pas uniquement des chiffres ou le symbole "+", réinitialiser le champ de saisie à son état précédent
-        if (!containsOnlyNumbersAndPlus) {
-            // Réinitialiser la valeur du champ de saisie à son état précédent
-            event.target.value = this.phoneNumber;
-        }
-        else {
-            // Si la valeur contient uniquement des chiffres ou le symbole "+", mettre à jour la valeur du numéro de téléphone
-            this.phoneNumber = inputValue;
-            this.createAndDispatchPhoneData();
-        }
-    }
     // On user select
     handleSelect(event) {
         const select = event.target;
@@ -1292,6 +1273,7 @@ const RoadPhoneNumberInput = class {
         this.updateCountryOptions();
     }
     createAndDispatchPhoneData(fromSelect) {
+        var _a;
         // Init phone util
         const phoneUtil = libphonenumber.exports.PhoneNumberUtil.getInstance();
         const PNF = libphonenumber.exports.PhoneNumberFormat;
@@ -1299,7 +1281,7 @@ const RoadPhoneNumberInput = class {
         this.returnObject.phone = this.resetPhoneUtilData();
         const tmpCountry = this.selectedCountry.length ? this.selectedCountry : this.countryData[0].countryCode;
         try {
-            const parsedPhoneNumber = phoneUtil.parse(this.phoneNumber, tmpCountry);
+            const parsedPhoneNumber = phoneUtil.parse((_a = this.phoneNumber) !== null && _a !== void 0 ? _a : '', tmpCountry);
             this.returnObject.isError = !phoneUtil.isValidNumber(parsedPhoneNumber) && !this.isEmptyPhoneNumber();
             this.returnObject.phone.nationalNumber = phoneUtil.format(parsedPhoneNumber, PNF.NATIONAL);
             this.returnObject.phone.internationalNumber = phoneUtil.format(parsedPhoneNumber, PNF.INTERNATIONAL);
@@ -1321,7 +1303,7 @@ const RoadPhoneNumberInput = class {
             const phoneType = Object.entries(libphonenumber.exports.PhoneNumberType).find(entry => entry[1] === phoneUtil.getNumberType(parsedPhoneNumber));
             this.returnObject.phone.numberType = phoneType[0];
         }
-        catch (_a) { }
+        catch (_b) { }
         finally {
             this.roadPhoneNumberInput.emit(this.returnObject);
         }
@@ -1334,16 +1316,18 @@ const RoadPhoneNumberInput = class {
         this.selectedCountry = value;
     }
     resetPhoneUtilData() {
+        var _a, _b;
         return {
             numberType: 'UNKNOWN',
             countryCode: this.selectedCountry,
             code: this.selectedCountryCode,
-            nationalNumber: this.phoneNumber,
-            internationalNumber: this.phoneNumber,
+            nationalNumber: (_a = this.phoneNumber) !== null && _a !== void 0 ? _a : '',
+            internationalNumber: (_b = this.phoneNumber) !== null && _b !== void 0 ? _b : '',
         };
     }
     isEmptyPhoneNumber() {
-        return !this.phoneNumber.length;
+        var _a;
+        return !((_a = this.phoneNumber) === null || _a === void 0 ? void 0 : _a.length);
     }
     getPhoneCodeFromCountryCode(countryCode) {
         var _a;
@@ -1368,43 +1352,24 @@ const RoadPhoneNumberInput = class {
             },
         ];
     }
-    placeErrorMessage() {
-        this.waitForElementToExist('.invalid-feedback').then((messError) => {
-            messError.style.display = "flex";
-            messError.style.marginTop = "-0.5rem";
-            const phoneNumberInput = this.el;
-            phoneNumberInput.appendChild(messError);
-        });
-    }
-    waitForElementToExist(selector) {
-        return new Promise(resolve => {
-            if (document.querySelector(selector)) {
-                return resolve(document.querySelector(selector));
-            }
-            const observer = new MutationObserver(() => {
-                if (document.querySelector(selector)) {
-                    resolve(document.querySelector(selector));
-                    observer.disconnect();
-                }
-            });
-            observer.observe(document.body, {
-                subtree: true,
-                childList: true,
-            });
-        });
+    hasValue() {
+        return this.phoneNumber !== '' && this.phoneNumber !== null;
     }
     render() {
-        const selectId = `road-select-${selectIds++}`;
+        const id = selectIds++;
+        const selectId = `road-phone-number-select-${id}`;
+        const inputId = `road-phone-number-input-${id}`;
         const labelId = selectId + '-label';
         const valueId = selectId + '-value';
         const isInvalidClass = this.errorMessage.length ? 'is-invalid' : '';
         const isErrorClass = this.errorMessage.length ? 'is-error' : '';
-        return (index.h(index.Host, { key: 'eda1808cf7138f507656e3b3a9fa367fca5d598a' }, index.h("road-input-group", { key: '2c110dd86bd69aa2619fd54697992dfa54cafe7f' }, index.h("div", { key: 'cca235435d4edefaf271e75df90236a327805a98', class: `road-phone-input-select ${isErrorClass}`, slot: "prepend" }, index.h("select", { key: 'f734b4ac6b7bb88ae209689fdf85ce8d3d631302', id: 'phone-number-input', class: `form-select-area has-value ${isInvalidClass}`, "aria-disabled": this.disabled ? 'true' : null, disabled: this.disabled, onChange: (event) => this.handleSelect(event), "aria-label": this.codeLabel, tabIndex: this.disabled ? -1 : 0 }, this.countryOptions && this.countryOptions.map(option => (index.h("option", { value: option.value, disabled: option.disabled, selected: option.selected }, option.label)))), index.h("label", { key: '89255560eed68abaf4d2125e62e96695cec49fcf', class: "form-select-area-label", id: labelId, htmlFor: selectId }, this.codeLabel), index.h("label", { key: '402c5307460ffdbd82281ccce5174687743c01ed', class: "form-select-area-value", id: valueId, htmlFor: selectId }, "+", this.selectedCountryCode)), index.h("road-input", { key: '4d151be9354c9225bafc8cc05b6ebfcfc075e92c', type: "tel", id: "phone-number", sizes: "xl", label: this.phoneLabel, value: this.phoneValue, onRoadChange: (event) => this.handleInput(event), required: this.required, error: this.errorMessage, onKeyDown: (event) => this.handleKeyDown(event), tabIndex: 0 }))));
+        const hasValueClass = this.hasValue() ? 'has-value' : '';
+        const sizes = 'xl';
+        return (index.h(index.Host, { key: '9f90460c652db496fc88dd4b8e611bdf348e3f5a' }, index.h("div", { key: '03fceb8966c9622782a0341a2f0a01511cfe7006', class: 'phone-number-inputs-container' }, index.h("div", { key: '4a889f1e223cf354a262fd68d948c05dc265a14b', class: `road-phone-input-select ${isErrorClass} ${isInvalidClass}`, slot: "prepend" }, index.h("select", { key: 'cc520dea43d2b64645f9cbf67c768efce7790079', id: selectId, class: `form-select-area has-value`, "aria-disabled": this.disabled ? 'true' : null, disabled: this.disabled, onChange: (event) => this.handleSelect(event), "aria-label": this.codeLabel, tabIndex: this.disabled ? -1 : 0 }, this.countryOptions && this.countryOptions.map(option => (index.h("option", { value: option.value, disabled: option.disabled, selected: option.selected }, option.label)))), index.h("label", { key: '6769d2bda09b72449a566ece542ebf7edc5a0e40', class: "form-select-area-label", id: labelId, htmlFor: selectId }, this.codeLabel), index.h("label", { key: '513bfd2c0eab6609d74eb7b9ebc14a212be4cc9d', class: "form-select-area-value", id: valueId, htmlFor: selectId }, "+", this.selectedCountryCode)), index.h("input", { key: 'db609e065a32f7014c6d32dec4aae86b2b607e77', type: 'tel', id: inputId, class: `input-${sizes} phone-number-input-field ${hasValueClass} ${isErrorClass}`, value: this.phoneValue, required: this.required, tabIndex: 0, onInput: (event) => this.handleInput(event), onKeyDown: (event) => this.handleKeyDown(event) }), index.h("label", { key: 'cac7f2ae8afa700db8871bc4d2b35f49822ca179', class: "phone-number-input-label", id: labelId, htmlFor: inputId }, this.phoneLabel)), this.errorMessage
+            && this.errorMessage !== ''
+            && index.h("p", { key: 'cb521ea80ae33ce0743a64270d47234cc0bdf114', class: "invalid-feedback" }, index.h("road-icon", { key: '1dcf2587dabc46402d1c16bbf75604aedfc4d54d', slot: "start", color: 'danger', name: "alert-error-solid", "aria-hidden": "true", size: "sm" }), this.errorMessage)));
     }
     get el() { return index.getElement(this); }
-    static get watchers() { return {
-        "errorMessage": ["updateMessagePosition"]
-    }; }
 };
 RoadPhoneNumberInput.style = RoadPhoneNumberInputStyle0;