'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

const index = require('./index-a0b63bee.js');

const DgaPrefix = class {
    constructor(hostRef) {
        index.registerInstance(this, hostRef);
        this.onSelect = index.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 (index.h("div", { class: `input__prefix input__prefix--${this.variant}-text` }, index.h("span", { class: "input__prefix-label" }, this.label)));
        }
        if (this.type === 'button') {
            return (index.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) }, index.h("span", { class: "input__prefix-icon" }, index.h("dga-icon-v2", Object.assign({}, this.icon))), index.h("span", { class: "dropdown__label" }, this.selectedOption && Object.keys(this.selectedOption).length ? this.selectedOption.label : ' '), index.h("span", { class: "input__prefix-label" }, this.label)));
        }
        return (index.h(index.Fragment, null, index.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) }, index.h("span", { class: "input__prefix-icon" }, this.icon), index.h("span", { class: "dropdown__label" }, this.selectedOption && Object.keys(this.selectedOption).length ? this.selectedOption.label : ' '), index.h("span", { class: "input__prefix-label" }, this.label), index.h("span", { class: "input__prefix-chevron" }, index.h("dga-icon", { icon: "ArrowDown01Icon", variant: "stroke" }))), index.h("ul", { class: "input__dropdown-list" }, this.options &&
            this.options.map(option => {
                var _a;
                return (index.h("li", { key: option.value }, index.h("button", { class: `dropdown__option ${((_a = this.selectedOption) === null || _a === void 0 ? void 0 : _a.value) === option.value ? 'selected' : ''}`, onClick: () => this.handleOptionSelect(option) }, index.h("span", { class: "dropdown__option-label" }, option.label), index.h("span", { class: "dropdown__option-icon" }, index.h("dga-icon", { icon: "Tick02Icon", variant: "solid" })))));
            }))));
    }
};

exports.dga_prefix = DgaPrefix;

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