npm - @roadtrip/components - Versions diffs - 3.12.0 → 3.12.1 - Mend

@roadtrip/components 3.12.0 → 3.12.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (94) hide show

package/dist/roadtrip/p-33002e9d.entry.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ 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};
2	+ //# sourceMappingURL=p-33002e9d.entry.js.map

package/dist/roadtrip/{p-9b170273.entry.js.map → p-33002e9d.entry.js.map} RENAMED Viewed

	@@ -1 +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"}
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,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-6e3e0b40.entry.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ 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};
2	+ //# sourceMappingURL=p-6e3e0b40.entry.js.map

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

	@@ -1 +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"}
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,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 ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ 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};
2	+ //# sourceMappingURL=p-869a3d78.entry.js.map

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

	@@ -1 +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"}
1	+ {"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"}