@justifi/webcomponents 4.2.2 → 4.5.0

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

@@ -0,0 +1,194 @@
+import { Host, h, } from "@stencil/core";
+export class NumberInput {
+  constructor() {
+    this.label = undefined;
+    this.name = undefined;
+    this.error = undefined;
+    this.defaultValue = undefined;
+    this.inputHandler = undefined;
+    this.disabled = undefined;
+    this.input = undefined;
+  }
+  handleDefaultValueChange(newValue) {
+    this.updateInput(newValue);
+  }
+  updateInput(newValue) {
+    const inputElement = this.el.shadowRoot.querySelector('input');
+    if (inputElement) {
+      inputElement.value = newValue || '';
+    }
+  }
+  handleFormControlInput(event) {
+    const target = event.target;
+    const name = target.getAttribute('name');
+    this.inputHandler(name, target.value);
+  }
+  componentDidLoad() {
+    this.updateInput(this.defaultValue);
+  }
+  render() {
+    return (h(Host, { exportparts: "label,input,input-invalid" }, h("label", { part: "label", class: "form-label", htmlFor: this.name }, this.label), h("input", { id: this.name, name: this.name, onInput: (event) => this.handleFormControlInput(event), onBlur: () => this.formControlBlur.emit(), part: `input ${this.error && 'input-invalid'}`, class: this.error ? 'form-control is-invalid' : 'form-control', type: "number", disabled: this.disabled }), this.error && h("div", { class: "invalid-feedback" }, this.error)));
+  }
+  static get is() { return "form-control-number"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["form-control-number.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["form-control-number.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": ""
+        }
+      },
+      "disabled": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "disabled",
+        "reflect": false
+      }
+    };
+  }
+  static get states() {
+    return {
+      "input": {}
+    };
+  }
+  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": {}
+        }
+      }];
+  }
+  static get elementRef() { return "el"; }
+  static get watchers() {
+    return [{
+        "propName": "defaultValue",
+        "methodName": "handleDefaultValueChange"
+      }];
+  }
+}
+//# sourceMappingURL=form-control-number.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"form-control-number.js","sourceRoot":"","sources":["../../../../src/components/form/form-control-number.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EACT,IAAI,EACJ,CAAC,EACD,IAAI,EACJ,KAAK,EAEL,KAAK,EACL,OAAO,EACP,KAAK,GACN,MAAM,eAAe,CAAC;AAOvB,MAAM,OAAO,WAAW;;;;;;;;;;EActB,wBAAwB,CAAC,QAAgB;IACvC,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC,CAAC;EAC7B,CAAC;EAED,WAAW,CAAC,QAAa;IACvB,MAAM,YAAY,GAAG,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;IAC/D,IAAI,YAAY,EAAE;MAChB,YAAY,CAAC,KAAK,GAAG,QAAQ,IAAI,EAAE,CAAC;KACrC;EACH,CAAC;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;EACxC,CAAC;EAED,gBAAgB;IACd,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;EACtC,CAAC;EAED,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,aACE,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,MAAM,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,eAAe,CAAC,IAAI,EAAE,EACzC,IAAI,EAAE,SAAS,IAAI,CAAC,KAAK,IAAI,eAAe,EAAE,EAC9C,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,yBAAyB,CAAC,CAAC,CAAC,cAAc,EAC9D,IAAI,EAAC,QAAQ,EACb,QAAQ,EAAE,IAAI,CAAC,QAAQ,GACvB;MACD,IAAI,CAAC,KAAK,IAAI,WAAK,KAAK,EAAC,kBAAkB,IAAE,IAAI,CAAC,KAAK,CAAO,CAC1D,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {\n  Component,\n  Host,\n  h,\n  Prop,\n  Event,\n  EventEmitter,\n  State,\n  Element,\n  Watch,\n} from '@stencil/core';\n\n@Component({\n  tag: 'form-control-number',\n  styleUrl: 'form-control-number.scss',\n  shadow: true,\n})\nexport class NumberInput {\n  @Element() el: HTMLElement;\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() disabled: boolean;\n  @State() input: string;\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    const inputElement = this.el.shadowRoot.querySelector('input');\n    if (inputElement) {\n      inputElement.value = newValue || '';\n    }\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        <input\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-control is-invalid' : 'form-control'}\n          type=\"number\"\n          disabled={this.disabled}\n        />\n        {this.error && <div class=\"invalid-feedback\">{this.error}</div>}\n      </Host>\n    );\n  }\n}\n"]}