@roadtrip/components 3.24.0 → 3.25.0

package/dist/roadtrip/p-6ff5ec7c.entry.js

@@ -0,0 +1,2 @@
+import{r as o,h as r,a as t}from"./p-f3d586b3.js";const d=":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 n=class{constructor(r){o(this,r);this.onClick=()=>{this.isOpen=!this.isOpen};this.isOpen=false;this.isLight=false;this.isMedium=false;this.position=undefined;this.direction="bottom"}handleDocumentClick(o){if(o.target.closest("road-dropdown")===this.el){return}this.isOpen=false}render(){const o=this.isLight?"dropdown-button":"dropdown-button";const t=this.isMedium?"dropdown-medium-button dropdown-button":"dropdown-button";const d=this.position?`position-${this.position}`:"";const n=this.position?`dropdown-${this.position}`:"";const e=this.direction?`direction-${this.direction}`:"";return r("details",{class:"dropdown",open:this.isOpen},r("summary",{"aria-expanded":this.isOpen.toString(),tabindex:"0",role:"button",onClick:this.onClick,"tab-index":"0"},r("div",{class:`d-flex ${d}`},r("div",{class:`${o} ${t}`},r("road-icon",{name:"navigation-more",class:"dropdown-button-icon","aria-hidden":"true"})))),r("div",{class:`dropdown-menu ${e} ${n}`},r("slot",{name:"list"})))}get el(){return t(this)}};n.style=d;export{n as road_dropdown};
+//# sourceMappingURL=p-6ff5ec7c.entry.js.map

package/dist/roadtrip/p-6ff5ec7c.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["dropdownCss","Dropdown","this","onClick","isOpen","handleDocumentClick","ev","target","closest","el","render","isLightButtonDropDown","isLight","isMediumButtonDropDown","isMedium","positionClass","position","dropdownClass","directionClass","direction","h","class","open","toString","tabindex","role","name"],"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"],"mappings":"kDAAA,MAAMA,EAAc,4yD,MCOPC,EAAQ,M,yBAWXC,KAAAC,QAAU,KAChBD,KAAKE,QAAUF,KAAKE,MAAM,E,YAPe,M,aAChB,M,cACC,M,uCAE4B,Q,CAOxD,mBAAAC,CAAoBC,GAElB,GAAKA,EAAGC,OAAuBC,QAAQ,mBAAqBN,KAAKO,GAAI,CACnE,M,CAGFP,KAAKE,OAAS,K,CAGhB,MAAAM,GACE,MAAMC,EAAwBT,KAAKU,QAAU,kBAAoB,kBACjE,MAAMC,EAAyBX,KAAKY,SAAW,yCAA2C,kBAC1F,MAAMC,EAAgBb,KAAKc,SAAW,YAAYd,KAAKc,WAAa,GACpE,MAAMC,EAAgBf,KAAKc,SAAW,YAAYd,KAAKc,WAAa,GACpE,MAAME,EAAiBhB,KAAKiB,UAAY,aAAajB,KAAKiB,YAAc,GAExE,OACEC,EAAA,WAASC,MAAM,WAAWC,KAAMpB,KAAKE,QACnCgB,EAAA,2BAAwBlB,KAAKE,OAAOmB,WAAYC,SAAS,IAAIC,KAAK,SAAStB,QAASD,KAAKC,QAAO,YAAY,KAC1GiB,EAAA,OAAKC,MAAO,UAAUN,KACpBK,EAAA,OAAKC,MAAO,GAAGV,KAAyBE,KACtCO,EAAA,aAAWM,KAAK,kBAAkBL,MAAM,uBAAsB,cAAa,YAIjFD,EAAA,OAAKC,MAAO,iBAAiBH,KAAkBD,KAC7CG,EAAA,QAAMM,KAAK,U"}

package/dist/roadtrip/p-73f81e81.entry.js

@@ -0,0 +1,2 @@
+import{r as e,c as s,h as t,H as l}from"./p-f3d586b3.js";const r='.sc-road-select-h{position:relative;display:block;margin-bottom:1rem;font-family:var(--road-font, sans-serif);color:var(--road-on-surface)}.form-select.sc-road-select{box-sizing:border-box;display:block;width:100%;height:auto;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;background-color:var(--road-surface);border:1px solid var(--road-input-outline);border-radius:0.25rem;box-shadow:none;appearance:none}.form-select.sc-road-select:-moz-focusring{color:transparent;text-shadow:0 0 0 #000000}.form-select.sc-road-select::-ms-expand{display:none}.form-select.sc-road-select::placeholder{color:var(--road-on-surface-extra-weak)}@media (hover: hover){.form-select.sc-road-select:not(:disabled):hover{border-color:var(--road-input-outline-variant)}}.form-select.sc-road-select:focus~.form-select-label.sc-road-select,.form-select[required].sc-road-select:valid~.form-select-label.sc-road-select,.form-select.has-value.sc-road-select~.form-select-label.sc-road-select{transform:scale(0.625) translateY(-0.625rem)}.form-select.sc-road-select:disabled,.form-select[readonly].sc-road-select{color:var(--road-on-surface-disabled);cursor:not-allowed;background-color:var(--road-surface-disabled);opacity:1}.form-select-label.sc-road-select{position:absolute;top:0.75rem;left:1rem;display:block;font-size:var(--road-label-medium);line-height:1.5;color:var(--road-on-surface-weak);pointer-events:none;transition:transform 200ms cubic-bezier(0, 0, 0.2, 1) 0ms;transform-origin:0 0}.form-select.sc-road-select:required~.form-select-label.sc-road-select::after{color:var(--road-on-danger-surface);content:" *"}.select-xl.sc-road-select-h .form-select.sc-road-select{min-height:3.5rem;padding:1rem 1rem 0}.select-xl.sc-road-select-h .form-select-label.sc-road-select{top:1rem}.select-xl.sc-road-select-h .form-select.sc-road-select:focus~.form-select-label.sc-road-select,.select-xl.sc-road-select-h .form-select[required].sc-road-select:valid~.form-select-label.sc-road-select,.select-xl.sc-road-select-h .form-select.has-value.sc-road-select~.form-select-label.sc-road-select,.select-xl.sc-road-select-h .form-select[type="date"].sc-road-select~.form-select-label.sc-road-select,.select-xl.sc-road-select-h .form-select[type="time"].sc-road-select~.form-select-label.sc-road-select{transform:scale(0.75) translateY(-0.625rem)}.select-xl.sc-road-select-h .form-select.sc-road-select:placeholder-shown~.form-select-label.sc-road-select{transform:scale(0.75) translateY(-0.625rem)}.select-lg.sc-road-select-h .form-select.sc-road-select{min-height:3rem}.select-md.sc-road-select-h .form-select.sc-road-select{min-height:2.5rem;padding:1rem 1rem 0;font-size:var(--road-body-small)}.select-md.sc-road-select-h .form-select-label.sc-road-select{top:0.5rem}.select-md.sc-road-select-h .form-select.sc-road-select:focus~.form-select-label.sc-road-select,.select-md.sc-road-select-h .form-select[required].sc-road-select:valid~.form-select-label.sc-road-select,.select-md.sc-road-select-h .form-select.has-value.sc-road-select~.form-select-label.sc-road-select,.select-md.sc-road-select-h .form-select[type="date"].sc-road-select~.form-select-label.sc-road-select,.select-md.sc-road-select-h .form-select[type="time"].sc-road-select~.form-select-label.sc-road-select{transform:scale(0.75) translateY(-0.625rem)}.select-md.sc-road-select-h .form-select.sc-road-select:placeholder-shown~.form-select-label.sc-road-select{transform:scale(0.75) translateY(-0.625rem)}.invalid-feedback.sc-road-select{display:none;width:100%;margin-top:0.5rem;font-size:var(--road-body-small);color:var(--road-on-danger-surface)}.form-select.is-invalid.sc-road-select,.was-validated.sc-road-select .form-select.sc-road-select:invalid{border-color:var(--road-on-danger-surface)}.form-select.is-invalid.sc-road-select~.invalid-feedback.sc-road-select,.was-validated.sc-road-select .form-select.sc-road-select:invalid~.invalid-feedback.sc-road-select{display:block}';const c=class{constructor(t){e(this,t);this.roadchange=s(this,"roadchange",7);this.roadChange=s(this,"roadChange",7);this.roadfocus=s(this,"roadfocus",7);this.roadFocus=s(this,"roadFocus",7);this.roadblur=s(this,"roadblur",7);this.roadBlur=s(this,"roadBlur",7);this.onChange=e=>{const s=e.target;if(s){this.value=s.value||null}};this.onBlur=()=>{this.roadblur.emit();this.roadBlur.emit()};this.onFocus=()=>{this.roadfocus.emit();this.roadFocus.emit()};this.selectId=`road-select-${a++}`;this.options=[];this.autofocus=false;this.disabled=false;this.name=this.selectId;this.required=false;this.size=0;this.sizes="xl";this.label=`${this.selectId}-label`;this.error=undefined;this.value=undefined}valueChanged(){if(this.value===null){this.resetSelection()}else{this.addSelected()}this.roadchange.emit({value:this.value});this.roadChange.emit({value:this.value})}componentWillLoad(){if(this.value===null){this.resetSelection()}else{this.addSelected()}}addSelected(){this.options.forEach((e=>e.selected=false));const e=this.options.find((e=>e.value==this.value));if(e){e.selected=true}}resetSelection(){this.value=null;this.options.forEach((e=>e.selected=false))}render(){const e=this.selectId+"-label";const s=this.value&&this.value!==""?"has-value":"";const r=this.error!==undefined&&this.error!==""?"is-invalid":"";return t(l,{class:this.sizes&&`select-${this.sizes}`},t("select",{class:`form-select ${s} ${r}`,id:this.selectId,"aria-disabled":this.disabled?"true":null,autoFocus:this.autofocus,disabled:this.disabled,name:this.name,required:this.required,size:this.size,onChange:this.onChange,onFocus:this.onFocus,onBlur:this.onBlur},t("option",{selected:!this.value,disabled:true,hidden:true,style:{display:"none"},value:""}),this.options&&this.options.map((e=>t("option",{value:e.value,selected:this.value!==null&&e.value==this.value},e.label)))),t("label",{class:"form-select-label",id:e,htmlFor:this.selectId},this.label),this.error&&this.error!==""&&t("p",{class:"invalid-feedback"},this.error))}static get watchers(){return{value:["valueChanged"]}}};let a=0;c.style=r;export{c as road_select};
+//# sourceMappingURL=p-73f81e81.entry.js.map

package/dist/roadtrip/p-73f81e81.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["selectCss","Select","this","onChange","ev","select","target","value","onBlur","roadblur","emit","roadBlur","onFocus","roadfocus","roadFocus","selectIds","selectId","valueChanged","resetSelection","addSelected","roadchange","roadChange","componentWillLoad","options","forEach","option","selected","selectedOption","find","render","labelId","hasValueClass","isInvalidClass","error","undefined","h","Host","class","sizes","id","disabled","autoFocus","autofocus","name","required","size","hidden","style","display","map","label","htmlFor"],"sources":["src/components/select/select.css?tag=road-select&encapsulation=scoped","src/components/select/select.tsx"],"sourcesContent":["/*\n * Select\n *\n * Index\n * - Select\n * - Label\n * - Sizes\n * - Error\n */\n\n\n:host {\n  position: relative;\n  display: block;\n  margin-bottom: 1rem;\n  font-family: var(--road-font, sans-serif);\n  color: var(--road-on-surface);\n}\n\n/* SELECT\n -------------------- */\n\n.form-select {\n  box-sizing: border-box;\n  display: block;\n  width: 100%;\n  height: auto;\n  padding: 0.75rem 3rem 0 1rem;\n  margin: 0;\n  font-size: var(--road-body-medium);\n  line-height: 1.5;\n  color: var(--road-on-surface);\n  background: url(\"data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2NCA2NCIgZmlsbD0icmdiYSgyMywgMzAsIDUyLCAwLjcyKSI+PHBhdGggZD0iTTIzIDI2bDkgMTIgOS0xMnoiLz48L3N2Zz4=\") no-repeat right 1rem center/1.5rem 2rem;\n  background-color: var(--road-surface);\n  border: 1px solid var(--road-input-outline);\n  border-radius: 0.25rem;\n  box-shadow: none;\n  appearance: none;\n}\n\n.form-select:-moz-focusring {\n  color: transparent;\n  text-shadow: 0 0 0 #000000;\n}\n\n.form-select::-ms-expand { /* IE fix remove native arrow */\n  display: none;\n}\n\n/**\n * Placeholder\n */\n\n.form-select::placeholder {\n  color: var(--road-on-surface-extra-weak);\n}\n\n/**\n * Hover state\n */\n\n@media (hover: hover) {\n\n  .form-select:not(:disabled):hover {\n    border-color: var(--road-input-outline-variant);\n  }\n}\n\n/**\n * Focus state\n */\n\n.form-select:focus ~ .form-select-label,\n.form-select[required]:valid ~ .form-select-label,\n.form-select.has-value ~ .form-select-label {\n  transform: scale(0.625) translateY(-0.625rem);\n}\n\n/**\n * Disabled state\n */\n\n.form-select:disabled,\n.form-select[readonly] {\n  color: var(--road-on-surface-disabled);\n  cursor: not-allowed;\n  background-color: var(--road-surface-disabled);\n  opacity: 1;\n}\n\n/* LABEL\n -------------------- */\n\n.form-select-label {\n  position: absolute;\n  top: 0.75rem;\n  left: 1rem;\n  display: block;\n  font-size: var(--road-label-medium);\n  line-height: 1.5;\n  color: var(--road-on-surface-weak);\n  pointer-events: none;\n  transition: transform 200ms cubic-bezier(0, 0, 0.2, 1) 0ms;\n  transform-origin: 0 0;\n}\n\n.form-select:required ~ .form-select-label::after{\n  color: var(--road-on-danger-surface);\n  content: \" *\";\n}\n\n/* SIZES\n -------------------- */\n\n:host(.select-xl) .form-select {\n  min-height: 3.5rem;\n  padding: 1rem 1rem 0;\n}\n\n:host(.select-xl) .form-select-label {\n  top: 1rem;\n}\n\n:host(.select-xl) .form-select:focus ~ .form-select-label,\n:host(.select-xl) .form-select[required]:valid ~ .form-select-label,\n:host(.select-xl) .form-select.has-value ~ .form-select-label,\n:host(.select-xl) .form-select[type=\"date\"] ~ .form-select-label,\n:host(.select-xl) .form-select[type=\"time\"] ~ .form-select-label {\n  transform: scale(0.75) translateY(-0.625rem);\n}\n\n:host(.select-xl) .form-select:placeholder-shown ~ .form-select-label {\n  transform: scale(0.75) translateY(-0.625rem);\n}\n\n:host(.select-lg) .form-select {\n  min-height: 3rem;\n}\n\n:host(.select-md) .form-select {\n  min-height: 2.5rem;\n  padding: 1rem 1rem 0;\n  font-size: var(--road-body-small);\n}\n\n:host(.select-md) .form-select-label {\n  top: 0.5rem;\n}\n\n:host(.select-md) .form-select:focus ~ .form-select-label,\n:host(.select-md) .form-select[required]:valid ~ .form-select-label,\n:host(.select-md) .form-select.has-value ~ .form-select-label,\n:host(.select-md) .form-select[type=\"date\"] ~ .form-select-label,\n:host(.select-md) .form-select[type=\"time\"] ~ .form-select-label {\n  transform: scale(0.75) translateY(-0.625rem);\n}\n\n:host(.select-md) .form-select:placeholder-shown ~ .form-select-label {\n  transform: scale(0.75) translateY(-0.625rem);\n}\n\n/* ERROR\n -------------------- */\n\n.invalid-feedback {\n  display: none;\n  width: 100%;\n  margin-top: 0.5rem;\n  font-size: var(--road-body-small);\n  color: var(--road-on-danger-surface);\n}\n\n.form-select.is-invalid,\n.was-validated .form-select:invalid {\n  border-color: var(--road-on-danger-surface);\n}\n\n.form-select.is-invalid ~ .invalid-feedback,\n.was-validated .form-select:invalid ~ .invalid-feedback {\n  display: block;\n}\n","import { Component, Event, EventEmitter, Host, Prop, Watch, h } from '@stencil/core';\n\n@Component({\n  tag: 'road-select',\n  styleUrl: 'select.css',\n  scoped: true,\n})\nexport class Select {\n\n  /**\n   * The id of select\n   */\n  @Prop() selectId: string = `road-select-${selectIds++}`;\n\n  /**\n   * List of options of the select\n   */\n  @Prop() options: Array<{\n    value: string | number;\n    label: string;\n    selected?: boolean;\n  }> = [];\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: boolean = false;\n\n  /**\n   * If `true`, the user cannot interact with the select.\n   */\n  @Prop() disabled: boolean = false;\n\n  /**\n   * The name of the control, which is submitted with the form data.\n   */\n  @Prop() name: string = this.selectId;\n\n  /**\n   * If `true`, the user must fill in a value before submitting a form.\n   */\n  @Prop() required: boolean = false;\n\n  /**\n   * If the control is presented as a scrolling list box (e.g. when multiple is specified),\n   * this attribute represents the number of rows in the list that should be visible at one time.\n   */\n  @Prop() size: number = 0;\n\n  /**\n   * The sizes of the input.\n   */\n  @Prop() sizes: 'md' | 'lg' | 'xl' = 'xl';\n\n  /**\n   * Label for the field\n   */\n  @Prop() label: string = `${this.selectId}-label`;\n\n  /**\n   * Error message for the field\n   */\n  @Prop() error?: string;\n\n  /**\n   * the value of the select.\n   */\n  @Prop({ mutable: true }) value?: any | null;\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 select has focus.\n   */\n  @Event() roadfocus!: EventEmitter<void>;\n  /** @internal */\n  @Event() roadFocus!: EventEmitter<void>;\n\n  /**\n   * Emitted when the select loses focus.\n   */\n  @Event() roadblur!: EventEmitter<void>;\n  /** @internal */\n  @Event() roadBlur!: EventEmitter<void>;\n\n  @Watch('value')\n  valueChanged() {\n    if (this.value === null) {\n      this.resetSelection();\n    } else {\n      this.addSelected();\n    }\n\n    this.roadchange.emit({\n      value: this.value,\n    });\n    this.roadChange.emit({\n      value: this.value,\n    });\n  }\n\n  componentWillLoad() {\n    if (this.value === null) {\n      this.resetSelection();\n    } else {\n      this.addSelected();\n    }\n  }\n\n  addSelected() {\n    // Désélection de toutes les options\n    this.options.forEach(option => option.selected = false);\n\n    // Sélection de la nouvelle option si elle correspond à la valeur actuelle\n    const selectedOption = this.options.find(option => option.value == this.value);\n    if (selectedOption) {\n      selectedOption.selected = true;\n    }\n  }\n\n  resetSelection() {\n    this.value = null;\n    this.options.forEach(option => option.selected = false);\n  }\n\n  private onChange = (ev: Event) => {\n    const select = ev.target as HTMLSelectElement | null;\n    if (select) {\n      this.value = select.value || null;\n    }\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  render() {\n    const labelId = this.selectId + '-label';\n    const hasValueClass = this.value && this.value !== '' ? 'has-value' : '';\n    const isInvalidClass = this.error !== undefined && this.error !== '' ? 'is-invalid' : '';\n\n    return (\n      <Host class={this.sizes && `select-${this.sizes}`}>\n        <select\n        class={`form-select ${hasValueClass} ${isInvalidClass}`}\n        id={this.selectId}\n        aria-disabled={this.disabled ? 'true' : null}\n        autoFocus={this.autofocus}\n        disabled={this.disabled}\n        name={this.name}\n        required={this.required}\n        size={this.size}\n        onChange={this.onChange}\n        onFocus={this.onFocus}\n        onBlur={this.onBlur}\n      >\n        <option\n          selected={!this.value} // sélectionné si this.value est null ou vide\n          disabled\n          hidden\n          style={{ display: 'none' }}\n          value=\"\"\n        >\n        </option>\n        {this.options && this.options.map(option => (\n          <option\n            value={option.value}\n            selected={this.value !== null && option.value == this.value}\n          >\n            {option.label}\n          </option>\n        ))}\n      </select>\n        <label class=\"form-select-label\" id={labelId} htmlFor={this.selectId}>{this.label}</label>\n        {this.error && this.error !== '' && <p class=\"invalid-feedback\">{this.error}</p>}\n      </Host>\n    );\n  }\n\n}\n\nlet selectIds = 0;\n"],"mappings":"yDAAA,MAAMA,EAAY,opI,MCOLC,EAAM,M,uPA+HTC,KAAAC,SAAYC,IAClB,MAAMC,EAASD,EAAGE,OAClB,GAAID,EAAQ,CACVH,KAAKK,MAAQF,EAAOE,OAAS,I,GAIzBL,KAAAM,OAAS,KACfN,KAAKO,SAASC,OACdR,KAAKS,SAASD,MAAM,EAGdR,KAAAU,QAAU,KAChBV,KAAKW,UAAUH,OACfR,KAAKY,UAAUJ,MAAM,E,cAxII,eAAeK,M,aASrC,G,eAKwB,M,cAKD,M,UAKLb,KAAKc,S,cAKA,M,UAML,E,WAKa,K,WAKZ,GAAGd,KAAKc,iB,0CAsChC,YAAAC,GACE,GAAIf,KAAKK,QAAU,KAAM,CACvBL,KAAKgB,gB,KACA,CACLhB,KAAKiB,a,CAGPjB,KAAKkB,WAAWV,KAAK,CACnBH,MAAOL,KAAKK,QAEdL,KAAKmB,WAAWX,KAAK,CACnBH,MAAOL,KAAKK,O,CAIhB,iBAAAe,GACE,GAAIpB,KAAKK,QAAU,KAAM,CACvBL,KAAKgB,gB,KACA,CACLhB,KAAKiB,a,EAIT,WAAAA,GAEEjB,KAAKqB,QAAQC,SAAQC,GAAUA,EAAOC,SAAW,QAGjD,MAAMC,EAAiBzB,KAAKqB,QAAQK,MAAKH,GAAUA,EAAOlB,OAASL,KAAKK,QACxE,GAAIoB,EAAgB,CAClBA,EAAeD,SAAW,I,EAI9B,cAAAR,GACEhB,KAAKK,MAAQ,KACbL,KAAKqB,QAAQC,SAAQC,GAAUA,EAAOC,SAAW,O,CAoBnD,MAAAG,GACE,MAAMC,EAAU5B,KAAKc,SAAW,SAChC,MAAMe,EAAgB7B,KAAKK,OAASL,KAAKK,QAAU,GAAK,YAAc,GACtE,MAAMyB,EAAiB9B,KAAK+B,QAAUC,WAAahC,KAAK+B,QAAU,GAAK,aAAe,GAEtF,OACEE,EAACC,EAAI,CAACC,MAAOnC,KAAKoC,OAAS,UAAUpC,KAAKoC,SACxCH,EAAA,UACAE,MAAO,eAAeN,KAAiBC,IACvCO,GAAIrC,KAAKc,SAAQ,gBACFd,KAAKsC,SAAW,OAAS,KACxCC,UAAWvC,KAAKwC,UAChBF,SAAUtC,KAAKsC,SACfG,KAAMzC,KAAKyC,KACXC,SAAU1C,KAAK0C,SACfC,KAAM3C,KAAK2C,KACX1C,SAAUD,KAAKC,SACfS,QAASV,KAAKU,QACdJ,OAAQN,KAAKM,QAEb2B,EAAA,UACET,UAAWxB,KAAKK,MAChBiC,SAAQ,KACRM,OAAM,KACNC,MAAO,CAAEC,QAAS,QAClBzC,MAAM,KAGPL,KAAKqB,SAAWrB,KAAKqB,QAAQ0B,KAAIxB,GAChCU,EAAA,UACE5B,MAAOkB,EAAOlB,MACdmB,SAAUxB,KAAKK,QAAU,MAAQkB,EAAOlB,OAASL,KAAKK,OAErDkB,EAAOyB,UAIZf,EAAA,SAAOE,MAAM,oBAAoBE,GAAIT,EAASqB,QAASjD,KAAKc,UAAWd,KAAKgD,OAC3EhD,KAAK+B,OAAS/B,KAAK+B,QAAU,IAAME,EAAA,KAAGE,MAAM,oBAAoBnC,KAAK+B,O,wDAO9E,IAAIlB,EAAY,E"}

package/dist/roadtrip/p-98cd42c5.entry.js

@@ -0,0 +1,2 @@
+import{r as a,c as r,h as t,H as e}from"./p-f3d586b3.js";const o='.sc-road-textarea-h{position:relative;display:block;margin-bottom:1rem;font-family:var(--road-font, sans-serif);color:var(--road-on-surface)}.form-control.sc-road-textarea{box-sizing:border-box;display:block;width:100%;height:3rem;padding:0.75rem 1rem 0;margin:0;font-size:var(--road-body-medium);color:var(--road-on-surface);background:var(--road-surface);border:1px solid var(--road-input-outline);border-radius:0.25rem;box-shadow:none;appearance:none}.form-control.sc-road-textarea::placeholder{color:var(--road-on-surface-extra-weak);opacity:1}@media (hover: hover){.form-control.sc-road-textarea:not(:disabled):hover{border-color:var(--road-input-outline-variant)}}.form-control.sc-road-textarea:focus~.form-label.sc-road-textarea,.form-control[required].sc-road-textarea:valid~.form-label.sc-road-textarea,.form-control.has-value.sc-road-textarea~.form-label.sc-road-textarea{transform:scale(0.625) translateY(-0.625rem)}.form-control.sc-road-textarea:placeholder-shown~.form-label.sc-road-textarea{transform:scale(0.625) translateY(-0.625rem)}.form-control.sc-road-textarea:-ms-input-placeholder~.form-label.sc-road-textarea{transform:scale(0.625) translateY(-0.625rem)}.form-control.sc-road-textarea:not(:disabled):focus{border-color:var(--road-input-outline-variant)}.form-control.sc-road-textarea:disabled,.form-control[readonly].sc-road-textarea{color:var(--road-on-surface-weak);cursor:not-allowed;background:var(--road-surface-disabled);opacity:1}.textarea-control.sc-road-textarea{height:auto;padding-top:1rem;padding-bottom:0.5rem;line-height:1.5}.textarea-control.no-resize.sc-road-textarea{resize:none}.form-label.sc-road-textarea{position:absolute;top:0.75rem;left:1rem;display:block;font-size:var(--road-body-medium);line-height:1.5;color:var(--road-on-surface-weak);pointer-events:none;transition:transform 200ms cubic-bezier(0, 0, 0.2, 1) 0ms;transform-origin:0 0}.input-xl.sc-road-textarea-h{--height:3.5rem}.input-xl.sc-road-textarea-h .form-control.sc-road-textarea{padding:1.5rem 1rem 0.5rem}.input-xl.sc-road-textarea-h .form-label.sc-road-textarea{top:1rem}.input-xl.sc-road-textarea-h .form-control.sc-road-textarea:focus~.form-label.sc-road-textarea,.input-xl.sc-road-textarea-h .form-control[required].sc-road-textarea:valid~.form-label.sc-road-textarea,.input-xl.sc-road-textarea-h .form-control.has-value.sc-road-textarea~.form-label.sc-road-textarea,.input-xl.sc-road-textarea-h .form-control[type="date"].sc-road-textarea~.form-label.sc-road-textarea,.input-xl.sc-road-textarea-h .form-control[type="time"].sc-road-textarea~.form-label.sc-road-textarea{transform:scale(0.75) translateY(-0.625rem)}.input-xl.sc-road-textarea-h .form-control.sc-road-textarea:placeholder-shown~.form-label.sc-road-textarea{transform:scale(0.75) translateY(-0.625rem)}.invalid-feedback.sc-road-textarea{display:none;width:100%;margin-top:0.5rem;font-size:var(--road-helper-medium);color:var(--road-on-danger-surface)}.form-control.is-invalid.sc-road-textarea,.was-validated.sc-road-textarea .form-control.sc-road-textarea:invalid{border-color:var(--road-danger-outline)}.form-control.is-invalid.sc-road-textarea~.invalid-feedback.sc-road-textarea,.was-validated.sc-road-textarea .form-control.sc-road-textarea:invalid~.invalid-feedback.sc-road-textarea{display:block}.helper.sc-road-textarea{margin-top:0.5rem;font-size:var(--road-helper-medium);color:var(--road-on-surface-weak)}';const s=class{constructor(t){a(this,t);this.roadinput=r(this,"roadinput",7);this.roadInput=r(this,"roadInput",7);this.roadchange=r(this,"roadchange",7);this.roadChange=r(this,"roadChange",7);this.roadblur=r(this,"roadblur",7);this.roadBlur=r(this,"roadBlur",7);this.roadfocus=r(this,"roadfocus",7);this.roadFocus=r(this,"roadFocus",7);this.onInput=a=>{const r=a.target;if(r){this.value=r.value||""}this.roadinput.emit(a);this.roadInput.emit(a)};this.onBlur=()=>{this.roadblur.emit();this.roadBlur.emit()};this.onFocus=()=>{this.roadfocus.emit();this.roadFocus.emit()};this.textareaId=`road-textarea-${i++}`;this.autocapitalize="none";this.autofocus=false;this.disabled=false;this.inputmode=undefined;this.enterkeyhint=undefined;this.maxlength=undefined;this.minlength=undefined;this.name=this.textareaId;this.placeholder=undefined;this.sizes="lg";this.readonly=false;this.required=false;this.spellcheck=false;this.resize=true;this.cols=undefined;this.rows=undefined;this.wrap=undefined;this.value="";this.label=`${this.textareaId}-label`;this.error=undefined;this.helper=undefined}valueChanged(){this.roadchange.emit({value:this.value});this.roadChange.emit({value:this.value})}getValue(){return this.value||""}render(){const a=this.getValue();const r=this.textareaId+"-label";const o=this.value!==""?"has-value":"";const s=this.resize==false?"no-resize":"";const i=this.error!==undefined&&this.error!==""?"is-invalid":"";return t(e,{"aria-disabled":this.disabled?"true":null,class:this.sizes&&`input-${this.sizes}`},t("textarea",{class:`form-control textarea-control ${o} ${s} ${i}`,id:this.textareaId,"aria-disabled":this.disabled?"true":null,"aria-labelledby":r,disabled:this.disabled,autoCapitalize:this.autocapitalize,autoFocus:this.autofocus,enterKeyHint:this.enterkeyhint,inputMode:this.inputmode,maxLength:this.maxlength,minLength:this.minlength,name:this.name,placeholder:this.placeholder,readOnly:this.readonly,required:this.required,value:a,spellcheck:this.spellcheck,cols:this.cols,rows:this.rows,wrap:this.wrap,onInput:this.onInput,onBlur:this.onBlur,onFocus:this.onFocus}),t("label",{class:"form-label",id:r,htmlFor:this.textareaId},this.label),this.error&&this.error!==""&&t("p",{class:"invalid-feedback"},this.error),this.helper&&this.helper!==""&&t("p",{class:"helper"},this.helper))}static get watchers(){return{value:["valueChanged"]}}};let i=0;s.style=o;export{s as road_textarea};
+//# sourceMappingURL=p-98cd42c5.entry.js.map

package/dist/roadtrip/p-98cd42c5.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["textareaCss","Textarea","this","onInput","ev","input","target","value","roadinput","emit","roadInput","onBlur","roadblur","roadBlur","onFocus","roadfocus","roadFocus","textareaIds","textareaId","valueChanged","roadchange","roadChange","getValue","render","labelId","hasValueClass","noResizeClass","resize","isInvalidClass","error","undefined","h","Host","disabled","class","sizes","id","autoCapitalize","autocapitalize","autoFocus","autofocus","enterKeyHint","enterkeyhint","inputMode","inputmode","maxLength","maxlength","minLength","minlength","name","placeholder","readOnly","readonly","required","spellcheck","cols","rows","wrap","htmlFor","label","helper"],"sources":["src/components/textarea/textarea.css?tag=road-textarea&encapsulation=scoped","src/components/textarea/textarea.tsx"],"sourcesContent":["/*\n * Textarea\n *\n * Index\n * - Input\n * - Textarea\n * - Label\n * - Sizes\n * - Error\n * - Helper\n */\n\n:host {\n  position: relative;\n  display: block;\n  margin-bottom: 1rem;\n  font-family: var(--road-font, sans-serif);\n  color: var(--road-on-surface);\n}\n\n/* INPUT\n -------------------- */\n\n.form-control {\n  box-sizing: border-box;\n  display: block;\n  width: 100%;\n  height: 3rem;\n  padding: 0.75rem 1rem 0;\n  margin: 0;\n  font-size: var(--road-body-medium);\n  color: var(--road-on-surface);\n  background: var(--road-surface);\n  border: 1px solid var(--road-input-outline);\n  border-radius: 0.25rem;\n  box-shadow: none;\n  appearance: none;\n}\n\n/**\n * Placeholder\n */\n\n.form-control::placeholder {\n  color: var(--road-on-surface-extra-weak);\n  opacity: 1;\n}\n\n/**\n * Hover state\n */\n\n@media (hover: hover) {\n\n  .form-control:not(:disabled):hover {\n    border-color: var(--road-input-outline-variant);\n  }\n}\n\n/**\n * Focus state\n */\n\n.form-control:focus ~ .form-label,\n.form-control[required]:valid ~ .form-label,\n.form-control.has-value ~ .form-label {\n  transform: scale(0.625) translateY(-0.625rem);\n}\n\n.form-control:placeholder-shown ~ .form-label {\n  transform: scale(0.625) translateY(-0.625rem);\n}\n\n/* stylelint-disable */\n\n/* IE FIX */\n\n.form-control:-ms-input-placeholder ~ .form-label {\n  transform: scale(0.625) translateY(-0.625rem);\n}\n/* stylelint-enable */\n\n.form-control:not(:disabled):focus {\n  border-color: var(--road-input-outline-variant);\n}\n\n/**\n * Disabled state\n */\n\n.form-control:disabled,\n.form-control[readonly] {\n  color: var(--road-on-surface-weak);\n  cursor: not-allowed;\n  background: var(--road-surface-disabled);\n  opacity: 1;\n}\n\n/* TEXTAREA\n -------------------- */\n\n.textarea-control {\n  height: auto;\n  padding-top: 1rem;\n  padding-bottom: 0.5rem;\n  line-height: 1.5;\n}\n\n.textarea-control.no-resize {\n  resize: none;\n}\n\n/* LABEL\n -------------------- */\n\n.form-label {\n  position: absolute;\n  top: 0.75rem;\n  left: 1rem;\n  display: block;\n  font-size: var(--road-body-medium);\n  line-height: 1.5;\n  color: var(--road-on-surface-weak);\n  pointer-events: none;\n  transition: transform 200ms cubic-bezier(0, 0, 0.2, 1) 0ms;\n  transform-origin: 0 0;\n}\n\n/* SIZES\n -------------------- */\n\n:host(.input-xl) {\n  --height: 3.5rem;\n}\n\n:host(.input-xl) .form-control {\n  padding: 1.5rem 1rem 0.5rem;\n}\n\n:host(.input-xl) .form-label {\n  top: 1rem;\n}\n\n:host(.input-xl) .form-control:focus ~ .form-label,\n:host(.input-xl) .form-control[required]:valid ~ .form-label,\n:host(.input-xl) .form-control.has-value ~ .form-label,\n:host(.input-xl) .form-control[type=\"date\"] ~ .form-label,\n:host(.input-xl) .form-control[type=\"time\"] ~ .form-label {\n  transform: scale(0.75) translateY(-0.625rem);\n}\n\n:host(.input-xl) .form-control:placeholder-shown ~ .form-label {\n  transform: scale(0.75) translateY(-0.625rem);\n}\n\n\n/* ERROR\n -------------------- */\n\n.invalid-feedback {\n  display: none;\n  width: 100%;\n  margin-top: 0.5rem;\n  font-size: var(--road-helper-medium);\n  color: var(--road-on-danger-surface);\n}\n\n.form-control.is-invalid,\n.was-validated .form-control:invalid {\n  border-color: var(--road-danger-outline);\n}\n\n.form-control.is-invalid ~ .invalid-feedback,\n.was-validated .form-control:invalid ~ .invalid-feedback {\n  display: block;\n}\n\n/* HELPER\n -------------------- */\n\n.helper {\n  margin-top: 0.5rem;\n  font-size: var(--road-helper-medium);\n  color: var(--road-on-surface-weak);\n}\n","import { Component, Event, EventEmitter, Host, Prop, Watch, h } from '@stencil/core';\n\n@Component({\n  tag: 'road-textarea',\n  styleUrl: 'textarea.css',\n  scoped: true,\n})\nexport class Textarea {\n\n  /**\n   * The id of textarea\n   */\n  @Prop() textareaId: string = `road-textarea-${textareaIds++}`;\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: string = 'none';\n\n  /**\n   * This Boolean attribute lets you specify that a form control should have focus when the page loads.\n   */\n  @Prop() autofocus: boolean = false;\n\n  /**\n   * If `true`, the user cannot interact with the textarea.\n   */\n  @Prop() disabled: boolean = false;\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   * 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   * 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   * 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.textareaId;\n\n  /**\n   * Instructional text that shows before the textarea has a value.\n   */\n  @Prop() placeholder?: string;\n\n  /**\n   * The sizes of the input.\n   */\n   @Prop() sizes: 'lg' | 'xl' = 'lg';\n\n  /**\n   * If `true`, the user cannot modify the value.\n   */\n  @Prop() readonly: boolean = false;\n\n  /**\n   * If `true`, the user must fill in a value before submitting a form.\n   */\n  @Prop() required: boolean = false;\n\n  /**\n   * If `true`, the element will have its spelling and grammar checked.\n   */\n  @Prop() spellcheck: boolean = false;\n\n    /**\n   * If `false`, to disabled resize.\n   */\n    @Prop() resize: boolean = true;\n\n  /**\n   * The visible width of the text control, in average character widths. If it is specified, it must be a positive integer.\n   */\n  @Prop() cols?: number;\n\n  /**\n   * The number of rows of the control.\n   */\n  @Prop() rows?: number;\n\n  /**\n   * Indicates how the control wraps text.\n   */\n  @Prop() wrap?: 'hard' | 'soft' | 'off';\n\n  /**\n   * The value of the textarea.\n   */\n  @Prop({ mutable: true }) value?: string | null = '';\n\n  /**\n   * Label for the field\n   */\n  @Prop() label: string = `${this.textareaId}-label`;\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   * Update the native textarea element when the value changes\n   */\n  @Watch('value')\n  protected valueChanged() {\n    this.roadchange.emit({ value: this.value });\n    this.roadChange.emit({ value: this.value });\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 textarea loses focus.\n   */\n  @Event() roadblur!: EventEmitter<void>;\n  /** @internal */\n  @Event() roadBlur!: EventEmitter<void>;\n\n  /**\n   * Emitted when the textarea has focus.\n   */\n  @Event() roadfocus!: EventEmitter<void>;\n  /** @internal */\n  @Event() roadFocus!: EventEmitter<void>;\n\n  private getValue(): string {\n    return this.value || '';\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  render() {\n    const value = this.getValue();\n    const labelId = this.textareaId + '-label';\n    const hasValueClass = this.value !== '' ? 'has-value' : '';\n    const noResizeClass = this.resize == false ? 'no-resize' : '';\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        <textarea\n          class={`form-control textarea-control ${hasValueClass} ${noResizeClass} ${isInvalidClass}`}\n          id={this.textareaId}\n          aria-disabled={this.disabled ? 'true' : null}\n          aria-labelledby={labelId}\n          disabled={this.disabled}\n          autoCapitalize={this.autocapitalize}\n          autoFocus={this.autofocus}\n          enterKeyHint={this.enterkeyhint}\n          inputMode={this.inputmode}\n          maxLength={this.maxlength}\n          minLength={this.minlength}\n          name={this.name}\n          placeholder={this.placeholder}\n          readOnly={this.readonly}\n          required={this.required}\n          value={value}\n          spellcheck={this.spellcheck}\n          cols={this.cols}\n          rows={this.rows}\n          wrap={this.wrap}\n          onInput={this.onInput}\n          onBlur={this.onBlur}\n          onFocus={this.onFocus}\n        >\n        </textarea>\n        <label class=\"form-label\" id={labelId} htmlFor={this.textareaId}>{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      </Host>\n    );\n  }\n\n}\n\nlet textareaIds = 0;\n"],"mappings":"yDAAA,MAAMA,EAAc,q0G,MCOPC,EAAQ,M,iUAgKXC,KAAAC,QAAWC,IACjB,MAAMC,EAAQD,EAAGE,OACjB,GAAID,EAAO,CACTH,KAAKK,MAAQF,EAAME,OAAS,E,CAE9BL,KAAKM,UAAUC,KAAKL,GACpBF,KAAKQ,UAAUD,KAAKL,EAAoB,EAGlCF,KAAAS,OAAS,KACfT,KAAKU,SAASH,OACdP,KAAKW,SAASJ,MAAM,EAGdP,KAAAY,QAAU,KAChBZ,KAAKa,UAAUN,OACfP,KAAKc,UAAUP,MAAM,E,gBA3KM,iBAAiBQ,M,oBAKb,O,eAKJ,M,cAKD,M,iHA4BLf,KAAKgB,W,sCAUE,K,cAKF,M,cAKA,M,gBAKE,M,YAKF,K,uEAoBqB,G,WAKzB,GAAGhB,KAAKgB,mB,2CAgBtB,YAAAC,GACRjB,KAAKkB,WAAWX,KAAK,CAAEF,MAAOL,KAAKK,QACnCL,KAAKmB,WAAWZ,KAAK,CAAEF,MAAOL,KAAKK,O,CAmC7B,QAAAe,GACN,OAAOpB,KAAKK,OAAS,E,CAsBvB,MAAAgB,GACE,MAAMhB,EAAQL,KAAKoB,WACnB,MAAME,EAAUtB,KAAKgB,WAAa,SAClC,MAAMO,EAAgBvB,KAAKK,QAAU,GAAK,YAAc,GACxD,MAAMmB,EAAgBxB,KAAKyB,QAAU,MAAQ,YAAc,GAC3D,MAAMC,EAAiB1B,KAAK2B,QAAUC,WAAa5B,KAAK2B,QAAU,GAAK,aAAe,GAEtF,OACEE,EAACC,EAAI,iBAAgB9B,KAAK+B,SAAW,OAAS,KAAMC,MAAOhC,KAAKiC,OAAS,SAASjC,KAAKiC,SACrFJ,EAAA,YACEG,MAAO,iCAAiCT,KAAiBC,KAAiBE,IAC1EQ,GAAIlC,KAAKgB,WAAU,gBACJhB,KAAK+B,SAAW,OAAS,KAAI,kBAC3BT,EACjBS,SAAU/B,KAAK+B,SACfI,eAAgBnC,KAAKoC,eACrBC,UAAWrC,KAAKsC,UAChBC,aAAcvC,KAAKwC,aACnBC,UAAWzC,KAAK0C,UAChBC,UAAW3C,KAAK4C,UAChBC,UAAW7C,KAAK8C,UAChBC,KAAM/C,KAAK+C,KACXC,YAAahD,KAAKgD,YAClBC,SAAUjD,KAAKkD,SACfC,SAAUnD,KAAKmD,SACf9C,MAAOA,EACP+C,WAAYpD,KAAKoD,WACjBC,KAAMrD,KAAKqD,KACXC,KAAMtD,KAAKsD,KACXC,KAAMvD,KAAKuD,KACXtD,QAASD,KAAKC,QACdQ,OAAQT,KAAKS,OACbG,QAASZ,KAAKY,UAGhBiB,EAAA,SAAOG,MAAM,aAAaE,GAAIZ,EAASkC,QAASxD,KAAKgB,YAAahB,KAAKyD,OACtEzD,KAAK2B,OAAS3B,KAAK2B,QAAU,IAAME,EAAA,KAAGG,MAAM,oBAAoBhC,KAAK2B,OACrE3B,KAAK0D,QAAU1D,KAAK0D,SAAW,IAAM7B,EAAA,KAAGG,MAAM,UAAUhC,KAAK0D,Q,wDAOtE,IAAI3C,EAAc,E"}

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

@@ -0,0 +1,2 @@
+import{r as t,c as e,h as o,H as a}from"./p-f3d586b3.js";import"./p-1ccae339.js";const i=":host{--z-index:3;position:fixed;bottom:0;left:0;z-index:var(--z-index);box-sizing:border-box;display:flex;align-items:center;width:100%;height:5.125rem;padding-left:0;margin:0;text-align:center;-webkit-user-select:none;user-select:none;background-color:var(--road-surface);border-top:1px solid var(--road-outline-weak)}@media (max-width: 576px){:host{overflow-x:auto}}@media (min-width: 1200px){:host{bottom:auto;flex-direction:column;width:104px;height:100%;border-top:0;border-right:1px solid var(--road-outline-weak)}}::slotted(.drawer-button-save){position:absolute;bottom:0;width:100%}";const r=class{constructor(o){t(this,o);this.roadnavbarchanged=e(this,"roadnavbarchanged",7);this.roadNavbarChanged=e(this,"roadNavbarChanged",7);this.selectedTab=undefined}selectedTabChanged(){if(this.selectedTab!==undefined){this.roadnavbarchanged.emit({tab:this.selectedTab});this.roadNavbarChanged.emit({tab:this.selectedTab})}}onNavbarChanged(t){this.selectedTab=t.detail.tab}componentWillLoad(){this.selectedTabChanged()}render(){return o(a,{role:"menubar"},o("slot",null))}static get watchers(){return{selectedTab:["selectedTabChanged"]}}};r.style=i;export{r as road_navbar};
+//# sourceMappingURL=p-a0cde368.entry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["navbarCss","Navbar","selectedTabChanged","this","selectedTab","undefined","roadnavbarchanged","emit","tab","roadNavbarChanged","onNavbarChanged","ev","detail","componentWillLoad","render","h","Host","role"],"sources":["src/components/navbar/navbar.css?tag=road-navbar&encapsulation=shadow","src/components/navbar/navbar.tsx"],"sourcesContent":["/*\n * Navbar\n *\n */\n\n/**\n * @prop --z-index: The z-index of the Navbar.\n */\n\n:host {\n  --z-index: 3;\n\n  position: fixed;\n  bottom: 0;\n  left: 0;\n  z-index: var(--z-index);\n  box-sizing: border-box;\n  display: flex;\n  align-items: center;\n  width: 100%;\n  height: 5.125rem;\n  padding-left: 0;\n  margin: 0;\n  text-align: center;\n  user-select: none;\n  background-color: var(--road-surface);\n  border-top: 1px solid var(--road-outline-weak);\n}\n\n@media (max-width: 576px) {\n\n  :host {\n    overflow-x: auto;\n  }\n}\n\n@media (min-width: 1200px) {\n\n  :host {\n    bottom: auto;\n    flex-direction: column;\n    width: 104px;\n    height: 100%;\n    border-top: 0;\n    border-right: 1px solid var(--road-outline-weak);\n  }\n}\n\n/**\n * Button save drawer.\n */\n\n::slotted(.drawer-button-save) {\n  position: absolute;\n  bottom: 0;\n  width: 100%;\n}\n","import { Component, Host, h, Prop, Watch, Event, EventEmitter, Listen } from '@stencil/core';\nimport './../../utils/polyfill';\n\n/**\n * @slot  - Content of the navbar, it should be road-navbar-item elements. Max 5 items on Mobile\n */\n\n@Component({\n  tag: 'road-navbar',\n  styleUrl: 'navbar.css',\n  shadow: true,\n})\nexport class Navbar {\n\n  /**\n   * The selected tab component\n   */\n  @Prop() selectedTab?: string;\n  @Watch('selectedTab')\n  selectedTabChanged() {\n    if (this.selectedTab !== undefined) {\n      this.roadnavbarchanged.emit({\n        tab: this.selectedTab,\n      });\n      this.roadNavbarChanged.emit({\n        tab: this.selectedTab,\n      });\n    }\n  }\n\n  /** @internal */\n  @Event() roadnavbarchanged!: EventEmitter;\n  /** @internal */\n  @Event() roadNavbarChanged!: EventEmitter;\n\n  @Listen('roadNavbarItemClick')\n  @Listen('roadnavbaritemclick')\n  onNavbarChanged(ev: CustomEvent) {\n    this.selectedTab = ev.detail.tab;\n  }\n\n  componentWillLoad() {\n    this.selectedTabChanged();\n  }\n\n  render() {\n    return (\n      <Host\n        role=\"menubar\"\n      >\n        <slot/>\n      </Host>\n    );\n  }\n\n}\n"],"mappings":"iFAAA,MAAMA,EAAY,klB,MCYLC,EAAM,M,8JAOjB,kBAAAC,GACE,GAAIC,KAAKC,cAAgBC,UAAW,CAClCF,KAAKG,kBAAkBC,KAAK,CAC1BC,IAAKL,KAAKC,cAEZD,KAAKM,kBAAkBF,KAAK,CAC1BC,IAAKL,KAAKC,a,EAYhB,eAAAM,CAAgBC,GACdR,KAAKC,YAAcO,EAAGC,OAAOJ,G,CAG/B,iBAAAK,GACEV,KAAKD,oB,CAGP,MAAAY,GACE,OACEC,EAACC,EAAI,CACHC,KAAK,WAELF,EAAA,a"}

package/dist/roadtrip/{p-5829857c.entry.js → p-a77727f2.entry.js}

@@ -1,2 +1,2 @@
-import{r as t,h as o,H as i,a}from"./p-f3d586b3.js";const s=':host{--max-width:100%;--z-index:1;--width:max-content;position:relative;display:inline-block}:host(:hover){cursor:pointer}:host([trigger="hover"]) .tooltip{display:none}@media (min-width: 1200px){:host([trigger="hover"]) .tooltip{display:block}}.tooltip{position:absolute;top:-0.5rem;left:50%;z-index:1;width:var(--width);min-width:6rem;max-width:var(--max-width);padding:0.5rem;font-family:var(--road-font);font-size:var(--road-body-small);color:var(--road-on-surface);text-align:center;pointer-events:none;background:var(--road-surface);border:1px solid var(--road-outline-weak);border-radius:0.25rem;box-shadow:var(--road-elevation-low);opacity:0;transition:opacity 0.2s ease-in-out, transform 0.2s ease-in-out;transform:translateX(-50%) translateY(-100%)}:host([contentalign="left"]) .tooltip{text-align:left}.tooltip.tooltip-text-left::after{text-align:left}.tooltip-open{opacity:1}:host([data-tooltip-position="top"]) .tooltip{left:50%;transform:translateX(-50%) translateY(-70%)}:host([data-tooltip-position="top"]) .tooltip-open{left:50%;transform:translateX(-50%) translateY(-100%)}:host([data-tooltip-position="top-left"]) .tooltip{left:0%;transform:translateY(-70%)}:host([data-tooltip-position="top-left"]) .tooltip-open{transform:translateY(-100%)}:host([data-tooltip-position="top-right"]) .tooltip{left:50%;transform:translateY(-70%)}:host([data-tooltip-position="top-right"]) .tooltip-open{left:100%;transform:translateY(-100%)}:host([data-tooltip-position="left"]) .tooltip{top:50%;left:0%;margin-right:0.5rem;transform:translateX(-94%) translateY(-55%)}:host([data-tooltip-position="left"]) .tooltip-open{transform:translateX(-103%) translateY(-55%)}:host([data-tooltip-position="bottom"]) .tooltip{top:100%;left:50%;margin-top:0.5rem;transform:translateX(-50%) translateY(-40%)}:host([data-tooltip-position="bottom"]) .tooltip-open{transform:translateX(-50%) translateY(-6%)}:host([data-tooltip-position="bottom-left"]) .tooltip{top:100%;left:0;margin-top:0.5rem;transform:translateY(-40%)}:host([data-tooltip-position="bottom-left"]) .tooltip-open{transform:translateY(-6%)}:host([data-tooltip-position="bottom-right"]) .tooltip{top:100%;left:100%;margin-top:0.5rem;transform:translateY(-40%)}:host([data-tooltip-position="bottom-right"]) .tooltip-open{transform:translateY(-6%)}:host([data-tooltip-position="right"]) .tooltip{top:50%;left:100%;margin-left:0.5rem;transform:translateX(-14%) translateY(-55%)}:host([data-tooltip-position="right"]) .tooltip-open{transform:translateX(-4%) translateY(-55%)}';const r=class{constructor(o){t(this,o);this.onClick=()=>{if(this.hasTrigger("click")){this.isOpen?this.close():this.open()}};this.onMouseOver=()=>{if(this.hasTrigger("hover")){this.open()}};this.onMouseOut=()=>{if(this.hasTrigger("hover")){this.close()}};this.onFocus=()=>{if(this.hasTrigger("focus")||this.hasTrigger("hover")){this.open()}};this.onBlur=()=>{if(this.hasTrigger("focus")||this.hasTrigger("hover")){this.close()}};this.tooltipId=`road-tooltip-${++e}`;this.content="";this.position="top";this.contentAlign="center";this.isOpen=false;this.trigger="hover"}async open(){this.isOpen=true}async close(){this.isOpen=false}hasTrigger(t){const o=this.trigger.split(" ");return o.includes(t)}render(){return o(i,{onMouseOver:this.onMouseOver,onMouseOut:this.onMouseOut,onClick:this.onClick,onFocus:this.onFocus,onBlur:this.onBlur,tabindex:"0","data-tooltip-position":this.position},o("slot",{"aria-describedby":this.tooltipId}),o("div",{part:"tooltip",id:this.tooltipId,class:{tooltip:true,"tooltip-open":this.isOpen},role:"tooltip","aria-hidden":!this.isOpen?"true":"false"},this.content,o("slot",{name:"tooltip-content"})))}get el(){return a(this)}};let e=0;r.style=s;export{r as road_tooltip};
-//# sourceMappingURL=p-5829857c.entry.js.map
+import{r as t,h as o,H as i,a}from"./p-f3d586b3.js";const s=':host{--max-width:85vw;--z-index:1;--width:max-content;position:relative;display:inline-block}:host(:hover){cursor:pointer}:host([trigger="hover"]) .tooltip{display:none}@media (min-width: 1200px){:host([trigger="hover"]) .tooltip{display:block}}.tooltip{position:absolute;top:-0.5rem;left:50%;z-index:1;width:var(--width);min-width:100%;max-width:var(--max-width);padding:0.5rem;font-family:var(--road-font);font-size:var(--road-body-small);color:var(--road-on-surface);text-align:center;pointer-events:none;background:var(--road-surface);border:1px solid var(--road-outline-weak);border-radius:0.25rem;box-shadow:var(--road-elevation-low);opacity:0;transition:opacity 0.2s ease-in-out, transform 0.2s ease-in-out;transform:translateX(-50%) translateY(-100%)}:host([contentalign="left"]) .tooltip{text-align:left}.tooltip.tooltip-text-left::after{text-align:left}.tooltip-open{opacity:1}:host([data-tooltip-position="top"]) .tooltip{left:50%;transform:translateX(-50%) translateY(-70%)}:host([data-tooltip-position="top"]) .tooltip-open{left:50%;transform:translateX(-50%) translateY(-100%)}:host([data-tooltip-position="top-left"]) .tooltip{left:0%;transform:translateY(-70%)}:host([data-tooltip-position="top-left"]) .tooltip-open{transform:translateY(-100%)}:host([data-tooltip-position="top-right"]) .tooltip{left:50%;transform:translateY(-70%)}:host([data-tooltip-position="top-right"]) .tooltip-open{left:100%;transform:translateY(-100%)}:host([data-tooltip-position="left"]) .tooltip{top:50%;left:0%;margin-right:0.5rem;transform:translateX(-94%) translateY(-55%)}:host([data-tooltip-position="left"]) .tooltip-open{transform:translateX(-103%) translateY(-55%)}:host([data-tooltip-position="bottom"]) .tooltip{top:100%;left:50%;margin-top:0.5rem;transform:translateX(-50%) translateY(-40%)}:host([data-tooltip-position="bottom"]) .tooltip-open{transform:translateX(-50%) translateY(-6%)}:host([data-tooltip-position="bottom-left"]) .tooltip{top:100%;left:0;margin-top:0.5rem;transform:translateY(-40%)}:host([data-tooltip-position="bottom-left"]) .tooltip-open{transform:translateY(-6%)}:host([data-tooltip-position="bottom-right"]) .tooltip{top:100%;left:100%;margin-top:0.5rem;transform:translateY(-40%)}:host([data-tooltip-position="bottom-right"]) .tooltip-open{transform:translateY(-6%)}:host([data-tooltip-position="right"]) .tooltip{top:50%;left:100%;margin-left:0.5rem;transform:translateX(-14%) translateY(-55%)}:host([data-tooltip-position="right"]) .tooltip-open{transform:translateX(-4%) translateY(-55%)}';const r=class{constructor(o){t(this,o);this.onClick=()=>{if(this.hasTrigger("click")){this.isOpen?this.close():this.open()}};this.onMouseOver=()=>{if(this.hasTrigger("hover")){this.open()}};this.onMouseOut=()=>{if(this.hasTrigger("hover")){this.close()}};this.onFocus=()=>{if(this.hasTrigger("focus")||this.hasTrigger("hover")){this.open()}};this.onBlur=()=>{if(this.hasTrigger("focus")||this.hasTrigger("hover")){this.close()}};this.tooltipId=`road-tooltip-${++e}`;this.content="";this.position="top";this.contentAlign="center";this.isOpen=false;this.trigger="hover"}async open(){this.isOpen=true}async close(){this.isOpen=false}hasTrigger(t){const o=this.trigger.split(" ");return o.includes(t)}render(){return o(i,{onMouseOver:this.onMouseOver,onMouseOut:this.onMouseOut,onClick:this.onClick,onFocus:this.onFocus,onBlur:this.onBlur,tabindex:"0","data-tooltip-position":this.position},o("slot",{"aria-describedby":this.tooltipId}),o("div",{part:"tooltip",id:this.tooltipId,class:{tooltip:true,"tooltip-open":this.isOpen},role:"tooltip","aria-hidden":!this.isOpen?"true":"false"},this.content,o("slot",{name:"tooltip-content"})))}get el(){return a(this)}};let e=0;r.style=s;export{r as road_tooltip};
+//# sourceMappingURL=p-a77727f2.entry.js.map

package/dist/roadtrip/{p-5829857c.entry.js.map → p-a77727f2.entry.js.map}

@@ -1 +1 @@
-{"version":3,"names":["tooltipCss","Tooltip","this","onClick","hasTrigger","isOpen","close","open","onMouseOver","onMouseOut","onFocus","onBlur","tooltipIds","triggerType","triggers","trigger","split","includes","render","h","Host","tabindex","position","tooltipId","part","id","class","tooltip","role","content","name"],"sources":["src/components/tooltip/tooltip.css?tag=road-tooltip&encapsulation=shadow","src/components/tooltip/tooltip.tsx"],"sourcesContent":["/*\n * Tooltip\n *\n * Index\n * - Tooltip\n * - Position\n */\n\n/**\n * @prop --max-width: The maximum width of the tooltip.\n * @prop --z-index: The z-index of the tooltip.\n * @prop --width: width of the tooltip.\n */\n\n/* TOOLTIP\n -------------------- */\n\n:host {\n  --max-width: 100%;\n  --z-index: 1;\n  --width: max-content;\n\n  position: relative;\n  display: inline-block;\n}\n\n:host(:hover) {\n  cursor: pointer;\n}\n\n\n:host([trigger=\"hover\"]) .tooltip {\n  display: none;\n}\n\n@media (min-width: 1200px) {\n\n  :host([trigger=\"hover\"]) .tooltip {\n    display: block;\n  }\n}\n\n.tooltip {\n  position: absolute;\n  top: -0.5rem;\n  left: 50%;\n  z-index: 1;\n  width: var(--width);\n  min-width: 6rem;\n  max-width: var(--max-width);\n  padding: 0.5rem;\n  font-family: var(--road-font);\n  font-size: var(--road-body-small);\n  color: var(--road-on-surface);\n  text-align: center;\n  pointer-events: none;\n  background: var(--road-surface);\n  border: 1px solid var(--road-outline-weak);\n  border-radius: 0.25rem;\n  box-shadow: var(--road-elevation-low);\n  opacity: 0;\n  transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out;\n  transform: translateX(-50%) translateY(-100%);\n}\n\n:host([contentalign=\"left\"]) .tooltip {\n  text-align: left;\n}\n\n.tooltip.tooltip-text-left::after {\n  text-align: left;\n}\n\n.tooltip-open {\n  opacity: 1;\n}\n\n/* POSITION\n -------------------- */\n\n/**\n * Top\n */\n\n:host([data-tooltip-position=\"top\"]) .tooltip {\n  left: 50%;\n  transform: translateX(-50%) translateY(-70%);\n}\n\n:host([data-tooltip-position=\"top\"]) .tooltip-open {\n  left: 50%;\n  transform: translateX(-50%) translateY(-100%);\n}\n\n/**\n * Top Left\n */\n\n:host([data-tooltip-position=\"top-left\"]) .tooltip {\n  left: 0%;\n  transform: translateY(-70%);\n}\n\n:host([data-tooltip-position=\"top-left\"]) .tooltip-open {\n  transform: translateY(-100%);\n}\n\n/**\n * Top Right\n */\n\n:host([data-tooltip-position=\"top-right\"]) .tooltip {\n  left: 50%;\n  transform: translateY(-70%);\n}\n\n:host([data-tooltip-position=\"top-right\"]) .tooltip-open {\n  left: 100%;\n  transform: translateY(-100%);\n}\n\n/**\n * Left\n */\n\n:host([data-tooltip-position=\"left\"]) .tooltip {\n  top: 50%;\n  left: 0%;\n  margin-right: 0.5rem;\n  transform: translateX(-94%) translateY(-55%);\n}\n\n:host([data-tooltip-position=\"left\"]) .tooltip-open {\n  transform: translateX(-103%) translateY(-55%);\n}\n\n/**\n * Bottom\n */\n\n:host([data-tooltip-position=\"bottom\"]) .tooltip {\n  top: 100%;\n  left: 50%;\n  margin-top: 0.5rem;\n  transform: translateX(-50%) translateY(-40%);\n}\n\n:host([data-tooltip-position=\"bottom\"]) .tooltip-open {\n  transform: translateX(-50%) translateY(-6%);\n}\n\n/**\n * Bottom Left\n */\n\n:host([data-tooltip-position=\"bottom-left\"]) .tooltip {\n  top: 100%;\n  left: 0;\n  margin-top: 0.5rem;\n  transform: translateY(-40%);\n}\n\n:host([data-tooltip-position=\"bottom-left\"]) .tooltip-open {\n  transform: translateY(-6%);\n}\n\n/**\n * Bottom Right\n */\n\n:host([data-tooltip-position=\"bottom-right\"]) .tooltip {\n  top: 100%;\n  left: 100%;\n  margin-top: 0.5rem;\n  transform: translateY(-40%);\n}\n\n:host([data-tooltip-position=\"bottom-right\"]) .tooltip-open {\n  transform: translateY(-6%);\n}\n\n/**\n * Right\n */\n\n:host([data-tooltip-position=\"right\"]) .tooltip {\n  top: 50%;\n  left: 100%;\n  margin-left: 0.5rem;\n  transform: translateX(-14%) translateY(-55%);\n}\n\n:host([data-tooltip-position=\"right\"]) .tooltip-open {\n  transform: translateX(-4%) translateY(-55%);\n}\n","import { Component, Host, h, Prop, Method, Element } from '@stencil/core';\n\n/**\n * @slot tooltip-content - content of the tooltip, if you need to add html content, use this slot, otherwise use directly the content prop.\n *\n * @part tooltip - tooltip container\n */\n\n@Component({\n  tag: 'road-tooltip',\n  styleUrl: 'tooltip.css',\n  shadow: true,\n})\nexport class Tooltip {\n\n  @Element() el!: HTMLRoadTooltipElement;\n\n  /**\n   * The id of tooltip\n   */\n  @Prop() tooltipId: string = `road-tooltip-${++tooltipIds}`;\n\n  /**\n   * The tooltip's content.\n   */\n  @Prop() content = '';\n\n  /**\n   * The position of the tooltip.\n   */\n  @Prop() position:\n    | 'top'\n    | 'right'\n    | 'bottom'\n    | 'top-left'\n    | 'top-right'\n    | 'bottom-left'\n    | 'bottom-right'\n    | 'left' = 'top';\n\n  /**\n   * The content align of the tooltip.\n   */\n  @Prop() contentAlign:\n    | 'center'\n    | 'left' = 'center';\n\n  /**\n   * Indicates whether or not the tooltip is open. You can use this or the open/close methods.\n   */\n  @Prop({ mutable: true }) isOpen = false;\n\n  /**\n   * Controls how the tooltip is activated. Possible options include `click`, `hover`, `focus`. Multiple\n   * options can be passed by separating them with a space. When manual is used, the tooltip must be activated\n   * programmatically.\n   */\n  @Prop() trigger: string = 'hover';\n\n  /**\n   * Open the tooltip.\n   */\n  @Method()\n  async open() {\n    this.isOpen = true;\n  }\n\n  /**\n   * Close the tooltip.\n   */\n  @Method()\n  async close() {\n    this.isOpen = false;\n  }\n\n  private onClick = () => {\n    if (this.hasTrigger('click')) {\n      this.isOpen ? this.close() : this.open();\n    }\n  };\n\n  private onMouseOver = () => {\n    if (this.hasTrigger('hover')) {\n      this.open();\n    }\n  };\n\n  private onMouseOut = () => {\n    if (this.hasTrigger('hover')) {\n      this.close();\n    }\n  };\n\n  private onFocus = () => {\n    if (this.hasTrigger('focus') || this.hasTrigger('hover')) {\n      this.open();\n    }\n  };\n\n  private onBlur = () => {\n    if (this.hasTrigger('focus') || this.hasTrigger('hover')) {\n      this.close();\n    }\n  };\n\n  private hasTrigger(triggerType: string) {\n    const triggers = this.trigger.split(' ');\n    return triggers.includes(triggerType);\n  }\n\n  render() {\n    return (\n      <Host\n        onMouseOver={this.onMouseOver}\n        onMouseOut={this.onMouseOut}\n        onClick={this.onClick}\n        onFocus={this.onFocus}\n        onBlur={this.onBlur}\n        tabindex=\"0\"  // Makes the element focusable\n        data-tooltip-position={this.position}\n      >\n        <slot aria-describedby={this.tooltipId} />\n\n        <div\n          part=\"tooltip\"\n          id={this.tooltipId}\n          class={{\n            tooltip: true,\n            'tooltip-open': this.isOpen,\n          }}\n          role=\"tooltip\"\n          aria-hidden={!this.isOpen ? 'true' : 'false'}\n        >\n          {this.content}\n          <slot name=\"tooltip-content\" />\n        </div>\n      </Host>\n    );\n  }\n}\n\nlet tooltipIds = 0;\n"],"mappings":"oDAAA,MAAMA,EAAa,g+E,MCaNC,EAAO,M,yBA8DVC,KAAAC,QAAU,KAChB,GAAID,KAAKE,WAAW,SAAU,CAC5BF,KAAKG,OAASH,KAAKI,QAAUJ,KAAKK,M,GAI9BL,KAAAM,YAAc,KACpB,GAAIN,KAAKE,WAAW,SAAU,CAC5BF,KAAKK,M,GAIDL,KAAAO,WAAa,KACnB,GAAIP,KAAKE,WAAW,SAAU,CAC5BF,KAAKI,O,GAIDJ,KAAAQ,QAAU,KAChB,GAAIR,KAAKE,WAAW,UAAYF,KAAKE,WAAW,SAAU,CACxDF,KAAKK,M,GAIDL,KAAAS,OAAS,KACf,GAAIT,KAAKE,WAAW,UAAYF,KAAKE,WAAW,SAAU,CACxDF,KAAKI,O,kBAjFmB,kBAAkBM,I,aAK5B,G,cAaL,M,kBAOA,S,YAKqB,M,aAOR,O,CAM1B,UAAML,GACJL,KAAKG,OAAS,I,CAOhB,WAAMC,GACJJ,KAAKG,OAAS,K,CAiCR,UAAAD,CAAWS,GACjB,MAAMC,EAAWZ,KAAKa,QAAQC,MAAM,KACpC,OAAOF,EAASG,SAASJ,E,CAG3B,MAAAK,GACE,OACEC,EAACC,EAAI,CACHZ,YAAaN,KAAKM,YAClBC,WAAYP,KAAKO,WACjBN,QAASD,KAAKC,QACdO,QAASR,KAAKQ,QACdC,OAAQT,KAAKS,OACbU,SAAS,I,wBACcnB,KAAKoB,UAE5BH,EAAA,2BAAwBjB,KAAKqB,YAE7BJ,EAAA,OACEK,KAAK,UACLC,GAAIvB,KAAKqB,UACTG,MAAO,CACLC,QAAS,KACT,eAAgBzB,KAAKG,QAEvBuB,KAAK,UAAS,eACA1B,KAAKG,OAAS,OAAS,SAEpCH,KAAK2B,QACNV,EAAA,QAAMW,KAAK,qB,2BAOrB,IAAIlB,EAAa,E"}
+{"version":3,"names":["tooltipCss","Tooltip","this","onClick","hasTrigger","isOpen","close","open","onMouseOver","onMouseOut","onFocus","onBlur","tooltipIds","triggerType","triggers","trigger","split","includes","render","h","Host","tabindex","position","tooltipId","part","id","class","tooltip","role","content","name"],"sources":["src/components/tooltip/tooltip.css?tag=road-tooltip&encapsulation=shadow","src/components/tooltip/tooltip.tsx"],"sourcesContent":["/*\n * Tooltip\n *\n * Index\n * - Tooltip\n * - Position\n */\n\n/**\n * @prop --max-width: The maximum width of the tooltip.\n * @prop --z-index: The z-index of the tooltip.\n * @prop --width: width of the tooltip.\n */\n\n/* TOOLTIP\n -------------------- */\n\n:host {\n  --max-width: 85vw;\n  --z-index: 1;\n  --width: max-content;\n\n  position: relative;\n  display: inline-block;\n}\n\n:host(:hover) {\n  cursor: pointer;\n}\n\n\n:host([trigger=\"hover\"]) .tooltip {\n  display: none;\n}\n\n@media (min-width: 1200px) {\n\n  :host([trigger=\"hover\"]) .tooltip {\n    display: block;\n  }\n}\n\n.tooltip {\n  position: absolute;\n  top: -0.5rem;\n  left: 50%;\n  z-index: 1;\n  width: var(--width);\n  min-width: 100%;\n  max-width: var(--max-width);\n  padding: 0.5rem;\n  font-family: var(--road-font);\n  font-size: var(--road-body-small);\n  color: var(--road-on-surface);\n  text-align: center;\n  pointer-events: none;\n  background: var(--road-surface);\n  border: 1px solid var(--road-outline-weak);\n  border-radius: 0.25rem;\n  box-shadow: var(--road-elevation-low);\n  opacity: 0;\n  transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out;\n  transform: translateX(-50%) translateY(-100%);\n}\n\n:host([contentalign=\"left\"]) .tooltip {\n  text-align: left;\n}\n\n.tooltip.tooltip-text-left::after {\n  text-align: left;\n}\n\n.tooltip-open {\n  opacity: 1;\n}\n\n/* POSITION\n -------------------- */\n\n/**\n * Top\n */\n\n:host([data-tooltip-position=\"top\"]) .tooltip {\n  left: 50%;\n  transform: translateX(-50%) translateY(-70%);\n}\n\n:host([data-tooltip-position=\"top\"]) .tooltip-open {\n  left: 50%;\n  transform: translateX(-50%) translateY(-100%);\n}\n\n/**\n * Top Left\n */\n\n:host([data-tooltip-position=\"top-left\"]) .tooltip {\n  left: 0%;\n  transform: translateY(-70%);\n}\n\n:host([data-tooltip-position=\"top-left\"]) .tooltip-open {\n  transform: translateY(-100%);\n}\n\n/**\n * Top Right\n */\n\n:host([data-tooltip-position=\"top-right\"]) .tooltip {\n  left: 50%;\n  transform: translateY(-70%);\n}\n\n:host([data-tooltip-position=\"top-right\"]) .tooltip-open {\n  left: 100%;\n  transform: translateY(-100%);\n}\n\n/**\n * Left\n */\n\n:host([data-tooltip-position=\"left\"]) .tooltip {\n  top: 50%;\n  left: 0%;\n  margin-right: 0.5rem;\n  transform: translateX(-94%) translateY(-55%);\n}\n\n:host([data-tooltip-position=\"left\"]) .tooltip-open {\n  transform: translateX(-103%) translateY(-55%);\n}\n\n/**\n * Bottom\n */\n\n:host([data-tooltip-position=\"bottom\"]) .tooltip {\n  top: 100%;\n  left: 50%;\n  margin-top: 0.5rem;\n  transform: translateX(-50%) translateY(-40%);\n}\n\n:host([data-tooltip-position=\"bottom\"]) .tooltip-open {\n  transform: translateX(-50%) translateY(-6%);\n}\n\n/**\n * Bottom Left\n */\n\n:host([data-tooltip-position=\"bottom-left\"]) .tooltip {\n  top: 100%;\n  left: 0;\n  margin-top: 0.5rem;\n  transform: translateY(-40%);\n}\n\n:host([data-tooltip-position=\"bottom-left\"]) .tooltip-open {\n  transform: translateY(-6%);\n}\n\n/**\n * Bottom Right\n */\n\n:host([data-tooltip-position=\"bottom-right\"]) .tooltip {\n  top: 100%;\n  left: 100%;\n  margin-top: 0.5rem;\n  transform: translateY(-40%);\n}\n\n:host([data-tooltip-position=\"bottom-right\"]) .tooltip-open {\n  transform: translateY(-6%);\n}\n\n/**\n * Right\n */\n\n:host([data-tooltip-position=\"right\"]) .tooltip {\n  top: 50%;\n  left: 100%;\n  margin-left: 0.5rem;\n  transform: translateX(-14%) translateY(-55%);\n}\n\n:host([data-tooltip-position=\"right\"]) .tooltip-open {\n  transform: translateX(-4%) translateY(-55%);\n}\n","import { Component, Host, h, Prop, Method, Element } from '@stencil/core';\n\n/**\n * @slot tooltip-content - content of the tooltip, if you need to add html content, use this slot, otherwise use directly the content prop.\n *\n * @part tooltip - tooltip container\n */\n\n@Component({\n  tag: 'road-tooltip',\n  styleUrl: 'tooltip.css',\n  shadow: true,\n})\nexport class Tooltip {\n\n  @Element() el!: HTMLRoadTooltipElement;\n\n  /**\n   * The id of tooltip\n   */\n  @Prop() tooltipId: string = `road-tooltip-${++tooltipIds}`;\n\n  /**\n   * The tooltip's content.\n   */\n  @Prop() content = '';\n\n  /**\n   * The position of the tooltip.\n   */\n  @Prop() position:\n    | 'top'\n    | 'right'\n    | 'bottom'\n    | 'top-left'\n    | 'top-right'\n    | 'bottom-left'\n    | 'bottom-right'\n    | 'left' = 'top';\n\n  /**\n   * The content align of the tooltip.\n   */\n  @Prop() contentAlign:\n    | 'center'\n    | 'left' = 'center';\n\n  /**\n   * Indicates whether or not the tooltip is open. You can use this or the open/close methods.\n   */\n  @Prop({ mutable: true }) isOpen = false;\n\n  /**\n   * Controls how the tooltip is activated. Possible options include `click`, `hover`, `focus`. Multiple\n   * options can be passed by separating them with a space. When manual is used, the tooltip must be activated\n   * programmatically.\n   */\n  @Prop() trigger: string = 'hover';\n\n  /**\n   * Open the tooltip.\n   */\n  @Method()\n  async open() {\n    this.isOpen = true;\n  }\n\n  /**\n   * Close the tooltip.\n   */\n  @Method()\n  async close() {\n    this.isOpen = false;\n  }\n\n  private onClick = () => {\n    if (this.hasTrigger('click')) {\n      this.isOpen ? this.close() : this.open();\n    }\n  };\n\n  private onMouseOver = () => {\n    if (this.hasTrigger('hover')) {\n      this.open();\n    }\n  };\n\n  private onMouseOut = () => {\n    if (this.hasTrigger('hover')) {\n      this.close();\n    }\n  };\n\n  private onFocus = () => {\n    if (this.hasTrigger('focus') || this.hasTrigger('hover')) {\n      this.open();\n    }\n  };\n\n  private onBlur = () => {\n    if (this.hasTrigger('focus') || this.hasTrigger('hover')) {\n      this.close();\n    }\n  };\n\n  private hasTrigger(triggerType: string) {\n    const triggers = this.trigger.split(' ');\n    return triggers.includes(triggerType);\n  }\n\n  render() {\n    return (\n      <Host\n        onMouseOver={this.onMouseOver}\n        onMouseOut={this.onMouseOut}\n        onClick={this.onClick}\n        onFocus={this.onFocus}\n        onBlur={this.onBlur}\n        tabindex=\"0\"  // Makes the element focusable\n        data-tooltip-position={this.position}\n      >\n        <slot aria-describedby={this.tooltipId} />\n\n        <div\n          part=\"tooltip\"\n          id={this.tooltipId}\n          class={{\n            tooltip: true,\n            'tooltip-open': this.isOpen,\n          }}\n          role=\"tooltip\"\n          aria-hidden={!this.isOpen ? 'true' : 'false'}\n        >\n          {this.content}\n          <slot name=\"tooltip-content\" />\n        </div>\n      </Host>\n    );\n  }\n}\n\nlet tooltipIds = 0;\n"],"mappings":"oDAAA,MAAMA,EAAa,g+E,MCaNC,EAAO,M,yBA8DVC,KAAAC,QAAU,KAChB,GAAID,KAAKE,WAAW,SAAU,CAC5BF,KAAKG,OAASH,KAAKI,QAAUJ,KAAKK,M,GAI9BL,KAAAM,YAAc,KACpB,GAAIN,KAAKE,WAAW,SAAU,CAC5BF,KAAKK,M,GAIDL,KAAAO,WAAa,KACnB,GAAIP,KAAKE,WAAW,SAAU,CAC5BF,KAAKI,O,GAIDJ,KAAAQ,QAAU,KAChB,GAAIR,KAAKE,WAAW,UAAYF,KAAKE,WAAW,SAAU,CACxDF,KAAKK,M,GAIDL,KAAAS,OAAS,KACf,GAAIT,KAAKE,WAAW,UAAYF,KAAKE,WAAW,SAAU,CACxDF,KAAKI,O,kBAjFmB,kBAAkBM,I,aAK5B,G,cAaL,M,kBAOA,S,YAKqB,M,aAOR,O,CAM1B,UAAML,GACJL,KAAKG,OAAS,I,CAOhB,WAAMC,GACJJ,KAAKG,OAAS,K,CAiCR,UAAAD,CAAWS,GACjB,MAAMC,EAAWZ,KAAKa,QAAQC,MAAM,KACpC,OAAOF,EAASG,SAASJ,E,CAG3B,MAAAK,GACE,OACEC,EAACC,EAAI,CACHZ,YAAaN,KAAKM,YAClBC,WAAYP,KAAKO,WACjBN,QAASD,KAAKC,QACdO,QAASR,KAAKQ,QACdC,OAAQT,KAAKS,OACbU,SAAS,I,wBACcnB,KAAKoB,UAE5BH,EAAA,2BAAwBjB,KAAKqB,YAE7BJ,EAAA,OACEK,KAAK,UACLC,GAAIvB,KAAKqB,UACTG,MAAO,CACLC,QAAS,KACT,eAAgBzB,KAAKG,QAEvBuB,KAAK,UAAS,eACA1B,KAAKG,OAAS,OAAS,SAEpCH,KAAK2B,QACNV,EAAA,QAAMW,KAAK,qB,2BAOrB,IAAIlB,EAAa,E"}

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

@@ -0,0 +1,2 @@
+import{r as e,c as r,h as t}from"./p-f3d586b3.js";import{l as a}from"./p-ac7a8bca.js";const n=".sc-road-plate-number-h{display:block}.plate-number.sc-road-plate-number{--margin-bottom:0}.plate-number-start.sc-road-plate-number,.plate-number-end.sc-road-plate-number{width:1.75rem;height:calc(3rem - 0.25rem);background:var(--road-info-50)}.input-group-prepend.sc-road-plate-number{margin-right:-1px}.input-group-prepend.sc-road-plate-number,.input-group-append.sc-road-plate-number{padding:0}.plate-number-start.sc-road-plate-number{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0;margin-right:0;margin-left:1px;color:var(--road-icon-inverse);border-radius:0.125rem 0 0 0.125rem}.plate-number-icon.sc-road-plate-number{width:1.25rem;height:1.25rem;color:#f3db53}.plate-number-location.sc-road-plate-number{font-size:var(--road-button-medium);font-weight:700}.plate-number-end.sc-road-plate-number{margin-right:1px;border-radius:0 0.125rem 0.125rem 0}.plate-number-be.sc-road-plate-number .plate-number-input.sc-road-plate-number{color:var(--road-on-danger-surface)}.plate-number-be.sc-road-plate-number .plate-number-input.sc-road-plate-number,.plate-number-be.sc-road-plate-number .input-group-append.sc-road-plate-number,.plate-number-be.sc-road-plate-number .input-group-prepend.sc-road-plate-number{border-color:var(--road-danger-outline)}.plate-number-input.sc-road-plate-number{position:relative;display:block;height:3rem;margin:0;font-family:var(--road-font, sans-serif);font-size:var(--road-heading-04);font-weight:700;color:var(--road-on-surface);text-align:center;background:var(--road-surface);border:1px solid var(--road-input-outline);border-radius:0;box-shadow:none;appearance:none}.plate-number-input.sc-road-plate-number::placeholder{color:var(--road-on-surface-weak);opacity:1}.plate-number-input.sc-road-plate-number:disabled{color:var(--road-on-surface-disabled);cursor:not-allowed;background:var(--road-surface-disabled);opacity:1}.plate-number-input.sc-road-plate-number:disabled~.input-group-prepend.sc-road-plate-number,.plate-number-input.sc-road-plate-number:disabled~.input-group-append.sc-road-plate-number{cursor:not-allowed;background:var(--road-surface-disabled)}@media (hover: hover){.plate-number-input.sc-road-plate-number:not(:disabled):not([readonly]):hover{border-color:var(--road-input-outline-variant)}}.plate-number-input.sc-road-plate-number:not([readonly]):focus{outline:auto}.motorbike-plate.sc-road-plate-number .plate-number-input.sc-road-plate-number{height:6rem;padding:0.75rem 1rem 0;resize:none;border-left:0}.motorbike-plate.sc-road-plate-number .input-group-prepend.sc-road-plate-number,.motorbike-plate.sc-road-plate-number .input-group-append.sc-road-plate-number{align-items:flex-start;height:6rem;padding:0}.motorbike-plate.sc-road-plate-number .plate-number-start.sc-road-plate-number{margin-top:1px;border-radius:0.125rem 0 0}.motorbike-plate.sc-road-plate-number .plate-number-end.sc-road-plate-number{margin-top:1px;border-radius:0 0.125rem 0 0}";const o=class{constructor(t){e(this,t);this.roadinput=r(this,"roadinput",7);this.roadInput=r(this,"roadInput",7);this.roadchange=r(this,"roadchange",7);this.roadChange=r(this,"roadChange",7);this.roadblur=r(this,"roadblur",7);this.roadBlur=r(this,"roadBlur",7);this.roadfocus=r(this,"roadfocus",7);this.roadFocus=r(this,"roadFocus",7);this.countries=[{country:"FR",letter:"F",placeholder:"AT-857-YY"},{country:"BE",letter:"B",placeholder:"1-AAA-001"},{country:"IT",letter:"I",placeholder:"AT 814TX"},{country:"ES",letter:"E",placeholder:"9512 HVY"},{country:"PT",letter:"P",placeholder:"13 24 PZ"},{country:"PL",letter:"PL",placeholder:"GD 921KF"},{country:"AT",letter:"A",placeholder:"FF 10 FF"},{country:"DE",letter:"D",placeholder:"RA KL 8136"}];this.onInput=e=>{const r=e.target;if(r){r.value=r.value.toUpperCase()||""}this.roadinput.emit(e);this.roadInput.emit(e)};this.onBlur=()=>{this.roadblur.emit();this.roadBlur.emit()};this.onFocus=()=>{this.roadfocus.emit();this.roadFocus.emit()};this.country="FR";this.disabled=false;this.placeholder=undefined;this.readonly=false;this.value="";this.motorbike=undefined}valueChanged(){this.roadchange.emit({value:this.value==null?this.value:this.value.toString()});this.roadChange.emit({value:this.value==null?this.value:this.value.toString()})}getValue(){return typeof this.value==="number"?this.value.toString():(this.value||"").toString()}render(){const e=this.getValue();const r=this.motorbike?"motorbike-plate":"";return t("road-input-group",{class:`plate-number plate-number-${this.country.toLowerCase()} ${r}`},t("label",{slot:"prepend",class:"input-group-prepend"},t("div",{class:"plate-number-start"},t("road-icon",{class:"plate-number-icon",icon:a}),t("div",{class:"plate-number-location","aria-label":this.country,role:"img"},this.countries.filter((e=>e.country===this.country))[0].letter))),this.motorbike?t("textarea",{class:"form-control plate-number-input mb-0",disabled:this.disabled,placeholder:this.placeholder!=null?this.placeholder:this.countries.filter((e=>e.country===this.country))[0].placeholder,readOnly:this.readonly,maxlength:"9",rows:2,onInput:this.onInput,onBlur:this.onBlur,onFocus:this.onFocus}):t("input",{class:"plate-number-input mb-0",disabled:this.disabled,placeholder:this.placeholder!=null?this.placeholder:this.countries.filter((e=>e.country===this.country))[0].placeholder,readOnly:this.readonly,value:e,onInput:this.onInput,onBlur:this.onBlur,onFocus:this.onFocus}),t("label",{slot:"append",class:"input-group-append"},t("div",{class:"plate-number-end"})))}static get watchers(){return{value:["valueChanged"]}}};o.style=n;export{o as road_plate_number};
+//# sourceMappingURL=p-d9c73068.entry.js.map

package/dist/roadtrip/{p-0c4ae774.entry.js.map → p-d9c73068.entry.js.map}

@@ -1 +1 @@
-{"version":3,"names":["plateNumberCss","PlateNumber","this","countries","country","letter","placeholder","onInput","ev","input","target","value","toUpperCase","roadinput","emit","roadInput","onBlur","roadblur","roadBlur","onFocus","roadfocus","roadFocus","valueChanged","roadchange","toString","roadChange","getValue","render","motorbikeClass","motorbike","h","class","toLowerCase","slot","icon","licensePlateStarEu","role","filter","item","disabled","readOnly","readonly","maxlength","rows"],"sources":["src/components/plate-number/plate-number.css?tag=road-plate-number&encapsulation=scoped","src/components/plate-number/plate-number.tsx"],"sourcesContent":["/*\n * Plate Number\n *\n * Index\n * - Plate Number\n * - Input\n */\n\n/* PLATE NUMBER\n -------------------- */\n\n:host {\n  display: block;\n}\n\n.plate-number {\n  --margin-bottom: 0;\n}\n\n.plate-number-start,\n.plate-number-end {\n  width: 1.75rem;\n  height: calc(3rem - 0.25rem);\n  background: var(--road-info-50);\n}\n\n.input-group-prepend {\n  margin-right: -1px;\n}\n\n.input-group-prepend,\n.input-group-append {\n  padding: 0;\n}\n\n.plate-number-start {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  padding: 0;\n  margin-right: 0;\n  margin-left: 1px;\n  color: var(--road-icon-inverse);\n  border-radius: 0.125rem 0 0 0.125rem;\n}\n\n.plate-number-icon {\n  width: 1.25rem;\n  height: 1.25rem;\n  color: #f3db53;\n}\n\n.plate-number-location {\n  font-size: var(--road-button-medium);\n  font-weight: 700;\n}\n\n.plate-number-end {\n  margin-right: 1px;\n  border-radius: 0 0.125rem 0.125rem 0;\n}\n\n.plate-number-be .plate-number-input {\n  color: var(--road-on-danger-surface);\n}\n\n.plate-number-be .plate-number-input,\n.plate-number-be .input-group-append,\n.plate-number-be .input-group-prepend {\n  border-color: var(--road-danger-outline);\n}\n\n/* INPUT\n -------------------- */\n\n.plate-number-input {\n  position: relative;\n  display: block;\n  height: 3rem;\n  margin: 0;\n  font-family: var(--road-font, sans-serif);\n  font-size: var(--road-heading-04);\n  font-weight: 700;\n  color: var(--road-on-surface);\n  text-align: center;\n  background: var(--road-surface);\n  border: 1px solid var(--road-input-outline);\n  border-radius: 0;\n  outline: 0;\n  box-shadow: none;\n  appearance: none;\n}\n\n.plate-number-input::placeholder {\n  color: var(--road-on-surface-weak);\n  opacity: 1;\n}\n\n/**\n * Disabled state\n */\n\n.plate-number-input:disabled {\n  color: var(--road-on-surface-disabled);\n  cursor: not-allowed;\n  background: var(--road-surface-disabled);\n  opacity: 1;\n}\n\n.plate-number-input:disabled ~ .input-group-prepend,\n.plate-number-input:disabled ~ .input-group-append {\n  cursor: not-allowed;\n  background: var(--road-surface-disabled);\n}\n\n/**\n * Hover state\n */\n\n@media (hover: hover) {\n\n  .plate-number-input:not(:disabled):not([readonly]):hover {\n    border-color: var(--road-input-outline-variant);\n  }\n}\n\n/**\n * Focus state\n */\n\n.plate-number-input:not([readonly]):focus {\n  border-color: var(--road-input-outline-variant);\n  outline: 0;\n}\n\n/* MOTORBIKE\n -------------------- */\n\n.motorbike-plate .plate-number-input {\n  height: 6rem;\n  padding: 0.75rem 1rem 0;\n  resize: none;\n  border-left: 0;\n}\n\n.motorbike-plate .input-group-prepend,\n.motorbike-plate .input-group-append {\n  align-items: flex-start;\n  height: 6rem;\n  padding: 0;\n}\n\n.motorbike-plate .plate-number-start {\n  margin-top: 1px;\n  border-radius: 0.125rem 0 0;\n}\n\n.motorbike-plate .plate-number-end {\n  margin-top: 1px;\n  border-radius: 0 0.125rem 0 0;\n}\n","import { Component, h, Prop, Event, EventEmitter, Watch } from '@stencil/core';\nimport { licensePlateStarEu } from '../../../icons';\n\n@Component({\n  tag: 'road-plate-number',\n  styleUrl: 'plate-number.css',\n  scoped: true,\n})\nexport class PlateNumber {\n\n  private countries = [\n    {\n      country: 'FR',\n      letter: 'F',\n      placeholder: 'AT-857-YY',\n    },\n    {\n      country: 'BE',\n      letter: 'B',\n      placeholder: '1-AAA-001',\n    },\n    {\n      country: 'IT',\n      letter: 'I',\n      placeholder: 'AT 814TX',\n    },\n    {\n      country: 'ES',\n      letter: 'E',\n      placeholder: '9512 HVY',\n    },\n    {\n      country: 'PT',\n      letter: 'P',\n      placeholder: '13 24 PZ',\n    },\n    {\n      country: 'PL',\n      letter: 'PL',\n      placeholder: 'GD 921KF',\n    },\n    {\n      country: 'AT',\n      letter: 'A',\n      placeholder: 'FF 10 FF',\n    },\n    {\n      country: 'DE',\n      letter: 'D',\n      placeholder: 'RA KL 8136',\n    }\n  ];\n\n  /**\n   * country of the plate\n   */\n  @Prop() country: 'FR' | 'BE' | 'IT' | 'ES' | 'PT' | 'PL' | 'AT' | 'DE' = 'FR';\n\n  /**\n   * If `true`, the user cannot interact with the input.\n   */\n  @Prop() disabled = false;\n\n  /**\n   * overwrite the default placeholder\n   */\n  @Prop() placeholder?: string;\n\n  /**\n   * If `true`, the user cannot modify the value.\n   */\n  @Prop() readonly = false;\n\n  /**\n   * The value of the input.\n   */\n  @Prop({ mutable: true }) value?: string | number | null = '';\n\n  /**\n   * Enable motorbike display\n   */\n   @Prop() motorbike?: boolean;\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      input.value = input.value.toUpperCase() || \"\";\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  render() {\n    const value = this.getValue();\n    const motorbikeClass = this.motorbike ? 'motorbike-plate' : '';\n\n    return (\n      <road-input-group class={`plate-number plate-number-${this.country.toLowerCase()} ${motorbikeClass}`}>\n        <label slot=\"prepend\" class=\"input-group-prepend\">\n          <div class=\"plate-number-start\">\n            <road-icon class=\"plate-number-icon\" icon={licensePlateStarEu}></road-icon>\n            <div class=\"plate-number-location\" aria-label={this.country} role=\"img\">\n              {this.countries\n                .filter(item => item.country === this.country)[0].letter}\n            </div>\n          </div>\n        </label>\n        {this.motorbike\n          ? (\n            <textarea\n              class=\"form-control plate-number-input mb-0\"\n              disabled={this.disabled}\n              placeholder={this.placeholder != null ? this.placeholder :  this.countries.filter(item => item.country === this.country)[0].placeholder}\n              readOnly={this.readonly}\n              maxlength=\"9\"\n              rows={2}\n              onInput={this.onInput}\n              onBlur={this.onBlur}\n              onFocus={this.onFocus}\n            >\n            </textarea>\n          )\n          : (\n            <input\n              class=\"plate-number-input mb-0\"\n              disabled={this.disabled}\n              placeholder={this.placeholder != null ? this.placeholder :  this.countries.filter(item => item.country === this.country)[0].placeholder}\n              readOnly={this.readonly}\n              value={value}\n              onInput={this.onInput}\n              onBlur={this.onBlur}\n              onFocus={this.onFocus}\n            />\n          )}\n        <label slot=\"append\" class=\"input-group-append\">\n          <div class=\"plate-number-end\"></div>\n        </label>\n      </road-input-group>\n    );\n  }\n\n}"],"mappings":"sFAAA,MAAMA,EAAiB,47F,MCQVC,EAAW,M,iUAEdC,KAAAC,UAAY,CAClB,CACEC,QAAS,KACTC,OAAQ,IACRC,YAAa,aAEf,CACEF,QAAS,KACTC,OAAQ,IACRC,YAAa,aAEf,CACEF,QAAS,KACTC,OAAQ,IACRC,YAAa,YAEf,CACEF,QAAS,KACTC,OAAQ,IACRC,YAAa,YAEf,CACEF,QAAS,KACTC,OAAQ,IACRC,YAAa,YAEf,CACEF,QAAS,KACTC,OAAQ,KACRC,YAAa,YAEf,CACEF,QAAS,KACTC,OAAQ,IACRC,YAAa,YAEf,CACEF,QAAS,KACTC,OAAQ,IACRC,YAAa,eAiFTJ,KAAAK,QAAWC,IACjB,MAAMC,EAAQD,EAAGE,OACjB,GAAID,EAAO,CACTA,EAAME,MAAQF,EAAME,MAAMC,eAAiB,E,CAE7CV,KAAKW,UAAUC,KAAKN,GACpBN,KAAKa,UAAUD,KAAKN,EAAoB,EAGlCN,KAAAc,OAAS,KACfd,KAAKe,SAASH,OACdZ,KAAKgB,SAASJ,MAAM,EAGdZ,KAAAiB,QAAU,KAChBjB,KAAKkB,UAAUN,OACfZ,KAAKmB,UAAUP,MAAM,E,aA1FkD,K,cAKtD,M,yCAUA,M,WAKuC,G,yBAW/C,YAAAQ,GACRpB,KAAKqB,WAAWT,KAAK,CAAEH,MAAOT,KAAKS,OAAS,KAAOT,KAAKS,MAAQT,KAAKS,MAAMa,aAC3EtB,KAAKuB,WAAWX,KAAK,CAAEH,MAAOT,KAAKS,OAAS,KAAOT,KAAKS,MAAQT,KAAKS,MAAMa,Y,CAmCtE,QAAAE,GACN,cAAcxB,KAAKS,QAAU,SACzBT,KAAKS,MAAMa,YACVtB,KAAKS,OAAS,IAAIa,U,CAsBzB,MAAAG,GACE,MAAMhB,EAAQT,KAAKwB,WACnB,MAAME,EAAiB1B,KAAK2B,UAAY,kBAAoB,GAE5D,OACEC,EAAA,oBAAkBC,MAAO,6BAA6B7B,KAAKE,QAAQ4B,iBAAiBJ,KAClFE,EAAA,SAAOG,KAAK,UAAUF,MAAM,uBAC1BD,EAAA,OAAKC,MAAM,sBACTD,EAAA,aAAWC,MAAM,oBAAoBG,KAAMC,IAC3CL,EAAA,OAAKC,MAAM,wBAAuB,aAAa7B,KAAKE,QAASgC,KAAK,OAC/DlC,KAAKC,UACHkC,QAAOC,GAAQA,EAAKlC,UAAYF,KAAKE,UAAS,GAAGC,UAIzDH,KAAK2B,UAEFC,EAAA,YACEC,MAAM,uCACNQ,SAAUrC,KAAKqC,SACfjC,YAAaJ,KAAKI,aAAe,KAAOJ,KAAKI,YAAeJ,KAAKC,UAAUkC,QAAOC,GAAQA,EAAKlC,UAAYF,KAAKE,UAAS,GAAGE,YAC5HkC,SAAUtC,KAAKuC,SACfC,UAAU,IACVC,KAAM,EACNpC,QAASL,KAAKK,QACdS,OAAQd,KAAKc,OACbG,QAASjB,KAAKiB,UAKhBW,EAAA,SACEC,MAAM,0BACNQ,SAAUrC,KAAKqC,SACfjC,YAAaJ,KAAKI,aAAe,KAAOJ,KAAKI,YAAeJ,KAAKC,UAAUkC,QAAOC,GAAQA,EAAKlC,UAAYF,KAAKE,UAAS,GAAGE,YAC5HkC,SAAUtC,KAAKuC,SACf9B,MAAOA,EACPJ,QAASL,KAAKK,QACdS,OAAQd,KAAKc,OACbG,QAASjB,KAAKiB,UAGpBW,EAAA,SAAOG,KAAK,SAASF,MAAM,sBACzBD,EAAA,OAAKC,MAAM,sB"}
+{"version":3,"names":["plateNumberCss","PlateNumber","this","countries","country","letter","placeholder","onInput","ev","input","target","value","toUpperCase","roadinput","emit","roadInput","onBlur","roadblur","roadBlur","onFocus","roadfocus","roadFocus","valueChanged","roadchange","toString","roadChange","getValue","render","motorbikeClass","motorbike","h","class","toLowerCase","slot","icon","licensePlateStarEu","role","filter","item","disabled","readOnly","readonly","maxlength","rows"],"sources":["src/components/plate-number/plate-number.css?tag=road-plate-number&encapsulation=scoped","src/components/plate-number/plate-number.tsx"],"sourcesContent":["/*\n * Plate Number\n *\n * Index\n * - Plate Number\n * - Input\n */\n\n/* PLATE NUMBER\n -------------------- */\n\n:host {\n  display: block;\n}\n\n.plate-number {\n  --margin-bottom: 0;\n}\n\n.plate-number-start,\n.plate-number-end {\n  width: 1.75rem;\n  height: calc(3rem - 0.25rem);\n  background: var(--road-info-50);\n}\n\n.input-group-prepend {\n  margin-right: -1px;\n}\n\n.input-group-prepend,\n.input-group-append {\n  padding: 0;\n}\n\n.plate-number-start {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  padding: 0;\n  margin-right: 0;\n  margin-left: 1px;\n  color: var(--road-icon-inverse);\n  border-radius: 0.125rem 0 0 0.125rem;\n}\n\n.plate-number-icon {\n  width: 1.25rem;\n  height: 1.25rem;\n  color: #f3db53;\n}\n\n.plate-number-location {\n  font-size: var(--road-button-medium);\n  font-weight: 700;\n}\n\n.plate-number-end {\n  margin-right: 1px;\n  border-radius: 0 0.125rem 0.125rem 0;\n}\n\n.plate-number-be .plate-number-input {\n  color: var(--road-on-danger-surface);\n}\n\n.plate-number-be .plate-number-input,\n.plate-number-be .input-group-append,\n.plate-number-be .input-group-prepend {\n  border-color: var(--road-danger-outline);\n}\n\n/* INPUT\n -------------------- */\n\n.plate-number-input {\n  position: relative;\n  display: block;\n  height: 3rem;\n  margin: 0;\n  font-family: var(--road-font, sans-serif);\n  font-size: var(--road-heading-04);\n  font-weight: 700;\n  color: var(--road-on-surface);\n  text-align: center;\n  background: var(--road-surface);\n  border: 1px solid var(--road-input-outline);\n  border-radius: 0;\n  box-shadow: none;\n  appearance: none;\n}\n\n.plate-number-input::placeholder {\n  color: var(--road-on-surface-weak);\n  opacity: 1;\n}\n\n/**\n * Disabled state\n */\n\n.plate-number-input:disabled {\n  color: var(--road-on-surface-disabled);\n  cursor: not-allowed;\n  background: var(--road-surface-disabled);\n  opacity: 1;\n}\n\n.plate-number-input:disabled ~ .input-group-prepend,\n.plate-number-input:disabled ~ .input-group-append {\n  cursor: not-allowed;\n  background: var(--road-surface-disabled);\n}\n\n/**\n * Hover state\n */\n\n@media (hover: hover) {\n\n  .plate-number-input:not(:disabled):not([readonly]):hover {\n    border-color: var(--road-input-outline-variant);\n  }\n}\n\n/**\n * Focus state\n */\n\n.plate-number-input:not([readonly]):focus {\n  outline: auto;\n}\n\n/* MOTORBIKE\n -------------------- */\n\n.motorbike-plate .plate-number-input {\n  height: 6rem;\n  padding: 0.75rem 1rem 0;\n  resize: none;\n  border-left: 0;\n}\n\n.motorbike-plate .input-group-prepend,\n.motorbike-plate .input-group-append {\n  align-items: flex-start;\n  height: 6rem;\n  padding: 0;\n}\n\n.motorbike-plate .plate-number-start {\n  margin-top: 1px;\n  border-radius: 0.125rem 0 0;\n}\n\n.motorbike-plate .plate-number-end {\n  margin-top: 1px;\n  border-radius: 0 0.125rem 0 0;\n}\n","import { Component, h, Prop, Event, EventEmitter, Watch } from '@stencil/core';\nimport { licensePlateStarEu } from '../../../icons';\n\n@Component({\n  tag: 'road-plate-number',\n  styleUrl: 'plate-number.css',\n  scoped: true,\n})\nexport class PlateNumber {\n\n  private countries = [\n    {\n      country: 'FR',\n      letter: 'F',\n      placeholder: 'AT-857-YY',\n    },\n    {\n      country: 'BE',\n      letter: 'B',\n      placeholder: '1-AAA-001',\n    },\n    {\n      country: 'IT',\n      letter: 'I',\n      placeholder: 'AT 814TX',\n    },\n    {\n      country: 'ES',\n      letter: 'E',\n      placeholder: '9512 HVY',\n    },\n    {\n      country: 'PT',\n      letter: 'P',\n      placeholder: '13 24 PZ',\n    },\n    {\n      country: 'PL',\n      letter: 'PL',\n      placeholder: 'GD 921KF',\n    },\n    {\n      country: 'AT',\n      letter: 'A',\n      placeholder: 'FF 10 FF',\n    },\n    {\n      country: 'DE',\n      letter: 'D',\n      placeholder: 'RA KL 8136',\n    }\n  ];\n\n  /**\n   * country of the plate\n   */\n  @Prop() country: 'FR' | 'BE' | 'IT' | 'ES' | 'PT' | 'PL' | 'AT' | 'DE' = 'FR';\n\n  /**\n   * If `true`, the user cannot interact with the input.\n   */\n  @Prop() disabled = false;\n\n  /**\n   * overwrite the default placeholder\n   */\n  @Prop() placeholder?: string;\n\n  /**\n   * If `true`, the user cannot modify the value.\n   */\n  @Prop() readonly = false;\n\n  /**\n   * The value of the input.\n   */\n  @Prop({ mutable: true }) value?: string | number | null = '';\n\n  /**\n   * Enable motorbike display\n   */\n   @Prop() motorbike?: boolean;\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      input.value = input.value.toUpperCase() || \"\";\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  render() {\n    const value = this.getValue();\n    const motorbikeClass = this.motorbike ? 'motorbike-plate' : '';\n\n    return (\n      <road-input-group class={`plate-number plate-number-${this.country.toLowerCase()} ${motorbikeClass}`}>\n        <label slot=\"prepend\" class=\"input-group-prepend\">\n          <div class=\"plate-number-start\">\n            <road-icon class=\"plate-number-icon\" icon={licensePlateStarEu}></road-icon>\n            <div class=\"plate-number-location\" aria-label={this.country} role=\"img\">\n              {this.countries\n                .filter(item => item.country === this.country)[0].letter}\n            </div>\n          </div>\n        </label>\n        {this.motorbike\n          ? (\n            <textarea\n              class=\"form-control plate-number-input mb-0\"\n              disabled={this.disabled}\n              placeholder={this.placeholder != null ? this.placeholder :  this.countries.filter(item => item.country === this.country)[0].placeholder}\n              readOnly={this.readonly}\n              maxlength=\"9\"\n              rows={2}\n              onInput={this.onInput}\n              onBlur={this.onBlur}\n              onFocus={this.onFocus}\n            >\n            </textarea>\n          )\n          : (\n            <input\n              class=\"plate-number-input mb-0\"\n              disabled={this.disabled}\n              placeholder={this.placeholder != null ? this.placeholder :  this.countries.filter(item => item.country === this.country)[0].placeholder}\n              readOnly={this.readonly}\n              value={value}\n              onInput={this.onInput}\n              onBlur={this.onBlur}\n              onFocus={this.onFocus}\n            />\n          )}\n        <label slot=\"append\" class=\"input-group-append\">\n          <div class=\"plate-number-end\"></div>\n        </label>\n      </road-input-group>\n    );\n  }\n\n}"],"mappings":"sFAAA,MAAMA,EAAiB,s4F,MCQVC,EAAW,M,iUAEdC,KAAAC,UAAY,CAClB,CACEC,QAAS,KACTC,OAAQ,IACRC,YAAa,aAEf,CACEF,QAAS,KACTC,OAAQ,IACRC,YAAa,aAEf,CACEF,QAAS,KACTC,OAAQ,IACRC,YAAa,YAEf,CACEF,QAAS,KACTC,OAAQ,IACRC,YAAa,YAEf,CACEF,QAAS,KACTC,OAAQ,IACRC,YAAa,YAEf,CACEF,QAAS,KACTC,OAAQ,KACRC,YAAa,YAEf,CACEF,QAAS,KACTC,OAAQ,IACRC,YAAa,YAEf,CACEF,QAAS,KACTC,OAAQ,IACRC,YAAa,eAiFTJ,KAAAK,QAAWC,IACjB,MAAMC,EAAQD,EAAGE,OACjB,GAAID,EAAO,CACTA,EAAME,MAAQF,EAAME,MAAMC,eAAiB,E,CAE7CV,KAAKW,UAAUC,KAAKN,GACpBN,KAAKa,UAAUD,KAAKN,EAAoB,EAGlCN,KAAAc,OAAS,KACfd,KAAKe,SAASH,OACdZ,KAAKgB,SAASJ,MAAM,EAGdZ,KAAAiB,QAAU,KAChBjB,KAAKkB,UAAUN,OACfZ,KAAKmB,UAAUP,MAAM,E,aA1FkD,K,cAKtD,M,yCAUA,M,WAKuC,G,yBAW/C,YAAAQ,GACRpB,KAAKqB,WAAWT,KAAK,CAAEH,MAAOT,KAAKS,OAAS,KAAOT,KAAKS,MAAQT,KAAKS,MAAMa,aAC3EtB,KAAKuB,WAAWX,KAAK,CAAEH,MAAOT,KAAKS,OAAS,KAAOT,KAAKS,MAAQT,KAAKS,MAAMa,Y,CAmCtE,QAAAE,GACN,cAAcxB,KAAKS,QAAU,SACzBT,KAAKS,MAAMa,YACVtB,KAAKS,OAAS,IAAIa,U,CAsBzB,MAAAG,GACE,MAAMhB,EAAQT,KAAKwB,WACnB,MAAME,EAAiB1B,KAAK2B,UAAY,kBAAoB,GAE5D,OACEC,EAAA,oBAAkBC,MAAO,6BAA6B7B,KAAKE,QAAQ4B,iBAAiBJ,KAClFE,EAAA,SAAOG,KAAK,UAAUF,MAAM,uBAC1BD,EAAA,OAAKC,MAAM,sBACTD,EAAA,aAAWC,MAAM,oBAAoBG,KAAMC,IAC3CL,EAAA,OAAKC,MAAM,wBAAuB,aAAa7B,KAAKE,QAASgC,KAAK,OAC/DlC,KAAKC,UACHkC,QAAOC,GAAQA,EAAKlC,UAAYF,KAAKE,UAAS,GAAGC,UAIzDH,KAAK2B,UAEFC,EAAA,YACEC,MAAM,uCACNQ,SAAUrC,KAAKqC,SACfjC,YAAaJ,KAAKI,aAAe,KAAOJ,KAAKI,YAAeJ,KAAKC,UAAUkC,QAAOC,GAAQA,EAAKlC,UAAYF,KAAKE,UAAS,GAAGE,YAC5HkC,SAAUtC,KAAKuC,SACfC,UAAU,IACVC,KAAM,EACNpC,QAASL,KAAKK,QACdS,OAAQd,KAAKc,OACbG,QAASjB,KAAKiB,UAKhBW,EAAA,SACEC,MAAM,0BACNQ,SAAUrC,KAAKqC,SACfjC,YAAaJ,KAAKI,aAAe,KAAOJ,KAAKI,YAAeJ,KAAKC,UAAUkC,QAAOC,GAAQA,EAAKlC,UAAYF,KAAKE,UAAS,GAAGE,YAC5HkC,SAAUtC,KAAKuC,SACf9B,MAAOA,EACPJ,QAASL,KAAKK,QACdS,OAAQd,KAAKc,OACbG,QAASjB,KAAKiB,UAGpBW,EAAA,SAAOG,KAAK,SAASF,MAAM,sBACzBD,EAAA,OAAKC,MAAM,sB"}

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

@@ -0,0 +1,2 @@
+import{r as a,h as t,H as r}from"./p-f3d586b3.js";const o=":host{--avatar-background:var(--road-primary);--avatar-width:3rem;--avatar-color:var(--road-grey-100-new);position:relative;display:flex;align-items:center;justify-content:center;width:var(--avatar-width);height:var(--avatar-width);font-weight:700;color:var(--avatar-color);background:var(--avatar-background);border-radius:var(--avatar-width);transition:box-shadow 0.5s}:host(:hover){box-shadow:0 0 0 4px var(--road-primary-80)}:host(.focus-visible),:host(:focus){outline:auto}:host ::slotted(road-icon){fill:var(--road-icon-inverse)}:host(.avatar-sm){width:2.625rem;height:2.625rem;font-size:1.25rem}:host(.avatar-md){width:3.5rem;height:3.5rem;font-size:var(--road-font-size-32)}:host(.avatar-lg){width:4rem;height:4rem;font-size:2.375rem}::slotted(road-img),::slotted(img){width:100%;height:100%;object-fit:cover;overflow:hidden;border-radius:var(--avatar-width)}::slotted(road-badge){position:absolute;top:0;right:0}";const e=class{constructor(t){a(this,t);this.size="md"}render(){const a=this.size!==undefined?`avatar-${this.size}`:"";return t(r,{class:`${a}`},t("slot",null))}};e.style=o;export{e as road_avatar};
+//# sourceMappingURL=p-f0a7c904.entry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["avatarCss","Avatar","render","sizeClass","this","size","undefined","h","Host","class"],"sources":["src/components/avatar/avatar.css?tag=road-avatar&encapsulation=shadow","src/components/avatar/avatar.tsx"],"sourcesContent":["/*\n * Avatar\n *\n * Index\n * - Avatar\n * - Image\n * - Badge\n */\n\n/**\n * @prop --avatar-background: background color of the avatar\n * @prop --avatar-width: width & height of the avatar\n */\n\n/* AVATAR\n -------------------- */\n\n:host {\n  --avatar-background: var(--road-primary);\n  --avatar-width: 3rem;\n  --avatar-color: var(--road-grey-100-new);\n\n  position: relative;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--avatar-width);\n  height: var(--avatar-width);\n  font-weight: 700;\n  color: var(--avatar-color);\n  background: var(--avatar-background);\n  border-radius: var(--avatar-width);\n  transition: box-shadow 0.5s;\n}\n\n:host(:hover){\n  box-shadow: 0 0 0 4px var(--road-primary-80);\n}\n\n:host(.focus-visible),\n:host(:focus){\n  outline: auto;\n}\n\n\n\n:host ::slotted(road-icon) {\n  fill: var(--road-icon-inverse);\n}\n\n\n/* SIZE\n -------------------- */\n\n:host(.avatar-sm) {\n  width: 2.625rem;\n  height: 2.625rem;\n  font-size: 1.25rem;\n}\n\n:host(.avatar-md) {\n  width: 3.5rem;\n  height: 3.5rem;\n  font-size: var(--road-font-size-32);\n}\n\n:host(.avatar-lg) {\n  width: 4rem;\n  height: 4rem;\n  font-size: 2.375rem;\n}\n\n\n/* IMAGE\n -------------------- */\n\n::slotted(road-img),\n::slotted(img) {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  overflow: hidden;\n  border-radius: var(--avatar-width);\n}\n\n/* BADGE\n -------------------- */\n\n::slotted(road-badge) {\n  position: absolute;\n  top: 0;\n  right: 0;\n}\n","import { Component, h, Prop, Host } from '@stencil/core';\n\n/**\n * @slot  - Image of the avatar.\n */\n@Component({\n  tag: 'road-avatar',\n  styleUrl: 'avatar.css',\n  shadow: true,\n})\nexport class Avatar {\n\n  /**\n    * The Avatar size.\n    */\n   @Prop({ reflect: true }) size?: 'sm' | 'md' | 'lg' = 'md';\n\n  render() {\n\n    const sizeClass = this.size !== undefined ? `avatar-${this.size}` : '';\n\n\n    return (\n\n      <Host\n        class={`${sizeClass}`}\n      >\n        <slot/>\n      </Host>\n      \n    );\n  }\n\n}\n"],"mappings":"kDAAA,MAAMA,EAAY,45B,MCULC,EAAM,M,mCAKqC,I,CAEtD,MAAAC,GAEE,MAAMC,EAAYC,KAAKC,OAASC,UAAY,UAAUF,KAAKC,OAAS,GAGpE,OAEEE,EAACC,EAAI,CACHC,MAAO,GAAGN,KAEVI,EAAA,a"}

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

@@ -0,0 +1,2 @@
+import{r as o,h as r}from"./p-f3d586b3.js";import{n as a}from"./p-ac7a8bca.js";import"./p-1ccae339.js";const i=':host{--accordion-header-border:1px;--content-margin:0 var(--road-spacing-05) var(--road-spacing-04);--content-padding:var(--road-spacing-04) 0 0;--header-padding:var(--road-spacing-04) var(--road-spacing-05);--header-padding-vertical:var(--road-spacing-04);--icon-color:var(--road-icon);--max-height:none;display:block}.accordion{--max-height:none;overflow:hidden;font-family:var(--road-font, sans-serif);font-size:var(--road-body-small);line-height:1.5;color:var(--road-on-surface);background:var(--road-surface);border:1px solid;border-color:var(--road-outline-weak);border-radius:0.25rem;transition:max-height 0.3s ease-in-out}.accordion.accordion-light{background:none;border:0}.accordion[open]{max-height:var(--max-height)}.accordion[open] .accordion-arrow{transform:rotate(-90deg)}.accordion[open] .accordion-content{padding:var(--content-padding);margin:var(--content-margin)}.accordion-light[open] .accordion-light-content{margin:0 0 var(--road-spacing-04)}.accordion-light[open] .accordion-light-header::after{display:none}.accordion-trigger{box-sizing:border-box;display:block;border:1px solid transparent;border-radius:0.25rem;-webkit-tap-highlight-color:rgba(0, 0, 0, 0)}.accordion-light .accordion-trigger:active{background:none}.accordion-trigger::-webkit-details-marker{display:none}.accordion-trigger.focus-visible{border-color:var(--road-primary)}.accordion-trigger:active{background:var(--road-surface-inverse)}.accordion-header{box-sizing:border-box;display:flex;align-items:center;justify-content:flex-start;padding:var(--header-padding);font-size:var(--road-body-medium);font-weight:700;cursor:pointer;-webkit-user-select:none;user-select:none}.accordion-light-header{position:relative;padding:var(--header-padding-vertical) 0;font-size:var(--road-body-large)}.accordion-light--small .accordion-light-header{font-size:var(--road-body-medium)}.accordion-light--border .accordion-light-header::after{position:absolute;bottom:1px;width:98.3%;height:1px;content:"";background:var(--road-outline-weak)}.accordion-arrow{margin-left:auto;color:var(--icon-color);transform:rotate(90deg)}.accordion-light--small .accordion-arrow{width:1.5rem;height:1.5rem}::slotted([slot="header"]){display:flex;align-items:center}:host(.accordion-icon-left){width:1.5rem;height:1.5rem;margin-right:1rem}.accordion-content{padding:0 0.5rem;margin:0 1rem;overflow:hidden;font-size:var(--road-body-medium);border-top:var(--accordion-header-border) solid var(--road-outline-weak)}.accordion-light-content{border-top:1px solid var(--road-outline-weak)}.accordion-light--border .accordion-light-content{border-top:1px solid var(--road-outline-weak);border-bottom:1px solid var(--road-outline-weak)}';const n=class{constructor(r){o(this,r);this.onClick=()=>{this.isOpen=!this.isOpen};this.isOpen=false;this.isLight=false;this.isLightSeparator=false;this.isSmall=false}render(){const o=this.isLight?"accordion accordion-light":"accordion";const i=this.isLight?"accordion-header accordion-light-header":"accordion-header";const n=this.isLight?"accordion-content accordion-light-content":"accordion-content";const e=this.isLightSeparator?"accordion accordion-light accordion-light--border":"accordion";const c=this.isSmall?"accordion accordion-light accordion-light--small":"accordion";return r("details",{class:`${o} ${c} ${e}`,open:this.isOpen},r("summary",{class:"accordion-trigger","aria-expanded":`${this.isOpen}`,tabindex:"0",role:"button",onClick:this.onClick},r("div",{class:i},r("slot",{name:"icon-left"}),r("slot",{name:"header"}),r("road-icon",{class:"accordion-arrow",icon:a}))),r("div",{class:n},r("slot",null)))}};n.style=i;export{n as road_accordion};
+//# sourceMappingURL=p-fc41f5e6.entry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["accordionCss","Accordion","this","onClick","isOpen","render","accordionLight","isLight","accordionLightHeader","accordionLightContent","accordionLightSeparator","isLightSeparator","accordionSmall","isSmall","h","class","open","tabindex","role","name","icon","navigationChevron"],"sources":["src/components/accordion/accordion.css?tag=road-accordion&encapsulation=shadow","src/components/accordion/accordion.tsx"],"sourcesContent":["/*\n * Accordion\n *\n * For accessibility, we provide a style for focus only on Tab.\n * For enable this focus, load the javascript polyfill for focus-visible\n * (https://github.com/WICG/focus-visible).\n *\n * Index\n * - Accordion\n * - Button\n * - Content\n */\n\n/**\n * @prop --accordion-header-border: height of the border of the header\n * @prop --content-margin: margin of the accordion content\n * @prop --content-padding: padding of the accordion content\n * @prop --header-padding: padding horizontal and vertical of the accordion header\n * @prop --header-padding-vertical: padding of the accordion header\n * @prop --icon-color: color of the chevron icon\n * @prop --max-height: maximum height of the collapse content\n */\n\n:host {\n  --accordion-header-border: 1px;\n  --content-margin: 0 var(--road-spacing-05) var(--road-spacing-04);\n  --content-padding: var(--road-spacing-04) 0 0;\n  --header-padding: var(--road-spacing-04) var(--road-spacing-05);\n  --header-padding-vertical: var(--road-spacing-04);\n  --icon-color: var(--road-icon);\n  --max-height: none;\n\n  display: block;\n}\n\n/* ACCORDION\n -------------------- */\n\n.accordion {\n  --max-height: none;\n  overflow: hidden;\n  font-family: var(--road-font, sans-serif);\n  font-size: var(--road-body-small);\n  line-height: 1.5;\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  transition: max-height 0.3s ease-in-out;\n}\n\n.accordion.accordion-light {\n  background: none;\n  border: 0;\n}\n\n/**\n * Open state\n */\n\n.accordion[open] {\n  max-height: var(--max-height);\n}\n\n.accordion[open] .accordion-arrow {\n  transform: rotate(-90deg);\n}\n\n.accordion[open] .accordion-content {\n  padding: var(--content-padding);\n  margin: var(--content-margin);\n}\n\n.accordion-light[open] .accordion-light-content {\n  margin: 0 0 var(--road-spacing-04);\n}\n\n.accordion-light[open] .accordion-light-header::after {\n  display: none;\n}\n\n/* BUTTON\n -------------------- */\n\n.accordion-trigger {\n  box-sizing: border-box;\n  display: block;\n  border: 1px solid transparent;\n  border-radius: 0.25rem;\n  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n}\n\n.accordion-light .accordion-trigger:active{\n  background: none;\n}\n\n.accordion-trigger::-webkit-details-marker { /* Remove chrome native arrow */\n  display: none;\n}\n\n/**\n * Focus on Tab\n */\n\n.accordion-trigger.focus-visible {\n  border-color: var(--road-primary);\n}\n\n/**\n * Active state\n */\n\n.accordion-trigger:active {\n  background: var(--road-surface-inverse);\n}\n\n/**\n * .accordion-header is an additionnal div\n * because Safari doesn't support flexbox on <summary> element\n */\n\n.accordion-header {\n  box-sizing: border-box;\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n  padding: var(--header-padding);\n  font-size: var(--road-body-medium);\n  font-weight: 700;\n  cursor: pointer;\n  user-select: none;\n}\n\n.accordion-light-header {\n  position: relative;\n  padding: var(--header-padding-vertical) 0;\n  font-size: var(--road-body-large);\n}\n\n.accordion-light--small .accordion-light-header {\n  font-size: var(--road-body-medium);\n}\n\n.accordion-light--border .accordion-light-header::after {\n  position: absolute;\n  bottom: 1px;\n  width: 98.3%;\n  height: 1px;\n  content: \"\";\n  background: var(--road-outline-weak);\n}\n\n/**\n * Custom arrow\n */\n\n.accordion-arrow {\n  margin-left: auto;\n  color: var(--icon-color);\n  transform: rotate(90deg);\n}\n\n.accordion-light--small .accordion-arrow {\n  width: 1.5rem;\n  height: 1.5rem;\n}\n\n::slotted([slot=\"header\"]){\n  display: flex;\n  align-items: center;\n}\n\n:host(.accordion-icon-left){\n  width: 1.5rem;\n  height: 1.5rem;\n  margin-right: 1rem;\n}\n\n/* CONTENT\n -------------------- */\n\n.accordion-content {\n  padding: 0 0.5rem;\n  margin: 0 1rem;\n  overflow: hidden;\n  font-size: var(--road-body-medium);\n  border-top: var(--accordion-header-border) solid var(--road-outline-weak);\n}\n\n.accordion-light-content {\n  border-top: 1px solid var(--road-outline-weak);\n}\n\n.accordion-light--border .accordion-light-content {\n  border-top: 1px solid var(--road-outline-weak);\n  border-bottom: 1px solid var(--road-outline-weak);\n}\n","import { Component, Prop, h } from '@stencil/core';\nimport { navigationChevron } from '../../../icons';\nimport './../../utils/polyfill';\n\n/**\n * @slot header - Content of the header.\n * @slot - Content hidden in the accordion.\n * @slot icon-left - Icon of the alert, it should be a road-icon element.\n * `<road-icon name=\"alert-info-outline\" class=\"mr-16\"></road-icon>`\n\n */\n\n@Component({\n  tag: 'road-accordion',\n  styleUrl: 'accordion.css',\n  shadow: true,\n})\nexport class Accordion {\n\n  /**\n   * Set to `true` to open the accordion and to `false` to close it.\n   */\n  @Prop({ mutable: true }) isOpen : boolean = false;\n\n  /**\n   * Set to `true` to remove border the accordion and to `false` to add border it.\n   */\n   @Prop() isLight : boolean = false;\n\n   /**\n   * Set to `true` to add a border in the header and the content only for the light accordion.\n   */\n    @Prop() isLightSeparator : boolean = false;\n\n   /**\n   * Set to `true` to add the small version only for the light accordion.\n   */\n    @Prop() isSmall : boolean = false;\n\n  /**\n   * Toggle the display when clicking header\n   */\n  private onClick = () => {\n    this.isOpen = !this.isOpen;\n  };\n\n  render() {\n\n    const accordionLight = this.isLight ? 'accordion accordion-light' : 'accordion';\n    const accordionLightHeader = this.isLight ? 'accordion-header accordion-light-header' : 'accordion-header';\n    const accordionLightContent = this.isLight ? 'accordion-content accordion-light-content' : 'accordion-content';\n    const accordionLightSeparator = this.isLightSeparator ? 'accordion accordion-light accordion-light--border' : 'accordion';\n    const accordionSmall = this.isSmall ? 'accordion accordion-light accordion-light--small' : 'accordion';\n    return (\n      <details class={`${accordionLight} ${accordionSmall} ${accordionLightSeparator}`} open={this.isOpen}>\n        <summary class=\"accordion-trigger\" aria-expanded={`${this.isOpen}`} tabindex=\"0\" role=\"button\" onClick={this.onClick}>\n          <div class={accordionLightHeader}>\n            <slot name=\"icon-left\"/>\n            <slot name=\"header\"/>\n            <road-icon class=\"accordion-arrow\" icon={navigationChevron}></road-icon>\n          </div>\n        </summary>\n        <div class={accordionLightContent}>\n          <slot/>\n        </div>\n      </details>\n    );\n  }\n}"],"mappings":"uGAAA,MAAMA,EAAe,qoF,MCiBRC,EAAS,M,yBAyBZC,KAAAC,QAAU,KAChBD,KAAKE,QAAUF,KAAKE,MAAM,E,YArBgB,M,aAKf,M,sBAKU,M,aAKT,K,CAS9B,MAAAC,GAEE,MAAMC,EAAiBJ,KAAKK,QAAU,4BAA8B,YACpE,MAAMC,EAAuBN,KAAKK,QAAU,0CAA4C,mBACxF,MAAME,EAAwBP,KAAKK,QAAU,4CAA8C,oBAC3F,MAAMG,EAA0BR,KAAKS,iBAAmB,oDAAsD,YAC9G,MAAMC,EAAiBV,KAAKW,QAAU,mDAAqD,YAC3F,OACEC,EAAA,WAASC,MAAO,GAAGT,KAAkBM,KAAkBF,IAA2BM,KAAMd,KAAKE,QAC3FU,EAAA,WAASC,MAAM,oBAAmB,gBAAgB,GAAGb,KAAKE,SAAUa,SAAS,IAAIC,KAAK,SAASf,QAASD,KAAKC,SAC3GW,EAAA,OAAKC,MAAOP,GACVM,EAAA,QAAMK,KAAK,cACXL,EAAA,QAAMK,KAAK,WACXL,EAAA,aAAWC,MAAM,kBAAkBK,KAAMC,MAG7CP,EAAA,OAAKC,MAAON,GACVK,EAAA,c"}