import { r as registerInstance, c as createEvent, h, d as getElement } from './core-80b5cb25.js';
import './_commonjsHelpers-4ab098b6.js';
import './lodash-62c1633d.js';
import { c as constructIcon } from './constructIcon-e93bb06b.js';

const PwcChoicesOptionBubble = class {
    constructor(hostRef) {
        registerInstance(this, hostRef);
        this.closeClicked = createEvent(this, "closeClicked", 7);
    }
    onCloseClicked(event) {
        this.closeClicked.emit({
            originalEvent: event,
            option: this.option,
            bubbleElement: this.rootElement,
            index: this.indexInSelectedList
        });
    }
    render() {
        const { displayIcon, iconElm } = constructIcon(this.displayIcon, 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  height: -webkit-fit-content;\n  height: -moz-fit-content;\n  height: fit-content;\n  width: -webkit-fit-content;\n  width: -moz-fit-content;\n  width: fit-content;\n}\n\n.pwc-choices___bubble-label {\n  -ms-flex-order: 1;\n  order: 1;\n  display: block;\n  -ms-flex-positive: 1;\n  flex-grow: 1;\n  max-width: 100px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.pwc-choices___bubble-close-button {\n  -ms-flex-order: 3;\n  order: 3;\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\n.pwc-choices___placeholder-bubble > .pwc-choices___bubble-label {\n  max-width: unset;\n}\n\n.pwc-choices___count-bubble > .pwc-choices___bubble-label {\n  max-width: unset;\n  -ms-flex-item-align: center;\n  align-self: center;\n  justify-self: center;\n}\n\npwc-choices-option-bubble > img {\n  display: block;\n  -ms-flex-positive: 0;\n  flex-grow: 0;\n  -ms-flex-negative: 0;\n  flex-shrink: 0;\n}\n\npwc-choices-option-bubble > img[placement=left] {\n  -ms-flex-order: 0;\n  order: 0;\n  margin-right: 10px;\n}\n\npwc-choices-option-bubble > img[placement=right] {\n  -ms-flex-order: 2;\n  order: 2;\n  margin-left: 10px;\n}"; }
};

export { PwcChoicesOptionBubble as pwc_choices_option_bubble };
