adp-web-components 0.1.89 → 0.1.91

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

@@ -4,147 +4,77 @@
  */
 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";
-const PORTAL_STYLES = `
-  @keyframes spin-animation { to { transform: rotate(360deg); } }
-
-  .form-select-container {
-    z-index: 10;
-    display: flex;
-    flex-direction: column;
-    pointer-events: none;
-    position: fixed;
-    background-color: #fff;
-    border: 1px solid rgb(226 232 240);
-    border-radius: 0.375rem;
-    box-shadow: 0 1px 3px 0 rgba(0,0,0,0.1), 0 1px 2px -1px rgba(0,0,0,0.1);
-    opacity: 0;
-    transition-property: opacity;
-    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-    transition-duration: 0.3s;
-    max-height: 250px;
-    overflow: auto;
-    width: var(--dropdown-width, auto);
-  }
-  .form-select-container.open {
-    opacity: 1;
-    pointer-events: auto;
-  }
-  .form-select-container.upwards {
-    transform: translateY(-100%);
-  }
-
-  .form-select-option {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    text-align: start;
-    padding: 0.5rem 1rem;
-    background: none;
-    border: none;
-    width: 100%;
-    font: inherit;
-    color: inherit;
-    cursor: pointer;
-  }
-  .form-select-option:hover {
-    background-color: rgb(241 245 249);
-  }
-  .form-select-option.selected {
-    background-color: rgb(226 232 240);
-  }
-
-  .form-select-option-tick {
-    width: 1.25rem;
-    height: 1.25rem;
-    opacity: 0;
-    transition-property: opacity;
-    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-    transition-duration: 0.3s;
-  }
-  .form-select-option.selected .form-select-option-tick {
-    opacity: 1;
-  }
-
-  .form-select-empty-container {
-    height: 100px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-  .form-select-empty-container.error {
-    color: rgb(239 68 68);
-  }
-
-  .form-select-spinner {
-    animation: spin-animation 2s linear infinite;
-    width: 22px;
-    height: 22px;
-  }
-`;
+import getCustomClassesForPortal from "../../global/lib/get-custom-classes-for-portal";
 export class ShiftSelect {
     constructor() {
         this.hasTick = true;
         this.hasArrow = true;
+        this.gap = 8;
         this.searchValue = '';
+        this.name = '';
         this.isOpen = false;
         this.selectedValue = '';
         this.clearable = false;
+        this.searchable = false;
         this.options = [];
         this.reverseOptions = false;
         this.forceOpenUpwards = false;
-        this.openUpwards = false;
-        this.scrollRafId = null;
+        this.dropdownAncestorClasses = '';
+        this.dropdownEl = null;
+        this.boundKeyDown = (e) => this.handleKeyDown(e);
+        this.setDropdownRef = (el) => {
+            this.dropdownEl = el;
+        };
         this.toggleDropdown = () => {
             if (this.isOpen && !this.searchable)
                 this.updateContext({ isOpen: false });
             else
-                this.adjustDropdownPosition();
+                this.openDropdown();
+        };
+        this.openDropdown = () => {
+            this.adjustDropdownPosition();
+            this.updateContext({ isOpen: true });
+        };
+        this.adjustDropdownPosition = () => {
+            const dropdown = this.dropdownEl;
+            const input = this.getInputEl();
+            if (!dropdown || !input)
+                return;
+            const inputRect = input.getBoundingClientRect();
+            if (!this.isInputInView(inputRect)) {
+                this.updateContext({ isOpen: false });
+                return;
+            }
+            dropdown.style.setProperty('--shift-select-width', `${inputRect.width}px`);
+            const dropdownHeight = dropdown.offsetHeight;
+            const spaceBelow = window.innerHeight - inputRect.bottom - this.gap;
+            const spaceAbove = inputRect.top - this.gap;
+            const openUpwards = this.forceOpenUpwards || (spaceBelow < dropdownHeight && spaceAbove > spaceBelow);
+            const top = openUpwards ? inputRect.top - dropdownHeight - this.gap : inputRect.bottom + this.gap;
+            dropdown.style.setProperty('--shift-select-left', `${inputRect.left}px`);
+            dropdown.style.setProperty('--shift-select-top', `${top}px`);
         };
         this.closeDropdown = (event) => {
             const path = event.composedPath();
-            if (path.includes(this.el) || path.includes(this.portalEl))
+            if (path.includes(this.el))
+                return;
+            if (this.dropdownEl && path.includes(this.dropdownEl))
                 return;
             this.updateContext({ isOpen: false });
         };
         this.handleResize = () => {
-            if (this.isOpen) {
-                this.updateContext({ isOpen: false });
-            }
+            if (this.isOpen)
+                this.adjustDropdownPosition();
         };
         this.handleScroll = (event) => {
             if (!this.isOpen)
                 return;
-            const path = event.composedPath();
-            if (path.includes(this.portalEl))
-                return;
-            if (this.scrollRafId)
+            const target = event.target;
+            if (this.dropdownEl && (this.dropdownEl === target || this.dropdownEl.contains(target)))
                 return;
-            this.scrollRafId = requestAnimationFrame(() => {
-                this.scrollRafId = null;
-                if (!this.isOpen)
-                    return;
-                const selectButton = this.el.getElementsByClassName('form-input-select')[0];
-                if (!selectButton)
-                    return;
-                const rect = selectButton.getBoundingClientRect();
-                const isVisible = rect.bottom > 0 && rect.top < window.innerHeight && rect.right > 0 && rect.left < window.innerWidth;
-                if (!isVisible) {
-                    this.updateContext({ isOpen: false });
-                    return;
-                }
-                const container = this.getDropdownEl();
-                if (!container)
-                    return;
-                const spaceBelow = window.innerHeight - rect.bottom - 20;
-                this.openUpwards = spaceBelow < container.getBoundingClientRect().height || this.forceOpenUpwards;
-                container.style.left = `${rect.left}px`;
-                container.style.setProperty('--dropdown-width', `${rect.width}px`);
-                container.style.top = this.openUpwards ? `${rect.top - 8}px` : `${rect.bottom + 8}px`;
-            });
+            this.adjustDropdownPosition();
         };
         this.onSearchInput = (event) => {
             const target = event.target;
@@ -155,100 +85,55 @@ export class ShiftSelect {
             const selectButton = this.el.getElementsByClassName('form-input-select')[0];
             selectButton.focus();
             if (!this.isOpen)
-                this.adjustDropdownPosition();
+                this.openDropdown();
         };
     }
     async componentDidLoad() {
-        this.portalEl = document.createElement('div');
-        this.portalEl.classList.add('shift-select-portal');
-        this.portalShadow = this.portalEl.attachShadow({ mode: 'open' });
-        const style = document.createElement('style');
-        style.textContent = PORTAL_STYLES;
-        this.portalShadow.appendChild(style);
-        document.body.appendChild(this.portalEl);
-        // Move the dropdown that Stencil just rendered into the portal
-        this.moveToPortal();
         document.addEventListener('click', this.closeDropdown);
-        document.addEventListener('keydown', this.handleKeyDown.bind(this));
+        document.addEventListener('keydown', this.boundKeyDown);
         window.addEventListener('resize', this.handleResize);
         window.addEventListener('scroll', this.handleScroll, true);
+        this.dropdownAncestorClasses = `${this.name}-select ${getCustomClassesForPortal(this.el)}`;
     }
-    componentWillRender() {
-        var _a;
-        // Before Stencil renders, move the dropdown back so vdom diffing works
-        if (!this.portalShadow)
-            return;
-        const dropdown = this.portalShadow.querySelector('.form-select-container');
-        const container = (_a = this.el) === null || _a === void 0 ? void 0 : _a.querySelector('.form-input-container');
-        if (dropdown && container) {
-            container.appendChild(dropdown);
-        }
-    }
-    componentDidRender() {
-        // After Stencil patched the DOM, move the dropdown back to the portal
-        this.moveToPortal();
-    }
-    moveToPortal() {
-        if (!this.portalShadow)
-            return;
-        const dropdown = this.el.querySelector('.form-select-container');
-        if (!dropdown)
-            return;
-        this.portalShadow.appendChild(dropdown);
-        dropdown.classList.toggle('open', this.isOpen);
-    }
-    getDropdownEl() {
-        var _a;
-        return (_a = this.portalShadow) === null || _a === void 0 ? void 0 : _a.querySelector('.form-select-container');
+    getInputEl() {
+        return this.el.getElementsByClassName('form-input-select')[0];
     }
-    adjustDropdownPosition() {
-        requestAnimationFrame(() => {
-            const selectButton = this.el.getElementsByClassName('form-input-select')[0];
-            const selectContainer = this.getDropdownEl();
-            if (!selectButton || !selectContainer)
-                return;
-            const rect = selectButton.getBoundingClientRect();
-            selectContainer.style.setProperty('--dropdown-width', `${rect.width}px`);
-            selectContainer.style.left = `${rect.left}px`;
-            const spaceBelow = window.innerHeight - rect.bottom - 20;
-            const openUp = spaceBelow < selectContainer.getBoundingClientRect().height || this.forceOpenUpwards;
-            this.openUpwards = openUp;
-            selectContainer.style.top = openUp ? `${rect.top - 8}px` : `${rect.bottom + 8}px`;
-            setTimeout(() => {
-                this.updateContext({ isOpen: true });
-            }, 10);
-        });
+    isInputInView(rect) {
+        return rect.bottom > 0 && rect.top < window.innerHeight && rect.right > 0 && rect.left < window.innerWidth;
     }
     handleKeyDown(event) {
         if (!this.isOpen)
             return;
-        if (event.key === 'Escape') {
+        if (event.key === 'Escape')
             this.updateContext({ isOpen: false });
-        }
     }
     async disconnectedCallback() {
-        var _a;
         document.removeEventListener('click', this.closeDropdown);
-        document.removeEventListener('keydown', this.handleKeyDown.bind(this));
+        document.removeEventListener('keydown', this.boundKeyDown);
         window.removeEventListener('resize', this.handleResize);
         window.removeEventListener('scroll', this.handleScroll, true);
-        (_a = this.portalEl) === null || _a === void 0 ? void 0 : _a.remove();
     }
     render() {
         const selectedItem = this.options.find(item => this.selectedValue === item.value);
-        return (h(Host, { key: '994ba10e0837b9284b1b43e68601e16e1c42b480', translate: "no" }, h("div", { key: '8afda3803d31a28ca1e21415d02a586e4a97a9ec', part: `${this.name}-container form-input-container`, class: cn('form-input-container', { open: this.isOpen, disabled: this.disableInput, disableInput: this.disableInput }) }, h("slot", { key: '31792716fc65e8811fa68bc81abb9bbc3758e7de' }), h("input", { key: '5d37e966b98675fbc9d205a58dcf82be61931816', 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 === null || this === void 0 ? void 0 : this.isError,
-            }) }), h("div", { key: 'c734a797a5000aa44b7bad9fe1922cfccc9526d3', 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: '89053a6c5bb3b1bf5efb1d843f1e117c064b4896', 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 form-select-option-tick`, class: "form-select-option-tick" })))), !this.options.length && (h("div", { key: '885044ea7840d8ba8f422a52390a43a18011e866', 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)))))));
+        const dropdownProps = {
+            name: this.name,
+            isOpen: this.isOpen,
+            options: this.options,
+            hasTick: this.hasTick,
+            hasArrow: this.hasArrow,
+            isLoading: this.isLoading,
+            renderOption: this.renderOption,
+            selectedValue: this.selectedValue,
+            setElementRef: this.setDropdownRef,
+            reverseOptions: this.reverseOptions,
+            noSelectionText: this.noSelectionText,
+            handleSelection: this.handleSelection,
+            fullRenderOption: this.fullRenderOption,
+            fetchingErrorText: this.fetchingErrorText,
+        };
+        return (h(Host, { key: '2b17badf9dc04a007506c13f3492f95fcde05a32', translate: "no" }, h("div", { key: '9781ef1f10ef59e6bbdb9d16c5a0979717775305', part: `${this.name}-container form-input-container`, class: cn('form-input-container', { open: this.isOpen, disabled: this.disableInput, disableInput: this.disableInput }) }, h("slot", { key: '0b28b79cc3f84944ddddf6b74da85747581ec905' }), h("input", { key: '91410cca11198865fb3ad37c3b78d69a61577f76', 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: '144ba08cf7d2d6df14ccc646221487c6297a1c3e', 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("shift-portal", { key: '6a780f671c8304bcb25ebc281a5eb7186a2356ba', tag: "shift-select-dropdown", inheritedClasses: this.dropdownAncestorClasses, componentProps: dropdownProps }))));
     }
     static get is() { return "shift-select"; }
     static get originalStyleUrls() {
@@ -263,13 +148,13 @@ export class ShiftSelect {
     }
     static get properties() {
         return {
-            "name": {
-                "type": "string",
-                "attribute": "name",
+            "hasTick": {
+                "type": "boolean",
+                "attribute": "has-tick",
                 "mutable": false,
                 "complexType": {
-                    "original": "string",
-                    "resolved": "string",
+                    "original": "boolean",
+                    "resolved": "boolean",
                     "references": {}
                 },
                 "required": false,
@@ -280,11 +165,12 @@ export class ShiftSelect {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "defaultValue": "true"
             },
-            "hasTick": {
+            "hasArrow": {
                 "type": "boolean",
-                "attribute": "has-tick",
+                "attribute": "has-arrow",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -302,13 +188,13 @@ export class ShiftSelect {
                 "reflect": false,
                 "defaultValue": "true"
             },
-            "hasArrow": {
-                "type": "boolean",
-                "attribute": "has-arrow",
+            "gap": {
+                "type": "number",
+                "attribute": "gap",
                 "mutable": false,
                 "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
+                    "original": "number",
+                    "resolved": "number",
                     "references": {}
                 },
                 "required": false,
@@ -320,7 +206,7 @@ export class ShiftSelect {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "defaultValue": "true"
+                "defaultValue": "8"
             },
             "searchValue": {
                 "type": "string",
@@ -342,28 +228,29 @@ export class ShiftSelect {
                 "reflect": false,
                 "defaultValue": "''"
             },
-            "isError": {
-                "type": "boolean",
-                "attribute": "is-error",
+            "name": {
+                "type": "string",
+                "attribute": "name",
                 "mutable": false,
                 "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
+                    "original": "string",
+                    "resolved": "string",
                     "references": {}
                 },
                 "required": false,
-                "optional": true,
+                "optional": false,
                 "docs": {
                     "tags": [],
                     "text": ""
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "defaultValue": "''"
             },
-            "searchable": {
+            "isError": {
                 "type": "boolean",
-                "attribute": "searchable",
+                "attribute": "is-error",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -371,7 +258,7 @@ export class ShiftSelect {
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": ""
@@ -516,6 +403,26 @@ export class ShiftSelect {
                 "reflect": false,
                 "defaultValue": "false"
             },
+            "searchable": {
+                "type": "boolean",
+                "attribute": "searchable",
+                "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",
@@ -613,7 +520,7 @@ export class ShiftSelect {
                         }
                     }
                 },
-                "required": false,
+                "required": true,
                 "optional": false,
                 "docs": {
                     "tags": [],
@@ -650,8 +557,8 @@ export class ShiftSelect {
                 "attribute": "render-option",
                 "mutable": false,
                 "complexType": {
-                    "original": "(option: FormSelectItem, isSelected) => any",
-                    "resolved": "(option: FormSelectItem, isSelected: any) => any",
+                    "original": "(option: FormSelectItem, isSelected: boolean) => any",
+                    "resolved": "(option: FormSelectItem, isSelected: boolean) => any",
                     "references": {
                         "FormSelectItem": {
                             "location": "global",
@@ -668,22 +575,22 @@ export class ShiftSelect {
                 "getter": false,
                 "setter": false
             },
-            "fullRenderOption": {
+            "updateContext": {
                 "type": "unknown",
-                "attribute": "full-render-option",
+                "attribute": "update-context",
                 "mutable": false,
                 "complexType": {
-                    "original": "(option: FormSelectItem, isSelected, handleSelection) => any",
-                    "resolved": "(option: FormSelectItem, isSelected: any, handleSelection: any) => any",
+                    "original": "(newValues: Partial<{ isOpen: boolean; searchValue: string; selectedValue: string }>) => void",
+                    "resolved": "(newValues: Partial<{ isOpen: boolean; searchValue: string; selectedValue: string; }>) => void",
                     "references": {
-                        "FormSelectItem": {
+                        "Partial": {
                             "location": "global",
-                            "id": "global::FormSelectItem"
+                            "id": "global::Partial"
                         }
                     }
                 },
-                "required": false,
-                "optional": true,
+                "required": true,
+                "optional": false,
                 "docs": {
                     "tags": [],
                     "text": ""
@@ -691,22 +598,22 @@ export class ShiftSelect {
                 "getter": false,
                 "setter": false
             },
-            "updateContext": {
+            "fullRenderOption": {
                 "type": "unknown",
-                "attribute": "update-context",
+                "attribute": "full-render-option",
                 "mutable": false,
                 "complexType": {
-                    "original": "(newValues: Partial<{ isOpen: boolean; searchValue: string; selectedValue: string }>) => void",
-                    "resolved": "(newValues: Partial<{ isOpen: boolean; searchValue: string; selectedValue: string; }>) => void",
+                    "original": "(option: FormSelectItem, isSelected: boolean, handleSelection: (option: FormSelectItem) => void) => any",
+                    "resolved": "(option: FormSelectItem, isSelected: boolean, handleSelection: (option: FormSelectItem) => void) => any",
                     "references": {
-                        "Partial": {
+                        "FormSelectItem": {
                             "location": "global",
-                            "id": "global::Partial"
+                            "id": "global::FormSelectItem"
                         }
                     }
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": ""
@@ -718,7 +625,7 @@ export class ShiftSelect {
     }
     static get states() {
         return {
-            "openUpwards": {}
+            "dropdownAncestorClasses": {}
         };
     }
     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: '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, {
+        return (h(Host, { key: '397213055ce52dc719cb6fdb86c40c87ce0e1b18', translate: "no" }, h("flexible-container", { key: '40e2ca466424bc148cf141196e36b40fccaac62f', 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: '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))));
+        return (h(Host, { key: 'e4f6023057aa7424cbab3355432a81fe87590ea1', translate: "no" }, h("label", { key: 'd5a04311e4277ec506a7d67f96a90b2cf1c32020', part: "shift-checkbox", class: cn('relative flex items-center cursor-pointer select-none', { 'opacity-75 cursor-default': this.disabled }) }, h("input", { key: '048f29e9353bcd70bf279b4ea7faffb28cd933c8', type: "checkbox", value: "true", name: this.name, checked: this.checked, disabled: this.disabled, onChange: this.onChange, class: "shift-checkbox peer hidden" }), h("div", { key: 'a06df4b712843212b09a24012ce94158a3bb1ecd', 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: 'f215c885dd85038a329446b6e58a195803dc4d0f', 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: 'ab1c17ebab61aa808136c1d2bac087cc1205f727', class: "ms-2 text-gray-700" }, this.label))));
     }
     static get is() { return "shift-switch"; }
     static get originalStyleUrls() {