import { h, Fragment } from "@stencil/core";
export class DgaSuffix {
    constructor() {
        this.dpIsActive = false;
        this.selectedOption = null;
    }
    handleSuffixClick() {
        this.suffixBtn.classList.toggle('open');
    }
    handleOptionSelect(option) {
        this.selectedOption = option;
        this.onSelect.emit(option.value);
        const dropdownLabel = this.suffixBtn.querySelector('.dropdown__label');
        if (dropdownLabel) {
            dropdownLabel.classList.add('dropdown__label--selection');
        }
        this.suffixBtn.classList.remove('open');
        this.suffixBtn.classList.add('selected');
    }
    render() {
        if (this.type === 'text') {
            return (h("div", { class: `input__suffix input__suffix--${this.variant}-text` }, h("span", { class: "input__suffix-label" }, this.label)));
        }
        return (h(Fragment, null, h("button", { class: `input__suffix input__suffix--${this.variant} input__dropdown-btn`, onMouseDown: () => (this.dpIsActive = true), onMouseUp: () => (this.dpIsActive = false), onMouseOut: () => (this.dpIsActive = false), onClick: () => this.handleSuffixClick(), ref: el => (this.suffixBtn = el) }, h("span", { class: "input__suffix-icon" }, this.icon), h("span", { class: "dropdown__label" }, this.selectedOption && Object.keys(this.selectedOption).length ? this.selectedOption.label : ' '), h("span", { class: "input__suffix-label" }, this.label), h("span", { class: "input__suffix-chevron" }, h("dga-icon", { icon: "ArrowDown01Icon", variant: "stroke" }))), h("ul", { class: "input__dropdown-list" }, this.options &&
            this.options.map(option => {
                var _a;
                return (h("li", { key: option.value }, h("button", { class: `dropdown__option ${((_a = this.selectedOption) === null || _a === void 0 ? void 0 : _a.value) === option.value ? 'selected' : ''}`, onClick: () => this.handleOptionSelect(option) }, h("span", { class: "dropdown__option-label" }, option.label), h("span", { class: "dropdown__option-icon" }, h("dga-icon", { icon: "Tick02Icon", variant: "solid" })))));
            }))));
    }
    static get is() { return "dga-suffix"; }
    static get properties() {
        return {
            "type": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "attribute": "type",
                "reflect": false
            },
            "variant": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "attribute": "variant",
                "reflect": false
            },
            "options": {
                "type": "unknown",
                "mutable": false,
                "complexType": {
                    "original": "Option[]",
                    "resolved": "Option[]",
                    "references": {
                        "Option": {
                            "location": "local",
                            "path": "/home/mamoud/Documents/temp/components/platform-code-cross-platform-storybook/packages/core/src/components/dga-text-input/dga-suffix.tsx",
                            "id": "src/components/dga-text-input/dga-suffix.tsx::Option"
                        }
                    }
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false
            },
            "label": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "attribute": "label",
                "reflect": false
            },
            "icon": {
                "type": "any",
                "mutable": false,
                "complexType": {
                    "original": "any",
                    "resolved": "any",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "attribute": "icon",
                "reflect": false
            }
        };
    }
    static get states() {
        return {
            "dpIsActive": {},
            "selectedOption": {}
        };
    }
    static get events() {
        return [{
                "method": "onSelect",
                "name": "onSelect",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                }
            }];
    }
}
//# sourceMappingURL=dga-suffix.js.map
