var __classPrivateFieldGet = (this && this.__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 = (this && this.__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;
import { Host, h } from "@stencil/core";
import { getIconPath } from "@genexus/mercury";
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"
});
export class GxIdeMultiSelect {
    constructor() {
        _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) })))))));
    }
    static get is() { return "gx-ide-multi-select"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() {
        return {
            "$": ["gx-ide-multi-select.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["gx-ide-multi-select.css"]
        };
    }
    static get properties() {
        return {
            "model": {
                "type": "unknown",
                "mutable": false,
                "complexType": {
                    "original": "ComboBoxModel",
                    "resolved": "ComboBoxItemModel[]",
                    "references": {
                        "ComboBoxModel": {
                            "location": "import",
                            "path": "@genexus/chameleon-controls-library",
                            "id": ""
                        }
                    }
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Model with available options to select from"
                },
                "defaultValue": "[]"
            },
            "value": {
                "type": "unknown",
                "mutable": false,
                "complexType": {
                    "original": "string[]",
                    "resolved": "string[]",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Currently selected item values"
                },
                "defaultValue": "[]"
            },
            "placeholder": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Placeholder text when no items are selected"
                },
                "attribute": "placeholder",
                "reflect": false,
                "defaultValue": "\"Select options\""
            },
            "disabled": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Disabled state"
                },
                "attribute": "disabled",
                "reflect": false,
                "defaultValue": "false"
            }
        };
    }
    static get states() {
        return {
            "showPopover": {}
        };
    }
    static get events() {
        return [{
                "method": "gxSelectionChange",
                "name": "gxSelectionChange",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": "Emitted when the selection changes"
                },
                "complexType": {
                    "original": "string[]",
                    "resolved": "string[]",
                    "references": {}
                }
            }];
    }
    static get elementRef() { return "el"; }
}
_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();
//# sourceMappingURL=gx-ide-multi-select.js.map
