import { r as registerInstance, c as createEvent, h } from './core-4636ab56.js';

const PwcChoicesDropdownItem = class {
    constructor(hostRef) {
        registerInstance(this, hostRef);
        this.dropdownItemClicked = createEvent(this, "dropdownItemClicked", 7);
    }
    clickSelfHandler(event) {
        if (!this.isNoOption) {
            this.dropdownItemClicked.emit({
                originalEvent: event,
                option: this.option
            });
        }
    }
    constructIcon(iconOptions) {
        if (iconOptions) {
            const iconElm = h("img", Object.assign({}, iconOptions));
            return { displayIcon: true, iconElm };
        }
        else {
            return { displayIcon: false, iconElm: null };
        }
    }
    constructDropdownOption(option) {
        const { displayIcon, iconElm } = this.isNoOption
            ? { displayIcon: false, iconElm: null }
            : this.constructIcon(option.original.icon);
        return [displayIcon && iconElm, h("span", { innerHTML: option.string })];
    }
    render() {
        return this.constructDropdownOption(this.option);
    }
    static get style() { return "pwc-choices-dropdown-item {\n  -webkit-transition: background-color ease 0.2s;\n  transition: background-color ease 0.2s;\n  margin: 0;\n  cursor: pointer;\n  padding: 10px;\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-align: center;\n  align-items: center;\n  -ms-flex-wrap: nowrap;\n  flex-wrap: nowrap;\n}\n\npwc-choices-dropdown-item:hover {\n  background-color: #eee;\n}\n\npwc-choices-dropdown-item + pwc-choices-dropdown-item {\n  border-top: 1px solid black;\n}\n\npwc-choices-dropdown-item[is-no-option] {\n  cursor: default;\n  color: grey;\n}\n\npwc-choices-dropdown-item > img {\n  display: block;\n  -ms-flex-positive: 0;\n  flex-grow: 0;\n}\n\npwc-choices-dropdown-item > img[placement=left] {\n  -ms-flex-order: 0;\n  order: 0;\n  margin-right: 10px;\n}\n\npwc-choices-dropdown-item > img[placement=right] {\n  -ms-flex-order: 2;\n  order: 2;\n  margin-left: 10px;\n}\n\npwc-choices-dropdown-item > span {\n  -ms-flex-order: 1;\n  order: 1;\n  display: block;\n  -ms-flex-positive: 1;\n  flex-grow: 1;\n}"; }
};

export { PwcChoicesDropdownItem as pwc_choices_dropdown_item };
