@justifi/webcomponents 5.4.0 → 5.4.1

package/dist/collection/styles/parts.js

@@ -111,6 +111,7 @@ export const paymentModeCheckoutsListFilterParam = `${checkoutsListFilterParam}
 export const terminalsListFilterMenu = `${filterMenu} terminals-list-filter-menu`;
 export const terminalsListFilterParam = `terminals-list-filter-param`;
 export const terminalIdTerminalsListFilterParam = `${terminalsListFilterParam} terminal-id-terminals-list-filter-param`;
+export const terminalOrderIdTerminalsListFilterParam = `${terminalsListFilterParam} terminal-order-id-terminals-list-filter-param`;
 export const terminalStatusTerminalsListFilterParam = `${terminalsListFilterParam} terminal-status-terminals-list-filter-param`;
 // Terminal Orders List Filters
 export const terminalOrdersListFilterMenu = `${filterMenu} terminal-orders-list-filter-menu`;

package/dist/collection/ui-components/custom-popper/custom-popper.js

@@ -81,7 +81,7 @@ export class CustomPopper {
         this.hideEvent.emit();
     }
     render() {
-        return (h("div", { key: '0da182c59e8285f0ab76d2f667218c378a402518' }, h("style", { key: 'a5cec35dd7cbe6474627f22837703e53711c104b' }, `
+        return (h("div", { key: '8c840ff88bde2fd2cb7be39772e2b49699d32844' }, h("style", { key: 'b5b1bd1fa8b6f6c76723d014bf96e2ee09fe60f4' }, `
           .popper-content {
             display: none;
           }
@@ -89,7 +89,7 @@ export class CustomPopper {
             display: block;
             z-index: 1030;
           }
-          `), h("div", { key: '657fcfafffda783f7b57af10256fb45c7c8720c9', class: "popper-content", ref: (el) => this.popperContentRef = el }, h("slot", { key: '4cf71afd1ef0e9a24a7d56c118e420d27de31e26' }))));
+          `), h("div", { key: '80b0e169b33d6679f372f0d34cd2320013485e10', class: "popper-content", ref: (el) => this.popperContentRef = el }, h("slot", { key: '4892f58a1fb5a98212f6b651f4cecc03ad7c84a2' }))));
     }
     static get is() { return "custom-popper"; }
     static get properties() {

package/dist/collection/ui-components/filters/table-filters-menu.js

@@ -23,7 +23,7 @@ export class TableFiltersMenu {
         this.showClearButton = hasFilters(this.params);
     }
     render() {
-        return (h("div", { key: 'b55be2aa2f9d4677989da12bb114f620a9ec2e45', class: "d-flex gap-2" }, h("div", { key: 'dffb2be68ead3abb60a8740869e48bb48bbf558c', class: "dropdown pb-3" }, h(Button, { key: '2e7b2d3afc80963abfe9c8c2690a61b911a1b747', variant: "primary", type: "button dropdown-toggle", ref: (el) => (this.anchorButton = el), class: "btn btn-primary dropdown-toggle", "data-test-id": "open-filters-button", "data-bs-toggle": "dropdown" }, "Filters"), h("custom-popper", { key: '9e2b1b988bc5440f18d26c5b8402f5e30e73cdad', offset: [20, 10], strategy: "fixed", anchorRef: this.anchorButton, trigger: "click" }, h("form", { key: '573161a7515d1b16665138ba739133379b9b6850', class: "dropdown-menu", part: dropdownMenu, "data-test-id": "filter-menu", ref: (el) => (this.menu = el), onSubmit: (e) => e.preventDefault() }, h("slot", { key: '9597e79f125e1e41c343fa3d2d583b5cf7ab9c31' })))), h("div", { key: '67ed29ac8e10f3ae1380514ae1a1e1e8aed7d9b6' }, h(Button, { key: '9b3dc6176c11226e82ecb1f9f88705ad40bf6e32', variant: "secondary", onClick: () => this.clearParams(), hidden: !this.showClearButton, "data-test-id": "clear-filters-button" }, "Clear Filters"))));
+        return (h("div", { key: 'c077391d1358cd6ad02857e05a56aab3e1d10018', class: "d-flex gap-2" }, h("div", { key: 'd28773f0b202b1fcbe19bc5bace1cbf17f5538f7', class: "dropdown pb-3" }, h(Button, { key: '0ad326c9539d5c93573001f6c98486bbbe7a4eaf', variant: "primary", type: "button dropdown-toggle", ref: (el) => (this.anchorButton = el), class: "btn btn-primary dropdown-toggle", "data-test-id": "open-filters-button", "data-bs-toggle": "dropdown" }, "Filters"), h("custom-popper", { key: '9ebcaad716bd3b38233a2e78aa219f397c821472', offset: [20, 10], strategy: "fixed", anchorRef: this.anchorButton, trigger: "click" }, h("form", { key: 'ca88fa944c5e9ac23f6ebee6c771603516b83f85', class: "dropdown-menu", part: dropdownMenu, "data-test-id": "filter-menu", ref: (el) => (this.menu = el), onSubmit: (e) => e.preventDefault() }, h("slot", { key: '7cc23a56a5db363ebdf375d41a758db534c9b9a7' })))), h("div", { key: '7047b1659d9f854ccb5e00f53fa03d4d42d7c550' }, h(Button, { key: '73e413af21cc39818ec8156d736ffdf72bc844d3', variant: "secondary", onClick: () => this.clearParams(), hidden: !this.showClearButton, "data-test-id": "clear-filters-button" }, "Clear Filters"))));
     }
     static get is() { return "table-filters-menu"; }
     static get properties() {

package/dist/collection/ui-components/form/form-control-checkbox.js

@@ -38,10 +38,10 @@ export class CheckboxInput {
         return inputCheckbox;
     }
     render() {
-        return (h(Host, { key: '36192fe5f4e99ccc8cb77b6a0058d68427b6dc79' }, h("div", { key: '3fd77dbca4264579b0e4293bc537dea99a9e325b', class: 'form-group d-flex flex-column' }, h("div", { key: '737b2076e66604ce3fc1b141deb1909a8ac2be27', class: "form-check" }, h("input", { key: '3d606b0c14eda0ffba58bd844b75e3ca23f0a611', ref: el => (this.checkboxElement = el), type: "checkbox", id: this.name, name: this.name, onFocus: () => this.isFocused = true, onBlur: () => {
+        return (h(Host, { key: '3c0c0210457da250712c3eddf587ddb939b6cca7' }, h("div", { key: '9f73f8f1498d43cffc200ef326ead11bc5c2b8bd', class: 'form-group d-flex flex-column' }, h("div", { key: 'a126f90ae5ca483310593816dfed878582331395', class: "form-check" }, h("input", { key: '2c7243c56c3110e199fae658513cd2b1bde96678', 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: '2a8af56e9bee18f4252ea436ae76d65128ee1648', class: "form-check-label", htmlFor: this.name, part: label }, this.label)), h(FormControlHelpText, { key: '013c9b143992a088692de81b623bffb6b4e5f06f', helpText: this.helpText, name: this.name }), h(FormControlErrorText, { key: '0b6814622ff6d0a61d251aea399600ead731ad1a', errorText: this.errorText, name: this.name }))));
+            }, 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: '35d662a8e14e56514589fe7d08fae470896a6d65', class: "form-check-label", htmlFor: this.name, part: label }, this.label)), h(FormControlHelpText, { key: '80d0558981f8ed95746a7f8f3be319b4817a00c9', helpText: this.helpText, name: this.name }), h(FormControlErrorText, { key: 'fbbda937fbf1144d5560b44719c251bdd56a6154', errorText: this.errorText, name: this.name }))));
     }
     static get is() { return "form-control-checkbox"; }
     static get properties() {

package/dist/collection/ui-components/form/form-control-date.js

@@ -50,10 +50,10 @@ export class DateInput {
         return part;
     }
     render() {
-        return (h(Host, { key: '39efc4cf0cf20cd611c775f1e47ace6b445eab99' }, h("div", { key: '82de246b4d67f3c1a234987c3d9259e8ed7fb3e5', class: "form-group d-flex flex-column" }, h("div", { key: '033c637f965aa750c6130504f70f7fabb9d1a9da', class: "d-flex gap-2" }, h("label", { key: 'ce384aeee225254eac66cfcb6fbe8b6b5677cd5e', part: label, class: "form-label", htmlFor: this.name }, this.label), h("form-control-tooltip", { key: 'a8195ae52a1904bcdaa0ee082b77164bb399e5bc', helpText: this.helpText })), h("input", { key: '07bb64ebf4727c892bc5e873d6b8327cb0e89430', type: this.showTime ? 'datetime-local' : 'date', ref: el => (this.dateInput = el), id: this.name, name: this.name, onFocus: () => this.isFocused = true, onBlur: () => {
+        return (h(Host, { key: '0f6bd0cc62a7023483a304ff30b272f5110fd2d3' }, h("div", { key: '6ebf0fe799c7a1b74a6c875ca8bed386949fb2fe', class: "form-group d-flex flex-column" }, h("div", { key: '370b2fadb488a3cca203b8e7ab267ee629b70b8f', class: "d-flex gap-2" }, h("label", { key: '828fa9324aac9d218e1c857ce4fdc064dddc0b12', part: label, class: "form-label", htmlFor: this.name }, this.label), h("form-control-tooltip", { key: '42adaa5e8c7b568284e5f3129ec7edc200047f73', helpText: this.helpText })), h("input", { key: '49ae4bd3455935d9ca459dfdb53d2bfd27201e60', 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: '783b7b021819a5c26441a438be7b83dabb4cfce1', errorText: this.errorText, name: this.name }))));
+            }, onInput: this.handleFormControlInput, part: this.part, class: this.errorText ? 'form-control is-invalid' : 'form-control', disabled: this.disabled, max: this.maxDate }), h(FormControlErrorText, { key: '81d1ecc4135b2f7a76e3c70d8dddc7539a7dd670', errorText: this.errorText, name: this.name }))));
     }
     static get is() { return "form-control-date"; }
     static get properties() {

package/dist/collection/ui-components/form/form-control-file-v2.js

@@ -12,7 +12,7 @@ export class FileInput {
         this.disabled = undefined;
     }
     render() {
-        return (h(Host, { key: '4dff12fa7d0cb33919c39db34bbc0957fdd5653f', exportparts: "label,input,input-invalid" }, h("div", { key: 'ae39b30919625c00463cbbd5bf5172a93b7bd9f1', class: "form-group d-flex flex-column" }, h("div", { key: 'f0d20dd0d0c3bed154c220722598dfe41dc4cc45', class: "d-flex align-items-start gap-2" }, h("label", { key: '768f21bee9cf3e87caacd08ebd7506d01550f206', part: "label", class: "form-label", htmlFor: this.name }, this.label), h("form-control-tooltip", { key: 'ee446659b7b9503678c16f14a49d564ca8caf27a', helpText: this.helpText })), h("input", { key: 'c7eee6e890f87be8a3af204fcdb1cd5d032e5419', 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(), onChange: () => this.errorText = "" }), h(FormControlErrorText, { key: '5a87d616b1b4be16b32b69d315f07b05d8d060bc', errorText: this.errorText, name: this.name }))));
+        return (h(Host, { key: '1671eaeeec71bcbcbd8898856f2d397a10abce97', exportparts: "label,input,input-invalid" }, h("div", { key: 'dca1e07456d2dc7f018fc25ccd2743ba87897fda', class: "form-group d-flex flex-column" }, h("div", { key: '5a8f2a9600f27a7554a8096977413263f8f7b942', class: "d-flex align-items-start gap-2" }, h("label", { key: '7ef6391bc3bd46d61463c37ccdfc27bc02027909', part: "label", class: "form-label", htmlFor: this.name }, this.label), h("form-control-tooltip", { key: 'e1992a02fb94bdf71ad46fbf387bdcf0c5ca09b2', helpText: this.helpText })), h("input", { key: 'eb4e4bfcee93ca40c945db9c8d960b069b066645', 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(), onChange: () => this.errorText = "" }), h(FormControlErrorText, { key: '125a576d63f4a3735397fe3b27cf2e258b86c073', errorText: this.errorText, name: this.name }))));
     }
     static get is() { return "form-control-file-v2"; }
     static get properties() {

package/dist/collection/ui-components/form/form-control-file.js

@@ -47,10 +47,10 @@ export class FileInput {
         return part;
     }
     render() {
-        return (h(Host, { key: 'ffd39ec9c5c98ba6d51f30fe3f0877807b9218a2' }, h("div", { key: '8d95c947132661088128a20350cb8823eb50aaa1', class: "form-group d-flex flex-column" }, h("div", { key: 'c494f917ca23d99c6dafded70156a62610764223', class: "d-flex align-items-start gap-2" }, h("label", { key: '8a6ba2787312c3a6e1e531bc05e4459aaecb6229', part: label, class: "form-label", htmlFor: this.name }, this.label), h("form-control-tooltip", { key: '5b68e00507d2211fcc481f007c701179eb4bed78', helpText: this.helpText })), h("input", { key: 'd75a0df1951b215b60cee837b102f1b0522cc810', 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: () => {
+        return (h(Host, { key: 'a70c3c2b62599cdedf34c837e29f53011e56e018' }, h("div", { key: 'ae42cd54552d7e2b95c619acf25c4b24a0c29dc9', class: "form-group d-flex flex-column" }, h("div", { key: '7b3b935921448a4e46d864dc933f5fd7c63ead93', class: "d-flex align-items-start gap-2" }, h("label", { key: '5f1e6608b4bed90aadbf8ee6c45d6f92fa40d429', part: label, class: "form-label", htmlFor: this.name }, this.label), h("form-control-tooltip", { key: '831be18cf54359800498a91ff4d0f8111feb0603', helpText: this.helpText })), h("input", { key: '5541ad6ba3a84e1bced7b61429c93b1d3b3632df', 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: '10231eb3448127011aca32c2e653d7974ab27e2e', errorText: this.errorText, name: this.name }))));
+            } }), h(FormControlErrorText, { key: '7c93f4e7fc3354479bd688e9a386948dc3b349de', errorText: this.errorText, name: this.name }))));
     }
     static get is() { return "form-control-file"; }
     static get properties() {

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

@@ -1,82 +1,69 @@
 import { Host, h, } from "@stencil/core";
-import IMask from "imask";
-import { CURRENCY_MASK } from "../../utils/form-input-masks";
-import { FormControlErrorText, FormControlHelpText } from "../../ui-components";
-import { inputDisabled, inputFocused, inputGroup, inputInvalid, label, text } from "../../styles/parts";
+import { FormControlErrorText, FormControlHelpText } from "..";
+import { input, inputDisabled, inputFocused, inputInvalid, label, text } from "../../styles/parts";
+import { formatCurrency } from "../../utils/utils";
 export class MonetaryInput {
     constructor() {
-        this.imask = null;
-        this.initializeIMask = () => {
-            if (!this.textInput)
-                return;
-            this.imask = IMask(this.textInput, this.maskOptions);
-            this.imask.on('accept', () => {
-                const rawValue = this.imask.unmaskedValue;
-                this.inputHandler(this.name, rawValue);
-                this.formControlInput.emit({ name: this.name, value: rawValue });
-            });
-            this.textInput.addEventListener('blur', () => this.formControlBlur.emit());
+        this.formatRawValue = (value) => {
+            // Remove everything from that is not a number.
+            // This will parse out our display formatting as well as prevent users from entering non-numeric characters.
+            const formattedValue = value.replace(/\D/g, '');
+            return formattedValue;
         };
-        this.handleFormControlInput = (event) => {
-            const target = event.target;
-            const name = target.getAttribute('name');
-            const rawValue = this.imask.unmaskedValue;
-            this.formControlInput.emit({ name: name, value: rawValue });
+        this.formatDisplayValue = (value) => {
+            return formatCurrency(+value, undefined, true);
         };
         this.updateInput = (newValue) => {
-            if (this.imask) {
-                this.imask.value = String(newValue);
-            }
+            const name = this.formControl.name;
+            const formatRawValue = this.formatRawValue(newValue); // "100000"
+            this.formControl.value = this.formatDisplayValue(formatRawValue); // "1,000.00"
+            this.inputHandler(name, formatRawValue);
+            this.formControlInput.emit({ name: name, value: formatRawValue });
         };
         this.isFocused = false;
-        this.label = undefined;
         this.name = undefined;
+        this.label = undefined;
+        this.inputHandler = undefined;
+        this.defaultValue = '0';
         this.helpText = undefined;
         this.errorText = undefined;
-        this.defaultValue = undefined;
-        this.inputHandler = undefined;
-        this.maskOptions = CURRENCY_MASK.DECIMAL;
+        this.maxLength = undefined;
+        this.keyDownHandler = undefined;
         this.disabled = undefined;
     }
     handleDefaultValueChange(newValue) {
         this.updateInput(newValue);
     }
     componentDidLoad() {
-        this.initializeIMask();
         this.updateInput(this.defaultValue);
     }
-    disconnectedCallback() {
-        var _a;
-        (_a = this.imask) === null || _a === void 0 ? void 0 : _a.destroy();
-    }
     get part() {
-        let part = inputGroup;
         if (this.errorText) {
-            part = inputInvalid;
+            return inputInvalid;
         }
         if (this.disabled) {
-            part = inputDisabled;
+            return inputDisabled;
         }
         if (this.isFocused) {
-            part = inputFocused;
+            return inputFocused;
         }
-        return part;
+        return input;
     }
     render() {
-        return (h(Host, { key: '8389bbed996b97a2e4c7536a3f31f8b4873651e4' }, h("div", { key: '0cc9d812e034c7017ea49fdb91bcd399ac3112cc', class: "form-group d-flex flex-column" }, h("label", { key: '04bf1b6ab410d6236a8d2ea47364c844a557f3fc', part: label, class: "form-label", htmlFor: this.name }, this.label), h("div", { key: 'bc77863e0a0dc4472c62d98fbca50da4b683b14d', class: "input-group" }, h("span", { key: '28e7f0f65529fab762846711cf681b105546a04d', class: "input-group-text", part: text }, "$"), h("input", { key: 'edfac6a9f10b1914299a6f42497ebb26659717d3', ref: el => (this.textInput = el), id: this.name, name: this.name, onFocus: () => this.isFocused = true, onBlur: () => {
+        return (h(Host, { key: '58676b687868b5a2d242bc929cae09afb5ae6fbf' }, h("div", { key: '8046cc1e2fa66c5601e370e6dccfa25714649823', class: "form-group d-flex flex-column" }, h("label", { key: 'e4b085b30ee0c7b884204fa9bf467875247bcac0', part: label, class: "form-label", htmlFor: this.name }, this.label), h(FormControlHelpText, { key: '79bf26bc54c9cc94fedd3af56779de1554e62ce2', name: this.name, helpText: this.helpText }), h("div", { key: '453cb229e64e9429a26b38ffa62693793e5e48f8', class: "input-group" }, h("span", { key: '663753b8d9c6a098326bd325822586c704624bc4', class: "input-group-text", part: text }, "$"), h("input", { key: '9314ad2b99762df1a46c0e0f4632da4a091c59ef', ref: el => this.formControl = 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: '9c28f25c98432c07678698e53b219d17d3d847a7', helpText: this.helpText, name: this.name }), h(FormControlErrorText, { key: '8cd3f89e1efd87fd0209cb5e6cd525b916de073a', errorText: this.errorText, name: this.name }))));
+            }, onInput: (event) => this.updateInput(event.target.value), onKeyDown: this.keyDownHandler, onPaste: this.keyDownHandler, maxLength: this.maxLength, part: this.part, class: this.errorText ? "form-control is-invalid" : "form-control", type: "text", disabled: this.disabled })), h(FormControlErrorText, { key: '382864114f66187237ce08c12afb13abed2c298d', errorText: this.errorText, name: this.name }))));
     }
     static get is() { return "form-control-monetary"; }
     static get properties() {
         return {
-            "label": {
-                "type": "string",
+            "name": {
+                "type": "any",
                 "mutable": false,
                 "complexType": {
-                    "original": "string",
-                    "resolved": "string",
+                    "original": "any",
+                    "resolved": "any",
                     "references": {}
                 },
                 "required": false,
@@ -85,10 +72,10 @@ export class MonetaryInput {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "label",
+                "attribute": "name",
                 "reflect": false
             },
-            "name": {
+            "label": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
@@ -102,10 +89,25 @@ export class MonetaryInput {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "name",
+                "attribute": "label",
                 "reflect": false
             },
-            "helpText": {
+            "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": ""
+                }
+            },
+            "defaultValue": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
@@ -119,10 +121,11 @@ export class MonetaryInput {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "help-text",
-                "reflect": false
+                "attribute": "default-value",
+                "reflect": false,
+                "defaultValue": "'0'"
             },
-            "errorText": {
+            "helpText": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
@@ -136,10 +139,10 @@ export class MonetaryInput {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "error-text",
+                "attribute": "help-text",
                 "reflect": false
             },
-            "defaultValue": {
+            "errorText": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
@@ -148,46 +151,45 @@ export class MonetaryInput {
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "default-value",
+                "attribute": "error-text",
                 "reflect": false
             },
-            "inputHandler": {
-                "type": "unknown",
+            "maxLength": {
+                "type": "number",
                 "mutable": false,
                 "complexType": {
-                    "original": "(name: string, value: string) => void",
-                    "resolved": "(name: string, value: string) => void",
+                    "original": "number",
+                    "resolved": "number",
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": ""
-                }
+                },
+                "attribute": "max-length",
+                "reflect": false
             },
-            "maskOptions": {
-                "type": "any",
+            "keyDownHandler": {
+                "type": "unknown",
                 "mutable": false,
                 "complexType": {
-                    "original": "any",
-                    "resolved": "any",
+                    "original": "(event: any) => void",
+                    "resolved": "(event: any) => void",
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": ""
-                },
-                "attribute": "mask-options",
-                "reflect": false,
-                "defaultValue": "CURRENCY_MASK.DECIMAL"
+                }
             },
             "disabled": {
                 "type": "boolean",
@@ -198,7 +200,7 @@ export class MonetaryInput {
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": ""

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

@@ -67,10 +67,10 @@ export class NumberInputMasked {
         return input;
     }
     render() {
-        return (h(Host, { key: '33803369123a612e3a59159eca88fa851cc4bdda' }, h("div", { key: '4ec22ee1c45e050bb3c82465620f4195f0ee9f78', class: "form-group d-flex flex-column" }, h("div", { key: '54f8150c131f9e1d591e893ff850014f986ca4ce', class: "d-flex align-items-start gap-2" }, h("label", { key: '10adc8be977ddc13488f86e62d43e15cc27e8061', part: label, class: "form-label", htmlFor: this.name }, this.label), h("form-control-tooltip", { key: 'db05a1e10871fcb9cf7bf425963b57a802e8258b', helpText: this.helpText })), h("input", { key: '05e6000baf931e6bd51eb44a149613bdad453080', ref: el => (this.textInput = el), id: this.name, name: this.name, onFocus: () => (this.isFocused = true), onBlur: () => {
+        return (h(Host, { key: '66b0cdf1f36db4f18500eefb0886259be01baa3c' }, h("div", { key: '8ea85512273929a0bccca3528863dc8aef57dd1b', class: "form-group d-flex flex-column" }, h("div", { key: '88db52b833bc4ad284316eedcd966425ed915daf', class: "d-flex align-items-start gap-2" }, h("label", { key: 'afbf8d666bbd2f81800b4e19461e64fed9af5167', part: label, class: "form-label", htmlFor: this.name }, this.label), h("form-control-tooltip", { key: '9735983927db2fe6922a2058262b9aeb6df94d73', helpText: this.helpText })), h("input", { key: 'afec9c2a3fb573a5b86839a241ff9de0f59f65be', 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: '82ec36209485f448694614454cbddfffa1acca9e', errorText: this.errorText, name: this.name }))));
+            }, onInput: this.handleFormControlInput, part: this.part, class: this.errorText ? 'form-control is-invalid' : 'form-control', type: "text", disabled: this.disabled }), h(FormControlErrorText, { key: 'af0e7ae5efb2821634428f3fea22f16a7e58b430', errorText: this.errorText, name: this.name }))));
     }
     static get is() { return "form-control-number-masked"; }
     static get properties() {

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

@@ -43,10 +43,10 @@ export class NumberInput {
         return input;
     }
     render() {
-        return (h(Host, { key: 'bd8c24f0c1209334fde787d8dc7402e75ea1d91b' }, h("div", { key: 'd49ef47d17045ab070005a04a9edc5b11ba1b879', class: 'form-group d-flex flex-column' }, h("label", { key: '49bfca8efbaa753dae1f862f5490ab8943c6a9fd', part: label, class: "form-label", htmlFor: this.name }, this.label), h("input", { key: '3b4ef4300374a4cdd37f85e2155fcc26d357fdca', id: this.name, name: this.name, onFocus: () => this.isFocused = true, onBlur: () => {
+        return (h(Host, { key: '30aed88fe8d8ecf3a8fa36b8d8cd615b82e4cc01' }, h("div", { key: '025ac654d3de4869242a0ce294e95d7aa83e4e01', class: 'form-group d-flex flex-column' }, h("label", { key: 'fecb388595436046b1719870b4745c685d39eccc', part: label, class: "form-label", htmlFor: this.name }, this.label), h("input", { key: '95033125ca4973a6e7484d60b57350250647e3cc', 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: "number", disabled: this.disabled }), h(FormControlHelpText, { key: '4bdb8dc58c7143ccdbcd50568784b62217459ba9', helpText: this.helpText, name: this.name }), h(FormControlErrorText, { key: '0e5a0df13a356fe03dc389fc4bf6eba9000597fc', errorText: this.errorText, name: this.name }))));
+            }, onInput: this.handleFormControlInput, part: this.part, class: this.errorText ? 'form-control is-invalid' : 'form-control', type: "number", disabled: this.disabled }), h(FormControlHelpText, { key: '471b88b189e0046871010e780ccd560c80f1c764', helpText: this.helpText, name: this.name }), h(FormControlErrorText, { key: 'b0d1b87f51482daa6ded4eeedcaffda8e863b3af', errorText: this.errorText, name: this.name }))));
     }
     static get is() { return "form-control-number"; }
     static get properties() {

package/dist/collection/ui-components/form/form-control-radio.js

@@ -34,10 +34,10 @@ export class RadioInput {
         return inputRadio;
     }
     render() {
-        return (h(Host, { key: '6ac053e94a211ac008c55ae97f3e1b22d76a9557', class: 'form-group d-flex flex-column' }, h("div", { key: 'fe44896b709219947f63d47ea3c8318bd7649bc0', class: "form-check" }, h("input", { key: 'c56759dc4c85da7cbb2e62b6a7eb2648cd42c278', ref: el => (this.radioElement = el), type: "radio", id: `${this.name}-${this.value}`, name: this.name, onFocus: () => this.isFocused = true, onBlur: () => {
+        return (h(Host, { key: 'e226d9098a8b2790320222699b3efcd510d6aa88', class: 'form-group d-flex flex-column' }, h("div", { key: '2a295d96e1f4dc8a8aaa71fbf07a10af65801366', class: "form-check" }, h("input", { key: 'f564dfc06ea6b86103c39340d63911ba1a9b7f1e', ref: el => (this.radioElement = el), type: "radio", id: `${this.name}-${this.value}`, name: this.name, onFocus: () => this.isFocused = true, onBlur: () => {
                 this.isFocused = false;
                 this.formControlBlur.emit();
-            }, onChange: this.handleFormControlInput, part: this.part, class: this.errorText ? 'form-check-input is-invalid' : 'form-check-input', disabled: this.disabled, value: this.value, checked: this.checked }), h("label", { key: '97949ce6465290e528e21575d3fbd4785c3568a7', class: "form-check-label", htmlFor: `${this.name}-${this.value}`, part: label }, this.label)), h("form-control-help-text", { key: 'd521e8eae3d7602f59934373c36dab803fcdefd3', helpText: this.helpText, name: this.name }), h("form-control-error-text", { key: '2851bc02a7fbb665086e54f2fade679c357d34e6', errorText: this.errorText, name: this.name })));
+            }, onChange: this.handleFormControlInput, part: this.part, class: this.errorText ? 'form-check-input is-invalid' : 'form-check-input', disabled: this.disabled, value: this.value, checked: this.checked }), h("label", { key: '7c44f86c6320e5abdf1215982ba77e0d02daef35', class: "form-check-label", htmlFor: `${this.name}-${this.value}`, part: label }, this.label)), h("form-control-help-text", { key: '20f3ddc825fab11e35fd96f6a5b708650f168e23', helpText: this.helpText, name: this.name }), h("form-control-error-text", { key: '12c7997266c559850c431bb3091504c419b7f5de', errorText: this.errorText, name: this.name })));
     }
     static get is() { return "form-control-radio"; }
     static get properties() {

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

@@ -43,10 +43,10 @@ export class SelectInput {
     }
     render() {
         var _a;
-        return (h(Host, { key: 'f55283c73225466b10cec78e6e5ff1c268142d1b' }, h("div", { key: '48beb377ca664b867598f8e472a3bb4825aecf9b', class: "form-group d-flex flex-column" }, h("div", { key: '13debfb6a725d7f247eb5601e3361a3964b826e9', class: "d-flex align-items-start gap-2" }, h("label", { key: '15ac64fb03a5c1cb8f55c18bd7eb41d66328e599', part: label, class: "form-label", htmlFor: this.name }, this.label), h("form-control-tooltip", { key: '3d8b43ed6e997234f7c64daf41b2286bec93340e', helpText: this.helpText })), h("select", { key: '1c3eb5699a0b76c694a02fe50e8070483b2960e6', ref: el => (this.selectElement = el), id: this.name, name: this.name, onFocus: () => this.isFocused = true, onBlur: () => {
+        return (h(Host, { key: 'af57c4172958175f90c0b4fc60c7a0b6c5f16b70' }, h("div", { key: '96f1889ffdfd2501e0f598ef4d73634f88301f8d', class: "form-group d-flex flex-column" }, h("div", { key: '3ad3e13eb068b829974d3a738a9ffd9432ea74bc', class: "d-flex align-items-start gap-2" }, h("label", { key: '1effbf4eeb10922f49af14627aef2cee5ed2f23e', part: label, class: "form-label", htmlFor: this.name }, this.label), h("form-control-tooltip", { key: 'a1b9cb3152356f8e3d762b72dc8e7862183e925f', helpText: this.helpText })), h("select", { key: 'd2cfee2048fc3f3f352f065d6c1979b617baf805', ref: el => (this.selectElement = 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-select is-invalid' : 'form-select', disabled: this.disabled }, (_a = this.options) === null || _a === void 0 ? void 0 : _a.map(option => (h("option", { value: option.value }, option.label)))), h(FormControlErrorText, { key: 'd223fd1fad44de99812b0e3a3429e3931b798c2c', errorText: this.errorText, name: this.name }))));
+            }, onInput: this.handleFormControlInput, part: this.part, class: this.errorText ? 'form-select is-invalid' : 'form-select', disabled: this.disabled }, (_a = this.options) === null || _a === void 0 ? void 0 : _a.map(option => (h("option", { value: option.value }, option.label)))), h(FormControlErrorText, { key: '036090be3ce8ab66abe46395fae7d680c5730783', errorText: this.errorText, name: this.name }))));
     }
     static get is() { return "form-control-select"; }
     static get properties() {

package/dist/collection/ui-components/form/form-control-text.js

@@ -45,10 +45,10 @@ export class TextInput {
         return input;
     }
     render() {
-        return (h(Host, { key: 'fde1ad44fc7048a5387f1b4cbaef5e33a4c835e9' }, h("div", { key: '6b91df1b992a5505b490fff460d21f4a9d12a816', class: "form-group d-flex flex-column" }, h("div", { key: '2605c7cbe333c8b68f861c44ca72e4b0cbd647c8', class: "d-flex align-items-start gap-2" }, h("label", { key: '603202cacc1ae6ea0210e6600791f7a9c9e87777', part: label, class: "form-label", htmlFor: this.name }, this.label), h("form-control-tooltip", { key: 'a3024f26b2ab58737422f644714cc2ee36933ac0', helpText: this.helpText })), h("input", { key: '46c19900a311b88b41c25533d6a6d4cbbb727be5', id: this.name, name: this.name, onFocus: () => this.isFocused = true, onBlur: () => {
+        return (h(Host, { key: '1dec875457354695f83386e1644e60590c12779e' }, h("div", { key: '78f295fddd56b9696077ad3a2fcb766b9b6135bd', class: "form-group d-flex flex-column" }, h("div", { key: '5c758bbca8097ec33596366638adff845f4f7b46', class: "d-flex align-items-start gap-2" }, h("label", { key: '31576778adaf535b52584b1643e1cae3699e76c4', part: label, class: "form-label", htmlFor: this.name }, this.label), h("form-control-tooltip", { key: '328deeda6bbedb37624aad6730d7dd3a9dcc0f1a', helpText: this.helpText })), h("input", { key: 'ac141a2e464e1b0caf10c1434f03744c4e2c557c', id: this.name, name: this.name, onFocus: () => this.isFocused = true, onBlur: () => {
                 this.isFocused = false;
                 this.formControlBlur.emit();
-            }, onInput: this.handleFormControlInput, onKeyDown: this.keyDownHandler, onPaste: this.keyDownHandler, maxLength: this.maxLength, part: this.part, class: this.errorText ? "form-control is-invalid" : "form-control", type: "text", disabled: this.disabled }), h(FormControlErrorText, { key: '1f4d9ba0fe5df28d0c576b5501df94350eeddeee', errorText: this.errorText, name: this.name }))));
+            }, onInput: this.handleFormControlInput, onKeyDown: this.keyDownHandler, onPaste: this.keyDownHandler, maxLength: this.maxLength, part: this.part, class: this.errorText ? "form-control is-invalid" : "form-control", type: "text", disabled: this.disabled }), h(FormControlErrorText, { key: '2e826f44513b7f1c8a2eb40cf6141f3e34509ec7', errorText: this.errorText, name: this.name }))));
     }
     static get is() { return "form-control-text"; }
     static get properties() {

package/dist/collection/ui-components/form/form-control-textarea.js

@@ -47,10 +47,10 @@ export class TextInput {
         return input;
     }
     render() {
-        return (h(Host, { key: '4c7cefde1aa87f6300e8a8addc4526924a289430' }, h("div", { key: '650f5d14e0238bc8189935ddaf11dab193b8b0c9', class: "form-group d-flex flex-column" }, h("label", { key: '5a1b3d23c4362344ca440cea94a51a50645e3b12', part: label, class: "form-label", htmlFor: this.name }, this.label), h("textarea", { key: '20b1055d4d6ebe28014c039ed007aa807a314ff9', id: this.name, name: this.name, onFocus: () => this.isFocused = true, onBlur: () => {
+        return (h(Host, { key: '140be8b4dc7d31be7bc6cfae5d1d86bdf777e7a1' }, h("div", { key: '8348dbe04bb617081b7fad50238f1bf3a55ae9e2', class: "form-group d-flex flex-column" }, h("label", { key: '4257e23df7cae41e5af09ba3ecbc1d7418c9ed49', part: label, class: "form-label", htmlFor: this.name }, this.label), h("textarea", { key: '2a49a82756de35be6981c8e4bb1f19be17239fa5', id: this.name, name: this.name, onFocus: () => this.isFocused = true, onBlur: () => {
                 this.isFocused = false;
                 this.formControlBlur.emit();
-            }, onInput: this.handleFormControlInput, onKeyDown: this.keyDownHandler, onPaste: this.keyDownHandler, maxLength: this.maxLength, part: this.part, class: this.errorText ? 'form-control is-invalid' : 'form-control', disabled: this.disabled }), h("form-control-help-text", { key: 'f5e16b2e1db3865366ae00188eef913b5639c3ca', helpText: this.helpText, name: this.name }), h("form-control-error-text", { key: 'f0c3f58e74bf08be61216813ae55be1a7e334fdf', errorText: this.errorText, name: this.name }))));
+            }, onInput: this.handleFormControlInput, onKeyDown: this.keyDownHandler, onPaste: this.keyDownHandler, maxLength: this.maxLength, part: this.part, class: this.errorText ? 'form-control is-invalid' : 'form-control', disabled: this.disabled }), h("form-control-help-text", { key: 'd9dbc241c4bf6b556cd225b4727ffc894f78a695', helpText: this.helpText, name: this.name }), h("form-control-error-text", { key: 'befc53a62981b67120907b95cdf2ce94e5abf9aa', errorText: this.errorText, name: this.name }))));
     }
     static get is() { return "form-control-textarea"; }
     static get properties() {

package/dist/collection/ui-components/form/hidden-input.js

@@ -73,7 +73,7 @@ export class HiddenInput {
         return input;
     }
     render() {
-        return (h(Host, { key: 'd159a6bed8e3d1ea974ce2abab1d6fd1ff233c86' }, h("input", { key: '68142d8e2cace690b0f3940730d67d6b0b95c046', ref: el => this.hiddenInput = el, type: "text", class: this.errorText ? "form-control is-invalid" : "form-control", onFocus: () => this.isFocused = true, onBlur: () => this.isFocused = false, part: this.part, tabindex: "-1", style: { height: '0', opacity: '0', pointerEvents: 'none', animation: 'none' } })));
+        return (h(Host, { key: 'bd707d25b1b5f0a870ff6c778291cf008ecd212b' }, h("input", { key: '639af920d20d2d5e9c2791c251f00368137c7798', ref: el => this.hiddenInput = el, type: "text", class: this.errorText ? "form-control is-invalid" : "form-control", onFocus: () => this.isFocused = true, onBlur: () => this.isFocused = false, part: this.part, tabindex: "-1", style: { height: '0', opacity: '0', pointerEvents: 'none', animation: 'none' } })));
     }
     static get is() { return "hidden-input"; }
     static get states() {

package/dist/collection/ui-components/form/iframe-input.js

@@ -81,10 +81,10 @@ export class IframeInput {
         return params;
     }
     render() {
-        return (h(Host, { key: '04753fb11bc73c5d62986e8a8da30290ad9ed57a', class: "form-group d-flex flex-column" }, h("div", { key: '3c8e8df43e94ec2a4d7749a31fd05b913f0c3018', style: {
+        return (h(Host, { key: '0c7696f592d079436b8a91d33474f74de2922917', class: "form-group d-flex flex-column" }, h("div", { key: '947cd055eb77e78ec719da130fab97ca093e4954', style: {
                 visibility: this.iframeLoaded ? 'visible' : 'hidden',
                 height: this.iframeLoaded ? 'auto' : '0',
-            } }, h("label", { key: '3604c232c38a73c555d1a0e7f574a7608a490862', class: "form-label", htmlFor: "", part: label }, this.label || ''), h("div", { key: '019c7844dcc29bc0ec39c3db999df25dabd06750', class: `p-0 d-flex form-control ${this.isValid ? '' : 'is-invalid'}`, part: this.part, style: Object.assign(Object.assign({}, this.style), { overflow: 'hidden' }) }, h("iframe", { key: '1898018d792bc1d17bb8894d0c038e98ac8065a7', id: this.inputId, name: this.inputId, src: `${this.iframeOrigin}?${this.urlParams}`, ref: el => {
+            } }, h("label", { key: '59dfc89fb0ffb5163b9ea6c7eef12b1ff5bab5d2', class: "form-label", htmlFor: "", part: label }, this.label || ''), h("div", { key: 'cad88a50d0381285a1c125e1331c3e401327554d', class: `p-0 d-flex form-control ${this.isValid ? '' : 'is-invalid'}`, part: this.part, style: Object.assign(Object.assign({}, this.style), { overflow: 'hidden' }) }, h("iframe", { key: 'bf4af4cc965ddd4376b5780ea53824cb268c1952', id: this.inputId, name: this.inputId, src: `${this.iframeOrigin}?${this.urlParams}`, ref: el => {
                 this.iframeElement = el;
                 this.initializeFrameCommunicationService();
             }, width: "100%", onLoad: () => {
@@ -94,7 +94,7 @@ export class IframeInput {
                         this.iframeLoaded.emit();
                     }
                 }, this.iframeElement);
-            } })), h(FormControlErrorText, { key: '525d1fca8fdccc481aea9cbb6e8040b2c06b53ea', errorText: this.errorText, name: this.inputId }))));
+            } })), h(FormControlErrorText, { key: '785e5ad09f32240299116d906f5a5dbf3f03ed5e', errorText: this.errorText, name: this.inputId }))));
     }
     static get is() { return "iframe-input"; }
     static get properties() {

package/dist/collection/{components → ui-components}/pagination-menu/pagination-menu.js

@@ -27,8 +27,8 @@ export class PaginationMenu {
                     "references": {
                         "PaginationProps": {
                             "location": "local",
-                            "path": "/home/runner/work/web-component-library/web-component-library/packages/webcomponents/src/components/pagination-menu/pagination-menu.tsx",
-                            "id": "src/components/pagination-menu/pagination-menu.tsx::PaginationProps"
+                            "path": "/home/runner/work/web-component-library/web-component-library/packages/webcomponents/src/ui-components/pagination-menu/pagination-menu.tsx",
+                            "id": "src/ui-components/pagination-menu/pagination-menu.tsx::PaginationProps"
                         }
                     }
                 },
@@ -49,8 +49,8 @@ export class PaginationMenu {
                     "references": {
                         "PaginationProps": {
                             "location": "local",
-                            "path": "/home/runner/work/web-component-library/web-component-library/packages/webcomponents/src/components/pagination-menu/pagination-menu.tsx",
-                            "id": "src/components/pagination-menu/pagination-menu.tsx::PaginationProps"
+                            "path": "/home/runner/work/web-component-library/web-component-library/packages/webcomponents/src/ui-components/pagination-menu/pagination-menu.tsx",
+                            "id": "src/ui-components/pagination-menu/pagination-menu.tsx::PaginationProps"
                         }
                     }
                 },

package/dist/collection/utils/utils.js

@@ -1,10 +1,10 @@
 import { format } from "date-fns";
 import Dinero from "dinero.js";
 // Currency Formatting
-export const formatCurrency = (amount, currency) => {
+export const formatCurrency = (amount, currency, omitSymbols = false) => {
     if (!amount)
         amount = 0;
-    const formattedString = '$0,0.00';
+    const formattedString = (omitSymbols) ? '0,0.00' : '$0,0.00';
     const formattedCurrency = currency === null || currency === void 0 ? void 0 : currency.toUpperCase();
     const formattedAmount = Dinero({ amount: amount }).toFormat(formattedString);
     return currency ? `${formattedAmount} ${formattedCurrency}` : formattedAmount;
@@ -105,6 +105,12 @@ export function formatAddress(address) {
     return `${address.line1}, ${address.city}, ${address.state} ${address.postal_code}`;
 }
 // String Manipulation
+export function capitalFirstLetter(str) {
+    if (!str)
+        return '';
+    return str.charAt(0).toUpperCase() + str.slice(1);
+}
+;
 export function snakeCaseToHumanReadable(snakeCaseStr) {
     if (!snakeCaseStr)
         return '';