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';

/**
 * Determines if the passed element is overflowing its bounds,
 * either vertically or horizontally.
 * Will temporarily modify the "overflow" style to detect this
 * if necessary.
 */
function checkOverflow(el, width, height) {
    const curOverflow = el.style.overflow;
    if (!curOverflow || curOverflow === "visible")
        el.style.overflow = "hidden";
    const isOverflowing = (width && el.clientWidth < el.scrollWidth) ||
        (height && el.clientHeight < el.scrollHeight);
    el.style.overflow = curOverflow;
    return isOverflowing;
}

const PwcChoicesInputBar = class {
    constructor(hostRef) {
        registerInstance(this, hostRef);
        this.isOverflowing = false;
        this.isCalculating = true;
        this.type = "multi";
        this.optionDiscarded = createEvent(this, "optionDiscarded", 7);
        this.inputBarClicked = createEvent(this, "inputBarClicked", 7);
    }
    optionsWatchHandler() {
        if (this.type === "multi" && this.displayMode === "dynamic") {
            this.isCalculating = true;
        }
    }
    optionBubbleCloseClickedHandler(event) {
        this.optionDiscarded.emit({
            originalEvent: event,
            option: event.detail.option,
            index: event.detail.index
        });
    }
    onInputBarClick(e) {
        const eventTarget = event.target;
        const closestBubbleCloseButton = eventTarget.closest(".pwc-choices___bubble-close-button");
        const shouldEmitAClickOnSelf = !closestBubbleCloseButton;
        if (shouldEmitAClickOnSelf) {
            this.inputBarClicked.emit({ originalEvent: e });
        }
    }
    constructSelectedOptions() {
        return this.options.map((option, index) => (h("pwc-choices-option-bubble", { option: option, showCloseButton: this.showCloseButtons, indexInSelectedList: index, displayIcon: this.displayIcons })));
    }
    constructPlaceholder() {
        const selectedItemCount = this.options.length;
        const shouldDisplay = this.placeholder !== "" &&
            !(this.autoHidePlaceholder && selectedItemCount > 0);
        return (shouldDisplay && (h("pwc-choices-option-bubble", { class: "pwc-choices___placeholder-bubble", option: {
                value: "placeholder",
                label: this.placeholder || "No options are selected."
            }, showCloseButton: false, indexInSelectedList: -1 })));
    }
    constructMainRender() {
        switch (this.type) {
            case "single":
                if (this.options && this.options.length > 0) {
                    const { displayIcon, iconElm } = constructIcon(this.displayIcons, this.options[0].icon);
                    return (h("div", { class: "pwc-choices___single-select-input-bar-item" }, displayIcon && iconElm, h("span", null, this.options[0].label)));
                }
                else {
                    return (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.constructMultiSelecMainRender();
        }
    }
    constructMultiSelecMainRender() {
        return [this.constructSelectedOptions(), this.constructPlaceholder()];
    }
    decideFlexAlignClass() {
        if (this.type === "single") {
            return " pwc-choices___flex-align-main-start pwc-choices___flex-align-cross-center";
        }
        if (this.type === "multi") {
            if (this.isOverflowing) {
                return " pwc-choices___flex-align-main-center pwc-choices___flex-align-cross-center";
            }
            else {
                return " pwc-choices___flex-align-main-start pwc-choices___flex-align-cross-start";
            }
        }
    }
    constructBubbles() {
        const flexAlignClass = this.decideFlexAlignClass();
        return [
            h("div", { class: "pwc-choices___input-bar-main " + flexAlignClass }, 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" })))
        ];
    }
    constructCount() {
        const flexAlignClass = this.decideFlexAlignClass();
        return [
            h("div", { class: "pwc-choices___input-bar-main" + flexAlignClass }, h("span", null, this.countTextProvider
                ? this.countTextProvider(this.options.length)
                : `Selected ${this.options.length} options.`)),
            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" })))
        ];
    }
    componentWillRender() {
        if (this.type === "multi" && this.displayMode === "dynamic") {
            if (this.isCalculating) {
                if (!this.root.hasAttribute("calculating")) {
                    this.root.setAttribute("calculating", "");
                    this.root.forceUpdate();
                }
            }
        }
    }
    render() {
        let toReturn;
        const shouldCollapse = this.isCalculating
            ? false
            : this.displayMode !== "bubblesOnly" && this.isOverflowing;
        if (this.type === "multi" &&
            (this.displayMode === "countOnly" || shouldCollapse)) {
            toReturn = this.constructCount();
        }
        else {
            toReturn = this.constructBubbles();
        }
        return toReturn;
    }
    componentDidRender() {
        if (this.type === "multi" && this.displayMode === "dynamic") {
            if (this.isCalculating) {
                this.isOverflowing = checkOverflow(this.root, true, true);
                this.isCalculating = false;
                this.root.forceUpdate();
            }
            else {
                if (this.root.hasAttribute("calculating")) {
                    this.root.removeAttribute("calculating");
                    this.root.forceUpdate();
                }
            }
        }
    }
    get root() { return getElement(this); }
    static get watchers() { return {
        "options": ["optionsWatchHandler"]
    }; }
    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  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  height: 100%;\n  width: 100%;\n  -webkit-box-sizing: border-box;\n  box-sizing: border-box;\n}\n\npwc-choices-input-bar[calculating] > .pwc-choices___input-bar-main {\n  visibility: hidden;\n  overflow: visible;\n}\n\n.pwc-choices___option-count {\n  display: block;\n  margin: auto;\n}\n\n.pwc-choices___flex-align-main-start {\n  -ms-flex-pack: start;\n  justify-content: flex-start;\n  justify-items: flex-start;\n}\n\n.pwc-choices___flex-align-main-center {\n  -ms-flex-pack: center;\n  justify-content: center;\n  justify-items: center;\n}\n\n.pwc-choices___flex-align-cross-start {\n  -ms-flex-line-pack: start;\n  align-content: flex-start;\n  -ms-flex-align: start;\n  align-items: flex-start;\n}\n\n.pwc-choices___flex-align-cross-center {\n  -ms-flex-line-pack: center;\n  align-content: center;\n  -ms-flex-align: center;\n  align-items: center;\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  overflow-y: auto;\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  padding: 10px;\n  max-width: 100%;\n  max-height: 100%;\n  -webkit-box-sizing: border-box;\n  box-sizing: border-box;\n  -ms-flex-line-pack: center;\n  align-content: center;\n  -ms-flex-pack: center;\n  justify-content: center;\n  -ms-flex-align: center;\n  align-items: center;\n  justify-items: center;\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  -ms-flex-order: 1;\n  order: 1;\n  display: block;\n  -ms-flex-positive: 1;\n  flex-grow: 1;\n  overflow-y: auto;\n}\n\n.pwc-choices___single-select-input-bar-item > img[placement=left] {\n  -ms-flex-order: 0;\n  order: 0;\n  margin-right: 10px;\n}\n\n.pwc-choices___single-select-input-bar-item > img[placement=right] {\n  -ms-flex-order: 2;\n  order: 2;\n  margin-left: 10px;\n}"; }
};

export { PwcChoicesInputBar as pwc_choices_input_bar };
