@justifi/webcomponents 4.23.1 → 5.0.0-rc-2

package/dist/collection/components/terminals-list/terminals-list.js

@@ -7,30 +7,8 @@ import { TerminalService } from "../../api/services/terminal.service";
 import { makeGetTerminals } from "./get-terminals";
 import { SubAccountService } from "../../api/services/subaccounts.service";
 import { makeGetSubAccounts } from "../../api/get-subaccounts";
-import { StyledHost, tableExportedParts } from "../../ui-components";
+import { StyledHost } from "../../ui-components";
 import { defaultColumnsKeys } from "./terminals-table";
-/**
-  * @exportedPart label: Label for inputs
-  * @exportedPart input: The input fields
-  * @exportedPart input-invalid: Invalid state for inputs
-  * @exportedPart table-head: Table head
-  * @exportedPart table-head-row: Head row
-  * @exportedPart table-head-cell: Individual head cell
-  * @exportedPart table-body: Body of the table
-  * @exportedPart table-row: Row of the table
-  * @exportedPart table-cell: Individual cell of the table
-  * @exportedPart loading-state-cell: Row for loading state
-  * @exportedPart loading-state-spinner: Spinner element for loading state
-  * @exportedPart error-state: Row for Error state
-  * @exportedPart empty-state: Row for Emtpy state
-  * @exportedPart pagination-bar: Pagination bar
-  * @exportedPart arrow: Both paging buttons
-  * @exportedPart arrow-left: Previous page button
-  * @exportedPart arrow-right: Next page button
-  * @exportedPart button-disabled: Disabled state for paging buttons
-  * @exportedPart previous-button-text: Text for Previous button
-  * @exportedPart next-button-text: Text for Next button
-*/
 export class TerminalsList {
     constructor() {
         this.handleErrorEvent = (event) => {
@@ -89,7 +67,7 @@ export class TerminalsList {
         }
     }
     render() {
-        return (h(StyledHost, { key: 'b0109248be43245cc91a844960f83c80b09b88a3', exportparts: tableExportedParts }, h("terminals-list-core", { key: 'c1b6467303b606863c544f898a3c0b8e37c597c2', getTerminals: this.getTerminals, getSubAccounts: this.getSubAccounts, "onError-event": this.handleErrorEvent, columns: this.columns })));
+        return (h(StyledHost, { key: '202c9b2b8492e03f999cb8c62aa71871068e46d6' }, h("terminals-list-core", { key: 'eca0f2a0b076eb92b33bbb3703650506a5e1377b', getTerminals: this.getTerminals, getSubAccounts: this.getSubAccounts, "onError-event": this.handleErrorEvent, columns: this.columns })));
     }
     static get is() { return "justifi-terminals-list"; }
     static get encapsulation() { return "shadow"; }
@@ -186,13 +164,13 @@ export class TerminalsList {
                     "text": ""
                 },
                 "complexType": {
-                    "original": "ComponentError",
-                    "resolved": "ComponentError",
+                    "original": "ComponentErrorEvent",
+                    "resolved": "ComponentErrorEvent",
                     "references": {
-                        "ComponentError": {
+                        "ComponentErrorEvent": {
                             "location": "import",
-                            "path": "../../api/ComponentError",
-                            "id": "src/api/ComponentError.ts::ComponentError"
+                            "path": "../../api/ComponentEvents",
+                            "id": "src/api/ComponentEvents.ts::ComponentErrorEvent"
                         }
                     }
                 }

package/dist/collection/components/terminals-list/terminals-table.js

@@ -1,15 +1,16 @@
 import { h } from "@stencil/core";
 import { MapTerminalStatusToBadge } from "./terminals-status";
+import { getAlternateTableCellPart, tableHeadCell } from "../../styles/parts";
 export const defaultColumnsKeys = 'nickname,provider_id,status';
 export const terminalTableColumns = {
-    nickname: () => (h("th", { part: "table-head-cell", scope: "col", title: "The nickname associated with the terminal" }, "Nickname")),
-    provider_id: () => (h("th", { part: "table-head-cell", scope: "col", title: "The provider ID of the terminal" }, "Provider ID")),
-    sub_account_name: () => (h("th", { part: "table-head-cell", scope: "col", title: "The sub account associated with the terminal" }, "Sub Account")),
-    status: () => (h("th", { part: "table-head-cell", scope: "col", title: "The current status of each terminal" }, "Status")),
+    nickname: () => (h("th", { part: tableHeadCell, scope: "col", title: "The nickname associated with the terminal" }, "Nickname")),
+    provider_id: () => (h("th", { part: tableHeadCell, scope: "col", title: "The provider ID of the terminal" }, "Provider ID")),
+    sub_account_name: () => (h("th", { part: tableHeadCell, scope: "col", title: "The sub account associated with the terminal" }, "Sub Account")),
+    status: () => (h("th", { part: tableHeadCell, scope: "col", title: "The current status of each terminal" }, "Status")),
 };
 export const terminalTableCells = {
-    nickname: (value) => (h("td", { part: "table-cell" }, value)),
-    provider_id: (value) => (h("td", { part: "table-cell" }, value)),
-    sub_account_name: (value) => (h("td", { part: "table-cell" }, value)),
-    status: (value) => (h("td", { part: "table-cell", innerHTML: MapTerminalStatusToBadge(value) })),
+    nickname: (value, index) => (h("td", { part: getAlternateTableCellPart(index) }, value)),
+    provider_id: (value, index) => (h("td", { part: getAlternateTableCellPart(index) }, value)),
+    sub_account_name: (value, index) => (h("td", { part: getAlternateTableCellPart(index) }, value)),
+    status: (value, index) => (h("td", { part: getAlternateTableCellPart(index), innerHTML: MapTerminalStatusToBadge(value) })),
 };

package/dist/collection/components/tokenize-payment-method/tokenize-payment-method.js

@@ -29,27 +29,17 @@ export class TokenizePaymentMethod {
             });
         }
         else if (tokenizeResponse.token) {
-            this.submitted.emit({ token: tokenizeResponse.token });
+            this.submitEvent.emit({ response: tokenizeResponse });
         }
     }
     async fillBillingForm(fields) {
         this.paymentMethodOptionsRef.fillBillingForm(fields);
     }
     render() {
-        return (h(StyledHost, { key: 'ff495ccfaf453b5efc1e09d6a3dbeae2f7056368' }, h("form", { key: '92e7ce29d3d7f12def1f83e35130de8ec3637140' }, h("fieldset", { key: 'b0e1b306f0ad87cabf04429760f9043319ea45c3' }, h("div", { key: '1176a0d441ed62522ddabf573f674903e39b17f2', class: "row gy-3" }, h("div", { key: 'c920e3759b0ae8dabda8947823831a5bac39b33a', class: "col-12" }, h("justifi-payment-method-options", { key: '1e764236818baef88ce825dbc8903f2767d2fa95', ref: (el) => (this.paymentMethodOptionsRef = el), "show-card": !this.disableCreditCard, "show-ach": !this.disableBankAccount, "show-bnpl": false, paymentMethodGroupId: this.paymentMethodGroupId, "show-saved-payment-methods": false, authToken: this.authToken, "account-id": this.accountId })), h("div", { key: 'f1cd3b08d4c558933b3da04073e527b5b0958f8b', class: "col-12" }, h(Button, { key: 'd321de173c8deaf8dcb382d14d9688cbd83ee3b9', variant: "primary", type: "submit", onClick: event => this.tokenizePaymentMethod(event), isLoading: this.isLoading, "data-testid": "submit-button" }, this.submitButtonText || 'Submit')))))));
+        return (h(StyledHost, { key: '1f0ab23a66f201b93ad60c42a0cd59a9960a5034' }, h("form", { key: 'b4b6e0b75e99505d53bdeae210a15c11e764a1e0' }, h("fieldset", { key: '8094449e89e44f99e4bf3e3517517d5ef5136974' }, h("div", { key: 'aaf859db2a1d7377b3ab37fd9bfa57ed3246ebd9', class: "row gy-3" }, h("div", { key: '3c5b24886edc5d991c5ba760e60741e01818c310', class: "col-12" }, h("justifi-payment-method-options", { key: '39ad866846a9c8ae32f9d34c1cecf812ed6d7c45', ref: (el) => (this.paymentMethodOptionsRef = el), "show-card": !this.disableCreditCard, "show-ach": !this.disableBankAccount, "show-bnpl": false, paymentMethodGroupId: this.paymentMethodGroupId, "show-saved-payment-methods": false, authToken: this.authToken, "account-id": this.accountId })), h("div", { key: '1ed6ae634f618a9fafc11961c4db5aea60f368ec', class: "col-12" }, h(Button, { key: 'eed74cc9b5a475b925986b087cd34cc2e912aae6', variant: "primary", type: "submit", onClick: event => this.tokenizePaymentMethod(event), isLoading: this.isLoading, "data-testid": "submit-button" }, this.submitButtonText || 'Submit')))))));
     }
     static get is() { return "justifi-tokenize-payment-method"; }
     static get encapsulation() { return "shadow"; }
-    static get originalStyleUrls() {
-        return {
-            "$": ["tokenize-payment-method.css"]
-        };
-    }
-    static get styleUrls() {
-        return {
-            "$": ["tokenize-payment-method.css"]
-        };
-    }
     static get properties() {
         return {
             "authToken": {
@@ -176,8 +166,8 @@ export class TokenizePaymentMethod {
     }
     static get events() {
         return [{
-                "method": "submitted",
-                "name": "submitted",
+                "method": "errorEvent",
+                "name": "error-event",
                 "bubbles": true,
                 "cancelable": true,
                 "composed": true,
@@ -186,13 +176,19 @@ export class TokenizePaymentMethod {
                     "text": ""
                 },
                 "complexType": {
-                    "original": "{ token: string }",
-                    "resolved": "{ token: string; }",
-                    "references": {}
+                    "original": "ComponentErrorEvent",
+                    "resolved": "ComponentErrorEvent",
+                    "references": {
+                        "ComponentErrorEvent": {
+                            "location": "import",
+                            "path": "../../api/ComponentEvents",
+                            "id": "src/api/ComponentEvents.ts::ComponentErrorEvent"
+                        }
+                    }
                 }
             }, {
-                "method": "errorEvent",
-                "name": "error-event",
+                "method": "submitEvent",
+                "name": "submit-event",
                 "bubbles": true,
                 "cancelable": true,
                 "composed": true,
@@ -201,13 +197,13 @@ export class TokenizePaymentMethod {
                     "text": ""
                 },
                 "complexType": {
-                    "original": "ComponentError",
-                    "resolved": "ComponentError",
+                    "original": "ComponentSubmitEvent",
+                    "resolved": "ComponentSubmitEvent",
                     "references": {
-                        "ComponentError": {
+                        "ComponentSubmitEvent": {
                             "location": "import",
-                            "path": "../../components",
-                            "id": "src/components.d.ts::ComponentError"
+                            "path": "../../api/ComponentEvents",
+                            "id": "src/api/ComponentEvents.ts::ComponentSubmitEvent"
                         }
                     }
                 }

package/dist/collection/styles/parts.js

@@ -0,0 +1,74 @@
+// Basic
+export const color = 'color';
+export const fontFamily = 'font-family';
+export const backgroundColor = 'background-color';
+// Typography
+export const text = `text ${color} ${fontFamily}`;
+export const textPrimary = `text-primary ${text}`;
+export const textSecondary = `text-secondary ${text}`;
+export const textDanger = `text-danger ${text}`;
+export const heading = `heading ${text}`;
+export const paragraph = `paragraph ${text}`;
+export const heading1 = `heading-1 ${heading}`;
+export const heading2 = `heading-2 ${heading}`;
+export const heading3 = `heading-3 ${heading}`;
+export const heading4 = `heading-4 ${heading}`;
+export const heading5 = `heading-5 ${heading}`;
+// Button
+export const button = `button ${text}`;
+export const buttonPrimary = `button-primary ${button}`;
+export const buttonSecondary = `button-secondary ${button}`;
+export const buttonDanger = `button-danger ${button}`;
+export const buttonLink = `button-link ${button}`;
+export const buttonLoading = `button-loading`;
+export const buttonDisabled = `button-disabled ${button}`;
+// Input
+export const label = `label ${text}`;
+export const input = `input ${text} ${backgroundColor}`;
+export const inputGroup = `input-group ${input}`;
+export const inputInvalid = `input-invalid ${input}`;
+export const inputDisabled = `input-disabled ${input}`;
+export const inputFocused = `input-focused ${input}`;
+export const inputInvalidAndFocused = `input-invalid-and-focused ${input}`;
+export const inputRadio = `input-radio`;
+export const inputRadioFocused = `input-radio-focused ${inputRadio}`;
+export const inputRadioChecked = `input-radio-checked ${inputRadio}`;
+export const inputRadioCheckedFocused = `input-radio-checked-focused ${inputRadio}`;
+export const inputRadioInvalid = `input-radio-invalid ${inputRadio}`;
+export const inputCheckbox = `input-checkbox ${backgroundColor}`;
+export const inputCheckboxInvalid = `input-checkbox-invalid ${inputCheckbox}`;
+export const inputCheckboxFocused = `input-checkbox-focused ${inputCheckbox}`;
+export const inputCheckboxChecked = `input-checkbox-checked ${inputCheckbox}`;
+export const inputCheckboxCheckedFocused = `input-checkbox-checked-focused ${inputCheckbox}`;
+// Alert
+export const alert = `alert ${text}`;
+export const alertDanger = `alert-danger ${alert}`;
+// Tooltip
+export const tooltip = `tooltip ${text}`;
+export const tooltipIcon = `tooltip-icon ${text}`;
+export const tooltipInner = `tooltip-inner ${text}`;
+// Card
+export const card = `card ${text} ${backgroundColor}`;
+// Table
+export const table = `table ${text} ${backgroundColor}`;
+export const tableCell = `table-cell ${text} ${backgroundColor}`;
+export const tableHeadCell = `table-head-cell ${tableCell} ${text} ${backgroundColor}`;
+export const tableCellEven = `table-cell-even ${tableCell} ${text} ${backgroundColor}`;
+export const tableCellOdd = `table-cell-odd ${tableCell} ${text} ${backgroundColor}`;
+export const getAlternateTableCellPart = (index) => index % 2 ? tableCellEven : tableCellOdd;
+export const tableEmpty = `table-empty ${text} ${backgroundColor}`;
+export const tableError = `table-error ${text} ${backgroundColor}`;
+// Loading spinner
+export const loadingSpinner = `loading-spinner`;
+// Badge
+export const badge = `badge ${text}`;
+// Dropdown-menu
+export const dropdownMenu = `dropdown-menu ${text}`;
+// Radio List Item
+export const radioListItem = `radio-list-item ${text}`;
+// Skeleton
+export const skeleton = `skeleton`;
+// Component specific
+// This allows the billing form to be hidden, for example
+// ::part(billing-form) { display: none; }
+export const billingForm = `billing-form`;

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

@@ -1,19 +1,13 @@
 import { h } from "@stencil/core";
 import { ButtonSpinner } from "./button-spinner";
+import { buttonLoading, buttonPrimary, buttonSecondary } from "../styles/parts";
 export const Button = (props, children) => {
-    const classMap = {
-        primary: 'btn btn-primary',
-        secondary: 'btn btn-secondary',
-    };
-    const exportPartMapping = {
-        primary: ['button', 'button-primary'],
-        secondary: ['button', 'button-secondary'],
+    const variantToButton = {
+        primary: buttonPrimary,
+        secondary: buttonSecondary,
     };
     const getCSSParts = () => {
-        const baseCSSParts = exportPartMapping[props.variant];
-        if (props.isLoading)
-            baseCSSParts.push('button-loading');
-        return baseCSSParts.join(' ');
+        return `${variantToButton[props.variant]} ${(props.isLoading) ? buttonLoading : ''}`;
     };
-    return (h("button", Object.assign({ class: classMap[props.variant], onClick: props.clickHandler, part: getCSSParts() }, props), props.isLoading ? ButtonSpinner() : children));
+    return (h("button", Object.assign({ class: `btn btn-${props.variant}`, onClick: props.clickHandler, part: getCSSParts() }, props), props.isLoading ? ButtonSpinner() : children));
 };

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: '486c7b71b1b4f6d3ad8a9b9042fe5bdfe0427443' }, h("style", { key: '54a5bed99c8cf367642c63650200376cc5a90142' }, `
+        return (h("div", { key: '153f64dde49d3c00975e4ab967092fe0eab2e096' }, h("style", { key: 'f3441ee39263f615a907d371e5a75be910e6ad80' }, `
           .popper-content {
             display: none;
           }
@@ -89,7 +89,7 @@ export class CustomPopper {
             display: block;
             z-index: 1030;
           }
-          `), h("div", { key: '1c4dc36300485c1c331f39998bf23127ea5e6177', class: "popper-content", ref: (el) => this.popperContentRef = el }, h("slot", { key: '9dbb8f23779595303814ef10762663b809447c32' }))));
+          `), h("div", { key: '840e5c3a19a9d57dda561971967130e8bf53518b', class: "popper-content", ref: (el) => this.popperContentRef = el }, h("slot", { key: '2b9bbfe2b4cd7bfb5ff3a6c21a99dea7e23d1124' }))));
     }
     static get is() { return "custom-popper"; }
     static get properties() {

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

@@ -1,18 +1,16 @@
-import { h } from "@stencil/core";
+import { h, Host } from "@stencil/core";
 import { ErrorState } from "./utils";
-import { StyledHost } from "../../ui-components";
 export class Details {
     constructor() {
         this.errorMessage = undefined;
     }
     render() {
-        return (h(StyledHost, { key: 'c7c725936e4987ca76781b7edc73f1b67e00f21a', exportParts: 'detail-empty-state, detail-metadata-title, detail-metadata, detail-section, detail-section-title, \n        detail-section-item-title, detail-section-item-data, detail-head, detail-title, detail-head-info' }, this.errorMessage ?
+        return (h(Host, { key: '14ab849e7b60f834d823bb6d10f8b772a1184ad4' }, this.errorMessage ?
             ErrorState(this.errorMessage)
             :
                 h("main", { class: "p-2" }, h("slot", { name: "head-info" }), h("slot", { name: 'detail-sections' }))));
     }
     static get is() { return "justifi-details"; }
-    static get encapsulation() { return "shadow"; }
     static get properties() {
         return {
             "errorMessage": {

package/dist/collection/ui-components/details/utils.js

@@ -1,11 +1,8 @@
 import { h } from "@stencil/core";
-export const LoadingState = () => (h("main", { part: "detail-loading-state", class: "p-4 d-flex justify-content-center text-center", style: { fontSize: '1.2rem' } }, h("div", { part: "detail-loading-spinner", class: "spinner-border spinner-border-sm", role: "status" }, h("span", { class: "visually-hidden" }, "Loading..."))));
-export const ErrorState = (errorMessage) => (h("main", { part: "detail-empty-state", class: "p-4 d-flex justify-content-center text-center", style: { fontSize: '1.2rem' } }, h("div", null, errorMessage)));
-export const DetailSectionTitle = (props) => [
-    h("h5", { part: "detail-section-title", class: "mt-4" }, props.sectionTitle),
-    h("hr", null),
-];
-export const DetailItem = ({ title, value, }) => title && value ? (h("div", { class: "d-table-row gap-2" }, h("span", { part: "detail-section-item-title", class: "fw-bold d-table-cell px-2" }, title), h("span", { part: "detail-section-item-data", class: "flex-1 d-table-cell px-2 text-wrap", innerHTML: value }))) : null;
-export const EntityHeadInfoItem = ({ title, value, classes, }) => (h("div", { part: "detail-head-info-item", class: `d-flex flex-column ${classes}` }, h("span", { part: "detail-head-info-item-title", class: "fw-bold border-1 border-bottom ps-2 pe-2" }, title), h("span", { part: "detail-head-info-item-data", class: "pt-2 ps-2 pe-2" }, value)));
-export const EntityHeadInfo = ({ title, slot, badge }, children) => (h("div", { slot: slot, part: "detail-head", class: "p-2" }, h("div", { class: "d-flex flex-row align-items-center gap-2 mb-2" }, h("h1", { class: "m-0", part: "detail-title" }, title), badge), h("div", { part: "detail-head-info", class: "d-flex flex-row align-items-top" }, children)));
-export const CodeBlock = ({ metadata }) => metadata && Object.keys(metadata).length ? (h("div", { class: 'mt-4' }, h("pre", { part: "detail-metadata", class: "p-2", "aria-label": "metadata content" }, h("code", null, JSON.stringify(metadata, null, 2))))) : null;
+import { heading1, heading2, text } from "../../styles/parts";
+export const ErrorState = (errorMessage) => (h("main", { class: "p-4 d-flex justify-content-center text-center", style: { fontSize: '1.2rem' } }, h("p", { part: text }, errorMessage)));
+export const DetailSectionTitle = (props) => (h("h2", { part: heading2, class: "mt-4 fs-5 border-bottom pb-3" }, props.sectionTitle));
+export const DetailItem = ({ title, value, }) => title && value ? (h("div", { class: "d-table-row gap-2" }, h("span", { class: "fw-bold d-table-cell px-2", part: text }, title), h("span", { class: "flex-1 d-table-cell px-2 text-wrap", part: text, innerHTML: value }))) : null;
+export const EntityHeadInfoItem = ({ title, value, classes, }) => (h("div", { class: `d-flex flex-column ${classes}` }, h("span", { class: "fw-bold border-1 border-bottom ps-2 pe-2", part: heading2 }, title), h("span", { class: "pt-2 ps-2 pe-2", part: text }, value)));
+export const EntityHeadInfo = ({ title, slot, badge }, children) => (h("div", { slot: slot, class: "p-2" }, h("div", { class: "d-flex flex-row align-items-center gap-2 mb-2" }, h("h1", { class: "m-0", part: heading1 }, title), badge), h("div", { class: "d-flex flex-row align-items-top", part: text }, children)));
+export const CodeBlock = ({ metadata }) => metadata && Object.keys(metadata).length ? (h("div", { class: 'mt-4' }, h("pre", { class: "p-2", "aria-label": "metadata content" }, h("code", null, JSON.stringify(metadata, null, 2))))) : null;

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

@@ -1,6 +1,7 @@
 import { h } from "@stencil/core";
 import { Button } from "../button";
 import { hasFilters } from "./utils";
+import { dropdownMenu } from "../../styles/parts";
 export class TableFiltersMenu {
     constructor() {
         this.anchorButton = undefined;
@@ -18,8 +19,11 @@ export class TableFiltersMenu {
     hide() {
         this.menu.classList.remove('show');
     }
+    componentWillLoad() {
+        this.showClearButton = hasFilters(this.params);
+    }
     render() {
-        return (h("div", { key: 'de116fd5406fcc4feb36df24f8fc3162b39567e8', class: "d-flex gap-2" }, h("div", { key: '07c7d885acc4816d28e3c2653d5e4c9a7ea42108', class: "dropdown pb-3" }, h(Button, { key: '34cee2bf49991340c4291c5014d17bfa9c3593d8', 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: '19640a1ab19bdda14398c4a76392584c6bf1e6d9', offset: [20, 10], strategy: "fixed", anchorRef: this.anchorButton, trigger: "click" }, h("form", { key: 'a72ce2a8ab9fc317236128980bd4bc9be92faf2c', class: "dropdown-menu", part: "dropdown-menu", "data-test-id": "filter-menu", ref: (el) => (this.menu = el), onSubmit: (e) => e.preventDefault() }, h("slot", { key: '008b23e2dc775ec59247df27379780d1ccdd81eb' })))), h("div", { key: '5b60c0821e4cfe5395c6eca11957e18446039cd7' }, h(Button, { key: '56d032309bdff48f6501ae6be6344860d008f481', variant: "secondary", onClick: () => this.clearParams(), hidden: !this.showClearButton, "data-test-id": "clear-filters-button" }, "Clear Filters"))));
+        return (h("div", { key: 'b50b85bc459e9f217a70c49505479944572b5daf', class: "d-flex gap-2" }, h("div", { key: 'eedc2d34795d42f10b1db7b7f163096f06b519ff', class: "dropdown pb-3" }, h(Button, { key: '97d365b9c8ac6e5f33fa98768ffa55b988c90a17', 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: 'e0f52c3aeb555de14d1e999818468debc59a9fa7', offset: [20, 10], strategy: "fixed", anchorRef: this.anchorButton, trigger: "click" }, h("form", { key: 'bd83ec6ea2949b2313078431c91c711682c5ed53', class: "dropdown-menu", part: dropdownMenu, "data-test-id": "filter-menu", ref: (el) => (this.menu = el), onSubmit: (e) => e.preventDefault() }, h("slot", { key: '08a53808fffd6f029ac83229fa86d13bacf39a7b' })))), h("div", { key: 'f28533474420ac5d80ba3ab6bb5e919ebf644779' }, h(Button, { key: 'cde26e935489d12a34758cf766bcb87296e0f5e8', 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

@@ -1,7 +1,10 @@
 import { Host, h, } from "@stencil/core";
+import { FormControlHelpText, FormControlErrorText } from "../../ui-components";
+import { inputCheckbox, inputCheckboxChecked, inputCheckboxCheckedFocused, inputCheckboxFocused, inputCheckboxInvalid, label } from "../../styles/parts";
 export class CheckboxInput {
     constructor() {
         this.handleFormControlInput = (event) => {
+            event.preventDefault();
             const target = event.target;
             const name = target.getAttribute('name');
             this.inputHandler(name, target.checked);
@@ -10,22 +13,35 @@ export class CheckboxInput {
         this.updateInput = (newValue) => {
             this.checkboxElement.checked = newValue;
         };
+        this.isFocused = false;
         this.label = undefined;
         this.name = undefined;
         this.helpText = undefined;
         this.errorText = undefined;
-        this.defaultValue = undefined;
+        this.checked = undefined;
         this.inputHandler = undefined;
         this.disabled = undefined;
     }
-    handleDefaultValueChange(newValue) {
-        this.updateInput(newValue);
-    }
-    componentDidLoad() {
-        this.updateInput(this.defaultValue);
+    get part() {
+        if (this.errorText) {
+            return inputCheckboxInvalid;
+        }
+        if (this.isFocused && this.checked) {
+            return inputCheckboxCheckedFocused;
+        }
+        if (this.isFocused) {
+            return inputCheckboxFocused;
+        }
+        if (this.checked) {
+            return inputCheckboxChecked;
+        }
+        return inputCheckbox;
     }
     render() {
-        return (h(Host, { key: '62c7e5756a185d29a941dd63a431756beed3d554', exportparts: "label,input,input-invalid" }, h("div", { key: 'db89c096aa07aecd8c5205905c26f56ac4282a3a', class: 'form-group d-flex flex-column' }, h("div", { key: '8f6c06c0150eee6284d3b2465b3aca916c2d7f83', class: "form-check" }, h("input", { key: '25b9b0a620ee3fce0f4fa4892a38b289e0a0d521', ref: el => (this.checkboxElement = el), type: "checkbox", id: this.name, name: this.name, onBlur: this.formControlBlur.emit, onInput: this.handleFormControlInput, part: `input-checkbox ${this.errorText ? 'input-checkbox-invalid' : ''}`, class: this.errorText ? 'form-check-input is-invalid' : 'form-check-input', disabled: this.disabled }), h("label", { key: '783d5dbbafeeeceab3400361eff65cd6a075f637', class: "form-check-label", htmlFor: this.name }, this.label)), h("form-control-help-text", { key: '4b129fa8360d7d305f14939d213667a9003c6b94', helpText: this.helpText, name: this.name }), h("form-control-error-text", { key: '303b12a3b51634866a4266486ac6295f5d582ab6', errorText: this.errorText, name: this.name }))));
+        return (h(Host, { key: '1aedf7dc7572040d5d1accb6fce84c42c12e2889' }, h("div", { key: '454a062fd481093d4b4a5769c3b2a79b61f07c20', class: 'form-group d-flex flex-column' }, h("div", { key: '087e692e098975b4a78ecbdfee50f183787b1f9e', class: "form-check" }, h("input", { key: 'cf71f2abd44da0cf0bed71f102af6ead74b34bf2', 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: '02ce674c833c5b2795d1d041bc1e7d9fe351f514', class: "form-check-label", htmlFor: this.name, part: label }, this.label)), h(FormControlHelpText, { key: 'aab32007a08af39b4fa4314eba5e7e2b2ff57d31', helpText: this.helpText, name: this.name }), h(FormControlErrorText, { key: 'cf906dec9c1f2763156fa0becf4389a728a14b39', errorText: this.errorText, name: this.name }))));
     }
     static get is() { return "form-control-checkbox"; }
     static get properties() {
@@ -98,7 +114,7 @@ export class CheckboxInput {
                 "attribute": "error-text",
                 "reflect": false
             },
-            "defaultValue": {
+            "checked": {
                 "type": "boolean",
                 "mutable": false,
                 "complexType": {
@@ -107,12 +123,12 @@ export class CheckboxInput {
                     "references": {}
                 },
                 "required": false,
-                "optional": true,
+                "optional": false,
                 "docs": {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "default-value",
+                "attribute": "checked",
                 "reflect": false
             },
             "inputHandler": {
@@ -149,6 +165,11 @@ export class CheckboxInput {
             }
         };
     }
+    static get states() {
+        return {
+            "isFocused": {}
+        };
+    }
     static get events() {
         return [{
                 "method": "formControlInput",
@@ -182,10 +203,4 @@ export class CheckboxInput {
                 }
             }];
     }
-    static get watchers() {
-        return [{
-                "propName": "defaultValue",
-                "methodName": "handleDefaultValueChange"
-            }];
-    }
 }

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

@@ -1,4 +1,6 @@
 import { Host, h, } from "@stencil/core";
+import { FormControlErrorText } from "../../ui-components";
+import { input, inputDisabled, inputFocused, inputInvalid, label } from "../../styles/parts";
 export class DateInput {
     constructor() {
         this.handleFormControlInput = (event) => {
@@ -6,6 +8,7 @@ export class DateInput {
             this.inputHandler(this.name, dateValue);
             this.formControlInput.emit({ name: this.name, value: dateValue });
         };
+        this.isFocused = false;
         this.name = undefined;
         this.label = undefined;
         this.inputHandler = undefined;
@@ -33,8 +36,24 @@ export class DateInput {
     updateInput(value) {
         this.dateInput.value = value;
     }
+    get part() {
+        let part = input;
+        if (this.errorText) {
+            part = inputInvalid;
+        }
+        if (this.disabled) {
+            part = inputDisabled;
+        }
+        if (this.isFocused) {
+            part = inputFocused;
+        }
+        return part;
+    }
     render() {
-        return (h(Host, { key: '29a793e97ef8cc6bd532ce6f86e31028e6a3a783', exportparts: "label,input,input-invalid" }, h("div", { key: '32487660602957a69c9cd82625bd019335e76124', class: "form-group d-flex flex-column" }, h("div", { key: '5d45a740e61f328cb0bec179117b97ea9449bc03', class: "d-flex gap-2" }, h("label", { key: 'ba01fd2ce1f8f8cfa3a0599b21c01071eb6400a0', part: "label", class: "form-label", htmlFor: this.name }, this.label), h("form-control-tooltip", { key: 'aeaaf6caa4b4999ec1ecd419f4699aceb72d6cb1', helpText: this.helpText })), h("input", { key: 'af713ff971ca5b8c046199ff1252db40649a8f94', type: this.showTime ? 'datetime-local' : 'date', ref: el => (this.dateInput = el), id: this.name, name: this.name, onBlur: this.formControlBlur.emit, onInput: this.handleFormControlInput, part: `input ${this.errorText && 'input-invalid'}`, class: this.errorText ? 'form-control is-invalid' : 'form-control', disabled: this.disabled, max: this.maxDate }), h("form-control-error-text", { key: '02338706e4d55074014d8e177c27c002181a93e6', errorText: this.errorText, name: this.name }))));
+        return (h(Host, { key: '238d6dc419c36dafa07e03e0b16dc8e18c620894' }, h("div", { key: 'e4dec93ad672ad2e8599851e0fc541b5a4fb21a0', class: "form-group d-flex flex-column" }, h("div", { key: '51cf231ffd7f8d7253ee67d85211d6e01b082ae9', class: "d-flex gap-2" }, h("label", { key: '23b2f623f5d019b87150061f848aebd32f54c164', part: label, class: "form-label", htmlFor: this.name }, this.label), h("form-control-tooltip", { key: '3bd071cb30d9b52a60a1210bf49b96f2283f80dd', helpText: this.helpText })), h("input", { key: '10dc76f79b4cdc831195ab037369d9be10e6108b', 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: 'e06413cc8b9d57f1a89efad44c3b93c82078f5b6', errorText: this.errorText, name: this.name }))));
     }
     static get is() { return "form-control-date"; }
     static get properties() {
@@ -193,6 +212,11 @@ export class DateInput {
             }
         };
     }
+    static get states() {
+        return {
+            "isFocused": {}
+        };
+    }
     static get events() {
         return [{
                 "method": "formControlInput",