import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
import { g as getIconPath } from './mer-animated-dots.js';
import 'lit';
import 'lit/directives/when.js';
import 'lit/directives/if-defined.js';

const gxIdeMultiSelectCss = ":host{display:grid;block-size:100%}.opacity-0{opacity:0}.gxi-hidden{display:none !important}.align-center{display:flex;align-items:center}.align-end{display:flex;align-items:end}.overflow-auto{overflow:auto}:host(.gx-ide-component){height:100% !important;display:flex !important;flex-direction:column !important}.gx-ide-main-wrapper{color:var(--gx-ide-component-text-color);font-weight:var(--font-style-regular);font-size:var(--font-size-body-m);font-family:var(--font-family-body);height:100%;display:flex;flex-direction:column;flex-grow:1;box-sizing:border-box}.buttons-container{display:flex;gap:var(--spacing-gap-m)}.giu-static-pill-icon-and-text,.giu-static-pill{background-color:var(--elevation-background-color, var(--color-accent-surface-elevation-1));padding-inline:var(--spacing-padding-m);color:var(--color-text-neutral-default);font-size:var(--font-size-body-s);line-height:var(--line-height-relaxed);font-weight:var(--font-style-regular);border-radius:4px;min-block-size:25px;display:inline-grid;align-items:center;pointer-events:none;inline-size:max-content}.giu-static-pill-icon-and-text{display:inline-grid;grid-auto-flow:column;grid-auto-columns:max-content;gap:var(--spacing-gap-m)}.tab-full-width-buttons::part(tab-list block-start),.tab-full-width-buttons::part(tab-list block-end){grid-auto-columns:1fr}.tab-full-width-buttons::part(tab block-start){justify-content:center}.tree-view::part(item__header){--icon__system_warning_warning--disabled:var(\n    --icon__system_warning_warning--enabled\n  )}.tabular-grid{--focus-outline-width:1px}ch-popover{background-color:var(--color-accent-surface-elevation-1);border:1px solid var(--color-border-surface-on-surface);border-radius:var(--border-radius-s);box-shadow:var(--shadow-elevation-2)}ch-popover>div{display:flex;flex-direction:column;gap:0;padding:var(--spacing-padding-m);max-block-size:300px;overflow-y:auto}.checkbox-item{display:flex;inline-size:100%;padding-block:var(--spacing-padding-xs);padding-inline:var(--spacing-padding-m);cursor:pointer;border-radius:var(--border-radius-s)}.checkbox-item:hover{background-color:var(--color-accent-item-selected)}.checkbox-item::part(checkbox){inline-size:100%}.checkbox-item::part(label){inline-size:100%;cursor:pointer;flex:1}.multi-select__button{display:flex;align-items:center;gap:var(--spacing-gap-s);overflow:hidden}.multi-select__chevron{flex-shrink:0;margin-inline-start:auto}.multi-select__placeholder{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.multi-select__items{display:flex;flex-wrap:wrap;gap:var(--spacing-gap-xs);flex:1;align-items:center}.multi-select__item{display:inline-flex;align-items:center;gap:var(--spacing-gap-xs);padding:2px var(--spacing-padding-xs);background-color:var(--color-accent-item-pressed);border-radius:var(--border-radius-s)}.multi-select__item button{padding:0}.multi-select__caption{color:var(--color-text-neutral-on-disabled)}.multi-select__close{padding:0;margin:0}ch-checkbox.checkbox::part(label){font-weight:var(--font-style-regular);color:var(--color-text-neutral-default)}";

var __classPrivateFieldGet = (undefined && undefined.__classPrivateFieldGet) || function (receiver, state, kind, f) {
    if (kind === "a" && !f)
        throw new TypeError("Private accessor was defined without a getter");
    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver))
        throw new TypeError("Cannot read private member from an object whose class did not declare it");
    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
};
var __classPrivateFieldSet = (undefined && undefined.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
    if (kind === "m")
        throw new TypeError("Private method is not writable");
    if (kind === "a" && !f)
        throw new TypeError("Private accessor was defined without a setter");
    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver))
        throw new TypeError("Cannot write private member to an object whose class did not declare it");
    return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
};
var _GxIdeMultiSelect_multiButtonEl, _GxIdeMultiSelect_popoverEl, _GxIdeMultiSelect_togglePopover, _GxIdeMultiSelect_checkboxChangeHandler, _GxIdeMultiSelect_removeSelectedItemHandler, _GxIdeMultiSelect_isItemSelected, _GxIdeMultiSelect_renderSelectedItems;
const CSS_BUNDLES = [
    "resets/box-sizing",
    "components/button",
    "components/icon",
    "components/checkbox",
    "utils/typography",
    "utils/spacing",
    "chameleon/scrollbar",
    "components/combo-box"
];
const CHEVRON_DOWN_ICON = getIconPath({
    category: "navigation",
    name: "chevron-down",
    colorType: "on-interactive"
});
const CLOSE_ICON = getIconPath({
    category: "system",
    name: "close",
    colorType: "on-interactive"
});
const GxIdeMultiSelect$1 = /*@__PURE__*/ proxyCustomElement(class GxIdeMultiSelect extends HTMLElement {
    constructor() {
        super();
        this.__registerHost();
        this.__attachShadow();
        this.gxSelectionChange = createEvent(this, "gxSelectionChange", 7);
        _GxIdeMultiSelect_multiButtonEl.set(this, void 0);
        _GxIdeMultiSelect_popoverEl.set(this, void 0);
        _GxIdeMultiSelect_togglePopover.set(this, () => {
            if (!this.disabled) {
                this.showPopover = !this.showPopover;
            }
        });
        _GxIdeMultiSelect_checkboxChangeHandler.set(this, (optionValue, event) => {
            const target = event.target;
            const isChecked = target.value === target.checkedValue;
            let newValue;
            if (isChecked) {
                newValue = [...this.value, optionValue];
            }
            else {
                newValue = this.value.filter(val => val !== optionValue);
            }
            this.gxSelectionChange.emit(newValue);
        });
        _GxIdeMultiSelect_removeSelectedItemHandler.set(this, (itemValue) => {
            const newValue = this.value.filter(val => val !== itemValue);
            this.gxSelectionChange.emit(newValue);
        });
        _GxIdeMultiSelect_isItemSelected.set(this, (itemValue) => {
            return this.value.includes(itemValue);
        });
        _GxIdeMultiSelect_renderSelectedItems.set(this, () => {
            if (this.value.length === 0) {
                return (h("span", { class: "multi-select__placeholder body-italic-m" }, this.placeholder));
            }
            const selectedOptions = this.model.filter(opt => this.value.includes(opt.value));
            return (h("div", { class: "multi-select__items" }, selectedOptions.map(item => (h("div", { class: "multi-select__item", key: item.value }, h("span", { class: "multi-select__caption body-regular-s" }, item.caption), h("button", { type: "button", class: "button-tertiary button-icon-only multi-select__close", onClick: e => {
                    e.stopPropagation();
                    e.preventDefault();
                    __classPrivateFieldGet(this, _GxIdeMultiSelect_removeSelectedItemHandler, "f").call(this, item.value);
                }, "aria-label": `Remove ${item.caption}` }, h("ch-image", { class: "icon-xs", src: CLOSE_ICON, type: "mask" })))))));
        });
        this.showPopover = false;
        this.model = [];
        this.value = [];
        this.placeholder = "Select options";
        this.disabled = false;
    }
    componentDidLoad() {
        if (__classPrivateFieldGet(this, _GxIdeMultiSelect_popoverEl, "f") && __classPrivateFieldGet(this, _GxIdeMultiSelect_multiButtonEl, "f")) {
            __classPrivateFieldGet(this, _GxIdeMultiSelect_popoverEl, "f").actionElement = __classPrivateFieldGet(this, _GxIdeMultiSelect_multiButtonEl, "f");
        }
    }
    render() {
        return (h(Host, null, h("ch-theme", { model: CSS_BUNDLES }), h("button", { class: "combo-box multi-select__button", type: "button", ref: (el) => (__classPrivateFieldSet(this, _GxIdeMultiSelect_multiButtonEl, el, "f")), onClick: __classPrivateFieldGet(this, _GxIdeMultiSelect_togglePopover, "f"), disabled: this.disabled }, __classPrivateFieldGet(this, _GxIdeMultiSelect_renderSelectedItems, "f").call(this), h("ch-image", { class: "icon-m multi-select__chevron", src: CHEVRON_DOWN_ICON, type: "mask" })), h("ch-popover", { ref: (el) => (__classPrivateFieldSet(this, _GxIdeMultiSelect_popoverEl, el, "f")), closeOnClickOutside: true, show: this.showPopover, blockAlign: "outside-end", inlineAlign: "inside-end", inlineSizeMatch: "action-element", class: "scrollable" }, h("div", null, this.model.map(option => (h("ch-checkbox", { class: "checkbox checkbox-item", caption: option.caption, checkedValue: "true", value: __classPrivateFieldGet(this, _GxIdeMultiSelect_isItemSelected, "f").call(this, option.value) ? "true" : "false", startImgSrc: option.startImgSrc, onInput: e => __classPrivateFieldGet(this, _GxIdeMultiSelect_checkboxChangeHandler, "f").call(this, option.value, e) })))))));
    }
    get el() { return this; }
    static get style() { return gxIdeMultiSelectCss; }
}, [1, "gx-ide-multi-select", {
        "model": [16],
        "value": [16],
        "placeholder": [1],
        "disabled": [4],
        "showPopover": [32]
    }]);
_GxIdeMultiSelect_multiButtonEl = new WeakMap(), _GxIdeMultiSelect_popoverEl = new WeakMap(), _GxIdeMultiSelect_togglePopover = new WeakMap(), _GxIdeMultiSelect_checkboxChangeHandler = new WeakMap(), _GxIdeMultiSelect_removeSelectedItemHandler = new WeakMap(), _GxIdeMultiSelect_isItemSelected = new WeakMap(), _GxIdeMultiSelect_renderSelectedItems = new WeakMap();
function defineCustomElement$1() {
    if (typeof customElements === "undefined") {
        return;
    }
    const components = ["gx-ide-multi-select"];
    components.forEach(tagName => { switch (tagName) {
        case "gx-ide-multi-select":
            if (!customElements.get(tagName)) {
                customElements.define(tagName, GxIdeMultiSelect$1);
            }
            break;
    } });
}

const GxIdeMultiSelect = GxIdeMultiSelect$1;
const defineCustomElement = defineCustomElement$1;

export { GxIdeMultiSelect, defineCustomElement };

//# sourceMappingURL=gx-ide-multi-select.js.map