'use strict';

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

const core = require('./core-0dcf683d.js');

const PwcChoicesOptionBubble = class {
    constructor(hostRef) {
        core.registerInstance(this, hostRef);
        this.closeClicked = core.createEvent(this, "closeClicked", 7);
    }
    onCloseClicked(event) {
        event.preventDefault();
        event.stopPropagation();
        this.closeClicked.emit({
            originalEvent: event,
            option: this.option,
            bubbleElement: this.rootElement,
            index: this.indexInSelectedList
        });
    }
    render() {
        return (core.h("div", { class: "bubble" }, core.h("span", { class: "bubble-label" }, this.option.label), this.showCloseButton && (core.h("span", { class: "bubble-closeButton", onClick: e => this.onCloseClicked(e) }, core.h("svg", { width: "16", height: "16", viewBox: "0 0 18 18" }, core.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 core.getElement(this); }
    static get style() { return "* {\n  margin: 0;\n  padding: 0;\n  -webkit-transition: background-color ease 0.2s;\n  transition: background-color ease 0.2s;\n  font-size: medium;\n  font-family: Calibri, sans-serif;\n}\n\n.container {\n  -webkit-user-select: none;\n  -moz-user-select: none;\n  -ms-user-select: none;\n  user-select: none;\n  position: relative;\n  width: 100%;\n}\n\n.input-bar {\n  border: 1px solid black;\n  min-height: 44px;\n  padding: 5px;\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-wrap: nowrap;\n  flex-wrap: nowrap;\n  border-radius: 5px;\n  overflow: hidden;\n  background-color: white;\n}\n\n.input-bar-main {\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-wrap: wrap;\n  flex-wrap: wrap;\n  -ms-flex-positive: 1;\n  flex-grow: 1;\n}\n\n.input-bar-dropdown-icon {\n  -ms-flex-positive: 0;\n  flex-grow: 0;\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-wrap: wrap;\n  flex-wrap: wrap;\n  -ms-flex-line-pack: center;\n  align-content: center;\n  margin: 0 10px 0 10px;\n}\n\n.dropdown {\n  border: 1px solid black;\n  position: absolute;\n  -webkit-box-sizing: border-box;\n  box-sizing: border-box;\n  width: 100%;\n  border-radius: 5px;\n  background-color: white;\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-direction: column;\n  flex-direction: column;\n  overflow: hidden;\n  z-index: 1000000;\n}\n\n.search {\n  padding: 10px;\n  border: 0;\n  border-bottom: 1px solid black;\n}\n\n.dropdown > ul {\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-direction: column;\n  flex-direction: column;\n  max-height: 250px;\n  overflow-y: scroll;\n  overflow-x: hidden;\n}\n\n.dropdown > ul > li {\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\n.dropdown > ul > li:hover {\n  background-color: #eee;\n}\n\n.dropdown > ul > li + li {\n  border-top: 1px solid black;\n}\n\n.bubble {\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.bubble-closeButton {\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#placeholderBubble {\n  color: grey;\n}\n\n#noOptionsListItem {\n  cursor: default;\n  color: grey;\n}\n\n.singleSelectInputBarItem {\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-align: center;\n  align-items: center;\n  margin: 10px;\n}\n\n.singleSelectInputBarPlaceholder {\n  color: grey;\n}"; }
};

exports.pwc_choices_option_bubble = PwcChoicesOptionBubble;
