@po-ui/ng-components 19.16.0 → 19.17.0

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

@@ -1596,6 +1596,8 @@ class PoTagBaseComponent {
     disabled = false;
     /** Texto da tag. */
     value;
+    //input interno para o multiselect
+    appendInBody;
     /**
      * @optional
      *
@@ -1829,7 +1831,7 @@ class PoTagBaseComponent {
         this.language = languageService.getShortLanguage();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: PoTagBaseComponent, deps: [{ token: PoLanguageService }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "19.0.7", type: PoTagBaseComponent, isStandalone: true, inputs: { label: ["p-label", "label"], removable: ["p-removable", "removable", convertToBoolean], disabled: ["p-disabled", "disabled", convertToBoolean], value: ["p-value", "value"], color: ["p-color", "color"], textColor: ["p-text-color", "textColor"], icon: ["p-icon", "icon"], orientation: ["p-orientation", "orientation"], type: ["p-type", "type"], literals: ["p-literals", "literals"] }, outputs: { click: "p-click", remove: "p-close" }, ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "19.0.7", type: PoTagBaseComponent, isStandalone: true, inputs: { label: ["p-label", "label"], removable: ["p-removable", "removable", convertToBoolean], disabled: ["p-disabled", "disabled", convertToBoolean], value: ["p-value", "value"], appendInBody: ["p-append-in-body", "appendInBody"], color: ["p-color", "color"], textColor: ["p-text-color", "textColor"], icon: ["p-icon", "icon"], orientation: ["p-orientation", "orientation"], type: ["p-type", "type"], literals: ["p-literals", "literals"] }, outputs: { click: "p-click", remove: "p-close" }, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: PoTagBaseComponent, decorators: [{
             type: Directive
@@ -1845,6 +1847,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImpor
             }], value: [{
                 type: Input,
                 args: ['p-value']
+            }], appendInBody: [{
+                type: Input,
+                args: ['p-append-in-body']
             }], click: [{
                 type: Output,
                 args: ['p-click']
@@ -2741,11 +2746,11 @@ class PoTagComponent extends PoTagBaseComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: PoTagComponent, deps: [{ token: i0.ElementRef }, { token: PoLanguageService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.7", type: PoTagComponent, isStandalone: false, selector: "po-tag", viewQueries: [{ propertyName: "tagContainer", first: true, predicate: ["tagContainer"], descendants: true, static: true }, { propertyName: "tagClose", first: true, predicate: ["tagClose"], descendants: true, static: true }, { propertyName: "poTag", first: true, predicate: ["poTag"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"po-tag-container\" [class.po-tag-container-horizontal]=\"tagOrientation\">\n  <div *ngIf=\"label\" class=\"po-tag-title po-text-nowrap\">\n    <span class=\"po-tag-label\">{{ tagOrientation ? label + ':' : label }}</span>\n  </div>\n\n  <div class=\"po-tag-sub-container\">\n    <div\n      #poTagWrapper\n      class=\"po-tag-wrapper\"\n      [class.po-clickable]=\"isClickable && !disabled && !removable\"\n      [attr.role]=\"isClickable && !disabled && !removable ? 'button' : ''\"\n      (keydown.enter)=\"onKeyPressed($event)\"\n      (keydown.space)=\"$event.preventDefault()\"\n      (keyup.space)=\"onKeyPressed($event)\"\n      (click)=\"onClick()\"\n      [tabindex]=\"isClickable && !removable ? 0 : -1\"\n    >\n      <div\n        #poTag\n        class=\"po-tag\"\n        [class.po-clickable]=\"isClickable && !disabled && !removable\"\n        [class.po-tag-removable]=\"removable\"\n        [class.po-tag-disabled]=\"disabled && removable\"\n        [ngClass]=\"tagColor\"\n        [ngStyle]=\"styleTag()\"\n      >\n        <po-icon\n          *ngIf=\"icon && !removable\"\n          class=\"po-tag-icon\"\n          [p-icon]=\"!type ? icon : iconFromType\"\n          [ngStyle]=\"!type && customTextColor ? { 'color': customTextColor } : ''\"\n        >\n        </po-icon>\n\n        <div #tagContainer class=\"po-tag-value\" [p-tooltip]=\"getWidthTag() ? value : ''\" p-tooltip-position=\"top\">\n          <span [ngStyle]=\"!type && customTextColor && !removable ? { 'color': customTextColor } : ''\">{{\n            value\n          }}</span>\n        </div>\n\n        <po-icon\n          #tagClose\n          *ngIf=\"removable\"\n          p-icon=\"ICON_CLOSE\"\n          p-tooltip-position=\"top\"\n          [p-tooltip]=\"literals.remove\"\n          [attr.aria-label]=\"setAriaLabel()\"\n          class=\"po-tag-remove\"\n          [class.po-clickable]=\"!disabled\"\n          [tabindex]=\"!disabled ? 0 : -1\"\n          [attr.role]=\"!disabled ? 'button' : ''\"\n          (click)=\"onClose()\"\n          (keydown.enter)=\"onClose('enter')\"\n        >\n        </po-icon>\n      </div>\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: PoIconComponent, selector: "po-icon", inputs: ["p-icon"] }, { kind: "directive", type: PoTooltipDirective, selector: "[p-tooltip]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.7", type: PoTagComponent, isStandalone: false, selector: "po-tag", viewQueries: [{ propertyName: "tagContainer", first: true, predicate: ["tagContainer"], descendants: true, static: true }, { propertyName: "tagClose", first: true, predicate: ["tagClose"], descendants: true, static: true }, { propertyName: "poTag", first: true, predicate: ["poTag"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"po-tag-container\" [class.po-tag-container-horizontal]=\"tagOrientation\">\n  <div *ngIf=\"label\" class=\"po-tag-title po-text-nowrap\">\n    <span class=\"po-tag-label\">{{ tagOrientation ? label + ':' : label }}</span>\n  </div>\n\n  <div class=\"po-tag-sub-container\">\n    <div\n      #poTagWrapper\n      class=\"po-tag-wrapper\"\n      [class.po-clickable]=\"isClickable && !disabled && !removable\"\n      [attr.role]=\"isClickable && !disabled && !removable ? 'button' : ''\"\n      (keydown.enter)=\"onKeyPressed($event)\"\n      (keydown.space)=\"$event.preventDefault()\"\n      (keyup.space)=\"onKeyPressed($event)\"\n      (click)=\"onClick()\"\n      [tabindex]=\"isClickable && !removable ? 0 : -1\"\n    >\n      <div\n        #poTag\n        class=\"po-tag\"\n        [class.po-clickable]=\"isClickable && !disabled && !removable\"\n        [class.po-tag-removable]=\"removable\"\n        [class.po-tag-disabled]=\"disabled && removable\"\n        [ngClass]=\"tagColor\"\n        [ngStyle]=\"styleTag()\"\n      >\n        <po-icon\n          *ngIf=\"icon && !removable\"\n          class=\"po-tag-icon\"\n          [p-icon]=\"!type ? icon : iconFromType\"\n          [ngStyle]=\"!type && customTextColor ? { 'color': customTextColor } : ''\"\n        >\n        </po-icon>\n\n        <div\n          #tagContainer\n          class=\"po-tag-value\"\n          [p-append-in-body]=\"appendInBody\"\n          [p-tooltip]=\"getWidthTag() ? value : ''\"\n          p-tooltip-position=\"top\"\n        >\n          <span [ngStyle]=\"!type && customTextColor && !removable ? { 'color': customTextColor } : ''\">{{\n            value\n          }}</span>\n        </div>\n\n        <po-icon\n          #tagClose\n          *ngIf=\"removable\"\n          p-icon=\"ICON_CLOSE\"\n          p-tooltip-position=\"top\"\n          [p-tooltip]=\"literals.remove\"\n          [p-append-in-body]=\"appendInBody\"\n          [attr.aria-label]=\"setAriaLabel()\"\n          class=\"po-tag-remove\"\n          [class.po-clickable]=\"!disabled\"\n          [tabindex]=\"!disabled ? 0 : -1\"\n          [attr.role]=\"!disabled ? 'button' : ''\"\n          (click)=\"onClose()\"\n          (keydown.enter)=\"onClose('enter')\"\n        >\n        </po-icon>\n      </div>\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: PoIconComponent, selector: "po-icon", inputs: ["p-icon"] }, { kind: "directive", type: PoTooltipDirective, selector: "[p-tooltip]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: PoTagComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'po-tag', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<div class=\"po-tag-container\" [class.po-tag-container-horizontal]=\"tagOrientation\">\n  <div *ngIf=\"label\" class=\"po-tag-title po-text-nowrap\">\n    <span class=\"po-tag-label\">{{ tagOrientation ? label + ':' : label }}</span>\n  </div>\n\n  <div class=\"po-tag-sub-container\">\n    <div\n      #poTagWrapper\n      class=\"po-tag-wrapper\"\n      [class.po-clickable]=\"isClickable && !disabled && !removable\"\n      [attr.role]=\"isClickable && !disabled && !removable ? 'button' : ''\"\n      (keydown.enter)=\"onKeyPressed($event)\"\n      (keydown.space)=\"$event.preventDefault()\"\n      (keyup.space)=\"onKeyPressed($event)\"\n      (click)=\"onClick()\"\n      [tabindex]=\"isClickable && !removable ? 0 : -1\"\n    >\n      <div\n        #poTag\n        class=\"po-tag\"\n        [class.po-clickable]=\"isClickable && !disabled && !removable\"\n        [class.po-tag-removable]=\"removable\"\n        [class.po-tag-disabled]=\"disabled && removable\"\n        [ngClass]=\"tagColor\"\n        [ngStyle]=\"styleTag()\"\n      >\n        <po-icon\n          *ngIf=\"icon && !removable\"\n          class=\"po-tag-icon\"\n          [p-icon]=\"!type ? icon : iconFromType\"\n          [ngStyle]=\"!type && customTextColor ? { 'color': customTextColor } : ''\"\n        >\n        </po-icon>\n\n        <div #tagContainer class=\"po-tag-value\" [p-tooltip]=\"getWidthTag() ? value : ''\" p-tooltip-position=\"top\">\n          <span [ngStyle]=\"!type && customTextColor && !removable ? { 'color': customTextColor } : ''\">{{\n            value\n          }}</span>\n        </div>\n\n        <po-icon\n          #tagClose\n          *ngIf=\"removable\"\n          p-icon=\"ICON_CLOSE\"\n          p-tooltip-position=\"top\"\n          [p-tooltip]=\"literals.remove\"\n          [attr.aria-label]=\"setAriaLabel()\"\n          class=\"po-tag-remove\"\n          [class.po-clickable]=\"!disabled\"\n          [tabindex]=\"!disabled ? 0 : -1\"\n          [attr.role]=\"!disabled ? 'button' : ''\"\n          (click)=\"onClose()\"\n          (keydown.enter)=\"onClose('enter')\"\n        >\n        </po-icon>\n      </div>\n    </div>\n  </div>\n</div>\n" }]
+            args: [{ selector: 'po-tag', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<div class=\"po-tag-container\" [class.po-tag-container-horizontal]=\"tagOrientation\">\n  <div *ngIf=\"label\" class=\"po-tag-title po-text-nowrap\">\n    <span class=\"po-tag-label\">{{ tagOrientation ? label + ':' : label }}</span>\n  </div>\n\n  <div class=\"po-tag-sub-container\">\n    <div\n      #poTagWrapper\n      class=\"po-tag-wrapper\"\n      [class.po-clickable]=\"isClickable && !disabled && !removable\"\n      [attr.role]=\"isClickable && !disabled && !removable ? 'button' : ''\"\n      (keydown.enter)=\"onKeyPressed($event)\"\n      (keydown.space)=\"$event.preventDefault()\"\n      (keyup.space)=\"onKeyPressed($event)\"\n      (click)=\"onClick()\"\n      [tabindex]=\"isClickable && !removable ? 0 : -1\"\n    >\n      <div\n        #poTag\n        class=\"po-tag\"\n        [class.po-clickable]=\"isClickable && !disabled && !removable\"\n        [class.po-tag-removable]=\"removable\"\n        [class.po-tag-disabled]=\"disabled && removable\"\n        [ngClass]=\"tagColor\"\n        [ngStyle]=\"styleTag()\"\n      >\n        <po-icon\n          *ngIf=\"icon && !removable\"\n          class=\"po-tag-icon\"\n          [p-icon]=\"!type ? icon : iconFromType\"\n          [ngStyle]=\"!type && customTextColor ? { 'color': customTextColor } : ''\"\n        >\n        </po-icon>\n\n        <div\n          #tagContainer\n          class=\"po-tag-value\"\n          [p-append-in-body]=\"appendInBody\"\n          [p-tooltip]=\"getWidthTag() ? value : ''\"\n          p-tooltip-position=\"top\"\n        >\n          <span [ngStyle]=\"!type && customTextColor && !removable ? { 'color': customTextColor } : ''\">{{\n            value\n          }}</span>\n        </div>\n\n        <po-icon\n          #tagClose\n          *ngIf=\"removable\"\n          p-icon=\"ICON_CLOSE\"\n          p-tooltip-position=\"top\"\n          [p-tooltip]=\"literals.remove\"\n          [p-append-in-body]=\"appendInBody\"\n          [attr.aria-label]=\"setAriaLabel()\"\n          class=\"po-tag-remove\"\n          [class.po-clickable]=\"!disabled\"\n          [tabindex]=\"!disabled ? 0 : -1\"\n          [attr.role]=\"!disabled ? 'button' : ''\"\n          (click)=\"onClose()\"\n          (keydown.enter)=\"onClose('enter')\"\n        >\n        </po-icon>\n      </div>\n    </div>\n  </div>\n</div>\n" }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: PoLanguageService }], propDecorators: { tagContainer: [{
                 type: ViewChild,
                 args: ['tagContainer', { static: true }]
@@ -10672,6 +10677,7 @@ class PoListBoxComponent extends PoListBoxBaseComponent {
     listbox;
     listboxItemList;
     searchElement;
+    popupHeaderContainer;
     scrollEvent$;
     subscriptionScrollEvent;
     constructor(element, renderer, languageService, poThemeService, router, changeDetector) {
@@ -10696,7 +10702,7 @@ class PoListBoxComponent extends PoListBoxBaseComponent {
         }
     }
     ngOnDestroy() {
-        if (this.subscriptionScrollEvent && this.subscriptionScrollEvent.unsubscribe) {
+        if (this.subscriptionScrollEvent?.unsubscribe) {
             this.subscriptionScrollEvent.unsubscribe();
         }
     }
@@ -10837,10 +10843,15 @@ class PoListBoxComponent extends PoListBoxBaseComponent {
     }
     setListBoxMaxHeight() {
         const itemsLength = this.items.length;
+        const hasPopupHeaderContainer = this.popupHeaderContainer?.nativeElement?.children?.length > 0;
         if (itemsLength > 6) {
             if (this.type === 'check' && !this.hideSearch) {
                 this.renderer.setStyle(this.listbox.nativeElement, 'maxHeight', `${44 * 6 - 44 / 3 + 60}px`);
             }
+            else if (hasPopupHeaderContainer) {
+                this.renderer.setStyle(this.listbox.nativeElement.querySelector('ul[role=listbox]'), 'maxHeight', `${44 * 6 - 44 / 3}px`);
+                this.renderer.removeStyle(this.listbox.nativeElement, 'maxHeight');
+            }
             else {
                 this.renderer.setStyle(this.listbox.nativeElement, 'maxHeight', `${44 * 6 - 44 / 3}px`);
             }
@@ -10873,11 +10884,11 @@ class PoListBoxComponent extends PoListBoxBaseComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: PoListBoxComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: PoLanguageService }, { token: PoThemeService }, { token: i3.Router }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.7", type: PoListBoxComponent, isStandalone: false, selector: "po-listbox", viewQueries: [{ propertyName: "listbox", first: true, predicate: ["listbox"], descendants: true, static: true }, { propertyName: "listboxItemList", first: true, predicate: ["listboxItemList"], descendants: true }, { propertyName: "searchElement", first: true, predicate: ["searchElement"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div\n  #listbox\n  class=\"po-listbox\"\n  [class.po-listbox-check]=\"type === 'check' || type === 'option'\"\n  [attr.data-type]=\"type\"\n  [hidden]=\"visible\"\n>\n  <ng-content select=\"[p-popup-header-template]\"></ng-content>\n\n  <po-search-list\n    #searchElement\n    *ngIf=\"!hideSearch && type === 'check'\"\n    (p-change)=\"callChangeSearch($event)\"\n    [p-literals]=\"literalSearch\"\n    [p-field-value]=\"fieldValueSearch\"\n    [p-placeholder]=\"placeholderSearch\"\n    [p-size]=\"size\"\n  ></po-search-list>\n\n  <ng-container *ngIf=\"checkTemplate(); else noDataTemplate\">\n    <ul #listboxItemList cdkListbox [cdkListboxMultiple]=\"type === 'check'\" class=\"po-listbox-list\">\n      <li\n        cdkOption=\"selectAll\"\n        *ngIf=\"type === 'check' && items.length && !searchElement?.inputValue && !hideSelectAll\"\n        [attr.aria-checked]=\"checkboxAllValue === null ? 'mixed' : checkboxAllValue\"\n        (click)=\"changeAll.emit()\"\n        (keydown)=\"changeAllEmit($event)\"\n        (keydown)=\"onSelectAllCheckboxKeyDown($event)\"\n      >\n        <po-item-list\n          [p-selected]=\"checkboxAllValue\"\n          p-type=\"check\"\n          [p-label]=\"literals.selectAll\"\n          p-value=\"selectAll\"\n          [p-checkbox-value]=\"checkboxAllValue\"\n          [p-size]=\"size\"\n        >\n        </po-item-list>\n      </li>\n      <li\n        [class.po-listbox-item]=\"visible\"\n        *ngFor=\"let item of items\"\n        [cdkOption]=\"item[fieldLabel]\"\n        [cdkOptionDisabled]=\"\n          returnBooleanValue(item, 'disabled') || returnBooleanValue(item, 'visible') === false || item.options\n        \"\n        [attr.aria-selected]=\"isSelectedItem(item) || item.selected\"\n        (click)=\"onSelectItem(item)\"\n        (keydown)=\"onKeyDown(item, $event)\"\n      >\n        <label *ngIf=\"item.options\" class=\"po-combo-item-title\">\n          {{ item.label }}\n        </label>\n        <po-item-list\n          *ngIf=\"returnBooleanValue(item, 'visible') !== false && !item.options\"\n          [p-disabled]=\"returnBooleanValue(item, 'disabled')\"\n          [p-visible]=\"returnBooleanValue(item, 'visible')\"\n          [p-checkbox-value]=\"isSelectedItem(item)\"\n          [attr.data-item-list]=\"formatItemList(item)\"\n          [p-label]=\"item[fieldLabel]\"\n          [p-value]=\"item[fieldValue]\"\n          [p-selected]=\"isSelectedItem(item) || item.selected\"\n          [p-active-tabs]=\"item.active\"\n          [p-separator]=\"item.separator\"\n          [p-danger]=\"item.danger || item.type === 'danger'\"\n          [p-icon]=\"item.icon\"\n          [p-type]=\"type\"\n          [p-item]=\"item\"\n          [p-tab-hide]=\"item.hide\"\n          [p-is-tabs]=\"isTabs\"\n          [p-field-value]=\"fieldValue\"\n          [p-field-label]=\"fieldLabel\"\n          [p-template]=\"template\"\n          [p-template-context]=\"item\"\n          (p-selectcheckbox-item)=\"checkboxClicked($event)\"\n          (p-selectcombo-item)=\"optionClicked(item)\"\n          (p-emit-item-tabs)=\"onSelectTabs($event)\"\n          (p-activated-tabs)=\"onActivatedTabs($event)\"\n          [p-search-value]=\"searchValue\"\n          [p-filter-mode]=\"filterMode\"\n          [p-filtering]=\"isFiltering\"\n          [p-size]=\"size\"\n          [p-should-mark-letter]=\"shouldMarkLetters\"\n          [p-compare-cache]=\"compareCache\"\n          [p-combo-service]=\"comboService\"\n        ></po-item-list>\n      </li>\n    </ul>\n  </ng-container>\n\n  <div *ngIf=\"isServerSearching && type !== 'action'\" [class.po-listbox-container-loading-default]=\"!infiniteLoading\">\n    <po-loading-overlay [p-size]=\"getSizeLoading()\" [p-text]=\"getTextLoading()\"></po-loading-overlay>\n  </div>\n\n  <ng-template #noDataTemplate>\n    <div\n      *ngIf=\"!items.length && !isServerSearching && type !== 'action'\"\n      class=\"po-listbox-container-no-data po-text-center\"\n    >\n      <span> {{ literals.noItems }}</span>\n    </div>\n  </ng-template>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: PoLoadingOverlayComponent, selector: "po-loading-overlay" }, { kind: "directive", type: i6.CdkListbox, selector: "[cdkListbox]", inputs: ["id", "tabindex", "cdkListboxValue", "cdkListboxMultiple", "cdkListboxDisabled", "cdkListboxUseActiveDescendant", "cdkListboxOrientation", "cdkListboxCompareWith", "cdkListboxNavigationWrapDisabled", "cdkListboxNavigatesDisabledOptions"], outputs: ["cdkListboxValueChange"], exportAs: ["cdkListbox"] }, { kind: "directive", type: i6.CdkOption, selector: "[cdkOption]", inputs: ["id", "cdkOption", "cdkOptionTypeaheadLabel", "cdkOptionDisabled", "tabindex"], exportAs: ["cdkOption"] }, { kind: "component", type: PoItemListComponent, selector: "po-item-list" }, { kind: "component", type: PoSearchListComponent, selector: "po-search-list", inputs: ["p-literals", "p-field-value", "p-size", "p-placeholder"], outputs: ["p-change"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.7", type: PoListBoxComponent, isStandalone: false, selector: "po-listbox", viewQueries: [{ propertyName: "listbox", first: true, predicate: ["listbox"], descendants: true, static: true }, { propertyName: "listboxItemList", first: true, predicate: ["listboxItemList"], descendants: true }, { propertyName: "searchElement", first: true, predicate: ["searchElement"], descendants: true }, { propertyName: "popupHeaderContainer", first: true, predicate: ["popupHeaderContainer"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div\n  #listbox\n  class=\"po-listbox\"\n  [class.po-listbox-check]=\"type === 'check' || type === 'option'\"\n  [attr.data-type]=\"type\"\n  [hidden]=\"visible\"\n>\n  <div #popupHeaderContainer>\n    <ng-content select=\"[p-popup-header-template]\"></ng-content>\n  </div>\n\n  <po-search-list\n    #searchElement\n    *ngIf=\"!hideSearch && type === 'check'\"\n    (p-change)=\"callChangeSearch($event)\"\n    [p-literals]=\"literalSearch\"\n    [p-field-value]=\"fieldValueSearch\"\n    [p-placeholder]=\"placeholderSearch\"\n    [p-size]=\"size\"\n  ></po-search-list>\n\n  <ng-container *ngIf=\"checkTemplate(); else noDataTemplate\">\n    <ul #listboxItemList cdkListbox [cdkListboxMultiple]=\"type === 'check'\" class=\"po-listbox-list\">\n      <li\n        cdkOption=\"selectAll\"\n        *ngIf=\"type === 'check' && items.length && !searchElement?.inputValue && !hideSelectAll\"\n        [attr.aria-checked]=\"checkboxAllValue === null ? 'mixed' : checkboxAllValue\"\n        (click)=\"changeAll.emit()\"\n        (keydown)=\"changeAllEmit($event)\"\n        (keydown)=\"onSelectAllCheckboxKeyDown($event)\"\n      >\n        <po-item-list\n          [p-selected]=\"checkboxAllValue\"\n          p-type=\"check\"\n          [p-label]=\"literals.selectAll\"\n          p-value=\"selectAll\"\n          [p-checkbox-value]=\"checkboxAllValue\"\n          [p-size]=\"size\"\n        >\n        </po-item-list>\n      </li>\n      <li\n        [class.po-listbox-item]=\"visible\"\n        *ngFor=\"let item of items\"\n        [cdkOption]=\"item[fieldLabel]\"\n        [cdkOptionDisabled]=\"\n          returnBooleanValue(item, 'disabled') || returnBooleanValue(item, 'visible') === false || item.options\n        \"\n        [attr.aria-selected]=\"isSelectedItem(item) || item.selected\"\n        (click)=\"onSelectItem(item)\"\n        (keydown)=\"onKeyDown(item, $event)\"\n      >\n        <label *ngIf=\"item.options\" class=\"po-combo-item-title\">\n          {{ item.label }}\n        </label>\n        <po-item-list\n          *ngIf=\"returnBooleanValue(item, 'visible') !== false && !item.options\"\n          [p-disabled]=\"returnBooleanValue(item, 'disabled')\"\n          [p-visible]=\"returnBooleanValue(item, 'visible')\"\n          [p-checkbox-value]=\"isSelectedItem(item)\"\n          [attr.data-item-list]=\"formatItemList(item)\"\n          [p-label]=\"item[fieldLabel]\"\n          [p-value]=\"item[fieldValue]\"\n          [p-selected]=\"isSelectedItem(item) || item.selected\"\n          [p-active-tabs]=\"item.active\"\n          [p-separator]=\"item.separator\"\n          [p-danger]=\"item.danger || item.type === 'danger'\"\n          [p-icon]=\"item.icon\"\n          [p-type]=\"type\"\n          [p-item]=\"item\"\n          [p-tab-hide]=\"item.hide\"\n          [p-is-tabs]=\"isTabs\"\n          [p-field-value]=\"fieldValue\"\n          [p-field-label]=\"fieldLabel\"\n          [p-template]=\"template\"\n          [p-template-context]=\"item\"\n          (p-selectcheckbox-item)=\"checkboxClicked($event)\"\n          (p-selectcombo-item)=\"optionClicked(item)\"\n          (p-emit-item-tabs)=\"onSelectTabs($event)\"\n          (p-activated-tabs)=\"onActivatedTabs($event)\"\n          [p-search-value]=\"searchValue\"\n          [p-filter-mode]=\"filterMode\"\n          [p-filtering]=\"isFiltering\"\n          [p-size]=\"size\"\n          [p-should-mark-letter]=\"shouldMarkLetters\"\n          [p-compare-cache]=\"compareCache\"\n          [p-combo-service]=\"comboService\"\n        ></po-item-list>\n      </li>\n    </ul>\n  </ng-container>\n\n  <div *ngIf=\"isServerSearching && type !== 'action'\" [class.po-listbox-container-loading-default]=\"!infiniteLoading\">\n    <po-loading-overlay [p-size]=\"getSizeLoading()\" [p-text]=\"getTextLoading()\"></po-loading-overlay>\n  </div>\n\n  <ng-template #noDataTemplate>\n    <div\n      *ngIf=\"!items.length && !isServerSearching && type !== 'action'\"\n      class=\"po-listbox-container-no-data po-text-center\"\n    >\n      <span> {{ literals.noItems }}</span>\n    </div>\n  </ng-template>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: PoLoadingOverlayComponent, selector: "po-loading-overlay" }, { kind: "directive", type: i6.CdkListbox, selector: "[cdkListbox]", inputs: ["id", "tabindex", "cdkListboxValue", "cdkListboxMultiple", "cdkListboxDisabled", "cdkListboxUseActiveDescendant", "cdkListboxOrientation", "cdkListboxCompareWith", "cdkListboxNavigationWrapDisabled", "cdkListboxNavigatesDisabledOptions"], outputs: ["cdkListboxValueChange"], exportAs: ["cdkListbox"] }, { kind: "directive", type: i6.CdkOption, selector: "[cdkOption]", inputs: ["id", "cdkOption", "cdkOptionTypeaheadLabel", "cdkOptionDisabled", "tabindex"], exportAs: ["cdkOption"] }, { kind: "component", type: PoItemListComponent, selector: "po-item-list" }, { kind: "component", type: PoSearchListComponent, selector: "po-search-list", inputs: ["p-literals", "p-field-value", "p-size", "p-placeholder"], outputs: ["p-change"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: PoListBoxComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'po-listbox', standalone: false, template: "<div\n  #listbox\n  class=\"po-listbox\"\n  [class.po-listbox-check]=\"type === 'check' || type === 'option'\"\n  [attr.data-type]=\"type\"\n  [hidden]=\"visible\"\n>\n  <ng-content select=\"[p-popup-header-template]\"></ng-content>\n\n  <po-search-list\n    #searchElement\n    *ngIf=\"!hideSearch && type === 'check'\"\n    (p-change)=\"callChangeSearch($event)\"\n    [p-literals]=\"literalSearch\"\n    [p-field-value]=\"fieldValueSearch\"\n    [p-placeholder]=\"placeholderSearch\"\n    [p-size]=\"size\"\n  ></po-search-list>\n\n  <ng-container *ngIf=\"checkTemplate(); else noDataTemplate\">\n    <ul #listboxItemList cdkListbox [cdkListboxMultiple]=\"type === 'check'\" class=\"po-listbox-list\">\n      <li\n        cdkOption=\"selectAll\"\n        *ngIf=\"type === 'check' && items.length && !searchElement?.inputValue && !hideSelectAll\"\n        [attr.aria-checked]=\"checkboxAllValue === null ? 'mixed' : checkboxAllValue\"\n        (click)=\"changeAll.emit()\"\n        (keydown)=\"changeAllEmit($event)\"\n        (keydown)=\"onSelectAllCheckboxKeyDown($event)\"\n      >\n        <po-item-list\n          [p-selected]=\"checkboxAllValue\"\n          p-type=\"check\"\n          [p-label]=\"literals.selectAll\"\n          p-value=\"selectAll\"\n          [p-checkbox-value]=\"checkboxAllValue\"\n          [p-size]=\"size\"\n        >\n        </po-item-list>\n      </li>\n      <li\n        [class.po-listbox-item]=\"visible\"\n        *ngFor=\"let item of items\"\n        [cdkOption]=\"item[fieldLabel]\"\n        [cdkOptionDisabled]=\"\n          returnBooleanValue(item, 'disabled') || returnBooleanValue(item, 'visible') === false || item.options\n        \"\n        [attr.aria-selected]=\"isSelectedItem(item) || item.selected\"\n        (click)=\"onSelectItem(item)\"\n        (keydown)=\"onKeyDown(item, $event)\"\n      >\n        <label *ngIf=\"item.options\" class=\"po-combo-item-title\">\n          {{ item.label }}\n        </label>\n        <po-item-list\n          *ngIf=\"returnBooleanValue(item, 'visible') !== false && !item.options\"\n          [p-disabled]=\"returnBooleanValue(item, 'disabled')\"\n          [p-visible]=\"returnBooleanValue(item, 'visible')\"\n          [p-checkbox-value]=\"isSelectedItem(item)\"\n          [attr.data-item-list]=\"formatItemList(item)\"\n          [p-label]=\"item[fieldLabel]\"\n          [p-value]=\"item[fieldValue]\"\n          [p-selected]=\"isSelectedItem(item) || item.selected\"\n          [p-active-tabs]=\"item.active\"\n          [p-separator]=\"item.separator\"\n          [p-danger]=\"item.danger || item.type === 'danger'\"\n          [p-icon]=\"item.icon\"\n          [p-type]=\"type\"\n          [p-item]=\"item\"\n          [p-tab-hide]=\"item.hide\"\n          [p-is-tabs]=\"isTabs\"\n          [p-field-value]=\"fieldValue\"\n          [p-field-label]=\"fieldLabel\"\n          [p-template]=\"template\"\n          [p-template-context]=\"item\"\n          (p-selectcheckbox-item)=\"checkboxClicked($event)\"\n          (p-selectcombo-item)=\"optionClicked(item)\"\n          (p-emit-item-tabs)=\"onSelectTabs($event)\"\n          (p-activated-tabs)=\"onActivatedTabs($event)\"\n          [p-search-value]=\"searchValue\"\n          [p-filter-mode]=\"filterMode\"\n          [p-filtering]=\"isFiltering\"\n          [p-size]=\"size\"\n          [p-should-mark-letter]=\"shouldMarkLetters\"\n          [p-compare-cache]=\"compareCache\"\n          [p-combo-service]=\"comboService\"\n        ></po-item-list>\n      </li>\n    </ul>\n  </ng-container>\n\n  <div *ngIf=\"isServerSearching && type !== 'action'\" [class.po-listbox-container-loading-default]=\"!infiniteLoading\">\n    <po-loading-overlay [p-size]=\"getSizeLoading()\" [p-text]=\"getTextLoading()\"></po-loading-overlay>\n  </div>\n\n  <ng-template #noDataTemplate>\n    <div\n      *ngIf=\"!items.length && !isServerSearching && type !== 'action'\"\n      class=\"po-listbox-container-no-data po-text-center\"\n    >\n      <span> {{ literals.noItems }}</span>\n    </div>\n  </ng-template>\n</div>\n" }]
+            args: [{ selector: 'po-listbox', standalone: false, template: "<div\n  #listbox\n  class=\"po-listbox\"\n  [class.po-listbox-check]=\"type === 'check' || type === 'option'\"\n  [attr.data-type]=\"type\"\n  [hidden]=\"visible\"\n>\n  <div #popupHeaderContainer>\n    <ng-content select=\"[p-popup-header-template]\"></ng-content>\n  </div>\n\n  <po-search-list\n    #searchElement\n    *ngIf=\"!hideSearch && type === 'check'\"\n    (p-change)=\"callChangeSearch($event)\"\n    [p-literals]=\"literalSearch\"\n    [p-field-value]=\"fieldValueSearch\"\n    [p-placeholder]=\"placeholderSearch\"\n    [p-size]=\"size\"\n  ></po-search-list>\n\n  <ng-container *ngIf=\"checkTemplate(); else noDataTemplate\">\n    <ul #listboxItemList cdkListbox [cdkListboxMultiple]=\"type === 'check'\" class=\"po-listbox-list\">\n      <li\n        cdkOption=\"selectAll\"\n        *ngIf=\"type === 'check' && items.length && !searchElement?.inputValue && !hideSelectAll\"\n        [attr.aria-checked]=\"checkboxAllValue === null ? 'mixed' : checkboxAllValue\"\n        (click)=\"changeAll.emit()\"\n        (keydown)=\"changeAllEmit($event)\"\n        (keydown)=\"onSelectAllCheckboxKeyDown($event)\"\n      >\n        <po-item-list\n          [p-selected]=\"checkboxAllValue\"\n          p-type=\"check\"\n          [p-label]=\"literals.selectAll\"\n          p-value=\"selectAll\"\n          [p-checkbox-value]=\"checkboxAllValue\"\n          [p-size]=\"size\"\n        >\n        </po-item-list>\n      </li>\n      <li\n        [class.po-listbox-item]=\"visible\"\n        *ngFor=\"let item of items\"\n        [cdkOption]=\"item[fieldLabel]\"\n        [cdkOptionDisabled]=\"\n          returnBooleanValue(item, 'disabled') || returnBooleanValue(item, 'visible') === false || item.options\n        \"\n        [attr.aria-selected]=\"isSelectedItem(item) || item.selected\"\n        (click)=\"onSelectItem(item)\"\n        (keydown)=\"onKeyDown(item, $event)\"\n      >\n        <label *ngIf=\"item.options\" class=\"po-combo-item-title\">\n          {{ item.label }}\n        </label>\n        <po-item-list\n          *ngIf=\"returnBooleanValue(item, 'visible') !== false && !item.options\"\n          [p-disabled]=\"returnBooleanValue(item, 'disabled')\"\n          [p-visible]=\"returnBooleanValue(item, 'visible')\"\n          [p-checkbox-value]=\"isSelectedItem(item)\"\n          [attr.data-item-list]=\"formatItemList(item)\"\n          [p-label]=\"item[fieldLabel]\"\n          [p-value]=\"item[fieldValue]\"\n          [p-selected]=\"isSelectedItem(item) || item.selected\"\n          [p-active-tabs]=\"item.active\"\n          [p-separator]=\"item.separator\"\n          [p-danger]=\"item.danger || item.type === 'danger'\"\n          [p-icon]=\"item.icon\"\n          [p-type]=\"type\"\n          [p-item]=\"item\"\n          [p-tab-hide]=\"item.hide\"\n          [p-is-tabs]=\"isTabs\"\n          [p-field-value]=\"fieldValue\"\n          [p-field-label]=\"fieldLabel\"\n          [p-template]=\"template\"\n          [p-template-context]=\"item\"\n          (p-selectcheckbox-item)=\"checkboxClicked($event)\"\n          (p-selectcombo-item)=\"optionClicked(item)\"\n          (p-emit-item-tabs)=\"onSelectTabs($event)\"\n          (p-activated-tabs)=\"onActivatedTabs($event)\"\n          [p-search-value]=\"searchValue\"\n          [p-filter-mode]=\"filterMode\"\n          [p-filtering]=\"isFiltering\"\n          [p-size]=\"size\"\n          [p-should-mark-letter]=\"shouldMarkLetters\"\n          [p-compare-cache]=\"compareCache\"\n          [p-combo-service]=\"comboService\"\n        ></po-item-list>\n      </li>\n    </ul>\n  </ng-container>\n\n  <div *ngIf=\"isServerSearching && type !== 'action'\" [class.po-listbox-container-loading-default]=\"!infiniteLoading\">\n    <po-loading-overlay [p-size]=\"getSizeLoading()\" [p-text]=\"getTextLoading()\"></po-loading-overlay>\n  </div>\n\n  <ng-template #noDataTemplate>\n    <div\n      *ngIf=\"!items.length && !isServerSearching && type !== 'action'\"\n      class=\"po-listbox-container-no-data po-text-center\"\n    >\n      <span> {{ literals.noItems }}</span>\n    </div>\n  </ng-template>\n</div>\n" }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: PoLanguageService }, { type: PoThemeService }, { type: i3.Router }, { type: i0.ChangeDetectorRef }], propDecorators: { listbox: [{
                 type: ViewChild,
                 args: ['listbox', { static: true }]
@@ -10887,6 +10898,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImpor
             }], searchElement: [{
                 type: ViewChild,
                 args: ['searchElement']
+            }], popupHeaderContainer: [{
+                type: ViewChild,
+                args: ['popupHeaderContainer']
             }] } });
 
 /**
@@ -11055,11 +11069,11 @@ class PoPopupComponent extends PoPopupBaseComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: PoPopupComponent, deps: [{ token: i0.ViewContainerRef }, { token: PoThemeService }, { token: i0.Renderer2 }, { token: i3.Router }, { token: PoControlPositionService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.7", type: PoPopupComponent, isStandalone: false, selector: "po-popup", providers: [PoControlPositionService], viewQueries: [{ propertyName: "popupRef", first: true, predicate: ["popupRef"], descendants: true, read: ElementRef }, { propertyName: "listbox", first: true, predicate: ["listbox"], descendants: true, read: ElementRef }, { propertyName: "poListBoxRef", first: true, predicate: ["poListBoxRef"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div #popupRef class=\"po-popup\" *ngIf=\"showPopup && actions.length && !checkAllActionIsInvisible()\">\n  <div *ngIf=\"!hideArrow\" class=\"po-popup-arrow po-arrow-{{ arrowDirection }}\"></div>\n\n  <div class=\"po-popup-container\">\n    <po-listbox\n      #listbox\n      #poListBoxRef\n      p-type=\"action\"\n      [p-items]=\"actions\"\n      [p-param]=\"param\"\n      [p-size]=\"size\"\n      (p-close)=\"close()\"\n    >\n      <div p-popup-header-template>\n        <ng-content select=\"[p-popup-header-template]\"></ng-content>\n      </div>\n    </po-listbox>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: PoListBoxComponent, selector: "po-listbox" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.7", type: PoPopupComponent, isStandalone: false, selector: "po-popup", providers: [PoControlPositionService], viewQueries: [{ propertyName: "popupRef", first: true, predicate: ["popupRef"], descendants: true, read: ElementRef }, { propertyName: "listbox", first: true, predicate: ["listbox"], descendants: true, read: ElementRef }, { propertyName: "poListBoxRef", first: true, predicate: ["poListBoxRef"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div #popupRef class=\"po-popup\" *ngIf=\"showPopup && actions.length && !checkAllActionIsInvisible()\">\n  <div *ngIf=\"!hideArrow\" class=\"po-popup-arrow po-arrow-{{ arrowDirection }}\"></div>\n\n  <div class=\"po-popup-container\">\n    <po-listbox\n      #listbox\n      #poListBoxRef\n      p-type=\"action\"\n      [p-items]=\"actions\"\n      [p-param]=\"param\"\n      [p-size]=\"size\"\n      (p-close)=\"close()\"\n    >\n      <ng-content p-popup-header-template select=\"[p-popup-header-template]\"></ng-content>\n    </po-listbox>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: PoListBoxComponent, selector: "po-listbox" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: PoPopupComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'po-popup', providers: [PoControlPositionService], standalone: false, template: "<div #popupRef class=\"po-popup\" *ngIf=\"showPopup && actions.length && !checkAllActionIsInvisible()\">\n  <div *ngIf=\"!hideArrow\" class=\"po-popup-arrow po-arrow-{{ arrowDirection }}\"></div>\n\n  <div class=\"po-popup-container\">\n    <po-listbox\n      #listbox\n      #poListBoxRef\n      p-type=\"action\"\n      [p-items]=\"actions\"\n      [p-param]=\"param\"\n      [p-size]=\"size\"\n      (p-close)=\"close()\"\n    >\n      <div p-popup-header-template>\n        <ng-content select=\"[p-popup-header-template]\"></ng-content>\n      </div>\n    </po-listbox>\n  </div>\n</div>\n" }]
+            args: [{ selector: 'po-popup', providers: [PoControlPositionService], standalone: false, template: "<div #popupRef class=\"po-popup\" *ngIf=\"showPopup && actions.length && !checkAllActionIsInvisible()\">\n  <div *ngIf=\"!hideArrow\" class=\"po-popup-arrow po-arrow-{{ arrowDirection }}\"></div>\n\n  <div class=\"po-popup-container\">\n    <po-listbox\n      #listbox\n      #poListBoxRef\n      p-type=\"action\"\n      [p-items]=\"actions\"\n      [p-param]=\"param\"\n      [p-size]=\"size\"\n      (p-close)=\"close()\"\n    >\n      <ng-content p-popup-header-template select=\"[p-popup-header-template]\"></ng-content>\n    </po-listbox>\n  </div>\n</div>\n" }]
         }], ctorParameters: () => [{ type: i0.ViewContainerRef }, { type: PoThemeService }, { type: i0.Renderer2 }, { type: i3.Router }, { type: PoControlPositionService }, { type: i0.ChangeDetectorRef }], propDecorators: { popupRef: [{
                 type: ViewChild,
                 args: ['popupRef', { read: ElementRef }]
@@ -14771,6 +14785,7 @@ class PoDisclaimerBaseComponent {
     property;
     disclaimerCustomWidth = 201;
     lastDisclaimer = false;
+    appendInBody = false;
     tooltipPosition = 'bottom';
     /**
      * @optional
@@ -14832,7 +14847,7 @@ class PoDisclaimerBaseComponent {
         return this.label ? this.label + ' ' + this.literals.remove : this.value + ' ' + this.literals.remove;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: PoDisclaimerBaseComponent, deps: [{ token: PoLanguageService }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.0.7", type: PoDisclaimerBaseComponent, isStandalone: true, inputs: { label: ["p-label", "label"], value: ["p-value", "value"], property: ["p-property", "property"], disclaimerCustomWidth: ["p-disclaimer-custom-width", "disclaimerCustomWidth"], lastDisclaimer: ["p-last-disclaimer", "lastDisclaimer"], tooltipPosition: ["p-tooltip-position", "tooltipPosition"], hideClose: ["p-hide-close", "hideClose"], type: ["p-type", "type"] }, outputs: { closeAction: "p-close-action", clickNumber: "p-click-number" }, ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.0.7", type: PoDisclaimerBaseComponent, isStandalone: true, inputs: { label: ["p-label", "label"], value: ["p-value", "value"], property: ["p-property", "property"], disclaimerCustomWidth: ["p-disclaimer-custom-width", "disclaimerCustomWidth"], lastDisclaimer: ["p-last-disclaimer", "lastDisclaimer"], appendInBody: ["p-append-in-body", "appendInBody"], tooltipPosition: ["p-tooltip-position", "tooltipPosition"], hideClose: ["p-hide-close", "hideClose"], type: ["p-type", "type"] }, outputs: { closeAction: "p-close-action", clickNumber: "p-click-number" }, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: PoDisclaimerBaseComponent, decorators: [{
             type: Directive
@@ -14851,6 +14866,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImpor
             }], lastDisclaimer: [{
                 type: Input,
                 args: ['p-last-disclaimer']
+            }], appendInBody: [{
+                type: Input,
+                args: ['p-append-in-body']
             }], tooltipPosition: [{
                 type: Input,
                 args: ['p-tooltip-position']
@@ -14896,11 +14914,11 @@ class PoDisclaimerComponent extends PoDisclaimerBaseComponent {
         return this.disclaimerContainer.nativeElement.offsetWidth > this.disclaimerCustomWidth;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: PoDisclaimerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.7", type: PoDisclaimerComponent, isStandalone: false, selector: "po-disclaimer", viewQueries: [{ propertyName: "disclaimerContainer", first: true, predicate: ["disclaimerContainer"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<div #disclaimerContainer class=\"disclaimer-container\">\n  <div\n    *ngIf=\"showDisclaimer === true\"\n    class=\"po-disclaimer\"\n    [class.po-disclaimer-remove-all]=\"hideClose\"\n    [class.po-disclaimer-danger]=\"type === 'danger'\"\n    [p-tooltip]=\"getWidthDisclaimer() ? getLabel() : ''\"\n    [p-tooltip-position]=\"tooltipPosition\"\n    [tabindex]=\"hideClose ? '0' : '-1'\"\n    (click)=\"emitLastDisclaimer(lastDisclaimer)\"\n    (keydown.enter)=\"emitLastDisclaimer(lastDisclaimer)\"\n  >\n    <div class=\"po-disclaimer-label\" [class.show-close]=\"!hideClose\">\n      <span class=\"label\">\n        {{ getLabel() }}\n      </span>\n    </div>\n    <po-icon\n      p-icon=\"ICON_CLOSE\"\n      *ngIf=\"hideClose === false\"\n      [attr.aria-label]=\"setAriaLabel()\"\n      [attr.role]=\"!hideClose ? 'button' : ''\"\n      class=\"po-disclaimer-remove po-clickable\"\n      tabindex=\"0\"\n      [class.po-disclaimer-remove-danger]=\"type === 'danger'\"\n      (click)=\"close()\"\n      (keydown)=\"onKeyPress($event)\"\n    ></po-icon>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: PoIconComponent, selector: "po-icon", inputs: ["p-icon"] }, { kind: "directive", type: PoTooltipDirective, selector: "[p-tooltip]" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.7", type: PoDisclaimerComponent, isStandalone: false, selector: "po-disclaimer", viewQueries: [{ propertyName: "disclaimerContainer", first: true, predicate: ["disclaimerContainer"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<div #disclaimerContainer class=\"disclaimer-container\">\n  <div\n    *ngIf=\"showDisclaimer === true\"\n    class=\"po-disclaimer\"\n    [class.po-disclaimer-remove-all]=\"hideClose\"\n    [class.po-disclaimer-danger]=\"type === 'danger'\"\n    [p-tooltip]=\"getWidthDisclaimer() ? getLabel() : ''\"\n    [p-append-in-body]=\"appendInBody\"\n    [p-tooltip-position]=\"tooltipPosition\"\n    [tabindex]=\"hideClose ? '0' : '-1'\"\n    (click)=\"emitLastDisclaimer(lastDisclaimer)\"\n    (keydown.enter)=\"emitLastDisclaimer(lastDisclaimer)\"\n  >\n    <div class=\"po-disclaimer-label\" [class.show-close]=\"!hideClose\">\n      <span class=\"label\">\n        {{ getLabel() }}\n      </span>\n    </div>\n    <po-icon\n      p-icon=\"ICON_CLOSE\"\n      *ngIf=\"hideClose === false\"\n      [attr.aria-label]=\"setAriaLabel()\"\n      [attr.role]=\"!hideClose ? 'button' : ''\"\n      class=\"po-disclaimer-remove po-clickable\"\n      tabindex=\"0\"\n      [class.po-disclaimer-remove-danger]=\"type === 'danger'\"\n      (click)=\"close()\"\n      (keydown)=\"onKeyPress($event)\"\n    ></po-icon>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: PoIconComponent, selector: "po-icon", inputs: ["p-icon"] }, { kind: "directive", type: PoTooltipDirective, selector: "[p-tooltip]" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: PoDisclaimerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'po-disclaimer', standalone: false, template: "<div #disclaimerContainer class=\"disclaimer-container\">\n  <div\n    *ngIf=\"showDisclaimer === true\"\n    class=\"po-disclaimer\"\n    [class.po-disclaimer-remove-all]=\"hideClose\"\n    [class.po-disclaimer-danger]=\"type === 'danger'\"\n    [p-tooltip]=\"getWidthDisclaimer() ? getLabel() : ''\"\n    [p-tooltip-position]=\"tooltipPosition\"\n    [tabindex]=\"hideClose ? '0' : '-1'\"\n    (click)=\"emitLastDisclaimer(lastDisclaimer)\"\n    (keydown.enter)=\"emitLastDisclaimer(lastDisclaimer)\"\n  >\n    <div class=\"po-disclaimer-label\" [class.show-close]=\"!hideClose\">\n      <span class=\"label\">\n        {{ getLabel() }}\n      </span>\n    </div>\n    <po-icon\n      p-icon=\"ICON_CLOSE\"\n      *ngIf=\"hideClose === false\"\n      [attr.aria-label]=\"setAriaLabel()\"\n      [attr.role]=\"!hideClose ? 'button' : ''\"\n      class=\"po-disclaimer-remove po-clickable\"\n      tabindex=\"0\"\n      [class.po-disclaimer-remove-danger]=\"type === 'danger'\"\n      (click)=\"close()\"\n      (keydown)=\"onKeyPress($event)\"\n    ></po-icon>\n  </div>\n</div>\n" }]
+            args: [{ selector: 'po-disclaimer', standalone: false, template: "<div #disclaimerContainer class=\"disclaimer-container\">\n  <div\n    *ngIf=\"showDisclaimer === true\"\n    class=\"po-disclaimer\"\n    [class.po-disclaimer-remove-all]=\"hideClose\"\n    [class.po-disclaimer-danger]=\"type === 'danger'\"\n    [p-tooltip]=\"getWidthDisclaimer() ? getLabel() : ''\"\n    [p-append-in-body]=\"appendInBody\"\n    [p-tooltip-position]=\"tooltipPosition\"\n    [tabindex]=\"hideClose ? '0' : '-1'\"\n    (click)=\"emitLastDisclaimer(lastDisclaimer)\"\n    (keydown.enter)=\"emitLastDisclaimer(lastDisclaimer)\"\n  >\n    <div class=\"po-disclaimer-label\" [class.show-close]=\"!hideClose\">\n      <span class=\"label\">\n        {{ getLabel() }}\n      </span>\n    </div>\n    <po-icon\n      p-icon=\"ICON_CLOSE\"\n      *ngIf=\"hideClose === false\"\n      [attr.aria-label]=\"setAriaLabel()\"\n      [attr.role]=\"!hideClose ? 'button' : ''\"\n      class=\"po-disclaimer-remove po-clickable\"\n      tabindex=\"0\"\n      [class.po-disclaimer-remove-danger]=\"type === 'danger'\"\n      (click)=\"close()\"\n      (keydown)=\"onKeyPress($event)\"\n    ></po-icon>\n  </div>\n</div>\n" }]
         }], propDecorators: { disclaimerContainer: [{
                 type: ViewChild,
                 args: ['disclaimerContainer', { static: true }]
@@ -34580,11 +34598,11 @@ class PoMultiselectComponent extends PoMultiselectBaseComponent {
         this.adjustContainerPosition();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: PoMultiselectComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: PoControlPositionService }, { token: PoMultiselectFilterService }, { token: PoLanguageService }, { token: PoThemeService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.7", type: PoMultiselectComponent, isStandalone: false, selector: "po-multiselect", providers: providers$1, queries: [{ propertyName: "multiselectOptionTemplate", first: true, predicate: PoMultiselectOptionTemplateDirective, descendants: true, static: true }], viewQueries: [{ propertyName: "dropdownElement", first: true, predicate: ["dropdownElement"], descendants: true, read: ElementRef }, { propertyName: "dropdown", first: true, predicate: ["dropdownElement"], descendants: true }, { propertyName: "iconElement", first: true, predicate: ["iconElement"], descendants: true, read: ElementRef, static: true }, { propertyName: "inputElement", first: true, predicate: ["inputElement"], descendants: true, read: ElementRef, static: true }, { propertyName: "outerContainer", first: true, predicate: ["outerContainer "], descendants: true, read: ElementRef }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div #outerContainer>\n  <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-icon-right po-multiselect-input\"\n        [class.po-multiselect-input-auto]=\"autoHeight\"\n        [class.po-multiselect-input-static]=\"!autoHeight\"\n        [class.po-multiselect-input-disabled]=\"disabled\"\n        [class.po-multiselect-input-font]=\"!disabled && !visibleTags?.length\"\n        [class.po-multiselect-input-aa]=\"size === 'small'\"\n        (keydown)=\"onKeyDown($event)\"\n        (click)=\"toggleDropdownVisibility()\"\n        (blur)=\"onBlur($event)\"\n      >\n        <span\n          *ngIf=\"!disabled && !visibleTags?.length\"\n          class=\"po-multiselect-input-placeholder\"\n          [class.po-multiselect-input-placeholder-aa]=\"size === 'small'\"\n          ria-hidden=\"true\"\n        >\n          {{ placeholder ? placeholder : literals.selectItem }}\n        </span>\n\n        <po-tag\n          *ngFor=\"let tag of visibleTags; index as i\"\n          [p-value]=\"tag[fieldLabel]\"\n          [p-literals]=\"i + 1 === visibleTags.length && hasMoreTag ? literalsTag : undefined\"\n          [p-removable]=\"true\"\n          [class.po-clickable]=\"tag[fieldValue] === '' && !disabled\"\n          [p-disabled]=\"disabled\"\n          (p-close)=\"closeTag(tag[fieldValue], $event)\"\n        ></po-tag>\n\n        <div class=\"po-field-icon-container-right\">\n          <po-icon\n            p-icon=\"{{ dropdownIcon }}\"\n            #iconElement\n            class=\"po-field-icon {{ disabled ? 'po-icon-input-disabled' : 'po-icon-input' }}\"\n            [class.po-field-icon-aa]=\"size === 'small'\"\n            [ngClass]=\"disabled ? 'po-field-icon-disabled' : ''\"\n          >\n          </po-icon>\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\n      [p-additional-help-tooltip]=\"getAdditionalHelpTooltip()\"\n      [p-append-in-body]=\"appendBox\"\n      [p-help]=\"help\"\n      [p-disabled]=\"disabled\"\n      [p-error-pattern]=\"getErrorPattern()\"\n      [p-error-limit]=\"errorLimit\"\n      [p-show-additional-help]=\"displayAdditionalHelp\"\n      [p-show-additional-help-icon]=\"showAdditionalHelpIcon()\"\n      (p-additional-help)=\"emitAdditionalHelp()\"\n    ></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-size]=\"size\"\n      [p-container-width]=\"containerWidth\"\n      (p-change)=\"changeItems($event)\"\n      (p-change-search)=\"changeSearch($event)\"\n      (p-close-dropdown)=\"controlDropdownVisibility(false)\"\n      (keydown)=\"onKeyDownDropdown($event, 0)\"\n    >\n    </po-multiselect-dropdown>\n  </ng-template>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i6$1.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i6$1.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "component", type: PoFieldContainerBottomComponent, selector: "po-field-container-bottom", inputs: ["p-additional-help-tooltip", "p-append-in-body", "p-disabled", "p-error-pattern", "p-error-limit", "p-help", "p-show-additional-help", "p-show-additional-help-icon"], outputs: ["p-additional-help"] }, { kind: "component", type: PoFieldContainerComponent, selector: "po-field-container", inputs: ["p-disabled", "p-id", "p-label", "p-help", "p-optional", "p-required", "p-show-required"] }, { kind: "component", type: PoIconComponent, selector: "po-icon", inputs: ["p-icon"] }, { kind: "component", type: PoTagComponent, selector: "po-tag" }, { kind: "component", type: PoMultiselectDropdownComponent, selector: "po-multiselect-dropdown", inputs: ["p-searching", "p-hide-search", "p-literals", "p-placeholder-search", "p-selected-options", "p-options", "p-visible-options", "p-hide-select-all", "p-field-value", "p-field-label", "p-multiselect-template", "p-container-width", "p-size"], outputs: ["p-change-search", "p-change", "p-close-dropdown"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.7", type: PoMultiselectComponent, isStandalone: false, selector: "po-multiselect", providers: providers$1, queries: [{ propertyName: "multiselectOptionTemplate", first: true, predicate: PoMultiselectOptionTemplateDirective, descendants: true, static: true }], viewQueries: [{ propertyName: "dropdownElement", first: true, predicate: ["dropdownElement"], descendants: true, read: ElementRef }, { propertyName: "dropdown", first: true, predicate: ["dropdownElement"], descendants: true }, { propertyName: "iconElement", first: true, predicate: ["iconElement"], descendants: true, read: ElementRef, static: true }, { propertyName: "inputElement", first: true, predicate: ["inputElement"], descendants: true, read: ElementRef, static: true }, { propertyName: "outerContainer", first: true, predicate: ["outerContainer "], descendants: true, read: ElementRef }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div #outerContainer>\n  <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-icon-right po-multiselect-input\"\n        [class.po-multiselect-input-auto]=\"autoHeight\"\n        [class.po-multiselect-input-static]=\"!autoHeight\"\n        [class.po-multiselect-input-disabled]=\"disabled\"\n        [class.po-multiselect-input-font]=\"!disabled && !visibleTags?.length\"\n        [class.po-multiselect-input-aa]=\"size === 'small'\"\n        (keydown)=\"onKeyDown($event)\"\n        (click)=\"toggleDropdownVisibility()\"\n        (blur)=\"onBlur($event)\"\n      >\n        <span\n          *ngIf=\"!disabled && !visibleTags?.length\"\n          class=\"po-multiselect-input-placeholder\"\n          [class.po-multiselect-input-placeholder-aa]=\"size === 'small'\"\n          ria-hidden=\"true\"\n        >\n          {{ placeholder ? placeholder : literals.selectItem }}\n        </span>\n\n        <po-tag\n          *ngFor=\"let tag of visibleTags; index as i\"\n          [p-value]=\"tag[fieldLabel]\"\n          [p-literals]=\"i + 1 === visibleTags.length && hasMoreTag ? literalsTag : undefined\"\n          [p-removable]=\"true\"\n          [class.po-clickable]=\"tag[fieldValue] === '' && !disabled\"\n          [p-disabled]=\"disabled\"\n          (p-close)=\"closeTag(tag[fieldValue], $event)\"\n          [p-append-in-body]=\"appendBox\"\n        ></po-tag>\n\n        <div class=\"po-field-icon-container-right\">\n          <po-icon\n            p-icon=\"{{ dropdownIcon }}\"\n            #iconElement\n            class=\"po-field-icon {{ disabled ? 'po-icon-input-disabled' : 'po-icon-input' }}\"\n            [class.po-field-icon-aa]=\"size === 'small'\"\n            [ngClass]=\"disabled ? 'po-field-icon-disabled' : ''\"\n          >\n          </po-icon>\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\n      [p-additional-help-tooltip]=\"getAdditionalHelpTooltip()\"\n      [p-append-in-body]=\"appendBox\"\n      [p-help]=\"help\"\n      [p-disabled]=\"disabled\"\n      [p-error-pattern]=\"getErrorPattern()\"\n      [p-error-limit]=\"errorLimit\"\n      [p-show-additional-help]=\"displayAdditionalHelp\"\n      [p-show-additional-help-icon]=\"showAdditionalHelpIcon()\"\n      (p-additional-help)=\"emitAdditionalHelp()\"\n    ></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-size]=\"size\"\n      [p-container-width]=\"containerWidth\"\n      (p-change)=\"changeItems($event)\"\n      (p-change-search)=\"changeSearch($event)\"\n      (p-close-dropdown)=\"controlDropdownVisibility(false)\"\n      (keydown)=\"onKeyDownDropdown($event, 0)\"\n    >\n    </po-multiselect-dropdown>\n  </ng-template>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i6$1.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i6$1.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "component", type: PoFieldContainerBottomComponent, selector: "po-field-container-bottom", inputs: ["p-additional-help-tooltip", "p-append-in-body", "p-disabled", "p-error-pattern", "p-error-limit", "p-help", "p-show-additional-help", "p-show-additional-help-icon"], outputs: ["p-additional-help"] }, { kind: "component", type: PoFieldContainerComponent, selector: "po-field-container", inputs: ["p-disabled", "p-id", "p-label", "p-help", "p-optional", "p-required", "p-show-required"] }, { kind: "component", type: PoIconComponent, selector: "po-icon", inputs: ["p-icon"] }, { kind: "component", type: PoTagComponent, selector: "po-tag" }, { kind: "component", type: PoMultiselectDropdownComponent, selector: "po-multiselect-dropdown", inputs: ["p-searching", "p-hide-search", "p-literals", "p-placeholder-search", "p-selected-options", "p-options", "p-visible-options", "p-hide-select-all", "p-field-value", "p-field-label", "p-multiselect-template", "p-container-width", "p-size"], outputs: ["p-change-search", "p-change", "p-close-dropdown"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: PoMultiselectComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'po-multiselect', changeDetection: ChangeDetectionStrategy.OnPush, providers: providers$1, standalone: false, template: "<div #outerContainer>\n  <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-icon-right po-multiselect-input\"\n        [class.po-multiselect-input-auto]=\"autoHeight\"\n        [class.po-multiselect-input-static]=\"!autoHeight\"\n        [class.po-multiselect-input-disabled]=\"disabled\"\n        [class.po-multiselect-input-font]=\"!disabled && !visibleTags?.length\"\n        [class.po-multiselect-input-aa]=\"size === 'small'\"\n        (keydown)=\"onKeyDown($event)\"\n        (click)=\"toggleDropdownVisibility()\"\n        (blur)=\"onBlur($event)\"\n      >\n        <span\n          *ngIf=\"!disabled && !visibleTags?.length\"\n          class=\"po-multiselect-input-placeholder\"\n          [class.po-multiselect-input-placeholder-aa]=\"size === 'small'\"\n          ria-hidden=\"true\"\n        >\n          {{ placeholder ? placeholder : literals.selectItem }}\n        </span>\n\n        <po-tag\n          *ngFor=\"let tag of visibleTags; index as i\"\n          [p-value]=\"tag[fieldLabel]\"\n          [p-literals]=\"i + 1 === visibleTags.length && hasMoreTag ? literalsTag : undefined\"\n          [p-removable]=\"true\"\n          [class.po-clickable]=\"tag[fieldValue] === '' && !disabled\"\n          [p-disabled]=\"disabled\"\n          (p-close)=\"closeTag(tag[fieldValue], $event)\"\n        ></po-tag>\n\n        <div class=\"po-field-icon-container-right\">\n          <po-icon\n            p-icon=\"{{ dropdownIcon }}\"\n            #iconElement\n            class=\"po-field-icon {{ disabled ? 'po-icon-input-disabled' : 'po-icon-input' }}\"\n            [class.po-field-icon-aa]=\"size === 'small'\"\n            [ngClass]=\"disabled ? 'po-field-icon-disabled' : ''\"\n          >\n          </po-icon>\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\n      [p-additional-help-tooltip]=\"getAdditionalHelpTooltip()\"\n      [p-append-in-body]=\"appendBox\"\n      [p-help]=\"help\"\n      [p-disabled]=\"disabled\"\n      [p-error-pattern]=\"getErrorPattern()\"\n      [p-error-limit]=\"errorLimit\"\n      [p-show-additional-help]=\"displayAdditionalHelp\"\n      [p-show-additional-help-icon]=\"showAdditionalHelpIcon()\"\n      (p-additional-help)=\"emitAdditionalHelp()\"\n    ></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-size]=\"size\"\n      [p-container-width]=\"containerWidth\"\n      (p-change)=\"changeItems($event)\"\n      (p-change-search)=\"changeSearch($event)\"\n      (p-close-dropdown)=\"controlDropdownVisibility(false)\"\n      (keydown)=\"onKeyDownDropdown($event, 0)\"\n    >\n    </po-multiselect-dropdown>\n  </ng-template>\n</div>\n" }]
+            args: [{ selector: 'po-multiselect', changeDetection: ChangeDetectionStrategy.OnPush, providers: providers$1, standalone: false, template: "<div #outerContainer>\n  <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-icon-right po-multiselect-input\"\n        [class.po-multiselect-input-auto]=\"autoHeight\"\n        [class.po-multiselect-input-static]=\"!autoHeight\"\n        [class.po-multiselect-input-disabled]=\"disabled\"\n        [class.po-multiselect-input-font]=\"!disabled && !visibleTags?.length\"\n        [class.po-multiselect-input-aa]=\"size === 'small'\"\n        (keydown)=\"onKeyDown($event)\"\n        (click)=\"toggleDropdownVisibility()\"\n        (blur)=\"onBlur($event)\"\n      >\n        <span\n          *ngIf=\"!disabled && !visibleTags?.length\"\n          class=\"po-multiselect-input-placeholder\"\n          [class.po-multiselect-input-placeholder-aa]=\"size === 'small'\"\n          ria-hidden=\"true\"\n        >\n          {{ placeholder ? placeholder : literals.selectItem }}\n        </span>\n\n        <po-tag\n          *ngFor=\"let tag of visibleTags; index as i\"\n          [p-value]=\"tag[fieldLabel]\"\n          [p-literals]=\"i + 1 === visibleTags.length && hasMoreTag ? literalsTag : undefined\"\n          [p-removable]=\"true\"\n          [class.po-clickable]=\"tag[fieldValue] === '' && !disabled\"\n          [p-disabled]=\"disabled\"\n          (p-close)=\"closeTag(tag[fieldValue], $event)\"\n          [p-append-in-body]=\"appendBox\"\n        ></po-tag>\n\n        <div class=\"po-field-icon-container-right\">\n          <po-icon\n            p-icon=\"{{ dropdownIcon }}\"\n            #iconElement\n            class=\"po-field-icon {{ disabled ? 'po-icon-input-disabled' : 'po-icon-input' }}\"\n            [class.po-field-icon-aa]=\"size === 'small'\"\n            [ngClass]=\"disabled ? 'po-field-icon-disabled' : ''\"\n          >\n          </po-icon>\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\n      [p-additional-help-tooltip]=\"getAdditionalHelpTooltip()\"\n      [p-append-in-body]=\"appendBox\"\n      [p-help]=\"help\"\n      [p-disabled]=\"disabled\"\n      [p-error-pattern]=\"getErrorPattern()\"\n      [p-error-limit]=\"errorLimit\"\n      [p-show-additional-help]=\"displayAdditionalHelp\"\n      [p-show-additional-help-icon]=\"showAdditionalHelpIcon()\"\n      (p-additional-help)=\"emitAdditionalHelp()\"\n    ></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-size]=\"size\"\n      [p-container-width]=\"containerWidth\"\n      (p-change)=\"changeItems($event)\"\n      (p-change-search)=\"changeSearch($event)\"\n      (p-close-dropdown)=\"controlDropdownVisibility(false)\"\n      (keydown)=\"onKeyDownDropdown($event, 0)\"\n    >\n    </po-multiselect-dropdown>\n  </ng-template>\n</div>\n" }]
         }], ctorParameters: () => [{ type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: PoControlPositionService }, { type: PoMultiselectFilterService }, { type: PoLanguageService }, { type: PoThemeService }], propDecorators: { multiselectOptionTemplate: [{
                 type: ContentChild,
                 args: [PoMultiselectOptionTemplateDirective, { static: true }]
@@ -38306,11 +38324,11 @@ class PoRichTextToolbarComponent {
         this.mediaButtons[0].disabled = state;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: PoRichTextToolbarComponent, deps: [{ token: PoLanguageService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.7", type: PoRichTextToolbarComponent, isStandalone: false, selector: "po-rich-text-toolbar", inputs: { hideToolbarActions: ["p-hide-toolbar-actions", "hideToolbarActions"], readonly: ["p-readonly", "readonly"], size: ["p-size", "size"] }, outputs: { command: "p-command", modal: "p-modal", linkEditing: "p-link-editing" }, viewQueries: [{ propertyName: "colorPickerInput", first: true, predicate: ["colorPickerInput"], descendants: true, read: ElementRef }, { propertyName: "toolbarElement", first: true, predicate: ["toolbarElement"], descendants: true, static: true }, { propertyName: "richTextImageModal", first: true, predicate: PoRichTextImageModalComponent, descendants: true, static: true }, { propertyName: "richTextLinkModal", first: true, predicate: PoRichTextLinkModalComponent, descendants: true, static: true }], ngImport: i0, template: "<div class=\"po-rich-text-toolbar\" [class.po-rich-text-toolbar-aa]=\"size === 'small'\" #toolbarElement>\n  <div\n    class=\"po-rich-text-toolbar-button-align\"\n    data-rich-text-toolbar=\"format\"\n    *ngIf=\"!isActionHidden(formatToolbarAction)\"\n  >\n    <po-button-group p-toggle=\"multiple\" [p-buttons]=\"formatButtons\" [p-size]=\"size\"> </po-button-group>\n  </div>\n\n  <div *ngIf=\"showColor()\" class=\"po-rich-text-toolbar-button-align\" data-rich-text-toolbar=\"color\">\n    <div class=\"po-rich-text-toolbar-color-picker-container\">\n      <button\n        type=\"button\"\n        class=\"po-button po-button-default po-rich-text-toolbar-color-picker-button\"\n        [class.po-rich-text-toolbar-color-picker-button-aa]=\"size === 'small'\"\n        [disabled]=\"readonly\"\n        [p-tooltip]=\"literals.textColor\"\n        [attr.aria-label]=\"literals.textColor\"\n      >\n        <input\n          #colorPickerInput\n          class=\"po-rich-text-toolbar-color-picker-input\"\n          type=\"color\"\n          [disabled]=\"readonly\"\n          (change)=\"changeTextColor($event.target.value)\"\n          [attr.aria-label]=\"literals.textColor\"\n        />\n      </button>\n    </div>\n  </div>\n\n  <div\n    class=\"po-rich-text-toolbar-button-align\"\n    data-rich-text-toolbar=\"align\"\n    *ngIf=\"!isActionHidden(alignToolbarAction)\"\n  >\n    <po-button-group p-toggle=\"single\" [p-buttons]=\"alignButtons\" [p-size]=\"size\"> </po-button-group>\n  </div>\n\n  <div\n    class=\"po-rich-text-toolbar-button-align\"\n    data-rich-text-toolbar=\"list\"\n    *ngIf=\"!isActionHidden(listToolbarAction)\"\n  >\n    <po-button-group p-toggle=\"single\" [p-buttons]=\"listButtons\" [p-size]=\"size\"> </po-button-group>\n  </div>\n\n  <div\n    class=\"po-rich-text-toolbar-button-align\"\n    data-rich-text-toolbar=\"link\"\n    *ngIf=\"!isActionHidden(linkToolbarAction)\"\n  >\n    <po-button-group [p-buttons]=\"linkButtons\" [p-size]=\"size\"> </po-button-group>\n  </div>\n\n  <div\n    class=\"po-rich-text-toolbar-button-align\"\n    data-rich-text-toolbar=\"media\"\n    *ngIf=\"!isActionHidden(mediaToolbarAction)\"\n  >\n    <po-button-group [p-buttons]=\"mediaButtons\" [p-size]=\"size\"> </po-button-group>\n  </div>\n</div>\n\n<po-rich-text-image-modal #richTextImageModal [p-size]=\"size\" (p-command)=\"emitCommand($event)\">\n</po-rich-text-image-modal>\n\n<po-rich-text-link-modal\n  #richTextLinkModal\n  [p-size]=\"size\"\n  (p-command)=\"emitCommand($event)\"\n  (p-link-editing)=\"emitLinkEditing($event)\"\n>\n</po-rich-text-link-modal>\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: PoButtonGroupComponent, selector: "po-button-group" }, { kind: "directive", type: PoTooltipDirective, selector: "[p-tooltip]" }, { kind: "component", type: PoRichTextImageModalComponent, selector: "po-rich-text-image-modal", inputs: ["p-size"], outputs: ["p-command"] }, { kind: "component", type: PoRichTextLinkModalComponent, selector: "po-rich-text-link-modal", inputs: ["p-size"], outputs: ["p-command", "p-link-editing"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.7", type: PoRichTextToolbarComponent, isStandalone: false, selector: "po-rich-text-toolbar", inputs: { hideToolbarActions: ["p-hide-toolbar-actions", "hideToolbarActions"], readonly: ["p-readonly", "readonly"], size: ["p-size", "size"] }, outputs: { command: "p-command", modal: "p-modal", linkEditing: "p-link-editing" }, viewQueries: [{ propertyName: "colorPickerInput", first: true, predicate: ["colorPickerInput"], descendants: true, read: ElementRef }, { propertyName: "toolbarElement", first: true, predicate: ["toolbarElement"], descendants: true, static: true }, { propertyName: "richTextImageModal", first: true, predicate: PoRichTextImageModalComponent, descendants: true, static: true }, { propertyName: "richTextLinkModal", first: true, predicate: PoRichTextLinkModalComponent, descendants: true, static: true }], ngImport: i0, template: "<div class=\"po-rich-text-toolbar\" [class.po-rich-text-toolbar-aa]=\"size === 'small'\" #toolbarElement>\n  <div\n    class=\"po-rich-text-toolbar-button-align\"\n    data-rich-text-toolbar=\"format\"\n    *ngIf=\"!isActionHidden(formatToolbarAction)\"\n  >\n    <po-button-group p-toggle=\"multiple\" [p-buttons]=\"formatButtons\" [p-size]=\"size\"> </po-button-group>\n  </div>\n\n  <div *ngIf=\"showColor()\" class=\"po-rich-text-toolbar-button-align\" data-rich-text-toolbar=\"color\">\n    <div class=\"po-rich-text-toolbar-color-picker-container\">\n      <button\n        type=\"button\"\n        class=\"po-button po-button-default po-rich-text-toolbar-color-picker-button\"\n        [class.po-rich-text-toolbar-color-picker-button-aa]=\"size === 'small'\"\n        [disabled]=\"readonly\"\n        [p-tooltip]=\"literals.textColor\"\n        [attr.aria-label]=\"literals.textColor\"\n      >\n        <input\n          #colorPickerInput\n          class=\"po-rich-text-toolbar-color-picker-input\"\n          type=\"color\"\n          [disabled]=\"readonly\"\n          (input)=\"changeTextColor($event.target.value)\"\n          [attr.aria-label]=\"literals.textColor\"\n        />\n      </button>\n    </div>\n  </div>\n\n  <div\n    class=\"po-rich-text-toolbar-button-align\"\n    data-rich-text-toolbar=\"align\"\n    *ngIf=\"!isActionHidden(alignToolbarAction)\"\n  >\n    <po-button-group p-toggle=\"single\" [p-buttons]=\"alignButtons\" [p-size]=\"size\"> </po-button-group>\n  </div>\n\n  <div\n    class=\"po-rich-text-toolbar-button-align\"\n    data-rich-text-toolbar=\"list\"\n    *ngIf=\"!isActionHidden(listToolbarAction)\"\n  >\n    <po-button-group p-toggle=\"single\" [p-buttons]=\"listButtons\" [p-size]=\"size\"> </po-button-group>\n  </div>\n\n  <div\n    class=\"po-rich-text-toolbar-button-align\"\n    data-rich-text-toolbar=\"link\"\n    *ngIf=\"!isActionHidden(linkToolbarAction)\"\n  >\n    <po-button-group [p-buttons]=\"linkButtons\" [p-size]=\"size\"> </po-button-group>\n  </div>\n\n  <div\n    class=\"po-rich-text-toolbar-button-align\"\n    data-rich-text-toolbar=\"media\"\n    *ngIf=\"!isActionHidden(mediaToolbarAction)\"\n  >\n    <po-button-group [p-buttons]=\"mediaButtons\" [p-size]=\"size\"> </po-button-group>\n  </div>\n</div>\n\n<po-rich-text-image-modal #richTextImageModal [p-size]=\"size\" (p-command)=\"emitCommand($event)\">\n</po-rich-text-image-modal>\n\n<po-rich-text-link-modal\n  #richTextLinkModal\n  [p-size]=\"size\"\n  (p-command)=\"emitCommand($event)\"\n  (p-link-editing)=\"emitLinkEditing($event)\"\n>\n</po-rich-text-link-modal>\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: PoButtonGroupComponent, selector: "po-button-group" }, { kind: "directive", type: PoTooltipDirective, selector: "[p-tooltip]" }, { kind: "component", type: PoRichTextImageModalComponent, selector: "po-rich-text-image-modal", inputs: ["p-size"], outputs: ["p-command"] }, { kind: "component", type: PoRichTextLinkModalComponent, selector: "po-rich-text-link-modal", inputs: ["p-size"], outputs: ["p-command", "p-link-editing"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: PoRichTextToolbarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'po-rich-text-toolbar', standalone: false, template: "<div class=\"po-rich-text-toolbar\" [class.po-rich-text-toolbar-aa]=\"size === 'small'\" #toolbarElement>\n  <div\n    class=\"po-rich-text-toolbar-button-align\"\n    data-rich-text-toolbar=\"format\"\n    *ngIf=\"!isActionHidden(formatToolbarAction)\"\n  >\n    <po-button-group p-toggle=\"multiple\" [p-buttons]=\"formatButtons\" [p-size]=\"size\"> </po-button-group>\n  </div>\n\n  <div *ngIf=\"showColor()\" class=\"po-rich-text-toolbar-button-align\" data-rich-text-toolbar=\"color\">\n    <div class=\"po-rich-text-toolbar-color-picker-container\">\n      <button\n        type=\"button\"\n        class=\"po-button po-button-default po-rich-text-toolbar-color-picker-button\"\n        [class.po-rich-text-toolbar-color-picker-button-aa]=\"size === 'small'\"\n        [disabled]=\"readonly\"\n        [p-tooltip]=\"literals.textColor\"\n        [attr.aria-label]=\"literals.textColor\"\n      >\n        <input\n          #colorPickerInput\n          class=\"po-rich-text-toolbar-color-picker-input\"\n          type=\"color\"\n          [disabled]=\"readonly\"\n          (change)=\"changeTextColor($event.target.value)\"\n          [attr.aria-label]=\"literals.textColor\"\n        />\n      </button>\n    </div>\n  </div>\n\n  <div\n    class=\"po-rich-text-toolbar-button-align\"\n    data-rich-text-toolbar=\"align\"\n    *ngIf=\"!isActionHidden(alignToolbarAction)\"\n  >\n    <po-button-group p-toggle=\"single\" [p-buttons]=\"alignButtons\" [p-size]=\"size\"> </po-button-group>\n  </div>\n\n  <div\n    class=\"po-rich-text-toolbar-button-align\"\n    data-rich-text-toolbar=\"list\"\n    *ngIf=\"!isActionHidden(listToolbarAction)\"\n  >\n    <po-button-group p-toggle=\"single\" [p-buttons]=\"listButtons\" [p-size]=\"size\"> </po-button-group>\n  </div>\n\n  <div\n    class=\"po-rich-text-toolbar-button-align\"\n    data-rich-text-toolbar=\"link\"\n    *ngIf=\"!isActionHidden(linkToolbarAction)\"\n  >\n    <po-button-group [p-buttons]=\"linkButtons\" [p-size]=\"size\"> </po-button-group>\n  </div>\n\n  <div\n    class=\"po-rich-text-toolbar-button-align\"\n    data-rich-text-toolbar=\"media\"\n    *ngIf=\"!isActionHidden(mediaToolbarAction)\"\n  >\n    <po-button-group [p-buttons]=\"mediaButtons\" [p-size]=\"size\"> </po-button-group>\n  </div>\n</div>\n\n<po-rich-text-image-modal #richTextImageModal [p-size]=\"size\" (p-command)=\"emitCommand($event)\">\n</po-rich-text-image-modal>\n\n<po-rich-text-link-modal\n  #richTextLinkModal\n  [p-size]=\"size\"\n  (p-command)=\"emitCommand($event)\"\n  (p-link-editing)=\"emitLinkEditing($event)\"\n>\n</po-rich-text-link-modal>\n" }]
+            args: [{ selector: 'po-rich-text-toolbar', standalone: false, template: "<div class=\"po-rich-text-toolbar\" [class.po-rich-text-toolbar-aa]=\"size === 'small'\" #toolbarElement>\n  <div\n    class=\"po-rich-text-toolbar-button-align\"\n    data-rich-text-toolbar=\"format\"\n    *ngIf=\"!isActionHidden(formatToolbarAction)\"\n  >\n    <po-button-group p-toggle=\"multiple\" [p-buttons]=\"formatButtons\" [p-size]=\"size\"> </po-button-group>\n  </div>\n\n  <div *ngIf=\"showColor()\" class=\"po-rich-text-toolbar-button-align\" data-rich-text-toolbar=\"color\">\n    <div class=\"po-rich-text-toolbar-color-picker-container\">\n      <button\n        type=\"button\"\n        class=\"po-button po-button-default po-rich-text-toolbar-color-picker-button\"\n        [class.po-rich-text-toolbar-color-picker-button-aa]=\"size === 'small'\"\n        [disabled]=\"readonly\"\n        [p-tooltip]=\"literals.textColor\"\n        [attr.aria-label]=\"literals.textColor\"\n      >\n        <input\n          #colorPickerInput\n          class=\"po-rich-text-toolbar-color-picker-input\"\n          type=\"color\"\n          [disabled]=\"readonly\"\n          (input)=\"changeTextColor($event.target.value)\"\n          [attr.aria-label]=\"literals.textColor\"\n        />\n      </button>\n    </div>\n  </div>\n\n  <div\n    class=\"po-rich-text-toolbar-button-align\"\n    data-rich-text-toolbar=\"align\"\n    *ngIf=\"!isActionHidden(alignToolbarAction)\"\n  >\n    <po-button-group p-toggle=\"single\" [p-buttons]=\"alignButtons\" [p-size]=\"size\"> </po-button-group>\n  </div>\n\n  <div\n    class=\"po-rich-text-toolbar-button-align\"\n    data-rich-text-toolbar=\"list\"\n    *ngIf=\"!isActionHidden(listToolbarAction)\"\n  >\n    <po-button-group p-toggle=\"single\" [p-buttons]=\"listButtons\" [p-size]=\"size\"> </po-button-group>\n  </div>\n\n  <div\n    class=\"po-rich-text-toolbar-button-align\"\n    data-rich-text-toolbar=\"link\"\n    *ngIf=\"!isActionHidden(linkToolbarAction)\"\n  >\n    <po-button-group [p-buttons]=\"linkButtons\" [p-size]=\"size\"> </po-button-group>\n  </div>\n\n  <div\n    class=\"po-rich-text-toolbar-button-align\"\n    data-rich-text-toolbar=\"media\"\n    *ngIf=\"!isActionHidden(mediaToolbarAction)\"\n  >\n    <po-button-group [p-buttons]=\"mediaButtons\" [p-size]=\"size\"> </po-button-group>\n  </div>\n</div>\n\n<po-rich-text-image-modal #richTextImageModal [p-size]=\"size\" (p-command)=\"emitCommand($event)\">\n</po-rich-text-image-modal>\n\n<po-rich-text-link-modal\n  #richTextLinkModal\n  [p-size]=\"size\"\n  (p-command)=\"emitCommand($event)\"\n  (p-link-editing)=\"emitLinkEditing($event)\"\n>\n</po-rich-text-link-modal>\n" }]
         }], ctorParameters: () => [{ type: PoLanguageService }], propDecorators: { colorPickerInput: [{
                 type: ViewChild,
                 args: ['colorPickerInput', { read: ElementRef }]