@po-ui/ng-components 16.5.0 → 16.6.1

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

@@ -5067,7 +5067,7 @@ function PoItemListComponent_div_3_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 13);
     i0.ɵɵlistener("click", function PoItemListComponent_div_3_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r13); const ctx_r12 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r12.onCheckboxItem()); })("keydown", function PoItemListComponent_div_3_Template_div_keydown_0_listener($event) { i0.ɵɵrestoreView(_r13); const ctx_r14 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r14.onCheckboxItemEmit($event)); })("keyup", function PoItemListComponent_div_3_Template_div_keyup_0_listener($event) { i0.ɵɵrestoreView(_r13); const ctx_r15 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r15.onCheckboxItemEmit($event)); });
     i0.ɵɵelementStart(1, "po-checkbox", 14);
-    i0.ɵɵlistener("p-change", function PoItemListComponent_div_3_Template_po_checkbox_p_change_1_listener() { i0.ɵɵrestoreView(_r13); const ctx_r16 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r16.onSelectItem({ label: ctx_r16.label })); });
+    i0.ɵɵlistener("click", function PoItemListComponent_div_3_Template_po_checkbox_click_1_listener() { i0.ɵɵrestoreView(_r13); const ctx_r16 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r16.onCheckboxItem()); })("p-change", function PoItemListComponent_div_3_Template_po_checkbox_p_change_1_listener() { i0.ɵɵrestoreView(_r13); const ctx_r17 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r17.onSelectItem({ label: ctx_r17.label })); });
     i0.ɵɵelementEnd();
     i0.ɵɵtemplate(2, PoItemListComponent_div_3_span_2_Template, 2, 1, "span", 15);
     i0.ɵɵtemplate(3, PoItemListComponent_div_3_ng_template_3_Template, 0, 0, "ng-template", 11);
@@ -5164,7 +5164,7 @@ class PoItemListComponent extends PoItemListBaseComponent {
         } if (rf & 2) {
             let _t;
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.itemList = _t.first);
-        } }, features: [i0.ɵɵInheritDefinitionFeature], decls: 4, vars: 3, consts: [[3, "ngSwitch", "keydown"], ["class", "po-item-list po-item-list__action", 3, "po-item-list__separator", "po-item-list__disabled", "po-item-list__selected", "po-item-list__danger", 4, "ngSwitchDefault"], ["class", "po-item-list po-item-list__option", 3, "po-item-list__separator", "po-item-list__selected", "click", 4, "ngSwitchCase"], ["class", "po-item-list po-item-list__check", 3, "po-item-list__separator", "po-item-list__selected", "po-item-list__disabled", "click", "keydown", "keyup", 4, "ngSwitchCase"], [1, "po-item-list", "po-item-list__action"], ["itemList", ""], ["class", "po-popup-icon-item po-icon", 3, "p-icon", 4, "ngIf"], [1, "po-item-list-label"], [1, "po-popup-icon-item", "po-icon", 3, "p-icon"], [1, "po-item-list", "po-item-list__option", 3, "click"], ["class", "po-item-list-label", 3, "innerHTML", 4, "ngIf"], [3, "ngTemplateOutlet", "ngTemplateOutletContext"], [1, "po-item-list-label", 3, "innerHTML"], [1, "po-item-list", "po-item-list__check", 3, "click", "keydown", "keyup"], [3, "p-disabled-tabindex", "p-checkboxValue", "p-disabled", "p-change"], ["class", "po-item-list__label", 4, "ngIf"], [1, "po-item-list__label"]], template: function PoItemListComponent_Template(rf, ctx) { if (rf & 1) {
+        } }, features: [i0.ɵɵInheritDefinitionFeature], decls: 4, vars: 3, consts: [[3, "ngSwitch", "keydown"], ["class", "po-item-list po-item-list__action", 3, "po-item-list__separator", "po-item-list__disabled", "po-item-list__selected", "po-item-list__danger", 4, "ngSwitchDefault"], ["class", "po-item-list po-item-list__option", 3, "po-item-list__separator", "po-item-list__selected", "click", 4, "ngSwitchCase"], ["class", "po-item-list po-item-list__check", 3, "po-item-list__separator", "po-item-list__selected", "po-item-list__disabled", "click", "keydown", "keyup", 4, "ngSwitchCase"], [1, "po-item-list", "po-item-list__action"], ["itemList", ""], ["class", "po-popup-icon-item po-icon", 3, "p-icon", 4, "ngIf"], [1, "po-item-list-label"], [1, "po-popup-icon-item", "po-icon", 3, "p-icon"], [1, "po-item-list", "po-item-list__option", 3, "click"], ["class", "po-item-list-label", 3, "innerHTML", 4, "ngIf"], [3, "ngTemplateOutlet", "ngTemplateOutletContext"], [1, "po-item-list-label", 3, "innerHTML"], [1, "po-item-list", "po-item-list__check", 3, "click", "keydown", "keyup"], [3, "p-disabled-tabindex", "p-checkboxValue", "p-disabled", "click", "p-change"], ["class", "po-item-list__label", 4, "ngIf"], [1, "po-item-list__label"]], template: function PoItemListComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementContainerStart(0, 0);
             i0.ɵɵlistener("keydown", function PoItemListComponent_Template_ng_container_keydown_0_listener($event) { return ctx.onCheckboxItemEmit($event); });
             i0.ɵɵtemplate(1, PoItemListComponent_div_1_Template, 5, 12, "div", 1);
@@ -5181,7 +5181,7 @@ class PoItemListComponent extends PoItemListBaseComponent {
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PoItemListComponent, [{
         type: Component,
-        args: [{ selector: 'po-item-list', template: "<ng-container [ngSwitch]=\"type\" (keydown)=\"onCheckboxItemEmit($event)\">\n  <div\n    *ngSwitchDefault\n    #itemList\n    [class.po-item-list__separator]=\"separator\"\n    [class.po-item-list__disabled]=\"disabled || !visible\"\n    [class.po-item-list__selected]=\"selected && !disabled\"\n    [attr.aria-disabled]=\"disabled || !visible\"\n    [attr.aria-label]=\"label\"\n    [class.po-item-list__danger]=\"danger\"\n    class=\"po-item-list po-item-list__action\"\n  >\n    <po-icon *ngIf=\"icon\" class=\"po-popup-icon-item po-icon\" [p-icon]=\"icon\"></po-icon>\n    <span class=\"po-item-list-label\">{{ label }}</span>\n  </div>\n\n  <div\n    *ngSwitchCase=\"'option'\"\n    #itemList\n    class=\"po-item-list po-item-list__option\"\n    [class.po-item-list__separator]=\"separator\"\n    [class.po-item-list__selected]=\"selected && !disabled\"\n    [attr.aria-disabled]=\"disabled\"\n    [attr.aria-label]=\"label\"\n    (click)=\"onComboItem(item, $event)\"\n  >\n    <span *ngIf=\"!template\" class=\"po-item-list-label\" [innerHTML]=\"getLabelFormatted(label)\"></span>\n\n    <ng-template [ngTemplateOutlet]=\"template?.templateRef\" [ngTemplateOutletContext]=\"{ $implicit: templateContext }\">\n    </ng-template>\n  </div>\n\n  <div\n    *ngSwitchCase=\"'check'\"\n    class=\"po-item-list po-item-list__check\"\n    [class.po-item-list__separator]=\"separator\"\n    [class.po-item-list__selected]=\"selected && !disabled\"\n    [class.po-item-list__disabled]=\"disabled\"\n    [attr.aria-disabled]=\"disabled\"\n    [attr.aria-label]=\"label\"\n    (click)=\"onCheckboxItem()\"\n    (keydown)=\"onCheckboxItemEmit($event)\"\n    (keyup)=\"onCheckboxItemEmit($event)\"\n  >\n    <po-checkbox\n      [p-disabled-tabindex]=\"true\"\n      [p-checkboxValue]=\"checkboxValue === null ? 'mixed' : checkboxValue\"\n      [p-disabled]=\"disabled\"\n      (p-change)=\"onSelectItem({label})\"\n    ></po-checkbox>\n\n    <span class=\"po-item-list__label\" *ngIf=\"!template\">{{ label }}</span>\n\n    <ng-template [ngTemplateOutlet]=\"template?.templateRef\" [ngTemplateOutletContext]=\"{ $implicit: templateContext }\">\n    </ng-template>\n  </div>\n</ng-container>\n" }]
+        args: [{ selector: 'po-item-list', template: "<ng-container [ngSwitch]=\"type\" (keydown)=\"onCheckboxItemEmit($event)\">\n  <div\n    *ngSwitchDefault\n    #itemList\n    [class.po-item-list__separator]=\"separator\"\n    [class.po-item-list__disabled]=\"disabled || !visible\"\n    [class.po-item-list__selected]=\"selected && !disabled\"\n    [attr.aria-disabled]=\"disabled || !visible\"\n    [attr.aria-label]=\"label\"\n    [class.po-item-list__danger]=\"danger\"\n    class=\"po-item-list po-item-list__action\"\n  >\n    <po-icon *ngIf=\"icon\" class=\"po-popup-icon-item po-icon\" [p-icon]=\"icon\"></po-icon>\n    <span class=\"po-item-list-label\">{{ label }}</span>\n  </div>\n\n  <div\n    *ngSwitchCase=\"'option'\"\n    #itemList\n    class=\"po-item-list po-item-list__option\"\n    [class.po-item-list__separator]=\"separator\"\n    [class.po-item-list__selected]=\"selected && !disabled\"\n    [attr.aria-disabled]=\"disabled\"\n    [attr.aria-label]=\"label\"\n    (click)=\"onComboItem(item, $event)\"\n  >\n    <span *ngIf=\"!template\" class=\"po-item-list-label\" [innerHTML]=\"getLabelFormatted(label)\"></span>\n\n    <ng-template [ngTemplateOutlet]=\"template?.templateRef\" [ngTemplateOutletContext]=\"{ $implicit: templateContext }\">\n    </ng-template>\n  </div>\n\n  <div\n    *ngSwitchCase=\"'check'\"\n    class=\"po-item-list po-item-list__check\"\n    [class.po-item-list__separator]=\"separator\"\n    [class.po-item-list__selected]=\"selected && !disabled\"\n    [class.po-item-list__disabled]=\"disabled\"\n    [attr.aria-disabled]=\"disabled\"\n    [attr.aria-label]=\"label\"\n    (click)=\"onCheckboxItem()\"\n    (keydown)=\"onCheckboxItemEmit($event)\"\n    (keyup)=\"onCheckboxItemEmit($event)\"\n  >\n    <po-checkbox\n      [p-disabled-tabindex]=\"true\"\n      [p-checkboxValue]=\"checkboxValue === null ? 'mixed' : checkboxValue\"\n      [p-disabled]=\"disabled\"\n      (click)=\"onCheckboxItem()\"\n      (p-change)=\"onSelectItem({label})\"\n    ></po-checkbox>\n\n    <span class=\"po-item-list__label\" *ngIf=\"!template\">{{ label }}</span>\n\n    <ng-template [ngTemplateOutlet]=\"template?.templateRef\" [ngTemplateOutletContext]=\"{ $implicit: templateContext }\">\n    </ng-template>\n  </div>\n</ng-container>\n" }]
     }], function () { return [{ type: i1$1.DomSanitizer }]; }, { itemList: [{
             type: ViewChild,
             args: ['itemList', { static: true }]
@@ -5334,6 +5334,7 @@ function PoListBoxComponent_ng_container_4_li_4_Template(rf, ctx) { if (rf & 1)
 } if (rf & 2) {
     const item_r19 = ctx.$implicit;
     const ctx_r15 = i0.ɵɵnextContext(2);
+    i0.ɵɵclassProp("po-listbox-item", ctx_r15.visible);
     i0.ɵɵproperty("cdkOption", item_r19[ctx_r15.fieldLabel])("cdkOptionDisabled", ctx_r15.returnBooleanValue(item_r19, "disabled") || ctx_r15.returnBooleanValue(item_r19, "visible") === false || item_r19.options);
     i0.ɵɵattribute("aria-selected", ctx_r15.isSelectedItem(item_r19) || item_r19.selected);
     i0.ɵɵadvance(1);
@@ -5345,7 +5346,7 @@ function PoListBoxComponent_ng_container_4_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainerStart(0);
     i0.ɵɵelementStart(1, "ul", 10, 11);
     i0.ɵɵtemplate(3, PoListBoxComponent_ng_container_4_li_3_Template, 2, 4, "li", 12);
-    i0.ɵɵtemplate(4, PoListBoxComponent_ng_container_4_li_4_Template, 3, 5, "li", 13);
+    i0.ɵɵtemplate(4, PoListBoxComponent_ng_container_4_li_4_Template, 3, 7, "li", 13);
     i0.ɵɵelementEnd();
     i0.ɵɵelementContainerEnd();
 } if (rf & 2) {
@@ -5560,7 +5561,7 @@ 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: 12, vars: 8, consts: [[1, "po-listbox", 3, "hidden"], ["listbox", ""], [3, "p-literals", "p-field-value", "p-placeholder", "p-change", 4, "ngIf"], [4, "ngIf", "ngIfElse"], ["class", "po-text-center", 4, "ngIf"], ["scrollLoadingTemplate", ""], ["defaultLoadingTemplate", ""], ["noDataTemplate", ""], [3, "p-literals", "p-field-value", "p-placeholder", "p-change"], ["searchElement", ""], ["cdkListbox", "", 1, "po-listbox-list", 3, "cdkListboxMultiple"], ["listboxItemList", ""], ["cdkOption", "selectAll", 3, "click", "keydown", 4, "ngIf"], ["class", "po-listbox-item", 3, "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"], [1, "po-listbox-item", 3, "cdkOption", "cdkOptionDisabled", "click", "keydown"], ["class", "po-combo-item-title", 4, "ngIf"], [3, "p-disabled", "p-visible", "p-checkbox-value", "p-label", "p-value", "p-selected", "p-separator", "p-danger", "p-icon", "p-type", "p-item", "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-select-item", 4, "ngIf"], [1, "po-combo-item-title"], [3, "p-disabled", "p-visible", "p-checkbox-value", "p-label", "p-value", "p-selected", "p-separator", "p-danger", "p-icon", "p-type", "p-item", "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-select-item"], [1, "po-text-center"], [4, "ngIf", "ngIfThen", "ngIfElse"], [1, "po-listbox-container-loading-scroll"], [1, "po-listbox-container-loading-default"], ["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) {
+        } }, features: [i0.ɵɵInheritDefinitionFeature, i0.ɵɵNgOnChangesFeature], ngContentSelectors: _c4$5, decls: 12, vars: 8, consts: [[1, "po-listbox", 3, "hidden"], ["listbox", ""], [3, "p-literals", "p-field-value", "p-placeholder", "p-change", 4, "ngIf"], [4, "ngIf", "ngIfElse"], ["class", "po-text-center", 4, "ngIf"], ["scrollLoadingTemplate", ""], ["defaultLoadingTemplate", ""], ["noDataTemplate", ""], [3, "p-literals", "p-field-value", "p-placeholder", "p-change"], ["searchElement", ""], ["cdkListbox", "", 1, "po-listbox-list", 3, "cdkListboxMultiple"], ["listboxItemList", ""], ["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, "cdkOption", "cdkOptionDisabled", "click", "keydown"], ["class", "po-combo-item-title", 4, "ngIf"], [3, "p-disabled", "p-visible", "p-checkbox-value", "p-label", "p-value", "p-selected", "p-separator", "p-danger", "p-icon", "p-type", "p-item", "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-select-item", 4, "ngIf"], [1, "po-combo-item-title"], [3, "p-disabled", "p-visible", "p-checkbox-value", "p-label", "p-value", "p-selected", "p-separator", "p-danger", "p-icon", "p-type", "p-item", "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-select-item"], [1, "po-text-center"], [4, "ngIf", "ngIfThen", "ngIfElse"], [1, "po-listbox-container-loading-scroll"], [1, "po-listbox-container-loading-default"], ["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$c);
             i0.ɵɵelementStart(0, "div", 0, 1);
             i0.ɵɵprojection(2);
@@ -5586,7 +5587,7 @@ class PoListBoxComponent extends PoListBoxBaseComponent {
 }
 (function () { (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      >\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\"\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]=\"item | json\"\n          [p-label]=\"item[fieldLabel]\"\n          [p-value]=\"item[fieldValue]\"\n          [p-selected]=\"isSelectedItem(item) || item.selected\"\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-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($event)\"\n          (p-select-item)=\"onSelectCheckBoxItem(item)\"\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-text-center\">\n    <ng-container *ngIf=\"infiniteLoading; then scrollLoadingTemplate; else defaultLoadingTemplate\"></ng-container>\n  </div>\n\n  <ng-template #scrollLoadingTemplate>\n    <po-loading-overlay class=\"po-listbox-container-loading-scroll\"></po-loading-overlay>\n  </ng-template>\n\n  <ng-template #defaultLoadingTemplate>\n    <po-loading class=\"po-listbox-container-loading-default\"></po-loading>\n  </ng-template>\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      >\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]=\"item | json\"\n          [p-label]=\"item[fieldLabel]\"\n          [p-value]=\"item[fieldValue]\"\n          [p-selected]=\"isSelectedItem(item) || item.selected\"\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-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($event)\"\n          (p-select-item)=\"onSelectCheckBoxItem(item)\"\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-text-center\">\n    <ng-container *ngIf=\"infiniteLoading; then scrollLoadingTemplate; else defaultLoadingTemplate\"></ng-container>\n  </div>\n\n  <ng-template #scrollLoadingTemplate>\n    <po-loading-overlay class=\"po-listbox-container-loading-scroll\"></po-loading-overlay>\n  </ng-template>\n\n  <ng-template #defaultLoadingTemplate>\n    <po-loading class=\"po-listbox-container-loading-default\"></po-loading>\n  </ng-template>\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" }]
     }], function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: PoLanguageService }, { type: i2.Router }, { type: i0.ChangeDetectorRef }]; }, { listbox: [{
             type: ViewChild,
             args: ['listbox', { static: true }]
@@ -24133,19 +24134,23 @@ class PoComboOptionTemplateDirective {
 const poComboLiteralsDefault = {
     en: {
         noData: 'No data found',
-        chooseOption: 'Choose an option'
+        chooseOption: 'Choose an option',
+        clear: 'Clear'
     },
     es: {
         noData: 'Datos no encontrados',
-        chooseOption: 'Elija una opción'
+        chooseOption: 'Elija una opción',
+        clear: 'limpia'
     },
     pt: {
         noData: 'Nenhum dado encontrado',
-        chooseOption: 'Escolha uma opção'
+        chooseOption: 'Escolha uma opção',
+        clear: 'Apagar'
     },
     ru: {
         noData: 'Данные не найдены',
-        chooseOption: 'Выберите опцию'
+        chooseOption: 'Выберите опцию',
+        clear: 'чистый'
     }
 };
 
@@ -24910,6 +24915,9 @@ class PoComboBaseComponent {
         this.updateComboList();
         this.initInputObservable();
         this.updateHasNext();
+        if (this.service || this.filterService) {
+            this.keyupSubscribe.unsubscribe();
+        }
     }
     configAfterSetFilterService(service) {
         if (service) {
@@ -25259,14 +25267,17 @@ 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_div_7_Template(rf, ctx) { if (rf & 1) {
     const _r13 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "po-clean", 17);
-    i0.ɵɵlistener("p-change-event", function PoComboComponent_po_clean_7_Template_po_clean_p_change_event_0_listener($event) { i0.ɵɵrestoreView(_r13); const ctx_r12 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r12.clear($event)); });
+    i0.ɵɵelementStart(0, "div", 17);
+    i0.ɵɵlistener("click", function PoComboComponent_div_7_Template_div_click_0_listener($event) { i0.ɵɵrestoreView(_r13); const ctx_r12 = i0.ɵɵnextContext(); ctx_r12.clear(null); return i0.ɵɵresetView($event.preventDefault()); })("keydown.enter", function PoComboComponent_div_7_Template_div_keydown_enter_0_listener($event) { i0.ɵɵrestoreView(_r13); const ctx_r14 = i0.ɵɵnextContext(); ctx_r14.clearAndFocus(); return i0.ɵɵresetView($event.preventDefault()); });
+    i0.ɵɵelement(1, "span", 18);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r3 = i0.ɵɵnextContext();
-    i0.ɵɵproperty("p-element-ref", ctx_r3.inputEl);
+    i0.ɵɵattribute("aria-label", ctx_r3.literals.clean);
+    i0.ɵɵadvance(1);
+    i0.ɵɵclassProp("po-border-focused", !ctx_r3.disabled && ctx_r3.comboOpen);
 } }
 function PoComboComponent_ng_container_10_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainer(0);
@@ -25275,7 +25286,7 @@ function PoComboComponent_ng_template_11_ng_container_0_Template(rf, ctx) { if (
     i0.ɵɵelementContainer(0);
 } }
 function PoComboComponent_ng_template_11_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵtemplate(0, PoComboComponent_ng_template_11_ng_container_0_Template, 1, 0, "ng-container", 18);
+    i0.ɵɵtemplate(0, PoComboComponent_ng_template_11_ng_container_0_Template, 1, 0, "ng-container", 19);
 } if (rf & 2) {
     i0.ɵɵnextContext();
     const _r10 = i0.ɵɵreference(17);
@@ -25285,23 +25296,23 @@ function PoComboComponent_ng_template_13_ng_template_0_ng_container_0_Template(r
     i0.ɵɵelementContainer(0);
 } }
 function PoComboComponent_ng_template_13_ng_template_0_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵtemplate(0, PoComboComponent_ng_template_13_ng_template_0_ng_container_0_Template, 1, 0, "ng-container", 18);
+    i0.ɵɵtemplate(0, PoComboComponent_ng_template_13_ng_template_0_ng_container_0_Template, 1, 0, "ng-container", 19);
 } if (rf & 2) {
     i0.ɵɵnextContext(2);
     const _r10 = i0.ɵɵreference(17);
     i0.ɵɵproperty("ngTemplateOutlet", _r10);
 } }
 function PoComboComponent_ng_template_13_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵtemplate(0, PoComboComponent_ng_template_13_ng_template_0_Template, 1, 1, "ng-template", 19);
+    i0.ɵɵtemplate(0, PoComboComponent_ng_template_13_ng_template_0_Template, 1, 1, "ng-template", 20);
 } if (rf & 2) {
     i0.ɵɵnextContext();
     const _r0 = i0.ɵɵreference(2);
     i0.ɵɵproperty("cdkConnectedOverlayOrigin", _r0)("cdkConnectedOverlayOpen", true);
 } }
 function PoComboComponent_ng_template_16_Template(rf, ctx) { if (rf & 1) {
-    const _r21 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 20, 21)(2, "po-listbox", 22, 23);
-    i0.ɵɵlistener("p-selectcombo-item", function PoComboComponent_ng_template_16_Template_po_listbox_p_selectcombo_item_2_listener($event) { i0.ɵɵrestoreView(_r21); const ctx_r20 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r20.onOptionClick($event, $event.event)); })("p-update-infinite-scroll", function PoComboComponent_ng_template_16_Template_po_listbox_p_update_infinite_scroll_2_listener() { i0.ɵɵrestoreView(_r21); const ctx_r22 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r22.showMoreInfiniteScroll()); })("p-close", function PoComboComponent_ng_template_16_Template_po_listbox_p_close_2_listener() { i0.ɵɵrestoreView(_r21); const ctx_r23 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r23.onCloseCombo()); });
+    const _r22 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 21, 22)(2, "po-listbox", 23, 24);
+    i0.ɵɵlistener("p-selectcombo-item", function PoComboComponent_ng_template_16_Template_po_listbox_p_selectcombo_item_2_listener($event) { i0.ɵɵrestoreView(_r22); const ctx_r21 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r21.onOptionClick($event, $event.event)); })("p-update-infinite-scroll", function PoComboComponent_ng_template_16_Template_po_listbox_p_update_infinite_scroll_2_listener() { i0.ɵɵrestoreView(_r22); const ctx_r23 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r23.showMoreInfiniteScroll()); })("p-close", function PoComboComponent_ng_template_16_Template_po_listbox_p_close_2_listener() { i0.ɵɵrestoreView(_r22); const ctx_r24 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r24.onCloseCombo()); });
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r11 = i0.ɵɵnextContext();
@@ -25384,6 +25395,7 @@ class PoComboComponent extends PoComboBaseComponent {
     shouldMarkLetters = true;
     infiniteLoading = false;
     _isServerSearching = false;
+    lastKey;
     clickoutListener;
     eventResizeListener;
     filterSubscription;
@@ -25467,6 +25479,10 @@ class PoComboComponent extends PoComboBaseComponent {
     onKeyDown(event) {
         const key = event.keyCode;
         const inputValue = event.target.value;
+        if (event.shiftKey && key === PoKeyCodeEnum.tab) {
+            this.controlComboVisibility(false);
+            return;
+        }
         // busca um registro quando acionar o tab
         if (this.service && key === PoKeyCodeEnum.tab && inputValue && !this.disabledTabFilter) {
             this.controlComboVisibility(false);
@@ -25474,8 +25490,8 @@ class PoComboComponent extends PoComboBaseComponent {
         }
         if (key === PoKeyCodeEnum.arrowDown) {
             event.preventDefault();
-            if (!this.service) {
-                this.poListbox?.setFocus();
+            if (this.visibleOptions.length) {
+                this.focusItem();
             }
             this.controlComboVisibility(true);
             this.isFiltering = this.changeOnEnter ? this.isFiltering : false;
@@ -25495,11 +25511,28 @@ class PoComboComponent extends PoComboBaseComponent {
         if (key === PoKeyCodeEnum.enter) {
             this.controlComboVisibility(true);
         }
+        if (key === PoKeyCodeEnum.esc) {
+            if (key === this.lastKey) {
+                this.lastKey = '';
+                if (this.selectedValue) {
+                    this.clearAndFocus();
+                }
+                return;
+            }
+            else {
+                this.onCloseCombo();
+            }
+        }
+        this.lastKey = event.keyCode;
     }
     onKeyUp(event) {
         const key = event.keyCode || event.which;
         const inputValue = event.target.value;
-        const isValidKey = key !== PoKeyCodeEnum.arrowUp && key !== PoKeyCodeEnum.arrowDown && key !== PoKeyCodeEnum.enter;
+        const isValidKey = key !== PoKeyCodeEnum.arrowUp &&
+            key !== PoKeyCodeEnum.arrowDown &&
+            key !== PoKeyCodeEnum.enter &&
+            key !== PoKeyCodeEnum.esc &&
+            key !== PoKeyCodeEnum.tab;
         if (isValidKey) {
             if (inputValue) {
                 if (!this.service && this.previousSearchValue !== inputValue) {
@@ -25542,24 +25575,29 @@ class PoComboComponent extends PoComboBaseComponent {
             });
         }
     }
-    controlApplyFilter(value) {
+    controlApplyFilter(value, isArrowDown) {
         if ((!this.isProcessingValueByTab && (!this.selectedOption || value !== this.selectedOption[this.dynamicLabel])) ||
             !this.cache) {
             this.defaultService.hasNext = true;
             this.page = this.setPage();
             this.options = [];
-            this.applyFilter(value, true);
+            this.applyFilter(value, true, isArrowDown);
         }
         this.isProcessingValueByTab = false;
     }
-    applyFilter(value, reset = false) {
+    applyFilter(value, reset = false, isArrowDown) {
         if (this.defaultService.hasNext) {
             this.controlComboVisibility(false, reset);
             this.isServerSearching = true;
             const param = this.infiniteScroll
                 ? { property: this.fieldLabel, value, page: this.page, pageSize: this.pageSize }
                 : { property: this.fieldLabel, value };
-            this.filterSubscription = this.service.getFilteredData(param, this.filterParams).subscribe(items => this.setOptionsByApplyFilter(value, items, reset), error => this.onErrorFilteredData());
+            this.filterSubscription = this.service.getFilteredData(param, this.filterParams).subscribe(items => {
+                this.setOptionsByApplyFilter(value, items, reset);
+                if (isArrowDown) {
+                    this.focusItem();
+                }
+            }, error => this.onErrorFilteredData());
         }
     }
     setOptionsByApplyFilter(value, items, reset = false) {
@@ -25593,14 +25631,14 @@ class PoComboComponent extends PoComboBaseComponent {
             this.isProcessingValueByTab = false;
         }, this.debounceTime);
     }
-    toggleComboVisibility() {
+    toggleComboVisibility(isButton) {
         if (this.disabled) {
             return;
         }
         if (this.service && !this.disabledInitFilter) {
             this.applyFilterInFirstClick();
         }
-        this.controlComboVisibility(!this.comboOpen);
+        this.controlComboVisibility(!this.comboOpen, false, isButton);
     }
     applyFilterInFirstClick() {
         if (this.isFirstFilter && !this.selectedValue) {
@@ -25609,8 +25647,8 @@ class PoComboComponent extends PoComboBaseComponent {
             this.applyFilter('', scrollingControl);
         }
     }
-    controlComboVisibility(toOpen, reset = false) {
-        toOpen ? this.open(reset) : this.close(reset);
+    controlComboVisibility(toOpen, reset = false, isButton) {
+        toOpen ? this.open(reset, isButton) : this.close(reset);
     }
     onCloseCombo() {
         this.controlComboVisibility(false);
@@ -25629,6 +25667,7 @@ class PoComboComponent extends PoComboBaseComponent {
             this.updateComboList([...this.cacheStaticOptions]);
         }
         this.previousSearchValue = this.selectedView[this.dynamicLabel];
+        this.inputEl.nativeElement.focus();
     }
     calculateScrollTop(selectedItem, index) {
         if (!selectedItem.length || index <= 1) {
@@ -25676,9 +25715,12 @@ class PoComboComponent extends PoComboBaseComponent {
             keyCode !== 40 && // seta
             keyCode !== 93); // windows menu
     }
-    searchOnEnter(value) {
-        if (this.service && !this.selectedView && value.length >= this.filterMinlength) {
-            this.controlApplyFilter(value);
+    searchOnEnterOrArrow(event, value) {
+        if ((event.key === 'ArrowDown' || event.key === 'Enter') &&
+            this.service &&
+            !this.selectedView &&
+            value.length >= this.filterMinlength) {
+            this.controlApplyFilter(value, event.key === 'ArrowDown');
         }
     }
     showMoreInfiniteScroll() {
@@ -25688,6 +25730,10 @@ class PoComboComponent extends PoComboBaseComponent {
         this.page++;
         this.applyFilter('', true);
     }
+    clearAndFocus() {
+        this.clear(null);
+        this.inputEl.nativeElement.focus();
+    }
     adjustContainerPosition() {
         this.controlPosition.adjustPosition(poComboContainerPositionDefault);
     }
@@ -25706,6 +25752,7 @@ class PoComboComponent extends PoComboBaseComponent {
         this.comboIcon = 'po-icon-arrow-down';
         this.removeListeners();
         this.isFiltering = false;
+        this.renderer.removeClass(this.inputEl.nativeElement, 'po-combo-input-focus');
     }
     initializeListeners() {
         this.removeListeners();
@@ -25729,7 +25776,7 @@ class PoComboComponent extends PoComboBaseComponent {
         this.updateComboList([]);
         this.controlComboVisibility(true);
     }
-    open(reset) {
+    open(reset, isButton) {
         this.comboOpen = true;
         if (!reset && this.infiniteScroll) {
             if (!this.getInputValue()) {
@@ -25740,7 +25787,9 @@ class PoComboComponent extends PoComboBaseComponent {
         this.changeDetector.detectChanges();
         this.comboIcon = 'po-icon-arrow-up';
         this.initializeListeners();
-        this.inputEl.nativeElement.focus();
+        isButton
+            ? this.renderer.addClass(this.inputEl.nativeElement, 'po-combo-input-focus')
+            : this.inputEl.nativeElement.focus();
         this.setContainerPosition();
     }
     removeListeners() {
@@ -25768,6 +25817,20 @@ class PoComboComponent extends PoComboBaseComponent {
     setScrollingControl() {
         return this.infiniteScroll ? true : false;
     }
+    focusItem() {
+        this.poListbox?.listboxItemList?.nativeElement.focus();
+        setTimeout(() => {
+            let item;
+            if (this.selectedValue) {
+                item = document.querySelector('.po-listbox-item[aria-selected="true"]');
+            }
+            else {
+                item = document.querySelectorAll('.po-listbox-item')[0];
+            }
+            this.poListbox?.listboxItemList?.nativeElement.focus();
+            item?.focus();
+        });
+    }
     static ɵfac = function PoComboComponent_Factory(t) { return new (t || PoComboComponent)(i0.ɵɵdirectiveInject(i0.ElementRef), i0.ɵɵdirectiveInject(i0.IterableDiffers), i0.ɵɵdirectiveInject(PoComboFilterService), i0.ɵɵdirectiveInject(i0.Renderer2), i0.ɵɵdirectiveInject(i0.ChangeDetectorRef), i0.ɵɵdirectiveInject(PoControlPositionService), i0.ɵɵdirectiveInject(PoLanguageService)); };
     static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PoComboComponent, selectors: [["po-combo"]], contentQueries: function PoComboComponent_ContentQueries(rf, ctx, dirIndex) { if (rf & 1) {
             i0.ɵɵcontentQuery(dirIndex, PoComboOptionTemplateDirective, 7);
@@ -25800,16 +25863,16 @@ class PoComboComponent extends PoComboBaseComponent {
                     useExisting: forwardRef(() => PoComboComponent),
                     multi: true
                 }
-            ]), i0.ɵɵInheritDefinitionFeature, i0.ɵɵNgOnChangesFeature], decls: 18, vars: 28, consts: [[3, "p-disabled", "p-id", "p-label", "p-optional", "p-required", "p-show-required"], ["cdkOverlayOrigin", "", 1, "po-field-container-content"], ["trigger", "cdkOverlayOrigin"], ["class", "po-field-icon-container-left", 4, "ngIf"], ["autocomplete", "off", "type", "text", 1, "po-input", "po-combo-input", 3, "ngClass", "disabled", "id", "placeholder", "required", "click", "keyup", "blur", "keyup.enter", "keydown"], ["inp", ""], [1, "po-field-icon-container-right"], ["class", "po-icon-input", 3, "p-element-ref", "p-change-event", 4, "ngIf"], [3, "click"], ["iconArrow", ""], [4, "ngIf", "ngIfThen", "ngIfElse"], ["dropdownDefault", ""], ["dropdownCDK", ""], [3, "p-help", "p-disabled"], ["dropdownListbox", ""], [1, "po-field-icon-container-left"], [1, "po-field-icon", "po-icon-input", 3, "p-icon"], [1, "po-icon-input", 3, "p-element-ref", "p-change-event"], [4, "ngTemplateOutlet"], ["cdkConnectedOverlay", "", 3, "cdkConnectedOverlayOrigin", "cdkConnectedOverlayOpen"], [1, "po-combo-container", 3, "hidden"], ["containerElement", ""], ["p-type", "option", 3, "p-items", "p-field-value", "p-field-label", "p-template", "p-search-value", "p-infinite-loading", "p-infinite-scroll", "p-filtering", "p-cache", "p-filter-mode", "p-visible", "p-is-searching", "p-should-mark-letter", "p-compare-cache", "p-combo-service", "p-infinite-scroll-distance", "p-selectcombo-item", "p-update-infinite-scroll", "p-close"], ["poListbox", "", "contentElement", ""]], template: function PoComboComponent_Template(rf, ctx) { if (rf & 1) {
+            ]), i0.ɵɵInheritDefinitionFeature, i0.ɵɵNgOnChangesFeature], decls: 18, vars: 33, consts: [[3, "p-disabled", "p-id", "p-label", "p-optional", "p-required", "p-show-required"], ["cdkOverlayOrigin", "", 1, "po-field-container-content", "po-combo-container-content"], ["trigger", "cdkOverlayOrigin"], ["class", "po-field-icon-container-left", 4, "ngIf"], ["autocomplete", "off", "type", "text", 1, "po-combo-input", 3, "ngClass", "disabled", "id", "placeholder", "required", "click", "keyup", "blur", "keydown"], ["inp", ""], [1, "po-field-icon-container-right"], ["tabindex", "0", "role", "button", "class", "po-combo-clean", 3, "click", "keydown.enter", 4, "ngIf"], [1, "po-icon", "po-field-icon", "po-icon-input", 3, "click"], ["iconArrow", ""], [4, "ngIf", "ngIfThen", "ngIfElse"], ["dropdownDefault", ""], ["dropdownCDK", ""], [3, "p-help", "p-disabled"], ["dropdownListbox", ""], [1, "po-field-icon-container-left"], [1, "po-field-icon", "po-icon-input", 3, "p-icon"], ["tabindex", "0", "role", "button", 1, "po-combo-clean", 3, "click", "keydown.enter"], [1, "po-icon", "po-field-icon", "po-icon-clear-content"], [4, "ngTemplateOutlet"], ["cdkConnectedOverlay", "", 3, "cdkConnectedOverlayOrigin", "cdkConnectedOverlayOpen"], [1, "po-combo-container", 3, "hidden"], ["containerElement", ""], ["p-type", "option", 3, "p-items", "p-field-value", "p-field-label", "p-template", "p-search-value", "p-infinite-loading", "p-infinite-scroll", "p-filtering", "p-cache", "p-filter-mode", "p-visible", "p-is-searching", "p-should-mark-letter", "p-compare-cache", "p-combo-service", "p-infinite-scroll-distance", "p-selectcombo-item", "p-update-infinite-scroll", "p-close"], ["poListbox", "", "contentElement", ""]], template: function PoComboComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "po-field-container", 0)(1, "div", 1, 2);
             i0.ɵɵtemplate(3, PoComboComponent_div_3_Template, 2, 3, "div", 3);
             i0.ɵɵelementStart(4, "input", 4, 5);
-            i0.ɵɵlistener("click", function PoComboComponent_Template_input_click_4_listener() { return ctx.toggleComboVisibility(); })("keyup", function PoComboComponent_Template_input_keyup_4_listener($event) { return ctx.onKeyUp($event); })("blur", function PoComboComponent_Template_input_blur_4_listener() { return ctx.onBlur(); })("keyup.enter", function PoComboComponent_Template_input_keyup_enter_4_listener($event) { return ctx.searchOnEnter($event.target.value); })("keydown", function PoComboComponent_Template_input_keydown_4_listener($event) { return ctx.onKeyDown($event); });
+            i0.ɵɵlistener("click", function PoComboComponent_Template_input_click_4_listener() { return ctx.toggleComboVisibility(); })("keyup", function PoComboComponent_Template_input_keyup_4_listener($event) { return ctx.onKeyUp($event); })("blur", function PoComboComponent_Template_input_blur_4_listener() { return ctx.onBlur(); })("keyup", function PoComboComponent_Template_input_keyup_4_listener($event) { return ctx.searchOnEnterOrArrow($event, $event.target.value); })("keydown", function PoComboComponent_Template_input_keydown_4_listener($event) { return ctx.onKeyDown($event); });
             i0.ɵɵelementEnd();
             i0.ɵɵelementStart(6, "div", 6);
-            i0.ɵɵtemplate(7, PoComboComponent_po_clean_7_Template, 1, 1, "po-clean", 7);
+            i0.ɵɵtemplate(7, PoComboComponent_div_7_Template, 2, 3, "div", 7);
             i0.ɵɵelementStart(8, "span", 8, 9);
-            i0.ɵɵlistener("click", function PoComboComponent_Template_span_click_8_listener() { return ctx.toggleComboVisibility(); });
+            i0.ɵɵlistener("click", function PoComboComponent_Template_span_click_8_listener() { return ctx.toggleComboVisibility(true); });
             i0.ɵɵelementEnd()()();
             i0.ɵɵtemplate(10, PoComboComponent_ng_container_10_Template, 1, 0, "ng-container", 10);
             i0.ɵɵtemplate(11, PoComboComponent_ng_template_11_Template, 1, 1, "ng-template", null, 11, i0.ɵɵtemplateRefExtractor);
@@ -25829,15 +25892,14 @@ class PoComboComponent extends PoComboBaseComponent {
             i0.ɵɵproperty("ngClass", ctx.clean && _r2.value ? "po-input-double-icon-right" : "po-input-icon-right")("disabled", ctx.disabled)("id", ctx.id)("placeholder", ctx.disabled ? "" : ctx.placeholder)("required", ctx.required);
             i0.ɵɵattribute("name", ctx.name);
             i0.ɵɵadvance(3);
-            i0.ɵɵproperty("ngIf", ctx.clean && !ctx.disabled);
+            i0.ɵɵproperty("ngIf", ctx.clean && !ctx.disabled && _r2.value);
             i0.ɵɵadvance(1);
-            i0.ɵɵclassMapInterpolate1("po-icon po-field-icon ", ctx.comboIcon, " po-icon-input");
-            i0.ɵɵclassProp("po-field-icon-disabled", ctx.disabled)("po-field-icon", !ctx.disabled);
+            i0.ɵɵclassProp("po-field-icon-disabled", ctx.disabled)("po-icon-arrow-up", ctx.comboOpen)("po-icon-arrow-down", !ctx.comboOpen)("po-field-icon", !ctx.disabled)("po-combo-default-border", !ctx.disabled && _r2.value)("po-combo-background-arrow-up", !ctx.disabled && ctx.comboOpen);
             i0.ɵɵadvance(2);
             i0.ɵɵproperty("ngIf", ctx.appendBox)("ngIfThen", _r8)("ngIfElse", _r6);
             i0.ɵɵadvance(5);
             i0.ɵɵproperty("p-help", ctx.help)("p-disabled", ctx.disabled);
-        } }, dependencies: [i1.NgClass, i1.NgIf, i1.NgTemplateOutlet, i5.CdkConnectedOverlay, i5.CdkOverlayOrigin, PoCleanComponent, PoFieldContainerBottomComponent, PoFieldContainerComponent, PoIconComponent, PoListBoxComponent], encapsulation: 2, changeDetection: 0 });
+        } }, dependencies: [i1.NgClass, i1.NgIf, i1.NgTemplateOutlet, i5.CdkConnectedOverlay, i5.CdkOverlayOrigin, PoFieldContainerBottomComponent, PoFieldContainerComponent, PoIconComponent, PoListBoxComponent], encapsulation: 2, changeDetection: 0 });
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PoComboComponent, [{
         type: Component,
@@ -25854,7 +25916,7 @@ class PoComboComponent extends PoComboBaseComponent {
                         useExisting: forwardRef(() => PoComboComponent),
                         multi: true
                     }
-                ], template: "<po-field-container\n  [p-disabled]=\"disabled\"\n  [p-id]=\"id\"\n  [p-label]=\"label\"\n  [p-optional]=\"optional\"\n  [p-required]=\"required\"\n  [p-show-required]=\"showRequired\"\n>\n  <div cdkOverlayOrigin #trigger=\"cdkOverlayOrigin\" class=\"po-field-container-content\">\n    <div *ngIf=\"icon\" class=\"po-field-icon-container-left\">\n      <po-icon class=\"po-field-icon po-icon-input\" [class.po-field-icon-disabled]=\"disabled\" [p-icon]=\"icon\"></po-icon>\n    </div>\n\n    <input\n      #inp\n      class=\"po-input po-combo-input\"\n      [ngClass]=\"clean && inp.value ? 'po-input-double-icon-right' : 'po-input-icon-right'\"\n      [class.po-input-icon-left]=\"icon\"\n      autocomplete=\"off\"\n      type=\"text\"\n      [attr.name]=\"name\"\n      [disabled]=\"disabled\"\n      [id]=\"id\"\n      [placeholder]=\"disabled ? '' : placeholder\"\n      [required]=\"required\"\n      (click)=\"toggleComboVisibility()\"\n      (keyup)=\"onKeyUp($event)\"\n      (blur)=\"onBlur()\"\n      (keyup.enter)=\"searchOnEnter($event.target.value)\"\n      (keydown)=\"onKeyDown($event)\"\n    />\n\n    <div class=\"po-field-icon-container-right\">\n      <po-clean\n        class=\"po-icon-input\"\n        *ngIf=\"clean && !disabled\"\n        (p-change-event)=\"clear($event)\"\n        [p-element-ref]=\"inputEl\"\n      >\n      </po-clean>\n      <span\n        #iconArrow\n        class=\"po-icon po-field-icon {{ comboIcon }} po-icon-input\"\n        [class.po-field-icon-disabled]=\"disabled\"\n        [class.po-field-icon]=\"!disabled\"\n        (click)=\"toggleComboVisibility()\"\n      >\n      </span>\n    </div>\n  </div>\n\n  <ng-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: "<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      <div\n        tabindex=\"0\"\n        role=\"button\"\n        [attr.aria-label]=\"literals.clean\"\n        *ngIf=\"clean && !disabled && inp.value\"\n        class=\"po-combo-clean\"\n        (click)=\"clear(null); $event.preventDefault()\"\n        (keydown.enter)=\"clearAndFocus(); $event.preventDefault()\"\n      >\n        <span\n          [class.po-border-focused]=\"!disabled && comboOpen\"\n          class=\"po-icon po-field-icon po-icon-clear-content\"\n        ></span>\n      </div>\n      <span\n        #iconArrow\n        class=\"po-icon po-field-icon po-icon-input\"\n        [class.po-field-icon-disabled]=\"disabled\"\n        [class.po-icon-arrow-up]=\"comboOpen\"\n        [class.po-icon-arrow-down]=\"!comboOpen\"\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        (click)=\"toggleComboVisibility(true)\"\n      >\n      </span>\n    </div>\n  </div>\n\n  <ng-container *ngIf=\"appendBox; then dropdownCDK; else dropdownDefault\"> </ng-container>\n\n  <ng-template #dropdownDefault>\n    <ng-container *ngTemplateOutlet=\"dropdownListbox\"> </ng-container>\n  </ng-template>\n\n  <ng-template #dropdownCDK>\n    <ng-template cdkConnectedOverlay [cdkConnectedOverlayOrigin]=\"trigger\" [cdkConnectedOverlayOpen]=\"true\">\n      <ng-container *ngTemplateOutlet=\"dropdownListbox\"></ng-container>\n    </ng-template>\n  </ng-template>\n\n  <po-field-container-bottom [p-help]=\"help\" [p-disabled]=\"disabled\"></po-field-container-bottom>\n</po-field-container>\n\n<ng-template #dropdownListbox>\n  <div #containerElement class=\"po-combo-container\" [hidden]=\"!comboOpen && !isServerSearching\">\n    <po-listbox\n      #poListbox\n      #contentElement\n      p-type=\"option\"\n      [p-items]=\"visibleOptions\"\n      [p-field-value]=\"dynamicValue\"\n      [p-field-label]=\"dynamicLabel\"\n      [p-template]=\"comboOptionTemplate\"\n      [p-search-value]=\"getInputValue()\"\n      [p-infinite-loading]=\"infiniteLoading\"\n      [p-infinite-scroll]=\"infiniteScroll\"\n      [p-filtering]=\"isFiltering\"\n      [p-cache]=\"cache\"\n      (p-selectcombo-item)=\"onOptionClick($event, $event.event)\"\n      [p-filter-mode]=\"filterMode\"\n      [p-visible]=\"comboOpen\"\n      [p-is-searching]=\"isServerSearching\"\n      [p-should-mark-letter]=\"shouldMarkLetters\"\n      [p-compare-cache]=\"compareObjects(cacheOptions, visibleOptions)\"\n      [p-combo-service]=\"service\"\n      [p-infinite-scroll-distance]=\"infiniteScrollDistance\"\n      (p-update-infinite-scroll)=\"showMoreInfiniteScroll()\"\n      (p-close)=\"onCloseCombo()\"\n    ></po-listbox>\n  </div>\n</ng-template>\n" }]
     }], function () { return [{ type: i0.ElementRef }, { type: i0.IterableDiffers }, { type: PoComboFilterService }, { type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }, { type: PoControlPositionService }, { type: PoLanguageService }]; }, { comboOptionTemplate: [{
             type: ContentChild,
             args: [PoComboOptionTemplateDirective, { static: true }]
@@ -32216,6 +32278,7 @@ class PoMultiselectComponent extends PoMultiselectBaseComponent {
     initCalculateItems = true;
     isCalculateVisibleItems = true;
     cacheOptions;
+    focusOnTag = false;
     constructor(renderer, changeDetector, el, controlPosition, defaultService, languageService) {
         super(languageService);
         this.renderer = renderer;
@@ -32367,8 +32430,11 @@ class PoMultiselectComponent extends PoMultiselectBaseComponent {
         this.onModelTouched?.();
     }
     onKeyDown(event) {
-        if ((event.keyCode === PoKeyCodeEnum.tab && this.visibleTags.length > 1) ||
-            (event.keyCode === PoKeyCodeEnum.tab && this.visibleTags.length < 1)) {
+        if (event.shiftKey && event.keyCode === PoKeyCodeEnum.tab && !this.focusOnTag) {
+            this.controlDropdownVisibility(false);
+        }
+        this.focusOnTag = false;
+        if (event.keyCode === PoKeyCodeEnum.tab) {
             return;
         }
         if (event.keyCode === PoKeyCodeEnum.esc) {
@@ -32571,6 +32637,7 @@ class PoMultiselectComponent extends PoMultiselectBaseComponent {
         const KEY_SPACE = 'Space';
         const KEY_ARROW_LEFT = 'ArrowLeft';
         const KEY_ARROW_RIGHT = 'ArrowRight';
+        this.focusOnTag = true;
         if (event.code === KEY_SPACE) {
             event.preventDefault();
             event.stopPropagation();