@justifi/webcomponents 4.23.1 → 5.0.0-rc-2

package/dist/module/form-control-checkbox2.js

@@ -1,6 +1,8 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { d as defineCustomElement$2 } from './form-control-error-text2.js';
-import { d as defineCustomElement$1 } from './form-control-help-text2.js';
+import { u as inputCheckboxInvalid, v as inputCheckboxCheckedFocused, w as inputCheckboxFocused, x as inputCheckboxChecked, y as inputCheckbox, l as label } from './parts.js';
+import { F as FormControlHelpText } from './form-control-help-text2.js';
+import { F as FormControlErrorText } from './form-control-error-text.js';
+import './details.js';
 
 const CheckboxInput = /*@__PURE__*/ proxyCustomElement(class CheckboxInput extends HTMLElement {
     constructor() {
@@ -9,6 +11,7 @@ const CheckboxInput = /*@__PURE__*/ proxyCustomElement(class CheckboxInput exten
         this.formControlInput = createEvent(this, "formControlInput", 7);
         this.formControlBlur = createEvent(this, "formControlBlur", 7);
         this.handleFormControlInput = (event) => {
+            event.preventDefault();
             const target = event.target;
             const name = target.getAttribute('name');
             this.inputHandler(name, target.checked);
@@ -17,58 +20,57 @@ const CheckboxInput = /*@__PURE__*/ proxyCustomElement(class CheckboxInput exten
         this.updateInput = (newValue) => {
             this.checkboxElement.checked = newValue;
         };
+        this.isFocused = false;
         this.label = undefined;
         this.name = undefined;
         this.helpText = undefined;
         this.errorText = undefined;
-        this.defaultValue = undefined;
+        this.checked = undefined;
         this.inputHandler = undefined;
         this.disabled = undefined;
     }
-    handleDefaultValueChange(newValue) {
-        this.updateInput(newValue);
-    }
-    componentDidLoad() {
-        this.updateInput(this.defaultValue);
+    get part() {
+        if (this.errorText) {
+            return inputCheckboxInvalid;
+        }
+        if (this.isFocused && this.checked) {
+            return inputCheckboxCheckedFocused;
+        }
+        if (this.isFocused) {
+            return inputCheckboxFocused;
+        }
+        if (this.checked) {
+            return inputCheckboxChecked;
+        }
+        return inputCheckbox;
     }
     render() {
-        return (h(Host, { key: '62c7e5756a185d29a941dd63a431756beed3d554', exportparts: "label,input,input-invalid" }, h("div", { key: 'db89c096aa07aecd8c5205905c26f56ac4282a3a', class: 'form-group d-flex flex-column' }, h("div", { key: '8f6c06c0150eee6284d3b2465b3aca916c2d7f83', class: "form-check" }, h("input", { key: '25b9b0a620ee3fce0f4fa4892a38b289e0a0d521', ref: el => (this.checkboxElement = el), type: "checkbox", id: this.name, name: this.name, onBlur: this.formControlBlur.emit, onInput: this.handleFormControlInput, part: `input-checkbox ${this.errorText ? 'input-checkbox-invalid' : ''}`, class: this.errorText ? 'form-check-input is-invalid' : 'form-check-input', disabled: this.disabled }), h("label", { key: '783d5dbbafeeeceab3400361eff65cd6a075f637', class: "form-check-label", htmlFor: this.name }, this.label)), h("form-control-help-text", { key: '4b129fa8360d7d305f14939d213667a9003c6b94', helpText: this.helpText, name: this.name }), h("form-control-error-text", { key: '303b12a3b51634866a4266486ac6295f5d582ab6', errorText: this.errorText, name: this.name }))));
+        return (h(Host, { key: '1aedf7dc7572040d5d1accb6fce84c42c12e2889' }, h("div", { key: '454a062fd481093d4b4a5769c3b2a79b61f07c20', class: 'form-group d-flex flex-column' }, h("div", { key: '087e692e098975b4a78ecbdfee50f183787b1f9e', class: "form-check" }, h("input", { key: 'cf71f2abd44da0cf0bed71f102af6ead74b34bf2', ref: el => (this.checkboxElement = el), type: "checkbox", id: this.name, name: this.name, onFocus: () => this.isFocused = true, onBlur: () => {
+                this.isFocused = false;
+                this.formControlBlur.emit();
+            }, onInput: this.handleFormControlInput, part: this.part, class: this.errorText ? 'form-check-input is-invalid' : 'form-check-input', disabled: this.disabled, checked: this.checked }), h("label", { key: '02ce674c833c5b2795d1d041bc1e7d9fe351f514', class: "form-check-label", htmlFor: this.name, part: label }, this.label)), h(FormControlHelpText, { key: 'aab32007a08af39b4fa4314eba5e7e2b2ff57d31', helpText: this.helpText, name: this.name }), h(FormControlErrorText, { key: 'cf906dec9c1f2763156fa0becf4389a728a14b39', errorText: this.errorText, name: this.name }))));
     }
-    static get watchers() { return {
-        "defaultValue": ["handleDefaultValueChange"]
-    }; }
 }, [0, "form-control-checkbox", {
         "label": [1],
         "name": [8],
         "helpText": [1, "help-text"],
         "errorText": [1, "error-text"],
-        "defaultValue": [4, "default-value"],
+        "checked": [4],
         "inputHandler": [16],
-        "disabled": [4]
-    }, undefined, {
-        "defaultValue": ["handleDefaultValueChange"]
+        "disabled": [4],
+        "isFocused": [32]
     }]);
 function defineCustomElement() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["form-control-checkbox", "form-control-error-text", "form-control-help-text"];
+    const components = ["form-control-checkbox"];
     components.forEach(tagName => { switch (tagName) {
         case "form-control-checkbox":
             if (!customElements.get(tagName)) {
                 customElements.define(tagName, CheckboxInput);
             }
             break;
-        case "form-control-error-text":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
-        case "form-control-help-text":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$1();
-            }
-            break;
     } });
 }
 defineCustomElement();

package/dist/module/form-control-date2.js

@@ -1,6 +1,8 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { d as defineCustomElement$3 } from './custom-popper2.js';
-import { d as defineCustomElement$2 } from './form-control-error-text2.js';
+import { l as label, d as input, b as inputInvalid, z as inputDisabled, c as inputFocused } from './parts.js';
+import { F as FormControlErrorText } from './form-control-error-text.js';
+import './details.js';
+import { d as defineCustomElement$2 } from './custom-popper2.js';
 import { d as defineCustomElement$1 } from './form-control-tooltip2.js';
 
 const DateInput = /*@__PURE__*/ proxyCustomElement(class DateInput extends HTMLElement {
@@ -14,6 +16,7 @@ const DateInput = /*@__PURE__*/ proxyCustomElement(class DateInput extends HTMLE
             this.inputHandler(this.name, dateValue);
             this.formControlInput.emit({ name: this.name, value: dateValue });
         };
+        this.isFocused = false;
         this.name = undefined;
         this.label = undefined;
         this.inputHandler = undefined;
@@ -41,8 +44,24 @@ const DateInput = /*@__PURE__*/ proxyCustomElement(class DateInput extends HTMLE
     updateInput(value) {
         this.dateInput.value = value;
     }
+    get part() {
+        let part = input;
+        if (this.errorText) {
+            part = inputInvalid;
+        }
+        if (this.disabled) {
+            part = inputDisabled;
+        }
+        if (this.isFocused) {
+            part = inputFocused;
+        }
+        return part;
+    }
     render() {
-        return (h(Host, { key: '29a793e97ef8cc6bd532ce6f86e31028e6a3a783', exportparts: "label,input,input-invalid" }, h("div", { key: '32487660602957a69c9cd82625bd019335e76124', class: "form-group d-flex flex-column" }, h("div", { key: '5d45a740e61f328cb0bec179117b97ea9449bc03', class: "d-flex gap-2" }, h("label", { key: 'ba01fd2ce1f8f8cfa3a0599b21c01071eb6400a0', part: "label", class: "form-label", htmlFor: this.name }, this.label), h("form-control-tooltip", { key: 'aeaaf6caa4b4999ec1ecd419f4699aceb72d6cb1', helpText: this.helpText })), h("input", { key: 'af713ff971ca5b8c046199ff1252db40649a8f94', type: this.showTime ? 'datetime-local' : 'date', ref: el => (this.dateInput = el), id: this.name, name: this.name, onBlur: this.formControlBlur.emit, onInput: this.handleFormControlInput, part: `input ${this.errorText && 'input-invalid'}`, class: this.errorText ? 'form-control is-invalid' : 'form-control', disabled: this.disabled, max: this.maxDate }), h("form-control-error-text", { key: '02338706e4d55074014d8e177c27c002181a93e6', errorText: this.errorText, name: this.name }))));
+        return (h(Host, { key: '238d6dc419c36dafa07e03e0b16dc8e18c620894' }, h("div", { key: 'e4dec93ad672ad2e8599851e0fc541b5a4fb21a0', class: "form-group d-flex flex-column" }, h("div", { key: '51cf231ffd7f8d7253ee67d85211d6e01b082ae9', class: "d-flex gap-2" }, h("label", { key: '23b2f623f5d019b87150061f848aebd32f54c164', part: label, class: "form-label", htmlFor: this.name }, this.label), h("form-control-tooltip", { key: '3bd071cb30d9b52a60a1210bf49b96f2283f80dd', helpText: this.helpText })), h("input", { key: '10dc76f79b4cdc831195ab037369d9be10e6108b', type: this.showTime ? 'datetime-local' : 'date', ref: el => (this.dateInput = el), id: this.name, name: this.name, onFocus: () => this.isFocused = true, onBlur: () => {
+                this.isFocused = false;
+                this.formControlBlur.emit();
+            }, onInput: this.handleFormControlInput, part: this.part, class: this.errorText ? 'form-control is-invalid' : 'form-control', disabled: this.disabled, max: this.maxDate }), h(FormControlErrorText, { key: 'e06413cc8b9d57f1a89efad44c3b93c82078f5b6', errorText: this.errorText, name: this.name }))));
     }
     static get watchers() { return {
         "defaultValue": ["handleDefaultValueChange"]
@@ -56,7 +75,8 @@ const DateInput = /*@__PURE__*/ proxyCustomElement(class DateInput extends HTMLE
         "errorText": [1, "error-text"],
         "disabled": [4],
         "showTime": [4, "show-time"],
-        "maxDate": [1, "max-date"]
+        "maxDate": [1, "max-date"],
+        "isFocused": [32]
     }, undefined, {
         "defaultValue": ["handleDefaultValueChange"]
     }]);
@@ -64,7 +84,7 @@ function defineCustomElement() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["form-control-date", "custom-popper", "form-control-error-text", "form-control-tooltip"];
+    const components = ["form-control-date", "custom-popper", "form-control-tooltip"];
     components.forEach(tagName => { switch (tagName) {
         case "form-control-date":
             if (!customElements.get(tagName)) {
@@ -72,11 +92,6 @@ function defineCustomElement() {
             }
             break;
         case "custom-popper":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$3();
-            }
-            break;
-        case "form-control-error-text":
             if (!customElements.get(tagName)) {
                 defineCustomElement$2();
             }

package/dist/module/form-control-error-text.js

@@ -1,6 +1,12 @@
-import { F as FormControlErrorText$1, d as defineCustomElement$1 } from './form-control-error-text2.js';
+import { h } from '@stencil/core/internal/client';
+import { e as textDanger } from './parts.js';
 
-const FormControlErrorText = FormControlErrorText$1;
-const defineCustomElement = defineCustomElement$1;
+const FormControlErrorText = (props) => {
+    const { errorText, name } = props;
+    if (!errorText) {
+        return null;
+    }
+    return (h("small", { class: 'form-text text-danger', id: `form-error-text-${name}`, part: textDanger }, errorText));
+};
 
-export { FormControlErrorText, defineCustomElement };
+export { FormControlErrorText as F };

package/dist/module/{payouts-list-filters.d.ts → form-control-file-v2.d.ts}

@@ -1,9 +1,9 @@
 import type { Components, JSX } from "../types/components";
 
-interface PayoutsListFilters extends Components.PayoutsListFilters, HTMLElement {}
-export const PayoutsListFilters: {
-    prototype: PayoutsListFilters;
-    new (): PayoutsListFilters;
+interface FormControlFileV2 extends Components.FormControlFileV2, HTMLElement {}
+export const FormControlFileV2: {
+    prototype: FormControlFileV2;
+    new (): FormControlFileV2;
 };
 /**
  * Used to define this component and all nested components recursively.

package/dist/module/form-control-file-v2.js

@@ -0,0 +1,6 @@
+import { F as FileInput, d as defineCustomElement$1 } from './form-control-file-v22.js';
+
+const FormControlFileV2 = FileInput;
+const defineCustomElement = defineCustomElement$1;
+
+export { FormControlFileV2, defineCustomElement };

package/dist/module/form-control-file-v22.js

@@ -0,0 +1,59 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { d as defineCustomElement$2 } from './custom-popper2.js';
+import { d as defineCustomElement$1 } from './form-control-tooltip2.js';
+
+const FileInput = /*@__PURE__*/ proxyCustomElement(class FileInput extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.formControlInput = createEvent(this, "formControlInput", 7);
+        this.formControlBlur = createEvent(this, "formControlBlur", 7);
+        this.files = undefined;
+        this.label = undefined;
+        this.name = undefined;
+        this.helpText = undefined;
+        this.errorText = undefined;
+        this.multiple = undefined;
+        this.inputHandler = undefined;
+        this.disabled = undefined;
+    }
+    render() {
+        return (h(Host, { key: '0ff92310d25c06e1fa0271f4dcb1f2c3f9af6bc9', exportparts: "label,input,input-invalid" }, h("div", { key: 'c07d1173914b8f4a474656108219502dcd356798', class: "form-group d-flex flex-column" }, h("div", { key: 'cc37bcfa3d65f4dc8b1d6f6b43b52a2282398b29', class: "d-flex align-items-start gap-2" }, h("label", { key: '5a042d4b42b5372ca465c3636dfedec7beea91f0', part: "label", class: "form-label", htmlFor: this.name }, this.label), h("form-control-tooltip", { key: '2b227a49d2e65d2b4a5d4248a5d1dbc234a8aaf0', helpText: this.helpText })), h("input", { key: '9c81ac8b2fe6742959d7502b99b43bd192efecd3', type: "file", name: this.name, part: `input ${this.errorText ? "input-invalid " : ""}${this.disabled ? "input-disabled" : ""}`, class: this.errorText ? "form-control is-invalid" : "form-control", multiple: this.multiple, disabled: this.disabled, onBlur: () => this.formControlBlur.emit() }), h("form-control-error-text", { key: 'e650ab21dce572c1ed4c20f6d5f64253a39d5420', errorText: this.errorText, name: this.name }))));
+    }
+    get el() { return this; }
+}, [0, "form-control-file-v2", {
+        "label": [1],
+        "name": [8],
+        "helpText": [1, "help-text"],
+        "errorText": [1, "error-text"],
+        "multiple": [4],
+        "inputHandler": [16],
+        "disabled": [4],
+        "files": [32]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["form-control-file-v2", "custom-popper", "form-control-tooltip"];
+    components.forEach(tagName => { switch (tagName) {
+        case "form-control-file-v2":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, FileInput);
+            }
+            break;
+        case "custom-popper":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+        case "form-control-tooltip":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+defineCustomElement();
+
+export { FileInput as F, defineCustomElement as d };

package/dist/module/form-control-file2.js

@@ -1,6 +1,8 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { d as defineCustomElement$3 } from './custom-popper2.js';
-import { d as defineCustomElement$2 } from './form-control-error-text2.js';
+import { l as label, d as input, b as inputInvalid, z as inputDisabled, c as inputFocused } from './parts.js';
+import { F as FormControlErrorText } from './form-control-error-text.js';
+import './details.js';
+import { d as defineCustomElement$2 } from './custom-popper2.js';
 import { d as defineCustomElement$1 } from './form-control-tooltip2.js';
 
 const FileInput = /*@__PURE__*/ proxyCustomElement(class FileInput extends HTMLElement {
@@ -27,6 +29,7 @@ const FileInput = /*@__PURE__*/ proxyCustomElement(class FileInput extends HTMLE
         };
         this.files = undefined;
         this.fileString = undefined;
+        this.isFocused = false;
         this.label = undefined;
         this.name = undefined;
         this.helpText = undefined;
@@ -39,8 +42,24 @@ const FileInput = /*@__PURE__*/ proxyCustomElement(class FileInput extends HTMLE
     componentDidLoad() {
         this.fileInput = this.el.querySelector('input');
     }
+    get part() {
+        let part = input;
+        if (this.errorText) {
+            part = inputInvalid;
+        }
+        if (this.disabled) {
+            part = inputDisabled;
+        }
+        if (this.isFocused) {
+            part = inputFocused;
+        }
+        return part;
+    }
     render() {
-        return (h(Host, { key: 'e67b1c78293ee490ff9f468e98533c2eed03a14a', exportparts: "label,input,input-invalid" }, h("div", { key: '373c4ccfdbdd49f00bfe3673bb284930706f7842', class: "form-group d-flex flex-column" }, h("div", { key: '93d7524b79cc2a537f4ccc6bea300182ddd31f40', class: "d-flex align-items-start gap-2" }, h("label", { key: 'f5619fd58b973b31c8ea47b52715ede5f5891283', part: "label", class: "form-label", htmlFor: this.name }, this.label), h("form-control-tooltip", { key: 'fd0979253100c2e3efbb30a6fd698b756cf42bbe', helpText: this.helpText })), h("input", { key: '8185ccf0fdae02ec7c8cfd6d6cdedfe80f012f4e', ref: (el) => this.fileInput = el, type: "file", name: this.name, part: `input ${this.errorText ? "input-invalid " : ""}${this.disabled ? "input-disabled" : ""}`, class: this.errorText ? "form-control is-invalid" : "form-control", multiple: this.multiple, disabled: this.disabled, onChange: this.changeHandler, onInput: this.handleFormControlInput, onBlur: () => this.formControlBlur.emit() }), h("form-control-error-text", { key: '0aef8ab535103ef7a0b8f7df3b23508985559072', errorText: this.errorText, name: this.name }))));
+        return (h(Host, { key: 'fe114fda9b6ad4863b1c770721a0740571b7fc97' }, h("div", { key: '75a98a14cb2a1d6b75d6652122a38955a75824d5', class: "form-group d-flex flex-column" }, h("div", { key: '888de79af6f8a11cc60b4caf106ae06ad8279493', class: "d-flex align-items-start gap-2" }, h("label", { key: '9db2a6b00f02b89cab1784749e2d0043a71ece6c', part: label, class: "form-label", htmlFor: this.name }, this.label), h("form-control-tooltip", { key: '6a2e7377ee731403185d47a45d6e6e5c7287f05f', helpText: this.helpText })), h("input", { key: '4528e49dfa270f8fd72ad58669767558f63389a4', ref: (el) => this.fileInput = el, type: "file", name: this.name, part: this.part, class: this.errorText ? "form-control is-invalid" : "form-control", multiple: this.multiple, disabled: this.disabled, onChange: this.changeHandler, onInput: this.handleFormControlInput, onFocus: () => this.isFocused = true, onBlur: () => {
+                this.isFocused = false;
+                this.formControlBlur.emit();
+            } }), h(FormControlErrorText, { key: 'fa1ac29957babba015d0a18eb07d5dba8d550fc8', errorText: this.errorText, name: this.name }))));
     }
     get el() { return this; }
 }, [0, "form-control-file", {
@@ -53,13 +72,14 @@ const FileInput = /*@__PURE__*/ proxyCustomElement(class FileInput extends HTMLE
         "inputHandler": [16],
         "disabled": [4],
         "files": [32],
-        "fileString": [32]
+        "fileString": [32],
+        "isFocused": [32]
     }]);
 function defineCustomElement() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["form-control-file", "custom-popper", "form-control-error-text", "form-control-tooltip"];
+    const components = ["form-control-file", "custom-popper", "form-control-tooltip"];
     components.forEach(tagName => { switch (tagName) {
         case "form-control-file":
             if (!customElements.get(tagName)) {
@@ -67,11 +87,6 @@ function defineCustomElement() {
             }
             break;
         case "custom-popper":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$3();
-            }
-            break;
-        case "form-control-error-text":
             if (!customElements.get(tagName)) {
                 defineCustomElement$2();
             }

package/dist/module/form-control-help-text.js

@@ -1,4 +1,4 @@
-import { F as FormControlHelpText$1, d as defineCustomElement$1 } from './form-control-help-text2.js';
+import { F as FormControlHelpText$1, d as defineCustomElement$1 } from './form-control-help-text3.js';
 
 const FormControlHelpText = FormControlHelpText$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/module/form-control-help-text2.js

@@ -1,35 +1,12 @@
-import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+import { h } from '@stencil/core/internal/client';
+import { t as text } from './parts.js';
 
-const FormControlHelpText = /*@__PURE__*/ proxyCustomElement(class FormControlHelpText extends HTMLElement {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.helpText = undefined;
-        this.name = undefined;
+const FormControlHelpText = (props) => {
+    const { helpText, name } = props;
+    if (!helpText) {
+        return null;
     }
-    render() {
-        if (!this.helpText) {
-            return null;
-        }
-        return (h("small", { class: 'form-text text-muted', id: `form-help-text-${this.name}` }, this.helpText));
-    }
-}, [0, "form-control-help-text", {
-        "helpText": [1, "help-text"],
-        "name": [1]
-    }]);
-function defineCustomElement() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["form-control-help-text"];
-    components.forEach(tagName => { switch (tagName) {
-        case "form-control-help-text":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, FormControlHelpText);
-            }
-            break;
-    } });
-}
-defineCustomElement();
+    return (h("small", { class: 'form-text text-muted', id: `form-help-text-${name}`, part: text }, helpText));
+};
 
-export { FormControlHelpText as F, defineCustomElement as d };
+export { FormControlHelpText as F };

package/dist/module/form-control-help-text3.js

@@ -0,0 +1,35 @@
+import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+
+const FormControlHelpText = /*@__PURE__*/ proxyCustomElement(class FormControlHelpText extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.helpText = undefined;
+        this.name = undefined;
+    }
+    render() {
+        if (!this.helpText) {
+            return null;
+        }
+        return (h("small", { class: 'form-text text-muted', id: `form-help-text-${this.name}` }, this.helpText));
+    }
+}, [0, "form-control-help-text", {
+        "helpText": [1, "help-text"],
+        "name": [1]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["form-control-help-text"];
+    components.forEach(tagName => { switch (tagName) {
+        case "form-control-help-text":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, FormControlHelpText);
+            }
+            break;
+    } });
+}
+defineCustomElement();
+
+export { FormControlHelpText as F, defineCustomElement as d };

package/dist/module/form-control-monetary2.js

@@ -1,8 +1,10 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { I as IMask } from './index2.js';
+import { I as IMask } from './index3.js';
 import { C as CURRENCY_MASK } from './form-input-masks.js';
-import { d as defineCustomElement$2 } from './form-control-error-text2.js';
-import { d as defineCustomElement$1 } from './form-control-help-text2.js';
+import { l as label, t as text, D as inputGroup, b as inputInvalid, z as inputDisabled, c as inputFocused } from './parts.js';
+import { F as FormControlHelpText } from './form-control-help-text2.js';
+import { F as FormControlErrorText } from './form-control-error-text.js';
+import './details.js';
 
 const MonetaryInput = /*@__PURE__*/ proxyCustomElement(class MonetaryInput extends HTMLElement {
     constructor() {
@@ -33,6 +35,7 @@ const MonetaryInput = /*@__PURE__*/ proxyCustomElement(class MonetaryInput exten
                 this.imask.value = String(newValue);
             }
         };
+        this.isFocused = false;
         this.label = undefined;
         this.name = undefined;
         this.helpText = undefined;
@@ -53,8 +56,24 @@ const MonetaryInput = /*@__PURE__*/ proxyCustomElement(class MonetaryInput exten
         var _a;
         (_a = this.imask) === null || _a === void 0 ? void 0 : _a.destroy();
     }
+    get part() {
+        let part = inputGroup;
+        if (this.errorText) {
+            part = inputInvalid;
+        }
+        if (this.disabled) {
+            part = inputDisabled;
+        }
+        if (this.isFocused) {
+            part = inputFocused;
+        }
+        return part;
+    }
     render() {
-        return (h(Host, { key: '27e8570c7ddb6747f8b78fdf0222747022b2e4b2', exportparts: "label,input,input-group-input,input-group-text,input-invalid" }, h("div", { key: '1ee22eda4b9f5b5ddf42f1d15d4ec3ee084e967e', class: "form-group d-flex flex-column" }, h("label", { key: '73930260feaeca6edab8b9947da211358474b680', part: "label", class: "form-label", htmlFor: this.name }, this.label), h("div", { key: '7da2e46e0538563151f4603bfbeee22a447e7310', class: "input-group" }, h("span", { key: '3209947bf3c65c2ecfd3b56a0da27d663b444742', class: "input-group-text", part: "input-group-text" }, "$"), h("input", { key: 'ba3d0b0a55ba25a9b7315fc9e95e408073b47cf5', ref: el => (this.textInput = el), id: this.name, name: this.name, onBlur: this.formControlBlur.emit, onInput: this.handleFormControlInput, part: `input input-group-input ${this.errorText && 'input-invalid'}`, class: this.errorText ? 'form-control monetary is-invalid' : 'form-control monetary', type: "text", disabled: this.disabled })), h("form-control-help-text", { key: 'af50f5b6f8f9ce1ac80be790f64dfbcd5067f5aa', helpText: this.helpText, name: this.name }), h("form-control-error-text", { key: '2d134789d103c82c545c97428e6a4e4da1c0e099', errorText: this.errorText, name: this.name }))));
+        return (h(Host, { key: '88ef65f78570c7351c159e89fab22c453bdaa1ec' }, h("div", { key: '1e7cfe678ff76dcd4833626f6cdb8f278ff65236', class: "form-group d-flex flex-column" }, h("label", { key: 'd3ac3a07988ebd57dd5c58ad2ffdba7399daf3e5', part: label, class: "form-label", htmlFor: this.name }, this.label), h("div", { key: '382697de0c28754de0355fb819365869007c8c20', class: "input-group" }, h("span", { key: 'cf6f813dfcf45dd2c4c1a9b08360a0a70908d52e', class: "input-group-text", part: text }, "$"), h("input", { key: '47e21184a0b08b8e64ae9974610df777537b9789', ref: el => (this.textInput = el), id: this.name, name: this.name, onFocus: () => this.isFocused = true, onBlur: () => {
+                this.isFocused = false;
+                this.formControlBlur.emit();
+            }, onInput: this.handleFormControlInput, part: this.part, class: this.errorText ? 'form-control monetary is-invalid' : 'form-control monetary', type: "text", disabled: this.disabled })), h(FormControlHelpText, { key: '5fc015ef8bc059be448a3d8667125e0502d1f519', helpText: this.helpText, name: this.name }), h(FormControlErrorText, { key: 'e79f133b65fc016c6d8d940a631f6dd6694038d4', errorText: this.errorText, name: this.name }))));
     }
     static get watchers() { return {
         "defaultValue": ["handleDefaultValueChange"]
@@ -67,7 +86,8 @@ const MonetaryInput = /*@__PURE__*/ proxyCustomElement(class MonetaryInput exten
         "defaultValue": [1, "default-value"],
         "inputHandler": [16],
         "maskOptions": [8, "mask-options"],
-        "disabled": [4]
+        "disabled": [4],
+        "isFocused": [32]
     }, undefined, {
         "defaultValue": ["handleDefaultValueChange"]
     }]);
@@ -75,23 +95,13 @@ function defineCustomElement() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["form-control-monetary", "form-control-error-text", "form-control-help-text"];
+    const components = ["form-control-monetary"];
     components.forEach(tagName => { switch (tagName) {
         case "form-control-monetary":
             if (!customElements.get(tagName)) {
                 customElements.define(tagName, MonetaryInput);
             }
             break;
-        case "form-control-error-text":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
-        case "form-control-help-text":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$1();
-            }
-            break;
     } });
 }
 defineCustomElement();

package/dist/module/form-control-number-masked2.js

@@ -1,7 +1,9 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { I as IMask } from './index2.js';
-import { d as defineCustomElement$3 } from './custom-popper2.js';
-import { d as defineCustomElement$2 } from './form-control-error-text2.js';
+import { I as IMask } from './index3.js';
+import { b as inputInvalid, z as inputDisabled, c as inputFocused, d as input, l as label } from './parts.js';
+import { F as FormControlErrorText } from './form-control-error-text.js';
+import './details.js';
+import { d as defineCustomElement$2 } from './custom-popper2.js';
 import { d as defineCustomElement$1 } from './form-control-tooltip2.js';
 
 const NumberInputMasked = /*@__PURE__*/ proxyCustomElement(class NumberInputMasked extends HTMLElement {
@@ -36,6 +38,7 @@ const NumberInputMasked = /*@__PURE__*/ proxyCustomElement(class NumberInputMask
                 this.imask.value = String(newValue);
             }
         };
+        this.isFocused = false;
         this.label = undefined;
         this.name = undefined;
         this.helpText = undefined;
@@ -59,8 +62,23 @@ const NumberInputMasked = /*@__PURE__*/ proxyCustomElement(class NumberInputMask
             this.updateInput(this.defaultValue);
         }
     }
+    get part() {
+        if (this.errorText) {
+            return inputInvalid;
+        }
+        if (this.disabled) {
+            return inputDisabled;
+        }
+        if (this.isFocused) {
+            return inputFocused;
+        }
+        return input;
+    }
     render() {
-        return (h(Host, { key: '2347d776d2ca3dba7c4c331bbeb3d4e359268704', exportparts: "label,input,input-invalid" }, h("div", { key: '16d437f201888fdef6148630e5afc75ee7c36bae', class: "form-group d-flex flex-column" }, h("div", { key: 'd776ff7c160cbba0436ec36e20cb0c81edbc380f', class: "d-flex align-items-start gap-2" }, h("label", { key: '8c6664087dc2593870380341cf51fc5511a95e35', part: "label", class: "form-label", htmlFor: this.name }, this.label), h("form-control-tooltip", { key: '1495842c0cd7117c50c62888cf90e001a4e15756', helpText: this.helpText })), h("input", { key: 'f2468b56ba6f1e7482c5437ce728a4dc39db966b', ref: el => (this.textInput = el), id: this.name, name: this.name, onBlur: this.formControlBlur.emit, onInput: this.handleFormControlInput, part: `input ${this.errorText && 'input-invalid'}`, class: this.errorText ? 'form-control is-invalid' : 'form-control', type: "text", disabled: this.disabled }), h("form-control-error-text", { key: '7e2485e91f263e8a970b91628adf945eb3280c2d', errorText: this.errorText, name: this.name }))));
+        return (h(Host, { key: 'e4b85378d57333a4408c941f49fde3a074128173' }, h("div", { key: 'c93d07e39bfbf1bfbc4ae424861a3b0a582a8d32', class: "form-group d-flex flex-column" }, h("div", { key: '0ea90b20800bf4c24e61e28e25575a77db7d42ef', class: "d-flex align-items-start gap-2" }, h("label", { key: '96ba0eb2bd01f4d9a5ab249ae718e4b699cc1497', part: label, class: "form-label", htmlFor: this.name }, this.label), h("form-control-tooltip", { key: 'ea12ab4a5b24d7baf2480f0a3a9e9ea2b792e144', helpText: this.helpText })), h("input", { key: '46e7d3817e1556ab91101085c41af284cdc14e24', ref: el => (this.textInput = el), id: this.name, name: this.name, onFocus: () => (this.isFocused = true), onBlur: () => {
+                this.isFocused = false;
+                this.formControlBlur.emit();
+            }, onInput: this.handleFormControlInput, part: this.part, class: this.errorText ? 'form-control is-invalid' : 'form-control', type: "text", disabled: this.disabled }), h(FormControlErrorText, { key: '46fe5efdc607c8ffacbc9e7a061e6af9eb06d0a9', errorText: this.errorText, name: this.name }))));
     }
     static get watchers() { return {
         "defaultValue": ["handleDefaultValueChange"]
@@ -73,7 +91,8 @@ const NumberInputMasked = /*@__PURE__*/ proxyCustomElement(class NumberInputMask
         "defaultValue": [1, "default-value"],
         "inputHandler": [16],
         "mask": [1],
-        "disabled": [4]
+        "disabled": [4],
+        "isFocused": [32]
     }, undefined, {
         "defaultValue": ["handleDefaultValueChange"]
     }]);
@@ -81,7 +100,7 @@ function defineCustomElement() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["form-control-number-masked", "custom-popper", "form-control-error-text", "form-control-tooltip"];
+    const components = ["form-control-number-masked", "custom-popper", "form-control-tooltip"];
     components.forEach(tagName => { switch (tagName) {
         case "form-control-number-masked":
             if (!customElements.get(tagName)) {
@@ -89,11 +108,6 @@ function defineCustomElement() {
             }
             break;
         case "custom-popper":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$3();
-            }
-            break;
-        case "form-control-error-text":
             if (!customElements.get(tagName)) {
                 defineCustomElement$2();
             }