adp-web-components 0.1.85 → 0.1.86

package/dist/collection/components/components/shift-select.js

@@ -0,0 +1,568 @@
+/*!
+ * Built by ShiftSoftware
+ * Copyright (c)
+ */
+import { Host, h } from "@stencil/core";
+import cn from "../../global/lib/cn";
+import Loader from "~assets/loader.svg";
+import { TickIcon } from "../../global/assets/tick-icon";
+import { ArrowUpIcon } from "../../global/assets/arrow-up-icon";
+import { AddIcon } from "../../global/assets/add-icon";
+export class ShiftSelect {
+    constructor() {
+        this.hasTick = true;
+        this.hasArrow = true;
+        this.searchValue = '';
+        this.isOpen = false;
+        this.selectedValue = '';
+        this.clearable = false;
+        this.options = [];
+        this.reverseOptions = false;
+        this.forceOpenUpwards = false;
+        this.openUpwards = false;
+        this.toggleDropdown = () => {
+            if (this.isOpen && !this.searchable)
+                this.updateContext({ isOpen: false });
+            else
+                this.adjustDropdownPosition();
+        };
+        this.closeDropdown = (event) => {
+            if (!this.el.contains(event.target)) {
+                this.updateContext({ isOpen: false });
+            }
+        };
+        this.handleResize = () => {
+            if (this.isOpen) {
+                this.adjustDropdownPosition();
+            }
+        };
+        this.onSearchInput = (event) => {
+            const target = event.target;
+            this.updateContext({ searchValue: target.value, selectedValue: '' });
+        };
+        this.clearInput = () => {
+            this.updateContext({ searchValue: '', selectedValue: '' });
+            const selectButton = this.el.getElementsByClassName('form-input-select')[0];
+            selectButton.focus();
+            if (!this.isOpen)
+                this.adjustDropdownPosition();
+        };
+    }
+    async componentDidLoad() {
+        document.addEventListener('click', this.closeDropdown);
+        document.addEventListener('keydown', this.handleKeyDown.bind(this));
+        window.addEventListener('resize', this.handleResize);
+    }
+    adjustDropdownPosition() {
+        requestAnimationFrame(() => {
+            const selectButton = this.el.getElementsByClassName('form-input-select')[0];
+            const selectContainer = this.el.getElementsByClassName('form-select-container')[0];
+            const rect = selectButton.getBoundingClientRect();
+            const spaceBelow = window.innerHeight - rect.bottom - 20; // 20 is padding
+            this.openUpwards = spaceBelow < selectContainer.getBoundingClientRect().height || this.forceOpenUpwards;
+            setTimeout(() => {
+                this.updateContext({ isOpen: true });
+            }, 10);
+        });
+    }
+    handleKeyDown(event) {
+        if (!this.isOpen)
+            return;
+        if (event.key === 'Escape') {
+            this.updateContext({ isOpen: false });
+        }
+    }
+    async disconnectedCallback() {
+        document.removeEventListener('click', this.closeDropdown);
+        document.removeEventListener('keydown', this.handleKeyDown.bind(this));
+        window.removeEventListener('resize', this.handleResize);
+    }
+    render() {
+        const selectedItem = this.options.find(item => this.selectedValue === item.value);
+        return (h(Host, { key: '08bf24aa2d919f5ce28dac3f0cd3c14879d86049', translate: "no" }, h("div", { key: '672d7685dc79f8738e4846d07db52a9dff63bc6e', part: `${this.name}-container form-input-container`, class: cn('form-input-container', { open: this.isOpen, disabled: this.disableInput, disableInput: this.disableInput }) }, h("slot", { key: '6cb72636e64d578009e1ddd3598f61aaa8bfaa0c' }), h("input", { key: '0fed4953de58ec04f6ef3f9ca512f8a25f1bc87b', type: "text", disabled: this.disableInput, part: `${this.name}-input-select form-input-select`, value: this.searchable ? this.searchValue : (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.label) || '', readOnly: !this.searchable, onInput: this.onSearchInput, onClick: this.toggleDropdown, placeholder: this.placeholder, class: cn('form-input-style form-input-select', {
+                'form-input-error-style': this.isError,
+            }) }), h("div", { key: 'e1388edd8279196614712aed3529f5901a22720c', part: `${this.name}-select-icon-container form-input-select-icon-container`, class: cn('form-input-select-icon-container cursor-pointer', { 'pointer-events-none!': !((selectedItem || this.searchValue) && this.clearable) }) }, (selectedItem || this.searchValue) && this.clearable ? (h(AddIcon, { part: `${this.name}-cross-icon`, onClick: this.clearInput, class: "form-input-select-icon cross" })) : (this.hasArrow && h(ArrowUpIcon, { part: `${this.name}-arrow-icon select-arrow`, class: "cursor-pointer form-input-select-icon pointer-events-none! arrow" }))), h("div", { key: '7dd018430bd09e03f3d45b400e61cbbe4b9a4d3c', part: cn(`${this.name}-select-container form-select-container`, {
+                'form-select-container-upwards': this.openUpwards || this.forceOpenUpwards,
+                'form-select-container-downwards': !this.openUpwards && !this.forceOpenUpwards,
+            }), class: cn('form-select-container', {
+                upwards: this.openUpwards || this.forceOpenUpwards,
+                downwards: !this.openUpwards && !this.forceOpenUpwards,
+            }) }, !!this.options.length &&
+            (this.reverseOptions ? [...this.options].reverse() : this.options).map(option => this.fullRenderOption ? (this.fullRenderOption(option, this.selectedValue === option.value, this.handleSelection)) : (h("button", { type: "button", part: cn(`${this.name}-select-option form-select-option`, { 'form-select-option-selected': this.selectedValue === option.value }), onClick: () => this.handleSelection(option), class: cn('form-select-option', {
+                    selected: this.selectedValue === option.value,
+                }) }, this.renderOption ? (this.renderOption(option, this.selectedValue === option.value)) : (h("div", { part: `${this.name}-select-option-label form-select-option-label`, class: "form-select-option-label" }, option.label)), this.hasTick && h(TickIcon, { part: `${this.name}-tick-icon`, class: "form-select-option-tick" })))), !this.options.length && (h("div", { key: '9fe470cfa70e1e544c4816b06a78d617fb702f6a', part: `${this.name}-select-empty-container form-select-empty-container`, class: cn('form-select-empty-container', { error: this.fetchingErrorText }) }, this.fetchingErrorText, !this.fetchingErrorText &&
+            (this.isLoading ? h("img", { part: `${this.name}-select-spinner form-select-spinner`, class: "form-select-spinner", src: Loader }) : this.noSelectionText)))))));
+    }
+    static get is() { return "shift-select"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["shift-select.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["shift-select.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "name": {
+                "type": "string",
+                "attribute": "name",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "hasTick": {
+                "type": "boolean",
+                "attribute": "has-tick",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "true"
+            },
+            "hasArrow": {
+                "type": "boolean",
+                "attribute": "has-arrow",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "true"
+            },
+            "searchValue": {
+                "type": "string",
+                "attribute": "search-value",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "isError": {
+                "type": "boolean",
+                "attribute": "is-error",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "searchable": {
+                "type": "boolean",
+                "attribute": "searchable",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "isLoading": {
+                "type": "boolean",
+                "attribute": "is-loading",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "placeholder": {
+                "type": "string",
+                "attribute": "placeholder",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "disableInput": {
+                "type": "boolean",
+                "attribute": "disable-input",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "isOpen": {
+                "type": "boolean",
+                "attribute": "is-open",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "noSelectionText": {
+                "type": "string",
+                "attribute": "no-selection-text",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "selectedValue": {
+                "type": "string",
+                "attribute": "selected-value",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "clearable": {
+                "type": "boolean",
+                "attribute": "clearable",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "options": {
+                "type": "unknown",
+                "attribute": "options",
+                "mutable": false,
+                "complexType": {
+                    "original": "FormSelectItem[]",
+                    "resolved": "FormSelectItem[]",
+                    "references": {
+                        "FormSelectItem": {
+                            "location": "global",
+                            "id": "global::FormSelectItem"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "[]"
+            },
+            "reverseOptions": {
+                "type": "boolean",
+                "attribute": "reverse-options",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "forceOpenUpwards": {
+                "type": "boolean",
+                "attribute": "force-open-upwards",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "fetchingErrorText": {
+                "type": "any",
+                "attribute": "fetching-error-text",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | boolean",
+                    "resolved": "boolean | string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "handleSelection": {
+                "type": "unknown",
+                "attribute": "handle-selection",
+                "mutable": false,
+                "complexType": {
+                    "original": "(option: FormSelectItem) => void",
+                    "resolved": "(option: FormSelectItem) => void",
+                    "references": {
+                        "FormSelectItem": {
+                            "location": "global",
+                            "id": "global::FormSelectItem"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false
+            },
+            "onSelection": {
+                "type": "unknown",
+                "attribute": "on-selection",
+                "mutable": false,
+                "complexType": {
+                    "original": "(newSelection: FormSelectItem) => void",
+                    "resolved": "(newSelection: FormSelectItem) => void",
+                    "references": {
+                        "FormSelectItem": {
+                            "location": "global",
+                            "id": "global::FormSelectItem"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false
+            },
+            "renderOption": {
+                "type": "unknown",
+                "attribute": "render-option",
+                "mutable": false,
+                "complexType": {
+                    "original": "(option: FormSelectItem, isSelected) => any",
+                    "resolved": "(option: FormSelectItem, isSelected: any) => any",
+                    "references": {
+                        "FormSelectItem": {
+                            "location": "global",
+                            "id": "global::FormSelectItem"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false
+            },
+            "fullRenderOption": {
+                "type": "unknown",
+                "attribute": "full-render-option",
+                "mutable": false,
+                "complexType": {
+                    "original": "(option: FormSelectItem, isSelected, handleSelection) => any",
+                    "resolved": "(option: FormSelectItem, isSelected: any, handleSelection: any) => any",
+                    "references": {
+                        "FormSelectItem": {
+                            "location": "global",
+                            "id": "global::FormSelectItem"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false
+            },
+            "updateContext": {
+                "type": "unknown",
+                "attribute": "update-context",
+                "mutable": false,
+                "complexType": {
+                    "original": "(newValues: Partial<{ isOpen: boolean; searchValue: string; selectedValue: string }>) => void",
+                    "resolved": "(newValues: Partial<{ isOpen: boolean; searchValue: string; selectedValue: string; }>) => void",
+                    "references": {
+                        "Partial": {
+                            "location": "global",
+                            "id": "global::Partial"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false
+            }
+        };
+    }
+    static get states() {
+        return {
+            "openUpwards": {}
+        };
+    }
+    static get elementRef() { return "el"; }
+}

package/dist/collection/components/components/shift-slider.js

@@ -22,7 +22,7 @@ export class ShiftSlider {
             this.flexibleContainerRef.stopAnimation = false;
     }
     render() {
-        return (h(Host, { key: '94cef19e956bf48770b12235dfd7f0e8f4f1986a', translate: "no" }, h("flexible-container", { key: 'd4bc2c483e18113f9e76832f3193a44bb5319834', stopAnimation: true, classes: "relative" }, this.components.map((listElement, idx) => (h("div", { class: cn('w-full transition !duration-1000', 'element-number-' + idx, {
+        return (h(Host, { key: 'bb296cbb3e8ca2d23bdfde378220cbfd9f7fcb43', translate: "no" }, h("flexible-container", { key: '488fc550280ac1e0f44c56dbccd0aefaca7d3c1b', stopAnimation: true, classes: "relative" }, this.components.map((listElement, idx) => (h("div", { class: cn('w-full transition !duration-1000', 'element-number-' + idx, {
                 'opacity-0 absolute top-0 !pointer-events-none [&_*]:!pointer-events-none': this.activeIndex !== idx,
                 'translate-x-[110%]': this.activeIndex < idx,
                 '-translate-x-[110%]': this.activeIndex > idx,

package/dist/collection/components/components/shift-switch.js

@@ -15,7 +15,7 @@ export class ShiftSwitch {
         return this.inputRef.checked;
     }
     render() {
-        return (h(Host, { key: '56b4c3ee61a76ec12990dd79a9c86c004cba862f', translate: "no" }, h("label", { key: '37f09eff00b011f07f88a6569a66622919a2d783', part: "shift-checkbox", class: cn('relative flex items-center cursor-pointer select-none', { 'opacity-75 cursor-default': this.disabled }) }, h("input", { key: 'a0d481253d6e0b4e37e951f4e3e87f4a51e2c46a', type: "checkbox", value: "true", name: this.name, checked: this.checked, disabled: this.disabled, onChange: this.onChange, class: "shift-checkbox peer hidden" }), h("div", { key: '21b9f2f8f6b88bd3c135ecc7e17362dad1ac83e4', class: "relative w-[50px] h-[24px] rounded-full border-2 border-blue-300 bg-blue-100 peer-checked:bg-blue-500 peer-checked:[&_div]:translate-x-[28px] peer-checked:border-blue-500 transition-colors duration-300" }, h("div", { key: '49ea9f35ffde9912ffb8a599c50cd94d520ae257', class: "absolute top-[-2px] left-[-2px] size-[24px] rounded-full bg-white shadow-md transition-all duration-300 peer-checked:bg-blue-500" })), h("span", { key: 'bfa74d628fe97883f54842922d8ede31fdedba44', class: "ms-2 text-gray-700" }, this.label))));
+        return (h(Host, { key: '6eb3154f4ffe47e44490566d3832fe63038cc9fa', translate: "no" }, h("label", { key: '3893c7b0dec68b954174bfc38e8fad5cc097f353', part: "shift-checkbox", class: cn('relative flex items-center cursor-pointer select-none', { 'opacity-75 cursor-default': this.disabled }) }, h("input", { key: '05248f71415c5fcb08968929dbd488b6c7002d2e', type: "checkbox", value: "true", name: this.name, checked: this.checked, disabled: this.disabled, onChange: this.onChange, class: "shift-checkbox peer hidden" }), h("div", { key: '2a3a617a43b9b637c0b2b3e8c1b50cf233bb5960', class: "relative w-[50px] h-[24px] rounded-full border-2 border-blue-300 bg-blue-100 peer-checked:bg-blue-500 peer-checked:[&_div]:translate-x-[28px] peer-checked:border-blue-500 transition-colors duration-300" }, h("div", { key: 'a7bc307e2892c7addd7422844ebb92f9fef7bbac', class: "absolute top-[-2px] left-[-2px] size-[24px] rounded-full bg-white shadow-md transition-all duration-300 peer-checked:bg-blue-500" })), h("span", { key: '3c0a20cf788a1368451e6d872702afece834ab26', class: "ms-2 text-gray-700" }, this.label))));
     }
     static get is() { return "shift-switch"; }
     static get originalStyleUrls() {

package/dist/collection/components/components/shift-tab-content.js

@@ -22,7 +22,7 @@ export class ShiftTabContent {
         newElement.classList.add('slide-content-in');
     }
     render() {
-        return (h(Host, { key: 'e2504e858e72f2d191ab1dcbd959a01d7d5e35fb', translate: "no" }, h("flexible-container", { key: '26bb816814b22503ed350a5d4032f6aa3ea9aab8' }, Object.entries(this.components).map(([componentName, component]) => (h("div", { onAnimationEnd: () => this.clearAnimationClasses(componentName), class: cn('!w-full transition !duration-0', `tab-${componentName}`, {
+        return (h(Host, { key: 'fb05a73f2ff6d3260b7caeeaeaa79bc990a90a21', translate: "no" }, h("flexible-container", { key: '939e63dfb225498d98d9e8cec42f03d4b51d7a88' }, Object.entries(this.components).map(([componentName, component]) => (h("div", { onAnimationEnd: () => this.clearAnimationClasses(componentName), class: cn('!w-full transition !duration-0', `tab-${componentName}`, {
                 'absolute opacity-0 top-0 !pointer-events-none [&_*]:!pointer-events-none translate-x-[-200%] translate-y-[200%]': componentName !== this.activeComponent,
             }) }, component))))));
     }

package/dist/collection/components/components/shift-tabs.js

@@ -6,9 +6,9 @@ import { h } from "@stencil/core";
 import cn from "../../global/lib/cn";
 export class ShiftTabs {
     render() {
-        return (h("div", { key: 'd54e113bcdfd519318f6045da0b6c0aa0a44edc3', class: this.containerClasses }, h("div", { key: '442468efc6d28553f8d7fe23faaf71f274c34559', class: cn('border-b relative flex mb-[6px] ps-[12px] gap-[4px]', this.tabClasses) }, this.tabs.map((label, idx) => (h("button", { key: label + idx, onClick: () => !(this.activeTabIndex === idx || this.activeTabLabel === label) && this.changeActiveTab({ label, idx }), class: cn('px-[16px] cursor-pointer after:w-full py-[6px] after:h-[1px] after:left-0 after:bottom-0 after:absolute after:bg-white after:opacity-0 after:translate-y-full after:z-10 after:duration-500 after:transition text-[17px] relative transition-colors !border-b-0 duration-500 font-medium text-black bg-[#f6f6f6] border border-gray-200 rounded-t-[4px] focus:outline-none', {
+        return (h("div", { key: 'a5a56a5274278345bc12366513fec0c092c201e5', class: this.containerClasses }, h("div", { key: 'ace8f36dd8babfb0b79e075d52899e0c544fd5e6', class: cn('border-b relative flex mb-[6px] ps-[12px] gap-[4px]', this.tabClasses) }, this.tabs.map((label, idx) => (h("button", { key: label + idx, onClick: () => !(this.activeTabIndex === idx || this.activeTabLabel === label) && this.changeActiveTab({ label, idx }), class: cn('px-[16px] cursor-pointer after:w-full py-[6px] after:h-[1px] after:left-0 after:bottom-0 after:absolute after:bg-white after:opacity-0 after:translate-y-full after:z-10 after:duration-500 after:transition text-[17px] relative transition-colors !border-b-0 duration-500 font-medium text-black bg-[#f6f6f6] border border-gray-200 rounded-t-[4px] focus:outline-none', {
                 'bg-white cursor-default after:opacity-100': this.activeTabIndex === idx || this.activeTabLabel === label,
-            }) }, label)))), h("flexible-container", { key: 'ae9f36c652a180d4a4102c39a8fe2fac8995fe0e' }, h("slot", { key: 'e6c6b39356004f7e1eef4f4c606965595c40c7b2' }))));
+            }) }, label)))), h("flexible-container", { key: '7803f0c291093c85cebc9f84e33bcd98d13cb3cd' }, h("slot", { key: '44d2c6539b71057c6023d8bfafe2b2c6a98e4c21' }))));
     }
     static get is() { return "shift-tabs"; }
     static get originalStyleUrls() {

package/dist/collection/components/form-elements/components/form-input-prefix.js

@@ -7,7 +7,9 @@ import cn from "../../../global/lib/cn";
 export const FormInputPrefix = ({ direction, prefix, name }) => {
     if (!prefix)
         return false;
-    return (h("div", { dir: direction, class: "form-input-prefix", part: cn('form-input-prefix', {
+    return (h("div", { dir: direction, class: cn('form-input-prefix', {
+            [`${name}-prefix`]: !!name,
+        }), part: cn('form-input-prefix', {
             [`${name}-prefix`]: !!name,
         }) }, prefix));
 };

package/dist/collection/components/form-elements/form-checkbox.js

@@ -28,7 +28,7 @@ export class FormCheckbox {
     render() {
         const { disabled, meta, errorMessage, isError } = this.form.getInputState(this.name);
         const { label, errorTextMessage } = getInputLocalization(this, meta, errorMessage);
-        return (h(Host, { key: '1f39a1d7bd88114acd3515b28ed18caf69cec1ce', translate: "no" }, h("div", { key: '42e12d17027f8e475525711a108af678376eacfe', part: this.name, id: this.wrapperId, class: cn('form-input-label-container', this.wrapperClass, disabled) }, h("div", { key: '05c198ec2b5e3b1b6c1e718c83127aed49755751', part: `${this.name}-container form-input-container`, class: "form-input-container" }, h("shift-checkbox", { key: '8664d270f9895dcb4dd89050a561ae900737419a', name: this.name, label: label, class: "form-checkbox" })), h(FormErrorMessage, { key: 'de5837cef7edc257a5b63c40ae1b5f105d0baebc', name: this.name, isError: isError, errorMessage: errorTextMessage }))));
+        return (h(Host, { key: 'ea82df7ac72163a1c0bd9c8c53f5b295d7ec5ebb', translate: "no" }, h("div", { key: 'b244a04294d090892807133ba36299a24c8d2334', part: this.name, id: this.wrapperId, class: cn('form-input-label-container', this.wrapperClass, disabled) }, h("div", { key: 'b4cd00753e462162f92556c7e77d1327e76ddbd7', part: `${this.name}-container form-input-container`, class: "form-input-container" }, h("shift-checkbox", { key: 'cb2eabb31194c6c17ed16bc35882ec8a9ecec33e', name: this.name, label: label, class: "form-checkbox" })), h(FormErrorMessage, { key: '57f6e15f89da65bb428eb1c2bd6727a4a1b3bc3e', name: this.name, isError: isError, errorMessage: errorTextMessage }))));
     }
     static get is() { return "form-checkbox"; }
     static get originalStyleUrls() {