@po-ui/ng-components 19.17.1 → 19.19.0

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

@@ -13179,6 +13179,7 @@ const gridPaddingValues = {
 class PoChartGridUtils {
     component;
     isTypeDonut = false;
+    textCenterDonut = {};
     constructor(component) {
         this.component = component;
     }
@@ -13315,6 +13316,13 @@ class PoChartGridUtils {
                 itemStyle: { opacity: 0.4 }
             };
             this.component.boundaryGap = true;
+            if (this.component.options?.stacked || serie.stackGroupName) {
+                serie.stack = this.component.options?.stacked ? 'total' : serie.stackGroupName;
+                if (this.component.dataLabel?.fixed !== false) {
+                    this.component.dataLabel = { fixed: true };
+                    serie.label = { show: true };
+                }
+            }
         }
     }
     setSerieTypeDonutPie(serie, color) {
@@ -13329,8 +13337,7 @@ class PoChartGridUtils {
                     borderColor: borderColor,
                     color: color,
                     borderRadius: this.component.options?.borderRadius
-                },
-                label: { show: this.isTypeDonut && this.component.options?.textCenterGraph }
+                }
             };
             this.component.listTypePieDonut[0].data.push(seriePie);
         }
@@ -13361,20 +13368,30 @@ class PoChartGridUtils {
                 center: ['50%', positionHorizontal],
                 radius: radius,
                 roseType: this.component.options?.roseType ? 'area' : undefined,
-                label: {
-                    show: !!(this.isTypeDonut && this.component.options?.textCenterGraph),
-                    position: 'center',
-                    formatter: this.component.options?.textCenterGraph,
-                    fontSize: this.resolvePx('--font-size-md'),
-                    fontWeight: Number(this.component.getCSSVariable('--font-weight-hightlight-value', '.po-chart')),
-                    fontFamily: this.component.getCSSVariable('--font-family-hightlight-value', '.po-chart'),
-                    color: this.component.getCSSVariable('--color-hightlight-value', '.po-chart')
-                },
+                label: { show: false },
                 emphasis: { focus: 'self' },
                 data: [],
                 blur: { itemStyle: { opacity: 0.4 } }
             }
         ];
+        this.setTextCenterDonut();
+    }
+    setTextCenterDonut() {
+        if (this.isTypeDonut && this.component.options?.textCenterGraph) {
+            this.textCenterDonut = {
+                type: 'text',
+                left: 'center',
+                top: this.component.options?.legendVerticalPosition === 'top' ? '52%' : '44%',
+                style: {
+                    text: this.component.options?.textCenterGraph,
+                    fontSize: this.resolvePx('--font-size-md'),
+                    fontWeight: Number(this.component.getCSSVariable('--font-weight-hightlight-value', '.po-chart')),
+                    fontFamily: this.component.getCSSVariable('--font-family-hightlight-value', '.po-chart'),
+                    fill: this.component.getCSSVariable('--color-hightlight-value', '.po-chart')
+                },
+                silent: true
+            };
+        }
     }
     getAdjustedRadius(radius, innerRadius) {
         const radiusValue = parseFloat(radius);
@@ -13901,6 +13918,11 @@ use([
  *  <file name="sample-po-chart-coffee-ranking/sample-po-chart-coffee-ranking.component.ts"> </file>
  * </example>
  *
+ * <example name="po-chart-stacked" title="PO Chart - Stacked">
+ *  <file name="sample-po-chart-stacked/sample-po-chart-stacked.component.html"> </file>
+ *  <file name="sample-po-chart-stacked/sample-po-chart-stacked.component.ts"> </file>
+ * </example>
+ *
  * <example name="po-chart-summary" title="PO Chart - Summary">
  *  <file name="sample-po-chart-summary/sample-po-chart-summary.component.html"> </file>
  *  <file name="sample-po-chart-summary/sample-po-chart-summary.component.ts"> </file>
@@ -14254,6 +14276,9 @@ class PoChartComponent extends PoChartBaseComponent {
                 this.chartGridUtils.setOptionDataZoom(options);
             }
         }
+        else if (this.chartGridUtils.isTypeDonut && this.options?.textCenterGraph) {
+            options.graphic = this.chartGridUtils.textCenterDonut;
+        }
         if (this.options?.legend !== false) {
             this.setOptionLegend(options);
         }
@@ -27008,11 +27033,14 @@ class PoComboComponent extends PoComboBaseComponent {
             if (this.visibleOptions.length) {
                 this.focusItem();
             }
-            this.controlComboVisibility(true);
+            if (this.comboOpen) {
+                this.controlComboVisibility(true);
+            }
+            else {
+                this.toggleComboVisibility();
+            }
             this.isFiltering = this.changeOnEnter ? this.isFiltering : false;
-            return;
         }
-        // Tecla "enter"
         if (key === PoKeyCodeEnum.enter && this.selectedView && this.comboOpen) {
             const isUpdateModel = this.selectedView.value !== this.selectedValue || inputValue !== this.selectedView.label;
             this.controlComboVisibility(false);
@@ -27024,7 +27052,8 @@ class PoComboComponent extends PoComboBaseComponent {
             return;
         }
         if (key === PoKeyCodeEnum.enter) {
-            this.controlComboVisibility(true);
+            event.preventDefault();
+            this.toggleComboVisibility();
         }
         if (key === PoKeyCodeEnum.esc) {
             if (key === this.lastKey) {
@@ -27038,6 +27067,10 @@ class PoComboComponent extends PoComboBaseComponent {
                 this.onCloseCombo();
             }
         }
+        if (key === PoKeyCodeEnum.tab && this.shouldHandleTab(event) && !this.isCleanVisible()) {
+            event.preventDefault();
+            this.focusItem();
+        }
         this.lastKey = event.keyCode;
         if (isFieldFocused) {
             this.keydown.emit(event);
@@ -27307,6 +27340,25 @@ class PoComboComponent extends PoComboBaseComponent {
     updateCacheOptions() {
         this.cacheOptions = this.comboOptionsList.map(item => item.value === this.selectedValue ? { ...item, selected: true } : item);
     }
+    isCleanVisible() {
+        return this.clean && !this.disabled && !!this.inputEl.nativeElement.value;
+    }
+    handleCleanKeyboardTab(event) {
+        if (this.shouldHandleTab(event)) {
+            event.preventDefault();
+            this.focusItem();
+        }
+    }
+    onListboxKeyDown(event) {
+        const key = event?.keyCode;
+        if (key === PoKeyCodeEnum.tab && event.shiftKey) {
+            this.focusInput();
+            event.preventDefault();
+        }
+        if (key === PoKeyCodeEnum.esc) {
+            event.stopPropagation();
+        }
+    }
     adjustContainerPosition() {
         this.controlPosition.adjustPosition(this.listboxControlPosition);
     }
@@ -27382,7 +27434,7 @@ class PoComboComponent extends PoComboBaseComponent {
         window.removeEventListener('scroll', this.onScroll, true);
     }
     setContainerPosition() {
-        this.controlPosition.setElements(this.containerElement.nativeElement, poComboContainerOffset, this.inputEl, ['top', 'bottom'], true);
+        this.controlPosition?.setElements(this.containerElement?.nativeElement, poComboContainerOffset, this.inputEl, ['top', 'bottom'], true);
         this.adjustContainerPosition();
     }
     setContainerWidth() {
@@ -27402,20 +27454,32 @@ class PoComboComponent extends PoComboBaseComponent {
     setScrollingControl() {
         return this.infiniteScroll ? true : false;
     }
+    // Define o foco no item apropriado do listbox.
     focusItem() {
         this.poListbox?.listboxItemList?.nativeElement.focus();
         setTimeout(() => {
-            let item;
+            let item = null;
             if (this.selectedValue) {
                 item = document.querySelector('.po-listbox-item[aria-selected="true"]');
             }
-            else {
-                item = document.querySelectorAll('.po-listbox-item')[0];
+            if (!item) {
+                const items = document.querySelectorAll('.po-listbox-item');
+                item = items.length > 0 ? items[0] : null;
+            }
+            if (item) {
+                item.focus();
             }
-            this.poListbox?.listboxItemList?.nativeElement.focus();
-            item?.focus();
         });
     }
+    // Define o foco no elemento input do combobox.
+    focusInput(event) {
+        event?.preventDefault();
+        this.inputEl.nativeElement.focus();
+    }
+    // Determina se o tab deve abrir o listbox.
+    shouldHandleTab(event) {
+        return this.comboOpen && this.appendBox && !event.shiftKey;
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: PoComboComponent, deps: [{ token: i0.ElementRef }, { token: i0.IterableDiffers }, { token: PoComboFilterService }, { token: i0.Renderer2 }, { token: PoControlPositionService }, { token: i0.ChangeDetectorRef }, { token: PoThemeService }, { token: PoLanguageService }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.7", type: PoComboComponent, isStandalone: false, selector: "po-combo", providers: [
             PoComboFilterService,
@@ -27430,7 +27494,7 @@ class PoComboComponent extends PoComboBaseComponent {
                 useExisting: forwardRef(() => PoComboComponent),
                 multi: true
             }
-        ], queries: [{ propertyName: "comboOptionTemplate", first: true, predicate: PoComboOptionTemplateDirective, descendants: true, static: true }], viewQueries: [{ propertyName: "outerContainer", first: true, predicate: ["outerContainer "], descendants: true, read: ElementRef }, { propertyName: "containerElement", first: true, predicate: ["containerElement"], descendants: true, read: ElementRef }, { propertyName: "contentElement", first: true, predicate: ["contentElement"], descendants: true, read: ElementRef }, { propertyName: "iconElement", first: true, predicate: ["iconArrow"], descendants: true, read: ElementRef, static: true }, { propertyName: "inputEl", first: true, predicate: ["inp"], descendants: true, read: ElementRef, static: true }, { propertyName: "poListbox", first: true, predicate: ["poListbox"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, 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\n      #searchContainer\n      cdkOverlayOrigin\n      #trigger=\"cdkOverlayOrigin\"\n      class=\"po-field-container-content po-combo-container-content\"\n    >\n      <div class=\"po-combo-container-wrapper\">\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            [class.po-field-icon-aa]=\"size === 'small'\"\n            [p-icon]=\"icon\"\n          ></po-icon>\n        </div>\n\n        <input\n          #inp\n          class=\"po-combo-input\"\n          [ngClass]=\"\n            clean && inp.value\n              ? size === 'small'\n                ? 'po-input-double-icon-right-aa'\n                : 'po-input-double-icon-right'\n              : size === 'small'\n                ? 'po-input-icon-right-aa'\n                : 'po-input-icon-right'\n          \"\n          [class.po-combo-input-aa]=\"size === 'small'\"\n          [class.po-input-icon-left]=\"icon\"\n          [class.po-input-icon-left-aa]=\"icon && size === 'small'\"\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($event)\"\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            [class.po-combo-clean-aa]=\"size === 'small'\"\n            *ngIf=\"clean && !disabled && inp.value\"\n            [p-element-ref]=\"inputEl\"\n            [p-size]=\"size\"\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            [class.po-field-icon-disabled-aa]=\"disabled && size === 'small'\"\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-field-icon-aa]=\"size === 'small'\"\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    </div>\n\n    <ng-container *ngIf=\"appendBox; then dropdownCDK; else dropdownDefault\"> </ng-container>\n\n    <ng-template #dropdownDefault>\n      <ng-container *ngTemplateOutlet=\"dropdownListbox\"> </ng-container>\n    </ng-template>\n\n    <ng-template #dropdownCDK>\n      <ng-template cdkConnectedOverlay [cdkConnectedOverlayOrigin]=\"trigger\" [cdkConnectedOverlayOpen]=\"true\">\n        <ng-container *ngTemplateOutlet=\"dropdownListbox\"></ng-container>\n      </ng-template>\n    </ng-template>\n\n    <po-field-container-bottom\n      [p-additional-help-tooltip]=\"getAdditionalHelpTooltip()\"\n      [p-append-in-body]=\"appendBox\"\n      [p-help]=\"help\"\n      [p-disabled]=\"disabled\"\n      [p-error-pattern]=\"getErrorPattern()\"\n      [p-error-limit]=\"errorLimit\"\n      [p-show-additional-help]=\"displayAdditionalHelp\"\n      [p-show-additional-help-icon]=\"showAdditionalHelpIcon()\"\n      (p-additional-help)=\"emitAdditionalHelp()\"\n    ></po-field-container-bottom>\n  </po-field-container>\n\n  <ng-template #dropdownListbox>\n    <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-size]=\"size\"\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", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i6$1.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i6$1.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "component", type: PoCleanComponent, selector: "po-clean" }, { kind: "component", type: PoFieldContainerBottomComponent, selector: "po-field-container-bottom", inputs: ["p-additional-help-tooltip", "p-append-in-body", "p-disabled", "p-error-pattern", "p-error-limit", "p-help", "p-show-additional-help", "p-show-additional-help-icon"], outputs: ["p-additional-help"] }, { kind: "component", type: PoFieldContainerComponent, selector: "po-field-container", inputs: ["p-disabled", "p-id", "p-label", "p-help", "p-optional", "p-required", "p-show-required"] }, { kind: "component", type: PoIconComponent, selector: "po-icon", inputs: ["p-icon"] }, { kind: "component", type: PoListBoxComponent, selector: "po-listbox" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        ], queries: [{ propertyName: "comboOptionTemplate", first: true, predicate: PoComboOptionTemplateDirective, descendants: true, static: true }], viewQueries: [{ propertyName: "outerContainer", first: true, predicate: ["outerContainer "], descendants: true, read: ElementRef }, { propertyName: "containerElement", first: true, predicate: ["containerElement"], descendants: true, read: ElementRef }, { propertyName: "contentElement", first: true, predicate: ["contentElement"], descendants: true, read: ElementRef }, { propertyName: "iconElement", first: true, predicate: ["iconArrow"], descendants: true, read: ElementRef, static: true }, { propertyName: "inputEl", first: true, predicate: ["inp"], descendants: true, read: ElementRef, static: true }, { propertyName: "poListbox", first: true, predicate: ["poListbox"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, 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\n      #searchContainer\n      cdkOverlayOrigin\n      #trigger=\"cdkOverlayOrigin\"\n      class=\"po-field-container-content po-combo-container-content\"\n    >\n      <div class=\"po-combo-container-wrapper\">\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            [class.po-field-icon-aa]=\"size === 'small'\"\n            [p-icon]=\"icon\"\n          ></po-icon>\n        </div>\n\n        <input\n          #inp\n          class=\"po-combo-input\"\n          [ngClass]=\"\n            clean && inp.value\n              ? size === 'small'\n                ? 'po-input-double-icon-right-aa'\n                : 'po-input-double-icon-right'\n              : size === 'small'\n                ? 'po-input-icon-right-aa'\n                : 'po-input-icon-right'\n          \"\n          [class.po-combo-input-aa]=\"size === 'small'\"\n          [class.po-input-icon-left]=\"icon\"\n          [class.po-input-icon-left-aa]=\"icon && size === 'small'\"\n          autocomplete=\"off\"\n          type=\"text\"\n          [attr.name]=\"name\"\n          [disabled]=\"disabled\"\n          [id]=\"id\"\n          [placeholder]=\"disabled ? '' : placeholder\"\n          [required]=\"required\"\n          [attr.data-append-in-body]=\"appendBox\"\n          (click)=\"toggleComboVisibility()\"\n          (keyup)=\"onKeyUp($event)\"\n          (blur)=\"onBlur($event)\"\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            [class.po-combo-clean-aa]=\"size === 'small'\"\n            *ngIf=\"isCleanVisible()\"\n            [p-element-ref]=\"inputEl\"\n            [p-size]=\"size\"\n            (p-change-event)=\"clear($event)\"\n            (click)=\"clear(null); $event.preventDefault()\"\n            (keydown.enter)=\"clearAndFocus(); $event.preventDefault()\"\n            (keydown.tab)=\"handleCleanKeyboardTab($event)\"\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            [class.po-field-icon-disabled-aa]=\"disabled && size === 'small'\"\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-field-icon-aa]=\"size === 'small'\"\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    </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\n        cdkConnectedOverlay\n        [cdkConnectedOverlayOrigin]=\"trigger\"\n        [cdkConnectedOverlayOpen]=\"true\"\n        [cdkConnectedOverlayDisableClose]=\"true\"\n      >\n        <ng-container *ngTemplateOutlet=\"dropdownListbox\"></ng-container>\n      </ng-template>\n    </ng-template>\n\n    <po-field-container-bottom\n      [p-additional-help-tooltip]=\"getAdditionalHelpTooltip()\"\n      [p-append-in-body]=\"appendBox\"\n      [p-help]=\"help\"\n      [p-disabled]=\"disabled\"\n      [p-error-pattern]=\"getErrorPattern()\"\n      [p-error-limit]=\"errorLimit\"\n      [p-show-additional-help]=\"displayAdditionalHelp\"\n      [p-show-additional-help-icon]=\"showAdditionalHelpIcon()\"\n      (p-additional-help)=\"emitAdditionalHelp()\"\n    ></po-field-container-bottom>\n  </po-field-container>\n\n  <ng-template #dropdownListbox>\n    <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-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-size]=\"size\"\n        [p-container-width]=\"containerWidth\"\n        (p-selectcombo-item)=\"onOptionClick($event, $event.event)\"\n        (p-update-infinite-scroll)=\"showMoreInfiniteScroll()\"\n        (p-close)=\"onCloseCombo()\"\n        (keydown)=\"onListboxKeyDown($event)\"\n      ></po-listbox>\n    </div>\n  </ng-template>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i6$1.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i6$1.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "component", type: PoCleanComponent, selector: "po-clean" }, { kind: "component", type: PoFieldContainerBottomComponent, selector: "po-field-container-bottom", inputs: ["p-additional-help-tooltip", "p-append-in-body", "p-disabled", "p-error-pattern", "p-error-limit", "p-help", "p-show-additional-help", "p-show-additional-help-icon"], outputs: ["p-additional-help"] }, { kind: "component", type: PoFieldContainerComponent, selector: "po-field-container", inputs: ["p-disabled", "p-id", "p-label", "p-help", "p-optional", "p-required", "p-show-required"] }, { kind: "component", type: PoIconComponent, selector: "po-icon", inputs: ["p-icon"] }, { kind: "component", type: PoListBoxComponent, selector: "po-listbox" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: PoComboComponent, decorators: [{
             type: Component,
@@ -27447,7 +27511,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImpor
                             useExisting: forwardRef(() => PoComboComponent),
                             multi: true
                         }
-                    ], standalone: false, 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\n      #searchContainer\n      cdkOverlayOrigin\n      #trigger=\"cdkOverlayOrigin\"\n      class=\"po-field-container-content po-combo-container-content\"\n    >\n      <div class=\"po-combo-container-wrapper\">\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            [class.po-field-icon-aa]=\"size === 'small'\"\n            [p-icon]=\"icon\"\n          ></po-icon>\n        </div>\n\n        <input\n          #inp\n          class=\"po-combo-input\"\n          [ngClass]=\"\n            clean && inp.value\n              ? size === 'small'\n                ? 'po-input-double-icon-right-aa'\n                : 'po-input-double-icon-right'\n              : size === 'small'\n                ? 'po-input-icon-right-aa'\n                : 'po-input-icon-right'\n          \"\n          [class.po-combo-input-aa]=\"size === 'small'\"\n          [class.po-input-icon-left]=\"icon\"\n          [class.po-input-icon-left-aa]=\"icon && size === 'small'\"\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($event)\"\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            [class.po-combo-clean-aa]=\"size === 'small'\"\n            *ngIf=\"clean && !disabled && inp.value\"\n            [p-element-ref]=\"inputEl\"\n            [p-size]=\"size\"\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            [class.po-field-icon-disabled-aa]=\"disabled && size === 'small'\"\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-field-icon-aa]=\"size === 'small'\"\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    </div>\n\n    <ng-container *ngIf=\"appendBox; then dropdownCDK; else dropdownDefault\"> </ng-container>\n\n    <ng-template #dropdownDefault>\n      <ng-container *ngTemplateOutlet=\"dropdownListbox\"> </ng-container>\n    </ng-template>\n\n    <ng-template #dropdownCDK>\n      <ng-template cdkConnectedOverlay [cdkConnectedOverlayOrigin]=\"trigger\" [cdkConnectedOverlayOpen]=\"true\">\n        <ng-container *ngTemplateOutlet=\"dropdownListbox\"></ng-container>\n      </ng-template>\n    </ng-template>\n\n    <po-field-container-bottom\n      [p-additional-help-tooltip]=\"getAdditionalHelpTooltip()\"\n      [p-append-in-body]=\"appendBox\"\n      [p-help]=\"help\"\n      [p-disabled]=\"disabled\"\n      [p-error-pattern]=\"getErrorPattern()\"\n      [p-error-limit]=\"errorLimit\"\n      [p-show-additional-help]=\"displayAdditionalHelp\"\n      [p-show-additional-help-icon]=\"showAdditionalHelpIcon()\"\n      (p-additional-help)=\"emitAdditionalHelp()\"\n    ></po-field-container-bottom>\n  </po-field-container>\n\n  <ng-template #dropdownListbox>\n    <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-size]=\"size\"\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" }]
+                    ], standalone: false, 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\n      #searchContainer\n      cdkOverlayOrigin\n      #trigger=\"cdkOverlayOrigin\"\n      class=\"po-field-container-content po-combo-container-content\"\n    >\n      <div class=\"po-combo-container-wrapper\">\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            [class.po-field-icon-aa]=\"size === 'small'\"\n            [p-icon]=\"icon\"\n          ></po-icon>\n        </div>\n\n        <input\n          #inp\n          class=\"po-combo-input\"\n          [ngClass]=\"\n            clean && inp.value\n              ? size === 'small'\n                ? 'po-input-double-icon-right-aa'\n                : 'po-input-double-icon-right'\n              : size === 'small'\n                ? 'po-input-icon-right-aa'\n                : 'po-input-icon-right'\n          \"\n          [class.po-combo-input-aa]=\"size === 'small'\"\n          [class.po-input-icon-left]=\"icon\"\n          [class.po-input-icon-left-aa]=\"icon && size === 'small'\"\n          autocomplete=\"off\"\n          type=\"text\"\n          [attr.name]=\"name\"\n          [disabled]=\"disabled\"\n          [id]=\"id\"\n          [placeholder]=\"disabled ? '' : placeholder\"\n          [required]=\"required\"\n          [attr.data-append-in-body]=\"appendBox\"\n          (click)=\"toggleComboVisibility()\"\n          (keyup)=\"onKeyUp($event)\"\n          (blur)=\"onBlur($event)\"\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            [class.po-combo-clean-aa]=\"size === 'small'\"\n            *ngIf=\"isCleanVisible()\"\n            [p-element-ref]=\"inputEl\"\n            [p-size]=\"size\"\n            (p-change-event)=\"clear($event)\"\n            (click)=\"clear(null); $event.preventDefault()\"\n            (keydown.enter)=\"clearAndFocus(); $event.preventDefault()\"\n            (keydown.tab)=\"handleCleanKeyboardTab($event)\"\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            [class.po-field-icon-disabled-aa]=\"disabled && size === 'small'\"\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-field-icon-aa]=\"size === 'small'\"\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    </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\n        cdkConnectedOverlay\n        [cdkConnectedOverlayOrigin]=\"trigger\"\n        [cdkConnectedOverlayOpen]=\"true\"\n        [cdkConnectedOverlayDisableClose]=\"true\"\n      >\n        <ng-container *ngTemplateOutlet=\"dropdownListbox\"></ng-container>\n      </ng-template>\n    </ng-template>\n\n    <po-field-container-bottom\n      [p-additional-help-tooltip]=\"getAdditionalHelpTooltip()\"\n      [p-append-in-body]=\"appendBox\"\n      [p-help]=\"help\"\n      [p-disabled]=\"disabled\"\n      [p-error-pattern]=\"getErrorPattern()\"\n      [p-error-limit]=\"errorLimit\"\n      [p-show-additional-help]=\"displayAdditionalHelp\"\n      [p-show-additional-help-icon]=\"showAdditionalHelpIcon()\"\n      (p-additional-help)=\"emitAdditionalHelp()\"\n    ></po-field-container-bottom>\n  </po-field-container>\n\n  <ng-template #dropdownListbox>\n    <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-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-size]=\"size\"\n        [p-container-width]=\"containerWidth\"\n        (p-selectcombo-item)=\"onOptionClick($event, $event.event)\"\n        (p-update-infinite-scroll)=\"showMoreInfiniteScroll()\"\n        (p-close)=\"onCloseCombo()\"\n        (keydown)=\"onListboxKeyDown($event)\"\n      ></po-listbox>\n    </div>\n  </ng-template>\n</div>\n" }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.IterableDiffers }, { type: PoComboFilterService }, { type: i0.Renderer2 }, { type: PoControlPositionService }, { type: i0.ChangeDetectorRef }, { type: PoThemeService }, { type: PoLanguageService }], propDecorators: { comboOptionTemplate: [{
                 type: ContentChild,
                 args: [PoComboOptionTemplateDirective, { static: true }]
@@ -30793,6 +30857,7 @@ class PoLookupModalBaseComponent {
     page = 1;
     pageSize = 10;
     searchValue = '';
+    appliedSearchValue = '';
     tableLiterals;
     // Propriedade da modal de busca avançada:
     advancedFilterModalTitle = '';
@@ -30890,6 +30955,7 @@ class PoLookupModalBaseComponent {
     createDisclaimer() {
         this.disclaimerGroup.disclaimers = [];
         this.searchValue = '';
+        this.appliedSearchValue = '';
         for (const [key, value] of Object.entries(this.dynamicFormValue)) {
             this.addDisclaimer(value, key);
         }
@@ -30919,15 +30985,17 @@ class PoLookupModalBaseComponent {
         this.disclaimerGroup.disclaimers = [...this.disclaimerGroup.disclaimers, this.disclaimer];
     }
     onChangeDisclaimerGroup() {
-        if (!this.searchValue) {
+        if (!this.appliedSearchValue) {
             this.isLoading = true;
             this.searchValue = '';
+            this.appliedSearchValue = '';
             this.searchFilteredItems();
         }
     }
     search() {
         this.page = 1;
-        if (this.searchValue) {
+        this.appliedSearchValue = this.searchValue;
+        if (this.appliedSearchValue) {
             this.isLoading = true;
             this.disclaimerGroup.disclaimers = [];
             this.searchFilteredItems();
@@ -30937,7 +31005,7 @@ class PoLookupModalBaseComponent {
         }
     }
     searchFilteredItems() {
-        this.searchSubscription = this.getFilteredItems(this.searchValue)
+        this.searchSubscription = this.getFilteredItems(this.appliedSearchValue)
             .pipe(catchError(error => {
             this.setLookupResponseProperties();
             return throwError(error);
@@ -30947,7 +31015,10 @@ class PoLookupModalBaseComponent {
     showMoreEvent() {
         this.page++;
         this.isLoading = true;
-        this.showMoreSubscription = this.getFilteredItems(this.searchValue)
+        if (this.searchValue !== this.appliedSearchValue) {
+            this.searchValue = this.appliedSearchValue;
+        }
+        this.showMoreSubscription = this.getFilteredItems(this.appliedSearchValue)
             .pipe(catchError(error => {
             this.hasNext = false;
             this.isLoading = false;
@@ -52495,11 +52566,13 @@ const NO_MESSAGE_HEADER_PARAM = 'X-PO-No-Message';
  * ## Configuração
  *
  * Para o correto funcionamento do interceptor `po-http-interceptor`, deve ser importado o `BrowserAnimationsModule` no
- * módulo principal da sua aplicação.
+ * módulo principal da sua aplicação. Além disso, é necessário configurar o `HttpClient` para utilizar os interceptors
+ * registrados no Dependency Injection (DI) por meio da função `provideHttpClient(withInterceptorsFromDi())`.
  *
  * Módulo da aplicação:
  * ```
  * import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+ * import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
  * import { PoModule } from '@po-ui/ng-components';
  * ...
  *
@@ -52514,7 +52587,10 @@ const NO_MESSAGE_HEADER_PARAM = 'X-PO-No-Message';
  *     AppComponent,
  *     ...
  *   ],
- *   providers: [],
+ *   providers: [
+ *     provideHttpClient(withInterceptorsFromDi()),
+ *     ...
+ *   ],
  *   bootstrap: [AppComponent]
  * })
  * export class AppModule { }