@po-ui/ng-components 16.3.0 → 16.4.1

package/fesm2022/po-ui-ng-components.mjs

@@ -4,7 +4,7 @@ import * as i1 from '@angular/common';
 import { CommonModule, DecimalPipe, NgOptimizedImage, CurrencyPipe, DatePipe, TitleCasePipe } from '@angular/common';
 import * as i2$3 from '@angular/animations';
 import { trigger, transition, style, animate, group, query, animateChild, state, keyframes } from '@angular/animations';
-import { Subject, filter, fromEvent, debounceTime, from, timer, of, Subscription, ReplaySubject, throwError, Observable } from 'rxjs';
+import { Subject, filter, fromEvent, debounceTime, from, timer, of, Subscription, ReplaySubject, throwError, map as map$1, catchError as catchError$1, Observable } from 'rxjs';
 import * as i2 from '@angular/router';
 import { RouterModule, NavigationEnd, NavigationCancel } from '@angular/router';
 import * as i6 from '@angular/cdk/listbox';
@@ -297,10 +297,12 @@ var PoTagType;
     PoTagType["Danger"] = "danger";
     /** Informativo ou explicativo. */
     PoTagType["Info"] = "info";
-    /** Confirmação, resultados positivos ou êxito */
+    /** Confirmação, resultados positivos ou êxito. */
     PoTagType["Success"] = "success";
     /** Aviso ou advertência. */
     PoTagType["Warning"] = "warning";
+    /** De uso geral, quando os tipos Info, Warning, Success e Danger não atendem a necessidade. */
+    PoTagType["Neutral"] = "neutral";
 })(PoTagType || (PoTagType = {}));
 
 /**
@@ -1254,7 +1256,8 @@ class PoTagBaseComponent {
      *  - `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.
+     *  - `info`: cor azul claro que caracteriza conteúdo informativo.
+     *  - `neutral`: cor cinza claro para uso geral.
      *
      * > Quando esta propriedade for definida, irá sobrepor a definição de `p-color` e `p-icon` somente será exibido caso seja `true`.
      *
@@ -20405,6 +20408,17 @@ class PoTableBaseComponent {
             });
         }
     }
+    sortArray(column, ascending, item) {
+        let itemsList;
+        if (item) {
+            itemsList = this.height ? [...item] : item;
+        }
+        else {
+            itemsList = this.height ? [...this.filteredItems] : this.filteredItems;
+        }
+        itemsList.sort((leftSide, rightSide) => sortValues(leftSide[column.property], rightSide[column.property], ascending));
+        this.filteredItems = itemsList;
+    }
     getDefaultColumns(item) {
         const keys = Object.keys(item);
         return keys
@@ -20492,13 +20506,6 @@ class PoTableBaseComponent {
     setSubtitleColumns() {
         this.subtitleColumns = this.getSubtitleColumns();
     }
-    sortArray(column, ascending) {
-        const itemsList = this.height ? [...this.filteredItems] : this.filteredItems;
-        itemsList.sort((leftSide, rightSide) => sortValues(leftSide[column.property], rightSide[column.property], ascending));
-        if (this.height) {
-            this.filteredItems = itemsList;
-        }
-    }
     unselectOtherRows(rows, row) {
         rows.forEach(item => {
             if (item !== row) {
@@ -22927,7 +22934,12 @@ class PoTableComponent extends PoTableBaseComponent {
         this.lastVisibleColumnsSelected = [...this.columns];
     }
     onFilteredItemsChange(items) {
-        this.filteredItems = items;
+        if (this.sortedColumn.property) {
+            this.sortArray(this.sortedColumn.property, this.sortedColumn.ascending, items);
+        }
+        else {
+            this.filteredItems = items;
+        }
     }
     /**
      * Método que remove um item da tabela.
@@ -24599,6 +24611,19 @@ class PoComboBaseComponent {
      * @default `true`
      */
     cache = true;
+    /**
+     * @optional
+     *
+     * @description
+     *
+     * Define que o dropdown do combo será incluido no body da página e não suspenso com a caixa de texto do componente.
+     * Opção necessária para o caso de uso do componente em páginas que necessitam renderizar o combo fora do conteúdo principal.
+     *
+     * > Obs: O uso dessa propriedade pode acarretar na perda sequencial da tabulação da página
+     *
+     * @default `false`
+     */
+    appendBox = false;
     constructor(languageService) {
         this.language = languageService.getShortLanguage();
     }
@@ -24970,7 +24995,7 @@ class PoComboBaseComponent {
         }
     }
     static ɵfac = function PoComboBaseComponent_Factory(t) { return new (t || PoComboBaseComponent)(i0.ɵɵdirectiveInject(PoLanguageService)); };
-    static ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: PoComboBaseComponent, inputs: { autoFocus: ["p-auto-focus", "autoFocus", convertToBoolean], label: ["p-label", "label"], help: ["p-help", "help"], name: "name", filterService: ["p-filter-service", "filterService"], infiniteScroll: ["p-infinite-scroll", "infiniteScroll"], infiniteScrollDistance: ["p-infinite-scroll-distance", "infiniteScrollDistance"], icon: ["p-icon", "icon"], optional: ["p-optional", "optional"], clean: ["p-clean", "clean", convertToBoolean], emitObjectValue: ["p-emit-object-value", "emitObjectValue", convertToBoolean], disabledTabFilter: ["p-disabled-tab-filter", "disabledTabFilter", convertToBoolean], removeInitialFilter: ["p-remove-initial-filter", "removeInitialFilter"], placeholder: ["p-placeholder", "placeholder"], debounceTime: ["p-debounce-time", "debounceTime"], disabledInitFilter: ["p-disabled-init-filter", "disabledInitFilter"], fieldValue: ["p-field-value", "fieldValue"], fieldLabel: ["p-field-label", "fieldLabel"], filterMinlength: ["p-filter-minlength", "filterMinlength"], required: ["p-required", "required"], showRequired: ["p-show-required", "showRequired"], changeOnEnter: ["p-change-on-enter", "changeOnEnter"], disabled: ["p-disabled", "disabled"], sort: ["p-sort", "sort"], options: ["p-options", "options"], filterMode: ["p-filter-mode", "filterMode"], filterParams: ["p-filter-params", "filterParams"], literals: ["p-literals", "literals"], cache: ["p-cache", "cache", convertToBoolean] }, outputs: { change: "p-change", ngModelChange: "ngModelChange", inputChange: "p-input-change" }, features: [i0.ɵɵInputTransformsFeature] });
+    static ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: PoComboBaseComponent, inputs: { autoFocus: ["p-auto-focus", "autoFocus", convertToBoolean], label: ["p-label", "label"], help: ["p-help", "help"], name: "name", filterService: ["p-filter-service", "filterService"], infiniteScroll: ["p-infinite-scroll", "infiniteScroll"], infiniteScrollDistance: ["p-infinite-scroll-distance", "infiniteScrollDistance"], icon: ["p-icon", "icon"], optional: ["p-optional", "optional"], clean: ["p-clean", "clean", convertToBoolean], emitObjectValue: ["p-emit-object-value", "emitObjectValue", convertToBoolean], disabledTabFilter: ["p-disabled-tab-filter", "disabledTabFilter", convertToBoolean], removeInitialFilter: ["p-remove-initial-filter", "removeInitialFilter"], placeholder: ["p-placeholder", "placeholder"], debounceTime: ["p-debounce-time", "debounceTime"], disabledInitFilter: ["p-disabled-init-filter", "disabledInitFilter"], fieldValue: ["p-field-value", "fieldValue"], fieldLabel: ["p-field-label", "fieldLabel"], filterMinlength: ["p-filter-minlength", "filterMinlength"], required: ["p-required", "required"], showRequired: ["p-show-required", "showRequired"], changeOnEnter: ["p-change-on-enter", "changeOnEnter"], disabled: ["p-disabled", "disabled"], sort: ["p-sort", "sort"], options: ["p-options", "options"], filterMode: ["p-filter-mode", "filterMode"], filterParams: ["p-filter-params", "filterParams"], literals: ["p-literals", "literals"], cache: ["p-cache", "cache", convertToBoolean], appendBox: ["p-append-in-body", "appendBox", convertToBoolean] }, outputs: { change: "p-change", ngModelChange: "ngModelChange", inputChange: "p-input-change" }, features: [i0.ɵɵInputTransformsFeature] });
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PoComboBaseComponent, [{
         type: Directive
@@ -25070,6 +25095,9 @@ class PoComboBaseComponent {
         }], cache: [{
             type: Input,
             args: [{ alias: 'p-cache', transform: convertToBoolean }]
+        }], appendBox: [{
+            type: Input,
+            args: [{ alias: 'p-append-in-body', transform: convertToBoolean }]
         }] }); })();
 
 /**
@@ -25160,8 +25188,8 @@ const _c2$8 = ["iconArrow"];
 const _c3$4 = ["inp"];
 const _c4$2 = ["poListbox"];
 function PoComboComponent_div_3_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 12);
-    i0.ɵɵelement(1, "po-icon", 13);
+    i0.ɵɵelementStart(0, "div", 15);
+    i0.ɵɵelement(1, "po-icon", 16);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
@@ -25170,24 +25198,54 @@ function PoComboComponent_div_3_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵproperty("p-icon", ctx_r1.icon);
 } }
 function PoComboComponent_po_clean_7_Template(rf, ctx) { if (rf & 1) {
-    const _r7 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "po-clean", 14);
-    i0.ɵɵlistener("p-change-event", function PoComboComponent_po_clean_7_Template_po_clean_p_change_event_0_listener($event) { i0.ɵɵrestoreView(_r7); const ctx_r6 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r6.clear($event)); });
+    const _r13 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "po-clean", 17);
+    i0.ɵɵlistener("p-change-event", function PoComboComponent_po_clean_7_Template_po_clean_p_change_event_0_listener($event) { i0.ɵɵrestoreView(_r13); const ctx_r12 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r12.clear($event)); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r3 = i0.ɵɵnextContext();
     i0.ɵɵproperty("p-element-ref", ctx_r3.inputEl);
 } }
-function PoComboComponent_ng_template_10_Template(rf, ctx) { if (rf & 1) {
-    const _r12 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 15, 16)(2, "po-listbox", 17, 18);
-    i0.ɵɵlistener("p-selectcombo-item", function PoComboComponent_ng_template_10_Template_po_listbox_p_selectcombo_item_2_listener($event) { i0.ɵɵrestoreView(_r12); const ctx_r11 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r11.onOptionClick($event, $event.event)); })("p-update-infinite-scroll", function PoComboComponent_ng_template_10_Template_po_listbox_p_update_infinite_scroll_2_listener() { i0.ɵɵrestoreView(_r12); const ctx_r13 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r13.showMoreInfiniteScroll()); })("p-close", function PoComboComponent_ng_template_10_Template_po_listbox_p_close_2_listener() { i0.ɵɵrestoreView(_r12); const ctx_r14 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r14.onCloseCombo()); });
+function PoComboComponent_ng_container_10_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementContainer(0);
+} }
+function PoComboComponent_ng_template_11_ng_container_0_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementContainer(0);
+} }
+function PoComboComponent_ng_template_11_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵtemplate(0, PoComboComponent_ng_template_11_ng_container_0_Template, 1, 0, "ng-container", 18);
+} if (rf & 2) {
+    i0.ɵɵnextContext();
+    const _r10 = i0.ɵɵreference(17);
+    i0.ɵɵproperty("ngTemplateOutlet", _r10);
+} }
+function PoComboComponent_ng_template_13_ng_template_0_ng_container_0_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementContainer(0);
+} }
+function PoComboComponent_ng_template_13_ng_template_0_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵtemplate(0, PoComboComponent_ng_template_13_ng_template_0_ng_container_0_Template, 1, 0, "ng-container", 18);
+} if (rf & 2) {
+    i0.ɵɵnextContext(2);
+    const _r10 = i0.ɵɵreference(17);
+    i0.ɵɵproperty("ngTemplateOutlet", _r10);
+} }
+function PoComboComponent_ng_template_13_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵtemplate(0, PoComboComponent_ng_template_13_ng_template_0_Template, 1, 1, "ng-template", 19);
+} if (rf & 2) {
+    i0.ɵɵnextContext();
+    const _r0 = i0.ɵɵreference(2);
+    i0.ɵɵproperty("cdkConnectedOverlayOrigin", _r0)("cdkConnectedOverlayOpen", true);
+} }
+function PoComboComponent_ng_template_16_Template(rf, ctx) { if (rf & 1) {
+    const _r21 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 20, 21)(2, "po-listbox", 22, 23);
+    i0.ɵɵlistener("p-selectcombo-item", function PoComboComponent_ng_template_16_Template_po_listbox_p_selectcombo_item_2_listener($event) { i0.ɵɵrestoreView(_r21); const ctx_r20 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r20.onOptionClick($event, $event.event)); })("p-update-infinite-scroll", function PoComboComponent_ng_template_16_Template_po_listbox_p_update_infinite_scroll_2_listener() { i0.ɵɵrestoreView(_r21); const ctx_r22 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r22.showMoreInfiniteScroll()); })("p-close", function PoComboComponent_ng_template_16_Template_po_listbox_p_close_2_listener() { i0.ɵɵrestoreView(_r21); const ctx_r23 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r23.onCloseCombo()); });
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const ctx_r5 = i0.ɵɵnextContext();
-    i0.ɵɵproperty("hidden", !ctx_r5.comboOpen && !ctx_r5.isServerSearching);
+    const ctx_r11 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("hidden", !ctx_r11.comboOpen && !ctx_r11.isServerSearching);
     i0.ɵɵadvance(2);
-    i0.ɵɵproperty("p-items", ctx_r5.visibleOptions)("p-field-value", ctx_r5.dynamicValue)("p-field-label", ctx_r5.dynamicLabel)("p-template", ctx_r5.comboOptionTemplate)("p-search-value", ctx_r5.getInputValue())("p-infinite-loading", ctx_r5.infiniteLoading)("p-infinite-scroll", ctx_r5.infiniteScroll)("p-filtering", ctx_r5.isFiltering)("p-cache", ctx_r5.cache)("p-filter-mode", ctx_r5.filterMode)("p-visible", ctx_r5.comboOpen)("p-is-searching", ctx_r5.isServerSearching)("p-should-mark-letter", ctx_r5.shouldMarkLetters)("p-compare-cache", ctx_r5.compareObjects(ctx_r5.cacheOptions, ctx_r5.visibleOptions))("p-combo-service", ctx_r5.service)("p-infinite-scroll-distance", ctx_r5.infiniteScrollDistance);
+    i0.ɵɵproperty("p-items", ctx_r11.visibleOptions)("p-field-value", ctx_r11.dynamicValue)("p-field-label", ctx_r11.dynamicLabel)("p-template", ctx_r11.comboOptionTemplate)("p-search-value", ctx_r11.getInputValue())("p-infinite-loading", ctx_r11.infiniteLoading)("p-infinite-scroll", ctx_r11.infiniteScroll)("p-filtering", ctx_r11.isFiltering)("p-cache", ctx_r11.cache)("p-filter-mode", ctx_r11.filterMode)("p-visible", ctx_r11.comboOpen)("p-is-searching", ctx_r11.isServerSearching)("p-should-mark-letter", ctx_r11.shouldMarkLetters)("p-compare-cache", ctx_r11.compareObjects(ctx_r11.cacheOptions, ctx_r11.visibleOptions))("p-combo-service", ctx_r11.service)("p-infinite-scroll-distance", ctx_r11.infiniteScrollDistance);
 } }
 const poComboContainerOffset = 8;
 const poComboContainerPositionDefault = 'bottom';
@@ -25680,7 +25738,7 @@ class PoComboComponent extends PoComboBaseComponent {
                     useExisting: forwardRef(() => PoComboComponent),
                     multi: true
                 }
-            ]), i0.ɵɵInheritDefinitionFeature, i0.ɵɵNgOnChangesFeature], decls: 12, vars: 27, consts: [[3, "p-disabled", "p-id", "p-label", "p-optional", "p-required", "p-show-required"], ["cdkOverlayOrigin", "", 1, "po-field-container-content"], ["trigger", "cdkOverlayOrigin"], ["class", "po-field-icon-container-left", 4, "ngIf"], ["autocomplete", "off", "type", "text", 1, "po-input", "po-combo-input", 3, "ngClass", "disabled", "id", "placeholder", "required", "click", "keyup", "blur", "keyup.enter", "keydown"], ["inp", ""], [1, "po-field-icon-container-right"], ["class", "po-icon-input", 3, "p-element-ref", "p-change-event", 4, "ngIf"], [3, "click"], ["iconArrow", ""], ["cdkConnectedOverlay", "", 3, "cdkConnectedOverlayOrigin", "cdkConnectedOverlayOpen"], [3, "p-help", "p-disabled"], [1, "po-field-icon-container-left"], [1, "po-field-icon", "po-icon-input", 3, "p-icon"], [1, "po-icon-input", 3, "p-element-ref", "p-change-event"], [1, "po-combo-container", 3, "hidden"], ["containerElement", ""], ["p-type", "option", 3, "p-items", "p-field-value", "p-field-label", "p-template", "p-search-value", "p-infinite-loading", "p-infinite-scroll", "p-filtering", "p-cache", "p-filter-mode", "p-visible", "p-is-searching", "p-should-mark-letter", "p-compare-cache", "p-combo-service", "p-infinite-scroll-distance", "p-selectcombo-item", "p-update-infinite-scroll", "p-close"], ["poListbox", "", "contentElement", ""]], template: function PoComboComponent_Template(rf, ctx) { if (rf & 1) {
+            ]), i0.ɵɵInheritDefinitionFeature, i0.ɵɵNgOnChangesFeature], decls: 18, vars: 28, consts: [[3, "p-disabled", "p-id", "p-label", "p-optional", "p-required", "p-show-required"], ["cdkOverlayOrigin", "", 1, "po-field-container-content"], ["trigger", "cdkOverlayOrigin"], ["class", "po-field-icon-container-left", 4, "ngIf"], ["autocomplete", "off", "type", "text", 1, "po-input", "po-combo-input", 3, "ngClass", "disabled", "id", "placeholder", "required", "click", "keyup", "blur", "keyup.enter", "keydown"], ["inp", ""], [1, "po-field-icon-container-right"], ["class", "po-icon-input", 3, "p-element-ref", "p-change-event", 4, "ngIf"], [3, "click"], ["iconArrow", ""], [4, "ngIf", "ngIfThen", "ngIfElse"], ["dropdownDefault", ""], ["dropdownCDK", ""], [3, "p-help", "p-disabled"], ["dropdownListbox", ""], [1, "po-field-icon-container-left"], [1, "po-field-icon", "po-icon-input", 3, "p-icon"], [1, "po-icon-input", 3, "p-element-ref", "p-change-event"], [4, "ngTemplateOutlet"], ["cdkConnectedOverlay", "", 3, "cdkConnectedOverlayOrigin", "cdkConnectedOverlayOpen"], [1, "po-combo-container", 3, "hidden"], ["containerElement", ""], ["p-type", "option", 3, "p-items", "p-field-value", "p-field-label", "p-template", "p-search-value", "p-infinite-loading", "p-infinite-scroll", "p-filtering", "p-cache", "p-filter-mode", "p-visible", "p-is-searching", "p-should-mark-letter", "p-compare-cache", "p-combo-service", "p-infinite-scroll-distance", "p-selectcombo-item", "p-update-infinite-scroll", "p-close"], ["poListbox", "", "contentElement", ""]], template: function PoComboComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "po-field-container", 0)(1, "div", 1, 2);
             i0.ɵɵtemplate(3, PoComboComponent_div_3_Template, 2, 3, "div", 3);
             i0.ɵɵelementStart(4, "input", 4, 5);
@@ -25691,12 +25749,16 @@ class PoComboComponent extends PoComboBaseComponent {
             i0.ɵɵelementStart(8, "span", 8, 9);
             i0.ɵɵlistener("click", function PoComboComponent_Template_span_click_8_listener() { return ctx.toggleComboVisibility(); });
             i0.ɵɵelementEnd()()();
-            i0.ɵɵtemplate(10, PoComboComponent_ng_template_10_Template, 5, 17, "ng-template", 10);
-            i0.ɵɵelement(11, "po-field-container-bottom", 11);
+            i0.ɵɵtemplate(10, PoComboComponent_ng_container_10_Template, 1, 0, "ng-container", 10);
+            i0.ɵɵtemplate(11, PoComboComponent_ng_template_11_Template, 1, 1, "ng-template", null, 11, i0.ɵɵtemplateRefExtractor);
+            i0.ɵɵtemplate(13, PoComboComponent_ng_template_13_Template, 1, 2, "ng-template", null, 12, i0.ɵɵtemplateRefExtractor);
+            i0.ɵɵelement(15, "po-field-container-bottom", 13);
             i0.ɵɵelementEnd();
+            i0.ɵɵtemplate(16, PoComboComponent_ng_template_16_Template, 5, 17, "ng-template", null, 14, i0.ɵɵtemplateRefExtractor);
         } if (rf & 2) {
-            const _r0 = i0.ɵɵreference(2);
             const _r2 = i0.ɵɵreference(5);
+            const _r6 = i0.ɵɵreference(12);
+            const _r8 = i0.ɵɵreference(14);
             i0.ɵɵproperty("p-disabled", ctx.disabled)("p-id", ctx.id)("p-label", ctx.label)("p-optional", ctx.optional)("p-required", ctx.required)("p-show-required", ctx.showRequired);
             i0.ɵɵadvance(3);
             i0.ɵɵproperty("ngIf", ctx.icon);
@@ -25710,10 +25772,10 @@ class PoComboComponent extends PoComboBaseComponent {
             i0.ɵɵclassMapInterpolate1("po-icon po-field-icon ", ctx.comboIcon, " po-icon-input");
             i0.ɵɵclassProp("po-field-icon-disabled", ctx.disabled)("po-field-icon", !ctx.disabled);
             i0.ɵɵadvance(2);
-            i0.ɵɵproperty("cdkConnectedOverlayOrigin", _r0)("cdkConnectedOverlayOpen", true);
-            i0.ɵɵadvance(1);
+            i0.ɵɵproperty("ngIf", ctx.appendBox)("ngIfThen", _r8)("ngIfElse", _r6);
+            i0.ɵɵadvance(5);
             i0.ɵɵproperty("p-help", ctx.help)("p-disabled", ctx.disabled);
-        } }, dependencies: [i1.NgClass, i1.NgIf, i5.CdkConnectedOverlay, i5.CdkOverlayOrigin, PoCleanComponent, PoFieldContainerBottomComponent, PoFieldContainerComponent, PoIconComponent, PoListBoxComponent], encapsulation: 2, changeDetection: 0 });
+        } }, dependencies: [i1.NgClass, i1.NgIf, i1.NgTemplateOutlet, i5.CdkConnectedOverlay, i5.CdkOverlayOrigin, PoCleanComponent, PoFieldContainerBottomComponent, PoFieldContainerComponent, PoIconComponent, PoListBoxComponent], encapsulation: 2, changeDetection: 0 });
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PoComboComponent, [{
         type: Component,
@@ -25730,7 +25792,7 @@ class PoComboComponent extends PoComboBaseComponent {
                         useExisting: forwardRef(() => PoComboComponent),
                         multi: true
                     }
-                ], template: "<po-field-container\n  [p-disabled]=\"disabled\"\n  [p-id]=\"id\"\n  [p-label]=\"label\"\n  [p-optional]=\"optional\"\n  [p-required]=\"required\"\n  [p-show-required]=\"showRequired\"\n>\n  <div cdkOverlayOrigin #trigger=\"cdkOverlayOrigin\" class=\"po-field-container-content\">\n    <div *ngIf=\"icon\" class=\"po-field-icon-container-left\">\n      <po-icon class=\"po-field-icon po-icon-input\" [class.po-field-icon-disabled]=\"disabled\" [p-icon]=\"icon\"></po-icon>\n    </div>\n\n    <input\n      #inp\n      class=\"po-input po-combo-input\"\n      [ngClass]=\"clean && inp.value ? 'po-input-double-icon-right' : 'po-input-icon-right'\"\n      [class.po-input-icon-left]=\"icon\"\n      autocomplete=\"off\"\n      type=\"text\"\n      [attr.name]=\"name\"\n      [disabled]=\"disabled\"\n      [id]=\"id\"\n      [placeholder]=\"disabled ? '' : placeholder\"\n      [required]=\"required\"\n      (click)=\"toggleComboVisibility()\"\n      (keyup)=\"onKeyUp($event)\"\n      (blur)=\"onBlur()\"\n      (keyup.enter)=\"searchOnEnter($event.target.value)\"\n      (keydown)=\"onKeyDown($event)\"\n    />\n\n    <div class=\"po-field-icon-container-right\">\n      <po-clean\n        class=\"po-icon-input\"\n        *ngIf=\"clean && !disabled\"\n        (p-change-event)=\"clear($event)\"\n        [p-element-ref]=\"inputEl\"\n      >\n      </po-clean>\n      <span\n        #iconArrow\n        class=\"po-icon po-field-icon {{ comboIcon }} po-icon-input\"\n        [class.po-field-icon-disabled]=\"disabled\"\n        [class.po-field-icon]=\"!disabled\"\n        (click)=\"toggleComboVisibility()\"\n      >\n      </span>\n    </div>\n  </div>\n\n  <ng-template cdkConnectedOverlay [cdkConnectedOverlayOrigin]=\"trigger\" [cdkConnectedOverlayOpen]=\"true\">\n    <div #containerElement class=\"po-combo-container\" [hidden]=\"!comboOpen && !isServerSearching\">\n      <po-listbox\n        #poListbox\n        #contentElement\n        p-type=\"option\"\n        [p-items]=\"visibleOptions\"\n        [p-field-value]=\"dynamicValue\"\n        [p-field-label]=\"dynamicLabel\"\n        [p-template]=\"comboOptionTemplate\"\n        [p-search-value]=\"getInputValue()\"\n        [p-infinite-loading]=\"infiniteLoading\"\n        [p-infinite-scroll]=\"infiniteScroll\"\n        [p-filtering]=\"isFiltering\"\n        [p-cache]=\"cache\"\n        (p-selectcombo-item)=\"onOptionClick($event, $event.event)\"\n        [p-filter-mode]=\"filterMode\"\n        [p-visible]=\"comboOpen\"\n        [p-is-searching]=\"isServerSearching\"\n        [p-should-mark-letter]=\"shouldMarkLetters\"\n        [p-compare-cache]=\"compareObjects(cacheOptions, visibleOptions)\"\n        [p-combo-service]=\"service\"\n        [p-infinite-scroll-distance]=\"infiniteScrollDistance\"\n        (p-update-infinite-scroll)=\"showMoreInfiniteScroll()\"\n        (p-close)=\"onCloseCombo()\"\n      ></po-listbox>\n    </div>\n  </ng-template>\n  <po-field-container-bottom [p-help]=\"help\" [p-disabled]=\"disabled\"></po-field-container-bottom>\n</po-field-container>\n" }]
+                ], template: "<po-field-container\n  [p-disabled]=\"disabled\"\n  [p-id]=\"id\"\n  [p-label]=\"label\"\n  [p-optional]=\"optional\"\n  [p-required]=\"required\"\n  [p-show-required]=\"showRequired\"\n>\n  <div cdkOverlayOrigin #trigger=\"cdkOverlayOrigin\" class=\"po-field-container-content\">\n    <div *ngIf=\"icon\" class=\"po-field-icon-container-left\">\n      <po-icon class=\"po-field-icon po-icon-input\" [class.po-field-icon-disabled]=\"disabled\" [p-icon]=\"icon\"></po-icon>\n    </div>\n\n    <input\n      #inp\n      class=\"po-input po-combo-input\"\n      [ngClass]=\"clean && inp.value ? 'po-input-double-icon-right' : 'po-input-icon-right'\"\n      [class.po-input-icon-left]=\"icon\"\n      autocomplete=\"off\"\n      type=\"text\"\n      [attr.name]=\"name\"\n      [disabled]=\"disabled\"\n      [id]=\"id\"\n      [placeholder]=\"disabled ? '' : placeholder\"\n      [required]=\"required\"\n      (click)=\"toggleComboVisibility()\"\n      (keyup)=\"onKeyUp($event)\"\n      (blur)=\"onBlur()\"\n      (keyup.enter)=\"searchOnEnter($event.target.value)\"\n      (keydown)=\"onKeyDown($event)\"\n    />\n\n    <div class=\"po-field-icon-container-right\">\n      <po-clean\n        class=\"po-icon-input\"\n        *ngIf=\"clean && !disabled\"\n        (p-change-event)=\"clear($event)\"\n        [p-element-ref]=\"inputEl\"\n      >\n      </po-clean>\n      <span\n        #iconArrow\n        class=\"po-icon po-field-icon {{ comboIcon }} po-icon-input\"\n        [class.po-field-icon-disabled]=\"disabled\"\n        [class.po-field-icon]=\"!disabled\"\n        (click)=\"toggleComboVisibility()\"\n      >\n      </span>\n    </div>\n  </div>\n\n  <ng-container *ngIf=\"appendBox; then dropdownCDK; else dropdownDefault\"> </ng-container>\n\n  <ng-template #dropdownDefault>\n    <ng-container *ngTemplateOutlet=\"dropdownListbox\"> </ng-container>\n  </ng-template>\n\n  <ng-template #dropdownCDK>\n    <ng-template cdkConnectedOverlay [cdkConnectedOverlayOrigin]=\"trigger\" [cdkConnectedOverlayOpen]=\"true\">\n      <ng-container *ngTemplateOutlet=\"dropdownListbox\"></ng-container>\n    </ng-template>\n  </ng-template>\n\n  <po-field-container-bottom [p-help]=\"help\" [p-disabled]=\"disabled\"></po-field-container-bottom>\n</po-field-container>\n\n<ng-template #dropdownListbox>\n  <div #containerElement class=\"po-combo-container\" [hidden]=\"!comboOpen && !isServerSearching\">\n    <po-listbox\n      #poListbox\n      #contentElement\n      p-type=\"option\"\n      [p-items]=\"visibleOptions\"\n      [p-field-value]=\"dynamicValue\"\n      [p-field-label]=\"dynamicLabel\"\n      [p-template]=\"comboOptionTemplate\"\n      [p-search-value]=\"getInputValue()\"\n      [p-infinite-loading]=\"infiniteLoading\"\n      [p-infinite-scroll]=\"infiniteScroll\"\n      [p-filtering]=\"isFiltering\"\n      [p-cache]=\"cache\"\n      (p-selectcombo-item)=\"onOptionClick($event, $event.event)\"\n      [p-filter-mode]=\"filterMode\"\n      [p-visible]=\"comboOpen\"\n      [p-is-searching]=\"isServerSearching\"\n      [p-should-mark-letter]=\"shouldMarkLetters\"\n      [p-compare-cache]=\"compareObjects(cacheOptions, visibleOptions)\"\n      [p-combo-service]=\"service\"\n      [p-infinite-scroll-distance]=\"infiniteScrollDistance\"\n      (p-update-infinite-scroll)=\"showMoreInfiniteScroll()\"\n      (p-close)=\"onCloseCombo()\"\n    ></po-listbox>\n  </div>\n</ng-template>\n" }]
     }], function () { return [{ type: i0.ElementRef }, { type: i0.IterableDiffers }, { type: PoComboFilterService }, { type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }, { type: PoControlPositionService }, { type: PoLanguageService }]; }, { comboOptionTemplate: [{
             type: ContentChild,
             args: [PoComboOptionTemplateDirective, { static: true }]
@@ -31269,6 +31331,19 @@ class PoMultiselectBaseComponent {
      * Pode ser informada uma função que será disparada quando houver alterações no ngModel.
      */
     change = new EventEmitter();
+    /**
+     * @optional
+     *
+     * @description
+     *
+     * Define que o dropdown do multiselect será incluido no body da página e não suspenso com a caixa de texto do componente.
+     * Opção necessária para o caso de uso do componente em páginas que necessitam renderizar o multiselect fora do conteúdo principal.
+     *
+     * > Obs: O uso dessa propriedade pode acarretar na perda sequencial da tabulação da página
+     *
+     * @default `false`
+     */
+    appendBox = false;
     selectedOptions = [];
     visibleOptionsDropdown = [];
     visibleDisclaimers = [];
@@ -31770,7 +31845,7 @@ class PoMultiselectBaseComponent {
         }
     }
     static ɵfac = function PoMultiselectBaseComponent_Factory(t) { return new (t || PoMultiselectBaseComponent)(i0.ɵɵdirectiveInject(PoLanguageService)); };
-    static ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: PoMultiselectBaseComponent, inputs: { autoFocus: ["p-auto-focus", "autoFocus", convertToBoolean], label: ["p-label", "label"], help: ["p-help", "help"], optional: ["p-optional", "optional"], placeholder: ["p-placeholder", "placeholder"], placeholderSearch: ["p-placeholder-search", "placeholderSearch"], name: "name", hideSelectAll: ["p-hide-select-all", "hideSelectAll", convertToBoolean], filterService: ["p-filter-service", "filterService"], autoHeight: ["p-auto-height", "autoHeight", convertToBoolean], debounceTime: ["p-debounce-time", "debounceTime"], literals: ["p-literals", "literals"], required: ["p-required", "required"], showRequired: ["p-show-required", "showRequired"], disabled: ["p-disabled", "disabled"], hideSearch: ["p-hide-search", "hideSearch"], options: ["p-options", "options"], sort: ["p-sort", "sort"], filterMode: ["p-filter-mode", "filterMode"], fieldLabel: ["p-field-label", "fieldLabel"], fieldValue: ["p-field-value", "fieldValue"] }, outputs: { change: "p-change" }, features: [i0.ɵɵInputTransformsFeature] });
+    static ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: PoMultiselectBaseComponent, inputs: { autoFocus: ["p-auto-focus", "autoFocus", convertToBoolean], label: ["p-label", "label"], help: ["p-help", "help"], optional: ["p-optional", "optional"], placeholder: ["p-placeholder", "placeholder"], placeholderSearch: ["p-placeholder-search", "placeholderSearch"], name: "name", hideSelectAll: ["p-hide-select-all", "hideSelectAll", convertToBoolean], appendBox: ["p-append-in-body", "appendBox", convertToBoolean], filterService: ["p-filter-service", "filterService"], autoHeight: ["p-auto-height", "autoHeight", convertToBoolean], debounceTime: ["p-debounce-time", "debounceTime"], literals: ["p-literals", "literals"], required: ["p-required", "required"], showRequired: ["p-show-required", "showRequired"], disabled: ["p-disabled", "disabled"], hideSearch: ["p-hide-search", "hideSearch"], options: ["p-options", "options"], sort: ["p-sort", "sort"], filterMode: ["p-filter-mode", "filterMode"], fieldLabel: ["p-field-label", "fieldLabel"], fieldValue: ["p-field-value", "fieldValue"] }, outputs: { change: "p-change" }, features: [i0.ɵɵInputTransformsFeature] });
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PoMultiselectBaseComponent, [{
         type: Directive
@@ -31801,6 +31876,9 @@ class PoMultiselectBaseComponent {
         }], change: [{
             type: Output,
             args: ['p-change']
+        }], appendBox: [{
+            type: Input,
+            args: [{ alias: 'p-append-in-body', transform: convertToBoolean }]
         }], filterService: [{
             type: Input,
             args: ['p-filter-service']
@@ -31893,25 +31971,64 @@ class PoMultiselectFilterService {
 const _c0$L = ["dropdownElement"];
 const _c1$h = ["iconElement"];
 const _c2$6 = ["inputElement"];
-function PoMultiselectComponent_span_4_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 12);
+function PoMultiselectComponent_span_5_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 15);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext();
+    const ctx_r2 = i0.ɵɵnextContext();
     i0.ɵɵadvance(1);
-    i0.ɵɵtextInterpolate1(" ", ctx_r1.placeholder, " ");
+    i0.ɵɵtextInterpolate1(" ", ctx_r2.placeholder, " ");
 } }
-function PoMultiselectComponent_po_disclaimer_5_Template(rf, ctx) { if (rf & 1) {
-    const _r7 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "po-disclaimer", 13);
-    i0.ɵɵlistener("click", function PoMultiselectComponent_po_disclaimer_5_Template_po_disclaimer_click_0_listener() { const restoredCtx = i0.ɵɵrestoreView(_r7); const disclaimer_r5 = restoredCtx.$implicit; const ctx_r6 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r6.openDropdown(disclaimer_r5[ctx_r6.fieldValue] === "")); })("p-close-action", function PoMultiselectComponent_po_disclaimer_5_Template_po_disclaimer_p_close_action_0_listener() { const restoredCtx = i0.ɵɵrestoreView(_r7); const disclaimer_r5 = restoredCtx.$implicit; const ctx_r8 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r8.closeDisclaimer(disclaimer_r5[ctx_r8.fieldValue])); });
+function PoMultiselectComponent_po_disclaimer_6_Template(rf, ctx) { if (rf & 1) {
+    const _r14 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "po-disclaimer", 16);
+    i0.ɵɵlistener("click", function PoMultiselectComponent_po_disclaimer_6_Template_po_disclaimer_click_0_listener() { const restoredCtx = i0.ɵɵrestoreView(_r14); const disclaimer_r12 = restoredCtx.$implicit; const ctx_r13 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r13.openDropdown(disclaimer_r12[ctx_r13.fieldValue] === "")); })("p-close-action", function PoMultiselectComponent_po_disclaimer_6_Template_po_disclaimer_p_close_action_0_listener() { const restoredCtx = i0.ɵɵrestoreView(_r14); const disclaimer_r12 = restoredCtx.$implicit; const ctx_r15 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r15.closeDisclaimer(disclaimer_r12[ctx_r15.fieldValue])); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const disclaimer_r5 = ctx.$implicit;
-    const ctx_r2 = i0.ɵɵnextContext();
-    i0.ɵɵclassProp("po-clickable", disclaimer_r5[ctx_r2.fieldValue] === "" && !ctx_r2.disabled);
-    i0.ɵɵproperty("p-label", disclaimer_r5[ctx_r2.fieldLabel])("p-value", disclaimer_r5[ctx_r2.fieldValue])("p-hide-close", disclaimer_r5[ctx_r2.fieldValue] === "" || ctx_r2.disabled);
+    const disclaimer_r12 = ctx.$implicit;
+    const ctx_r3 = i0.ɵɵnextContext();
+    i0.ɵɵclassProp("po-clickable", disclaimer_r12[ctx_r3.fieldValue] === "" && !ctx_r3.disabled);
+    i0.ɵɵproperty("p-label", disclaimer_r12[ctx_r3.fieldLabel])("p-value", disclaimer_r12[ctx_r3.fieldValue])("p-hide-close", disclaimer_r12[ctx_r3.fieldValue] === "" || ctx_r3.disabled);
+} }
+function PoMultiselectComponent_ng_container_10_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementContainer(0);
+} }
+function PoMultiselectComponent_ng_template_11_ng_container_0_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementContainer(0);
+} }
+function PoMultiselectComponent_ng_template_11_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵtemplate(0, PoMultiselectComponent_ng_template_11_ng_container_0_Template, 1, 0, "ng-container", 17);
+} if (rf & 2) {
+    i0.ɵɵnextContext();
+    const _r10 = i0.ɵɵreference(17);
+    i0.ɵɵproperty("ngTemplateOutlet", _r10);
+} }
+function PoMultiselectComponent_ng_template_13_ng_template_0_ng_container_0_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementContainer(0);
+} }
+function PoMultiselectComponent_ng_template_13_ng_template_0_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵtemplate(0, PoMultiselectComponent_ng_template_13_ng_template_0_ng_container_0_Template, 1, 0, "ng-container", 17);
+} if (rf & 2) {
+    i0.ɵɵnextContext(2);
+    const _r10 = i0.ɵɵreference(17);
+    i0.ɵɵproperty("ngTemplateOutlet", _r10);
+} }
+function PoMultiselectComponent_ng_template_13_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵtemplate(0, PoMultiselectComponent_ng_template_13_ng_template_0_Template, 1, 1, "ng-template", 18);
+} if (rf & 2) {
+    i0.ɵɵnextContext();
+    const _r0 = i0.ɵɵreference(2);
+    i0.ɵɵproperty("cdkConnectedOverlayOrigin", _r0)("cdkConnectedOverlayOpen", true);
+} }
+function PoMultiselectComponent_ng_template_16_Template(rf, ctx) { if (rf & 1) {
+    const _r21 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "po-multiselect-dropdown", 19, 20);
+    i0.ɵɵlistener("p-change", function PoMultiselectComponent_ng_template_16_Template_po_multiselect_dropdown_p_change_0_listener($event) { i0.ɵɵrestoreView(_r21); const ctx_r20 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r20.changeItems($event)); })("p-change-search", function PoMultiselectComponent_ng_template_16_Template_po_multiselect_dropdown_p_change_search_0_listener($event) { i0.ɵɵrestoreView(_r21); const ctx_r22 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r22.changeSearch($event)); })("p-close-dropdown", function PoMultiselectComponent_ng_template_16_Template_po_multiselect_dropdown_p_close_dropdown_0_listener() { i0.ɵɵrestoreView(_r21); const ctx_r23 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r23.controlDropdownVisibility(false)); });
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r11 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("p-searching", ctx_r11.isServerSearching)("p-hide-search", ctx_r11.hideSearch)("p-hide-select-all", ctx_r11.hideSelectAll)("p-literals", ctx_r11.literals)("p-options", ctx_r11.options)("p-visible-options", ctx_r11.visibleOptionsDropdown)("p-selected-options", ctx_r11.selectedOptions)("p-placeholder-search", ctx_r11.placeholderSearch)("p-field-value", ctx_r11.fieldValue)("p-field-label", ctx_r11.fieldLabel)("p-multiselect-template", ctx_r11.multiselectOptionTemplate);
 } }
 const poMultiselectContainerOffset = 8;
 const poMultiselectContainerPositionDefault = 'bottom';
@@ -32272,8 +32389,8 @@ class PoMultiselectComponent extends PoMultiselectBaseComponent {
             let _t;
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.multiselectOptionTemplate = _t.first);
         } }, viewQuery: function PoMultiselectComponent_Query(rf, ctx) { if (rf & 1) {
-            i0.ɵɵviewQuery(_c0$L, 7, ElementRef);
-            i0.ɵɵviewQuery(_c0$L, 7);
+            i0.ɵɵviewQuery(_c0$L, 5, ElementRef);
+            i0.ɵɵviewQuery(_c0$L, 5);
             i0.ɵɵviewQuery(_c1$h, 7, ElementRef);
             i0.ɵɵviewQuery(_c2$6, 7, ElementRef);
         } if (rf & 2) {
@@ -32282,24 +32399,27 @@ class PoMultiselectComponent extends PoMultiselectBaseComponent {
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.dropdown = _t.first);
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.iconElement = _t.first);
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.inputElement = _t.first);
-        } }, features: [i0.ɵɵProvidersFeature(providers$1), i0.ɵɵInheritDefinitionFeature, i0.ɵɵNgOnChangesFeature], decls: 12, vars: 36, consts: [[3, "p-disabled", "p-label", "p-optional", "p-required", "p-show-required"], [1, "po-field-container-content"], [1, "po-input", "po-input-icon-right", "po-multiselect-input", "po-clickable", 3, "tabindex", "keyup.enter", "keydown", "click", "blur"], ["inputElement", ""], ["class", "po-multiselect-input-placeholder", 4, "ngIf"], ["class", "po-multiselect-input-disclaimer", 3, "p-label", "p-value", "p-hide-close", "po-clickable", "click", "p-close-action", 4, "ngFor", "ngForOf"], [1, "po-field-icon-container-right"], [3, "ngClass"], ["iconElement", ""], [3, "p-searching", "p-hide-search", "p-hide-select-all", "p-literals", "p-options", "p-visible-options", "p-selected-options", "p-placeholder-search", "p-field-value", "p-field-label", "p-multiselect-template", "p-change", "p-change-search", "p-close-dropdown"], ["dropdownElement", ""], [3, "p-help", "p-disabled"], [1, "po-multiselect-input-placeholder"], [1, "po-multiselect-input-disclaimer", 3, "p-label", "p-value", "p-hide-close", "click", "p-close-action"]], template: function PoMultiselectComponent_Template(rf, ctx) { if (rf & 1) {
-            i0.ɵɵelementStart(0, "po-field-container", 0)(1, "div", 1)(2, "div", 2, 3);
-            i0.ɵɵlistener("keyup.enter", function PoMultiselectComponent_Template_div_keyup_enter_2_listener() { return ctx.toggleDropdownVisibility(); })("keydown", function PoMultiselectComponent_Template_div_keydown_2_listener($event) { return ctx.onKeyDown($event); })("click", function PoMultiselectComponent_Template_div_click_2_listener() { return ctx.toggleDropdownVisibility(); })("blur", function PoMultiselectComponent_Template_div_blur_2_listener() { return ctx.onBlur(); });
-            i0.ɵɵtemplate(4, PoMultiselectComponent_span_4_Template, 2, 1, "span", 4);
-            i0.ɵɵtemplate(5, PoMultiselectComponent_po_disclaimer_5_Template, 1, 5, "po-disclaimer", 5);
-            i0.ɵɵelementStart(6, "div", 6);
-            i0.ɵɵelement(7, "span", 7, 8);
+        } }, features: [i0.ɵɵProvidersFeature(providers$1), i0.ɵɵInheritDefinitionFeature, i0.ɵɵNgOnChangesFeature], decls: 18, vars: 28, consts: [[3, "p-disabled", "p-label", "p-optional", "p-required", "p-show-required"], ["cdkOverlayOrigin", "", 1, "po-field-container-content"], ["trigger", "cdkOverlayOrigin"], [1, "po-input", "po-input-icon-right", "po-multiselect-input", "po-clickable", 3, "tabindex", "keyup.enter", "keydown", "click", "blur"], ["inputElement", ""], ["class", "po-multiselect-input-placeholder", 4, "ngIf"], ["class", "po-multiselect-input-disclaimer", 3, "p-label", "p-value", "p-hide-close", "po-clickable", "click", "p-close-action", 4, "ngFor", "ngForOf"], [1, "po-field-icon-container-right"], [3, "ngClass"], ["iconElement", ""], [4, "ngIf", "ngIfThen", "ngIfElse"], ["dropdownDefault", ""], ["dropdownCDK", ""], [3, "p-help", "p-disabled"], ["dropdownListbox", ""], [1, "po-multiselect-input-placeholder"], [1, "po-multiselect-input-disclaimer", 3, "p-label", "p-value", "p-hide-close", "click", "p-close-action"], [4, "ngTemplateOutlet"], ["cdkConnectedOverlay", "", 3, "cdkConnectedOverlayOrigin", "cdkConnectedOverlayOpen"], [3, "p-searching", "p-hide-search", "p-hide-select-all", "p-literals", "p-options", "p-visible-options", "p-selected-options", "p-placeholder-search", "p-field-value", "p-field-label", "p-multiselect-template", "p-change", "p-change-search", "p-close-dropdown"], ["dropdownElement", ""]], template: function PoMultiselectComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵelementStart(0, "po-field-container", 0)(1, "div", 1, 2)(3, "div", 3, 4);
+            i0.ɵɵlistener("keyup.enter", function PoMultiselectComponent_Template_div_keyup_enter_3_listener() { return ctx.toggleDropdownVisibility(); })("keydown", function PoMultiselectComponent_Template_div_keydown_3_listener($event) { return ctx.onKeyDown($event); })("click", function PoMultiselectComponent_Template_div_click_3_listener() { return ctx.toggleDropdownVisibility(); })("blur", function PoMultiselectComponent_Template_div_blur_3_listener() { return ctx.onBlur(); });
+            i0.ɵɵtemplate(5, PoMultiselectComponent_span_5_Template, 2, 1, "span", 5);
+            i0.ɵɵtemplate(6, PoMultiselectComponent_po_disclaimer_6_Template, 1, 5, "po-disclaimer", 6);
+            i0.ɵɵelementStart(7, "div", 7);
+            i0.ɵɵelement(8, "span", 8, 9);
             i0.ɵɵelementEnd()()();
-            i0.ɵɵelementStart(9, "po-multiselect-dropdown", 9, 10);
-            i0.ɵɵlistener("p-change", function PoMultiselectComponent_Template_po_multiselect_dropdown_p_change_9_listener($event) { return ctx.changeItems($event); })("p-change-search", function PoMultiselectComponent_Template_po_multiselect_dropdown_p_change_search_9_listener($event) { return ctx.changeSearch($event); })("p-close-dropdown", function PoMultiselectComponent_Template_po_multiselect_dropdown_p_close_dropdown_9_listener() { return ctx.controlDropdownVisibility(false); });
-            i0.ɵɵelementEnd();
-            i0.ɵɵelement(11, "po-field-container-bottom", 11);
+            i0.ɵɵtemplate(10, PoMultiselectComponent_ng_container_10_Template, 1, 0, "ng-container", 10);
+            i0.ɵɵtemplate(11, PoMultiselectComponent_ng_template_11_Template, 1, 1, "ng-template", null, 11, i0.ɵɵtemplateRefExtractor);
+            i0.ɵɵtemplate(13, PoMultiselectComponent_ng_template_13_Template, 1, 2, "ng-template", null, 12, i0.ɵɵtemplateRefExtractor);
+            i0.ɵɵelement(15, "po-field-container-bottom", 13);
             i0.ɵɵelementEnd();
+            i0.ɵɵtemplate(16, PoMultiselectComponent_ng_template_16_Template, 2, 11, "ng-template", null, 14, i0.ɵɵtemplateRefExtractor);
         } if (rf & 2) {
+            const _r6 = i0.ɵɵreference(12);
+            const _r8 = i0.ɵɵreference(14);
             i0.ɵɵproperty("p-disabled", ctx.disabled)("p-label", ctx.label)("p-optional", ctx.optional)("p-required", ctx.required)("p-show-required", ctx.showRequired);
             i0.ɵɵadvance(1);
             i0.ɵɵclassProp("po-multiselect-show", ctx.dropdownOpen);
-            i0.ɵɵadvance(1);
+            i0.ɵɵadvance(2);
             i0.ɵɵclassProp("po-multiselect-input-auto", ctx.autoHeight)("po-multiselect-input-static", !ctx.autoHeight)("po-multiselect-input-disabled", ctx.disabled);
             i0.ɵɵproperty("tabindex", ctx.disabled ? -1 : 0);
             i0.ɵɵattribute("disabled", ctx.disabled)("aria-label", ctx.label);
@@ -32311,23 +32431,23 @@ class PoMultiselectComponent extends PoMultiselectBaseComponent {
             i0.ɵɵclassMapInterpolate2("po-icon po-field-icon ", ctx.dropdownIcon, " ", ctx.disabled ? "po-icon-input-disabled" : "po-icon-input", "");
             i0.ɵɵproperty("ngClass", ctx.disabled ? "po-field-icon-disabled" : "");
             i0.ɵɵadvance(2);
-            i0.ɵɵproperty("p-searching", ctx.isServerSearching)("p-hide-search", ctx.hideSearch)("p-hide-select-all", ctx.hideSelectAll)("p-literals", ctx.literals)("p-options", ctx.options)("p-visible-options", ctx.visibleOptionsDropdown)("p-selected-options", ctx.selectedOptions)("p-placeholder-search", ctx.placeholderSearch)("p-field-value", ctx.fieldValue)("p-field-label", ctx.fieldLabel)("p-multiselect-template", ctx.multiselectOptionTemplate);
-            i0.ɵɵadvance(2);
+            i0.ɵɵproperty("ngIf", ctx.appendBox)("ngIfThen", _r8)("ngIfElse", _r6);
+            i0.ɵɵadvance(5);
             i0.ɵɵproperty("p-help", ctx.help)("p-disabled", ctx.disabled);
         } }, encapsulation: 2, changeDetection: 0 });
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PoMultiselectComponent, [{
         type: Component,
-        args: [{ selector: 'po-multiselect', changeDetection: ChangeDetectionStrategy.OnPush, providers: providers$1, template: "<po-field-container\n  [p-disabled]=\"disabled\"\n  [p-label]=\"label\"\n  [p-optional]=\"optional\"\n  [p-required]=\"required\"\n  [p-show-required]=\"showRequired\"\n>\n  <div class=\"po-field-container-content\" [class.po-multiselect-show]=\"dropdownOpen\">\n    <div\n      #inputElement\n      [tabindex]=\"disabled ? -1 : 0\"\n      [attr.disabled]=\"disabled\"\n      [attr.aria-label]=\"label\"\n      class=\"po-input po-input-icon-right po-multiselect-input po-clickable\"\n      [class.po-multiselect-input-auto]=\"autoHeight\"\n      [class.po-multiselect-input-static]=\"!autoHeight\"\n      [class.po-multiselect-input-disabled]=\"disabled\"\n      (keyup.enter)=\"toggleDropdownVisibility()\"\n      (keydown)=\"onKeyDown($event)\"\n      (click)=\"toggleDropdownVisibility()\"\n      (blur)=\"onBlur()\"\n    >\n      <span *ngIf=\"placeholder && !disabled && !visibleDisclaimers?.length\" class=\"po-multiselect-input-placeholder\">\n        {{ placeholder }}\n      </span>\n\n      <po-disclaimer\n        *ngFor=\"let disclaimer of visibleDisclaimers\"\n        class=\"po-multiselect-input-disclaimer\"\n        [p-label]=\"disclaimer[fieldLabel]\"\n        [p-value]=\"disclaimer[fieldValue]\"\n        [p-hide-close]=\"disclaimer[fieldValue] === '' || disabled\"\n        [class.po-clickable]=\"disclaimer[fieldValue] === '' && !disabled\"\n        (click)=\"openDropdown(disclaimer[fieldValue] === '')\"\n        (p-close-action)=\"closeDisclaimer(disclaimer[fieldValue])\"\n      >\n      </po-disclaimer>\n\n      <div class=\"po-field-icon-container-right\">\n        <span\n          #iconElement\n          class=\"po-icon po-field-icon {{ dropdownIcon }} {{ disabled ? 'po-icon-input-disabled' : 'po-icon-input' }}\"\n          [ngClass]=\"disabled ? 'po-field-icon-disabled' : ''\"\n        >\n        </span>\n      </div>\n    </div>\n  </div>\n\n  <po-multiselect-dropdown\n    #dropdownElement\n    [p-searching]=\"isServerSearching\"\n    [p-hide-search]=\"hideSearch\"\n    [p-hide-select-all]=\"hideSelectAll\"\n    [p-literals]=\"literals\"\n    [p-options]=\"options\"\n    [p-visible-options]=\"visibleOptionsDropdown\"\n    [p-selected-options]=\"selectedOptions\"\n    [p-placeholder-search]=\"placeholderSearch\"\n    [p-field-value]=\"fieldValue\"\n    [p-field-label]=\"fieldLabel\"\n    [p-multiselect-template]=\"multiselectOptionTemplate\"\n    (p-change)=\"changeItems($event)\"\n    (p-change-search)=\"changeSearch($event)\"\n    (p-close-dropdown)=\"controlDropdownVisibility(false)\"\n  >\n  </po-multiselect-dropdown>\n\n  <po-field-container-bottom [p-help]=\"help\" [p-disabled]=\"disabled\"></po-field-container-bottom>\n</po-field-container>\n" }]
+        args: [{ selector: 'po-multiselect', changeDetection: ChangeDetectionStrategy.OnPush, providers: providers$1, template: "<po-field-container\n  [p-disabled]=\"disabled\"\n  [p-label]=\"label\"\n  [p-optional]=\"optional\"\n  [p-required]=\"required\"\n  [p-show-required]=\"showRequired\"\n>\n  <div\n    cdkOverlayOrigin\n    #trigger=\"cdkOverlayOrigin\"\n    class=\"po-field-container-content\"\n    [class.po-multiselect-show]=\"dropdownOpen\"\n  >\n    <div\n      #inputElement\n      [tabindex]=\"disabled ? -1 : 0\"\n      [attr.disabled]=\"disabled\"\n      [attr.aria-label]=\"label\"\n      class=\"po-input po-input-icon-right po-multiselect-input po-clickable\"\n      [class.po-multiselect-input-auto]=\"autoHeight\"\n      [class.po-multiselect-input-static]=\"!autoHeight\"\n      [class.po-multiselect-input-disabled]=\"disabled\"\n      (keyup.enter)=\"toggleDropdownVisibility()\"\n      (keydown)=\"onKeyDown($event)\"\n      (click)=\"toggleDropdownVisibility()\"\n      (blur)=\"onBlur()\"\n    >\n      <span *ngIf=\"placeholder && !disabled && !visibleDisclaimers?.length\" class=\"po-multiselect-input-placeholder\">\n        {{ placeholder }}\n      </span>\n\n      <po-disclaimer\n        *ngFor=\"let disclaimer of visibleDisclaimers\"\n        class=\"po-multiselect-input-disclaimer\"\n        [p-label]=\"disclaimer[fieldLabel]\"\n        [p-value]=\"disclaimer[fieldValue]\"\n        [p-hide-close]=\"disclaimer[fieldValue] === '' || disabled\"\n        [class.po-clickable]=\"disclaimer[fieldValue] === '' && !disabled\"\n        (click)=\"openDropdown(disclaimer[fieldValue] === '')\"\n        (p-close-action)=\"closeDisclaimer(disclaimer[fieldValue])\"\n      >\n      </po-disclaimer>\n\n      <div class=\"po-field-icon-container-right\">\n        <span\n          #iconElement\n          class=\"po-icon po-field-icon {{ dropdownIcon }} {{ disabled ? 'po-icon-input-disabled' : 'po-icon-input' }}\"\n          [ngClass]=\"disabled ? 'po-field-icon-disabled' : ''\"\n        >\n        </span>\n      </div>\n    </div>\n  </div>\n\n  <ng-container *ngIf=\"appendBox; then dropdownCDK; else dropdownDefault\"> </ng-container>\n\n  <ng-template #dropdownDefault>\n    <ng-container *ngTemplateOutlet=\"dropdownListbox\"> </ng-container>\n  </ng-template>\n\n  <ng-template #dropdownCDK>\n    <ng-template cdkConnectedOverlay [cdkConnectedOverlayOrigin]=\"trigger\" [cdkConnectedOverlayOpen]=\"true\">\n      <ng-container *ngTemplateOutlet=\"dropdownListbox\"></ng-container>\n    </ng-template>\n  </ng-template>\n\n  <po-field-container-bottom [p-help]=\"help\" [p-disabled]=\"disabled\"></po-field-container-bottom>\n</po-field-container>\n\n<ng-template #dropdownListbox>\n  <po-multiselect-dropdown\n    #dropdownElement\n    [p-searching]=\"isServerSearching\"\n    [p-hide-search]=\"hideSearch\"\n    [p-hide-select-all]=\"hideSelectAll\"\n    [p-literals]=\"literals\"\n    [p-options]=\"options\"\n    [p-visible-options]=\"visibleOptionsDropdown\"\n    [p-selected-options]=\"selectedOptions\"\n    [p-placeholder-search]=\"placeholderSearch\"\n    [p-field-value]=\"fieldValue\"\n    [p-field-label]=\"fieldLabel\"\n    [p-multiselect-template]=\"multiselectOptionTemplate\"\n    (p-change)=\"changeItems($event)\"\n    (p-change-search)=\"changeSearch($event)\"\n    (p-close-dropdown)=\"controlDropdownVisibility(false)\"\n  >\n  </po-multiselect-dropdown>\n</ng-template>\n" }]
     }], function () { return [{ type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: PoControlPositionService }, { type: PoMultiselectFilterService }, { type: PoLanguageService }]; }, { multiselectOptionTemplate: [{
             type: ContentChild,
             args: [PoMultiselectOptionTemplateDirective, { static: true }]
         }], dropdownElement: [{
             type: ViewChild,
-            args: ['dropdownElement', { read: ElementRef, static: true }]
+            args: ['dropdownElement', { read: ElementRef }]
         }], dropdown: [{
             type: ViewChild,
-            args: ['dropdownElement', { static: true }]
+            args: ['dropdownElement']
         }], iconElement: [{
             type: ViewChild,
             args: ['iconElement', { read: ElementRef, static: true }]
@@ -38119,7 +38239,7 @@ class PoFieldModule {
         PoLabelModule,
         PoSwitchModule] }); })();
 i0.ɵɵsetComponentScope(PoLookupModalComponent, function () { return [i1.NgIf, i2$1.DefaultValueAccessor, i2$1.NgControlStatus, i2$1.NgModel, PoDisclaimerGroupComponent, PoFieldContainerComponent, PoModalComponent, PoTableComponent]; }, []);
-i0.ɵɵsetComponentScope(PoMultiselectComponent, function () { return [i1.NgClass, i1.NgForOf, i1.NgIf, PoDisclaimerComponent, PoFieldContainerBottomComponent, PoFieldContainerComponent, PoMultiselectDropdownComponent]; }, []);
+i0.ɵɵsetComponentScope(PoMultiselectComponent, function () { return [i1.NgClass, i1.NgForOf, i1.NgIf, i1.NgTemplateOutlet, i5.CdkConnectedOverlay, i5.CdkOverlayOrigin, PoDisclaimerComponent, PoFieldContainerBottomComponent, PoFieldContainerComponent, PoMultiselectDropdownComponent]; }, []);
 
 /**
  * @usedBy PoInfoComponent
@@ -38802,7 +38922,7 @@ function PoDynamicFormFieldsComponent_div_0_ng_container_1_po_upload_16_Template
 } if (rf & 2) {
     const field_r2 = i0.ɵɵnextContext().$implicit;
     const ctx_r18 = i0.ɵɵnextContext(2);
-    i0.ɵɵproperty("ngModel", ctx_r18.value[field_r2.property])("ngClass", field_r2.componentClass)("p-auto-upload", field_r2.autoUpload)("p-directory", field_r2.directory)("p-disabled", ctx_r18.isDisabled(field_r2))("p-drag-drop", field_r2.dragDrop)("p-drag-drop-height", field_r2.dragDropHeight)("p-restrictions", field_r2.restrictions)("p-headers", field_r2.headers)("p-help", field_r2.help)("p-hide-restrictions-info", field_r2.hideRestrictionsInfo)("p-hide-select-button", field_r2.hideSelectButton)("p-hide-send-button", field_r2.hideSendButton)("p-multiple", field_r2.multiple)("p-label", field_r2.label)("p-literals", field_r2.literals)("name", field_r2.property)("p-optional", field_r2.optional)("p-required", field_r2.required)("p-show-required", field_r2.showRequired)("p-url", field_r2.url);
+    i0.ɵɵproperty("ngModel", ctx_r18.value[field_r2.property])("ngClass", field_r2.componentClass)("p-auto-upload", field_r2.autoUpload)("p-directory", field_r2.directory)("p-disabled", ctx_r18.isDisabled(field_r2))("p-drag-drop", field_r2.dragDrop)("p-drag-drop-height", field_r2.dragDropHeight)("p-restrictions", field_r2.restrictions)("p-form-field", field_r2.formField)("p-headers", field_r2.headers)("p-help", field_r2.help)("p-hide-restrictions-info", field_r2.hideRestrictionsInfo)("p-hide-select-button", field_r2.hideSelectButton)("p-hide-send-button", field_r2.hideSendButton)("p-multiple", field_r2.multiple)("p-label", field_r2.label)("p-literals", field_r2.literals)("name", field_r2.property)("p-optional", field_r2.optional)("p-required", field_r2.required)("p-show-required", field_r2.showRequired)("p-url", field_r2.url);
 } }
 function PoDynamicFormFieldsComponent_div_0_ng_container_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainerStart(0);
@@ -38821,7 +38941,7 @@ function PoDynamicFormFieldsComponent_div_0_ng_container_1_Template(rf, ctx) { i
     i0.ɵɵtemplate(13, PoDynamicFormFieldsComponent_div_0_ng_container_1_po_multiselect_13_Template, 2, 23, "po-multiselect", 14);
     i0.ɵɵtemplate(14, PoDynamicFormFieldsComponent_div_0_ng_container_1_po_textarea_14_Template, 2, 15, "po-textarea", 15);
     i0.ɵɵtemplate(15, PoDynamicFormFieldsComponent_div_0_ng_container_1_po_password_15_Template, 2, 20, "po-password", 16);
-    i0.ɵɵtemplate(16, PoDynamicFormFieldsComponent_div_0_ng_container_1_po_upload_16_Template, 2, 21, "po-upload", 17);
+    i0.ɵɵtemplate(16, PoDynamicFormFieldsComponent_div_0_ng_container_1_po_upload_16_Template, 2, 22, "po-upload", 17);
     i0.ɵɵelementContainerEnd();
 } if (rf & 2) {
     const field_r2 = ctx.$implicit;
@@ -38985,7 +39105,7 @@ class PoDynamicFormFieldsComponent extends PoDynamicFormFieldsBaseComponent {
         } if (rf & 2) {
             let _t;
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.components = _t);
-        } }, features: [i0.ɵɵProvidersFeature([PoDynamicFormValidationService], [{ provide: ControlContainer, useExisting: NgForm }]), i0.ɵɵInheritDefinitionFeature, i0.ɵɵNgOnChangesFeature], decls: 1, vars: 1, consts: [["class", "po-row", 4, "ngIf"], [1, "po-row"], [4, "ngFor", "ngForOf", "ngForTrackBy"], ["class", "po-sm-12", 3, "p-label", 4, "ngIf"], [3, "name", "ngModel", "ngClass", "p-clean", "p-disabled", "p-error-pattern", "p-auto-focus", "p-format", "p-help", "p-iso-format", "p-label", "p-locale", "p-max-date", "p-min-date", "p-no-autocomplete", "p-optional", "p-readonly", "p-required", "p-show-required", "p-placeholder", "ngModelChange", "p-change", 4, "ngIf"], [3, "name", "ngModel", "ngClass", "p-clean", "p-disabled", "p-auto-focus", "p-help", "p-label", "p-literals", "p-max-date", "p-min-date", "p-no-autocomplete", "p-optional", "p-readonly", "p-required", "p-show-required", "ngModelChange", "p-change", 4, "ngIf"], [3, "name", "ngModel", "ngClass", "p-clean", "p-disabled", "p-error-pattern", "p-auto-focus", "p-help", "p-label", "p-mask-format-model", "p-mask", "p-maxlength", "p-minlength", "p-no-autocomplete", "p-optional", "p-pattern", "p-required", "p-show-required", "p-icon", "p-placeholder", "p-readonly", "ngModelChange", "p-change", "p-change-model", 4, "ngIf"], [3, "name", "ngModel", "ngClass", "p-clean", "p-disabled", "p-error-pattern", "p-auto-focus", "p-help", "p-label", "p-min", "p-max", "p-maxlength", "p-minlength", "p-no-autocomplete", "p-optional", "p-step", "p-readonly", "p-required", "p-show-required", "p-icon", "p-placeholder", "ngModelChange", "p-change", "p-change-model", 4, "ngIf"], [3, "name", "ngModel", "ngClass", "p-clean", "p-error-pattern", "p-disabled", "p-decimals-length", "p-thousand-maxlength", "p-icon", "p-auto-focus", "p-help", "p-label", "p-locale", "p-min", "p-max", "p-maxlength", "p-minlength", "p-no-autocomplete", "p-optional", "p-readonly", "p-required", "p-show-required", "p-placeholder", "ngModelChange", "p-change", "p-change-model", 4, "ngIf"], [3, "name", "ngModel", "ngClass", "p-field-label", "p-field-value", "p-disabled", "p-help", "p-label", "p-optional", "p-options", "p-required", "p-show-required", "p-placeholder", "p-readonly", "ngModelChange", "p-change", 4, "ngIf"], [3, "name", "ngModel", "ngClass", "p-columns", "p-auto-focus", "p-disabled", "p-help", "p-label", "p-optional", "p-options", "p-required", "p-show-required", "ngModelChange", "p-change", 4, "ngIf"], [3, "name", "ngModel", "ngClass", "p-disabled", "p-format-model", "p-help", "p-label", "p-label-off", "p-label-on", "p-label-position", "ngModelChange", "p-change", 4, "ngIf"], ["p-emit-object-value", "", 3, "name", "ngModel", "ngClass", "p-auto-focus", "p-clean", "p-disabled", "p-field-label", "p-field-value", "p-filter-params", "p-filter-service", "p-help", "p-infinite-scroll", "p-infinite-scroll-distance", "p-label", "p-literals", "p-options", "p-optional", "p-sort", "p-required", "p-show-required", "p-icon", "p-placeholder", "p-filter-minlength", "p-filter-mode", "p-disabled-init-filter", "p-disabled-tab-filter", "p-debounce-time", "p-change-on-enter", "ngModelChange", "p-change", 4, "ngIf"], ["p-field-label", "label", "p-field-value", "value", 3, "name", "ngModel", "ngClass", "p-clean", "p-columns", "p-disabled", "p-field-label", "p-field-value", "p-filter-params", "p-filter-service", "p-auto-focus", "p-auto-height", "p-help", "p-field-format", "p-infinite-scroll", "p-label", "p-literals", "p-multiple", "p-no-autocomplete", "p-optional", "p-required", "p-show-required", "p-placeholder", "p-advanced-filters", "ngModelChange", "p-change", "p-change-visible-columns", "p-restore-column-manager", 4, "ngIf"], [3, "name", "ngModel", "ngClass", "p-disabled", "p-auto-focus", "p-auto-height", "p-help", "p-label", "p-literals", "p-optional", "p-options", "p-required", "p-show-required", "p-placeholder", "p-field-label", "p-field-value", "p-filter-service", "p-filter-mode", "p-debounce-time", "p-sort", "p-placeholder-search", "p-hide-search", "p-hide-select-all", "ngModelChange", "p-change", 4, "ngIf"], [3, "name", "ngModel", "ngClass", "p-disabled", "p-auto-focus", "p-help", "p-label", "p-maxlength", "p-minlength", "p-optional", "p-readonly", "p-required", "p-show-required", "p-rows", "p-placeholder", "ngModelChange", "p-change", "p-change-model", 4, "ngIf"], [3, "name", "ngModel", "ngClass", "p-clean", "p-disabled", "p-error-pattern", "p-auto-focus", "p-help", "p-hide-password-peek", "p-icon", "p-label", "p-maxlength", "p-minlength", "p-no-autocomplete", "p-optional", "p-pattern", "p-readonly", "p-required", "p-show-required", "p-placeholder", "ngModelChange", "p-change", "p-change-model", 4, "ngIf"], [3, "ngModel", "ngClass", "p-auto-upload", "p-directory", "p-disabled", "p-drag-drop", "p-drag-drop-height", "p-restrictions", "p-headers", "p-help", "p-hide-restrictions-info", "p-hide-select-button", "p-hide-send-button", "p-multiple", "p-label", "p-literals", "name", "p-optional", "p-required", "p-show-required", "p-url", "ngModelChange", "p-error", "p-success", "p-upload", "p-change", "p-change-model", 4, "ngIf"], [1, "po-sm-12", 3, "p-label"], [3, "name", "ngModel", "ngClass", "p-clean", "p-disabled", "p-error-pattern", "p-auto-focus", "p-format", "p-help", "p-iso-format", "p-label", "p-locale", "p-max-date", "p-min-date", "p-no-autocomplete", "p-optional", "p-readonly", "p-required", "p-show-required", "p-placeholder", "ngModelChange", "p-change"], ["component", ""], [3, "name", "ngModel", "ngClass", "p-clean", "p-disabled", "p-auto-focus", "p-help", "p-label", "p-literals", "p-max-date", "p-min-date", "p-no-autocomplete", "p-optional", "p-readonly", "p-required", "p-show-required", "ngModelChange", "p-change"], [3, "name", "ngModel", "ngClass", "p-clean", "p-disabled", "p-error-pattern", "p-auto-focus", "p-help", "p-label", "p-mask-format-model", "p-mask", "p-maxlength", "p-minlength", "p-no-autocomplete", "p-optional", "p-pattern", "p-required", "p-show-required", "p-icon", "p-placeholder", "p-readonly", "ngModelChange", "p-change", "p-change-model"], [3, "name", "ngModel", "ngClass", "p-clean", "p-disabled", "p-error-pattern", "p-auto-focus", "p-help", "p-label", "p-min", "p-max", "p-maxlength", "p-minlength", "p-no-autocomplete", "p-optional", "p-step", "p-readonly", "p-required", "p-show-required", "p-icon", "p-placeholder", "ngModelChange", "p-change", "p-change-model"], [3, "name", "ngModel", "ngClass", "p-clean", "p-error-pattern", "p-disabled", "p-decimals-length", "p-thousand-maxlength", "p-icon", "p-auto-focus", "p-help", "p-label", "p-locale", "p-min", "p-max", "p-maxlength", "p-minlength", "p-no-autocomplete", "p-optional", "p-readonly", "p-required", "p-show-required", "p-placeholder", "ngModelChange", "p-change", "p-change-model"], [3, "name", "ngModel", "ngClass", "p-field-label", "p-field-value", "p-disabled", "p-help", "p-label", "p-optional", "p-options", "p-required", "p-show-required", "p-placeholder", "p-readonly", "ngModelChange", "p-change"], [3, "name", "ngModel", "ngClass", "p-columns", "p-auto-focus", "p-disabled", "p-help", "p-label", "p-optional", "p-options", "p-required", "p-show-required", "ngModelChange", "p-change"], [3, "name", "ngModel", "ngClass", "p-disabled", "p-format-model", "p-help", "p-label", "p-label-off", "p-label-on", "p-label-position", "ngModelChange", "p-change"], ["p-emit-object-value", "", 3, "name", "ngModel", "ngClass", "p-auto-focus", "p-clean", "p-disabled", "p-field-label", "p-field-value", "p-filter-params", "p-filter-service", "p-help", "p-infinite-scroll", "p-infinite-scroll-distance", "p-label", "p-literals", "p-options", "p-optional", "p-sort", "p-required", "p-show-required", "p-icon", "p-placeholder", "p-filter-minlength", "p-filter-mode", "p-disabled-init-filter", "p-disabled-tab-filter", "p-debounce-time", "p-change-on-enter", "ngModelChange", "p-change"], ["p-field-label", "label", "p-field-value", "value", 3, "name", "ngModel", "ngClass", "p-clean", "p-columns", "p-disabled", "p-field-label", "p-field-value", "p-filter-params", "p-filter-service", "p-auto-focus", "p-auto-height", "p-help", "p-field-format", "p-infinite-scroll", "p-label", "p-literals", "p-multiple", "p-no-autocomplete", "p-optional", "p-required", "p-show-required", "p-placeholder", "p-advanced-filters", "ngModelChange", "p-change", "p-change-visible-columns", "p-restore-column-manager"], [3, "name", "ngModel", "ngClass", "p-disabled", "p-auto-focus", "p-auto-height", "p-help", "p-label", "p-literals", "p-optional", "p-options", "p-required", "p-show-required", "p-placeholder", "p-field-label", "p-field-value", "p-filter-service", "p-filter-mode", "p-debounce-time", "p-sort", "p-placeholder-search", "p-hide-search", "p-hide-select-all", "ngModelChange", "p-change"], [3, "name", "ngModel", "ngClass", "p-disabled", "p-auto-focus", "p-help", "p-label", "p-maxlength", "p-minlength", "p-optional", "p-readonly", "p-required", "p-show-required", "p-rows", "p-placeholder", "ngModelChange", "p-change", "p-change-model"], [3, "name", "ngModel", "ngClass", "p-clean", "p-disabled", "p-error-pattern", "p-auto-focus", "p-help", "p-hide-password-peek", "p-icon", "p-label", "p-maxlength", "p-minlength", "p-no-autocomplete", "p-optional", "p-pattern", "p-readonly", "p-required", "p-show-required", "p-placeholder", "ngModelChange", "p-change", "p-change-model"], [3, "ngModel", "ngClass", "p-auto-upload", "p-directory", "p-disabled", "p-drag-drop", "p-drag-drop-height", "p-restrictions", "p-headers", "p-help", "p-hide-restrictions-info", "p-hide-select-button", "p-hide-send-button", "p-multiple", "p-label", "p-literals", "name", "p-optional", "p-required", "p-show-required", "p-url", "ngModelChange", "p-error", "p-success", "p-upload", "p-change", "p-change-model"]], template: function PoDynamicFormFieldsComponent_Template(rf, ctx) { if (rf & 1) {
+        } }, features: [i0.ɵɵProvidersFeature([PoDynamicFormValidationService], [{ provide: ControlContainer, useExisting: NgForm }]), i0.ɵɵInheritDefinitionFeature, i0.ɵɵNgOnChangesFeature], decls: 1, vars: 1, consts: [["class", "po-row", 4, "ngIf"], [1, "po-row"], [4, "ngFor", "ngForOf", "ngForTrackBy"], ["class", "po-sm-12", 3, "p-label", 4, "ngIf"], [3, "name", "ngModel", "ngClass", "p-clean", "p-disabled", "p-error-pattern", "p-auto-focus", "p-format", "p-help", "p-iso-format", "p-label", "p-locale", "p-max-date", "p-min-date", "p-no-autocomplete", "p-optional", "p-readonly", "p-required", "p-show-required", "p-placeholder", "ngModelChange", "p-change", 4, "ngIf"], [3, "name", "ngModel", "ngClass", "p-clean", "p-disabled", "p-auto-focus", "p-help", "p-label", "p-literals", "p-max-date", "p-min-date", "p-no-autocomplete", "p-optional", "p-readonly", "p-required", "p-show-required", "ngModelChange", "p-change", 4, "ngIf"], [3, "name", "ngModel", "ngClass", "p-clean", "p-disabled", "p-error-pattern", "p-auto-focus", "p-help", "p-label", "p-mask-format-model", "p-mask", "p-maxlength", "p-minlength", "p-no-autocomplete", "p-optional", "p-pattern", "p-required", "p-show-required", "p-icon", "p-placeholder", "p-readonly", "ngModelChange", "p-change", "p-change-model", 4, "ngIf"], [3, "name", "ngModel", "ngClass", "p-clean", "p-disabled", "p-error-pattern", "p-auto-focus", "p-help", "p-label", "p-min", "p-max", "p-maxlength", "p-minlength", "p-no-autocomplete", "p-optional", "p-step", "p-readonly", "p-required", "p-show-required", "p-icon", "p-placeholder", "ngModelChange", "p-change", "p-change-model", 4, "ngIf"], [3, "name", "ngModel", "ngClass", "p-clean", "p-error-pattern", "p-disabled", "p-decimals-length", "p-thousand-maxlength", "p-icon", "p-auto-focus", "p-help", "p-label", "p-locale", "p-min", "p-max", "p-maxlength", "p-minlength", "p-no-autocomplete", "p-optional", "p-readonly", "p-required", "p-show-required", "p-placeholder", "ngModelChange", "p-change", "p-change-model", 4, "ngIf"], [3, "name", "ngModel", "ngClass", "p-field-label", "p-field-value", "p-disabled", "p-help", "p-label", "p-optional", "p-options", "p-required", "p-show-required", "p-placeholder", "p-readonly", "ngModelChange", "p-change", 4, "ngIf"], [3, "name", "ngModel", "ngClass", "p-columns", "p-auto-focus", "p-disabled", "p-help", "p-label", "p-optional", "p-options", "p-required", "p-show-required", "ngModelChange", "p-change", 4, "ngIf"], [3, "name", "ngModel", "ngClass", "p-disabled", "p-format-model", "p-help", "p-label", "p-label-off", "p-label-on", "p-label-position", "ngModelChange", "p-change", 4, "ngIf"], ["p-emit-object-value", "", 3, "name", "ngModel", "ngClass", "p-auto-focus", "p-clean", "p-disabled", "p-field-label", "p-field-value", "p-filter-params", "p-filter-service", "p-help", "p-infinite-scroll", "p-infinite-scroll-distance", "p-label", "p-literals", "p-options", "p-optional", "p-sort", "p-required", "p-show-required", "p-icon", "p-placeholder", "p-filter-minlength", "p-filter-mode", "p-disabled-init-filter", "p-disabled-tab-filter", "p-debounce-time", "p-change-on-enter", "ngModelChange", "p-change", 4, "ngIf"], ["p-field-label", "label", "p-field-value", "value", 3, "name", "ngModel", "ngClass", "p-clean", "p-columns", "p-disabled", "p-field-label", "p-field-value", "p-filter-params", "p-filter-service", "p-auto-focus", "p-auto-height", "p-help", "p-field-format", "p-infinite-scroll", "p-label", "p-literals", "p-multiple", "p-no-autocomplete", "p-optional", "p-required", "p-show-required", "p-placeholder", "p-advanced-filters", "ngModelChange", "p-change", "p-change-visible-columns", "p-restore-column-manager", 4, "ngIf"], [3, "name", "ngModel", "ngClass", "p-disabled", "p-auto-focus", "p-auto-height", "p-help", "p-label", "p-literals", "p-optional", "p-options", "p-required", "p-show-required", "p-placeholder", "p-field-label", "p-field-value", "p-filter-service", "p-filter-mode", "p-debounce-time", "p-sort", "p-placeholder-search", "p-hide-search", "p-hide-select-all", "ngModelChange", "p-change", 4, "ngIf"], [3, "name", "ngModel", "ngClass", "p-disabled", "p-auto-focus", "p-help", "p-label", "p-maxlength", "p-minlength", "p-optional", "p-readonly", "p-required", "p-show-required", "p-rows", "p-placeholder", "ngModelChange", "p-change", "p-change-model", 4, "ngIf"], [3, "name", "ngModel", "ngClass", "p-clean", "p-disabled", "p-error-pattern", "p-auto-focus", "p-help", "p-hide-password-peek", "p-icon", "p-label", "p-maxlength", "p-minlength", "p-no-autocomplete", "p-optional", "p-pattern", "p-readonly", "p-required", "p-show-required", "p-placeholder", "ngModelChange", "p-change", "p-change-model", 4, "ngIf"], [3, "ngModel", "ngClass", "p-auto-upload", "p-directory", "p-disabled", "p-drag-drop", "p-drag-drop-height", "p-restrictions", "p-form-field", "p-headers", "p-help", "p-hide-restrictions-info", "p-hide-select-button", "p-hide-send-button", "p-multiple", "p-label", "p-literals", "name", "p-optional", "p-required", "p-show-required", "p-url", "ngModelChange", "p-error", "p-success", "p-upload", "p-change", "p-change-model", 4, "ngIf"], [1, "po-sm-12", 3, "p-label"], [3, "name", "ngModel", "ngClass", "p-clean", "p-disabled", "p-error-pattern", "p-auto-focus", "p-format", "p-help", "p-iso-format", "p-label", "p-locale", "p-max-date", "p-min-date", "p-no-autocomplete", "p-optional", "p-readonly", "p-required", "p-show-required", "p-placeholder", "ngModelChange", "p-change"], ["component", ""], [3, "name", "ngModel", "ngClass", "p-clean", "p-disabled", "p-auto-focus", "p-help", "p-label", "p-literals", "p-max-date", "p-min-date", "p-no-autocomplete", "p-optional", "p-readonly", "p-required", "p-show-required", "ngModelChange", "p-change"], [3, "name", "ngModel", "ngClass", "p-clean", "p-disabled", "p-error-pattern", "p-auto-focus", "p-help", "p-label", "p-mask-format-model", "p-mask", "p-maxlength", "p-minlength", "p-no-autocomplete", "p-optional", "p-pattern", "p-required", "p-show-required", "p-icon", "p-placeholder", "p-readonly", "ngModelChange", "p-change", "p-change-model"], [3, "name", "ngModel", "ngClass", "p-clean", "p-disabled", "p-error-pattern", "p-auto-focus", "p-help", "p-label", "p-min", "p-max", "p-maxlength", "p-minlength", "p-no-autocomplete", "p-optional", "p-step", "p-readonly", "p-required", "p-show-required", "p-icon", "p-placeholder", "ngModelChange", "p-change", "p-change-model"], [3, "name", "ngModel", "ngClass", "p-clean", "p-error-pattern", "p-disabled", "p-decimals-length", "p-thousand-maxlength", "p-icon", "p-auto-focus", "p-help", "p-label", "p-locale", "p-min", "p-max", "p-maxlength", "p-minlength", "p-no-autocomplete", "p-optional", "p-readonly", "p-required", "p-show-required", "p-placeholder", "ngModelChange", "p-change", "p-change-model"], [3, "name", "ngModel", "ngClass", "p-field-label", "p-field-value", "p-disabled", "p-help", "p-label", "p-optional", "p-options", "p-required", "p-show-required", "p-placeholder", "p-readonly", "ngModelChange", "p-change"], [3, "name", "ngModel", "ngClass", "p-columns", "p-auto-focus", "p-disabled", "p-help", "p-label", "p-optional", "p-options", "p-required", "p-show-required", "ngModelChange", "p-change"], [3, "name", "ngModel", "ngClass", "p-disabled", "p-format-model", "p-help", "p-label", "p-label-off", "p-label-on", "p-label-position", "ngModelChange", "p-change"], ["p-emit-object-value", "", 3, "name", "ngModel", "ngClass", "p-auto-focus", "p-clean", "p-disabled", "p-field-label", "p-field-value", "p-filter-params", "p-filter-service", "p-help", "p-infinite-scroll", "p-infinite-scroll-distance", "p-label", "p-literals", "p-options", "p-optional", "p-sort", "p-required", "p-show-required", "p-icon", "p-placeholder", "p-filter-minlength", "p-filter-mode", "p-disabled-init-filter", "p-disabled-tab-filter", "p-debounce-time", "p-change-on-enter", "ngModelChange", "p-change"], ["p-field-label", "label", "p-field-value", "value", 3, "name", "ngModel", "ngClass", "p-clean", "p-columns", "p-disabled", "p-field-label", "p-field-value", "p-filter-params", "p-filter-service", "p-auto-focus", "p-auto-height", "p-help", "p-field-format", "p-infinite-scroll", "p-label", "p-literals", "p-multiple", "p-no-autocomplete", "p-optional", "p-required", "p-show-required", "p-placeholder", "p-advanced-filters", "ngModelChange", "p-change", "p-change-visible-columns", "p-restore-column-manager"], [3, "name", "ngModel", "ngClass", "p-disabled", "p-auto-focus", "p-auto-height", "p-help", "p-label", "p-literals", "p-optional", "p-options", "p-required", "p-show-required", "p-placeholder", "p-field-label", "p-field-value", "p-filter-service", "p-filter-mode", "p-debounce-time", "p-sort", "p-placeholder-search", "p-hide-search", "p-hide-select-all", "ngModelChange", "p-change"], [3, "name", "ngModel", "ngClass", "p-disabled", "p-auto-focus", "p-help", "p-label", "p-maxlength", "p-minlength", "p-optional", "p-readonly", "p-required", "p-show-required", "p-rows", "p-placeholder", "ngModelChange", "p-change", "p-change-model"], [3, "name", "ngModel", "ngClass", "p-clean", "p-disabled", "p-error-pattern", "p-auto-focus", "p-help", "p-hide-password-peek", "p-icon", "p-label", "p-maxlength", "p-minlength", "p-no-autocomplete", "p-optional", "p-pattern", "p-readonly", "p-required", "p-show-required", "p-placeholder", "ngModelChange", "p-change", "p-change-model"], [3, "ngModel", "ngClass", "p-auto-upload", "p-directory", "p-disabled", "p-drag-drop", "p-drag-drop-height", "p-restrictions", "p-form-field", "p-headers", "p-help", "p-hide-restrictions-info", "p-hide-select-button", "p-hide-send-button", "p-multiple", "p-label", "p-literals", "name", "p-optional", "p-required", "p-show-required", "p-url", "ngModelChange", "p-error", "p-success", "p-upload", "p-change", "p-change-model"]], template: function PoDynamicFormFieldsComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵtemplate(0, PoDynamicFormFieldsComponent_div_0_Template, 2, 2, "div", 0);
         } if (rf & 2) {
             i0.ɵɵproperty("ngIf", ctx.visibleFields && ctx.visibleFields.length > 0);
@@ -38993,19 +39113,44 @@ class PoDynamicFormFieldsComponent extends PoDynamicFormFieldsBaseComponent {
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PoDynamicFormFieldsComponent, [{
         type: Component,
-        args: [{ selector: 'po-dynamic-form-fields', viewProviders: [{ provide: ControlContainer, useExisting: NgForm }], providers: [PoDynamicFormValidationService], template: "<div class=\"po-row\" *ngIf=\"visibleFields && visibleFields.length > 0\">\n  <ng-container *ngFor=\"let field of visibleFields; trackBy: trackBy\">\n    <po-divider *ngIf=\"field?.divider?.trim()\" class=\"po-sm-12\" [p-label]=\"field.divider\"> </po-divider>\n\n    <po-datepicker\n      #component\n      *ngIf=\"compareTo(field.control, 'datepicker')\"\n      [name]=\"field.property\"\n      [(ngModel)]=\"value[field.property]\"\n      [ngClass]=\"field.componentClass\"\n      [p-clean]=\"field.clean\"\n      [p-disabled]=\"isDisabled(field)\"\n      [p-error-pattern]=\"field.errorMessage\"\n      [p-auto-focus]=\"field.focus\"\n      [p-format]=\"field.format\"\n      [p-help]=\"field.help\"\n      [p-iso-format]=\"field.isoFormat\"\n      [p-label]=\"field.label\"\n      [p-locale]=\"field.locale\"\n      [p-max-date]=\"field.maxValue\"\n      [p-min-date]=\"field.minValue\"\n      [p-no-autocomplete]=\"field.noAutocomplete\"\n      [p-optional]=\"field.optional\"\n      [p-readonly]=\"field.readonly\"\n      [p-required]=\"field.required\"\n      [p-show-required]=\"field.showRequired\"\n      (p-change)=\"onChangeField(field)\"\n      [p-placeholder]=\"field.placeholder\"\n    >\n    </po-datepicker>\n\n    <po-datepicker-range\n      #component\n      *ngIf=\"compareTo(field.control, 'datepickerrange')\"\n      [name]=\"field.property\"\n      [(ngModel)]=\"value[field.property]\"\n      [ngClass]=\"field.componentClass\"\n      [p-clean]=\"field.clean\"\n      [p-disabled]=\"isDisabled(field)\"\n      [p-auto-focus]=\"field.focus\"\n      [p-help]=\"field.help\"\n      [p-label]=\"field.label\"\n      [p-literals]=\"field.literals\"\n      [p-max-date]=\"field.maxValue\"\n      [p-min-date]=\"field.minValue\"\n      [p-no-autocomplete]=\"field.noAutocomplete\"\n      [p-optional]=\"field.optional\"\n      [p-readonly]=\"field.readonly\"\n      [p-required]=\"field.required\"\n      [p-show-required]=\"field.showRequired\"\n      (p-change)=\"onChangeField(field)\"\n    >\n    </po-datepicker-range>\n\n    <po-input\n      #component\n      *ngIf=\"compareTo(field.control, 'input')\"\n      [name]=\"field.property\"\n      [(ngModel)]=\"value[field.property]\"\n      [ngClass]=\"field.componentClass\"\n      [p-clean]=\"field.clean\"\n      [p-disabled]=\"isDisabled(field)\"\n      [p-error-pattern]=\"field.errorMessage\"\n      [p-auto-focus]=\"field.focus\"\n      [p-help]=\"field.help\"\n      [p-label]=\"field.label\"\n      [p-mask-format-model]=\"field.maskFormatModel\"\n      [p-mask]=\"field.mask\"\n      [p-maxlength]=\"field.maxLength\"\n      [p-minlength]=\"field.minLength\"\n      [p-no-autocomplete]=\"field.noAutocomplete\"\n      [p-optional]=\"field.optional\"\n      [p-pattern]=\"field.pattern\"\n      [p-required]=\"field.required\"\n      [p-show-required]=\"field.showRequired\"\n      (p-change)=\"onChangeField(field)\"\n      (p-change-model)=\"onChangeFieldModel(field)\"\n      [p-icon]=\"field.icon\"\n      [p-placeholder]=\"field.placeholder\"\n      [p-readonly]=\"field.readonly\"\n    >\n    </po-input>\n\n    <po-number\n      #component\n      *ngIf=\"compareTo(field.control, 'number')\"\n      [name]=\"field.property\"\n      [(ngModel)]=\"value[field.property]\"\n      [ngClass]=\"field.componentClass\"\n      [p-clean]=\"field.clean\"\n      [p-disabled]=\"isDisabled(field)\"\n      [p-error-pattern]=\"field.errorMessage\"\n      [p-auto-focus]=\"field.focus\"\n      [p-help]=\"field.help\"\n      [p-label]=\"field.label\"\n      [p-min]=\"field.minValue\"\n      [p-max]=\"field.maxValue\"\n      [p-maxlength]=\"field.maxLength\"\n      [p-minlength]=\"field.minLength\"\n      [p-no-autocomplete]=\"field.noAutocomplete\"\n      [p-optional]=\"field.optional\"\n      [p-step]=\"field.step\"\n      [p-readonly]=\"field.readonly\"\n      [p-required]=\"field.required\"\n      [p-show-required]=\"field.showRequired\"\n      (p-change)=\"onChangeField(field)\"\n      (p-change-model)=\"onChangeFieldModel(field)\"\n      [p-icon]=\"field.icon\"\n      [p-placeholder]=\"field.placeholder\"\n    >\n    </po-number>\n\n    <po-decimal\n      #component\n      *ngIf=\"compareTo(field.control, 'decimal')\"\n      [name]=\"field.property\"\n      [(ngModel)]=\"value[field.property]\"\n      [ngClass]=\"field.componentClass\"\n      [p-clean]=\"field.clean\"\n      [p-error-pattern]=\"field.errorMessage\"\n      [p-disabled]=\"isDisabled(field)\"\n      [p-decimals-length]=\"field.decimalsLength\"\n      [p-thousand-maxlength]=\"field.thousandMaxlength\"\n      [p-icon]=\"field.icon\"\n      [p-auto-focus]=\"field.focus\"\n      [p-help]=\"field.help\"\n      [p-label]=\"field.label\"\n      [p-locale]=\"field.locale\"\n      [p-min]=\"field.minValue\"\n      [p-max]=\"field.maxValue\"\n      [p-maxlength]=\"field.maxLength\"\n      [p-minlength]=\"field.minLength\"\n      [p-no-autocomplete]=\"field.noAutocomplete\"\n      [p-optional]=\"field.optional\"\n      [p-readonly]=\"field.readonly\"\n      [p-required]=\"field.required\"\n      [p-show-required]=\"field.showRequired\"\n      (p-change)=\"onChangeField(field)\"\n      (p-change-model)=\"onChangeFieldModel(field)\"\n      [p-placeholder]=\"field.placeholder\"\n    >\n    </po-decimal>\n\n    <po-select\n      #component\n      *ngIf=\"compareTo(field.control, 'select')\"\n      [name]=\"field.property\"\n      [(ngModel)]=\"value[field.property]\"\n      [ngClass]=\"field.componentClass\"\n      [p-field-label]=\"field.fieldLabel\"\n      [p-field-value]=\"field.fieldValue\"\n      [p-disabled]=\"isDisabled(field)\"\n      [p-help]=\"field.help\"\n      [p-label]=\"field.label\"\n      [p-optional]=\"field.optional\"\n      [p-options]=\"field.options\"\n      [p-required]=\"field.required\"\n      [p-show-required]=\"field.showRequired\"\n      (p-change)=\"onChangeField(field)\"\n      [p-placeholder]=\"field.placeholder\"\n      [p-readonly]=\"field.readonly\"\n    >\n    </po-select>\n\n    <po-radio-group\n      #component\n      *ngIf=\"compareTo(field.control, 'radioGroup')\"\n      [name]=\"field.property\"\n      [(ngModel)]=\"value[field.property]\"\n      [ngClass]=\"field.componentClass\"\n      [p-columns]=\"field.columns || 3\"\n      [p-auto-focus]=\"field.focus\"\n      [p-disabled]=\"isDisabled(field)\"\n      [p-help]=\"field.help\"\n      [p-label]=\"field.label\"\n      [p-optional]=\"field.optional\"\n      [p-options]=\"field.options\"\n      [p-required]=\"field.required\"\n      [p-show-required]=\"field.showRequired\"\n      (p-change)=\"onChangeField(field)\"\n    >\n    </po-radio-group>\n\n    <po-switch\n      #component\n      *ngIf=\"compareTo(field.control, 'switch')\"\n      [name]=\"field.property\"\n      [(ngModel)]=\"value[field.property]\"\n      [ngClass]=\"field.componentClass\"\n      [p-disabled]=\"isDisabled(field)\"\n      [p-format-model]=\"field.formatModel\"\n      [p-help]=\"field.help\"\n      [p-label]=\"field.label\"\n      [p-label-off]=\"field.booleanFalse\"\n      [p-label-on]=\"field.booleanTrue\"\n      [p-label-position]=\"field.labelPosition\"\n      (p-change)=\"onChangeField(field)\"\n    >\n    </po-switch>\n\n    <po-combo\n      #component\n      *ngIf=\"compareTo(field.control, 'combo')\"\n      [name]=\"field.property\"\n      [(ngModel)]=\"value[field.property]\"\n      [ngClass]=\"field.componentClass\"\n      p-emit-object-value\n      [p-auto-focus]=\"field.focus\"\n      [p-clean]=\"field.clean\"\n      [p-disabled]=\"isDisabled(field)\"\n      [p-field-label]=\"field.fieldLabel\"\n      [p-field-value]=\"field.fieldValue\"\n      [p-filter-params]=\"field.params\"\n      [p-filter-service]=\"field.optionsService\"\n      [p-help]=\"field.help\"\n      [p-infinite-scroll]=\"field.infiniteScroll\"\n      [p-infinite-scroll-distance]=\"field.infiniteScrollDistance || 100\"\n      [p-label]=\"field.label\"\n      [p-literals]=\"field.literals\"\n      [p-options]=\"field.options\"\n      [p-optional]=\"field.optional\"\n      [p-sort]=\"field.sort\"\n      [p-required]=\"field.required\"\n      [p-show-required]=\"field.showRequired\"\n      (p-change)=\"onChangeField(field, $event)\"\n      [p-icon]=\"field.icon\"\n      [p-placeholder]=\"field.placeholder\"\n      [p-filter-minlength]=\"field.filterMinlength\"\n      [p-filter-mode]=\"field.filterMode\"\n      [p-disabled-init-filter]=\"field.disabledInitFilter\"\n      [p-disabled-tab-filter]=\"field.disabledTabFilter\"\n      [p-debounce-time]=\"field.debounceTime\"\n      [p-change-on-enter]=\"field.changeOnEnter\"\n    >\n    </po-combo>\n\n    <po-lookup\n      #component\n      *ngIf=\"compareTo(field.control, 'lookup')\"\n      [name]=\"field.property\"\n      [(ngModel)]=\"value[field.property]\"\n      p-field-label=\"label\"\n      p-field-value=\"value\"\n      [ngClass]=\"field.componentClass\"\n      [p-clean]=\"field.clean\"\n      [p-columns]=\"field.columns\"\n      [p-disabled]=\"isDisabled(field)\"\n      [p-field-label]=\"field.fieldLabel || 'label'\"\n      [p-field-value]=\"field.fieldValue || 'value'\"\n      [p-filter-params]=\"field.params\"\n      [p-filter-service]=\"field.searchService\"\n      [p-auto-focus]=\"field.focus\"\n      [p-auto-height]=\"field.autoHeight\"\n      [p-help]=\"field.help\"\n      [p-field-format]=\"field.format\"\n      [p-infinite-scroll]=\"field.infiniteScroll\"\n      [p-label]=\"field.label\"\n      [p-literals]=\"field.literals\"\n      [p-multiple]=\"field.multiple\"\n      [p-no-autocomplete]=\"field.noAutocomplete\"\n      [p-optional]=\"field.optional\"\n      [p-required]=\"field.required\"\n      [p-show-required]=\"field.showRequired\"\n      (p-change)=\"onChangeField(field)\"\n      [p-placeholder]=\"field.placeholder\"\n      [p-advanced-filters]=\"field.advancedFilters\"\n      (p-change-visible-columns)=\"field.changeVisibleColumns?.($event)\"\n      (p-restore-column-manager)=\"field.columnRestoreManager?.($event)\"\n    >\n    </po-lookup>\n\n    <po-checkbox-group\n      #component\n      *ngIf=\"compareTo(field.control, 'checkboxGroup')\"\n      [name]=\"field.property\"\n      [(ngModel)]=\"value[field.property]\"\n      [ngClass]=\"field.componentClass\"\n      [p-columns]=\"field.columns || 3\"\n      [p-auto-focus]=\"field.focus\"\n      [p-disabled]=\"isDisabled(field)\"\n      [p-help]=\"field.help\"\n      [p-label]=\"field.label\"\n      [p-optional]=\"field.optional\"\n      [p-options]=\"field.options\"\n      [p-required]=\"field.required\"\n      [p-show-required]=\"field.showRequired\"\n      (p-change)=\"onChangeField(field)\"\n    >\n    </po-checkbox-group>\n\n    <po-multiselect\n      #component\n      *ngIf=\"compareTo(field.control, 'multiselect')\"\n      [name]=\"field.property\"\n      [(ngModel)]=\"value[field.property]\"\n      [ngClass]=\"field.componentClass\"\n      [p-disabled]=\"isDisabled(field)\"\n      [p-auto-focus]=\"field.focus\"\n      [p-auto-height]=\"field.autoHeight\"\n      [p-help]=\"field.help\"\n      [p-label]=\"field.label\"\n      [p-literals]=\"field.literals\"\n      [p-optional]=\"field.optional\"\n      [p-options]=\"field.options\"\n      [p-required]=\"field.required\"\n      [p-show-required]=\"field.showRequired\"\n      (p-change)=\"onChangeField(field)\"\n      [p-placeholder]=\"field.placeholder\"\n      [p-field-label]=\"field.fieldLabel\"\n      [p-field-value]=\"field.fieldValue\"\n      [p-filter-service]=\"field.optionsService\"\n      [p-filter-mode]=\"field.filterMode\"\n      [p-debounce-time]=\"field.debounceTime\"\n      [p-sort]=\"field.sort\"\n      [p-placeholder-search]=\"field.placeholderSearch\"\n      [p-hide-search]=\"field.hideSearch\"\n      [p-hide-select-all]=\"field.hideSelectAll\"\n    >\n    </po-multiselect>\n\n    <po-textarea\n      #component\n      *ngIf=\"compareTo(field.control, 'textarea')\"\n      [name]=\"field.property\"\n      [(ngModel)]=\"value[field.property]\"\n      [ngClass]=\"field.componentClass\"\n      [p-disabled]=\"isDisabled(field)\"\n      [p-auto-focus]=\"field.focus\"\n      [p-help]=\"field.help\"\n      [p-label]=\"field.label\"\n      [p-maxlength]=\"field.maxLength\"\n      [p-minlength]=\"field.minLength\"\n      [p-optional]=\"field.optional\"\n      [p-readonly]=\"field.readonly\"\n      [p-required]=\"field.required\"\n      [p-show-required]=\"field.showRequired\"\n      [p-rows]=\"field.rows\"\n      (p-change)=\"onChangeField(field)\"\n      (p-change-model)=\"onChangeFieldModel(field)\"\n      [p-placeholder]=\"field.placeholder\"\n    >\n    </po-textarea>\n\n    <po-password\n      #component\n      *ngIf=\"compareTo(field.control, 'password')\"\n      [name]=\"field.property\"\n      [(ngModel)]=\"value[field.property]\"\n      [ngClass]=\"field.componentClass\"\n      [p-clean]=\"field.clean\"\n      [p-disabled]=\"isDisabled(field)\"\n      [p-error-pattern]=\"field.errorMessage\"\n      [p-auto-focus]=\"field.focus\"\n      [p-help]=\"field.help\"\n      [p-hide-password-peek]=\"field.hidePasswordPeek\"\n      [p-icon]=\"field.icon\"\n      [p-label]=\"field.label\"\n      [p-maxlength]=\"field.maxLength\"\n      [p-minlength]=\"field.minLength\"\n      [p-no-autocomplete]=\"field.noAutocomplete\"\n      [p-optional]=\"field.optional\"\n      [p-pattern]=\"field.pattern\"\n      [p-readonly]=\"field.readonly\"\n      [p-required]=\"field.required\"\n      [p-show-required]=\"field.showRequired\"\n      (p-change)=\"onChangeField(field)\"\n      (p-change-model)=\"onChangeFieldModel(field)\"\n      [p-placeholder]=\"field.placeholder\"\n    >\n    </po-password>\n\n    <po-upload\n      #component\n      *ngIf=\"compareTo(field.control, 'upload')\"\n      [(ngModel)]=\"value[field.property]\"\n      [ngClass]=\"field.componentClass\"\n      [p-auto-upload]=\"field.autoUpload\"\n      [p-directory]=\"field.directory\"\n      [p-disabled]=\"isDisabled(field)\"\n      [p-drag-drop]=\"field.dragDrop\"\n      [p-drag-drop-height]=\"field.dragDropHeight\"\n      [p-restrictions]=\"field.restrictions\"\n      [p-headers]=\"field.headers\"\n      [p-help]=\"field.help\"\n      [p-hide-restrictions-info]=\"field.hideRestrictionsInfo\"\n      [p-hide-select-button]=\"field.hideSelectButton\"\n      [p-hide-send-button]=\"field.hideSendButton\"\n      [p-multiple]=\"field.multiple\"\n      [p-label]=\"field.label\"\n      [p-literals]=\"field.literals\"\n      [name]=\"field.property\"\n      (p-error)=\"field.onError($event)\"\n      (p-success)=\"field.onSuccess($event)\"\n      (p-upload)=\"field.onUpload($event)\"\n      [p-optional]=\"field.optional\"\n      [p-required]=\"field.required\"\n      [p-show-required]=\"field.showRequired\"\n      (p-change)=\"onChangeField(field)\"\n      (p-change-model)=\"onChangeFieldModel(field)\"\n      [p-url]=\"field.url\"\n    >\n    </po-upload>\n  </ng-container>\n</div>\n" }]
+        args: [{ selector: 'po-dynamic-form-fields', viewProviders: [{ provide: ControlContainer, useExisting: NgForm }], providers: [PoDynamicFormValidationService], template: "<div class=\"po-row\" *ngIf=\"visibleFields && visibleFields.length > 0\">\n  <ng-container *ngFor=\"let field of visibleFields; trackBy: trackBy\">\n    <po-divider *ngIf=\"field?.divider?.trim()\" class=\"po-sm-12\" [p-label]=\"field.divider\"> </po-divider>\n\n    <po-datepicker\n      #component\n      *ngIf=\"compareTo(field.control, 'datepicker')\"\n      [name]=\"field.property\"\n      [(ngModel)]=\"value[field.property]\"\n      [ngClass]=\"field.componentClass\"\n      [p-clean]=\"field.clean\"\n      [p-disabled]=\"isDisabled(field)\"\n      [p-error-pattern]=\"field.errorMessage\"\n      [p-auto-focus]=\"field.focus\"\n      [p-format]=\"field.format\"\n      [p-help]=\"field.help\"\n      [p-iso-format]=\"field.isoFormat\"\n      [p-label]=\"field.label\"\n      [p-locale]=\"field.locale\"\n      [p-max-date]=\"field.maxValue\"\n      [p-min-date]=\"field.minValue\"\n      [p-no-autocomplete]=\"field.noAutocomplete\"\n      [p-optional]=\"field.optional\"\n      [p-readonly]=\"field.readonly\"\n      [p-required]=\"field.required\"\n      [p-show-required]=\"field.showRequired\"\n      (p-change)=\"onChangeField(field)\"\n      [p-placeholder]=\"field.placeholder\"\n    >\n    </po-datepicker>\n\n    <po-datepicker-range\n      #component\n      *ngIf=\"compareTo(field.control, 'datepickerrange')\"\n      [name]=\"field.property\"\n      [(ngModel)]=\"value[field.property]\"\n      [ngClass]=\"field.componentClass\"\n      [p-clean]=\"field.clean\"\n      [p-disabled]=\"isDisabled(field)\"\n      [p-auto-focus]=\"field.focus\"\n      [p-help]=\"field.help\"\n      [p-label]=\"field.label\"\n      [p-literals]=\"field.literals\"\n      [p-max-date]=\"field.maxValue\"\n      [p-min-date]=\"field.minValue\"\n      [p-no-autocomplete]=\"field.noAutocomplete\"\n      [p-optional]=\"field.optional\"\n      [p-readonly]=\"field.readonly\"\n      [p-required]=\"field.required\"\n      [p-show-required]=\"field.showRequired\"\n      (p-change)=\"onChangeField(field)\"\n    >\n    </po-datepicker-range>\n\n    <po-input\n      #component\n      *ngIf=\"compareTo(field.control, 'input')\"\n      [name]=\"field.property\"\n      [(ngModel)]=\"value[field.property]\"\n      [ngClass]=\"field.componentClass\"\n      [p-clean]=\"field.clean\"\n      [p-disabled]=\"isDisabled(field)\"\n      [p-error-pattern]=\"field.errorMessage\"\n      [p-auto-focus]=\"field.focus\"\n      [p-help]=\"field.help\"\n      [p-label]=\"field.label\"\n      [p-mask-format-model]=\"field.maskFormatModel\"\n      [p-mask]=\"field.mask\"\n      [p-maxlength]=\"field.maxLength\"\n      [p-minlength]=\"field.minLength\"\n      [p-no-autocomplete]=\"field.noAutocomplete\"\n      [p-optional]=\"field.optional\"\n      [p-pattern]=\"field.pattern\"\n      [p-required]=\"field.required\"\n      [p-show-required]=\"field.showRequired\"\n      (p-change)=\"onChangeField(field)\"\n      (p-change-model)=\"onChangeFieldModel(field)\"\n      [p-icon]=\"field.icon\"\n      [p-placeholder]=\"field.placeholder\"\n      [p-readonly]=\"field.readonly\"\n    >\n    </po-input>\n\n    <po-number\n      #component\n      *ngIf=\"compareTo(field.control, 'number')\"\n      [name]=\"field.property\"\n      [(ngModel)]=\"value[field.property]\"\n      [ngClass]=\"field.componentClass\"\n      [p-clean]=\"field.clean\"\n      [p-disabled]=\"isDisabled(field)\"\n      [p-error-pattern]=\"field.errorMessage\"\n      [p-auto-focus]=\"field.focus\"\n      [p-help]=\"field.help\"\n      [p-label]=\"field.label\"\n      [p-min]=\"field.minValue\"\n      [p-max]=\"field.maxValue\"\n      [p-maxlength]=\"field.maxLength\"\n      [p-minlength]=\"field.minLength\"\n      [p-no-autocomplete]=\"field.noAutocomplete\"\n      [p-optional]=\"field.optional\"\n      [p-step]=\"field.step\"\n      [p-readonly]=\"field.readonly\"\n      [p-required]=\"field.required\"\n      [p-show-required]=\"field.showRequired\"\n      (p-change)=\"onChangeField(field)\"\n      (p-change-model)=\"onChangeFieldModel(field)\"\n      [p-icon]=\"field.icon\"\n      [p-placeholder]=\"field.placeholder\"\n    >\n    </po-number>\n\n    <po-decimal\n      #component\n      *ngIf=\"compareTo(field.control, 'decimal')\"\n      [name]=\"field.property\"\n      [(ngModel)]=\"value[field.property]\"\n      [ngClass]=\"field.componentClass\"\n      [p-clean]=\"field.clean\"\n      [p-error-pattern]=\"field.errorMessage\"\n      [p-disabled]=\"isDisabled(field)\"\n      [p-decimals-length]=\"field.decimalsLength\"\n      [p-thousand-maxlength]=\"field.thousandMaxlength\"\n      [p-icon]=\"field.icon\"\n      [p-auto-focus]=\"field.focus\"\n      [p-help]=\"field.help\"\n      [p-label]=\"field.label\"\n      [p-locale]=\"field.locale\"\n      [p-min]=\"field.minValue\"\n      [p-max]=\"field.maxValue\"\n      [p-maxlength]=\"field.maxLength\"\n      [p-minlength]=\"field.minLength\"\n      [p-no-autocomplete]=\"field.noAutocomplete\"\n      [p-optional]=\"field.optional\"\n      [p-readonly]=\"field.readonly\"\n      [p-required]=\"field.required\"\n      [p-show-required]=\"field.showRequired\"\n      (p-change)=\"onChangeField(field)\"\n      (p-change-model)=\"onChangeFieldModel(field)\"\n      [p-placeholder]=\"field.placeholder\"\n    >\n    </po-decimal>\n\n    <po-select\n      #component\n      *ngIf=\"compareTo(field.control, 'select')\"\n      [name]=\"field.property\"\n      [(ngModel)]=\"value[field.property]\"\n      [ngClass]=\"field.componentClass\"\n      [p-field-label]=\"field.fieldLabel\"\n      [p-field-value]=\"field.fieldValue\"\n      [p-disabled]=\"isDisabled(field)\"\n      [p-help]=\"field.help\"\n      [p-label]=\"field.label\"\n      [p-optional]=\"field.optional\"\n      [p-options]=\"field.options\"\n      [p-required]=\"field.required\"\n      [p-show-required]=\"field.showRequired\"\n      (p-change)=\"onChangeField(field)\"\n      [p-placeholder]=\"field.placeholder\"\n      [p-readonly]=\"field.readonly\"\n    >\n    </po-select>\n\n    <po-radio-group\n      #component\n      *ngIf=\"compareTo(field.control, 'radioGroup')\"\n      [name]=\"field.property\"\n      [(ngModel)]=\"value[field.property]\"\n      [ngClass]=\"field.componentClass\"\n      [p-columns]=\"field.columns || 3\"\n      [p-auto-focus]=\"field.focus\"\n      [p-disabled]=\"isDisabled(field)\"\n      [p-help]=\"field.help\"\n      [p-label]=\"field.label\"\n      [p-optional]=\"field.optional\"\n      [p-options]=\"field.options\"\n      [p-required]=\"field.required\"\n      [p-show-required]=\"field.showRequired\"\n      (p-change)=\"onChangeField(field)\"\n    >\n    </po-radio-group>\n\n    <po-switch\n      #component\n      *ngIf=\"compareTo(field.control, 'switch')\"\n      [name]=\"field.property\"\n      [(ngModel)]=\"value[field.property]\"\n      [ngClass]=\"field.componentClass\"\n      [p-disabled]=\"isDisabled(field)\"\n      [p-format-model]=\"field.formatModel\"\n      [p-help]=\"field.help\"\n      [p-label]=\"field.label\"\n      [p-label-off]=\"field.booleanFalse\"\n      [p-label-on]=\"field.booleanTrue\"\n      [p-label-position]=\"field.labelPosition\"\n      (p-change)=\"onChangeField(field)\"\n    >\n    </po-switch>\n\n    <po-combo\n      #component\n      *ngIf=\"compareTo(field.control, 'combo')\"\n      [name]=\"field.property\"\n      [(ngModel)]=\"value[field.property]\"\n      [ngClass]=\"field.componentClass\"\n      p-emit-object-value\n      [p-auto-focus]=\"field.focus\"\n      [p-clean]=\"field.clean\"\n      [p-disabled]=\"isDisabled(field)\"\n      [p-field-label]=\"field.fieldLabel\"\n      [p-field-value]=\"field.fieldValue\"\n      [p-filter-params]=\"field.params\"\n      [p-filter-service]=\"field.optionsService\"\n      [p-help]=\"field.help\"\n      [p-infinite-scroll]=\"field.infiniteScroll\"\n      [p-infinite-scroll-distance]=\"field.infiniteScrollDistance || 100\"\n      [p-label]=\"field.label\"\n      [p-literals]=\"field.literals\"\n      [p-options]=\"field.options\"\n      [p-optional]=\"field.optional\"\n      [p-sort]=\"field.sort\"\n      [p-required]=\"field.required\"\n      [p-show-required]=\"field.showRequired\"\n      (p-change)=\"onChangeField(field, $event)\"\n      [p-icon]=\"field.icon\"\n      [p-placeholder]=\"field.placeholder\"\n      [p-filter-minlength]=\"field.filterMinlength\"\n      [p-filter-mode]=\"field.filterMode\"\n      [p-disabled-init-filter]=\"field.disabledInitFilter\"\n      [p-disabled-tab-filter]=\"field.disabledTabFilter\"\n      [p-debounce-time]=\"field.debounceTime\"\n      [p-change-on-enter]=\"field.changeOnEnter\"\n    >\n    </po-combo>\n\n    <po-lookup\n      #component\n      *ngIf=\"compareTo(field.control, 'lookup')\"\n      [name]=\"field.property\"\n      [(ngModel)]=\"value[field.property]\"\n      p-field-label=\"label\"\n      p-field-value=\"value\"\n      [ngClass]=\"field.componentClass\"\n      [p-clean]=\"field.clean\"\n      [p-columns]=\"field.columns\"\n      [p-disabled]=\"isDisabled(field)\"\n      [p-field-label]=\"field.fieldLabel || 'label'\"\n      [p-field-value]=\"field.fieldValue || 'value'\"\n      [p-filter-params]=\"field.params\"\n      [p-filter-service]=\"field.searchService\"\n      [p-auto-focus]=\"field.focus\"\n      [p-auto-height]=\"field.autoHeight\"\n      [p-help]=\"field.help\"\n      [p-field-format]=\"field.format\"\n      [p-infinite-scroll]=\"field.infiniteScroll\"\n      [p-label]=\"field.label\"\n      [p-literals]=\"field.literals\"\n      [p-multiple]=\"field.multiple\"\n      [p-no-autocomplete]=\"field.noAutocomplete\"\n      [p-optional]=\"field.optional\"\n      [p-required]=\"field.required\"\n      [p-show-required]=\"field.showRequired\"\n      (p-change)=\"onChangeField(field)\"\n      [p-placeholder]=\"field.placeholder\"\n      [p-advanced-filters]=\"field.advancedFilters\"\n      (p-change-visible-columns)=\"field.changeVisibleColumns?.($event)\"\n      (p-restore-column-manager)=\"field.columnRestoreManager?.($event)\"\n    >\n    </po-lookup>\n\n    <po-checkbox-group\n      #component\n      *ngIf=\"compareTo(field.control, 'checkboxGroup')\"\n      [name]=\"field.property\"\n      [(ngModel)]=\"value[field.property]\"\n      [ngClass]=\"field.componentClass\"\n      [p-columns]=\"field.columns || 3\"\n      [p-auto-focus]=\"field.focus\"\n      [p-disabled]=\"isDisabled(field)\"\n      [p-help]=\"field.help\"\n      [p-label]=\"field.label\"\n      [p-optional]=\"field.optional\"\n      [p-options]=\"field.options\"\n      [p-required]=\"field.required\"\n      [p-show-required]=\"field.showRequired\"\n      (p-change)=\"onChangeField(field)\"\n    >\n    </po-checkbox-group>\n\n    <po-multiselect\n      #component\n      *ngIf=\"compareTo(field.control, 'multiselect')\"\n      [name]=\"field.property\"\n      [(ngModel)]=\"value[field.property]\"\n      [ngClass]=\"field.componentClass\"\n      [p-disabled]=\"isDisabled(field)\"\n      [p-auto-focus]=\"field.focus\"\n      [p-auto-height]=\"field.autoHeight\"\n      [p-help]=\"field.help\"\n      [p-label]=\"field.label\"\n      [p-literals]=\"field.literals\"\n      [p-optional]=\"field.optional\"\n      [p-options]=\"field.options\"\n      [p-required]=\"field.required\"\n      [p-show-required]=\"field.showRequired\"\n      (p-change)=\"onChangeField(field)\"\n      [p-placeholder]=\"field.placeholder\"\n      [p-field-label]=\"field.fieldLabel\"\n      [p-field-value]=\"field.fieldValue\"\n      [p-filter-service]=\"field.optionsService\"\n      [p-filter-mode]=\"field.filterMode\"\n      [p-debounce-time]=\"field.debounceTime\"\n      [p-sort]=\"field.sort\"\n      [p-placeholder-search]=\"field.placeholderSearch\"\n      [p-hide-search]=\"field.hideSearch\"\n      [p-hide-select-all]=\"field.hideSelectAll\"\n    >\n    </po-multiselect>\n\n    <po-textarea\n      #component\n      *ngIf=\"compareTo(field.control, 'textarea')\"\n      [name]=\"field.property\"\n      [(ngModel)]=\"value[field.property]\"\n      [ngClass]=\"field.componentClass\"\n      [p-disabled]=\"isDisabled(field)\"\n      [p-auto-focus]=\"field.focus\"\n      [p-help]=\"field.help\"\n      [p-label]=\"field.label\"\n      [p-maxlength]=\"field.maxLength\"\n      [p-minlength]=\"field.minLength\"\n      [p-optional]=\"field.optional\"\n      [p-readonly]=\"field.readonly\"\n      [p-required]=\"field.required\"\n      [p-show-required]=\"field.showRequired\"\n      [p-rows]=\"field.rows\"\n      (p-change)=\"onChangeField(field)\"\n      (p-change-model)=\"onChangeFieldModel(field)\"\n      [p-placeholder]=\"field.placeholder\"\n    >\n    </po-textarea>\n\n    <po-password\n      #component\n      *ngIf=\"compareTo(field.control, 'password')\"\n      [name]=\"field.property\"\n      [(ngModel)]=\"value[field.property]\"\n      [ngClass]=\"field.componentClass\"\n      [p-clean]=\"field.clean\"\n      [p-disabled]=\"isDisabled(field)\"\n      [p-error-pattern]=\"field.errorMessage\"\n      [p-auto-focus]=\"field.focus\"\n      [p-help]=\"field.help\"\n      [p-hide-password-peek]=\"field.hidePasswordPeek\"\n      [p-icon]=\"field.icon\"\n      [p-label]=\"field.label\"\n      [p-maxlength]=\"field.maxLength\"\n      [p-minlength]=\"field.minLength\"\n      [p-no-autocomplete]=\"field.noAutocomplete\"\n      [p-optional]=\"field.optional\"\n      [p-pattern]=\"field.pattern\"\n      [p-readonly]=\"field.readonly\"\n      [p-required]=\"field.required\"\n      [p-show-required]=\"field.showRequired\"\n      (p-change)=\"onChangeField(field)\"\n      (p-change-model)=\"onChangeFieldModel(field)\"\n      [p-placeholder]=\"field.placeholder\"\n    >\n    </po-password>\n\n    <po-upload\n      #component\n      *ngIf=\"compareTo(field.control, 'upload')\"\n      [(ngModel)]=\"value[field.property]\"\n      [ngClass]=\"field.componentClass\"\n      [p-auto-upload]=\"field.autoUpload\"\n      [p-directory]=\"field.directory\"\n      [p-disabled]=\"isDisabled(field)\"\n      [p-drag-drop]=\"field.dragDrop\"\n      [p-drag-drop-height]=\"field.dragDropHeight\"\n      [p-restrictions]=\"field.restrictions\"\n      [p-form-field]=\"field.formField\"\n      [p-headers]=\"field.headers\"\n      [p-help]=\"field.help\"\n      [p-hide-restrictions-info]=\"field.hideRestrictionsInfo\"\n      [p-hide-select-button]=\"field.hideSelectButton\"\n      [p-hide-send-button]=\"field.hideSendButton\"\n      [p-multiple]=\"field.multiple\"\n      [p-label]=\"field.label\"\n      [p-literals]=\"field.literals\"\n      [name]=\"field.property\"\n      (p-error)=\"field.onError($event)\"\n      (p-success)=\"field.onSuccess($event)\"\n      (p-upload)=\"field.onUpload($event)\"\n      [p-optional]=\"field.optional\"\n      [p-required]=\"field.required\"\n      [p-show-required]=\"field.showRequired\"\n      (p-change)=\"onChangeField(field)\"\n      (p-change-model)=\"onChangeFieldModel(field)\"\n      [p-url]=\"field.url\"\n    >\n    </po-upload>\n  </ng-container>\n</div>\n" }]
     }], function () { return [{ type: i1.TitleCasePipe }, { type: PoDynamicFormValidationService }, { type: i0.ChangeDetectorRef }, { type: i2$1.NgForm }]; }, { components: [{
             type: ViewChildren,
             args: ['component']
         }] }); })();
 
+/**
+ * @docsPrivate
+ *
+ * @description
+ *
+ * Serviço padrão utilizado para filtrar os dados dos campos que utilizam a propriedade `searchService`.
+ */
 class PoDynamicViewService {
-    http;
-    constructor(http) {
-        this.http = http;
+    httpClient;
+    headers = new HttpHeaders({
+        'X-PO-No-Message': 'true'
+    });
+    url;
+    constructor(httpClient) {
+        this.httpClient = httpClient;
+    }
+    getObjectByValue(value, filterParams) {
+        const validatedFilterParams = this.validateParams(filterParams);
+        const encodedValue = encodeURIComponent(value);
+        const newURL = `${this.url}/${encodedValue}`;
+        return this.httpClient
+            .get(newURL, { headers: this.headers, params: validatedFilterParams })
+            .pipe(map$1((response) => ('items' in response ? response.items : response)));
     }
     onLoad(url, value) {
-        return this.http.post(url, value).toPromise();
+        return this.httpClient.post(url, value).toPromise();
+    }
+    setConfig(url) {
+        this.url = url;
+    }
+    validateParams(params) {
+        return isTypeof(params, 'object') && !Array.isArray(params) ? params : undefined;
     }
     static ɵfac = function PoDynamicViewService_Factory(t) { return new (t || PoDynamicViewService)(i0.ɵɵinject(i1$2.HttpClient)); };
     static ɵprov = /*@__PURE__*/ i0.ɵɵdefineInjectable({ token: PoDynamicViewService, factory: PoDynamicViewService.ɵfac });
@@ -39065,6 +39210,7 @@ class PoDynamicViewBaseComponent {
      */
     load;
     visibleFields = [];
+    service;
     _fields = [];
     _showAllValue = false;
     _value = {};
@@ -39133,12 +39279,25 @@ class PoDynamicViewBaseComponent {
         this.titleCasePipe = titleCasePipe;
         this.dynamicViewService = dynamicViewService;
     }
-    // retorna os fields com os valores recuperados do objeto value.
-    getConfiguredFields() {
+    getConfiguredFields(useSearchService = true) {
         const newFields = [];
-        this.fields.forEach(field => {
+        this.fields.forEach((field, index) => {
             if (isVisibleField(field)) {
-                newFields.push(this.createField(field));
+                if (!field.searchService) {
+                    newFields.splice(index, 0, this.createField(field));
+                }
+                else if (this.value[field.property]?.length ||
+                    (!Array.isArray(this.value[field.property]) && this.value[field.property] && useSearchService)) {
+                    if (isTypeof(field.searchService, 'object')) {
+                        this.service = field.searchService;
+                    }
+                    if (field.searchService && isTypeof(field.searchService, 'string')) {
+                        this.service = this.dynamicViewService;
+                        this.service.setConfig(field.searchService);
+                    }
+                    const indexUpdated = field.order ? field.order : index;
+                    this.createFieldWithService(field, newFields, indexUpdated);
+                }
             }
         });
         return sortFields(newFields);
@@ -39161,7 +39320,29 @@ class PoDynamicViewBaseComponent {
     }
     createField(field) {
         const property = field.property;
-        const value = this.transformValue(field.type, this.value[property], field.format);
+        let value;
+        if (field.isArrayOrObject && this.value[property]) {
+            value = this.transformArrayValue(this.value[property], field);
+        }
+        else if (field.fieldLabel) {
+            value = this.transformFieldLabel(property, field);
+        }
+        if (!value) {
+            value = this.transformValue(field.type, this.value[property], field.format);
+        }
+        return this.returnValues(field, value);
+    }
+    createFieldWithService(field, newFields, index) {
+        const property = field.property;
+        this.searchById(this.value[property], field).subscribe(response => {
+            const value = response;
+            const allValues = this.returnValues(field, value);
+            newFields.splice(index, 0, allValues);
+            sortFields(newFields);
+        });
+    }
+    returnValues(field, value) {
+        const property = field.property;
         const classesGridColumns = getGridColumnsClasses(field.gridColumns, field.offsetColumns, {
             smGrid: field.gridSmColumns,
             mdGrid: field.gridMdColumns,
@@ -39186,6 +39367,55 @@ class PoDynamicViewBaseComponent {
             ...field
         };
     }
+    searchById(value, field) {
+        if (typeof value === 'string') {
+            value = value.trim();
+        }
+        if (value !== '') {
+            return this.service
+                .getObjectByValue(value)
+                .pipe(map$1(res => this.transformArrayValue(res, field)))
+                .pipe(catchError$1(() => of(null)));
+        }
+        else {
+            return of(null);
+        }
+    }
+    transformArrayValue(valueProperty, field) {
+        const valueArray = Array.isArray(valueProperty) ? valueProperty : [valueProperty];
+        const arrayWithLabel = valueArray.map(item => ({
+            value: item[field.fieldValue] || item.value,
+            label: item[field.fieldLabel] || item.label
+        }));
+        const labels = arrayWithLabel.map(optionValue => {
+            if (optionValue.label) {
+                const labelTranformed = this.transformValue(field.type, optionValue.label, field.format);
+                if (field.concatLabelValue && optionValue.value) {
+                    return `${labelTranformed} - ${optionValue.value}`;
+                }
+                else {
+                    return labelTranformed;
+                }
+            }
+        });
+        if (labels[0] !== undefined && labels.join()) {
+            return labels.join(', ');
+        }
+        else {
+            valueProperty = '';
+            return undefined;
+        }
+    }
+    transformFieldLabel(property, field) {
+        if (field.concatLabelValue && field.fieldLabel && field.fieldValue && !field.isArrayOrObject) {
+            const transformedValue = this.transformValue(field.type, this.value[field.fieldLabel], field.format);
+            return `${transformedValue} - ${this.value[field.fieldValue]}`;
+        }
+        if (field.fieldLabel && !field.concatLabelValue && !field.isArrayOrObject) {
+            this.value[property] = this.value[field.fieldLabel];
+        }
+        return undefined;
+    }
     transformValue(type, value, format) {
         let transformedValue = value;
         switch (type) {
@@ -39472,14 +39702,22 @@ function PoDynamicViewComponent_ng_template_5_Template(rf, ctx) { if (rf & 1) {
  * <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>
  */
 class PoDynamicViewComponent extends PoDynamicViewBaseComponent {
+    initChanges;
     constructor(currencyPipe, datePipe, decimalPipe, timePipe, titleCasePipe, dynamicViewService) {
         super(currencyPipe, datePipe, decimalPipe, timePipe, titleCasePipe, dynamicViewService);
     }
     ngOnChanges(changes) {
-        if (changes.fields || changes.value || changes.showAllValue) {
+        if (this.load && !this.initChanges) {
+            this.initChanges = false;
+        }
+        else {
+            this.initChanges = true;
+        }
+        if ((changes.fields || changes.value || changes.showAllValue) && this.initChanges) {
             this.visibleFields = this.getVisibleFields();
         }
     }
@@ -39537,6 +39775,7 @@ class PoDynamicViewComponent extends PoDynamicViewBaseComponent {
         this.setValueOnLoad(value);
         this.setFieldsOnLoad(fields);
         this.visibleFields = this.getVisibleFields();
+        this.initChanges = true;
     }
     static ɵfac = function PoDynamicViewComponent_Factory(t) { return new (t || PoDynamicViewComponent)(i0.ɵɵdirectiveInject(i1.CurrencyPipe), i0.ɵɵdirectiveInject(i1.DatePipe), i0.ɵɵdirectiveInject(i1.DecimalPipe), i0.ɵɵdirectiveInject(PoTimePipe), i0.ɵɵdirectiveInject(i1.TitleCasePipe), i0.ɵɵdirectiveInject(PoDynamicViewService)); };
     static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PoDynamicViewComponent, selectors: [["po-dynamic-view"]], features: [i0.ɵɵInheritDefinitionFeature, i0.ɵɵNgOnChangesFeature], decls: 7, vars: 1, consts: [["class", "po-dynamic-view po-row", 4, "ngIf"], ["poInfo", ""], ["poTag", ""], ["poImage", ""], [1, "po-dynamic-view", "po-row"], ["ngFor", "", 3, "ngForOf"], ["class", "po-sm-12", 3, "p-label", 4, "ngIf"], [4, "ngTemplateOutlet", "ngTemplateOutletContext"], [1, "po-sm-12", 3, "p-label"], [3, "ngClass", "p-label", "p-value"], [3, "ngClass", "p-color", "p-icon", "p-inverse", "p-label", "p-value"], [3, "p-alt", "p-height", "p-src"]], template: function PoDynamicViewComponent_Template(rf, ctx) { if (rf & 1) {
@@ -43431,7 +43670,7 @@ class PoMenuItemComponent {
         } if (rf & 2) {
             let _t;
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.menuSubItems = _t.first);
-        } }, inputs: { action: ["p-action", "action"], badgeAlert: ["p-badge-alert", "badgeAlert"], badgeColor: ["p-badge-color", "badgeColor"], collapsedMenu: ["p-collapsed-menu", "collapsedMenu"], icon: ["p-icon", "icon"], id: ["p-id", "id"], isOpened: ["p-is-opened", "isOpened"], label: ["p-label", "label"], level: ["p-level", "level"], link: ["p-link", "link"], shortLabel: ["p-short-label", "shortLabel"], type: ["p-type", "type"], badgeValue: ["p-badge-value", "badgeValue"], isSelected: ["p-is-selected", "isSelected"], isSubItem: ["p-is-sub-item", "isSubItem"], subItems: ["p-sub-items", "subItems"] }, decls: 7, vars: 5, consts: [["class", "po-menu-item-link", "role", "menuitem", 3, "routerLink", 4, "ngIf"], ["class", "po-menu-item-link", "role", "menuitem", 3, "href", 4, "ngIf"], ["class", "po-menu-item-link", "href", "javascript:;", "role", "menuitem", 4, "ngIf"], ["class", "po-menu-item-link", "role", "none", 4, "ngIf"], ["class", "po-menu-item-link po-clickable", "role", "menuitem", 4, "ngIf"], ["menuItemTemplate", ""], ["role", "menuitem", 1, "po-menu-item-link", 3, "routerLink"], [4, "ngTemplateOutlet"], ["role", "menuitem", 1, "po-menu-item-link", 3, "href"], ["href", "javascript:;", "role", "menuitem", 1, "po-menu-item-link"], ["role", "none", 1, "po-menu-item-link"], ["role", "menuitem", 1, "po-menu-item-link", "po-clickable"], ["role", "group", 1, "po-menu-sub-items", 3, "hidden"], ["menuSubItems", ""], [1, "po-menu-sub-items-list"], ["class", "po-menu-subm-items-list-item", 4, "ngFor", "ngForOf"], [1, "po-menu-subm-items-list-item"], ["p-is-sub-item", "", 3, "p-action", "p-badge-alert", "p-badge-color", "p-badge-value", "p-id", "p-label", "p-level", "p-link", "p-sub-items", "p-type"], [1, "po-menu-item", 3, "tabindex", "click", "keydown.enter", "keydown.space"], ["aria-hidden", "true", "class", "po-menu-icon-item", 3, "p-icon", 4, "ngIf"], ["class", "po-icon po-menu-group-icon", 3, "po-icon-arrow-up", "po-icon-arrow-down", 4, "ngIf"], ["aria-hidden", "true", 3, "ngClass", "p-color", "p-value", 4, "ngIf"], ["aria-hidden", "true", "class", "po-color-07", 3, "ngClass", 4, "ngIf"], ["aria-hidden", "true", 1, "po-menu-icon-item", 3, "p-icon"], [1, "po-icon", "po-menu-group-icon"], ["aria-hidden", "true", 3, "ngClass", "p-color", "p-value"], ["aria-hidden", "true", 1, "po-color-07", 3, "ngClass"]], template: function PoMenuItemComponent_Template(rf, ctx) { if (rf & 1) {
+        } }, inputs: { action: ["p-action", "action"], badgeAlert: ["p-badge-alert", "badgeAlert"], badgeColor: ["p-badge-color", "badgeColor"], collapsedMenu: ["p-collapsed-menu", "collapsedMenu"], icon: ["p-icon", "icon"], id: ["p-id", "id"], isOpened: ["p-is-opened", "isOpened"], label: ["p-label", "label"], level: ["p-level", "level"], link: ["p-link", "link"], shortLabel: ["p-short-label", "shortLabel"], type: ["p-type", "type"], badgeValue: ["p-badge-value", "badgeValue"], isSelected: ["p-is-selected", "isSelected"], isSubItem: ["p-is-sub-item", "isSubItem"], subItems: ["p-sub-items", "subItems"] }, decls: 7, vars: 5, consts: [["class", "po-menu-item-link", "role", "menuitem", 3, "routerLink", 4, "ngIf"], ["class", "po-menu-item-link", "role", "menuitem", 3, "href", 4, "ngIf"], ["class", "po-menu-item-link", "href", "javascript:;", "role", "menuitem", 4, "ngIf"], ["class", "po-menu-item-link", "role", "none", 4, "ngIf"], ["class", "po-menu-item-link po-clickable", "role", "menuitem", 4, "ngIf"], ["menuItemTemplate", ""], ["role", "menuitem", 1, "po-menu-item-link", 3, "routerLink"], [4, "ngTemplateOutlet"], ["role", "menuitem", 1, "po-menu-item-link", 3, "href"], ["href", "javascript:;", "role", "menuitem", 1, "po-menu-item-link"], ["role", "none", 1, "po-menu-item-link"], ["role", "menuitem", 1, "po-menu-item-link", "po-clickable"], ["role", "group", 1, "po-menu-sub-items", 3, "hidden"], ["menuSubItems", ""], [1, "po-menu-sub-items-list"], ["class", "po-menu-sub-items-list-item", 4, "ngFor", "ngForOf"], [1, "po-menu-sub-items-list-item"], ["p-is-sub-item", "", 3, "p-action", "p-badge-alert", "p-badge-color", "p-badge-value", "p-id", "p-label", "p-level", "p-link", "p-sub-items", "p-type"], [1, "po-menu-item", 3, "tabindex", "click", "keydown.enter", "keydown.space"], ["aria-hidden", "true", "class", "po-menu-icon-item", 3, "p-icon", 4, "ngIf"], ["class", "po-icon po-menu-group-icon", 3, "po-icon-arrow-up", "po-icon-arrow-down", 4, "ngIf"], ["aria-hidden", "true", 3, "ngClass", "p-color", "p-value", 4, "ngIf"], ["aria-hidden", "true", "class", "po-color-07", 3, "ngClass", 4, "ngIf"], ["aria-hidden", "true", 1, "po-menu-icon-item", 3, "p-icon"], [1, "po-icon", "po-menu-group-icon"], ["aria-hidden", "true", 3, "ngClass", "p-color", "p-value"], ["aria-hidden", "true", 1, "po-color-07", 3, "ngClass"]], template: function PoMenuItemComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵtemplate(0, PoMenuItemComponent_a_0_Template, 2, 3, "a", 0);
             i0.ɵɵtemplate(1, PoMenuItemComponent_a_1_Template, 2, 3, "a", 1);
             i0.ɵɵtemplate(2, PoMenuItemComponent_a_2_Template, 2, 2, "a", 2);
@@ -43452,7 +43691,7 @@ class PoMenuItemComponent {
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PoMenuItemComponent, [{
         type: Component,
-        args: [{ selector: 'po-menu-item', template: "<!-- menu com link interno -->\n<a\n  *ngIf=\"type === 'internalLink'\"\n  class=\"po-menu-item-link\"\n  role=\"menuitem\"\n  [attr.aria-label]=\"label\"\n  [routerLink]=\"link\"\n>\n  <ng-container *ngTemplateOutlet=\"menuItemTemplate\"></ng-container>\n</a>\n<!-- menu com link externo -->\n<a *ngIf=\"type === 'externalLink'\" class=\"po-menu-item-link\" role=\"menuitem\" [attr.aria-label]=\"label\" [href]=\"link\">\n  <ng-container *ngTemplateOutlet=\"menuItemTemplate\"></ng-container>\n</a>\n<!-- menu sem link -->\n<a *ngIf=\"type === 'noLink'\" class=\"po-menu-item-link\" href=\"javascript:;\" role=\"menuitem\" [attr.aria-label]=\"label\">\n  <ng-container *ngTemplateOutlet=\"menuItemTemplate\"></ng-container>\n</a>\n<!-- menu sem dados -->\n<div *ngIf=\"type === 'noData'\" class=\"po-menu-item-link\" role=\"none\">\n  <ng-container *ngTemplateOutlet=\"menuItemTemplate\"></ng-container>\n</div>\n<!-- menu com sub itens -->\n<div\n  *ngIf=\"type === 'subItems'\"\n  class=\"po-menu-item-link po-clickable\"\n  role=\"menuitem\"\n  [attr.aria-expanded]=\"isOpened ? true : false\"\n>\n  <ng-container *ngTemplateOutlet=\"menuItemTemplate\"></ng-container>\n\n  <div\n    #menuSubItems\n    class=\"po-menu-sub-items\"\n    [hidden]=\"collapsedMenu || !isOpened\"\n    [attr.aria-expanded]=\"isOpened ? true : false\"\n    [attr.aria-hidden]=\"!isOpened ? true : false\"\n    role=\"group\"\n    [style.maxHeight.px]=\"maxHeight\"\n  >\n    <ul class=\"po-menu-sub-items-list\">\n      <li class=\"po-menu-subm-items-list-item\" *ngFor=\"let subItem of subItems\" [attr.aria-level]=\"subItem.level\">\n        <po-menu-item\n          p-is-sub-item\n          [p-action]=\"subItem.action\"\n          [p-badge-alert]=\"subItem.badgeAlert\"\n          [p-badge-color]=\"subItem.badge ? subItem.badge.color : undefined\"\n          [p-badge-value]=\"subItem.badge ? subItem.badge.value : undefined\"\n          [p-id]=\"subItem.id\"\n          [p-label]=\"subItem.label\"\n          [p-level]=\"subItem.level\"\n          [p-link]=\"subItem.link\"\n          [p-sub-items]=\"subItem.subItems\"\n          [p-type]=\"subItem.type\"\n        ></po-menu-item>\n      </li>\n    </ul>\n  </div>\n</div>\n\n<ng-template #menuItemTemplate>\n  <div\n    class=\"po-menu-item\"\n    [tabindex]=\"type === 'subItems' ? 0 : -1\"\n    [attr.aria-label]=\"label\"\n    [attr.aria-hidden]=\"type === 'subItems' ? false : true\"\n    [attr.role]=\"type === 'subItems' ? 'menuitem' : undefined\"\n    [class.po-menu-icon-container]=\"level === 1 && icon\"\n    [class.po-menu-item-selected]=\"isSelected\"\n    [class.po-menu-item-level-two]=\"level === 2\"\n    [class.po-menu-item-level-three]=\"level === 3\"\n    [class.po-menu-item-level-four]=\"level === 4\"\n    [class.po-menu-item-grouper-up]=\"type === 'subItems' && isOpened\"\n    [class.po-menu-item-grouper-down]=\"type === 'subItems' && !isOpened\"\n    [class.po-menu-item-no-data]=\"type === 'noData'\"\n    [class.po-menu-sub-item-selected]=\"isSelectedSubItem\"\n    (click)=\"clickMenuItem($event)\"\n    (keydown.enter)=\"clickMenuItem($event)\"\n    (keydown.space)=\"clickMenuItem($event)\"\n  >\n    <po-icon *ngIf=\"level === 1 && icon\" aria-hidden=\"true\" class=\"po-menu-icon-item\" [p-icon]=\"icon\"></po-icon>\n\n    <span\n      *ngIf=\"type === 'subItems' && !collapsedMenu\"\n      class=\"po-icon po-menu-group-icon\"\n      [class.po-icon-arrow-up]=\"isOpened\"\n      [class.po-icon-arrow-down]=\"!isOpened\"\n    ></span>\n\n    <span [class.po-menu-icon-label]=\"level === 1 && icon\">\n      {{ label }}\n    </span>\n\n    <po-badge\n      *ngIf=\"canShowBadge\"\n      aria-hidden=\"true\"\n      [ngClass]=\"!collapsedMenu ? 'po-menu-badge-align' : 'po-menu-badge-align-collapsed'\"\n      [p-color]=\"badgeColor\"\n      [p-value]=\"badgeValue\"\n    ></po-badge>\n\n    <span\n      *ngIf=\"badgeAlert\"\n      aria-hidden=\"true\"\n      class=\"po-color-07\"\n      [ngClass]=\"!collapsedMenu ? 'po-menu-badge-alert' : 'po-menu-badge-alert-collapsed'\"\n    ></span>\n  </div>\n</ng-template>\n" }]
+        args: [{ selector: 'po-menu-item', template: "<!-- menu com link interno -->\n<a\n  *ngIf=\"type === 'internalLink'\"\n  class=\"po-menu-item-link\"\n  role=\"menuitem\"\n  [attr.aria-label]=\"label\"\n  [routerLink]=\"link\"\n>\n  <ng-container *ngTemplateOutlet=\"menuItemTemplate\"></ng-container>\n</a>\n<!-- menu com link externo -->\n<a *ngIf=\"type === 'externalLink'\" class=\"po-menu-item-link\" role=\"menuitem\" [attr.aria-label]=\"label\" [href]=\"link\">\n  <ng-container *ngTemplateOutlet=\"menuItemTemplate\"></ng-container>\n</a>\n<!-- menu sem link -->\n<a *ngIf=\"type === 'noLink'\" class=\"po-menu-item-link\" href=\"javascript:;\" role=\"menuitem\" [attr.aria-label]=\"label\">\n  <ng-container *ngTemplateOutlet=\"menuItemTemplate\"></ng-container>\n</a>\n<!-- menu sem dados -->\n<div *ngIf=\"type === 'noData'\" class=\"po-menu-item-link\" role=\"none\">\n  <ng-container *ngTemplateOutlet=\"menuItemTemplate\"></ng-container>\n</div>\n<!-- menu com sub itens -->\n<div\n  *ngIf=\"type === 'subItems'\"\n  class=\"po-menu-item-link po-clickable\"\n  role=\"menuitem\"\n  [attr.aria-expanded]=\"isOpened ? true : false\"\n>\n  <ng-container *ngTemplateOutlet=\"menuItemTemplate\"></ng-container>\n\n  <div\n    #menuSubItems\n    class=\"po-menu-sub-items\"\n    [hidden]=\"collapsedMenu || !isOpened\"\n    [attr.aria-expanded]=\"isOpened ? true : false\"\n    [attr.aria-hidden]=\"!isOpened ? true : false\"\n    role=\"group\"\n    [style.maxHeight.px]=\"maxHeight\"\n  >\n    <ul class=\"po-menu-sub-items-list\">\n      <li class=\"po-menu-sub-items-list-item\" *ngFor=\"let subItem of subItems\" [attr.aria-level]=\"subItem.level\">\n        <po-menu-item\n          p-is-sub-item\n          [p-action]=\"subItem.action\"\n          [p-badge-alert]=\"subItem.badgeAlert\"\n          [p-badge-color]=\"subItem.badge ? subItem.badge.color : undefined\"\n          [p-badge-value]=\"subItem.badge ? subItem.badge.value : undefined\"\n          [p-id]=\"subItem.id\"\n          [p-label]=\"subItem.label\"\n          [p-level]=\"subItem.level\"\n          [p-link]=\"subItem.link\"\n          [p-sub-items]=\"subItem.subItems\"\n          [p-type]=\"subItem.type\"\n        ></po-menu-item>\n      </li>\n    </ul>\n  </div>\n</div>\n\n<ng-template #menuItemTemplate>\n  <div\n    class=\"po-menu-item\"\n    [tabindex]=\"type === 'subItems' ? 0 : -1\"\n    [attr.aria-label]=\"label\"\n    [attr.aria-hidden]=\"type === 'subItems' ? false : true\"\n    [attr.role]=\"type === 'subItems' ? 'menuitem' : undefined\"\n    [class.po-menu-icon-container]=\"level === 1 && icon\"\n    [class.po-menu-item-selected]=\"isSelected\"\n    [class.po-menu-item-level-two]=\"level === 2\"\n    [class.po-menu-item-level-three]=\"level === 3\"\n    [class.po-menu-item-level-four]=\"level === 4\"\n    [class.po-menu-item-grouper-up]=\"type === 'subItems' && isOpened\"\n    [class.po-menu-item-grouper-down]=\"type === 'subItems' && !isOpened\"\n    [class.po-menu-item-no-data]=\"type === 'noData'\"\n    [class.po-menu-sub-item-selected]=\"isSelectedSubItem\"\n    (click)=\"clickMenuItem($event)\"\n    (keydown.enter)=\"clickMenuItem($event)\"\n    (keydown.space)=\"clickMenuItem($event)\"\n  >\n    <po-icon *ngIf=\"level === 1 && icon\" aria-hidden=\"true\" class=\"po-menu-icon-item\" [p-icon]=\"icon\"></po-icon>\n\n    <span\n      *ngIf=\"type === 'subItems' && !collapsedMenu\"\n      class=\"po-icon po-menu-group-icon\"\n      [class.po-icon-arrow-up]=\"isOpened\"\n      [class.po-icon-arrow-down]=\"!isOpened\"\n    ></span>\n\n    <span [class.po-menu-icon-label]=\"level === 1 && icon\">\n      {{ label }}\n    </span>\n\n    <po-badge\n      *ngIf=\"canShowBadge\"\n      aria-hidden=\"true\"\n      [ngClass]=\"!collapsedMenu ? 'po-menu-badge-align' : 'po-menu-badge-align-collapsed'\"\n      [p-color]=\"badgeColor\"\n      [p-value]=\"badgeValue\"\n    ></po-badge>\n\n    <span\n      *ngIf=\"badgeAlert\"\n      aria-hidden=\"true\"\n      class=\"po-color-07\"\n      [ngClass]=\"!collapsedMenu ? 'po-menu-badge-alert' : 'po-menu-badge-alert-collapsed'\"\n    ></span>\n  </div>\n</ng-template>\n" }]
     }], function () { return [{ type: PoMenuItemsService }]; }, { action: [{
             type: Input,
             args: ['p-action']