@govbr-ds/webcomponents 2.0.0-next.2 → 2.0.0-next.21

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

@@ -0,0 +1,256 @@
+/*!
+ * Construído com @govbr-ds/webcomponents
+ * Padrão Digital de Governo.
+ */
+import { h, Host } from "@stencil/core";
+import { inheritAriaAttributes } from "../../utils/inherited-attributes";
+/**
+ * Para uma descrição detalhada, consulte a [documentação do GovBR-DS](https://www.gov.br/ds/components/tag?tab=designer).
+ *
+ * @slot default - Slot utilizado para inserir conteúdo adicional na tag, como texto ou elementos HTML extras.
+ */
+export class Tag {
+    constructor() {
+        this.inheritedAttributes = {};
+        this.handleClose = () => {
+            this.el.remove();
+        };
+        this.label = '';
+        this.iconName = '';
+        this.color = '';
+        this.density = 'small';
+        this.shape = 'default';
+        this.status = false;
+        this.interaction = false;
+        this.disabled = false;
+        this.stateIconName = 'fa-solid:car';
+    }
+    componentWillLoad() {
+        this.brWillLoad.emit();
+        this.inheritedAttributes = inheritAriaAttributes(this.el);
+    }
+    getCssClassMap() {
+        const classes = {
+            'br-tag': true,
+            interaction: this.interaction,
+            [this.color]: this.color !== '',
+            small: this.density === 'small',
+            medium: this.density === 'medium',
+            large: this.density === 'large',
+            count: this.shape === 'rounded' ? true : false,
+            icon: this.shape === 'circle' ? true : false,
+            status: this.status,
+        };
+        return classes;
+    }
+    renderIcon() {
+        if (this.iconName.trim().length === 0)
+            return null;
+        return h("br-icon", { style: { fontSize: 'var(--icon-size-base)' }, "icon-name": this.iconName, "aria-hidden": "true" });
+    }
+    renderLabel() {
+        if (this.shape === 'circle' || this.status)
+            return null;
+        return (h("span", { id: "interactivetag1", "aria-label": this.label }, this.label));
+    }
+    renderCloseButton() {
+        if (!this.interaction)
+            return null;
+        return (h("br-button", { type: "button", shape: "circle", emphasis: !this.interaction ? 'tertiary' : 'primary', "aria-label": "Fechar", colorMode: !this.interaction ? 'dark' : null, "aria-describedby": "interactivetag1", onClick: this.handleClose, disabled: this.disabled }, h("br-icon", { "icon-name": "fa-solid:times" })));
+    }
+    renderStatusLabel() {
+        if (!this.status)
+            return null;
+        return (h("span", { class: "tag-spacing-status", id: "interactivetag1", "aria-label": this.label }, this.label));
+    }
+    render() {
+        return (h(Host, { key: '45fbabb9a2a4ac08101df0a9dbfb08de2440bdb6' }, h("div", { key: 'd7cd66126a75d9baa4ac983d1cf79c2e794c2a49', class: "tag-position" }, h("span", Object.assign({ key: 'f28d65ea9b14002350ebf4002de534d6ea567786', class: this.getCssClassMap() }, this.inheritedAttributes, { role: "alert", "aria-live": "assertive" }), this.renderIcon(), this.renderLabel(), this.renderCloseButton(), h("slot", { key: '751ed1841c55583a873b293b862b4b816dd972c8' })), this.renderStatusLabel())));
+    }
+    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."
+                },
+                "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."
+                },
+                "attribute": "icon-name",
+                "reflect": true,
+                "defaultValue": "''"
+            },
+            "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."
+                },
+                "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."
+                },
+                "attribute": "density",
+                "reflect": true,
+                "defaultValue": "'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."
+                },
+                "attribute": "shape",
+                "reflect": true,
+                "defaultValue": "'default'"
+            },
+            "status": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "A propriedade 'status' \u00E9 um booleano que indica se o status deve ser exibido.\nSe definido como true, o status ser\u00E1 mostrado ao lado do texto."
+                },
+                "attribute": "status",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "interaction": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "A propriedade 'interaction' \u00E9 um booleano que indica se a intera\u00E7\u00E3o deve ser habilitada.\nSe definido como true, o componente permitir\u00E1 intera\u00E7\u00F5es do usu\u00E1rio."
+                },
+                "attribute": "interaction",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "A propriedade 'disabled' \u00E9 um booleano que indica se o componente deve estar desabilitado.\nSe definido como true, o componente n\u00E3o permitir\u00E1 intera\u00E7\u00F5es do usu\u00E1rio."
+                },
+                "attribute": "disabled",
+                "reflect": true,
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "stateIconName": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "brWillLoad",
+                "name": "brWillLoad",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emite um evento antes que o componente seja carregado pela primeira vez.\nUtilize este evento para realizar tarefas de inicializa\u00E7\u00E3o antes do componente ser exibido.\nConsulte a documenta\u00E7\u00E3o do [Stencil](https://stenciljs.com/docs/component-lifecycle#componentwillload) para mais detalhes."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+    static get attachInternalsMemberName() { return "elementInternals"; }
+}
+//# sourceMappingURL=tag.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tag.js","sourceRoot":"","sources":["../../../../src/components/tag/tag.tsx"],"names":[],"mappings":"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","sourcesContent":["import { AttachInternals, Component, Element, Event, EventEmitter, h, Host, Prop, State } from '@stencil/core'\n\nimport { Attributes, inheritAriaAttributes } from '../../utils/inherited-attributes'\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 - Slot utilizado para inserir conteúdo adicional na tag, como texto ou elementos HTML extras.\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  @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 }) 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 }) iconName: string = ''\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 }) 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 }) density: 'small' | 'medium' | 'large' = '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 }) shape: 'circle' | 'rounded' | 'default' = 'default'\n\n  /**\n   * A propriedade 'status' é um booleano que indica se o status deve ser exibido.\n   * Se definido como true, o status será mostrado ao lado do texto.\n   */\n  @Prop({ reflect: true }) status: boolean = false\n\n  /**\n   * A propriedade 'interaction' é um booleano que indica se a interação deve ser habilitada.\n   * Se definido como true, o componente permitirá interações do usuário.\n   */\n  @Prop({ reflect: true }) interaction: boolean = false\n\n  /**\n   * A propriedade 'disabled' é um booleano que indica se o componente deve estar desabilitado.\n   * Se definido como true, o componente não permitirá interações do usuário.\n   */\n  @Prop({ reflect: true }) disabled: boolean = false\n\n  @State() stateIconName: string = 'fa-solid:car'\n\n  /**\n   * Emite um evento antes que o componente seja carregado pela primeira vez.\n   * Utilize este evento para realizar tarefas de inicialização antes do componente ser exibido.\n   * Consulte a documentação do [Stencil](https://stenciljs.com/docs/component-lifecycle#componentwillload) para mais detalhes.\n   */\n  @Event() brWillLoad: EventEmitter<void>\n  componentWillLoad() {\n    this.brWillLoad.emit()\n    this.inheritedAttributes = inheritAriaAttributes(this.el)\n  }\n\n  private getCssClassMap(): CssClassMap {\n    const classes: CssClassMap = {\n      'br-tag': true,\n      interaction: this.interaction,\n      [this.color]: this.color !== '',\n      small: this.density === 'small',\n      medium: this.density === 'medium',\n      large: this.density === 'large',\n      count: this.shape === 'rounded' ? true : false,\n      icon: this.shape === 'circle' ? true : false,\n      status: this.status,\n    }\n\n    return classes\n  }\n\n  private inheritedAttributes: Attributes = {}\n\n  private renderIcon() {\n    if (this.iconName.trim().length === 0) return null\n    return <br-icon style={{ fontSize: 'var(--icon-size-base)' }} icon-name={this.iconName} aria-hidden=\"true\" />\n  }\n\n  private renderLabel() {\n    if (this.shape === 'circle' || this.status) return null\n    return (\n      <span id=\"interactivetag1\" aria-label={this.label}>\n        {this.label}\n      </span>\n    )\n  }\n\n  private renderCloseButton() {\n    if (!this.interaction) return null\n    return (\n      <br-button\n        type=\"button\"\n        shape=\"circle\"\n        emphasis={!this.interaction ? 'tertiary' : 'primary'}\n        aria-label=\"Fechar\"\n        colorMode={!this.interaction ? 'dark' : null}\n        aria-describedby=\"interactivetag1\"\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    if (!this.status) return null\n    return (\n      <span class=\"tag-spacing-status\" id=\"interactivetag1\" aria-label={this.label}>\n        {this.label}\n      </span>\n    )\n  }\n\n  private handleClose = () => {\n    this.el.remove()\n  }\n\n  render() {\n    return (\n      <Host>\n        <div class=\"tag-position\">\n          <span class={this.getCssClassMap()} {...this.inheritedAttributes} role=\"alert\" aria-live=\"assertive\">\n            {this.renderIcon()}\n            {this.renderLabel()}\n            {this.renderCloseButton()}\n            <slot></slot>\n          </span>\n          {this.renderStatusLabel()}\n        </div>\n      </Host>\n    )\n  }\n}\n"]}