import { p as proxyCustomElement, H, d as createEvent, h, F as Fragment } from './p-604af0ee.js';
import { d as defineCustomElement$2 } from './p-888b8e69.js';

const DgaSuffix$1 = /*@__PURE__*/ proxyCustomElement(class DgaSuffix extends H {
    constructor() {
        super();
        this.__registerHost();
        this.onSelect = createEvent(this, "onSelect", 7);
        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" })))));
            }))));
    }
}, [0, "dga-suffix", {
        "type": [1],
        "variant": [1],
        "options": [16],
        "label": [1],
        "icon": [8],
        "dpIsActive": [32],
        "selectedOption": [32]
    }]);
function defineCustomElement$1() {
    if (typeof customElements === "undefined") {
        return;
    }
    const components = ["dga-suffix", "dga-icon"];
    components.forEach(tagName => { switch (tagName) {
        case "dga-suffix":
            if (!customElements.get(tagName)) {
                customElements.define(tagName, DgaSuffix$1);
            }
            break;
        case "dga-icon":
            if (!customElements.get(tagName)) {
                defineCustomElement$2();
            }
            break;
    } });
}

const DgaSuffix = DgaSuffix$1;
const defineCustomElement = defineCustomElement$1;

export { DgaSuffix, defineCustomElement };

//# sourceMappingURL=dga-suffix.js.map