@justifi/webcomponents 4.7.4 → 4.7.5

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

@@ -1,193 +1,193 @@
 import { Host, h, } from "@stencil/core";
 export class TextInput {
-  constructor() {
-    this.label = undefined;
-    this.name = undefined;
-    this.error = undefined;
-    this.defaultValue = undefined;
-    this.disabled = undefined;
-    this.inputHandler = undefined;
-    this.input = undefined;
-  }
-  handleDefaultValueChange(newValue) {
-    this.updateInput(newValue);
-  }
-  updateInput(newValue) {
-    const inputElement = this.el.shadowRoot.querySelector('input');
-    if (inputElement) {
-      inputElement.value = newValue || '';
+    constructor() {
+        this.label = undefined;
+        this.name = undefined;
+        this.error = undefined;
+        this.defaultValue = undefined;
+        this.disabled = undefined;
+        this.inputHandler = undefined;
+        this.input = undefined;
     }
-  }
-  handleFormControlInput(event) {
-    const target = event.target;
-    const name = target.getAttribute('name');
-    this.inputHandler(name, target.value);
-  }
-  componentDidLoad() {
-    this.updateInput(this.defaultValue);
-  }
-  render() {
-    return (h(Host, { exportparts: "label,input,input-invalid" }, h("label", { part: "label", class: "form-label", htmlFor: this.name }, this.label), h("input", { id: this.name, name: this.name, onInput: (event) => this.handleFormControlInput(event), onBlur: () => this.formControlBlur.emit(), part: `input ${this.error && 'input-invalid'} ${this.disabled && 'input-disabled'}`, class: this.error ? 'form-control is-invalid' : 'form-control', type: "text", disabled: this.disabled }), this.error && h("div", { class: "invalid-feedback" }, this.error)));
-  }
-  static get is() { return "form-control-text"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["form-control-text.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["form-control-text.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "label": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "label",
-        "reflect": false
-      },
-      "name": {
-        "type": "any",
-        "mutable": false,
-        "complexType": {
-          "original": "any",
-          "resolved": "any",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "name",
-        "reflect": false
-      },
-      "error": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "error",
-        "reflect": false
-      },
-      "defaultValue": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "default-value",
-        "reflect": false
-      },
-      "disabled": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "disabled",
-        "reflect": false
-      },
-      "inputHandler": {
-        "type": "unknown",
-        "mutable": false,
-        "complexType": {
-          "original": "(name: string, value: string) => void",
-          "resolved": "(name: string, value: string) => void",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        }
-      }
-    };
-  }
-  static get states() {
-    return {
-      "input": {}
-    };
-  }
-  static get events() {
-    return [{
-        "method": "formControlInput",
-        "name": "formControlInput",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "complexType": {
-          "original": "any",
-          "resolved": "any",
-          "references": {}
-        }
-      }, {
-        "method": "formControlBlur",
-        "name": "formControlBlur",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "complexType": {
-          "original": "any",
-          "resolved": "any",
-          "references": {}
+    handleDefaultValueChange(newValue) {
+        this.updateInput(newValue);
+    }
+    updateInput(newValue) {
+        const inputElement = this.el.shadowRoot.querySelector('input');
+        if (inputElement) {
+            inputElement.value = newValue || '';
         }
-      }];
-  }
-  static get elementRef() { return "el"; }
-  static get watchers() {
-    return [{
-        "propName": "defaultValue",
-        "methodName": "handleDefaultValueChange"
-      }];
-  }
+    }
+    handleFormControlInput(event) {
+        const target = event.target;
+        const name = target.getAttribute('name');
+        this.inputHandler(name, target.value);
+    }
+    componentDidLoad() {
+        this.updateInput(this.defaultValue);
+    }
+    render() {
+        return (h(Host, { exportparts: "label,input,input-invalid" }, h("label", { part: "label", class: "form-label", htmlFor: this.name }, this.label), h("input", { id: this.name, name: this.name, onInput: (event) => this.handleFormControlInput(event), onBlur: () => this.formControlBlur.emit(), part: `input ${this.error && 'input-invalid'} ${this.disabled && 'input-disabled'}`, class: this.error ? 'form-control is-invalid' : 'form-control', type: "text", disabled: this.disabled }), this.error && h("div", { class: "invalid-feedback" }, this.error)));
+    }
+    static get is() { return "form-control-text"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["form-control-text.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["form-control-text.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "label",
+                "reflect": false
+            },
+            "name": {
+                "type": "any",
+                "mutable": false,
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "name",
+                "reflect": false
+            },
+            "error": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "error",
+                "reflect": false
+            },
+            "defaultValue": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "default-value",
+                "reflect": false
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "disabled",
+                "reflect": false
+            },
+            "inputHandler": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "(name: string, value: string) => void",
+                    "resolved": "(name: string, value: string) => void",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                }
+            }
+        };
+    }
+    static get states() {
+        return {
+            "input": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "formControlInput",
+                "name": "formControlInput",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                }
+            }, {
+                "method": "formControlBlur",
+                "name": "formControlBlur",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "defaultValue",
+                "methodName": "handleDefaultValueChange"
+            }];
+    }
 }

package/dist/collection/components/form/form.js

@@ -1,92 +1,92 @@
 import { BehaviorSubject } from "rxjs";
 export class FormController {
-  constructor(schema) {
-    this.values = new BehaviorSubject({});
-    this.errors = new BehaviorSubject({});
-    this._initialValues = {};
-    this._values = {};
-    this._errors = {};
-    this._isValid = true;
-    this._schema = schema;
-  }
-  processArrayError(obj, property, remainingProperties, message) {
-    // Extract array name and index from the property string
-    const [arrayName, indexStr] = property
-      .match(/^([a-zA-Z0-9]+)\[(\d+)\]/)
-      .slice(1);
-    const index = parseInt(indexStr, 10);
-    // Ensure the array exists and has an entry at the given index
-    obj[arrayName] = obj[arrayName] || [];
-    obj[arrayName][index] = obj[arrayName][index] || {};
-    // Recursively set the error if there are remaining properties, else set the error message
-    if (remainingProperties.length) {
-      this.setNestedError(obj[arrayName][index], remainingProperties, message);
+    constructor(schema) {
+        this.values = new BehaviorSubject({});
+        this.errors = new BehaviorSubject({});
+        this._initialValues = {};
+        this._values = {};
+        this._errors = {};
+        this._isValid = true;
+        this._schema = schema;
     }
-    else {
-      obj[arrayName][index] = message;
+    processArrayError(obj, property, remainingProperties, message) {
+        // Extract array name and index from the property string
+        const [arrayName, indexStr] = property
+            .match(/^([a-zA-Z0-9]+)\[(\d+)\]/)
+            .slice(1);
+        const index = parseInt(indexStr, 10);
+        // Ensure the array exists and has an entry at the given index
+        obj[arrayName] = obj[arrayName] || [];
+        obj[arrayName][index] = obj[arrayName][index] || {};
+        // Recursively set the error if there are remaining properties, else set the error message
+        if (remainingProperties.length) {
+            this.setNestedError(obj[arrayName][index], remainingProperties, message);
+        }
+        else {
+            obj[arrayName][index] = message;
+        }
     }
-  }
-  processRegularError(obj, property, remainingProperties, message) {
-    // Ensure the property exists
-    obj[property] = obj[property] || {};
-    // Recursively set the error if there are remaining properties, else set the error message
-    if (remainingProperties.length) {
-      this.setNestedError(obj[property], remainingProperties, message);
+    processRegularError(obj, property, remainingProperties, message) {
+        // Ensure the property exists
+        obj[property] = obj[property] || {};
+        // Recursively set the error if there are remaining properties, else set the error message
+        if (remainingProperties.length) {
+            this.setNestedError(obj[property], remainingProperties, message);
+        }
+        else {
+            obj[property] = message;
+        }
     }
-    else {
-      obj[property] = message;
+    setNestedError(obj, properties, message) {
+        const property = properties.shift();
+        const isArrayError = property.includes('[');
+        if (isArrayError) {
+            this.processArrayError(obj, property, properties, message);
+        }
+        else {
+            this.processRegularError(obj, property, properties, message);
+        }
     }
-  }
-  setNestedError(obj, properties, message) {
-    const property = properties.shift();
-    const isArrayError = property.includes('[');
-    if (isArrayError) {
-      this.processArrayError(obj, property, properties, message);
+    setError(obj, path, message) {
+        // Convert path to properties array
+        const properties = Array.isArray(path) ? path : path.split('.');
+        this.setNestedError(obj, properties, message);
     }
-    else {
-      this.processRegularError(obj, property, properties, message);
+    async validate(context) {
+        this._isValid = true;
+        this._errors = {};
+        try {
+            await this._schema.validate(this._values, { context, abortEarly: false });
+        }
+        catch (err) {
+            this._isValid = false;
+            err.inner.forEach((item) => {
+                this.setError(this._errors, item.path, item.message);
+            });
+        }
+        this.errors.next(this._errors);
+        return this._isValid;
     }
-  }
-  setError(obj, path, message) {
-    // Convert path to properties array
-    const properties = Array.isArray(path) ? path : path.split('.');
-    this.setNestedError(obj, properties, message);
-  }
-  async validate(context) {
-    this._isValid = true;
-    this._errors = {};
-    try {
-      await this._schema.validate(this._values, { context, abortEarly: false });
+    async validateAndSubmit(submitHandler, context) {
+        const isValid = await this.validate(context || {});
+        if (isValid) {
+            submitHandler();
+        }
     }
-    catch (err) {
-      this._isValid = false;
-      err.inner.forEach((item) => {
-        this.setError(this._errors, item.path, item.message);
-      });
+    setInitialValues(values) {
+        this._initialValues = values;
+        this._values = values;
+        this.values.next(this._values);
     }
-    this.errors.next(this._errors);
-    return this._isValid;
-  }
-  async validateAndSubmit(submitHandler, context) {
-    const isValid = await this.validate(context || {});
-    if (isValid) {
-      submitHandler();
+    setValues(values) {
+        this._values = Object.assign(Object.assign({}, this._values), values);
+        this.values.next(this._values);
+    }
+    resetValues() {
+        this._values = this._initialValues;
+        this.values.next(this._values);
+    }
+    getInitialValues() {
+        return this._initialValues;
     }
-  }
-  setInitialValues(values) {
-    this._initialValues = values;
-    this._values = values;
-    this.values.next(this._values);
-  }
-  setValues(values) {
-    this._values = Object.assign(Object.assign({}, this._values), values);
-    this.values.next(this._values);
-  }
-  resetValues() {
-    this._values = this._initialValues;
-    this.values.next(this._values);
-  }
-  getInitialValues() {
-    return this._initialValues;
-  }
 }

package/dist/collection/components/gross-payment-chart/chart-utils.js

@@ -1,58 +1,58 @@
 import { formatCurrency, formatDisplayDate } from "../../utils/utils";
 export const generateChartOptions = (total, dates, endDate) => {
-  return ({
-    type: 'bar',
-    options: {
-      plugins: {
-        legend: {
-          display: false
-        },
-        title: {
-          display: true,
-          text: ['Trailing 30 Days', 'Gross Payments', formatCurrency(total)],
-          position: 'top',
-          align: 'start'
-        },
-        tooltip: {
-          displayColors: false,
-          intersect: false,
-          callbacks: {
-            label: (context) => {
-              let index = context.dataIndex;
-              let date = formatDisplayDate(dates[index].date, endDate);
-              let value = formatCurrency(dates[index].value);
-              return [date, value];
+    return ({
+        type: 'bar',
+        options: {
+            plugins: {
+                legend: {
+                    display: false
+                },
+                title: {
+                    display: true,
+                    text: ['Trailing 30 Days', 'Gross Payments', formatCurrency(total)],
+                    position: 'top',
+                    align: 'start'
+                },
+                tooltip: {
+                    displayColors: false,
+                    intersect: false,
+                    callbacks: {
+                        label: (context) => {
+                            let index = context.dataIndex;
+                            let date = formatDisplayDate(dates[index].date, endDate);
+                            let value = formatCurrency(dates[index].value);
+                            return [date, value];
+                        },
+                    }
+                }
             },
-          }
-        }
-      },
-      scales: {
-        x: {
-          grid: {
-            drawOnChartArea: false,
-            drawTicks: false
-          },
-          ticks: {
-            callback: (index) => {
-              if (index === 0 || index === dates.length - 1) {
-                return formatDisplayDate(dates[index].date, endDate);
-              }
+            scales: {
+                x: {
+                    grid: {
+                        drawOnChartArea: false,
+                        drawTicks: false
+                    },
+                    ticks: {
+                        callback: (index) => {
+                            if (index === 0 || index === dates.length - 1) {
+                                return formatDisplayDate(dates[index].date, endDate);
+                            }
+                        }
+                    }
+                },
+                y: {
+                    display: false
+                }
             }
-          }
         },
-        y: {
-          display: false
-        }
-      }
-    },
-    data: {
-      labels: dates.map(() => ''),
-      datasets: [
-        {
-          label: 'Gross Volume by Date',
-          data: dates.map((date) => date.value)
-        }
-      ]
-    },
-  });
+        data: {
+            labels: dates.map(() => ''),
+            datasets: [
+                {
+                    label: 'Gross Volume by Date',
+                    data: dates.map((date) => date.value)
+                }
+            ]
+        },
+    });
 };

package/dist/collection/components/gross-payment-chart/gross-payment-chart.css

@@ -93,6 +93,7 @@
   --bs-link-hover-color: #0a58ca;
   --bs-link-hover-color-rgb: 10, 88, 202;
   --bs-code-color: #d63384;
+  --bs-highlight-color: #212529;
   --bs-highlight-bg: #fff3cd;
   --bs-border-width: 1px;
   --bs-border-style: solid;
@@ -164,6 +165,8 @@
   --bs-link-color-rgb: 110, 168, 254;
   --bs-link-hover-color-rgb: 139, 185, 254;
   --bs-code-color: #e685b5;
+  --bs-highlight-color: #dee2e6;
+  --bs-highlight-bg: #664d03;
   --bs-border-color: #495057;
   --bs-border-color-translucent: rgba(255, 255, 255, 0.15);
   --bs-form-valid-color: #75b798;