@getpara/core-components 2.0.0-fc.3 → 2.0.0

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

@@ -3,6 +3,7 @@ export class CpslButton {
     constructor() {
         this.as = 'button';
         this.disabled = false;
+        this.pending = false;
         this.fullWidth = false;
         this.href = undefined;
         this.size = 'medium';
@@ -11,7 +12,7 @@ export class CpslButton {
         this.variant = 'primary';
     }
     render() {
-        return (h(Host, { key: '0fd0606bdefb9664a01e2e9686065f5833e9190d', class: {
+        return (h(Host, { key: '8f65c32aa3f0bcfcdf621ea1c1b4b4b383b28850', class: {
                 // VARIANTS
                 'primary': this.variant === 'primary',
                 'secondary': this.variant === 'secondary',
@@ -25,7 +26,7 @@ export class CpslButton {
                 'xSmall': this.size === 'xSmall',
                 'small': this.size === 'small',
                 'medium': this.size === 'medium',
-            } }, h(this.as, { key: '61b2fa9127eb03f9a3a4292f5161fe141ad545a5', href: this.href, target: this.target, part: "button-native", class: "button-native", type: this.type }, h("slot", { key: '2a3f3e90edace6f165cb1ead835a8dff1fc01cd6', name: "start" }), h("slot", { key: 'c0d5f828589bc74e40a6df43b85e3c04f1f25309' }), h("slot", { key: '11ea165fbc4141e49df46c2f09f203e052a5dfd1', name: "end" }))));
+            } }, h(this.as, { key: '1079c5db34801176d0aa51aaa02613a2357494fb', href: this.href, target: this.target, part: "button-native", class: "button-native", type: this.type, disabled: this.disabled || this.pending }, h("slot", { key: 'f5eaff65f6243b2506557e0cc2797217baa31db7', name: "start" }), this.pending ? h("cpsl-spinner", { size: 19 }) : h("slot", null), h("slot", { key: '257554b7f318af94ac762003129aa13f3b446767', name: "end" }))));
     }
     static get is() { return "cpsl-button"; }
     static get encapsulation() { return "shadow"; }
@@ -77,6 +78,24 @@ export class CpslButton {
                 "reflect": true,
                 "defaultValue": "false"
             },
+            "pending": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "If the button is pending.\nDefault is: false."
+                },
+                "attribute": "pending",
+                "reflect": false,
+                "defaultValue": "false"
+            },
             "fullWidth": {
                 "type": "boolean",
                 "mutable": false,

package/dist/collection/components/cpsl-button/cpsl-button.js.map

@@ -1 +1 @@
-{"version":3,"file":"cpsl-button.js","sourceRoot":"","sources":["../../../../src/components/cpsl-button/cpsl-button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAOzD,MAAM,OAAO,UAAU;;kBAMS,QAAQ;wBAMQ,KAAK;yBAMrB,KAAK;;oBAYY,QAAQ;;oBAUR,QAAQ;uBAO6C,SAAS;;IAE7G,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDACH,KAAK,EAAE;gBACL,WAAW;gBACX,SAAS,EAAE,IAAI,CAAC,OAAO,KAAK,SAAS;gBACrC,WAAW,EAAE,IAAI,CAAC,OAAO,KAAK,WAAW;gBACzC,UAAU,EAAE,IAAI,CAAC,OAAO,KAAK,UAAU;gBACvC,OAAO,EAAE,IAAI,CAAC,OAAO,KAAK,OAAO;gBACjC,aAAa,EAAE,IAAI,CAAC,OAAO,KAAK,aAAa;gBAC7C,QAAQ;gBACR,UAAU,EAAE,IAAI,CAAC,QAAQ;gBACzB,YAAY,EAAE,IAAI,CAAC,SAAS;gBAC5B,QAAQ;gBACR,QAAQ,EAAE,IAAI,CAAC,IAAI,KAAK,QAAQ;gBAChC,OAAO,EAAE,IAAI,CAAC,IAAI,KAAK,OAAO;gBAC9B,QAAQ,EAAE,IAAI,CAAC,IAAI,KAAK,QAAQ;aACjC;YAED,EAAC,IAAI,CAAC,EAAE,qDAAC,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,IAAI,EAAC,eAAe,EAAC,KAAK,EAAC,eAAe,EAAC,IAAI,EAAE,IAAI,CAAC,IAAI;gBACvG,6DAAM,IAAI,EAAC,OAAO,GAAQ;gBAC1B,8DAAa;gBACb,6DAAM,IAAI,EAAC,KAAK,GAAQ,CAChB,CACL,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, Prop, h } from '@stencil/core';\n\n@Component({\n  tag: 'cpsl-button',\n  styleUrl: 'cpsl-button.scss',\n  shadow: true,\n})\nexport class CpslButton {\n  /**\n   * The tag for the button.\n   * Options are: `\"button\"`, `\"a\".\n   * Default is: `\"button\"`.\n   */\n  @Prop() as?: 'button' | 'a' = 'button';\n\n  /**\n   * If the button is disabled.\n   * Default is: false.\n   */\n  @Prop({ reflect: true }) disabled?: boolean = false;\n\n  /**\n   * Whether the button takes the full width of it's container.\n   * Default is: false.\n   */\n  @Prop() fullWidth?: boolean = false;\n\n  /**\n   * href to use when using a link.\n   */\n  @Prop() href?: string;\n\n  /**\n   * The size of the button.\n   * Options are: `\"small\"`, `\"medium\".\n   * Default is: `\"medium\"`.\n   */\n  @Prop() size?: 'xSmall' | 'small' | 'medium' = 'medium';\n\n  /**\n   * target to use when using a link.\n   */\n  @Prop() target?: string;\n\n  /**\n   * The type of the button.\n   */\n  @Prop() type?: 'button' | 'submit' | 'reset' = 'button';\n\n  /**\n   * The variant of the button.\n   * Options are: `\"primary\"`, `\"secondary\", `\"tertiary\", `\"ghost\"`, `\"destructive\"`.\n   * Default is: `\"primary\"`.\n   */\n  @Prop({ reflect: true }) variant?: 'primary' | 'secondary' | 'tertiary' | 'ghost' | 'destructive' = 'primary';\n\n  render() {\n    return (\n      <Host\n        class={{\n          // VARIANTS\n          'primary': this.variant === 'primary',\n          'secondary': this.variant === 'secondary',\n          'tertiary': this.variant === 'tertiary',\n          'ghost': this.variant === 'ghost',\n          'destructive': this.variant === 'destructive',\n          // STATE\n          'disabled': this.disabled,\n          'full-width': this.fullWidth,\n          // SIZES\n          'xSmall': this.size === 'xSmall',\n          'small': this.size === 'small',\n          'medium': this.size === 'medium',\n        }}\n      >\n        <this.as href={this.href} target={this.target} part=\"button-native\" class=\"button-native\" type={this.type}>\n          <slot name=\"start\"></slot>\n          <slot></slot>\n          <slot name=\"end\"></slot>\n        </this.as>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"cpsl-button.js","sourceRoot":"","sources":["../../../../src/components/cpsl-button/cpsl-button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAOzD,MAAM,OAAO,UAAU;;kBAMS,QAAQ;wBAMQ,KAAK;uBAMvB,KAAK;yBAMH,KAAK;;oBAYY,QAAQ;;oBAUR,QAAQ;uBAO6C,SAAS;;IAE7G,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDACH,KAAK,EAAE;gBACL,WAAW;gBACX,SAAS,EAAE,IAAI,CAAC,OAAO,KAAK,SAAS;gBACrC,WAAW,EAAE,IAAI,CAAC,OAAO,KAAK,WAAW;gBACzC,UAAU,EAAE,IAAI,CAAC,OAAO,KAAK,UAAU;gBACvC,OAAO,EAAE,IAAI,CAAC,OAAO,KAAK,OAAO;gBACjC,aAAa,EAAE,IAAI,CAAC,OAAO,KAAK,aAAa;gBAC7C,QAAQ;gBACR,UAAU,EAAE,IAAI,CAAC,QAAQ;gBACzB,YAAY,EAAE,IAAI,CAAC,SAAS;gBAC5B,QAAQ;gBACR,QAAQ,EAAE,IAAI,CAAC,IAAI,KAAK,QAAQ;gBAChC,OAAO,EAAE,IAAI,CAAC,IAAI,KAAK,OAAO;gBAC9B,QAAQ,EAAE,IAAI,CAAC,IAAI,KAAK,QAAQ;aACjC;YAED,EAAC,IAAI,CAAC,EAAE,qDAAC,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,IAAI,EAAC,eAAe,EAAC,KAAK,EAAC,eAAe,EAAC,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,OAAO;gBAChJ,6DAAM,IAAI,EAAC,OAAO,GAAQ;gBACzB,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,oBAAc,IAAI,EAAE,EAAE,GAAI,CAAC,CAAC,CAAC,eAAa;gBAC1D,6DAAM,IAAI,EAAC,KAAK,GAAQ,CAChB,CACL,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, Prop, h } from '@stencil/core';\n\n@Component({\n  tag: 'cpsl-button',\n  styleUrl: 'cpsl-button.scss',\n  shadow: true,\n})\nexport class CpslButton {\n  /**\n   * The tag for the button.\n   * Options are: `\"button\"`, `\"a\".\n   * Default is: `\"button\"`.\n   */\n  @Prop() as?: 'button' | 'a' = 'button';\n\n  /**\n   * If the button is disabled.\n   * Default is: false.\n   */\n  @Prop({ reflect: true }) disabled?: boolean = false;\n\n  /**\n   * If the button is pending.\n   * Default is: false.\n   */\n  @Prop() pending?: boolean = false;\n\n  /**\n   * Whether the button takes the full width of it's container.\n   * Default is: false.\n   */\n  @Prop() fullWidth?: boolean = false;\n\n  /**\n   * href to use when using a link.\n   */\n  @Prop() href?: string;\n\n  /**\n   * The size of the button.\n   * Options are: `\"small\"`, `\"medium\".\n   * Default is: `\"medium\"`.\n   */\n  @Prop() size?: 'xSmall' | 'small' | 'medium' = 'medium';\n\n  /**\n   * target to use when using a link.\n   */\n  @Prop() target?: string;\n\n  /**\n   * The type of the button.\n   */\n  @Prop() type?: 'button' | 'submit' | 'reset' = 'button';\n\n  /**\n   * The variant of the button.\n   * Options are: `\"primary\"`, `\"secondary\", `\"tertiary\", `\"ghost\"`, `\"destructive\"`.\n   * Default is: `\"primary\"`.\n   */\n  @Prop({ reflect: true }) variant?: 'primary' | 'secondary' | 'tertiary' | 'ghost' | 'destructive' = 'primary';\n\n  render() {\n    return (\n      <Host\n        class={{\n          // VARIANTS\n          'primary': this.variant === 'primary',\n          'secondary': this.variant === 'secondary',\n          'tertiary': this.variant === 'tertiary',\n          'ghost': this.variant === 'ghost',\n          'destructive': this.variant === 'destructive',\n          // STATE\n          'disabled': this.disabled,\n          'full-width': this.fullWidth,\n          // SIZES\n          'xSmall': this.size === 'xSmall',\n          'small': this.size === 'small',\n          'medium': this.size === 'medium',\n        }}\n      >\n        <this.as href={this.href} target={this.target} part=\"button-native\" class=\"button-native\" type={this.type} disabled={this.disabled || this.pending}>\n          <slot name=\"start\"></slot>\n          {this.pending ? <cpsl-spinner size={19} /> : <slot></slot>}\n          <slot name=\"end\"></slot>\n        </this.as>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/cpsl-button-group/cpsl-button-group.js

@@ -32,7 +32,7 @@ export class CpslButtonGroup {
         return this.el.querySelectorAll('&> *:not(cpsl-button)');
     }
     render() {
-        return (h(Host, { key: '91ccfcaf08be6fc45076376b19e63b5b58ab9b15' }, h("slot", { key: '9af22dc4fcbd76ebc32e476d1682e2fe41b33f81' })));
+        return (h(Host, { key: '13009bfa07a89c5bd9412683b8bc8338e9455dee' }, h("slot", { key: '308767ba6d3d3147f1ab60bcc98aa7ca1d1a2c28' })));
     }
     static get is() { return "cpsl-button-group"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/cpsl-card/cpsl-card.js

@@ -1,7 +1,7 @@
 import { Host, h } from "@stencil/core";
 export class CpslCard {
     render() {
-        return (h(Host, { key: '21177f5a9ceec0246dc1fa89a052bfdadacc3063' }, h("div", { key: '0940e0aaf62b24e1be0e99c736069b5bb463854c', class: { card: true }, part: "card-container" }, h("slot", { key: '6317e03f97be9841c03b040845591043bf203e36' }))));
+        return (h(Host, { key: 'f0b2545bd8c71dad45cdacc819695a7778bb9fcc' }, h("div", { key: '6c49feb59a958cc196d0c12a73839445353d44e7', class: { card: true }, part: "card-container" }, h("slot", { key: '04b3ecd54d97ea584a96b915d262a3d357d26fe4' }))));
     }
     static get is() { return "cpsl-card"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/cpsl-checkbox/cpsl-checkbox.js

@@ -7,7 +7,7 @@ export class CpslCheckbox {
         this.checked = undefined;
     }
     render() {
-        return (h(Host, { key: '236c0b027e72c0c25dbc2fd3183a77400c815f8c' }, h("input", { key: '8c350e21268b87d485b16796b2058c4e47f46e75', type: "checkbox", checked: this.checked }), h("span", { key: 'b1d8fc6dd380b67eb8940f55bba47810c54ee189', onClick: this.handleCheckboxClick, class: { container: true, checked: this.checked } }, h("cpsl-icon", { key: '2b3ddcad1e2b9007bda8135a810b75a1a2cfaeca', icon: "check" }))));
+        return (h(Host, { key: '48249b9fb66fd8acff7fb444f39f1b6b86243b81' }, h("input", { key: 'adfca3d8961b8c5ca7d3b3616101772607cb4ee4', type: "checkbox", checked: this.checked }), h("span", { key: '0f4004593d47c1b6d36215eda48959770e99252e', onClick: this.handleCheckboxClick, class: { container: true, checked: this.checked } }, h("cpsl-icon", { key: '31395afa9b4b9cdcbe74fbccd9ec9abd2f03e441', icon: "check" }))));
     }
     static get is() { return "cpsl-checkbox"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/cpsl-code-input/cpsl-code-input.js

@@ -2,7 +2,6 @@ import { Host, h } from "@stencil/core";
 export class CpslCodeInput {
     constructor() {
         this.handleInput = (ind, ev) => {
-            var _a;
             const inputElements = this.inputs;
             // If getting an insertFromPaste remove the last element value since the value setting is handled in the paste event
             if (ev.inputType === 'insertFromPaste') {
@@ -11,36 +10,89 @@ export class CpslCodeInput {
             }
             if (ev.inputType === 'insertText') {
                 if (this.type === 'number' && isNaN(parseInt(ev.data))) {
+                    ev.preventDefault();
                     inputElements[ind].value = '';
                     return;
                 }
-                const newCode = `${(_a = this.code) !== null && _a !== void 0 ? _a : ''}${ev.data}`;
-                inputElements[Math.min(this.length - 1, newCode.length)].focus();
+                // Prevent the default behavior FIRST
+                ev.preventDefault();
+                // Build the new code from the current component state, not the DOM
+                const currentCode = this.code || '';
+                // Insert the new character at the focused position, not at the end
+                const beforeFocused = currentCode.substring(0, ind);
+                const afterFocused = currentCode.substring(ind + 1);
+                const newCode = beforeFocused + ev.data + afterFocused;
+                // Prevent input beyond the maximum length
+                if (newCode.length > this.length) {
+                    return;
+                }
+                // Update the component state and emit event
                 this.cpslInput.emit({ value: newCode });
                 this.code = newCode;
+                // Update the specific input that was typed in
+                inputElements[ind].value = ev.data;
+                // Focus next input if not at the end
+                if (ind < this.length - 1) {
+                    // Set flag to prevent handleFocus from interfering
+                    this.isArrowNavigation = true;
+                    setTimeout(() => {
+                        inputElements[ind + 1].focus();
+                        this.isArrowNavigation = false;
+                    }, 0);
+                }
             }
         };
+        this.isArrowNavigation = false;
         this.handleKeyDown = (ind, ev) => {
             const inputElements = this.inputs;
             switch (ev.key) {
                 case 'Backspace': {
                     let newCode;
                     if (!inputElements[ind].value) {
-                        inputElements[Math.max(0, ind - 1)].value = '';
-                        inputElements[Math.max(0, ind - 1)].focus();
-                        newCode = this.code.substring(0, ind - 1);
+                        // If current input is empty, move to previous and clear it
+                        if (ind > 0) {
+                            inputElements[ind - 1].value = '';
+                            setTimeout(() => {
+                                inputElements[ind - 1].focus();
+                            }, 0);
+                            // Remove character at previous position
+                            const currentCode = this.code || '';
+                            newCode = currentCode.substring(0, ind - 1) + currentCode.substring(ind);
+                        }
+                        else {
+                            newCode = this.code;
+                        }
                     }
                     else {
-                        newCode = this.code.substring(0, ind);
+                        // Clear current input and remove character at current position
+                        inputElements[ind].value = '';
+                        const currentCode = this.code || '';
+                        newCode = currentCode.substring(0, ind) + currentCode.substring(ind + 1);
                     }
                     this.cpslInput.emit({ value: newCode });
                     this.code = newCode;
                     break;
                 }
                 case 'ArrowLeft': {
-                    setTimeout(() => {
-                        this.inputs[ind].setSelectionRange(1, 1);
-                    }, 0);
+                    ev.preventDefault();
+                    if (ind > 0) {
+                        this.isArrowNavigation = true;
+                        setTimeout(() => {
+                            inputElements[ind - 1].focus();
+                            this.isArrowNavigation = false;
+                        }, 0);
+                    }
+                    break;
+                }
+                case 'ArrowRight': {
+                    ev.preventDefault();
+                    if (ind < this.length - 1) {
+                        this.isArrowNavigation = true;
+                        setTimeout(() => {
+                            inputElements[ind + 1].focus();
+                            this.isArrowNavigation = false;
+                        }, 0);
+                    }
                     break;
                 }
                 default: {
@@ -50,6 +102,21 @@ export class CpslCodeInput {
         };
         this.handleFocus = (ind) => {
             const inputElements = this.inputs;
+            // Don't interfere with arrow key navigation
+            if (this.isArrowNavigation) {
+                setTimeout(() => {
+                    inputElements[ind].setSelectionRange(1, 1);
+                }, 0);
+                return;
+            }
+            // If the focused input already has a value, allow it to stay focused (user clicked on it)
+            if (inputElements[ind].value) {
+                setTimeout(() => {
+                    inputElements[ind].setSelectionRange(1, 1);
+                }, 0);
+                return;
+            }
+            // Otherwise, use the default focus logic (find first empty or go to last)
             for (const input of inputElements) {
                 if (!input.value) {
                     input.focus();
@@ -66,21 +133,28 @@ export class CpslCodeInput {
         };
         this.handlePaste = (e) => {
             const inputElements = this.inputs;
-            const pastedCode = e.clipboardData.getData('text');
-            if (this.type === 'number' && isNaN(parseInt(pastedCode))) {
-                // Remove illegal value from the first input. Not using a timeout here doesn't change the value properly.
-                setTimeout(() => {
-                    inputElements[0].value = '';
-                }, 0);
-                return;
+            let pastedCode = e.clipboardData.getData('text');
+            // Filter based on type
+            if (this.type === 'number') {
+                // Remove all non-numeric characters
+                pastedCode = pastedCode.replace(/\D/g, '');
+                // If no valid numbers remain, clear and return
+                if (!pastedCode) {
+                    setTimeout(() => {
+                        inputElements[0].value = '';
+                    }, 0);
+                    return;
+                }
             }
+            // Truncate pasted code to match the expected length
+            const truncatedCode = pastedCode.substring(0, this.length);
             this.cpslInput.emit({
-                value: pastedCode,
+                value: truncatedCode,
             });
             inputElements.forEach((input, index) => {
-                input.value = pastedCode.charAt(index);
+                input.value = truncatedCode.charAt(index) || '';
             });
-            inputElements[Math.min(this.length - 1, pastedCode.length)].focus();
+            inputElements[Math.min(this.length - 1, truncatedCode.length)].focus();
         };
         this.code = undefined;
         this.errorText = undefined;
@@ -88,15 +162,24 @@ export class CpslCodeInput {
         this.length = undefined;
         this.type = 'number';
     }
+    watchCodeProp(newCode) {
+        // Update the input values when the code prop changes externally
+        const inputElements = this.inputs;
+        if (inputElements.length > 0) {
+            inputElements.forEach((input, index) => {
+                input.value = (newCode === null || newCode === void 0 ? void 0 : newCode[index]) || '';
+            });
+        }
+    }
     get inputs() {
         return Array.from(this.el.shadowRoot.querySelectorAll('input'));
     }
     render() {
         var _a;
-        return (h(Host, { key: '9c620c8eb41b595e672e2b7d22944e37de630f73' }, h("div", { key: 'd8e870d0b15b90cfccd78ba5f15cf7b9c0680f0a', class: "code-container" }, new Array(this.length).fill(0).map((_, i) => {
+        return (h(Host, { key: '16e16cc803f099963c784ed7bbd688afb7b8a59f' }, h("div", { key: 'b3f3a0ba95daf12f4e504bf91e9d8e57b3d97b44', class: "code-container" }, new Array(this.length).fill(0).map((_, i) => {
             var _a, _b;
             return (h("input", { class: { 'code-input': true, 'error': Boolean(this.errorText), 'has-value': ((_a = this.code) === null || _a === void 0 ? void 0 : _a[i]) !== undefined }, id: `code-input-${i}`, onKeyDown: ev => this.handleKeyDown(i, ev), onInput: ev => this.handleInput(i, ev), onFocus: () => this.handleFocus(i), onPaste: this.handlePaste, min: 0, max: 9, value: (_b = this.code) === null || _b === void 0 ? void 0 : _b[i], inputMode: this.type === 'number' ? 'numeric' : 'text' }));
-        })), (this.errorText || this.helperText) && (h("div", { key: '532bccdc9d9135f4728c503c77b3795440a3607a', class: { 'helper-text-container': true, 'error-text': Boolean(this.errorText) } }, h("cpsl-icon", { key: '02db8b47b661f64f2fb3073827aef50d7b94f1f3', icon: this.errorText ? 'alertCircle' : 'infoCircle' }), h("span", { key: '228b294db359a308d3e76f2ce3c5d17b2d039781' }, (_a = this.errorText) !== null && _a !== void 0 ? _a : this.helperText)))));
+        })), (this.errorText || this.helperText) && (h("div", { key: '8f01ee92d99bbdde0f0b501640bb3136e4e134f8', class: { 'helper-text-container': true, 'error-text': Boolean(this.errorText) } }, h("cpsl-icon", { key: '52a8d308da8c4fad19eec139510df8439a39b6d7', icon: this.errorText ? 'alertCircle' : 'infoCircle' }), h("span", { key: '2d87ea9d774e51055774e76f71074e0eb0d60b10' }, (_a = this.errorText) !== null && _a !== void 0 ? _a : this.helperText)))));
     }
     static get is() { return "cpsl-code-input"; }
     static get encapsulation() { return "shadow"; }
@@ -225,5 +308,11 @@ export class CpslCodeInput {
             }];
     }
     static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "code",
+                "methodName": "watchCodeProp"
+            }];
+    }
 }
 //# sourceMappingURL=cpsl-code-input.js.map

package/dist/collection/components/cpsl-code-input/cpsl-code-input.js.map

@@ -1 +1 @@
-{"version":3,"file":"cpsl-code-input.js","sourceRoot":"","sources":["../../../../src/components/cpsl-code-input/cpsl-code-input.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, h, Prop, Element, Event, EventEmitter } from '@stencil/core';\nimport { CodeChangeEventDetail } from './code-change-interface.js';\n\n@Component({\n  tag: 'cpsl-code-input',\n  styleUrl: 'cpsl-code-input.scss',\n  shadow: true,\n})\nexport class CpslCodeInput {\n  @Element() el!: HTMLCpslCodeInputElement;\n\n  /**\n   * Value of the code.\n   */\n\n  @Prop({ mutable: true }) code: string;\n\n  /**\n   * Error text to show below the input. If this is provided the input will enter an error state.\n   */\n  @Prop() errorText?: string;\n\n  /**\n   * Helper text to show below the input. If `\"errorText\"` is provided that will take precedence.\n   */\n  @Prop() helperText?: string;\n\n  /**\n   * Length of the code.\n   */\n  @Prop() length: number;\n\n  /**\n   * Type of characters to accept in the code.\n   * Defaults to number.\n   */\n  @Prop() type?: 'number' | 'string' = 'number';\n\n  /**\n   * The `cpslInput` event is fired each time the user modifies the input's value.\n   */\n  @Event() cpslInput!: EventEmitter<CodeChangeEventDetail>;\n\n  private handleInput = (ind: number, ev: InputEvent) => {\n    const inputElements = this.inputs;\n    // If getting an insertFromPaste remove the last element value since the value setting is handled in the paste event\n    if (ev.inputType === 'insertFromPaste') {\n      inputElements[Math.min(this.length - 1, ind)].value = '';\n      return;\n    }\n    if (ev.inputType === 'insertText') {\n      if (this.type === 'number' && isNaN(parseInt(ev.data))) {\n        inputElements[ind].value = '';\n        return;\n      }\n      const newCode = `${this.code ?? ''}${ev.data}`;\n      inputElements[Math.min(this.length - 1, newCode.length)].focus();\n      this.cpslInput.emit({ value: newCode });\n      this.code = newCode;\n    }\n  };\n\n  private handleKeyDown = (ind: number, ev: KeyboardEvent) => {\n    const inputElements = this.inputs;\n\n    switch (ev.key) {\n      case 'Backspace': {\n        let newCode;\n        if (!inputElements[ind].value) {\n          inputElements[Math.max(0, ind - 1)].value = '';\n          inputElements[Math.max(0, ind - 1)].focus();\n          newCode = this.code.substring(0, ind - 1);\n        } else {\n          newCode = this.code.substring(0, ind);\n        }\n        this.cpslInput.emit({ value: newCode });\n        this.code = newCode;\n        break;\n      }\n      case 'ArrowLeft': {\n        setTimeout(() => {\n          this.inputs[ind].setSelectionRange(1, 1);\n        }, 0);\n        break;\n      }\n      default: {\n        break;\n      }\n    }\n  };\n\n  private handleFocus = (ind: number) => {\n    const inputElements = this.inputs;\n\n    for (const input of inputElements) {\n      if (!input.value) {\n        input.focus();\n        break;\n      } else if (input.id === `code-input-${this.length - 1}`) {\n        input.focus();\n        break;\n      }\n    }\n\n    setTimeout(() => {\n      inputElements[ind].setSelectionRange(1, 1);\n    }, 0);\n  };\n\n  private handlePaste = (e: ClipboardEvent) => {\n    const inputElements = this.inputs;\n    const pastedCode = e.clipboardData.getData('text');\n\n    if (this.type === 'number' && isNaN(parseInt(pastedCode))) {\n      // Remove illegal value from the first input. Not using a timeout here doesn't change the value properly.\n      setTimeout(() => {\n        inputElements[0].value = '';\n      }, 0);\n      return;\n    }\n\n    this.cpslInput.emit({\n      value: pastedCode,\n    });\n    inputElements.forEach((input, index) => {\n      input.value = pastedCode.charAt(index);\n    });\n    inputElements[Math.min(this.length - 1, pastedCode.length)].focus();\n  };\n\n  private get inputs() {\n    return Array.from(this.el.shadowRoot.querySelectorAll('input'));\n  }\n\n  render() {\n    return (\n      <Host>\n        <div class=\"code-container\">\n          {new Array(this.length).fill(0).map((_, i) => (\n            <input\n              class={{ 'code-input': true, 'error': Boolean(this.errorText), 'has-value': this.code?.[i] !== undefined }}\n              id={`code-input-${i}`}\n              onKeyDown={ev => this.handleKeyDown(i, ev)}\n              onInput={ev => this.handleInput(i, ev)}\n              onFocus={() => this.handleFocus(i)}\n              onPaste={this.handlePaste}\n              min={0}\n              max={9}\n              value={this.code?.[i]}\n              inputMode={this.type === 'number' ? 'numeric' : 'text'}\n            />\n          ))}\n        </div>\n        {(this.errorText || this.helperText) && (\n          <div class={{ 'helper-text-container': true, 'error-text': Boolean(this.errorText) }}>\n            <cpsl-icon icon={this.errorText ? 'alertCircle' : 'infoCircle'} />\n            <span>{this.errorText ?? this.helperText}</span>\n          </div>\n        )}\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"cpsl-code-input.js","sourceRoot":"","sources":["../../../../src/components/cpsl-code-input/cpsl-code-input.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, h, Prop, Element, Event, EventEmitter, Watch } from '@stencil/core';\nimport { CodeChangeEventDetail } from './code-change-interface.js';\n\n@Component({\n  tag: 'cpsl-code-input',\n  styleUrl: 'cpsl-code-input.scss',\n  shadow: true,\n})\nexport class CpslCodeInput {\n  @Element() el!: HTMLCpslCodeInputElement;\n\n  /**\n   * Value of the code.\n   */\n\n  @Prop({ mutable: true }) code: string;\n\n  /**\n   * Error text to show below the input. If this is provided the input will enter an error state.\n   */\n  @Prop() errorText?: string;\n\n  /**\n   * Helper text to show below the input. If `\"errorText\"` is provided that will take precedence.\n   */\n  @Prop() helperText?: string;\n\n  /**\n   * Length of the code.\n   */\n  @Prop() length: number;\n\n  /**\n   * Type of characters to accept in the code.\n   * Defaults to number.\n   */\n  @Prop() type?: 'number' | 'string' = 'number';\n\n  /**\n   * The `cpslInput` event is fired each time the user modifies the input's value.\n   */\n  @Event() cpslInput!: EventEmitter<CodeChangeEventDetail>;\n\n  @Watch('code')\n  watchCodeProp(newCode: string) {\n    // Update the input values when the code prop changes externally\n    const inputElements = this.inputs;\n    if (inputElements.length > 0) {\n      inputElements.forEach((input, index) => {\n        input.value = newCode?.[index] || '';\n      });\n    }\n  }\n\n  private handleInput = (ind: number, ev: InputEvent) => {\n    const inputElements = this.inputs;\n\n    // If getting an insertFromPaste remove the last element value since the value setting is handled in the paste event\n    if (ev.inputType === 'insertFromPaste') {\n      inputElements[Math.min(this.length - 1, ind)].value = '';\n      return;\n    }\n\n    if (ev.inputType === 'insertText') {\n      if (this.type === 'number' && isNaN(parseInt(ev.data))) {\n        ev.preventDefault();\n        inputElements[ind].value = '';\n        return;\n      }\n\n      // Prevent the default behavior FIRST\n      ev.preventDefault();\n\n      // Build the new code from the current component state, not the DOM\n      const currentCode = this.code || '';\n\n      // Insert the new character at the focused position, not at the end\n      const beforeFocused = currentCode.substring(0, ind);\n      const afterFocused = currentCode.substring(ind + 1);\n      const newCode = beforeFocused + ev.data + afterFocused;\n\n      // Prevent input beyond the maximum length\n      if (newCode.length > this.length) {\n        return;\n      }\n\n      // Update the component state and emit event\n      this.cpslInput.emit({ value: newCode });\n      this.code = newCode;\n\n      // Update the specific input that was typed in\n      inputElements[ind].value = ev.data;\n\n      // Focus next input if not at the end\n      if (ind < this.length - 1) {\n        // Set flag to prevent handleFocus from interfering\n        this.isArrowNavigation = true;\n        setTimeout(() => {\n          inputElements[ind + 1].focus();\n          this.isArrowNavigation = false;\n        }, 0);\n      }\n    }\n  };\n\n  private isArrowNavigation = false;\n\n  private handleKeyDown = (ind: number, ev: KeyboardEvent) => {\n    const inputElements = this.inputs;\n\n    switch (ev.key) {\n      case 'Backspace': {\n        let newCode;\n        if (!inputElements[ind].value) {\n          // If current input is empty, move to previous and clear it\n          if (ind > 0) {\n            inputElements[ind - 1].value = '';\n            setTimeout(() => {\n              inputElements[ind - 1].focus();\n            }, 0);\n            // Remove character at previous position\n            const currentCode = this.code || '';\n            newCode = currentCode.substring(0, ind - 1) + currentCode.substring(ind);\n          } else {\n            newCode = this.code;\n          }\n        } else {\n          // Clear current input and remove character at current position\n          inputElements[ind].value = '';\n          const currentCode = this.code || '';\n          newCode = currentCode.substring(0, ind) + currentCode.substring(ind + 1);\n        }\n        this.cpslInput.emit({ value: newCode });\n        this.code = newCode;\n        break;\n      }\n      case 'ArrowLeft': {\n        ev.preventDefault();\n        if (ind > 0) {\n          this.isArrowNavigation = true;\n          setTimeout(() => {\n            inputElements[ind - 1].focus();\n            this.isArrowNavigation = false;\n          }, 0);\n        }\n        break;\n      }\n      case 'ArrowRight': {\n        ev.preventDefault();\n        if (ind < this.length - 1) {\n          this.isArrowNavigation = true;\n          setTimeout(() => {\n            inputElements[ind + 1].focus();\n            this.isArrowNavigation = false;\n          }, 0);\n        }\n        break;\n      }\n      default: {\n        break;\n      }\n    }\n  };\n\n  private handleFocus = (ind: number) => {\n    const inputElements = this.inputs;\n\n    // Don't interfere with arrow key navigation\n    if (this.isArrowNavigation) {\n      setTimeout(() => {\n        inputElements[ind].setSelectionRange(1, 1);\n      }, 0);\n      return;\n    }\n\n    // If the focused input already has a value, allow it to stay focused (user clicked on it)\n    if (inputElements[ind].value) {\n      setTimeout(() => {\n        inputElements[ind].setSelectionRange(1, 1);\n      }, 0);\n      return;\n    }\n\n    // Otherwise, use the default focus logic (find first empty or go to last)\n    for (const input of inputElements) {\n      if (!input.value) {\n        input.focus();\n        break;\n      } else if (input.id === `code-input-${this.length - 1}`) {\n        input.focus();\n        break;\n      }\n    }\n\n    setTimeout(() => {\n      inputElements[ind].setSelectionRange(1, 1);\n    }, 0);\n  };\n\n  private handlePaste = (e: ClipboardEvent) => {\n    const inputElements = this.inputs;\n    let pastedCode = e.clipboardData.getData('text');\n\n    // Filter based on type\n    if (this.type === 'number') {\n      // Remove all non-numeric characters\n      pastedCode = pastedCode.replace(/\\D/g, '');\n\n      // If no valid numbers remain, clear and return\n      if (!pastedCode) {\n        setTimeout(() => {\n          inputElements[0].value = '';\n        }, 0);\n        return;\n      }\n    }\n\n    // Truncate pasted code to match the expected length\n    const truncatedCode = pastedCode.substring(0, this.length);\n\n    this.cpslInput.emit({\n      value: truncatedCode,\n    });\n\n    inputElements.forEach((input, index) => {\n      input.value = truncatedCode.charAt(index) || '';\n    });\n\n    inputElements[Math.min(this.length - 1, truncatedCode.length)].focus();\n  };\n\n  private get inputs() {\n    return Array.from(this.el.shadowRoot.querySelectorAll('input'));\n  }\n\n  render() {\n    return (\n      <Host>\n        <div class=\"code-container\">\n          {new Array(this.length).fill(0).map((_, i) => (\n            <input\n              class={{ 'code-input': true, 'error': Boolean(this.errorText), 'has-value': this.code?.[i] !== undefined }}\n              id={`code-input-${i}`}\n              onKeyDown={ev => this.handleKeyDown(i, ev)}\n              onInput={ev => this.handleInput(i, ev)}\n              onFocus={() => this.handleFocus(i)}\n              onPaste={this.handlePaste}\n              min={0}\n              max={9}\n              value={this.code?.[i]}\n              inputMode={this.type === 'number' ? 'numeric' : 'text'}\n            />\n          ))}\n        </div>\n        {(this.errorText || this.helperText) && (\n          <div class={{ 'helper-text-container': true, 'error-text': Boolean(this.errorText) }}>\n            <cpsl-icon icon={this.errorText ? 'alertCircle' : 'infoCircle'} />\n            <span>{this.errorText ?? this.helperText}</span>\n          </div>\n        )}\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/cpsl-col/cpsl-col.js

@@ -108,7 +108,7 @@ export class CpslCol {
     }
     render() {
         const isRTL = document.dir === 'rtl';
-        return (h(Host, { key: 'f4939676b491eb1d76138f93495ca714338efa34', style: Object.assign(Object.assign(Object.assign(Object.assign({}, this.calculateOffset(isRTL)), this.calculatePull(isRTL)), this.calculatePush(isRTL)), this.calculateSize()) }, h("slot", { key: '58799b5710715af09184b88c94d46638e78e1f41' })));
+        return (h(Host, { key: 'eac2e429c731259f9a8419cc831b415b3ea072e9', style: Object.assign(Object.assign(Object.assign(Object.assign({}, this.calculateOffset(isRTL)), this.calculatePull(isRTL)), this.calculatePush(isRTL)), this.calculateSize()) }, h("slot", { key: '597831d03acde0ce70a87ba538ae8e555effd248' })));
     }
     static get is() { return "cpsl-col"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/cpsl-divider/cpsl-divider.js

@@ -1,7 +1,7 @@
 import { Host, h } from "@stencil/core";
 export class CpslDivider {
     render() {
-        return (h(Host, { key: 'd5cffdef9344f7dcac4aae1bc2acca8c02d69946' }, h("div", { key: 'e07f8107804df83537a3b8e40d124c66d2fc6f44' }), h("slot", { key: 'd97f02d46a63d32d107838b5aa50654a9593cc8a' }), h("div", { key: '2316aed010b91a65c961e2f30cc2cde03b892429' })));
+        return (h(Host, { key: 'cffec64f3c150902ccff40b2362ce76dda41e32d' }, h("div", { key: '3ae8f787af8f4f112f0f3c51aa102b89fd7d8529' }), h("slot", { key: '1a6a2a37cd1966ec492e95b0d5cb718f484cc821' }), h("div", { key: '3fbe5d32823ad65a5404a6419d5ea26a73a03290' })));
     }
     static get is() { return "cpsl-divider"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/cpsl-drawer/cpsl-drawer.js

@@ -33,12 +33,12 @@ export class CpslDrawer {
         const setHeight = this.anchor === 'top' || this.anchor === 'bottom';
         const startingAnchor = (_a = `${this.anchorPosition}px`) !== null && _a !== void 0 ? _a : '0px';
         const size = this.size === 'auto' ? 'auto' : `${this.size}px`;
-        return (h(Host, { key: 'a658bc7f4a536ad193ffa83045fc9ee051ce00c8', style: Object.assign({ width: setHeight ? '100vw' : size, height: setHeight ? size : '100vh', transitionDuration: `${this.showTransition ? this.transitionDuration : 0}s`, transitionTimingFunction: `${this.transitionFunction}`, [this.anchor]: this.open || this.variant === 'permanent' ? startingAnchor : this.closedAnchorPosition, opacity: this.closedAnchorPosition === undefined ? '0' : '1' }, (this.zIndexOverride ? { zIndex: `${this.zIndexOverride}` } : {})), class: {
+        return (h(Host, { key: '8e9be7d905e533ffe26c5a13841c7b6770633414', style: Object.assign({ width: setHeight ? '100vw' : size, height: setHeight ? size : '100vh', transitionDuration: `${this.showTransition ? this.transitionDuration : 0}s`, transitionTimingFunction: `${this.transitionFunction}`, [this.anchor]: this.open || this.variant === 'permanent' ? startingAnchor : this.closedAnchorPosition, opacity: this.closedAnchorPosition === undefined ? '0' : '1' }, (this.zIndexOverride ? { zIndex: `${this.zIndexOverride}` } : {})), class: {
                 top: this.anchor === 'top',
                 bottom: this.anchor === 'bottom',
                 left: this.anchor === 'left',
                 right: this.anchor === 'right',
-            } }, this.variant === 'temporary' && !this.noOverlay && h("cpsl-overlay", { key: '4af453a7893322c7327e4ae2daa36c510d79f63a', open: this.open, zIndexOverride: DEFAULT_Z_INDICES.modal + 1 }), h("div", { key: 'd223fe6203a4b927a4c7b4254fbf74bd0c5b7ba4', id: "container", class: "container", part: "container" }, h("slot", { key: 'c297bc0a9ce799ea62e84a7c15b3d56279424091' }))));
+            } }, this.variant === 'temporary' && !this.noOverlay && h("cpsl-overlay", { key: 'b661c385794ab39eb87a304455da85602fadd349', open: this.open, zIndexOverride: DEFAULT_Z_INDICES.modal + 1 }), h("div", { key: '1ad94f53ce752f518568139cd33e2aa11caa6d58', id: "container", class: "container", part: "container" }, h("slot", { key: '2bd9efb1ed55c388fd4c34e43900a7807f32a0ff' }))));
     }
     static get is() { return "cpsl-drawer"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/cpsl-dropdown/cpsl-dropdown.js

@@ -96,7 +96,7 @@ export class CpslDropdown {
     }
     render() {
         var _a, _b, _c;
-        return (h(Host, { key: '918eabdb23ab1f6c136c2ade37b572b60966ce75' }, h("button", { key: '53cde2c1780c6ceb1c08667fac003910810472b2', class: "dropdown-button", onClick: this.toggleDropdown }, `${((_a = this.selectedItem) === null || _a === void 0 ? void 0 : _a.selectedLabel) || ((_b = this.selectedItem) === null || _b === void 0 ? void 0 : _b.label)} ${(_c = this.selectedItem) === null || _c === void 0 ? void 0 : _c.value}`, h("div", { key: '9dded62f6bcd83665f2af693f2ac6cff20de4d52', class: `chevron ${this.isOpen ? '' : 'closed'}`, innerHTML: Icons['chevronUp'] })), h("ul", { key: '10a3cfc29eb61e9a2c64b0075c0b9b2985d08c70', class: { 'dropdown-options': true, 'open': this.isOpen }, style: { width: this.width } }, this.hasCpslSearch && (h("li", { key: '702a1282cb816da185a0ce435146443daddb1d6c', class: "search-bar" }, h("input", { key: 'da05fa6019d2c0bd1dab4336378cd449172a3cae', type: "text", placeholder: "Search...", value: this.searchQuery, onInput: this.handleSearchQueryChange }))), this.filteredItems.map(item => (h("li", { onClick: this.handleItemSelect(item) }, h("span", { innerHTML: Icons[item.icon] }), item.label, " ", h("span", { class: "dropdown-value" }, item.value)))))));
+        return (h(Host, { key: '76f4d93f5c0d4fddca26a8d7dc381d8c9b22119c' }, h("button", { key: '7186e6bedbeac44d8bc8b95de5acafeea999d2f2', class: "dropdown-button", onClick: this.toggleDropdown }, `${((_a = this.selectedItem) === null || _a === void 0 ? void 0 : _a.selectedLabel) || ((_b = this.selectedItem) === null || _b === void 0 ? void 0 : _b.label)} ${(_c = this.selectedItem) === null || _c === void 0 ? void 0 : _c.value}`, h("div", { key: 'b5ef03a1a7bf5b37aa35ee30ce6233d7b19dc33e', class: `chevron ${this.isOpen ? '' : 'closed'}`, innerHTML: Icons['chevronUp'] })), h("ul", { key: 'b0d9227ed1d360405a0294efbd4fe2a25926b7d2', class: { 'dropdown-options': true, 'open': this.isOpen }, style: { width: this.width } }, this.hasCpslSearch && (h("li", { key: '0a7100d5c60114bf63583a2d808a7cb677053346', class: "search-bar" }, h("input", { key: '098d19346facb88c51674db9005354da36079820', type: "text", placeholder: "Search...", value: this.searchQuery, onInput: this.handleSearchQueryChange }))), this.filteredItems.map(item => (h("li", { onClick: this.handleItemSelect(item) }, h("span", { innerHTML: Icons[item.icon] }), item.label, " ", h("span", { class: "dropdown-value" }, item.value)))))));
     }
     static get is() { return "cpsl-dropdown"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/cpsl-file-upload/cpsl-file-upload.js

@@ -116,7 +116,7 @@ export class CpslFileUpload {
     }
     render() {
         var _a, _b, _c;
-        return (h(Host, { key: '521ca35901a009b303650d7446e1f148930d7fe3' }, this.label && (h("label", { key: '94c58691decea8455a254698ec8fd27baba260ca', class: "label", htmlFor: this.inputId }, this.label, this.required ? '*' : ' ', !this.required && this.showOptionalLabel ? h("span", { class: "optional-label" }, "(optional)") : '')), h("slot", { key: 'cf7e80e4c4a1e48b4f4efddfe4e8eb0f4a31ed4b', name: "label" }), h("div", { key: '35f1707b3c8d1f1c939d9312b541f32edfc424d1', class: { 'container': true, 'error': Boolean(this.errorText), 'drag': this.dragOver, 'drag-error': this.dragError } }, h("div", { key: '327f71aaaa7d4920a62118ea956c4c128907fae6', class: { 'label-container': true } }, h("slot", { key: '0c4891ffb0c9d49e2b5b09c3bdbc8d5b2ed3ff2d', name: "left-content" })), h("div", { key: '47dc7cc569d860dc07478c2782c62a0d25b3df07', class: { 'file-container': true } }, this.FileContent), h("input", { key: '809568bfed82463cda7851d3717187112cff708b', id: this.inputId, type: "file", accept: (_b = (_a = this.fileTypes) === null || _a === void 0 ? void 0 : _a.join(', ')) !== null && _b !== void 0 ? _b : '*', files: this.file ? [this.file] : undefined, onDrop: this.handleDrop, onDragEnter: this.handleDragEnter, onDragLeave: this.handleDragLeave, onChange: this.handleInputChange, disabled: this.disabled })), (this.errorText || this.helperText) && (h("div", { key: '6f06cba54f65d903b3d22e015e694a154b189df7', class: { 'helper-text-container': true, 'error-text': Boolean(this.errorText) } }, h("span", { key: '2103ca2366b9a7827c42302cea3fa8d8c71bc50b' }, (_c = this.errorText) !== null && _c !== void 0 ? _c : this.helperText)))));
+        return (h(Host, { key: '16d9e9ac3a79cbaab554cd9b8901f2b5a930327d' }, this.label && (h("label", { key: 'a0d3cba9de77959cc1fa9d415e943800997fa1db', class: "label", htmlFor: this.inputId }, this.label, this.required ? '*' : ' ', !this.required && this.showOptionalLabel ? h("span", { class: "optional-label" }, "(optional)") : '')), h("slot", { key: '2ae7b7de344204f341ce8aa8044908bdc183cee1', name: "label" }), h("div", { key: 'd4ba3206869ed403217e37b20e9557784f98cfd2', class: { 'container': true, 'error': Boolean(this.errorText), 'drag': this.dragOver, 'drag-error': this.dragError } }, h("div", { key: '7f344b81e11e07b00e8cdbee5a89cc4300e02b4b', class: { 'label-container': true } }, h("slot", { key: 'c187ed9574eab9e21669a04d6a9d663adabcab75', name: "left-content" })), h("div", { key: '6bc08c41c298577cf71ca7f7209764d62fc42641', class: { 'file-container': true } }, this.FileContent), h("input", { key: '1696d38e71235671341b9e4388fa2a8478d5b259', id: this.inputId, type: "file", accept: (_b = (_a = this.fileTypes) === null || _a === void 0 ? void 0 : _a.join(', ')) !== null && _b !== void 0 ? _b : '*', files: this.file ? [this.file] : undefined, onDrop: this.handleDrop, onDragEnter: this.handleDragEnter, onDragLeave: this.handleDragLeave, onChange: this.handleInputChange, disabled: this.disabled })), (this.errorText || this.helperText) && (h("div", { key: 'f2c25a388395daf16082856e8135d952e4166247', class: { 'helper-text-container': true, 'error-text': Boolean(this.errorText) } }, h("span", { key: 'd6af4e67851048e79f3342156e35b87928dbef7c' }, (_c = this.errorText) !== null && _c !== void 0 ? _c : this.helperText)))));
     }
     static get is() { return "cpsl-file-upload"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/cpsl-grid/cpsl-grid.js

@@ -4,9 +4,9 @@ export class CpslGrid {
         this.fixed = false;
     }
     render() {
-        return (h(Host, { key: '76084ea41988e4fdff4a48dc400988d2aa190a56', class: {
+        return (h(Host, { key: '72e5d85f46e36e4feea4f0cbb9dd9fbfab730d2a', class: {
                 'grid-fixed': this.fixed,
-            } }, h("slot", { key: '1eb8c755910397d58a2165238a1428769623ef6b' })));
+            } }, h("slot", { key: 'a42dd16ac733d55025b5309ec2db375622f5d763' })));
     }
     static get is() { return "cpsl-grid"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/cpsl-hero/cpsl-hero.js

@@ -11,7 +11,7 @@ export class CpslHero {
     }
     render() {
         var _a;
-        return (h(Host, { key: '21f06bee97c15394204e51345265840c0bb57ded', class: {
+        return (h(Host, { key: '0f43804725a20f7b26328249edbc8c8e466e61c3', class: {
                 // VARIANTS
                 connection: this.variant === 'connection',
                 pending: this.variant === 'pending' || this.variant === 'customContent',
@@ -19,7 +19,7 @@ export class CpslHero {
                 add: this.variant === 'add',
                 failed: this.variant === 'failed',
                 externalWalletConnection: this.variant === 'externalWalletConnection',
-            } }, h("div", { key: 'cbd8e3439b0917cf5b45d79056211cb8fe43a587', class: "backgroundContainer", style: { height: `${(_a = this.height) !== null && _a !== void 0 ? _a : 180}px` } }, h("div", { key: '419c8fdf5558e6f196a46dc6022daf3ad6050251', class: { background: true, defaultTheme: this.withDefaultTheme } }, h("div", { key: '419820dbeb1d174aa8debc37771611179475eb40', class: "ring ring3" }), h("div", { key: 'c910e05f614e93c52bd7443cc292dfcd9efb53e6', class: "ring ring2" }), h("div", { key: 'ebc6fe78bfdf8cbbcef6a72c5d1b0da2e90b7bc3', class: "ring ring1" }), h("div", { key: '19f2098025fe8ca8dc9ae5e9a1b8b2df3c2b2937', class: "ring ring0" }), h("div", { key: 'd4c086b614baa607cf12bd33a3243590fd518ae3', class: { ringCenter: true, defaultTheme: this.withDefaultTheme } }, this.variant === 'connection' && (h(Fragment, { key: 'e01ed456653b8b81789f7d02d821c5180dc2f297' }, h("img", { key: '68f9d50c4776ab841478532d1a1510e4ac4db66c', class: "connectionImage", src: Images.heroDefault }), h("div", { key: '406a7afddbebb879e2082e8d7314dc3f68b6b1f1', class: "connectDiagramContainer" }, h("slot", { key: 'c29cc57f7872e5458db148ec9ce3e0b1bdc5727e', name: "connectionLeft" }), h("slot", { key: '643a3601a1dc0c394fb2717a3c23ec2315c53b43', name: "connectionRight" })))), this.variant === 'pending' && h("img", { key: '013cac7f7c99588a16622f3027562593d708109f', class: "pendingImage", src: Images.heroPending }), this.variant === 'approved' && (h(Fragment, { key: '370cc25aeb469aac547fa7c11c426e052e669fb1' }, !this.withDefaultTheme && h("img", { key: '1431b42645379d3f331d146f496968cadd1f9761', class: "approvedImage", src: Images.heroSuccess }), h("cpsl-icon", { key: 'c0dd8c73fb4dcdc1a6c9f42802c71cd5bd0e211c', class: "centerIcon", icon: this.withDefaultTheme ? 'heroCheckmark' : 'heroCheckmarkCapsule' }))), this.variant === 'add' && (h(Fragment, { key: '2197f3804a5af7d954ed40ea38afcc120606ad6d' }, h("cpsl-icon", { key: '3b36c38cb5bd8ce1817ca89de29cbe1b9645ac54', class: "centerIcon", icon: this.withDefaultTheme ? 'heroPlusCircle' : 'heroPlusCircleCapsule' }))), this.variant === 'failed' && h("cpsl-icon", { key: '905354cdb7459375048dec7c9713bb14481e8888', class: "centerIcon", icon: "heroAlertCircle" }), this.variant === 'externalWalletConnection' && (h(Fragment, { key: '450bddc3c57c2b0648abb289d821338f470f2337' }, h("cpsl-icon", { key: '485d9f1ea3b38f73a55e1c19d2d5d196ca57bafb', class: "externalConnectionIcon", icon: "heroExternalConnection" }), h("div", { key: 'a753a251cf9eb8f70597677be409aa2ebaaa592b', class: "connectDiagramContainer" }, h("slot", { key: 'f95fb7ed3cc09218a3d4a554c619b6f379d5135d', name: "connectionLeft" }), h("slot", { key: '0fe2e6febecce576da0c6a45ece6f3fb4c1fd815', name: "connectionRight" })))), this.variant === 'customContent' && (h("div", { key: '66a332f8b5c4f0aec4ab05b7bf6c5acbc25cb983', class: "customImageContainer" }, h("slot", { key: '08e67afa1a33d425eee83e7c2a4e21c94164a0ed', name: "image" })))), !this.hideFadeOut && (h(Fragment, { key: '547cf7a394cf4b4cc94d475336fdd97926aeaed9' }, h("div", { key: '70762d3a1133ea003117eaee8f4e38d5ce084860', class: "fadeOut" }), h("div", { key: '8b80e6988fc77cec6a0b55d26678a22ba20f566b', class: "cover" }))))), h("cpsl-text", { key: '6ebe7f8fa96fa60a3a8f3ed2fabaada0f7b96aeb', variant: "headingXS", color: "primary", weight: "semiBold" }, this.title), this.subtitle && (h("cpsl-text", { key: 'f80a52a7171f8390e3f98be1f4c37ec917110667', variant: "bodyS", weight: "medium", color: "secondary" }, this.subtitle))));
+            } }, h("div", { key: '7ff260b7fa83024f5f473f1488d2d129cfaba6ba', class: "backgroundContainer", style: { height: `${(_a = this.height) !== null && _a !== void 0 ? _a : 180}px` } }, h("div", { key: 'fef56a7132d376cc21dc151b5aef05d462f79098', class: { background: true, defaultTheme: this.withDefaultTheme } }, h("div", { key: 'f2537306c466e77e6c044ec988f12157611ccdba', class: "ring ring3" }), h("div", { key: '02d4ea64b5f0a359279534da8cbbc71d892c7c4b', class: "ring ring2" }), h("div", { key: 'd5785d9cea769365b4d6fd4d6aca0041ff340e4e', class: "ring ring1" }), h("div", { key: '5f1ecc0b9f2daddce44c0879eba58342f914bd52', class: "ring ring0" }), h("div", { key: '73869ae81871c12c46cc9e36353bf26b62e6db49', class: { ringCenter: true, defaultTheme: this.withDefaultTheme } }, this.variant === 'connection' && (h(Fragment, { key: 'e550ac0bd65a38d443fa11a1d54ac2c6f72706e3' }, h("img", { key: '9ec51a9adca669f8a7ddb3f6c08f25eb5ffa15b1', class: "connectionImage", src: Images.heroDefault }), h("div", { key: 'a28d1d2782c5b779e1cabd3c186110ed5c6e78e1', class: "connectDiagramContainer" }, h("slot", { key: '6aa0a2d54f8d3b26fc27ef4c65dd8c3bfad38e81', name: "connectionLeft" }), h("slot", { key: '23f377aa071e196c25ddef031b57d00161901e02', name: "connectionRight" })))), this.variant === 'pending' && h("img", { key: '83ad71da3389c06c2eb189a2a23deb9b34656bdd', class: "pendingImage", src: Images.heroPending }), this.variant === 'approved' && (h(Fragment, { key: '764ce09b8e297b9b5ff4a8f4352ab9e972d8a600' }, !this.withDefaultTheme && h("img", { key: '8cb1a0eb314cfed91a8494dd9ddd2f6b62a62ed1', class: "approvedImage", src: Images.heroSuccess }), h("cpsl-icon", { key: 'e58d74c4368b774583a665c582cb0f785771eda7', class: "centerIcon", icon: this.withDefaultTheme ? 'heroCheckmark' : 'heroCheckmarkCapsule' }))), this.variant === 'add' && (h(Fragment, { key: 'd572bc623cbdaa16fa166cdb886d168c208f48cb' }, h("cpsl-icon", { key: 'd3a890b7022c1c70d423e32a4450cbc558f070d7', class: "centerIcon", icon: this.withDefaultTheme ? 'heroPlusCircle' : 'heroPlusCircleCapsule' }))), this.variant === 'failed' && h("cpsl-icon", { key: '45bd42ce47c082a137f4139626e308c3e507af6f', class: "centerIcon", icon: "heroAlertCircle" }), this.variant === 'externalWalletConnection' && (h(Fragment, { key: '6a8f0b2d2da82f78360a3da00409e1081da9b2dd' }, h("cpsl-icon", { key: '4d1e2ef2ce1ce98060da43de7b8e8a4e0ce79444', class: "externalConnectionIcon", icon: "heroExternalConnection" }), h("div", { key: '8083965b97a8588a4ec559f9a9a141b453c95d09', class: "connectDiagramContainer" }, h("slot", { key: 'fe069b38214ae56c2153792e1d631537d317f2ae', name: "connectionLeft" }), h("slot", { key: 'c67db85969032ddfc059c6be9d6fcaa40b765f49', name: "connectionRight" })))), this.variant === 'customContent' && (h("div", { key: '68117dc4a67a80f3e25ec0b76a0fdbe60bd9fbd2', class: "customImageContainer" }, h("slot", { key: '6d135752545becd4207091d393b0fd811439eff3', name: "image" })))), !this.hideFadeOut && (h(Fragment, { key: '6e2066f90038a297e77bb57b446ecfb82bd2d38b' }, h("div", { key: 'e916258f80da97a6544f88ca710b02b50f848cd7', class: "fadeOut" }), h("div", { key: 'f5f2bbe26653d030dbbdace587937f5e20d204c4', class: "cover" }))))), h("cpsl-text", { key: '759de2b27dd9a0c5171df86564e961da6e3d4ea4', variant: "headingXS", color: "primary", weight: "semiBold" }, this.title), this.subtitle && (h("cpsl-text", { key: '36d2fb45d985206a128b44346bc535b564460a01', variant: "bodyS", weight: "medium", color: "secondary" }, this.subtitle))));
     }
     static get is() { return "cpsl-hero"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/cpsl-icon/cpsl-icon.css

@@ -59,11 +59,11 @@
   --height: 24px;
   --width: 24px;
   --inset: 0px;
-  --svg-height: calc(var(--height) - (2 * var(--inset)));
-  --svg-width: calc(var(--width) - (2 * var(--inset)));
-  --icon-color: currentColor;
-  --icon-fill-color: currentColor;
-  --icon-stroke-color: currentColor;
+  --computed-height: calc(var(--height) - (2 * var(--inset)));
+  --computed-width: calc(var(--width) - (2 * var(--inset)));
+  --icon-color: var(--icon-color, currentColor);
+  --icon-fill-color: var(--icon-fill-color, var(--icon-color, currentColor));
+  --icon-stroke-color: var(--icon-stroke-color, var(--icon-color, currentColor));
   width: var(--width);
   height: var(--height);
 }
@@ -82,13 +82,18 @@
   align-items: center;
   width: 100%;
   height: 100%;
+  border: var(--icon-border, auto);
+  border-radius: var(--icon-border-radius, 0);
+  background: var(--icon-background, transparent);
   color: var(--icon-color);
+  box-sizing: border-box;
 }
 
 :host svg {
-  width: var(--svg-width, "100%");
-  height: var(--svg-height, "100%");
+  width: var(--computed-width, "100%");
+  height: var(--computed-height, "100%");
   filter: var(--filter);
+  border-radius: var(--icon-border-radius, 0);
 }
 :host svg .background-16 {
   fill: var(--cpsl-color-background-16);
@@ -104,7 +109,9 @@
 }
 
 :host img {
-  width: 100%;
-  height: 100%;
+  width: var(--computed-width, 100%);
+  height: var(--computed-height, 100%);
+  max-width: 100%;
+  max-height: 100%;
   object-fit: contain;
 }