adp-web-components 0.1.85 → 0.1.87

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() {