@justifi/webcomponents 4.20.1 → 4.22.0

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

@@ -0,0 +1,229 @@
+import { Host, h, } from "@stencil/core";
+export class TextInput {
+    constructor() {
+        this.handleFormControlInput = (event) => {
+            const target = event.target;
+            const name = target.getAttribute('name');
+            this.inputHandler(name, target.value);
+            this.formControlInput.emit({ name, value: target.value });
+        };
+        this.updateInput = (newValue) => {
+            const inputElement = this.el.querySelector('input');
+            if (inputElement) {
+                inputElement.value = newValue || '';
+            }
+        };
+        this.label = undefined;
+        this.name = undefined;
+        this.helpText = undefined;
+        this.errorText = undefined;
+        this.defaultValue = undefined;
+        this.maxLength = undefined;
+        this.inputHandler = undefined;
+        this.keyDownHandler = undefined;
+        this.disabled = undefined;
+    }
+    handleDefaultValueChange(newValue) {
+        this.updateInput(newValue);
+    }
+    componentDidLoad() {
+        this.updateInput(this.defaultValue);
+    }
+    render() {
+        return (h(Host, { key: '0c4290f6731324ed511abb14a7b84e07f061e2d0', exportparts: "label,input,input-invalid" }, h("div", { key: '615c33ea0f0488b0d1224fb158d77cd1234fa311', class: "form-group d-flex flex-column" }, h("label", { key: '86f2ce13d24b447f84af7bc59a89267e988992ce', part: "label", class: "form-label", htmlFor: this.name }, this.label), h("textarea", { key: '1dbade53d02ac7a7daa1b546ab5d6d0e18c5fb46', id: this.name, name: this.name, onBlur: this.formControlBlur.emit, onInput: this.handleFormControlInput, onKeyDown: this.keyDownHandler, onPaste: this.keyDownHandler, maxLength: this.maxLength, part: `input ${this.errorText ? 'input-invalid ' : ''}${this.disabled ? ' input-disabled' : ''}`, class: this.errorText ? 'form-control is-invalid' : 'form-control', disabled: this.disabled }), h("form-control-help-text", { key: '73974fe9a18995251e39ca494ec9cecbf90af21d', helpText: this.helpText, name: this.name }), h("form-control-error-text", { key: 'e8f10bd3ec0fbb215d113159d38888fe9b3f4689', errorText: this.errorText, name: this.name }))));
+    }
+    static get is() { return "form-control-textarea"; }
+    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
+            },
+            "helpText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "help-text",
+                "reflect": false
+            },
+            "errorText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "error-text",
+                "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
+            },
+            "maxLength": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "max-length",
+                "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": ""
+                }
+            },
+            "keyDownHandler": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "(event: any) => void",
+                    "resolved": "(event: any) => void",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "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 elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "defaultValue",
+                "methodName": "handleDefaultValueChange"
+            }];
+    }
+}

package/dist/collection/ui-components/form/form-helpers/form-control-tooltip/form-control-tooltip.js

@@ -0,0 +1,63 @@
+import { h } from "@stencil/core";
+export class TooltipComponent {
+    constructor() {
+        this.anchorIcon = undefined;
+        this.tooltip = undefined;
+        this.helpText = undefined;
+    }
+    show() {
+        this.tooltip.classList.add('show');
+    }
+    hide() {
+        this.tooltip.classList.remove('show');
+    }
+    render() {
+        if (!this.helpText) {
+            return null;
+        }
+        return (h("div", { class: "tooltip-container" }, h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", fill: "currentColor", class: "bi bi-question-square tooltip-icon", viewBox: "0 0 16 16", ref: (el) => (this.anchorIcon = el), part: "tooltip-icon" }, h("path", { d: "M14 1a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1zM2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2z" }), h("path", { d: "M5.255 5.786a.237.237 0 0 0 .241.247h.825c.138 0 .248-.113.266-.25.09-.656.54-1.134 1.342-1.134.686 0 1.314.343 1.314 1.168 0 .635-.374.927-.965 1.371-.673.489-1.206 1.06-1.168 1.987l.003.217a.25.25 0 0 0 .25.246h.811a.25.25 0 0 0 .25-.25v-.105c0-.718.273-.927 1.01-1.486.609-.463 1.244-.977 1.244-2.056 0-1.511-1.276-2.241-2.673-2.241-1.267 0-2.655.59-2.75 2.286m1.557 5.763c0 .533.425.927 1.01.927.609 0 1.028-.394 1.028-.927 0-.552-.42-.94-1.029-.94-.584 0-1.009.388-1.009.94" })), h("custom-popper", { trigger: "hover", placement: "top", anchorRef: this.anchorIcon }, h("div", { class: "tooltip bs-tooltip-top", part: "tooltip", role: "tooltip", ref: (el) => (this.tooltip = el) }, h("div", { class: "tooltip-inner", part: "tooltip-inner" }, this.helpText)))));
+    }
+    static get is() { return "form-control-tooltip"; }
+    static get properties() {
+        return {
+            "helpText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "help-text",
+                "reflect": false
+            }
+        };
+    }
+    static get states() {
+        return {
+            "anchorIcon": {},
+            "tooltip": {}
+        };
+    }
+    static get listeners() {
+        return [{
+                "name": "showEvent",
+                "method": "show",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "hideEvent",
+                "method": "hide",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
+}

package/dist/collection/ui-components/index.js

@@ -1,6 +1,7 @@
 export * from './button';
 export * from './button-spinner';
 export * from './styled-host/styled-host';
+export * from './table/exported-parts';
 export * from './table-empty-state';
 export * from './table-error-state';
 export * from './table-loading-state';

package/dist/collection/utils/table.js

@@ -0,0 +1,16 @@
+export class Table {
+    get columnData() {
+        return this.columnKeys.map((key) => this.tableColumns[key]());
+    }
+    get rowData() {
+        return this.collection.map((checkout) => {
+            return this.columnKeys.map((key) => this.tableCells[key](checkout[key]));
+        });
+    }
+    constructor(collection, columns, tableColumns, tableCells) {
+        this.columnKeys = columns.split(',');
+        this.collection = collection;
+        this.tableColumns = tableColumns;
+        this.tableCells = tableCells;
+    }
+}

package/dist/collection/utils/utils.js

@@ -1,14 +1,15 @@
 import { format } from "date-fns";
 import Dinero from "dinero.js";
 export const RegExZip = /^\d{5}/;
-export function formatCurrency(amount, withSymbol = true) {
+export function formatCurrency(amount, withSymbol = true, withCurrencyName = false) {
     if (!amount)
         amount = 0;
     function format(amount) {
         const formattedString = withSymbol ? '$0,0.00' : '0,0.00';
         return Dinero({ amount: amount, currency: 'USD' }).toFormat(formattedString);
     }
-    return amount < 0 ? `(${format(-amount)})` : format(amount);
+    const formattedAmount = amount < 0 ? `(${format(-amount)})` : format(amount);
+    return withCurrencyName ? `${formattedAmount} USD` : formattedAmount;
 }
 export function formatPercentage(amount) {
     if (!amount)
@@ -75,46 +76,6 @@ export function extractComputedFontsToLoad() {
     const computedStyles = getComputedStyle(document.body);
     return (((_a = computedStyles === null || computedStyles === void 0 ? void 0 : computedStyles.getPropertyValue('--jfi-load-google-font')) === null || _a === void 0 ? void 0 : _a.trim().replace(/'|"/g, '').replace(' ', '+')) || null);
 }
-export const MapPaymentStatusToBadge = (status) => {
-    switch (status) {
-        case 'authorized':
-            return "<span class='badge bg-primary' title='This card payment was authorized, but not captured. It could still succeed or fail.'>Authorized</span>";
-        case 'disputed':
-            return "<span class='badge bg-primary' title='The account holder disputed this payment. The amount has been returned and a fee assessed.'>Disputed</span>";
-        case 'achFailed':
-            return "<span class='badge bg-danger' title='The funds couldn't be collected for this ACH payment (in addition to the original payment, an ACH return and fee will appear in a payout)'>Failed</span>";
-        case 'failed':
-            return "<span class='badge bg-danger' title='This card payment didn't go through (it won't appear in a payout)'>Failed</span>";
-        case 'fully_refunded':
-            return "<span class='badge bg-primary' title='The full amount of this payment has been refunded'>Fully Refunded</span>";
-        case 'partially_refunded':
-            return "<span class='badge bg-primary' title='A portion of this payment has been refunded'>Partially Refunded</span>";
-        case 'pending':
-            return "<span class='badge bg-secondary' title='This ACH payment was processed, but the funds haven't settled. It could still succeed or fail.'>Pending</span>";
-        case 'succeeded':
-            return "<span class='badge bg-success' title='This payment was successfully captured'>Successful</span>";
-    }
-};
-export const MapPayoutStatusToBadge = (status) => {
-    switch (status) {
-        case 'canceled':
-            return "<span class='badge bg-danger' title='Transfer to your bank account failed'>Canceled</span>";
-        case 'failed':
-            return "<span class='badge bg-danger' title='Transfer to your bank account failed'>Failed</span>";
-        case 'forwarded':
-            return "<span class='badge bg-secondary' title='This payout initially failed; the funds have been forwarded to your next successful payout'>Forwarded</span>";
-        case 'in_transit':
-            return "<span class='badge bg-primary' title='Transfer to your bank account has been initiated'>In Transit</span>";
-        case 'paid':
-            return "<span class='badge bg-success' title='Successfully deposited into your bank account'>Paid</span>";
-        case 'pending':
-            return "<span class='badge bg-primary' title='Batched and scheduled to be transferred'>Pending</span>";
-        case 'scheduled':
-            return "<span class='badge bg-primary' title='Batched and scheduled to be transferred'>Scheduled</span>";
-        case 'withdrawn':
-            return "<span class='badge bg-success' title='Negative payout balance successfully withdrawn from your bank account'>Withdrawn</span>";
-    }
-};
 /**
  * Converts a snake_case string to a human-readable format by replacing underscores with spaces and capitalizing the first letter of each word.
  *