import { h, Host } from "@stencil/core";
/**
 * Chat icon list
 * Renders a labeled, left-aligned row of slightly-overlapping icons,
 * used inside `limebb-chat-list` as an alternative to a speech bubble.
 *
 * @private
 */
export class ChatIconListComponent {
    render() {
        return (h(Host, { key: 'efe87c0a35ebc87ae04a61422d3b7410189c8f7e', id: this.item.id }, this.renderLabel(), h("div", { key: 'd0bdaf7023492f926f96449a0d5bc49aa800ecac', class: "icons" }, this.item.icons.map((icon, index) => this.renderIcon(icon, index)))));
    }
    renderLabel() {
        if (!this.item.label) {
            return;
        }
        return h("span", { class: "label" }, this.item.label);
    }
    renderIcon(icon, index) {
        const iconId = `icon-${this.item.id}-${index}`;
        return [
            h("limel-icon", { tabIndex: 0, key: index, id: iconId, badge: true, name: icon.name, class: { 'is-pending': !!icon.pending }, style: {
                    color: icon.color,
                    'background-color': icon.backgroundColor,
                } }),
            this.renderTooltip(icon, iconId),
        ];
    }
    renderTooltip(icon, iconId) {
        if (!icon.title) {
            return;
        }
        return h("limel-tooltip", { label: icon.title, elementId: iconId });
    }
    static get is() { return "limebb-chat-icon-list"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() {
        return {
            "$": ["chat-icon-list.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["chat-icon-list.css"]
        };
    }
    static get properties() {
        return {
            "item": {
                "type": "unknown",
                "mutable": false,
                "complexType": {
                    "original": "ChatIconList",
                    "resolved": "ChatIconList",
                    "references": {
                        "ChatIconList": {
                            "location": "import",
                            "path": "./chat-icon-list.types",
                            "id": "src/components/chat-list/chat-icon-list/chat-icon-list.types.ts::ChatIconList",
                            "referenceLocation": "ChatIconList"
                        }
                    }
                },
                "required": true,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "The item to display."
                },
                "getter": false,
                "setter": false
            }
        };
    }
}
