@govbr-ds/webcomponents 2.0.0-next.46 → 2.0.0-next.48

package/dist/collection/components/sign-in/sign-in.js

@@ -0,0 +1,303 @@
+/*!
+ * Construído por SERPRO
+ * © https://serpro.gov.br/ - MIT License.
+ */
+import { h, Host } from "@stencil/core";
+import Helpers from "../../utils/helpers";
+/**
+ * Para uma descrição detalhada, consulte a [documentação do GovBR-DS](https://www.gov.br/ds/components/sign-in?tab=designer).
+ *
+ * Para acessibilidade adequada, especialmente em formatos circulares, use a propriedade aria-label:
+ * <br-sign-in shape="circle" aria-label="Fazer login com Gov.br"></br-sign-in>
+ *
+ * Para controlar onde o link abre, use a propriedade target:
+ * <br-sign-in href="https://accounts.google.com" target="_self">Login Google</br-sign-in>
+ * <br-sign-in href="https://help.site.com" target="_blank">Ajuda</br-sign-in>
+ *
+ * @slot default - Conteúdo do label/texto do sign-in
+ * @slot icon - Ícone personalizado. Para shape="circle", um ícone padrão (fa6-solid:user) será exibido se nenhum for fornecido
+ * @slot image - Imagem ou ícone exibido ao lado da label
+ *
+ * @part content - Área do conteúdo/texto dentro do sign-in
+ * @part image - Área da imagem/ícone (para controle de tamanho via CSS)
+ */
+export class SignIn {
+    constructor() {
+        /**
+         * Identificador único.
+         * Caso não seja fornecido, um ID gerado automaticamente será usado.
+         */
+        this.customId = Helpers.generateUniqueId();
+        /**
+         * Ajusta a densidade, alterando o espaçamento interno para um visual mais compacto ou mais expandido.
+         */
+        this.density = 'medium';
+        /**
+         * Desativa o sign-in, tornando-o não interativo.
+         */
+        this.disabled = false;
+        /**
+         * Define a ênfase do sign-in, alterando sua aparência para criar hierarquia visual.
+         */
+        this.emphasis = 'secondary';
+        /**
+         * Define o formato do sign-in.
+         */
+        this.shape = 'pill';
+        /**
+         * Define onde abrir o link quando href é fornecido.
+         */
+        this.target = '_self';
+        this.handleClick = (event) => {
+            if (this.disabled) {
+                event.preventDefault();
+                event.stopPropagation();
+                return;
+            }
+        };
+        this.handleFocus = (event) => {
+            if (this.disabled) {
+                ;
+                event.target?.blur?.();
+            }
+        };
+    }
+    hasSlotContent(slotName) {
+        return this.el.querySelector(`[slot="${slotName}"]`) !== null;
+    }
+    getCssClassMap() {
+        return {
+            'br-sign-in': 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',
+            'dark-mode': this.colorMode === 'dark',
+            disabled: this.disabled,
+        };
+    }
+    getTagType() {
+        return this.href && this.href.length > 0 ? 'a' : 'button';
+    }
+    getAttributes() {
+        const TagType = this.getTagType();
+        if (TagType === 'a') {
+            return {
+                href: this.disabled ? null : this.href,
+                target: this.disabled ? null : this.target,
+                'aria-disabled': this.disabled ? 'true' : null,
+                'aria-label': this.ariaLabel,
+            };
+        }
+        return {
+            type: 'button',
+            disabled: this.disabled,
+            'aria-label': this.ariaLabel,
+        };
+    }
+    render() {
+        const TagType = this.getTagType();
+        const attributes = this.getAttributes();
+        const classList = this.getCssClassMap();
+        return (h(Host, { key: 'be4bc01e580c8ab957e9c2ae81c9820bc5fb4659', "aria-disabled": this.disabled ? 'true' : null }, h(TagType, { key: 'c919aed0cf415c11d41558d7dedb93239c469a5b', part: "button", class: classList, id: this.customId, ...attributes, onClick: this.handleClick, onFocus: this.handleFocus }, h("slot", { key: '005638e1eb9f163ec1fce714df9a0d9b588c1a1b', name: "icon" }, this.shape === 'circle' && h("br-icon", { key: '9593566ed221def2a09a1615ef36da748eef2431', "icon-name": "fa6-solid:user" })), h("span", { key: 'f93eda737e5acff5a3e6a324b4380354577a5b7d', part: "content" }, h("slot", { key: '15a5d63b7772f93a948759e6384488015848170d' })), this.hasSlotContent('image') && (h("span", { key: '571cc0f4cac2abbf72397d05ba72444c80a8174f', part: "image" }, h("slot", { key: '4867a15d93f99c64a0588fd2981911f36177edda', name: "image" }))))));
+    }
+    static get is() { return "br-sign-in"; }
+    static get encapsulation() { return "shadow"; }
+    static get formAssociated() { return true; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["sign-in.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["sign-in.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "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": "Helpers.generateUniqueId()"
+            },
+            "colorMode": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'dark'",
+                    "resolved": "\"dark\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Define se o sign-in 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 sign-in, tornando-o n\u00E3o interativo."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "disabled",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "emphasis": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'primary' | 'secondary'",
+                    "resolved": "\"primary\" | \"secondary\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Define a \u00EAnfase do sign-in, alterando sua apar\u00EAncia para criar hierarquia visual."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "emphasis",
+                "reflect": true,
+                "defaultValue": "'secondary'"
+            },
+            "shape": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'block' | 'circle' | 'pill'",
+                    "resolved": "\"block\" | \"circle\" | \"pill\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Define o formato do sign-in."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "shape",
+                "reflect": true,
+                "defaultValue": "'pill'"
+            },
+            "href": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "URL para onde o usu\u00E1rio ser\u00E1 redirecionado ao clicar. Use para login com provedores externos ou em sites tradicionais."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "href",
+                "reflect": true
+            },
+            "target": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'_self' | '_blank' | '_parent' | '_top'",
+                    "resolved": "\"_blank\" | \"_parent\" | \"_self\" | \"_top\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Define onde abrir o link quando href \u00E9 fornecido."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "target",
+                "reflect": true,
+                "defaultValue": "'_self'"
+            },
+            "ariaLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Define o r\u00F3tulo acess\u00EDvel do sign-in, especialmente importante para formatos circulares."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "aria-label",
+                "reflect": true
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get attachInternalsMemberName() { return "elementInternals"; }
+}
+//# sourceMappingURL=sign-in.js.map

package/dist/collection/components/sign-in/sign-in.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sign-in.js","sourceRoot":"","sources":["../../../../../../packages/webcomponents/src/components/sign-in/sign-in.tsx"],"names":[],"mappings":"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","sourcesContent":["import { AttachInternals, Component, Element, h, Host, Prop } from '@stencil/core'\n\nimport Helpers from '../../utils/helpers'\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/sign-in?tab=designer).\n *\n * Para acessibilidade adequada, especialmente em formatos circulares, use a propriedade aria-label:\n * <br-sign-in shape=\"circle\" aria-label=\"Fazer login com Gov.br\"></br-sign-in>\n *\n * Para controlar onde o link abre, use a propriedade target:\n * <br-sign-in href=\"https://accounts.google.com\" target=\"_self\">Login Google</br-sign-in>\n * <br-sign-in href=\"https://help.site.com\" target=\"_blank\">Ajuda</br-sign-in>\n *\n * @slot default - Conteúdo do label/texto do sign-in\n * @slot icon - Ícone personalizado. Para shape=\"circle\", um ícone padrão (fa6-solid:user) será exibido se nenhum for fornecido\n * @slot image - Imagem ou ícone exibido ao lado da label\n *\n * @part content - Área do conteúdo/texto dentro do sign-in\n * @part image - Área da imagem/ícone (para controle de tamanho via CSS)\n */\n@Component({\n  tag: 'br-sign-in',\n  styleUrl: 'sign-in.scss',\n  shadow: true,\n  formAssociated: true,\n})\nexport class SignIn {\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: HTMLBrSignInElement\n\n  @AttachInternals() elementInternals: ElementInternals\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 = Helpers.generateUniqueId()\n\n  /**\n   * Define se o sign-in usará um esquema de cores escuro.\n   */\n  @Prop({ reflect: true }) readonly 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 }) readonly density: 'large' | 'medium' | 'small' = 'medium'\n\n  /**\n   * Desativa o sign-in, tornando-o não interativo.\n   */\n  @Prop({ reflect: true }) readonly disabled: boolean = false\n\n  /**\n   * Define a ênfase do sign-in, alterando sua aparência para criar hierarquia visual.\n   */\n  @Prop({ reflect: true }) readonly emphasis: 'primary' | 'secondary' = 'secondary'\n\n  /**\n   * Define o formato do sign-in.\n   */\n  @Prop({ reflect: true }) readonly shape: 'block' | 'circle' | 'pill' = 'pill'\n\n  /**\n   * URL para onde o usuário será redirecionado ao clicar. Use para login com provedores externos ou em sites tradicionais.\n   */\n  @Prop({ reflect: true }) readonly href: string\n\n  /**\n   * Define onde abrir o link quando href é fornecido.\n   */\n  @Prop({ reflect: true }) readonly target: '_self' | '_blank' | '_parent' | '_top' = '_self'\n\n  /**\n   * Define o rótulo acessível do sign-in, especialmente importante para formatos circulares.\n   */\n  @Prop({ reflect: true }) readonly ariaLabel: string\n\n  private readonly handleClick = (event: MouseEvent) => {\n    if (this.disabled) {\n      event.preventDefault()\n      event.stopPropagation()\n      return\n    }\n  }\n\n  private readonly handleFocus = (event: FocusEvent) => {\n    if (this.disabled) {\n      ;(event.target as HTMLElement)?.blur?.()\n    }\n  }\n\n  private hasSlotContent(slotName: string): boolean {\n    return this.el.querySelector(`[slot=\"${slotName}\"]`) !== null\n  }\n\n  private getCssClassMap(): CssClassMap {\n    return {\n      'br-sign-in': 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      'dark-mode': this.colorMode === 'dark',\n      disabled: this.disabled,\n    }\n  }\n\n  private getTagType(): string {\n    return this.href && this.href.length > 0 ? 'a' : 'button'\n  }\n\n  private getAttributes() {\n    const TagType = this.getTagType()\n\n    if (TagType === 'a') {\n      return {\n        href: this.disabled ? null : this.href,\n        target: this.disabled ? null : this.target,\n        'aria-disabled': this.disabled ? 'true' : null,\n        'aria-label': this.ariaLabel,\n      }\n    }\n\n    return {\n      type: 'button',\n      disabled: this.disabled,\n      'aria-label': this.ariaLabel,\n    }\n  }\n\n  render() {\n    const TagType = this.getTagType()\n    const attributes = this.getAttributes()\n    const classList = this.getCssClassMap()\n\n    return (\n      <Host aria-disabled={this.disabled ? 'true' : null}>\n        <TagType\n          part=\"button\"\n          class={classList}\n          id={this.customId}\n          {...attributes}\n          onClick={this.handleClick}\n          onFocus={this.handleFocus}\n        >\n          <slot name=\"icon\">{this.shape === 'circle' && <br-icon icon-name=\"fa6-solid:user\"></br-icon>}</slot>\n          <span part=\"content\">\n            <slot></slot>\n          </span>\n          {this.hasSlotContent('image') && (\n            <span part=\"image\">\n              <slot name=\"image\"></slot>\n            </span>\n          )}\n        </TagType>\n      </Host>\n    )\n  }\n}\n"]}

package/dist/collection/components/step/step.js

@@ -240,7 +240,7 @@ export class Step {
         return ariaLabel;
     }
     render() {
-        return (h(Host, { key: 'f8a54bcaa8b2c1162d46a1441e8643af9ff97154' }, this.stepItems.length > 0 && (h("div", { key: 'cba3b84abf8bbc6ba0ef8977bbd076735b819634', role: "listbox", tabIndex: 0, "aria-orientation": this.layout, "aria-label": this.getAreaLabel(), class: this.getCssClassMap() }, h("slot", { key: '657db9727877d4f0c4df5248dc2340e5eef7f805' })))));
+        return (h(Host, { key: '260ee78648df3fbdea867351a9c7e6a6ec8ced92' }, this.stepItems.length > 0 && (h("div", { key: '080b50b0a72031c19ffe962ca5450cd6af2ca9e5', role: "listbox", tabIndex: 0, "aria-orientation": this.layout, "aria-label": this.getAreaLabel(), class: this.getCssClassMap() }, h("slot", { key: '62b283c6c3c20c5743ebef7ba4e39811f01a75be' })))));
     }
     static get is() { return "br-step"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/step-item/step-item.js

@@ -202,7 +202,7 @@ export class StepItem {
         };
     }
     render() {
-        return (h(Host, { key: '06a2d2ddd78505f0d763d8077b385898c58b9771' }, h("div", { key: 'cbb8d1ed91c9aa198c06cf70109d2811a2695925', id: "item-container", class: this.getStepContainerClassMap() }, h("div", { key: 'e9938c7d71e481aef33cba3ca805e494c3f23ce6', id: "item-content", class: this.getStepItemContentClassMap() }, h("div", { key: 'd32d6291425bae06dd3424406566824916bc8087', id: "indicator-area", "data-active": this.active, class: this.getStepItemIndicatorAreaClassMap() }, this.mode === 'step' && this.highlight && (h("div", { key: 'bee6b694a6453f4f7aa839db854ccddb7b6b03b0', class: this.getHighlightClass() }, h("br-icon", { key: 'cc2dcaa6409e9e6a0f0121246d6700e514626f09', "icon-name": this.IconsName[this.highlight], class: `${this.highlight === 'warning' && 'warning-color'}` }))), this.mode === 'step' && (h("br-button", { key: '07789939f75c56e0a107c4e8cbe830f3f5611ce0', shape: "circle", emphasis: "secondary", isActive: this.active, class: this.getStepItemIndicatorClass() }, this.contentType === 'no-content' && '', this.contentType === 'default' && this.content, this.contentType === 'br-icon' && (h("br-icon", { key: '20e24c98d908949e50735d3f5d18640a94a50d36', "icon-name": this.brIconName, class: 'content-type-br-icon' })), this.contentType === 'slotted' && h("slot", { key: 'fd9148dd4b36c0c87e048bb6eb42b584b5d528b5', name: 'content-area' }))), this.mode === 'controller' && h("button", { key: '2b8fc8c4f29bf2ebbb00d08b36b0a3cb86b1346e', "data-active": this.active, class: 'mode-controller' })), h("div", { key: '373417f62bff6291ed39b519ebabd9a1a9f923c4', id: "label-area", class: this.getStepItemLabelAreaClassMap() }, h("span", { key: 'ff5788f58ad9d1874fad3232334d25a528b219fe' }, " ", this.label, " "))))));
+        return (h(Host, { key: '6ad8d196434bf798653aefe9530191e97446df93' }, h("div", { key: 'a8b1a44ac8450744fd82eb675bcbadc9d8b50c42', id: "item-container", class: this.getStepContainerClassMap() }, h("div", { key: '4e31d7e06e0bcd2677d3ea2be553eeddf0ee2ce2', id: "item-content", class: this.getStepItemContentClassMap() }, h("div", { key: 'b0c03db09efb54cca28a72177d486b4f19e89371', id: "indicator-area", "data-active": this.active, class: this.getStepItemIndicatorAreaClassMap() }, this.mode === 'step' && this.highlight && (h("div", { key: '6612f4f5333c9be947ac515967c309a738e111f0', class: this.getHighlightClass() }, h("br-icon", { key: 'fd2b85f591d35b1835aeb02dd527ccbc6d27d913', "icon-name": this.IconsName[this.highlight], class: `${this.highlight === 'warning' && 'warning-color'}` }))), this.mode === 'step' && (h("br-button", { key: '9d599f1289b5e21767e7d3cdd9b5595158dc746f', shape: "circle", emphasis: "secondary", isActive: this.active, class: this.getStepItemIndicatorClass() }, this.contentType === 'no-content' && '', this.contentType === 'default' && this.content, this.contentType === 'br-icon' && (h("br-icon", { key: 'b8c60e93705559d39fedb21c1d04a496ddc6c9c2', "icon-name": this.brIconName, class: 'content-type-br-icon' })), this.contentType === 'slotted' && h("slot", { key: '81ded0e569aa2c41d155fa219b28dbb6e24806a0', name: 'content-area' }))), this.mode === 'controller' && h("button", { key: '2deaefbc908e810bec44e4db6eaacb2fcb307a78', "data-active": this.active, class: 'mode-controller' })), h("div", { key: 'b8616bb87c2f708ec36b8a0d2d00fd4a74f5ee5f', id: "label-area", class: this.getStepItemLabelAreaClassMap() }, h("span", { key: 'f1a4eb62403541532ea0899839088997e58e36f3' }, " ", this.label, " "))))));
     }
     static get is() { return "br-step-item"; }
     static get encapsulation() { return "shadow"; }