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

const PwcChoicesOptionBubble = class {
    constructor(hostRef) {
        registerInstance(this, hostRef);
        this.closeClicked = createEvent(this, "closeClicked", 7);
    }
    onCloseClicked(event) {
        // stop propagation so the input bar doesn't pick it up as a click on itself and close the dropdown.
        event.stopPropagation();
        this.closeClicked.emit({
            originalEvent: event,
            option: this.option,
            bubbleElement: this.rootElement,
            index: this.indexInSelectedList
        });
    }
    constructIcon(iconOptions) {
        if (iconOptions) {
            const iconElm = h("img", Object.assign({}, iconOptions));
            return { displayIcon: true, iconElm };
        }
        else {
            return { displayIcon: false, iconElm: null };
        }
    }
    render() {
        const { displayIcon, iconElm } = this.constructIcon(this.option.icon);
        return [
            displayIcon && iconElm,
            h("span", { class: "pwc-choices___bubble-label" }, this.option.label),
            this.showCloseButton && (h("span", { class: "pwc-choices___bubble-close-button", onClick: e => this.onCloseClicked(e) }, h("svg", { width: "16", height: "16", viewBox: "0 0 18 18" }, h("path", { d: "M14.53 4.53l-1.06-1.06L9 7.94 4.53 3.47 3.47 4.53 7.94 9l-4.47 4.47 1.06 1.06L9 10.06l4.47 4.47 1.06-1.06L10.06 9z" }))))
        ];
    }
    get rootElement() { return getElement(this); }
    static get style() { return "pwc-choices-option-bubble {\n  font-size: medium;\n  font-family: Calibri, sans-serif;\n  border: 1px solid black;\n  border-radius: 5px;\n  padding: 5px 10px 5px 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  margin: 5px;\n  min-height: 22px;\n}\n\n.pwc-choices___bubble-close-button {\n  margin-left: 10px;\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-align: center;\n  align-items: center;\n  cursor: pointer;\n}\n\n#pwc-choices___placeholder-bubble {\n  color: grey;\n}\n\npwc-choices-option-bubble > img {\n  display: block;\n  -ms-flex-positive: 0;\n  flex-grow: 0;\n  margin-right: 10px;\n}"; }
};

export { PwcChoicesOptionBubble as pwc_choices_option_bubble };
