@justifi/webcomponents 4.7.3 → 4.7.5

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

@@ -1,216 +1,216 @@
 import { Host, h, } from "@stencil/core";
 import IMask from "imask";
 export class NumberInputMasked {
-  constructor() {
-    this.imask = null;
-    this.label = undefined;
-    this.name = undefined;
-    this.error = undefined;
-    this.defaultValue = undefined;
-    this.inputHandler = undefined;
-    this.mask = undefined;
-    this.disabled = undefined;
-  }
-  handleDefaultValueChange(newValue) {
-    this.updateInput(newValue);
-  }
-  componentDidLoad() {
-    if (this.textInput && this.mask) {
-      this.imask = IMask(this.textInput, {
-        mask: this.mask,
-      });
-      this.imask.on('accept', () => {
-        const rawValue = this.imask.unmaskedValue;
-        this.inputHandler(this.name, rawValue);
-      });
-      this.textInput.addEventListener('blur', () => {
-        this.formControlBlur.emit();
-      });
-      this.updateInput(this.defaultValue);
+    constructor() {
+        this.imask = null;
+        this.label = undefined;
+        this.name = undefined;
+        this.error = undefined;
+        this.defaultValue = undefined;
+        this.inputHandler = undefined;
+        this.mask = undefined;
+        this.disabled = undefined;
     }
-  }
-  disconnectedCallback() {
-    var _a;
-    (_a = this.imask) === null || _a === void 0 ? void 0 : _a.destroy();
-  }
-  updateInput(newValue) {
-    if (this.imask && newValue) {
-      this.imask.value = String(newValue);
+    handleDefaultValueChange(newValue) {
+        this.updateInput(newValue);
     }
-  }
-  render() {
-    return (h(Host, { exportparts: "label,input,input-invalid" }, h("label", { part: "label", class: "form-label", htmlFor: this.name }, this.label), h("input", { ref: el => (this.textInput = el), id: this.name, name: this.name, onBlur: () => this.formControlBlur.emit(), part: `input ${this.error && 'input-invalid'}`, class: this.error ? 'form-control is-invalid' : 'form-control', type: "text", disabled: this.disabled }), this.error && h("div", { class: "invalid-feedback" }, this.error)));
-  }
-  static get is() { return "form-control-number-masked"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["form-control-number.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["form-control-number.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "label": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "label",
-        "reflect": false
-      },
-      "name": {
-        "type": "any",
-        "mutable": false,
-        "complexType": {
-          "original": "any",
-          "resolved": "any",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "name",
-        "reflect": false
-      },
-      "error": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "error",
-        "reflect": false
-      },
-      "defaultValue": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "default-value",
-        "reflect": false
-      },
-      "inputHandler": {
-        "type": "unknown",
-        "mutable": false,
-        "complexType": {
-          "original": "(name: string, value: string) => void",
-          "resolved": "(name: string, value: string) => void",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
+    componentDidLoad() {
+        if (this.textInput && this.mask) {
+            this.imask = IMask(this.textInput, {
+                mask: this.mask,
+            });
+            this.imask.on('accept', () => {
+                const rawValue = this.imask.unmaskedValue;
+                this.inputHandler(this.name, rawValue);
+            });
+            this.textInput.addEventListener('blur', () => {
+                this.formControlBlur.emit();
+            });
+            this.updateInput(this.defaultValue);
         }
-      },
-      "mask": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "mask",
-        "reflect": false
-      },
-      "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": {}
+    }
+    disconnectedCallback() {
+        var _a;
+        (_a = this.imask) === null || _a === void 0 ? void 0 : _a.destroy();
+    }
+    updateInput(newValue) {
+        if (this.imask && newValue) {
+            this.imask.value = String(newValue);
         }
-      }];
-  }
-  static get watchers() {
-    return [{
-        "propName": "defaultValue",
-        "methodName": "handleDefaultValueChange"
-      }];
-  }
+    }
+    render() {
+        return (h(Host, { exportparts: "label,input,input-invalid" }, h("label", { part: "label", class: "form-label", htmlFor: this.name }, this.label), h("input", { ref: el => (this.textInput = el), id: this.name, name: this.name, onBlur: () => this.formControlBlur.emit(), part: `input ${this.error && 'input-invalid'}`, class: this.error ? 'form-control is-invalid' : 'form-control', type: "text", disabled: this.disabled }), this.error && h("div", { class: "invalid-feedback" }, this.error)));
+    }
+    static get is() { return "form-control-number-masked"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["form-control-number.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["form-control-number.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "label",
+                "reflect": false
+            },
+            "name": {
+                "type": "any",
+                "mutable": false,
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "name",
+                "reflect": false
+            },
+            "error": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "error",
+                "reflect": false
+            },
+            "defaultValue": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "default-value",
+                "reflect": false
+            },
+            "inputHandler": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "(name: string, value: string) => void",
+                    "resolved": "(name: string, value: string) => void",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                }
+            },
+            "mask": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "mask",
+                "reflect": false
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "disabled",
+                "reflect": false
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "formControlInput",
+                "name": "formControlInput",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                }
+            }, {
+                "method": "formControlBlur",
+                "name": "formControlBlur",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                }
+            }];
+    }
+    static get watchers() {
+        return [{
+                "propName": "defaultValue",
+                "methodName": "handleDefaultValueChange"
+            }];
+    }
 }

package/dist/collection/components/form/form-control-number.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;
@@ -712,6 +715,7 @@ small {
 
 mark {
   padding: 0.1875em;
+  color: var(--bs-highlight-color);
   background-color: var(--bs-highlight-bg);
 }
 
@@ -1237,6 +1241,7 @@ textarea.form-control-lg {
 
 .form-check-input {
   --bs-form-check-bg: var(--bs-body-bg);
+  flex-shrink: 0;
   width: 1em;
   height: 1em;
   margin-top: 0.25em;
@@ -1384,7 +1389,7 @@ textarea.form-control-lg {
   height: 0.5rem;
   color: transparent;
   cursor: pointer;
-  background-color: var(--bs-tertiary-bg);
+  background-color: var(--bs-secondary-bg);
   border-color: transparent;
   border-radius: 1rem;
 }
@@ -1410,7 +1415,7 @@ textarea.form-control-lg {
   height: 0.5rem;
   color: transparent;
   cursor: pointer;
-  background-color: var(--bs-tertiary-bg);
+  background-color: var(--bs-secondary-bg);
   border-color: transparent;
   border-radius: 1rem;
 }