@justifi/webcomponents 4.4.0 → 4.5.1

package/dist/collection/components/details/details.js

@@ -0,0 +1,66 @@
+import { Host, h } from "@stencil/core";
+import { ErrorState } from "./utils";
+export class Details {
+  constructor() {
+    this.errorMessage = undefined;
+    this.entity = undefined;
+  }
+  render() {
+    var _a, _b;
+    return (h(Host, { exportParts: 'detail-loading-spinner,detail-loading-state,detail-empty-state,\n        detail-head,detail-title,detail-head-info,detail-head-info-item,\n        detail-head-info-item-title,detail-head-info-item-data,detail-metadata,detail-metadata-title,\n        detail-section,detail-section-title,detail-section-item-title,detail-section-item-data' }, this.errorMessage ?
+      ErrorState(this.errorMessage)
+      :
+        h("main", { class: "p-2" }, h("slot", { name: "head-info" }), h("slot", { name: 'detail-sections' }), ((_a = this.entity) === null || _a === void 0 ? void 0 : _a.metadata) && Object.keys((_b = this.entity) === null || _b === void 0 ? void 0 : _b.metadata).length ?
+          h("div", { class: "mt-4" }, h("h2", { part: "detail-metadata-title", class: "fs-3" }, "Metadata"), h("hr", null), h("pre", { part: "detail-metadata", class: "p-2", "aria-label": "metadata content" }, h("code", null, JSON.stringify(this.entity.metadata, null, 2))))
+          : null)));
+  }
+  static get is() { return "justifi-details"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["./details.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["details.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "errorMessage": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "error-message",
+        "reflect": false
+      },
+      "entity": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "{ metadata: any }",
+          "resolved": "{ metadata: any; }",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        }
+      }
+    };
+  }
+}
+//# sourceMappingURL=details.js.map

package/dist/collection/components/details/details.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"details.js","sourceRoot":"","sources":["../../../../src/components/details/details.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AACzD,OAAO,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAQrC,MAAM,OAAO,OAAO;;;;;EAIlB,MAAM;;IACJ,OAAO,CACL,EAAC,IAAI,IACH,WAAW,EAAC,kVAG2E,IAGrF,IAAI,CAAC,YAAY,CAAC,CAAC;MACjB,UAAU,CAAC,IAAI,CAAC,YAAY,CAAC;MAC7B,CAAC;QACD,YAAM,KAAK,EAAC,KAAK;UACf,YAAM,IAAI,EAAC,WAAW,GAAG;UACzB,YAAM,IAAI,EAAC,iBAAiB,GAAG;UAC9B,CAAA,MAAA,IAAI,CAAC,MAAM,0CAAE,QAAQ,KAAI,MAAM,CAAC,IAAI,CAAC,MAAA,IAAI,CAAC,MAAM,0CAAE,QAAQ,CAAC,CAAC,MAAM,CAAC,CAAC;YACnE,WAAK,KAAK,EAAC,MAAM;cACf,UAAI,IAAI,EAAC,uBAAuB,EAAC,KAAK,EAAC,MAAM,eAAc;cAC3D,aAAM;cACN,WAAK,IAAI,EAAC,iBAAiB,EAAC,KAAK,EAAC,KAAK,gBAAY,kBAAkB;gBACnE,gBACG,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,MAAM,CAAC,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC,CACzC,CACH,CACF;YACN,CAAC,CAAC,IAAI,CAEH,CAEN,CACR,CAAA;EACH,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, h, Prop } from '@stencil/core';\nimport { ErrorState } from './utils';\n\n@Component({\n  tag: 'justifi-details',\n  styleUrl: './details.scss',\n  shadow: true,\n})\n\nexport class Details {\n  @Prop() errorMessage: string;\n  @Prop() entity: { metadata: any };\n\n  render() {\n    return (\n      <Host\n        exportParts='detail-loading-spinner,detail-loading-state,detail-empty-state,\n        detail-head,detail-title,detail-head-info,detail-head-info-item,\n        detail-head-info-item-title,detail-head-info-item-data,detail-metadata,detail-metadata-title,\n        detail-section,detail-section-title,detail-section-item-title,detail-section-item-data'\n      >\n        {\n          this.errorMessage ?\n            ErrorState(this.errorMessage)\n            :\n            <main class=\"p-2\">\n              <slot name=\"head-info\" />\n              <slot name='detail-sections' />\n              {this.entity?.metadata && Object.keys(this.entity?.metadata).length ?\n                <div class=\"mt-4\">\n                  <h2 part=\"detail-metadata-title\" class=\"fs-3\">Metadata</h2>\n                  <hr />\n                  <pre part=\"detail-metadata\" class=\"p-2\" aria-label=\"metadata content\">\n                    <code>\n                      {JSON.stringify(this.entity.metadata, null, 2)}\n                    </code>\n                  </pre>\n                </div>\n                : null\n              }\n            </main>\n        }\n      </Host>\n    )\n  }\n}\n"]}

package/dist/collection/components/details/utils.js

@@ -0,0 +1,10 @@
+import { h } from "@stencil/core";
+export const LoadingState = h("main", { part: 'detail-loading-state', class: "p-2 d-flex justify-content-center" }, h("div", { part: 'detail-loading-spinner', class: "spinner-border spinner-border-sm", role: "status" }, h("span", { class: "visually-hidden" }, "Loading...")));
+export const ErrorState = (errorMessage) => h("main", { part: 'detail-empty-state', class: "p-2 d-flex justify-content-center" }, h("div", null, errorMessage));
+export const DetailSection = ({ sectionTitle }, children) => h("div", { part: "detail-section", class: "p-2 mt-4" }, h("h5", { part: "detail-section-title" }, sectionTitle), h("hr", null), h("div", { class: "d-flex flex-column justify-content-center gap-2 text-nowrap" }, children));
+export const DetailItem = ({ title, value }) => (title && value) ?
+  h("div", { class: "d-flex gap-2" }, h("span", { part: "detail-section-item-title", class: "fw-bold col-3" }, title), h("span", { part: "detail-section-item-data", innerHTML: value }))
+  : null;
+export const EntityHeadInfoItem = ({ title, value, classes }) => h("div", { part: "detail-head-info-item", class: `d-flex flex-column ${classes}` }, h("span", { part: "detail-head-info-item-title", class: "fw-bold border-1 border-bottom ps-2 pe-2" }, title), h("span", { part: "detail-head-info-item-data", class: "pt-2 ps-2 pe-2" }, value));
+export const EntityHeadInfo = ({ title, slot, badge }, children) => h("div", { slot: slot, part: 'detail-head', class: "p-2" }, h("div", { class: "d-flex flex-row align-items-center gap-2 mb-2" }, h("h1", { class: "m-0", part: 'detail-title' }, title), badge), h("div", { part: "detail-head-info", class: "d-flex flex-row align-items-top" }, children));
+//# sourceMappingURL=utils.js.map

package/dist/collection/components/details/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../../../src/components/details/utils.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAElC,MAAM,CAAC,MAAM,YAAY,GACvB,YAAM,IAAI,EAAC,sBAAsB,EAAC,KAAK,EAAC,mCAAmC;EACzE,WAAK,IAAI,EAAC,wBAAwB,EAAC,KAAK,EAAC,kCAAkC,EAAC,IAAI,EAAC,QAAQ;IACvF,YAAM,KAAK,EAAC,iBAAiB,iBAAkB,CAC3C,CACD,CAAA;AAET,MAAM,CAAC,MAAM,UAAU,GAAG,CAAC,YAAoB,EAAE,EAAE,CACjD,YAAM,IAAI,EAAC,oBAAoB,EAAC,KAAK,EAAC,mCAAmC;EACvE,eAAM,YAAY,CAAO,CACpB,CAAA;AAET,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,EAAE,YAAY,EAA4B,EAAE,QAAQ,EAAE,EAAE,CACpF,WAAK,IAAI,EAAC,gBAAgB,EAAC,KAAK,EAAC,UAAU;EACzC,UAAI,IAAI,EAAC,sBAAsB,IAAE,YAAY,CAAM;EACnD,aAAK;EACL,WAAK,KAAK,EAAC,6DAA6D,IACrE,QAAQ,CACL,CACF,CAAA;AAER,MAAM,CAAC,MAAM,UAAU,GAAG,CAAC,EAAE,KAAK,EAAE,KAAK,EAAoC,EAAE,EAAE,CAC/E,CAAC,KAAK,IAAI,KAAK,CAAC,CAAC,CAAC;EAChB,WAAK,KAAK,EAAC,cAAc;IACvB,YAAM,IAAI,EAAC,2BAA2B,EAAC,KAAK,EAAC,eAAe,IAAE,KAAK,CAAQ;IAC3E,YAAM,IAAI,EAAC,0BAA0B,EAAC,SAAS,EAAE,KAAK,GAAS,CAC3D;EACR,CAAC,CAAC,IAAI,CAAA;AAGR,MAAM,CAAC,MAAM,kBAAkB,GAAG,CAAC,EAAC,KAAK,EAAE,KAAK,EAAE,OAAO,EAAgD,EAAE,EAAE,CAC3G,WAAK,IAAI,EAAC,uBAAuB,EAAC,KAAK,EAAE,sBAAsB,OAAO,EAAE;EACtE,YAAM,IAAI,EAAC,6BAA6B,EAAC,KAAK,EAAC,0CAA0C,IAAE,KAAK,CAAQ;EACxG,YAAM,IAAI,EAAC,4BAA4B,EAAC,KAAK,EAAC,gBAAgB,IAAE,KAAK,CAAQ,CACzE,CAAA;AAER,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,EAAC,KAAK,EAAE,IAAI,EAAE,KAAK,EAAC,EAAE,QAAQ,EAAE,EAAE,CAC/D,WAAK,IAAI,EAAE,IAAI,EAAE,IAAI,EAAC,aAAa,EAAC,KAAK,EAAC,KAAK;EAC7C,WAAK,KAAK,EAAC,+CAA+C;IACxD,UAAI,KAAK,EAAC,KAAK,EAAC,IAAI,EAAC,cAAc,IAAE,KAAK,CAAM;IAC/C,KAAK,CACF;EACN,WAAK,IAAI,EAAC,kBAAkB,EAAC,KAAK,EAAC,iCAAiC,IACjE,QAAQ,CACL,CACF,CAAA","sourcesContent":["import { h } from \"@stencil/core\";\n\nexport const LoadingState =\n  <main part='detail-loading-state' class=\"p-2 d-flex justify-content-center\">\n    <div part='detail-loading-spinner' class=\"spinner-border spinner-border-sm\" role=\"status\">\n      <span class=\"visually-hidden\">Loading...</span>\n    </div>\n  </main>\n\nexport const ErrorState = (errorMessage: string) =>\n  <main part='detail-empty-state' class=\"p-2 d-flex justify-content-center\">\n    <div>{errorMessage}</div>\n  </main>\n\nexport const DetailSection = ({ sectionTitle }: { sectionTitle: string }, children) =>\n  <div part=\"detail-section\" class=\"p-2 mt-4\">\n    <h5 part=\"detail-section-title\">{sectionTitle}</h5>\n    <hr/>\n    <div class=\"d-flex flex-column justify-content-center gap-2 text-nowrap\">\n      {children}\n    </div>\n  </div>\n\nexport const DetailItem = ({ title, value }: { title: string, value: string }) =>\n  (title && value) ?\n    <div class=\"d-flex gap-2\">\n      <span part=\"detail-section-item-title\" class=\"fw-bold col-3\">{title}</span>\n      <span part=\"detail-section-item-data\" innerHTML={value}></span>\n    </div>\n  : null\n\n\nexport const EntityHeadInfoItem = ({title, value, classes}: {title: string, value: any, classes?: string}) =>\n  <div part=\"detail-head-info-item\" class={`d-flex flex-column ${classes}`}>\n    <span part=\"detail-head-info-item-title\" class=\"fw-bold border-1 border-bottom ps-2 pe-2\">{title}</span>\n    <span part=\"detail-head-info-item-data\" class=\"pt-2 ps-2 pe-2\">{value}</span>\n  </div>\n\nexport const EntityHeadInfo = ({title, slot, badge}, children) =>\n  <div slot={slot} part='detail-head' class=\"p-2\">\n    <div class=\"d-flex flex-row align-items-center gap-2 mb-2\">\n      <h1 class=\"m-0\" part='detail-title'>{title}</h1>\n      {badge}\n    </div>\n    <div part=\"detail-head-info\" class=\"d-flex flex-row align-items-top\">\n      {children}\n    </div>\n  </div>\n"]}

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

@@ -0,0 +1,233 @@
+import { Host, h, } from "@stencil/core";
+import IMask from "imask";
+export class DatePartInput {
+  constructor() {
+    this.imask = null;
+    this.label = undefined;
+    this.name = undefined;
+    this.error = undefined;
+    this.defaultValue = undefined;
+    this.type = undefined;
+    this.inputHandler = undefined;
+    this.disabled = undefined;
+  }
+  handleDefaultValueChange(newValue) {
+    this.updateInput(newValue);
+  }
+  componentDidLoad() {
+    if (this.textInput) {
+      let maskOptions;
+      switch (this.type) {
+        case 'day':
+          maskOptions = { mask: Number, min: 1, max: 31 };
+          break;
+        case 'month':
+          maskOptions = { mask: Number, min: 1, max: 12 };
+          break;
+        case 'year':
+          maskOptions = {
+            mask: Number,
+            min: 1900,
+            max: new Date().getFullYear(),
+          };
+          break;
+        default:
+          throw new Error('Invalid type prop');
+      }
+      this.imask = IMask(this.textInput, maskOptions);
+      this.imask.on('accept', () => {
+        const rawValue = this.imask.unmaskedValue;
+        this.inputHandler(this.name, rawValue);
+      });
+      this.textInput.addEventListener('blur', () => {
+        this.formControlBlur.emit();
+      });
+      this.updateInput(this.defaultValue);
+    }
+  }
+  updateInput(newValue) {
+    if (this.imask) {
+      this.imask.value = newValue;
+    }
+  }
+  disconnectedCallback() {
+    var _a;
+    (_a = this.imask) === null || _a === void 0 ? void 0 : _a.destroy();
+  }
+  render() {
+    return (h(Host, { exportparts: "label,input,input-invalid" }, h("label", { part: "label", class: "form-label", htmlFor: this.name }, this.label), h("input", { ref: el => (this.textInput = el), id: this.name, name: this.name, onBlur: () => this.formControlBlur.emit(), part: `input ${this.error && 'input-invalid'}`, class: this.error ? 'form-control is-invalid' : 'form-control', type: "text", disabled: this.disabled }), this.error && h("div", { class: "invalid-feedback" }, this.error)));
+  }
+  static get is() { return "form-control-datepart"; }
+  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": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "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
+      },
+      "type": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'day' | 'month' | 'year'",
+          "resolved": "\"day\" | \"month\" | \"year\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "type",
+        "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 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 watchers() {
+    return [{
+        "propName": "defaultValue",
+        "methodName": "handleDefaultValueChange"
+      }];
+  }
+}
+//# sourceMappingURL=form-control-datepart.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"form-control-datepart.js","sourceRoot":"","sources":["../../../../src/components/form/form-control-datepart.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  Host,\n  h,\n  Prop,\n  Event,\n  EventEmitter,\n  Watch,\n} from '@stencil/core';\nimport IMask, { InputMask } from 'imask';\n\n@Component({\n  tag: 'form-control-datepart',\n  styleUrl: 'form-control-number.scss',\n  shadow: true,\n})\nexport class DatePartInput {\n  @Prop() label: string;\n  @Prop() name: string;\n  @Prop() error: string;\n  @Prop() defaultValue: string;\n  @Prop() type: 'day' | 'month' | 'year';\n  @Prop() inputHandler: (name: string, value: string) => void;\n  @Prop() disabled: boolean;\n\n  private imask: InputMask<any> | null = null;\n\n  textInput!: HTMLInputElement;\n\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  componentDidLoad() {\n    if (this.textInput) {\n      let maskOptions;\n\n      switch (this.type) {\n        case 'day':\n          maskOptions = { mask: Number, min: 1, max: 31 };\n          break;\n        case 'month':\n          maskOptions = { mask: Number, min: 1, max: 12 };\n          break;\n        case 'year':\n          maskOptions = {\n            mask: Number,\n            min: 1900,\n            max: new Date().getFullYear(),\n          };\n          break;\n        default:\n          throw new Error('Invalid type prop');\n      }\n\n      this.imask = IMask(this.textInput, maskOptions);\n\n      this.imask.on('accept', () => {\n        const rawValue = this.imask.unmaskedValue;\n        this.inputHandler(this.name, rawValue);\n      });\n\n      this.textInput.addEventListener('blur', () => {\n        this.formControlBlur.emit();\n      });\n\n      this.updateInput(this.defaultValue);\n    }\n  }\n\n  updateInput(newValue: any) {\n    if (this.imask) {\n      this.imask.value = newValue;\n    }\n  }\n\n  disconnectedCallback() {\n    this.imask?.destroy();\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          ref={el => (this.textInput = el as HTMLInputElement)}\n          id={this.name}\n          name={this.name}\n          onBlur={() => this.formControlBlur.emit()}\n          part={`input ${this.error && 'input-invalid'}`}\n          class={this.error ? 'form-control is-invalid' : 'form-control'}\n          type=\"text\"\n          disabled={this.disabled}\n        />\n        {this.error && <div class=\"invalid-feedback\">{this.error}</div>}\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -0,0 +1,186 @@
+import { Host, h, } from "@stencil/core";
+import IMask from "imask";
+export class MonetaryInput {
+  constructor() {
+    this.imask = null;
+    this.label = undefined;
+    this.name = undefined;
+    this.error = undefined;
+    this.defaultValue = undefined;
+    this.inputHandler = undefined;
+  }
+  handleDefaultValueChange(newValue) {
+    this.updateInput(newValue);
+  }
+  componentDidLoad() {
+    if (this.textInput) {
+      this.imask = IMask(this.textInput, {
+        mask: Number,
+        scale: 2,
+        thousandsSeparator: ',',
+        padFractionalZeros: true,
+        normalizeZeros: true,
+        radix: '.',
+      });
+      this.imask.on('accept', () => {
+        const rawValue = this.imask.unmaskedValue;
+        this.inputHandler(this.name, rawValue);
+      });
+      this.textInput.addEventListener('blur', () => {
+        this.formControlBlur.emit();
+      });
+    }
+    this.updateInput(this.defaultValue);
+  }
+  disconnectedCallback() {
+    var _a;
+    (_a = this.imask) === null || _a === void 0 ? void 0 : _a.destroy();
+  }
+  updateInput(newValue) {
+    if (this.imask) {
+      this.imask.value = String(newValue);
+    }
+  }
+  render() {
+    return (h(Host, { exportparts: "label,input,input-invalid" }, h("label", { part: "label", class: "form-label", htmlFor: this.name }, this.label), h("input", { ref: el => (this.textInput = el), id: this.name, name: this.name, onBlur: () => this.formControlBlur.emit(), part: `input ${this.error && 'input-invalid'}`, class: this.error ? 'form-control is-invalid' : 'form-control', type: "text" }), this.error && h("div", { class: "invalid-feedback" }, this.error)));
+  }
+  static get is() { return "form-control-monetary"; }
+  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": ""
+        }
+      }
+    };
+  }
+  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 watchers() {
+    return [{
+        "propName": "defaultValue",
+        "methodName": "handleDefaultValueChange"
+      }];
+  }
+}
+//# sourceMappingURL=form-control-monetary.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"form-control-monetary.js","sourceRoot":"","sources":["../../../../src/components/form/form-control-monetary.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EACT,IAAI,EACJ,CAAC,EACD,IAAI,EACJ,KAAK,EAEL,KAAK,GACN,MAAM,eAAe,CAAC;AACvB,OAAO,KAAoB,MAAM,OAAO,CAAC;AAOzC,MAAM,OAAO,aAAa;;IAOhB,UAAK,GAA0B,IAAI,CAAC;;;;;;;EAQ5C,wBAAwB,CAAC,QAAgB;IACvC,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC,CAAC;EAC7B,CAAC;EAED,gBAAgB;IACd,IAAI,IAAI,CAAC,SAAS,EAAE;MAClB,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,IAAI,CAAC,SAAS,EAAE;QACjC,IAAI,EAAE,MAAM;QACZ,KAAK,EAAE,CAAC;QACR,kBAAkB,EAAE,GAAG;QACvB,kBAAkB,EAAE,IAAI;QACxB,cAAc,EAAE,IAAI;QACpB,KAAK,EAAE,GAAG;OACX,CAAC,CAAC;MAEH,IAAI,CAAC,KAAK,CAAC,EAAE,CAAC,QAAQ,EAAE,GAAG,EAAE;QAC3B,MAAM,QAAQ,GAAG,IAAI,CAAC,KAAK,CAAC,aAAa,CAAC;QAC1C,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,EAAE,QAAQ,CAAC,CAAC;MACzC,CAAC,CAAC,CAAC;MAEH,IAAI,CAAC,SAAS,CAAC,gBAAgB,CAAC,MAAM,EAAE,GAAG,EAAE;QAC3C,IAAI,CAAC,eAAe,CAAC,IAAI,EAAE,CAAC;MAC9B,CAAC,CAAC,CAAC;KACJ;IACD,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;EACtC,CAAC;EAED,oBAAoB;;IAClB,MAAA,IAAI,CAAC,KAAK,0CAAE,OAAO,EAAE,CAAC;EACxB,CAAC;EAED,WAAW,CAAC,QAAa;IACvB,IAAI,IAAI,CAAC,KAAK,EAAE;MACd,IAAI,CAAC,KAAK,CAAC,KAAK,GAAG,MAAM,CAAC,QAAQ,CAAC,CAAC;KACrC;EACH,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,GAAG,EAAE,EAAE,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,SAAS,GAAG,EAAsB,CAAC,EACpD,EAAE,EAAE,IAAI,CAAC,IAAI,EACb,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,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,MAAM,GACX;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  Watch,\n} from '@stencil/core';\nimport IMask, { InputMask } from 'imask';\n\n@Component({\n  tag: 'form-control-monetary',\n  styleUrl: 'form-control-number.scss',\n  shadow: true,\n})\nexport class MonetaryInput {\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\n  private imask: InputMask<any> | null = null;\n\n  textInput!: HTMLInputElement;\n\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  componentDidLoad() {\n    if (this.textInput) {\n      this.imask = IMask(this.textInput, {\n        mask: Number,\n        scale: 2,\n        thousandsSeparator: ',',\n        padFractionalZeros: true,\n        normalizeZeros: true,\n        radix: '.',\n      });\n\n      this.imask.on('accept', () => {\n        const rawValue = this.imask.unmaskedValue;\n        this.inputHandler(this.name, rawValue);\n      });\n\n      this.textInput.addEventListener('blur', () => {\n        this.formControlBlur.emit();\n      });\n    }\n    this.updateInput(this.defaultValue);\n  }\n\n  disconnectedCallback() {\n    this.imask?.destroy();\n  }\n\n  updateInput(newValue: any) {\n    if (this.imask) {\n      this.imask.value = String(newValue);\n    }\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          ref={el => (this.textInput = el as HTMLInputElement)}\n          id={this.name}\n          name={this.name}\n          onBlur={() => this.formControlBlur.emit()}\n          part={`input ${this.error && 'input-invalid'}`}\n          class={this.error ? 'form-control is-invalid' : 'form-control'}\n          type=\"text\"\n        />\n        {this.error && <div class=\"invalid-feedback\">{this.error}</div>}\n      </Host>\n    );\n  }\n}\n"]}