@govbr-ds/webcomponents 2.0.0-next.36 → 2.0.0-next.38

package/dist/types/components/button/button.d.ts

@@ -62,6 +62,7 @@ export declare class Button {
      */
     readonly value: string;
     private readonly handleClick;
+    componentDidLoad(): void;
     private getCssClassMap;
     render(): any;
 }

package/dist/types/components/collapse/collapse.d.ts

@@ -20,31 +20,95 @@ export declare class Collapse {
      * Caso não seja fornecido, um ID gerado automaticamente será usado.
      */
     readonly customId: string;
-    /** Define se o item está inicialmente aberto */
+    /**
+     * Define se o collapse está aberto ou fechado.
+     * @default false
+     */
     open: boolean;
-    /** Define se o collapse faz parte de um accordion */
+    /**
+     * Define se o collapse faz parte de um accordion
+     * @default null
+     */
     accordionGroup?: string;
-    /** Classe CSS para o ícone de expansão */
+    /**
+     * Classe CSS para o ícone de expansão
+     * @default 'fa6-solid:chevron-down'
+     */
     iconToShow: string;
-    /** Classe CSS para o ícone de recolhimento */
+    /**
+     * Classe CSS para o ícone de recolhimento
+     * @default 'fa6-solid:chevron-up'
+     */
     iconToHide: string;
-    /** Define a posição do ícone: 'left' ou 'right' */
+    /**
+     * Define a posição do ícone: 'left' ou 'right'
+     * @default 'right'
+     */
     iconPosition: 'left' | 'right';
-    /** Evento emitido ao expandir */
+    /**
+     * Evento emitido ao expandir.
+     */
     brDidOpen: EventEmitter<{
         id: string;
+        accordionGroup: string;
     }>;
-    /** Evento emitido ao recolher */
+    /**
+     * Evento emitido ao recolher.
+     */
     brDidClose: EventEmitter<{
         id: string;
+        accordionGroup: string;
     }>;
+    /**
+     * Evento disparado quando o componente é aberto.
+     * @param event Evento disparado quando o componente é aberto.
+     */
+    /**
+     * Handler para o evento de abertura do componente.
+     * Fecha o collapse atual se ele não for parte do mesmo grupo de accordion.
+     * @param event Evento disparado quando o componente é aberto.
+     */
+    handleOpen(event: CustomEvent): void;
+    /**
+     * Ciclo de vida do componente. Chamado uma vez logo após o componente ser adicionado ao DOM.
+     */
     componentWillLoad(): void;
+    /**
+     * Ciclo de vida do componente. Chamado quando o componente é removido do DOM.
+     */
+    disconnectedCallback(): void;
+    /**
+     * Sincroniza o estado do elemento <details> com a propriedade open.
+     * Isso garante que o estado visual do componente corresponda ao estado interno.
+     */
     private syncDetailsWithOpen;
+    /**
+     * Método chamado quando o elemento <details> é aberto ou fechado.
+     * Atualiza o estado interno do componente e emite eventos apropriados.
+     * @param event O evento de toggle do elemento <details>.
+     */
     private handleCollapse;
-    /** Método público para abrir */
+    /**
+     * Método público para abrir.
+     * Este método pode ser chamado externamente para abrir o componente.
+     */
     openCollapse(): Promise<void>;
-    /** Método público para fechar */
+    /**
+     * Método público para fechar.
+     * Este método pode ser chamado externamente para fechar o componente.
+     */
     closeCollapse(): Promise<void>;
+    /**
+     * Renderiza o ícone de acordo com o estado do collapse.
+     * Se o collapse estiver aberto, renderiza o ícone para ocultar.
+     * Caso contrário, renderiza o ícone para mostrar.
+     * @returns JSX do ícone
+     */
     private renderIcon;
+    /**
+     * Renderiza o componente.
+     * O componente é renderizado como um elemento <details> com um <summary> que contém o acionador.
+     * @returns JSX do componente.
+     */
     render(): any;
 }

package/dist/types/components/footer/footer.d.ts

@@ -0,0 +1,37 @@
+/**
+ * O componente `br-footer` representa o rodapé do site, de acordo com a documentação de design do GovBR.
+ * Ele é composto por vários subcomponentes, como [`br-footer-category`](/docs/components/footer-category), [`br-footer-item`](/docs/components/footer-item), [`br-footer-social`](/docs/components/footer-social), [`br-footer-legal`](/docs/components/footer-legal) e [`br-logo`](/docs/components/footer-logo).
+ * Para uma descrição detalhada, consulte a [documentação do GovBR-DS](https://www.gov.br/ds/components/footer?tab=designer).
+ *
+ * @slot logo - Área destinada ao logo do rodapé. Utilize o componente `br-logo` para adicionar o logo.
+ * @slot default - Área destinada ao mapa do site. Utilize o componente `br-footer-category` juntamente com o componente `br-footer-item` para adicionar itens.
+ * @slot social-network - Área destinada às redes sociais. Utilize o componente `br-footer-social` para adicionar redes sociais.
+ * @slot partner-logo - Área destinada aos logos de parceiros. Utilize o componente `br-logo` para adicionar os logos.
+ * @slot legal - Área destinada às informações legais. Utilize o componente `br-footer-legal` para adicionar informações legais.
+ */
+export declare class Footer {
+    /**
+     * Referência ao elemento host do componente.
+     * Utilize esta propriedade para acessar e manipular o elemento do DOM associado ao componente.
+     */
+    el: HTMLBrFooterElement;
+    /**
+     * Identificador único.
+     * Caso não seja fornecido, um ID gerado automaticamente será usado.
+     */
+    readonly customId: string;
+    /**
+     * Indica o tema do rodapé.
+     */
+    theme: 'dark' | 'light';
+    /**
+     * Texto de descrição das redes sociais.
+     */
+    socialNetworkTitle: string;
+    private getCssClassMap;
+    /**
+     * Renderiza o componente.
+     * @returns JSX do componente.
+     */
+    render(): any;
+}

package/dist/types/components/footer-category/footer-category.d.ts

@@ -0,0 +1,81 @@
+/**
+ * O subcomponente `br-footer-category` representa o mapa do site, de acordo com a documentação de design do GovBR.
+ *
+ * O `br-footer-category` deve ser utilizado com filho direto do componente [`br-footer`](/docs/components/footer) e possui um slot para os itens da categoria.
+ * Esses itens são representados pelo componente [`br-footer-item`](/docs/components/footer-item).
+ *
+ * O componente `br-footer-category` é responsivo e se adapta a diferentes tamanhos de tela.
+ * Em telas menores, ele se comporta como um accordion, enquanto em telas maiores, ele é exibido como uma lista.
+ *
+ * @slot default - Área destinada aos itens da categoria. Utilize o componente [`br-footer-item`](/docs/components/footer-item) para adicionar itens.
+ */
+export declare class FooterCategory {
+    /**
+     * Referência ao elemento host do componente.
+     * Utilize esta propriedade para acessar e manipular o elemento do DOM associado ao componente.
+     */
+    el: HTMLBrFooterCategoryElement;
+    /**
+     * Identificador único.
+     * Caso não seja fornecido, um ID gerado automaticamente será usado.
+     */
+    readonly customId: string;
+    /**
+     * Título da lista.
+     * @default ''
+     */
+    label: string;
+    /**
+     * Define se o componente é exibido em um layout de desktop ou não.
+     * @default false
+     */
+    isDesktop: boolean;
+    /**
+     * Define o nome do grupo de accordion.
+     */
+    accordionGroup: string;
+    /**
+     * Define o media query para o componente.
+     * O media query é usado para determinar se o componente deve ser exibido em um layout de desktop ou não.
+     */
+    private mediaQuery;
+    /**
+     * Define um nome para o grupo de accordion.
+     * O nome do grupo é definido com base no atributo `custom-id` do elemento pai.
+     */
+    private setAccordionGroup;
+    /**
+     * Método que retorna as classes CSS do componente.
+     */
+    private getCssClassMap;
+    /**
+     * Método que retorna as classes baseadas no tamanho da tela.
+     */
+    private getRootClassMap;
+    /**
+     * Define o media query para o componente.
+     * O media query é usado para determinar se o componente deve ser exibido em um layout de desktop ou não.
+     * O valor padrão é `(min-width: 992px)`, que corresponde a telas de desktop.
+     * O valor pode ser alterado para atender às necessidades específicas do projeto.
+     * @default '(min-width: 992px)'
+     */
+    private setMedia;
+    /**
+     * Método do ciclo de vida do componente, que é chamado uma vez após o componente começar a ser renderizado no DOM.
+     */
+    componentWillLoad(): void;
+    /**
+     * Método do ciclo de vida do componente, que é chamado quando o componente é removido do DOM.
+     */
+    disconnectedCallback(): void;
+    /**
+     * Trata a mudança de media query.
+     * @param event O evento de mudança de media query.
+     */
+    private handleMediaQueryChange;
+    /**
+     * Renderiza o componente.
+     * @returns JSX do componente.
+     */
+    render(): any;
+}

package/dist/types/components/footer-item/footer-item.d.ts

@@ -0,0 +1,39 @@
+/**
+ * O subcomponente `br-footer-item` deve ser utilizado juntamente com o subcomponente [`br-footer-category`](/docs/components/footer-category) para representar os itens dentro de uma categoria no rodapé.
+ * De acordo com o a documentação de design do GovBR, esses dois subcomponentes formam o mapa do site.
+ * Portanto sob esse contexto, o `br-footer-item` representa uma página no site.
+ *
+ * O `br-footer-item` deve ser utilizado como filho direto do componente [`br-footer-category`](/docs/components/footer-category).
+ *
+ * @slot default - Área destinada ao conteúdo do item.
+ */
+export declare class FooterItem {
+    /**
+     * Referência ao elemento host do componente.
+     * Utilize esta propriedade para acessar e manipular o elemento do DOM associado ao componente.
+     */
+    el: HTMLBrFooterItemElement;
+    /**
+     * Identificador único.
+     * Caso não seja fornecido, um ID gerado automaticamente será usado.
+     */
+    readonly customId: string;
+    /**
+     * URL ou caminho para o qual o usuário será direcionado ao clicar no item.
+     * Quando definido, o item será renderizado como um link.
+     * @example 'https://www.gov.br'
+     * @example '/home'
+     * @example '#section'
+     */
+    readonly href?: string;
+    /**
+     * Monta o objeto com as classes CSS do componente
+     * @returns Objeto com as classes CSS do componente
+     */
+    private getCssClassMap;
+    /**
+     * Renderiza o componente
+     * @returns JSX do componente
+     */
+    render(): any;
+}

package/dist/types/components/footer-legal/footer-legal.d.ts

@@ -0,0 +1,24 @@
+/**
+ * O subcomponente `br-footer-legal` representa a área destinada a informações legais no rodapé do site, de acordo com a documentação de design do GovBR.
+ * Ele deve ser utilizado como filho direto do componente [`br-footer`](/docs/components/footer).
+ *
+ * @slot default - Área destinada a informações legais.
+ */
+export declare class FooterLegal {
+    /**
+     * Referência ao elemento host do componente.
+     * Utilize esta propriedade para acessar e manipular o elemento do DOM associado ao componente.
+     */
+    el: HTMLBrFooterLegalElement;
+    /**
+     * Identificador único.
+     * Caso não seja fornecido, um ID gerado automaticamente será usado.
+     */
+    readonly customId: string;
+    private getCssClassMap;
+    /**
+     * Renderiza o componente.
+     * @returns JSX do componente.
+     */
+    render(): any;
+}

package/dist/types/components/footer-logo/footer-logo.d.ts

@@ -0,0 +1,49 @@
+/**
+ * O subcomponente `br-footer-logo` representa a logo principal do site ou a logo dos parceiros.
+ * Ele deve ser utilizado como filho direto do componente [`br-footer`](/docs/components/footer).
+ * Para que ele represente a logo principal do site, o atributo `is-partner` deve ser definido como `false`, ou não deve ser definido.
+ * Para que ele represente a logo de um parceiro, o atributo `is-partner` deve ser definido como `true`.
+ */
+export declare class FooterLogo {
+    /**
+     * Referência ao elemento host do componente.
+     * Utilize esta propriedade para acessar e manipular o elemento do DOM associado ao componente.
+     */
+    el: HTMLBrFooterLogoElement;
+    /**
+     * Identificador único.
+     * Caso não seja fornecido, um ID gerado automaticamente será usado.
+     */
+    readonly customId: string;
+    /**
+     * Url da logo padrão.
+     */
+    src: string;
+    /**
+     * Descrição da logo.
+     */
+    description: string;
+    /**
+     * Posição da logo.
+     */
+    position: 'left' | 'center' | 'right';
+    /**
+     * Define se a logo é de um parceiro.
+     */
+    readonly isPartner: boolean;
+    /**
+     * Monta o mapa de classes CSS que serão aplicadas ao componente.
+     * @returns Objeto com as classes CSS que serão aplicadas ao componente.
+     */
+    private getCssClassMap;
+    /**
+     * Monta o mapa de classes CSS que serão aplicadas ao host do componente.
+     * @returns Objeto com as classes CSS que serão aplicadas ao host do componente.
+     */
+    private getRootCssClassMap;
+    /**
+     * Monta o JSX que representa o componente.
+     * @returns JSX que representa o componente.
+     */
+    render(): any;
+}

package/dist/types/components/footer-social/footer-social.d.ts

@@ -0,0 +1,38 @@
+/**
+ * O subcomponente `br-footer-social` representa os ícones de redes sociais no rodapé do site, de acordo com a documentação de design do GovBR.
+ * Ele deve ser utilizado como filho direto do componente [`br-footer`](/docs/components/footer).
+ */
+export declare class FooterSocial {
+    /**
+     * Referência ao elemento host do componente.
+     * Utilize esta propriedade para acessar e manipular o elemento do DOM associado ao componente.
+     */
+    el: HTMLBrFooterSocialElement;
+    /**
+     * Identificador único.
+     * Caso não seja fornecido, um ID gerado automaticamente será usado.
+     */
+    readonly customId: string;
+    /**
+     * Ícone da rede social
+     * */
+    readonly icon: string;
+    /**
+     * Descrição do ícone da rede social
+     * */
+    readonly description: string;
+    /**
+     * URL da rede social
+     */
+    readonly href: string;
+    /**
+     * Monta o objeto com as classes CSS do componente.
+     * @returns Objeto com as classes CSS do componente.
+     */
+    private getCssClassMap;
+    /**
+     * Renderiza o componente.
+     * @returns JSX do componente.
+     */
+    render(): any;
+}

package/dist/types/components/list/list.d.ts

@@ -28,10 +28,48 @@ export declare class List {
      * Indica que o divider para o título da lista estará oculto.
      */
     readonly hideHeaderDivider: boolean;
+    /**
+     * Indica se a lista possui o comportamento de collapse.
+     */
+    readonly collapse: boolean;
+    /**
+     * Indica se a lista possui o comportamento de accordion.
+     * O valor da propriedade define o grupo, ou seja, o accordion é aplicado a todas as listas que possuem o mesmo valor para esta propriedade.
+     */
+    readonly accordion: string;
+    /**
+     * Método do ciclo de vida do componente, que é chamado uma vez após o componente começar a ser renderizado no DOM.
+     */
     componentDidLoad(): void;
+    /**
+     * Método que retorna as classes CSS do componente
+     * @returns Objeto com as classes CSS do componente
+     */
     private getCssClassMap;
+    /**
+     * Verifica se o slot possui conteúdo.
+     * @param slotName Nome do slot a ser verificado.
+     * @returns true se o slot possui conteúdo, false caso contrário.
+     */
     private hasSlotContent;
-    private readonly renderHeader;
+    /**
+     * Renderiza o cabeçalho da lista.
+     * @returns JSX do cabeçalho da lista
+     */
+    private renderHeader;
+    /**
+     * Renderiza o divider do cabeçalho.
+     * @returns JSX do divider
+     */
     private renderDivider;
+    /**
+     * Renderiza o corpo da lista.
+     * @returns JSX do corpo da lista.
+     */
+    private renderListBody;
+    /**
+     * Renderiza o componente.
+     * @returns JSX do componente
+     */
     render(): any;
 }

package/dist/types/components/radio/radio.d.ts

@@ -59,6 +59,14 @@ export declare class Radio {
      */
     checkedChange: EventEmitter<boolean>;
     handleCheckedChange(event: CustomEvent): void;
+    /**
+     * Navega e seleciona o próximo/anterior rádio habilitado no grupo via teclas de seta.
+     * Ativado por 'keydown', move a seleção entre rádios do mesmo 'name'
+     * usando as setas, partindo do rádio atualmente checado.
+     * @param {KeyboardEvent} event O evento de teclado.
+     * @listens keydown
+     */
+    handleKeyDown(event: KeyboardEvent): void;
     /**
      * Inverte o valor da prop `checked`
      */

package/dist/types/components/tab/tab.d.ts

@@ -0,0 +1,103 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+/**
+ * Para uma descrição detalhada, consulte a [documentação do GovBR-DS](https://www.gov.br/ds/components/tab-item?tab=designer).
+ *
+ * @slot default - Slot com os componentes item da tab
+ */
+export declare class Tab {
+    el: HTMLBrTabElement;
+    elementInternals: ElementInternals;
+    /**
+     * A propriedade 'density' define a densidade do componente.
+     * Os valores possíveis são 'small', 'medium' e 'large'.
+     * @type {string}
+     * @default 'medium'
+     */
+    readonly density: 'small' | 'medium' | 'large';
+    /**
+     * Define se o Tab usará um esquema de cores.
+     * Apenas o esquema 'dark' está disponível para o modo escuro.
+     * @type {string}
+     */
+    colorMode: string;
+    /**
+     * A propriedade 'activeTab' define o tab ativo.
+     */
+    activeTab: string;
+    /**
+     * A propriedade 'tabItems' lista dos tabs items .
+     */
+    tabItems: Element[];
+    /**
+     * A propriedade 'tabContent' armazena o conteúdo dos tabs.
+     * @type {string}
+     * @memberof Tab
+     */
+    tabContent: string;
+    private maxWidth;
+    private hostStyle;
+    private containerStyle;
+    private mutationObserver;
+    private focusElementIndex;
+    brDidActive: EventEmitter;
+    private getCssClassMap;
+    private setupHostStyles;
+    private updateContainerStyles;
+    /**
+     * Obtém os elementos de tab items dentro do componente.
+     * Se não houver elementos, emite um aviso.
+     * @private
+     * @returns {void}
+     * @memberof Tab
+     */
+    private getTabItemsElements;
+    /**
+     * Atualiza o conteúdo dos tabs com base nos elementos de tab items.
+     * Cada tab item é transformado em um painel de tab com o ID apropriado.
+     * O painel ativo é marcado com a classe 'active'.
+     * @private
+     * @returns {void}
+     * @memberof Tab
+     * @description
+     */
+    private updateTabContent;
+    /**
+     * Atualiza a largura máxima do componente com base na largura da janela.
+     * Se a largura da janela não estiver disponível, define a largura máxima como 100%.
+     * @private
+     * @returns {void}
+     * @memberof Tab
+     * @description
+     * Esta função calcula a largura máxima do componente com base na posição do elemento na tela.
+     */
+    private updateMaxWidth;
+    /**
+     * Obtém o ID do tab item.
+     * @private
+     * @param {Element} tab - O elemento do tab item.
+     * @returns {string} - O ID do tab item.
+     * @memberof Tab
+     * @description
+     * Esta função retorna o ID do tab item, que é armazenado no atributo 'tab-item-id'.
+     */
+    private getTabID;
+    /**
+     *
+     * @param tab
+     * @returns
+     */
+    private isTabActive;
+    private verifActiveTab;
+    activeTabChanged(newValue: string): void;
+    /**
+     * Evento de navegação por teclado
+     * @param event
+     */
+    private handleKeyNavigation;
+    componentWillLoad(): void;
+    componentDidLoad(): void;
+    disconnectedCallback(): void;
+    private handleTabClick;
+    private setActiveTab;
+    render(): any;
+}

package/dist/types/components/tab-item/tab-item.d.ts

@@ -0,0 +1,52 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+/**
+ * Para uma descrição detalhada, consulte a [documentação do GovBR-DS](https://www.gov.br/ds/components/tab-item?tab=designer).
+ *
+ * @slot default - Slot com conteúdo do item da tab
+ */
+export declare class TabItem {
+    /**
+     * Referência ao elemento host do componente.
+     * Utilize esta propriedade para acessar e manipular o elemento do DOM associado ao componente.
+     */
+    el: HTMLBrTabItemElement;
+    readonly TabItemId: string;
+    /**
+     * Define ícone do item de tab
+     * @type {string}
+     */
+    readonly icon: string;
+    /**
+     * Define o título do item de tab
+     * @type {string}
+     */
+    readonly tabItemTitle: string;
+    /**
+     * Define se mostra somente o ícone
+     * @type {boolean}
+     * @default false
+     */
+    readonly onlyIcon: boolean;
+    /**
+     * Define se o item de tab é ativo
+     * @type {boolean}
+     */
+    isActive: boolean;
+    /**
+     * Define contador do item de tab
+     * @type {string}
+     */
+    readonly counter: string;
+    /**
+     * Define se o Tab usará um esquema de cores.
+     * Apenas o esquema 'dark' está disponível para o modo escuro.
+     * @type {string}
+     */
+    colorMode: string;
+    elementInternals: ElementInternals;
+    itemTabClick: EventEmitter<{
+        id: string;
+    }>;
+    private getCssClassMap;
+    render(): any;
+}

package/dist/types/components/table/table.d.ts

@@ -0,0 +1,27 @@
+/**
+ * Para uma descrição detalhada, consulte a [documentação do GovBR-DS](https://www.gov.br/ds/components/table?tab=designer).
+ *
+ * @slot default - Descrição do slot
+ */
+export declare class Table {
+    /**
+     * Referência ao elemento host do componente.
+     * Utilize esta propriedade para acessar e manipular o elemento do DOM associado ao componente.
+     */
+    el: HTMLBrTableElement;
+    /**
+     * Identificador único aplicado na tag raiz do shadowRoot.
+     * Caso não seja fornecido, um ID gerado automaticamente será usado.
+     */
+    readonly customId: string;
+    /**
+     * Define um conjunto de classes CSS que serão aplicadas ao componente.
+     * @returns Conjunto de classes CSS.
+     */
+    private getCssClassMap;
+    /**
+     * Define o JSX do componente.
+     * @return JSX do componente.
+     */
+    render(): any;
+}

package/dist/types/components/table-cell/table-cell.d.ts

@@ -0,0 +1,50 @@
+type HorizontalAlign = 'left' | 'center' | 'right';
+/**
+ * Para uma descrição detalhada, consulte a [documentação do GovBR-DS](https://www.gov.br/ds/components/table?tab=designer).
+ *
+ * @slot default - Descrição do slot
+ */
+export declare class TableCell {
+    /**
+     * Referência ao elemento host do componente.
+     * Utilize esta propriedade para acessar e manipular o elemento do DOM associado ao componente.
+     */
+    el: HTMLBrTableCellElement;
+    /**
+     * Identificador único.
+     * Caso não seja fornecido, um ID gerado automaticamente será usado.
+     */
+    readonly customId: string;
+    /**
+     * Define se a célula do cabeçalho possui borda vertical.
+     */
+    hasVerticalBorder: boolean;
+    /**
+     * Define o alinhamento horizontal do conteúdo da célula.
+     */
+    horizontalAlign: HorizontalAlign;
+    /**
+     * Watcher que observa as mudanças na propriedade `horizontalAlign`.
+     */
+    handleHorizontalAlignChange(newValue: HorizontalAlign): void;
+    /**
+     * Ouve o evento disparado ao alterar o alinhamento horizontal do conteúdo da célula.
+     * @param event Objeto Event
+     */
+    handleHorizontalAlignDidChange(event: CustomEvent): void;
+    /**
+     * Ciclo de vida do componente. Chamado após o componente ser renderizado no DOM.
+     */
+    connectedCallback(): void;
+    /**
+     * Define um conjunto de classes CSS que serão aplicadas ao componente.
+     * @returns Objeto com as classes CSS.
+     */
+    private getCssClassMap;
+    /**
+     * Define o JSX do componente.
+     * @returns JSX do componente.
+     */
+    render(): any;
+}
+export {};