import { r as registerInstance, c as createEvent, h } from './core-ef7fea85.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
        });
    }
    onInputBarClick(e) {
        this.inputBarClicked.emit({ originalEvent: e });
    }
    constructSelectedOptions() {
        return this.options.map((option, index) => (h("pwc-choices-option-bubble", { option: option, 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: "pwc-choices___placeholder-bubble", option: { value: "placeholder", label: this.placeholder }, showCloseButton: false, indexInSelectedList: -1 })));
    }
    constructIcon(iconOptions) {
        if (iconOptions) {
            const iconElm = h("img", Object.assign({}, iconOptions));
            return { displayIcon: true, iconElm };
        }
        else {
            return { displayIcon: false, iconElm: null };
        }
    }
    constructMainRender() {
        switch (this.type) {
            case "single":
                const { displayIcon, iconElm } = this.constructIcon(this.options[0].icon);
                return this.options && this.options.length > 0 ? (h("div", { class: "pwc-choices___single-select-input-bar-item" }, displayIcon && iconElm, h("span", null, this.options[0].label))) : (h("div", { class: "pwc-choices___single-select-input-bar-item pwc-choices___single-select-input-bar-placeholder" }, h("span", null, this.placeholder)));
            case "multi":
                return [this.constructSelectedOptions(), this.constructPlaceholder()];
        }
    }
    render() {
        return [
            h("div", { class: "pwc-choices___input-bar-main" }, this.constructMainRender()),
            h("div", { class: "pwc-choices___input-bar-dropdown-icon" }, h("svg", { width: "28", height: "28", viewBox: "0 0 18 18" }, h("path", { d: "M5 8l4 4 4-4z" })))
        ];
    }
    static get style() { return "pwc-choices-input-bar {\n  margin: 0;\n  font-size: medium;\n  font-family: Calibri, sans-serif;\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.pwc-choices___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.pwc-choices___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.pwc-choices___single-select-input-bar-item {\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-align: center;\n  align-items: center;\n  margin: 10px;\n}\n\n.pwc-choices___single-select-input-bar-placeholder {\n  color: grey;\n}\n\n.pwc-choices___single-select-input-bar-item > img {\n  display: block;\n  -ms-flex-positive: 0;\n  flex-grow: 0;\n  margin-right: 10px;\n}\n\n.pwc-choices___single-select-input-bar-item > span {\n  display: block;\n  -ms-flex-positive: 1;\n  flex-grow: 1;\n}"; }
};

export { PwcChoicesInputBar as pwc_choices_input_bar };
