@govbr-ds/webcomponents 2.0.0-next.57 → 2.0.0-next.58

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

@@ -0,0 +1,120 @@
+/**
+ * Para uma descrição detalhada, consulte a [documentação do GovBR-DS](https://www.gov.br/ds/components/header?tab=designer).
+ *
+ * @slot default - Área para inserção da logo personalizada.
+ */
+export declare class HeaderLogo {
+    /**
+     * Referência ao elemento host do componente.
+     * Utilize esta propriedade para acessar e manipular o elemento do DOM associado ao componente.
+     */
+    el: HTMLBrHeaderLogoElement;
+    /**
+     * Identificador único.
+     * Caso não seja fornecido, um ID gerado automaticamente será usado.
+     */
+    readonly customId: string;
+    /**
+     * Descrição da logo.
+     * @default 'logo'
+     */
+    description: string;
+    /**
+     * URL de destino quando a logo for clicada.
+     * Se fornecido, a logo será envolvida em um link.
+     */
+    href?: string;
+    /**
+     * Indica se a logo está em modo compacto.
+     * @default false
+     */
+    isCompact: boolean;
+    /**
+     * Target do link quando href é fornecido.
+     * @default '_self'
+     */
+    target?: '_blank' | '_self' | '_parent' | '_top';
+    /**
+     * Url da logo padrão.
+     * @default ''
+     */
+    src: string;
+    /**
+     * Largura da imagem.
+     * @default auto
+     */
+    width: string;
+    /**
+     * Altura da imagem.
+     * @default auto
+     */
+    height: string;
+    /**
+     * Observador de mudanças de breakpoint.
+     */
+    private breakpointObserver;
+    /**
+     * Indica o breakpoint atual.
+     */
+    private currentBreakpoint;
+    /**
+     * Indica se a altura padrão está sendo usada.
+     */
+    private useDefaultHeight;
+    /**
+     * Listener para o evento `headerCompactChange` disparado pelo componente pai `br-header`.
+     * O evento contém os detalhes do estado compacto e o ID do componente pai.
+     * Se o ID do componente pai corresponder ao ID do `br-header` que contém este `br-header-logo`, o estado `isCompact` será atualizado.
+     * @param event Evento disparado pelo componente pai `br-header` quando o estado compacto é alterado.
+     */
+    private handleHeaderCompactChange;
+    /**
+     * Observa mudanças na propriedade `isCompact` e ajusta a altura da logo se `hasDefaultHeight` for verdadeiro.
+     */
+    handleIsCompactChange(): void;
+    /**
+     * Ciclo de vida do componente.
+     * Chamado quando o componente é conectado ao DOM.
+     */
+    connectedCallback(): void;
+    /**
+     * Ciclo de vida do componente. Chamado antes do componente ser carregado.
+     */
+    componentWillLoad(): void;
+    /**
+     * Manipula as mudanças de breakpoint.
+     * @param breakpoint O breakpoint ativo.
+     */
+    private handleBreakpointChange;
+    /**
+     * Retorna um objeto contendo as classes CSS a serem aplicadas ao componente.
+     * @returns Um objeto contendo as classes CSS a serem aplicadas ao componente.
+     */
+    private getCssClassMap;
+    /**
+     * Configura o observador de mudanças de breakpoint.
+     */
+    private setBreakpointObserver;
+    /**
+     * Define a altura padrão da logo com base no estado compacto e no breakpoint atual.
+     * O tamanho padrão depende do breakpoint atual e se está no modo compacto ou largo.
+     * Modo largo:
+     * - Breakpoint X_SMALL: 24px
+     * - Breakpoint SMALL, MEDIUM, LARGE E X_LARGE 40px
+     * Modo compacto:
+     * - Breakpoint X_SMALL: 24px
+     * - Breakpoint SMALL, MEDIUM, LARGE E X_LARGE 16px
+     */
+    private setDefaultHeight;
+    private setUseDefaultHeight;
+    /**
+     * Cria o elemento de imagem da logo.
+     * @returns JSX do elemento img.
+     */
+    private renderImageElement;
+    /**
+     * Renderiza o componente.
+     * @returns JSX do componente.
+     */
+    render(): any;
+}

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

@@ -0,0 +1,311 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import { Breakpoint } from '../../utils/breakpoint-observer';
+import { CssClassMap } from '../../utils/interfaces';
+/**
+ * Nomes das áreas do cabeçalho.
+ */
+declare const HeaderSlotNames: {
+    readonly LOGO: "logo";
+    readonly SIGNATURE: "signature";
+    readonly LINKS: "links";
+    readonly FUNCTIONS: "functions";
+    readonly SEARCH_ICON: "search-icon";
+    readonly SEARCH: "search";
+    readonly ACCESS: "access";
+    readonly MENU_TRIGGER: "menu-trigger";
+    readonly CAPTION: "caption";
+    readonly SUBCAPTION: "subcaption";
+};
+/**
+ * Tipo que representa os nomes das áreas do cabeçalho.
+ */
+type HeaderSlotName = (typeof HeaderSlotNames)[keyof typeof HeaderSlotNames];
+/**
+ * Tipo que representa as configurações de uma área do cabeçalho.
+ */
+type HeaderAreaConfig = {
+    cssClassMap: CssClassMap;
+    breakpoints: {
+        loose: Breakpoint[];
+        compact: Breakpoint[];
+    };
+    hasContent: boolean;
+    isVisible: boolean;
+    isActive?: boolean;
+    event?: {
+        click?: (event: MouseEvent) => void;
+        focus?: (event: FocusEvent) => void;
+    };
+};
+/**
+ * Tipo que representa as áreas do cabeçalho.
+ */
+type HeaderArea = {
+    [K in HeaderSlotName]: HeaderAreaConfig;
+};
+/**
+ * Tipo que representa as densidades do cabeçalho.
+ */
+type HeaderDensity = 'small' | 'medium' | 'large';
+/**
+ * Para uma descrição detalhada, consulte a [documentação do GovBR-DS](https://www.gov.br/ds/components/header?tab=designer).
+ *
+ * @slot logo - Área para inserção da logo
+ * @slot signature - Área para inserção da assinatura
+ * @slot links - Área para inserção dos links
+ * @slot functions - Área para inserção dos botões de função
+ * @slot search - Área para inserção do campo de busca
+ * @slot access - Área para inserção do botão de acesso
+ * @slot menu-trigger - Área para inserção do botão de menu
+ * @slot caption - Área para inserção do título do header
+ * @slot subcaption - Área para inserção do subtítulo do header
+ */
+export declare class Header {
+    /**
+     * Referência ao elemento host do componente.
+     * Utilize esta propriedade para acessar e manipular o elemento do DOM associado ao componente.
+     */
+    el: HTMLBrHeaderElement;
+    /**
+     * Indica o texto exibido como título do header.
+     * @default null
+     */
+    readonly caption: string;
+    /**
+     * Indica a URL associada ao título do header.
+     * @default null
+     */
+    readonly captionUrl: string;
+    /**
+     * Identificador único.
+     * Caso não seja fornecido, um ID gerado automaticamente será usado.
+     */
+    readonly customId: string;
+    /**
+     * Indica a densidade do cabeçalho.
+     * Pode ser 'small', 'medium' ou 'large'.
+     * @default 'medium'
+     */
+    readonly density: HeaderDensity;
+    /**
+     * Indica se o cabeçalho deve ser exibido em um modo compacto.
+     * Quando definido como true, o cabeçalho será renderizado em um estilo compacto.
+     * @default false
+     */
+    isCompact: boolean;
+    /**
+     * Indica se o cabeçalho deve ser exibido em um modo fixo.
+     * Quando definido como true, o cabeçalho será fixo no topo da página durante a rolagem.
+     * @default false
+     */
+    readonly isSticky: boolean;
+    /**
+     * Indica o texto exibido como assinatura do header.
+     * @default null
+     */
+    readonly signature: string;
+    /**
+     * Indica qual lista deve encolher primeiro quando o espaço for limitado.
+     * Pode ser 'links' ou 'functions'.
+     * @default 'functions'
+     */
+    readonly shrinkFirst: 'links' | 'functions';
+    /**
+     * Indica o texto exibido como subtítulo do header.
+     * @default null
+     */
+    readonly subcaption: string;
+    /**
+     * Indica a URL associada ao subtítulo do header.
+     * @default null
+     */
+    readonly subcaptionUrl: string;
+    /**
+     * Representa as configurações da área do cabeçalho.
+     */
+    headerArea: HeaderArea;
+    /**
+     * Evento disparado quando o cabeçalho entra ou sai do modo compacto.
+     * O evento contém os detalhes do estado compacto e o ID do componente pai.
+     * @event headerCompactChange
+     */
+    headerCompactChange: EventEmitter<{
+        parentId: string;
+        isCompact: boolean;
+    }>;
+    /**
+     * Evento disparado para indicar qual lista deve encolher primeiro.
+     * O evento contém os detalhes do ID do componente pai e o nome da lista.
+     * @event headerWidthChange
+     */
+    headerWidthChange: EventEmitter<{
+        id: string;
+        listNames: ('links' | 'functions')[];
+        shrink: boolean;
+    }>;
+    /**
+     * Observa mudanças na propriedade isCompact.
+     * @param newValue O novo valor de isCompact.
+     */
+    watchIsCompact(newValue: boolean): void;
+    /**
+     * Observador de mudanças de breakpoint.
+     */
+    private breakpointObserver;
+    /**
+     * Indica o breakpoint atual.
+     */
+    private currentBreakpoint;
+    /**
+     * Armazena a posição de scroll do elemento pai.
+     */
+    private parentScrollTop;
+    /**
+     * Timeout para o evento de redimensionamento.
+     */
+    private resizeTimeout;
+    /**
+     * Listener para o evento 'headerListUpdate', disparado pelos componentes filhos 'br-header-list'.
+     * O evento contém o ID do componente pai e o nome da lista.
+     */
+    private handleHeaderListUpdate;
+    /**
+     * Listener para o evento 'resize' da janela.
+     * Dispara o evento de redimensionamento do cabeçalho após um breve atraso de 100ms
+     */
+    private handleListResize;
+    /**
+     * Ciclo de vida do componente.
+     * Executado quando o componente é conectado ao DOM.
+     */
+    connectedCallback(): void;
+    /**
+     * Ciclo de vida do componente.
+     * Executado uma vez após o componente ser totalmente carregado ao DOM.
+     */
+    componentDidLoad(): void;
+    /**
+     * Ciclo de vida do componente.
+     * Executado quando o componente é desconectado do DOM.
+     */
+    disconnectedCallback(): void;
+    /**
+     * Reinicializa o estado das listas do cabeçalho, disparando o evento de redimensionamento.
+     * Pode ser chamado externamente para forçar a atualização das listas.
+     */
+    resetHeaderList(): Promise<void>;
+    /**
+     * Manipula as mudanças de breakpoint.
+     * @param breakpoint O breakpoint ativo.
+     */
+    private handleBreakpointChange;
+    /**
+     * Manipula o evento de scroll no elemento pai.
+     */
+    private handleParentScroll;
+    /**
+     * Manipula o clique no botão de fechar busca.
+     */
+    private handleSearchCloseClick;
+    /**
+     * Manipula o clique no ícone de busca.
+     */
+    private handleSearchIconClick;
+    /**
+     * Manipula o foco no ícone de busca.
+     */
+    private handleSearchIconFocus;
+    /**
+     *
+     * Controla a atualização dos estados da área do cabeçalho.
+     * @param name O nome da área do cabeçalho.
+     */
+    private controlHeaderAreaUpdateStates;
+    /**
+     * Retorna um mapa de classes CSS para o componente.
+     * @returns Um objeto contendo as classes CSS a serem aplicadas.
+     */
+    private getCssClassMap;
+    /**
+     * Verifica se um valor é um nome de slot de cabeçalho válido.
+     * @param value O valor a ser verificado.
+     * @returns Um valor booleano indicando se o valor é um nome de slot de cabeçalho válido.
+     */
+    private isHeaderSlotName;
+    /**
+     * Monitora as mudanças de conteúdo dos slots.
+     */
+    private monitorSlotContent;
+    /**
+     * Configura o observador de mudanças de breakpoint.
+     */
+    private setBreakpointObserver;
+    /**
+     * Configura o evento de scroll no elemento pai.
+     */
+    private setScrollOnParent;
+    /**
+     * Atualiza o estado da área do cabeçalho com base no conteúdo dos slots.
+     */
+    private syncHeaderAreaStates;
+    /**
+     * Remove scroll event listener from parent element.
+     */
+    private unsetScrollOnParent;
+    /**
+     * Atualiza a área do cabeçalho.
+     * @param name O nome da área do cabeçalho.
+     * @param updates As atualizações a serem aplicadas.
+     */
+    private updateHeaderArea;
+    /**
+     * Verifica o espaço disponível para uma lista específica no cabeçalho.
+     * @param listName O nome da lista a ser verificada.
+     */
+    private verifyListSpace;
+    /**
+     * Renderiza o conteúdo padrão do título.
+     * @returns Um elemento JSX representando o conteúdo padrão do título.
+     */
+    private renderDefaultCaptionContent;
+    /**
+     * Renderiza o conteúdo padrão da assinatura.
+     * @returns Um elemento JSX representando o conteúdo padrão da assinatura.
+     */
+    private renderDefaultSignatureContent;
+    /**
+     * Renderiza o conteúdo padrão do subtítulo.
+     * @returns Um elemento JSX representando o conteúdo padrão do subtítulo.
+     */
+    private renderDefaultSubcaptionContent;
+    /**
+     * Renderiza o divisor entre as áreas do cabeçalho.
+     * @param mainArea A área principal do cabeçalho.
+     * @param secondaryAreas As áreas secundárias do cabeçalho.
+     * @returns Um elemento JSX representando o divisor entre as áreas do cabeçalho.
+     */
+    private renderDivider;
+    /**
+     * Renderiza a área do cabeçalho.
+     * @param name O nome da área do cabeçalho.
+     * @returns Um elemento JSX representando a área do cabeçalho.
+     */
+    private renderHeaderArea;
+    /**
+     * Renderiza o botão de fechar busca.
+     * @returns Um elemento JSX representando o botão de fechar busca.
+     */
+    private renderSearchCloseButton;
+    /**
+     * Renderiza o conteúdo padrão do slot.
+     * @param name O nome do slot.
+     * @returns Um elemento JSX representando o conteúdo padrão do slot.
+     */
+    private renderSlotDefaultContent;
+    /**
+     * Renderiza o componente.
+     * @returns JSX.Element
+     */
+    render(): any;
+}
+export {};

package/dist/types/components/menu/menu-header/menu-header.d.ts

@@ -0,0 +1,42 @@
+import { EventEmitter } from '../../../stencil-public-runtime';
+/**
+ * Para uma descrição detalhada, consulte a [documentação do GovBR-DS](https://www.gov.br/ds/components/menu-header?tab=designer).
+ *
+ * @slot logo - Slot para inserção de conteúdo personalizado no lugar do logo padrão
+ * @slot signature - Slot para inserção de conteúdo personalizado no lugar da assinatura padrão
+ */
+export declare class MenuHeader {
+    /**
+     * Referência ao elemento host do componente.
+     * Utilize esta propriedade para acessar e manipular o elemento do DOM associado ao componente.
+     */
+    el: HTMLBrMenuHeaderElement;
+    elementInternals: ElementInternals;
+    /**
+     * Identificador único.
+     * Caso não seja fornecido, um ID gerado automaticamente será usado.
+     */
+    readonly customId: string;
+    /**
+     * URL da imagem do logo no cabeçalho do menu
+     */
+    logoSrc?: string;
+    /**
+     * Texto alternativo para a imagem do logo
+     */
+    logoAlt: string;
+    /**
+     * Texto de identificação do site ou sistema
+     */
+    signature?: string;
+    /**
+     * Evento emitido quando o botão de fechar é clicado
+     */
+    brMenuHeaderClose: EventEmitter<void>;
+    /**
+     * Manipula o clique no botão de fechar
+     */
+    private handleCloseClick;
+    private getCssClassMap;
+    render(): any;
+}

package/dist/types/components/menu/menu-info/menu-info.d.ts

@@ -0,0 +1,25 @@
+/**
+ * Para uma descrição detalhada, consulte a [documentação do GovBR-DS](https://www.gov.br/ds/components/menu-info?tab=designer).
+ *
+ * @slot default - Slot para inserção de conteúdo personalizado no lugar do texto de informações padrão
+ */
+export declare class MenuInfo {
+    /**
+     * Referência ao elemento host do componente.
+     * Utilize esta propriedade para acessar e manipular o elemento do DOM associado ao componente.
+     */
+    el: HTMLBrMenuInfoElement;
+    elementInternals: ElementInternals;
+    /**
+     * Identificador único.
+     * Caso não seja fornecido, um ID gerado automaticamente será usado.
+     */
+    readonly customId: string;
+    /**
+     * Informações adicionais em formato de texto
+     */
+    info?: string;
+    hasSlotContent: boolean;
+    componentWillLoad(): void;
+    render(): any;
+}

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

@@ -0,0 +1,49 @@
+export declare class MenuItem {
+    /**
+     * Ícone exibido no item do menu.
+     * Utilize esta propriedade para definir o ícone que será mostrado ao lado do conteúdo do item.
+     */
+    icon: string;
+    /**
+     * URL de destino do link do item do menu.
+     * Utilize esta propriedade para definir o endereço para onde o usuário será direcionado ao clicar no item.
+     * @default '#'
+     */
+    href: string;
+    /**
+     * Define como o link será aberto.
+     * - `_self`: abre no mesmo contexto de navegação (padrão)
+     * - `_blank`: abre em nova aba ou janela
+     * - `_parent`: abre no contexto pai
+     * - `_top`: abre no contexto de nível superior
+     */
+    target?: '_self' | '_blank' | '_parent' | '_top';
+    /**
+     * Define se o item deve exibir um divisor visual.
+     * Quando ativado, adiciona uma linha separadora para organizar visualmente os itens do menu.
+     * @default false
+     */
+    divider: boolean;
+    /**
+     * Define se o item do menu está ativo/selecionado.
+     * Quando ativado, aplica estilos visuais para destacar o item como atual ou selecionado.
+     * @default false
+     */
+    active: boolean;
+    /**
+     * Define o modo de exibição do item, controlando os ícones de expansão.
+     * - `accordion`: exibe setas para cima/baixo (usado em menus de nível 0).
+     * - `drill-down`: exibe seta para a direita (usado em menus de níveis 1+).
+     * - `none`: não exibe ícones de expansão.
+     * @default 'none'
+     */
+    displayMode: 'accordion' | 'drill-down' | 'none';
+    /**
+     * Indica se o item está expandido para fins de acessibilidade (ARIA).
+     * Este estado é controlado externamente (por exemplo, por br-menu-list).
+     * Não altera o estado visual de "active".
+     * @default false
+     */
+    expanded: boolean;
+    render(): any;
+}

package/dist/types/components/menu/menu-link/menu-link.d.ts

@@ -0,0 +1,34 @@
+import { EventEmitter } from '../../../stencil-public-runtime';
+/**
+ * Menu Link - Representa cada link para acesso a sites externos no rodapé do menu.
+ *
+ * @slot icon - Slot para inserção de componente de ícone personalizado
+ * @slot url - Slot para URL do link
+ */
+export declare class MenuLink {
+    /**
+     * Referência ao elemento host do componente.
+     * Utilize esta propriedade para acessar e manipular o elemento do DOM associado ao componente.
+     */
+    el: HTMLBrMenuLinkElement;
+    elementInternals: ElementInternals;
+    /**
+     * Identificador único.
+     * Caso não seja fornecido, um ID gerado automaticamente será usado.
+     */
+    readonly customId: string;
+    /**
+     * URL do link
+     */
+    url: string;
+    /**
+     * Título do link
+     */
+    titulo: string;
+    /**
+     * Evento emitido quando o link externo é clicado
+     */
+    brLinkClick: EventEmitter<void>;
+    private handleClick;
+    render(): any;
+}

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

@@ -0,0 +1,62 @@
+import { EventEmitter } from '../../../stencil-public-runtime';
+export declare class MenuList {
+    /**
+     * Ícone exibido no item do menu.
+     * Utilize esta propriedade para definir o ícone que será mostrado ao lado do label.
+     */
+    icon: string;
+    /**
+     * Texto do label do item do menu.
+     * Utilize esta propriedade para definir o texto que será exibido no item do menu.
+     */
+    label: string;
+    /**
+     * Nível do menu na hierarquia de navegação.
+     * Utilizado para determinar o comportamento do menu (acordeão para nível 0, drill-down para níveis superiores).
+     * @default 0
+     */
+    menuLevel: number;
+    /**
+     * Define se o item deve exibir um divisor visual.
+     * Quando ativado, adiciona uma linha separadora para organizar visualmente os itens do menu.
+     * @default false
+     */
+    divider: boolean;
+    /**
+     * Define se o menu-list inicia expandido.
+     * Útil para manter agrupamentos abertos por padrão no menu contextual.
+     * @default false
+     */
+    expanded: boolean;
+    /**
+     * Referência ao elemento host do componente.
+     * Utilize esta propriedade para acessar e manipular o elemento do DOM associado ao componente.
+     */
+    private el;
+    private internalExpanded;
+    handleExpandedChange(newValue: boolean): void;
+    /**
+     * Quando verdadeiro, suprime toda a renderização do conteúdo no shadow DOM.
+     * Utilizado para cenários onde a lista deve ficar oculta.
+     */
+    shouldHide: boolean;
+    /**
+     * Emitido quando um folder é expandido ou recolhido no nível 0 (comportamento acordeão).
+     */
+    folderToggled: EventEmitter<boolean>;
+    /**
+     * Emitido quando navegando para um submenu nos níveis 1+ (comportamento drill-down).
+     */
+    navigateToSubmenu: EventEmitter<{
+        element: HTMLElement;
+        label: string;
+    }>;
+    componentWillLoad(): void;
+    private onItemClick;
+    private onItemKeyDown;
+    private toggleFolder;
+    private handleKeyDown;
+    private isVisibleElement;
+    private focusFirstChildAnchor;
+    render(): any;
+}

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

@@ -0,0 +1,43 @@
+/**
+ * Para uma descrição detalhada, consulte a [documentação do GovBR-DS](https://www.gov.br/ds/components/menu-logo?tab=designer).
+ *
+ * @slot default - Conteúdo opcional que substitui a imagem padrão
+ */
+export declare class MenuLogo {
+    /**
+     * Referência ao elemento host do componente.
+     * Utilize esta propriedade para acessar e manipular o elemento do DOM associado ao componente.
+     */
+    el: HTMLBrMenuLogoElement;
+    /**
+     * ID personalizado para o elemento, útil para acessibilidade e identificação única.
+     * Se não for fornecido, um ID único será gerado automaticamente.
+     */
+    readonly customId: string;
+    /**
+     * URL da imagem
+     */
+    src: string;
+    /**
+     * Texto alternativo da imagem
+     */
+    alt?: string;
+    /**
+     * Largura da imagem (com unidade, ex: '100px', '50%')
+     */
+    width?: string;
+    /**
+     * Altura da imagem (com unidade, ex: '80px', 'auto')
+     */
+    height?: string;
+    /**
+     * Estado para controlar se a imagem falhou ao carregar
+     */
+    hasError: boolean;
+    /**
+     * Manipula erros no carregamento da imagem
+     */
+    private handleError;
+    private handleLoad;
+    render(): any;
+}