import { Host, h } from "@stencil/core";
import { Icons } from "../../assets/icons/index.js";
function isOfTypeIconType(key) {
    return Object.keys(Icons).includes(key);
}
export class CpslIconGroup {
    constructor() {
        this.isHovered = undefined;
        this.expandFrom = 'right';
        this.disabled = false;
        this.icons = undefined;
    }
    componentDidLoad() {
        this.el.addEventListener('mouseover', () => {
            this.isHovered = true;
        });
        this.el.addEventListener('mouseout', () => {
            this.isHovered = false;
        });
    }
    disconnectedCallback() {
        this.el.removeEventListener('mouseover', () => {
            this.isHovered = true;
        });
        this.el.removeEventListener('mouseout', () => {
            this.isHovered = false;
        });
    }
    render() {
        // If disabled remove all brand icons to ensure the disabled color is shown correctly
        const icons = this.disabled ? this.icons.map(icon => icon.replace('Brand', '')) : this.icons;
        return (h(Host, { key: '37605ca88dcbabf8aa252ee921306f716ce3459e' }, icons.map((icon, index) => {
            const isIcon = isOfTypeIconType(icon);
            return (h("span", { part: "icon-container", class: {
                    'icon-container': true,
                    'expanded': !this.disabled && this.isHovered && (this.expandFrom === 'right' ? index !== this.icons.length - 1 : index === 0),
                    'disabled': this.disabled,
                }, style: { zIndex: `${this.icons.length - index}` } }, h("cpsl-icon", { key: icon, icon: isIcon ? icon : undefined, src: !isIcon ? icon : undefined })));
        })));
    }
    static get is() { return "cpsl-icon-group"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() {
        return {
            "$": ["cpsl-icon-group.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["cpsl-icon-group.css"]
        };
    }
    static get properties() {
        return {
            "expandFrom": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "'left' | 'right'",
                    "resolved": "\"left\" | \"right\"",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "The direction the icons should expand from"
                },
                "attribute": "expand-from",
                "reflect": false,
                "defaultValue": "'right'"
            },
            "disabled": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "If `true`, the user cannot interact with the input."
                },
                "attribute": "disabled",
                "reflect": false,
                "defaultValue": "false"
            },
            "icons": {
                "type": "unknown",
                "mutable": false,
                "complexType": {
                    "original": "(IconType | string)[]",
                    "resolved": "string[]",
                    "references": {
                        "IconType": {
                            "location": "import",
                            "path": "../../interface.js",
                            "id": "src/interface.ts::IconType"
                        }
                    }
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "The name of the icons to display."
                }
            }
        };
    }
    static get states() {
        return {
            "isHovered": {}
        };
    }
    static get elementRef() { return "el"; }
}
//# sourceMappingURL=cpsl-icon-group.js.map
