@justifi/webcomponents 5.5.0 → 5.6.1

package/dist/collection/styles/parts.js

@@ -53,13 +53,20 @@ export const tooltipInner = `tooltip-inner ${text}`;
 export const card = `card ${text} ${backgroundColor}`;
 // Table
 export const table = `table ${text} ${backgroundColor}`;
+export const tableRow = `table-row ${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 tableHeadCell = `table-head-cell ${tableCell}`;
+export const tableCellEven = `table-cell-even ${tableCell}`;
+export const tableCellOdd = `table-cell-odd ${tableCell}`;
 export const getAlternateTableCellPart = (index) => index % 2 ? tableCellEven : tableCellOdd;
 export const tableEmpty = `table-empty ${text} ${backgroundColor}`;
 export const tableError = `table-error ${text} ${backgroundColor}`;
+// Pagination
+export const paginationItem = `pagination-item ${text} ${backgroundColor}`;
+export const paginationItemText = `pagination-item-text ${text}`;
+export const paginationItemIcon = `pagination-item-icon ${text}`;
+export const paginationItemIconNext = `pagination-item-icon-next ${paginationItemIcon}`;
+export const paginationItemIconPrevious = `pagination-item-icon-previous ${paginationItemIcon}`;
 // Loading spinner
 export const loadingSpinner = `loading-spinner`;
 // Badge

package/dist/collection/ui-components/custom-popper/custom-popper.js

@@ -80,7 +80,7 @@ export class CustomPopper {
         this.hideEvent.emit();
     }
     render() {
-        return (h("div", { key: '93ef772e6f341891914bc0d105103268819025bb' }, h("style", { key: '190ce08d03bdac571064457b8c88862957eb29c9' }, `
+        return (h("div", { key: '6b09b58218fe286c9b3b2a707cca905c8aa10e98' }, h("style", { key: '7a8d3f88d964a78945f8f129a1a2b7a29b174678' }, `
           .popper-content {
             display: none;
           }
@@ -88,7 +88,7 @@ export class CustomPopper {
             display: block;
             z-index: 1030;
           }
-          `), h("div", { key: '81f42aa1231eee2f8df55958bddc59c0c517e4f1', class: "popper-content", ref: (el) => this.popperContentRef = el }, h("slot", { key: 'bc13e2c3da97458ceb210719b68547f6944f5437' }))));
+          `), h("div", { key: 'f96cf490f7d53613156d33ee315f9c7de415d087', class: "popper-content", ref: (el) => this.popperContentRef = el }, h("slot", { key: 'a9e7ed012d4bb6d5c7f16fad4aacf619304717a7' }))));
     }
     static get is() { return "custom-popper"; }
     static get properties() {

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

@@ -19,7 +19,7 @@ export class TableFiltersMenu {
         this.showClearButton = hasFilters(this.params);
     }
     render() {
-        return (h("div", { key: '2f32310a56d15e05ea3d67f3ba0ebfcceeac3cd5', class: "d-flex gap-2" }, h("div", { key: '5c4c2eb818718e48671715444669bc35d6a8bdd0', class: "dropdown pb-3" }, h(Button, { key: 'b9a925e818f08ae06fb9b01cb1dc2952ea80090b', 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: 'faf3cb404faec7b7ad66766ded250553b59cf554', offset: [20, 10], strategy: "fixed", anchorRef: this.anchorButton, trigger: "click" }, h("form", { key: '7b246ab892bf311ace647ca3708252ecd9293088', class: "dropdown-menu", part: dropdownMenu, "data-test-id": "filter-menu", ref: (el) => (this.menu = el), onSubmit: (e) => e.preventDefault() }, h("slot", { key: 'f1f260d783d47941f0c6b9b90d4b028188b27ec8' })))), h("div", { key: '1eb9a2abd1b4194472474e6d7ac926662019a5e6' }, h(Button, { key: '02e1cd5bc0c043deae704edd65ded465dd5ef9bf', variant: "secondary", onClick: () => this.clearParams(), hidden: !this.showClearButton, "data-test-id": "clear-filters-button" }, "Clear Filters"))));
+        return (h("div", { key: 'b55be2aa2f9d4677989da12bb114f620a9ec2e45', class: "d-flex gap-2" }, h("div", { key: 'dffb2be68ead3abb60a8740869e48bb48bbf558c', class: "dropdown pb-3" }, h(Button, { key: '2e7b2d3afc80963abfe9c8c2690a61b911a1b747', 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: '9e2b1b988bc5440f18d26c5b8402f5e30e73cdad', offset: [20, 10], strategy: "fixed", anchorRef: this.anchorButton, trigger: "click" }, h("form", { key: '573161a7515d1b16665138ba739133379b9b6850', class: "dropdown-menu", part: dropdownMenu, "data-test-id": "filter-menu", ref: (el) => (this.menu = el), onSubmit: (e) => e.preventDefault() }, h("slot", { key: '9597e79f125e1e41c343fa3d2d583b5cf7ab9c31' })))), h("div", { key: '67ed29ac8e10f3ae1380514ae1a1e1e8aed7d9b6' }, h(Button, { key: '9b3dc6176c11226e82ecb1f9f88705ad40bf6e32', 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

@@ -31,10 +31,10 @@ export class CheckboxInput {
         return inputCheckbox;
     }
     render() {
-        return (h(Host, { key: '51ebd9d5b1eba8b7eba8f9c89551b9cbc754d706' }, h("div", { key: '5a8c60a4f259adbd6d78223c538d39ed3865a799', class: 'form-group d-flex flex-column' }, h("div", { key: '36f5b7b0ee0371990a5243c0cf0209a04085c66d', class: "form-check" }, h("input", { key: 'b85a3a2e09cea7b5ac9462ffa2b425524218d590', ref: el => (this.checkboxElement = el), type: "checkbox", id: this.name, name: this.name, onFocus: () => this.isFocused = true, onBlur: () => {
+        return (h(Host, { key: '35f96a2b36843476ec27cbf07b15e366a703fc22' }, h("div", { key: '63ca51116c2a555df16e4c20db527580f22fc14c', class: 'form-group d-flex flex-column' }, h("div", { key: '5bbd306560eb1a1ef5664cef495a67c19f44864d', class: "form-check" }, h("input", { key: 'c4dbb352c9f4e3cbb74d2a6170cb4aab33e36924', 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: '4493c4c522a46ae995b2fdeeaab15487e273bf09', class: "form-check-label", htmlFor: this.name, part: label }, this.label)), h(FormControlHelpText, { key: '5fbddaeefb1e1d1ed5e088cf64edfb18f51cda72', helpText: this.helpText, name: this.name }), h(FormControlErrorText, { key: '7d2f579ef1ba9042096d6c29b8570d5259a27bc0', errorText: this.errorText, name: this.name }))));
+            }, 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: '7866568942027045f761a197b7b43050911aebbd', class: "form-check-label", htmlFor: this.name, part: label }, this.label)), h(FormControlHelpText, { key: '30bfa6ea4c6e0cc5edd3ff3c06d51b71bca33fb3', helpText: this.helpText, name: this.name }), h(FormControlErrorText, { key: 'd054d27b35ba312c6cfd217f4c192ad5e42667fb', errorText: this.errorText, name: this.name }))));
     }
     static get is() { return "form-control-checkbox"; }
     static get properties() {

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

@@ -42,10 +42,10 @@ export class DateInput {
         return part;
     }
     render() {
-        return (h(Host, { key: '587ee2fa01634a32f985ab19aaf4f62d010ce10c' }, h("div", { key: '95958ed36ccb85a5a4d6c7db452e924c5000924c', class: "form-group d-flex flex-column" }, h("div", { key: 'ea8a18b68dcafb62c46543c0beea80321e67b990', class: "d-flex gap-2" }, h("label", { key: '78a4be7c16a0f1d6a6d02d5c6fd17ccc25d727f3', part: label, class: "form-label", htmlFor: this.name }, this.label), h("form-control-tooltip", { key: '85306bcf45e676a668f9a6b78deda4c5decc9831', helpText: this.helpText })), h("input", { key: '8526227900d9e9abc11635ffc8598c53c6db397a', type: this.showTime ? 'datetime-local' : 'date', ref: el => (this.dateInput = el), id: this.name, name: this.name, onFocus: () => this.isFocused = true, onBlur: () => {
+        return (h(Host, { key: '4a62a0efa2d9034ed56996d0f734ef89ae13ef1f' }, h("div", { key: 'f6eb5b949eac993cdb0b7d936e82f17097e91739', class: "form-group d-flex flex-column" }, h("div", { key: '0171bcc477b35886986abd2879fa96dd3565cc1a', class: "d-flex gap-2" }, h("label", { key: '7184b2172dcfc7f6fe9f4e1ca2b4769e64f1e825', part: label, class: "form-label", htmlFor: this.name }, this.label), h("form-control-tooltip", { key: '04714a933a613dc21871fdce95641244d64776a5', helpText: this.helpText })), h("input", { key: 'b1da6e269d7d5d65828236c1b3c4c09d91adba07', 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: '341c4283c126602dc25cd5beeec7c11b26e13b18', errorText: this.errorText, name: this.name }))));
+            }, onInput: this.handleFormControlInput, part: this.part, class: this.errorText ? 'form-control is-invalid' : 'form-control', disabled: this.disabled, max: this.maxDate }), h(FormControlErrorText, { key: '7d52e845976c61f3af1a3a36e86bf4bb3b0e2228', errorText: this.errorText, name: this.name }))));
     }
     static get is() { return "form-control-date"; }
     static get properties() {

package/dist/collection/ui-components/form/form-control-file-v2.js

@@ -2,7 +2,7 @@ import { Host, h, } from "@stencil/core";
 import { FormControlErrorText } from "./form-helpers/form-control-error-text";
 export class FileInput {
     render() {
-        return (h(Host, { key: 'f3efb1623170f761f4650d0e383ad8f1416f1324', exportparts: "label,input,input-invalid" }, h("div", { key: '92139fdd8fed82196a249ab0e33b1e22fcf078e7', class: "form-group d-flex flex-column" }, h("div", { key: 'e7de120a2d934275dec4f75aa6a7d5d33cf2fbff', class: "d-flex align-items-start gap-2" }, h("label", { key: '01c0fbea56bdbcc0f26f3339037c3be13937ee68', part: "label", class: "form-label", htmlFor: this.name }, this.label), h("form-control-tooltip", { key: '7d9c68d9f1b60236603d799b91be3e731388260c', helpText: this.helpText })), h("input", { key: '330170f3c80bb09c4fcd079c8012a657274c770f', type: "file", name: this.name, part: `input ${this.errorText ? "input-invalid " : ""}${this.disabled ? "input-disabled" : ""}`, class: this.errorText ? "form-control is-invalid" : "form-control", multiple: this.multiple, disabled: this.disabled, onBlur: () => this.formControlBlur.emit(), onChange: () => this.errorText = "" }), h(FormControlErrorText, { key: '63a6395fe3523c6db034b891e95d9b346fc51491', errorText: this.errorText, name: this.name }))));
+        return (h(Host, { key: '43f71b688c9616fc26de9aa0a1b98854618583da', exportparts: "label,input,input-invalid" }, h("div", { key: '61b59530384248b2d28fd2321b0bee42f4d325f8', class: "form-group d-flex flex-column" }, h("div", { key: '7a9d9d9dc001ec45c7cd983eb7e63d68ab7ece59', class: "d-flex align-items-start gap-2" }, h("label", { key: '624d8ec508af0091b0a0b9a18a7b5d034a29d6f6', part: "label", class: "form-label", htmlFor: this.name }, this.label), h("form-control-tooltip", { key: '81548d28fbc003b728e460cde95513faafbb6303', helpText: this.helpText })), h("input", { key: 'f307a0fa51af2749b16c65c470a2b33ce43bc4fd', type: "file", name: this.name, part: `input ${this.errorText ? "input-invalid " : ""}${this.disabled ? "input-disabled" : ""}`, class: this.errorText ? "form-control is-invalid" : "form-control", multiple: this.multiple, disabled: this.disabled, onBlur: () => this.formControlBlur.emit(), onChange: () => this.errorText = "" }), h(FormControlErrorText, { key: '78db2911b35525b842029a34a7b9efd5681fbde3', errorText: this.errorText, name: this.name }))));
     }
     static get is() { return "form-control-file-v2"; }
     static get properties() {

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

@@ -37,10 +37,10 @@ export class FileInput {
         return part;
     }
     render() {
-        return (h(Host, { key: 'a5ef7adbe7efb704ab17ea2bf7e72506a16383af' }, h("div", { key: '689a358ae4b0e6d452001b1966d8e159d0870e5b', class: "form-group d-flex flex-column" }, h("div", { key: '04a77efbf4584dee1d66b93d5d7ff4859a95909c', class: "d-flex align-items-start gap-2" }, h("label", { key: '5c529a39de6862e5c6e22ccf0eb5384360b79e7a', part: label, class: "form-label", htmlFor: this.name }, this.label), h("form-control-tooltip", { key: 'd9efcdc856f685aeed2fd23bbfa6ed28380d8373', helpText: this.helpText })), h("input", { key: '52f2ee7437bfd30f5b96447a95d1e1d06e7f49ca', ref: (el) => this.fileInput = el, type: "file", name: this.name, part: this.part, class: this.errorText ? "form-control is-invalid" : "form-control", multiple: this.multiple, disabled: this.disabled, onChange: this.changeHandler, onInput: this.handleFormControlInput, onFocus: () => this.isFocused = true, onBlur: () => {
+        return (h(Host, { key: 'c4eb924b2def951a74f6b5aeb036a405537e824c' }, h("div", { key: '3b8bcb605f8addc7188fa82e5ef91c437c17d5f0', class: "form-group d-flex flex-column" }, h("div", { key: '7f0e0cb4cb6dd1f75ddcd054843d2b1663b8db64', class: "d-flex align-items-start gap-2" }, h("label", { key: '73b1eca3f6f175c2832f76be825d97f708aed9bf', part: label, class: "form-label", htmlFor: this.name }, this.label), h("form-control-tooltip", { key: '389ee4bcc680a25991d048ba3839104368c26c15', helpText: this.helpText })), h("input", { key: 'e1c713e5600dace0d44ea5f640bd60bf9d3ec0bd', ref: (el) => this.fileInput = el, type: "file", name: this.name, part: this.part, class: this.errorText ? "form-control is-invalid" : "form-control", multiple: this.multiple, disabled: this.disabled, onChange: this.changeHandler, onInput: this.handleFormControlInput, onFocus: () => this.isFocused = true, onBlur: () => {
                 this.isFocused = false;
                 this.formControlBlur.emit();
-            } }), h(FormControlErrorText, { key: 'e6c0b986edb44f7eaa89f800e698b52be61b9564', errorText: this.errorText, name: this.name }))));
+            } }), h(FormControlErrorText, { key: '64828199873b08ab92c5418a1a1d5493bb41d947', errorText: this.errorText, name: this.name }))));
     }
     static get is() { return "form-control-file"; }
     static get properties() {

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

@@ -42,10 +42,10 @@ export class MonetaryInput {
         return input;
     }
     render() {
-        return (h(Host, { key: '8b3cf645e2fda5517228aa9035ba1e50d177fbb9' }, h("div", { key: 'ea6f04d062fd71586a7b06d1eab7d06b5faf7349', class: "form-group d-flex flex-column" }, h("label", { key: 'ef58c69519078736f7031b2426ee5c050b783e31', part: label, class: "form-label", htmlFor: this.name }, this.label), h(FormControlHelpText, { key: 'b4fc4c864c0cc6bda1af39df3a96b4180ab1d5dc', name: this.name, helpText: this.helpText }), h("div", { key: '5548f7cd429d5053c1075f7d47b102f2e9957b12', class: "input-group" }, h("span", { key: 'fd8718d8dba061fc971b60ec6a8ef02e8f3b4dcf', class: "input-group-text", part: inputAdornment }, "$"), h("input", { key: '8211f7874fc320d30aef8016316497ac4a790714', ref: el => this.formControl = el, id: this.name, name: this.name, onFocus: () => this.isFocused = true, onBlur: () => {
+        return (h(Host, { key: '9937b02bb7795d2dc7eea6d278b54c841ebe72b9' }, h("div", { key: '2987c8bdfc31eb5e9e195e5ea7af3d01f884e4d9', class: "form-group d-flex flex-column" }, h("label", { key: '1ab3fe1ab8a444201849faf571198da0ae2aedd1', part: label, class: "form-label", htmlFor: this.name }, this.label), h(FormControlHelpText, { key: '928c65b28f66c2b8ca7b926c51afc6ec50739468', name: this.name, helpText: this.helpText }), h("div", { key: '941e0ee7ab81877f0169ac3fea17639e1f48aea0', class: "input-group" }, h("span", { key: '565be53bce113e5ac7d1c9118bb007a9aaccf337', class: "input-group-text", part: inputAdornment }, "$"), h("input", { key: '2773f2a97aa5af880f1754797f55d70a2c4967c6', ref: el => this.formControl = el, id: this.name, name: this.name, onFocus: () => this.isFocused = true, onBlur: () => {
                 this.isFocused = false;
                 this.formControlBlur.emit();
-            }, onInput: (event) => this.updateInput(event.target.value), onKeyDown: this.keyDownHandler, onPaste: this.keyDownHandler, maxLength: this.maxLength, part: this.inputPart, class: this.errorText ? "form-control is-invalid" : "form-control", type: "text", disabled: this.disabled })), h(FormControlErrorText, { key: '9d05b3af9472e96506ed31f4517f965d9d69aad1', errorText: this.errorText, name: this.name }))));
+            }, onInput: (event) => this.updateInput(event.target.value), onKeyDown: this.keyDownHandler, onPaste: this.keyDownHandler, maxLength: this.maxLength, part: this.inputPart, class: this.errorText ? "form-control is-invalid" : "form-control", type: "text", disabled: this.disabled })), h(FormControlErrorText, { key: 'aabcd3578d102b0ca10e7ad52ede44949207ac1e', errorText: this.errorText, name: this.name }))));
     }
     static get is() { return "form-control-monetary"; }
     static get properties() {

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

@@ -59,10 +59,10 @@ export class NumberInputMasked {
         return input;
     }
     render() {
-        return (h(Host, { key: 'def707151d5c2148cb4cdb0155f50614d6711d66' }, h("div", { key: 'be62a6e5f38555a2a39cda95ff6f28707d6cb201', class: "form-group d-flex flex-column" }, h("div", { key: '652eab8e66e11ce243a9f7de4ff580880add23e7', class: "d-flex align-items-start gap-2" }, h("label", { key: 'a9ceec79615fe2798a3dc1ff902750627c113c9f', part: label, class: "form-label", htmlFor: this.name }, this.label), h("form-control-tooltip", { key: 'e5df09204f853fad1fc2f244c3203c765fec43fa', helpText: this.helpText })), h("input", { key: 'a58e3f25824301bf363675eef342598823c2be45', ref: el => (this.textInput = el), id: this.name, name: this.name, onFocus: () => (this.isFocused = true), onBlur: () => {
+        return (h(Host, { key: '92075699e755e1a0b07984638ee05ddbe7695991' }, h("div", { key: 'cb5147764d5252983dd7b9a7a6c5925a09214c55', class: "form-group d-flex flex-column" }, h("div", { key: '3f4203b0d73d9255c34148a2f700f894bab103c8', class: "d-flex align-items-start gap-2" }, h("label", { key: '52cde3a5b6e806e4ed5e730aba0bc1c80bbdda71', part: label, class: "form-label", htmlFor: this.name }, this.label), h("form-control-tooltip", { key: '1ac4b73d1ead561376dc7134a6d40948c44ae99e', helpText: this.helpText })), h("input", { key: '33403e3ee8d599f071738590438eae682ceaa58d', ref: el => (this.textInput = 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', type: "text", disabled: this.disabled }), h(FormControlErrorText, { key: '0e0856e56e86bbce3fd862d566261ebd35662317', errorText: this.errorText, name: this.name }))));
+            }, onInput: this.handleFormControlInput, part: this.part, class: this.errorText ? 'form-control is-invalid' : 'form-control', type: "text", disabled: this.disabled }), h(FormControlErrorText, { key: '4c2a4adbd03886ec4c84f65f2824ff8481eefbab', errorText: this.errorText, name: this.name }))));
     }
     static get is() { return "form-control-number-masked"; }
     static get properties() {

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

@@ -36,10 +36,10 @@ export class NumberInput {
         return input;
     }
     render() {
-        return (h(Host, { key: 'f14f19bb739fd347475375686f710d6ab296c9a8' }, h("div", { key: '734439793b5eb42cdba09a1b665c8e78c6265138', class: 'form-group d-flex flex-column' }, h("label", { key: 'bd8964f5848f960a7f9577c64965066724dc4021', part: label, class: "form-label", htmlFor: this.name }, this.label), h("input", { key: '20c603b04d5d9dde1fd65ef1915a9be5cc449921', id: this.name, name: this.name, onFocus: () => this.isFocused = true, onBlur: () => {
+        return (h(Host, { key: 'c2372e4ec5b411e46f661de978a2000b9f29b62a' }, h("div", { key: '2104bd311b0e435f08b44e35fcbcc0d272b1a186', class: 'form-group d-flex flex-column' }, h("label", { key: '87ae4bfabbd40a7f99183e8c915489cca8fd185c', part: label, class: "form-label", htmlFor: this.name }, this.label), h("input", { key: '2a0114aa80b400dc972bb85e54adec20422f0892', 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', type: "number", disabled: this.disabled }), h(FormControlHelpText, { key: 'c332d6660a22e966e06f91468c841d390d4ac502', helpText: this.helpText, name: this.name }), h(FormControlErrorText, { key: '7c7087338169768ed86c7a41ba30b5d8407eac7a', errorText: this.errorText, name: this.name }))));
+            }, onInput: this.handleFormControlInput, part: this.part, class: this.errorText ? 'form-control is-invalid' : 'form-control', type: "number", disabled: this.disabled }), h(FormControlHelpText, { key: '058e65722ece48e6fdd3606aceb3ee7ac83fdd82', helpText: this.helpText, name: this.name }), h(FormControlErrorText, { key: 'b23bd9dc7a2244c4e6038e899b0e31841dc0b7e2', errorText: this.errorText, name: this.name }))));
     }
     static get is() { return "form-control-number"; }
     static get properties() {

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

@@ -26,10 +26,10 @@ export class RadioInput {
         return inputRadio;
     }
     render() {
-        return (h(Host, { key: 'f64818218ad7948cbf10584441a9fe1fc168a81d', class: 'form-group d-flex flex-column' }, h("div", { key: 'e16491d161f65e1d3b2ffa00e94d77ddc68745a8', class: "form-check" }, h("input", { key: '74ef42c720891c97a9ca22828999a93bebea6733', ref: el => (this.radioElement = el), type: "radio", id: `${this.name}-${this.value}`, name: this.name, onFocus: () => this.isFocused = true, onBlur: () => {
+        return (h(Host, { key: '166319dccb5ae267003559c0096db283b9351b79', class: 'form-group d-flex flex-column' }, h("div", { key: '4b2cbf79dd56e20b263520a5baf1490c563300ea', class: "form-check" }, h("input", { key: 'd9301f429db86d196c277a6a01f338077e744bd9', ref: el => (this.radioElement = el), type: "radio", id: `${this.name}-${this.value}`, name: this.name, onFocus: () => this.isFocused = true, onBlur: () => {
                 this.isFocused = false;
                 this.formControlBlur.emit();
-            }, onChange: this.handleFormControlInput, part: this.part, class: this.errorText ? 'form-check-input is-invalid' : 'form-check-input', disabled: this.disabled, value: this.value, checked: this.checked }), h("label", { key: '2d7a743ea02759dd39257de8c9abd89ed1b67a71', class: "form-check-label", htmlFor: `${this.name}-${this.value}`, part: label }, this.label)), h("form-control-help-text", { key: 'b9326e463116d081f65dee449c7c437098d78533', helpText: this.helpText, name: this.name }), h("form-control-error-text", { key: '4bc1eb8e78083d6dd81ee2b6cd523a29fb13bfa0', errorText: this.errorText, name: this.name })));
+            }, onChange: this.handleFormControlInput, part: this.part, class: this.errorText ? 'form-check-input is-invalid' : 'form-check-input', disabled: this.disabled, value: this.value, checked: this.checked }), h("label", { key: 'b3bac2e39121baa8644d33b4725f9d81280f9416', class: "form-check-label", htmlFor: `${this.name}-${this.value}`, part: label }, this.label)), h("form-control-help-text", { key: '0ddef812b79bea7ab04e6d195c9fa184b6e05661', helpText: this.helpText, name: this.name }), h("form-control-error-text", { key: '036765b45c0e73232acbb405fe9473b31fba29ca', errorText: this.errorText, name: this.name })));
     }
     static get is() { return "form-control-radio"; }
     static get properties() {

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

@@ -35,10 +35,10 @@ export class SelectInput {
     }
     render() {
         var _a;
-        return (h(Host, { key: '35a1bdaf0e3afc2abc6b9c017534ff195b2fb22b' }, h("div", { key: '1a8bfb04cf91d414baf545feb200d9b77ffbfd44', class: "form-group d-flex flex-column" }, h("div", { key: 'ed7855bf66a29de36e0ef89be041dcc808bc4b17', class: "d-flex align-items-start gap-2" }, h("label", { key: '5d7a7191e4b021b6c37b16565b1e6f18f70b39d2', part: label, class: "form-label", htmlFor: this.name }, this.label), h("form-control-tooltip", { key: 'c449d19d68a4751bab7def93e8bace73702955c6', helpText: this.helpText })), h("select", { key: '3c3b1066af005d6705ec9bd2bbed48956dba0222', ref: el => (this.selectElement = el), id: this.name, name: this.name, onFocus: () => this.isFocused = true, onBlur: () => {
+        return (h(Host, { key: 'f55283c73225466b10cec78e6e5ff1c268142d1b' }, h("div", { key: '48beb377ca664b867598f8e472a3bb4825aecf9b', class: "form-group d-flex flex-column" }, h("div", { key: '13debfb6a725d7f247eb5601e3361a3964b826e9', class: "d-flex align-items-start gap-2" }, h("label", { key: '15ac64fb03a5c1cb8f55c18bd7eb41d66328e599', part: label, class: "form-label", htmlFor: this.name }, this.label), h("form-control-tooltip", { key: '3d8b43ed6e997234f7c64daf41b2286bec93340e', helpText: this.helpText })), h("select", { key: '1c3eb5699a0b76c694a02fe50e8070483b2960e6', 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: '366ae472571ad3be5ca1f38a688aaf22c7afb74d', 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: 'd223fd1fad44de99812b0e3a3429e3931b798c2c', errorText: this.errorText, name: this.name }))));
     }
     static get is() { return "form-control-select"; }
     static get properties() {

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

@@ -36,10 +36,10 @@ export class TextInput {
         return input;
     }
     render() {
-        return (h(Host, { key: '9db3238be157235a3fafb0405fb27dff7d2e6f1f' }, h("div", { key: '3ed4b9e3daa689e110e32b9898bcc9f740b5c135', class: "form-group d-flex flex-column" }, h("div", { key: 'd73c83b22711d5665c207d13e901e8aab81b7f7f', class: "d-flex align-items-start gap-2" }, h("label", { key: '28e6b67366ed032ad53df3fc1a24e6f5ebc5a71f', part: label, class: "form-label", htmlFor: this.name }, this.label), h("form-control-tooltip", { key: '26a1e5e1fe37f6dc73cddb17a20d0d1364aa6db5', helpText: this.helpText })), h("input", { key: '5bb865860cfda43f094dda182d59c523360499a6', id: this.name, name: this.name, onFocus: () => this.isFocused = true, onBlur: () => {
+        return (h(Host, { key: '1b48bf6cbd4ef2b115c7d070310a625f1dfbe814' }, h("div", { key: '2c814160dc94ba70d0a75551ba5c95ba90a011e4', class: "form-group d-flex flex-column" }, h("div", { key: '3d40c1b9f590b2275f43fb16fa4c6d0986760f9a', class: "d-flex align-items-start gap-2" }, h("label", { key: '51ec736c062308443301decbc8c58a4912a55264', part: label, class: "form-label", htmlFor: this.name }, this.label), h("form-control-tooltip", { key: '1266b937707fbf83666c61ce6fca593f02d45b18', helpText: this.helpText })), h("input", { key: 'd70668313e3240e998b9c890ef7ab2fb47cb3552', 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: '38a7df55036ea06595492911598c096afbd10dd9', 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: 'e7b268ed1c6c638b319f01b9a211d5bbc930d2ef', errorText: this.errorText, name: this.name }))));
     }
     static get is() { return "form-control-text"; }
     static get properties() {

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

@@ -38,10 +38,10 @@ export class TextInput {
         return input;
     }
     render() {
-        return (h(Host, { key: '81fa5313b9de98ee8fdcce6638a82a48324f8ac0' }, h("div", { key: '1b4c84a80662a5bce8f44b74793f50a2552226fa', class: "form-group d-flex flex-column" }, h("label", { key: '75806dd452bf90accd45b7986335fdcefad8d242', part: label, class: "form-label", htmlFor: this.name }, this.label), h("textarea", { key: 'fbdb45b580457a6718d1be6cca605481da4af6c2', id: this.name, name: this.name, onFocus: () => this.isFocused = true, onBlur: () => {
+        return (h(Host, { key: '8036cca60e80d20316c602a4b4e975fdaf216878' }, h("div", { key: '400a24d0fdd5305f033428c7e3d4fd1d70e1a6c2', class: "form-group d-flex flex-column" }, h("label", { key: '8a501e7d0610489e6825a610f6203ced59e87a83', part: label, class: "form-label", htmlFor: this.name }, this.label), h("textarea", { key: 'd360db0694aa4181b1e158909897f2ffcc3be962', 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: '84e31bba3004fd30e156b3ca31809830be3afa35', helpText: this.helpText, name: this.name }), h("form-control-error-text", { key: '3f0acdb21fde23cd48f8fab9b5a3a379e9e864ad', 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: '6b1941ef4a7a6b2f97c1d24c4047a4ddf0df4006', helpText: this.helpText, name: this.name }), h("form-control-error-text", { key: '5dbfb0d0b25ea1e1af7ad7d034853467962c1bf3', errorText: this.errorText, name: this.name }))));
     }
     static get is() { return "form-control-textarea"; }
     static get properties() {

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

@@ -73,7 +73,7 @@ export class HiddenInput {
         return input;
     }
     render() {
-        return (h(Host, { key: '04cbd78b739016b2a97a37a35df53bed83184e3d' }, h("input", { key: '6266b0dcfeeb13bd522fdd46b854300ccbadda4d', 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: '170a3d6232e5ecee555da05387d127b56b07f7df' }, h("input", { key: '8acef653371ebbe45c624f8ea233b9c9c6c40714', 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: 'b3e863bb8ddced5c0f9493915c9fce9d80d8c567', class: "form-group d-flex flex-column" }, h("div", { key: '20f09bbfad447e157594beade6a081b2df7c19ba', style: {
+        return (h(Host, { key: 'a5f275ef30181f08abf56b7d7967cb8fe8062890', class: "form-group d-flex flex-column" }, h("div", { key: 'b3c1f25b51b2780008a976545722b8ecc570bc36', style: {
                 visibility: this.iframeLoaded ? 'visible' : 'hidden',
                 height: this.iframeLoaded ? 'auto' : '0',
-            } }, h("label", { key: '9a85897b5ffd9ea350a59f33f08bd82fb94a2666', class: "form-label", htmlFor: "", part: label }, this.label || ''), h("div", { key: 'd2e01fc5b13b7a5a74eaf56a9825297545a7cd84', 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: '108f8164f00104f43e67f6b9c1cfcbc1a3ba077f', id: this.inputId, name: this.inputId, src: `${this.iframeOrigin}?${this.urlParams}`, ref: el => {
+            } }, h("label", { key: '6df0b61a71bfe35981bd91f14a28e55d85fc3d43', class: "form-label", htmlFor: "", part: label }, this.label || ''), h("div", { key: '759f070e743795d9e92ee10389157cc8946aba51', 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: 'def8ba2e7721262374e8ff101edc4b495ecad24a', 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: 'a3e141a71221328cd341313be7ceb784846ef177', errorText: this.errorText, name: this.inputId }))));
+            } })), h(FormControlErrorText, { key: '4d4203df343a2b0c0f4b9fcbfd841d30d5939612', errorText: this.errorText, name: this.inputId }))));
     }
     static get is() { return "iframe-input"; }
     static get properties() {

package/dist/collection/ui-components/pagination-menu/pagination-menu.js

@@ -1,19 +1,19 @@
 import { h, Host } from "@stencil/core";
 import { ExtendedPagingDefaults } from "../../api/Pagination";
-import { buttonDisabled, buttonLink, } from "../../styles/parts";
+import { buttonDisabled, buttonLink, paginationItemIconNext, paginationItemIconPrevious, paginationItemText } from "../../styles/parts";
 export class PaginationMenu {
     constructor() {
         this.paging = ExtendedPagingDefaults;
         this.params = {};
     }
     render() {
-        return (h(Host, { key: '7a4cfcfa7d9329e8d4026cd6bdc15c3251f004d6' }, h("nav", { key: '203b5ffeb3f4a167aa9448ac6075fd7a1ac15ef7', "aria-label": "Table pagination", class: "d-flex justify-content-end gap-3" }, h("ul", { key: 'e302f939560131ade67b0f9d4135fa04ff485d09', class: "pagination m-0" }, h("li", { key: 'b3e2ba7b66e5de597a3233ee036d4d1ef2930689', class: `page-item ${this.paging.has_previous ? '' : ' disabled'}` }, h("a", { key: '1f358b34fbaa7f140c1ee15ef6ee8d6f9b87407f', href: "#", class: "page-link", onClick: (e) => {
+        return (h(Host, { key: 'f34109c682d25608ec0443c87677f1be2fe282a0' }, h("nav", { key: '4193a8d85e3e247df506918ebc1860816ae56739', "aria-label": "Table pagination", class: "d-flex justify-content-end gap-3" }, h("ul", { key: 'd69181b137ea096d505dffd8592f5983abd651c5', class: "pagination m-0" }, h("li", { key: '26948939a517b7d5674d4100b82cb8bfd23197d1', class: `page-item ${this.paging.has_previous ? '' : ' disabled'}` }, h("button", { key: '05946ad1aa69a13c63088d85bb594e7bbe4859b2', class: "page-link", onClick: (e) => {
                 e.preventDefault();
                 this.paging.handleClickPrevious(this.paging.start_cursor);
-            }, part: this.paging.has_previous ? buttonLink : buttonDisabled }, h("span", { key: 'daffe0c0ffb7265cd769bbf27fef42c37e86300d', class: "me-1" }, "\u00AB"), h("span", { key: '2c42b74352aa7a79ac6bc231cdd828b7a62f5083' }, "Previous"))), h("li", { key: '2707ab481b124351479dbc5e4b270a60f8e0cb9e', class: `page-item ${this.paging.has_next ? '' : ' disabled'}` }, h("a", { key: 'f97ea7a812ba9b0066cd5e75ab45bff152708b63', href: "#", class: "page-link", onClick: (e) => {
+            }, part: this.paging.has_previous ? buttonLink : buttonDisabled }, h("span", { key: '7b1c5029503b9fbbfaad817ea1b3d28056e1f187', class: "me-1", part: paginationItemIconPrevious }, "\u00AB"), h("span", { key: '88fe14b4d757d126beffaa9a9b1fe679160029a8', part: paginationItemText }, "Previous"))), h("li", { key: 'd1c2d678b47e82c7ede6a90a3f230c243aaad8e4', class: `page-item ${this.paging.has_next ? '' : ' disabled'}` }, h("button", { key: 'aff77d59aee0b21d5e4e68120effbb234453942b', class: "page-link", onClick: (e) => {
                 e.preventDefault();
                 this.paging.handleClickNext(this.paging.end_cursor);
-            }, part: this.paging.has_next ? buttonLink : buttonDisabled }, h("span", { key: 'a850314028161b5a04618ffc5515603ea7203a0a' }, "Next"), h("span", { key: '643097228302500411ca0c4a932d8067074a15d2', class: "ms-1" }, "\u00BB")))))));
+            }, part: this.paging.has_next ? buttonLink : buttonDisabled }, h("span", { key: '260c9af01293dbd83add85af7703d8b27b089351', part: paginationItemText }, "Next"), h("span", { key: '9122c2d8dbf78ddcc771359d9b36ba3036dc9be0', class: "ms-1", part: paginationItemIconNext }, "\u00BB")))))));
     }
     static get is() { return "pagination-menu"; }
     static get properties() {