import { AfterViewInit, ElementRef, OnDestroy, OnChanges, SimpleChanges } from '@angular/core';
import { AbstractControl, ValidationErrors, Validator } from '@angular/forms';
import { PoFieldModel } from '../po-field.model';
import { PoSwitchLabelPosition } from './po-switch-label-position.enum';
import { PoHelperComponent, PoHelperOptions } from '../../po-helper';
/**
* @docsExtends PoFieldModel
*
* @description
*
* O componente `po-switch` é um [checkbox](/documentation/po-checkbox-group) mais intuitivo, pois faz analogia a um interruptor.
* Deve ser usado quando deseja-se transmitir a ideia de ligar / desligar uma funcionalidade específica.
*
* Pode-se ligar ou desligar o switch utilizando a tecla de espaço ou o clique do mouse.
*
* O texto exibido pode ser alterado de acordo com o valor setado aumentando as possibilidades de uso do componente,
* portanto, recomenda-se informar textos que contextualizem seu uso para que facilite a compreensão do usuário.
*
* > O componente não altera o valor incial informado no *model*, portanto indica-se inicializa-lo caso ter necessidade.
*
* #### Boas práticas
*
* - Evite `labels` extensos que quebram o layout do `po-switch`, use `labels` diretos, curtos e intuitivos.
*
* #### Acessibilidade tratada no componente
*
* Algumas diretrizes de acessibilidade já são tratadas no componente, internamente, e não podem ser alteradas pelo proprietário do conteúdo. São elas:
*
* - Quando em foco, o switch é ativado usando a tecla de Espaço. [W3C WAI-ARIA 3.5 Switch - Keyboard Interaction](https://www.w3.org/WAI/ARIA/apg/patterns/switch/#keyboard-interaction-19)
* - A área do foco precisar ter uma espessura de pelo menos 2 pixels CSS e o foco não pode ficar escondido por outros elementos da tela. [WCAG 2.4.12: Focus Appearance](https://www.w3.org/WAI/WCAG22/Understanding/focus-appearance-enhanced)
*
* #### Tokens customizáveis
*
* É possível alterar o estilo do componente usando os seguintes tokens (CSS):
*
* > Para maiores informações, acesse o guia [Personalizando o Tema Padrão com Tokens CSS](https://po-ui.io/guides/theme-customization).
*
* | Propriedade | Descrição | Valor Padrão |
* |----------------------------------------|-------------------------------------------------------|-------------------------------------------------|
* | **Unchecked** | | |
* | `--color-unchecked` | Cor principal no estado desmarcado | `var(--color-neutral-light-00)` |
* | `--border-color` | Cor da borda | `var(--color-neutral-dark-70)` |
* | `--track-unchecked` | Cor principal da faixa no estado desmarcado | `var(--color-neutral-light-20)` |
* | **Checked** | | |
* | `--color-checked` | Cor principal no estado selecionado | `var(--color-action-default)` |
* | `--track-checked` | Cor da faixa no estado selecionado | `var(--color-brand-01-light)` |
* | **Hover** | | |
* | `--color-unchecked-hover` | Cor principal no estado hover desmarcado | `var(--color-action-pressed)` |
* | `--color-checked-hover` | Cor principal no estado hover marcado | `var(--color-action-pressed)` |
* | **Focused** | | |
* | `--outline-color-focused` | Cor do outline do estado de focus | `var(--color-action-focus)` |
* | **Disabled** | | |
* | `--color-unchecked-disabled` | Cor principal do disabled no estado desmarcado | `var(--color-neutral-light-20)` |
* | `--color-checked-disabled` | Cor principal do disabled no estado marcado | `var(--color-action-disabled)` |
*
*
* @example
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*/
export declare class PoSwitchComponent extends PoFieldModel implements Validator, AfterViewInit, OnDestroy, OnChanges {
private readonly changeDetector;
private readonly injector;
switchContainer: ElementRef;
helperEl?: PoHelperComponent;
id: string;
value: boolean;
private _labelOff;
private _labelOn;
private _labelPosition;
private _loading;
private _formatModel;
private _size?;
private _initialSize?;
private statusChangesSubscription;
/**
* @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;
/**
* @optional
*
* @description
*
* Indica se o `model` receberá o valor formatado pelas propriedades `p-label-on` e `p-label-off` ou
* apenas o valor puro (sem formatação).
*
* > Por padrão será atribuído `false`.
* @default `false`
*/
set formatModel(format: boolean);
get formatModel(): boolean;
/**
* @optional
*
* @description
*
* Indica se o status do `model` será escondido visualmente ao lado do switch.
*
* > Por padrão será atribuído `false`.
* @default `false`
*/
hideLabelStatus: boolean;
/**
* @optional
*
* @description
*
* Posição de exibição do rótulo que fica ao lado do switch.
*
* > Por padrão exibe à direita.
*/
set labelPosition(position: PoSwitchLabelPosition);
get labelPosition(): PoSwitchLabelPosition;
/**
* Texto exibido quando o valor do componente for `false`.
*
* @default `false`
*/
set labelOff(label: string);
get labelOff(): string;
/**
* Texto exibido quando o valor do componente for `true`.
*
* @default `true`
*/
set labelOn(label: string);
get labelOn(): string;
/**
* @optional
*
* @description
* Exibe um ícone de carregamento substituindo o switch para sinalizar que uma operação está em andamento.
*
* @default `false`
*/
set loading(value: boolean);
get loading(): boolean;
get isDisabled(): boolean;
/**
* @optional
*
* @description
*
* Exibe a mensagem de erro configurada quando o campo estiver desligado(off/false).
*
*
*/
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 qual valor será considerado como inválido para exibir a mensagem da propriedade `p-field-error-message`.
*
* > Caso essa propriedade seja definida como `true`, a mensagem de erro será exibida quando o campo estiver ligado(on/true).
*
* @default `false`
*/
invalidValue: boolean;
/**
* @optional
*
* @description
*
* Define o tamanho do componente:
* - `small`: altura de 16px (disponível apenas para acessibilidade AA).
* - `medium`: altura de 24px.
*
* > 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;
/**
* @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;
private readonly el;
private readonly injectOptions;
private control;
ngOnChanges(changes: SimpleChanges): void;
ngOnDestroy(): void;
/**
* Função que atribui foco ao componente.
*
* Para utilizá-la é necessário ter a instância do componente no DOM, podendo ser utilizado o ViewChild da seguinte forma:
*
* ```
* import { PoSwitchComponent } from '@po-ui/ng-components';
*
* ...
*
* @ViewChild(PoSwitchComponent, { static: true }) switch: PoSwitchComponent;
*
* focusSwitch() {
* this.switch.focus();
* }
* ```
*/
focus(): void;
onBlur(): void;
getLabelPosition(): "left" | "right";
onKeyDown(event: any): void;
changeValue(value: any): void;
eventClick(): void;
onWriteValue(value: any): void;
validate(control: AbstractControl): ValidationErrors | null;
ngAfterViewInit(): void;
protected onThemeChange(): void;
private setControl;
mapSizeToIcon(size: string): string;
getErrorPattern(): string;
hasInvalidClass(): boolean;
setHelper(label?: string, additionalHelpTooltip?: string): {
hideAdditionalHelp: boolean;
helperSettings?: any;
};
/**
* Método que exibe `p-helper` ou executa a ação definida em `p-helper{eventOnClick}` ou em `p-additionalHelp`.
* Para isso, será necessário configurar uma tecla de atalho utilizando o evento `p-keydown`.
*
* > Exibe ou oculta o conteúdo do componente `po-helper` quando o componente estiver com foco.
*
* ```
* //Exemplo com p-label e p-helper
*
* ```
* ```typescript
* onKeyDown(event: KeyboardEvent, inp: PoSwitchComponent): void {
* if (event.code === 'F9') {
* inp.showAdditionalHelp();
* }
* }
* ```
*/
showAdditionalHelp(): boolean;
private applySizeBasedOnA11y;
}