import { Host, h } from "@stencil/core";
export class ChipClickable {
    constructor() {
        this.visible = true;
        this.icon = undefined;
        this.avatar = undefined;
        this.color = 'default';
        this.size = 'standard';
        this.clickable = false;
        this.close = false;
        this.disabled = false;
        this.dataTest = null;
        this.dtButtonClose = null;
    }
    handleClickKey(event) {
        if ((event.key === 'Enter' || event.key === ' ') && !this.disabled) {
            event.preventDefault();
            this.chipClickableClick.emit();
        }
    }
    handleClick(event) {
        if (!this.disabled) {
            event.preventDefault();
            this.chipClickableClick.emit();
        }
    }
    handleCloseChip(event) {
        event.preventDefault();
        this.chipClickableClose.emit({ id: this.element.id });
    }
    handleCloseKey(event) {
        if ((event.key === 'Enter' || event.key === ' ') && !this.disabled) {
            event.preventDefault();
            this.chipClickableClose.emit({ id: this.element.id });
        }
    }
    getSizeAvatarChip() {
        if (this.size === 'tall') {
            return 'extra-small';
        }
        else
            return 'micro';
    }
    getSizeIconChip() {
        if (this.size === 'tall') {
            return 'medium';
        }
        else
            return 'x-small';
    }
    render() {
        return (h(Host, { key: 'fb9543d15fd4dbe9251bbb73c99a308e890581c1' }, h("div", { key: '7d7a20a958426526f4c1ca99c831b07ba3d73e7d', class: {
                chip_clickable: true,
                [`chip_clickable--${this.color}`]: true && !this.disabled,
                [`chip_clickable--${this.size}`]: true,
                'chip_clickable--hide': !this.visible,
                'chip_clickable--click': this.clickable,
                'chip_clickable--disabled': this.disabled,
            }, onClick: this.handleClick.bind(this), "data-test": this.dataTest }, this.clickable && !this.disabled && (h("div", { key: 'aec3b83d1efc8a0652fda088777ff1235c031c4c', class: "chip_focus", onKeyDown: this.handleClickKey.bind(this), tabindex: "0" })), this.clickable && !this.disabled && h("div", { key: 'dbbe14547f0807d2e82b50f3e93e6c58f7b17958', class: "chip_darker" }), this.icon && !this.avatar && (h("div", { key: '0e33b40c5f8a48123553cb273be4e9ae40e4f1db', class: "chip_clickable--icon" }, h("bds-icon", { key: '23002403c549363c13bf041f511bbc269c237a9f', size: this.getSizeIconChip(), name: this.icon }))), this.avatar && (h("div", { key: '4de1ca9002eea8b8e087695017e3a19ae7393520', class: "chip_clickable--avatar" }, h("bds-avatar", { key: 'eaca708ef221b547bc89f6b3feb36d6e2575fed8', size: this.getSizeAvatarChip(), thumbnail: this.avatar }))), h("div", { key: 'c83fa85ec1774d89f2b7907b39e08a08ce42a3d3', class: this.close && (this.icon || this.avatar)
                ? `chip_clickable--container-text--min`
                : !this.close && !this.icon && !this.avatar
                    ? `chip_clickable--container-text--full`
                    : `chip_clickable--container-text--half` }, h("bds-typo", { key: '23c7f5a424afd240ea5c8dedadb1203e044f68c9', "no-wrap": "true", class: "chip_clickable--text", variant: "fs-12", bold: "bold" }, h("slot", { key: 'ad56807656289a789eff95b7369eb615ab61cb6a' }))), this.close && (h("div", { key: 'f1ee5a73cd1d373c89a24eade8a94fe1a8e04ff7', class: "chip_clickable--close", "data-test": this.dtButtonClose, onClick: this.handleCloseChip.bind(this) }, !this.disabled && (h("div", { key: '565b24bc52a4df768343e0b1f31a886eb6ea96c0', class: "close_focus", onKeyDown: this.handleCloseKey.bind(this), tabindex: "0" })), h("bds-icon", { key: '870ae560b9a79344f4bb5b0c0a1539bb499b1081', size: "x-small", theme: "solid", name: "error" }))))));
    }
    static get is() { return "bds-chip-clickable"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() {
        return {
            "$": ["chip-clickable.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["chip-clickable.css"]
        };
    }
    static get properties() {
        return {
            "icon": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "used for add icon in left container. Uses the bds-icon component."
                },
                "attribute": "icon",
                "reflect": false
            },
            "avatar": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "used for add avatar left container. Uses the bds-avatar component."
                },
                "attribute": "avatar",
                "reflect": false
            },
            "color": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "ColorChipClickable",
                    "resolved": "\"danger\" | \"default\" | \"info\" | \"outline\" | \"success\" | \"warning\"",
                    "references": {
                        "ColorChipClickable": {
                            "location": "local",
                            "path": "/home/runner/work/blip-ds/blip-ds/src/components/chip-clickable/chip-clickable.tsx",
                            "id": "src/components/chip-clickable/chip-clickable.tsx::ColorChipClickable"
                        }
                    }
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "used for change the color. Uses one of them."
                },
                "attribute": "color",
                "reflect": false,
                "defaultValue": "'default'"
            },
            "size": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "Size",
                    "resolved": "\"standard\" | \"tall\"",
                    "references": {
                        "Size": {
                            "location": "local",
                            "path": "/home/runner/work/blip-ds/blip-ds/src/components/chip-clickable/chip-clickable.tsx",
                            "id": "src/components/chip-clickable/chip-clickable.tsx::Size"
                        }
                    }
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "used for change the size chip. Uses one of them."
                },
                "attribute": "size",
                "reflect": false,
                "defaultValue": "'standard'"
            },
            "clickable": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "it makes the chip clickable."
                },
                "attribute": "clickable",
                "reflect": false,
                "defaultValue": "false"
            },
            "close": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "used for delete the chip."
                },
                "attribute": "close",
                "reflect": false,
                "defaultValue": "false"
            },
            "disabled": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "the chip gone stay disabled while this prop be true."
                },
                "attribute": "disabled",
                "reflect": false,
                "defaultValue": "false"
            },
            "dataTest": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Data test is the prop to specifically test the component action object."
                },
                "attribute": "data-test",
                "reflect": false,
                "defaultValue": "null"
            },
            "dtButtonClose": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Data test is the prop to specifically test the component action object.\ndtButtonClose is the data-test to button close."
                },
                "attribute": "dt-button-close",
                "reflect": false,
                "defaultValue": "null"
            }
        };
    }
    static get states() {
        return {
            "visible": {}
        };
    }
    static get events() {
        return [{
                "method": "chipClickableClose",
                "name": "chipClickableClose",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": "Triggered after a mouse click on close icon, return id element. Only fired when close is true."
                },
                "complexType": {
                    "original": "any",
                    "resolved": "any",
                    "references": {}
                }
            }, {
                "method": "chipClickableClick",
                "name": "chipClickableClick",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "complexType": {
                    "original": "any",
                    "resolved": "any",
                    "references": {}
                }
            }];
    }
    static get elementRef() { return "element"; }
}
//# sourceMappingURL=chip-clickable.js.map
