@po-ui/ng-components 17.26.4 → 17.26.6

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

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { Directive, Input, Component, ChangeDetectionStrategy, NgModule, InjectionToken, TemplateRef, Optional, Inject, Injectable, EventEmitter, Output, ElementRef, HostListener, ViewChild, ViewChildren, ContentChildren, HostBinding, inject, forwardRef, ViewContainerRef, ContentChild, Pipe, Injector, APP_INITIALIZER } from '@angular/core';
+import { Directive, Input, Component, ChangeDetectionStrategy, NgModule, InjectionToken, TemplateRef, Optional, Inject, Injectable, EventEmitter, Output, ElementRef, HostListener, ViewChild, ChangeDetectorRef, inject, ViewChildren, ContentChildren, HostBinding, forwardRef, ViewContainerRef, ContentChild, Pipe, Injector, APP_INITIALIZER } from '@angular/core';
 import * as i1 from '@angular/common';
 import { CommonModule, DOCUMENT, DecimalPipe, NgOptimizedImage, CurrencyPipe, DatePipe, TitleCasePipe } from '@angular/common';
 import * as i2$3 from '@angular/animations';
@@ -435,7 +435,7 @@ function PoIconComponent_ng_template_1_Template(rf, ctx) { if (rf & 1) {
     const ctx_r1 = i0.ɵɵnextContext();
     i0.ɵɵclassMap(ctx_r1.class);
 } }
-const _c0$1K = ["*"];
+const _c0$1L = ["*"];
 /**
  * @docsPrivate
  *
@@ -524,7 +524,7 @@ class PoIconComponent {
         return iconName.includes(' ') ? iconName.split(' ') : iconName;
     }
     static ɵfac = function PoIconComponent_Factory(t) { return new (t || PoIconComponent)(i0.ɵɵdirectiveInject(ICONS_DICTIONARY, 8)); };
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PoIconComponent, selectors: [["po-icon"]], inputs: { icon: [i0.ɵɵInputFlags.None, "p-icon", "icon"] }, ngContentSelectors: _c0$1K, decls: 3, vars: 3, consts: [[4, "ngIf", "ngIfThen", "ngIfElse"], ["fontTemplate", ""], ["aria-hidden", "true"]], template: function PoIconComponent_Template(rf, ctx) { if (rf & 1) {
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PoIconComponent, selectors: [["po-icon"]], inputs: { icon: [i0.ɵɵInputFlags.None, "p-icon", "icon"] }, ngContentSelectors: _c0$1L, decls: 3, vars: 3, consts: [[4, "ngIf", "ngIfThen", "ngIfElse"], ["fontTemplate", ""], ["aria-hidden", "true"]], template: function PoIconComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵprojectionDef();
             i0.ɵɵtemplate(0, PoIconComponent_ng_container_0_Template, 1, 0, "ng-container", 0)(1, PoIconComponent_ng_template_1_Template, 2, 2, "ng-template", null, 1, i0.ɵɵtemplateRefExtractor);
         } if (rf & 2) {
@@ -2589,8 +2589,8 @@ class PoTooltipDirective extends PoTooltipBaseDirective {
             args: ['keydown', ['$event']]
         }] }); })();
 
-const _c0$1J = ["tagContainer"];
-const _c1$I = ["tagClose"];
+const _c0$1K = ["tagContainer"];
+const _c1$K = ["tagClose"];
 const _c2$l = ["poTag"];
 function PoTagComponent_div_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 12)(1, "span", 13);
@@ -2726,8 +2726,8 @@ class PoTagComponent extends PoTagBaseComponent {
     }
     static ɵfac = function PoTagComponent_Factory(t) { return new (t || PoTagComponent)(i0.ɵɵdirectiveInject(i0.ElementRef), i0.ɵɵdirectiveInject(PoLanguageService)); };
     static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PoTagComponent, selectors: [["po-tag"]], viewQuery: function PoTagComponent_Query(rf, ctx) { if (rf & 1) {
-            i0.ɵɵviewQuery(_c0$1J, 7);
-            i0.ɵɵviewQuery(_c1$I, 7);
+            i0.ɵɵviewQuery(_c0$1K, 7);
+            i0.ɵɵviewQuery(_c1$K, 7);
             i0.ɵɵviewQuery(_c2$l, 7);
         } if (rf & 2) {
             let _t;
@@ -2833,11 +2833,11 @@ function PoAccordionItemBodyComponent_div_0_Template(rf, ctx) { if (rf & 1) {
 } if (rf & 2) {
     i0.ɵɵproperty("@toggleBody", undefined);
 } }
-const _c0$1I = ["*"];
+const _c0$1J = ["*"];
 class PoAccordionItemBodyComponent {
     expanded = false;
     static ɵfac = function PoAccordionItemBodyComponent_Factory(t) { return new (t || PoAccordionItemBodyComponent)(); };
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PoAccordionItemBodyComponent, selectors: [["po-accordion-item-body"]], inputs: { expanded: [i0.ɵɵInputFlags.None, "p-expanded", "expanded"] }, ngContentSelectors: _c0$1I, decls: 1, vars: 1, consts: [["class", "po-accordion-item-body", 4, "ngIf"], [1, "po-accordion-item-body"], [1, "po-accordion-item-body-content"]], template: function PoAccordionItemBodyComponent_Template(rf, ctx) { if (rf & 1) {
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PoAccordionItemBodyComponent, selectors: [["po-accordion-item-body"]], inputs: { expanded: [i0.ɵɵInputFlags.None, "p-expanded", "expanded"] }, ngContentSelectors: _c0$1J, decls: 1, vars: 1, consts: [["class", "po-accordion-item-body", 4, "ngIf"], [1, "po-accordion-item-body"], [1, "po-accordion-item-body-content"]], template: function PoAccordionItemBodyComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵprojectionDef();
             i0.ɵɵtemplate(0, PoAccordionItemBodyComponent_div_0_Template, 3, 1, "div", 0);
         } if (rf & 2) {
@@ -2880,16 +2880,18 @@ class PoLanguageModule {
             }]
     }], null, null); })();
 
-const _c0$1H = ["accordionElement"];
-function PoAccordionItemHeaderComponent_po_tag_6_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "po-tag", 7);
+const _c0$1I = ["accordionElement"];
+const _c1$J = ["accordionHeaderElement"];
+function PoAccordionItemHeaderComponent_po_tag_7_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "po-tag", 8);
 } if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext();
-    i0.ɵɵproperty("p-value", ctx_r1.labelTag)("p-type", ctx_r1.typeTag);
+    const ctx_r2 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("p-value", ctx_r2.labelTag)("p-type", ctx_r2.typeTag);
 } }
 class PoAccordionItemHeaderComponent {
     language = poLocaleDefault;
     accordionElement;
+    accordionHeaderElement;
     expanded = false;
     label;
     labelTag;
@@ -2903,38 +2905,53 @@ class PoAccordionItemHeaderComponent {
         this.expanded = !this.expanded;
         this.toggle.emit(this.expanded);
     }
+    getTooltip() {
+        const widthContainer = this.accordionElement.nativeElement.offsetWidth - 56;
+        const widthHeaderElement = this.accordionHeaderElement.nativeElement.offsetWidth;
+        if (widthHeaderElement >= widthContainer) {
+            return this.label;
+        }
+        return null;
+    }
     static ɵfac = function PoAccordionItemHeaderComponent_Factory(t) { return new (t || PoAccordionItemHeaderComponent)(i0.ɵɵdirectiveInject(PoLanguageService)); };
     static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PoAccordionItemHeaderComponent, selectors: [["po-accordion-item-header"]], viewQuery: function PoAccordionItemHeaderComponent_Query(rf, ctx) { if (rf & 1) {
-            i0.ɵɵviewQuery(_c0$1H, 7, ElementRef);
+            i0.ɵɵviewQuery(_c0$1I, 7, ElementRef);
+            i0.ɵɵviewQuery(_c1$J, 7, ElementRef);
         } if (rf & 2) {
             let _t;
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.accordionElement = _t.first);
-        } }, inputs: { expanded: [i0.ɵɵInputFlags.None, "p-expanded", "expanded"], label: [i0.ɵɵInputFlags.None, "p-label", "label"], labelTag: [i0.ɵɵInputFlags.None, "p-label-tag", "labelTag"], typeTag: [i0.ɵɵInputFlags.None, "p-type-tag", "typeTag"], disabledItem: [i0.ɵɵInputFlags.None, "p-disabled", "disabledItem"] }, outputs: { toggle: "p-toggle" }, decls: 8, vars: 5, consts: [[1, "po-accordion-item-header"], [1, "po-accordion-item-header-button", "po-clickable", 3, "disabled", "click"], ["accordionElement", ""], [1, "po-accordion-item-header-button-content"], [1, "po-text-ellipsis", "po-accordion-item-header-title"], ["class", "po-accordion-item-header-tag", 3, "p-value", "p-type", 4, "ngIf"], ["p-icon", "ICON_ARROW_DOWN", 1, "po-icon", "po-accordion-item-header-icon"], [1, "po-accordion-item-header-tag", 3, "p-value", "p-type"]], template: function PoAccordionItemHeaderComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.accordionHeaderElement = _t.first);
+        } }, inputs: { expanded: [i0.ɵɵInputFlags.None, "p-expanded", "expanded"], label: [i0.ɵɵInputFlags.None, "p-label", "label"], labelTag: [i0.ɵɵInputFlags.None, "p-label-tag", "labelTag"], typeTag: [i0.ɵɵInputFlags.None, "p-type-tag", "typeTag"], disabledItem: [i0.ɵɵInputFlags.None, "p-disabled", "disabledItem"] }, outputs: { toggle: "p-toggle" }, decls: 9, vars: 6, consts: [[1, "po-accordion-item-header"], [1, "po-accordion-item-header-button", "po-clickable", 3, "disabled", "click"], ["accordionElement", ""], [1, "po-accordion-item-header-button-content", 3, "p-tooltip"], [1, "po-text-ellipsis", "po-accordion-item-header-title"], ["accordionHeaderElement", ""], ["class", "po-accordion-item-header-tag", 3, "p-value", "p-type", 4, "ngIf"], ["p-icon", "ICON_ARROW_DOWN", 1, "po-icon", "po-accordion-item-header-icon"], [1, "po-accordion-item-header-tag", 3, "p-value", "p-type"]], template: function PoAccordionItemHeaderComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "div", 0)(1, "button", 1, 2);
             i0.ɵɵlistener("click", function PoAccordionItemHeaderComponent_Template_button_click_1_listener() { return ctx.onClick(); });
-            i0.ɵɵelementStart(3, "div", 3)(4, "div", 4);
-            i0.ɵɵtext(5);
+            i0.ɵɵelementStart(3, "div", 3)(4, "div", 4, 5);
+            i0.ɵɵtext(6);
             i0.ɵɵelementEnd();
-            i0.ɵɵtemplate(6, PoAccordionItemHeaderComponent_po_tag_6_Template, 1, 2, "po-tag", 5);
+            i0.ɵɵtemplate(7, PoAccordionItemHeaderComponent_po_tag_7_Template, 1, 2, "po-tag", 6);
             i0.ɵɵelementEnd();
-            i0.ɵɵelement(7, "po-icon", 6);
+            i0.ɵɵelement(8, "po-icon", 7);
             i0.ɵɵelementEnd()();
         } if (rf & 2) {
             i0.ɵɵadvance();
             i0.ɵɵproperty("disabled", ctx.disabledItem);
             i0.ɵɵattribute("aria-label", ctx.label)("aria-expanded", ctx.expanded || false);
-            i0.ɵɵadvance(4);
+            i0.ɵɵadvance(2);
+            i0.ɵɵproperty("p-tooltip", ctx.getTooltip());
+            i0.ɵɵadvance(3);
             i0.ɵɵtextInterpolate(ctx.label);
             i0.ɵɵadvance();
             i0.ɵɵproperty("ngIf", ctx.labelTag);
-        } }, dependencies: [i1.NgIf, PoTagComponent, PoIconComponent], encapsulation: 2, changeDetection: 0 });
+        } }, dependencies: [i1.NgIf, PoTagComponent, PoIconComponent, PoTooltipDirective], encapsulation: 2, changeDetection: 0 });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PoAccordionItemHeaderComponent, [{
         type: Component,
-        args: [{ selector: 'po-accordion-item-header', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"po-accordion-item-header\">\n  <button\n    #accordionElement\n    [disabled]=\"disabledItem\"\n    [attr.aria-label]=\"label\"\n    [attr.aria-expanded]=\"expanded || false\"\n    class=\"po-accordion-item-header-button po-clickable\"\n    (click)=\"onClick()\"\n  >\n    <div class=\"po-accordion-item-header-button-content\">\n      <div class=\"po-text-ellipsis po-accordion-item-header-title\">{{ label }}</div>\n      <po-tag *ngIf=\"labelTag\" class=\"po-accordion-item-header-tag\" [p-value]=\"labelTag\" [p-type]=\"typeTag\"> </po-tag>\n    </div>\n    <po-icon p-icon=\"ICON_ARROW_DOWN\" class=\"po-icon po-accordion-item-header-icon\"></po-icon>\n  </button>\n</div>\n" }]
+        args: [{ selector: 'po-accordion-item-header', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"po-accordion-item-header\">\n  <button\n    #accordionElement\n    [disabled]=\"disabledItem\"\n    [attr.aria-label]=\"label\"\n    [attr.aria-expanded]=\"expanded || false\"\n    class=\"po-accordion-item-header-button po-clickable\"\n    (click)=\"onClick()\"\n  >\n    <div class=\"po-accordion-item-header-button-content\" [p-tooltip]=\"getTooltip()\">\n      <div #accordionHeaderElement class=\"po-text-ellipsis po-accordion-item-header-title\">{{ label }}</div>\n      <po-tag *ngIf=\"labelTag\" class=\"po-accordion-item-header-tag\" [p-value]=\"labelTag\" [p-type]=\"typeTag\"> </po-tag>\n    </div>\n    <po-icon p-icon=\"ICON_ARROW_DOWN\" class=\"po-icon po-accordion-item-header-icon\"></po-icon>\n  </button>\n</div>\n" }]
     }], () => [{ type: PoLanguageService }], { accordionElement: [{
             type: ViewChild,
             args: ['accordionElement', { read: ElementRef, static: true }]
+        }], accordionHeaderElement: [{
+            type: ViewChild,
+            args: ['accordionHeaderElement', { read: ElementRef, static: true }]
         }], expanded: [{
             type: Input,
             args: ['p-expanded']
@@ -2984,7 +3001,7 @@ class PoAccordionService {
 function PoAccordionItemComponent_ng_template_0_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵprojection(0);
 } }
-const _c0$1G = ["*"];
+const _c0$1H = ["*"];
 /**
  * @description
  *
@@ -3113,7 +3130,7 @@ class PoAccordionItemComponent {
         } if (rf & 2) {
             let _t;
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.templateRef = _t.first);
-        } }, inputs: { label: [i0.ɵɵInputFlags.None, "p-label", "label"], labelTag: [i0.ɵɵInputFlags.None, "p-label-tag", "labelTag"], disabledItem: [i0.ɵɵInputFlags.HasDecoratorInputTransform, "p-disabled", "disabledItem", convertToBoolean], typeTag: [i0.ɵɵInputFlags.None, "p-type-tag", "typeTag"] }, outputs: { expandEvent: "p-expand", collapseEvent: "p-collapse" }, features: [i0.ɵɵInputTransformsFeature], ngContentSelectors: _c0$1G, decls: 1, vars: 0, template: function PoAccordionItemComponent_Template(rf, ctx) { if (rf & 1) {
+        } }, inputs: { label: [i0.ɵɵInputFlags.None, "p-label", "label"], labelTag: [i0.ɵɵInputFlags.None, "p-label-tag", "labelTag"], disabledItem: [i0.ɵɵInputFlags.HasDecoratorInputTransform, "p-disabled", "disabledItem", convertToBoolean], typeTag: [i0.ɵɵInputFlags.None, "p-type-tag", "typeTag"] }, outputs: { expandEvent: "p-expand", collapseEvent: "p-collapse" }, features: [i0.ɵɵInputTransformsFeature], ngContentSelectors: _c0$1H, decls: 1, vars: 0, template: function PoAccordionItemComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵprojectionDef();
             i0.ɵɵtemplate(0, PoAccordionItemComponent_ng_template_0_Template, 1, 0, "ng-template");
         } }, encapsulation: 2 });
@@ -3145,35 +3162,69 @@ class PoAccordionItemComponent {
         }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PoAccordionItemComponent, { className: "PoAccordionItemComponent", filePath: "lib/components/po-accordion/po-accordion-item/po-accordion-item.component.ts", lineNumber: 43 }); })();
 
+const _c0$1G = ["accordionHeaderButtonManagerElement"];
+const _c1$I = ["accordionHeaderManagerElement"];
 class PoAccordionManagerComponent {
+    labelValue = '';
+    changeDetector = inject(ChangeDetectorRef);
+    accordionElement;
+    accordionHeaderElement;
     expandedAllItems = false;
     literals;
     clickManager = new EventEmitter();
+    ngOnChanges(changes) {
+        this.labelValue = changes.expandedAllItems.currentValue
+            ? this.literals.closeAllItems
+            : this.literals.expandAllItems;
+        this.changeDetector.detectChanges();
+    }
     onClick() {
         this.clickManager.emit();
     }
+    getTooltip() {
+        const widthContainer = this.accordionElement.nativeElement.offsetWidth - 69;
+        const widthHeaderElement = this.accordionHeaderElement.nativeElement.offsetWidth;
+        if (widthHeaderElement >= widthContainer) {
+            return this.labelValue;
+        }
+        return null;
+    }
     static ɵfac = function PoAccordionManagerComponent_Factory(t) { return new (t || PoAccordionManagerComponent)(); };
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PoAccordionManagerComponent, selectors: [["po-accordion-manager"]], inputs: { expandedAllItems: [i0.ɵɵInputFlags.None, "p-expanded-all-items", "expandedAllItems"], literals: [i0.ɵɵInputFlags.None, "p-literals", "literals"] }, outputs: { clickManager: "p-click" }, decls: 5, vars: 3, consts: [[1, "po-accordion-manager-header"], [1, "po-accordion-manager-button", "po-clickable", 3, "click"], [1, "po-text-ellipsis", "po-accordion-manager-button-content"], ["p-icon", "ICON_LAST_PAGE", 1, "po-icon", "po-accordion-manager-icon", 3, "ngClass"]], template: function PoAccordionManagerComponent_Template(rf, ctx) { if (rf & 1) {
-            i0.ɵɵelementStart(0, "div", 0)(1, "button", 1);
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PoAccordionManagerComponent, selectors: [["po-accordion-manager"]], viewQuery: function PoAccordionManagerComponent_Query(rf, ctx) { if (rf & 1) {
+            i0.ɵɵviewQuery(_c0$1G, 7, ElementRef);
+            i0.ɵɵviewQuery(_c1$I, 7, ElementRef);
+        } if (rf & 2) {
+            let _t;
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.accordionElement = _t.first);
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.accordionHeaderElement = _t.first);
+        } }, inputs: { expandedAllItems: [i0.ɵɵInputFlags.None, "p-expanded-all-items", "expandedAllItems"], literals: [i0.ɵɵInputFlags.None, "p-literals", "literals"] }, outputs: { clickManager: "p-click" }, features: [i0.ɵɵNgOnChangesFeature], decls: 7, vars: 4, consts: [[1, "po-accordion-manager-header"], [1, "po-accordion-manager-button", "po-clickable", 3, "p-tooltip", "click"], ["accordionHeaderButtonManagerElement", ""], [1, "po-text-ellipsis", "po-accordion-manager-button-content"], ["accordionHeaderManagerElement", ""], ["p-icon", "ICON_LAST_PAGE", 1, "po-icon", "po-accordion-manager-icon", 3, "ngClass"]], template: function PoAccordionManagerComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵelementStart(0, "div", 0)(1, "button", 1, 2);
             i0.ɵɵlistener("click", function PoAccordionManagerComponent_Template_button_click_1_listener() { return ctx.onClick(); });
-            i0.ɵɵelementStart(2, "div", 2);
-            i0.ɵɵtext(3);
+            i0.ɵɵelementStart(3, "div", 3, 4);
+            i0.ɵɵtext(5);
             i0.ɵɵelementEnd();
-            i0.ɵɵelement(4, "po-icon", 3);
+            i0.ɵɵelement(6, "po-icon", 5);
             i0.ɵɵelementEnd()();
         } if (rf & 2) {
             i0.ɵɵadvance();
+            i0.ɵɵproperty("p-tooltip", ctx.getTooltip());
             i0.ɵɵattribute("aria-expanded", ctx.expandedAllItems);
-            i0.ɵɵadvance(2);
+            i0.ɵɵadvance(4);
             i0.ɵɵtextInterpolate1(" ", ctx.expandedAllItems ? ctx.literals.closeAllItems : ctx.literals.expandAllItems, " ");
             i0.ɵɵadvance();
             i0.ɵɵproperty("ngClass", ctx.expandedAllItems ? "icon-down" : "icon-up");
-        } }, dependencies: [i1.NgClass, PoIconComponent], encapsulation: 2 });
+        } }, dependencies: [i1.NgClass, PoIconComponent, PoTooltipDirective], encapsulation: 2 });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PoAccordionManagerComponent, [{
         type: Component,
-        args: [{ selector: 'po-accordion-manager', template: "<div class=\"po-accordion-manager-header\">\n  <button class=\"po-accordion-manager-button po-clickable\" (click)=\"onClick()\" [attr.aria-expanded]=\"expandedAllItems\">\n    <div class=\"po-text-ellipsis po-accordion-manager-button-content\">\n      {{ expandedAllItems ? literals.closeAllItems : literals.expandAllItems }}\n    </div>\n    <po-icon\n      p-icon=\"ICON_LAST_PAGE\"\n      [ngClass]=\"expandedAllItems ? 'icon-down' : 'icon-up'\"\n      class=\"po-icon po-accordion-manager-icon\"\n    >\n    </po-icon>\n  </button>\n</div>\n" }]
-    }], null, { expandedAllItems: [{
+        args: [{ selector: 'po-accordion-manager', template: "<div class=\"po-accordion-manager-header\">\n  <button\n    #accordionHeaderButtonManagerElement\n    class=\"po-accordion-manager-button po-clickable\"\n    (click)=\"onClick()\"\n    [attr.aria-expanded]=\"expandedAllItems\"\n    [p-tooltip]=\"getTooltip()\"\n  >\n    <div #accordionHeaderManagerElement class=\"po-text-ellipsis po-accordion-manager-button-content\">\n      {{ expandedAllItems ? literals.closeAllItems : literals.expandAllItems }}\n    </div>\n    <po-icon\n      p-icon=\"ICON_LAST_PAGE\"\n      [ngClass]=\"expandedAllItems ? 'icon-down' : 'icon-up'\"\n      class=\"po-icon po-accordion-manager-icon\"\n    >\n    </po-icon>\n  </button>\n</div>\n" }]
+    }], null, { accordionElement: [{
+            type: ViewChild,
+            args: ['accordionHeaderButtonManagerElement', { read: ElementRef, static: true }]
+        }], accordionHeaderElement: [{
+            type: ViewChild,
+            args: ['accordionHeaderManagerElement', { read: ElementRef, static: true }]
+        }], expandedAllItems: [{
             type: Input,
             args: ['p-expanded-all-items']
         }], literals: [{
@@ -3183,7 +3234,7 @@ class PoAccordionManagerComponent {
             type: Output,
             args: ['p-click']
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PoAccordionManagerComponent, { className: "PoAccordionManagerComponent", filePath: "lib/components/po-accordion/po-accordion-manager/po-accordion-manager.component.ts", lineNumber: 8 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PoAccordionManagerComponent, { className: "PoAccordionManagerComponent", filePath: "lib/components/po-accordion/po-accordion-manager/po-accordion-manager.component.ts", lineNumber: 19 }); })();
 
 const poAccordionLiteralsDefault = {
     en: {
@@ -3598,12 +3649,12 @@ class PoAccordionComponent extends PoAccordionBaseComponent {
 class PoAccordionModule {
     static ɵfac = function PoAccordionModule_Factory(t) { return new (t || PoAccordionModule)(); };
     static ɵmod = /*@__PURE__*/ i0.ɵɵdefineNgModule({ type: PoAccordionModule });
-    static ɵinj = /*@__PURE__*/ i0.ɵɵdefineInjector({ imports: [CommonModule, PoTagModule, PoIconModule, PoDividerModule] });
+    static ɵinj = /*@__PURE__*/ i0.ɵɵdefineInjector({ imports: [CommonModule, PoTagModule, PoIconModule, PoDividerModule, PoTooltipModule] });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PoAccordionModule, [{
         type: NgModule,
         args: [{
-                imports: [CommonModule, PoTagModule, PoIconModule, PoDividerModule],
+                imports: [CommonModule, PoTagModule, PoIconModule, PoDividerModule, PoTooltipModule],
                 declarations: [
                     PoAccordionComponent,
                     PoAccordionItemBodyComponent,
@@ -3618,7 +3669,7 @@ class PoAccordionModule {
         PoAccordionItemBodyComponent,
         PoAccordionItemComponent,
         PoAccordionItemHeaderComponent,
-        PoAccordionManagerComponent], imports: [CommonModule, PoTagModule, PoIconModule, PoDividerModule], exports: [PoAccordionComponent, PoAccordionItemComponent] }); })();
+        PoAccordionManagerComponent], imports: [CommonModule, PoTagModule, PoIconModule, PoDividerModule, PoTooltipModule], exports: [PoAccordionComponent, PoAccordionItemComponent] }); })();
 
 const PO_AVATAR_SIZES = ['xs', 'sm', 'md', 'lg', 'xl'];
 const PO_AVATAR_SIZE_DEFAULT = 'md';
@@ -32067,7 +32118,7 @@ class PoDynamicFormBaseComponent {
      * o `po-textarea`, caso o valor da propriedade `rows` seja menor que 3 o componente criado será o `po-input`.
      * - Caso seja informada a propriedade `secret` o componente criado será o `po-password`.
      * - Caso o *type* informado seja *string* o componente criado será o `po-input`.
-     *
+     * > Ao alterar o valor das `properties` e/ou agrupamentos via container, os `fields` que utilizam serviço podem refazer as chamadas para as API's.
      * @default `[]`
      */
     fields;
@@ -42983,7 +43034,12 @@ class PoDynamicFormFieldsComponent extends PoDynamicFormFieldsBaseComponent {
     ngOnChanges(changes) {
         if (changes.fields) {
             this.visibleFields = this.getVisibleFields();
-            this.setContainerFields();
+            if (changes.fields.previousValue && this.hasContainer()) {
+                this.hasChangeContainer(changes.fields.previousValue, changes.fields.currentValue);
+            }
+            if (!changes.fields.previousValue || !changes.fields.currentValue) {
+                this.setContainerFields();
+            }
         }
     }
     focus(property) {
@@ -43074,6 +43130,112 @@ class PoDynamicFormFieldsComponent extends PoDynamicFormFieldsBaseComponent {
             visibleField.disabled = previousDisabled;
         }
     }
+    hasChangeContainer(previous, current) {
+        const prevArray = previous.map((item, index) => ({
+            container: item.container || null,
+            property: item.property,
+            index,
+            order: item.order
+        }));
+        const currArray = current.map((item, index) => ({
+            container: item.container || null,
+            property: item.property,
+            index,
+            order: item.order
+        }));
+        const prevContainers = prevArray.filter(item => item.container);
+        const currContainers = currArray.filter(item => item.container);
+        const prevOrder = prevArray.filter(item => item.order);
+        const currOrder = currArray.filter(item => item.order);
+        // Verifica mudança na quantidade de containers
+        if (prevContainers.length !== currContainers.length) {
+            this.setContainerFields();
+            return;
+        }
+        // Verifica mudança na quantidade de order
+        if (prevOrder.length !== currOrder.length) {
+            this.setContainerFields();
+            return;
+        }
+        if (currContainers.length) {
+            this.handleChangesContainer(prevContainers, currContainers, 'container');
+        }
+        if (currOrder.length) {
+            this.handleChangesContainer(prevOrder, currOrder, 'order');
+        }
+        //atualiza container sem mudança na estrutura da interface
+        const result = this.diffObjectsArray(previous, this.getVisibleFields());
+        this.containerFields = this.updateFieldContainer(result, this.containerFields);
+    }
+    updateFieldContainer(changes, containerFields) {
+        const mapchanges = new Map(changes.map(obj => [obj.property, obj]));
+        containerFields.forEach(subArray => {
+            subArray.forEach((subItem, index) => {
+                const item = mapchanges.get(subItem.property);
+                if (item) {
+                    subArray[index] = { ...subItem, ...item };
+                }
+            });
+        });
+        return containerFields;
+    }
+    diffObjectsArray(oldArray, newArray) {
+        const differences = [];
+        newArray.forEach(newObj => {
+            const oldObj = oldArray.find(o => o.property === newObj.property);
+            if (!oldObj) {
+                // Se o objeto é novo, adiciona todo o objeto com a propriedade "property"
+                differences.push({ ...newObj });
+            }
+            else {
+                // Verificar se há diferenças nas propriedades
+                const diff = { property: newObj.property };
+                let hasDifferences = false;
+                for (const key in newObj) {
+                    if (newObj[key] !== oldObj[key]) {
+                        diff[key] = newObj[key];
+                        hasDifferences = true;
+                    }
+                }
+                if (hasDifferences) {
+                    differences.push(diff);
+                }
+            }
+        });
+        //retorna mudanças nos fields para atualização do containerFields
+        return differences;
+    }
+    hasContainer() {
+        return this.visibleFields && this.visibleFields.some(field => field.container);
+    }
+    handleChangesContainer(prevContainers, currContainers, key) {
+        for (let i = 0; i < prevContainers.length; i++) {
+            const prev = prevContainers[i];
+            const curr = currContainers[i];
+            //Verifica se container mudou de posição
+            if (prev[key] === curr[key] && prev.index !== curr.index) {
+                this.setContainerFields();
+                return;
+            }
+            //Verifica se foi apenas mudança da string em caso do container ou valor no order
+            if (prev[key] !== curr[key] && prev.index === curr.index) {
+                if (key === 'order') {
+                    this.setContainerFields();
+                    return;
+                }
+                this.containerFields.forEach(subItem => subItem.forEach(item => {
+                    if (item.property === curr.property) {
+                        item[key] = curr[key];
+                    }
+                }));
+            }
+            //verifica se manteve o mesmo número de container, mas alterou property do container
+            if (prev[key] !== curr[key] && prev.property !== curr.property) {
+                this.setContainerFields();
+                return;
+            }
+        }
+    }
     static ɵfac = function PoDynamicFormFieldsComponent_Factory(t) { return new (t || PoDynamicFormFieldsComponent)(i0.ɵɵdirectiveInject(i1.TitleCasePipe), i0.ɵɵdirectiveInject(PoDynamicFormValidationService), i0.ɵɵdirectiveInject(i0.ChangeDetectorRef), i0.ɵɵdirectiveInject(i2$1.NgForm)); };
     static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PoDynamicFormFieldsComponent, selectors: [["po-dynamic-form-fields"]], viewQuery: function PoDynamicFormFieldsComponent_Query(rf, ctx) { if (rf & 1) {
             i0.ɵɵviewQuery(_c0$y, 5);
@@ -49920,7 +50082,7 @@ class PoPageDefaultBaseComponent {
      */
     set actions(actions) {
         this._actions = Array.isArray(actions) ? actions : [];
-        this.visibleActions = this.actions.filter(action => action.visible !== false);
+        this.visibleActions = this.getVisibleActions();
         this.setDropdownActions();
     }
     get actions() {
@@ -50266,6 +50428,9 @@ class PoPageDefaultComponent extends PoPageDefaultBaseComponent {
     actionIsDisabled(action) {
         return isTypeof(action.disabled, 'function') ? action.disabled(action) : action.disabled;
     }
+    actionIsVisible(action) {
+        return isTypeof(action.visible, 'function') ? action.visible(action) : action.visible;
+    }
     callAction(item) {
         if (item.url) {
             isExternalLink(item.url) ? openExternalLink(item.url) : this.router.navigate([item.url]);
@@ -50275,6 +50440,8 @@ class PoPageDefaultComponent extends PoPageDefaultBaseComponent {
         }
     }
     hasPageHeader() {
+        this.visibleActions = this.getVisibleActions();
+        this.setDropdownActions();
         return !!(this.title ||
             (this.visibleActions && this.visibleActions.length) ||
             (this.breadcrumb && this.breadcrumb.items.length));
@@ -50284,6 +50451,9 @@ class PoPageDefaultComponent extends PoPageDefaultBaseComponent {
             this.dropdownActions = this.visibleActions.slice(this.limitPrimaryActions - 1);
         }
     }
+    getVisibleActions() {
+        return this.actions.filter(action => this.actionIsVisible(action) !== false);
+    }
     onResize(event) {
         const width = event.target.innerWidth;
         if (width < this.maxWidthMobile) {