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

package/dist/collection/components/button/button.js

@@ -1,254 +0,0 @@
-/*!
- * Construído com @govbr-ds/webcomponents
- * Padrão Digital de Governo.
- */
-import { Host, h } 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/button?tab=designer).
- *
- * @slot default - Espaço de conteúdo do button. Geralmente usado para incluir o rótulo.
- */
-export class Button {
-    constructor() {
-        this.handleClick = () => {
-            if (this.type === 'submit') {
-                const submitEvent = new SubmitEvent('submit', {
-                    submitter: this.elementInternals.form,
-                    composed: true,
-                    cancelable: true,
-                    bubbles: true,
-                });
-                this.elementInternals.form.dispatchEvent(submitEvent);
-            }
-            if (this.type === 'reset') {
-                this.elementInternals.form.reset();
-            }
-        };
-        this.inheritedAttributes = {};
-        this.colorMode = undefined;
-        this.density = 'medium';
-        this.disabled = false;
-        this.emphasis = undefined;
-        this.isActive = false;
-        this.isLoading = false;
-        this.shape = undefined;
-        this.type = undefined;
-        this.value = undefined;
-    }
-    componentWillLoad() {
-        this.inheritedAttributes = inheritAriaAttributes(this.el);
-    }
-    getCssClassMap() {
-        return {
-            'br-button': true,
-            primary: this.emphasis === 'primary',
-            secondary: this.emphasis === 'secondary',
-            large: this.density === 'large',
-            small: this.density === 'small',
-            block: this.shape === 'block',
-            circle: this.shape === 'circle',
-            active: this.isActive,
-            loading: this.isLoading,
-            'dark-mode': this.colorMode === 'dark',
-        };
-    }
-    render() {
-        return (h(Host, { key: '163d419411ac143f3743228d16fe833aa1b71c30', "aria-disabled": this.disabled ? 'true' : null }, h("button", Object.assign({ key: 'b461c13bea0b05b7c20dcc62ecbb74c96b9d5097', class: this.getCssClassMap(), type: this.type, disabled: this.disabled, value: this.value, onClick: this.handleClick }, this.inheritedAttributes), h("slot", { key: '50e37710881cb6c421184e5fede1888985c19e64' }))));
-    }
-    static get is() { return "br-button"; }
-    static get encapsulation() { return "shadow"; }
-    static get formAssociated() { return true; }
-    static get originalStyleUrls() {
-        return {
-            "$": ["button.scss"]
-        };
-    }
-    static get styleUrls() {
-        return {
-            "$": ["button.css"]
-        };
-    }
-    static get properties() {
-        return {
-            "colorMode": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "'dark'",
-                    "resolved": "\"dark\"",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Define se o bot\u00E3o usar\u00E1 um esquema de cores escuro."
-                },
-                "getter": false,
-                "setter": false,
-                "attribute": "color-mode",
-                "reflect": true
-            },
-            "density": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "'large' | 'medium' | 'small'",
-                    "resolved": "\"large\" | \"medium\" | \"small\"",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Ajusta a densidade, alterando o espa\u00E7amento interno para um visual mais compacto ou mais expandido."
-                },
-                "getter": false,
-                "setter": false,
-                "attribute": "density",
-                "reflect": true,
-                "defaultValue": "'medium'"
-            },
-            "disabled": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Desativa o bot\u00E3o, tornando-o n\u00E3o interativo."
-                },
-                "getter": false,
-                "setter": false,
-                "attribute": "disabled",
-                "reflect": true,
-                "defaultValue": "false"
-            },
-            "emphasis": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "'primary' | 'secondary' | 'tertiary'",
-                    "resolved": "\"primary\" | \"secondary\" | \"tertiary\"",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Define a \u00EAnfase do bot\u00E3o, alterando sua apar\u00EAncia para criar hierarquia visual e destacar a\u00E7\u00F5es importantes."
-                },
-                "getter": false,
-                "setter": false,
-                "attribute": "emphasis",
-                "reflect": true
-            },
-            "isActive": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Indica se o bot\u00E3o est\u00E1 no estado ativo.\nSe definido como verdadeiro, o bot\u00E3o ser\u00E1 exibido como ativo."
-                },
-                "getter": false,
-                "setter": false,
-                "attribute": "is-active",
-                "reflect": true,
-                "defaultValue": "false"
-            },
-            "isLoading": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Aplica o estado de \"progresso\" ao bot\u00E3o.\nO bot\u00E3o exibir\u00E1 um indicador de carregamento ou progresso."
-                },
-                "getter": false,
-                "setter": false,
-                "attribute": "is-loading",
-                "reflect": true,
-                "defaultValue": "false"
-            },
-            "shape": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "'circle' | 'block' | 'pill'",
-                    "resolved": "\"block\" | \"circle\" | \"pill\"",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Define o formato do bot\u00E3o.\nValores poss\u00EDveis:\n- 'circle': Bot\u00E3o com formato circular.\n- 'block': Bot\u00E3o com formato ovalado ocupando toda a largura dispon\u00EDvel.\n- 'pill': Bot\u00E3o com formato ovalado, com bordas arredondadas."
-                },
-                "getter": false,
-                "setter": false,
-                "attribute": "shape",
-                "reflect": true
-            },
-            "type": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "'button' | 'reset' | 'submit'",
-                    "resolved": "\"button\" | \"reset\" | \"submit\"",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Define o tipo de bot\u00E3o, especificando seu comportamento padr\u00E3o.\nValores poss\u00EDveis:\n- 'button': Um bot\u00E3o padr\u00E3o.\n- 'reset': Um bot\u00E3o para redefinir o formul\u00E1rio.\n- 'submit': Um bot\u00E3o para enviar o formul\u00E1rio."
-                },
-                "getter": false,
-                "setter": false,
-                "attribute": "type",
-                "reflect": true
-            },
-            "value": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Define o valor inicial do bot\u00E3o em um formul\u00E1rio."
-                },
-                "getter": false,
-                "setter": false,
-                "attribute": "value",
-                "reflect": true
-            }
-        };
-    }
-    static get elementRef() { return "el"; }
-    static get attachInternalsMemberName() { return "elementInternals"; }
-}
-//# sourceMappingURL=button.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"button.js","sourceRoot":"","sources":["../../../src/components/button/button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,SAAS,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAA;AAClF,OAAO,EAAc,qBAAqB,EAAE,MAAM,kCAAkC,CAAA;AAGpF;;;;GAIG;AAOH,MAAM,OAAO,MAAM;;QAoEA,gBAAW,GAAG,GAAG,EAAE;YAClC,IAAI,IAAI,CAAC,IAAI,KAAK,QAAQ,EAAE,CAAC;gBAC3B,MAAM,WAAW,GAAG,IAAI,WAAW,CAAC,QAAQ,EAAE;oBAC5C,SAAS,EAAE,IAAI,CAAC,gBAAgB,CAAC,IAAI;oBACrC,QAAQ,EAAE,IAAI;oBACd,UAAU,EAAE,IAAI;oBAChB,OAAO,EAAE,IAAI;iBACd,CAAC,CAAA;gBACF,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,aAAa,CAAC,WAAW,CAAC,CAAA;YACvD,CAAC;YAED,IAAI,IAAI,CAAC,IAAI,KAAK,OAAO,EAAE,CAAC;gBAC1B,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,KAAK,EAAE,CAAA;YACpC,CAAC;QACH,CAAC,CAAA;QAiBO,wBAAmB,GAAe,EAAE,CAAA;;uBAlFqB,QAAQ;wBAK5B,KAAK;;wBAWL,KAAK;yBAMJ,KAAK;;;;;IAyBnD,iBAAiB;QACf,IAAI,CAAC,mBAAmB,GAAG,qBAAqB,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;IAC3D,CAAC;IAkBO,cAAc;QACpB,OAAO;YACL,WAAW,EAAE,IAAI;YACjB,OAAO,EAAE,IAAI,CAAC,QAAQ,KAAK,SAAS;YACpC,SAAS,EAAE,IAAI,CAAC,QAAQ,KAAK,WAAW;YACxC,KAAK,EAAE,IAAI,CAAC,OAAO,KAAK,OAAO;YAC/B,KAAK,EAAE,IAAI,CAAC,OAAO,KAAK,OAAO;YAC/B,KAAK,EAAE,IAAI,CAAC,KAAK,KAAK,OAAO;YAC7B,MAAM,EAAE,IAAI,CAAC,KAAK,KAAK,QAAQ;YAC/B,MAAM,EAAE,IAAI,CAAC,QAAQ;YACrB,OAAO,EAAE,IAAI,CAAC,SAAS;YACvB,WAAW,EAAE,IAAI,CAAC,SAAS,KAAK,MAAM;SACvC,CAAA;IACH,CAAC;IAID,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,sEAAgB,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI;YAChD,6EACE,KAAK,EAAE,IAAI,CAAC,cAAc,EAAE,EAC5B,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,OAAO,EAAE,IAAI,CAAC,WAAW,IACrB,IAAI,CAAC,mBAAmB;gBAE5B,8DAAa,CACN,CACJ,CACR,CAAA;IACH,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { AttachInternals, Component, Element, Host, Prop, h } from '@stencil/core'\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/button?tab=designer).\n *\n * @slot default - Espaço de conteúdo do button. Geralmente usado para incluir o rótulo.\n */\n@Component({\n  tag: 'br-button',\n  styleUrl: 'button.scss',\n  shadow: true,\n  formAssociated: true,\n})\nexport class Button {\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: HTMLBrButtonElement\n\n  @AttachInternals() elementInternals: ElementInternals\n\n  /**\n   * Define se o botão usará um esquema de cores escuro.\n   */\n  @Prop({ reflect: true }) colorMode: 'dark'\n\n  /**\n   * Ajusta a densidade, alterando o espaçamento interno para um visual mais compacto ou mais expandido.\n   */\n  @Prop({ reflect: true }) density: 'large' | 'medium' | 'small' = 'medium'\n\n  /**\n   * Desativa o botão, tornando-o não interativo.\n   */\n  @Prop({ reflect: true }) disabled: boolean = false\n\n  /**\n   * Define a ênfase do botão, alterando sua aparência para criar hierarquia visual e destacar ações importantes.\n   */\n  @Prop({ reflect: true }) emphasis: 'primary' | 'secondary' | 'tertiary'\n\n  /**\n   * Indica se o botão está no estado ativo.\n   * Se definido como verdadeiro, o botão será exibido como ativo.\n   */\n  @Prop({ reflect: true }) isActive: boolean = false\n\n  /**\n   * Aplica o estado de \"progresso\" ao botão.\n   * O botão exibirá um indicador de carregamento ou progresso.\n   */\n  @Prop({ reflect: true }) isLoading: boolean = false\n\n  /**\n   * Define o formato do botão.\n   * Valores possíveis:\n   * - 'circle': Botão com formato circular.\n   * - 'block': Botão com formato ovalado ocupando toda a largura disponível.\n   * - 'pill': Botão com formato ovalado, com bordas arredondadas.\n   */\n  @Prop({ reflect: true }) shape: 'circle' | 'block' | 'pill'\n\n  /**\n   * Define o tipo de botão, especificando seu comportamento padrão.\n   * Valores possíveis:\n   * - 'button': Um botão padrão.\n   * - 'reset': Um botão para redefinir o formulário.\n   * - 'submit': Um botão para enviar o formulário.\n   */\n  @Prop({ reflect: true }) type: 'button' | 'reset' | 'submit'\n\n  /**\n   * Define o valor inicial do botão em um formulário.\n   */\n  @Prop({ reflect: true }) value: string\n\n  componentWillLoad() {\n    this.inheritedAttributes = inheritAriaAttributes(this.el)\n  }\n\n  private readonly handleClick = () => {\n    if (this.type === 'submit') {\n      const submitEvent = new SubmitEvent('submit', {\n        submitter: this.elementInternals.form,\n        composed: true,\n        cancelable: true,\n        bubbles: true,\n      })\n      this.elementInternals.form.dispatchEvent(submitEvent)\n    }\n\n    if (this.type === 'reset') {\n      this.elementInternals.form.reset()\n    }\n  }\n\n  private getCssClassMap(): CssClassMap {\n    return {\n      'br-button': true,\n      primary: this.emphasis === 'primary',\n      secondary: this.emphasis === 'secondary',\n      large: this.density === 'large',\n      small: this.density === 'small',\n      block: this.shape === 'block',\n      circle: this.shape === 'circle',\n      active: this.isActive,\n      loading: this.isLoading,\n      'dark-mode': this.colorMode === 'dark',\n    }\n  }\n\n  private inheritedAttributes: Attributes = {}\n\n  render() {\n    return (\n      <Host aria-disabled={this.disabled ? 'true' : null}>\n        <button\n          class={this.getCssClassMap()}\n          type={this.type}\n          disabled={this.disabled}\n          value={this.value}\n          onClick={this.handleClick}\n          {...this.inheritedAttributes}\n        >\n          <slot></slot>\n        </button>\n      </Host>\n    )\n  }\n}\n"]}