import { h, Host } from "@stencil/core";
import { ariaBooleanToString } from "../../utils/aria";
import { inheritAttributes } from "../../utils/attributes";
import { BEM } from "../../utils/bem";
export class Tag {
    constructor() {
        this.inheritedAttributes = {};
        this.inheritedAttributesClose = {};
        /**
         * The theme type of the tag.
         */
        this.color = '';
        /**
         * The size of the tag element
         */
        this.size = '';
        /**
         * The theme type of the tag.
         */
        this.closable = false;
        /**
         * Overwrites the default color to invalid style
         */
        this.invalid = false;
        /**
         * If `true`, the element is not mutable, focusable, or even submitted with the form. The user can neither edit nor focus on the control, nor its form control descendants.
         */
        this.disabled = false;
        /**
         * Choosing left or center the tag is aligned to that side in the bal-card.
         */
        this.position = 'left';
        /**
         * If `true` a light version of the color is displayed
         */
        this.light = false;
        /**
         * @internal
         * Sets background color to transparent
         */
        this.transparent = false;
    }
    componentWillLoad() {
        this.inheritedAttributes = inheritAttributes(this.el, ['aria-label', 'title']);
        this.inheritedAttributesClose = inheritAttributes(this.el, ['tabindex']);
    }
    render() {
        const block = BEM.block('tag');
        const elLabel = block.element('label');
        const sizeClass = `is-${this.size}`;
        const hasSize = this.size !== undefined;
        const hasColor = this.color !== '';
        const colorClass = `is-${this.color}${this.light ? '-light' : ''}`;
        const disabledClass = 'is-disabled';
        const hasDisabled = this.disabled;
        const positionClass = `is-${this.position}`;
        const hasPosition = this.position !== undefined;
        return (h(Host, Object.assign({ key: 'd426597b70777eff0f582f7d443a9bc51ced1e53', "aria-disabled": ariaBooleanToString(this.disabled), class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier(sizeClass).class(hasSize)), block.modifier(colorClass).class(hasColor)), block.modifier(disabledClass).class(hasDisabled)), block.modifier(positionClass).class(hasPosition)), block.modifier('is-invalid').class(this.invalid)) }, this.inheritedAttributes), h("span", { key: '3d84d8bfe73a633ebb83eaba536cb2cf4ed61c95', class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, elLabel.class()), elLabel.modifier(sizeClass).class(hasSize)), elLabel.modifier(colorClass).class(hasColor)), elLabel.modifier(disabledClass).class(hasDisabled)), elLabel.modifier('is-invalid').class(this.invalid)), "data-testid": "bal-tag-label" }, h("slot", { key: '1d74104803bac4b5cf8ee296a2e9f1f9753bf762' })), h("bal-close", Object.assign({ key: 'cda8fcf97b298bbd453e7c665c4e4741e0a975ab', class: Object.assign({}, block.element('close').class()), style: {
                display: this.closable && !this.disabled ? 'flex' : 'none',
            }, size: this.size === 'small' ? 'small' : '', inverted: (['blue', 'primary', 'info', 'success', 'warning', 'danger', 'red', 'purple', 'yellow', 'green'].includes(this.color) &&
                !this.light) ||
                this.invalid, "data-testid": "bal-tag-close", onClick: (ev) => this.balCloseClick.emit(ev) }, this.inheritedAttributesClose))));
    }
    static get is() { return "bal-tag"; }
    static get originalStyleUrls() {
        return {
            "$": ["bal-tag.sass"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["bal-tag.css"]
        };
    }
    static get properties() {
        return {
            "color": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "BalProps.BalTagColor",
                    "resolved": "\"\" | \"blue\" | \"danger\" | \"green\" | \"grey\" | \"info\" | \"primary\" | \"purple\" | \"red\" | \"success\" | \"warning\" | \"yellow\"",
                    "references": {
                        "BalProps": {
                            "location": "global",
                            "id": "global::BalProps"
                        }
                    }
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "The theme type of the tag."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "color",
                "defaultValue": "''"
            },
            "size": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "BalProps.BalTagSize",
                    "resolved": "\"\" | \"large\" | \"medium\" | \"small\"",
                    "references": {
                        "BalProps": {
                            "location": "global",
                            "id": "global::BalProps"
                        }
                    }
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "The size of the tag element"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "size",
                "defaultValue": "''"
            },
            "closable": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "The theme type of the tag."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "closable",
                "defaultValue": "false"
            },
            "invalid": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Overwrites the default color to invalid style"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "invalid",
                "defaultValue": "false"
            },
            "disabled": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "If `true`, the element is not mutable, focusable, or even submitted with the form. The user can neither edit nor focus on the control, nor its form control descendants."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "disabled",
                "defaultValue": "false"
            },
            "position": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "BalProps.BalTagPlacement",
                    "resolved": "\"center\" | \"left\"",
                    "references": {
                        "BalProps": {
                            "location": "global",
                            "id": "global::BalProps"
                        }
                    }
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Choosing left or center the tag is aligned to that side in the bal-card."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "position",
                "defaultValue": "'left'"
            },
            "light": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "If `true` a light version of the color is displayed"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "light",
                "defaultValue": "false"
            },
            "transparent": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "internal",
                            "text": "Sets background color to transparent"
                        }],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "transparent",
                "defaultValue": "false"
            }
        };
    }
    static get events() {
        return [{
                "method": "balCloseClick",
                "name": "balCloseClick",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": "Emitted when the input got clicked."
                },
                "complexType": {
                    "original": "BalEvents.BalTagCloseClickDetail",
                    "resolved": "MouseEvent",
                    "references": {
                        "BalEvents": {
                            "location": "global",
                            "id": "global::BalEvents"
                        }
                    }
                }
            }];
    }
    static get elementRef() { return "el"; }
}
