import { Host, h } from "@stencil/core";
export class ChipSelected {
    constructor() {
        this.isSelected = false;
        this.icon = undefined;
        this.color = 'default';
        this.size = 'standard';
        this.selected = false;
        this.disabled = false;
        this.dataTest = null;
    }
    handleKeyDown(event) {
        if (event.key === ' ' && !this.disabled) {
            event.preventDefault();
            if (this.isSelected) {
                return (this.isSelected = false);
            }
            else {
                return (this.isSelected = true);
            }
        }
    }
    handleClick(event) {
        if (this.disabled)
            return;
        event.preventDefault();
        if (this.isSelected) {
            return (this.isSelected = false);
        }
        else {
            return (this.isSelected = true);
        }
    }
    componentWillLoad() {
        this.el.focus();
        this.isSelected = this.selected;
    }
    getDisabledChip() {
        return this.disabled ? { chip_disabled: true, [`chip_disabled--${this.size}`]: true } : {};
    }
    getStyleChip() {
        return this.isSelected
            ? { chip_selected: true, [`chip_selected--${this.size}`]: true }
            : { [`chip--${this.color}`]: true, [`chip--${this.size}`]: true };
    }
    getStyleText() {
        if (this.isSelected) {
            const chipSelected = { 'chip_selected--text': true };
            return chipSelected;
        }
    }
    getSizeIconChip() {
        if (this.size === 'tall') {
            return 'medium';
        }
        else
            return 'x-small';
    }
    render() {
        return (h(Host, { key: '066ca27c97c11ccf6de22c5b556f63f32d5eb166' }, h("div", { key: '9f88cf8d75f9927c81eb2a440de973a8907dc23b', class: Object.assign(Object.assign({ chip: true }, this.getStyleChip()), this.getDisabledChip()), onClick: this.handleClick, "data-test": this.dataTest }, !this.disabled && h("div", { key: 'e2024e8e1a2df5a15514f2964febb018e0ac72dc', class: "chip_focus", onKeyDown: this.handleKeyDown.bind(this), tabindex: "0" }), !this.isSelected && !this.disabled && h("div", { key: 'c43ff8eadffeb253a949052a8cb77fda0569e87f', class: "chip_darker" }), this.icon && !this.isSelected && (h("div", { key: 'dda6759e59a088bb91f800cc228a16e0f1b7d633', class: "chip--icon" }, h("bds-icon", { key: '71c459b4e8c028ba7413c7600f2374543e2f7f67', size: this.getSizeIconChip(), name: this.icon }))), this.isSelected && (h("div", { key: 'f1195ccec33d81cc7ecddff935e6c3c4af55ee29', class: "chip_selected--icon" }, h("bds-icon", { key: 'f80d1a3125d652322d7e4a94627f0450b8117d7d', size: this.getSizeIconChip(), name: "checkball" }))), h("div", { key: 'f893ed1ec627c894440d2c405583a7ad44d8697e', class: this.isSelected ? `chip_selected--container-text--half` : `chip_selected--container-text--full` }, h("bds-typo", { key: 'e968d087c97f9d4eb00e300f9dc6125187cf1998', class: Object.assign({ 'chip--text': true }, this.getStyleText()), variant: "fs-12", "no-wrap": true, bold: "bold" }, h("slot", { key: '3a928a62674d5f9869840526d72cda6b68e4b8cf' }))))));
    }
    static get is() { return "bds-chip-selected"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() {
        return {
            "$": ["chip-selected.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["chip-selected.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
            },
            "color": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "ColorChipSelected",
                    "resolved": "\"danger\" | \"default\" | \"info\" | \"outline\" | \"success\" | \"warning\"",
                    "references": {
                        "ColorChipSelected": {
                            "location": "local",
                            "path": "/home/runner/work/blip-ds/blip-ds/src/components/chip-selected/chip-selected.tsx",
                            "id": "src/components/chip-selected/chip-selected.tsx::ColorChipSelected"
                        }
                    }
                },
                "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-selected/chip-selected.tsx",
                            "id": "src/components/chip-selected/chip-selected.tsx::Size"
                        }
                    }
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "used for change the chip size. Use one of them;"
                },
                "attribute": "size",
                "reflect": false,
                "defaultValue": "'standard'"
            },
            "selected": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "used for set the initial setup for true;"
                },
                "attribute": "selected",
                "reflect": false,
                "defaultValue": "false"
            },
            "disabled": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "When 'true', no events will be dispatched"
                },
                "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"
            }
        };
    }
    static get states() {
        return {
            "isSelected": {}
        };
    }
    static get events() {
        return [{
                "method": "chipClick",
                "name": "chipClick",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "complexType": {
                    "original": "any",
                    "resolved": "any",
                    "references": {}
                }
            }];
    }
    static get elementRef() { return "el"; }
    static get listeners() {
        return [{
                "name": "click",
                "method": "handleClick",
                "target": undefined,
                "capture": true,
                "passive": false
            }];
    }
}
//# sourceMappingURL=chip-selected.js.map
