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

const PwcChoicesInputBar = class {
    constructor(hostRef) {
        registerInstance(this, hostRef);
        this.type = "multi";
        this.optionDiscarded = createEvent(this, "optionDiscarded", 7);
        this.inputBarClicked = createEvent(this, "inputBarClicked", 7);
    }
    optionBubbleCloseClickedHandler(event) {
        this.optionDiscarded.emit({
            originalEvent: event,
            option: event.detail.option,
            index: event.detail.index
        });
    }
    constructInputBar() {
        let inputBarMainRender;
        switch (this.type) {
            case "single":
                inputBarMainRender =
                    this.options && this.options.length > 0 ? (h("div", { class: "singleSelectInputBarItem" }, this.options[0].label)) : (h("div", { class: "singleSelectInputBarItem singleSelectInputBarPlaceholder" }, this.placeholder));
                break;
            case "multi":
                inputBarMainRender = [
                    this.constructSelectedOptions(),
                    this.constructPlaceholder()
                ];
                break;
        }
        return (h("div", { class: "input-bar", onClick: e => this.onInputBarClick(e) }, h("div", { class: "input-bar-main" }, inputBarMainRender), h("div", { class: "input-bar-dropdown-icon" }, h("svg", { width: "28", height: "28", viewBox: "0 0 18 18" }, h("path", { d: "M5 8l4 4 4-4z" })))));
    }
    constructSelectedOptions() {
        return this.options.map((selectedOption, index) => (h("pwc-choices-option-bubble", { option: selectedOption, showCloseButton: this.showCloseButtons, indexInSelectedList: index })));
    }
    constructPlaceholder() {
        const selectedItemCount = this.options.length;
        const shouldDisplay = this.placeholder && !(this.autoHidePlaceholder && selectedItemCount > 0);
        return (shouldDisplay && (h("pwc-choices-option-bubble", { id: "placeholderBubble", option: { value: "placeholder", label: this.placeholder }, showCloseButton: false, indexInSelectedList: -1 })));
    }
    onInputBarClick(e) {
        e.preventDefault();
        e.stopPropagation();
        this.inputBarClicked.emit({ originalEvent: e });
    }
    render() {
        return this.constructInputBar();
    }
    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}"; }
};

export { PwcChoicesInputBar as pwc_choices_input_bar };
