@po-ui/ng-components 16.2.1 → 16.4.0

package/lib/components/po-accordion/index.d.ts

@@ -1,3 +1,4 @@
+export * from './interfaces/po-accordion-literals.interface';
 export * from './po-accordion-item/po-accordion-item.component';
 export * from './po-accordion.component';
 export * from './po-accordion.module';

package/lib/components/po-accordion/interfaces/po-accordion-literals.interface.d.ts

@@ -0,0 +1,13 @@
+/**
+ * @usedBy PoAccordionComponent
+ *
+ * @description
+ *
+ * Interface para definição das literais usadas no `po-accordion`.
+ */
+export interface PoAccordionLiterals {
+    /** Label do gerenciador de Accordion para expandir todos os itens. */
+    expandAllItems?: string;
+    /** Label do gerenciador de Accordion para colapsar todos os itens */
+    closeAllItems?: string;
+}

package/lib/components/po-accordion/po-accordion-base.component.d.ts

@@ -1,3 +1,13 @@
+import { EventEmitter } from '@angular/core';
+import { PoLanguageService } from '../../services/po-language/po-language.service';
+import { PoAccordionLiterals } from './interfaces/po-accordion-literals.interface';
+import * as i0 from "@angular/core";
+export declare const poAccordionLiteralsDefault: {
+    en: PoAccordionLiterals;
+    es: PoAccordionLiterals;
+    pt: PoAccordionLiterals;
+    ru: PoAccordionLiterals;
+};
 /**
  * @description
  *
@@ -8,7 +18,7 @@
  * como no exemplo abaixo:
  *
  * ```
- * <po-accordion>
+ * <po-accordion #accordion [p-show-manager-accordion]="true">
  *   <po-accordion-item p-label="PO Accordion 1">
  *      Accordion 1
  *   </po-accordion-item>
@@ -19,10 +29,104 @@
  * </po-accordion>
  * ```
  *
+ * e no typescript pode-se utilizar o `@ViewChild`:
+ *
+ * ```
+ *  @ViewChild(PoAccordionComponent, { static: true }) accordion: PoAccordionComponent;
+ *
+ *  ngAfterContentInit() {
+ *    // ou utilizar o método collapseAllItems();
+ *    this.accordion.expandAllItems();
+ *  }
+ * ```
+ *
  * O componente já faz o controle de abertura e fechamento dos itens automaticamente.
  *
  * Caso houver a necessidade de abrir algum dos `po-accordion-item` via Typescript
  * acesse a [documentação do PoAccordionItem](/documentation/po-accordion-item).
  */
 export declare class PoAccordionBaseComponent {
+    private language;
+    private _literals;
+    /**
+     * @optional
+     *
+     * @description
+     *
+     * Objeto com as literais usadas no `po-accordion`.
+     *
+     * Existem duas maneiras de customizar o componente, passando um objeto com todas as literais disponíveis:
+     *
+     * ```
+     *  const customLiterals: PoAccordionLiterals = {
+     *    closeAllItems: 'Fechar todos os itens',
+     *    expandAllItems: 'Expandir todos os itens'
+     *  };
+     * ```
+     *
+     * Ou passando apenas as literais que deseja customizar:
+     *
+     * ```
+     *  const customLiterals: PoAccordionLiterals = {
+     *    expandAllItems: 'Expandir todos os itens'
+     *  };
+     * ```
+     *
+     * E para carregar as literais customizadas, basta apenas passar o objeto para o componente.
+     *
+     * ```
+     * <po-accordion
+     *   [p-literals]="customLiterals">
+     * </po-accordion>
+     * ```
+     *
+     * > O objeto padrão de literais será traduzido de acordo com o idioma do
+     * [`PoI18nService`](/documentation/po-i18n) ou do browser.
+     */
+    set literals(value: PoAccordionLiterals);
+    get literals(): PoAccordionLiterals;
+    /**
+     * @optional
+     *
+     * @description
+     *
+     * Exibe o Gerenciador de Accordion.
+     *
+     * @default `false`
+     */
+    showManagerAccordion: boolean;
+    /**
+     * @optional
+     *
+     * @description
+     *
+     * Permite expandir mais de um `<po-accordion-item></po-accordion-item>` ao mesmo tempo.
+     * Sempre habilitada caso a propriedade `p-show-manager-accordion` esteja como `true`.
+     *
+     * @default `false`
+     */
+    allowExpandItems: boolean;
+    /**
+     * @optional
+     *
+     * @description
+     *
+     * Evento disparado ao expandir o gerenciador de accordion, seja manualmente ou programaticamente.
+     *
+     */
+    expandAllEvent: EventEmitter<void>;
+    /**
+     * @optional
+     *
+     * @description
+     *
+     * Evento disparado ao retrair o gerenciador de accordion, seja manualmente ou programaticamente.
+     *
+     */
+    collapseAllEvent: EventEmitter<void>;
+    constructor(languageService: PoLanguageService);
+    static ɵfac: i0.ɵɵFactoryDeclaration<PoAccordionBaseComponent, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<PoAccordionBaseComponent, never, never, { "literals": { "alias": "p-literals"; "required": false; }; "showManagerAccordion": { "alias": "p-show-manager-accordion"; "required": false; }; "allowExpandItems": { "alias": "p-allow-expand-all-items"; "required": false; }; }, { "expandAllEvent": "p-expand-all"; "collapseAllEvent": "p-collapse-all"; }, never, never, false, never>;
+    static ngAcceptInputType_showManagerAccordion: any;
+    static ngAcceptInputType_allowExpandItems: any;
 }

package/lib/components/po-accordion/po-accordion-item/po-accordion-item.component.d.ts

@@ -1,4 +1,5 @@
 import { EventEmitter, OnDestroy, TemplateRef } from '@angular/core';
+import { PoTagType } from '../../po-tag';
 import { PoAccordionService } from '../services/po-accordion.service';
 import * as i0 from "@angular/core";
 /**
@@ -34,8 +35,46 @@ import * as i0 from "@angular/core";
  */
 export declare class PoAccordionItemComponent implements OnDestroy {
     private accordionService;
+    private _type?;
     /** Título do item. */
     label: string;
+    /**
+     * @optional
+     *
+     * @description
+     *
+     * Label da Tag.
+     *
+     */
+    labelTag: string;
+    /**
+     * @optional
+     *
+     * @description
+     *
+     * Desabilita item.
+     *
+     * @default `false`
+     */
+    disabledItem: boolean;
+    /**
+     * @optional
+     *
+     * @description
+     *
+     * Define o tipo da *tag* caso ela esteja sendo exibida.
+     *
+     * Valores válidos:
+     *  - `success`: cor verde utilizada para simbolizar sucesso ou êxito.
+     *  - `warning`: cor amarela que representa aviso ou advertência.
+     *  - `danger`: cor vermelha para erro ou aviso crítico.
+     *  - `info`: cor cinza escuro que caracteriza conteúdo informativo.
+     *
+     *
+     * @default `info`
+     */
+    set typeTag(value: PoTagType);
+    get typeTag(): PoTagType;
     /** Evento disparado ao expandir o item, seja manualmente ou programaticamente. */
     expandEvent: EventEmitter<void>;
     /** Evento disparado ao retrair o item, seja manualmente ou programaticamente. */
@@ -55,5 +94,6 @@ export declare class PoAccordionItemComponent implements OnDestroy {
      */
     expand(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<PoAccordionItemComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<PoAccordionItemComponent, "po-accordion-item", never, { "label": { "alias": "p-label"; "required": false; }; }, { "expandEvent": "p-expand"; "collapseEvent": "p-collapse"; }, never, ["*"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<PoAccordionItemComponent, "po-accordion-item", never, { "label": { "alias": "p-label"; "required": false; }; "labelTag": { "alias": "p-label-tag"; "required": false; }; "disabledItem": { "alias": "p-disabled"; "required": false; }; "typeTag": { "alias": "p-type-tag"; "required": false; }; }, { "expandEvent": "p-expand"; "collapseEvent": "p-collapse"; }, never, ["*"], false, never>;
+    static ngAcceptInputType_disabledItem: any;
 }

package/lib/components/po-accordion/po-accordion-item-header/po-accordion-item-header.component.d.ts

@@ -1,10 +1,16 @@
 import { EventEmitter } from '@angular/core';
+import { PoLanguageService } from '../../../services/po-language';
 import * as i0 from "@angular/core";
 export declare class PoAccordionItemHeaderComponent {
+    private language;
     expanded: boolean;
     label: string;
+    labelTag: string;
+    typeTag: string;
+    disabledItem: boolean;
     toggle: EventEmitter<boolean>;
+    constructor(languageService: PoLanguageService);
     onClick(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<PoAccordionItemHeaderComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<PoAccordionItemHeaderComponent, "po-accordion-item-header", never, { "expanded": { "alias": "p-expanded"; "required": false; }; "label": { "alias": "p-label"; "required": false; }; }, { "toggle": "p-toggle"; }, never, never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<PoAccordionItemHeaderComponent, "po-accordion-item-header", never, { "expanded": { "alias": "p-expanded"; "required": false; }; "label": { "alias": "p-label"; "required": false; }; "labelTag": { "alias": "p-label-tag"; "required": false; }; "typeTag": { "alias": "p-type-tag"; "required": false; }; "disabledItem": { "alias": "p-disabled"; "required": false; }; }, { "toggle": "p-toggle"; }, never, never, false, never>;
 }

package/lib/components/po-accordion/po-accordion-manager/po-accordion-manager.component.d.ts

@@ -0,0 +1,11 @@
+import { EventEmitter } from '@angular/core';
+import { PoAccordionLiterals } from '../interfaces/po-accordion-literals.interface';
+import * as i0 from "@angular/core";
+export declare class PoAccordionManagerComponent {
+    expandedAllItems: boolean;
+    literals: PoAccordionLiterals;
+    clickManager: EventEmitter<boolean>;
+    onClick(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<PoAccordionManagerComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<PoAccordionManagerComponent, "po-accordion-manager", never, { "expandedAllItems": { "alias": "p-expanded-all-items"; "required": false; }; "literals": { "alias": "p-literals"; "required": false; }; }, { "clickManager": "p-click"; }, never, never, false, never>;
+}

package/lib/components/po-accordion/po-accordion.component.d.ts

@@ -2,6 +2,7 @@ import { QueryList, OnDestroy } from '@angular/core';
 import { PoAccordionBaseComponent } from './po-accordion-base.component';
 import { PoAccordionItemComponent } from './po-accordion-item/po-accordion-item.component';
 import { PoAccordionService } from './services/po-accordion.service';
+import { PoLanguageService } from '../../services/po-language/po-language.service';
 import * as i0 from "@angular/core";
 /**
  * @docsExtends PoAccordionBaseComponent
@@ -28,11 +29,24 @@ import * as i0 from "@angular/core";
 export declare class PoAccordionComponent extends PoAccordionBaseComponent implements OnDestroy {
     private accordionService;
     poAccordionItems: QueryList<PoAccordionItemComponent>;
+    expandedAllItems: boolean;
     private accordionServiceSubscription;
     private expandedActiveAccordionItem;
-    constructor(accordionService: PoAccordionService);
+    constructor(accordionService: PoAccordionService, languageService: PoLanguageService);
     ngOnDestroy(): void;
+    changeVisibleAllItems(event: boolean): void;
+    /**
+     * Método para colapsar todos os itens.
+     * Só pode ser utilizado quando a propriedade `p-show-manager-accordion` estiver como `true`.
+     */
+    collapseAllItems(): void;
+    /**
+     * Método para expandir todos os itens.
+     * Só pode ser utilizado quando a propriedade `p-show-manager-accordion` estiver como `true`.
+     */
+    expandAllItems(): void;
     headerToggle(event: boolean, poAccordionItem: PoAccordionItemComponent): void;
+    private checkVisibleAllItems;
     private receiveFromChildAccordionSubscription;
     private toggle;
     static ɵfac: i0.ɵɵFactoryDeclaration<PoAccordionComponent, never>;

package/lib/components/po-accordion/po-accordion.module.d.ts

@@ -3,7 +3,11 @@ import * as i1 from "./po-accordion.component";
 import * as i2 from "./po-accordion-item-body/po-accordion-item-body.component";
 import * as i3 from "./po-accordion-item/po-accordion-item.component";
 import * as i4 from "./po-accordion-item-header/po-accordion-item-header.component";
-import * as i5 from "@angular/common";
+import * as i5 from "./po-accordion-manager/po-accordion-manager.component";
+import * as i6 from "@angular/common";
+import * as i7 from "../po-tag/po-tag.module";
+import * as i8 from "../po-icon/po-icon.module";
+import * as i9 from "../po-divider/po-divider.module";
 /**
  * @description
  *
@@ -37,6 +41,6 @@ import * as i5 from "@angular/common";
  */
 export declare class PoAccordionModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<PoAccordionModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<PoAccordionModule, [typeof i1.PoAccordionComponent, typeof i2.PoAccordionItemBodyComponent, typeof i3.PoAccordionItemComponent, typeof i4.PoAccordionItemHeaderComponent], [typeof i5.CommonModule], [typeof i1.PoAccordionComponent, typeof i3.PoAccordionItemComponent]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<PoAccordionModule, [typeof i1.PoAccordionComponent, typeof i2.PoAccordionItemBodyComponent, typeof i3.PoAccordionItemComponent, typeof i4.PoAccordionItemHeaderComponent, typeof i5.PoAccordionManagerComponent], [typeof i6.CommonModule, typeof i7.PoTagModule, typeof i8.PoIconModule, typeof i9.PoDividerModule], [typeof i1.PoAccordionComponent, typeof i3.PoAccordionItemComponent]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<PoAccordionModule>;
 }

package/lib/components/po-breadcrumb/po-breadcrumb-base.component.d.ts

@@ -87,6 +87,7 @@ export declare class PoBreadcrumbBaseComponent {
      */
     paramsService?: object;
     itemsView: Array<PoBreadcrumbItem>;
+    itemsViewPopup: Array<any>;
     protected clickoutListener: () => void;
     protected resizeListener: () => void;
     private _items;
@@ -102,6 +103,8 @@ export declare class PoBreadcrumbBaseComponent {
      */
     set items(items: Array<PoBreadcrumbItem>);
     get items(): Array<PoBreadcrumbItem>;
+    private transformToArrayPopup;
+    private transformArrayToActionPopUp;
     static ɵfac: i0.ɵɵFactoryDeclaration<PoBreadcrumbBaseComponent, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<PoBreadcrumbBaseComponent, never, never, { "favoriteService": { "alias": "p-favorite-service"; "required": false; }; "paramsService": { "alias": "p-params-service"; "required": false; }; "items": { "alias": "p-items"; "required": false; }; }, {}, never, never, false, never>;
 }

package/lib/components/po-breadcrumb/po-breadcrumb-favorite/po-breadcrumb-favorite.component.d.ts

@@ -17,6 +17,7 @@ export declare class PoBreadcrumbFavoriteComponent implements OnInit, OnDestroy
     favoriteService: string;
     itemActive: PoBreadcrumbItem;
     paramsService: object;
+    hiddenLiteral: boolean;
     favorite: boolean;
     literals: any;
     private getSubscription;
@@ -28,5 +29,5 @@ export declare class PoBreadcrumbFavoriteComponent implements OnInit, OnDestroy
     private getStatusFavorite;
     private setStatusFavorite;
     static ɵfac: i0.ɵɵFactoryDeclaration<PoBreadcrumbFavoriteComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<PoBreadcrumbFavoriteComponent, "po-breadcrumb-favorite", never, { "favoriteService": { "alias": "p-favorite-service"; "required": false; }; "itemActive": { "alias": "p-item-active"; "required": false; }; "paramsService": { "alias": "p-params-service"; "required": false; }; }, {}, never, never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<PoBreadcrumbFavoriteComponent, "po-breadcrumb-favorite", never, { "favoriteService": { "alias": "p-favorite-service"; "required": false; }; "itemActive": { "alias": "p-item-active"; "required": false; }; "paramsService": { "alias": "p-params-service"; "required": false; }; "hiddenLiteral": { "alias": "p-hidden-literal"; "required": false; }; }, {}, never, never, false, never>;
 }

package/lib/components/po-breadcrumb/po-breadcrumb.component.d.ts

@@ -1,7 +1,10 @@
 import { AfterViewInit, DoCheck, ElementRef, IterableDiffers, OnDestroy, Renderer2 } from '@angular/core';
 import { PoBreadcrumbBaseComponent } from './po-breadcrumb-base.component';
 import { PoBreadcrumbItem } from './po-breadcrumb-item.interface';
+import { PoPopupComponent } from '../po-popup/po-popup.component';
+import { PoLanguageService } from '../../services/po-language/po-language.service';
 import * as i0 from "@angular/core";
+export declare const poBreadcrumbLiterals: Object;
 /**
  * @docsExtends PoBreadcrumbBaseComponent
  *
@@ -20,36 +23,41 @@ import * as i0 from "@angular/core";
 export declare class PoBreadcrumbComponent extends PoBreadcrumbBaseComponent implements AfterViewInit, DoCheck, OnDestroy {
     private element;
     renderer: Renderer2;
+    languageService: PoLanguageService;
     breadcrumbElement: ElementRef;
     dropdownIcon: ElementRef;
+    svgTarget: ElementRef;
+    popupContainer: PoPopupComponent;
     showDropdown: boolean;
     showDropdownToggle: boolean;
     dropdownItems: Array<PoBreadcrumbItem>;
+    literals: any;
+    hiddenLiteralFavorite: boolean;
     private _breadcrumbItemsLenght;
     private calculatedElement;
     private differ;
     private hiddenWithoutResize;
     private initialized;
     private timeoutResize;
-    constructor(differs: IterableDiffers, element: ElementRef, renderer: Renderer2);
+    constructor(differs: IterableDiffers, element: ElementRef, renderer: Renderer2, languageService: PoLanguageService);
     ngAfterViewInit(): void;
     ngDoCheck(): void;
     ngOnDestroy(): void;
-    toggleDropdown(): void;
-    private wasClickedonDropdown;
-    private checkClickOutElement;
+    emitAction(item: PoBreadcrumbItem): void;
+    openPopup(event: any): void;
+    closePopUp(): void;
     private checkChangeOnItems;
     private calcBreadcrumb;
     private getBreadcrumbFavoriteWidth;
+    private getBreadcrumbTooltipWidth;
+    private existsFavoritelabel;
     private getBreadcrumbWidth;
     private calcBreadcrumbItemsWidth;
     private enableBreadcrumbResponsive;
     private disableBreadcrumbResponsive;
     private debounceResize;
     private initBreadcrumbSize;
-    private initializeClickoutListener;
     private initializeResizeListener;
-    private removeClickoutListener;
     private removeResizeListener;
     static ɵfac: i0.ɵɵFactoryDeclaration<PoBreadcrumbComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<PoBreadcrumbComponent, "po-breadcrumb", never, {}, {}, never, never, false, never>;

package/lib/components/po-breadcrumb/po-breadcrumb.module.d.ts

@@ -1,10 +1,11 @@
 import * as i0 from "@angular/core";
 import * as i1 from "./po-breadcrumb.component";
-import * as i2 from "./po-breadcrumb-dropdown/po-breadcrumb-dropdown.component";
-import * as i3 from "./po-breadcrumb-favorite/po-breadcrumb-favorite.component";
-import * as i4 from "./po-breadcrumb-item/po-breadcrumb-item.component";
-import * as i5 from "@angular/common";
-import * as i6 from "@angular/router";
+import * as i2 from "./po-breadcrumb-favorite/po-breadcrumb-favorite.component";
+import * as i3 from "@angular/common";
+import * as i4 from "@angular/router";
+import * as i5 from "../po-link/po-link.module";
+import * as i6 from "../po-popup/po-popup.module";
+import * as i7 from "../po-icon/po-icon.module";
 /**
  * @description
  *
@@ -13,6 +14,6 @@ import * as i6 from "@angular/router";
  */
 export declare class PoBreadcrumbModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<PoBreadcrumbModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<PoBreadcrumbModule, [typeof i1.PoBreadcrumbComponent, typeof i2.PoBreadcrumbDropdownComponent, typeof i3.PoBreadcrumbFavoriteComponent, typeof i4.PoBreadcrumbItemComponent], [typeof i5.CommonModule, typeof i6.RouterModule], [typeof i1.PoBreadcrumbComponent]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<PoBreadcrumbModule, [typeof i1.PoBreadcrumbComponent, typeof i2.PoBreadcrumbFavoriteComponent], [typeof i3.CommonModule, typeof i4.RouterModule, typeof i5.PoLinkModule, typeof i6.PoPopupModule, typeof i7.PoIconModule], [typeof i1.PoBreadcrumbComponent]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<PoBreadcrumbModule>;
 }

package/lib/components/po-dynamic/index.d.ts

@@ -1,6 +1,7 @@
 export * from './po-dynamic-field-type.enum';
 export * from './po-dynamic-field-force-component.enum';
 export * from './po-dynamic-form/po-dynamic-form-field.interface';
+export * from './po-dynamic-view/interfaces/po-dynamic-view-request.interface';
 export * from './po-dynamic-form/po-dynamic-form-load/po-dynamic-form-load.interface';
 export * from './po-dynamic-form/po-dynamic-form-validation/po-dynamic-form-field-changed.interface';
 export * from './po-dynamic-form/po-dynamic-form-validation/po-dynamic-form-field-validation.interface';

package/lib/components/po-dynamic/po-dynamic-form/po-dynamic-form-field.interface.d.ts

@@ -505,6 +505,14 @@ export interface PoDynamicFormField extends PoDynamicField {
      * **Componente compatível**: `po-upload`
      */
     restrictions?: PoUploadFileRestrictions;
+    /**
+     * Nome do campo de formulário que será enviado para o serviço informado na propriedade `url`.
+     *
+     * > O valor default é `files`
+     *
+     * **Componente compatível**: `po-upload`
+     */
+    formField?: string;
     /**
      * Objeto que contém os cabeçalhos que será enviado na requisição dos arquivos.
      *

package/lib/components/po-dynamic/po-dynamic-view/interfaces/po-dynamic-view-request.interface.d.ts

@@ -0,0 +1,18 @@
+import { Observable } from 'rxjs';
+/**
+ * @usedBy PoDynamicViewComponent
+ *
+ * @description
+ *
+ * Define o tipo de busca customizada para um campo em específico.
+ */
+export interface PoDynamicViewRequest {
+    /**
+     * Método responsável por enviar um valor que será buscado no serviço.
+     *
+     *
+     * @param {string|Array<any>} value Valor único a ser buscado na fonte de dados.
+     * @param {any} filterParams Valor opcional para informar filtros customizados.
+     */
+    getObjectByValue(value: string | Array<any>, filterParams?: any): Observable<any>;
+}

package/lib/components/po-dynamic/po-dynamic-view/po-dynamic-view-base.component.d.ts

@@ -1,7 +1,7 @@
 import { CurrencyPipe, DatePipe, DecimalPipe, TitleCasePipe } from '@angular/common';
 import { PoTimePipe } from '../../../pipes/po-time/po-time.pipe';
 import { PoDynamicViewField } from './po-dynamic-view-field.interface';
-import { PoDynamicViewService } from './po-dynamic-view.service';
+import { PoDynamicViewService } from './services/po-dynamic-view.service';
 import * as i0 from "@angular/core";
 /**
  *
@@ -54,6 +54,7 @@ export declare class PoDynamicViewBaseComponent {
      */
     load: string | Function;
     visibleFields: any[];
+    service: any;
     private _fields;
     private _showAllValue;
     private _value;
@@ -103,13 +104,17 @@ export declare class PoDynamicViewBaseComponent {
     set value(value: object);
     get value(): object;
     constructor(currencyPipe: CurrencyPipe, datePipe: DatePipe, decimalPipe: DecimalPipe, timePipe: PoTimePipe, titleCasePipe: TitleCasePipe, dynamicViewService: PoDynamicViewService);
-    protected getConfiguredFields(): any[];
+    protected getConfiguredFields(useSearchService?: boolean): any[];
     protected getMergedFields(): any[];
     protected getValueFields(): {
         tag?: boolean;
         color?: string;
+        concatLabelValue?: boolean;
+        fieldLabel?: string;
+        fieldValue?: string;
         icon?: string;
         inverse?: boolean;
+        isArrayOrObject?: boolean;
         format?: string;
         order?: number;
         alt?: string;
@@ -119,6 +124,7 @@ export declare class PoDynamicViewBaseComponent {
             label: string;
             value: string | number;
         }[];
+        searchService?: string | import("@po-ui/ng-components").PoDynamicViewRequest;
         key?: boolean;
         property: string;
         label: string;
@@ -143,6 +149,11 @@ export declare class PoDynamicViewBaseComponent {
         cssClass: string;
     }[];
     private createField;
+    private createFieldWithService;
+    private returnValues;
+    private searchById;
+    private transformArrayValue;
+    private transformFieldLabel;
     private transformValue;
     static ɵfac: i0.ɵɵFactoryDeclaration<PoDynamicViewBaseComponent, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<PoDynamicViewBaseComponent, never, never, { "load": { "alias": "p-load"; "required": false; }; "fields": { "alias": "p-fields"; "required": false; }; "showAllValue": { "alias": "p-show-all-value"; "required": false; }; "value": { "alias": "p-value"; "required": false; }; }, {}, never, never, false, never>;

package/lib/components/po-dynamic/po-dynamic-view/po-dynamic-view-field.interface.d.ts

@@ -1,4 +1,5 @@
 import { PoDynamicField } from '../po-dynamic-field.interface';
+import { PoDynamicViewRequest } from './interfaces/po-dynamic-view-request.interface';
 /**
  * @usedBy PoDynamicViewComponent
  *
@@ -36,6 +37,29 @@ export interface PoDynamicViewField extends PoDynamicField {
      *  - <span class="dot po-color-12"></span> `color-12`
      */
     color?: string;
+    /**
+     * Permite que seja exibido em tela, de forma concatenada as propriedades `fieldLabel` + `fieldValue`.
+     * A ordem sempre será `fieldLabel` e depois `fieldValue`, não sendo possível alterar.
+     *
+     * > Propriedade funciona corretamente caso as propriedades `fieldLabel` e `fielValue` sejam válidas.
+     *
+     * @default `false`
+     */
+    concatLabelValue?: boolean;
+    /**
+     * Nome da propriedade do objeto retornado que será utilizado como descrição do campo.
+     *
+     * O valor padrão é: `label`.
+     *
+     */
+    fieldLabel?: string;
+    /**
+     * Nome da propriedade do objeto retornado que será utilizado como valor do campo.
+     *
+     * O valor padrão é: `value`.
+     *
+     */
+    fieldValue?: string;
     /**
      * Define um ícone que será exibido ao lado do valor para o campo do tipo *tag*.
      *
@@ -52,6 +76,16 @@ export interface PoDynamicViewField extends PoDynamicField {
      * @default `false`
      */
     inverse?: boolean;
+    /**
+     * Define que a propriedade `property` é uma lista ou um objeto.
+     *
+     * > Por padrão, espera-se que a lista ou o objeto esteja com as propriedades `label` e `value`.
+     * Caso estejam com nomes diferentes, deve-se usar as propriedades `fieldLabel` e `fieldValue`.
+     * > É ignorada caso a propriedade `searchService` esteja sendo utilizada.
+     *
+     * @default `false`
+     */
+    isArrayOrObject?: boolean;
     /**
      * Formato de exibição do valor do campo.
      *
@@ -175,4 +209,14 @@ export interface PoDynamicViewField extends PoDynamicField {
         label: string;
         value: string | number;
     }>;
+    /**
+     * Serviço customizado para um campo em específico.
+     * Pode ser ser informada uma URL ou uma instancia do serviço baseado em PoDynamicViewRequest.
+     * **Importante:**
+     * > A propriedade `property` deve receber um valor válido independente de sua utilização para
+     * execução correta.
+     * > Para que funcione corretamente, é importante que o serviço siga o
+     * [guia de API do PO UI](https://po-ui.io/guides/api).
+     */
+    searchService?: string | PoDynamicViewRequest;
 }

package/lib/components/po-dynamic/po-dynamic-view/po-dynamic-view.component.d.ts

@@ -1,8 +1,8 @@
-import { OnChanges, OnInit, SimpleChanges } from '@angular/core';
 import { CurrencyPipe, DatePipe, DecimalPipe, TitleCasePipe } from '@angular/common';
+import { OnChanges, OnInit, SimpleChanges } from '@angular/core';
 import { PoTimePipe } from '../../../pipes/po-time/po-time.pipe';
 import { PoDynamicViewBaseComponent } from './po-dynamic-view-base.component';
-import { PoDynamicViewService } from './po-dynamic-view.service';
+import { PoDynamicViewService } from './services/po-dynamic-view.service';
 import * as i0 from "@angular/core";
 /**
  * @docsExtends PoDynamicViewBaseComponent
@@ -22,9 +22,11 @@ import * as i0 from "@angular/core";
  * <example name="po-dynamic-view-employee-on-load" title="PO Dynamic View - Employee on load">
  *  <file name="sample-po-dynamic-view-employee-on-load/sample-po-dynamic-view-employee-on-load.component.html"> </file>
  *  <file name="sample-po-dynamic-view-employee-on-load/sample-po-dynamic-view-employee-on-load.component.ts"> </file>
+ *  <file name="sample-po-dynamic-view-employee-on-load/sample-po-dynamic-view-employee-on-load.service.ts"> </file>
  * </example>
  */
 export declare class PoDynamicViewComponent extends PoDynamicViewBaseComponent implements OnChanges, OnInit {
+    initChanges: any;
     constructor(currencyPipe: CurrencyPipe, datePipe: DatePipe, decimalPipe: DecimalPipe, timePipe: PoTimePipe, titleCasePipe: TitleCasePipe, dynamicViewService: PoDynamicViewService);
     ngOnChanges(changes: SimpleChanges): void;
     ngOnInit(): void;

package/lib/components/po-dynamic/po-dynamic-view/services/po-dynamic-view.service.d.ts

@@ -0,0 +1,28 @@
+import { HttpClient, HttpHeaders } from '@angular/common/http';
+import { Observable } from 'rxjs';
+import { PoDynamicViewField } from '../po-dynamic-view-field.interface';
+import * as i0 from "@angular/core";
+/**
+ * @docsPrivate
+ *
+ * @description
+ *
+ * Serviço padrão utilizado para filtrar os dados dos campos que utilizam a propriedade `searchService`.
+ */
+export declare class PoDynamicViewService {
+    private httpClient;
+    readonly headers: HttpHeaders;
+    url: string;
+    constructor(httpClient: HttpClient);
+    getObjectByValue(value: any, filterParams?: any): Observable<Array<any> | {
+        [key: string]: any;
+    }>;
+    onLoad(url: string, value: any): Promise<{
+        value?: any;
+        fields?: Array<PoDynamicViewField>;
+    }>;
+    setConfig(url: string): void;
+    private validateParams;
+    static ɵfac: i0.ɵɵFactoryDeclaration<PoDynamicViewService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<PoDynamicViewService>;
+}