@roadtrip/components 3.11.2 → 3.12.0

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

@@ -1 +0,0 @@
-{"version":3,"names":["selectCss","Select","this","onChange","ev","select","target","value","onBlur","roadblur","emit","roadBlur","onFocus","roadfocus","roadFocus","selectIds","selectId","valueChanged","roadchange","roadChange","render","labelId","hasValueClass","isInvalidClass","error","undefined","h","Host","class","sizes","id","disabled","autoFocus","autofocus","name","required","size","selected","hidden","style","display","options","map","option","label","htmlFor"],"sources":["src/components/select/select.css?tag=road-select&encapsulation=scoped","src/components/select/select.tsx"],"sourcesContent":["/*\n * Select\n *\n * Index\n * - Select\n * - Label\n * - Sizes\n * - Error\n */\n\n\n:host {\n  position: relative;\n  display: block;\n  margin-bottom: 1rem;\n  font-family: var(--road-font, sans-serif);\n  color: var(--road-on-surface);\n}\n\n/* SELECT\n -------------------- */\n\n.form-select {\n  box-sizing: border-box;\n  display: block;\n  width: 100%;\n  height: auto;\n  padding: 0.75rem 3rem 0 1rem;\n  margin: 0;\n  font-size: var(--road-body-medium);\n  line-height: 1.5;\n  color: var(--road-on-surface);\n  background: url(\"data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2NCA2NCIgZmlsbD0icmdiYSgyMywgMzAsIDUyLCAwLjcyKSI+PHBhdGggZD0iTTIzIDI2bDkgMTIgOS0xMnoiLz48L3N2Zz4=\") no-repeat right 1rem center/1.5rem 2rem;\n  background-color: var(--road-surface);\n  border: 1px solid var(--road-input-outline);\n  border-radius: 0.25rem;\n  box-shadow: none;\n  appearance: none;\n}\n\n.form-select:-moz-focusring {\n  color: transparent;\n  text-shadow: 0 0 0 #000000;\n}\n\n.form-select::-ms-expand { /* IE fix remove native arrow */\n  display: none;\n}\n\n/**\n * Placeholder\n */\n\n.form-select::placeholder {\n  color: var(--road-on-surface-extra-weak);\n}\n\n/**\n * Hover state\n */\n\n@media (hover: hover) {\n\n  .form-select:not(:disabled):hover {\n    border-color: var(--road-input-outline-variant);\n  }\n}\n\n/**\n * Focus state\n */\n\n.form-select:focus ~ .form-select-label,\n.form-select[required]:valid ~ .form-select-label,\n.form-select.has-value ~ .form-select-label {\n  transform: scale(0.625) translateY(-0.625rem);\n}\n\n.form-select:not(:disabled):focus {\n  border-color: var(--road-input-outline-variant);\n  outline: 0;\n}\n\n/**\n * Disabled state\n */\n\n.form-select:disabled,\n.form-select[readonly] {\n  color: var(--road-on-surface-disabled);\n  cursor: not-allowed;\n  background-color: var(--road-surface-disabled);\n  opacity: 1;\n}\n\n/* LABEL\n -------------------- */\n\n.form-select-label {\n  position: absolute;\n  top: 0.75rem;\n  left: 1rem;\n  display: block;\n  font-size: var(--road-label-medium);\n  line-height: 1.5;\n  color: var(--road-on-surface-extra-weak);\n  pointer-events: none;\n  transition: transform 200ms cubic-bezier(0, 0, 0.2, 1) 0ms;\n  transform-origin: 0 0;\n}\n\n.form-select:required ~ .form-select-label::after{\n  color: var(--road-on-danger-surface);\n  content: \" *\";\n}\n\n/* SIZES\n -------------------- */\n\n:host(.select-xl) .form-select {\n  min-height: 3.5rem;\n  padding: 1rem 1rem 0;\n}\n\n:host(.select-xl) .form-select-label {\n  top: 1rem;\n}\n\n:host(.select-xl) .form-select:focus ~ .form-select-label,\n:host(.select-xl) .form-select[required]:valid ~ .form-select-label,\n:host(.select-xl) .form-select.has-value ~ .form-select-label,\n:host(.select-xl) .form-select[type=\"date\"] ~ .form-select-label,\n:host(.select-xl) .form-select[type=\"time\"] ~ .form-select-label {\n  transform: scale(0.75) translateY(-0.625rem);\n}\n\n:host(.select-xl) .form-select:placeholder-shown ~ .form-select-label {\n  transform: scale(0.75) translateY(-0.625rem);\n}\n\n:host(.select-lg) .form-select {\n  min-height: 3rem;\n}\n\n:host(.select-md) .form-select {\n  min-height: 2.5rem;\n  padding: 1rem 1rem 0;\n  font-size: var(--road-body-small);\n}\n\n:host(.select-md) .form-select-label {\n  top: 0.5rem;\n}\n\n:host(.select-md) .form-select:focus ~ .form-select-label,\n:host(.select-md) .form-select[required]:valid ~ .form-select-label,\n:host(.select-md) .form-select.has-value ~ .form-select-label,\n:host(.select-md) .form-select[type=\"date\"] ~ .form-select-label,\n:host(.select-md) .form-select[type=\"time\"] ~ .form-select-label {\n  transform: scale(0.75) translateY(-0.625rem);\n}\n\n:host(.select-md) .form-select:placeholder-shown ~ .form-select-label {\n  transform: scale(0.75) translateY(-0.625rem);\n}\n\n/* ERROR\n -------------------- */\n\n.invalid-feedback {\n  display: none;\n  width: 100%;\n  margin-top: 0.5rem;\n  font-size: var(--road-body-small);\n  color: var(--road-on-danger-surface);\n}\n\n.form-select.is-invalid,\n.was-validated .form-select:invalid {\n  border-color: var(--road-on-danger-surface);\n}\n\n.form-select.is-invalid ~ .invalid-feedback,\n.was-validated .form-select:invalid ~ .invalid-feedback {\n  display: block;\n}\n","import { Component, Event, EventEmitter, Host, Prop, Watch, h } from '@stencil/core';\n\n@Component({\n  tag: 'road-select',\n  styleUrl: 'select.css',\n  scoped: true,\n})\nexport class Select {\n\n  /**\n   * The id of select\n   */\n  @Prop() selectId: string = `road-select-${selectIds++}`;\n\n  /**\n   * List of options of the select\n   */\n  @Prop() options: Array<{\n    value: string | number;\n    label: string;\n    selected?: boolean;\n  }> = [];\n\n  /**\n   * This Boolean attribute lets you specify that a form control should have input focus when the page loads.\n   */\n  @Prop() autofocus: boolean = false;\n\n  /**\n   * If `true`, the user cannot interact with the select.\n   */\n  @Prop() disabled: boolean = false;\n\n  /**\n   * The name of the control, which is submitted with the form data.\n   */\n  @Prop() name: string = this.selectId;\n\n  /**\n   * If `true`, the user must fill in a value before submitting a form.\n   */\n  @Prop() required: boolean = false;\n\n  /**\n   * If the control is presented as a scrolling list box (e.g. when multiple is specified),\n   * this attribute represents the number of rows in the list that should be visible at one time.\n   */\n  @Prop() size: number = 0;\n\n  /**\n   * The sizes of the input.\n   */\n   @Prop() sizes: 'md' | 'lg' | 'xl' = 'xl';\n\n  /**\n   * Label for the field\n   */\n  @Prop() label: string = `${this.selectId}-label`;\n\n  /**\n   * Error message for the field\n   */\n  @Prop() error?: string;\n\n  /**\n   * the value of the select.\n   */\n  @Prop({ mutable: true }) value?: any | null;\n\n  /**\n   * Emitted when the value has changed.\n   */\n  @Event() roadchange!: EventEmitter<{\n    value: string | undefined | null\n  }>;\n  /** @internal */\n  @Event() roadChange!: EventEmitter<{\n    value: string | undefined | null\n  }>;\n\n  /**\n   * Emitted when the select has focus.\n   */\n  @Event() roadfocus!: EventEmitter<void>;\n  /** @internal */\n  @Event() roadFocus!: EventEmitter<void>;\n\n  /**\n   * Emitted when the select loses focus.\n   */\n  @Event() roadblur!: EventEmitter<void>;\n  /** @internal */\n  @Event() roadBlur!: EventEmitter<void>;\n\n  @Watch('value')\n  valueChanged() {\n    this.roadchange.emit({\n      value: this.value,\n    });\n    this.roadChange.emit({\n      value: this.value,\n    });\n  }\n\n  private onChange = (ev: Event) => {\n    const select = ev.target as HTMLSelectElement | null;\n    if (select) {\n      this.value = select.value || '';\n    }\n  };\n\n  private onBlur = () => {\n    this.roadblur.emit();\n    this.roadBlur.emit();\n  };\n\n  private onFocus = () => {\n    this.roadfocus.emit();\n    this.roadFocus.emit();\n  };\n\n  render() {\n    const labelId = this.selectId + '-label';\n    const hasValueClass = this.value && this.value !== '' ? 'has-value' : '';\n    const isInvalidClass = this.error !== undefined && this.error !== '' ? 'is-invalid' : '';\n\n    return (\n      <Host class={this.sizes && `select-${this.sizes}`}>\n        <select\n          class={`form-select ${hasValueClass} ${isInvalidClass}`}\n          id={this.selectId}\n          aria-disabled={this.disabled ? 'true' : null}\n          autoFocus={this.autofocus}\n          disabled={this.disabled}\n          name={this.name}\n          required={this.required}\n          size={this.size}\n          onChange={this.onChange}\n          onFocus={this.onFocus}\n          onBlur={this.onBlur}\n        >\n          <option selected disabled hidden style={{ display: 'none' }} value=\"\"></option>\n          {this.options && this.options.map(option => (\n            <option value={option.value} selected={option.selected}>{option.label}</option>\n          ))}\n        </select>\n        <label class=\"form-select-label\" id={labelId} htmlFor={this.selectId}>{this.label}</label>\n        {this.error && this.error !== '' && <p class=\"invalid-feedback\">{this.error}</p>}\n      </Host>\n    );\n  }\n\n}\n\nlet selectIds = 0;\n"],"mappings":"yDAAA,MAAMA,EAAY,izI,MCOLC,EAAM,M,uPAiGTC,KAAAC,SAAYC,IAClB,MAAMC,EAASD,EAAGE,OAClB,GAAID,EAAQ,CACVH,KAAKK,MAAQF,EAAOE,OAAS,E,GAIzBL,KAAAM,OAAS,KACfN,KAAKO,SAASC,OACdR,KAAKS,SAASD,MAAM,EAGdR,KAAAU,QAAU,KAChBV,KAAKW,UAAUH,OACfR,KAAKY,UAAUJ,MAAM,E,cA1GI,eAAeK,M,aASrC,G,eAKwB,M,cAKD,M,UAKLb,KAAKc,S,cAKA,M,UAML,E,WAKc,K,WAKb,GAAGd,KAAKc,iB,0CAsChC,YAAAC,GACEf,KAAKgB,WAAWR,KAAK,CACnBH,MAAOL,KAAKK,QAEdL,KAAKiB,WAAWT,KAAK,CACnBH,MAAOL,KAAKK,O,CAqBhB,MAAAa,GACE,MAAMC,EAAUnB,KAAKc,SAAW,SAChC,MAAMM,EAAgBpB,KAAKK,OAASL,KAAKK,QAAU,GAAK,YAAc,GACtE,MAAMgB,EAAiBrB,KAAKsB,QAAUC,WAAavB,KAAKsB,QAAU,GAAK,aAAe,GAEtF,OACEE,EAACC,EAAI,CAACC,MAAO1B,KAAK2B,OAAS,UAAU3B,KAAK2B,SACxCH,EAAA,UACEE,MAAO,eAAeN,KAAiBC,IACvCO,GAAI5B,KAAKc,SAAQ,gBACFd,KAAK6B,SAAW,OAAS,KACxCC,UAAW9B,KAAK+B,UAChBF,SAAU7B,KAAK6B,SACfG,KAAMhC,KAAKgC,KACXC,SAAUjC,KAAKiC,SACfC,KAAMlC,KAAKkC,KACXjC,SAAUD,KAAKC,SACfS,QAASV,KAAKU,QACdJ,OAAQN,KAAKM,QAEbkB,EAAA,UAAQW,SAAQ,KAACN,SAAQ,KAACO,OAAM,KAACC,MAAO,CAAEC,QAAS,QAAUjC,MAAM,KAClEL,KAAKuC,SAAWvC,KAAKuC,QAAQC,KAAIC,GAChCjB,EAAA,UAAQnB,MAAOoC,EAAOpC,MAAO8B,SAAUM,EAAON,UAAWM,EAAOC,UAGpElB,EAAA,SAAOE,MAAM,oBAAoBE,GAAIT,EAASwB,QAAS3C,KAAKc,UAAWd,KAAK0C,OAC3E1C,KAAKsB,OAAStB,KAAKsB,QAAU,IAAME,EAAA,KAAGE,MAAM,oBAAoB1B,KAAKsB,O,wDAO9E,IAAIT,EAAY,E"}