@roadtrip/components 3.20.3 → 3.20.4

package/dist/roadtrip/p-4001ab77.entry.js

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

package/dist/roadtrip/{p-c7866ae4.entry.js.map → p-4001ab77.entry.js.map}

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

package/dist/roadtrip/p-418ca731.entry.js

@@ -0,0 +1,2 @@
+import{r,c as e,h as a,H as o,a as i}from"./p-f3d586b3.js";import{h as n,i as t}from"./p-ac7a8bca.js";const s='.sc-road-range-h{display:block}.form-group.sc-road-range{width:100%}.form-range.sc-road-range{position:relative;display:flex;flex-direction:column;width:100%;margin-bottom:6px}.form-range-input.sc-road-range{position:relative;z-index:1;width:100%;background:transparent;outline:0;appearance:none}.form-range.sc-road-range>output.sc-road-range::after{display:block;font-size:var(--road-label-medium);text-align:right;content:counter(variable);counter-reset:variable var(--value)}.form-range-label.sc-road-range{position:absolute;top:0;left:0;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);border:0}.form-range-progress.sc-road-range{position:relative;z-index:0;display:block;width:100%;margin-top:-1rem}.form-range-input.sc-road-range::-webkit-slider-runnable-track{border:0;appearance:none}.form-range-input.sc-road-range::-moz-range-track{height:0.5rem;border:0;appearance:none}.form-range-progress.sc-road-range::before{display:block;height:0.5rem;content:"";background-color:var(--road-on-surface-disabled);border:0;border-radius:1.125rem}.form-range-progress.sc-road-range::after{position:absolute;top:0;right:0;left:0;display:block;width:calc((var(--value) * 100%) / var(--max));height:0.5rem;content:"";background:var(--road-primary);border-radius:1.125rem}.form-range-input.sc-road-range::-webkit-slider-thumb{position:relative;z-index:1;width:1.625rem;height:1.625rem;cursor:grab;background:var(--road-surface);border:none;border-radius:1.625rem;box-shadow:0 0.1875rem 0.375rem rgba(0, 0, 0, 0.24);appearance:none}.form-range-input.sc-road-range::-moz-range-thumb{position:relative;z-index:1;box-sizing:border-box;width:1.625rem;height:1.625rem;margin-top:-0.625rem;cursor:grab;background:var(--road-surface);border:none;border-radius:1.625rem;box-shadow:0 0.1875rem 0.375rem rgba(0, 0, 0, 0.24);appearance:none}.focus-visible.sc-road-range-h .form-range-input.sc-road-range::-webkit-slider-thumb,.sc-road-range-h:active .form-range-input.sc-road-range::-webkit-slider-thumb,.sc-road-range-h:focus .form-range-input.sc-road-range::-webkit-slider-thumb{background:var(--road-input-surface-variant);border:0.5rem solid var(--road-grey-100-new)}.focus-visible.sc-road-range-h .form-range-input.sc-road-range::-moz-range-thumb,.sc-road-range-h:active .form-range-input.sc-road-range::-moz-range-thumb,.sc-road-range-h:focus .form-range-input.sc-road-range::-moz-range-thumb{background:var(--road-input-surface-variant);border:0.5rem solid var(--road-grey-100-new)}.sc-road-range-s>datalist{display:flex;justify-content:space-between}.sc-road-range-s>datalist option{width:32px;margin:0;font-size:var(--road-label-medium);text-align:center}';const d=class{constructor(a){r(this,a);this.roadchange=e(this,"roadchange",7);this.roadChange=e(this,"roadChange",7);this.onInput=r=>{const e=r.target;if(e){this.value=e.value||""}if(this.value!==null&&this.value!==undefined){this.el.style.setProperty("--value",`${this.value}`)}};this.rangeId=`road-range-${c++}`;this.value="";this.min=undefined;this.max=undefined;this.step=undefined;this.showValue=false;this.showTick=false;this.showLabels=false}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()}handleFocus(){this.el.classList.add("focus-visible")}handleBlur(){this.el.classList.remove("focus-visible")}componentDidLoad(){const r=this.el.querySelector(".form-label");const e=this.el.querySelector(".form-control.sc-road-input");if(r){r.style.clip="rect(0 0 0 0)";r.style.border="0";r.style.height="1px";r.style.left="0";r.style.margin="-1px";r.style.overflow="hidden";r.style.padding="0";r.style.position="absolute";r.style.top="0";r.style.width="1px";e.style.padding="0 1rem 0"}}render(){const r=this.getValue();const e=this.showLabels!==undefined?`tickmarks`:"";return a(o,{tabindex:"0"},a("div",{class:"form-group d-flex align-items-end"},this.showTick&&a("road-icon",{icon:n,class:"mr-8",size:"sm"}),a("div",{class:"form-range",style:{"--min:":this.min,"--max":this.max,"--value":r}},this.showValue&&a("output",null),this.showLabels&&a("slot",{name:"datalist"}),a("input",{type:"range",class:"form-range-input",id:this.rangeId,min:this.min,max:this.max,value:r,onInput:this.onInput,list:e,"aria-label":"Valeur",tabindex:"0"}),a("label",{class:"form-range-label"},"Valeur"),a("div",{class:"form-range-progress"})),this.showTick&&a("road-icon",{icon:t,class:"ml-8",size:"sm"})))}get el(){return i(this)}static get watchers(){return{value:["valueChanged"]}}};let c=0;d.style=s;export{d as road_range};
+//# sourceMappingURL=p-418ca731.entry.js.map

package/dist/roadtrip/{p-9a929988.entry.js.map → p-418ca731.entry.js.map}

@@ -1 +1 @@
-{"version":3,"names":["rangeCss","Range","this","onInput","ev","input","target","value","undefined","el","style","setProperty","rangeIds","valueChanged","roadchange","emit","toString","roadChange","getValue","handleFocus","classList","add","handleBlur","remove","componentDidLoad","label","querySelector","clip","border","height","left","margin","overflow","padding","position","top","width","render","datalist","showLabels","h","Host","tabindex","class","showTick","icon","navigationAddLessSolid","size","min","max","showValue","name","type","id","rangeId","list","navigationAddMoreSolid"],"sources":["src/components/range/range.css?tag=road-range&encapsulation=scoped","src/components/range/range.tsx"],"sourcesContent":["/*\n * Range\n *\n *\n * Index\n * - Input\n * - Value\n * - Slider\n * - Progress\n * - Cursor\n */\n\n:host {\n  display: block;\n}\n\n.form-group{\n  width: 100%;\n}\n\n.form-range {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  margin-bottom: 6px;\n}\n\n/* INPUT\n -------------------- */\n\n.form-range-input {\n  position: relative;\n  z-index: 1;\n  width: 100%;\n  background: transparent;\n  outline: 0;\n  appearance: none;\n}\n\n/* VALUE\n -------------------- */\n\n.form-range > output::after {\n  display: block;\n  font-size: var(--road-label-medium);\n  text-align: right;\n  content: counter(variable);\n  counter-reset: variable var(--value);\n}\n\n/* SLIDER\n -------------------- */\n\n.form-range-label {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0 0 0 0);\n  border: 0;\n}\n\n.form-range-progress {\n  position: relative;\n  z-index: 0;\n  display: block;\n  width: 100%;\n  margin-top: -1rem;\n}\n\n.form-range-input::-webkit-slider-runnable-track {\n  border: 0;\n  appearance: none;\n}\n\n.form-range-input::-moz-range-track {\n  height: 0.5rem;\n  border: 0;\n  appearance: none;\n}\n\n.form-range-progress::before {\n  display: block;\n  height: 0.5rem;\n  content: \"\";\n  background-color: var(--road-on-surface-disabled);\n  border: 0;\n  border-radius: 1.125rem;\n}\n\n/* PROGRESS\n -------------------- */\n\n.form-range-progress::after {\n  position: absolute;\n  top: 0;\n  right: 0;\n  left: 0;\n  display: block;\n  width: calc((var(--value) * 100%) / var(--max));\n  height: 0.5rem;\n  content: \"\";\n  background: var(--road-primary);\n  border-radius: 1.125rem;\n}\n\n/* CURSOR\n-------------------- */\n\n.form-range-input::-webkit-slider-thumb {\n  position: relative;\n  z-index: 1;\n  width: 1.625rem;\n  height: 1.625rem;\n  cursor: grab;\n  background: var(--road-surface);\n  border: none;\n  border-radius: 1.625rem;\n  box-shadow: 0 0.1875rem 0.375rem rgba(0, 0, 0, 0.24);\n  appearance: none;\n}\n\n.form-range-input::-moz-range-thumb {\n  position: relative;\n  z-index: 1;\n  box-sizing: border-box;\n  width: 1.625rem;\n  height: 1.625rem;\n  margin-top: -0.625rem;\n  cursor: grab;\n  background: var(--road-surface);\n  border: none;\n  border-radius: 1.625rem;\n  box-shadow: 0 0.1875rem 0.375rem rgba(0, 0, 0, 0.24);\n  appearance: none;\n}\n\n/**\n *  Focus state\n */\n\n:host(.focus-visible) .form-range-input::-webkit-slider-thumb,\n:host(:active) .form-range-input::-webkit-slider-thumb,\n:host(:focus) .form-range-input::-webkit-slider-thumb {\n  background: var(--road-input-surface-variant);\n  border: 0.5rem solid var(--road-grey-100-new);\n}\n\n:host(.focus-visible) .form-range-input::-moz-range-thumb,\n:host(:active) .form-range-input::-moz-range-thumb,\n:host(:focus) .form-range-input::-moz-range-thumb {\n  background: var(--road-input-surface-variant);\n  border: 0.5rem solid var(--road-grey-100-new);\n}\n\n/* DATALIST\n -------------------- */\n\n::slotted(datalist) {\n  display: flex;\n  justify-content: space-between;\n}\n\n::slotted(datalist) option {\n  width: 32px;\n  margin: 0;\n  font-size: var(--road-label-medium);\n  text-align: center;\n}\n\n","import { Component, h, Element, Prop, Event, Host, EventEmitter, Watch, Listen } from '@stencil/core';\nimport { navigationAddLessSolid, navigationAddMoreSolid } from '../../../icons';\n\n/**\n * @slot datalist - list of labels. also put show-labels=\"true\" and max=\"10\" for this exemple\n * `<datalist id=\"tickmarks\" slot=\"datalist\" class=\"tickmarks\">`\n      `<option value=\"0\" label=\"0%\"></option>`\n      `<option value=\"10\" label=\"10%\"></option>`\n      `<option value=\"20\" label=\"20%\"></option>`\n      `<option value=\"30\" label=\"30%\"></option>`\n      `<option value=\"40\" label=\"40%\"></option>`\n      `<option value=\"50\" label=\"50%\"></option>`\n      `<option value=\"60\" label=\"60%\"></option>`\n     `<option value=\"70\" label=\"70%\"></option>`\n     `<option value=\"80\" label=\"80%\"></option>`\n      `<option value=\"90\" label=\"90%\"></option>`\n      `<option value=\"100\" label=\"100%\"></option>`\n    `</datalist>`\n */\n\n@Component({\n  tag: 'road-range',\n  styleUrl: 'range.css',\n  scoped: true,\n})\nexport class Range {\n\n  @Element() el!: HTMLRoadRangeElement;\n\n  /**\n   * The id of range\n   */\n  @Prop() rangeId: string = `road-range-${rangeIds++}`;\n\n  /**\n   * The value of the range.\n   */\n  @Prop({ mutable: true }) value?: string | number | null = '';\n\n  /**\n   * The minimum value, which must not be greater than its maximum (max attribute) value.\n   */\n  @Prop() min!: string;\n\n  /**\n   * The maximum value, which must not be less than its minimum (min attribute) value.\n   */\n  @Prop() max!: string;\n\n  /**\n   * Works with the min and max attributes to limit the increments at which a value can be set.\n   * Possible values are: `\"any\"` or a positive floating point number.\n   */\n  @Prop() step?: string;\n\n  /**\n   * Display the current value of the range\n   */\n  @Prop() showValue: boolean = false;\n\n  /**\n   * Display Tick of the range\n   */\n  @Prop() showTick: boolean = false;\n\n    /**\n   * Display labels of the range\n   */\n     @Prop() showLabels: boolean = false;\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 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  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      this.value = input.value || '';\n    }\n    if(this.value !== null && this.value !== undefined) {\n      this.el.style.setProperty('--value', `${this.value}`);\n    }\n  };\n\n  @Listen('focus', { capture: true })\n  handleFocus() {\n    this.el.classList.add('focus-visible');\n  }\n\n  @Listen('blur', { capture: true })\n  handleBlur() {\n    this.el.classList.remove('focus-visible');\n  }\n\n  componentDidLoad() {\n    // Cacher le label pour accessibilité\n\n  const label = this.el.querySelector('.form-label') as HTMLElement;\n  const input = this.el.querySelector('.form-control.sc-road-input') as HTMLElement;\n  if (label) {\n    label.style.clip = 'rect(0 0 0 0)';\n    label.style.border = '0';\n    label.style.height = '1px';\n    label.style.left = '0';\n    label.style.margin = '-1px';\n    label.style.overflow = 'hidden';\n    label.style.padding = '0';\n    label.style.position = 'absolute';\n    label.style.top = '0';\n    label.style.width = '1px';\n\n    input.style.padding = '0 1rem 0';\n    \n  }\n}\n\n  render() {\n    const value = this.getValue();\n    const datalist = this.showLabels !== undefined ? `tickmarks` : '';\n\n    return (\n      <Host tabindex=\"0\">\n      <div class=\"form-group d-flex align-items-end\">\n        {this.showTick && <road-icon icon={navigationAddLessSolid} class=\"mr-8\" size='sm'></road-icon>}\n        <div class=\"form-range\" style={{'--min:': this.min, '--max': this.max, '--value': value}}>\n          {this.showValue && <output></output>}\n          {this.showLabels && <slot name=\"datalist\"/>}\n          <input\n            type=\"range\"\n            class=\"form-range-input\"\n            id={this.rangeId}\n            min={this.min}\n            max={this.max}\n            value={value}\n            onInput={this.onInput}\n            list={datalist}\n            aria-label=\"Valeur\"\n            tabindex=\"0\"\n          />\n          <label class=\"form-range-label\">Valeur</label>\n          <div class=\"form-range-progress\"></div>\n        </div>\n        {this.showTick && <road-icon icon={navigationAddMoreSolid} class=\"ml-8\" size='sm'></road-icon>}\n      </div>\n      </Host>\n    );\n  }\n\n}\n\nlet rangeIds = 0;\n"],"mappings":"sGAAA,MAAMA,EAAW,6rF,MCyBJC,EAAK,M,uGAuERC,KAAAC,QAAWC,IACjB,MAAMC,EAAQD,EAAGE,OACjB,GAAID,EAAO,CACTH,KAAKK,MAAQF,EAAME,OAAS,E,CAE9B,GAAGL,KAAKK,QAAU,MAAQL,KAAKK,QAAUC,UAAW,CAClDN,KAAKO,GAAGC,MAAMC,YAAY,UAAW,GAAGT,KAAKK,Q,gBAtEvB,cAAcK,M,WAKkB,G,yEAqB7B,M,cAKD,M,gBAKK,K,CAMvB,YAAAC,GACRX,KAAKY,WAAWC,KAAK,CAAER,MAAOL,KAAKK,OAAS,KAAOL,KAAKK,MAAQL,KAAKK,MAAMS,aAC3Ed,KAAKe,WAAWF,KAAK,CAAER,MAAOL,KAAKK,OAAS,KAAOL,KAAKK,MAAQL,KAAKK,MAAMS,Y,CAcrE,QAAAE,GACN,cAAchB,KAAKK,QAAU,SACzBL,KAAKK,MAAMS,YACVd,KAAKK,OAAS,IAAIS,U,CAczB,WAAAG,GACEjB,KAAKO,GAAGW,UAAUC,IAAI,gB,CAIxB,UAAAC,GACEpB,KAAKO,GAAGW,UAAUG,OAAO,gB,CAG3B,gBAAAC,GAGA,MAAMC,EAAQvB,KAAKO,GAAGiB,cAAc,eACpC,MAAMrB,EAAQH,KAAKO,GAAGiB,cAAc,+BACpC,GAAID,EAAO,CACTA,EAAMf,MAAMiB,KAAO,gBACnBF,EAAMf,MAAMkB,OAAS,IACrBH,EAAMf,MAAMmB,OAAS,MACrBJ,EAAMf,MAAMoB,KAAO,IACnBL,EAAMf,MAAMqB,OAAS,OACrBN,EAAMf,MAAMsB,SAAW,SACvBP,EAAMf,MAAMuB,QAAU,IACtBR,EAAMf,MAAMwB,SAAW,WACvBT,EAAMf,MAAMyB,IAAM,IAClBV,EAAMf,MAAM0B,MAAQ,MAEpB/B,EAAMK,MAAMuB,QAAU,U,EAKxB,MAAAI,GACE,MAAM9B,EAAQL,KAAKgB,WACnB,MAAMoB,EAAWpC,KAAKqC,aAAe/B,UAAY,YAAc,GAE/D,OACEgC,EAACC,EAAI,CAACC,SAAS,KACfF,EAAA,OAAKG,MAAM,qCACRzC,KAAK0C,UAAYJ,EAAA,aAAWK,KAAMC,EAAwBH,MAAM,OAAOI,KAAK,OAC7EP,EAAA,OAAKG,MAAM,aAAajC,MAAO,CAAC,SAAUR,KAAK8C,IAAK,QAAS9C,KAAK+C,IAAK,UAAW1C,IAC/EL,KAAKgD,WAAaV,EAAA,eAClBtC,KAAKqC,YAAcC,EAAA,QAAMW,KAAK,aAC/BX,EAAA,SACEY,KAAK,QACLT,MAAM,mBACNU,GAAInD,KAAKoD,QACTN,IAAK9C,KAAK8C,IACVC,IAAK/C,KAAK+C,IACV1C,MAAOA,EACPJ,QAASD,KAAKC,QACdoD,KAAMjB,EAAQ,aACH,SACXI,SAAS,MAEXF,EAAA,SAAOG,MAAM,oBAAkB,UAC/BH,EAAA,OAAKG,MAAM,yBAEZzC,KAAK0C,UAAYJ,EAAA,aAAWK,KAAMW,EAAwBb,MAAM,OAAOI,KAAK,Q,gFAQrF,IAAInC,EAAW,E"}
+{"version":3,"names":["rangeCss","Range","this","onInput","ev","input","target","value","undefined","el","style","setProperty","rangeIds","valueChanged","roadchange","emit","toString","roadChange","getValue","handleFocus","classList","add","handleBlur","remove","componentDidLoad","label","querySelector","clip","border","height","left","margin","overflow","padding","position","top","width","render","datalist","showLabels","h","Host","tabindex","class","showTick","icon","navigationAddLessSolid","size","min","max","showValue","name","type","id","rangeId","list","navigationAddMoreSolid"],"sources":["src/components/range/range.css?tag=road-range&encapsulation=scoped","src/components/range/range.tsx"],"sourcesContent":["/*\n * Range\n *\n *\n * Index\n * - Input\n * - Value\n * - Slider\n * - Progress\n * - Cursor\n */\n\n:host {\n  display: block;\n}\n\n.form-group{\n  width: 100%;\n}\n\n.form-range {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  margin-bottom: 6px;\n}\n\n/* INPUT\n -------------------- */\n\n.form-range-input {\n  position: relative;\n  z-index: 1;\n  width: 100%;\n  background: transparent;\n  outline: 0;\n  appearance: none;\n}\n\n/* VALUE\n -------------------- */\n\n.form-range > output::after {\n  display: block;\n  font-size: var(--road-label-medium);\n  text-align: right;\n  content: counter(variable);\n  counter-reset: variable var(--value);\n}\n\n/* SLIDER\n -------------------- */\n\n.form-range-label {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0 0 0 0);\n  border: 0;\n}\n\n.form-range-progress {\n  position: relative;\n  z-index: 0;\n  display: block;\n  width: 100%;\n  margin-top: -1rem;\n}\n\n.form-range-input::-webkit-slider-runnable-track {\n  border: 0;\n  appearance: none;\n}\n\n.form-range-input::-moz-range-track {\n  height: 0.5rem;\n  border: 0;\n  appearance: none;\n}\n\n.form-range-progress::before {\n  display: block;\n  height: 0.5rem;\n  content: \"\";\n  background-color: var(--road-on-surface-disabled);\n  border: 0;\n  border-radius: 1.125rem;\n}\n\n/* PROGRESS\n -------------------- */\n\n.form-range-progress::after {\n  position: absolute;\n  top: 0;\n  right: 0;\n  left: 0;\n  display: block;\n  width: calc((var(--value) * 100%) / var(--max));\n  height: 0.5rem;\n  content: \"\";\n  background: var(--road-primary);\n  border-radius: 1.125rem;\n}\n\n/* CURSOR\n-------------------- */\n\n.form-range-input::-webkit-slider-thumb {\n  position: relative;\n  z-index: 1;\n  width: 1.625rem;\n  height: 1.625rem;\n  cursor: grab;\n  background: var(--road-surface);\n  border: none;\n  border-radius: 1.625rem;\n  box-shadow: 0 0.1875rem 0.375rem rgba(0, 0, 0, 0.24);\n  appearance: none;\n}\n\n.form-range-input::-moz-range-thumb {\n  position: relative;\n  z-index: 1;\n  box-sizing: border-box;\n  width: 1.625rem;\n  height: 1.625rem;\n  margin-top: -0.625rem;\n  cursor: grab;\n  background: var(--road-surface);\n  border: none;\n  border-radius: 1.625rem;\n  box-shadow: 0 0.1875rem 0.375rem rgba(0, 0, 0, 0.24);\n  appearance: none;\n}\n\n/**\n *  Focus state\n */\n\n:host(.focus-visible) .form-range-input::-webkit-slider-thumb,\n:host(:active) .form-range-input::-webkit-slider-thumb,\n:host(:focus) .form-range-input::-webkit-slider-thumb {\n  background: var(--road-input-surface-variant);\n  border: 0.5rem solid var(--road-grey-100-new);\n}\n\n:host(.focus-visible) .form-range-input::-moz-range-thumb,\n:host(:active) .form-range-input::-moz-range-thumb,\n:host(:focus) .form-range-input::-moz-range-thumb {\n  background: var(--road-input-surface-variant);\n  border: 0.5rem solid var(--road-grey-100-new);\n}\n\n/* DATALIST\n -------------------- */\n\n::slotted(datalist) {\n  display: flex;\n  justify-content: space-between;\n}\n\n::slotted(datalist) option {\n  width: 32px;\n  margin: 0;\n  font-size: var(--road-label-medium);\n  text-align: center;\n}\n\n","import { Component, h, Element, Prop, Event, Host, EventEmitter, Watch, Listen } from '@stencil/core';\nimport { navigationAddLessSolid, navigationAddMoreSolid } from '../../../icons';\n\n/**\n * @slot datalist - list of labels. also put show-labels=\"true\" and max=\"10\" for this exemple\n * `<datalist id=\"tickmarks\" slot=\"datalist\" class=\"tickmarks\">`\n      `<option value=\"0\" label=\"0%\"></option>`\n      `<option value=\"10\" label=\"10%\"></option>`\n      `<option value=\"20\" label=\"20%\"></option>`\n      `<option value=\"30\" label=\"30%\"></option>`\n      `<option value=\"40\" label=\"40%\"></option>`\n      `<option value=\"50\" label=\"50%\"></option>`\n      `<option value=\"60\" label=\"60%\"></option>`\n     `<option value=\"70\" label=\"70%\"></option>`\n     `<option value=\"80\" label=\"80%\"></option>`\n      `<option value=\"90\" label=\"90%\"></option>`\n      `<option value=\"100\" label=\"100%\"></option>`\n    `</datalist>`\n */\n\n@Component({\n  tag: 'road-range',\n  styleUrl: 'range.css',\n  scoped: true,\n})\nexport class Range {\n\n  @Element() el!: HTMLRoadRangeElement;\n\n  /**\n   * The id of range\n   */\n  @Prop() rangeId: string = `road-range-${rangeIds++}`;\n\n  /**\n   * The value of the range.\n   */\n  @Prop({ mutable: true }) value?: string | number | null = '';\n\n  /**\n   * The minimum value, which must not be greater than its maximum (max attribute) value.\n   */\n  @Prop() min!: string;\n\n  /**\n   * The maximum value, which must not be less than its minimum (min attribute) value.\n   */\n  @Prop() max!: string;\n\n  /**\n   * Works with the min and max attributes to limit the increments at which a value can be set.\n   * Possible values are: `\"any\"` or a positive floating point number.\n   */\n  @Prop() step?: string;\n\n  /**\n   * Display the current value of the range\n   */\n  @Prop() showValue: boolean = false;\n\n  /**\n   * Display Tick of the range\n   */\n  @Prop() showTick: boolean = false;\n\n    /**\n   * Display labels of the range\n   */\n     @Prop() showLabels: boolean = false;\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 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  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      this.value = input.value || '';\n    }\n    if(this.value !== null && this.value !== undefined) {\n      this.el.style.setProperty('--value', `${this.value}`);\n    }\n  };\n\n  @Listen('focus', { capture: true })\n  handleFocus() {\n    this.el.classList.add('focus-visible');\n  }\n\n  @Listen('blur', { capture: true })\n  handleBlur() {\n    this.el.classList.remove('focus-visible');\n  }\n\n  componentDidLoad() {\n    // Cacher le label pour accessibilité\n\n  const label = this.el.querySelector('.form-label') as HTMLElement;\n  const input = this.el.querySelector('.form-control.sc-road-input') as HTMLElement;\n  if (label) {\n    label.style.clip = 'rect(0 0 0 0)';\n    label.style.border = '0';\n    label.style.height = '1px';\n    label.style.left = '0';\n    label.style.margin = '-1px';\n    label.style.overflow = 'hidden';\n    label.style.padding = '0';\n    label.style.position = 'absolute';\n    label.style.top = '0';\n    label.style.width = '1px';\n\n    input.style.padding = '0 1rem 0';\n    \n  }\n}\n\n  render() {\n    const value = this.getValue();\n    const datalist = this.showLabels !== undefined ? `tickmarks` : '';\n\n    return (\n      <Host tabindex=\"0\">\n      <div class=\"form-group d-flex align-items-end\">\n        {this.showTick && <road-icon icon={navigationAddLessSolid} class=\"mr-8\" size='sm'></road-icon>}\n        <div class=\"form-range\" style={{'--min:': this.min, '--max': this.max, '--value': value}}>\n          {this.showValue && <output></output>}\n          {this.showLabels && <slot name=\"datalist\"/>}\n          <input\n            type=\"range\"\n            class=\"form-range-input\"\n            id={this.rangeId}\n            min={this.min}\n            max={this.max}\n            value={value}\n            onInput={this.onInput}\n            list={datalist}\n            aria-label=\"Valeur\"\n            tabindex=\"0\"\n          />\n          <label class=\"form-range-label\">Valeur</label>\n          <div class=\"form-range-progress\"></div>\n        </div>\n        {this.showTick && <road-icon icon={navigationAddMoreSolid} class=\"ml-8\" size='sm'></road-icon>}\n      </div>\n      </Host>\n    );\n  }\n\n}\n\nlet rangeIds = 0;\n"],"mappings":"sGAAA,MAAMA,EAAW,qnF,MCyBJC,EAAK,M,uGAuERC,KAAAC,QAAWC,IACjB,MAAMC,EAAQD,EAAGE,OACjB,GAAID,EAAO,CACTH,KAAKK,MAAQF,EAAME,OAAS,E,CAE9B,GAAGL,KAAKK,QAAU,MAAQL,KAAKK,QAAUC,UAAW,CAClDN,KAAKO,GAAGC,MAAMC,YAAY,UAAW,GAAGT,KAAKK,Q,gBAtEvB,cAAcK,M,WAKkB,G,yEAqB7B,M,cAKD,M,gBAKK,K,CAMvB,YAAAC,GACRX,KAAKY,WAAWC,KAAK,CAAER,MAAOL,KAAKK,OAAS,KAAOL,KAAKK,MAAQL,KAAKK,MAAMS,aAC3Ed,KAAKe,WAAWF,KAAK,CAAER,MAAOL,KAAKK,OAAS,KAAOL,KAAKK,MAAQL,KAAKK,MAAMS,Y,CAcrE,QAAAE,GACN,cAAchB,KAAKK,QAAU,SACzBL,KAAKK,MAAMS,YACVd,KAAKK,OAAS,IAAIS,U,CAczB,WAAAG,GACEjB,KAAKO,GAAGW,UAAUC,IAAI,gB,CAIxB,UAAAC,GACEpB,KAAKO,GAAGW,UAAUG,OAAO,gB,CAG3B,gBAAAC,GAGA,MAAMC,EAAQvB,KAAKO,GAAGiB,cAAc,eACpC,MAAMrB,EAAQH,KAAKO,GAAGiB,cAAc,+BACpC,GAAID,EAAO,CACTA,EAAMf,MAAMiB,KAAO,gBACnBF,EAAMf,MAAMkB,OAAS,IACrBH,EAAMf,MAAMmB,OAAS,MACrBJ,EAAMf,MAAMoB,KAAO,IACnBL,EAAMf,MAAMqB,OAAS,OACrBN,EAAMf,MAAMsB,SAAW,SACvBP,EAAMf,MAAMuB,QAAU,IACtBR,EAAMf,MAAMwB,SAAW,WACvBT,EAAMf,MAAMyB,IAAM,IAClBV,EAAMf,MAAM0B,MAAQ,MAEpB/B,EAAMK,MAAMuB,QAAU,U,EAKxB,MAAAI,GACE,MAAM9B,EAAQL,KAAKgB,WACnB,MAAMoB,EAAWpC,KAAKqC,aAAe/B,UAAY,YAAc,GAE/D,OACEgC,EAACC,EAAI,CAACC,SAAS,KACfF,EAAA,OAAKG,MAAM,qCACRzC,KAAK0C,UAAYJ,EAAA,aAAWK,KAAMC,EAAwBH,MAAM,OAAOI,KAAK,OAC7EP,EAAA,OAAKG,MAAM,aAAajC,MAAO,CAAC,SAAUR,KAAK8C,IAAK,QAAS9C,KAAK+C,IAAK,UAAW1C,IAC/EL,KAAKgD,WAAaV,EAAA,eAClBtC,KAAKqC,YAAcC,EAAA,QAAMW,KAAK,aAC/BX,EAAA,SACEY,KAAK,QACLT,MAAM,mBACNU,GAAInD,KAAKoD,QACTN,IAAK9C,KAAK8C,IACVC,IAAK/C,KAAK+C,IACV1C,MAAOA,EACPJ,QAASD,KAAKC,QACdoD,KAAMjB,EAAQ,aACH,SACXI,SAAS,MAEXF,EAAA,SAAOG,MAAM,oBAAkB,UAC/BH,EAAA,OAAKG,MAAM,yBAEZzC,KAAK0C,UAAYJ,EAAA,aAAWK,KAAMW,EAAwBb,MAAM,OAAOI,KAAK,Q,gFAQrF,IAAInC,EAAW,E"}

package/dist/roadtrip/p-7c7117a9.entry.js

@@ -0,0 +1,2 @@
+import{r as o,c as a,h as e,H as i,a as t}from"./p-f3d586b3.js";import{a as r}from"./p-ac7a8bca.js";const d=":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-grey-900);visibility:hidden !important;opacity:0;transition:opacity 0.15s linear, visibility 0.15s}.modal-overlay{position:absolute;top:0;right:0;bottom:0;left:0;display:block;touch-action:none;cursor:pointer;background:var(--road-overlay)}.modal-dialog{position:relative;width:100%;pointer-events:none;transition:transform 0.3s ease-out;transform:translateY(50px)}:host(.modal-open){visibility:visible !important;opacity:1}:host(.modal-open) .modal-dialog{transform:none}.modal-content{position:relative;display:flex;flex-direction:column;width:100%;height:100vh;pointer-events:auto;background:var(--road-surface);background-clip:padding-box;box-shadow:var(--road-elevation-hight)}@media (min-width: 768px){.modal-content{height:auto;border-radius:0.25rem}}.modal-header{display:flex;align-items:center;justify-content:flex-end;color:var(--road-on-header-surface);background:var(--road-header-surface)}.modal-header road-icon{color:var(--road-header-icon)}@media (min-width: 768px){.modal-header{border-radius:0.25rem 0.25rem 0 0}}.modal-header-inverse{color:var(--road-on-surface);background:none}.modal-header-inverse road-icon{color:var(--road-icon)}.modal-action,.modal-close{display:flex;align-items:center;justify-content:center;width:3.5rem;height:3.5rem;padding:0;font-weight:700;color:inherit;cursor:pointer;background:transparent;border:0;appearance:none;-webkit-tap-highlight-color:rgba(0, 0, 0, 0)}.modal-action~.modal-title,.modal-close~.modal-title{padding-left:0}.modal-action-left,.modal-close-left{margin-right:auto}.modal-title{display:flex;flex-grow:1;align-items:center;justify-content:center;height:3.5rem;padding-left:3.5rem;margin:0;font-size:var(--road-body-medium);font-weight:400}.modal-body{padding:2.5rem 0.5rem;overflow-y:auto}.modal-header-inverse+.modal-body{padding-top:0}@media (min-width: 768px){.modal-body{max-height:86vh;padding-right:var(--road-spacing-06);padding-bottom:var(--road-spacing-06);padding-left:var(--road-spacing-06)}}";const n=class{constructor(e){o(this,e);this.onClose=a(this,"close",7);this.onClick=o=>{o.stopPropagation();o.preventDefault();this.close()};this.maxWidth=696;this.isOpen=false;this.hasInverseHeader=false;this.modalTitle=undefined;this.hasCloseIcon=true}async open(){this.isOpen=true}async close(){this.isOpen=false;this.el.addEventListener("transitionend",(()=>{this.onClose.emit()}),{once:true})}onEscape(o){if(o.key==="Escape"||o.key==="Esc"){this.close()}}componentDidLoad(){this.el.querySelectorAll('[data-dismiss="modal"]').forEach((o=>{o.addEventListener("click",(()=>this.close()))}))}render(){const o=this.isOpen?"modal-open":"";const a=this.hasInverseHeader?"modal-header-inverse":"";const t=this.hasCloseIcon?e("button",{type:"button",class:"modal-close",onClick:this.onClick,"aria-label":"Close"},e("road-icon",{icon:r,"aria-hidden":"true"})):"";return e(i,{class:`modal ${o}`,tabindex:"-1",role:"dialog","aria-label":"modal"},e("div",{class:"modal-overlay",onClick:this.onClick,tabindex:"-1"}),e("div",{class:"modal-dialog",style:{maxWidth:`${this.maxWidth}px`},role:"document",tabindex:"0"},e("div",{class:"modal-content"},e("header",{class:`modal-header ${a}`},e("h2",{class:"modal-title"},this.modalTitle),t),e("div",{class:"modal-body"},e("slot",null)))))}get el(){return t(this)}};n.style=d;export{n as road_modal};
+//# sourceMappingURL=p-7c7117a9.entry.js.map

package/dist/roadtrip/p-7c7117a9.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["modalCss","Modal","this","onClick","ev","stopPropagation","preventDefault","close","open","isOpen","el","addEventListener","onClose","emit","once","onEscape","event","key","componentDidLoad","querySelectorAll","forEach","item","render","modalIsOpenClass","inverseHeaderClass","hasInverseHeader","closeIconElement","hasCloseIcon","h","type","class","icon","navigationClose","Host","tabindex","role","style","maxWidth","modalTitle"],"sources":["src/components/modal/modal.css?tag=road-modal&encapsulation=shadow","src/components/modal/modal.tsx"],"sourcesContent":["/*\n * Modal\n *\n * Index\n * - Overlay\n * - Modal\n * - Content\n * - Header\n * - Actions\n * - Title\n * - Body\n */\n\n/**\n * @prop --z-index: The z-index of the Modal.\n */\n\n\n/* OVERLAY\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-grey-900);\n  visibility: hidden !important;\n  opacity: 0;\n  transition: opacity 0.15s linear, visibility 0.15s;\n}\n\n/* OVERLAY\n -------------------- */\n\n.modal-overlay {\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  display: block;\n  touch-action: none;\n  cursor: pointer;\n  background: var(--road-overlay);\n}\n\n/* MODAL\n -------------------- */\n\n.modal-dialog {\n  position: relative;\n  width: 100%;\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(.modal-open) {\n  visibility: visible !important;\n  opacity: 1;\n}\n\n:host(.modal-open) .modal-dialog {\n  transform: none;\n}\n\n/* CONTENT\n -------------------- */\n\n.modal-content {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  height: 100vh;\n  pointer-events: auto;\n  background: var(--road-surface);\n  background-clip: padding-box;\n  box-shadow: var(--road-elevation-hight);\n}\n\n@media (min-width: 768px) {\n\n  .modal-content {\n    height: auto;\n    border-radius: 0.25rem;\n  }\n}\n\n/* HEADER\n -------------------- */\n\n.modal-header {\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n  color: var(--road-on-header-surface);\n  background: var(--road-header-surface);\n}\n\n.modal-header road-icon {\n  color: var(--road-header-icon);\n}\n\n@media (min-width: 768px) {\n\n  .modal-header {\n    border-radius: 0.25rem 0.25rem 0 0;\n  }\n}\n\n/**\n * Modal header inverse colors\n */\n\n.modal-header-inverse {\n  color: var(--road-on-surface);\n  background: none;\n}\n\n.modal-header-inverse road-icon {\n  color: var(--road-icon);\n}\n\n/* ACTIONS\n -------------------- */\n\n.modal-action,\n.modal-close {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 3.5rem;\n  height: 3.5rem;\n  padding: 0;\n  font-weight: 700;\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.modal-action ~ .modal-title,\n.modal-close ~ .modal-title {\n  padding-left: 0;\n}\n\n.modal-action-left,\n.modal-close-left {\n  margin-right: auto;\n}\n\n/* TITLE\n -------------------- */\n\n.modal-title {\n  display: flex;\n  flex-grow: 1;\n  align-items: center;\n  justify-content: center;\n  height: 3.5rem;\n  padding-left: 3.5rem;\n  margin: 0;\n  font-size: var(--road-body-medium);\n  font-weight: 400;\n}\n\n/* BODY\n -------------------- */\n\n.modal-body {\n  padding: 2.5rem 0.5rem;\n  overflow-y: auto;\n}\n\n.modal-header-inverse + .modal-body {\n  padding-top: 0;\n}\n\n@media (min-width: 768px) {\n\n  .modal-body {\n    max-height: 86vh;\n    padding-right: var(--road-spacing-06);\n    padding-bottom: var(--road-spacing-06);\n    padding-left: var(--road-spacing-06);\n  }\n}\n","import { Component, Element, Event, EventEmitter, Listen, Method, Prop, h, Host } from '@stencil/core';\nimport { navigationClose } from '../../../icons';\n\n/**\n * @slot  - Content of the modal.\n */\n\n@Component({\n  tag: 'road-modal',\n  styleUrl: 'modal.css',\n  shadow: true,\n})\nexport class Modal {\n\n  /**\n   * Current reference of the modal\n   */\n  @Element() el!: HTMLRoadModalElement;\n\n  /**\n   * Max width of the modal on desktop\n   */\n  @Prop() maxWidth: number = 696;\n\n  /**\n   * Set isOpen propertie to true to show the modal\n   */\n  @Prop({ mutable: true }) isOpen: boolean = false;\n\n  /**\n   * inverse header colors\n   */\n  @Prop() hasInverseHeader: boolean = false;\n\n  /**\n   * Title of the modal in the header bar\n   */\n  @Prop() modalTitle?: string;\n\n  /**\n   * Show / hide close icon\n   */\n  @Prop() hasCloseIcon: boolean = true;\n\n  /**\n   * Indicate when closing the modal\n   */\n  @Event({ eventName: 'close' }) onClose!: EventEmitter<void>;\n\n  /**\n   * Open the modal\n   */\n  @Method()\n  async open() {\n    this.isOpen = true;\n  }\n\n  /**\n   * Close the modal\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\") {\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 ? 'modal-open' : '';\n    const inverseHeaderClass = this.hasInverseHeader ? 'modal-header-inverse' : '';\n    const closeIconElement = this.hasCloseIcon ? <button type=\"button\" class=\"modal-close\" onClick={this.onClick} aria-label=\"Close\"><road-icon icon={navigationClose} aria-hidden=\"true\"></road-icon></button> : '';\n\n    return (\n      <Host class={`modal ${modalIsOpenClass}`} tabindex=\"-1\" role=\"dialog\" aria-label=\"modal\">\n        <div class=\"modal-overlay\" onClick={this.onClick} tabindex=\"-1\"></div>\n        <div class=\"modal-dialog\" style={{ maxWidth: `${this.maxWidth}px` }} role=\"document\" tabindex=\"0\">\n          <div class=\"modal-content\">\n            <header class={`modal-header ${inverseHeaderClass}`}>\n              <h2 class=\"modal-title\">{this.modalTitle}</h2>\n              {closeIconElement}\n            </header>\n            <div class=\"modal-body\">\n              <slot/>\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}"],"mappings":"oGAAA,MAAMA,EAAW,mqE,MCYJC,EAAK,M,wDA2DRC,KAAAC,QAAWC,IACjBA,EAAGC,kBACHD,EAAGE,iBAEHJ,KAAKK,OAAO,E,cArDa,I,YAKgB,M,sBAKP,M,4CAUJ,I,CAWhC,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,GAAIA,EAAMC,MAAQ,UAAYD,EAAMC,MAAQ,MAAO,CACjDf,KAAKK,O,EAOT,gBAAAW,GACEhB,KAAKQ,GAAGS,iBAAiB,0BAA0BC,SAAQC,IACzDA,EAAKV,iBAAiB,SAAS,IAAMT,KAAKK,SAAQ,G,CAItD,MAAAe,GACE,MAAMC,EAAmBrB,KAAKO,OAAS,aAAe,GACtD,MAAMe,EAAqBtB,KAAKuB,iBAAmB,uBAAyB,GAC5E,MAAMC,EAAmBxB,KAAKyB,aAAeC,EAAA,UAAQC,KAAK,SAASC,MAAM,cAAc3B,QAASD,KAAKC,QAAO,aAAa,SAAQyB,EAAA,aAAWG,KAAMC,EAAe,cAAc,UAA+B,GAE9M,OACEJ,EAACK,EAAI,CAACH,MAAO,SAASP,IAAoBW,SAAS,KAAKC,KAAK,SAAQ,aAAY,SAC/EP,EAAA,OAAKE,MAAM,gBAAgB3B,QAASD,KAAKC,QAAS+B,SAAS,OAC3DN,EAAA,OAAKE,MAAM,eAAeM,MAAO,CAAEC,SAAU,GAAGnC,KAAKmC,cAAgBF,KAAK,WAAWD,SAAS,KAC5FN,EAAA,OAAKE,MAAM,iBACTF,EAAA,UAAQE,MAAO,gBAAgBN,KAC7BI,EAAA,MAAIE,MAAM,eAAe5B,KAAKoC,YAC7BZ,GAEHE,EAAA,OAAKE,MAAM,cACTF,EAAA,gB"}

package/dist/roadtrip/p-8acb1859.entry.js

@@ -0,0 +1,2 @@
+import{r as i,c as e,h as a,H as o,a as t}from"./p-f3d586b3.js";import{a as s,d as n,e as d,f as r,g as l}from"./p-ac7a8bca.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;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-label":"dialogLabel"},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"},this.label),a("p",{class:"dialog-description",id:"dialogDesc"},this.description)),a("footer",{class:"dialog-footer"},a("slot",null)))))}get el(){return t(this)}};h.style=c;export{h as road_dialog};
+//# sourceMappingURL=p-8acb1859.entry.js.map

package/dist/roadtrip/{p-18967429.entry.js.map → p-8acb1859.entry.js.map}

@@ -1 +1 @@
-{"version":3,"names":["dialogCss","Dialog","this","onClick","ev","stopPropagation","preventDefault","close","open","isOpen","el","addEventListener","onClose","emit","once","onEscape","event","key","hasCloseIcon","componentDidLoad","querySelectorAll","forEach","item","render","modalIsOpenClass","modalhasClose","icon","color","alertInfoOutline","alertSuccessOutline","alertWarningOutline","alertDangerOutline","h","Host","class","role","tabindex","undefined","type","navigationClose","part","label","id","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-label=\"dialogLabel\">\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\">{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,aAAY,eACxHJ,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,gBAAgBhC,KAAKuC,OAC/BT,EAAA,KAAGE,MAAM,qBAAqBQ,GAAG,cAAcxC,KAAKyC,cAEtDX,EAAA,UAAQE,MAAM,iBACZF,EAAA,gB"}
+{"version":3,"names":["dialogCss","Dialog","this","onClick","ev","stopPropagation","preventDefault","close","open","isOpen","el","addEventListener","onClose","emit","once","onEscape","event","key","hasCloseIcon","componentDidLoad","querySelectorAll","forEach","item","render","modalIsOpenClass","modalhasClose","icon","color","alertInfoOutline","alertSuccessOutline","alertWarningOutline","alertDangerOutline","h","Host","class","role","tabindex","undefined","type","navigationClose","part","label","id","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-label=\"dialogLabel\">\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\">{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,0+D,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,aAAY,eACxHJ,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,gBAAgBhC,KAAKuC,OAC/BT,EAAA,KAAGE,MAAM,qBAAqBQ,GAAG,cAAcxC,KAAKyC,cAEtDX,EAAA,UAAQE,MAAM,iBACZF,EAAA,gB"}

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

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

package/dist/roadtrip/{p-efe6e22f.entry.js.map → p-b376be90.entry.js.map}

@@ -1 +1 @@
-{"version":3,"names":["areaCodeCss","RoadAreaCode","this","onChange","ev","select","target","value","selectedValue","getMatchedOptionValue","onBlur","roadblur","emit","roadBlur","onFocus","roadfocus","roadFocus","selectIds","selectId","valueChanged","roadchange","roadChange","componentWillLoad","options","length","_b","_a","find","option","render","labelId","valueId","isInvalidClass","error","undefined","h","Host","class","sizes","id","disabled","autoFocus","autofocus","name","required","size","map","selected","label","htmlFor"],"sources":["src/components/area-code/area-code.css?tag=road-area-code&encapsulation=scoped","src/components/area-code/area-code.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  background-color: var(--road-surface);\n  border: 1px solid var(--road-input-outline);\n  border-radius: 0.25rem;\n  border-top-right-radius: 0;\n  border-bottom-right-radius: 0;\n  box-shadow: none;\n  appearance: none;\n  width: 5rem;\n  height: 3.5rem;\n}\n\n/* SELECT\n  -------------------- */\n\n.form-select-area {\n  box-sizing: border-box;\n  display: block;\n  width: 100%;\n  height: 3rem;\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  position: absolute;\n  top: 0;\n  left: 0;\n  height: 100%;\n  width: 100%;\n  z-index: 1;\n  border: 0;\n  opacity: 0;\n  cursor: pointer;\n}\n\n.form-select-area:-moz-focusring {\n  color: transparent;\n  text-shadow: 0 0 0 #000000;\n}\n\n.form-select-area::-ms-expand { /* IE fix remove native arrow */\n  display: none;\n}\n\n/**\n  * Placeholder\n  */\n\n.form-select-area::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-area:not(:disabled):hover {\n    border-color: var(--road-input-outline-variant);\n  }\n}\n\n/**\n  * Focus state\n  */\n\n.form-select-area:focus ~ .form-select-area-label,\n.form-select-area[required]:valid ~ .form-select-area-label,\n.form-select-area.has-value ~ .form-select-area-label {\n  transform: scale(0.625) translateY(-0.625rem);\n}\n\n.form-select-area: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-area:disabled,\n.form-select-area[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-area-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-area:required ~ .form-select-area-label::after{\n  color: var(--road-on-danger-surface);\n  content: \" *\";\n}\n\n/* Value\n  -------------------- */\n\n.form-select-area-value {\n  position: absolute;\n  top: 1.4rem;\n  left: 1rem;\n  display: block;\n  font-size: var(--road-label-medium);\n  line-height: 1.5;\n  color: var(--road-on-surface);\n  pointer-events: none;\n  transition: transform 200ms cubic-bezier(0, 0, 0.2, 1) 0ms;\n  transform-origin: 0 0;\n}\n\n\n/* SIZES\n  -------------------- */\n\n:host(.select-xl) .form-select-area {\n  height: 3.5rem;\n  padding: 0.75rem 0 0 1rem;\n}\n\n:host(.select-xl) .form-select-area-label {\n  top: 1rem;\n}\n\n:host(.select-xl) .form-select-area:focus ~ .form-select-area-label,\n:host(.select-xl) .form-select-area[required]:valid ~ .form-select-area-label,\n:host(.select-xl) .form-select-area.has-value ~ .form-select-area-label,\n:host(.select-xl) .form-select-area[type=\"date\"] ~ .form-select-area-label,\n:host(.select-xl) .form-select-area[type=\"time\"] ~ .form-select-area-label {\n  transform: scale(0.75) translateY(-0.625rem);\n}\n\n:host(.select-xl) .form-select-area:placeholder-shown ~ .form-select-area-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-area.is-invalid,\n.was-validated .form-select-area:invalid {\n  border-color: var(--road-on-danger-surface);\n}\n\n.form-select-area.is-invalid ~ .invalid-feedback,\n.was-validated .form-select-area:invalid ~ .invalid-feedback {\n  display: block;\n}\n\n\n.form-select-area option:checked::after {\n  position: absolute;\n  top: 0;\n  left: 0;\n  content: attr(data-content);\n}\n\n.form-select-area::after {\n  position: absolute;\n  top: 0;\n  left: 0;\n  content: var(--selected-content, '');\n}\n","import { Component, Event, EventEmitter, Host, Prop, Watch, h, State } from '@stencil/core';\n\n@Component({\n  tag: 'road-area-code',\n  styleUrl: 'area-code.css',  // Mettez à jour le nom du fichier de style si nécessaire\n  scoped: true,\n})\nexport class RoadAreaCode {\n\n  /**\n   * The id of select\n   */\n\n  @Prop() selectId: string = `road-select-${selectIds++}`;\n  @State() selectedValue: string = '';\n\n/**\n   * List of options of the area code\n   */\n  @Prop() options: Array<{\n    value: string;\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\n  @Prop() autofocus: boolean = false;\n\n  /**\n   * If `true`, the user cannot interact with the select.\n   */\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 * The size of the areacode\n */\n  @Prop() size: number = 0;\n\n  /**\n * The size of the areacode\n */\n  @Prop() sizes: 'lg' | 'xl' = 'lg';\n\n  /**\n * The label of the areacode\n */\n  @Prop() label: string = 'Country';\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: string = '';\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\n  @Event() roadfocus!: EventEmitter<void>;\n  /** @internal */\n  @Event() roadFocus!: EventEmitter<void>;\n\n  /**\n* Emitted when the select loses focus.\n*/\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.selectedValue = this.getMatchedOptionValue();\n  }\n\n  /**\n   * Trigger number.\n   */\n  @Prop({ mutable: true }) triggerRender: number = 0;\n\n  componentWillLoad() {\n    if (!this.value && this.options.length > 0) {\n      this.selectedValue = this.options[0].value;\n    } else {\n      this.selectedValue = this.getMatchedOptionValue();\n    }\n  }\n\n  getMatchedOptionValue() {\n    return this.options.find(option => option.value === this.value)?.value ?? '';\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.selectedValue = this.getMatchedOptionValue();\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 valueId = this.selectId + '-value';\n\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-area has-value ${isInvalidClass}`}  // Appliquez la classe has-value par défaut ici\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          {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-area-label\" id={labelId} htmlFor={this.selectId}>{this.label}</label>\n        <label class=\"form-select-area-value\" id={valueId} htmlFor={this.selectId}>+{this.selectedValue}</label>\n        {this.error && this.error !== '' && <p class=\"invalid-feedback\">{this.error}</p>}\n      </Host>\n    );\n  }\n}\n\nlet selectIds = 0;\n"],"mappings":"yDAAA,MAAMA,EAAc,y0I,MCOPC,EAAY,M,uPAwHfC,KAAAC,SAAYC,IAClB,MAAMC,EAASD,EAAGE,OAClB,GAAID,EAAQ,CACVH,KAAKK,MAAQF,EAAOE,OAAS,GAC7BL,KAAKM,cAAgBN,KAAKO,uB,GAItBP,KAAAQ,OAAS,KACfR,KAAKS,SAASC,OACdV,KAAKW,SAASD,MAAM,EAGdV,KAAAY,QAAU,KAChBZ,KAAKa,UAAUH,OACfV,KAAKc,UAAUJ,MAAM,E,cAjII,eAAeK,M,mBACT,G,aAS5B,G,eAMwB,M,cAMD,M,UAKLf,KAAKgB,S,cAKA,M,UAKL,E,WAKM,K,WAKL,U,gCAUiB,G,mBA2CQ,C,CAbjD,YAAAC,GACEjB,KAAKkB,WAAWR,KAAK,CACnBL,MAAOL,KAAKK,QAEdL,KAAKmB,WAAWT,KAAK,CACnBL,MAAOL,KAAKK,QAEdL,KAAKM,cAAgBN,KAAKO,uB,CAQ5B,iBAAAa,GACE,IAAKpB,KAAKK,OAASL,KAAKqB,QAAQC,OAAS,EAAG,CAC1CtB,KAAKM,cAAgBN,KAAKqB,QAAQ,GAAGhB,K,KAChC,CACLL,KAAKM,cAAgBN,KAAKO,uB,EAI9B,qBAAAA,G,QACE,OAAOgB,GAAAC,EAAAxB,KAAKqB,QAAQI,MAAKC,GAAUA,EAAOrB,QAAUL,KAAKK,WAAM,MAAAmB,SAAA,SAAAA,EAAEnB,SAAK,MAAAkB,SAAA,EAAAA,EAAI,E,CAqB5E,MAAAI,GACE,MAAMC,EAAU5B,KAAKgB,SAAW,SAChC,MAAMa,EAAU7B,KAAKgB,SAAW,SAEhC,MAAMc,EAAiB9B,KAAK+B,QAAUC,WAAahC,KAAK+B,QAAU,GAAK,aAAe,GAEtF,OACEE,EAACC,EAAI,CAACC,MAAOnC,KAAKoC,OAAS,UAAUpC,KAAKoC,SACxCH,EAAA,UACEE,MAAO,8BAA8BL,IACrCO,GAAIrC,KAAKgB,SAAQ,gBACFhB,KAAKsC,SAAW,OAAS,KACxCC,UAAWvC,KAAKwC,UAChBF,SAAUtC,KAAKsC,SACfG,KAAMzC,KAAKyC,KACXC,SAAU1C,KAAK0C,SACfC,KAAM3C,KAAK2C,KACX1C,SAAUD,KAAKC,SACfW,QAASZ,KAAKY,QACdJ,OAAQR,KAAKQ,QAEZR,KAAKqB,SAAWrB,KAAKqB,QAAQuB,KAAIlB,GAChCO,EAAA,UAAQ5B,MAAOqB,EAAOrB,MAAOwC,SAAUnB,EAAOmB,UAAWnB,EAAOoB,UAGpEb,EAAA,SAAOE,MAAM,yBAAyBE,GAAIT,EAASmB,QAAS/C,KAAKgB,UAAWhB,KAAK8C,OACjFb,EAAA,SAAOE,MAAM,yBAAyBE,GAAIR,EAASkB,QAAS/C,KAAKgB,UAAQ,IAAIhB,KAAKM,eACjFN,KAAK+B,OAAS/B,KAAK+B,QAAU,IAAME,EAAA,KAAGE,MAAM,oBAAoBnC,KAAK+B,O,wDAM9E,IAAIhB,EAAY,E"}
+{"version":3,"names":["areaCodeCss","RoadAreaCode","this","onChange","ev","select","target","value","selectedValue","getMatchedOptionValue","onBlur","roadblur","emit","roadBlur","onFocus","roadfocus","roadFocus","selectIds","selectId","valueChanged","roadchange","roadChange","componentWillLoad","options","length","_b","_a","find","option","render","labelId","valueId","isInvalidClass","error","undefined","h","Host","class","sizes","id","disabled","autoFocus","autofocus","name","required","size","map","selected","label","htmlFor"],"sources":["src/components/area-code/area-code.css?tag=road-area-code&encapsulation=scoped","src/components/area-code/area-code.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  background-color: var(--road-surface);\n  border: 1px solid var(--road-input-outline);\n  border-radius: 0.25rem;\n  border-top-right-radius: 0;\n  border-bottom-right-radius: 0;\n  box-shadow: none;\n  appearance: none;\n  width: 5rem;\n  height: 3.5rem;\n}\n\n/* SELECT\n  -------------------- */\n\n.form-select-area {\n  box-sizing: border-box;\n  display: block;\n  width: 100%;\n  height: 3rem;\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  position: absolute;\n  top: 0;\n  left: 0;\n  height: 100%;\n  width: 100%;\n  z-index: 1;\n  border: 0;\n  opacity: 0;\n  cursor: pointer;\n}\n\n.form-select-area:-moz-focusring {\n  color: transparent;\n  text-shadow: 0 0 0 #000000;\n}\n\n.form-select-area::-ms-expand { /* IE fix remove native arrow */\n  display: none;\n}\n\n/**\n  * Placeholder\n  */\n\n.form-select-area::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-area:not(:disabled):hover {\n    border-color: var(--road-input-outline-variant);\n  }\n}\n\n/**\n  * Focus state\n  */\n\n.form-select-area:focus ~ .form-select-area-label,\n.form-select-area[required]:valid ~ .form-select-area-label,\n.form-select-area.has-value ~ .form-select-area-label {\n  transform: scale(0.625) translateY(-0.625rem);\n}\n\n.form-select-area: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-area:disabled,\n.form-select-area[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-area-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-area:required ~ .form-select-area-label::after{\n  color: var(--road-on-danger-surface);\n  content: \" *\";\n}\n\n/* Value\n  -------------------- */\n\n.form-select-area-value {\n  position: absolute;\n  top: 1.4rem;\n  left: 1rem;\n  display: block;\n  font-size: var(--road-label-medium);\n  line-height: 1.5;\n  color: var(--road-on-surface);\n  pointer-events: none;\n  transition: transform 200ms cubic-bezier(0, 0, 0.2, 1) 0ms;\n  transform-origin: 0 0;\n}\n\n\n/* SIZES\n  -------------------- */\n\n:host(.select-xl) .form-select-area {\n  height: 3.5rem;\n  padding: 0.75rem 0 0 1rem;\n}\n\n:host(.select-xl) .form-select-area-label {\n  top: 1rem;\n}\n\n:host(.select-xl) .form-select-area:focus ~ .form-select-area-label,\n:host(.select-xl) .form-select-area[required]:valid ~ .form-select-area-label,\n:host(.select-xl) .form-select-area.has-value ~ .form-select-area-label,\n:host(.select-xl) .form-select-area[type=\"date\"] ~ .form-select-area-label,\n:host(.select-xl) .form-select-area[type=\"time\"] ~ .form-select-area-label {\n  transform: scale(0.75) translateY(-0.625rem);\n}\n\n:host(.select-xl) .form-select-area:placeholder-shown ~ .form-select-area-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-area.is-invalid,\n.was-validated .form-select-area:invalid {\n  border-color: var(--road-on-danger-surface);\n}\n\n.form-select-area.is-invalid ~ .invalid-feedback,\n.was-validated .form-select-area:invalid ~ .invalid-feedback {\n  display: block;\n}\n\n\n.form-select-area option:checked::after {\n  position: absolute;\n  top: 0;\n  left: 0;\n  content: attr(data-content);\n}\n\n.form-select-area::after {\n  position: absolute;\n  top: 0;\n  left: 0;\n  content: var(--selected-content, '');\n}\n","import { Component, Event, EventEmitter, Host, Prop, Watch, h, State } from '@stencil/core';\n\n@Component({\n  tag: 'road-area-code',\n  styleUrl: 'area-code.css',  // Mettez à jour le nom du fichier de style si nécessaire\n  scoped: true,\n})\nexport class RoadAreaCode {\n\n  /**\n   * The id of select\n   */\n\n  @Prop() selectId: string = `road-select-${selectIds++}`;\n  @State() selectedValue: string = '';\n\n/**\n   * List of options of the area code\n   */\n  @Prop() options: Array<{\n    value: string;\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\n  @Prop() autofocus: boolean = false;\n\n  /**\n   * If `true`, the user cannot interact with the select.\n   */\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 * The size of the areacode\n */\n  @Prop() size: number = 0;\n\n  /**\n * The size of the areacode\n */\n  @Prop() sizes: 'lg' | 'xl' = 'lg';\n\n  /**\n * The label of the areacode\n */\n  @Prop() label: string = 'Country';\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: string = '';\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\n  @Event() roadfocus!: EventEmitter<void>;\n  /** @internal */\n  @Event() roadFocus!: EventEmitter<void>;\n\n  /**\n* Emitted when the select loses focus.\n*/\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.selectedValue = this.getMatchedOptionValue();\n  }\n\n  /**\n   * Trigger number.\n   */\n  @Prop({ mutable: true }) triggerRender: number = 0;\n\n  componentWillLoad() {\n    if (!this.value && this.options.length > 0) {\n      this.selectedValue = this.options[0].value;\n    } else {\n      this.selectedValue = this.getMatchedOptionValue();\n    }\n  }\n\n  getMatchedOptionValue() {\n    return this.options.find(option => option.value === this.value)?.value ?? '';\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.selectedValue = this.getMatchedOptionValue();\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 valueId = this.selectId + '-value';\n\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-area has-value ${isInvalidClass}`}  // Appliquez la classe has-value par défaut ici\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          {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-area-label\" id={labelId} htmlFor={this.selectId}>{this.label}</label>\n        <label class=\"form-select-area-value\" id={valueId} htmlFor={this.selectId}>+{this.selectedValue}</label>\n        {this.error && this.error !== '' && <p class=\"invalid-feedback\">{this.error}</p>}\n      </Host>\n    );\n  }\n}\n\nlet selectIds = 0;\n"],"mappings":"yDAAA,MAAMA,EAAc,izI,MCOPC,EAAY,M,uPAwHfC,KAAAC,SAAYC,IAClB,MAAMC,EAASD,EAAGE,OAClB,GAAID,EAAQ,CACVH,KAAKK,MAAQF,EAAOE,OAAS,GAC7BL,KAAKM,cAAgBN,KAAKO,uB,GAItBP,KAAAQ,OAAS,KACfR,KAAKS,SAASC,OACdV,KAAKW,SAASD,MAAM,EAGdV,KAAAY,QAAU,KAChBZ,KAAKa,UAAUH,OACfV,KAAKc,UAAUJ,MAAM,E,cAjII,eAAeK,M,mBACT,G,aAS5B,G,eAMwB,M,cAMD,M,UAKLf,KAAKgB,S,cAKA,M,UAKL,E,WAKM,K,WAKL,U,gCAUiB,G,mBA2CQ,C,CAbjD,YAAAC,GACEjB,KAAKkB,WAAWR,KAAK,CACnBL,MAAOL,KAAKK,QAEdL,KAAKmB,WAAWT,KAAK,CACnBL,MAAOL,KAAKK,QAEdL,KAAKM,cAAgBN,KAAKO,uB,CAQ5B,iBAAAa,GACE,IAAKpB,KAAKK,OAASL,KAAKqB,QAAQC,OAAS,EAAG,CAC1CtB,KAAKM,cAAgBN,KAAKqB,QAAQ,GAAGhB,K,KAChC,CACLL,KAAKM,cAAgBN,KAAKO,uB,EAI9B,qBAAAA,G,QACE,OAAOgB,GAAAC,EAAAxB,KAAKqB,QAAQI,MAAKC,GAAUA,EAAOrB,QAAUL,KAAKK,WAAM,MAAAmB,SAAA,SAAAA,EAAEnB,SAAK,MAAAkB,SAAA,EAAAA,EAAI,E,CAqB5E,MAAAI,GACE,MAAMC,EAAU5B,KAAKgB,SAAW,SAChC,MAAMa,EAAU7B,KAAKgB,SAAW,SAEhC,MAAMc,EAAiB9B,KAAK+B,QAAUC,WAAahC,KAAK+B,QAAU,GAAK,aAAe,GAEtF,OACEE,EAACC,EAAI,CAACC,MAAOnC,KAAKoC,OAAS,UAAUpC,KAAKoC,SACxCH,EAAA,UACEE,MAAO,8BAA8BL,IACrCO,GAAIrC,KAAKgB,SAAQ,gBACFhB,KAAKsC,SAAW,OAAS,KACxCC,UAAWvC,KAAKwC,UAChBF,SAAUtC,KAAKsC,SACfG,KAAMzC,KAAKyC,KACXC,SAAU1C,KAAK0C,SACfC,KAAM3C,KAAK2C,KACX1C,SAAUD,KAAKC,SACfW,QAASZ,KAAKY,QACdJ,OAAQR,KAAKQ,QAEZR,KAAKqB,SAAWrB,KAAKqB,QAAQuB,KAAIlB,GAChCO,EAAA,UAAQ5B,MAAOqB,EAAOrB,MAAOwC,SAAUnB,EAAOmB,UAAWnB,EAAOoB,UAGpEb,EAAA,SAAOE,MAAM,yBAAyBE,GAAIT,EAASmB,QAAS/C,KAAKgB,UAAWhB,KAAK8C,OACjFb,EAAA,SAAOE,MAAM,yBAAyBE,GAAIR,EAASkB,QAAS/C,KAAKgB,UAAQ,IAAIhB,KAAKM,eACjFN,KAAK+B,OAAS/B,KAAK+B,QAAU,IAAME,EAAA,KAAGE,MAAM,oBAAoBnC,KAAK+B,O,wDAM9E,IAAIhB,EAAY,E"}

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

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

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

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