@roadtrip/components 3.20.3 → 3.21.0

package/dist/roadtrip/p-0c4ae774.entry.js

@@ -0,0 +1,2 @@
+import{r as e,c as r,h as t}from"./p-f3d586b3.js";import{l as a}from"./p-ac7a8bca.js";const n=".sc-road-plate-number-h{display:block}.plate-number.sc-road-plate-number{--margin-bottom:0}.plate-number-start.sc-road-plate-number,.plate-number-end.sc-road-plate-number{width:1.75rem;height:calc(3rem - 0.25rem);background:var(--road-info-50)}.input-group-prepend.sc-road-plate-number{margin-right:-1px}.input-group-prepend.sc-road-plate-number,.input-group-append.sc-road-plate-number{padding:0}.plate-number-start.sc-road-plate-number{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0;margin-right:0;margin-left:1px;color:var(--road-icon-inverse);border-radius:0.125rem 0 0 0.125rem}.plate-number-icon.sc-road-plate-number{width:1.25rem;height:1.25rem;color:#f3db53}.plate-number-location.sc-road-plate-number{font-size:var(--road-button-medium);font-weight:700}.plate-number-end.sc-road-plate-number{margin-right:1px;border-radius:0 0.125rem 0.125rem 0}.plate-number-be.sc-road-plate-number .plate-number-input.sc-road-plate-number{color:var(--road-on-danger-surface)}.plate-number-be.sc-road-plate-number .plate-number-input.sc-road-plate-number,.plate-number-be.sc-road-plate-number .input-group-append.sc-road-plate-number,.plate-number-be.sc-road-plate-number .input-group-prepend.sc-road-plate-number{border-color:var(--road-danger-outline)}.plate-number-input.sc-road-plate-number{position:relative;display:block;height:3rem;margin:0;font-family:var(--road-font, sans-serif);font-size:var(--road-heading-04);font-weight:700;color:var(--road-on-surface);text-align:center;background:var(--road-surface);border:1px solid var(--road-input-outline);border-radius:0;outline:0;box-shadow:none;appearance:none}.plate-number-input.sc-road-plate-number::placeholder{color:var(--road-on-surface-weak);opacity:1}.plate-number-input.sc-road-plate-number:disabled{color:var(--road-on-surface-disabled);cursor:not-allowed;background:var(--road-surface-disabled);opacity:1}.plate-number-input.sc-road-plate-number:disabled~.input-group-prepend.sc-road-plate-number,.plate-number-input.sc-road-plate-number:disabled~.input-group-append.sc-road-plate-number{cursor:not-allowed;background:var(--road-surface-disabled)}@media (hover: hover){.plate-number-input.sc-road-plate-number:not(:disabled):not([readonly]):hover{border-color:var(--road-input-outline-variant)}}.plate-number-input.sc-road-plate-number:not([readonly]):focus{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","aria-label":this.country,role:"img"},this.countries.filter((e=>e.country===this.country))[0].letter))),this.motorbike?t("textarea",{class:"form-control plate-number-input mb-0",disabled:this.disabled,placeholder:this.placeholder!=null?this.placeholder:this.countries.filter((e=>e.country===this.country))[0].placeholder,readOnly:this.readonly,maxlength:"9",rows:2,onInput:this.onInput,onBlur:this.onBlur,onFocus:this.onFocus}):t("input",{class:"plate-number-input mb-0",disabled:this.disabled,placeholder:this.placeholder!=null?this.placeholder:this.countries.filter((e=>e.country===this.country))[0].placeholder,readOnly:this.readonly,value:e,onInput:this.onInput,onBlur:this.onBlur,onFocus:this.onFocus}),t("label",{slot:"append",class:"input-group-append"},t("div",{class:"plate-number-end"})))}static get watchers(){return{value:["valueChanged"]}}};o.style=n;export{o as road_plate_number};
+//# sourceMappingURL=p-0c4ae774.entry.js.map

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

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