@govbr-ds/webcomponents 2.0.0-next.29 → 2.0.0-next.30

package/dist/collection/components/tag/tag.js

@@ -1,497 +0,0 @@
-/*!
- * Construído com @govbr-ds/webcomponents
- */
-import { h, Host, } from "@stencil/core";
-/**
- * Para uma descrição detalhada, consulte a [documentação do GovBR-DS](https://www.gov.br/ds/components/tag?tab=designer).
- *
- * @slot default - Espaço de conteúdo do tag. Geralmente usado para incluir o rótulo ou um ícone.
- */
-// Constantes para valores fixos
-const DENSITY_SMALL = 'small';
-const DENSITY_MEDIUM = 'medium';
-const DENSITY_LARGE = 'large';
-const SHAPE_CIRCLE = 'circle';
-const SHAPE_ROUNDED = 'rounded';
-const SHAPE_DEFAULT = 'default';
-export class Tag {
-    /**
-     * Referência ao elemento host do componente.
-     * Utilize esta propriedade para acessar e manipular o elemento do DOM associado ao componente.
-     */
-    el;
-    /** API de controle de formulário nativa */
-    elementInternals;
-    /**
-     * A propriedade 'label' é uma string que representa o texto a ser exibido no componente.
-     * Ela é refletida no DOM, permitindo que alterações no valor sejam refletidas no elemento HTML correspondente.
-     */
-    label = '';
-    /**
-     * A propriedade 'iconName' define o nome do ícone que será exibido ao lado do texto.
-     * O valor padrão é 'fa-solid:car', que corresponde a um ícone de carro da biblioteca Font Awesome.
-     */
-    iconName = '';
-    /**
-     * A propriedade 'name' é uma string que representa o nome do grupo da tag para seleção.
-     * Ela é refletida no DOM, permitindo que alterações no valor sejam refletidas no elemento HTML correspondente.
-     */
-    name = '';
-    /**
-     * A tag permite seleção múltipla.
-     * */
-    multiple = false;
-    /**
-     * A tag está selecionada.
-     * */
-    selected = false;
-    /**
-     * Identificador único.
-     * Caso não seja fornecido, um ID gerado automaticamente será usado.
-     */
-    customId = `br-tag-${tagId++}`;
-    /**
-     * A propriedade 'color' permite definir a cor do componente.
-     * Aceita valores como 'red', 'blue', entre outros, e é refletida no DOM.
-     */
-    color = '';
-    /**
-     * A propriedade 'density' permite definir a densidade do componente.
-     * Aceita valores como 'small', 'medium' e 'large', e é refletida no DOM.
-     */
-    density = DENSITY_SMALL;
-    /**
-     * A propriedade 'shape' define o formato do componente.
-     * Valores possíveis:
-     * - 'circle': Componente com formato circular.
-     * - 'rounded': Componente com bordas arredondadas.
-     * - 'default': Componente com formato padrão.
-     */
-    shape = SHAPE_DEFAULT;
-    /**
-     * Status deve ser exibido.
-     */
-    status = false;
-    /**
-     * Interação deve ser habilitada.
-     */
-    interaction = false;
-    /**
-     * Interação de seleção deve ser habilitada.
-     * */
-    interactionSelect = false;
-    /**
-     * Tag deve estar desabilitado.
-     */
-    disabled = false;
-    /**
-     * Tag está selecionada.
-     */
-    selectedClassValue = false;
-    /**
-     * Evento emitido quando a tag é selecionada.
-     */
-    radioSelected;
-    handleInteractionChange(newValue) {
-        if (newValue && this.interactionSelect) {
-            console.warn("Aviso: 'interaction' e 'interactionSelect' não podem ser usados ao mesmo tempo. Alterando o 'interaction' para 'false'.");
-            this.interaction = false;
-        }
-    }
-    handleInteractionSelectChange(newValue) {
-        if (newValue && this.interaction) {
-            console.warn("Aviso: 'interaction' e 'interactionSelect' não podem ser usados ao mesmo tempo. Alterando o 'interaction' para 'false'.");
-            this.interaction = false;
-        }
-    }
-    componentWillLoad() {
-        if (this.interaction && this.interactionSelect) {
-            console.warn("Aviso: 'interaction' e 'interactionSelect' não podem ser usados ao mesmo tempo. Alterando o 'interaction' para 'false'.");
-            this.interaction = false;
-        }
-    }
-    connectedCallback() {
-        this.selectedClassValue = this.selected;
-    }
-    handleSelectedChange(newValue) {
-        this.selectedClassValue = newValue;
-    }
-    getCssClassMap() {
-        return {
-            'br-tag': true,
-            interaction: this.interaction,
-            'interaction-select': this.interactionSelect,
-            selected: this.selectedClassValue,
-            [this.color]: !!this.color,
-            [DENSITY_SMALL]: this.density === DENSITY_SMALL,
-            [DENSITY_MEDIUM]: this.density === DENSITY_MEDIUM,
-            [DENSITY_LARGE]: this.density === DENSITY_LARGE,
-            count: this.shape === SHAPE_ROUNDED,
-            icon: this.shape === SHAPE_CIRCLE,
-            status: this.status,
-        };
-    }
-    renderIcon() {
-        return this.iconName && this.iconName.trim() !== '' ? (h("br-icon", { "icon-name": this.iconName, "aria-hidden": "true" })) : null;
-    }
-    renderLabel() {
-        return this.shape !== SHAPE_CIRCLE && !this.status ? h("span", null, this.label) : null;
-    }
-    renderCloseButton() {
-        if (!this.interaction)
-            return null;
-        return (h("br-button", { type: "button", shape: "circle", emphasis: "primary", "aria-label": "Fechar", onClick: this.handleClose, disabled: this.disabled }, h("br-icon", { "icon-name": "fa-solid:times" })));
-    }
-    renderStatusLabel() {
-        return this.status ? h("span", { class: "tag-spacing-status" }, this.label) : null;
-    }
-    handleClose = () => {
-        this.el.remove();
-    };
-    handleChangeValueChecked = () => {
-        if (!this.multiple) {
-            this.radioSelected.emit(this.name);
-        }
-        this.selected = !this.selected;
-    };
-    handleChangeRadioValue = (event) => {
-        if (!this.multiple) {
-            this.radioSelected.emit(this.name);
-            this.selected = event.target.checked;
-        }
-    };
-    handleCheckedChange(event) {
-        if (event.detail === this.name && this.el !== event.target) {
-            this.selected = false;
-        }
-    }
-    render() {
-        const mainTagContent = (h("span", { key: 'b3115452499a79dba681a35ed78d6d57d34382dd', class: this.getCssClassMap(), id: this.customId }, this.renderIcon(), this.renderLabel(), this.renderCloseButton(), h("slot", { key: 'c407dd13109af8eb1ee8be7f5ed93e40dd731167' })));
-        return (h(Host, { key: '311d46cc019f9c443260c41886dcb20415473a99' }, !this.status ? (mainTagContent) : (h("div", { style: { display: 'flex', alignItems: 'center' } }, mainTagContent, this.renderStatusLabel())), this.interactionSelect && (h("span", { key: '2e29dded6dc248959d188892e47b4fd73707aa97', class: this.getCssClassMap(), id: this.customId }, this.multiple ? (h("input", { id: this.label, type: "checkbox", name: this.name, value: this.label, checked: this.selected, onClick: this.handleChangeValueChecked, disabled: this.disabled })) : (h("input", { id: this.label, type: "radio", name: this.name, value: this.label, checked: this.selected, onClick: this.handleChangeRadioValue, disabled: this.disabled })), h("label", { key: 'c29be1f441f9946044cbe7d3a99e9d95fdf1b40a', htmlFor: this.label }, this.renderIcon(), h("span", { key: 'd6fdcf753bab599342b368d41e12fd83c8404c42' }, this.label))))));
-    }
-    static get is() { return "br-tag"; }
-    static get encapsulation() { return "shadow"; }
-    static get formAssociated() { return true; }
-    static get originalStyleUrls() {
-        return {
-            "$": ["tag.scss"]
-        };
-    }
-    static get styleUrls() {
-        return {
-            "$": ["tag.css"]
-        };
-    }
-    static get properties() {
-        return {
-            "label": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "A propriedade 'label' \u00E9 uma string que representa o texto a ser exibido no componente.\nEla \u00E9 refletida no DOM, permitindo que altera\u00E7\u00F5es no valor sejam refletidas no elemento HTML correspondente."
-                },
-                "getter": false,
-                "setter": false,
-                "attribute": "label",
-                "reflect": true,
-                "defaultValue": "''"
-            },
-            "iconName": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "A propriedade 'iconName' define o nome do \u00EDcone que ser\u00E1 exibido ao lado do texto.\nO valor padr\u00E3o \u00E9 'fa-solid:car', que corresponde a um \u00EDcone de carro da biblioteca Font Awesome."
-                },
-                "getter": false,
-                "setter": false,
-                "attribute": "icon-name",
-                "reflect": true,
-                "defaultValue": "''"
-            },
-            "name": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "A propriedade 'name' \u00E9 uma string que representa o nome do grupo da tag para sele\u00E7\u00E3o.\nEla \u00E9 refletida no DOM, permitindo que altera\u00E7\u00F5es no valor sejam refletidas no elemento HTML correspondente."
-                },
-                "getter": false,
-                "setter": false,
-                "attribute": "name",
-                "reflect": true,
-                "defaultValue": "''"
-            },
-            "multiple": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "A tag permite sele\u00E7\u00E3o m\u00FAltipla."
-                },
-                "getter": false,
-                "setter": false,
-                "attribute": "multiple",
-                "reflect": true,
-                "defaultValue": "false"
-            },
-            "selected": {
-                "type": "boolean",
-                "mutable": true,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "A tag est\u00E1 selecionada."
-                },
-                "getter": false,
-                "setter": false,
-                "attribute": "selected",
-                "reflect": true,
-                "defaultValue": "false"
-            },
-            "customId": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Identificador \u00FAnico.\nCaso n\u00E3o seja fornecido, um ID gerado automaticamente ser\u00E1 usado."
-                },
-                "getter": false,
-                "setter": false,
-                "attribute": "custom-id",
-                "reflect": true,
-                "defaultValue": "`br-tag-${tagId++}`"
-            },
-            "color": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "A propriedade 'color' permite definir a cor do componente.\nAceita valores como 'red', 'blue', entre outros, e \u00E9 refletida no DOM."
-                },
-                "getter": false,
-                "setter": false,
-                "attribute": "color",
-                "reflect": true,
-                "defaultValue": "''"
-            },
-            "density": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "'small' | 'medium' | 'large'",
-                    "resolved": "\"large\" | \"medium\" | \"small\"",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "A propriedade 'density' permite definir a densidade do componente.\nAceita valores como 'small', 'medium' e 'large', e \u00E9 refletida no DOM."
-                },
-                "getter": false,
-                "setter": false,
-                "attribute": "density",
-                "reflect": true,
-                "defaultValue": "DENSITY_SMALL"
-            },
-            "shape": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "'circle' | 'rounded' | 'default'",
-                    "resolved": "\"circle\" | \"default\" | \"rounded\"",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "A propriedade 'shape' define o formato do componente.\nValores poss\u00EDveis:\n- 'circle': Componente com formato circular.\n- 'rounded': Componente com bordas arredondadas.\n- 'default': Componente com formato padr\u00E3o."
-                },
-                "getter": false,
-                "setter": false,
-                "attribute": "shape",
-                "reflect": true,
-                "defaultValue": "SHAPE_DEFAULT"
-            },
-            "status": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Status deve ser exibido."
-                },
-                "getter": false,
-                "setter": false,
-                "attribute": "status",
-                "reflect": true,
-                "defaultValue": "false"
-            },
-            "interaction": {
-                "type": "boolean",
-                "mutable": true,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Intera\u00E7\u00E3o deve ser habilitada."
-                },
-                "getter": false,
-                "setter": false,
-                "attribute": "interaction",
-                "reflect": true,
-                "defaultValue": "false"
-            },
-            "interactionSelect": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Intera\u00E7\u00E3o de sele\u00E7\u00E3o deve ser habilitada."
-                },
-                "getter": false,
-                "setter": false,
-                "attribute": "interaction-select",
-                "reflect": true,
-                "defaultValue": "false"
-            },
-            "disabled": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Tag deve estar desabilitado."
-                },
-                "getter": false,
-                "setter": false,
-                "attribute": "disabled",
-                "reflect": true,
-                "defaultValue": "false"
-            }
-        };
-    }
-    static get states() {
-        return {
-            "selectedClassValue": {}
-        };
-    }
-    static get events() {
-        return [{
-                "method": "radioSelected",
-                "name": "radioSelected",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Evento emitido quando a tag \u00E9 selecionada."
-                },
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                }
-            }];
-    }
-    static get elementRef() { return "el"; }
-    static get watchers() {
-        return [{
-                "propName": "interaction",
-                "methodName": "handleInteractionChange"
-            }, {
-                "propName": "interactionSelect",
-                "methodName": "handleInteractionSelectChange"
-            }, {
-                "propName": "selected",
-                "methodName": "handleSelectedChange"
-            }];
-    }
-    static get listeners() {
-        return [{
-                "name": "radioSelected",
-                "method": "handleCheckedChange",
-                "target": "document",
-                "capture": false,
-                "passive": false
-            }];
-    }
-    static get attachInternalsMemberName() { return "elementInternals"; }
-}
-let tagId = 0;
-//# sourceMappingURL=tag.js.map

package/dist/collection/components/tag/tag.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"tag.js","sourceRoot":"","sources":["../../../../../../src/components/tag/tag.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  AttachInternals,\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Listen,\n  Prop,\n  State,\n  Watch,\n} from '@stencil/core'\n\nimport { CssClassMap } from '../../utils/interfaces'\n\n/**\n * Para uma descrição detalhada, consulte a [documentação do GovBR-DS](https://www.gov.br/ds/components/tag?tab=designer).\n *\n * @slot default - Espaço de conteúdo do tag. Geralmente usado para incluir o rótulo ou um ícone.\n */\n\n// Constantes para valores fixos\nconst DENSITY_SMALL = 'small'\nconst DENSITY_MEDIUM = 'medium'\nconst DENSITY_LARGE = 'large'\n\nconst SHAPE_CIRCLE = 'circle'\nconst SHAPE_ROUNDED = 'rounded'\nconst SHAPE_DEFAULT = 'default'\n\n@Component({\n  tag: 'br-tag',\n  styleUrl: 'tag.scss',\n  shadow: true,\n  formAssociated: true,\n})\nexport class Tag {\n  /**\n   * Referência ao elemento host do componente.\n   * Utilize esta propriedade para acessar e manipular o elemento do DOM associado ao componente.\n   */\n  @Element() el: HTMLBrTagElement\n\n  /** API de controle de formulário nativa */\n  @AttachInternals() elementInternals: ElementInternals\n\n  /**\n   * A propriedade 'label' é uma string que representa o texto a ser exibido no componente.\n   * Ela é refletida no DOM, permitindo que alterações no valor sejam refletidas no elemento HTML correspondente.\n   */\n  @Prop({ reflect: true }) readonly label: string = ''\n\n  /**\n   * A propriedade 'iconName' define o nome do ícone que será exibido ao lado do texto.\n   * O valor padrão é 'fa-solid:car', que corresponde a um ícone de carro da biblioteca Font Awesome.\n   */\n  @Prop({ reflect: true }) readonly iconName: string = ''\n\n  /**\n   * A propriedade 'name' é uma string que representa o nome do grupo da tag para seleção.\n   * Ela é refletida no DOM, permitindo que alterações no valor sejam refletidas no elemento HTML correspondente.\n   */\n  @Prop({ reflect: true }) readonly name: string = ''\n\n  /**\n   * A tag permite seleção múltipla.\n   * */\n  @Prop({ reflect: true }) readonly multiple: boolean = false\n\n  /**\n   * A tag está selecionada.\n   * */\n  @Prop({ reflect: true, mutable: true }) selected: boolean = false\n\n  /**\n   * Identificador único.\n   * Caso não seja fornecido, um ID gerado automaticamente será usado.\n   */\n  @Prop({ reflect: true }) readonly customId: string = `br-tag-${tagId++}`\n\n  /**\n   * A propriedade 'color' permite definir a cor do componente.\n   * Aceita valores como 'red', 'blue', entre outros, e é refletida no DOM.\n   */\n  @Prop({ reflect: true }) readonly color: string = ''\n\n  /**\n   * A propriedade 'density' permite definir a densidade do componente.\n   * Aceita valores como 'small', 'medium' e 'large', e é refletida no DOM.\n   */\n  @Prop({ reflect: true }) readonly density: 'small' | 'medium' | 'large' = DENSITY_SMALL\n\n  /**\n   * A propriedade 'shape' define o formato do componente.\n   * Valores possíveis:\n   * - 'circle': Componente com formato circular.\n   * - 'rounded': Componente com bordas arredondadas.\n   * - 'default': Componente com formato padrão.\n   */\n  @Prop({ reflect: true }) readonly shape: 'circle' | 'rounded' | 'default' = SHAPE_DEFAULT\n\n  /**\n   * Status deve ser exibido.\n   */\n  @Prop({ reflect: true }) readonly status: boolean = false\n\n  /**\n   * Interação deve ser habilitada.\n   */\n  @Prop({ reflect: true, mutable: true }) interaction: boolean = false\n\n  /**\n   * Interação de seleção deve ser habilitada.\n   * */\n  @Prop({ reflect: true }) interactionSelect: boolean = false\n\n  /**\n   * Tag deve estar desabilitado.\n   */\n  @Prop({ reflect: true }) readonly disabled: boolean = false\n\n  /**\n   * Tag está selecionada.\n   */\n  @State() selectedClassValue: boolean = false\n\n  /**\n   * Evento emitido quando a tag é selecionada.\n   */\n  @Event() radioSelected: EventEmitter<string>\n\n  @Watch('interaction')\n  handleInteractionChange(newValue: boolean) {\n    if (newValue && this.interactionSelect) {\n      console.warn(\n        \"Aviso: 'interaction' e 'interactionSelect' não podem ser usados ao mesmo tempo. Alterando o 'interaction' para 'false'.\"\n      )\n      this.interaction = false\n    }\n  }\n\n  @Watch('interactionSelect')\n  handleInteractionSelectChange(newValue: boolean) {\n    if (newValue && this.interaction) {\n      console.warn(\n        \"Aviso: 'interaction' e 'interactionSelect' não podem ser usados ao mesmo tempo. Alterando o 'interaction' para 'false'.\"\n      )\n      this.interaction = false\n    }\n  }\n\n  componentWillLoad() {\n    if (this.interaction && this.interactionSelect) {\n      console.warn(\n        \"Aviso: 'interaction' e 'interactionSelect' não podem ser usados ao mesmo tempo. Alterando o 'interaction' para 'false'.\"\n      )\n      this.interaction = false\n    }\n  }\n  connectedCallback() {\n    this.selectedClassValue = this.selected\n  }\n\n  @Watch('selected')\n  handleSelectedChange(newValue: boolean) {\n    this.selectedClassValue = newValue\n  }\n\n  private getCssClassMap(): CssClassMap {\n    return {\n      'br-tag': true,\n      interaction: this.interaction,\n      'interaction-select': this.interactionSelect,\n      selected: this.selectedClassValue,\n      [this.color]: !!this.color,\n      [DENSITY_SMALL]: this.density === DENSITY_SMALL,\n      [DENSITY_MEDIUM]: this.density === DENSITY_MEDIUM,\n      [DENSITY_LARGE]: this.density === DENSITY_LARGE,\n      count: this.shape === SHAPE_ROUNDED,\n      icon: this.shape === SHAPE_CIRCLE,\n      status: this.status,\n    }\n  }\n\n  private renderIcon() {\n    return this.iconName && this.iconName.trim() !== '' ? (\n      <br-icon icon-name={this.iconName} aria-hidden=\"true\" />\n    ) : null\n  }\n\n  private renderLabel() {\n    return this.shape !== SHAPE_CIRCLE && !this.status ? <span>{this.label}</span> : null\n  }\n\n  private renderCloseButton() {\n    if (!this.interaction) return null\n    return (\n      <br-button\n        type=\"button\"\n        shape=\"circle\"\n        emphasis=\"primary\"\n        aria-label=\"Fechar\"\n        onClick={this.handleClose}\n        disabled={this.disabled}\n      >\n        <br-icon icon-name=\"fa-solid:times\"></br-icon>\n      </br-button>\n    )\n  }\n\n  private renderStatusLabel() {\n    return this.status ? <span class=\"tag-spacing-status\">{this.label}</span> : null\n  }\n\n  private handleClose = () => {\n    this.el.remove()\n  }\n\n  private handleChangeValueChecked = () => {\n    if (!this.multiple) {\n      this.radioSelected.emit(this.name)\n    }\n    this.selected = !this.selected\n  }\n\n  private handleChangeRadioValue = (event: MouseEvent) => {\n    if (!this.multiple) {\n      this.radioSelected.emit(this.name)\n      this.selected = (event.target as HTMLInputElement).checked\n    }\n  }\n\n  @Listen('radioSelected', { target: 'document' })\n  handleCheckedChange(event: CustomEvent) {\n    if (event.detail === this.name && this.el !== event.target) {\n      this.selected = false\n    }\n  }\n\n  render() {\n    const mainTagContent = (\n      <span class={this.getCssClassMap()} id={this.customId}>\n        {this.renderIcon()}\n        {this.renderLabel()}\n        {this.renderCloseButton()}\n        <slot></slot>\n      </span>\n    )\n\n    return (\n      <Host>\n        {!this.status ? (\n          mainTagContent\n        ) : (\n          <div style={{ display: 'flex', alignItems: 'center' }}>\n            {mainTagContent}\n            {this.renderStatusLabel()}\n          </div>\n        )}\n\n        {this.interactionSelect && (\n          <span class={this.getCssClassMap()} id={this.customId}>\n            {this.multiple ? (\n              <input\n                id={this.label}\n                type=\"checkbox\"\n                name={this.name}\n                value={this.label}\n                checked={this.selected}\n                onClick={this.handleChangeValueChecked}\n                disabled={this.disabled}\n              />\n            ) : (\n              <input\n                id={this.label}\n                type=\"radio\"\n                name={this.name}\n                value={this.label}\n                checked={this.selected}\n                onClick={this.handleChangeRadioValue}\n                disabled={this.disabled}\n              />\n            )}\n            <label htmlFor={this.label}>\n              {this.renderIcon()}\n              <span>{this.label}</span>\n            </label>\n          </span>\n        )}\n      </Host>\n    )\n  }\n}\n\nlet tagId = 0\n"]}