/*!
 * 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";
export class ShiftSelectDropdown {
    constructor() {
        this.hasTick = true;
        this.hasArrow = true;
        this.name = '';
        this.isOpen = false;
        this.direction = 'ltr';
        this.selectedValue = '';
        this.options = [];
        this.reverseOptions = false;
        this.containerEl = null;
    }
    componentDidLoad() {
        var _a;
        (_a = this.setElementRef) === null || _a === void 0 ? void 0 : _a.call(this, this.containerEl);
    }
    disconnectedCallback() {
        var _a;
        (_a = this.setElementRef) === null || _a === void 0 ? void 0 : _a.call(this, null);
    }
    render() {
        const containerIdentifiers = cn(`${this.name}-select-container shift-select-container`, {
            'shift-select-container-open': this.isOpen,
        });
        const selectButtonIdentifiers = (option) => cn(`${this.name}-select-option shift-select-option`, { 'shift-select-option-selected': this.selectedValue === option.value });
        const tickIdentifiers = (option) => cn(`${this.name}-tick-icon shift-select-option-tick`, {
            'shift-select-option-tick-selected': this.selectedValue === option.value,
        });
        const emptyContainerIdentifier = cn(`${this.name}-select-empty-container shift-select-empty-container`, { 'shift-select-empty-container-error': this.fetchingErrorText });
        const spinnerIdentifiers = cn(`${this.name}-select-spinner shift-select-spinner`);
        const optionLabelIdentifier = cn(`${this.name}-select-option-label shift-select-option-label`);
        return (h(Host, { key: '97582c4d510a91b9ba01fe6314345e377676c571' }, h("div", { key: '491bd835267809a1e5a062015c714bfabd6ea52f', dir: this.direction, part: containerIdentifiers, class: containerIdentifiers, onWheel: e => e.stopPropagation(), onTouchMove: e => e.stopPropagation(), ref: el => (this.containerEl = el) }, !!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: selectButtonIdentifiers(option), class: selectButtonIdentifiers(option), onClick: () => this.handleSelection(option) }, this.renderOption ? (this.renderOption(option, this.selectedValue === option.value)) : (h("div", { part: optionLabelIdentifier, class: optionLabelIdentifier }, option.label)), this.hasTick && h(TickIcon, { part: tickIdentifiers(option), class: tickIdentifiers(option) })))), !this.options.length && (h("div", { key: '1946252d89163679766a185cd343ecb8d0e5e0d7', part: emptyContainerIdentifier, class: emptyContainerIdentifier }, this.fetchingErrorText, !this.fetchingErrorText && (this.isLoading ? h("img", { part: spinnerIdentifiers, class: spinnerIdentifiers, src: Loader }) : this.noSelectionText))))));
    }
    static get is() { return "shift-select-dropdown"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() {
        return {
            "$": ["shift-select-dropdown.css"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["shift-select-dropdown.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"
            },
            "name": {
                "type": "string",
                "attribute": "name",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "defaultValue": "''"
            },
            "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
            },
            "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": false,
                "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": "''"
            },
            "options": {
                "type": "unknown",
                "attribute": "options",
                "mutable": false,
                "complexType": {
                    "original": "FormSelectItem[]",
                    "resolved": "FormSelectItem[]",
                    "references": {
                        "FormSelectItem": {
                            "location": "import",
                            "path": "~features/form-hook",
                            "id": "src/features/form-hook/index.ts::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": false,
                "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
            },
            "setElementRef": {
                "type": "unknown",
                "attribute": "set-element-ref",
                "mutable": false,
                "complexType": {
                    "original": "(el: HTMLElement | null) => void",
                    "resolved": "(el: HTMLElement) => void",
                    "references": {
                        "HTMLElement": {
                            "location": "global",
                            "id": "global::HTMLElement"
                        }
                    }
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false
            },
            "handleSelection": {
                "type": "unknown",
                "attribute": "handle-selection",
                "mutable": false,
                "complexType": {
                    "original": "(option: FormSelectItem) => void",
                    "resolved": "(option: FormSelectItem) => void",
                    "references": {
                        "FormSelectItem": {
                            "location": "import",
                            "path": "~features/form-hook",
                            "id": "src/features/form-hook/index.ts::FormSelectItem"
                        }
                    }
                },
                "required": true,
                "optional": false,
                "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": "import",
                            "path": "~features/form-hook",
                            "id": "src/features/form-hook/index.ts::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: boolean, handleSelection: (option: FormSelectItem) => void) => any",
                    "resolved": "(option: FormSelectItem, isSelected: boolean, handleSelection: (option: FormSelectItem) => void) => any",
                    "references": {
                        "FormSelectItem": {
                            "location": "import",
                            "path": "~features/form-hook",
                            "id": "src/features/form-hook/index.ts::FormSelectItem"
                        }
                    }
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false
            }
        };
    }
}
