@justifi/webcomponents 6.7.2 → 6.8.0

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

@@ -35,10 +35,10 @@ export class SelectInput {
     }
     render() {
         var _a;
-        return (h(Host, { key: '605b6cb9bfa7bac528ee0af9c4deb5e7b1356b93' }, h("div", { key: 'f8b42609971ff02c4bc147a113bb4a025d32bcd8', class: "form-group d-flex flex-column" }, h("div", { key: '26c87da7b92edbb7fd41825a4e64b642778d0808', class: "d-flex align-items-start gap-2" }, h("label", { key: '43ad562c323b586bf7ab0260258d8678ef3194aa', part: label, class: "form-label", htmlFor: this.name }, this.label), h("form-control-tooltip", { key: '1e4b1fa0e9bae57b6e783fb873de38c49ae7a8a4', helpText: this.helpText })), h("select", { key: 'bef2df140499a642ea9bf5bd3f6d7b558042e733', ref: el => (this.selectElement = el), id: this.name, name: this.name, onFocus: () => this.isFocused = true, onBlur: () => {
+        return (h(Host, { key: '649b0ca4cb24c5a179ac01db344d53ac4481dbbd' }, h("div", { key: '1976f3076b0cd47ead27e9acc9c71bda01623e56', class: "form-group d-flex flex-column" }, h("div", { key: '1610a472997ce0d6c8bb8e3e9e43096cfa442dc3', class: "d-flex align-items-start gap-2" }, h("label", { key: 'a25d6b0d6d2b51d8e2c61afe945eb9fe3ab0e6d6', part: label, class: "form-label", htmlFor: this.name }, this.label), h("form-control-tooltip", { key: 'e9a891ffdb7910ac1ac6b94e98042e87f4ae0ad1', helpText: this.helpText })), h("select", { key: 'c56535aeb6701fbcb21fc64fdf449f23f8ea8876', 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: '99abaaa766c1270cf1cfd926320d343393b13d1d', 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: '441e66367708e5653b483acd6a9834da391a6a0c', errorText: this.errorText, name: this.name }))));
     }
     static get is() { return "form-control-select"; }
     static get properties() {
@@ -51,7 +51,7 @@ export class SelectInput {
                     "resolved": "any",
                     "references": {}
                 },
-                "required": false,
+                "required": true,
                 "optional": false,
                 "docs": {
                     "tags": [],
@@ -70,7 +70,7 @@ export class SelectInput {
                     "resolved": "string",
                     "references": {}
                 },
-                "required": false,
+                "required": true,
                 "optional": false,
                 "docs": {
                     "tags": [],
@@ -89,7 +89,7 @@ export class SelectInput {
                     "resolved": "{ label: string; value: string; }[]",
                     "references": {}
                 },
-                "required": false,
+                "required": true,
                 "optional": false,
                 "docs": {
                     "tags": [],
@@ -106,7 +106,7 @@ export class SelectInput {
                     "resolved": "(name: string, value: string) => void",
                     "references": {}
                 },
-                "required": false,
+                "required": true,
                 "optional": false,
                 "docs": {
                     "tags": [],

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

@@ -36,10 +36,10 @@ export class TextInput {
         return input;
     }
     render() {
-        return (h(Host, { key: '559f086283d08b505d31b39e181581d30038aa6a' }, h("div", { key: '4f86bb1d540bac675f354b90ea197a5772a4c6f5', class: "form-group d-flex flex-column" }, h("div", { key: '0012abb57c9d764af117e4a7c94a46d1cf155578', class: "d-flex align-items-start gap-2" }, h("label", { key: '0af1f99196b62eb76901c4656e231fde993c5e0f', part: label, class: "form-label", htmlFor: this.name }, this.label), h("form-control-tooltip", { key: '364a0e5f3d5229012f8ab8815938d99f0d1e9e06', helpText: this.helpText })), h("input", { key: '2b068466f069282a6a5acdd0842bb0f96db6944f', id: this.name, name: this.name, onFocus: () => this.isFocused = true, onBlur: () => {
+        return (h(Host, { key: 'ab2547726a7cdf84fae2970e14e5e22164a8db9f' }, h("div", { key: '2ca8d50630ae66298384e3e574cec92be7eb2120', class: "form-group d-flex flex-column" }, h("div", { key: '6683fc8418f4f59db60b3d94eca0795b2f7ec23e', class: "d-flex align-items-start gap-2" }, h("label", { key: '46c5670107fff83d643b23e6b570199c21c39c07', part: label, class: "form-label", htmlFor: this.name }, this.label), h("form-control-tooltip", { key: '7c42abe6644ef89c0c964717a5fedb63993beed8', helpText: this.helpText })), h("input", { key: 'c484eaa0ad7e01299ece5fcd5b783a7bdedb4dc4', 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: '602fc385905ba52c551aa73ef71e29f0ef16084e', 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: 'e5f1a634eaa8684106d500245282685016dd38c2', errorText: this.errorText, name: this.name }))));
     }
     static get is() { return "form-control-text"; }
     static get properties() {
@@ -52,7 +52,7 @@ export class TextInput {
                     "resolved": "any",
                     "references": {}
                 },
-                "required": false,
+                "required": true,
                 "optional": false,
                 "docs": {
                     "tags": [],
@@ -71,7 +71,7 @@ export class TextInput {
                     "resolved": "string",
                     "references": {}
                 },
-                "required": false,
+                "required": true,
                 "optional": false,
                 "docs": {
                     "tags": [],
@@ -90,7 +90,7 @@ export class TextInput {
                     "resolved": "(name: string, value: string) => void",
                     "references": {}
                 },
-                "required": false,
+                "required": true,
                 "optional": false,
                 "docs": {
                     "tags": [],

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

@@ -3,6 +3,10 @@ import { input, inputDisabled, inputFocused, inputInvalid, inputInvalidAndFocuse
 export class TextInput {
     constructor() {
         this.isFocused = false;
+        this.helpText = '';
+        this.errorText = '';
+        this.inputHandler = () => { };
+        this.disabled = false;
         this.handleFormControlInput = (event) => {
             const target = event.target;
             const name = target.getAttribute('name');
@@ -38,10 +42,10 @@ export class TextInput {
         return input;
     }
     render() {
-        return (h(Host, { key: '1fa96ad32451a814537a92abc4547d3a227ba832' }, h("div", { key: '6adc16748f0b4fc2f3d9e7eaf2d88233263b82c0', class: "form-group d-flex flex-column" }, h("label", { key: '0b18eece09db4d3dd3f9c870b1c232c7c32f6f94', part: label, class: "form-label", htmlFor: this.name }, this.label), h("textarea", { key: '411d846fa0af7a5ab5a72662b71c802f1de87a8d', id: this.name, name: this.name, onFocus: () => this.isFocused = true, onBlur: () => {
+        return (h(Host, { key: '674ffca07a9d08d3c91dabd929abbec7295b59e3' }, h("div", { key: '31f19f54d033a4dd2d087d57a32233cec2d76399', class: "form-group d-flex flex-column" }, h("label", { key: '87a7bf2e61052b30acce04c2d8862198fd0dc0c7', part: label, class: "form-label", htmlFor: this.name }, this.label), h("textarea", { key: '42a4664dfea00bf9bf4c54d36ee03d53338ff4bc', 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: 'd52fad4559514075e0623c1571b33ccc4df62ead', helpText: this.helpText, name: this.name }), h("form-control-error-text", { key: '52484a4da5de1a0e5409524cdb6993dc4469d708', 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: '004c85e69ed747250ecdad8559af650ac92c960d', helpText: this.helpText, name: this.name }), h("form-control-error-text", { key: '6ce96a2d36b6972caf80a66cbf256b461967904b', errorText: this.errorText, name: this.name }))));
     }
     static get is() { return "form-control-textarea"; }
     static get properties() {
@@ -54,7 +58,7 @@ export class TextInput {
                     "resolved": "string",
                     "references": {}
                 },
-                "required": false,
+                "required": true,
                 "optional": false,
                 "docs": {
                     "tags": [],
@@ -73,7 +77,7 @@ export class TextInput {
                     "resolved": "any",
                     "references": {}
                 },
-                "required": false,
+                "required": true,
                 "optional": false,
                 "docs": {
                     "tags": [],
@@ -101,7 +105,8 @@ export class TextInput {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "help-text"
+                "attribute": "help-text",
+                "defaultValue": "''"
             },
             "errorText": {
                 "type": "string",
@@ -120,7 +125,8 @@ export class TextInput {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "error-text"
+                "attribute": "error-text",
+                "defaultValue": "''"
             },
             "defaultValue": {
                 "type": "string",
@@ -130,7 +136,7 @@ export class TextInput {
                     "resolved": "string",
                     "references": {}
                 },
-                "required": false,
+                "required": true,
                 "optional": false,
                 "docs": {
                     "tags": [],
@@ -169,13 +175,14 @@ export class TextInput {
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": ""
                 },
                 "getter": false,
-                "setter": false
+                "setter": false,
+                "defaultValue": "() => { }"
             },
             "keyDownHandler": {
                 "type": "unknown",
@@ -203,7 +210,7 @@ export class TextInput {
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": ""
@@ -211,7 +218,8 @@ export class TextInput {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "disabled"
+                "attribute": "disabled",
+                "defaultValue": "false"
             }
         };
     }

package/dist/collection/ui-components/form/form-helpers/form-alert/form-alert.js

@@ -21,7 +21,7 @@ export class FormAlert {
                     "resolved": "string",
                     "references": {}
                 },
-                "required": false,
+                "required": true,
                 "optional": false,
                 "docs": {
                     "tags": [],
@@ -40,7 +40,7 @@ export class FormAlert {
                     "resolved": "boolean",
                     "references": {}
                 },
-                "required": false,
+                "required": true,
                 "optional": false,
                 "docs": {
                     "tags": [],

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

@@ -17,7 +17,7 @@ export class FormControlHelpText {
                     "resolved": "string",
                     "references": {}
                 },
-                "required": false,
+                "required": true,
                 "optional": false,
                 "docs": {
                     "tags": [],
@@ -36,7 +36,7 @@ export class FormControlHelpText {
                     "resolved": "string",
                     "references": {}
                 },
-                "required": false,
+                "required": true,
                 "optional": false,
                 "docs": {
                     "tags": [],

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

@@ -24,7 +24,7 @@ export class TooltipComponent {
                     "resolved": "string",
                     "references": {}
                 },
-                "required": false,
+                "required": true,
                 "optional": false,
                 "docs": {
                     "tags": [],

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

@@ -87,7 +87,7 @@ export class HiddenInput {
         return input;
     }
     render() {
-        return (h(Host, { key: '5ebb1ec479a87430d51fbdff53edcaace72e98c2' }, h("input", { key: '48ace17d93b23f5da773412390fd8187c03cd59d', 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: 'c6c8c76cdec2790f60ee19c527731ba6f9117b75' }, h("input", { key: '9af6445a3380f6e31e287558dc3cbd0822db6a21', 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

@@ -77,10 +77,10 @@ export class IframeInput {
         return params;
     }
     render() {
-        return (h(Host, { key: 'b7f549db9954e772632f144d0b8fab81aa00ac48', class: "form-group d-flex flex-column" }, h("div", { key: 'c073506d6835001d515839382d5140ea074cb1c8', style: {
+        return (h(Host, { key: 'a330cb0cec7fbdf46c0e6e7c40be6997b2c4cd5f', class: "form-group d-flex flex-column" }, h("div", { key: '66458b65ed76bfe0e0dea194433f22b03f912135', style: {
                 visibility: this.iframeLoaded ? 'visible' : 'hidden',
                 height: this.iframeLoaded ? 'auto' : '0',
-            } }, h("label", { key: 'a80095abc7580bf8f4704239a27d0d819df48800', class: "form-label", htmlFor: "", part: label }, this.label || ''), h("div", { key: 'd3c5647e79ae3f2fc68cd3b0395c18416ef848fe', 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: '66ad8a684dcc1397fe11ac2e1c7429ce88ec1166', id: this.inputId, name: this.inputId, src: `${this.iframeOrigin}?${this.urlParams}`, ref: el => {
+            } }, h("label", { key: '9b8ed47bde6743810d6bd3efa14bd1dd55ce2753', class: "form-label", htmlFor: "", part: label }, this.label || ''), h("div", { key: 'f3b3cdd705bda6f52d4f491be6c3f85df1182386', 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: 'b0f70e44bdf8c959bdae70e8b487fad62d1b5f36', id: this.inputId, name: this.inputId, src: `${this.iframeOrigin}?${this.urlParams}`, ref: el => {
                 this.iframeElement = el;
                 this.initializeFrameCommunicationService();
             }, width: "100%", onLoad: () => {
@@ -90,7 +90,7 @@ export class IframeInput {
                         this.iframeLoaded.emit();
                     }
                 }, this.iframeElement);
-            } })), h(FormControlErrorText, { key: 'bca0e095f13b229ad73a309e9c39b4a42104e303', errorText: this.errorText, name: this.inputId }))));
+            } })), h(FormControlErrorText, { key: '72e6383af686f07b9f40b125a8502c56aaa40310', errorText: this.errorText, name: this.inputId }))));
     }
     static get is() { return "iframe-input"; }
     static get properties() {
@@ -103,7 +103,7 @@ export class IframeInput {
                     "resolved": "string",
                     "references": {}
                 },
-                "required": false,
+                "required": true,
                 "optional": false,
                 "docs": {
                     "tags": [],
@@ -122,7 +122,7 @@ export class IframeInput {
                     "resolved": "string",
                     "references": {}
                 },
-                "required": false,
+                "required": true,
                 "optional": false,
                 "docs": {
                     "tags": [],
@@ -141,7 +141,7 @@ export class IframeInput {
                     "resolved": "string",
                     "references": {}
                 },
-                "required": false,
+                "required": true,
                 "optional": false,
                 "docs": {
                     "tags": [],

package/dist/collection/ui-components/shadow-dom-components/justifi-button.js

@@ -7,7 +7,7 @@ export class JustifiButton {
         this.type = 'button';
     }
     render() {
-        return (h(StyledHost, { key: '7c8b76c4eaa412f2dc2ba59fd56cb7c28f46656c' }, h(Button, { key: '9440f90ebb380703b35b6c5d811e5d0780e80fd2', variant: this.variant, isLoading: this.isLoading, clickHandler: this.clickHandler, class: this.class, type: this.type, disabled: this.disabled, style: this.customStyle }, this.text)));
+        return (h(StyledHost, { key: '2ef29be35c350bbd0530dbad83f65cd4ad4dbe27' }, h(Button, { key: '526763deaf2d228f0142d8efcb805557b8fe6ed9', variant: this.variant, isLoading: this.isLoading, clickHandler: this.clickHandler, class: this.class, type: this.type, disabled: this.disabled, style: this.customStyle }, this.text)));
     }
     static get is() { return "justifi-button"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/ui-components/shadow-dom-components/justifi-header.js

@@ -14,7 +14,7 @@ export class Header {
     }
     render() {
         const HeaderComponent = this.levels[this.level];
-        return (h(StyledHost, { key: 'e448c85b2268df923662a0ff71bf4d178dcfc910' }, h(HeaderComponent, { key: 'c76766a1ab006ea4b5eb7e0ad8a6b294d52283a0', text: this.text, class: this.class })));
+        return (h(StyledHost, { key: 'b9dfbfab147a15030ec8b2cb39ccd1c476e7c0be' }, h(HeaderComponent, { key: '9ee20ed2fb2916a433cb158ce082505fbc367c4f', text: this.text, class: this.class })));
     }
     static get is() { return "justifi-header"; }
     static get encapsulation() { return "shadow"; }
@@ -28,7 +28,7 @@ export class Header {
                     "resolved": "string",
                     "references": {}
                 },
-                "required": false,
+                "required": true,
                 "optional": false,
                 "docs": {
                     "tags": [],

package/dist/collection/ui-components/shadow-dom-components/justifi-skeleton.js

@@ -3,7 +3,7 @@ import { StyledHost } from "../styled-host/styled-host";
 import { Skeleton } from "../skeleton";
 export class JustifiSkeleton {
     render() {
-        return (h(StyledHost, { key: '2bb7c8b02477b880d0ebefebe37e62573b2a68d3' }, h(Skeleton, { key: '067e503b0e6047b9f14603336cba0112247c2a54', component: this.component, height: this.height, width: this.width, className: this.class, styles: this.customStyle })));
+        return (h(StyledHost, { key: '0ea8007102180f34f1a6ee362f132af78de2890e' }, h(Skeleton, { key: '0ed8c7d4a63c57fd7d89db17012d622eb6975bed', component: this.component, height: this.height, width: this.width, className: this.class, styles: this.customStyle })));
     }
     static get is() { return "justifi-skeleton"; }
     static get encapsulation() { return "shadow"; }