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

package/dist/collection/components/avatar/avatar.js

@@ -0,0 +1,222 @@
+/*!
+ * 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/avatar?tab=designer).
+ */
+export class Avatar {
+    constructor() {
+        this.iconSizes = {
+            small: { height: '32px', width: '40px' },
+            medium: { height: '80px', width: '88px' },
+            large: { height: '128px', width: '136px' },
+        };
+        this.iconMarginTops = {
+            small: '0.7em',
+            medium: '1em',
+            large: '0.62em',
+        };
+        this.inheritedAttributes = {};
+        this.density = 'medium';
+        this.image = undefined;
+        this.imageAlt = 'Imagem do avatar';
+        this.isIconic = false;
+        this.text = undefined;
+        this.iconWidth = undefined;
+        this.iconHeight = undefined;
+        this.marginTop = undefined;
+    }
+    componentWillLoad() {
+        this.inheritedAttributes = inheritAriaAttributes(this.el);
+    }
+    /**
+     * Gera um mapa de classes CSS com base nas propriedades do componente.
+     * O mapa de classes determina quais classes CSS devem ser aplicadas
+     * ao elemento host do componente, ajustando sua aparência.
+     *
+     * @returns {CssClassMap} Objeto contendo as classes CSS aplicadas.
+     */
+    getCssClassMap() {
+        return {
+            'br-avatar': true,
+            small: this.density === 'small',
+            medium: this.density === 'medium',
+            large: this.density === 'large',
+        };
+    }
+    renderAvatar() {
+        var _a, _b, _c, _d, _e;
+        if (((_a = this.text) === null || _a === void 0 ? void 0 : _a.trim().length) > 0) {
+            return (h("span", { class: "content bg-support-01 text-pure-0", title: this.text }, this.text[0].toUpperCase()));
+        }
+        if (((_b = this.image) === null || _b === void 0 ? void 0 : _b.trim().length) > 0) {
+            return (h("span", { class: "content", title: this.imageAlt || this.text }, h("img", { src: this.image, alt: this.imageAlt, loading: "lazy" })));
+        }
+        if (this.isIconic) {
+            return (h("span", { class: "content", title: this.text }, h("br-icon", { "icon-name": "fa-solid:user", height: ((_c = this.iconHeight) === null || _c === void 0 ? void 0 : _c.length) > 0 ? this.iconHeight : this.iconSizes[this.density].height, width: ((_d = this.iconWidth) === null || _d === void 0 ? void 0 : _d.length) > 0 ? this.iconWidth : this.iconSizes[this.density].width, "aria-hidden": "true", style: { 'margin-top': ((_e = this.marginTop) === null || _e === void 0 ? void 0 : _e.length) > 0 ? this.marginTop : this.iconMarginTops[this.density] } })));
+        }
+    }
+    render() {
+        return (h(Host, { key: '8e7d5a109467811e371dcfa56214f079b82970bb' }, h("span", Object.assign({ key: '63036c324a6be24469e6453a40af31e684973c1a', class: this.getCssClassMap() }, this.inheritedAttributes), this.renderAvatar())));
+    }
+    static get is() { return "br-avatar"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["avatar.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["avatar.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "density": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'small' | 'medium' | 'large'",
+                    "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": false,
+                "defaultValue": "'medium'"
+            },
+            "image": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "URL da imagem a ser exibida no avatar do tipo 'fotogr\u00E1fico'.\nDeve ser uma URL v\u00E1lida que aponta para a imagem desejada."
+                },
+                "attribute": "image",
+                "reflect": false
+            },
+            "imageAlt": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Texto alternativo (alt) associado \u00E0 imagem do avatar. Essencial para acessibilidade e SEO.\nDeve descrever de forma clara e concisa o conte\u00FAdo da imagem, por exemplo: \"Foto de perfil de Jo\u00E3o Silva\"."
+                },
+                "attribute": "image-alt",
+                "reflect": false,
+                "defaultValue": "'Imagem do avatar'"
+            },
+            "isIconic": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Indica se o avatar deve ser exibido como um \u00EDcone em vez de uma imagem fotogr\u00E1fica.\nSe definido como verdadeiro, o avatar ser\u00E1 exibido como um \u00EDcone."
+                },
+                "attribute": "is-iconic",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "text": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Texto exibido no avatar do tipo 'letra'.\nEsse texto ser\u00E1 mostrado em vez de uma imagem e pode ser usado para representar iniciais ou outras informa\u00E7\u00F5es textuais."
+                },
+                "attribute": "text",
+                "reflect": false
+            },
+            "iconWidth": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Largura do \u00EDcone no avatar do tipo ic\u00F4nico"
+                },
+                "attribute": "icon-width",
+                "reflect": false
+            },
+            "iconHeight": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Altura do \u00EDcone no avatar do tipo ic\u00F4nico"
+                },
+                "attribute": "icon-height",
+                "reflect": false
+            },
+            "marginTop": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Ajuste para a margem de cima do \u00EDcone no avatar do tipo ic\u00F4nico"
+                },
+                "attribute": "margin-top",
+                "reflect": false
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+}
+//# sourceMappingURL=avatar.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"avatar.js","sourceRoot":"","sources":["../../../../src/components/avatar/avatar.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, h, Host, Prop } 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/avatar?tab=designer).\n */\n@Component({\n  tag: 'br-avatar',\n  styleUrl: 'avatar.scss',\n  shadow: true,\n})\nexport class Avatar {\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: HTMLBrAvatarElement\n\n  /**\n   * Ajusta a densidade, alterando o espaçamento interno para um visual mais compacto ou mais expandido.\n   */\n  @Prop() density: 'small' | 'medium' | 'large' = 'medium'\n\n  /**\n   * URL da imagem a ser exibida no avatar do tipo 'fotográfico'.\n   * Deve ser uma URL válida que aponta para a imagem desejada.\n   */\n  @Prop() image: string\n\n  /**\n   * Texto alternativo (alt) associado à imagem do avatar. Essencial para acessibilidade e SEO.\n   * Deve descrever de forma clara e concisa o conteúdo da imagem, por exemplo: \"Foto de perfil de João Silva\".\n   */\n  @Prop() imageAlt = 'Imagem do avatar'\n\n  /**\n   * Indica se o avatar deve ser exibido como um ícone em vez de uma imagem fotográfica.\n   * Se definido como verdadeiro, o avatar será exibido como um ícone.\n   */\n  @Prop() isIconic: boolean = false\n\n  /**\n   * Texto exibido no avatar do tipo 'letra'.\n   * Esse texto será mostrado em vez de uma imagem e pode ser usado para representar iniciais ou outras informações textuais.\n   */\n  @Prop() text: string\n\n  componentWillLoad() {\n    this.inheritedAttributes = inheritAriaAttributes(this.el)\n  }\n\n  /**\n   * Largura do ícone no avatar do tipo icônico\n   * */\n  @Prop() iconWidth: string\n\n  /**\n   * Altura do ícone no avatar do tipo icônico\n   */\n  @Prop() iconHeight: string\n\n  /**\n   * Ajuste para a margem de cima do ícone no avatar do tipo icônico\n   */\n  @Prop() marginTop: string\n\n  /**\n   * Gera um mapa de classes CSS com base nas propriedades do componente.\n   * O mapa de classes determina quais classes CSS devem ser aplicadas\n   * ao elemento host do componente, ajustando sua aparência.\n   *\n   * @returns {CssClassMap} Objeto contendo as classes CSS aplicadas.\n   */\n  private getCssClassMap(): CssClassMap {\n    return {\n      'br-avatar': true,\n      small: this.density === 'small',\n      medium: this.density === 'medium',\n      large: this.density === 'large',\n    }\n  }\n\n  private readonly iconSizes = {\n    small: { height: '32px', width: '40px' },\n    medium: { height: '80px', width: '88px' },\n    large: { height: '128px', width: '136px' },\n  }\n\n  private readonly iconMarginTops = {\n    small: '0.7em',\n    medium: '1em',\n    large: '0.62em',\n  }\n\n  private inheritedAttributes: Attributes = {}\n\n  private renderAvatar() {\n    if (this.text?.trim().length > 0) {\n      return (\n        <span class=\"content bg-support-01 text-pure-0\" title={this.text}>\n          {this.text[0].toUpperCase()}\n        </span>\n      )\n    }\n\n    if (this.image?.trim().length > 0) {\n      return (\n        <span class=\"content\" title={this.imageAlt || this.text}>\n          <img src={this.image} alt={this.imageAlt} loading=\"lazy\" />\n        </span>\n      )\n    }\n\n    if (this.isIconic) {\n      return (\n        <span class=\"content\" title={this.text}>\n          <br-icon\n            icon-name=\"fa-solid:user\"\n            height={this.iconHeight?.length > 0 ? this.iconHeight : this.iconSizes[this.density].height}\n            width={this.iconWidth?.length > 0 ? this.iconWidth : this.iconSizes[this.density].width}\n            aria-hidden=\"true\"\n            style={{ 'margin-top': this.marginTop?.length > 0 ? this.marginTop : this.iconMarginTops[this.density] }}\n          ></br-icon>\n        </span>\n      )\n    }\n  }\n\n  render() {\n    return (\n      <Host>\n        <span class={this.getCssClassMap()} {...this.inheritedAttributes}>\n          {this.renderAvatar()}\n        </span>\n      </Host>\n    )\n  }\n}\n"]}