import { ElementRef, EventEmitter, OnChanges, Renderer2, SimpleChanges } from '@angular/core';
import { AbstractControl } from '@angular/forms';
import { PoFieldValidateModel } from '../po-field-validate.model';
import { PoSelectOptionGroup } from './po-select-option-group.interface';
import { PoSelectOption } from './po-select-option.interface';
import { PoHelperComponent, PoHelperOptions } from '../../po-helper';
/**
 * @docsExtends PoFieldValidateModel
 *
 * @example
 *
 * <example name="po-select-basic" title="PO Select Basic">
 *   <file name="sample-po-select-basic/sample-po-select-basic.component.html"> </file>
 *   <file name="sample-po-select-basic/sample-po-select-basic.component.ts"> </file>
 * </example>
 *
 * <example name="po-select-labs" title="PO Select Labs">
 *   <file name="sample-po-select-labs/sample-po-select-labs.component.html"> </file>
 *   <file name="sample-po-select-labs/sample-po-select-labs.component.ts"> </file>
 * </example>
 *
 * <example name="po-select-customer-registration" title="PO Select - Customer registration">
 *   <file name="sample-po-select-customer-registration/sample-po-select-customer-registration.component.html"> </file>
 *   <file name="sample-po-select-customer-registration/sample-po-select-customer-registration.component.ts"> </file>
 *   <file name="sample-po-select-customer-registration/sample-po-select-customer-registration.component.css"> </file>
 *   <file name="sample-po-select-customer-registration/sample-po-select-customer-registration.service.ts"> </file>
 * </example>
 *
 * <example name="po-select-companies" title="PO Select Companies">
 *   <file name="sample-po-select-companies/sample-po-select-companies.component.html"> </file>
 *   <file name="sample-po-select-companies/sample-po-select-companies.component.ts"> </file>
 * </example>
 *
 * @description
 *
 * O componente po-select exibe uma lista de valores e permite que o usuário selecione um desses valores.
 * Os valores listados podem ser fixos ou dinâmicos de acordo com a necessidade do desenvolvedor, dando mais flexibilidade ao componente.
 * O po-select não permite que o usuário informe um valor diferente dos valores listados, isso garante a consistência da informação.
 * O po-select não permite que sejam passados valores duplicados, undefined e null para as opções, excluindo-os da lista.
 *
 * > Ao passar um valor para o _model_ que não está na lista de opções, o mesmo será definido como `undefined`.
 *
 * Também existe a possibilidade de utilizar um _template_ para a exibição dos itens da lista,
 * veja mais em **[p-combo-option-template](/documentation/po-combo-option-template)**.
 *
 * > Obs: o template **[p-select-option-template](/documentation/po-select-option-template)** será depreciado na versão 14.x.x.
 *
 * #### 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                                    |
 * |----------------------------------------|-------------------------------------------------------|-------------------------------------------------|
 * | **Default Values**                     |                                                       |                                                 |
 * | `--font-family`                        | Família tipográfica usada                             | `var(--font-family-theme)`                      |
 * | `--font-size`                          | Tamanho da fonte                                      | `var(--font-size-default)`                      |
 * | `--text-color-empty`                   | Cor do placeholder                                    | `var(--color-neutral-light-30)`                 |
 * | `--color`                              | Cor da borda                                          | `var(--color-neutral-dark-70)`                  |
 * | `--background`                         | Cor de background                                     | `var(--color-neutral-light-05)`                 |
 * | `--text-color`                         | Cor do texto                                          | `var(--color-neutral-dark-90)`                  |
 * | `--padding-horizontal`                 | Preenchimento horizontal                              | `0.5em`                                         |
 * | `--padding-vertical`                   | Preenchimento vertical                                | `0.7em`                                         |
 * | `--field-container-title-justify`      | Alinhamento horizontal do título (`justify-content`)  | `space-between`                                 |
 * | `--field-container-title-flex`         | Flex do título (`flex`)                               | `1 auto`                                        |
 * | **Hover**                              |                                                       |                                                 |
 * | `--color-hover`                        | Cor principal no estado hover                         | `var(--color-brand-01-dark)`                    |
 * | `--background-hover`                   | Cor de background no estado hover                     | `var(--color-brand-01-lighter)`                 |
 * | **Focused**                            |                                                       |                                                 |
 * | `--outline-color-focused`              | Cor do outline do estado de focus                     | `var(--color-action-focus)`                     |
 * | `--color-focused`                      | Cor da borda no estado de focus                       | `var(--color-action-default)`                   |
 * | **Disabled**                           |                                                       |                                                 |
 * | `--color-disabled`                     | Cor principal no estado disabled                      | `var(--color-neutral-light-30)`                 |
 * | `--background-color-disabled`&nbsp;    | Cor de background no estado disabled                  | `var(--color-neutral-light-20)`                 |
 *
 */
export declare class PoSelectComponent extends PoFieldValidateModel<any> implements OnChanges {
    private readonly el;
    renderer: Renderer2;
    selectElement: ElementRef;
    helperEl?: PoHelperComponent;
    /**
     * @optional
     *
     * @description
     *
     * Evento disparado ao sair do campo.
     */
    blur: EventEmitter<any>;
    /**
     * @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:
     *
     * ```
     * <po-select ... [ngModel]="selectModel" (ngModelChange)="selectModel = $event"> </po-select>
     * ```
     */
    ngModelChange: EventEmitter<any>;
    /**
     * @optional
     *
     * @description
     *
     * Indica que o campo será somente para leitura.
     *
     * @default `false`
     */
    readonly: 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<boolean, unknown>;
    /** Mensagem que aparecerá enquanto nenhuma opção estiver selecionada. */
    placeholder?: string;
    displayValue: any;
    id: string;
    modelValue: any;
    selectedValue: any;
    optionsDefault: any[];
    listGroupOptions: any[];
    optionWithoutGroup: any[];
    isSafari: boolean;
    protected onModelTouched: any;
    private _fieldLabel?;
    private _fieldValue?;
    private _loading;
    private _options;
    private _size?;
    private _initialSize?;
    /**
     * Nesta propriedade deve ser definido uma coleção de objetos que implementam a interface `PoSelectOption`,
     * ou uma coleção de objetos dentro de grupos diferentes, que seriam da interface `PoSelectOptionGroup`.
     *
     * Caso esta lista estiver vazia, o model será `undefined`.
     *
     * > Essa propriedade é imutável, ou seja, sempre que quiser atualizar a lista de opções disponíveis
     * atualize a referência do objeto:
     *
     * ```
     * // atualiza a referência do objeto garantindo a atualização do template
     * this.options = [...this.options, { value: 'x', label: 'Nova opção' }];
     *
     * // evite, pois não atualiza a referência do objeto podendo gerar atrasos na atualização do template
     * this.options.push({ value: 'x', label: 'Nova opção' });
     * ```
     *
     * > Para coleção de objetos dentro de grupos distintos será exibido a label e opções somente se a propriedade `options` possua valores.
     *  Sendo assim, a estrutura seguiria dessa forma:
     *
     * ```
     * this.options = [{
     *  label: 'Opções',
     *  options: [
     *    { value: 1, label: 'opção 1' },
     *    { value: 2, label: 'opção 2' }
     *  ],
     * }];
     * ```
     *
     * É possível a utilização de opções agrupadas e desagrupadas em conjunto, porém será feita a ordenação de exibir as opções
     * desagrupadas acima.
     *
     */
    set options(options: Array<PoSelectOption | PoSelectOptionGroup | any>);
    get options(): Array<PoSelectOption | PoSelectOptionGroup | any>;
    /**
     * @optional
     *
     * @description
     * Deve ser informado o nome da propriedade do objeto que será utilizado para a conversão dos itens apresentados na lista do componente
     * (`p-options`), esta propriedade será responsável pelo texto de apresentação de cada item da lista.
     *
     * @default `label`
     */
    set fieldLabel(value: string);
    get fieldLabel(): string;
    /**
     * @optional
     *
     * @description
     * Deve ser informado o nome da propriedade do objeto que será utilizado para a conversão dos itens apresentados na lista do componente
     * (`p-options`), esta propriedade será responsável pelo valor de cada item da lista.
     *
     * @default `value`
     */
    set fieldValue(value: string);
    /**
     * @docsPrivate
     *
     * Determinar se o valor do compo deve retorna objeto do tipo {value: any, label: any}
     */
    controlValueWithLabel?: boolean;
    get fieldValue(): string;
    /**
     * @optional
     *
     * @description
     * Exibe um ícone de carregamento no lado direito do campo para sinalizar que uma operação está em andamento.
     *
     * @default `false`
     */
    set loading(value: boolean);
    get loading(): boolean;
    get isDisabled(): boolean;
    /**
     * @optional
     *
     * @description
     *
     * Define o tamanho do componente:
     * - `small`: altura do input como 32px (disponível apenas para acessibilidade AA).
     * - `medium`: altura do input como 44px.
     *
     * > 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<string | PoHelperOptions>;
    /**
     * @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<boolean>;
    constructor();
    ngOnChanges(changes: SimpleChanges): void;
    protected onThemeChange(): 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 { PoSelectComponent } from '@po-ui/ng-components';
     *
     * ...
     *
     * @ViewChild(PoSelectComponent, { static: true }) select: PoSelectComponent;
     *
     * focusSelect() {
     *   this.select.focus();
     * }
     * ```
     */
    focus(): void;
    getErrorPattern(): string;
    hasInvalidClass(): any;
    mapSizeToIcon(size: string): string;
    onBlur(event: any): void;
    onSelectChange(value: any): void;
    onUpdateOptions(): void;
    updateValues(option: any): void;
    onWriteValue(value: any): void;
    extraValidation(c: AbstractControl): {
        [key: string]: any;
    };
    isItemGroup(item: PoSelectOption | PoSelectOptionGroup | any): boolean;
    onKeyDown(event: KeyboardEvent): void;
    registerOnTouched(fn: any): void;
    /**
     * 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
     * <po-select
     *  #select
     *  ...
     *  p-label="Label do select"
     *  [p-helper]="helperOptions"
     *  (p-keydown)="onKeyDown($event, select)"
     * ></po-select>
     * ```
     * ```typescript
     * onKeyDown(event: KeyboardEvent, inp: PoSelectComponent): void {
     *  if (event.code === 'F9') {
     *    inp.showAdditionalHelp();
     *  }
     * }
     * ```
     */
    showAdditionalHelp(): boolean;
    setHelper(label?: string, additionalHelpTooltip?: string): {
        hideAdditionalHelp: boolean;
        helperSettings?: any;
    };
    private isEqual;
    private findOptionValue;
    private getValueUpdate;
    private getValueWrite;
    private transformInArray;
    private separateOptions;
    private validateOptions;
    private applySizeBasedOnA11y;
}