@justifi/webcomponents 4.2.2 → 4.4.0

package/dist/collection/components/form/form-control-select.js

@@ -0,0 +1,168 @@
+import { Host, h } from "@stencil/core";
+export class TextInput {
+  constructor() {
+    this.label = undefined;
+    this.name = undefined;
+    this.error = undefined;
+    this.defaultValue = undefined;
+    this.inputHandler = undefined;
+    this.options = undefined;
+  }
+  handleFormControlInput(event) {
+    const target = event.target;
+    const name = target.getAttribute('name');
+    this.inputHandler(name, target.value);
+  }
+  ;
+  render() {
+    return (h(Host, { exportparts: "label,input,input-invalid" }, h("label", { part: "label", class: "form-label", htmlFor: this.name }, this.label), h("select", { id: this.name, name: this.name, onInput: (event) => this.handleFormControlInput(event), part: `input ${this.error && 'input-invalid'}`, class: this.error ? 'form-select is-invalid' : 'form-select' }, this.options.map(option => (h("option", { value: option.value }, option.label)))), this.error && h("div", { class: "invalid-feedback" }, this.error)));
+  }
+  static get is() { return "form-control-select"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["form-control-select.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["form-control-select.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "label": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "label",
+        "reflect": false
+      },
+      "name": {
+        "type": "any",
+        "mutable": false,
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "name",
+        "reflect": false
+      },
+      "error": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "error",
+        "reflect": false
+      },
+      "defaultValue": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "default-value",
+        "reflect": false
+      },
+      "inputHandler": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "(name: string, value: string) => void",
+          "resolved": "(name: string, value: string) => void",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        }
+      },
+      "options": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "{ label: string; value: string }[]",
+          "resolved": "{ label: string; value: string; }[]",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        }
+      }
+    };
+  }
+  static get events() {
+    return [{
+        "method": "formControlInput",
+        "name": "formControlInput",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }, {
+        "method": "formControlBlur",
+        "name": "formControlBlur",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }];
+  }
+}
+//# sourceMappingURL=form-control-select.js.map

package/dist/collection/components/form/form-control-select.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"form-control-select.js","sourceRoot":"","sources":["../../../../src/components/form/form-control-select.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAgB,MAAM,eAAe,CAAC;AAO9E,MAAM,OAAO,SAAS;;;;;;;;;EAUpB,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;EACxC,CAAC;EAAA,CAAC;EAEF,MAAM;IACJ,OAAO,CACL,EAAC,IAAI,IAAC,WAAW,EAAC,2BAA2B;MAC3C,aAAO,IAAI,EAAC,OAAO,EAAC,KAAK,EAAC,YAAY,EAAC,OAAO,EAAE,IAAI,CAAC,IAAI,IACtD,IAAI,CAAC,KAAK,CACL;MACR,cACE,EAAE,EAAE,IAAI,CAAC,IAAI,EACb,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,OAAO,EAAE,CAAC,KAAU,EAAE,EAAE,CAAC,IAAI,CAAC,sBAAsB,CAAC,KAAK,CAAC,EAC3D,IAAI,EAAE,SAAS,IAAI,CAAC,KAAK,IAAI,eAAe,EAAE,EAC9C,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,wBAAwB,CAAC,CAAC,CAAC,aAAa,IAC3D,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE,CAAC,CAC1B,cAAQ,KAAK,EAAE,MAAM,CAAC,KAAK,IAAG,MAAM,CAAC,KAAK,CAAU,CACrD,CAAC,CACK;MACR,IAAI,CAAC,KAAK,IAAI,WAAK,KAAK,EAAC,kBAAkB,IAAE,IAAI,CAAC,KAAK,CAAO,CAC1D,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, h, Prop, Event, EventEmitter } from '@stencil/core';\n\n@Component({\n  tag: 'form-control-select',\n  styleUrl: 'form-control-select.scss',\n  shadow: true,\n})\nexport class TextInput {\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  @Event() formControlInput: EventEmitter<any>;\n  @Event() formControlBlur: EventEmitter<any>;\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  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          id={this.name}\n          name={this.name}\n          onInput={(event: any) => this.handleFormControlInput(event)}\n          part={`input ${this.error && 'input-invalid'}`}\n          class={this.error ? 'form-select is-invalid' : 'form-select'}>\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"]}