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

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

@@ -0,0 +1,236 @@
+/*!
+ * 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."
+                },
+                "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."
+                },
+                "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."
+                },
+                "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."
+                },
+                "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."
+                },
+                "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."
+                },
+                "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."
+                },
+                "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."
+                },
+                "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."
+                },
+                "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

@@ -0,0 +1 @@
+{"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"]}