@justifi/webcomponents 4.2.2 → 4.5.0

package/dist/esm/form-control-select.entry.js.map

@@ -0,0 +1 @@
+{"file":"form-control-select.entry.js","mappings":";;AAAA,MAAM,oBAAoB,GAAG,83wCAA83wC;;MCe94wC,WAAW;;;;;;;;;;;;;EActB,wBAAwB,CAAC,QAAgB;IACvC,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC,CAAC;GAC5B;EAED,WAAW,CAAC,QAAa;IACvB,IAAI,CAAC,aAAa,CAAC,KAAK,GAAG,QAAQ,CAAC;GACrC;EAED,sBAAsB,CAAC,KAAU;IAC/B,MAAM,MAAM,GAAG,KAAK,CAAC,MAAM,CAAC;IAC5B,MAAM,IAAI,GAAG,MAAM,CAAC,YAAY,CAAC,MAAM,CAAC,CAAC;IACzC,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE,MAAM,CAAC,KAAK,CAAC,CAAC;GACvC;EAED,gBAAgB;IACd,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;GACrC;EAED,MAAM;IACJ,QACE,EAAC,IAAI,IAAC,WAAW,EAAC,2BAA2B,IAC3C,aAAO,IAAI,EAAC,OAAO,EAAC,KAAK,EAAC,YAAY,EAAC,OAAO,EAAE,IAAI,CAAC,IAAI,IACtD,IAAI,CAAC,KAAK,CACL,EACR,cACE,GAAG,EAAE,EAAE,KAAK,IAAI,CAAC,aAAa,GAAG,EAAuB,CAAC,EACzD,EAAE,EAAE,IAAI,CAAC,IAAI,EACb,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,OAAO,EAAE,CAAC,KAAU,KAAK,IAAI,CAAC,sBAAsB,CAAC,KAAK,CAAC,EAC3D,MAAM,EAAE,MAAM,IAAI,CAAC,eAAe,CAAC,IAAI,EAAE,EACzC,IAAI,EAAE,SAAS,IAAI,CAAC,KAAK,IAAI,eAAe,EAAE,EAC9C,KAAK,EAAE,IAAI,CAAC,KAAK,GAAG,wBAAwB,GAAG,aAAa,EAC5D,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAEtB,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,MAAM,KACtB,cAAQ,KAAK,EAAE,MAAM,CAAC,KAAK,IAAG,MAAM,CAAC,KAAK,CAAU,CACrD,CAAC,CACK,EACR,IAAI,CAAC,KAAK,IAAI,WAAK,KAAK,EAAC,kBAAkB,IAAE,IAAI,CAAC,KAAK,CAAO,CAC1D,EACP;GACH;;;;;;;;;","names":[],"sources":["src/components/form/form-control-select.scss?tag=form-control-select&encapsulation=shadow","src/components/form/form-control-select.tsx"],"sourcesContent":["@import 'reboot';\n@import 'forms';\n\n:host {\n  @include host-base-styles;\n  display: block;\n}\n\nselect[disabled] {\n  background-color: #e9ecef;\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n","import {\n  Component,\n  Host,\n  h,\n  Prop,\n  Event,\n  EventEmitter,\n  Watch,\n} from '@stencil/core';\n\n@Component({\n  tag: 'form-control-select',\n  styleUrl: 'form-control-select.scss',\n  shadow: true,\n})\nexport class SelectInput {\n  selectElement!: HTMLSelectElement;\n\n  @Prop() label: string;\n  @Prop() name: any;\n  @Prop() error: string;\n  @Prop() defaultValue: string;\n  @Prop() inputHandler: (name: string, value: string) => void;\n  @Prop() options: { label: string; value: string }[];\n  @Prop() disabled: boolean;\n  @Event() formControlInput: EventEmitter<any>;\n  @Event() formControlBlur: EventEmitter<any>;\n\n  @Watch('defaultValue')\n  handleDefaultValueChange(newValue: string) {\n    this.updateInput(newValue);\n  }\n\n  updateInput(newValue: any) {\n    this.selectElement.value = newValue;\n  }\n\n  handleFormControlInput(event: any) {\n    const target = event.target;\n    const name = target.getAttribute('name');\n    this.inputHandler(name, target.value);\n  }\n\n  componentDidLoad() {\n    this.updateInput(this.defaultValue);\n  }\n\n  render() {\n    return (\n      <Host exportparts=\"label,input,input-invalid\">\n        <label part=\"label\" class=\"form-label\" htmlFor={this.name}>\n          {this.label}\n        </label>\n        <select\n          ref={el => (this.selectElement = el as HTMLSelectElement)}\n          id={this.name}\n          name={this.name}\n          onInput={(event: any) => this.handleFormControlInput(event)}\n          onBlur={() => this.formControlBlur.emit()}\n          part={`input ${this.error && 'input-invalid'}`}\n          class={this.error ? 'form-select is-invalid' : 'form-select'}\n          disabled={this.disabled}\n        >\n          {this.options.map(option => (\n            <option value={option.value}>{option.label}</option>\n          ))}\n        </select>\n        {this.error && <div class=\"invalid-feedback\">{this.error}</div>}\n      </Host>\n    );\n  }\n}\n"],"version":3}