@govbr-ds/webcomponents 2.0.0-next.22 → 2.0.0-next.24

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

@@ -1,272 +0,0 @@
-/*!
- * 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: '4e078895032e633b6c111bd633222938e6b00a95' }, h("div", { key: '3dd682ccfe5eb9533ad82f9d1fd39a2b1357774f', class: "tag-position" }, h("span", Object.assign({ key: '09f68d7a0a6820f590cfdb04bc75956ee276f426', class: this.getCssClassMap() }, this.inheritedAttributes, { role: "alert", "aria-live": "assertive" }), this.renderIcon(), this.renderLabel(), this.renderCloseButton(), h("slot", { key: '04a14d8b19926d9d18f3a4f2abe66061c85f5446' })), 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."
-                },
-                "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": "''"
-            },
-            "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": "'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": "'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."
-                },
-                "getter": false,
-                "setter": false,
-                "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."
-                },
-                "getter": false,
-                "setter": false,
-                "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."
-                },
-                "getter": false,
-                "setter": false,
-                "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

@@ -1 +0,0 @@
-{"version":3,"file":"tag.js","sourceRoot":"","sources":["../../../src/components/tag/tag.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,SAAS,EAAE,OAAO,EAAE,KAAK,EAAgB,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,eAAe,CAAA;AAE9G,OAAO,EAAc,qBAAqB,EAAE,MAAM,kCAAkC,CAAA;AAGpF;;;;GAIG;AAOH,MAAM,OAAO,GAAG;;QAyFN,wBAAmB,GAAe,EAAE,CAAA;QA2CpC,gBAAW,GAAG,GAAG,EAAE;YACzB,IAAI,CAAC,EAAE,CAAC,MAAM,EAAE,CAAA;QAClB,CAAC,CAAA;qBAzHwC,EAAE;wBAMC,EAAE;qBAML,EAAE;uBAMsB,OAAO;qBASL,SAAS;sBAMjC,KAAK;2BAMA,KAAK;wBAMR,KAAK;6BAEjB,cAAc;;IAQ/C,iBAAiB;QACf,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE,CAAA;QACtB,IAAI,CAAC,mBAAmB,GAAG,qBAAqB,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;IAC3D,CAAC;IAEO,cAAc;QACpB,MAAM,OAAO,GAAgB;YAC3B,QAAQ,EAAE,IAAI;YACd,WAAW,EAAE,IAAI,CAAC,WAAW;YAC7B,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,IAAI,CAAC,KAAK,KAAK,EAAE;YAC/B,KAAK,EAAE,IAAI,CAAC,OAAO,KAAK,OAAO;YAC/B,MAAM,EAAE,IAAI,CAAC,OAAO,KAAK,QAAQ;YACjC,KAAK,EAAE,IAAI,CAAC,OAAO,KAAK,OAAO;YAC/B,KAAK,EAAE,IAAI,CAAC,KAAK,KAAK,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK;YAC9C,IAAI,EAAE,IAAI,CAAC,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK;YAC5C,MAAM,EAAE,IAAI,CAAC,MAAM;SACpB,CAAA;QAED,OAAO,OAAO,CAAA;IAChB,CAAC;IAIO,UAAU;QAChB,IAAI,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE,CAAC,MAAM,KAAK,CAAC;YAAE,OAAO,IAAI,CAAA;QAClD,OAAO,eAAS,KAAK,EAAE,EAAE,QAAQ,EAAE,uBAAuB,EAAE,eAAa,IAAI,CAAC,QAAQ,iBAAc,MAAM,GAAG,CAAA;IAC/G,CAAC;IAEO,WAAW;QACjB,IAAI,IAAI,CAAC,KAAK,KAAK,QAAQ,IAAI,IAAI,CAAC,MAAM;YAAE,OAAO,IAAI,CAAA;QACvD,OAAO,CACL,YAAM,EAAE,EAAC,iBAAiB,gBAAa,IAAI,CAAC,KAAK,IAC9C,IAAI,CAAC,KAAK,CACN,CACR,CAAA;IACH,CAAC;IAEO,iBAAiB;QACvB,IAAI,CAAC,IAAI,CAAC,WAAW;YAAE,OAAO,IAAI,CAAA;QAClC,OAAO,CACL,iBACE,IAAI,EAAC,QAAQ,EACb,KAAK,EAAC,QAAQ,EACd,QAAQ,EAAE,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,SAAS,gBACzC,QAAQ,EACnB,SAAS,EAAE,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,sBAC3B,iBAAiB,EAClC,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,QAAQ,EAAE,IAAI,CAAC,QAAQ;YAEvB,4BAAmB,gBAAgB,GAAW,CACpC,CACb,CAAA;IACH,CAAC;IAEO,iBAAiB;QACvB,IAAI,CAAC,IAAI,CAAC,MAAM;YAAE,OAAO,IAAI,CAAA;QAC7B,OAAO,CACL,YAAM,KAAK,EAAC,oBAAoB,EAAC,EAAE,EAAC,iBAAiB,gBAAa,IAAI,CAAC,KAAK,IACzE,IAAI,CAAC,KAAK,CACN,CACR,CAAA;IACH,CAAC;IAMD,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,4DAAK,KAAK,EAAC,cAAc;gBACvB,2EAAM,KAAK,EAAE,IAAI,CAAC,cAAc,EAAE,IAAM,IAAI,CAAC,mBAAmB,IAAE,IAAI,EAAC,OAAO,eAAW,WAAW;oBACjG,IAAI,CAAC,UAAU,EAAE;oBACjB,IAAI,CAAC,WAAW,EAAE;oBAClB,IAAI,CAAC,iBAAiB,EAAE;oBACzB,8DAAa,CACR;gBACN,IAAI,CAAC,iBAAiB,EAAE,CACrB,CACD,CACR,CAAA;IACH,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","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"]}