@govbr-ds/webcomponents 2.0.0-next.4 → 2.0.0-next.40

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

@@ -0,0 +1,498 @@
+/*!
+ * Construído por SERPRO
+ * © https://serpro.gov.br/ - MIT License.
+ */
+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: '912b55c57c0a5fdd320e822e8c1b4d7397da1104', class: this.getCssClassMap(), id: this.customId }, this.renderIcon(), this.renderLabel(), this.renderCloseButton(), h("slot", { key: 'f6750851d2f3b44abdc7ecb1f8b69e4e1ab021a6' })));
+        return (h(Host, { key: 'cae7f06389e20da8c5692f741987e076cb83fc7d' }, !this.status ? (mainTagContent) : (h("div", { style: { display: 'flex', alignItems: 'center' } }, mainTagContent, this.renderStatusLabel())), this.interactionSelect && (h("span", { key: '3286165ca201e2317539a197b7434f28deb5988d', 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: '191a9f964304cebb5d5f8d9ea7a4481c9b616ec3', htmlFor: this.label }, this.renderIcon(), h("span", { key: '7ab5474c8764ab06e2a224fab044965a045e3110' }, 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

@@ -0,0 +1 @@
+{"version":3,"file":"tag.js","sourceRoot":"","sources":["../../../../../../packages/webcomponents/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"]}