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';
import { d as defineCustomElement$1 } from './p-115ed7c3.js';

const DgaPrefix = /*@__PURE__*/ proxyCustomElement(class DgaPrefix extends H {
    constructor() {
        super();
        this.__registerHost();
        this.onSelect = createEvent(this, "onSelect", 7);
        this.variant = 'solid';
        this.dpIsActive = false;
        this.selectedOption = null;
    }
    handlePrefixClick() {
        this.prefixBtn.classList.toggle('open');
    }
    handleOptionSelect(option) {
        this.selectedOption = option;
        this.onSelect.emit(option.value);
        const dropdownLabel = this.prefixBtn.querySelector('.dropdown__label');
        if (dropdownLabel) {
            dropdownLabel.classList.add('dropdown__label--selection');
        }
        this.prefixBtn.classList.remove('open');
        this.prefixBtn.classList.add('selected');
    }
    render() {
        if (this.type === 'text') {
            return (h("div", { class: `input__prefix input__prefix--${this.variant}-text` }, h("span", { class: "input__prefix-label" }, this.label)));
        }
        if (this.type === 'button') {
            return (h("button", { class: `input__prefix input__prefix--${this.variant}`, onMouseDown: () => (this.dpIsActive = true), onMouseUp: () => (this.dpIsActive = false), onMouseOut: () => (this.dpIsActive = false), onClick: () => this.handlePrefixClick(), ref: el => (this.prefixBtn = el) }, h("span", { class: "input__prefix-icon" }, h("dga-icon-v2", Object.assign({}, this.icon))), h("span", { class: "dropdown__label" }, this.selectedOption && Object.keys(this.selectedOption).length ? this.selectedOption.label : ' '), h("span", { class: "input__prefix-label" }, this.label)));
        }
        return (h(Fragment, null, h("button", { class: `input__prefix input__prefix--${this.variant} input__dropdown-btn`, onMouseDown: () => (this.dpIsActive = true), onMouseUp: () => (this.dpIsActive = false), onMouseOut: () => (this.dpIsActive = false), onClick: () => this.handlePrefixClick(), ref: el => (this.prefixBtn = el) }, h("span", { class: "input__prefix-icon" }, this.icon), h("span", { class: "dropdown__label" }, this.selectedOption && Object.keys(this.selectedOption).length ? this.selectedOption.label : ' '), h("span", { class: "input__prefix-label" }, this.label), h("span", { class: "input__prefix-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-prefix", {
        "type": [1],
        "variant": [1],
        "options": [16],
        "label": [1],
        "icon": [16],
        "dpIsActive": [32],
        "selectedOption": [32]
    }]);
function defineCustomElement() {
    if (typeof customElements === "undefined") {
        return;
    }
    const components = ["dga-prefix", "dga-icon", "dga-icon-v2"];
    components.forEach(tagName => { switch (tagName) {
        case "dga-prefix":
            if (!customElements.get(tagName)) {
                customElements.define(tagName, DgaPrefix);
            }
            break;
        case "dga-icon":
            if (!customElements.get(tagName)) {
                defineCustomElement$2();
            }
            break;
        case "dga-icon-v2":
            if (!customElements.get(tagName)) {
                defineCustomElement$1();
            }
            break;
    } });
}

export { DgaPrefix as D, defineCustomElement as d };

//# sourceMappingURL=p-6eee0d4e.js.map