import * as i0 from '@angular/core'; import { EventEmitter, OnDestroy, OnInit, ElementRef, OnChanges, SimpleChanges, AfterViewInit, ViewContainerRef, TemplateRef, AfterContentInit, QueryList, AfterViewChecked, ChangeDetectorRef } from '@angular/core'; import * as i3 from '@angular/forms'; import { NgForm, AbstractControl } from '@angular/forms'; import * as i5 from '@po-ui/ng-components'; import { PoLanguageService, PoModalComponent, PoModalAction, PoRadioGroupOption, PoLanguage, PoSelectOption, PoDynamicViewField, PoBreadcrumb, PoPageAction, PoDynamicFormField, PoDynamicFormComponent, PoGridComponent, PoGridRowActions, PoComboOption, PoPageListComponent, PoDisclaimerGroup, PoPageFilter, PoTableColumnSort, PoTableAction, PoStepperOrientation, PoLookupFilter, PoStepperItem, PoCheckboxGroupOption, PoInfoOrientation, PoPageDefault, PoTableColumnLabel } from '@po-ui/ng-components'; import * as i2 from '@angular/common'; import * as i4 from '@angular/router'; import { Router } from '@angular/router'; import { Observable, Subscription } from 'rxjs'; import { HttpHeaders, HttpClient, HttpParams } from '@angular/common/http'; /** * @docsPrivate * * @description * * Enum para definição do tipo de conteúdo exibido na modal. */ declare enum PoModalPasswordRecoveryModalContent { /** Exibição de modal contendo campo para preenchimento de email ou número de telefone */ Email = "email", /** Exibição de modal contendo campo para inserção de código enviado por SMS */ SMSCode = "smsCode", /** Exibição de modal de confirmação de envio */ Confirmation = "confirmation" } /** * @usedBy PoModalPasswordRecoveryComponent * * @description * * Interface com a definição do objeto gerado pelo formulário do componente `po-modal-password-recovery`. */ interface PoModalPasswordRecovery { /** Valor contendo o código enviado por SMS e digitado pelo usuário. */ code?: string; /** Valor contendo o email enviado pelo usuário. */ email?: string; /** Código de validação da solicitação do SMS para ser enviado junto com o código de verificação do SMS */ hash?: string; /** Número de tentativas de reenvio. */ retry?: number; /** Valor contendo o número de telefone enviado pelo usuário. */ sms?: string; /** Token de alteração de senha */ token?: string; /** URL para o formulário de alteração de senha */ urlChangePassword?: string; /** URL usada para validação do código enviado por SMS */ urlValidationCode?: string; } /** * @usedBy PoModalPasswordRecoveryComponent * * @description * * *Enum* para especificação do tipo de recuperação de senha. */ declare enum PoModalPasswordRecoveryType { /** Possibilita ao usuário optar por envio via email ou SMS */ All = "all", /** Definição para recuperação apenas por email */ Email = "email", /** Definição para recuperação apenas por SMS */ SMS = "sms" } /** * @description * * O componente `po-modal-password-recovery` é utilizado como template para solicitação de troca de senha. * * É composto por uma modal que possui três telas, cada uma com as seguintes características: * * - A primeira possui campos para preenchimento de email ou número de telefone; * - Tela com campo para preenchimento de código SMS enviado para o número de telefone enviado; * - A terceira se trata de uma confirmação de envio de link para a caixa de email do usuário. * * * A propriedade `p-url-recovery` automatiza a rotina do componente e simplifica o processo * para recuperação de senha, bastando definir uma url para requisição dos recursos. * Seu detalhamento para uso pode ser visto logo abaixo em *propriedades*. * Caso julgue necessário, pode-se também definir manualmente a rotina do componente. * * * Para a modal de digitação de código SMS, é possível definir uma mensagem de erro * customizada com a propriedade `p-code-error` e há um link para * reenvio de código por SMS. Ao reenviar, o evento `p-code-submit` envia um objeto com o telefone do usuário e a quantidade * de vezes em que o usuário fez a solicitação de reenvio. * * > É indicada a utilização da tela de digitação para envio de código SMS apenas * se a opção por envio SMS for disponibilizada para o usuário. * * * A modal de confirmação contém uma ação de reenvio e o evento `p-submit` * é quem passa o objeto contendo o email em conjunto com a quantidade de tentativas de reenvio. * * > A tela de confirmação é indicada para quando o usuário solicitar a troca através do email. * * > Os textos das modals são pré-definidos, imutáveis e são traduzidos de acordo com o idioma do *browser* (pt, en e es) * * Para que as imagens sejam exibidas corretamente, é necessário incluir o caminho delas ao projeto. Para isso, edite * o *assets* no arquivo **angular.json** da aplicação na seguinte ordem: * ``` * "assets": [ * "src/assets", * "src/favicon.ico", * { * "glob": "**\/*", * "input": "node_modules/@po-ui/style/images", * "output": "assets/images" * } * ] * ``` */ declare abstract class PoModalPasswordRecoveryBaseComponent { /** * @optional * * @description * * Definição de mensagem de erro customizada para quando o usuário passar um código SMS inválido ou errado. */ codeError: string; /** * @optional * * @description * * Endpoint usado pelo template para requisição do recurso. Quando preenchido, * o métodos `p-submit` e `p-submit-code` serão ignorados e o componente adquirirá automatização * para o processo de solicitação de troca de senha. * * ### Processos * Ao digitar um valor válido no campo de email/telefone e pressionar **enviar**, * o componente fará uma requisição `POST` na url especificada nesta propriedade passando o objeto contendo o valor definido pelo usuário. * * ``` * body { * email: email, * retry?: retry * } * ``` * * * #### Recuperação por email * Para a recuperação de senha por **email**, o código de resposta HTTP de status esperado é `204`. * * Em caso de **sucesso**, será exibida a modal de confirmação de e-mail para o usuário. * * * > A ação **Reenviar** na tela de confirmação efetua uma nova requisição * passando-se o objeto com incremento para o valor da propriedade **retry**. * * *Processo finalizado.* * * * #### Recuperação por SMS * Se a opção de recuperação for por **SMS**, o código de status de sucesso deve ser `200`. * Em caso de **sucesso**, abre-se a modal de digitação de código SMS e a resposta * desta requisição deve retornar uma definição de dados abaixo: * * ``` * 200: * { * hash: hash, * urlValidationCode?: url * } * ``` * * * - O **hash** será o código de validação da solicitação do SMS para ser enviado juntamente com o código de verificação do SMS; * - **urlValidationCode** é a url usada para validação do código enviado por SMS. * * * > Caso não seja passado urlValidationCode, o endpoint usado para validação do código será `/validation`. * * * #### Validação do código SMS * Ao digitar um valor válido no campo de código SMS e pressionar **continuar**, o componente fará uma requisição `POST` contendo: * * ``` * POST //validation OU / * Body { * hash: hash, * code: code * } * ``` * * * O código de resposta HTTP de status esperado é `200`. * * Em caso de **erro** na validação do código SMS, a modal se mantém com o campo para digitação * de código SMS * * * > Pode-se atribuir a mensagem de erro (message) para o atributo `p-code-error` conforme retorno abaixo: * * ``` * 400 * { * error { * message: 'Error Message' * } * } * ``` * * * Em caso de **sucesso**, espera-se a resposta desta requisição retornando a seguinte definição: * * ``` * 200: * { * token: token, * urlChangePassword?: url * } * ``` * * * - **token**: Token de alteração de senha; * - **urlChangePassword**: url para o formulário de alteração de senha. * * * O componente está configurado para redirecionar para a url estabelecida em `urlChangePassword`. * * > Caso não seja passado valor para urlChangePassword, * a url usada para validação será a `/changePassword?token=`. * * *Processo finalizado.* */ urlRecovery?: string; /** * @optional * * @description * * Ação contendo como parâmetro o código enviado por SMS e digitado pelo usuário. * * > Esta propriedade será ignorada se for definido valor para a propriedade `p-url-recovery`. */ codeSubmit: EventEmitter; /** * @optional * * @description * * Ação contendo o email como parâmetro e que é executada quando o usuário clica sobres os botões de 'enviar' e 'reenviar' e-mail. * * > Esta propriedade será ignorada se for definido valor para a propriedade `p-url-recovery`. */ submit: EventEmitter; email: string; maxLength: number; minLength: number; modalPasswordRecoveryTypeAll: boolean; phone: string; smsCode: string; smsCodeErrorMessage: string; literals: { cancelButton: string; closeButton: string; continueButton: string; email: string; emailErrorMessagePhrase: string; emailSentConfirmationPhrase: string; emailSentTitle: string; forgotPasswordTitle: string; insertCode: string; insertEmail: string; insertPhone: string; phoneErrorMessagePhrase: string; prepositionIn: string; prepositionOr: string; recoveryPasswordPhrase: string; resendEmailButton: string; resendSmsCodePhrase: string; sendAgain: string; sendAgainPhrase: string; sendButton: string; sms: string; smsCode: string; smsCodeErrorMessagePhrase: string; sentSmsCodePhrase: string; supportContact: string; telephone: string; typeCodeTitle: string; }; private _componentsSize?; private _initialComponentsSize?; private _contactEmail; private _phoneMask; private _type; /** * @optional * * @description * * Define o tamanho dos componentes de formulário no modal: * - `small`: aplica a medida small de cada componente (disponível apenas para acessibilidade AA). * - `medium`: aplica a medida medium de cada componente. * * > 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 componentsSize(value: string); get componentsSize(): string; /** * @optional * * @description * * Definição do e-mail que é exibido na mensagem para contato de suporte. */ set contactEmail(value: string); get contactEmail(): string; /** * @optional * * @description * * Definição da mascara do campo de telefone. * * @default `(99) 99999-9999` */ set phoneMask(value: string); get phoneMask(): string; /** * @optional * * @description * * Define o tipo de recuperação de senha que será exibido. * * @default `PoModalPasswordRecoveryType.Email` * */ set type(value: PoModalPasswordRecoveryType); get type(): PoModalPasswordRecoveryType; constructor(languageService: PoLanguageService); protected onThemeChange(): void; private applySizeBasedOnA11y; private concatenateSMSErrorMessage; /** * Acão para conclusão de processo e fechamento da modal. Indica-se sua utilização * para após o envio e validação do código SMS enviado pelo usuário. * * > Nas modals em que há a ação de 'cancelar' dispensa-se o uso desta ação pois o componente já trata o fechamento da modal. */ abstract completed(): void; /** * Abre a modal de preenchimento de email ou número de telefone para solicitação de troca de senha. */ abstract open(): void; /** * Abre a modal de confirmação de envio de email. */ abstract openConfirmation(): void; /** * Abre a modal de preenchimento do código SMS enviado ao usuário. */ abstract openSmsCode(): void; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; } /** * @docsExtends PoModalPasswordRecoveryBaseComponent * * @example * * * * * * * * * * * * * * * */ declare class PoModalPasswordRecoveryComponent extends PoModalPasswordRecoveryBaseComponent implements OnDestroy { private readonly router; private readonly poI18nPipe; private readonly poModalPasswordRecoveryService; emailForm: NgForm; recoveryModalElement: PoModalComponent; smsCodeForm: NgForm; chosenTypeFormOption: string; codeMask: string; control: AbstractControl; emailModal: boolean; emailModalPhrases: { firstPhrase: string; secondPhrase: string; }; endpoint: string; invalidCode: boolean; invalidEmail: boolean; modalTitle: string; modalType: PoModalPasswordRecoveryModalContent; showCustomCodeError: boolean; smsCodeErrorMessagePhrase: string; submittedCodeValue: PoModalPasswordRecovery; submittedContactValue: PoModalPasswordRecovery; primaryAction: PoModalAction; secondaryAction: PoModalAction; typeFormOptions: Array; private passwordRecoverySubscription; private smsBodyResponse; private smsCodeSubscription; constructor(); ngOnDestroy(): void; completed(): void; formModelChangesCheck(form: NgForm): void; getInputType(type: any): void; open(): void; openConfirmation(): void; openSmsCode(): void; resendSmsCode(): void; private assignSmsResponse; private cancelAction; private checkFormType; private formReset; private getEmitValue; private incrementRetryAttempts; private openExternalLink; private openInternalLink; private pipeModalPhrases; private redirectToChangePassword; private resetFormFields; private setActions; private setEmailModalPhrasesAndActions; private setRequestEndpoint; private setPipeArguments; private submitAction; private submitActionRequest; private submitSmsCodeAction; private submitSmsCodeRequest; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } /** * @docsPrivate * * @description * * Componente utilizado para exibição da mensagem customizada de erro em um campo de formulário. */ declare class PoModalPasswordRecoveryErrorMessageComponent { /** Texto exibido na mensagem de erro. */ text: string; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } /** * @description * * Módulo do template do po-modal-password-recovery. */ declare class PoModalPasswordRecoveryModule { static ɵfac: i0.ɵɵFactoryDeclaration; static ɵmod: i0.ɵɵNgModuleDeclaration; static ɵinj: i0.ɵɵInjectorDeclaration; } declare class PoPageBackgroundComponent implements OnInit { poLanguageService: PoLanguageService; /** Insere uma imagem de destaque ao lado direito do container. */ background?: string; /** Idioma inicial selecionado no combo */ initialSelectLanguage?: string; /** Designa se o logotipo deve desaparecer em resoluções menores. */ hideLogo?: boolean; /** Texto de destaque sobreposto à imagem de destaque. Essa opção é utilizada em conjunto com o atributo `p-background`. */ highlightInfo?: string; /** * @optional * * @description * * Evento disparado ao selecionar alguma opção no seletor de idiomas. * Para este evento será passado como parâmetro o valor de idioma selecionado. */ selectedLanguage: EventEmitter; selectedLanguageOption: string; private _componentsSize?; private _initialComponentsSize?; private _showSelectLanguage?; private _languagesList; private _selectLanguageOptions; /** * @optional * * @description * * Define o tamanho dos componentes de formulário no template: * - `small`: aplica a medida small de cada componente (disponível apenas para acessibilidade AA). * - `medium`: aplica a medida medium de cada componente. * * > 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 componentsSize(value: string); get componentsSize(): string; /** Lista de idiomas para o combo box */ set languagesList(value: Array); get languagesList(): Array; /** Caminho para a logomarca localizada na parte superior. */ logo?: string; /** Texto alternativo para a logomarca. */ logoAlt?: string; /** * @optional * * @description * * Caminho para a logomarca localizada no rodapé. */ secondaryLogo: string; /** Define se o seletor de idiomas deve ser exibido. */ set showSelectLanguage(showSelectLanguage: boolean); get showSelectLanguage(): boolean; ngOnInit(): void; onChangeLanguage(): void; get selectLanguageOptions(): Array; protected onThemeChange(): void; private setLanguageOptions; private applySizeBasedOnA11y; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } /** * @description * * Módulo do template do po-page-background. */ declare class PoPageBackgroundModule { static ɵfac: i0.ɵɵFactoryDeclaration; static ɵmod: i0.ɵɵNgModuleDeclaration; static ɵinj: i0.ɵɵInjectorDeclaration; } /** * @usedBy PoPageBlockedUserComponent * * @description * * *Enum* para os tipos de motivo de bloqueio de usuário. As informações modificam conforme o motivo selecionado pelo desenvolvedor. */ declare enum PoPageBlockedUserReason { /** Sem definição; a tela exibirá conteúdo de bloqueio genérico. */ None = "none", /** Definição para tentativas de acesso esgotadas. */ ExceededAttempts = "exceededAttempts", /** Definição para senha expirada. */ ExpiredPassword = "expiredPassword" } /** * @usedBy PoPageBlockedUserComponent * * @description * * Interface que define os valores de customização da mensagem de bloqueio do componente `po-page-blocked-user`. */ interface PoPageBlockedUserReasonParams { /** Quantidade máxima de tentativas. */ attempts?: number; /** Quantidade de dias para expiração de senha. */ days?: number; /** Horas que o sistema permanecerá bloqueado. */ hours?: number; } /** * @description * * O componente `po-page-blocked-user` é utilizado como template para tela de bloqueio de usuário. * É possível definir entre três tipos de telas para alertar o usuário sobre um eventual bloqueio de login. * * Cada modelo de bloqueio possui uma imagem e texto adequados à situação. * Os textos das telas são pré-definidos e imutáveis, porém, * é possível estipular parâmetros como dias, horas e tentativas de acesso esgotadas. * * Por fim, há propriedades para adição de telefone e/ou email para contato e também a definição para a url de retorno. * * Para que as imagens sejam exibidas corretamente, é necessário incluir o caminho delas ao projeto. Para isso, edite * o *assets* no arquivo **angular.json** da aplicação na seguinte ordem: * ``` * "assets": [ * "src/assets", * "src/favicon.ico", * { * "glob": "**\/*", * "input": "node_modules/@po-ui/style/images", * "output": "assets/images" * } * ] * ``` * * _______________ * * #### Praticidade * O `po-page-blocked-user`, assim como suas propriedades, pode também ser transmitido diretamente pelas configuraçãos de rota e, * desta maneira, dispensa-se qualquer menção e/ou importação no restante da aplicação. O exemplo abaixo exemplifica * a forma dinâmica com a qual o template pode ser gerado se navegasse para uma rota denominada como `/access-denied`: * * * ``` * import { PoPageBlockedUserComponent, PoPageBlockedUserReason } from '@po-ui/ng-templates'; * * ... * const routes: Routes = [ * { * path: 'access-denied', component: PoPageBlockedUserComponent, data: { * contactEmail: 'dev.po@po-ui.com', * contactPhone: '0800 1234 000', * reason: PoPageBlockedUserReason.ExpiredPassword, * urlBack: '/home' * } * } * ... * ]; * * @NgModule({ * imports: [RouterModule.forRoot(routes)], * exports: [RouterModule] * }) * export class AppRoutingModule { } * ``` * * > É essencial que siga a nomenclatura dos atributos exemplificados acima para sua efetiva funcionalidade. * */ declare class PoPageBlockedUserBaseComponent { /** * @optional * * @description * * Valor para o email de contato que deve ser exibido. A ação está de acordo com o protocolo MAILTO e é possível definir * tanto rotas internas quanto externas. */ contactEmail: string; /** * @optional * * @description * * Valor para o telefone de contato que deve ser exibido. A ação está de acordo com o protocolo TEL. * * > A propriedade não contem tratamento de máscara, fica a critério do desenvolvedor defini-la. */ contactPhone: string; /** Caminho para a logomarca localizada na parte superior, caso não seja definida ou seja inválida assume a logo padrão do PO UI. */ logo?: string; /** * @optional * * @description * * Caminho para a logomarca localizada no rodapé. */ secondaryLogo?: string; private _componentsSize?; private _initialComponentsSize?; private _params; private _reason; private _urlBack; /** * @optional * * @description * * Define o tamanho dos componentes de formulário no template: * - `small`: aplica a medida small de cada componente (disponível apenas para acessibilidade AA). * - `medium`: aplica a medida medium de cada componente. * * > 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 componentsSize(value: string); get componentsSize(): string; protected onThemeChange(): void; /** * @optional * * @description * * Designação de valores usados para a customização da mensagem de bloqueio. * Confira abaixo os valores pré-definidos. * * ``` * const customLiterals: PoPageBlockedUserReasonParams = { * attempts: 5, * days: 90, * hours: 24 * }; * ``` * * > Salientamos a importância e atenção para configuração desses valores conforme definidos no projeto. * * > Veja os parâmetros customizáveis na interface `PoPageBlockedUserReasonParams`. * */ set params(value: PoPageBlockedUserReasonParams); get params(): PoPageBlockedUserReasonParams; /** * @optional * * @description * * Definição de motivo de bloqueio de usuário. As informações modificam conforme o motivo selecionado. * * > Veja os valores válidos no *enum* `PoPageBlockedUserReason`. * * @default `PoPageBlockedUserReason.None` */ set reason(value: PoPageBlockedUserReason); get reason(): PoPageBlockedUserReason; /** * @optional * * @description * * URL para a ação de retorno da página. * * @default `/` */ set urlBack(url: string); get urlBack(): string; private applySizeBasedOnA11y; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; } declare const poPageBlockedUserButtonLiterals: object; /** * @docsExtends PoPageBlockedUserBaseComponent * * @example * * * * * * * * * * * * * * * * * * * * */ declare class PoPageBlockedUserComponent extends PoPageBlockedUserBaseComponent implements OnInit { private readonly activatedRoute; private readonly router; literals: any; constructor(); ngOnInit(): void; navigateTo(url: string): void; private checkingForMetadataProperty; private checkingForRouteMetadata; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } declare class PoPageBlockedUserContactsComponent { private readonly changeDetector; contactGroup: ElementRef; mailItem: ElementRef; phoneItem: ElementRef; overflowItem: boolean; private _email; private _phone; set email(value: string); get email(): string; set phone(value: string); get phone(): string; private checkContactItemWidth; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } declare class PoPageBlockedUserReasonComponent implements OnChanges, OnInit { private readonly changeDetector; params: PoPageBlockedUserReasonParams; reason: PoPageBlockedUserReason; literalParams: any; literals: { title: string; firstPhrase: string; secondPhrase: string; thirdPhrase: string; }; private readonly language; constructor(); ngOnChanges(changes: SimpleChanges): void; ngOnInit(): void; getImageByReasonType(): string; getParams(): void; private getLiterals; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } /** * @description * * Módulo do template do po-page-blocked-user. */ declare class PoPageBlockedUserModule { static ɵfac: i0.ɵɵFactoryDeclaration; static ɵmod: i0.ɵɵNgModuleDeclaration; static ɵinj: i0.ɵɵInjectorDeclaration; } /** * @usedBy PoPageChangePasswordComponent * * @description * * Interface com a definição dos objetos aceitos pela propriedade `p-password-requirements`. */ interface PoPageChangePasswordRequirement { /** Requisito. */ requirement: string; /** * Função que deve retornar um booleano para validar um requisito de senha. * * Também é possível informar diretamente um valor booleano que representa esta validação. */ status: boolean | Function; } /** * @usedBy PoPageChangePasswordComponent * * @description * * Interface para especificação do tipo de recuperação de senha no `po-modal-password-recovery`. */ interface PoPageChangePasswordRecovery { /** Definição do e-mail que é exibido na mensagem para contato de suporte. */ contactMail?: string; /** Definição da máscara do campo de telefone. */ phoneMask?: string; /** * @optional * * @description * * Enum para especificação do tipo de recuperação de senha [PoModalPasswordRecoveryType](/documentation/po-modal-password-recovery). * * > Caso não seja definido valor se assume o padrão `PoModalPasswordRecoveryType.Email`. */ type?: PoModalPasswordRecoveryType; /** * Endpoint usado pelo template **PoModalPasswordRecovery** para requisição do recurso. * * > Saiba mais em [PoModalPasswordRecovery](/documentation/po-modal-password-recovery). */ url: string; } /** * @description * * O componente `po-page-change-password` é utilizado como template para tela de cadastro ou alteração de senha. * * Apresenta dicas e regras para senhas mais seguras e também possibilidade de personalizar o redirecionamento para as telas * 'esqueceu a senha', 'voltar' e 'entrar no sistema'. Os textos das telas são pré-definidos e imutáveis. * * A propriedade `p-url-new-password` automatiza a rotina do template e simplifica o processo de cadastro/alteração de senha, bastando * definir uma url para POST das informações digitadas pelo usuário. A flexibilidade e praticidade podem chegar a um nível em que o * desenvolvimento da aplicação no *client side* é desprovida de qualquer código-fonte relacionado à rotina de cadastro/alteração de senha. * Seu detalhamento para uso pode ser visto logo abaixo em *propriedades*. * Caso julgue necessário, pode-se também definir manualmente a rotina do componente. * * Para que as imagens sejam exibidas corretamente, é necessário incluir o caminho delas ao projeto. Para isso, edite * o *assets* no arquivo **angular.json** da aplicação na seguinte ordem: * ``` * "assets": [ * "src/assets", * "src/favicon.ico", * { * "glob": "**\/*", * "input": "node_modules/@po-ui/style/images", * "output": "assets/images" * } * ] * ``` */ declare abstract class PoPageChangePasswordBaseComponent { /** * @optional * * @description * * Caminho para a logomarca localizada na parte superior. * * > Caso seja indefinida o espaço se mantém preservado porém vazio. */ logo?: string; /** * @optional * * @description * * Caminho para a logomarca localizada no rodapé. */ secondaryLogo?: string; /** * Token para solicitação de troca/recuperação de senha. * * > Esta propriedade será ignorada caso exista um token como parâmetro na URL inicial do template. */ token?: string; /** * @optional * * @description * * URL para a ação de retorno da página. * * > O botão `Voltar` aparece apenas para telas de alteração de senha, ou seja, só aparece se a propriedade `p-hide-current-password` for * falsa. * * @default `/` */ urlBack: string; /** * Endpoint usado pelo template para realizar um POST. Quando preenchido, o método `p-submit` será ignorado e o componente adquirirá * automatização para o processo de cadastro/troca de senha. * * ### Processo * Ao digitar um valor válido nos campos de senha e pressionar **salvar**, * o componente fará uma requisição `POST` na url especificada nesta propriedade passando o objeto contendo os valores definidos pelo * usuário. * * ``` * body { * token?: token, * oldPassword?: oldPassword, * newPassword: newPassword * } * ``` * * O código de resposta HTTP de status esperado é `204`. * * Em caso de **sucesso**, será exibida a modal de confirmação de senha alterada. * * > O token será informado pela propriedade `p-token`do componente ou por um *query parameter* na URL do template. * * *Processo finalizado.* * * _______________ * * #### Praticidade * As informações do serviço de autenticação também podem ser transmitidas diretamente pelas configuraçãos de rota e, desta maneira, * dispensa-se qualquer menção e/ou importação do componente `po-page-change-password` no restante da aplicação. O exemplo abaixo * exemplifica a forma dinâmica com a qual o template de tela de troca de senha pode ser gerado ao navegar para rota `/change-password`, e * também como ele se comunica com o serviço para efetuação do processo de troca de senha do usuário e solicitação de nova senha. * Basta definir nas configurações de rota: * * * ``` * import { PoModalPasswordRecoveryType, PoPageChangePasswordComponent } from '@po-ui/ng-templates'; * * ... * const routes: Routes = [ * { * path: 'change-password', component: PoPageChangePasswordComponent, data: { * serviceApi: 'https://po-ui.io/sample/api/new-password', * recovery: { * url: 'https://po-ui.io/sample/api/users', * type: PoModalPasswordRecoveryType.All, * contactMail: 'dev.po@po-ui.com', * phoneMask: '9-999-999-9999' * } * } * } * ... * ]; * * @NgModule({ * imports: [RouterModule.forRoot(routes)], * exports: [RouterModule] * }) * export class AppRoutingModule { } * ``` * * * O metadado `serviceApi` deve ser a **url** para requisição dos recursos de troca de senha. E `recovery` é a interface * `PoPageChangePasswordRecovery` responsável pelas especificações contidas na modal de recuperação de senha. * * > É essencial que siga a nomenclatura dos atributos exemplificados acima para sua efetiva funcionalidade. * */ urlNewPassword?: string; /** * @optional * * @description * * Função executada ao submeter o form pelo botão salvar. * * Caso definida essa função, a modal de confirmação não aparece, mas pode ser chamada pelo * método `openConfirmation`. Exemplo: * * ``` * @ViewChild(PoPageChangePasswordComponent) changePassword: PoPageChangePasswordComponent; * * onSubmit() { * this.changePassword.openConfirmation(); * } * * ``` * > Esta propriedade será ignorada se for definido valor para a propriedade `p-url-new-password`. */ submit: EventEmitter; confirmPassword: string; currentPassword: string; modalAction: PoModalAction; newPassword: string; recoveryUrlType: string; showRequirements: boolean; protected validatorChange: any; private _componentsSize?; private _initialComponentsSize?; private _hideCurrentPassword; private _recovery; private _requirements; private _urlHome; /** * @optional * * @description * * Define o tamanho dos componentes de formulário no template: * - `small`: aplica a medida small de cada componente (disponível apenas para acessibilidade AA). * - `medium`: aplica a medida medium de cada componente. * * > 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 componentsSize(value: string); get componentsSize(): string; /** * @optional * * @description * * Esconde o campo `Senha atual` para que o template seja para criação de senha. * * @default `false` */ set hideCurrentPassword(value: boolean); get hideCurrentPassword(): boolean; /** * @optional * * @description * * URL para a ação do link `Esqueceu a senha`. * * A propriedade aceita os seguintes tipos: * * - **String**: informe uma url externa ou uma rota válida; * - **Function**: pode-se customizar a ação. Para esta possilidade basta atribuir: * ``` * * [recovery]="this.myFunc.bind(this)"; * * ``` * * - **PoPageChangePasswordRecovery**: cria-se vínculo automático com o template **po-modal-password-recovery**. * O objeto deve conter a **url** para requisição dos recursos e pode-se definir o **tipo** de modal para recuperação de senha, * **email** para contato e **máscara** do campo de telefone. * * > Caso não tenha valor o link `Esqueceu a senha` desaparece. */ set recovery(value: string | Function | PoPageChangePasswordRecovery); get recovery(): string | Function | PoPageChangePasswordRecovery; /** * @optional * * @description * * Lista de regras para criação e alteração de senha. */ set requirements(value: Array); get requirements(): Array; /** * @optional * * @description * * URL para a ação do botão `Entrar no sistema` da modal de confirmação que aparece após salvar a senha ou se chamada pelo método * `openConfirmation`. * * @default `/` */ set urlHome(value: string); get urlHome(): string; /** * @optional * * @description * * Define a propriedade nativa `autocomplete` do campo como `off`. * * > No input de senha(`po-password`) será definido como `new-password`. * * @default `true` */ noAutocompletePassword: boolean; protected onThemeChange(): void; private applySizeBasedOnA11y; abstract navigateTo(url: string): void; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; } /** * @docsExtends PoPageChangePasswordBaseComponent * * @example * * * * * * * * * * * * * * * * * * * * * * * * * */ declare class PoPageChangePasswordComponent extends PoPageChangePasswordBaseComponent implements AfterViewInit, OnDestroy, OnInit { private readonly activatedRoute; private readonly route; private readonly router; private readonly service; private readonly poComponentInjector; modal: PoModalComponent; pageChangePassword: ViewContainerRef; passwordForm: NgForm; literals: { backButton: string; confirmPassword: string; createNewPassword: string; createNewPasswordPhrase: string; currentPassword: string; enterSystemButton: string; forgotPassword: string; newPassword: string; passwordSuccessfullyCreated: string; passwordSuccessfullyUpdated: string; requirements: string; safetyTips: string; safetyTipsPhrase: string; safetyTipsFirst: string; safetyTipsSecond: string; safetyTipsThird: string; saveButton: string; }; modalAction: PoModalAction; private readonly newPasswordSubscription; private componentRef; constructor(); ngAfterViewInit(): void; ngOnDestroy(): void; ngOnInit(): void; navigateTo(url: string): void; onForgotPasswordClick(recovery: any): void; onLoginSubmit(): void; /** * Abre uma modal de confirmação com texto, imagem e botão que redireciona para o link definido na propriedade `p-url-home` */ openConfirmation(): void; validatePassword(): void; validateRequirement(requirement: PoPageChangePasswordRequirement): any; private checkingForMetadataProperty; private checkingForRouteMetadata; private createModalPasswordRecoveryComponent; private emitSubmit; private getLoginForm; private postUrlNewPassword; private setFormErrors; private subscribeToTokenParameter; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } /** * @description * * Módulo do template do po-page-change-password. */ declare class PoPageChangePasswordModule { static ɵfac: i0.ɵɵFactoryDeclaration; static ɵmod: i0.ɵɵNgModuleDeclaration; static ɵinj: i0.ɵɵInjectorDeclaration; } /** * @usedBy PoPageDynamicDetailComponent * * @description * * Definição da estrutura de retorno da url ou método executado através da * propriedade `beforeBack`. */ interface PoPageDynamicDetailBeforeBack { /** * Nova rota para retorno que substituirá a definida anteriormente em `back`. */ newUrl?: string; /** * Define se deve ou não executar a ação de retorno (*back*) */ allowAction?: boolean; } /** * @usedBy PoPageDynamicDetailComponent * * @description * * Definição da estrutura de retorno da url ou método executado através da * propriedade `beforeRemove`. */ interface PoPageDynamicDetailBeforeRemove { /** * Nova rota para navegação que substituirá a definida anteriormente em `remove`. */ newUrl?: string; /** * Define se deve ou não executar a ação de exclusão (*remove*) */ allowAction?: boolean; } /** * @usedBy PoPageDynamicDetailComponent * * @description * * Definição da estrutura de retorno da url ou método executado através da * propriedade `beforeEdit`. */ interface PoPageDynamicDetailBeforeEdit { /** * Nova rota para navegação que substituirá a definida anteriormente em `edit`. */ newUrl?: string; /** * Define se deve ou não executar a ação de edição (*edit*) */ allowAction?: boolean; } /** * @usedBy PoPageDynamicDetailComponent * * @description * * Interface para as ações do componente po-page-dynamic-detail. */ interface PoPageDynamicDetailActions { /** * @description * * Rota de redirecionamento para ação de voltar, caso não seja especificada será usado o comando `history.back()`. * * > Se passada uma função, é responsabilidade do desenvolvedor implementar a navegação ou outro comportamento desejado. * * > Caso queira esconder a ação deve ser passado o valor `false`; * * ``` * actions = { * back: '/' * }; * ``` */ back?: string | boolean | Function; /** * @description * * Ação que é executada antes da ação `back` e que serve para realização de validações prévias. * * Tanto o método como a API devem retornar um objeto com a definição de `PoPageDynamicDetailBeforeBack`. * * > A url será chamada via POST * * Caso o desenvolvedor queira que apareça alguma mensagem nessa ação ele pode criá-la na função chamada pela **beforeBack** * ou definir a mensagem no atributo `_messages` na resposta da API conforme definido * em [Guia de implementação de APIs](https://po-ui.io/guides/api#successMessages) * */ beforeBack?: string | (() => PoPageDynamicDetailBeforeBack); /** * @description * * Rota ou método que será chamado antes de excluir um recurso (remove). * * Tanto o método como a API devem retornar um objeto com a definição de `PoPageDynamicDetailBeforeRemove`. * * > A url será chamada via POST * * Caso o desenvolvedor queira que apareça alguma mensagem nessa ação ele pode criá-la na função chamada pela **beforeRemove** * ou definir a mensagem no atributo `_messages` na resposta da API conforme definido * em [Guia de implementação de APIs](https://po-ui.io/guides/api#successMessages) */ beforeRemove?: string | ((id: any, resource: any) => PoPageDynamicDetailBeforeRemove); /** * @description * * Rota ou método que será chamado antes de editar um recurso (edit). * * Tanto o método como a API devem retornar um objeto com a definição de `PoPageDynamicDetailBeforeEdit`. * * > A url será chamada via POST * * Caso o desenvolvedor queira que apareça alguma mensagem nessa ação ele pode criá-la na função chamada pela **beforeEdit** * ou definir a mensagem no atributo `_messages` na resposta da API conforme definido * em [Guia de implementação de APIs](https://po-ui.io/guides/api#successMessages) */ beforeEdit?: string | ((id: any, resource: any) => PoPageDynamicDetailBeforeEdit); /** * @description * * Rota para edição do recurso, caso seja preenchida irá habilitar a ação de edição na tabela. * * > A rota deve conter um parâmetro chamando id. * * ``` * actions = { * edit: 'edit/:id' * }; * ``` * * > Se passada uma função, é responsabilidade do desenvolvedor implementar a navegação, edição ou outro comportamento desejado. */ edit?: string | ((id: any, resource: any) => void); /** * @description * * Rota de redirecionamento que será executada após a confirmação da exclusão do registro. * * > Se passada uma função, é responsabilidade do desenvolvedor implementar a navegação ou outro comportamento desejado. */ remove?: string | ((id: any, resource: any) => void); } /** * @docsExtends PoDynamicViewField * * @ignoreExtendedDescription * * @usedBy PoPageDynamicDetailComponent * * @description * * Interface dos fields usados para compor o template `po-page-dynamic-detail`. */ interface PoPageDynamicDetailField extends PoDynamicViewField { /** Indica se o campo será duplicado caso seja executada a ação de duplicação. */ duplicate?: boolean; } /** * @usedBy PoPageDynamicDetailComponent * * @description * * Interface para as propriedades de uma página dinâmica. */ interface PoPageDynamicDetailOptions { /** * Lista dos campos usados no formulário de detalhe. * * Caso precise alterar um campo que já exista deve ser passado o atributo `property` com o mesmo conteúdo do original. */ fields?: Array; /** * Ações que o usuário poderá executar na página através de botões. * * Caso precise alterar uma ação informe a propriedade que deve ser alterada segundo a interface `PoPageDynamicDetailActions` */ actions?: PoPageDynamicDetailActions; /** * Objeto com propriedades do breadcrumb. * * Caso esse atributo seja utilizado ele sempre irá substituir o original. */ breadcrumb?: PoBreadcrumb; /** * Título da página. * * Caso esse atributo seja utilizado ele sempre irá substituir o original. */ title?: string; } declare const poPageDynamicDetailLiteralsDefault: { en: { pageActionEdit: string; pageActionRemove: string; pageActionBack: string; confirmRemoveTitle: string; confirmRemoveMessage: string; removeNotificationSuccess: string; registerNotFound: string; }; es: { pageActionEdit: string; pageActionRemove: string; pageActionBack: string; confirmRemoveTitle: string; confirmRemoveMessage: string; removeNotificationSuccess: string; registerNotFound: string; }; pt: { pageActionEdit: string; pageActionRemove: string; pageActionBack: string; confirmRemoveTitle: string; confirmRemoveMessage: string; removeNotificationSuccess: string; registerNotFound: string; }; ru: { pageActionEdit: string; pageActionRemove: string; pageActionBack: string; confirmRemoveTitle: string; confirmRemoveMessage: string; removeNotificationSuccess: string; registerNotFound: string; }; }; /** * @description * * O `po-page-dynamic-detail` é uma página que serve para exibir registros em detalhes, * o mesmo também suporta metadados conforme especificado na documentação. * * * ### Utilização via rota * * Ao utilizar as rotas para inicializar o template, o `page-dynamic-detail` disponibiliza propriedades que devem ser fornecidas no arquivo de configuração de rotas da aplicação, para * poder especificar o endpoint dos dados e dos metadados que serão carregados na inicialização. * * Exemplo de utilização: * * Arquivo de configuração de rotas da aplicação: `app-routing.module.ts` * ``` * const routes: Routes = [ * { * path: 'people/:id', * component: PoPageDynamicDetailComponent, * data: { * serviceApi: 'http://localhost:3000/v1/people', // endpoint dos dados * serviceMetadataApi: 'http://localhost:3000/v1/metadata', // endpoint dos metadados utilizando o método HTTP Get * serviceLoadApi: 'http://localhost:3000/load-metadata' // endpoint de customizações dos metadados utilizando o método HTTP Post * } * }, * { * path: 'home', * component: HomeExampleComponent * } * ]; * * ``` * O componente primeiro irá carregar o metadado da rota definida na propriedade serviceMetadataApi * e depois irá buscar da rota definida na propriedade serviceLoadApi. * * A requisição dos metadados é feita na inicialização do template para buscar os metadados da página passando o * tipo do metadado esperado e a versão cacheada pelo browser. * * > Caso o servidor retornar um erro ao recuperar os metadados, serão repassados os metadados salvos em cache, * se o cache não existir será disparada uma notificação. * * O formato esperado na resposta da requisição está especificado na interface * [PoPageDynamicDetailMetadata](/documentation/po-page-dynamic-detail#po-page-dynamic-detail-metadata). Por exemplo: * * ``` * { * version: 1, * title: 'Person Detail', * fields: [ * { property: 'id', key: true, disabled: true }, * { property: 'status' }, * { property: 'name' }, * { property: 'nickname' }, * { property: 'birthdate', label: 'Birth date' }, * { property: 'genre' }, * { property: 'city' }, * { property: 'country' } * ] * } * ``` * * > Caso o endpoint dos metadados não seja especificado, será feito uma requisição utilizando o `serviceApi` da seguinte forma: * ``` * GET {end-point}/metadata?type=detail&version={version} * ``` * * #### Tokens customizáveis * * > 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 | * |---------------------|---------------------------------------------|---------------------------------------| * | **Header** | | | * | `--padding` | Espaçamento do header | `var(--spacing-xs) var(--spacing-md)` | * | `--gap` | Espaçamento entre os breadcrumbs e o título | `var(--spacing-md)` | * | `--gap-actions` | Espaçamento entre as ações | `var(--spacing-xs)` | * | `--font-family` | Família tipográfica do título | `var(--font-family-theme)` | * | **Content** | | | * | `--padding-content` | Espaçamento do conteúdo | `var(--spacing-xs) var(--spacing-sm)` | * * @example * * * * * */ declare class PoPageDynamicDetailComponent implements OnInit, OnDestroy { private readonly router; private readonly activatedRoute; private readonly poNotification; private readonly poDialogService; private readonly poPageDynamicService; private readonly poPageDynamicDetailActionsService; private readonly poPageCustomizationService; /** Objeto com propriedades do breadcrumb. */ breadcrumb?: PoBreadcrumb; /** * Função ou serviço que será executado na inicialização do componente. * * A propriedade aceita os seguintes tipos: * - `string`: *Endpoint* usado pelo componente para requisição via `POST`. * - `function`: Método que será executado. * * O retorno desta função deve ser do tipo `PoPageDynamicDetailOptions`, * onde o usuário poderá customizar novos campos, breadcrumb, title e actions * * Por exemplo: * * ``` * getPageOptions(): PoPageDynamicDetailOptions { * return { * actions: * { new: 'new', edit: 'edit/:id', remove: true }, * fields: [ * { property: 'idCard', gridColumns: 6 } * ] * }; * } * * ``` * Para referenciar a sua função utilize a propriedade `bind`, por exemplo: * ``` * [p-load]="onLoadOptions.bind(this)" * ``` */ onLoad: string | (() => PoPageDynamicDetailOptions); /** Título da página. */ title: string; /** * @description * * Endpoint usado pelo template para requisição do recurso que serão exibido. * * Caso a ação `remove` estiver configurada, será feito uma requisição de exclusão nesse mesmo endpoint passando os campos * setados como `key: true`. * * > `DELETE {end-point}/{keys}` * * ``` * * * ``` * * Resquisição disparada, onde a propriedade `id` é igual a 2: * * ``` * DELETE /api/po-samples/v1/people/2 HTTP/1.1 * Host: localhost:4000 * Connection: keep-alive * Accept: application/json, text/plain * ... * ``` * * > Caso esteja usando metadados com o template, será disparado uma requisição na inicialização do template para buscar * > os metadados da página passando o tipo do metadado esperado e a versão cacheada pelo browser. * > * > `GET {end-point}/metadata?type=detail&version={version}` */ serviceApi: string; literals: any; model: any; private readonly subscriptions; private _actions; private _autoRouter; private _componentsSize?; private _initialComponentsSize?; private _duplicates; private _fields; private _keys; private _pageActions; /** * @optional * * @description * * Define as ações da página de acordo com a interface `PoPageDynamicDetailActions`. */ set actions(value: PoPageDynamicDetailActions); get actions(): PoPageDynamicDetailActions; /** * @todo Validar rotas na mão pois se existir uma rota '**' o catch do navigation não funciona. * * @optional * * @description * * Cria automaticamente as rotas de edição (novo/duplicate) e detalhes caso as ações * estejam definidas nas ações. * * > Para o correto funcionamento não pode haver nenhum rota coringa (`**`) especificada. * * @default false */ set autoRouter(value: boolean); get autoRouter(): boolean; /** * @optional * * @description * * Define o tamanho dos componentes de formulário no template: * - `small`: aplica a medida small de cada componente (disponível apenas para acessibilidade AA). * - `medium`: aplica a medida medium de cada componente. * * > 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 componentsSize(value: string); get componentsSize(): string; /** Lista dos campos exibidos na página. */ set fields(value: Array); get fields(): Array; constructor(); ngOnInit(): void; ngOnDestroy(): void; get duplicates(): any[]; get keys(): any[]; get pageActions(): PoPageAction[]; protected onThemeChange(): void; private applySizeBasedOnA11y; private remove; private confirmRemove; private executeRemove; private formatUniqueKey; private goBack; private executeBackAction; private loadData; private setUndefinedToModelAndActions; private getMetadata; private navigateTo; private openEdit; private executeEditAction; private openEditUrl; private resolveUrl; private getPageActions; private getKeysByFields; private getDuplicatesByFields; private isObject; private loadDataFromAPI; private loadOptionsOnInitialize; private getPoDynamicPageOptions; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } /** * @description * * Módulo do serviço do po-page-dynamic-service. */ declare class PoPageDynamicModule { static ɵfac: i0.ɵɵFactoryDeclaration; static ɵmod: i0.ɵɵNgModuleDeclaration; static ɵinj: i0.ɵɵInjectorDeclaration; } /** * @description * * Módulo do template do po-page-dynamic-detail. */ declare class PoPageDynamicDetailModule { static ɵfac: i0.ɵɵFactoryDeclaration; static ɵmod: i0.ɵɵNgModuleDeclaration; static ɵinj: i0.ɵɵInjectorDeclaration; } /** * @usedBy PoPageDynamicEditComponent * * @description * * Definição da estrutura de retorno da url ou método executado através da * propriedade `beforeCancel`. */ interface PoPageDynamicEditBeforeCancel { /** * Nova rota para navegação que substituirá a definida anteriormente em `cancel`. */ newUrl?: string; /** * Define se deve ou não executar a ação de cancelamento de edição da página (cancel) */ allowAction?: boolean; } /** * @usedBy PoPageDynamicEditComponent * * @description * * Definição da estrutura de retorno da url ou método executado através da * propriedade `beforeSave`. */ interface PoPageDynamicEditBeforeSave { /** * Nova rota para salvar o recurso, que substituirá a rota definida anteriormente em `save`. */ newUrl?: string; /** * Define se deve ou não executar a ação salvar (save). */ allowAction?: boolean; /** * Recurso atualizado. * * Será feito uma mesclagem entre os valores existentes e esse novo objeto. * Por exemplo: * * - recurso anterior: * ``` * { name: 'Ane' } * ``` * * - recurso retornado no `beforeSave`: * ``` * { age: 23 } * ``` * * - Mesclagem do recurso: * ``` * { name: 'Ane', age: 23 } * ``` * * > Caso `allowAction` seja `false`, o recurso será atualizado apenas localmente, sem concluir * a ação de salvar (save). */ resource?: any; } /** * @usedBy PoPageDynamicEditComponent * * @description * * Definição da estrutura de retorno da url ou método executado através da * propriedade `beforeSaveNew`. */ interface PoPageDynamicEditBeforeSaveNew { /** * Nova rota de redirecionamento, que substituirá a rota definida anteriormente em `saveNew`. */ newUrl?: string; /** * Define se deve ou não executar a ação salvar e novo (saveNew). */ allowAction?: boolean; /** * Recurso atualizado. * * Será feito uma mesclagem entre os valores existentes e esse novo objeto, * no entanto as propriedades que possuírem `key: true` não serão alteradas. * Por exemplo: * * - recurso anterior com a propriedade id foi que definida como *key*: * ``` * { id: 1, name: 'Ane' } * ``` * * - recurso retornado no `beforeSaveNew`: * ``` * { id: 50, age: 23 } * ``` * * - Mesclagem do recurso: * ``` * { id: 1, name: 'Ane', age: 23 } * ``` * * > Caso `allowAction` seja `false`, o recurso será atualizado apenas localmente, sem concluir * a ação de salvar (saveNew). */ resource?: any; } /** * @usedBy PoPageDynamicEditComponent * * @description * * Interface para as ações do componente po-page-dynamic-edit. */ interface PoPageDynamicEditActions { /** * @description * * Rota ou método que será chamado antes de executar a ação de cancelamento (cancel). * * Tanto o método como a API receberão o recurso e devem retornar um objeto com a definição de `PoPageDynamicEditBeforeCancel`. * * > A url será chamada via POST * * Caso o desenvolvedor queira que apareça alguma mensagem nessa ação ele pode criá-la na função chamada pela **beforeCancel** * ou definir a mensagem no atributo `_messages` na resposta da API conforme definido * em [Guia de implementação de APIs](https://po-ui.io/guides/api#successMessages) * */ beforeCancel?: string | (() => PoPageDynamicEditBeforeCancel); /** * @description * * Rota ou método que será chamado antes de salvar um recurso (save). * * Tanto o método como a API receberão o recurso e devem retornar um objeto com a definição de `PoPageDynamicEditBeforeSave`. * * > A url será chamada via POST. Caso seja a edição de um recurso, a url será concatenada * com a key especificada no metadata, por exemplo: `POST {beforeSave}/{key}`. * * Caso o desenvolvedor queira que apareça alguma mensagem nessa ação ele pode criá-la na função chamada pela **beforeSave** * ou definir a mensagem no atributo `_messages` na resposta da API conforme definido * em [Guia de implementação de APIs](https://po-ui.io/guides/api#successMessages) * */ beforeSave?: string | ((resource: any, id: string) => PoPageDynamicEditBeforeSave); /** * @description * * Rota ou método que será chamado antes de executar o evento salvar e abrir novo registro (saveNew). * * Tanto o método como a API receberão o recurso e devem retornar um objeto com a definição de `PoPageDynamicEditBeforeSaveNew`. * * > A URL será chamada via POST. Caso seja a edição de um recurso, a URL será concatenada * com a key especificada no metadata, por exemplo: `POST {beforeSave}/{key}`. * * Caso o desenvolvedor queira que apareça alguma mensagem nessa ação ele pode criá-la na função chamada pela **beforeSaveNew** * ou definir a mensagem no atributo `_messages` na resposta da API conforme definido * em [Guia de implementação de APIs](https://po-ui.io/guides/api#successMessages) * */ beforeSaveNew?: string | ((resource: any, id: string) => PoPageDynamicEditBeforeSaveNew); /** * @description * * Rota de redirecionamento para ação de cancelar, caso não seja especificada será usado o comando `navigator.back()`. * * > Se passada uma função, é responsabilidade do desenvolvedor implementar a navegação ou outro comportamento desejado. * * > Caso queira esconder a ação deve ser passado o valor `false`; * * ``` * actions = { * cancel: '/' * }; * ``` */ cancel?: string | boolean | Function; /** * @description * * Rota de redirecionamento ou método para executar o envio dos dados ao servidor. * * A rota de redirecionamento será executada após a confirmação de gravação do registro. * * > A rota pode conter um parâmetro chamando id. * * ``` * actions = { * save: 'detail/:id' * }; * ``` * * Se for passado um método: * - receberá como parâmetro na chamada do método o recurso, por exemplo: `{ email: 'example@email.com' }`. * - é responsabilidade do desenvolvedor implementar a navegação e/ou envio dos dados * para o servidor ou outro comportamento desejado. */ save?: string | ((resource: any, id: string) => void); /** * @description * * Rota de redirecionamento ou método para executar o envio dos dados ao servidor. * * A rota de redirecionamento será executada após a confirmação de gravação do registro. * * > Caso tratar-se de um novo registro, será resetado o formulário para um novo registro. * Se estiver editando um registro a rota de redirecionamento será utilizada. * * ``` * actions = { * saveNew: 'new' * }; * ``` * A rota pode conter um parâmetro id. * * ``` * actions = { * saveNew: 'edit/:id' * }; * ``` * * Ao informar um método é responsabilidade do desenvolvedor implementar a navegação e/ou envio dos dados * para o servidor ou outro comportamento desejado. */ saveNew?: string | ((resource: any, id?: string) => void); } /** * @usedBy PoPageDynamicEditComponent * * @description * * Interface dos fields usados para compor o template `po-page-dynamic-edit`. * Herda as definições da interface * [PoDynamicFormField](https://po-ui.io/documentation/po-dynamic-form). */ interface PoPageDynamicEditField extends PoDynamicFormField { /** Indica se o campo será duplicado caso seja executada a ação de duplicação. */ duplicate?: boolean; } /** * @usedBy PoPageDynamicEditComponent * * @description * * Interface para definição das literais usadas no `po-page-dynamic-edit`. */ interface PoPageDynamicEditLiterals { /** * @description * * Texto exibido na mensagem de cancelamento da inclusão/edição. */ cancelConfirmMessage?: string; /** * @description * * Rótulo exibido no botão `Novo`. */ detailActionNew?: string; /** * @description * * Rótulo exibido no botão `Cancelar`. */ pageActionCancel?: string; /** * @description * * Rótulo exibido no botão `Salvar`. */ pageActionSave?: string; /** * @description * * Rótulo exibido no botão `Salvar e novo`. */ pageActionSaveNew?: string; /** * @description * * Texto exibido para resgistro não encontrado. */ registerNotFound?: string; /** * @description * * Texto exibido para ocorrência de alguma inconsistência ao salvar. */ saveNotificationError?: string; /** * @description * * Texto exibido para recurso salvo com sucesso. */ saveNotificationSuccessSave?: string; /** * @description * * Texto exibido para recurso atualizado com sucesso. */ saveNotificationSuccessUpdate?: string; /** * @description * * Texto exibido para adivertência de formulário preenchido de forma incorreta. */ saveNotificationWarning?: string; } /** * @usedBy PoPageDynamicEditComponent * * @description * * Interface para as propriedades de uma página dinâmica. */ interface PoPageDynamicEditOptions { /** * Lista dos campos usados. */ fields?: Array; /** * Ações que o usuário poderá executar na página através de botões. */ actions?: PoPageDynamicEditActions; /** * Objeto com propriedades do breadcrumb. */ breadcrumb?: PoBreadcrumb; /** * Título da página. */ title?: string; } declare const poNotificationType: string[]; declare const poNotificationTypeDefault = "warning"; declare const poPageDynamicEditLiteralsDefault: { en: PoPageDynamicEditLiterals; es: PoPageDynamicEditLiterals; pt: PoPageDynamicEditLiterals; ru: PoPageDynamicEditLiterals; }; /** * @description * * O `po-page-dynamic-edit` é uma página que pode servir para editar ou criar novos registros, * o mesmo também suporta metadados conforme especificado na documentação. * * ### Utilização via rota * * Ao utilizar as rotas para inicializar o template, o `page-dynamic-edit` disponibiliza propriedades que devem ser fornecidas no arquivo de configuração de rotas da aplicação, para * poder especificar o endpoint dos dados e dos metadados que serão carregados na inicialização. * * Exemplo de utilização: * * Arquivo de configuração de rotas da aplicação: `app-routing.module.ts` * ``` * const routes: Routes = [ * { * path: 'people', * component: PoPageDynamicEditComponent, * data: { * serviceApi: 'http://localhost:3000/v1/people', // endpoint dos dados * serviceMetadataApi: 'http://localhost:3000/v1/metadata', // endpoint dos metadados utilizando o método HTTP Get * serviceLoadApi: 'http://localhost:3000/load-metadata' // endpoint de customizações dos metadados utilizando o método HTTP Post * } * }, * { * path: 'home', * component: HomeExampleComponent * } * ]; * * ``` * O componente primeiro irá carregar o metadado da rota definida na propriedade serviceMetadataApi * e depois irá buscar da rota definida na propriedade serviceLoadApi. * * A requisição dos metadados é feita na inicialização do template para buscar os metadados da página passando o * tipo do metadado esperado e a versão cacheada pelo browser. * * > Caso o servidor retornar um erro ao recuperar os metadados, serão repassados os metadados salvos em cache, * se o cache não existir será disparada uma notificação. * * Para carregar com um recurso já existente, deve-se ser incluído um parâmetro na rota chamado `id`: * * ``` * { * path: 'people/:id', * component: PoPageDynamicEditComponent, * data: { * serviceApi: 'http://localhost:3000/v1/people', // endpoint dos dados * serviceMetadataApi: 'http://localhost:3000/v1/metadata', // endpoint dos metadados * serviceLoadApi: 'http://localhost:3000/load-metadata' // endpoint de customizações dos metadados * } * } * ``` * * A requisição dos metadados é feita na inicialização do template para buscar os metadados da página passando o * tipo do metadado esperado e a versão cacheada pelo browser. * * O formato esperado na resposta da requisição está especificado na interface * [PoPageDynamicEditMetadata](/documentation/po-page-dynamic-edit#po-page-dynamic-edit-metadata). Por exemplo: * * ``` * { * version: 1, * title: 'Person edit', * fields: [ * { property: 'id', key: true, disabled: true }, * { property: 'status' }, * { property: 'name' }, * { property: 'nickname' }, * { property: 'birthdate', label: 'Birth date' }, * { property: 'genre' }, * { property: 'city' }, * { property: 'country' } * ] * } * ``` * * > Caso o endpoint dos metadados não seja especificado, será feito uma requisição utilizando o `serviceApi` da seguinte forma: * ``` * GET {end-point}/metadata?type=edit&version={version} * ``` * * #### Tokens customizáveis * * | Propriedade | Descrição | Valor Padrão | * |---------------------|---------------------------------------------|---------------------------------------| * | **Header** | | | * | `--padding` | Espaçamento do header | `var(--spacing-xs) var(--spacing-md)` | * | `--gap` | Espaçamento entre os breadcrumbs e o título | `var(--spacing-md)` | * | `--gap-actions` | Espaçamento entre as ações | `var(--spacing-xs)` | * | `--font-family` | Família tipográfica do título | `var(--font-family-theme)` | * | **Content** | | | * | `--padding-content` | Espaçamento do conteúdo | `var(--spacing-xs) var(--spacing-sm)` | * * @example * * * * * * * * * * */ declare class PoPageDynamicEditComponent implements OnInit, OnDestroy { private readonly router; private readonly activatedRoute; private readonly poNotification; private readonly poDialogService; private readonly poPageDynamicService; private readonly poPageCustomizationService; private readonly poPageDynamicEditActionsService; dynamicForm: PoDynamicFormComponent; gridDetail: PoGridComponent; /** Objeto com propriedades do breadcrumb. */ breadcrumb?: PoBreadcrumb; /** * @description * * Endpoint usado pelo template para requisição do recurso que será exibido para edição. * * Para as ações de `save` e `saveNew`, será feito uma requisição de criação nesse mesmo endpoint passando os valores * preenchidos pelo usuário via payload. * * > `POST {end-point}` * * ``` * * * ``` * * Resquisição disparada, onde a propriedade `name` e `city` foram preenchidas: * * ``` * POST /api/po-samples/v1/people HTTP/1.1 * Host: localhost:4000 * Connection: keep-alive * Accept: application/json, text/plain * ... * ``` * * Request payload: * * ``` * { "name": "Fulano", "city": "Smallville" } * ``` * * Caso queira que o template carregue um recurso já existente, deve-se ser incluído um parametro na rota chamado `id`. * * Exemplo de configuração de rota: * * ``` * RouterModule.forRoot([ * ... * { path: 'edit/:id', component: PersonEditComponent }, * ... * ], * ``` * * Baseado nisso, na inicialização do template, será disparado uma requisição para buscar o recurso que será editado. * * > `GET {end-point}/{id}` * * Nos métodos de `save` e `saveNew`, ao invés de um `POST`, será disparado um `PUT`. * * Resquisição disparada, onde a propriedade `name` e `city` foram preenchidas / atualizadas, e o `id` da url é 2: * * ``` * PUT /api/po-samples/v1/people/2 HTTP/1.1 * Host: localhost:4000 * Connection: keep-alive * Accept: application/json, text/plain * ... * ``` * * Request payload: * * ``` * { "name": "Fulano", "city": "Metropolis" } * ``` */ serviceApi: string; /** Título da página. */ title: string; /** * Função ou serviço que será executado na inicialização do componente. * * A propriedade aceita os seguintes tipos: * - `string`: *Endpoint* usado pelo componente para requisição via `POST`. * - `function`: Método que será executado. * * O retorno desta função deve ser do tipo `PoPageDynamicEditOptions`, * onde o usuário poderá customizar novos campos, breadcrumb, title e actions * * Por exemplo: * * ``` * getPageOptions(): PoPageDynamicEditOptions { * return { * actions: * { cancel: false, save: 'save/:id', saveNew: 'saveNew' }, * fields: [ * { property: 'idCard', gridColumns: 6 } * ] * }; * } * * ``` * Para referenciar a sua função utilize a propriedade `bind`, por exemplo: * ``` * [p-load]="onLoadOptions.bind(this)" * ``` */ onLoad: string | (() => PoPageDynamicEditOptions); /** * @optional * * @description * * Função que será executada após ser realizada a busca dos dados. * * A propriedade aceita os seguintes tipos: * - `function`: Método que será executado. * * Esta função passa por parâmetro o model e deve recebê-lo de volta com as alterações. * Também aceita o retorno de um Observable com o novo model. * * Por exemplo: * * ``` * onLoadCustom(model) { * return { ...model, customField: 'newValue' }; * } * * ``` * Para referenciar a sua função utilize a propriedade `bind`, por exemplo: * ``` * [p-load-data]="onLoadCustom.bind(this)" * ``` */ onLoadData: ((model: any) => any) | ((model: any) => Observable); model: any; readonly detailActions: PoGridRowActions; private indexFocus; private readonly language; private readonly subscriptions; private _actions; private _componentsSize?; private _initialComponentsSize?; private _literals; private _autoRouter; private _controlFields; private _detailFields; private _duplicates; private _fields; private _keys; private _pageActions; private _notificationType?; /** * @optional * * @description * * Ações da página. */ set actions(value: PoPageDynamicEditActions); get actions(): PoPageDynamicEditActions; /** * @optional * * @description * * Objeto com as literais usadas no `po-page-dynamic-edit`. * * É possivel customizar passando um objeto com todas as literais disponíveis * ou passando apenas as literais que deseja customizar * * ``` * const customLiterals: PoPageDynamicEditLiterals = { * detailActionNew: 'Incluir', * pageActionCancel: 'Descartar', * pageActionSave: 'Gravar', * pageActionSaveNew: 'Gravar e incluir', * registerNotFound: 'Nenhum registro encontrado.', * saveNotificationError: 'Campo(s) obrigatório(s) sem preenchimento.', * saveNotificationSuccessSave: 'Item salvo com sucesso.', * saveNotificationSuccessUpdate: 'Item atualizado com sucesso.', * saveNotificationWarning: 'Necessário preencher o formulário corretamente.' * }; * ``` * * E para carregar as literais customizadas, basta apenas passar o objeto para o componente. * * ``` * * * ``` * * > O valor padrão será traduzido de acordo com o idioma configurado no [`PoI18nService`](/documentation/po-i18n) ou *browser*. */ set literals(value: PoPageDynamicEditLiterals); get literals(): PoPageDynamicEditLiterals; /** * @optional * * @description * * Tipo da notificação. * * É possivel definir o tipo de notificação que será exibido quando houver algum campo inválido no formulário. * * ``` * * * ``` * * > Os valores aceitos são 'warning' e 'error'. * @default warning */ set notificationType(value: string); get notificationType(): string; /** * @todo Validar rotas na mão pois se existir uma rota '**' o catch do navigation não funciona. * * @optional * * @description * * Cria automaticamente as rotas de edição (novo/duplicate) e detalhes caso as ações * estejam definidas nas ações. * * > Para o correto funcionamento não pode haver nenhum rota coringa (`**`) especificada. * * @default false */ set autoRouter(value: boolean); get autoRouter(): boolean; /** Lista dos campos usados na tabela e busca avançada. */ set fields(value: Array); get fields(): Array; /** * @optional * * @description * * Define o tamanho dos componentes de formulário no template: * - `small`: aplica a medida small de cada componente (disponível apenas para acessibilidade AA). * - `medium`: aplica a medida medium de cada componente. * * > 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 componentsSize(value: string); get componentsSize(): string; constructor(); ngOnInit(): void; ngOnDestroy(): void; detailActionNew(): 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 `keydown`. * * ``` * import { PoPageDynamicEditModule } from '@po-ui/ng-templates'; * ... * @ViewChild('dynamicEdit', { static: true }) dynamicEdit: PoPageDynamicEditComponent; * * fields: Array = [ * { * property: 'name', * ... * help: 'Mensagem de ajuda.', * helper: 'Mensagem de ajuda complementar com o componente po-helper implementado.', * keydown: this.onKeyDown.bind(this, 'name') * }, * ] * * onKeyDown(property: string, event: KeyboardEvent): void { * if (event.code === 'F9') { * this.dynamicEdit.showAdditionalHelp(property); * } * } * ``` * * @param { string } property Identificador da coluna. */ showAdditionalHelp(property: string): void; get duplicates(): any[]; get keys(): any[]; get pageActions(): PoPageAction[]; private applySizeBasedOnA11y; get controlFields(): any[]; get detailFields(): any[]; protected onThemeChange(): void; private loadDataFromAPI; private cancel; private formatUniqueKey; private goBack; private executeBackAction; private loadData; private beforeSetModel; private loadOptionsOnInitialize; private focusCheckboxInput; private focusControl; private focusRadioInput; private getPoDynamicPageOptions; private getMetadata; private markControlsAsDirtyAndFocusFirstInvalid; private navigateTo; private resolveUniqueKey; private resolveUrl; private executeSave; private updateModel; private showNotification; private saveOperation; private save; private executeSaveNew; private getKeysByFields; private getControlFields; private getDetailFields; private getDuplicatesByFields; private getPageActions; private isObject; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } /** * @description * * Módulo do template do po-page-dynamic-detail. */ declare class PoPageDynamicEditModule { static ɵfac: i0.ɵɵFactoryDeclaration; static ɵmod: i0.ɵɵNgModuleDeclaration; static ɵinj: i0.ɵɵInjectorDeclaration; } /** * @usedBy PoPageDynamicSearchComponent * * @description * * Interface para a customização de uma página dinâmica que permite atribuir valores iniciais aos filtros de busca avançada. */ interface PoPageDynamicSearchFilters extends PoDynamicFormField { /** * Define um valor inicial para um filtro de busca avançada. */ initValue?: any; /** * Define um valor fixed para um filtro de busca avançada. */ fixed?: boolean; } /** * @docsPrivate * * @description * * Interface para definição das literais usadas no `po-advanced-filter`. */ interface PoAdvancedFilterLiterals { /** Título do filtro avançado. */ title?: string; /** Texto exibido no botão de cancelamento do filtro avaçando. */ cancelLabel?: string; /** Texto exibido no botão de confirmação do filtro avaçando. */ confirmLabel?: string; } /** * @docsPrivate * * @description * * Filtro de busca avançada criado a partir de um formulário dinâmico. * Componente de uso interno. */ declare class PoAdvancedFilterBaseComponent { poModal: PoModalComponent; /** * Mantém na modal de busca avançada os valores preenchidos do último filtro realizado pelo usuário. */ keepFilters: boolean; /** Função que será disparada e receberá os valores do formulário ao ser clicado no botão buscar. */ searchEvent: EventEmitter; filter: {}; language: string; primaryAction: PoModalAction; secondaryAction: PoModalAction; protected optionsServiceChosenOptions: Array; private _componentsSize?; private _initialComponentsSize?; private _filters; private _literals; /** * @optional * * @description * * Define o tamanho dos componentes de formulário no template: * - `small`: aplica a medida small de cada componente (disponível apenas para acessibilidade AA). * - `medium`: aplica a medida medium de cada componente. * * > 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 componentsSize(value: string); get componentsSize(): string; /** * Coleção de objetos que implementam a interface PoPageDynamicSearchFilters, para definição dos campos que serão criados * dinamicamente. */ set filters(filters: Array); get filters(): Array; /** Objeto com as literais usadas no `po-advanced-filter`. */ set literals(value: PoAdvancedFilterLiterals); get literals(): PoAdvancedFilterLiterals; constructor(languageService: PoLanguageService); protected onThemeChange(): void; private applySizeBasedOnA11y; private getValuesFromForm; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; static ngAcceptInputType_keepFilters: any; } /** * @docsPrivate * * @docsExtends PoAdvancedFilterBaseComponent * * @examplePrivate * * * * * */ declare class PoAdvancedFilterComponent extends PoAdvancedFilterBaseComponent implements OnDestroy, OnInit { poDynamicForm: PoDynamicFormComponent; private readonly subscription; constructor(); ngOnInit(): void; ngOnDestroy(): void; open(): void; private getOptionsServiceItem; private getInitialValuesFromFilter; private optionsServiceSubscribe; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } /** * @usedBy PoPageDynamicSearchComponent, PoPageDynamicTableComponent * * @description * * Interface para definição das literais usadas no `po-page-dynamic-search` e no `po-page-dynamic-table`. */ interface PoPageDynamicSearchLiterals { /** Título do grupo de *disclaimers* que será exibido após realizar alguma busca. */ disclaimerGroupTitle?: string; /** Texto exibido no botão para cancelamento da busca avaçanda. */ filterCancelLabel?: string; /** Texto exibido no botão para confirmação da busca avaçanda. */ filterConfirmLabel?: string; /** Título da busca avançada. */ filterTitle?: string; /** Texto do *disclaimer* que será exibido em conjunto com o valor preenchido no campo de busca rápida. */ quickSearchLabel?: string; /** Mensagem que aparecerá enquanto o campo de busca rápida não estiver preenchido. */ searchPlaceholder?: string; } /** * @usedBy PoPageDynamicSearchComponent * * @description * * Interface para a customização de uma página dinâmica. */ interface PoPageDynamicSearchOptions { /** * Lista dos campos usados na busca avançada. Caso não seja passado a busca avançada não será exibida. * * Caso precise alterar um filtro que já exista deve ser passado o atributo `property` com o mesmo conteúdo do original. */ filters?: Array; /** * Lista de ações que o usuário poderá executar na página através de botões. * * Caso precise alterar uma ação que já exista deve ser passado o atributo `label` com o mesmo conteúdo do original. */ actions?: Array; /** * Objeto com propriedades do breadcrumb. * * Caso esse atributo seja utilizado ele sempre irá substituir o original. */ breadcrumb?: PoBreadcrumb; /** * Título da página. * * Caso esse atributo seja utilizado ele sempre irá substituir o original. */ title?: string; /** * Mantém na modal de busca avançada os valores preenchidos do último filtro realizado pelo usuário. * * Caso esse atributo seja utilizado ele sempre irá substituir o original. */ keepFilters?: boolean; /** * Permite a utilização da pesquisa rápida junto com a pesquisa avançada. * * Desta forma, ao ter uma pesquisa avançada estabelecida e ser * preenchido a pesquisa rápida, o filtro será concatenado adicionando a pesquisa * rápida também na lista de disclaimers. * * > Os valores que são emitidos no `p-quick-search` e no `p-advanced-search` * permanecem separados durante a emissão dos valores alterados. A concatenação * é apenas nos `disclaimers`. */ concatFilters?: boolean; /** * Oculta o botão para remover todos os *disclaimers*. */ hideRemoveAllDisclaimer?: boolean; /** * Lista de filtros que terão a opção de fechar ocultada * em seu respectivo disclaimer. Utilizar o atributo `property` do filtro. * * Exemplo de utilização: * ``` * ['city','name']; * ``` */ hideCloseDisclaimers?: Array; /** * Largura do campo de busca, utilizando o *Grid System*, * e limitado ao máximo de 6 colunas. O tamanho mínimo é controlado * conforme resolução de tela para manter a consistência do layout. */ quickSearchWidth?: number; } /** * @description * * Componente com as ações de pesquisa já definidas, bastando que o desenvolvedor implemente apenas a chamada para as APIs * e exiba as informações. * * #### Tokens customizáveis * * > 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 | * |---------------------|---------------------------------------------|---------------------------------------| * | **Header** | | | * | `--padding` | Espaçamento do header | `var(--spacing-xs) var(--spacing-md)` | * | `--gap` | Espaçamento entre os breadcrumbs e o título | `var(--spacing-md)` | * | `--gap-actions` | Espaçamento entre as ações | `var(--spacing-xs)` | * | `--font-family` | Família tipográfica do título | `var(--font-family-theme)` | * | **Content** | | | * | `--padding-content` | Espaçamento do conteúdo | `var(--spacing-xs) var(--spacing-sm)` | */ declare abstract class PoPageDynamicSearchBaseComponent { /** Nesta propriedade deve ser definido um array de objetos que implementam a interface `PoPageAction`. */ actions?: Array; /** Objeto com propriedades do breadcrumb. */ breadcrumb?: PoBreadcrumb; /** * @optional * * @description * * Mantém na busca avançada os valores preenchidos do último filtro realizado pelo usuário. * * @default `false` */ keepFilters: boolean; /** * @optional * * @description * * Permite a utilização da pesquisa rápida junto com a pesquisa avançada. * * Desta forma, ao ter uma pesquisa avançada estabelecida e ser * preenchido a pesquisa rápida, o filtro será concatenado adicionando a pesquisa * rápida também na lista de `disclaimers`. * * > Os valores que são emitidos no `p-quick-search` e no `p-advanced-search` * permanecem separados durante a emissão dos valores alterados. A concatenação * é apenas nos `disclaimers`. * * @default `false` */ concatFilters: boolean; /** * @optional * * @description * * Oculta o botão para remover todos os *disclaimers* do grupo. * * > Por padrão, o mesmo é exibido à partir de dois ou mais *disclaimers* com a opção `hideClose` habilitada. * * @default `false` */ hideRemoveAllDisclaimer: boolean; /** * Função ou serviço que será executado na inicialização do componente. * * A propriedade aceita os seguintes tipos: * - `string`: *Endpoint* usado pelo componente para requisição via `POST`. * - `function`: Método que será executado. * * O retorno desta função deve ser do tipo `PoPageDynamicSearchOptions`, * onde o usuário poderá customizar novos filtros, breadcrumb, title e actions * * Por exemplo: * * ``` * getPageOptions(): PoPageDynamicSearchOptions { * return { * actions: [ * { label: 'Find on Google' }, * ], * filters: [ * { property: 'idCard', gridColumns: 6 } * ] * }; * } * * ``` * Para referenciar a sua função utilize a propriedade `bind`, por exemplo: * ``` * [p-load]="onLoadOptions.bind(this)" * ``` */ onLoad: string | (() => PoPageDynamicSearchOptions); /** Título da página. */ title: string; /** * @optional * * @description * * Valor padrão na busca rápida ao inicializar o componente * */ quickSearchValue: string; _visibleFixedFilters: boolean; /** * @optional * * @description * * Controla a visibilidade dos filtros fixos na página. * * - Quando `true` (default), todos os filtros, incluindo os fixos, são exibidos, permitindo que o usuário visualize os filtros aplicados. * - Quando `false`, os filtros fixos são ocultados, não sendo exibidos na interface, mas ainda sendo aplicados como filtros nas requisições. * * Esta propriedade trabalha em conjunto com a propriedade `fixed` dos filtros individuais. Filtros marcados como `fixed: true` não serão exibidos na interface do filtro avançado quando `visibleFixedFilters` for `false`, mas continuarão a ser aplicados de forma transparente ao usuário. Dessa forma, permite-se maior flexibilidade no controle de quais filtros devem ser visíveis ao usuário ou devem ser aplicados permanentemente sem interferência. * * **Exemplo de uso:** * ```html * * * ``` */ set visibleFixedFilters(visible: boolean); get visibleFixedFilters(): boolean; /** * @optional * * @description * * Evento disparado ao executar a pesquisa avançada, o mesmo irá repassar um objeto com os valores preenchidos no modal de pesquisa. * * > Campos não preenchidos não irão aparecer no objeto passado por parâmetro. */ advancedSearch: EventEmitter; /** * @optional * * @description * * Evento disparado ao remover um ou todos os disclaimers pelo usuário. */ changeDisclaimers: EventEmitter; /** * @optional * * @description * * Evento disparado ao realizar uma busca pelo campo de pesquisa rápida, o mesmo será chamado repassando o valor digitado. */ quickSearch: EventEmitter; advancedFilterLiterals: PoAdvancedFilterLiterals; private _componentsSize?; private _initialComponentsSize?; private _filters; private _hideCloseDisclaimers; private _literals; private _quickSearchWidth; private readonly language; previousFilters: Array; /** * @optional * * @description * * Define o tamanho dos componentes de formulário no template: * - `small`: aplica a medida small de cada componente (disponível apenas para acessibilidade AA). * - `medium`: aplica a medida medium de cada componente. * * > 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 componentsSize(value: string); get componentsSize(): string; /** * @optional * * @description * * Objeto com as literais usadas no `po-page-dynamic-search`. * * Existem duas maneiras de customizar o componente, passando um objeto com todas as literais disponíveis: * * ``` * const customLiterals: PoPageDynamicSearchLiterals = { * disclaimerGroupTitle: 'Filtros aplicados:', * filterTitle: 'Filtro avançado', * filterCancelLabel: 'Fechar', * filterConfirmLabel: 'Aplicar', * quickSearchLabel: 'Valor pesquisado:', * searchPlaceholder: 'Pesquise aqui' * }; * ``` * * Ou passando apenas as literais que deseja customizar: * * ``` * const customLiterals: PoPageDynamicSearchLiterals = { * filterTitle: 'Filtro avançado' * }; * ``` * * E para carregar as literais customizadas, basta apenas passar o objeto para o componente. * * ``` * * * ``` * * > O valor padrão será traduzido de acordo com o idioma configurado no [`PoI18nService`](/documentation/po-i18n) ou *browser*. */ set literals(value: PoPageDynamicSearchLiterals); get literals(): PoPageDynamicSearchLiterals; /** * @optional * * @description * * Lista dos campos usados na busca avançada. Caso o mesmo não seja passado a busca avançada não será exibida. */ set filters(filters: Array); get filters(): Array; /** * @optional * * @description * * Largura do campo de busca, utilizando o *Grid System*, * e limitado ao máximo de 6 colunas. O tamanho mínimo é controlado * conforme resolução de tela para manter a consistência do layout. */ set quickSearchWidth(value: number); get quickSearchWidth(): number; /** * @optional * * @description * * Lista de filtros que terão a opção de fechar ocultada * em seu respectivo disclaimer. Utilizar o atributo `property` do filtro. * * Exemplo de utilização: * ``` * ['city','name']; * ``` */ set hideCloseDisclaimers(value: Array); get hideCloseDisclaimers(): Array; constructor(languageService: PoLanguageService); protected setAdvancedFilterLiterals(literals: PoPageDynamicSearchLiterals): void; protected onThemeChange(): void; stringify(columns: Array): string; private applySizeBasedOnA11y; abstract onChangeFilters(filters: Array): any; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; static ngAcceptInputType_keepFilters: any; static ngAcceptInputType_concatFilters: any; static ngAcceptInputType_hideRemoveAllDisclaimer: any; } /** * @docsExtends PoPageDynamicSearchBaseComponent * * @example * * * * * * * * * * * */ declare class PoPageDynamicSearchComponent extends PoPageDynamicSearchBaseComponent implements OnInit, OnDestroy, AfterViewInit, OnChanges { private readonly languageService; private readonly poPageCustomizationService; private readonly changeDetector; poAdvancedFilter: PoAdvancedFilterComponent; poPageList: PoPageListComponent; private loadSubscription; private readonly _disclaimerGroup; private readonly _filterSettings; constructor(); get disclaimerGroup(): PoDisclaimerGroup & { title: string; hideRemoveAll: boolean; }; get filterSettings(): PoPageFilter & { placeholder: string; width: number; }; ngOnInit(): void; ngOnDestroy(): void; ngAfterViewInit(): void; ngOnChanges(changes: SimpleChanges): void; onChangeFilters(filters: Array): void; onAction(quickFilter: string, quickSearchValue?: boolean): void; onAdvancedAction(): void; onAdvancedSearch(filteredItems: any, isAdvancedSearch?: any): void; private getDisclaimersWithoutQuickSearch; private setFilters; private convertToFilters; private optionsServiceDisclaimerLabel; private applyDisclaimerLabelValue; private formatDate; private formatArrayToObjectKeyValue; private formatValueToCurrency; private getFieldByProperty; private getFilterValueToDisclaimer; private emitChangesDisclaimers; private onRemoveAllDisclaimers; private onRemoveDisclaimer; private getFixedFiltersDisclaimers; private setDisclaimers; private loadOptionsOnInitialize; private getPoDynamicPageOptions; private addComplexFilter; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } /** * @description * * Módulo do serviço do po-page-customization-service. */ declare class PoPageCustomizationModule { static ɵfac: i0.ɵɵFactoryDeclaration; static ɵmod: i0.ɵɵNgModuleDeclaration; static ɵinj: i0.ɵɵInjectorDeclaration; } /** * @description * * Módulo do template do po-page-dynamic-search. */ declare class PoPageDynamicSearchModule { static ɵfac: i0.ɵɵFactoryDeclaration; static ɵmod: i0.ɵɵNgModuleDeclaration; static ɵinj: i0.ɵɵInjectorDeclaration; } /** * @usedBy PoPageDynamicTableComponent * * @description * * Definição da estrutura de retorno da url ou método executado através da * propriedade `beforeEdit`. */ interface PoPageDynamicTableBeforeEdit { /** * Nova rota para navegação que substituirá a definida anteriormente em `edit`. * * > Se for uma url literal, será feito o navigate direto ex: `/edit/22`. * * > Se a url tiver o coringa `:id` esse id será substituído pela chave do recurso ex: `/edit/:id` será convertido para `/edit/22`. */ newUrl?: string; /** * Define se deve ou não executar a ação de edição (*edit*) */ allowAction?: boolean; } /** * @usedBy PoPageDynamicTableComponent * * @description * * Definição da estrutura de retorno da url ou método executado através da * propriedade `beforeNew`. */ interface PoPageDynamicTableBeforeNew { /** * Nova rota para salvar o recurso, que substituirá a rota definida anteriormente em `new`. */ newUrl?: string; /** * Define se deve ou não executar a ação de inserção (new) */ allowAction?: boolean; } /** * @usedBy PoPageDynamicTableComponent * * @description * * Definição da estrutura de retorno da url ou método executado através da * propriedade `beforeRemove`. */ interface PoPageDynamicTableBeforeRemove { /** * Nova rota para enviar o delete, deve substituir a função ou rota definida anteriormente */ newUrl?: string; /** * Define se deve ou não executar a ação de exclusão (delete) */ allowAction?: boolean; } /** * @usedBy PoPageDynamicTableComponent * * @description * * Definição da estrutura de retorno da url ou método executado através da * propriedade `beforeDetail`. */ interface PoPageDynamicTableBeforeDetail { /** * Nova rota para abrir o detalhe, deve substituir a função ou rota definida anteriormente * > Se for uma url literal, será feito o navigate direto ex: `/view/22`. * * > Se a url ter o coringa `:id` esse id será substituído pela chave do recurso ex: `/view/:id` será convertido para `/view/22`. */ newUrl?: string; /** * Define se deve ou não executar a ação de ir para o detalhe */ allowAction?: boolean; } /** * @usedBy PoPageDynamicTableComponent * * @description * * Definição da estrutura de retorno da url ou método executado através da * propriedade `beforeDuplicate`. */ interface PoPageDynamicTableBeforeDuplicate { /** * Nova rota para navegação que substituirá a definida anteriormente em `duplicate`. * * > Os valores a serem duplicados serão enviados via query string, exceto para aqueles definidos como `key: true`. */ newUrl?: string; /** * Define se deve ou não executar a ação de duplicação de recurso (*duplicate*) */ allowAction?: boolean; /** * Objeto com as novas propriedades para duplicação, o mesmo substituirá o objeto atual. * * > Essa opção não abrange campos configurados com `key: true`. * * > Os novos valores a serem duplicados serão enviados via query string. * */ resource?: any; } /** * @usedBy PoPageDynamicTableComponent * * @description * * Definição da estrutura de retorno da url ou método executado através da * propriedade `beforeRemoveAll`. */ interface PoPageDynamicTableBeforeRemoveAll { /** * Nova rota para enviar o `remove all`, deve substituir a rota definida anteriormente. * * Caso o `remove all` seja configurado como função e for passado o atributo `newUrl` * a função será ignorada e o comando será enviado pela rota definida em `newUrl` * */ newUrl?: string; /** * Define se deve ou não executar a ação de exclusão `(remove all)` */ allowAction?: boolean; /** * Lista com as keys dos recursos que serão enviados para a ação `removeAll` * que por sua vez excluirá os itens da tabela. * Deve substituir a lista selecionada na tela pelo usuário. * * A lista é construída com todas as propriedades marcadas com o atributo `key: true` * na sua definição. * Por exemplo: * * - Recursos com as propriedades id e name definidas como *key*: * ``` * [{ id: 1, name: 'Mario' },{ id: 2, name: 'Gabriel' }] * ``` * * Esse recurso será passado para a ação `removeAll` também se for um array vazio `[]` */ resources?: Array; } /** * @usedBy PoPageDynamicTableComponent * * @description * * Interface para as ações do componente po-page-dynamic-table. */ interface PoPageDynamicTableActions { /** * @description * * Rota ou função para exibição do recurso em detalhe, caso seja preenchida irá habilitar a ação de visualização na tabela. * * > A rota deve conter um parâmetro chamando id. * * ``` * actions = { * detail: 'detail/:id' * }; * ``` */ detail?: string | ((id: string, resource: any) => void); /** * @description * * Rota ou método que será chamado antes de duplicar um recurso (duplicate). O método recebe os parâmetros `key` e também um objeto com as propriedades marcadas com `duplicate: true`. * * Tanto o método como a API devem retornar um objeto com a definição de `PoPageDynamicTableBeforeDuplicate`. * * > A url será chamada via POST junto com a key especificada no metadata, por exemplo: `POST {beforeDuplicate}/{key}`. * * Caso o desenvolvedor queira que apareça alguma mensagem nessa ação ele pode criá-la na função chamada pela **beforeDuplicate** * ou definir a mensagem no atributo `_messages` na resposta da API conforme definido * em [Guia de implementação de APIs](https://po-ui.io/guides/api#successMessages) */ beforeDuplicate?: string | ((key: string, resource: any) => PoPageDynamicTableBeforeDuplicate); /** * @description * * Rota ou função para duplicação do recurso, caso seja preenchida irá habilitar a ação de duplicação na tabela. * * > Os valores a serem duplicados serão enviados via query string, exceto para aqueles definidos como `key: true` no metadata. * * ``` * actions = { * duplicate: 'duplicate' * }; * ``` * * Se for passado um método: * - receberá como parâmetro na chamada do método um objeto com as propriedades marcadas com `duplicate: true`, exceto para aquelas definidas como `key: true` no metadata. * - é responsabilidade do desenvolvedor implementar a navegação e/ou envio dos dados * para o servidor ou outro comportamento desejado. */ duplicate?: string | ((resource: any) => void); /** * @description * * Rota ou método que será chamado antes de editar um recurso (edit). * * Tanto o método como a API devem retornar um objeto com a definição de `PoPageDynamicTableBeforeEdit`. * * > A url será chamada via POST junto com a key especificada no metadata, por exemplo: `POST {beforeEdit}/{key}`. * * Caso o desenvolvedor queira que apareça alguma mensagem nessa ação ele pode criá-la na função chamada pela **beforeEdit** * ou definir a mensagem no atributo `_messages` na resposta da API conforme definido * em [Guia de implementação de APIs](https://po-ui.io/guides/api#successMessages) */ beforeEdit?: string | ((id: any, resource: any) => PoPageDynamicTableBeforeEdit); /** * @description * * Rota ou função para edição do recurso, caso seja preenchida irá habilitar a ação de edição na tabela. * * > A rota deve conter um parâmetro chamando id. * * ``` * actions = { * edit: 'edit/:id' * }; * ``` * * Na função pode ser retornado um objeto representando o recurso modificado. * Dessa forma será atualizada a linha da tabela que está sendo editada. Essa opção não abrange campos configurados com `key: true`. * * > Se passada uma função, é responsabilidade do desenvolvedor implementar a navegação, edição ou outro comportamento desejado. */ edit?: string | ((id: string, resource: any) => { [key: string]: any; }); /** * @description * * Rota ou função para criar um novo recurso, caso seja preenchida sera exibido uma ação no topo da página. * * ``` * actions = { * new: 'new' * }; * ``` */ new?: string | Function; /** Habilita a ação de exclusão na tabela. */ remove?: boolean | ((id: string, resource: any) => boolean); /** Habilita a ação de exclusão em lote na página. * * Se for um valor boolean terá o seguinte comportamento: * - `true`: Habilita o botão para exclusão em lote e caso o usuário confirme * a ação irá enviar os recursos selecionados para a rota configurada * * - `false`: Desabilita o botão * * Se o valor for uma função o botão irá aparecer na tela e caso confirme * a função passada será responsável por tratar a exclusão dos recursos * no back-end e retornar um array com os itens que serão excluídos da tabela. * * A lista de itens deve ser construída com todas as propriedades * marcadas com o atributo `key: true` na sua definição das colunas. * * Por exemplo: * - Recursos com as propriedades id e name definidas como *key*: * ``` * [{ id: 1, name: 'Mario' },{ id: 2, name: 'Gabriel' }] * ``` * */ removeAll?: boolean | ((resources: Array) => Array); /** * @description * * Método/URL que deve ser chamado antes da ação de inclusão * * Tanto o método como a API devem retornar um objeto com a definição de `PoPageDynamicTableBeforeNew`. * * > A url será chamada via POST * * Caso o desenvolvedor queira que apareça alguma mensagem nessa ação ele pode criá-la na função chamada pela **beforeNew** * ou definir a mensagem no atributo `_messages` na resposta da API conforme definido * em [Guia de implementação de APIs](https://po-ui.io/guides/api#successMessages) * */ beforeNew?: string | (() => PoPageDynamicTableBeforeNew); /** * @description * * Método/URL que deve ser chamado antes da ação de exclusão * * Tanto o método como a API devem retornar um objeto com a definição de `PoPageDynamicTableBeforeRemove`. * * > A url será chamada via POST * * Caso o desenvolvedor queira que apareça alguma mensagem nessa ação ele pode criá-la na função chamada pela **beforeRemove** * ou definir a mensagem no atributo `_messages` na resposta da API conforme definido * em [Guia de implementação de APIs](https://po-ui.io/guides/api#successMessages) * */ beforeRemove?: string | ((id?: string, resource?: any) => PoPageDynamicTableBeforeRemove); /** * @description * * Método/URL que deve ser chamado antes da ação de ir para o detalhe * * Tanto o método como a API devem retornar um objeto com a definição de `PoPageDynamicTableBeforeDetail`. * * > A url será chamada via POST * * Caso o desenvolvedor queira que apareça alguma mensagem nessa ação ele pode criá-la na função chamada pela **beforeDetail** * ou definir a mensagem no atributo `_messages` na resposta da API conforme definido * em [Guia de implementação de APIs](https://po-ui.io/guides/api#successMessages) * */ beforeDetail?: string | ((id?: string, resource?: any) => PoPageDynamicTableBeforeDetail); /** * @description * * Método/URL que deve ser chamado antes de executar o evento de exclusão em lote (removeAll). * * Tanto o método como a API receberão uma lista com as keys dos recursos que serão repassados para o * `removeAll` para serem excluídos e devem retornar um objeto com a definição de * `PoPageDynamicTableBeforeRemoveAll`. * * > A URL será chamada via POST. * * Caso o desenvolvedor queira que apareça alguma mensagem nessa ação ele pode criá-la na função chamada pela **beforeRemoveAll** * ou definir a mensagem no atributo `_messages` na resposta da API conforme definido * em [Guia de implementação de APIs](https://po-ui.io/guides/api#successMessages) * */ beforeRemoveAll?: string | ((resources?: Array) => PoPageDynamicTableBeforeRemoveAll); } /** * @usedBy PoPageDynamicTableComponent * * @description * * Interface com as propriedades para adicionar uma ação customizada na página. */ interface PoPageDynamicTableCustomAction { /** * Rótulo do botão que será exibido. */ label: string; /** * Ação que será executada ao clicar no botão. * * A ação do tipo string representa um endpoint que deverá ser do tipo `POST`. * * Ao referenciar uma função, utilize em conjunto a propriedade `.bind()`, desta forma: * ``` * action: this.myFunction.bind(this) * ``` * * Tanto o endpoint quanto a função, receberá o recurso selecionado pelo usuário na tabela, caso * a propriedade `selectable` seja `true`. * * > Ao utilizar a propriedade `url` e a `action`, somente a `action` será executada. */ action?: string | ((resources?: any) => void); /** * Rota para o qual será redirecionado ao clicar no botão. * * > Ao utilizar a propriedade `url` e a `action`, somente a `action` será executada. */ url?: string; /** * Ao utilizar essa propriedade ela habilita a seleção na tabela e também desabilita * o botão de ação caso nenhum recurso for selecionado. */ selectable?: boolean; /** * @description * * Define um ícone que será exibido ao lado esquerdo do rótulo. * * É possível usar qualquer um dos ícones da [Biblioteca de ícones](https://po-ui.io/icons). conforme exemplo abaixo: * ``` * * * ``` * * Também é possível utilizar outras fontes de ícones, por exemplo a biblioteca Font Awesome, da seguinte forma: * ``` * * * ``` * * Outra opção seria a customização do ícone através do `TemplateRef`, conforme exemplo abaixo: * component.html: * ``` * * * * * * ``` * component.ts: * ``` * @ViewChild('iconTemplate', { static: true } ) iconTemplate : TemplateRef; * * myProperty = [ * { * label: 'FA ICON', * icon: this.iconTemplate * } * ]; * ``` */ icon?: string | TemplateRef; /** * @description * * Define se a ação será visível. * * > Caso o valor não seja especificado a ação será visível. * * Opções para tornar a ação visível ou não: * * - Função que deve retornar um booleano. * * - Informar diretamente um valor booleano. * */ visible?: boolean | Function; } /** * @usedBy PoPageDynamicTableComponent * * @description * * Interface com as propriedades para adicionar uma ação customizada na tabela da página. */ interface PoPageDynamicTableCustomTableAction { /** * Rótulo do botão que será exibido. */ label: string; /** * Ação que será executada ao clicar no botão. * * A ação do tipo string representa um endpoint que deverá ser do tipo `POST`. * * Ao referenciar uma função, utilize em conjunto a propriedade `.bind()`, desta forma: * ``` * action: this.myFunction.bind(this) * ``` * * Tanto o endpoint quanto a função recebem o recurso da linha que a ação foi disparada. * Podem também retornar o recurso com dados alterados que, consequentemente, serão atualizados na tabela. * * > Ao utilizar a propriedade `url` e a `action`, somente a `action` será executada. */ action?: string | ((resource?: any) => any); /** * Função que deve retornar um booleano para habilitar ou desabilitar a ação para o registro selecionado. * * Também é possível informar diretamente um valor booleano que vai habilitar ou desabilitar a ação para todos os registros. */ disabled?: boolean | Function; /** * Rota para o qual será redirecionado ao clicar no botão. * * > Ao utilizar a propriedade `url` e a `action`, somente a `action` será executada. */ url?: string; /** * Permite concatenar o valor de propriedades definidas como keys na url via path parameter. * * Caso exista a necessidade de se utiizar mais de uma key, a concatenação entre as keys será separado por vírgulas, conforme exemplo: `/cidade/2,Joinville` * * > Poderá ser utilizada somente em conjunto com a propriedade PoPageDynamicTableCustomTableAction.url, tanto para URL interna quanto url externa. */ concatKeys?: boolean; /** * @description * * Define um ícone que será exibido ao lado esquerdo do rótulo. * * É possível usar qualquer um dos ícones da [Biblioteca de ícones](https://po-ui.io/icons). conforme exemplo abaixo: * ``` * * * ``` * * Também é possível utilizar outras fontes de ícones, por exemplo a biblioteca Font Awesome, da seguinte forma: * ``` * * * ``` * * Outra opção seria a customização do ícone através do `TemplateRef`, conforme exemplo abaixo: * component.html: * ``` * * * * * * ``` * component.ts: * ``` * @ViewChild('iconTemplate', { static: true } ) iconTemplate : TemplateRef; * * myProperty = [ * { * label: 'FA ICON', * icon: this.iconTemplate * } * ]; * ``` */ icon?: string | TemplateRef; /** * @description * * Define se a ação será visível. * * > Caso o valor não seja especificado a ação será visível. * * Opções para tornar a ação visível ou não: * * - Função que deve retornar um booleano. * * - Informar diretamente um valor booleano. * */ visible?: boolean | Function; } /** * @docsExtends PoPageDynamicTableField * * @usedBy PoPageDynamicTableComponent * * @ignoreExtendedDescription * * @description * * Interface para a customização de uma página dinâmica que permite atribuir valores iniciais aos filtros de busca avançada. */ interface PoPageDynamicTableFilters extends PoPageDynamicTableField { /** * Define um Valor inicial para um filtro de busca avançada. */ initValue?: any; /** * @optional * * @description * * Controla se o filtro será fixo, ou seja, não poderá ser alterado pelo usuário no filtro avançado. * Caso seja definido um valor true, o filtro não será apresentado na tela de filtro avançado, porém continuará sendo utilizado como filtro. * Por esse motivo deverá ser utilizado em conjunto com as propriedades `filter` e `initValue`. * * @default `false` */ fixed?: boolean; } /** * @usedBy PoPageDynamicTableComponent * * @description * * Interface para as propriedades de uma página dinâmica. */ interface PoPageDynamicTableOptions { /** * Lista dos campos usados na tabela e busca avançada. * * Caso precise alterar um field que já exista deve ser passado o atributo `property` com o mesmo conteúdo do original. */ fields?: Array; /** * Ações que o usuário poderá executar na página através de botões. */ actions?: PoPageDynamicTableActions; /** * Objeto com propriedades do breadcrumb. * * Caso esse atributo seja utilizado ele sempre irá substituir o original. */ breadcrumb?: PoBreadcrumb; /** * Título da página. * * Caso esse atributo seja utilizado ele sempre irá substituir o original. */ title?: string; /** * Mantém na modal de Busca Avançada os valores preenchidos do último filtro realizado pelo usuário. * * Caso esse atributo seja utilizado ele sempre irá substituir o original. */ keepFilters?: boolean; /** * Permite a utilização da pesquisa rápida junto com a pesquisa avançada. * * Desta forma, ao ter uma pesquisa avançada estabelecida e ser * preenchido a pesquisa rápida, o filtro será concatenado adicionando a pesquisa * rápida também na lista de `disclaimers` a aplicando uma nova busca com a concatenação. * * Por exemplo, com os seguintes filtros aplicados: * - filtro avançado: `{ name: 'Mike', age: '12' }` * - filtro rápido: `{ search: 'paper' }` * * A requisição dos dados na API ficará com os parâmetros: * ``` * page=1&pageSize=10&name=Mike&age=12&search=paper * ``` */ concatFilters?: boolean; /** * Oculta o botão para remover todos os *disclaimers*. */ hideRemoveAllDisclaimer?: boolean; /** * Lista de filtros que terão a opção de fechar ocultada * em seu respectivo disclaimer. Utilizar o atributo `property` do campo. * * Exemplo de utilização: * ``` * ['city','name']; * ``` */ hideCloseDisclaimers?: Array; /** * Lista de ações customizadas da página que serão incorporadas às ações informadas através da propriedade `actions` * * Essas ações ficam localizadas na parte superior da página em botões com ações. * * Exemplo de utilização: * ``` * [ * { label: 'Export', action: this.export.bind(this) }, * { label: 'Print', action: this.print.bind(this) } * ]; * ``` */ pageCustomActions?: Array; /** * Lista de ações customizadas da tabela que serão incorporadas às ações informadas através da propriedade `actions`. * * Exemplo de utilização: * ``` * [ * { label: 'Apply Discount', action: this.applyDiscount.bind(this) }, * { label: 'Details', action: this.details.bind(this) } * ]; * ``` */ tableCustomActions?: Array; /** * Largura do campo de busca, utilizando o *Grid System*, * e limitado ao máximo de 6 colunas. O tamanho mínimo é controlado * conforme resolução de tela para manter a consistência do layout. */ quickSearchWidth?: number; } declare class PoPageDynamicListBaseComponent { /** Objeto com propriedades do breadcrumb. */ breadcrumb?: PoBreadcrumb; /** Endpoint da API dos recursos que serão exibidos. */ /** * @description * * Endpoint usado pelo template para requisição dos recursos que serão exibidos. * * Ao realizar requisições de busca, podem ser enviados os parâmetros (caso possuam valor): `page`, `pageSize`, `search` e `order`. * * Caso a coluna estiver ordenada descendentemente será enviada da seguinte forma: `-name`, se for ordenada * ascendentemente será enviada apenas com o nome da coluna, por exemplo: `name`. * * Exemplo de uma requisição de busca: * * > `GET {end-point}/{resource}?page=1&pageSize=10&search=components&order=-name` * * Caso a ação `remove` estiver configurada, será feito uma requisição de exclusão nesse mesmo endpoint passando os campos * setados como `key: true`. * * > `DELETE {end-point}/{keys}` * * ``` * * * ``` * * Resquisição disparada, onde a propriedade `id` é igual a 2: * * ``` * DELETE /api/po-samples/v1/people/2 HTTP/1.1 * Host: localhost:4000 * Connection: keep-alive * Accept: application/json, text/plain * ... * ``` * * Para a ação `removeAll`, será feito uma requisição de exclusão em lote para esse mesmo endpoint passando, uma lista * de objetos com os campos setados como `key: true` via `payload`. * * > `DELETE {end-point}` * * > `Payload: [ {key}, {key} ... {key} ]` * * ``` * * * ``` * * Resquisição disparada, onde foram selecionados 3 itens para serem removidos: * * ``` * DELETE /api/po-samples/v1/people HTTP/1.1 * Host: localhost:4000 * Connection: keep-alive * Accept: application/json, text/plain * ... * ``` * * Request payload: * * ``` * [{"id":2},{"id":4},{"id":5}] * ``` * * > Caso esteja usando metadados com o template, será disparado uma requisição na inicialização do template para buscar * > os metadados da página passando o tipo do metadado esperado e a versão cacheada pelo browser. * > * > `GET {end-point}/metadata?type=list&version={version}` */ serviceApi: string; /** Título da página. */ title: string; /** * @optional * * @description * Evento disparado ao fechar o popover do gerenciador de colunas após alterar as colunas visíveis. * * O componente envia como parâmetro um array de string com as colunas visíveis atualizadas. * Por exemplo: ["idCard", "name", "hireStatus", "age"]. */ changeVisibleColumns: EventEmitter; /** * @optional * * @description * Evento disparado ao alterar o estado de fixação de uma coluna no gerenciador de colunas. * * O componente envia como parâmetro um array de string com as propriedades das colunas fixas. * Por exemplo: ["name", "age"]. * * > Incompatível com `p-hide-action-fixed-columns`. Quando esta propriedade estiver ativa, o evento não será disparado. */ changeFixedColumns: i0.OutputEmitterRef; /** * @optional * * @description * Evento disparado ao clicar no botão de restaurar padrão no gerenciador de colunas. * * O componente envia como parâmetro um array de string com as colunas configuradas inicialmente. * Por exemplo: ["idCard", "name", "hireStatus", "age"]. */ columnRestoreManager: EventEmitter; /** * @optional * * @description * * Evento executado ao ordenar colunas da tabela. * * Recebe um objeto `{ column, type }` onde: * * - column (`PoTableColumn`): objeto da coluna que foi clicada/ordenada. * - type (`PoTableColumnSortType`): tipo da ordenação. */ sortBy: EventEmitter; private _autoRouter; private _columns; private _duplicates; private _fields; private _filters; private _keys; /** * @optional * * @description * * Cria automaticamente as rotas de edição (novo/duplicate) e detalhes caso sejam definidas ações na propriedade `p-actions` * * As rotas criadas serão baseadas na propriedade `p-actions`. * * > Para o correto funcionamento não pode haver nenhuma rota coringa (`**`) especificada. * * @default false */ set autoRouter(value: boolean); get autoRouter(): boolean; /** * @optional * * @description * * Lista dos campos usados na tabela e busca avançada. * * * > Caso não seja definido fields a tabela assumirá o comportamento padrão. */ set fields(fields: Array); get fields(): Array; set columns(value: any[]); get columns(): any[]; set duplicates(value: Array); get duplicates(): Array; set filters(value: Array); get filters(): Array; set keys(value: Array); get keys(): Array; private setFieldsProperties; /** * Ordena um array de colunas com base na propriedade `order` de cada coluna. * * Este método é utilizado para organizar as colunas de uma tabela ou qualquer coleção similar * que necessite de ordenação baseada em um critério numérico definido pela propriedade `order`. * A ordenação segue as seguintes regras: * * 1. Colunas que possuem a propriedade `order` com um valor numérico válido e maior que zero * são ordenadas em ordem crescente de acordo com este valor. * * 2. Colunas que não possuem a propriedade `order` ou que possuem um valor inválido ou não numérico * para esta propriedade são consideradas iguais em termos de ordenação e mantêm a ordem original * em que apareceram no array fornecido. * * 3. No caso de duas colunas com valores de `order` válidos e idênticos, a ordem entre essas duas colunas * é determinada pela sua ordem original no array fornecido. * * @param columns Array de colunas a ser ordenado. Cada coluna é um objeto que pode conter uma propriedade `order`. * O tipo `Array` é utilizado aqui para permitir flexibilidade nos objetos de coluna que podem ser passados, * mas espera-se que cada objeto tenha pelo menos uma propriedade `order` para a ordenação adequada. * * @returns Um novo array de colunas ordenado com base na propriedade `order`. */ private sortColumnsByOrder; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; } /** * @docsExtends PoPageDynamicListBaseComponent * * @description * * O `po-page-dynamic-table` é uma página que exibe uma lista de registros em uma tabela baseado em uma lista de fields, * o mesmo também suporta metadados conforme especificado na documentação. * * ### Utilização via rota * * Ao utilizar as rotas para inicializar o template, o `page-dynamic-table` disponibiliza propriedades que devem ser fornecidas no arquivo de configuração de rotas da aplicação, para * poder especificar o endpoint dos dados e dos metadados que serão carregados na inicialização. * * Exemplo de utilização: * * Arquivo de configuração de rotas da aplicação: `app-routing.module.ts` * ``` * const routes: Routes = [ * { * path: 'people', * component: PoPageDynamicTableComponent, * data: { * serviceApi: 'http://localhost:3000/v1/people', // endpoint dos dados * serviceMetadataApi: 'http://localhost:3000/v1/metadata', // endpoint dos metadados utilizando o método HTTP Get * serviceLoadApi: 'http://localhost:3000/load-metadata' // endpoint de customizações dos metadados utilizando o método HTTP Post * } * }, * { * path: 'home', * component: HomeExampleComponent * } * ]; * * ``` * O componente primeiro irá carregar o metadado da rota definida na propriedade serviceMetadataApi * e depois irá buscar da rota definida na propriedade serviceLoadApi. * * A requisição dos metadados é feita na inicialização do template para buscar os metadados da página passando o * tipo do metadado esperado e a versão cacheada pelo browser. * * > Caso o servidor retornar um erro ao recuperar os metadados, serão repassados os metadados salvos em cache, * se o cache não existir será disparada uma notificação. * * O formato esperado na resposta da requisição está especificado na interface * [PoPageDynamicTableMetadata](/documentation/po-page-dynamic-table#po-page-dynamic-table-metadata). Por exemplo: * * ``` * { * version: 1, * title: 'Person Table', * fields: [ * { property: 'id', key: true, disabled: true }, * { property: 'status' }, * { property: 'name' }, * { property: 'nickname' }, * { property: 'birthdate', label: 'Birth date' }, * { property: 'genre' }, * { property: 'city' }, * { property: 'country' } * ], * keepFilters: true * } * ``` * * > Caso o endpoint dos metadados não seja especificado, será feito uma requisição utilizando o `serviceApi` da seguinte forma: * ``` * GET {end-point}/metadata?type=list&version={version} * ``` * * #### Tokens customizáveis * * > 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 | * |---------------------|---------------------------------------------|---------------------------------------| * | **Header** | | | * | `--padding` | Espaçamento do header | `var(--spacing-xs) var(--spacing-md)` | * | `--gap` | Espaçamento entre os breadcrumbs e o título | `var(--spacing-md)` | * | `--gap-actions` | Espaçamento entre as ações | `var(--spacing-xs)` | * | `--font-family` | Família tipográfica do título | `var(--font-family-theme)` | * | **Content** | | | * | `--padding-content` | Espaçamento do conteúdo | `var(--spacing-xs) var(--spacing-sm)` | * * @example * * * * * * * * * * * * * * * * * * * * * * * * * * */ declare class PoPageDynamicTableComponent extends PoPageDynamicListBaseComponent implements OnInit, OnDestroy { private readonly router; private readonly activatedRoute; private readonly poDialogService; private readonly poNotification; private readonly poPageDynamicService; private readonly poPageCustomizationService; private readonly poPageDynamicTableActionsService; /** * Função ou serviço que será executado na inicialização do componente. * * A propriedade aceita os seguintes tipos: * - `string`: *Endpoint* usado pelo componente para requisição via `POST`. * - `function`: Método que será executado. * * O retorno desta função deve ser do tipo `PoPageDynamicTableOptions`, * onde o usuário poderá customizar novos campos, breadcrumb, title e actions * * Por exemplo: * * ``` * getPageOptions(): PoPageDynamicTableOptions { * return { * actions: * { new: 'new', edit: 'edit/:id', remove: true }, * fields: [ * { property: 'idCard', gridColumns: 6 } * ] * }; * } * * ``` * Para referenciar a sua função utilize a propriedade `bind`, por exemplo: * ``` * [p-load]="onLoadOptions.bind(this)" * ``` */ onLoad: string | (() => PoPageDynamicTableOptions); /** * @optional * * @description * * Mantém na modal de `Busca Avançada` os valores preenchidos do último filtro realizado pelo usuário. * * @default `false` */ keepFilters: boolean; /** * @optional * * @description * * Define que a coluna de ações ficará no lado direito da tabela. * * @default `false` */ actionRight: boolean; /** * @optional * * @description * * Permite a utilização da pesquisa rápida junto com a pesquisa avançada. * * Desta forma, ao ter uma pesquisa avançada estabelecida e ser * preenchido a pesquisa rápida, o filtro será concatenado adicionando a pesquisa * rápida também na lista de `disclaimers` a aplicando uma nova busca com a concatenação. * * Por exemplo, com os seguintes filtros aplicados: * - filtro avançado: `{ name: 'Mike', age: '12' }` * - filtro rápido: `{ search: 'paper' }` * * A requisição dos dados na API ficará com os parâmetros: * ``` * page=1&pageSize=10&name=Mike&age=12&search=paper * ``` * * @default `false` */ concatFilters: boolean; /** * @optional * * @description * * Permite que o gerenciador de colunas, responsável pela definição de quais colunas serão exibidas, seja escondido. * * @default `false` */ hideColumnsManager: boolean; /** * @optional * * @description * * Oculta o botão para remover todos os *disclaimers* do grupo. * * > Por padrão, o mesmo é exibido à partir de dois ou mais *disclaimers* com a opção `hideClose` habilitada. * * @default `false` */ hideRemoveAllDisclaimer: boolean; /** * @optional * * @description * * Se verdadeiro, ativa a funcionalidade de scroll infinito para a tabela e o botão "Carregar Mais" deixará de ser exibido. Ao chegar no fim da tabela * executará a função `p-show-more`. * * **Regras de utilização:** * - O scroll infinito só funciona para tabelas que utilizam a propriedade `p-height` e que possuem o scroll já na carga inicial dos dados. * * @default `false` */ infiniteScroll: boolean; hasNext: boolean; items: any[]; literals: any; pageActions: Array; tableActions: Array; private _actions; private _pageCustomActions; private _height; private _oldQuickSearchParam; private _quickSearchParam; private _quickSearchValue; private _quickSearchWidth; private _tableCustomActions; private page; private currentPage; private itemSelectedAction; private params; private sortedColumn; private readonly subscriptions; private hasCustomActionWithSelectable; private _componentsSize?; private _initialComponentsSize?; private _customPageListActions; private _customTableActions; private _defaultPageActions; private _defaultTableActions; private _hideCloseDisclaimers; private _draggable; private _virtualScroll?; private set defaultPageActions(value); private set defaultTableActions(value); private set customPageListActions(value); private set customTableActions(value); /** * @optional * * @description * * Ações da página e da tabela. * > Caso utilizar a ação padrão de excluir, a mesma será exibida por último na tabela. */ set actions(value: PoPageDynamicTableActions); get actions(): PoPageDynamicTableActions; /** * @optional * * @description * * Define o tamanho dos componentes de formulário no template: * - `small`: aplica a medida small de cada componente (disponível apenas para acessibilidade AA). * - `medium`: aplica a medida medium de cada componente. * * > 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 componentsSize(value: string); get componentsSize(): string; /** * @optional * * @description * * Lista de ações customizadas da página que serão incorporadas às ações * informadas através da propriedade `p-actions`. * * Essas ações ficam localizadas na parte superior da página em botões com ações. * * Exemplo de utilização: * ``` * [ * { label: 'Export', action: this.export.bind(this) }, * { label: 'Print', action: this.print.bind(this) } * ]; * ``` */ set pageCustomActions(value: Array); get pageCustomActions(): Array; /** * @optional * * @description * * Lista de ações customizadas na tabela da página que serão incorporadas às ações * informadas através da propriedade `p-actions`. * * Exemplo de utilização: * ``` * [ * { label: 'Apply discount', action: this.applyDiscount.bind(this) }, * { label: 'Details', action: this.details.bind(this) } * ]; * ``` * > Caso utilizar a ação padrão de excluir, a mesma será exibida por último na tabela. */ set tableCustomActions(value: Array); get tableCustomActions(): Array; /** * @optional * * @description * * Largura do campo de busca, utilizando o *Grid System*, * e limitado ao máximo de 6 colunas. O tamanho mínimo é controlado * conforme resolução de tela para manter a consistência do layout. */ set quickSearchWidth(value: number); get quickSearchWidth(): number; /** * @optional * * @description * * Define a altura da tabela em *pixels* e fixa o cabeçalho. */ set height(value: number); get height(): number; /** * @optional * * @description * * Lista de filtros que terão a opção de fechar ocultada * em seu respectivo disclaimer. Utilizar o atributo `property` do campo. * * Exemplo de utilização: * ``` * ['city','name']; * ``` */ set hideCloseDisclaimers(value: Array); get hideCloseDisclaimers(): Array; /** * @optional * * @description * * Identificador do parâmetro enviado ao serviço ao realizar uma busca rápida. * * @default 'search' */ set quickSearchParam(value: string); get quickSearchParam(): string; /** * @optional * * @description * * Valor padrão na busca rápida ao inicializar o componente * */ set quickSearchValue(value: string); get quickSearchValue(): string; /** * @optional * * @description * * Objeto com as literais usadas no `po-page-dynamic-table`. * * Existem duas maneiras de customizar o componente, passando um objeto com todas as literais disponíveis: * * ``` * const customLiterals: PoPageDynamicSearchLiterals = { * disclaimerGroupTitle: 'Filtros aplicados:', * filterTitle: 'Filtro avançado', * filterCancelLabel: 'Fechar', * filterConfirmLabel: 'Aplicar', * quickSearchLabel: 'Valor pesquisado:', * searchPlaceholder: 'Pesquise aqui' * }; * ``` * * Ou passando apenas as literais que deseja customizar: * * ``` * const customLiterals: PoPageDynamicSearchLiterals = { * filterTitle: 'Filtro avançado' * }; * ``` * * E para carregar as literais customizadas, basta apenas passar o objeto para o componente. * * ``` * * * ``` * * > O valor padrão será traduzido de acordo com o idioma configurado no [`PoI18nService`](/documentation/po-i18n) ou *browser*. */ searchLiterals: PoPageDynamicSearchLiterals; /** * @optional * * @description * * Define o espaçamento interno das células, impactando diretamente na altura das linhas do table. Os valores * permitidos são definidos pelo enum **PoTableColumnSpacing**. * * > Em nível de acessibilidade **AA**, caso o valor de `p-spacing` não seja definido, o valor padrão será * > `extraSmall` nos seguintes cenários: * > - Quando o valor de `p-components-size` for `small`; * > - Quando o valor padrão dos componentes for configurado como `small` no * > [serviço de tema](https://po-ui.io/documentation/po-theme). * * @default `medium` */ spacing: string; /** * @optional * * @description * * Habilita ou desabilita a quebra automática de texto. Quando ativada, o texto que excede * o espaço disponível é transferido para a próxima linha em pontos apropriados para uma * leitura clara. * * > Incompatível com `virtual-scroll`, que requer altura fixa nas linhas. * * @default `false` */ textWrap?: boolean; /** * @optional * * @description * * Habilita o modo drag and drop para as colunas da tabela. * */ set draggable(value: boolean); get draggable(): boolean; /** * @optional * * @description * * Habilita o `virtual-scroll` na tabela para melhorar a performance com grandes volumes de dados. * Requer altura (`p-height`) para funcionar corretamente. * * > Incompatível com `p-text-wrap` e `master-detail`, pois o `virtual-scroll` exige altura fixa nas linhas. * * @default `true` */ set virtualScroll(value: boolean); get virtualScroll(): boolean; /** * @optional * * @description * * Controla a visibilidade dos filtros fixos na página. * * - Quando `true` (default), todos os filtros, incluindo os fixos, são exibidos, permitindo que o usuário visualize os filtros aplicados. * - Quando `false`, os filtros fixos são ocultados, não sendo exibidos na interface, mas ainda sendo aplicados como filtros nas requisições. * * Esta propriedade trabalha em conjunto com a propriedade `fixed` dos filtros individuais. Filtros marcados como `fixed: true` não serão exibidos na interface do filtro avançado quando `visibleFixedFilters` for `false`, mas continuarão a ser aplicados de forma transparente ao usuário. Dessa forma, permite-se maior flexibilidade no controle de quais filtros devem ser visíveis ao usuário ou devem ser aplicados permanentemente sem interferência. * * **Exemplo de uso:** * ```html * * * ``` */ visibleFixedFilters: boolean; constructor(); ngOnInit(): void; ngOnDestroy(): void; onAdvancedSearch(filter: any): void; onChangeDisclaimers(disclaimers: any): void; onQuickSearch(termTypedInQuickSearch: any): void; onSort(sortedColumn: PoTableColumnSort): void; onChangeVisibleColumns(value: any): void; onChangeFixedColumns(value: Array): void; onColumnRestoreManager(value: Array): void; onSortBy(sortedColumn: PoTableColumnSort): void; showMore(): void; protected onThemeChange(): void; get enableSelectionTable(): boolean; get hasActionRemoveAll(): boolean; /** * Função que realiza a atualização dos dados da tabela. * * Para utilizá-la é necessário capturar a instância do `page dynamic table`, como por exemplo: * * ``` html * * ``` * * ``` javascript * import { PoPageDynamicTableComponent, PoDynamicFormField } from '@po-ui/ng-components'; * * ... * * @ViewChild('dynamicTable', { static: true }) dynamicTable: PoPageDynamicTableComponent; * * pageCustomActions: Array = [ * { * label: 'Update', * action: this.updateTable.bind(this), * icon: 'an-arrows-clockwise' * }] * * updateTable() { * this.dynamicTable.updateDataTable(); * } * ``` * * * @param {{page: number, key: value }} filter Propriedade para envio de um filtro customizado. * Exemplo de envio: * *``` * this.dynamicTable.updateDataTable({page: 3, search: 'Brasil'}); * ``` * Caso não seja passado um filtro customizado para o método `updateDataTable` a tabela será atualizada conforme a página do ultimo item modificado. */ updateDataTable(filter?: any): void; private confirmRemove; private confirmRemoveAll; private formatUniqueKey; private getOrderParam; private loadData; private getMetadata; private navigateTo; private createConcatenatedUrl; private openDetail; private executeDetail; private getPathFromNewUrl; private openDuplicate; private executeDuplicate; private openEdit; private executeEditAction; private openEditUrl; private modifyUITableItem; private openNew; private executeNew; /** * Caso exista mais de um identificador, será concatenado com '|'. * * Ex: { id: 1, company: 'po' } * * Para o endpoint /resources/:id será executada a url /resources/1|po */ private remove; private deleteAction; private removeFromUI; private removeAll; private getSelectedItemsKeys; private returnResourcesKeys; private deleteAllAction; private removeLocalItems; private resolveUrl; private setPageActions; private transformCustomActionsToPageListAction; private transformTableCustomActionsToTableActions; private isDisablePageCustomAction; private callPageCustomAction; private callTableCustomAction; private setRemoveAllAction; private disableRemoveAll; private setTableActions; private loadDataFromAPI; private getInitialValuesFromFilter; private loadOptionsOnInitialize; private getPoDynamicPageOptions; private showRemove; private updateFilterValue; private updatePageActions; private updateTableActions; private applySizeBasedOnA11y; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; static ngAcceptInputType_keepFilters: any; static ngAcceptInputType_actionRight: any; static ngAcceptInputType_concatFilters: any; static ngAcceptInputType_hideColumnsManager: any; static ngAcceptInputType_hideRemoveAllDisclaimer: any; static ngAcceptInputType_infiniteScroll: any; static ngAcceptInputType_textWrap: any; } /** * @description * * Módulo do template do po-page-dynamic-table. */ declare class PoPageDynamicTableModule { static ɵfac: i0.ɵɵFactoryDeclaration; static ɵmod: i0.ɵɵNgModuleDeclaration; static ɵinj: i0.ɵɵInjectorDeclaration; } interface PoJobSchedulerInternal { [property: string | number]: any; dayOfMonth?: number; frequency?: object; rangeLimitHour?: string; rangeLimitDay?: number; daysOfWeek?: Array; executionParameter?: object; firstExecution: Date; firstExecutionHour: string; hour?: string; periodicity: string; processID?: string; recurrent: boolean; } /** * @usedBy PoPageJobSchedulerComponent * * @description * * Estrutura do *payload* enviado nas requisições para salvar e/ou atualizar as tarefas do *Job Scheduler*. */ interface PoJobScheduler { /** * Define uma repetição diária. */ daily?: { hour: number; minute: number; }; /** * Objeto contendo os nomes das propriedades dos parâmetros e os valores preenchidos pelo usuário. */ executionParameter?: object; /** * Data da primeira execução. */ firstExecution?: string; /** * Define uma repetição mensal. */ monthly?: { day: number; hour: number; minute: number; }; /** * Identificador do processo. */ processID: string; /** * Permite uma execução recorrente. */ recurrent?: boolean; /** * Define uma repetição semanal. */ weekly?: { daysOfWeek: Array; hour: number; minute: number; }; } declare class PoPageJobSchedulerService { private readonly http; readonly headers: HttpHeaders; private endpoint; configServiceApi(config?: { endpoint?: string; }): void; createResource(resource: any): Observable; getHeadProcesses(): Observable; getParametersByProcess(processId: string | number): Observable; getProcess(id: string | number): Observable; getProcesses(params?: {}): Observable; getResource(id: string | number): Observable; updateResource(id: any, resource: any): Observable; convertToJobScheduler(jobSchedulerInternal: any): PoJobScheduler; convertToJobSchedulerInternal(jobScheduler?: any): PoJobSchedulerInternal; private convertToPeriodicity; private convertToPeriodicityInternal; private getCurrentHour; private getHourFirstExecution; private removeInvalidKeys; private replaceHourFirstExecution; private returnValidExecutionParameter; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵprov: i0.ɵɵInjectableDeclaration; } /** * @description * * O `po-page-job-scheduler` é uma página para criação e atualização de agendamentos da execução de processos (Job Scheduler), * como por exemplo: a geração da folha de pagamento dos funcionários. * * Para utilizar esta página, basta informar o serviço (endpoint) para consumo, * sem a necessidade de criar componentes e tratamentos dos dados. * * Veja mais sobre os padrões utilizados nas requisições no [Guia de implementação de APIs](guides/api). * * #### Tokens customizáveis * * > 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 | * |---------------------|---------------------------------------------|---------------------------------------| * | **Header** | | | * | `--padding` | Espaçamento do header | `var(--spacing-xs) var(--spacing-md)` | * | `--gap` | Espaçamento entre os breadcrumbs e o título | `var(--spacing-md)` | * | `--gap-actions` | Espaçamento entre as ações | `var(--spacing-xs)` | * | `--font-family` | Família tipográfica do título | `var(--font-family-theme)` | * | **Content** | | | * | `--padding-content` | Espaçamento do conteúdo | `var(--spacing-xs) var(--spacing-sm)` | */ declare class PoPageJobSchedulerBaseComponent implements OnDestroy { protected poPageJobSchedulerService: PoPageJobSchedulerService; private _componentsSize?; private _initialComponentsSize?; /** Objeto com as propriedades do breadcrumb. */ breadcrumb?: PoBreadcrumb; /** * @optional * * @description * * Define o tamanho dos componentes de formulário no template: * - `small`: aplica a medida small de cada componente (disponível apenas para acessibilidade AA). * - `medium`: aplica a medida medium de cada componente. * * > 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 componentsSize(value: string); get componentsSize(): string; /** * Endpoint usado pelo componente para busca dos processos e parâmetros que serão utilizados para criação e edição dos agendamentos. * * #### Processos * * Os processos são as tarefas que estarão disponíveis para o usuário poder fazer os agendamentos. * Ao inicializar o componente, será feito uma requisição `GET` para o endpoint `{service-api}/processes`, para buscar * essa lista de processos. * * Este endpoint `{service-api}/processes` deve retornar uma lista de objetos que seguem a definição de dados abaixo: * * ``` * GET {service-api}/processes * ``` * * ``` * { * items: [ * { "processID": "ac4f", "description": "Gerar folha de pagamento" }, * { "processID": "df6l", "description": "Relatório de imposto a recolher" }, * { "processID": "dk3p", "description": "Títulos em aberto" }, * ] * } * ``` * * Desta forma será renderizado um componente para selecionar o processo e/ou filtrá-los. * * Para realizar o filtro de busca do processo, será feita uma requisição enviando o conteúdo digitado na busca através do * parâmetro `search`. Da seguinte forma: * * ``` * GET {service-api}/processes?search=relatorio * ``` * * > Veja mais sobre paginação e filtros no [Guia de implementação de APIs](guides/api). * Caso seja informada a propriedade `p-parameters` não serão realizadas as requisições de processos e nem de parametros automaticamente. * * Também é possível fazer um agendamento de um processo específico, sem que seja necessário um endpoint para busca desses * processos. Então, caso o endpoint `{service-api}/processes` não seja válido, será apresentado um campo de entrada de * texto para o usuário informar diretamente * o **identificador do processo - `processID`** e ao salvar será enviado um `POST` para o endpoint difinido `serviceApi` conforme abaixo: * * ``` * POST {service-api} * ``` * * *Request payload* - estrutura de dados enviada no corpo da requisição conforme interface `PoJobScheduler`: * * ``` * { * "daily": { "hour": 10, "minute": 12 }, * "firstExecution": "2018-12-07T00:00:01-00:00", * "recurrent": true, * "processID": "ac0405" * ... * } * ``` * * Caso seja necessário informar parâmetros e adicionar configurações no processo selecionado, será realizado um `GET` * como exemplificado abaixo. Os parâmetros devem retornar uma lista de objetos que seguem a interface * [PoDynamicFormField](/documentation/po-dynamic-form). Porém, caso utilizar a propriedade `p-parameters` o componente não * realizará a busca automática e o campo de processos não será exibido. * * ``` * GET {service-api}/processes/:id/parameters * ... * { * items: [ * { "property": "vencimento", type: "date" }, * { "property": "imposto-retido", "label": "Imposto Retido", type: "boolean" } * ] * } * ``` * * #### Salvar e Atualizar * * Para salvar o agendamento, será feita uma requisição de criação, passando os valores preenchidos pelo usuário via *payload*. * Abaixo uma requisição `POST` disparada, onde as propriedades do *Job Scheduler* foram preenchidas: * * ``` * POST {service-api} * ``` * * *Request payload* - estrutura de dados enviada no corpo da requisição conforme interface `PoJobScheduler`: * * ``` * { * "firstExecution": "2018-12-07T00:00:01-00:00", * "recurrent": true, * "monthly": { "day": 1, "hour": 10, "minute": 0 }, * "processID": "ac0405", * "rangeExecutions: { "frequency": { "type": "hour", "value": 2 }, "rangeLimit": { "hour": 18, "minute": 0, "day": 20 } } * } * ``` * * Caso queira que o componente carregue um agendamento já existente, deve ser incluído um parâmetro na rota chamado `id`. * * Exemplo de configuração de rota: * * ``` * RouterModule.forRoot([ * ... * { path: 'edit/:id', component: ExampleJobSchedulerComponent }, * ... * ], * ``` * * Baseado nisso, na inicialização do template será disparado uma requisição para buscar o recurso que será editado. * * ``` * GET {service-api}/{id} * ``` * * Ao atualizar o agendamento, será disparado um `PUT` com os dados preenchidos. * Veja abaixo uma requisição `PUT` disparada, onde a propriedade *recurrent* e *daily* foram atualizadas: * * ``` * PUT {service-api}/{id} * ``` * * *Request payload* - estrutura de dados enviada no corpo da requisição conforme interface `PoJobScheduler`: * * ``` * { * "firstExecution": "2018-12-07T00:00:01-00:00", * "recurrent": true, * "processID": "ac0405", * "monthly": { "day": 1, "hour": 10, "minute": 0 }, * "processID": "ac0405", * "rangeExecutions: { "frequency": { "type": "hour", "value": 2 }, "rangeLimit": { "hour": 18, "minute": 0, "day": 20 } } * } * ``` */ serviceApi: string; /** Título da página. */ title: string; /** * Parâmetros que serão utilizados para criação e edição dos agendamentos. * * Ao utilizar esta propriedade, o componente não buscará automaticamente os parâmetros da API e o campo para preenchimento do processo não será exibido. * */ parameters: Array; set value(value: any); /** * @optional * * @description * * Define a orientação de exibição do `po-stepper`. * * > Quando não utilizada, segue o comportamento com base nas dimensões da tela. * * > Veja os valores válidos no *enum* [PoStepperOrientation](documentation/po-stepper#stepperOrientation). * */ set stepperDefaultOrientation(value: PoStepperOrientation); get stepperDefaultOrientation(): PoStepperOrientation; /** * @optional * * @description * * Função chamada após realizar a confirmação da execução no PoPageJobScheduler. * Permite alterar os valores do model do PoPageJobScheduler antes de realizar o envio para a Api. * * > Deve retornar um objeto do tipo `PoPageJobScheduler` para ser adicionado ao model do PoPageJobScheduler. * * > Ao ser disparada, a mesma receberá por parâmetro o model do PoPageJobScheduler de interface `PoJobSchedulerInternal`. * * O contexto da função que será chamada, será o mesmo que o do `PoPageJobScheduler`, então para poder alterar * para o contexto do componente que o está utilizando, pode ser utilizado a propriedade `bind` do Javascript. * Por exemplo, para a função `beforeSend`: * * ``` * * ... * * ``` */ beforeSendAction: (model: PoJobSchedulerInternal) => PoJobSchedulerInternal; /** * @optional * * @description * * Define se o step `Agendamento` deve ser exibido como o último na sequência de steps * * > Aplicável apenas quando utilizado `PoJobSchedulerParametersTemplateDirective` */ stepExecutionLast: boolean; /** * @optional * * @description * * Evento disparado ao concluir o processo de agendamento com sucesso. */ success: EventEmitter; /** * @optional * * @description * * Evento disparado ao ocorrer um erro impossibilitando a conclusão do agendamento. * Para este evento será passado como parâmetro os detalhes do erro. */ error: EventEmitter; model: PoJobSchedulerInternal; private readonly _subscription; private _orientation; constructor(poPageJobSchedulerService: PoPageJobSchedulerService); ngOnDestroy(): void; protected onThemeChange(): void; protected loadData(id: string | number): void; protected markAsDirtyInvalidControls(controls: { [key: string]: AbstractControl; }): void; private applySizeBasedOnA11y; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; } declare class PoPageJobSchedulerLookupService implements PoLookupFilter { private readonly poPageJobSchedulerService; getFilteredItems({ filter, page, pageSize }: { filter: any; page: any; pageSize: any; }): Observable; getObjectByValue(processId: string): Observable; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵprov: i0.ɵɵInjectableDeclaration; } /** * @usedBy PoPageJobScheduler * * @description * * Esta diretiva permite personalizar o conteúdo da uma ou várias etapa(s) de parametrização do componente de PoPageJobScheduler. * * Para repassar as alterações realizadas no componente customizado ao model do PoPageJobScheduler, deve * ser atualizado os valores através da propriedade p-execution-parameter. Dessa forma as alterações serão adicionadas ao * atributo executionParameter do objeto de envio a Api. * É possível também controlar a permissão de avançar, fazendo uso da propriedade p-disable-advance. * * ``` * ... * * * ... * * * ... * * * ... * ``` * */ declare class PoJobSchedulerParametersTemplateDirective { templateRef: TemplateRef; /** * @optional * * @description * * Objeto que deve conter as alterações feitas pelo componente de template que serão repassadas dentro do atributo * `executionParameter` para envio na api. * * > O componente deve manter essa propriedade atualizada. É chamada após o avançar da etapa de parametrização. */ executionParameter: object; /** * @optional * * @default false * * @description * * Determina se deve desabilitar o botão de avançar para a próxima etapa * * > Pode ser utilizado para validar campos antes de avançar. */ disabledAdvance: boolean; /** * @optional * * @description * * Determina o label do step */ title: string; constructor(templateRef: TemplateRef); static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; } /** * @usedBy PoPageJobScheduler * * @description * * Esta diretiva permite personalizar o conteúdo de resumo das informações de parâmetro na etapa de conclusão do componente de PoPageJobScheduler. * * Essa funcionalidade costuma ser útil em casos onde a propriedade parameters não tem valor e mesmo assim é necessário exibir * as informações de resumo na etapa de conclusão. * * ``` * ... * * * ... * * * * ... * ``` * */ declare class PoJobSchedulerSummaryTemplateDirective { templateRef: TemplateRef; constructor(templateRef: TemplateRef); static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; } /** * @docsExtends PoPageJobSchedulerBaseComponent * * @example * * * * * * * * * * * */ declare class PoPageJobSchedulerComponent extends PoPageJobSchedulerBaseComponent implements OnInit, AfterContentInit { poPageDynamicLookupService: PoPageJobSchedulerLookupService; private readonly activatedRoute; private readonly poDialogService; private readonly poNotification; schedulerExecution: { form: NgForm; }; schedulerParameters: { form: NgForm; }; parametersTemplate: QueryList; jobSchedulerSummaryTemplate: PoJobSchedulerSummaryTemplateDirective; isEdit: boolean; literals: { at: string; back: string; next: string; periodicity: string; execution: string; process: string; enterProcess: string; recurrent: string; single: string; daily: string; weekly: string; monthly: string; scheduling: string; parameterization: string; conclude: string; firstExecution: string; startTime: string; endTime: string; time: string; hour: string; minute: string; day: string; endDay: string; startDay: string; weekDays: string; sunday: string; monday: string; tuesday: string; wednesday: string; thursday: string; friday: string; saturday: string; parameters: string; yes: string; no: string; notReported: string; periodicityData: string; confirmation: string; confirmSaveMessage: string; confirmUpdateMessage: string; saveNotificationSuccessUpdate: string; saveNotificationSuccessSave: string; parametersNotFound: string; frequency: string; to: string; from: string; }; publicValues: PoJobSchedulerInternal; saveOperation: Observable; step: number; parametersEmpty: boolean; stepParametersInitialized: boolean; protected steps: Array; private readonly backPageAction; private readonly concludePageAction; private readonly nextPageAction; private readonly concludePageActions; private readonly nextPageActions; jobSchedulerActions: Array; protected stepExecution: number; protected stepParameters: number; protected stepSummary: number; protected _stepExecutionLast: boolean; constructor(); get stepperOrientation(): 'horizontal' | 'vertical'; ngOnInit(): void; ngAfterContentInit(): void; changePageActionsBySteps(currentStep: number, nextStep: number): void; nextStep(stepNumber: number): void; onChangeProcess(process: { processId: string; existAPI: boolean; }): void; private checkStepExecutionLast; private confirmJobScheduler; private emitSuccessMessage; private getParametersByProcess; private hidesSecretValues; private getSteps; private getTemplateCurrent; private templateHasDisable; private isDisabledAdvance; private isDisabledBack; private isSecretParameter; private nextStepOperation; private resetJobSchedulerForm; private save; private setModelRecurrent; private setPropertiesFromTemplate; private validateStepExecution; private validateStepSchedulerParameters; private validateStepTemplateParameters; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } declare class PoPageJobSchedulerExecutionComponent implements OnInit, AfterViewInit { private readonly poPageJobSchedulerService; poPageJobSchedulerLookup: PoPageJobSchedulerLookupService; form: NgForm; dailyTemplate: any; monthlyTemplate: any; weeklyTempalte: any; componentsSize: string; isEdit: boolean; literals: any; noParameters: boolean; noCustomParamsComponent: boolean; changeProcess: EventEmitter; dayPattern: string; existProcessAPI: boolean; minDateFirstExecution: Date; periodicityOptions: Array; periodicityTemplates: { daily: TemplateRef; weekly: TemplateRef; monthly: TemplateRef; }; timePattern: string; weekDays: Array; frequencyOptions: Array; containsFrequency: boolean; frequency: string; rangeLimitHour: string; private _value; set value(value: any); get value(): any; get startDateFirstExecution(): Date; get hourLabel(): any; get dayLabel(): any; ngAfterViewInit(): void; ngOnInit(): void; onChangeContainsFrequency(containsFrequency: any): void; onChangePeriodicityOptions(periodicity: any): void; onChangeFrequencyOptions(): void; private checkExistsProcessesAPI; private getPeriodicityOptions; private getFrequencyOptions; private getWeekDays; private subscribeProcessIdValueChanges; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } declare class PoPageJobSchedulerParametersComponent implements AfterViewInit { form: NgForm; componentsSize: string; literals: any; parameters: Array; value: any; valueChange: EventEmitter; ngAfterViewInit(): void; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } declare class PoPageJobSchedulerSummaryComponent implements OnInit { private readonly datePipe; componentsSize: string; literals: any; parameters: Array; value: PoJobSchedulerInternal; noParameters: boolean; jobSchedulerSummaryTemplate: any; executionValue: string; firstExecutionValue: string; infoOrientation: PoInfoOrientation; periodicityValue: string; frequencyValue: string; rangeLimitHour: string; rangeLimitDay: string; recurrentValue: string; ngOnInit(): void; private getFrequencyValue; private getExecutionValue; private getFirstExecutionLabel; private getHourLabel; private getMonthlyLabelExecution; private getPeriodicityLabel; private getRecurrentValue; private getSorterWeekDays; private getTranslateWeekDay; private getWeekDaysLabel; private getWeeklyLabelExecution; private sortWeekDays; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } declare class PoPageJobSchedulerModule { static ɵfac: i0.ɵɵFactoryDeclaration; static ɵmod: i0.ɵɵNgModuleDeclaration; static ɵinj: i0.ɵɵInjectorDeclaration; } /** * @usedBy PoPageLoginComponent * * @description * * *Enum* para definição do tipo de autenticação. */ declare enum PoPageLoginAuthenticationType { /** Autenticação Basic */ Basic = "Basic", /** Autenticação Bearer */ Bearer = "Bearer" } /** * @usedBy PoPageLoginComponent * * @description * * Interface com a definição do Custom Field, podendo ser utilizado para informar um campo customizado no componente `po-page-login`. */ interface PoPageLoginCustomField { /** Nome da propriedade que será utilizado no campo customizado. */ property: string; /** * @optional * * @description * * Valor do campo customizado. */ value?: string | number; /** * @optional * * @description * * Mensagem que será exibida enquanto o campo customizado não estiver preenchido. */ placeholder?: string; /** * @optional * * @description * * Expressão regular para validar o campo customizado, caso a expressão não seja atendida a literal informada na * propriedade `errorPattern` será exibida. */ pattern?: string; /** * @optional * * @description * * Mensagem que será exibida quando a expressão regular informada na propriedade `pattern` não for válida. */ errorPattern?: string; /** * @optional * * @description * * Lista de opções de um `po-select`. */ options?: Array; /** * @optional * * @description * * Nesta propriedade deve ser informada a URL do serviço em que será realizado o filtro para carregamento da * lista de itens do componente `po-combo`. */ url?: 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 `po-combo`, esta propriedade será responsável pelo valor de cada item da lista. * */ fieldValue?: string; } /** * @usedBy PoPageLoginComponent * * @description * * Interface para definição das literais usadas no `po-page-login`. */ interface PoPageLoginLiterals { /** Texto que informa a quantidade de tentativas restantes no popover de aviso de bloqueio. */ attempts?: string; /** Texto exibido no popover de aviso de bloqueio, que orienta o usuário, caso ele tenha esquecido a senha, a criar uma nova senha. */ createANewPasswordNow?: string; /** Mensagem de erro apresentada quando o campo customizado está inválido */ customFieldErrorPattern?: string; /** Placeholder para o campo customizado. */ customFieldPlaceholder?: string; /** Texto que questiona o esquecimento da senha no popover de aviso de bloqueio. */ forgotYourPassword?: string; /** Texto do link de 'esqueci minha senha' exibido no popover de aviso de bloqueio. */ iForgotMyPassword?: string; /** Texto de aviso de tentativas exibido no popover de aviso de bloqueio. */ ifYouTryHarder?: string; /** Mensagem de erro apresentada quando o campo de login está inválido. */ loginErrorPattern?: string; /** Texto exibido como dica para o campo de login. */ loginHint?: string; /** Texto exibido como label do campo de login. */ loginLabel?: string; /** Placeholder do campo de login. */ loginPlaceholder?: string; /** Mensagem de erro apresentada quando o campo de password está inválido. */ passwordErrorPattern?: string; /** Texto exibido como label do campo de password. */ passwordLabel?: string; /** Placeholder do campo de password. */ passwordPlaceholder?: string; /** Texto exibido na função "Lembrar usuário". */ rememberUser?: string; /** Texto exibido como dica da função "Lembrar usuário" */ rememberUserHint?: string; /** Texto exibido no botão de confirmação da página de login. */ submitLabel?: string; /** Texto exibido no botão de confirmação da página de login quando estiver em estado de carregamento. */ submittedLabel?: string; /** Texto de ajuda para recuperação dos dados de acesso. */ forgotPassword?: string; /** Texto de destaque sobreposto à imagem de destaque. Essa opção é utilizada em conjunto com o atributo `p-background`. */ highlightInfo?: string; /** Texto exibido no link de novo cadastro. */ registerUrl?: string; /** Título do popover para aviso de bloqueio. */ titlePopover?: string; /** Texto que informa ao usuário que o mesmo será bloqueado e por quanto tempo no popover de aviso de bloqueio. */ yourUserWillBeBlocked?: string; /** Mensagem de "Boas-vindas" para o usuário que aparece acima dos campos de entrada. */ welcome?: string; /** Label do botão de suporte. */ support?: string; } /** * @usedBy PoPageLoginComponent * * @description * * Interface para especificação do tipo de recuperação de senha no `po-modal-password-recovery`. */ interface PoPageLoginRecovery { /** Definição do e-mail que é exibido na mensagem para contato de suporte. */ contactMail?: string; /** Definição da máscara do campo de telefone. */ phoneMask?: string; /** * @optional * * @description * * Enum para especificação do tipo de recuperação de senha [PoModalPasswordRecoveryType](/documentation/po-modal-password-recovery). * * > Caso não seja definido valor se assume o padrão `PoModalPasswordRecoveryType.Email`. */ type?: PoModalPasswordRecoveryType; /** * Endpoint usado pelo template **PoModalPasswordRecovery** para requisição do recurso. * * > Saiba mais em [PoModalPasswordRecovery](/documentation/po-modal-password-recovery). */ url: string; } /** * @usedBy PoPageLoginComponent * * @description * * Interface com a definição do objeto gerado pelo formulário do componente `po-page-login`. */ interface PoPageLogin { /** Login preenchido pelo usuário. */ login: string; /** Senha preenchida pelo usuário, a mesma será convertida para [hash/md5] antes de ser enviada para a aplicação. */ password: string; /** Essa propriedade informa se o usuário quer que seus dados sejam lembrados em um acesso futuro. */ rememberUser: boolean; } declare class PoPageLoginService { private readonly http; constructor(http: HttpClient); onLogin(url: string, type: PoPageLoginAuthenticationType, loginForm: PoPageLogin): Observable; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵprov: i0.ɵɵInjectableDeclaration; } /** * @description * * O componente `po-page-login` é utilizado como template para tela de login. * Com ele é possível definirmos valores para usuário, senha e definir ações para recuperação de senha e gravação de dados do usuário. * Também é possível inserir uma imagem em conjunto com um texto de destaque. * * * A propriedade `p-authentication-url` automatiza a rotina do componente e simplifica o processo para autenticação do usuário, bastando * definir uma url para requisição da autenticação. A flexibilidade e praticidade podem chegar a um nível em que o desenvolvimento * da aplicação no *client side* é desprovida de qualquer código-fonte relacionado à rotina de login de usuário. * Seu detalhamento para uso pode ser visto logo abaixo em *propriedades*. * Caso julgue necessário, pode-se também definir manualmente a rotina do componente. * * * Para que as imagens sejam exibidas corretamente, é necessário incluir o caminho delas ao projeto. Para isso, edite * o *assets* no arquivo **angular.json** da aplicação na seguinte ordem: * ``` * "assets": [ * "src/assets", * "src/favicon.ico", * { * "glob": "**\/*", * "input": "node_modules/@po-ui/style/images", * "output": "assets/images" * } * ] * ``` */ declare abstract class PoPageLoginBaseComponent implements OnDestroy { private readonly loginService; router: Router; poLanguageService: PoLanguageService; /** * O `p-background` permite inserir uma imagem de destaque ao lado direito do formulário de login, caso a propriedade * não seja preenchida o formulário será centralizado no espaço disponível. * * A fonte da imagem pode ser de um caminho local ou uma url de um servidor externo. * * Além da imagem, é possível adicionar um texto informativo por cima da imagem da imagem de destaque, para isso informe * um valor para a literal `highlightInfo`. * * > Veja mais sobre as literais na propriedade `p-literals`. * * Exemplos de valores válidos: * - **local**: `./assets/images/login-background.png` * - **url externa**: `https://po-ui.io/assets/images/login-background.png` * * > Essa propriedade é ignorada para aplicações mobile. */ background?: string; /** * @optional * * @description * * Caminho para a logomarca localizada na parte superior. * * > Caso seja indefinida o espaço se mantém preservado porém vazio. */ logo?: string; /** * @optional * * @description * * Expressão regular para validar o campo de login, caso a expressão não seja atentida, a literal `loginErrorPattern` * será exibida. * * Exemplos de valores válidos: * - email: `[expressao-regular-email]` * - cpf: `[expressao-regular-cpf]` * * > Veja a propriedade `p-literals` para customizar a literal `loginErrorPattern`. */ loginPattern?: string; /** * @optional * * @description * * Expressão regular para validar o campo de password, caso a expressão não seja atentida, a literal `passwordErrorPattern` * será exibida. * * Exemplos de valores válidos: * - Apenas números: `\d?` * - Letras mínusculas: `\z?` * * > Veja a propriedade `p-literals` para customizar a literal `passwordErrorPattern`. */ passwordPattern?: string; /** * @optional * * @description * * Caminho para a logomarca localizada no rodapé. */ secondaryLogo?: string; /** * @optional * * @description * * Evento disparado quando o usuário alterar o input do campo login. * * Esse evento receberá como parâmetro uma variável do tipo `string` com o texto informado no campo. * * > Esta propriedade será ignorada se for definido valor para a propriedade `p-authentication-url`. */ loginChange: EventEmitter; /** * Evento disparado ao submeter o formulário de login (apertando `Enter` dentro dos campos ou pressionando o botão de confirmação). * * Esse evento receberá como parâmetro um objeto do tipo `PoPageLogin` com os dados informados no formulário. * * > Esta propriedade será ignorada se for definido valor para a propriedade `p-url-recovery`. * * > Para mais detalhes consulte a documentação sobre a interface `PoPageLogin` mais abaixo. */ loginSubmit: EventEmitter; /** * @optional * * @description * * Evento disparado quando o usuário alterar o input do campo password. * * Esse evento receberá como parâmetro uma variável do tipo `string` com o texto informado no campo. * * > Esta propriedade será ignorada se for definido valor para a propriedade `p-authentication-url`. */ passwordChange: EventEmitter; /** * @optional * * @description * * Evento disparado quando o usuário alterar o idioma da página. * * Esse evento receberá como parâmetro um objeto do tipo `PoLanguage` com a linguagem selecionada. * */ languageChange: EventEmitter; /** * @optional * * @description * * Define a propriedade nativa `autocomplete` do campo como `off`. * * @default `true` */ noAutocompleteLogin: boolean; /** * @optional * * @description * * Define a propriedade nativa `autocomplete` do campo como `off`. * * > No componente `po-password` será definido como `new-password`. * * @default `true` */ noAutocompletePassword: boolean; /** * @optional * * @description * * Indica se o status do `model` do switch de lembrar o usuário será escondido visualmente. * * > Por padrão será atribuído `false`. * @default `false` */ hideLabelStatus: boolean; /** * @optional * * @description * * Permite esconder a função de espiar a senha digitada. * * @default `false` */ hidePasswordPeek: boolean; allLoginErrors: Array; allPasswordErrors: Array; customFieldObject: PoPageLoginCustomField; customFieldType: string; loginSubscription: Subscription; password: string; rememberUser: boolean; selectedLanguage: string; showExceededAttemptsWarning: boolean; private _authenticationType; private _authenticationUrl; private _blockedUrl; private _componentsSize?; private _initialComponentsSize?; private _contactEmail; private _customField; private _environment?; private _exceededAttemptsWarning?; private _hideRememberUser; private _literals; private _loading?; private _login; private _loginErrors; private _passwordErrors; private _productName; private _recovery; private _registerUrl; private _support; private _languagesList; /** * @optional * * @description * * Define o tamanho dos componentes de formulário no template: * - `small`: aplica a medida small de cada componente (disponível apenas para acessibilidade AA). * - `medium`: aplica a medida medium de cada componente. * * > 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 componentsSize(value: string); get componentsSize(): string; /** * @optional * * @description * * Ao informar um valor do tipo `string`, o mesmo será aplicado como a chave do campo customizado e utilizará * os valores padrões contidos na propriedade `literals` como `customFieldErrorPattern` e `customFieldPlaceholder`. * * Existe a possibilidade de informar um objeto que segue a definição da interface `PoPageLoginCustomField`, onde * através dos parâmetros enviados pode gerar um `po-input`, `po-combo` especificamente para serviços * ou `po-select` para valores fixos. * * Abaixo seguem os exemplos de cada tipo de campo. * * `po-input`: * * ``` * { * property: 'domain', * value: 'jv01', * placeholder: 'Enter your domain', * pattern: '[a-z]', * errorPattern: 'Invalid value' * } * ``` * * `po-combo`: * * ``` * { * property: 'domain', * value: 'jv01', * placeholder: 'Enter your domain', * url: 'https://po-ui.io/sample/api/comboOption/domains', * fieldValue: 'nickname' * } * ``` * * `po-select`: * * ``` * { * property: 'domain', * value: 'jv01', * placeholder: 'Enter your domain', * options: [{label: 'Domain 1', value: '1'}, {label: 'Domain 2', value: '2'}] * } * ``` * * Caso o customField possua options, url e fieldValue preenchidos, será priorizado o po-select * utilizando o options. * */ set customField(value: string | PoPageLoginCustomField); get customField(): string | PoPageLoginCustomField; /** * @optional * * @description * * Personaliza o e-mail que é exibido na mensagem de dica de login padrão para contato de suporte. */ set contactEmail(value: string); get contactEmail(): string; /** * @optional * * @description * * Texto customizado que fica entre a logo e a mensagem de boas-vindas. */ set productName(value: string); get productName(): string; /** * @optional * * @description * Adiciona uma `tag` abaixo do título que especifica o ambiente que o usuário está fazendo o login. * * > Essa propriedade limita o texto em 40 caracteres. */ set environment(environment: string); get environment(): string; /** * @optional * * @description * Exibe um aviso de bloqueio de acordo com a quantidade restante de tentativas. * O aviso será exibido somente se a quantidade for maior que zero. * * > Caso tenha algum valor atribuído para o atributo `p-authentication-url` e o retorno da requisição estiver atribuindo valor * para o `p-exceeded-attempts-warning`, o valor considerado será o do retorno da requisição. * * @default `0` */ set exceededAttemptsWarning(value: number); get exceededAttemptsWarning(): number; /** * @optional * * @description * * Esconde a função "Lembrar usuário" do formulário de login. * * Quando essa propriedade é setada com `true` a propriedade `rememberUser` enviada no evento `p-login-submit` será sempre * `false`. * * > Veja a propriedade `p-literals` para customizar a literal `rememberUser`. * * @default `false` */ set hideRememberUser(value: boolean); get hideRememberUser(): boolean; /** * @optional * * @description * * Objeto com as literais usadas no `po-page-login`. * * Existem duas maneiras de customizar o componente, passando um objeto com todas as literais disponíveis: * * ``` * const customLiterals: PoPageLoginLiterals = { * attempts: '{0} vez(es) ', * createANewPasswordNow: 'Melhor criar uma senha nova agora! Você vai poder entrar no sistema logo em seguida.', * forgotPassword: 'Esqueceu sua senha?', * forgotYourPassword: 'Esqueceu sua senha?', * highlightInfo: '', * iForgotMyPassword: 'Esqueci minha senha', * ifYouTryHarder: 'Se tentar mais ', * welcome: 'Boas-vindas', * loginErrorPattern: 'Login obrigatório', * loginHint: 'Caso não possua usuário entre em contato com o suporte', * loginLabel: 'Insira seu usuário', * loginPlaceholder: 'Insira seu usuário de acesso', * passwordErrorPattern: 'Senha obrigatória', * passwordLabel: 'Insira sua senha', * passwordPlaceholder: 'Insira sua senha de acesso', * customFieldErrorPattern: 'Campo customizado inválido', * customFieldPlaceholder: 'Por favor insira um valor', * registerUrl: 'Novo registro', * rememberUser: 'Lembrar usuário', * rememberUserHint: 'Esta opção pode ser desabilitada nas configurações do sistema', * submitLabel: 'Acessar sistema', * submittedLabel: 'Carregando...', * titlePopover: 'Opa!', * yourUserWillBeBlocked: 'sem sucesso seu usuário será bloqueado e você fica 24 horas sem poder acessar :(' * }; * ``` * * Ou passando apenas as literais que deseja customizar: * * ``` * const customLiterals: PoPageLoginLiterals = { * loginPlaceholder: 'Insira seu usuário de acesso', * passwordPlaceholder: 'Insira sua senha de acesso', * submitLabel: 'Acessar sistema' * }; * ``` * * E para carregar as literais customizadas, basta apenas passar o objeto para o componente. * * ``` * * * ``` * * > O objeto padrão de literais será traduzido de acordo com o idioma do browser (pt, en, es). * > É também possível alternar o objeto padrão de literais através do seletor de idiomas localizado na parte inferior do template, * nesse caso, há também a opção do idioma russo. */ set literals(value: PoPageLoginLiterals); get literals(): PoPageLoginLiterals; /** * @optional * * @description * * Habilita um estado de carregamento ao botão de *login*. * * > É necessário atribuir `true` à esta propriedade na função definida em `p-login-submit`. * * @default `false` */ set loading(value: boolean); get loading(): boolean; /** * @optional * * @description * * Valor do modelo do campo de login. */ set login(value: string); get login(): string; /** * @optional * * @description * * Atributo que recebe uma lista de erros e exibe abaixo do campo de login. */ set loginErrors(value: Array); get loginErrors(): Array; /** * @optional * * @description * * Atributo que recebe uma lista de erros e exibe abaixo do campo de password. */ set passwordErrors(value: Array); get passwordErrors(): Array; /** * @optional * * @description * * Exibe um link abaixo do formulário de login para que os usuários da aplicação façam a recuperação dos dados de autenticação. * * A propriedade aceita os seguintes tipos: * * - **String**: informe uma url externa ou uma rota válida; * - **Function**: pode-se customizar a ação. Para esta possilidade basta atribuir: * ``` * * [recovery]="this.myRecovery.bind(this)"> * * ``` * * - **PoPageLoginRecovery**: cria-se vínculo automático com o template **po-modal-password-recovery**. * O objeto deve conter a **url** para requisição dos recursos e pode-se definir o **tipo** de modal para recuperação de senha, * **email** para contato e **máscara** do campo de telefone. */ set recovery(value: string | Function | PoPageLoginRecovery); get recovery(): string | Function | PoPageLoginRecovery; /** * @optional * * @description * * Caso a aplicação tenha um link para novos cadastros, informe uma url externa ou uma rota válida, dessa * forma será exibido um link abaixo do formulário de login para os usuários da aplicação. * * Exemplos de valores válidos: * - **local**: `/home` * - **url externa**: `https://po-ui.io` * * > Veja a propriedade `p-literals` para customizar a literal `registerUrl`. */ set registerUrl(value: string); get registerUrl(): string; /** * @optional * * @description * * Atributo que recebe o tipo de esquema da autenticação, sendo suportados apenas os valores `Basic` e `Bearer`. * * > Caso o tipo definido seja `Basic`, o componente fará uma requisição `POST` contendo: * * ``` * headers { * Authorization: Basic base64(login:password) * } * * body { * rememberUser: rememberUser * } * ``` * * > Caso o tipo definido seja `Bearer`, o componente fará uma requisição `POST` contendo: * * ``` * body { * login: login, * password: base64(password), * rememberUser: rememberUser * } * ``` * * @default `PoPageLoginAuthenticationType.Basic` */ set authenticationType(value: PoPageLoginAuthenticationType); get authenticationType(): PoPageLoginAuthenticationType; /** * @optional * * @description * * Endpoint usado pelo template para requisição do recurso. Quando preenchido, o método `p-login-submit` será ignorado e o * componente adquirirá automatização para o processo de autenticação. * * ### Processos * Ao digitar um valor válido no campo de login/password e pressionar **Enter**, o componente fará uma requisição `POST` * na url especificada nesta propriedade passando o objeto contendo o valor definido pelo usuário: * * ``` * headers { * Authorization: Basic base64(login:password) * } * * body { * rememberUser: rememberUser * } * ``` * * Em caso de **sucesso**, o objeto de retorno é armazenado no `sessionStorage` e o usuário é redirecionado para a página inicial da * aplicação `/`. * * ``` * 200: * { * user: user * } * ``` * * Em caso de **erro** na autenticação, espera-se o seguinte retorno: * * ``` * 400/401 * { * code: 400/401, * message: message, * detailedMessage: detailedMessage, * helpUrl?: helpUrl * } * ``` * * > Pode-se atribuir uma quantidade máxima de tentativas restantes (maxAttemptsRemaining) para o atributo `p-exceeded-attempts-warning`, * assim como os avisos relacionados aos campos login e password (loginWarnings, passwordWarnings) para os atributos `p-login-errors` e * `p-password-errors` conforme retorno abaixo: * * ``` * 400 * { * code: 400/401, * message: message, * detailedMessage: detailedMessage, * helpUrl?: helpUrl, * maxAttemptsRemaining?: maxAttemptsRemaining, * loginWarnings?: [loginWarnings], * passwordWarnings?: [passwordWarnings] * } * ``` * * > Caso o valor atribuído para `p-exceeded-attempts-warning` seja igual a 0(zero), poderá ser passado um valor para o * atributo `p-blocked-url` e o usuário será redirecionado para uma tela de bloqueio. * * *Processo finalizado.* * * _______________ * * #### Praticidade * As informações do serviço de autenticação também podem ser transmitidas diretamente pelas configuraçãos de rota e, desta maneira, * dispensa-se qualquer menção e/ou importação do componente `po-page-login` no restante da aplicação. O exemplo abaixo exemplifica * a forma dinâmica com a qual o template de tela de login pode ser gerado ao navegar para rota `/login`, e também como ele se comunica * com o serviço para efetuação do processo de autenticação do usuário e solicitação de nova senha. * Basta definir nas configurações de rota: * * * ``` * import { PoPageLoginComponent, PoPageLoginAthenticationType } from '@po-ui/ng-templates'; * * ... * const routes: Routes = [ * { * path: 'login', component: PoPageLoginComponent, data: { * serviceApi: 'https://po-ui.io/sample/api/users/authentication', * environment: 'development', * recovery: { * url: 'https://po-ui.io/sample/api/users', * type: PoModalPasswordRecoveryType.All, * contactMail: 'dev.po@po-ui.com', * phoneMask: '9-999-999-9999' * }, * registerUrl: '/new-password', * authenticationType: PoPageLoginAthenticationType.Basic * } * } * ... * ]; * * @NgModule({ * imports: [RouterModule.forRoot(routes)], * exports: [RouterModule] * }) * export class AppRoutingModule { } * ``` * * * O metadado `serviceApi` deve ser a **url** para requisição dos recursos de autenticação, o `environment` alimenta a propriedade * `p-environment`, `recovery` é a interface `PoPageLoginRecovery` responsável pelas especificações contidas na modal de recuperação de * senha, `registerUrl` alimenta a propriedade `p-register-url` e `authenticationType` que define a propriedade `p-authentication-type`. * * > É essencial que siga a nomenclatura dos atributos exemplificados acima para sua efetiva funcionalidade. * */ set authenticationUrl(value: string); get authenticationUrl(): string; /** * @optional * * @description * * Caso o valor atribuído para `p-exceeded-attempts-warning` seja igual a 0(zero) e a aplicação tenha um link de bloqueio de usuário, * informe uma url externa ou uma rota válida, dessa forma em caso de bloqueio o usuário será redirecionado. */ set blockedUrl(value: string); get blockedUrl(): string; /** * @optional * * @description * * Exibe um botão para suporte. * * A propriedade aceita os seguintes tipos: * * - **String**: URL externa ou uma rota válida; * - **Function**: Função a ser disparada ao clicar no botão de suporte; * ``` * * [p-support]="this.mySupport.bind(this)"> * * ``` * */ set support(value: string | Function); get support(): string | Function; /** * @optional * * @description * * Coleção de idiomas que o componente irá tratar e disponibilizará para o usuário escolher. * * Caso essa propriedade não seja utilizada o componente mostrará no combo os idiomas que ele suporta por padrão. * * Caso a coleção tenha um idioma, a página estará nesse idioma e não mostrará o combo. * * Caso seja passado um array vazio, a página terá o idioma configurado no `i18n` e não mostrará o combo de seleção. * * > Se for passado um idioma não suportado, será preciso passar as literais pela propriedade `p-literals`. * * */ set languagesList(languagesList: Array); get languagesList(): Array; get showLanguage(): boolean; get language(): string; get pageLoginLiterals(): PoPageLoginLiterals; constructor(loginService: PoPageLoginService, router: Router, poLanguageService: PoLanguageService); ngOnDestroy(): void; closePopover(): void; onLoginSubmit(): void; protected onThemeChange(): void; private getDefaultCustomFieldObject; private openExternalLink; private openInternalLink; private redirectBlockedUrl; private setValuesToProperties; private applySizeBasedOnA11y; protected abstract concatenateLoginHintWithContactEmail(contactEmail: string): any; protected abstract setLoginErrors(value: Array): void; protected abstract setPasswordErrors(value: Array): void; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; static ngAcceptInputType_hideLabelStatus: any; } /** * @docsExtends PoPageLoginBaseComponent * * @example * * * * * * * * * * * * * * * * * * * * * */ declare class PoPageLoginComponent extends PoPageLoginBaseComponent implements AfterViewChecked, OnInit { changeDetector: ChangeDetectorRef; private readonly activatedRoute; private readonly poComponentInjector; loginForm: NgForm; pageLogin: ViewContainerRef; initialSelectLanguage: string; private componentRef; private readonly differ; private readonly customPasswordError; constructor(); ngAfterViewChecked(): void; ngOnInit(): void; activateSupport(): void; changeLoginModel(): void; changePasswordModel(): void; onSelectedLanguage(language: string): void; openUrl(recovery: any): void; protected concatenateLoginHintWithContactEmail(contactEmail: string): { [x: string]: string; }; protected setLoginErrors(errors: Array): void; protected setPasswordErrors(errors: Array): void; private checkingForMetadataProperty; private checkingForRouteMetadata; private concatenate; private concatenateLiteral; private createModalPasswordRecoveryComponent; private generateLoginError; private generatePasswordError; private resetControl; private setControlErrors; private setUrlRedirect; private validateArrayChanges; private initializeLanguage; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } declare class PoPageLoginPopoverComponent { literals: PoPageLoginLiterals; /** exibe o link de 'esqueci minha senha' e verifica se o valor é um link interno ou externo */ set recovery(value: string | Function | PoPageLoginRecovery); get recovery(): string | Function | PoPageLoginRecovery; /** define se a mensagem deverá ser exibida caso seja maior que 0(zero) */ remainingAttempts: number; /** se 'p-recovery' for do tipo Function ou PoPageLoginRecovery, emite para o método 'openUrl' do componente 'po-page-login' */ forgotPassword: EventEmitter; recoveryType: string; private _recovery; onForgotPasswordClick(recovery: any): void; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } /** * @description * * Módulo do template do po-page-login. */ declare class PoPageLoginModule { static ɵfac: i0.ɵɵFactoryDeclaration; static ɵmod: i0.ɵɵNgModuleDeclaration; static ɵinj: i0.ɵɵInjectorDeclaration; } declare class PoComponentsModule { static ɵfac: i0.ɵɵFactoryDeclaration; static ɵmod: i0.ɵɵNgModuleDeclaration; static ɵinj: i0.ɵɵInjectorDeclaration; } declare class PoServicesModule { static ɵfac: i0.ɵɵFactoryDeclaration; static ɵmod: i0.ɵɵNgModuleDeclaration; static ɵinj: i0.ɵɵInjectorDeclaration; } declare class PoTemplatesModule { static ɵfac: i0.ɵɵFactoryDeclaration; static ɵmod: i0.ɵɵNgModuleDeclaration; static ɵinj: i0.ɵɵInjectorDeclaration; } declare const poModalPasswordRecoveryLiterals: { en: any; es: any; pt: any; ru: any; }; declare const poPageBlockedUserLiterals: { none: { pt: { title: string; firstPhrase: string; secondPhrase: string; }; en: { title: string; firstPhrase: string; secondPhrase: string; }; es: { title: string; firstPhrase: string; secondPhrase: string; }; ru: { title: string; firstPhrase: string; secondPhrase: string; }; }; exceededAttempts: { pt: { title: string; firstPhrase: string; secondPhrase: string; thirdPhrase: string; }; en: { title: string; firstPhrase: string; secondPhrase: string; thirdPhrase: string; }; es: { title: string; firstPhrase: string; secondPhrase: string; thirdPhrase: string; }; ru: { title: string; firstPhrase: string; secondPhrase: string; thirdPhrase: string; }; }; expiredPassword: { pt: { title: string; firstPhrase: string; secondPhrase: string; }; en: { title: string; firstPhrase: string; secondPhrase: string; }; es: { title: string; firstPhrase: string; secondPhrase: string; }; ru: { title: string; firstPhrase: string; secondPhrase: string; }; }; }; /** * @usedBy PoPageChangePasswordComponent * * @description * * Interface com a definição do objeto gerado pelo formulário do componente `po-page-change-password`. */ interface PoPageChangePassword { /** Senha atual */ currentPassword?: string; /** Nova senha */ newPassword?: string; } declare const poPageChangePasswordLiterals: { en: any; es: any; pt: any; ru: any; }; /** * @docsExtends PoPageDynamicDetailOptions * * @usedBy PoPageDynamicDetailComponent * * @description * * * */ interface PoPageDynamicDetailMetaData extends PoPageDynamicDetailOptions { /** * * Cria automaticamente as rotas de edição (novo/duplicate) e detalhes caso sejam definidas ações na propriedade `p-actions` * * As rotas criadas serão baseadas na propriedade `p-actions`. * * > Para o correto funcionamento não pode haver nenhuma rota coringa (`**`) especificada. * * @default false */ autoRouter?: boolean; /** * * Versão do metadata, o sistema irá buscar a versão nas próximas iteração. * * @default false */ version?: string; } /** * @docsExtends PoPageDynamicEditOptions * * @usedBy PoPageDynamicEditComponent * * @description * * * */ interface PoPageDynamicEditMetadata extends PoPageDynamicEditOptions { /** * Cria automaticamente as rotas de edição (novo/duplicate) e detalhes caso sejam definidas ações na propriedade `p-actions` * * As rotas criadas serão baseadas na propriedade `p-actions`. * * > Para o correto funcionamento não pode haver nenhuma rota coringa (`**`) especificada. * * @default false */ autoRouter?: boolean; /** Versão do metadado devolvido pelo backend. */ version: number; } /** * @docsPrivate * * @description * * Interface para o atributo `filter` do componente `po-page-dynamic-search`. */ interface PoPageDynamicSearch extends PoPageDefault { /** * @description * * Nome do método a ser executado quando a busca avançada for finalizada. */ advancedSearch?: Function; /** * @description * * Lista dos filtros usados na busca avançada. */ filters?: Array; /** * @description * * Nome do método a ser executado quando é pressionado a tecla `ENTER` dentro do `input` de pesquisa rápida do componente, o mesmo * receberá o valor digitado ao ser invocado. */ quickSearch?: Function; } /** * @docsExtends PoDynamicFormField * */ interface PoPageDynamicTableField extends PoDynamicFormField { /** Indica se o campo será duplicado caso seja executada a ação de duplicação. */ duplicate?: boolean; /** Indica se o campo será usado para busca avançada. */ filter?: boolean; /** Tamanho da coluna em pixels ou porcetagem. */ width?: number | string; /** * Permite o campo aparecer no gerenciador de colunas, mesmo que esteja utilizando `visible: false`, * possibilitando ativar a exibição na tabela. * * > Quando for `false`, será desconsiderado. */ allowColumnsManager?: boolean; /** * @optional * * @description * * Controla se a coluna será considerada como "ordenável". Caso seja definido um valor falso, a coluna não será usada para * ordenação. * * @default `true` */ sortable?: boolean; /** * Lista de objetos do tipo `PoTableColumnLabel` que representa as labels disponíveis na coluna do tipo `label`. * * Exemplo de utilização * * ``` * { * property: 'uf', * label: 'Estados', * type: 'label', * labels: [ * { value: 'SC', label: 'SANTA CATARINA', color: 'color-02' }, * { value: 'SP', label: 'SAO PAULO', color: 'color-10' } * ], * } * ``` */ labels?: Array; } /** * @docsExtends PoPageDynamicTableOptions * * @usedBy PoPageDynamicTableComponent * * @description * * * */ interface PoPageDynamicTableMetaData extends PoPageDynamicTableOptions { /** * * Cria automaticamente as rotas de edição (novo/duplicate) e detalhes caso sejam definidas ações na propriedade `p-actions` * * As rotas criadas serão baseadas na propriedade `p-actions`. * * > Para o correto funcionamento não pode haver nenhuma rota coringa (`**`) especificada. * * @default false */ autoRouter?: boolean; /** * * Versão do metadata, o sistema irá buscar a versão nas próximas iteração. * * @default false */ version?: string; } interface PoPageDynamicOptionsSchema { schema: Array>; } interface PoPageDynamicOptionsProp { nameProp: string; merge?: boolean; keyForMerge?: string; } type urlOrFunction = string | Function; declare class PoPageCustomizationService { private readonly http; getCustomOptions(origin: urlOrFunction, originalOption: T, optionSchema: PoPageDynamicOptionsSchema): Observable; changeOriginalOptionsToNewOptions(objectToChange: T, newOptions: K): void; private createObservable; private mergePageOptions; private createNewProp; private mergeOptions; private mergeOptionsArray; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵprov: i0.ɵɵInjectableDeclaration; } interface PoPageDynamicLiterals { errorRenderPage: string; notPossibleLoadMetadataPage: string; } declare const poPageDynamicLiterals: { [key: string]: PoPageDynamicLiterals; }; declare class PoPageDynamicService { private readonly http; private readonly notification; readonly headers: HttpHeaders; private endpoint; private readonly language; private metadata; constructor(); configServiceApi(config?: { endpoint?: string; metadata?: string; }): void; getMetadata(type?: string): Observable; deleteResource(id?: any, endpoint?: string): Observable; deleteResources(ids: Array, endpoint?: string): Observable; getResources(params?: HttpParams, endpoint?: string): Observable; getResource(id: any, endpoint?: string): Observable; createResource(resource: any, endpoint?: string): Observable; updateResource(id: any, resource: any, endpoint?: string): Observable; private getLocalEndPoint; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵprov: i0.ɵɵInjectableDeclaration; } export { PoComponentsModule, PoJobSchedulerParametersTemplateDirective, PoJobSchedulerSummaryTemplateDirective, PoModalPasswordRecoveryComponent, PoModalPasswordRecoveryErrorMessageComponent, PoModalPasswordRecoveryModalContent, PoModalPasswordRecoveryModule, PoModalPasswordRecoveryType, PoPageBackgroundComponent, PoPageBackgroundModule, PoPageBlockedUserComponent, PoPageBlockedUserContactsComponent, PoPageBlockedUserModule, PoPageBlockedUserReason, PoPageBlockedUserReasonComponent, PoPageChangePasswordComponent, PoPageChangePasswordModule, PoPageCustomizationModule, PoPageCustomizationService, PoPageDynamicDetailComponent, PoPageDynamicDetailModule, PoPageDynamicEditComponent, PoPageDynamicEditModule, PoPageDynamicModule, PoPageDynamicSearchComponent, PoPageDynamicSearchModule, PoPageDynamicService, PoPageDynamicTableComponent, PoPageDynamicTableModule, PoPageJobSchedulerComponent, PoPageJobSchedulerModule, PoPageLoginAuthenticationType, PoPageLoginComponent, PoPageLoginModule, PoServicesModule, PoTemplatesModule, poModalPasswordRecoveryLiterals, poNotificationType, poNotificationTypeDefault, poPageBlockedUserButtonLiterals, poPageBlockedUserLiterals, poPageChangePasswordLiterals, poPageDynamicDetailLiteralsDefault, poPageDynamicEditLiteralsDefault, poPageDynamicLiterals }; export type { PoJobScheduler, PoModalPasswordRecovery, PoPageBlockedUserReasonParams, PoPageChangePassword, PoPageChangePasswordRecovery, PoPageChangePasswordRequirement, PoPageDynamicDetailActions, PoPageDynamicDetailBeforeBack, PoPageDynamicDetailBeforeEdit, PoPageDynamicDetailBeforeRemove, PoPageDynamicDetailField, PoPageDynamicDetailMetaData, PoPageDynamicDetailOptions, PoPageDynamicEditActions, PoPageDynamicEditBeforeCancel, PoPageDynamicEditBeforeSave, PoPageDynamicEditBeforeSaveNew, PoPageDynamicEditField, PoPageDynamicEditLiterals, PoPageDynamicEditMetadata, PoPageDynamicEditOptions, PoPageDynamicOptionsProp, PoPageDynamicOptionsSchema, PoPageDynamicSearch, PoPageDynamicSearchFilters, PoPageDynamicSearchLiterals, PoPageDynamicSearchOptions, PoPageDynamicTableActions, PoPageDynamicTableBeforeDetail, PoPageDynamicTableBeforeDuplicate, PoPageDynamicTableBeforeEdit, PoPageDynamicTableBeforeNew, PoPageDynamicTableBeforeRemove, PoPageDynamicTableBeforeRemoveAll, PoPageDynamicTableCustomAction, PoPageDynamicTableCustomTableAction, PoPageDynamicTableField, PoPageDynamicTableFilters, PoPageDynamicTableMetaData, PoPageDynamicTableOptions, PoPageLogin, PoPageLoginCustomField, PoPageLoginLiterals, PoPageLoginRecovery };