@govbr-ds/webcomponents
Version:
Biblioteca de Web Components baseado no GovBR-DS
283 lines (282 loc) • 11.7 kB
JavaScript
/*!
* Construído por SERPRO
* © https://serpro.gov.br/ - MIT License.
*/
import { h, Host } from "@stencil/core";
import "iconify-icon";
/**
* O componente `br-icon` fornece uma maneira flexível e dinâmica de incorporar ícones nas aplicações.
* Utilizando a biblioteca Iconify, ele permite o uso de uma ampla variedade de ícones.
*
* Com opções para especificar a altura e largura, adicionar classes CSS personalizadas, e definir como o ícone
* deve ser rotacionado ou espelhado, o `br-icon` oferece aos desenvolvedores as ferramentas necessárias para
* integrar ícones de forma consistente com o estilo e design de suas aplicações, melhorando a experiência do usuário
* e a clareza das interfaces.
*
* Para mais informações sobre quais ícones estão disponíveis, consulte a documentação do [Iconify](https://iconify.design/).
*/
export class Icon {
/**
* Referência ao elemento host do componente.
* Utilize esta propriedade para acessar e manipular o elemento do DOM associado ao componente.
*/
el;
/**
* Nome do ícone a ser exibido, utilizando a biblioteca Iconify.
* Este nome deve corresponder ao nome do ícone definido na biblioteca para que ele seja exibido corretamente.
*/
iconName;
/**
* Define a altura do ícone. Pode ser especificada em qualquer unidade CSS válida, como pixels (px), ems (em), rems (rem), etc.
* O valor padrão é '16'.
*/
height = '16';
/**
* Identificador único.
* Caso não seja fornecido, um ID gerado automaticamente será usado.
*/
customId = `br-icon-${iconId++}`;
/**
* Define a largura do ícone. Pode ser especificada em qualquer unidade CSS válida, como pixels (px), ems (em), rems (rem), etc.
* O valor padrão é '24'.
*/
width = '24';
/**
* Permite adicionar classes CSS adicionais ao ícone.
* Use esta propriedade para aplicar estilos personalizados ao ícone, além dos estilos padrão.
*/
cssClasses;
/**
* Se definido como verdadeiro, o ícone será alinhado verticalmente ao texto ao seu redor.
* Útil quando o ícone é usado em linha com texto para garantir que esteja alinhado corretamente com o texto.
* O valor padrão é `false`.
*/
isInline = false;
/**
* Define o ângulo de rotação do ícone.
* Aceita valores como "90deg", "180deg" e "270deg" para rotacionar o ícone em diferentes ângulos.
*/
rotate;
/**
* Define o tipo de espelhamento do ícone.
* Aceita valores como "horizontal" para espelhar o ícone horizontalmente, "vertical" para espelhar verticalmente, ou ambos.
*/
flip;
/**
* Determina se o ícone pode receber foco.
* Se definido como verdadeiro, o ícone pode ser navegado usando Tab.
* O valor padrão é `false`.
*/
isFocusable = false;
componentDidLoad() {
const iconElement = this.el.shadowRoot.querySelector('iconify-icon');
if (iconElement !== null) {
if (this.isFocusable && !this.el.hasAttribute('aria-label')) {
const formattedIconName = this.iconName
.split(':')
.pop()
.replace(/-/g, ' ')
.replace(/^[a-z]/, (match) => match.toUpperCase());
this.el.setAttribute('aria-label', `Ícone: ${formattedIconName}`);
}
}
}
render() {
return (h(Host, { key: '34031622cda86244d787398152efa29e0c1be9fb' }, h("iconify-icon", { key: '6d83737d9b4ee08a333b972cd081d13799fb166a', id: this.customId, flip: this.flip, width: this.width, class: this.cssClasses, icon: this.iconName, inline: this.isInline, height: this.height, rotate: this.rotate, role: this.isFocusable ? 'img' : null, tabindex: this.isFocusable ? 0 : '-1', "aria-hidden": this.isFocusable ? null : 'true', focusable: this.isFocusable ? true : 'false' })));
}
static get is() { return "br-icon"; }
static get encapsulation() { return "shadow"; }
static get originalStyleUrls() {
return {
"$": ["icon.scss"]
};
}
static get styleUrls() {
return {
"$": ["icon.css"]
};
}
static get properties() {
return {
"iconName": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Nome do \u00EDcone a ser exibido, utilizando a biblioteca Iconify.\nEste nome deve corresponder ao nome do \u00EDcone definido na biblioteca para que ele seja exibido corretamente."
},
"getter": false,
"setter": false,
"attribute": "icon-name",
"reflect": true
},
"height": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Define a altura do \u00EDcone. Pode ser especificada em qualquer unidade CSS v\u00E1lida, como pixels (px), ems (em), rems (rem), etc.\nO valor padr\u00E3o \u00E9 '16'."
},
"getter": false,
"setter": false,
"attribute": "height",
"reflect": true,
"defaultValue": "'16'"
},
"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": "`br-icon-${iconId++}`"
},
"width": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Define a largura do \u00EDcone. Pode ser especificada em qualquer unidade CSS v\u00E1lida, como pixels (px), ems (em), rems (rem), etc.\nO valor padr\u00E3o \u00E9 '24'."
},
"getter": false,
"setter": false,
"attribute": "width",
"reflect": true,
"defaultValue": "'24'"
},
"cssClasses": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "Permite adicionar classes CSS adicionais ao \u00EDcone.\nUse esta propriedade para aplicar estilos personalizados ao \u00EDcone, al\u00E9m dos estilos padr\u00E3o."
},
"getter": false,
"setter": false,
"attribute": "css-classes",
"reflect": true
},
"isInline": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "Se definido como verdadeiro, o \u00EDcone ser\u00E1 alinhado verticalmente ao texto ao seu redor.\n\u00DAtil quando o \u00EDcone \u00E9 usado em linha com texto para garantir que esteja alinhado corretamente com o texto.\nO valor padr\u00E3o \u00E9 `false`."
},
"getter": false,
"setter": false,
"attribute": "is-inline",
"reflect": true,
"defaultValue": "false"
},
"rotate": {
"type": "string",
"mutable": false,
"complexType": {
"original": "'90deg' | '180deg' | '270deg'",
"resolved": "\"180deg\" | \"270deg\" | \"90deg\"",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "Define o \u00E2ngulo de rota\u00E7\u00E3o do \u00EDcone.\nAceita valores como \"90deg\", \"180deg\" e \"270deg\" para rotacionar o \u00EDcone em diferentes \u00E2ngulos."
},
"getter": false,
"setter": false,
"attribute": "rotate",
"reflect": true
},
"flip": {
"type": "string",
"mutable": false,
"complexType": {
"original": "'horizontal' | 'vertical'",
"resolved": "\"horizontal\" | \"vertical\"",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "Define o tipo de espelhamento do \u00EDcone.\nAceita valores como \"horizontal\" para espelhar o \u00EDcone horizontalmente, \"vertical\" para espelhar verticalmente, ou ambos."
},
"getter": false,
"setter": false,
"attribute": "flip",
"reflect": true
},
"isFocusable": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "Determina se o \u00EDcone pode receber foco.\nSe definido como verdadeiro, o \u00EDcone pode ser navegado usando Tab.\nO valor padr\u00E3o \u00E9 `false`."
},
"getter": false,
"setter": false,
"attribute": "is-focusable",
"reflect": true,
"defaultValue": "false"
}
};
}
static get elementRef() { return "el"; }
}
let iconId = 0;
//# sourceMappingURL=icon.js.map