@roadtrip/components 3.12.0 → 3.12.2

package/dist/roadtrip/p-33002e9d.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-73fe2357.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;outline:0;box-shadow:none;-webkit-appearance:none;appearance:none}.plate-number-input.sc-road-plate-number::placeholder{color:var(--road-on-surface-extra-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{border-color:var(--road-input-outline-variant);outline:0}.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"},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-33002e9d.entry.js.map

package/dist/roadtrip/{p-9b170273.entry.js.map → p-33002e9d.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","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-extra-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\">\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,++F,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,yBACR7B,KAAKC,UACHiC,QAAOC,GAAQA,EAAKjC,UAAYF,KAAKE,UAAS,GAAGC,UAIzDH,KAAK2B,UAEFC,EAAA,YACEC,MAAM,uCACNO,SAAUpC,KAAKoC,SACfhC,YAAaJ,KAAKI,aAAe,KAAOJ,KAAKI,YAAeJ,KAAKC,UAAUiC,QAAOC,GAAQA,EAAKjC,UAAYF,KAAKE,UAAS,GAAGE,YAC5HiC,SAAUrC,KAAKsC,SACfC,UAAU,IACVC,KAAM,EACNnC,QAASL,KAAKK,QACdS,OAAQd,KAAKc,OACbG,QAASjB,KAAKiB,UAKhBW,EAAA,SACEC,MAAM,0BACNO,SAAUpC,KAAKoC,SACfhC,YAAaJ,KAAKI,aAAe,KAAOJ,KAAKI,YAAeJ,KAAKC,UAAUiC,QAAOC,GAAQA,EAAKjC,UAAYF,KAAKE,UAAS,GAAGE,YAC5HiC,SAAUrC,KAAKsC,SACf7B,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","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-extra-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\">\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,09F,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,yBACR7B,KAAKC,UACHiC,QAAOC,GAAQA,EAAKjC,UAAYF,KAAKE,UAAS,GAAGC,UAIzDH,KAAK2B,UAEFC,EAAA,YACEC,MAAM,uCACNO,SAAUpC,KAAKoC,SACfhC,YAAaJ,KAAKI,aAAe,KAAOJ,KAAKI,YAAeJ,KAAKC,UAAUiC,QAAOC,GAAQA,EAAKjC,UAAYF,KAAKE,UAAS,GAAGE,YAC5HiC,SAAUrC,KAAKsC,SACfC,UAAU,IACVC,KAAM,EACNnC,QAASL,KAAKK,QACdS,OAAQd,KAAKc,OACbG,QAASjB,KAAKiB,UAKhBW,EAAA,SACEC,MAAM,0BACNO,SAAUpC,KAAKoC,SACfhC,YAAaJ,KAAKI,aAAe,KAAOJ,KAAKI,YAAeJ,KAAKC,UAAUiC,QAAOC,GAAQA,EAAKjC,UAAYF,KAAKE,UAAS,GAAGE,YAC5HiC,SAAUrC,KAAKsC,SACf7B,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-336aa5f6.entry.js

@@ -0,0 +1,2 @@
+import{r as t,c as e,h as i,H as o,a}from"./p-f3d586b3.js";const r=':host{position:relative;box-sizing:border-box;display:flex;flex:1;flex-basis:0;flex-direction:column;flex-grow:1;align-items:center;justify-content:center;text-align:center;white-space:nowrap}@media (min-width: 1200px){:host{flex-grow:inherit;width:100%;padding:0.5rem}}:host(.tab-disabled),:host(.tab-disabled) road-tooltip,:host(.tab-disabled) road-tooltip road-icon,:host(.tab-disabled) ::slotted(road-icon){color:var(--road-on-surface-disabled);cursor:not-allowed;fill:var(--road-on-surface-disabled)}:host(.tab-selected),:host(.tab-selected) road-tooltip road-icon,:host(.tab-selected) ::slotted(road-icon){color:var(--road-on-button-tertiary);fill:var(--road-on-button-tertiary)}:host(.tab-selected)::after{position:absolute;bottom:-12px;left:0;display:block;width:100%;height:4px;color:var(--road-on-button-tertiary);content:"";background-color:var(--road-on-button-tertiary)}@media (min-width: 1200px){:host(.tab-selected)::after{bottom:auto;left:0;width:4px;height:100%}}:host(.focus-visible) ::slotted(road-icon),:host(.focus-visible) ::slotted(road-icon)::after,:host(.focus-visible) ::slotted(road-label),:host(.focus-visible) ::slotted(road-label)::after,:host(:hover) ::slotted(road-icon),:host(:hover) ::slotted(road-icon)::after,:host(:hover) ::slotted(road-label),:host(:hover) ::slotted(road-label)::after{color:var(--road-on-button-tertiary)}:host(.tab-disabled.focus-visible) ::slotted(road-icon),:host(.tab-disabled.focus-visible) ::slotted(road-label),:host(.tab-disabled:hover) ::slotted(road-icon),:host(.tab-disabled:hover) ::slotted(road-label){color:var(--road-on-surface-disabled);cursor:not-allowed;fill:var(--road-on-surface-disabled)}.button-native{position:relative;box-sizing:border-box;display:flex;flex-direction:inherit;align-items:inherit;justify-content:inherit;width:100%;height:100%;margin:0;overflow:visible;font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;color:inherit;text-align:inherit;text-decoration:none;text-indent:inherit;text-overflow:inherit;text-transform:inherit;letter-spacing:inherit;white-space:inherit;cursor:pointer;background:transparent;border-color:initial;border-style:initial;border-width:0;border-radius:inherit;border-image:initial;outline:0;-webkit-tap-highlight-color:rgba(0, 0, 0, 0)}:host(.tab-disabled) .button-native{cursor:not-allowed}.button-inner{position:relative;z-index:1;display:flex;flex-flow:inherit;align-items:inherit;justify-content:inherit;width:100%;height:100%}::slotted(road-icon){display:block;width:2rem;height:2rem;margin-right:auto;margin-bottom:0.25rem;margin-left:auto;fill:currentColor}@media (min-width: 1200px){:host ::slotted(road-tooltip){width:100%}}::slotted(road-label){position:relative;box-sizing:border-box;display:flex;flex:1;flex-direction:column;font-size:var(--road-label-small);font-weight:700;text-align:center;white-space:nowrap}@media (min-width: 1200px){::slotted(road-label){display:block}}::slotted(road-badge){position:absolute;top:4px;left:calc(50% + 0.375rem);z-index:1;box-sizing:border-box;height:auto;font-size:var(--road-font-size-10);font-weight:400}';const s=class{constructor(i){t(this,i);this.roadnavbaritemclick=e(this,"roadnavbaritemclick",7);this.roadNavbarItemClick=e(this,"roadNavbarItemClick",7);this.onKeyUp=t=>{if(t.key==="Enter"||t.key===" "){this.selectTab(t)}};this.onClick=t=>{this.selectTab(t)};this.disabled=false;this.download=undefined;this.href=undefined;this.rel=undefined;this.selected=false;this.tab=undefined;this.target=undefined}onNavbarChanged(t){this.selected=this.tab===t.detail.tab}selectTab(t){if(this.tab!==undefined){if(!this.disabled){this.roadnavbaritemclick.emit({tab:this.tab,href:this.href,selected:this.selected});this.roadNavbarItemClick.emit({tab:this.tab,href:this.href,selected:this.selected})}if(this.href===undefined){t.preventDefault()}}}render(){const{href:t,rel:e,target:a,selected:r,tab:s,disabled:l}=this;const n={download:this.download,href:t,rel:e,target:a};return i(o,{onClick:this.onClick,onKeyup:this.onKeyUp,role:"tab",tabindex:"0","aria-selected":r?"true":null,id:s!==undefined?`navbar-item-${s}`:null,disabled:l,class:{"navbar-item":true,"tab-selected":r,"tab-disabled":l}},i("a",Object.assign({},n,{tabIndex:-1,class:"button-native",part:"native"}),i("span",{class:"button-inner"},i("slot",null))))}get el(){return a(this)}};s.style=r;export{s as road_navbar_item};
+//# sourceMappingURL=p-336aa5f6.entry.js.map

package/dist/roadtrip/p-336aa5f6.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["navbarItemCss","NavbarItem","this","onKeyUp","ev","key","selectTab","onClick","onNavbarChanged","selected","tab","detail","undefined","disabled","roadnavbaritemclick","emit","href","roadNavbarItemClick","preventDefault","render","rel","target","attrs","download","h","Host","onKeyup","role","tabindex","id","class","Object","assign","tabIndex","part"],"sources":["src/components/navbar-item/navbar-item.css?tag=road-navbar-item&encapsulation=shadow","src/components/navbar-item/navbar-item.tsx"],"sourcesContent":["/*\n * Navbar item\n *\n * Index\n * - Native\n * - Inner\n * - Icon\n * - Badge\n */\n\n\n:host {\n  position: relative;\n  box-sizing: border-box;\n  display: flex;\n  flex: 1;\n  flex-basis: 0;\n  flex-direction: column;\n  flex-grow: 1;\n  align-items: center;\n  justify-content: center;\n  text-align: center;\n  white-space: nowrap;\n}\n\n@media (min-width: 1200px) {\n\n  :host {\n    flex-grow: inherit;\n    width: 100%;\n    padding: 0.5rem;\n  }\n\n}\n\n/**\n * Disabled\n */\n\n:host(.tab-disabled),\n:host(.tab-disabled) road-tooltip,\n:host(.tab-disabled) road-tooltip road-icon,\n:host(.tab-disabled) ::slotted(road-icon) {\n  color: var(--road-on-surface-disabled);\n  cursor: not-allowed;\n  fill: var(--road-on-surface-disabled);\n}\n\n/**\n * Selected state\n */\n\n:host(.tab-selected),\n:host(.tab-selected) road-tooltip road-icon,\n:host(.tab-selected) ::slotted(road-icon) {\n  color: var(--road-on-button-tertiary);\n  fill: var(--road-on-button-tertiary);\n}\n\n:host(.tab-selected)::after {\n  position: absolute;\n  bottom: -12px;\n  left: 0;\n  display: block;\n  width: 100%;\n  height: 4px;\n  color: var(--road-on-button-tertiary);\n  content: \"\";\n  background-color: var(--road-on-button-tertiary);\n}\n\n@media (min-width: 1200px) {\n\n  :host(.tab-selected)::after {\n    bottom: auto;\n    left: 0;\n    width: 4px;\n    height: 100%;\n  }\n\n}\n\n\n/**\n * Focus on Tab state\n */\n\n:host(.focus-visible) ::slotted(road-icon),\n:host(.focus-visible) ::slotted(road-icon)::after,\n:host(.focus-visible) ::slotted(road-label),\n:host(.focus-visible) ::slotted(road-label)::after,\n:host(:hover) ::slotted(road-icon),\n:host(:hover) ::slotted(road-icon)::after,\n:host(:hover) ::slotted(road-label),\n:host(:hover) ::slotted(road-label)::after {\n  color: var(--road-on-button-tertiary);\n}\n\n:host(.tab-disabled.focus-visible) ::slotted(road-icon),\n:host(.tab-disabled.focus-visible) ::slotted(road-label),\n:host(.tab-disabled:hover) ::slotted(road-icon),\n:host(.tab-disabled:hover) ::slotted(road-label) {\n  color: var(--road-on-surface-disabled);\n  cursor: not-allowed;\n  fill: var(--road-on-surface-disabled);\n}\n\n\n/* NATIVE\n -------------------- */\n\n.button-native {\n  position: relative;\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: inherit;\n  align-items: inherit;\n  justify-content: inherit;\n  width: 100%;\n  height: 100%;\n  margin: 0;\n  overflow: visible;\n  font-family: inherit;\n  font-size: inherit;\n  font-style: inherit;\n  font-weight: inherit;\n  color: inherit;\n  text-align: inherit;\n  text-decoration: none;\n  text-indent: inherit;\n  text-overflow: inherit;\n  text-transform: inherit;\n  letter-spacing: inherit;\n  white-space: inherit;\n  cursor: pointer;\n  background: transparent;\n  border-color: initial;\n  border-style: initial;\n  border-width: 0;\n  border-radius: inherit;\n  border-image: initial;\n  outline: 0;\n  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n}\n\n:host(.tab-disabled) .button-native {\n  cursor: not-allowed;\n}\n\n/* INNER\n -------------------- */\n\n.button-inner {\n  position: relative;\n  z-index: 1;\n  display: flex;\n  flex-flow: inherit;\n  align-items: inherit;\n  justify-content: inherit;\n  width: 100%;\n  height: 100%;\n}\n\n/* ICON\n -------------------- */\n\n::slotted(road-icon) {\n  display: block;\n  width: 2rem;\n  height: 2rem;\n  margin-right: auto;\n  margin-bottom: 0.25rem;\n  margin-left: auto;\n  fill: currentColor;\n}\n\n/* TOOLTIP\n -------------------- */\n\n@media (min-width: 1200px) {\n\n  :host ::slotted(road-tooltip) {\n    width: 100%;\n  }\n\n}\n\n/* LABEL\n -------------------- */\n\n::slotted(road-label) {\n  position: relative;\n  box-sizing: border-box;\n  display: flex;\n  flex: 1;\n  flex-direction: column;\n  font-size: var(--road-label-small);\n  font-weight: 700;\n  text-align: center;\n  white-space: nowrap;\n}\n\n@media (min-width: 1200px) {\n\n  ::slotted(road-label)  {\n    display: block;\n  }\n}\n\n/* BADGE\n -------------------- */\n\n::slotted(road-badge) {\n  position: absolute;\n  top: 4px;\n  left: calc(50% + 0.375rem);\n  z-index: 1;\n  box-sizing: border-box;\n  height: auto;\n  font-size: var(--road-font-size-10);\n  font-weight: 400;\n}\n","import { Component, Host, h, Element, Prop, Event, EventEmitter, Listen } from '@stencil/core';\n\n/**\n * @slot  - Content of the item, it should be road-icon and road-label elements.\n *\n * @part native - The native HTML anchor element that wraps all child elements.\n */\n\n@Component({\n  tag: 'road-navbar-item',\n  styleUrl: 'navbar-item.css',\n  shadow: true,\n})\nexport class NavbarItem {\n\n  @Element() el!: HTMLRoadNavbarItemElement;\n\n  /**\n   * If `true`, the user cannot interact with the tab button.\n   */\n  @Prop() disabled = false;\n\n  /**\n   * This attribute instructs browsers to download a URL instead of navigating to\n   * it, so the user will be prompted to save it as a local file. If the attribute\n   * has a value, it is used as the pre-filled file name in the Save prompt\n   * (the user can still change the file name if they want).\n   */\n  @Prop() download: string | undefined;\n\n  /**\n   * Contains a URL or a URL fragment that the hyperlink points to.\n   * If this property is set, an anchor tag will be rendered.\n   */\n  @Prop() href: string | undefined;\n\n  /**\n   * Specifies the relationship of the target object to the link object.\n   * The value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types).\n   */\n  @Prop() rel: string | undefined;\n\n  /**\n   * The selected tab component\n   */\n  @Prop({ mutable: true }) selected = false;\n\n  /**\n   * A tab id must be provided for each `road-tab`. It's used internally to reference\n   * the selected tab.\n   */\n  @Prop() tab?: string;\n\n  /**\n   * Specifies where to display the linked URL.\n   * Only applies when an `href` is provided.\n   * Special keywords: `\"_blank\"`, `\"_self\"`, `\"_parent\"`, `\"_top\"`.\n   */\n  @Prop() target: string | undefined;\n\n  /**\n   * Emitted when the tab bar is clicked\n   * @internal\n   */\n  @Event() roadnavbaritemclick!: EventEmitter;\n  /** @internal */\n  @Event() roadNavbarItemClick!: EventEmitter;\n\n  @Listen('roadNavbarChanged', { target: 'window' })\n  @Listen('roadnavbarchanged', { target: 'window' })\n  onNavbarChanged(ev: CustomEvent) {\n    this.selected = this.tab === ev.detail.tab;\n  }\n\n  private selectTab(ev: Event | KeyboardEvent) {\n    if (this.tab !== undefined) {\n      if (!this.disabled) {\n        this.roadnavbaritemclick.emit({\n          tab: this.tab,\n          href: this.href,\n          selected: this.selected,\n        });\n        this.roadNavbarItemClick.emit({\n          tab: this.tab,\n          href: this.href,\n          selected: this.selected,\n        });\n      }\n      if(this.href === undefined) {\n        ev.preventDefault();\n      }\n    }\n  }\n\n  private onKeyUp = (ev: KeyboardEvent) => {\n    if (ev.key === 'Enter' || ev.key === ' ') {\n      this.selectTab(ev);\n    }\n  };\n\n  private onClick = (ev: Event) => {\n    this.selectTab(ev);\n  };\n\n  render() {\n    const { href, rel, target, selected, tab, disabled } = this;\n    const attrs = {\n      download: this.download,\n      href,\n      rel,\n      target,\n    };\n\n    return (\n      <Host\n        onClick={this.onClick}\n        onKeyup={this.onKeyUp}\n        role=\"tab\"\n        tabindex=\"0\"\n        aria-selected={selected ? 'true' : null}\n        id={tab !== undefined ? `navbar-item-${tab}` : null}\n        disabled={disabled}\n        class={{\n          'navbar-item': true,\n          'tab-selected': selected,\n          'tab-disabled': disabled,\n        }}\n      >\n        <a {...attrs} tabIndex={-1} class=\"button-native\" part=\"native\">\n          <span class=\"button-inner\">\n            <slot/>\n          </span>\n        </a>\n      </Host>\n    );\n  }\n\n}\n"],"mappings":"2DAAA,MAAMA,EAAgB,iiG,MCaTC,EAAU,M,2IAiFbC,KAAAC,QAAWC,IACjB,GAAIA,EAAGC,MAAQ,SAAWD,EAAGC,MAAQ,IAAK,CACxCH,KAAKI,UAAUF,E,GAIXF,KAAAK,QAAWH,IACjBF,KAAKI,UAAUF,EAAG,E,cAjFD,M,6EAyBiB,M,yCAyBpC,eAAAI,CAAgBJ,GACdF,KAAKO,SAAWP,KAAKQ,MAAQN,EAAGO,OAAOD,G,CAGjC,SAAAJ,CAAUF,GAChB,GAAIF,KAAKQ,MAAQE,UAAW,CAC1B,IAAKV,KAAKW,SAAU,CAClBX,KAAKY,oBAAoBC,KAAK,CAC5BL,IAAKR,KAAKQ,IACVM,KAAMd,KAAKc,KACXP,SAAUP,KAAKO,WAEjBP,KAAKe,oBAAoBF,KAAK,CAC5BL,IAAKR,KAAKQ,IACVM,KAAMd,KAAKc,KACXP,SAAUP,KAAKO,U,CAGnB,GAAGP,KAAKc,OAASJ,UAAW,CAC1BR,EAAGc,gB,GAeT,MAAAC,GACE,MAAMH,KAAEA,EAAII,IAAEA,EAAGC,OAAEA,EAAMZ,SAAEA,EAAQC,IAAEA,EAAGG,SAAEA,GAAaX,KACvD,MAAMoB,EAAQ,CACZC,SAAUrB,KAAKqB,SACfP,OACAI,MACAC,UAGF,OACEG,EAACC,EAAI,CACHlB,QAASL,KAAKK,QACdmB,QAASxB,KAAKC,QACdwB,KAAK,MACLC,SAAS,IAAG,gBACGnB,EAAW,OAAS,KACnCoB,GAAInB,IAAQE,UAAY,eAAeF,IAAQ,KAC/CG,SAAUA,EACViB,MAAO,CACL,cAAe,KACf,eAAgBrB,EAChB,eAAgBI,IAGlBW,EAAA,IAAAO,OAAAC,OAAA,GAAOV,EAAK,CAAEW,UAAW,EAAGH,MAAM,gBAAgBI,KAAK,WACrDV,EAAA,QAAMM,MAAM,gBACVN,EAAA,e"}

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

@@ -0,0 +1,2 @@
+import{r as i,c as e,h as a,H as o,a as t}from"./p-f3d586b3.js";import{a as s,d as n,e as d,f as r,g as l}from"./p-73fe2357.js";const c=":host{--z-index:3;position:fixed;top:0;left:0;z-index:var(--z-index);display:flex;align-items:center;justify-content:center;width:100%;height:100%;overflow:hidden;font-family:var(--road-font, sans-serif);line-height:1.5;color:var(--road-on-surface);visibility:hidden !important;opacity:0;transition:opacity 0.15s linear, visibility 0.15s}.dialog-overlay{position:absolute;top:0;right:0;bottom:0;left:0;display:block;touch-action:none;background:var(--road-overlay)}:host(.dialog-has-close) .dialog-overlay{cursor:pointer}.dialog-modal{position:relative;width:auto;margin:1rem;pointer-events:none;transition:transform 0.3s ease-out;transform:translateY(50px)}:host(.dialog-open){visibility:visible !important;opacity:1}:host(.dialog-open) .dialog-modal{transform:none}.dialog-content{position:relative;display:flex;flex-direction:column;width:100%;padding:0 0 1.5rem;pointer-events:auto;background:var(--road-surface);background-clip:padding-box;border-radius:0.25rem;outline:0;box-shadow:var(--road-elevation-highest)}@media (min-width: 576px){.dialog-content{max-width:454px}}.dialog-header{display:flex;align-items:center;justify-content:flex-end;height:100%;max-height:2.75rem;margin-bottom:2rem}.dialog-close{display:flex;align-items:center;align-self:flex-start;justify-content:center;width:3.5rem;height:3.5rem;padding:0;color:inherit;cursor:pointer;background:transparent;border:0;-webkit-appearance:none;appearance:none;-webkit-tap-highlight-color:rgba(0, 0, 0, 0)}.dialog-icon{display:inline-block;width:3rem;height:3rem;font-size:var(--road-font-size-48)}.dialog-body{padding:0 1.5rem;text-align:center}@media (min-width: 768px){.dialog-body{padding:0 3rem}}.dialog-title{padding:0;margin:0 0 1rem;font-size:var(--road-body-medium);font-weight:700;line-height:1.2}.dialog-description{margin:0 0 0.5rem;overflow:auto;font-size:var(--road-body-medium)}.dialog-footer{display:flex;justify-content:center;padding:0 1.5rem}.dialog-footer ::slotted(road-button){margin-top:1rem}.dialog-footer .btn{min-width:130px;max-width:calc(50% - 0.5rem)}";const h=class{constructor(a){i(this,a);this.onClose=e(this,"close",7);this.onClick=i=>{i.stopPropagation();i.preventDefault();this.close()};this.isOpen=false;this.hasCloseIcon=true;this.color=undefined;this.icon=undefined;this.label=undefined;this.description=undefined}async open(){this.isOpen=true}async close(){this.isOpen=false;this.el.addEventListener("transitionend",(()=>{this.onClose.emit()}),{once:true})}onEscape(i){if((i.key==="Escape"||i.key==="Esc")&&this.isOpen&&this.hasCloseIcon){this.close()}}componentDidLoad(){this.el.querySelectorAll('[data-dismiss="modal"]').forEach((i=>{i.addEventListener("click",(()=>this.close()))}))}render(){const i=this.isOpen?"dialog-open":"";const e=this.hasCloseIcon?"dialog-has-close":"";let t;if(this.icon){t=this.icon}else{switch(this.color){case"info":t=n;break;case"success":t=l;break;case"warning":t=r;break;case"danger":t=d;break;default:t=n;break}}return a(o,{class:`dialog ${i} ${e}`,role:"alertdialog","aria-modal":"true",tabindex:"-1","aria-labelledby":"dialogLabel","aria-describedby":"dialogDesc"},a("div",{class:"dialog-overlay",onClick:this.hasCloseIcon===true?this.onClick:undefined,tabindex:"-1"}),a("div",{class:"dialog-modal",role:"document",tabindex:"0"},a("div",{class:"dialog-content"},a("header",{class:"dialog-header"},this.hasCloseIcon?a("button",{type:"button",class:"dialog-close",onClick:this.onClick,"aria-label":"Close"},a("road-icon",{icon:s,"aria-hidden":"true"})):""),a("div",{class:"dialog-body"},this.color!==undefined?a("road-icon",{class:"dialog-icon",part:"dialog-icon",color:this.color,icon:t,"aria-hidden":"true"}):"",a("h2",{class:"dialog-title",id:"dialogLabel"},this.label),a("p",{class:"dialog-description",id:"dialogDesc"},this.description)),a("footer",{class:"dialog-footer"},a("slot",null)))))}get el(){return t(this)}};h.style=c;export{h as road_dialog};
+//# sourceMappingURL=p-6e3e0b40.entry.js.map

package/dist/roadtrip/{p-d794a8d4.entry.js.map → p-6e3e0b40.entry.js.map}

@@ -1 +1 @@
-{"version":3,"names":["dialogCss","Dialog","this","onClick","ev","stopPropagation","preventDefault","close","open","isOpen","el","addEventListener","onClose","emit","once","onEscape","event","key","hasCloseIcon","componentDidLoad","querySelectorAll","forEach","item","render","modalIsOpenClass","modalhasClose","icon","color","alertInfoOutline","alertSuccessOutline","alertWarningOutline","alertDangerOutline","h","Host","class","role","tabindex","undefined","type","navigationClose","part","id","label","description"],"sources":["src/components/dialog/dialog.css?tag=road-dialog&encapsulation=shadow","src/components/dialog/dialog.tsx"],"sourcesContent":["/*\n * Dialog\n *\n * Index\n * - Overlay\n * - Dialog\n * - Content\n * - Header\n * - Close\n * - Body\n * - Title\n * - Description\n * - Footer\n */\n\n/**\n * @prop --z-index: The z-index of the Dialog.\n */\n\n:host {\n  --z-index: 3;\n\n  position: fixed;\n  top: 0;\n  left: 0;\n  z-index: var(--z-index);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 100%;\n  height: 100%;\n  overflow: hidden;\n  font-family: var(--road-font, sans-serif);\n  line-height: 1.5;\n  color: var(--road-on-surface);\n  visibility: hidden !important;\n  opacity: 0;\n  transition: opacity 0.15s linear, visibility 0.15s;\n}\n\n/* OVERLAY\n -------------------- */\n\n.dialog-overlay {\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  display: block;\n  touch-action: none;\n  background: var(--road-overlay);\n}\n\n:host(.dialog-has-close) .dialog-overlay {\n  cursor: pointer;\n}\n\n/* DIALOG\n -------------------- */\n\n.dialog-modal {\n  position: relative;\n  width: auto;\n  margin: 1rem;\n  pointer-events: none;\n  transition: transform 0.3s ease-out;\n  transform: translateY(50px);\n}\n\n/**\n * Open state\n */\n\n:host(.dialog-open) {\n  visibility: visible !important;\n  opacity: 1;\n}\n\n:host(.dialog-open) .dialog-modal {\n  transform: none;\n}\n\n/* CONTENT\n -------------------- */\n\n.dialog-content {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  padding: 0 0 1.5rem;\n  pointer-events: auto;\n  background: var(--road-surface);\n  background-clip: padding-box;\n  border-radius: 0.25rem;\n  outline: 0;\n  box-shadow: var(--road-elevation-highest);\n}\n\n@media (min-width: 576px) {\n\n  .dialog-content {\n    max-width: 454px;\n  }\n}\n\n/* HEADER\n -------------------- */\n\n.dialog-header {\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n  height: 100%;\n  max-height: 2.75rem;\n  margin-bottom: 2rem;\n}\n\n/* CLOSE\n -------------------- */\n\n.dialog-close {\n  display: flex;\n  align-items: center;\n  align-self: flex-start;\n  justify-content: center;\n  width: 3.5rem;\n  height: 3.5rem;\n  padding: 0;\n  color: inherit;\n  cursor: pointer;\n  background: transparent;\n  border: 0;\n  appearance: none;\n  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n}\n\n.dialog-icon {\n  display: inline-block;\n  width: 3rem;\n  height: 3rem;\n  font-size: var(--road-font-size-48);\n}\n\n/* BODY\n -------------------- */\n\n.dialog-body {\n  padding: 0 1.5rem;\n  text-align: center;\n}\n\n@media (min-width: 768px) {\n\n  .dialog-body {\n    padding: 0 3rem;\n  }\n}\n\n/* TITLE\n -------------------- */\n\n.dialog-title {\n  padding: 0;\n  margin: 0 0 1rem;\n  font-size: var(--road-body-medium);\n  font-weight: 700;\n  line-height: 1.2;\n}\n\n/* DESCRIPTION\n -------------------- */\n\n.dialog-description {\n  margin: 0 0 0.5rem;\n  overflow: auto;\n  font-size: var(--road-body-medium);\n}\n\n/* FOOTER\n -------------------- */\n\n.dialog-footer {\n  display: flex;\n  justify-content: center;\n  padding: 0 1.5rem;\n}\n\n.dialog-footer ::slotted(road-button) {\n  margin-top: 1rem;\n}\n\n/**\n * Footer buttons\n */\n\n.dialog-footer .btn {\n  min-width: 130px;\n  max-width: calc(50% - 0.5rem);\n}\n","import { Component, Element, Event, EventEmitter, Listen, Method, Prop, h, Host } from '@stencil/core';\nimport { FeedbackColors } from '../../interface';\nimport { navigationClose, alertDangerOutline, alertInfoOutline, alertSuccessOutline, alertWarningOutline } from '../../../icons';\n\n/**\n * @slot  - Content of the footer dialog if it's an action dialog add action buttons here.\n *\n * @part dialog-icon - main icon of the dialog\n */\n\n@Component({\n  tag: 'road-dialog',\n  styleUrl: 'dialog.css',\n  shadow: true,\n})\nexport class Dialog {\n\n  /**\n   * Current reference of the dialog\n   */\n  @Element() el!: HTMLRoadDialogElement;\n\n  /**\n   * Set isOpen property to true to open the dialog\n   */\n  @Prop({ mutable: true }) isOpen: boolean = false;\n\n  /**\n   * Show / hide the close icon\n   */\n  @Prop() hasCloseIcon: boolean = true;\n\n  /**\n   * Set the color of information dialog. e.g. info, success, warning, danger\n   */\n  @Prop() color?: FeedbackColors;\n\n  /**\n   * override default icon\n   */\n   @Prop() icon?: string;\n\n  /**\n   * Text to the top\n   */\n  @Prop() label?: string;\n\n  /**\n   * Content description of the dialog\n   */\n  @Prop() description?: string;\n\n  /**\n   * Indicate when closing the dialog\n   */\n  @Event({ eventName: 'close' }) onClose!: EventEmitter<void>;\n\n  /**\n   * Open the dialog\n   */\n  @Method()\n  async open() {\n    this.isOpen = true;\n  }\n\n  /**\n   * Close the dialog\n   */\n  @Method()\n  async close() {\n    this.isOpen = false;\n    this.el.addEventListener('transitionend', () => {\n      this.onClose.emit();\n    }, { once: true});\n  }\n\n  /**\n   * Close the dialog when clicking on the cross or layer\n   */\n  private onClick = (ev: UIEvent) => {\n    ev.stopPropagation();\n    ev.preventDefault();\n\n    this.close();\n  };\n\n  /**\n   * Close the dialog when press Escape key\n   */\n  @Listen('keyup', { target: 'document' })\n  onEscape(event: KeyboardEvent) {\n    if ((event.key === 'Escape' || event.key === \"Esc\") && this.isOpen && this.hasCloseIcon) {\n      this.close();\n    }\n  }\n\n  /**\n   * Call close function when clicking an element with data-dismiss=\"modal\" attribute\n   */\n  componentDidLoad() {\n    this.el.querySelectorAll('[data-dismiss=\"modal\"]').forEach(item => {\n      item.addEventListener('click', () => this.close());\n    });\n  }\n\n  render() {\n    const modalIsOpenClass = this.isOpen ? 'dialog-open' : '';\n    const modalhasClose = this.hasCloseIcon ? 'dialog-has-close' : '';\n\n    let icon;\n\n    if(this.icon) {\n      icon = this.icon;\n    } else {\n      switch(this.color) {\n      case 'info':\n        icon = alertInfoOutline;\n        break;\n      case 'success':\n        icon = alertSuccessOutline;\n        break;\n      case 'warning':\n        icon = alertWarningOutline;\n        break;\n      case 'danger':\n        icon = alertDangerOutline;\n        break;\n      default:\n        icon = alertInfoOutline;\n        break;\n      }\n    }\n\n    return (\n      <Host class={`dialog ${modalIsOpenClass} ${modalhasClose}`} role=\"alertdialog\" aria-modal=\"true\" tabindex=\"-1\" aria-labelledby=\"dialogLabel\" aria-describedby=\"dialogDesc\">\n        <div class=\"dialog-overlay\" onClick={this.hasCloseIcon === true ? this.onClick : undefined} tabindex=\"-1\"></div>\n        <div class=\"dialog-modal\" role=\"document\" tabindex=\"0\">\n          <div class=\"dialog-content\">\n            <header class=\"dialog-header\">\n              {this.hasCloseIcon\n                ? <button type=\"button\" class=\"dialog-close\" onClick={this.onClick} aria-label=\"Close\"><road-icon icon={navigationClose} aria-hidden=\"true\"></road-icon></button>\n                : ''}\n            </header>\n            <div class=\"dialog-body\">\n              {this.color !== undefined\n                ? <road-icon class=\"dialog-icon\" part=\"dialog-icon\" color={this.color} icon={icon} aria-hidden=\"true\"></road-icon>\n                : ''}\n              <h2 class=\"dialog-title\" id=\"dialogLabel\">{this.label}</h2>\n              <p class=\"dialog-description\" id=\"dialogDesc\">{this.description}</p>\n            </div>\n            <footer class=\"dialog-footer\">\n              <slot/>\n            </footer>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}"],"mappings":"gIAAA,MAAMA,EAAY,uhE,MCeLC,EAAM,M,wDAgETC,KAAAC,QAAWC,IACjBA,EAAGC,kBACHD,EAAGE,iBAEHJ,KAAKK,OAAO,E,YA1D6B,M,kBAKX,K,yFA+BhC,UAAMC,GACJN,KAAKO,OAAS,I,CAOhB,WAAMF,GACJL,KAAKO,OAAS,MACdP,KAAKQ,GAAGC,iBAAiB,iBAAiB,KACxCT,KAAKU,QAAQC,MAAM,GAClB,CAAEC,KAAM,M,CAiBb,QAAAC,CAASC,GACP,IAAKA,EAAMC,MAAQ,UAAYD,EAAMC,MAAQ,QAAUf,KAAKO,QAAUP,KAAKgB,aAAc,CACvFhB,KAAKK,O,EAOT,gBAAAY,GACEjB,KAAKQ,GAAGU,iBAAiB,0BAA0BC,SAAQC,IACzDA,EAAKX,iBAAiB,SAAS,IAAMT,KAAKK,SAAQ,G,CAItD,MAAAgB,GACE,MAAMC,EAAmBtB,KAAKO,OAAS,cAAgB,GACvD,MAAMgB,EAAgBvB,KAAKgB,aAAe,mBAAqB,GAE/D,IAAIQ,EAEJ,GAAGxB,KAAKwB,KAAM,CACZA,EAAOxB,KAAKwB,I,KACP,CACL,OAAOxB,KAAKyB,OACZ,IAAK,OACHD,EAAOE,EACP,MACF,IAAK,UACHF,EAAOG,EACP,MACF,IAAK,UACHH,EAAOI,EACP,MACF,IAAK,SACHJ,EAAOK,EACP,MACF,QACEL,EAAOE,EACP,M,CAIJ,OACEI,EAACC,EAAI,CAACC,MAAO,UAAUV,KAAoBC,IAAiBU,KAAK,cAAa,aAAY,OAAOC,SAAS,KAAI,kBAAiB,cAAa,mBAAkB,cAC5JJ,EAAA,OAAKE,MAAM,iBAAiB/B,QAASD,KAAKgB,eAAiB,KAAOhB,KAAKC,QAAUkC,UAAWD,SAAS,OACrGJ,EAAA,OAAKE,MAAM,eAAeC,KAAK,WAAWC,SAAS,KACjDJ,EAAA,OAAKE,MAAM,kBACTF,EAAA,UAAQE,MAAM,iBACXhC,KAAKgB,aACFc,EAAA,UAAQM,KAAK,SAASJ,MAAM,eAAe/B,QAASD,KAAKC,QAAO,aAAa,SAAQ6B,EAAA,aAAWN,KAAMa,EAAe,cAAc,UACnI,IAENP,EAAA,OAAKE,MAAM,eACRhC,KAAKyB,QAAUU,UACZL,EAAA,aAAWE,MAAM,cAAcM,KAAK,cAAcb,MAAOzB,KAAKyB,MAAOD,KAAMA,EAAI,cAAc,SAC7F,GACJM,EAAA,MAAIE,MAAM,eAAeO,GAAG,eAAevC,KAAKwC,OAChDV,EAAA,KAAGE,MAAM,qBAAqBO,GAAG,cAAcvC,KAAKyC,cAEtDX,EAAA,UAAQE,MAAM,iBACZF,EAAA,gB"}
+{"version":3,"names":["dialogCss","Dialog","this","onClick","ev","stopPropagation","preventDefault","close","open","isOpen","el","addEventListener","onClose","emit","once","onEscape","event","key","hasCloseIcon","componentDidLoad","querySelectorAll","forEach","item","render","modalIsOpenClass","modalhasClose","icon","color","alertInfoOutline","alertSuccessOutline","alertWarningOutline","alertDangerOutline","h","Host","class","role","tabindex","undefined","type","navigationClose","part","id","label","description"],"sources":["src/components/dialog/dialog.css?tag=road-dialog&encapsulation=shadow","src/components/dialog/dialog.tsx"],"sourcesContent":["/*\n * Dialog\n *\n * Index\n * - Overlay\n * - Dialog\n * - Content\n * - Header\n * - Close\n * - Body\n * - Title\n * - Description\n * - Footer\n */\n\n/**\n * @prop --z-index: The z-index of the Dialog.\n */\n\n:host {\n  --z-index: 3;\n\n  position: fixed;\n  top: 0;\n  left: 0;\n  z-index: var(--z-index);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 100%;\n  height: 100%;\n  overflow: hidden;\n  font-family: var(--road-font, sans-serif);\n  line-height: 1.5;\n  color: var(--road-on-surface);\n  visibility: hidden !important;\n  opacity: 0;\n  transition: opacity 0.15s linear, visibility 0.15s;\n}\n\n/* OVERLAY\n -------------------- */\n\n.dialog-overlay {\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  display: block;\n  touch-action: none;\n  background: var(--road-overlay);\n}\n\n:host(.dialog-has-close) .dialog-overlay {\n  cursor: pointer;\n}\n\n/* DIALOG\n -------------------- */\n\n.dialog-modal {\n  position: relative;\n  width: auto;\n  margin: 1rem;\n  pointer-events: none;\n  transition: transform 0.3s ease-out;\n  transform: translateY(50px);\n}\n\n/**\n * Open state\n */\n\n:host(.dialog-open) {\n  visibility: visible !important;\n  opacity: 1;\n}\n\n:host(.dialog-open) .dialog-modal {\n  transform: none;\n}\n\n/* CONTENT\n -------------------- */\n\n.dialog-content {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  padding: 0 0 1.5rem;\n  pointer-events: auto;\n  background: var(--road-surface);\n  background-clip: padding-box;\n  border-radius: 0.25rem;\n  outline: 0;\n  box-shadow: var(--road-elevation-highest);\n}\n\n@media (min-width: 576px) {\n\n  .dialog-content {\n    max-width: 454px;\n  }\n}\n\n/* HEADER\n -------------------- */\n\n.dialog-header {\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n  height: 100%;\n  max-height: 2.75rem;\n  margin-bottom: 2rem;\n}\n\n/* CLOSE\n -------------------- */\n\n.dialog-close {\n  display: flex;\n  align-items: center;\n  align-self: flex-start;\n  justify-content: center;\n  width: 3.5rem;\n  height: 3.5rem;\n  padding: 0;\n  color: inherit;\n  cursor: pointer;\n  background: transparent;\n  border: 0;\n  appearance: none;\n  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n}\n\n.dialog-icon {\n  display: inline-block;\n  width: 3rem;\n  height: 3rem;\n  font-size: var(--road-font-size-48);\n}\n\n/* BODY\n -------------------- */\n\n.dialog-body {\n  padding: 0 1.5rem;\n  text-align: center;\n}\n\n@media (min-width: 768px) {\n\n  .dialog-body {\n    padding: 0 3rem;\n  }\n}\n\n/* TITLE\n -------------------- */\n\n.dialog-title {\n  padding: 0;\n  margin: 0 0 1rem;\n  font-size: var(--road-body-medium);\n  font-weight: 700;\n  line-height: 1.2;\n}\n\n/* DESCRIPTION\n -------------------- */\n\n.dialog-description {\n  margin: 0 0 0.5rem;\n  overflow: auto;\n  font-size: var(--road-body-medium);\n}\n\n/* FOOTER\n -------------------- */\n\n.dialog-footer {\n  display: flex;\n  justify-content: center;\n  padding: 0 1.5rem;\n}\n\n.dialog-footer ::slotted(road-button) {\n  margin-top: 1rem;\n}\n\n/**\n * Footer buttons\n */\n\n.dialog-footer .btn {\n  min-width: 130px;\n  max-width: calc(50% - 0.5rem);\n}\n","import { Component, Element, Event, EventEmitter, Listen, Method, Prop, h, Host } from '@stencil/core';\nimport { FeedbackColors } from '../../interface';\nimport { navigationClose, alertDangerOutline, alertInfoOutline, alertSuccessOutline, alertWarningOutline } from '../../../icons';\n\n/**\n * @slot  - Content of the footer dialog if it's an action dialog add action buttons here.\n *\n * @part dialog-icon - main icon of the dialog\n */\n\n@Component({\n  tag: 'road-dialog',\n  styleUrl: 'dialog.css',\n  shadow: true,\n})\nexport class Dialog {\n\n  /**\n   * Current reference of the dialog\n   */\n  @Element() el!: HTMLRoadDialogElement;\n\n  /**\n   * Set isOpen property to true to open the dialog\n   */\n  @Prop({ mutable: true }) isOpen: boolean = false;\n\n  /**\n   * Show / hide the close icon\n   */\n  @Prop() hasCloseIcon: boolean = true;\n\n  /**\n   * Set the color of information dialog. e.g. info, success, warning, danger\n   */\n  @Prop() color?: FeedbackColors;\n\n  /**\n   * override default icon\n   */\n   @Prop() icon?: string;\n\n  /**\n   * Text to the top\n   */\n  @Prop() label?: string;\n\n  /**\n   * Content description of the dialog\n   */\n  @Prop() description?: string;\n\n  /**\n   * Indicate when closing the dialog\n   */\n  @Event({ eventName: 'close' }) onClose!: EventEmitter<void>;\n\n  /**\n   * Open the dialog\n   */\n  @Method()\n  async open() {\n    this.isOpen = true;\n  }\n\n  /**\n   * Close the dialog\n   */\n  @Method()\n  async close() {\n    this.isOpen = false;\n    this.el.addEventListener('transitionend', () => {\n      this.onClose.emit();\n    }, { once: true});\n  }\n\n  /**\n   * Close the dialog when clicking on the cross or layer\n   */\n  private onClick = (ev: UIEvent) => {\n    ev.stopPropagation();\n    ev.preventDefault();\n\n    this.close();\n  };\n\n  /**\n   * Close the dialog when press Escape key\n   */\n  @Listen('keyup', { target: 'document' })\n  onEscape(event: KeyboardEvent) {\n    if ((event.key === 'Escape' || event.key === \"Esc\") && this.isOpen && this.hasCloseIcon) {\n      this.close();\n    }\n  }\n\n  /**\n   * Call close function when clicking an element with data-dismiss=\"modal\" attribute\n   */\n  componentDidLoad() {\n    this.el.querySelectorAll('[data-dismiss=\"modal\"]').forEach(item => {\n      item.addEventListener('click', () => this.close());\n    });\n  }\n\n  render() {\n    const modalIsOpenClass = this.isOpen ? 'dialog-open' : '';\n    const modalhasClose = this.hasCloseIcon ? 'dialog-has-close' : '';\n\n    let icon;\n\n    if(this.icon) {\n      icon = this.icon;\n    } else {\n      switch(this.color) {\n      case 'info':\n        icon = alertInfoOutline;\n        break;\n      case 'success':\n        icon = alertSuccessOutline;\n        break;\n      case 'warning':\n        icon = alertWarningOutline;\n        break;\n      case 'danger':\n        icon = alertDangerOutline;\n        break;\n      default:\n        icon = alertInfoOutline;\n        break;\n      }\n    }\n\n    return (\n      <Host class={`dialog ${modalIsOpenClass} ${modalhasClose}`} role=\"alertdialog\" aria-modal=\"true\" tabindex=\"-1\" aria-labelledby=\"dialogLabel\" aria-describedby=\"dialogDesc\">\n        <div class=\"dialog-overlay\" onClick={this.hasCloseIcon === true ? this.onClick : undefined} tabindex=\"-1\"></div>\n        <div class=\"dialog-modal\" role=\"document\" tabindex=\"0\">\n          <div class=\"dialog-content\">\n            <header class=\"dialog-header\">\n              {this.hasCloseIcon\n                ? <button type=\"button\" class=\"dialog-close\" onClick={this.onClick} aria-label=\"Close\"><road-icon icon={navigationClose} aria-hidden=\"true\"></road-icon></button>\n                : ''}\n            </header>\n            <div class=\"dialog-body\">\n              {this.color !== undefined\n                ? <road-icon class=\"dialog-icon\" part=\"dialog-icon\" color={this.color} icon={icon} aria-hidden=\"true\"></road-icon>\n                : ''}\n              <h2 class=\"dialog-title\" id=\"dialogLabel\">{this.label}</h2>\n              <p class=\"dialog-description\" id=\"dialogDesc\">{this.description}</p>\n            </div>\n            <footer class=\"dialog-footer\">\n              <slot/>\n            </footer>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}"],"mappings":"gIAAA,MAAMA,EAAY,kgE,MCeLC,EAAM,M,wDAgETC,KAAAC,QAAWC,IACjBA,EAAGC,kBACHD,EAAGE,iBAEHJ,KAAKK,OAAO,E,YA1D6B,M,kBAKX,K,yFA+BhC,UAAMC,GACJN,KAAKO,OAAS,I,CAOhB,WAAMF,GACJL,KAAKO,OAAS,MACdP,KAAKQ,GAAGC,iBAAiB,iBAAiB,KACxCT,KAAKU,QAAQC,MAAM,GAClB,CAAEC,KAAM,M,CAiBb,QAAAC,CAASC,GACP,IAAKA,EAAMC,MAAQ,UAAYD,EAAMC,MAAQ,QAAUf,KAAKO,QAAUP,KAAKgB,aAAc,CACvFhB,KAAKK,O,EAOT,gBAAAY,GACEjB,KAAKQ,GAAGU,iBAAiB,0BAA0BC,SAAQC,IACzDA,EAAKX,iBAAiB,SAAS,IAAMT,KAAKK,SAAQ,G,CAItD,MAAAgB,GACE,MAAMC,EAAmBtB,KAAKO,OAAS,cAAgB,GACvD,MAAMgB,EAAgBvB,KAAKgB,aAAe,mBAAqB,GAE/D,IAAIQ,EAEJ,GAAGxB,KAAKwB,KAAM,CACZA,EAAOxB,KAAKwB,I,KACP,CACL,OAAOxB,KAAKyB,OACZ,IAAK,OACHD,EAAOE,EACP,MACF,IAAK,UACHF,EAAOG,EACP,MACF,IAAK,UACHH,EAAOI,EACP,MACF,IAAK,SACHJ,EAAOK,EACP,MACF,QACEL,EAAOE,EACP,M,CAIJ,OACEI,EAACC,EAAI,CAACC,MAAO,UAAUV,KAAoBC,IAAiBU,KAAK,cAAa,aAAY,OAAOC,SAAS,KAAI,kBAAiB,cAAa,mBAAkB,cAC5JJ,EAAA,OAAKE,MAAM,iBAAiB/B,QAASD,KAAKgB,eAAiB,KAAOhB,KAAKC,QAAUkC,UAAWD,SAAS,OACrGJ,EAAA,OAAKE,MAAM,eAAeC,KAAK,WAAWC,SAAS,KACjDJ,EAAA,OAAKE,MAAM,kBACTF,EAAA,UAAQE,MAAM,iBACXhC,KAAKgB,aACFc,EAAA,UAAQM,KAAK,SAASJ,MAAM,eAAe/B,QAASD,KAAKC,QAAO,aAAa,SAAQ6B,EAAA,aAAWN,KAAMa,EAAe,cAAc,UACnI,IAENP,EAAA,OAAKE,MAAM,eACRhC,KAAKyB,QAAUU,UACZL,EAAA,aAAWE,MAAM,cAAcM,KAAK,cAAcb,MAAOzB,KAAKyB,MAAOD,KAAMA,EAAI,cAAc,SAC7F,GACJM,EAAA,MAAIE,MAAM,eAAeO,GAAG,eAAevC,KAAKwC,OAChDV,EAAA,KAAGE,MAAM,qBAAqBO,GAAG,cAAcvC,KAAKyC,cAEtDX,EAAA,UAAQE,MAAM,iBACZF,EAAA,gB"}

package/dist/roadtrip/p-869a3d78.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;-webkit-appearance: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:not(:disabled):focus{border-color:var(--road-input-outline-variant);outline:0}.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-extra-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 a=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||""}};this.onBlur=()=>{this.roadblur.emit();this.roadBlur.emit()};this.onFocus=()=>{this.roadfocus.emit();this.roadFocus.emit()};this.selectId=`road-select-${c++}`;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(){this.roadchange.emit({value:this.value});this.roadChange.emit({value:this.value})}componentWillLoad(){if(this.value){this.addSelected()}}addSelected(){var e,s;const t=this.options.find((e=>e.value===this.value));const l=this.options.find((e=>e.selected));if(t){t.selected=true}if(l){l.selected=false}return(s=(e=this.options.find((e=>e.value===this.value)))===null||e===void 0?void 0:e.value)!==null&&s!==void 0?s:""}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:true,disabled:true,hidden:true,style:{display:"none"},value:""}),this.options&&this.options.map((e=>t("option",{value:e.value,selected:e.selected},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 c=0;a.style=r;export{a as road_select};
+//# sourceMappingURL=p-869a3d78.entry.js.map

package/dist/roadtrip/{p-be8aee32.entry.js.map → p-869a3d78.entry.js.map}

@@ -1 +1 @@
-{"version":3,"names":["selectCss","Select","this","onChange","ev","select","target","value","addSelected","onBlur","roadblur","emit","roadBlur","onFocus","roadfocus","roadFocus","selectIds","selectId","valueChanged","roadchange","roadChange","componentWillLoad","selectedOption","options","find","option","selectedOption2","selected","_b","_a","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.form-select:not(:disabled):focus {\n  border-color: var(--road-input-outline-variant);\n  outline: 0;\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-extra-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    this.roadchange.emit({\n      value: this.value,\n    });\n    this.roadChange.emit({\n      value: this.value,\n    });\n    this.value = this.addSelected();\n  }\n\n\n  componentWillLoad() {\n\n      this.value = this.addSelected();\n    \n      \n  }\n\n  addSelected() {\n    const selectedOption = this.options.find(option => option.value === this.value);\n    const selectedOption2 = this.options.find(option => option.selected);\n\n    if (selectedOption) {\n        selectedOption.selected = true;\n    }\n    if(selectedOption2){\n      selectedOption2.selected = false\n    }\n      \n\n    return this.options.find(option => option.value === this.value)?.value ?? '';\n\n  }\n\n  private onChange = (ev: Event) => {\n    const select = ev.target as HTMLSelectElement | null;\n    if (select) {\n      this.value = select.value || '';\n      this.value = this.addSelected();\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 selected disabled hidden style={{ display: 'none' }} value=\"\"></option>\n          {this.options && this.options.map(option => (\n            <option value={option.value} selected={option.selected}>{option.label}</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,izI,MCOLC,EAAM,M,uPA0HTC,KAAAC,SAAYC,IAClB,MAAMC,EAASD,EAAGE,OAClB,GAAID,EAAQ,CACVH,KAAKK,MAAQF,EAAOE,OAAS,GAC7BL,KAAKK,MAAQL,KAAKM,a,GAIdN,KAAAO,OAAS,KACfP,KAAKQ,SAASC,OACdT,KAAKU,SAASD,MAAM,EAGdT,KAAAW,QAAU,KAChBX,KAAKY,UAAUH,OACfT,KAAKa,UAAUJ,MAAM,E,cApII,eAAeK,M,aASrC,G,eAKwB,M,cAKD,M,UAKLd,KAAKe,S,cAKA,M,UAML,E,WAKc,K,WAKb,GAAGf,KAAKe,iB,0CAsChC,YAAAC,GACEhB,KAAKiB,WAAWR,KAAK,CACnBJ,MAAOL,KAAKK,QAEdL,KAAKkB,WAAWT,KAAK,CACnBJ,MAAOL,KAAKK,QAEdL,KAAKK,MAAQL,KAAKM,a,CAIpB,iBAAAa,GAEInB,KAAKK,MAAQL,KAAKM,a,CAKtB,WAAAA,G,QACE,MAAMc,EAAiBpB,KAAKqB,QAAQC,MAAKC,GAAUA,EAAOlB,QAAUL,KAAKK,QACzE,MAAMmB,EAAkBxB,KAAKqB,QAAQC,MAAKC,GAAUA,EAAOE,WAE3D,GAAIL,EAAgB,CAChBA,EAAeK,SAAW,I,CAE9B,GAAGD,EAAgB,CACjBA,EAAgBC,SAAW,K,CAI7B,OAAOC,GAAAC,EAAA3B,KAAKqB,QAAQC,MAAKC,GAAUA,EAAOlB,QAAUL,KAAKK,WAAM,MAAAsB,SAAA,SAAAA,EAAEtB,SAAK,MAAAqB,SAAA,EAAAA,EAAI,E,CAsB5E,MAAAE,GACE,MAAMC,EAAU7B,KAAKe,SAAW,SAChC,MAAMe,EAAgB9B,KAAKK,OAASL,KAAKK,QAAU,GAAK,YAAc,GACtE,MAAM0B,EAAiB/B,KAAKgC,QAAUC,WAAajC,KAAKgC,QAAU,GAAK,aAAe,GAEtF,OACEE,EAACC,EAAI,CAACC,MAAOpC,KAAKqC,OAAS,UAAUrC,KAAKqC,SACxCH,EAAA,UACEE,MAAO,eAAeN,KAAiBC,IACvCO,GAAItC,KAAKe,SAAQ,gBACFf,KAAKuC,SAAW,OAAS,KACxCC,UAAWxC,KAAKyC,UAChBF,SAAUvC,KAAKuC,SACfG,KAAM1C,KAAK0C,KACXC,SAAU3C,KAAK2C,SACfC,KAAM5C,KAAK4C,KACX3C,SAAUD,KAAKC,SACfU,QAASX,KAAKW,QACdJ,OAAQP,KAAKO,QAEb2B,EAAA,UAAQT,SAAQ,KAACc,SAAQ,KAACM,OAAM,KAACC,MAAO,CAAEC,QAAS,QAAU1C,MAAM,KAClEL,KAAKqB,SAAWrB,KAAKqB,QAAQ2B,KAAIzB,GAChCW,EAAA,UAAQ7B,MAAOkB,EAAOlB,MAAOoB,SAAUF,EAAOE,UAAWF,EAAO0B,UAGpEf,EAAA,SAAOE,MAAM,oBAAoBE,GAAIT,EAASqB,QAASlD,KAAKe,UAAWf,KAAKiD,OAC3EjD,KAAKgC,OAAShC,KAAKgC,QAAU,IAAME,EAAA,KAAGE,MAAM,oBAAoBpC,KAAKgC,O,wDAO9E,IAAIlB,EAAY,E"}
+{"version":3,"names":["selectCss","Select","this","onChange","ev","select","target","value","onBlur","roadblur","emit","roadBlur","onFocus","roadfocus","roadFocus","selectIds","selectId","valueChanged","roadchange","roadChange","componentWillLoad","addSelected","selectedOption","options","find","option","selectedOption2","selected","_b","_a","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.form-select:not(:disabled):focus {\n  border-color: var(--road-input-outline-variant);\n  outline: 0;\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-extra-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    this.roadchange.emit({\n      value: this.value,\n    });\n    this.roadChange.emit({\n      value: this.value,\n    });\n  }\n\n\n  componentWillLoad() {\n    if(this.value){\n      this.addSelected();\n    }\n  }\n    \n  addSelected() {\n    const selectedOption = this.options.find(option => option.value === this.value);\n    const selectedOption2 = this.options.find(option => option.selected);\n\n    if (selectedOption) {\n        selectedOption.selected = true;\n    }\n    if(selectedOption2){\n      selectedOption2.selected = false\n    }\n      \n\n    return this.options.find(option => option.value === this.value)?.value ?? '';\n\n  }\n\n  private onChange = (ev: Event) => {\n    const select = ev.target as HTMLSelectElement | null;\n    if (select) {\n      this.value = select.value || '';\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 selected disabled hidden style={{ display: 'none' }} value=\"\"></option>\n          {this.options && this.options.map(option => (\n            <option value={option.value} selected={option.selected}>{option.label}</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,4xI,MCOLC,EAAM,M,uPAwHTC,KAAAC,SAAYC,IAClB,MAAMC,EAASD,EAAGE,OAClB,GAAID,EAAQ,CACVH,KAAKK,MAAQF,EAAOE,OAAS,E,GAIzBL,KAAAM,OAAS,KACfN,KAAKO,SAASC,OACdR,KAAKS,SAASD,MAAM,EAGdR,KAAAU,QAAU,KAChBV,KAAKW,UAAUH,OACfR,KAAKY,UAAUJ,MAAM,E,cAjII,eAAeK,M,aASrC,G,eAKwB,M,cAKD,M,UAKLb,KAAKc,S,cAKA,M,UAML,E,WAKc,K,WAKb,GAAGd,KAAKc,iB,0CAsChC,YAAAC,GACEf,KAAKgB,WAAWR,KAAK,CACnBH,MAAOL,KAAKK,QAEdL,KAAKiB,WAAWT,KAAK,CACnBH,MAAOL,KAAKK,O,CAKhB,iBAAAa,GACE,GAAGlB,KAAKK,MAAM,CACZL,KAAKmB,a,EAIT,WAAAA,G,QACE,MAAMC,EAAiBpB,KAAKqB,QAAQC,MAAKC,GAAUA,EAAOlB,QAAUL,KAAKK,QACzE,MAAMmB,EAAkBxB,KAAKqB,QAAQC,MAAKC,GAAUA,EAAOE,WAE3D,GAAIL,EAAgB,CAChBA,EAAeK,SAAW,I,CAE9B,GAAGD,EAAgB,CACjBA,EAAgBC,SAAW,K,CAI7B,OAAOC,GAAAC,EAAA3B,KAAKqB,QAAQC,MAAKC,GAAUA,EAAOlB,QAAUL,KAAKK,WAAM,MAAAsB,SAAA,SAAAA,EAAEtB,SAAK,MAAAqB,SAAA,EAAAA,EAAI,E,CAqB5E,MAAAE,GACE,MAAMC,EAAU7B,KAAKc,SAAW,SAChC,MAAMgB,EAAgB9B,KAAKK,OAASL,KAAKK,QAAU,GAAK,YAAc,GACtE,MAAM0B,EAAiB/B,KAAKgC,QAAUC,WAAajC,KAAKgC,QAAU,GAAK,aAAe,GAEtF,OACEE,EAACC,EAAI,CAACC,MAAOpC,KAAKqC,OAAS,UAAUrC,KAAKqC,SACxCH,EAAA,UACEE,MAAO,eAAeN,KAAiBC,IACvCO,GAAItC,KAAKc,SAAQ,gBACFd,KAAKuC,SAAW,OAAS,KACxCC,UAAWxC,KAAKyC,UAChBF,SAAUvC,KAAKuC,SACfG,KAAM1C,KAAK0C,KACXC,SAAU3C,KAAK2C,SACfC,KAAM5C,KAAK4C,KACX3C,SAAUD,KAAKC,SACfS,QAASV,KAAKU,QACdJ,OAAQN,KAAKM,QAEb4B,EAAA,UAAQT,SAAQ,KAACc,SAAQ,KAACM,OAAM,KAACC,MAAO,CAAEC,QAAS,QAAU1C,MAAM,KAClEL,KAAKqB,SAAWrB,KAAKqB,QAAQ2B,KAAIzB,GAChCW,EAAA,UAAQ7B,MAAOkB,EAAOlB,MAAOoB,SAAUF,EAAOE,UAAWF,EAAO0B,UAGpEf,EAAA,SAAOE,MAAM,oBAAoBE,GAAIT,EAASqB,QAASlD,KAAKc,UAAWd,KAAKiD,OAC3EjD,KAAKgC,OAAShC,KAAKgC,QAAU,IAAME,EAAA,KAAGE,MAAM,oBAAoBpC,KAAKgC,O,wDAO9E,IAAInB,EAAY,E"}