/*!
 * Built by ShiftSoftware
 * Copyright (c)
 */
import { Host, h } from "@stencil/core";
import cn from "../../global/lib/cn";
import { ArrowUpIcon } from "../../global/assets/arrow-up-icon";
import { AddIcon } from "../../global/assets/add-icon";
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.direction = 'ltr';
        this.selectedValue = '';
        this.clearable = false;
        this.searchable = false;
        this.options = [];
        this.reverseOptions = false;
        this.forceOpenUpwards = false;
        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.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))
                return;
            if (this.dropdownEl && path.includes(this.dropdownEl))
                return;
            this.updateContext({ isOpen: false });
        };
        this.handleResize = () => {
            if (this.isOpen)
                this.adjustDropdownPosition();
        };
        this.handleScroll = (event) => {
            if (!this.isOpen)
                return;
            const target = event.target;
            if (this.dropdownEl && (this.dropdownEl === target || this.dropdownEl.contains(target)))
                return;
            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.openDropdown();
        };
    }
    async componentDidLoad() {
        document.addEventListener('click', this.closeDropdown);
        document.addEventListener('keydown', this.boundKeyDown);
        window.addEventListener('resize', this.handleResize);
        window.addEventListener('scroll', this.handleScroll, true);
        this.dropdownAncestorClasses = `${this.name}-select ${getCustomClassesForPortal(this.el)}`;
    }
    getInputEl() {
        return this.el.getElementsByClassName('form-input-select')[0];
    }
    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')
            this.updateContext({ isOpen: false });
    }
    async disconnectedCallback() {
        document.removeEventListener('click', this.closeDropdown);
        document.removeEventListener('keydown', this.boundKeyDown);
        window.removeEventListener('resize', this.handleResize);
        window.removeEventListener('scroll', this.handleScroll, true);
    }
    render() {
        const selectedItem = this.options.find(item => this.selectedValue === item.value);
        const dropdownProps = {
            name: this.name,
            isOpen: this.isOpen,
            options: this.options,
            hasTick: this.hasTick,
            hasArrow: this.hasArrow,
            direction: this.direction,
            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: 'a4366e9d07cfcffb68169ecf874eb24e951f24fa', translate: "no" }, h("div", { key: 'bd24e467794a27b5900101acde110abe8b6d0096', part: `${this.name}-container form-input-container`, class: cn('form-input-container', { open: this.isOpen, disabled: this.disableInput, disableInput: this.disableInput }) }, h("slot", { key: '0d80724014a0e45ae5ef22db93539a1f0c2e2670' }), h("input", { key: '08c1eb3002a9a07c412372d020688dc2e7df0061', 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: 'c20b2852cf22a63000026fe9939beb0509c5e9bf', 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" }))), 
        // @ts-ignore
        false && h("shift-select-dropdown", { key: '418d17da0edb8394e43bb49a01bb0f5b82e25eef' }), h("shift-portal", { key: 'cfc786a0abe5cf63cf5a3b9f3fbaf29092141fb3', tag: "shift-select-dropdown", inheritedClasses: this.dropdownAncestorClasses, componentProps: dropdownProps }))));
    }
    static get is() { return "shift-select"; }
    static get originalStyleUrls() {
        return {
            "$": ["shift-select.css"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["shift-select.css"]
        };
    }
    static get properties() {
        return {
            "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"
            },
            "gap": {
                "type": "number",
                "attribute": "gap",
                "mutable": false,
                "complexType": {
                    "original": "number",
                    "resolved": "number",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "defaultValue": "8"
            },
            "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": "''"
            },
            "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,
                "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
            },
            "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
            },
            "direction": {
                "type": "string",
                "attribute": "direction",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "defaultValue": "'ltr'"
            },
            "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"
            },
            "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",
                "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": true,
                "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: boolean) => any",
                    "resolved": "(option: FormSelectItem, isSelected: boolean) => 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": true,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false
            },
            "fullRenderOption": {
                "type": "unknown",
                "attribute": "full-render-option",
                "mutable": false,
                "complexType": {
                    "original": "(option: FormSelectItem, isSelected: boolean, handleSelection: (option: FormSelectItem) => void) => any",
                    "resolved": "(option: FormSelectItem, isSelected: boolean, handleSelection: (option: FormSelectItem) => void) => any",
                    "references": {
                        "FormSelectItem": {
                            "location": "global",
                            "id": "global::FormSelectItem"
                        }
                    }
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false
            }
        };
    }
    static get states() {
        return {
            "dropdownAncestorClasses": {}
        };
    }
    static get elementRef() { return "el"; }
}
