import { EventEmitter } from '@angular/core'; import { AbstractControl, ControlValueAccessor, Validator } from '@angular/forms'; import { PoCheckboxGroupOptionView } from './interfaces/po-checkbox-group-option-view.interface'; import { PoCheckboxGroupOption } from './interfaces/po-checkbox-group-option.interface'; import { PoHelperOptions } from '../../po-helper'; /** * @description * * O componente `po-checkbox-group` exibe uma lista de múltipla escolha onde o usuário pode marcar e desmarcar, * utilizando a tecla de espaço ou o clique do mouse, várias opções. * * > Para seleção única, utilize o [**PO Radio Group**](/documentation/po-radio-group). * * Por padrão, o po-checkbox-group retorna um array com os valores dos itens selecionados para o model. * * ``` * favorites = ['PO', 'Angular']; * ``` * * Na maioria das situações, o array com os objetos setados já atende as necessidades mas, caso o desenvolvedor * tenha necessidade de usar um valor indeterminado (`null`), ou seja, nem marcado (`true`) e nem desmarcado (`false`), * deve setar a propriedade `p-indeterminate` como `true`. * * Nesse caso, o po-checkbox-group vai retornar um objeto com todas as opções disponíveis e seus valores. * * ``` * favorites = { * PO: true, * Angular: true, * VueJS: false, * React: null // indeterminado * }; * ``` */ export declare class PoCheckboxGroupBaseComponent implements ControlValueAccessor, Validator { additionalHelpEventTrigger: string | undefined; /** * * @deprecated v23.x.x use `p-helper` * * @optional * * @description * Exibe um ícone de ajuda adicional, com o texto desta propriedade sendo passado para o popover do componente `po-helper`. * **Como boa prática, indica-se utilizar um texto com até 140 caracteres.** * > Requer um recuo mínimo de 8px se o componente estiver próximo à lateral da tela. * * > Essa propriedade está **depreciada** e será removida na versão `23.x.x`. Recomendamos utilizar a propriedade `p-helper` que oferece mais recursos e flexibilidade. */ additionalHelpTooltip?: string; /** * @optional * * @description * * Define que o popover (`p-helper` e/ou `p-error-limit`) será incluído no body da página e não * dentro do componente. Essa opção pode ser necessária em cenários com containers que possuem scroll ou overflow * escondido, garantindo o posicionamento correto do tooltip próximo ao elemento. * * > Quando utilizado com `p-helper`, leitores de tela como o NVDA podem não ler o conteúdo do popover. * * @default `false` */ appendBox?: boolean; /** * @optional * * @description * * Aplica foco no elemento ao ser iniciado. * * > Caso mais de um elemento seja configurado com essa propriedade, apenas o último elemento declarado com ela terá o foco. * * @default `false` */ autoFocus: boolean; /** * @optional * * @description * Define se o título do campo será exibido de forma compacta. * * Quando habilitado (`true`), o modo compacto afeta o conjunto composto por: * - `po-label` * - `p-requirement (showRequired)` * - `po-helper` * * Ou seja, todos os elementos relacionados ao título do campo * (rótulo, indicador de obrigatoriedade e componente auxiliar) passam * a seguir o comportamento de layout compacto. * * Também é possível definir esse comportamento de forma global, * uma única vez, na folha de estilo geral da aplicação, por meio * da customização dos tokens CSS: * * - `--field-container-title-justify` * - `--field-container-title-flex` * * Exemplo: * * ``` * :root { * --field-container-title-justify: flex-start; * --field-container-title-flex: 0 1 auto; * } * ``` * * Dessa forma, o layout compacto passa a ser o padrão da aplicação, * sem a necessidade de definir a propriedade individualmente em cada campo. * * @default `false` */ compactLabel: import("@angular/core").InputSignalWithTransform; /** Nome dos checkboxes */ name: string; /** Texto de apoio do campo */ help?: string; /** Label do campo */ label?: string; /** * @optional * * @description * * Define se a indicação de campo opcional será exibida. * * > Não será exibida a indicação se: * - O campo conter `p-required`; * - Não possuir `p-help` e/ou `p-label`. * * @default `false` */ optional: boolean; /** * @optional * * @description * * Exibe a mensagem setada se o campo estiver vazio e for requerido. * * > Necessário que a propriedade `p-required` esteja habilitada. * */ fieldErrorMessage: string; /** * @optional * * @description * * Limita a exibição da mensagem de erro a duas linhas e exibe um tooltip com o texto completo. * * > Caso essa propriedade seja definida como `true`, a mensagem de erro será limitada a duas linhas * e um tooltip será exibido ao passar o mouse sobre a mensagem para mostrar o conteúdo completo. * * @default `false` */ errorLimit: boolean; /** * @optional * * @description * * Define as opções do componente de ajuda (po-helper) que será exibido ao lado do label quando a propriedade `p-label` for definida, ou, ao lado do componente na ausência da propriedade `p-label`. * > Para mais informações acesse: https://po-ui.io/documentation/po-helper. * * > Ao configurar esta propriedade, o antigo ícone de ajuda adicional (`p-additional-help-tooltip` e `p-additional-help`) será ignorado. */ poHelperComponent: import("@angular/core").InputSignal; /** * @optional * * @description * Habilita a quebra automática do texto da propriedade `p-label`. Quando `p-label-text-wrap` for verdadeiro, o texto que excede * o espaço disponível é transferido para a próxima linha em pontos apropriados para uma * leitura clara. * * @default `false` */ labelTextWrap: import("@angular/core").InputSignal; /** * @optional * * @description * * Função para atualizar o `ngModel` do componente, necessário quando não for utilizado dentro da tag form. * * Na versão 12.2.0 do Angular a verificação `strictTemplates` vem true como default. Portanto, para utilizar * two-way binding no componente deve se utilizar da seguinte forma: * * ``` * * ``` * */ ngModelChange: EventEmitter; /** * @deprecated v23.x.x use `p-helper` * * @optional * * @description * Evento disparado ao clicar no ícone de ajuda adicional. * * > Essa propriedade está **depreciada** e será removida na versão `23.x.x`. Recomendamos utilizar a propriedade `p-helper` que oferece mais recursos e flexibilidade. */ additionalHelp: EventEmitter; /** * @optional * * @description * * Evento disparado ao alterar valor do campo */ change: EventEmitter; /** * @optional * * @description * Evento disparado quando uma tecla é pressionada enquanto o foco está no componente. * Retorna um objeto `KeyboardEvent` com informações sobre a tecla. */ keydown: EventEmitter; checkboxGroupOptionsView: Array; checkedOptions: any; checkedOptionsList: any; displayAdditionalHelp: boolean; mdColumns: number; propagateChange: any; validatorChange: any; private _columns; private _disabled?; private _indeterminate?; private _options?; private _required?; private _size?; private _initialSize?; /** * @optional * * @description * * Possibilita definir a quantidade de colunas para exibição dos itens do *checkbox*. * - É possível exibir as opções entre `1` e `4` colunas. * - Para resolução `sm` a colunagem invariavelmente passa para `1` coluna. * - Quando se trata de resolução `md` e o valor estabelecido para colunas for superior a `2`, * o *grid system* será composto por `2` colunas. * - Para evitar a quebra de linha, prefira a utilização de `1` coluna para opções com textos grandes. * * @default `2` * */ set columns(value: number); get columns(): number; /** * @optional * * @description * * Desabilita todos os itens do checkbox. * * @default `false` */ set disabled(value: boolean); get disabled(): boolean; /** * @optional * * @description * * Caso exista a necessidade de usar o valor indeterminado (`null`) dentro da lista de opções, é necessário setar * a propriedade `p-indeterminate` como `true`, por padrão essa propriedade vem desabilitada (`false`). * * Quando essa propriedade é setada como `true`, o *po-checkbox-group* passa a devolver um objeto completo para o * `ngModel`, diferente do array que contém apenas os valores selecionados. * * @default `false` */ set indeterminate(indeterminate: boolean); get indeterminate(): boolean; /** * @optional * * @description * Lista de opções que serão exibidas * Nesta propriedade deve ser definido um array de objetos que implementam a interface PoCheckboxGroupOption */ set options(value: Array); get options(): Array; /** * @optional * * @description * * Define que o campo será obrigatório. * * @default `false` */ set required(required: boolean); get required(): boolean; /** * Define se a indicação de campo obrigatório será exibida. * * > Não será exibida a indicação se: * - Não possuir `p-help` e/ou `p-label`. */ showRequired: boolean; /** * @optional * * @description * * Define o tamanho dos checkboxes do componente: * - `small`: 16x16 (disponível apenas para acessibilidade AA). * - `medium`: 24x24. * * > Caso a acessibilidade AA não esteja configurada, o tamanho `medium` será mantido. * Para mais detalhes, consulte a documentação do [po-theme](https://po-ui.io/documentation/po-theme). * * @default `medium` * */ set size(value: string); get size(): string; protected onThemeChange(): void; changeValue(): void; checkIndeterminate(): any; checkOption(value: PoCheckboxGroupOption): void; setDisabledState(isDisabled: boolean): void; registerOnChange(fn: any): void; registerOnTouched(fn: any): void; writeValue(optionsModel: any): void; registerOnValidatorChange(fn: () => void): void; validate(abstractControl: AbstractControl): { [key: string]: any; }; protected validateModel(model: any): void; private checkColumnsRange; private checkOptionModel; private generateCheckOptions; private getGridSystemColumns; private isInvalidIndeterminate; private removeDuplicatedOptions; private setCheckboxGroupOptionsView; private applySizeBasedOnA11y; }