import { r as registerInstance, c as createEvent, h, F as Fragment } from './index-1acf58d3.js';

const DgaPrefix = class {
    constructor(hostRef) {
        registerInstance(this, hostRef);
        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" })))));
            }))));
    }
};

export { DgaPrefix as dga_prefix };

//# sourceMappingURL=dga-prefix.entry.js.map