@po-ui/ng-components 18.2.0 → 18.4.0

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

@@ -2566,7 +2566,7 @@ class PoTooltipDirective extends PoTooltipBaseDirective {
 const _c0$1I = ["tagContainer"];
 const _c1$I = ["tagClose"];
 const _c2$l = ["poTag"];
-const _c3$f = a0 => ({ "color": a0 });
+const _c3$g = a0 => ({ "color": a0 });
 function PoTagComponent_div_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 13)(1, "span", 14);
     i0.ɵɵtext(2);
@@ -2580,7 +2580,7 @@ function PoTagComponent_po_icon_7_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "po-icon", 15);
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
-    i0.ɵɵproperty("p-icon", !ctx_r1.type ? ctx_r1.icon : ctx_r1.iconFromType)("ngStyle", !ctx_r1.type && ctx_r1.customTextColor ? i0.ɵɵpureFunction1(2, _c3$f, ctx_r1.customTextColor) : "");
+    i0.ɵɵproperty("p-icon", !ctx_r1.type ? ctx_r1.icon : ctx_r1.iconFromType)("ngStyle", !ctx_r1.type && ctx_r1.customTextColor ? i0.ɵɵpureFunction1(2, _c3$g, ctx_r1.customTextColor) : "");
 } }
 function PoTagComponent_po_icon_12_Template(rf, ctx) { if (rf & 1) {
     const _r3 = i0.ɵɵgetCurrentView();
@@ -2731,7 +2731,7 @@ class PoTagComponent extends PoTagBaseComponent {
             i0.ɵɵadvance();
             i0.ɵɵproperty("p-tooltip", ctx.getWidthTag() ? ctx.value : "");
             i0.ɵɵadvance(2);
-            i0.ɵɵproperty("ngStyle", !ctx.type && ctx.customTextColor && !ctx.removable ? i0.ɵɵpureFunction1(20, _c3$f, ctx.customTextColor) : "");
+            i0.ɵɵproperty("ngStyle", !ctx.type && ctx.customTextColor && !ctx.removable ? i0.ɵɵpureFunction1(20, _c3$g, ctx.customTextColor) : "");
             i0.ɵɵadvance();
             i0.ɵɵtextInterpolate(ctx.value);
             i0.ɵɵadvance();
@@ -4823,6 +4823,7 @@ class PoListBoxBaseComponent {
     shouldMarkLetters = true;
     compareCache = false;
     comboService;
+    containerWidth;
     // Evento disparado quando uma tab é ativada
     activatedTab = new EventEmitter();
     // Evento disparado no click de uma aba do tabs
@@ -4832,7 +4833,7 @@ class PoListBoxBaseComponent {
         this.language = languageService.getShortLanguage();
     }
     static ɵfac = function PoListBoxBaseComponent_Factory(t) { return new (t || PoListBoxBaseComponent)(i0.ɵɵdirectiveInject(PoLanguageService)); };
-    static ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: PoListBoxBaseComponent, inputs: { visible: [2, "p-visible", "visible", convertToBoolean], type: [0, "p-type", "type"], items: [0, "p-items", "items"], literals: [0, "p-literals", "literals"], isTabs: [2, "p-is-tabs", "isTabs", convertToBoolean], param: [0, "p-param", "param"], checkboxAllValue: [0, "p-checkboxAllValue", "checkboxAllValue"], selectedOptions: [0, "p-selected-options", "selectedOptions"], selectedOption: [0, "p-selected-option", "selectedOption"], fieldValue: [0, "p-field-value", "fieldValue"], fieldLabel: [0, "p-field-label", "fieldLabel"], literalSearch: [0, "p-literal-search", "literalSearch"], fieldValueSearch: [0, "p-field-value-search", "fieldValueSearch"], hideSearch: [0, "p-hide-search", "hideSearch"], hideSelectAll: [0, "p-hide-select-all", "hideSelectAll"], multiselectTemplate: [0, "p-multiselect-template", "multiselectTemplate"], template: [0, "p-template", "template"], placeholderSearch: [0, "p-placeholder-search", "placeholderSearch"], searchValue: [0, "p-search-value", "searchValue"], isServerSearching: [2, "p-is-searching", "isServerSearching", convertToBoolean], infiniteLoading: [2, "p-infinite-loading", "infiniteLoading", convertToBoolean], infiniteScroll: [2, "p-infinite-scroll", "infiniteScroll", convertToBoolean], cache: [2, "p-cache", "cache", convertToBoolean], infiniteScrollDistance: [0, "p-infinite-scroll-distance", "infiniteScrollDistance"], filterMode: [0, "p-filter-mode", "filterMode"], isFiltering: [0, "p-filtering", "isFiltering"], shouldMarkLetters: [0, "p-should-mark-letter", "shouldMarkLetters"], compareCache: [0, "p-compare-cache", "compareCache"], comboService: [0, "p-combo-service", "comboService"] }, outputs: { selectItem: "p-select-item", closeEvent: "p-close", change: "p-change", selectCombo: "p-selectcombo-item", changeAll: "p-change-all", UpdateInfiniteScroll: "p-update-infinite-scroll", changeSearch: "p-change-search", activatedTab: "p-activated-tabs", clickTab: "p-click-tabs", changeStateTabs: "p-change-state-tabs" }, features: [i0.ɵɵInputTransformsFeature] });
+    static ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: PoListBoxBaseComponent, inputs: { visible: [2, "p-visible", "visible", convertToBoolean], type: [0, "p-type", "type"], items: [0, "p-items", "items"], literals: [0, "p-literals", "literals"], isTabs: [2, "p-is-tabs", "isTabs", convertToBoolean], param: [0, "p-param", "param"], checkboxAllValue: [0, "p-checkboxAllValue", "checkboxAllValue"], selectedOptions: [0, "p-selected-options", "selectedOptions"], selectedOption: [0, "p-selected-option", "selectedOption"], fieldValue: [0, "p-field-value", "fieldValue"], fieldLabel: [0, "p-field-label", "fieldLabel"], literalSearch: [0, "p-literal-search", "literalSearch"], fieldValueSearch: [0, "p-field-value-search", "fieldValueSearch"], hideSearch: [0, "p-hide-search", "hideSearch"], hideSelectAll: [0, "p-hide-select-all", "hideSelectAll"], multiselectTemplate: [0, "p-multiselect-template", "multiselectTemplate"], template: [0, "p-template", "template"], placeholderSearch: [0, "p-placeholder-search", "placeholderSearch"], searchValue: [0, "p-search-value", "searchValue"], isServerSearching: [2, "p-is-searching", "isServerSearching", convertToBoolean], infiniteLoading: [2, "p-infinite-loading", "infiniteLoading", convertToBoolean], infiniteScroll: [2, "p-infinite-scroll", "infiniteScroll", convertToBoolean], cache: [2, "p-cache", "cache", convertToBoolean], infiniteScrollDistance: [0, "p-infinite-scroll-distance", "infiniteScrollDistance"], filterMode: [0, "p-filter-mode", "filterMode"], isFiltering: [0, "p-filtering", "isFiltering"], shouldMarkLetters: [0, "p-should-mark-letter", "shouldMarkLetters"], compareCache: [0, "p-compare-cache", "compareCache"], comboService: [0, "p-combo-service", "comboService"], containerWidth: [0, "p-container-width", "containerWidth"] }, outputs: { selectItem: "p-select-item", closeEvent: "p-close", change: "p-change", selectCombo: "p-selectcombo-item", changeAll: "p-change-all", UpdateInfiniteScroll: "p-update-infinite-scroll", changeSearch: "p-change-search", activatedTab: "p-activated-tabs", clickTab: "p-click-tabs", changeStateTabs: "p-change-state-tabs" }, features: [i0.ɵɵInputTransformsFeature] });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PoListBoxBaseComponent, [{
         type: Directive
@@ -4944,6 +4945,9 @@ class PoListBoxBaseComponent {
         }], comboService: [{
             type: Input,
             args: ['p-combo-service']
+        }], containerWidth: [{
+            type: Input,
+            args: ['p-container-width']
         }], activatedTab: [{
             type: Output,
             args: ['p-activated-tabs']
@@ -5008,7 +5012,7 @@ class PoLoadingOverlayBaseComponent {
      *
      * @description
      *
-     * Define se o *overlay* será aplicado a um *container* ou a página inteira.
+     * Define se o *overlay* será aplicado a um *container* ou à página inteira.
      *
      * Para utilizar o componente como um *container*, o elemento pai deverá receber uma posição relativa, por exemplo:
      *
@@ -5038,7 +5042,7 @@ class PoLoadingOverlayBaseComponent {
      *
      * Texto a ser exibido no componente.
      *
-     * > O valor padrão será traduzido acordo com o idioma configurado no [**PoI18n**](/documentation/po-i18n) ou navegador.
+     * > O valor padrão será traduzido de acordo com o idioma configurado no [**PoI18n**](/documentation/po-i18n) ou navegador.
      *
      * @default `Carregando`
      */
@@ -5053,7 +5057,13 @@ class PoLoadingOverlayBaseComponent {
      *
      * @description
      *
-     * Define o tamnho do componente.
+     * Define o tamanho do componente com base no tamanho do ícone de *loading*.
+     *
+     * Tamanhos disponíveis para o *loading*:
+     * - `xs`: 16px
+     * - `sm`: 24px
+     * - `md`: 48px
+     * - `lg`: 80px (valor padrão)
      *
      * @default `lg`
      */
@@ -6368,7 +6378,7 @@ class PoSearchListComponent {
 const _c0$1z = ["listbox"];
 const _c1$F = ["listboxItemList"];
 const _c2$k = ["searchElement"];
-const _c3$e = [[["", "p-popup-header-template", ""]]];
+const _c3$f = [[["", "p-popup-header-template", ""]]];
 const _c4$5 = ["[p-popup-header-template]"];
 function PoListBoxComponent_po_search_list_3_Template(rf, ctx) { if (rf & 1) {
     const _r1 = i0.ɵɵgetCurrentView();
@@ -6450,6 +6460,8 @@ function PoListBoxComponent_div_5_Template(rf, ctx) { if (rf & 1) {
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
     i0.ɵɵclassProp("po-listbox-container-loading-default", !ctx_r1.infiniteLoading);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("p-size", ctx_r1.getSizeLoading())("p-text", ctx_r1.getTextLoading());
 } }
 function PoListBoxComponent_ng_template_6_div_0_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 21)(1, "span");
@@ -6597,6 +6609,22 @@ class PoListBoxComponent extends PoListBoxBaseComponent {
             this.includeInfiniteScroll();
         }
     }
+    getSizeLoading() {
+        const width = this.listbox.nativeElement.offsetWidth || this.containerWidth;
+        if (width > 180) {
+            return 'md';
+        }
+        else if (width >= 140) {
+            return 'sm';
+        }
+        else {
+            return 'xs';
+        }
+    }
+    getTextLoading() {
+        const width = this.listbox.nativeElement.offsetWidth || this.containerWidth;
+        return width < 140 ? ' ' : '';
+    }
     hasInfiniteScroll() {
         this.changeDetector.detectChanges();
         return this.infiniteScroll && this.listboxItemList?.nativeElement.scrollHeight;
@@ -6667,11 +6695,11 @@ class PoListBoxComponent extends PoListBoxBaseComponent {
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.listbox = _t.first);
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.listboxItemList = _t.first);
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.searchElement = _t.first);
-        } }, features: [i0.ɵɵInheritDefinitionFeature, i0.ɵɵNgOnChangesFeature], ngContentSelectors: _c4$5, decls: 8, vars: 8, consts: [["listbox", ""], ["noDataTemplate", ""], ["searchElement", ""], ["listboxItemList", ""], [1, "po-listbox", 3, "hidden"], [3, "p-literals", "p-field-value", "p-placeholder", "p-change", 4, "ngIf"], [4, "ngIf", "ngIfElse"], [3, "po-listbox-container-loading-default", 4, "ngIf"], [3, "p-change", "p-literals", "p-field-value", "p-placeholder"], ["cdkListbox", "", 1, "po-listbox-list", 3, "cdkListboxMultiple"], ["cdkOption", "selectAll", 3, "click", "keydown", 4, "ngIf"], [3, "po-listbox-item", "cdkOption", "cdkOptionDisabled", "click", "keydown", 4, "ngFor", "ngForOf"], ["cdkOption", "selectAll", 3, "click", "keydown"], ["p-type", "check", "p-value", "selectAll", 3, "p-selected", "p-label", "p-checkbox-value"], [3, "click", "keydown", "cdkOption", "cdkOptionDisabled"], ["class", "po-combo-item-title", 4, "ngIf"], [3, "p-disabled", "p-visible", "p-checkbox-value", "p-label", "p-value", "p-selected", "p-active-tabs", "p-separator", "p-danger", "p-icon", "p-type", "p-item", "p-tab-hide", "p-is-tabs", "p-field-value", "p-field-label", "p-template", "p-template-context", "p-search-value", "p-filter-mode", "p-filtering", "p-should-mark-letter", "p-compare-cache", "p-combo-service", "p-selectcheckbox-item", "p-selectcombo-item", "p-emit-item-tabs", "p-activated-tabs", 4, "ngIf"], [1, "po-combo-item-title"], [3, "p-selectcheckbox-item", "p-selectcombo-item", "p-emit-item-tabs", "p-activated-tabs", "p-disabled", "p-visible", "p-checkbox-value", "p-label", "p-value", "p-selected", "p-active-tabs", "p-separator", "p-danger", "p-icon", "p-type", "p-item", "p-tab-hide", "p-is-tabs", "p-field-value", "p-field-label", "p-template", "p-template-context", "p-search-value", "p-filter-mode", "p-filtering", "p-should-mark-letter", "p-compare-cache", "p-combo-service"], ["p-size", "md"], ["class", "po-listbox-container-no-data po-text-center", 4, "ngIf"], [1, "po-listbox-container-no-data", "po-text-center"]], template: function PoListBoxComponent_Template(rf, ctx) { if (rf & 1) {
-            i0.ɵɵprojectionDef(_c3$e);
+        } }, features: [i0.ɵɵInheritDefinitionFeature, i0.ɵɵNgOnChangesFeature], ngContentSelectors: _c4$5, decls: 8, vars: 8, consts: [["listbox", ""], ["noDataTemplate", ""], ["searchElement", ""], ["listboxItemList", ""], [1, "po-listbox", 3, "hidden"], [3, "p-literals", "p-field-value", "p-placeholder", "p-change", 4, "ngIf"], [4, "ngIf", "ngIfElse"], [3, "po-listbox-container-loading-default", 4, "ngIf"], [3, "p-change", "p-literals", "p-field-value", "p-placeholder"], ["cdkListbox", "", 1, "po-listbox-list", 3, "cdkListboxMultiple"], ["cdkOption", "selectAll", 3, "click", "keydown", 4, "ngIf"], [3, "po-listbox-item", "cdkOption", "cdkOptionDisabled", "click", "keydown", 4, "ngFor", "ngForOf"], ["cdkOption", "selectAll", 3, "click", "keydown"], ["p-type", "check", "p-value", "selectAll", 3, "p-selected", "p-label", "p-checkbox-value"], [3, "click", "keydown", "cdkOption", "cdkOptionDisabled"], ["class", "po-combo-item-title", 4, "ngIf"], [3, "p-disabled", "p-visible", "p-checkbox-value", "p-label", "p-value", "p-selected", "p-active-tabs", "p-separator", "p-danger", "p-icon", "p-type", "p-item", "p-tab-hide", "p-is-tabs", "p-field-value", "p-field-label", "p-template", "p-template-context", "p-search-value", "p-filter-mode", "p-filtering", "p-should-mark-letter", "p-compare-cache", "p-combo-service", "p-selectcheckbox-item", "p-selectcombo-item", "p-emit-item-tabs", "p-activated-tabs", 4, "ngIf"], [1, "po-combo-item-title"], [3, "p-selectcheckbox-item", "p-selectcombo-item", "p-emit-item-tabs", "p-activated-tabs", "p-disabled", "p-visible", "p-checkbox-value", "p-label", "p-value", "p-selected", "p-active-tabs", "p-separator", "p-danger", "p-icon", "p-type", "p-item", "p-tab-hide", "p-is-tabs", "p-field-value", "p-field-label", "p-template", "p-template-context", "p-search-value", "p-filter-mode", "p-filtering", "p-should-mark-letter", "p-compare-cache", "p-combo-service"], [3, "p-size", "p-text"], ["class", "po-listbox-container-no-data po-text-center", 4, "ngIf"], [1, "po-listbox-container-no-data", "po-text-center"]], template: function PoListBoxComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵprojectionDef(_c3$f);
             i0.ɵɵelementStart(0, "div", 4, 0);
             i0.ɵɵprojection(2);
-            i0.ɵɵtemplate(3, PoListBoxComponent_po_search_list_3_Template, 2, 3, "po-search-list", 5)(4, PoListBoxComponent_ng_container_4_Template, 5, 3, "ng-container", 6)(5, PoListBoxComponent_div_5_Template, 2, 2, "div", 7)(6, PoListBoxComponent_ng_template_6_Template, 1, 1, "ng-template", null, 1, i0.ɵɵtemplateRefExtractor);
+            i0.ɵɵtemplate(3, PoListBoxComponent_po_search_list_3_Template, 2, 3, "po-search-list", 5)(4, PoListBoxComponent_ng_container_4_Template, 5, 3, "ng-container", 6)(5, PoListBoxComponent_div_5_Template, 2, 4, "div", 7)(6, PoListBoxComponent_ng_template_6_Template, 1, 1, "ng-template", null, 1, i0.ɵɵtemplateRefExtractor);
             i0.ɵɵelementEnd();
         } if (rf & 2) {
             const noDataTemplate_r7 = i0.ɵɵreference(7);
@@ -6688,7 +6716,7 @@ class PoListBoxComponent extends PoListBoxBaseComponent {
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PoListBoxComponent, [{
         type: Component,
-        args: [{ selector: 'po-listbox', 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  ></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        >\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-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=\"md\"></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', 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  ></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        >\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-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" }]
     }], () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: PoLanguageService }, { type: i2.Router }, { type: i0.ChangeDetectorRef }], { listbox: [{
             type: ViewChild,
             args: ['listbox', { static: true }]
@@ -6699,12 +6727,12 @@ class PoListBoxComponent extends PoListBoxBaseComponent {
             type: ViewChild,
             args: ['searchElement']
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PoListBoxComponent, { className: "PoListBoxComponent", filePath: "lib/components/po-listbox/po-listbox.component.ts", lineNumber: 29 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PoListBoxComponent, { className: "PoListBoxComponent", filePath: "lib/components/po-listbox/po-listbox.component.ts", lineNumber: 27 }); })();
 
 const _c0$1y = ["popupRef"];
 const _c1$E = ["listbox"];
 const _c2$j = ["poListBoxRef"];
-const _c3$d = [[["", "p-popup-header-template", ""]]];
+const _c3$e = [[["", "p-popup-header-template", ""]]];
 const _c4$4 = ["[p-popup-header-template]"];
 function PoPopupComponent_div_0_div_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "div");
@@ -6902,7 +6930,7 @@ class PoPopupComponent extends PoPopupBaseComponent {
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.listbox = _t.first);
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.poListBoxRef = _t.first);
         } }, features: [i0.ɵɵProvidersFeature([PoControlPositionService]), i0.ɵɵInheritDefinitionFeature], ngContentSelectors: _c4$4, decls: 1, vars: 1, consts: [["popupRef", ""], ["listbox", "", "poListBoxRef", ""], ["class", "po-popup", 4, "ngIf"], [1, "po-popup"], [3, "class", 4, "ngIf"], [1, "po-popup-container"], ["p-type", "action", 3, "p-close", "p-items", "p-param"], ["p-popup-header-template", ""]], template: function PoPopupComponent_Template(rf, ctx) { if (rf & 1) {
-            i0.ɵɵprojectionDef(_c3$d);
+            i0.ɵɵprojectionDef(_c3$e);
             i0.ɵɵtemplate(0, PoPopupComponent_div_0_Template, 9, 3, "div", 2);
         } if (rf & 2) {
             i0.ɵɵproperty("ngIf", ctx.showPopup && ctx.actions.length && !ctx.checkAllActionIsInvisible());
@@ -7098,7 +7126,7 @@ class PoBreadcrumbFavoriteComponent {
 const _c0$1x = ["breadcrumb"];
 const _c1$D = ["dropdownIcon"];
 const _c2$i = ["target"];
-const _c3$c = ["popup"];
+const _c3$d = ["popup"];
 function PoBreadcrumbComponent_ul_3_Template(rf, ctx) { if (rf & 1) {
     const _r1 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "ul", 9, 1)(2, "li")(3, "po-link", 10);
@@ -7366,7 +7394,7 @@ class PoBreadcrumbComponent extends PoBreadcrumbBaseComponent {
             i0.ɵɵviewQuery(_c0$1x, 7, ElementRef);
             i0.ɵɵviewQuery(_c1$D, 5, ElementRef);
             i0.ɵɵviewQuery(_c2$i, 5, ElementRef);
-            i0.ɵɵviewQuery(_c3$c, 5);
+            i0.ɵɵviewQuery(_c3$d, 5);
         } if (rf & 2) {
             let _t;
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.breadcrumbElement = _t.first);
@@ -12471,7 +12499,7 @@ class PoResizeObserverDirective {
 const _c0$1c = ["chartContainer"];
 const _c1$x = ["chartHeader"];
 const _c2$h = ["chartLegend"];
-const _c3$b = ["chartWrapper"];
+const _c3$c = ["chartWrapper"];
 function PoChartComponent_ng_template_7_Template(rf, ctx) { }
 function PoChartComponent_div_9_ng_container_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainer(0);
@@ -12667,7 +12695,7 @@ class PoChartComponent extends PoChartBaseComponent {
             i0.ɵɵviewQuery(_c0$1c, 7, ViewContainerRef);
             i0.ɵɵviewQuery(_c1$x, 7);
             i0.ɵɵviewQuery(_c2$h, 5, ElementRef);
-            i0.ɵɵviewQuery(_c3$b, 7);
+            i0.ɵɵviewQuery(_c3$c, 7);
         } if (rf & 2) {
             let _t;
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.chartContainer = _t.first);
@@ -13710,7 +13738,7 @@ class PoDropdownBaseComponent {
 const _c0$19 = ["dropdownRef"];
 const _c1$w = ["popupRef"];
 const _c2$g = (a0, a1) => ({ "po-dropdown-button-disabled": a0, "po-dropdown-button-open": a1 });
-const _c3$a = () => ["bottom-left", "top-left"];
+const _c3$b = () => ["bottom-left", "top-left"];
 /**
  * @docsExtends PoDropdownBaseComponent
  *
@@ -13832,7 +13860,7 @@ class PoDropdownComponent extends PoDropdownBaseComponent {
             i0.ɵɵadvance();
             i0.ɵɵproperty("p-icon", ctx.icon);
             i0.ɵɵadvance();
-            i0.ɵɵproperty("p-actions", ctx.actions)("p-custom-positions", i0.ɵɵpureFunction0(11, _c3$a))("p-target", dropdownRef_r2);
+            i0.ɵɵproperty("p-actions", ctx.actions)("p-custom-positions", i0.ɵɵpureFunction0(11, _c3$b))("p-target", dropdownRef_r2);
         } }, dependencies: [i1.NgClass, PoPopupComponent, PoIconComponent], encapsulation: 2, changeDetection: 0 });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PoDropdownComponent, [{
@@ -16492,7 +16520,7 @@ const PoDatepickerLiterals = {
 const _c0$14 = ["calendar"];
 const _c1$t = ["dialogPicker"];
 const _c2$f = ["iconDatepicker"];
-const _c3$9 = ["inp"];
+const _c3$a = ["inp"];
 function PoDatepickerComponent_po_clean_6_Template(rf, ctx) { if (rf & 1) {
     const _r2 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "po-clean", 14);
@@ -16843,7 +16871,7 @@ class PoDatepickerComponent extends PoDatepickerBaseComponent {
             i0.ɵɵviewQuery(_c0$14, 7);
             i0.ɵɵviewQuery(_c1$t, 7, ElementRef);
             i0.ɵɵviewQuery(_c2$f, 5);
-            i0.ɵɵviewQuery(_c3$9, 7, ElementRef);
+            i0.ɵɵviewQuery(_c3$a, 7, ElementRef);
         } if (rf & 2) {
             let _t;
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.calendar = _t.first);
@@ -17239,7 +17267,7 @@ class PoActiveOverlayService {
 const _c0$12 = ["modalContent"];
 const _c1$s = ["modalContainer"];
 const _c2$e = ["*", [["po-modal-footer"]]];
-const _c3$8 = ["*", "po-modal-footer"];
+const _c3$9 = ["*", "po-modal-footer"];
 function PoModalComponent_div_0_po_icon_9_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "po-icon", 16);
 } if (rf & 2) {
@@ -17425,7 +17453,7 @@ class PoModalComponent extends PoModalBaseComponent {
             let _t;
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.modalContent = _t.first);
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.modalContainer = _t.first);
-        } }, features: [i0.ɵɵInheritDefinitionFeature], ngContentSelectors: _c3$8, decls: 1, vars: 1, consts: [["modalContainer", ""], ["modalContent", ""], ["defaultModalFooterTemplate", ""], ["class", "po-modal", "tabindex", "0", 3, "keydown.esc", 4, "ngIf"], ["tabindex", "0", 1, "po-modal", 3, "keydown.esc"], [1, "po-modal-overlay", 3, "mousedown"], [1, "po-modal-container", "po-pb-2", "po-pt-2"], [1, "po-modal-vertical-align"], ["tabindex", "-1"], [1, "po-modal-header"], [1, "po-modal-title", "po-text-ellipsis"], [3, "p-icon", 4, "ngIf"], [1, "po-text-ellipsis"], ["p-icon", "ICON_CLOSE", "p-kind", "tertiary", 3, "p-aria-label", "p-click", 4, "ngIf"], [1, "po-modal-body"], [4, "ngIf", "ngIfElse"], [3, "p-icon"], ["p-icon", "ICON_CLOSE", "p-kind", "tertiary", 3, "p-click", "p-aria-label"], [1, "po-modal-footer-basic"], ["p-kind", "secondary", 3, "p-danger", "p-disabled", "p-label", "p-loading", "p-click", 4, "ngIf"], ["p-kind", "primary", 1, "po-button-modal-first-action", 3, "p-click", "p-danger", "p-disabled", "p-label", "p-loading"], ["p-kind", "secondary", 3, "p-click", "p-danger", "p-disabled", "p-label", "p-loading"]], template: function PoModalComponent_Template(rf, ctx) { if (rf & 1) {
+        } }, features: [i0.ɵɵInheritDefinitionFeature], ngContentSelectors: _c3$9, decls: 1, vars: 1, consts: [["modalContainer", ""], ["modalContent", ""], ["defaultModalFooterTemplate", ""], ["class", "po-modal", "tabindex", "0", 3, "keydown.esc", 4, "ngIf"], ["tabindex", "0", 1, "po-modal", 3, "keydown.esc"], [1, "po-modal-overlay", 3, "mousedown"], [1, "po-modal-container", "po-pb-2", "po-pt-2"], [1, "po-modal-vertical-align"], ["tabindex", "-1"], [1, "po-modal-header"], [1, "po-modal-title", "po-text-ellipsis"], [3, "p-icon", 4, "ngIf"], [1, "po-text-ellipsis"], ["p-icon", "ICON_CLOSE", "p-kind", "tertiary", 3, "p-aria-label", "p-click", 4, "ngIf"], [1, "po-modal-body"], [4, "ngIf", "ngIfElse"], [3, "p-icon"], ["p-icon", "ICON_CLOSE", "p-kind", "tertiary", 3, "p-click", "p-aria-label"], [1, "po-modal-footer-basic"], ["p-kind", "secondary", 3, "p-danger", "p-disabled", "p-label", "p-loading", "p-click", 4, "ngIf"], ["p-kind", "primary", 1, "po-button-modal-first-action", 3, "p-click", "p-danger", "p-disabled", "p-label", "p-loading"], ["p-kind", "secondary", 3, "p-click", "p-danger", "p-disabled", "p-label", "p-loading"]], template: function PoModalComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵprojectionDef(_c2$e);
             i0.ɵɵtemplate(0, PoModalComponent_div_0_Template, 18, 8, "div", 3);
         } if (rf & 2) {
@@ -19094,6 +19122,15 @@ const poThemeDefault = {
  *
  * > Obs.: Não está documentado aqui e não indicamos a customização das cores de 'feedback' por motivos de acessibilidade e usabilidade.
  */
+/**
+ * @example
+ *
+ * <example name="po-theme-labs" title="PO Theme Labs">
+ *  <file name="sample-po-theme-labs/sample-po-theme-labs.component.html"> </file>
+ *  <file name="sample-po-theme-labs/sample-po-theme-labs.component.ts"> </file>
+ * </example>
+ *
+ */
 class PoThemeService {
     window;
     document;
@@ -23461,9 +23498,9 @@ class PoTableRowTemplateDirective {
 const _c0$V = ["noColumnsHeader"];
 const _c1$o = ["popup"];
 const _c2$c = ["tableFooter"];
-const _c3$7 = ["tableWrapper"];
+const _c3$8 = ["tableWrapper"];
 const _c4$3 = ["tableTemplate"];
-const _c5 = ["tableVirtualScroll"];
+const _c5$1 = ["tableVirtualScroll"];
 const _c6 = ["columnManager"];
 const _c7 = ["columnBatchActions"];
 const _c8 = ["columnActionLeft"];
@@ -25644,9 +25681,9 @@ class PoTableComponent extends PoTableBaseComponent {
             i0.ɵɵviewQuery(_c1$o, 5);
             i0.ɵɵviewQuery(PoModalComponent, 7);
             i0.ɵɵviewQuery(_c2$c, 5, ElementRef);
-            i0.ɵɵviewQuery(_c3$7, 5, ElementRef);
+            i0.ɵɵviewQuery(_c3$8, 5, ElementRef);
             i0.ɵɵviewQuery(_c4$3, 5, ElementRef);
-            i0.ɵɵviewQuery(_c5, 5, ElementRef);
+            i0.ɵɵviewQuery(_c5$1, 5, ElementRef);
             i0.ɵɵviewQuery(_c6, 5, ElementRef);
             i0.ɵɵviewQuery(_c7, 5, ElementRef);
             i0.ɵɵviewQuery(_c8, 5, ElementRef);
@@ -26583,6 +26620,7 @@ const PO_COMBO_FIELD_VALUE_DEFAULT = 'value';
  * | `--color`                              | Cor principal do Combo                                | `var(--color-neutral-dark-70)`                    |
  * | `--background`                         | Cor de background                                     | `var(--color-neutral-light-05)`                   |
  * | `--border-radius`                      | Contém o valor do raio dos cantos do elemento&nbsp;   | `var(--border-width-lg)`                          |
+ * | `--min-width`                          | Largura mínima do combo                               | `150px`
  * | **Hover**                              |                                                       |                                                   |
  * | `--color-hover`                        | Cor principal no estado hover                         | `var(--color-action-hover)`                       |
  * | `--background-hover`                   | Cor de background no estado hover                     | `var(--color-brand-01-lightest)`                  |
@@ -27678,14 +27716,15 @@ class PoComboFilterService {
         type: Injectable
     }], () => [{ type: i1$2.HttpClient }], null); })();
 
-const _c0$U = ["containerElement"];
-const _c1$n = ["contentElement"];
-const _c2$b = ["iconArrow"];
-const _c3$6 = ["inp"];
-const _c4$2 = ["poListbox"];
-function PoComboComponent_div_3_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 18);
-    i0.ɵɵelement(1, "po-icon", 19);
+const _c0$U = ["outerContainer"];
+const _c1$n = ["containerElement"];
+const _c2$b = ["contentElement"];
+const _c3$7 = ["iconArrow"];
+const _c4$2 = ["inp"];
+const _c5 = ["poListbox"];
+function PoComboComponent_div_5_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 19);
+    i0.ɵɵelement(1, "po-icon", 20);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
@@ -27693,56 +27732,56 @@ function PoComboComponent_div_3_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵclassProp("po-field-icon-disabled", ctx_r1.disabled);
     i0.ɵɵproperty("p-icon", ctx_r1.icon);
 } }
-function PoComboComponent_po_clean_7_Template(rf, ctx) { if (rf & 1) {
+function PoComboComponent_po_clean_9_Template(rf, ctx) { if (rf & 1) {
     const _r3 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "po-clean", 20);
-    i0.ɵɵlistener("p-change-event", function PoComboComponent_po_clean_7_Template_po_clean_p_change_event_0_listener($event) { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.clear($event)); })("click", function PoComboComponent_po_clean_7_Template_po_clean_click_0_listener($event) { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(); ctx_r1.clear(null); return i0.ɵɵresetView($event.preventDefault()); })("keydown.enter", function PoComboComponent_po_clean_7_Template_po_clean_keydown_enter_0_listener($event) { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(); ctx_r1.clearAndFocus(); return i0.ɵɵresetView($event.preventDefault()); });
+    i0.ɵɵelementStart(0, "po-clean", 21);
+    i0.ɵɵlistener("p-change-event", function PoComboComponent_po_clean_9_Template_po_clean_p_change_event_0_listener($event) { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.clear($event)); })("click", function PoComboComponent_po_clean_9_Template_po_clean_click_0_listener($event) { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(); ctx_r1.clear(null); return i0.ɵɵresetView($event.preventDefault()); })("keydown.enter", function PoComboComponent_po_clean_9_Template_po_clean_keydown_enter_0_listener($event) { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(); ctx_r1.clearAndFocus(); return i0.ɵɵresetView($event.preventDefault()); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
     i0.ɵɵproperty("p-element-ref", ctx_r1.inputEl);
     i0.ɵɵattribute("aria-label", ctx_r1.literals.clean);
 } }
-function PoComboComponent_ng_container_11_Template(rf, ctx) { if (rf & 1) {
+function PoComboComponent_ng_container_13_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainer(0);
 } }
-function PoComboComponent_ng_template_12_ng_container_0_Template(rf, ctx) { if (rf & 1) {
+function PoComboComponent_ng_template_14_ng_container_0_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainer(0);
 } }
-function PoComboComponent_ng_template_12_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵtemplate(0, PoComboComponent_ng_template_12_ng_container_0_Template, 1, 0, "ng-container", 21);
+function PoComboComponent_ng_template_14_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵtemplate(0, PoComboComponent_ng_template_14_ng_container_0_Template, 1, 0, "ng-container", 22);
 } if (rf & 2) {
     i0.ɵɵnextContext();
-    const dropdownListbox_r4 = i0.ɵɵreference(18);
+    const dropdownListbox_r4 = i0.ɵɵreference(20);
     i0.ɵɵproperty("ngTemplateOutlet", dropdownListbox_r4);
 } }
-function PoComboComponent_ng_template_14_ng_template_0_ng_container_0_Template(rf, ctx) { if (rf & 1) {
+function PoComboComponent_ng_template_16_ng_template_0_ng_container_0_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainer(0);
 } }
-function PoComboComponent_ng_template_14_ng_template_0_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵtemplate(0, PoComboComponent_ng_template_14_ng_template_0_ng_container_0_Template, 1, 0, "ng-container", 21);
+function PoComboComponent_ng_template_16_ng_template_0_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵtemplate(0, PoComboComponent_ng_template_16_ng_template_0_ng_container_0_Template, 1, 0, "ng-container", 22);
 } if (rf & 2) {
     i0.ɵɵnextContext(2);
-    const dropdownListbox_r4 = i0.ɵɵreference(18);
+    const dropdownListbox_r4 = i0.ɵɵreference(20);
     i0.ɵɵproperty("ngTemplateOutlet", dropdownListbox_r4);
 } }
-function PoComboComponent_ng_template_14_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵtemplate(0, PoComboComponent_ng_template_14_ng_template_0_Template, 1, 1, "ng-template", 22);
+function PoComboComponent_ng_template_16_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵtemplate(0, PoComboComponent_ng_template_16_ng_template_0_Template, 1, 1, "ng-template", 23);
 } if (rf & 2) {
     i0.ɵɵnextContext();
-    const trigger_r5 = i0.ɵɵreference(2);
+    const trigger_r5 = i0.ɵɵreference(4);
     i0.ɵɵproperty("cdkConnectedOverlayOrigin", trigger_r5)("cdkConnectedOverlayOpen", true);
 } }
-function PoComboComponent_ng_template_17_Template(rf, ctx) { if (rf & 1) {
+function PoComboComponent_ng_template_19_Template(rf, ctx) { if (rf & 1) {
     const _r6 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 23, 6)(2, "po-listbox", 24, 7);
-    i0.ɵɵlistener("p-selectcombo-item", function PoComboComponent_ng_template_17_Template_po_listbox_p_selectcombo_item_2_listener($event) { i0.ɵɵrestoreView(_r6); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onOptionClick($event, $event.event)); })("p-update-infinite-scroll", function PoComboComponent_ng_template_17_Template_po_listbox_p_update_infinite_scroll_2_listener() { i0.ɵɵrestoreView(_r6); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.showMoreInfiniteScroll()); })("p-close", function PoComboComponent_ng_template_17_Template_po_listbox_p_close_2_listener() { i0.ɵɵrestoreView(_r6); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onCloseCombo()); });
+    i0.ɵɵelementStart(0, "div", 24, 7)(2, "po-listbox", 25, 8);
+    i0.ɵɵlistener("p-selectcombo-item", function PoComboComponent_ng_template_19_Template_po_listbox_p_selectcombo_item_2_listener($event) { i0.ɵɵrestoreView(_r6); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onOptionClick($event, $event.event)); })("p-update-infinite-scroll", function PoComboComponent_ng_template_19_Template_po_listbox_p_update_infinite_scroll_2_listener() { i0.ɵɵrestoreView(_r6); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.showMoreInfiniteScroll()); })("p-close", function PoComboComponent_ng_template_19_Template_po_listbox_p_close_2_listener() { i0.ɵɵrestoreView(_r6); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onCloseCombo()); });
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
     i0.ɵɵproperty("hidden", !ctx_r1.comboOpen && !ctx_r1.isServerSearching);
     i0.ɵɵadvance(2);
-    i0.ɵɵproperty("p-items", ctx_r1.visibleOptions)("p-field-value", ctx_r1.dynamicValue)("p-field-label", ctx_r1.dynamicLabel)("p-template", ctx_r1.comboOptionTemplate)("p-search-value", ctx_r1.getInputValue())("p-infinite-loading", ctx_r1.infiniteLoading)("p-infinite-scroll", ctx_r1.infiniteScroll)("p-filtering", ctx_r1.isFiltering)("p-cache", ctx_r1.cache)("p-filter-mode", ctx_r1.filterMode)("p-visible", ctx_r1.comboOpen)("p-is-searching", ctx_r1.isServerSearching)("p-should-mark-letter", ctx_r1.shouldMarkLetters)("p-compare-cache", ctx_r1.compareObjects(ctx_r1.cacheOptions, ctx_r1.visibleOptions))("p-combo-service", ctx_r1.service)("p-infinite-scroll-distance", ctx_r1.infiniteScrollDistance);
+    i0.ɵɵproperty("p-items", ctx_r1.visibleOptions)("p-field-value", ctx_r1.dynamicValue)("p-field-label", ctx_r1.dynamicLabel)("p-template", ctx_r1.comboOptionTemplate)("p-search-value", ctx_r1.getInputValue())("p-infinite-loading", ctx_r1.infiniteLoading)("p-infinite-scroll", ctx_r1.infiniteScroll)("p-filtering", ctx_r1.isFiltering)("p-cache", ctx_r1.cache)("p-filter-mode", ctx_r1.filterMode)("p-visible", ctx_r1.comboOpen)("p-is-searching", ctx_r1.isServerSearching)("p-should-mark-letter", ctx_r1.shouldMarkLetters)("p-compare-cache", ctx_r1.compareObjects(ctx_r1.cacheOptions, ctx_r1.visibleOptions))("p-combo-service", ctx_r1.service)("p-infinite-scroll-distance", ctx_r1.infiniteScrollDistance)("p-container-width", ctx_r1.containerWidth);
 } }
 const poComboContainerOffset = 8;
 const poComboContainerPositionDefault = 'bottom';
@@ -27801,6 +27840,7 @@ class PoComboComponent extends PoComboBaseComponent {
     changeDetector;
     controlPosition;
     comboOptionTemplate;
+    outerContainer;
     containerElement;
     contentElement;
     iconElement;
@@ -27814,6 +27854,7 @@ class PoComboComponent extends PoComboBaseComponent {
     scrollTop = 0;
     shouldMarkLetters = true;
     infiniteLoading = false;
+    containerWidth;
     _isServerSearching = false;
     lastKey;
     clickoutListener;
@@ -27849,6 +27890,7 @@ class PoComboComponent extends PoComboBaseComponent {
         if (this.autoFocus) {
             this.focus();
         }
+        this.setContainerWidth();
     }
     ngOnChanges(changes) {
         if (changes.debounceTime) {
@@ -28224,6 +28266,9 @@ class PoComboComponent extends PoComboBaseComponent {
             ? this.renderer.addClass(this.inputEl.nativeElement, 'po-combo-input-focus')
             : this.inputEl.nativeElement.focus();
         this.setContainerPosition();
+        if (this.comboOpen) {
+            this.setContainerWidth();
+        }
     }
     removeListeners() {
         if (this.clickoutListener) {
@@ -28238,6 +28283,11 @@ class PoComboComponent extends PoComboBaseComponent {
         this.controlPosition.setElements(this.containerElement.nativeElement, poComboContainerOffset, this.inputEl, ['top', 'bottom'], true);
         this.adjustContainerPosition();
     }
+    setContainerWidth() {
+        if (this.outerContainer) {
+            this.containerWidth = this.outerContainer.nativeElement.offsetWidth;
+        }
+    }
     setOptions() {
         return this.getInputValue() ? this.options : [];
     }
@@ -28273,11 +28323,13 @@ class PoComboComponent extends PoComboBaseComponent {
         } }, viewQuery: function PoComboComponent_Query(rf, ctx) { if (rf & 1) {
             i0.ɵɵviewQuery(_c0$U, 5, ElementRef);
             i0.ɵɵviewQuery(_c1$n, 5, ElementRef);
-            i0.ɵɵviewQuery(_c2$b, 7, ElementRef);
-            i0.ɵɵviewQuery(_c3$6, 7, ElementRef);
-            i0.ɵɵviewQuery(_c4$2, 5);
+            i0.ɵɵviewQuery(_c2$b, 5, ElementRef);
+            i0.ɵɵviewQuery(_c3$7, 7, ElementRef);
+            i0.ɵɵviewQuery(_c4$2, 7, ElementRef);
+            i0.ɵɵviewQuery(_c5, 5);
         } if (rf & 2) {
             let _t;
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.outerContainer = _t.first);
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.containerElement = _t.first);
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.contentElement = _t.first);
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.iconElement = _t.first);
@@ -28296,27 +28348,29 @@ class PoComboComponent extends PoComboBaseComponent {
                     useExisting: forwardRef(() => PoComboComponent),
                     multi: true
                 }
-            ]), i0.ɵɵInheritDefinitionFeature, i0.ɵɵNgOnChangesFeature], decls: 19, vars: 30, consts: [["trigger", "cdkOverlayOrigin"], ["inp", ""], ["iconArrow", ""], ["dropdownDefault", ""], ["dropdownCDK", ""], ["dropdownListbox", ""], ["containerElement", ""], ["poListbox", "", "contentElement", ""], [3, "p-disabled", "p-id", "p-label", "p-optional", "p-required", "p-show-required"], ["cdkOverlayOrigin", "", 1, "po-field-container-content", "po-combo-container-content"], ["class", "po-field-icon-container-left", 4, "ngIf"], ["autocomplete", "off", "type", "text", 1, "po-combo-input", 3, "click", "keyup", "blur", "keydown", "ngClass", "disabled", "id", "placeholder", "required"], [1, "po-field-icon-container-right"], ["tabindex", "0", "role", "button", "class", "po-combo-clean po-icon-input", 3, "p-element-ref", "p-change-event", "click", "keydown.enter", 4, "ngIf"], [1, "po-combo-arrow", "po-field-icon", 3, "click"], [3, "p-icon"], [4, "ngIf", "ngIfThen", "ngIfElse"], [3, "p-help", "p-disabled"], [1, "po-field-icon-container-left"], [1, "po-field-icon", "po-icon-input", 3, "p-icon"], ["tabindex", "0", "role", "button", 1, "po-combo-clean", "po-icon-input", 3, "p-change-event", "click", "keydown.enter", "p-element-ref"], [4, "ngTemplateOutlet"], ["cdkConnectedOverlay", "", 3, "cdkConnectedOverlayOrigin", "cdkConnectedOverlayOpen"], [1, "po-combo-container", 3, "hidden"], ["p-type", "option", 3, "p-selectcombo-item", "p-update-infinite-scroll", "p-close", "p-items", "p-field-value", "p-field-label", "p-template", "p-search-value", "p-infinite-loading", "p-infinite-scroll", "p-filtering", "p-cache", "p-filter-mode", "p-visible", "p-is-searching", "p-should-mark-letter", "p-compare-cache", "p-combo-service", "p-infinite-scroll-distance"]], template: function PoComboComponent_Template(rf, ctx) { if (rf & 1) {
+            ]), i0.ɵɵInheritDefinitionFeature, i0.ɵɵNgOnChangesFeature], decls: 21, vars: 30, consts: [["outerContainer", ""], ["trigger", "cdkOverlayOrigin"], ["inp", ""], ["iconArrow", ""], ["dropdownDefault", ""], ["dropdownCDK", ""], ["dropdownListbox", ""], ["containerElement", ""], ["poListbox", "", "contentElement", ""], [3, "p-disabled", "p-id", "p-label", "p-optional", "p-required", "p-show-required"], ["cdkOverlayOrigin", "", 1, "po-field-container-content", "po-combo-container-content"], ["class", "po-field-icon-container-left", 4, "ngIf"], ["autocomplete", "off", "type", "text", 1, "po-combo-input", 3, "click", "keyup", "blur", "keydown", "ngClass", "disabled", "id", "placeholder", "required"], [1, "po-field-icon-container-right"], ["tabindex", "0", "role", "button", "class", "po-combo-clean po-icon-input", 3, "p-element-ref", "p-change-event", "click", "keydown.enter", 4, "ngIf"], [1, "po-combo-arrow", "po-field-icon", 3, "click"], [3, "p-icon"], [4, "ngIf", "ngIfThen", "ngIfElse"], [3, "p-help", "p-disabled"], [1, "po-field-icon-container-left"], [1, "po-field-icon", "po-icon-input", 3, "p-icon"], ["tabindex", "0", "role", "button", 1, "po-combo-clean", "po-icon-input", 3, "p-change-event", "click", "keydown.enter", "p-element-ref"], [4, "ngTemplateOutlet"], ["cdkConnectedOverlay", "", 3, "cdkConnectedOverlayOrigin", "cdkConnectedOverlayOpen"], [1, "po-combo-container", 3, "hidden"], ["p-type", "option", 3, "p-selectcombo-item", "p-update-infinite-scroll", "p-close", "p-items", "p-field-value", "p-field-label", "p-template", "p-search-value", "p-infinite-loading", "p-infinite-scroll", "p-filtering", "p-cache", "p-filter-mode", "p-visible", "p-is-searching", "p-should-mark-letter", "p-compare-cache", "p-combo-service", "p-infinite-scroll-distance", "p-container-width"]], template: function PoComboComponent_Template(rf, ctx) { if (rf & 1) {
             const _r1 = i0.ɵɵgetCurrentView();
-            i0.ɵɵelementStart(0, "po-field-container", 8)(1, "div", 9, 0);
-            i0.ɵɵtemplate(3, PoComboComponent_div_3_Template, 2, 3, "div", 10);
-            i0.ɵɵelementStart(4, "input", 11, 1);
-            i0.ɵɵlistener("click", function PoComboComponent_Template_input_click_4_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.toggleComboVisibility()); })("keyup", function PoComboComponent_Template_input_keyup_4_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onKeyUp($event)); })("blur", function PoComboComponent_Template_input_blur_4_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onBlur()); })("keyup", function PoComboComponent_Template_input_keyup_4_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.searchOnEnterOrArrow($event, $event.target.value)); })("keydown", function PoComboComponent_Template_input_keydown_4_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onKeyDown($event)); });
+            i0.ɵɵelementStart(0, "div", null, 0)(2, "po-field-container", 9)(3, "div", 10, 1);
+            i0.ɵɵtemplate(5, PoComboComponent_div_5_Template, 2, 3, "div", 11);
+            i0.ɵɵelementStart(6, "input", 12, 2);
+            i0.ɵɵlistener("click", function PoComboComponent_Template_input_click_6_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.toggleComboVisibility()); })("keyup", function PoComboComponent_Template_input_keyup_6_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onKeyUp($event)); })("blur", function PoComboComponent_Template_input_blur_6_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onBlur()); })("keyup", function PoComboComponent_Template_input_keyup_6_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.searchOnEnterOrArrow($event, $event.target.value)); })("keydown", function PoComboComponent_Template_input_keydown_6_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onKeyDown($event)); });
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(6, "div", 12);
-            i0.ɵɵtemplate(7, PoComboComponent_po_clean_7_Template, 1, 2, "po-clean", 13);
-            i0.ɵɵelementStart(8, "div", 14, 2);
-            i0.ɵɵlistener("click", function PoComboComponent_Template_div_click_8_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.toggleComboVisibility(true)); });
-            i0.ɵɵelement(10, "po-icon", 15);
+            i0.ɵɵelementStart(8, "div", 13);
+            i0.ɵɵtemplate(9, PoComboComponent_po_clean_9_Template, 1, 2, "po-clean", 14);
+            i0.ɵɵelementStart(10, "div", 15, 3);
+            i0.ɵɵlistener("click", function PoComboComponent_Template_div_click_10_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.toggleComboVisibility(true)); });
+            i0.ɵɵelement(12, "po-icon", 16);
             i0.ɵɵelementEnd()()();
-            i0.ɵɵtemplate(11, PoComboComponent_ng_container_11_Template, 1, 0, "ng-container", 16)(12, PoComboComponent_ng_template_12_Template, 1, 1, "ng-template", null, 3, i0.ɵɵtemplateRefExtractor)(14, PoComboComponent_ng_template_14_Template, 1, 2, "ng-template", null, 4, i0.ɵɵtemplateRefExtractor);
-            i0.ɵɵelement(16, "po-field-container-bottom", 17);
+            i0.ɵɵtemplate(13, PoComboComponent_ng_container_13_Template, 1, 0, "ng-container", 17)(14, PoComboComponent_ng_template_14_Template, 1, 1, "ng-template", null, 4, i0.ɵɵtemplateRefExtractor)(16, PoComboComponent_ng_template_16_Template, 1, 2, "ng-template", null, 5, i0.ɵɵtemplateRefExtractor);
+            i0.ɵɵelement(18, "po-field-container-bottom", 18);
+            i0.ɵɵelementEnd();
+            i0.ɵɵtemplate(19, PoComboComponent_ng_template_19_Template, 5, 18, "ng-template", null, 6, i0.ɵɵtemplateRefExtractor);
             i0.ɵɵelementEnd();
-            i0.ɵɵtemplate(17, PoComboComponent_ng_template_17_Template, 5, 17, "ng-template", null, 5, i0.ɵɵtemplateRefExtractor);
         } if (rf & 2) {
-            const inp_r7 = i0.ɵɵreference(5);
-            const dropdownDefault_r8 = i0.ɵɵreference(13);
-            const dropdownCDK_r9 = i0.ɵɵreference(15);
+            const inp_r7 = i0.ɵɵreference(7);
+            const dropdownDefault_r8 = i0.ɵɵreference(15);
+            const dropdownCDK_r9 = i0.ɵɵreference(17);
+            i0.ɵɵadvance(2);
             i0.ɵɵproperty("p-disabled", ctx.disabled)("p-id", ctx.id)("p-label", ctx.label)("p-optional", ctx.optional)("p-required", ctx.required)("p-show-required", ctx.showRequired);
             i0.ɵɵadvance(3);
             i0.ɵɵproperty("ngIf", ctx.icon);
@@ -28352,10 +28406,13 @@ class PoComboComponent extends PoComboBaseComponent {
                         useExisting: forwardRef(() => PoComboComponent),
                         multi: true
                     }
-                ], template: "<po-field-container\n  [p-disabled]=\"disabled\"\n  [p-id]=\"id\"\n  [p-label]=\"label\"\n  [p-optional]=\"optional\"\n  [p-required]=\"required\"\n  [p-show-required]=\"showRequired\"\n>\n  <div cdkOverlayOrigin #trigger=\"cdkOverlayOrigin\" class=\"po-field-container-content po-combo-container-content\">\n    <div *ngIf=\"icon\" class=\"po-field-icon-container-left\">\n      <po-icon class=\"po-field-icon po-icon-input\" [class.po-field-icon-disabled]=\"disabled\" [p-icon]=\"icon\"></po-icon>\n    </div>\n\n    <input\n      #inp\n      class=\"po-combo-input\"\n      [ngClass]=\"clean && inp.value ? 'po-input-double-icon-right' : 'po-input-icon-right'\"\n      [class.po-input-icon-left]=\"icon\"\n      autocomplete=\"off\"\n      type=\"text\"\n      [attr.name]=\"name\"\n      [disabled]=\"disabled\"\n      [id]=\"id\"\n      [placeholder]=\"disabled ? '' : placeholder\"\n      [required]=\"required\"\n      (click)=\"toggleComboVisibility()\"\n      (keyup)=\"onKeyUp($event)\"\n      (blur)=\"onBlur()\"\n      (keyup)=\"searchOnEnterOrArrow($event, $event.target.value)\"\n      (keydown)=\"onKeyDown($event)\"\n    />\n\n    <div class=\"po-field-icon-container-right\">\n      <po-clean\n        tabindex=\"0\"\n        role=\"button\"\n        [attr.aria-label]=\"literals.clean\"\n        class=\"po-combo-clean po-icon-input\"\n        *ngIf=\"clean && !disabled && inp.value\"\n        [p-element-ref]=\"inputEl\"\n        (p-change-event)=\"clear($event)\"\n        (click)=\"clear(null); $event.preventDefault()\"\n        (keydown.enter)=\"clearAndFocus(); $event.preventDefault()\"\n      >\n      </po-clean>\n\n      <div\n        #iconArrow\n        class=\"po-combo-arrow po-field-icon\"\n        [class.po-field-icon-disabled]=\"disabled\"\n        (click)=\"toggleComboVisibility(true)\"\n      >\n        <po-icon\n          [p-icon]=\"comboOpen ? 'ICON_ARROW_UP po-icon-input' : 'ICON_ARROW_DOWN po-icon-input'\"\n          [class.po-field-icon]=\"!disabled\"\n          [class.po-combo-default-border]=\"!disabled && inp.value\"\n          [class.po-combo-background-arrow-up]=\"!disabled && comboOpen\"\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 [p-help]=\"help\" [p-disabled]=\"disabled\"></po-field-container-bottom>\n</po-field-container>\n\n<ng-template #dropdownListbox>\n  <div #containerElement class=\"po-combo-container\" [hidden]=\"!comboOpen && !isServerSearching\">\n    <po-listbox\n      #poListbox\n      #contentElement\n      p-type=\"option\"\n      [p-items]=\"visibleOptions\"\n      [p-field-value]=\"dynamicValue\"\n      [p-field-label]=\"dynamicLabel\"\n      [p-template]=\"comboOptionTemplate\"\n      [p-search-value]=\"getInputValue()\"\n      [p-infinite-loading]=\"infiniteLoading\"\n      [p-infinite-scroll]=\"infiniteScroll\"\n      [p-filtering]=\"isFiltering\"\n      [p-cache]=\"cache\"\n      (p-selectcombo-item)=\"onOptionClick($event, $event.event)\"\n      [p-filter-mode]=\"filterMode\"\n      [p-visible]=\"comboOpen\"\n      [p-is-searching]=\"isServerSearching\"\n      [p-should-mark-letter]=\"shouldMarkLetters\"\n      [p-compare-cache]=\"compareObjects(cacheOptions, visibleOptions)\"\n      [p-combo-service]=\"service\"\n      [p-infinite-scroll-distance]=\"infiniteScrollDistance\"\n      (p-update-infinite-scroll)=\"showMoreInfiniteScroll()\"\n      (p-close)=\"onCloseCombo()\"\n    ></po-listbox>\n  </div>\n</ng-template>\n" }]
+                ], template: "<div #outerContainer>\n  <po-field-container\n    [p-disabled]=\"disabled\"\n    [p-id]=\"id\"\n    [p-label]=\"label\"\n    [p-optional]=\"optional\"\n    [p-required]=\"required\"\n    [p-show-required]=\"showRequired\"\n  >\n    <div cdkOverlayOrigin #trigger=\"cdkOverlayOrigin\" class=\"po-field-container-content po-combo-container-content\">\n      <div *ngIf=\"icon\" class=\"po-field-icon-container-left\">\n        <po-icon\n          class=\"po-field-icon po-icon-input\"\n          [class.po-field-icon-disabled]=\"disabled\"\n          [p-icon]=\"icon\"\n        ></po-icon>\n      </div>\n\n      <input\n        #inp\n        class=\"po-combo-input\"\n        [ngClass]=\"clean && inp.value ? 'po-input-double-icon-right' : 'po-input-icon-right'\"\n        [class.po-input-icon-left]=\"icon\"\n        autocomplete=\"off\"\n        type=\"text\"\n        [attr.name]=\"name\"\n        [disabled]=\"disabled\"\n        [id]=\"id\"\n        [placeholder]=\"disabled ? '' : placeholder\"\n        [required]=\"required\"\n        (click)=\"toggleComboVisibility()\"\n        (keyup)=\"onKeyUp($event)\"\n        (blur)=\"onBlur()\"\n        (keyup)=\"searchOnEnterOrArrow($event, $event.target.value)\"\n        (keydown)=\"onKeyDown($event)\"\n      />\n\n      <div class=\"po-field-icon-container-right\">\n        <po-clean\n          tabindex=\"0\"\n          role=\"button\"\n          [attr.aria-label]=\"literals.clean\"\n          class=\"po-combo-clean po-icon-input\"\n          *ngIf=\"clean && !disabled && inp.value\"\n          [p-element-ref]=\"inputEl\"\n          (p-change-event)=\"clear($event)\"\n          (click)=\"clear(null); $event.preventDefault()\"\n          (keydown.enter)=\"clearAndFocus(); $event.preventDefault()\"\n        >\n        </po-clean>\n\n        <div\n          #iconArrow\n          class=\"po-combo-arrow po-field-icon\"\n          [class.po-field-icon-disabled]=\"disabled\"\n          (click)=\"toggleComboVisibility(true)\"\n        >\n          <po-icon\n            [p-icon]=\"comboOpen ? 'ICON_ARROW_UP po-icon-input' : 'ICON_ARROW_DOWN po-icon-input'\"\n            [class.po-field-icon]=\"!disabled\"\n            [class.po-combo-default-border]=\"!disabled && inp.value\"\n            [class.po-combo-background-arrow-up]=\"!disabled && comboOpen\"\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 [p-help]=\"help\" [p-disabled]=\"disabled\"></po-field-container-bottom>\n  </po-field-container>\n\n  <ng-template #dropdownListbox>\n    <div #containerElement class=\"po-combo-container\" [hidden]=\"!comboOpen && !isServerSearching\">\n      <po-listbox\n        #poListbox\n        #contentElement\n        p-type=\"option\"\n        [p-items]=\"visibleOptions\"\n        [p-field-value]=\"dynamicValue\"\n        [p-field-label]=\"dynamicLabel\"\n        [p-template]=\"comboOptionTemplate\"\n        [p-search-value]=\"getInputValue()\"\n        [p-infinite-loading]=\"infiniteLoading\"\n        [p-infinite-scroll]=\"infiniteScroll\"\n        [p-filtering]=\"isFiltering\"\n        [p-cache]=\"cache\"\n        (p-selectcombo-item)=\"onOptionClick($event, $event.event)\"\n        [p-filter-mode]=\"filterMode\"\n        [p-visible]=\"comboOpen\"\n        [p-is-searching]=\"isServerSearching\"\n        [p-should-mark-letter]=\"shouldMarkLetters\"\n        [p-compare-cache]=\"compareObjects(cacheOptions, visibleOptions)\"\n        [p-combo-service]=\"service\"\n        [p-infinite-scroll-distance]=\"infiniteScrollDistance\"\n        (p-update-infinite-scroll)=\"showMoreInfiniteScroll()\"\n        (p-close)=\"onCloseCombo()\"\n        [p-container-width]=\"containerWidth\"\n      ></po-listbox>\n    </div>\n  </ng-template>\n</div>\n" }]
     }], () => [{ type: i0.ElementRef }, { type: i0.IterableDiffers }, { type: PoComboFilterService }, { type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }, { type: PoControlPositionService }, { type: PoLanguageService }], { comboOptionTemplate: [{
             type: ContentChild,
             args: [PoComboOptionTemplateDirective, { static: true }]
+        }], outerContainer: [{
+            type: ViewChild,
+            args: ['outerContainer ', { read: ElementRef }]
         }], containerElement: [{
             type: ViewChild,
             args: ['containerElement', { read: ElementRef }]
@@ -28985,7 +29042,7 @@ class PoDatepickerRangeBaseComponent {
 const _c0$T = ["dateRangeField"];
 const _c1$m = ["endDateInput"];
 const _c2$a = ["startDateInput"];
-const _c3$5 = ["iconCalendar"];
+const _c3$6 = ["iconCalendar"];
 const _c4$1 = ["calendarPicker"];
 function PoDatepickerRangeComponent_po_clean_12_Template(rf, ctx) { if (rf & 1) {
     const _r2 = i0.ɵɵgetCurrentView();
@@ -29430,7 +29487,7 @@ class PoDatepickerRangeComponent extends PoDatepickerRangeBaseComponent {
             i0.ɵɵviewQuery(_c0$T, 7, ElementRef);
             i0.ɵɵviewQuery(_c1$m, 7, ElementRef);
             i0.ɵɵviewQuery(_c2$a, 7, ElementRef);
-            i0.ɵɵviewQuery(_c3$5, 7, ElementRef);
+            i0.ɵɵviewQuery(_c3$6, 7, ElementRef);
             i0.ɵɵviewQuery(_c4$1, 5, ElementRef);
         } if (rf & 2) {
             let _t;
@@ -34700,8 +34757,9 @@ class PoMultiselectFilterService {
 const _c0$M = ["dropdownElement"];
 const _c1$j = ["iconElement"];
 const _c2$9 = ["inputElement"];
-function PoMultiselectComponent_span_5_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 16);
+const _c3$5 = ["outerContainer"];
+function PoMultiselectComponent_span_7_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 17);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -34709,10 +34767,10 @@ function PoMultiselectComponent_span_5_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate1(" ", ctx_r1.placeholder ? ctx_r1.placeholder : ctx_r1.literals.selectItem, " ");
 } }
-function PoMultiselectComponent_po_tag_6_Template(rf, ctx) { if (rf & 1) {
+function PoMultiselectComponent_po_tag_8_Template(rf, ctx) { if (rf & 1) {
     const _r3 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "po-tag", 17);
-    i0.ɵɵlistener("p-close", function PoMultiselectComponent_po_tag_6_Template_po_tag_p_close_0_listener($event) { const tag_r4 = i0.ɵɵrestoreView(_r3).$implicit; const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.closeTag(tag_r4[ctx_r1.fieldValue], $event)); });
+    i0.ɵɵelementStart(0, "po-tag", 18);
+    i0.ɵɵlistener("p-close", function PoMultiselectComponent_po_tag_8_Template_po_tag_p_close_0_listener($event) { const tag_r4 = i0.ɵɵrestoreView(_r3).$implicit; const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.closeTag(tag_r4[ctx_r1.fieldValue], $event)); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const tag_r4 = ctx.$implicit;
@@ -34721,44 +34779,44 @@ function PoMultiselectComponent_po_tag_6_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵclassProp("po-clickable", tag_r4[ctx_r1.fieldValue] === "" && !ctx_r1.disabled);
     i0.ɵɵproperty("p-value", tag_r4[ctx_r1.fieldLabel])("p-literals", i_r5 + 1 === ctx_r1.visibleTags.length && ctx_r1.hasMoreTag ? ctx_r1.literalsTag : undefined)("p-removable", true)("p-disabled", ctx_r1.disabled);
 } }
-function PoMultiselectComponent_ng_container_10_Template(rf, ctx) { if (rf & 1) {
+function PoMultiselectComponent_ng_container_12_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainer(0);
 } }
-function PoMultiselectComponent_ng_template_11_ng_container_0_Template(rf, ctx) { if (rf & 1) {
+function PoMultiselectComponent_ng_template_13_ng_container_0_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainer(0);
 } }
-function PoMultiselectComponent_ng_template_11_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵtemplate(0, PoMultiselectComponent_ng_template_11_ng_container_0_Template, 1, 0, "ng-container", 18);
+function PoMultiselectComponent_ng_template_13_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵtemplate(0, PoMultiselectComponent_ng_template_13_ng_container_0_Template, 1, 0, "ng-container", 19);
 } if (rf & 2) {
     i0.ɵɵnextContext();
-    const dropdownListbox_r6 = i0.ɵɵreference(17);
+    const dropdownListbox_r6 = i0.ɵɵreference(19);
     i0.ɵɵproperty("ngTemplateOutlet", dropdownListbox_r6);
 } }
-function PoMultiselectComponent_ng_template_13_ng_template_0_ng_container_0_Template(rf, ctx) { if (rf & 1) {
+function PoMultiselectComponent_ng_template_15_ng_template_0_ng_container_0_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainer(0);
 } }
-function PoMultiselectComponent_ng_template_13_ng_template_0_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵtemplate(0, PoMultiselectComponent_ng_template_13_ng_template_0_ng_container_0_Template, 1, 0, "ng-container", 18);
+function PoMultiselectComponent_ng_template_15_ng_template_0_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵtemplate(0, PoMultiselectComponent_ng_template_15_ng_template_0_ng_container_0_Template, 1, 0, "ng-container", 19);
 } if (rf & 2) {
     i0.ɵɵnextContext(2);
-    const dropdownListbox_r6 = i0.ɵɵreference(17);
+    const dropdownListbox_r6 = i0.ɵɵreference(19);
     i0.ɵɵproperty("ngTemplateOutlet", dropdownListbox_r6);
 } }
-function PoMultiselectComponent_ng_template_13_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵtemplate(0, PoMultiselectComponent_ng_template_13_ng_template_0_Template, 1, 1, "ng-template", 19);
+function PoMultiselectComponent_ng_template_15_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵtemplate(0, PoMultiselectComponent_ng_template_15_ng_template_0_Template, 1, 1, "ng-template", 20);
 } if (rf & 2) {
     i0.ɵɵnextContext();
-    const trigger_r7 = i0.ɵɵreference(2);
+    const trigger_r7 = i0.ɵɵreference(4);
     i0.ɵɵproperty("cdkConnectedOverlayOrigin", trigger_r7)("cdkConnectedOverlayOpen", true);
 } }
-function PoMultiselectComponent_ng_template_16_Template(rf, ctx) { if (rf & 1) {
+function PoMultiselectComponent_ng_template_18_Template(rf, ctx) { if (rf & 1) {
     const _r8 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "po-multiselect-dropdown", 20, 6);
-    i0.ɵɵlistener("p-change", function PoMultiselectComponent_ng_template_16_Template_po_multiselect_dropdown_p_change_0_listener($event) { i0.ɵɵrestoreView(_r8); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.changeItems($event)); })("p-change-search", function PoMultiselectComponent_ng_template_16_Template_po_multiselect_dropdown_p_change_search_0_listener($event) { i0.ɵɵrestoreView(_r8); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.changeSearch($event)); })("p-close-dropdown", function PoMultiselectComponent_ng_template_16_Template_po_multiselect_dropdown_p_close_dropdown_0_listener() { i0.ɵɵrestoreView(_r8); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.controlDropdownVisibility(false)); })("keydown", function PoMultiselectComponent_ng_template_16_Template_po_multiselect_dropdown_keydown_0_listener($event) { i0.ɵɵrestoreView(_r8); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onKeyDownDropdown($event, 0)); });
+    i0.ɵɵelementStart(0, "po-multiselect-dropdown", 21, 7);
+    i0.ɵɵlistener("p-change", function PoMultiselectComponent_ng_template_18_Template_po_multiselect_dropdown_p_change_0_listener($event) { i0.ɵɵrestoreView(_r8); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.changeItems($event)); })("p-change-search", function PoMultiselectComponent_ng_template_18_Template_po_multiselect_dropdown_p_change_search_0_listener($event) { i0.ɵɵrestoreView(_r8); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.changeSearch($event)); })("p-close-dropdown", function PoMultiselectComponent_ng_template_18_Template_po_multiselect_dropdown_p_close_dropdown_0_listener() { i0.ɵɵrestoreView(_r8); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.controlDropdownVisibility(false)); })("keydown", function PoMultiselectComponent_ng_template_18_Template_po_multiselect_dropdown_keydown_0_listener($event) { i0.ɵɵrestoreView(_r8); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onKeyDownDropdown($event, 0)); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
-    i0.ɵɵproperty("p-searching", ctx_r1.isServerSearching)("p-hide-search", ctx_r1.hideSearch)("p-hide-select-all", ctx_r1.hideSelectAll)("p-literals", ctx_r1.literals)("p-options", ctx_r1.options)("p-visible-options", ctx_r1.visibleOptionsDropdown)("p-selected-options", ctx_r1.selectedOptions)("p-placeholder-search", ctx_r1.placeholderSearch)("p-field-value", ctx_r1.fieldValue)("p-field-label", ctx_r1.fieldLabel)("p-multiselect-template", ctx_r1.multiselectOptionTemplate);
+    i0.ɵɵproperty("p-searching", ctx_r1.isServerSearching)("p-hide-search", ctx_r1.hideSearch)("p-hide-select-all", ctx_r1.hideSelectAll)("p-literals", ctx_r1.literals)("p-options", ctx_r1.options)("p-visible-options", ctx_r1.visibleOptionsDropdown)("p-selected-options", ctx_r1.selectedOptions)("p-placeholder-search", ctx_r1.placeholderSearch)("p-field-value", ctx_r1.fieldValue)("p-field-label", ctx_r1.fieldLabel)("p-multiselect-template", ctx_r1.multiselectOptionTemplate)("p-container-width", ctx_r1.containerWidth);
 } }
 const poMultiselectContainerOffset = 8;
 const poMultiselectContainerPositionDefault = 'bottom';
@@ -34848,6 +34906,7 @@ class PoMultiselectComponent extends PoMultiselectBaseComponent {
     dropdown;
     iconElement;
     inputElement;
+    outerContainer;
     literalsTag;
     dropdownIcon = 'ICON_ARROW_DOWN';
     dropdownOpen = false;
@@ -34855,6 +34914,7 @@ class PoMultiselectComponent extends PoMultiselectBaseComponent {
     hasMoreTag;
     timeoutResize;
     visibleElement = false;
+    containerWidth;
     subscription = new Subscription();
     enterCloseTag = false;
     initCalculateItems = true;
@@ -35269,6 +35329,9 @@ class PoMultiselectComponent extends PoMultiselectBaseComponent {
         this.scrollToSelectedOptions();
         this.changeDetector.detectChanges();
         this.setPositionDropdown();
+        if (this.dropdownOpen) {
+            this.setContainerWidth();
+        }
     }
     removeListeners() {
         if (this.clickOutListener) {
@@ -35280,6 +35343,11 @@ class PoMultiselectComponent extends PoMultiselectBaseComponent {
         window.removeEventListener('scroll', this.onScroll, true);
         this.changeDetector.markForCheck();
     }
+    setContainerWidth() {
+        if (this.outerContainer) {
+            this.containerWidth = this.outerContainer.nativeElement.offsetWidth;
+        }
+    }
     setPositionDropdown() {
         this.controlPosition.setElements(this.dropdown.container.nativeElement, poMultiselectContainerOffset, this.inputElement, ['top', 'bottom'], true);
         this.adjustContainerPosition();
@@ -35295,27 +35363,31 @@ class PoMultiselectComponent extends PoMultiselectBaseComponent {
             i0.ɵɵviewQuery(_c0$M, 5);
             i0.ɵɵviewQuery(_c1$j, 7, ElementRef);
             i0.ɵɵviewQuery(_c2$9, 7, ElementRef);
+            i0.ɵɵviewQuery(_c3$5, 5, ElementRef);
         } if (rf & 2) {
             let _t;
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.dropdownElement = _t.first);
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.dropdown = _t.first);
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.iconElement = _t.first);
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.inputElement = _t.first);
-        } }, features: [i0.ɵɵProvidersFeature(providers$1), i0.ɵɵInheritDefinitionFeature, i0.ɵɵNgOnChangesFeature], decls: 18, vars: 30, consts: [["trigger", "cdkOverlayOrigin"], ["inputElement", ""], ["iconElement", ""], ["dropdownDefault", ""], ["dropdownCDK", ""], ["dropdownListbox", ""], ["dropdownElement", ""], [3, "p-disabled", "p-label", "p-optional", "p-required", "p-show-required"], ["cdkOverlayOrigin", "", 1, "po-field-container-content"], [1, "po-input-icon-right", "po-multiselect-input", 3, "keydown", "click", "blur", "tabindex"], ["class", "po-multiselect-input-placeholder", "aria-hidden", "true", 4, "ngIf"], [3, "p-value", "p-literals", "p-removable", "po-clickable", "p-disabled", "p-close", 4, "ngFor", "ngForOf"], [1, "po-field-icon-container-right"], [3, "p-icon", "ngClass"], [4, "ngIf", "ngIfThen", "ngIfElse"], [3, "p-help", "p-disabled"], ["aria-hidden", "true", 1, "po-multiselect-input-placeholder"], [3, "p-close", "p-value", "p-literals", "p-removable", "p-disabled"], [4, "ngTemplateOutlet"], ["cdkConnectedOverlay", "", 3, "cdkConnectedOverlayOrigin", "cdkConnectedOverlayOpen"], [3, "p-change", "p-change-search", "p-close-dropdown", "keydown", "p-searching", "p-hide-search", "p-hide-select-all", "p-literals", "p-options", "p-visible-options", "p-selected-options", "p-placeholder-search", "p-field-value", "p-field-label", "p-multiselect-template"]], template: function PoMultiselectComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.outerContainer = _t.first);
+        } }, features: [i0.ɵɵProvidersFeature(providers$1), i0.ɵɵInheritDefinitionFeature, i0.ɵɵNgOnChangesFeature], decls: 20, vars: 30, consts: [["outerContainer", ""], ["trigger", "cdkOverlayOrigin"], ["inputElement", ""], ["iconElement", ""], ["dropdownDefault", ""], ["dropdownCDK", ""], ["dropdownListbox", ""], ["dropdownElement", ""], [3, "p-disabled", "p-label", "p-optional", "p-required", "p-show-required"], ["cdkOverlayOrigin", "", 1, "po-field-container-content"], [1, "po-input-icon-right", "po-multiselect-input", 3, "keydown", "click", "blur", "tabindex"], ["class", "po-multiselect-input-placeholder", "aria-hidden", "true", 4, "ngIf"], [3, "p-value", "p-literals", "p-removable", "po-clickable", "p-disabled", "p-close", 4, "ngFor", "ngForOf"], [1, "po-field-icon-container-right"], [3, "p-icon", "ngClass"], [4, "ngIf", "ngIfThen", "ngIfElse"], [3, "p-help", "p-disabled"], ["aria-hidden", "true", 1, "po-multiselect-input-placeholder"], [3, "p-close", "p-value", "p-literals", "p-removable", "p-disabled"], [4, "ngTemplateOutlet"], ["cdkConnectedOverlay", "", 3, "cdkConnectedOverlayOrigin", "cdkConnectedOverlayOpen"], [3, "p-change", "p-change-search", "p-close-dropdown", "keydown", "p-searching", "p-hide-search", "p-hide-select-all", "p-literals", "p-options", "p-visible-options", "p-selected-options", "p-placeholder-search", "p-field-value", "p-field-label", "p-multiselect-template", "p-container-width"]], template: function PoMultiselectComponent_Template(rf, ctx) { if (rf & 1) {
             const _r1 = i0.ɵɵgetCurrentView();
-            i0.ɵɵelementStart(0, "po-field-container", 7)(1, "div", 8, 0)(3, "div", 9, 1);
-            i0.ɵɵlistener("keydown", function PoMultiselectComponent_Template_div_keydown_3_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onKeyDown($event)); })("click", function PoMultiselectComponent_Template_div_click_3_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.toggleDropdownVisibility()); })("blur", function PoMultiselectComponent_Template_div_blur_3_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onBlur()); });
-            i0.ɵɵtemplate(5, PoMultiselectComponent_span_5_Template, 2, 1, "span", 10)(6, PoMultiselectComponent_po_tag_6_Template, 1, 6, "po-tag", 11);
-            i0.ɵɵelementStart(7, "div", 12);
-            i0.ɵɵelement(8, "po-icon", 13, 2);
+            i0.ɵɵelementStart(0, "div", null, 0)(2, "po-field-container", 8)(3, "div", 9, 1)(5, "div", 10, 2);
+            i0.ɵɵlistener("keydown", function PoMultiselectComponent_Template_div_keydown_5_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onKeyDown($event)); })("click", function PoMultiselectComponent_Template_div_click_5_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.toggleDropdownVisibility()); })("blur", function PoMultiselectComponent_Template_div_blur_5_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onBlur()); });
+            i0.ɵɵtemplate(7, PoMultiselectComponent_span_7_Template, 2, 1, "span", 11)(8, PoMultiselectComponent_po_tag_8_Template, 1, 6, "po-tag", 12);
+            i0.ɵɵelementStart(9, "div", 13);
+            i0.ɵɵelement(10, "po-icon", 14, 3);
             i0.ɵɵelementEnd()()();
-            i0.ɵɵtemplate(10, PoMultiselectComponent_ng_container_10_Template, 1, 0, "ng-container", 14)(11, PoMultiselectComponent_ng_template_11_Template, 1, 1, "ng-template", null, 3, i0.ɵɵtemplateRefExtractor)(13, PoMultiselectComponent_ng_template_13_Template, 1, 2, "ng-template", null, 4, i0.ɵɵtemplateRefExtractor);
-            i0.ɵɵelement(15, "po-field-container-bottom", 15);
+            i0.ɵɵtemplate(12, PoMultiselectComponent_ng_container_12_Template, 1, 0, "ng-container", 15)(13, PoMultiselectComponent_ng_template_13_Template, 1, 1, "ng-template", null, 4, i0.ɵɵtemplateRefExtractor)(15, PoMultiselectComponent_ng_template_15_Template, 1, 2, "ng-template", null, 5, i0.ɵɵtemplateRefExtractor);
+            i0.ɵɵelement(17, "po-field-container-bottom", 16);
+            i0.ɵɵelementEnd();
+            i0.ɵɵtemplate(18, PoMultiselectComponent_ng_template_18_Template, 2, 12, "ng-template", null, 6, i0.ɵɵtemplateRefExtractor);
             i0.ɵɵelementEnd();
-            i0.ɵɵtemplate(16, PoMultiselectComponent_ng_template_16_Template, 2, 11, "ng-template", null, 5, i0.ɵɵtemplateRefExtractor);
         } if (rf & 2) {
-            const dropdownDefault_r9 = i0.ɵɵreference(12);
-            const dropdownCDK_r10 = i0.ɵɵreference(14);
+            const dropdownDefault_r9 = i0.ɵɵreference(14);
+            const dropdownCDK_r10 = i0.ɵɵreference(16);
+            i0.ɵɵadvance(2);
             i0.ɵɵproperty("p-disabled", ctx.disabled)("p-label", ctx.label)("p-optional", ctx.optional)("p-required", ctx.required)("p-show-required", ctx.showRequired);
             i0.ɵɵadvance();
             i0.ɵɵclassProp("po-multiselect-show", ctx.dropdownOpen);
@@ -35339,7 +35411,7 @@ class PoMultiselectComponent extends PoMultiselectBaseComponent {
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PoMultiselectComponent, [{
         type: Component,
-        args: [{ selector: 'po-multiselect', changeDetection: ChangeDetectionStrategy.OnPush, providers: providers$1, template: "<po-field-container\n  [p-disabled]=\"disabled\"\n  [p-label]=\"label\"\n  [p-optional]=\"optional\"\n  [p-required]=\"required\"\n  [p-show-required]=\"showRequired\"\n>\n  <div\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      (keydown)=\"onKeyDown($event)\"\n      (click)=\"toggleDropdownVisibility()\"\n      (blur)=\"onBlur()\"\n    >\n      <span *ngIf=\"!disabled && !visibleTags?.length\" class=\"po-multiselect-input-placeholder\" aria-hidden=\"true\">\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          [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 [p-help]=\"help\" [p-disabled]=\"disabled\"></po-field-container-bottom>\n</po-field-container>\n\n<ng-template #dropdownListbox>\n  <po-multiselect-dropdown\n    #dropdownElement\n    [p-searching]=\"isServerSearching\"\n    [p-hide-search]=\"hideSearch\"\n    [p-hide-select-all]=\"hideSelectAll\"\n    [p-literals]=\"literals\"\n    [p-options]=\"options\"\n    [p-visible-options]=\"visibleOptionsDropdown\"\n    [p-selected-options]=\"selectedOptions\"\n    [p-placeholder-search]=\"placeholderSearch\"\n    [p-field-value]=\"fieldValue\"\n    [p-field-label]=\"fieldLabel\"\n    [p-multiselect-template]=\"multiselectOptionTemplate\"\n    (p-change)=\"changeItems($event)\"\n    (p-change-search)=\"changeSearch($event)\"\n    (p-close-dropdown)=\"controlDropdownVisibility(false)\"\n    (keydown)=\"onKeyDownDropdown($event, 0)\"\n  >\n  </po-multiselect-dropdown>\n</ng-template>\n" }]
+        args: [{ selector: 'po-multiselect', changeDetection: ChangeDetectionStrategy.OnPush, providers: providers$1, 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        (keydown)=\"onKeyDown($event)\"\n        (click)=\"toggleDropdownVisibility()\"\n        (blur)=\"onBlur()\"\n      >\n        <span *ngIf=\"!disabled && !visibleTags?.length\" class=\"po-multiselect-input-placeholder\" aria-hidden=\"true\">\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            [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 [p-help]=\"help\" [p-disabled]=\"disabled\"></po-field-container-bottom>\n  </po-field-container>\n\n  <ng-template #dropdownListbox>\n    <po-multiselect-dropdown\n      #dropdownElement\n      [p-searching]=\"isServerSearching\"\n      [p-hide-search]=\"hideSearch\"\n      [p-hide-select-all]=\"hideSelectAll\"\n      [p-literals]=\"literals\"\n      [p-options]=\"options\"\n      [p-visible-options]=\"visibleOptionsDropdown\"\n      [p-selected-options]=\"selectedOptions\"\n      [p-placeholder-search]=\"placeholderSearch\"\n      [p-field-value]=\"fieldValue\"\n      [p-field-label]=\"fieldLabel\"\n      [p-multiselect-template]=\"multiselectOptionTemplate\"\n      (p-change)=\"changeItems($event)\"\n      (p-change-search)=\"changeSearch($event)\"\n      (p-close-dropdown)=\"controlDropdownVisibility(false)\"\n      (keydown)=\"onKeyDownDropdown($event, 0)\"\n      [p-container-width]=\"containerWidth\"\n    >\n    </po-multiselect-dropdown>\n  </ng-template>\n</div>\n" }]
     }], () => [{ type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: PoControlPositionService }, { type: PoMultiselectFilterService }, { type: PoLanguageService }], { multiselectOptionTemplate: [{
             type: ContentChild,
             args: [PoMultiselectOptionTemplateDirective, { static: true }]
@@ -35355,6 +35427,9 @@ class PoMultiselectComponent extends PoMultiselectBaseComponent {
         }], inputElement: [{
             type: ViewChild,
             args: ['inputElement', { read: ElementRef, static: true }]
+        }], outerContainer: [{
+            type: ViewChild,
+            args: ['outerContainer ', { read: ElementRef }]
         }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PoMultiselectComponent, { className: "PoMultiselectComponent", filePath: "lib/components/po-field/po-multiselect/po-multiselect.component.ts", lineNumber: 118 }); })();
 
@@ -41376,6 +41451,7 @@ class PoMultiselectDropdownComponent {
     fieldValue;
     fieldLabel;
     multiselectTemplate;
+    containerWidth;
     /** Evento disparado a cada tecla digitada na pesquisa. */
     changeSearch = new EventEmitter();
     /** Evento disparado a cada alteração na lista das opções selecionadas. */
@@ -41482,7 +41558,7 @@ class PoMultiselectDropdownComponent {
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.container = _t.first);
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.divElement = _t.first);
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.listbox = _t.first);
-        } }, inputs: { isServerSearching: [0, "p-searching", "isServerSearching"], hideSearch: [0, "p-hide-search", "hideSearch"], literals: [0, "p-literals", "literals"], placeholderSearch: [0, "p-placeholder-search", "placeholderSearch"], selectedOptions: [0, "p-selected-options", "selectedOptions"], options: [0, "p-options", "options"], visibleOptions: [0, "p-visible-options", "visibleOptions"], hideSelectAll: [0, "p-hide-select-all", "hideSelectAll"], fieldValue: [0, "p-field-value", "fieldValue"], fieldLabel: [0, "p-field-label", "fieldLabel"], multiselectTemplate: [0, "p-multiselect-template", "multiselectTemplate"] }, outputs: { changeSearch: "p-change-search", change: "p-change", closeDropdown: "p-close-dropdown" }, decls: 7, vars: 15, consts: [["container", ""], ["divElement", ""], ["listbox", ""], [1, "po-multiselect-container", 3, "hidden"], [3, "scrollTop"], ["p-type", "check", 3, "p-change", "p-change-all", "p-change-search", "p-close", "p-items", "p-selected-options", "p-checkboxAllValue", "p-field-value", "p-field-value-search", "p-field-label", "p-literal-search", "p-literals", "p-is-searching", "p-hide-search", "p-hide-select-all", "p-template", "p-placeholder-search"]], template: function PoMultiselectDropdownComponent_Template(rf, ctx) { if (rf & 1) {
+        } }, inputs: { isServerSearching: [0, "p-searching", "isServerSearching"], hideSearch: [0, "p-hide-search", "hideSearch"], literals: [0, "p-literals", "literals"], placeholderSearch: [0, "p-placeholder-search", "placeholderSearch"], selectedOptions: [0, "p-selected-options", "selectedOptions"], options: [0, "p-options", "options"], visibleOptions: [0, "p-visible-options", "visibleOptions"], hideSelectAll: [0, "p-hide-select-all", "hideSelectAll"], fieldValue: [0, "p-field-value", "fieldValue"], fieldLabel: [0, "p-field-label", "fieldLabel"], multiselectTemplate: [0, "p-multiselect-template", "multiselectTemplate"], containerWidth: [0, "p-container-width", "containerWidth"] }, outputs: { changeSearch: "p-change-search", change: "p-change", closeDropdown: "p-close-dropdown" }, decls: 7, vars: 16, consts: [["container", ""], ["divElement", ""], ["listbox", ""], [1, "po-multiselect-container", 3, "hidden"], [3, "scrollTop"], ["p-type", "check", 3, "p-change", "p-change-all", "p-change-search", "p-close", "p-items", "p-selected-options", "p-checkboxAllValue", "p-field-value", "p-field-value-search", "p-field-label", "p-literal-search", "p-literals", "p-is-searching", "p-hide-search", "p-hide-select-all", "p-template", "p-placeholder-search", "p-container-width"]], template: function PoMultiselectDropdownComponent_Template(rf, ctx) { if (rf & 1) {
             const _r1 = i0.ɵɵgetCurrentView();
             i0.ɵɵelementStart(0, "div", 3, 0)(2, "div", 4, 1);
             i0.ɵɵelementContainerStart(4);
@@ -41496,12 +41572,12 @@ class PoMultiselectDropdownComponent {
             i0.ɵɵadvance(2);
             i0.ɵɵproperty("scrollTop", ctx.scrollTop);
             i0.ɵɵadvance(3);
-            i0.ɵɵproperty("p-items", ctx.visibleOptions)("p-selected-options", ctx.selectedOptions)("p-checkboxAllValue", ctx.getStateSelectAll())("p-field-value", ctx.fieldValue)("p-field-value-search", ctx.fieldValue)("p-field-label", ctx.fieldLabel)("p-literal-search", ctx.literals)("p-literals", ctx.literals)("p-is-searching", ctx.isServerSearching)("p-hide-search", ctx.hideSearch)("p-hide-select-all", ctx.hideSelectAll)("p-template", ctx.multiselectTemplate)("p-placeholder-search", ctx.placeholderSearch);
+            i0.ɵɵproperty("p-items", ctx.visibleOptions)("p-selected-options", ctx.selectedOptions)("p-checkboxAllValue", ctx.getStateSelectAll())("p-field-value", ctx.fieldValue)("p-field-value-search", ctx.fieldValue)("p-field-label", ctx.fieldLabel)("p-literal-search", ctx.literals)("p-literals", ctx.literals)("p-is-searching", ctx.isServerSearching)("p-hide-search", ctx.hideSearch)("p-hide-select-all", ctx.hideSelectAll)("p-template", ctx.multiselectTemplate)("p-placeholder-search", ctx.placeholderSearch)("p-container-width", ctx.containerWidth);
         } }, dependencies: [PoListBoxComponent], encapsulation: 2, changeDetection: 0 });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PoMultiselectDropdownComponent, [{
         type: Component,
-        args: [{ selector: 'po-multiselect-dropdown', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div #container class=\"po-multiselect-container\" [hidden]=\"!show\">\n  <div [scrollTop]=\"scrollTop\" #divElement>\n    <ng-container>\n      <po-listbox\n        #listbox\n        p-type=\"check\"\n        [p-items]=\"visibleOptions\"\n        [p-selected-options]=\"selectedOptions\"\n        [p-checkboxAllValue]=\"getStateSelectAll()\"\n        [p-field-value]=\"fieldValue\"\n        [p-field-value-search]=\"fieldValue\"\n        [p-field-label]=\"fieldLabel\"\n        [p-literal-search]=\"literals\"\n        [p-literals]=\"literals\"\n        [p-is-searching]=\"isServerSearching\"\n        [p-hide-search]=\"hideSearch\"\n        [p-hide-select-all]=\"hideSelectAll\"\n        [p-template]=\"multiselectTemplate\"\n        [p-placeholder-search]=\"placeholderSearch\"\n        (p-change)=\"clickItem($event)\"\n        (p-change-all)=\"onClickSelectAll()\"\n        (p-change-search)=\"callChangeSearch($event)\"\n        (p-close)=\"closeDropdown.emit()\"\n      >\n      </po-listbox>\n    </ng-container>\n  </div>\n</div>\n" }]
+        args: [{ selector: 'po-multiselect-dropdown', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div #container class=\"po-multiselect-container\" [hidden]=\"!show\">\n  <div [scrollTop]=\"scrollTop\" #divElement>\n    <ng-container>\n      <po-listbox\n        #listbox\n        p-type=\"check\"\n        [p-items]=\"visibleOptions\"\n        [p-selected-options]=\"selectedOptions\"\n        [p-checkboxAllValue]=\"getStateSelectAll()\"\n        [p-field-value]=\"fieldValue\"\n        [p-field-value-search]=\"fieldValue\"\n        [p-field-label]=\"fieldLabel\"\n        [p-literal-search]=\"literals\"\n        [p-literals]=\"literals\"\n        [p-is-searching]=\"isServerSearching\"\n        [p-hide-search]=\"hideSearch\"\n        [p-hide-select-all]=\"hideSelectAll\"\n        [p-template]=\"multiselectTemplate\"\n        [p-placeholder-search]=\"placeholderSearch\"\n        (p-change)=\"clickItem($event)\"\n        (p-change-all)=\"onClickSelectAll()\"\n        (p-change-search)=\"callChangeSearch($event)\"\n        (p-close)=\"closeDropdown.emit()\"\n        [p-container-width]=\"containerWidth\"\n      >\n      </po-listbox>\n    </ng-container>\n  </div>\n</div>\n" }]
     }], () => [{ type: i0.ChangeDetectorRef }], { isServerSearching: [{
             type: Input,
             args: ['p-searching']
@@ -41535,6 +41611,9 @@ class PoMultiselectDropdownComponent {
         }], multiselectTemplate: [{
             type: Input,
             args: ['p-multiselect-template']
+        }], containerWidth: [{
+            type: Input,
+            args: ['p-container-width']
         }], changeSearch: [{
             type: Output,
             args: ['p-change-search']
@@ -53596,10 +53675,9 @@ class PoTabsComponent extends PoTabsBaseComponent {
             lastTabChildren.widthButton = this.defaultLastTabWidth;
         }
         if (this.tabsChildren) {
-            const _tabsChildren = this.tabsChildrenArray;
+            const _tabsChildren = [...this.tabsChildrenArray];
             if (initialState) {
                 this.tabsDefault = _tabsChildren;
-                this.tabsDropdown = _tabsChildren;
             }
             else {
                 this.tabsDefault = _tabsChildren.slice(0, this.quantityTabsButton);