@po-ui/ng-components 19.13.0 → 19.14.0

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

@@ -32131,6 +32131,14 @@ class PoComboBaseComponent {
      * > Requer um recuo mínimo de 8px se o componente estiver próximo à lateral da tela.
      */
     additionalHelpTooltip;
+    /**
+     * @optional
+     *
+     * @description
+     *
+     * Evento disparado ao sair do campo.
+     */
+    blur = new EventEmitter();
     /**
      * @optional
      *
@@ -33135,7 +33143,7 @@ class PoComboBaseComponent {
         }
     }
     static ɵfac = function PoComboBaseComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || PoComboBaseComponent)(i0.ɵɵdirectiveInject(PoLanguageService), i0.ɵɵdirectiveInject(i0.ChangeDetectorRef), i0.ɵɵdirectiveInject(PoThemeService)); };
-    static ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: PoComboBaseComponent, inputs: { additionalHelpEventTrigger: "additionalHelpEventTrigger", additionalHelpTooltip: [0, "p-additional-help-tooltip", "additionalHelpTooltip"], autoFocus: [2, "p-auto-focus", "autoFocus", convertToBoolean], label: [0, "p-label", "label"], help: [0, "p-help", "help"], name: "name", filterService: [0, "p-filter-service", "filterService"], infiniteScroll: [0, "p-infinite-scroll", "infiniteScroll"], infiniteScrollDistance: [0, "p-infinite-scroll-distance", "infiniteScrollDistance"], icon: [0, "p-icon", "icon"], optional: [0, "p-optional", "optional"], clean: [2, "p-clean", "clean", convertToBoolean], emitObjectValue: [2, "p-emit-object-value", "emitObjectValue", convertToBoolean], disabledTabFilter: [2, "p-disabled-tab-filter", "disabledTabFilter", convertToBoolean], removeInitialFilter: [0, "p-remove-initial-filter", "removeInitialFilter"], fieldErrorMessage: [0, "p-field-error-message", "fieldErrorMessage"], errorLimit: [0, "p-error-limit", "errorLimit"], controlValueWithLabel: [2, "p-control-value-with-label", "controlValueWithLabel", convertToBoolean], listboxControlPosition: [0, "p-listbox-control-position", "listboxControlPosition"], placeholder: [0, "p-placeholder", "placeholder"], debounceTime: [0, "p-debounce-time", "debounceTime"], disabledInitFilter: [0, "p-disabled-init-filter", "disabledInitFilter"], fieldValue: [0, "p-field-value", "fieldValue"], fieldLabel: [0, "p-field-label", "fieldLabel"], filterMinlength: [0, "p-filter-minlength", "filterMinlength"], required: [0, "p-required", "required"], showRequired: [0, "p-show-required", "showRequired"], size: [0, "p-size", "size"], changeOnEnter: [0, "p-change-on-enter", "changeOnEnter"], disabled: [0, "p-disabled", "disabled"], sort: [0, "p-sort", "sort"], options: [0, "p-options", "options"], filterMode: [0, "p-filter-mode", "filterMode"], filterParams: [0, "p-filter-params", "filterParams"], literals: [0, "p-literals", "literals"], cache: [2, "p-cache", "cache", convertToBoolean], appendBox: [2, "p-append-in-body", "appendBox", convertToBoolean] }, outputs: { additionalHelp: "p-additional-help", change: "p-change", keydown: "p-keydown", ngModelChange: "ngModelChange", inputChange: "p-input-change" }, features: [i0.ɵɵInputTransformsFeature] });
+    static ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: PoComboBaseComponent, inputs: { additionalHelpEventTrigger: "additionalHelpEventTrigger", additionalHelpTooltip: [0, "p-additional-help-tooltip", "additionalHelpTooltip"], autoFocus: [2, "p-auto-focus", "autoFocus", convertToBoolean], label: [0, "p-label", "label"], help: [0, "p-help", "help"], name: "name", filterService: [0, "p-filter-service", "filterService"], infiniteScroll: [0, "p-infinite-scroll", "infiniteScroll"], infiniteScrollDistance: [0, "p-infinite-scroll-distance", "infiniteScrollDistance"], icon: [0, "p-icon", "icon"], optional: [0, "p-optional", "optional"], clean: [2, "p-clean", "clean", convertToBoolean], emitObjectValue: [2, "p-emit-object-value", "emitObjectValue", convertToBoolean], disabledTabFilter: [2, "p-disabled-tab-filter", "disabledTabFilter", convertToBoolean], removeInitialFilter: [0, "p-remove-initial-filter", "removeInitialFilter"], fieldErrorMessage: [0, "p-field-error-message", "fieldErrorMessage"], errorLimit: [0, "p-error-limit", "errorLimit"], controlValueWithLabel: [2, "p-control-value-with-label", "controlValueWithLabel", convertToBoolean], listboxControlPosition: [0, "p-listbox-control-position", "listboxControlPosition"], placeholder: [0, "p-placeholder", "placeholder"], debounceTime: [0, "p-debounce-time", "debounceTime"], disabledInitFilter: [0, "p-disabled-init-filter", "disabledInitFilter"], fieldValue: [0, "p-field-value", "fieldValue"], fieldLabel: [0, "p-field-label", "fieldLabel"], filterMinlength: [0, "p-filter-minlength", "filterMinlength"], required: [0, "p-required", "required"], showRequired: [0, "p-show-required", "showRequired"], size: [0, "p-size", "size"], changeOnEnter: [0, "p-change-on-enter", "changeOnEnter"], disabled: [0, "p-disabled", "disabled"], sort: [0, "p-sort", "sort"], options: [0, "p-options", "options"], filterMode: [0, "p-filter-mode", "filterMode"], filterParams: [0, "p-filter-params", "filterParams"], literals: [0, "p-literals", "literals"], cache: [2, "p-cache", "cache", convertToBoolean], appendBox: [2, "p-append-in-body", "appendBox", convertToBoolean] }, outputs: { blur: "p-blur", additionalHelp: "p-additional-help", change: "p-change", keydown: "p-keydown", ngModelChange: "ngModelChange", inputChange: "p-input-change" }, features: [i0.ɵɵInputTransformsFeature] });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PoComboBaseComponent, [{
         type: Directive
@@ -33144,6 +33152,9 @@ class PoComboBaseComponent {
         }], additionalHelpTooltip: [{
             type: Input,
             args: ['p-additional-help-tooltip']
+        }], blur: [{
+            type: Output,
+            args: ['p-blur']
         }], autoFocus: [{
             type: Input,
             args: [{ alias: 'p-auto-focus', transform: convertToBoolean }]
@@ -33580,11 +33591,14 @@ class PoComboComponent extends PoComboBaseComponent {
     getAdditionalHelpTooltip() {
         return this.isAdditionalHelpEventTriggered() ? null : this.additionalHelpTooltip;
     }
-    onBlur() {
+    onBlur(event) {
         this.onModelTouched?.();
         if (this.getAdditionalHelpTooltip() && this.displayAdditionalHelp) {
             this.showAdditionalHelp();
         }
+        if (event.type === 'blur') {
+            this.blur.emit();
+        }
     }
     onKeyDown(event) {
         const key = event?.keyCode;
@@ -34051,7 +34065,7 @@ class PoComboComponent extends PoComboBaseComponent {
             i0.ɵɵelementStart(0, "div", null, 0)(2, "po-field-container", 9)(3, "div", 10, 1)(6, "div", 11);
             i0.ɵɵtemplate(7, PoComboComponent_div_7_Template, 2, 5, "div", 12);
             i0.ɵɵelementStart(8, "input", 13, 2);
-            i0.ɵɵlistener("click", function PoComboComponent_Template_input_click_8_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.toggleComboVisibility()); })("keyup", function PoComboComponent_Template_input_keyup_8_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onKeyUp($event)); })("blur", function PoComboComponent_Template_input_blur_8_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onBlur()); })("keyup", function PoComboComponent_Template_input_keyup_8_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.searchOnEnterOrArrow($event, $event.target.value)); })("keydown", function PoComboComponent_Template_input_keydown_8_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onKeyDown($event)); });
+            i0.ɵɵlistener("click", function PoComboComponent_Template_input_click_8_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.toggleComboVisibility()); })("keyup", function PoComboComponent_Template_input_keyup_8_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onKeyUp($event)); })("blur", function PoComboComponent_Template_input_blur_8_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onBlur($event)); })("keyup", function PoComboComponent_Template_input_keyup_8_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.searchOnEnterOrArrow($event, $event.target.value)); })("keydown", function PoComboComponent_Template_input_keydown_8_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onKeyDown($event)); });
             i0.ɵɵelementEnd();
             i0.ɵɵelementStart(10, "div", 14);
             i0.ɵɵtemplate(11, PoComboComponent_po_clean_11_Template, 1, 5, "po-clean", 15);
@@ -34105,7 +34119,7 @@ class PoComboComponent extends PoComboBaseComponent {
                         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()\"\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          (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" }]
     }], () => [{ type: i0.ElementRef }, { type: i0.IterableDiffers }, { type: PoComboFilterService }, { type: i0.Renderer2 }, { type: PoControlPositionService }, { type: i0.ChangeDetectorRef }, { type: PoThemeService }, { type: PoLanguageService }], { comboOptionTemplate: [{
             type: ContentChild,
             args: [PoComboOptionTemplateDirective, { static: true }]
@@ -40803,6 +40817,14 @@ class PoMultiselectBaseComponent {
      * @default `false`
      */
     autoFocus = false;
+    /**
+     * @optional
+     *
+     * @description
+     *
+     * Evento disparado ao sair do campo.
+     */
+    blur = new EventEmitter();
     /** Label no componente. */
     label;
     /** Texto de apoio para o campo. */
@@ -41465,7 +41487,7 @@ class PoMultiselectBaseComponent {
         }
     }
     static ɵfac = function PoMultiselectBaseComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || PoMultiselectBaseComponent)(i0.ɵɵdirectiveInject(PoLanguageService), i0.ɵɵdirectiveInject(PoThemeService)); };
-    static ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: PoMultiselectBaseComponent, inputs: { additionalHelpEventTrigger: "additionalHelpEventTrigger", additionalHelpTooltip: [0, "p-additional-help-tooltip", "additionalHelpTooltip"], autoFocus: [2, "p-auto-focus", "autoFocus", convertToBoolean], label: [0, "p-label", "label"], help: [0, "p-help", "help"], optional: [0, "p-optional", "optional"], placeholder: [0, "p-placeholder", "placeholder"], placeholderSearch: [0, "p-placeholder-search", "placeholderSearch"], name: "name", hideSelectAll: [2, "p-hide-select-all", "hideSelectAll", convertToBoolean], fieldErrorMessage: [0, "p-field-error-message", "fieldErrorMessage"], errorLimit: [0, "p-error-limit", "errorLimit"], appendBox: [2, "p-append-in-body", "appendBox", convertToBoolean], controlValueWithLabel: [2, "p-control-value-with-label", "controlValueWithLabel", convertToBoolean], listboxControlPosition: [0, "p-listbox-control-position", "listboxControlPosition"], filterService: [0, "p-filter-service", "filterService"], autoHeight: [2, "p-auto-height", "autoHeight", convertToBoolean], debounceTime: [0, "p-debounce-time", "debounceTime"], literals: [0, "p-literals", "literals"], required: [0, "p-required", "required"], showRequired: [0, "p-show-required", "showRequired"], size: [0, "p-size", "size"], disabled: [0, "p-disabled", "disabled"], hideSearch: [0, "p-hide-search", "hideSearch"], options: [0, "p-options", "options"], sort: [0, "p-sort", "sort"], filterMode: [0, "p-filter-mode", "filterMode"], fieldLabel: [0, "p-field-label", "fieldLabel"], fieldValue: [0, "p-field-value", "fieldValue"] }, outputs: { additionalHelp: "p-additional-help", change: "p-change", keydown: "p-keydown" }, features: [i0.ɵɵInputTransformsFeature] });
+    static ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: PoMultiselectBaseComponent, inputs: { additionalHelpEventTrigger: "additionalHelpEventTrigger", additionalHelpTooltip: [0, "p-additional-help-tooltip", "additionalHelpTooltip"], autoFocus: [2, "p-auto-focus", "autoFocus", convertToBoolean], label: [0, "p-label", "label"], help: [0, "p-help", "help"], optional: [0, "p-optional", "optional"], placeholder: [0, "p-placeholder", "placeholder"], placeholderSearch: [0, "p-placeholder-search", "placeholderSearch"], name: "name", hideSelectAll: [2, "p-hide-select-all", "hideSelectAll", convertToBoolean], fieldErrorMessage: [0, "p-field-error-message", "fieldErrorMessage"], errorLimit: [0, "p-error-limit", "errorLimit"], appendBox: [2, "p-append-in-body", "appendBox", convertToBoolean], controlValueWithLabel: [2, "p-control-value-with-label", "controlValueWithLabel", convertToBoolean], listboxControlPosition: [0, "p-listbox-control-position", "listboxControlPosition"], filterService: [0, "p-filter-service", "filterService"], autoHeight: [2, "p-auto-height", "autoHeight", convertToBoolean], debounceTime: [0, "p-debounce-time", "debounceTime"], literals: [0, "p-literals", "literals"], required: [0, "p-required", "required"], showRequired: [0, "p-show-required", "showRequired"], size: [0, "p-size", "size"], disabled: [0, "p-disabled", "disabled"], hideSearch: [0, "p-hide-search", "hideSearch"], options: [0, "p-options", "options"], sort: [0, "p-sort", "sort"], filterMode: [0, "p-filter-mode", "filterMode"], fieldLabel: [0, "p-field-label", "fieldLabel"], fieldValue: [0, "p-field-value", "fieldValue"] }, outputs: { blur: "p-blur", additionalHelp: "p-additional-help", change: "p-change", keydown: "p-keydown" }, features: [i0.ɵɵInputTransformsFeature] });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PoMultiselectBaseComponent, [{
         type: Directive
@@ -41477,6 +41499,9 @@ class PoMultiselectBaseComponent {
         }], autoFocus: [{
             type: Input,
             args: [{ alias: 'p-auto-focus', transform: convertToBoolean }]
+        }], blur: [{
+            type: Output,
+            args: ['p-blur']
         }], label: [{
             type: Input,
             args: ['p-label']
@@ -41943,7 +41968,7 @@ class PoMultiselectComponent extends PoMultiselectBaseComponent {
         }
         this.changeDetector.markForCheck();
     }
-    onBlur() {
+    onBlur(event) {
         if (this.getAdditionalHelpTooltip() && this.displayAdditionalHelp) {
             this.showAdditionalHelp();
         }
@@ -41952,6 +41977,9 @@ class PoMultiselectComponent extends PoMultiselectBaseComponent {
             this.inputElement.nativeElement.setAttribute('aria-label', this.label ? this.label : '');
         }
         this.onModelTouched?.();
+        if (event.type === 'blur') {
+            this.blur.emit();
+        }
     }
     onKeyDown(event) {
         const isFieldFocused = document.activeElement === this.inputElement.nativeElement;
@@ -42292,7 +42320,7 @@ class PoMultiselectComponent extends PoMultiselectBaseComponent {
         } }, standalone: false, features: [i0.ɵɵProvidersFeature(providers$1), i0.ɵɵInheritDefinitionFeature, i0.ɵɵNgOnChangesFeature], decls: 20, vars: 40, consts: [["outerContainer", ""], ["trigger", "cdkOverlayOrigin"], ["inputElement", ""], ["iconElement", ""], ["dropdownDefault", ""], ["dropdownCDK", ""], ["dropdownListbox", ""], ["dropdownElement", ""], [3, "p-disabled", "p-label", "p-optional", "p-required", "p-show-required"], ["cdkOverlayOrigin", "", 1, "po-field-container-content"], [1, "po-input-icon-right", "po-multiselect-input", 3, "keydown", "click", "blur", "tabindex"], ["class", "po-multiselect-input-placeholder", "ria-hidden", "true", 3, "po-multiselect-input-placeholder-aa", 4, "ngIf"], [3, "p-value", "p-literals", "p-removable", "po-clickable", "p-disabled", "p-close", 4, "ngFor", "ngForOf"], [1, "po-field-icon-container-right"], [3, "p-icon", "ngClass"], [4, "ngIf", "ngIfThen", "ngIfElse"], [3, "p-additional-help", "p-additional-help-tooltip", "p-append-in-body", "p-help", "p-disabled", "p-error-pattern", "p-error-limit", "p-show-additional-help", "p-show-additional-help-icon"], ["ria-hidden", "true", 1, "po-multiselect-input-placeholder"], [3, "p-close", "p-value", "p-literals", "p-removable", "p-disabled"], [4, "ngTemplateOutlet"], ["cdkConnectedOverlay", "", 3, "cdkConnectedOverlayOrigin", "cdkConnectedOverlayOpen"], [3, "p-change", "p-change-search", "p-close-dropdown", "keydown", "p-searching", "p-hide-search", "p-hide-select-all", "p-literals", "p-options", "p-visible-options", "p-selected-options", "p-placeholder-search", "p-field-value", "p-field-label", "p-multiselect-template", "p-size", "p-container-width"]], template: function PoMultiselectComponent_Template(rf, ctx) { if (rf & 1) {
             const _r1 = i0.ɵɵgetCurrentView();
             i0.ɵɵelementStart(0, "div", null, 0)(2, "po-field-container", 8)(3, "div", 9, 1)(5, "div", 10, 2);
-            i0.ɵɵlistener("keydown", function PoMultiselectComponent_Template_div_keydown_5_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onKeyDown($event)); })("click", function PoMultiselectComponent_Template_div_click_5_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.toggleDropdownVisibility()); })("blur", function PoMultiselectComponent_Template_div_blur_5_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onBlur()); });
+            i0.ɵɵlistener("keydown", function PoMultiselectComponent_Template_div_keydown_5_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onKeyDown($event)); })("click", function PoMultiselectComponent_Template_div_click_5_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.toggleDropdownVisibility()); })("blur", function PoMultiselectComponent_Template_div_blur_5_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onBlur($event)); });
             i0.ɵɵtemplate(7, PoMultiselectComponent_span_7_Template, 2, 3, "span", 11)(8, PoMultiselectComponent_po_tag_8_Template, 1, 6, "po-tag", 12);
             i0.ɵɵelementStart(9, "div", 13);
             i0.ɵɵelement(10, "po-icon", 14, 3);
@@ -42331,7 +42359,7 @@ class PoMultiselectComponent extends PoMultiselectBaseComponent {
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PoMultiselectComponent, [{
         type: Component,
-        args: [{ selector: 'po-multiselect', changeDetection: ChangeDetectionStrategy.OnPush, providers: providers$1, standalone: false, template: "<div #outerContainer>\n  <po-field-container\n    [p-disabled]=\"disabled\"\n    [p-label]=\"label\"\n    [p-optional]=\"optional\"\n    [p-required]=\"required\"\n    [p-show-required]=\"showRequired\"\n  >\n    <div\n      cdkOverlayOrigin\n      #trigger=\"cdkOverlayOrigin\"\n      class=\"po-field-container-content\"\n      [class.po-multiselect-show]=\"dropdownOpen\"\n    >\n      <div\n        #inputElement\n        [tabindex]=\"disabled ? -1 : 0\"\n        [attr.disabled]=\"disabled\"\n        [attr.aria-label]=\"label\"\n        class=\"po-input-icon-right po-multiselect-input\"\n        [class.po-multiselect-input-auto]=\"autoHeight\"\n        [class.po-multiselect-input-static]=\"!autoHeight\"\n        [class.po-multiselect-input-disabled]=\"disabled\"\n        [class.po-multiselect-input-font]=\"!disabled && !visibleTags?.length\"\n        [class.po-multiselect-input-aa]=\"size === 'small'\"\n        (keydown)=\"onKeyDown($event)\"\n        (click)=\"toggleDropdownVisibility()\"\n        (blur)=\"onBlur()\"\n      >\n        <span\n          *ngIf=\"!disabled && !visibleTags?.length\"\n          class=\"po-multiselect-input-placeholder\"\n          [class.po-multiselect-input-placeholder-aa]=\"size === 'small'\"\n          ria-hidden=\"true\"\n        >\n          {{ placeholder ? placeholder : literals.selectItem }}\n        </span>\n\n        <po-tag\n          *ngFor=\"let tag of visibleTags; index as i\"\n          [p-value]=\"tag[fieldLabel]\"\n          [p-literals]=\"i + 1 === visibleTags.length && hasMoreTag ? literalsTag : undefined\"\n          [p-removable]=\"true\"\n          [class.po-clickable]=\"tag[fieldValue] === '' && !disabled\"\n          [p-disabled]=\"disabled\"\n          (p-close)=\"closeTag(tag[fieldValue], $event)\"\n        ></po-tag>\n\n        <div class=\"po-field-icon-container-right\">\n          <po-icon\n            p-icon=\"{{ dropdownIcon }}\"\n            #iconElement\n            class=\"po-field-icon {{ disabled ? 'po-icon-input-disabled' : 'po-icon-input' }}\"\n            [class.po-field-icon-aa]=\"size === 'small'\"\n            [ngClass]=\"disabled ? 'po-field-icon-disabled' : ''\"\n          >\n          </po-icon>\n        </div>\n      </div>\n    </div>\n\n    <ng-container *ngIf=\"appendBox; then dropdownCDK; else dropdownDefault\"> </ng-container>\n\n    <ng-template #dropdownDefault>\n      <ng-container *ngTemplateOutlet=\"dropdownListbox\"> </ng-container>\n    </ng-template>\n\n    <ng-template #dropdownCDK>\n      <ng-template cdkConnectedOverlay [cdkConnectedOverlayOrigin]=\"trigger\" [cdkConnectedOverlayOpen]=\"true\">\n        <ng-container *ngTemplateOutlet=\"dropdownListbox\"></ng-container>\n      </ng-template>\n    </ng-template>\n\n    <po-field-container-bottom\n      [p-additional-help-tooltip]=\"getAdditionalHelpTooltip()\"\n      [p-append-in-body]=\"appendBox\"\n      [p-help]=\"help\"\n      [p-disabled]=\"disabled\"\n      [p-error-pattern]=\"getErrorPattern()\"\n      [p-error-limit]=\"errorLimit\"\n      [p-show-additional-help]=\"displayAdditionalHelp\"\n      [p-show-additional-help-icon]=\"showAdditionalHelpIcon()\"\n      (p-additional-help)=\"emitAdditionalHelp()\"\n    ></po-field-container-bottom>\n  </po-field-container>\n\n  <ng-template #dropdownListbox>\n    <po-multiselect-dropdown\n      #dropdownElement\n      [p-searching]=\"isServerSearching\"\n      [p-hide-search]=\"hideSearch\"\n      [p-hide-select-all]=\"hideSelectAll\"\n      [p-literals]=\"literals\"\n      [p-options]=\"options\"\n      [p-visible-options]=\"visibleOptionsDropdown\"\n      [p-selected-options]=\"selectedOptions\"\n      [p-placeholder-search]=\"placeholderSearch\"\n      [p-field-value]=\"fieldValue\"\n      [p-field-label]=\"fieldLabel\"\n      [p-multiselect-template]=\"multiselectOptionTemplate\"\n      [p-size]=\"size\"\n      [p-container-width]=\"containerWidth\"\n      (p-change)=\"changeItems($event)\"\n      (p-change-search)=\"changeSearch($event)\"\n      (p-close-dropdown)=\"controlDropdownVisibility(false)\"\n      (keydown)=\"onKeyDownDropdown($event, 0)\"\n    >\n    </po-multiselect-dropdown>\n  </ng-template>\n</div>\n" }]
+        args: [{ selector: 'po-multiselect', changeDetection: ChangeDetectionStrategy.OnPush, providers: providers$1, standalone: false, template: "<div #outerContainer>\n  <po-field-container\n    [p-disabled]=\"disabled\"\n    [p-label]=\"label\"\n    [p-optional]=\"optional\"\n    [p-required]=\"required\"\n    [p-show-required]=\"showRequired\"\n  >\n    <div\n      cdkOverlayOrigin\n      #trigger=\"cdkOverlayOrigin\"\n      class=\"po-field-container-content\"\n      [class.po-multiselect-show]=\"dropdownOpen\"\n    >\n      <div\n        #inputElement\n        [tabindex]=\"disabled ? -1 : 0\"\n        [attr.disabled]=\"disabled\"\n        [attr.aria-label]=\"label\"\n        class=\"po-input-icon-right po-multiselect-input\"\n        [class.po-multiselect-input-auto]=\"autoHeight\"\n        [class.po-multiselect-input-static]=\"!autoHeight\"\n        [class.po-multiselect-input-disabled]=\"disabled\"\n        [class.po-multiselect-input-font]=\"!disabled && !visibleTags?.length\"\n        [class.po-multiselect-input-aa]=\"size === 'small'\"\n        (keydown)=\"onKeyDown($event)\"\n        (click)=\"toggleDropdownVisibility()\"\n        (blur)=\"onBlur($event)\"\n      >\n        <span\n          *ngIf=\"!disabled && !visibleTags?.length\"\n          class=\"po-multiselect-input-placeholder\"\n          [class.po-multiselect-input-placeholder-aa]=\"size === 'small'\"\n          ria-hidden=\"true\"\n        >\n          {{ placeholder ? placeholder : literals.selectItem }}\n        </span>\n\n        <po-tag\n          *ngFor=\"let tag of visibleTags; index as i\"\n          [p-value]=\"tag[fieldLabel]\"\n          [p-literals]=\"i + 1 === visibleTags.length && hasMoreTag ? literalsTag : undefined\"\n          [p-removable]=\"true\"\n          [class.po-clickable]=\"tag[fieldValue] === '' && !disabled\"\n          [p-disabled]=\"disabled\"\n          (p-close)=\"closeTag(tag[fieldValue], $event)\"\n        ></po-tag>\n\n        <div class=\"po-field-icon-container-right\">\n          <po-icon\n            p-icon=\"{{ dropdownIcon }}\"\n            #iconElement\n            class=\"po-field-icon {{ disabled ? 'po-icon-input-disabled' : 'po-icon-input' }}\"\n            [class.po-field-icon-aa]=\"size === 'small'\"\n            [ngClass]=\"disabled ? 'po-field-icon-disabled' : ''\"\n          >\n          </po-icon>\n        </div>\n      </div>\n    </div>\n\n    <ng-container *ngIf=\"appendBox; then dropdownCDK; else dropdownDefault\"> </ng-container>\n\n    <ng-template #dropdownDefault>\n      <ng-container *ngTemplateOutlet=\"dropdownListbox\"> </ng-container>\n    </ng-template>\n\n    <ng-template #dropdownCDK>\n      <ng-template cdkConnectedOverlay [cdkConnectedOverlayOrigin]=\"trigger\" [cdkConnectedOverlayOpen]=\"true\">\n        <ng-container *ngTemplateOutlet=\"dropdownListbox\"></ng-container>\n      </ng-template>\n    </ng-template>\n\n    <po-field-container-bottom\n      [p-additional-help-tooltip]=\"getAdditionalHelpTooltip()\"\n      [p-append-in-body]=\"appendBox\"\n      [p-help]=\"help\"\n      [p-disabled]=\"disabled\"\n      [p-error-pattern]=\"getErrorPattern()\"\n      [p-error-limit]=\"errorLimit\"\n      [p-show-additional-help]=\"displayAdditionalHelp\"\n      [p-show-additional-help-icon]=\"showAdditionalHelpIcon()\"\n      (p-additional-help)=\"emitAdditionalHelp()\"\n    ></po-field-container-bottom>\n  </po-field-container>\n\n  <ng-template #dropdownListbox>\n    <po-multiselect-dropdown\n      #dropdownElement\n      [p-searching]=\"isServerSearching\"\n      [p-hide-search]=\"hideSearch\"\n      [p-hide-select-all]=\"hideSelectAll\"\n      [p-literals]=\"literals\"\n      [p-options]=\"options\"\n      [p-visible-options]=\"visibleOptionsDropdown\"\n      [p-selected-options]=\"selectedOptions\"\n      [p-placeholder-search]=\"placeholderSearch\"\n      [p-field-value]=\"fieldValue\"\n      [p-field-label]=\"fieldLabel\"\n      [p-multiselect-template]=\"multiselectOptionTemplate\"\n      [p-size]=\"size\"\n      [p-container-width]=\"containerWidth\"\n      (p-change)=\"changeItems($event)\"\n      (p-change-search)=\"changeSearch($event)\"\n      (p-close-dropdown)=\"controlDropdownVisibility(false)\"\n      (keydown)=\"onKeyDownDropdown($event, 0)\"\n    >\n    </po-multiselect-dropdown>\n  </ng-template>\n</div>\n" }]
     }], () => [{ type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: PoControlPositionService }, { type: PoMultiselectFilterService }, { type: PoLanguageService }, { type: PoThemeService }], { multiselectOptionTemplate: [{
             type: ContentChild,
             args: [PoMultiselectOptionTemplateDirective, { static: true }]
@@ -43658,7 +43686,7 @@ const poRichTextLiteralsDefault = {
         unorderedList: 'Bulleted list',
         insertLink: 'Insert link',
         linkTextLabel: 'Text with link',
-        linkUrlTextHelper: 'Paste in the text box below the copied browser link',
+        linkUrlTextHelper: 'Paste the copied link from the browser into the text box above',
         linkUrlTextPlaceholder: 'Enter the link address that will be attached to the text.',
         cancel: 'Cancel',
         editLink: 'Edit link',
@@ -43678,7 +43706,7 @@ const poRichTextLiteralsDefault = {
         unorderedList: 'Lista con viñetas',
         insertLink: 'Insertar el link',
         linkTextLabel: 'Texto con enlace',
-        linkUrlTextHelper: 'Pegue en el cuadro de texto debajo del enlace del navegador copiado',
+        linkUrlTextHelper: 'Pega el enlace copiado del navegador en el cuadro de texto de arriba',
         linkUrlTextPlaceholder: 'Ingrese la dirección del enlace que se adjuntará al texto.',
         cancel: 'Cancelar',
         editLink: 'Editar enlace',
@@ -43698,7 +43726,7 @@ const poRichTextLiteralsDefault = {
         unorderedList: 'Lista com marcadores',
         insertLink: 'Inserir link',
         linkTextLabel: 'Texto com link',
-        linkUrlTextHelper: 'Cole na caixa de texto abaixo o link copiado do navegador',
+        linkUrlTextHelper: 'Cole o link copiado do navegador na caixa de texto acima',
         linkUrlTextPlaceholder: 'Insira o endereço do link que será anexado ao texto',
         cancel: 'Cancelar',
         editLink: 'Editar link',
@@ -43718,7 +43746,7 @@ const poRichTextLiteralsDefault = {
         unorderedList: 'Список',
         insertLink: 'Вставьте ссылку',
         linkTextLabel: 'Текст со ссылкой',
-        linkUrlTextHelper: 'Вставьте в текстовое поле ниже скопированную ссылку',
+        linkUrlTextHelper: 'Вставьте скопированную ссылку из браузера в текстовое поле выше',
         linkUrlTextPlaceholder: 'Вставьте ссылку для привязки к тексту',
         cancel: 'Отмена',
         editLink: 'Редактировать ссылку',
@@ -47241,6 +47269,14 @@ class PoSelectComponent extends PoFieldValidateModel {
     poThemeService;
     _iconToken;
     selectElement;
+    /**
+     * @optional
+     *
+     * @description
+     *
+     * Evento disparado ao sair do campo.
+     */
+    blur = new EventEmitter();
     /**
      * @optional
      *
@@ -47450,11 +47486,14 @@ class PoSelectComponent extends PoFieldValidateModel {
     hasInvalidClass() {
         return (this.el.nativeElement.classList.contains('ng-invalid') && this.el.nativeElement.classList.contains('ng-dirty'));
     }
-    onBlur() {
+    onBlur(event) {
         this.onModelTouched?.();
         if (this.getAdditionalHelpTooltip() && this.displayAdditionalHelp) {
             this.showAdditionalHelp();
         }
+        if (event.type === 'blur') {
+            this.blur.emit();
+        }
     }
     // Altera o valor ao selecionar um item.
     onSelectChange(value) {
@@ -47601,7 +47640,7 @@ class PoSelectComponent extends PoFieldValidateModel {
         } if (rf & 2) {
             let _t;
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.selectElement = _t.first);
-        } }, inputs: { readonly: [2, "p-readonly", "readonly", convertToBoolean], placeholder: [0, "p-placeholder", "placeholder"], options: [0, "p-options", "options"], fieldLabel: [0, "p-field-label", "fieldLabel"], fieldValue: [0, "p-field-value", "fieldValue"], controlValueWithLabel: [2, "p-control-value-with-label", "controlValueWithLabel", convertToBoolean], size: [0, "p-size", "size"] }, outputs: { ngModelChange: "ngModelChange" }, standalone: false, features: [i0.ɵɵProvidersFeature([
+        } }, inputs: { readonly: [2, "p-readonly", "readonly", convertToBoolean], placeholder: [0, "p-placeholder", "placeholder"], options: [0, "p-options", "options"], fieldLabel: [0, "p-field-label", "fieldLabel"], fieldValue: [0, "p-field-value", "fieldValue"], controlValueWithLabel: [2, "p-control-value-with-label", "controlValueWithLabel", convertToBoolean], size: [0, "p-size", "size"] }, outputs: { blur: "p-blur", ngModelChange: "ngModelChange" }, standalone: false, features: [i0.ɵɵProvidersFeature([
                 {
                     provide: NG_VALUE_ACCESSOR,
                     useExisting: forwardRef(() => PoSelectComponent),
@@ -47615,7 +47654,7 @@ class PoSelectComponent extends PoFieldValidateModel {
             ]), i0.ɵɵInputTransformsFeature, i0.ɵɵInheritDefinitionFeature, i0.ɵɵNgOnChangesFeature], decls: 9, vars: 20, consts: [["select", ""], [3, "p-disabled", "p-id", "p-label", "p-optional", "p-required", "p-show-required"], [1, "po-field-container-content"], [1, "po-select", 3, "blur", "change", "keydown", "ngClass", "disabled", "id", "required"], [4, "ngIf"], [3, "p-additional-help-tooltip", "p-append-in-body", "p-help", "p-disabled", "p-error-pattern", "p-error-limit", "p-show-additional-help", "p-show-additional-help-icon", "p-additional-help", 4, "ngIf"], [3, "disabled", "hidden", "selected", "value", 4, "ngIf"], [3, "hidden"], [3, "disabled", "hidden", "selected", "value"], [3, "disabled", "value", 4, "ngFor", "ngForOf"], [3, "disabled", "value"], [4, "ngFor", "ngForOf"], [3, "label", "disabled", 4, "ngIf"], [3, "label", "disabled"], [3, "value", "disabled", 4, "ngFor", "ngForOf"], [3, "value", "disabled"], [3, "p-additional-help", "p-additional-help-tooltip", "p-append-in-body", "p-help", "p-disabled", "p-error-pattern", "p-error-limit", "p-show-additional-help", "p-show-additional-help-icon"]], template: function PoSelectComponent_Template(rf, ctx) { if (rf & 1) {
             const _r1 = i0.ɵɵgetCurrentView();
             i0.ɵɵelementStart(0, "po-field-container", 1)(1, "div", 2)(2, "select", 3, 0);
-            i0.ɵɵlistener("blur", function PoSelectComponent_Template_select_blur_2_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onBlur()); })("change", function PoSelectComponent_Template_select_change_2_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onSelectChange($event.target.value)); })("keydown", function PoSelectComponent_Template_select_keydown_2_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onKeyDown($event)); });
+            i0.ɵɵlistener("blur", function PoSelectComponent_Template_select_blur_2_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onBlur($event)); })("change", function PoSelectComponent_Template_select_change_2_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onSelectChange($event.target.value)); })("keydown", function PoSelectComponent_Template_select_keydown_2_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onKeyDown($event)); });
             i0.ɵɵtemplate(4, PoSelectComponent_ng_container_4_Template, 4, 3, "ng-container", 4)(5, PoSelectComponent_ng_container_5_Template, 3, 1, "ng-container", 4)(6, PoSelectComponent_ng_container_6_Template, 2, 1, "ng-container", 4)(7, PoSelectComponent_ng_container_7_Template, 2, 1, "ng-container", 4);
             i0.ɵɵelementEnd()();
             i0.ɵɵtemplate(8, PoSelectComponent_po_field_container_bottom_8_Template, 1, 8, "po-field-container-bottom", 5);
@@ -47651,7 +47690,7 @@ class PoSelectComponent extends PoFieldValidateModel {
                         useExisting: forwardRef(() => PoSelectComponent),
                         multi: true
                     }
-                ], standalone: false, 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 class=\"po-field-container-content\">\n    <select\n      #select\n      class=\"po-select\"\n      [class.po-select-aa]=\"size === 'small'\"\n      [ngClass]=\"iconNameLib === 'AnimaliaIcon' ? 'po-select-phosphor' : 'po-select-poicon'\"\n      [attr.name]=\"name\"\n      [class.po-select-placeholder]=\"!selectedValue?.toString() && !!placeholder\"\n      [disabled]=\"disabled\"\n      [id]=\"id\"\n      [required]=\"required\"\n      (blur)=\"onBlur()\"\n      (change)=\"onSelectChange($event.target.value)\"\n      (keydown)=\"onKeyDown($event)\"\n    >\n      <ng-container *ngIf=\"!isSafari\">\n        <option\n          *ngIf=\"!selectedValue?.toString() || !!placeholder\"\n          [disabled]=\"!!placeholder\"\n          [hidden]=\"!selectedValue?.toString() && !placeholder\"\n          [selected]=\"!selectedValue?.toString()\"\n          [value]=\"placeholder ?? ''\"\n        >\n          {{ placeholder }}\n        </option>\n        <option [hidden]=\"true\">{{ displayValue }}</option>\n      </ng-container>\n\n      <ng-container *ngIf=\"isSafari\">\n        <option>{{ displayValue || placeholder }}</option>\n      </ng-container>\n\n      <ng-container *ngIf=\"optionWithoutGroup.length > 0\">\n        <option *ngFor=\"let item of optionWithoutGroup\" [disabled]=\"readonly\" [value]=\"item?.[this.fieldValue]\">\n          {{ item?.[this.fieldLabel] }}\n        </option>\n      </ng-container>\n      <ng-container *ngIf=\"listGroupOptions.length > 0\">\n        <ng-container *ngFor=\"let item of listGroupOptions\">\n          <optgroup *ngIf=\"item?.options.length > 0\" label=\"{{ item?.label }}\" [disabled]=\"readonly\">\n            <option *ngFor=\"let subItem of item.options\" [value]=\"subItem?.[this.fieldValue]\" [disabled]=\"readonly\">\n              {{ subItem?.[this.fieldLabel] }}\n            </option>\n          </optgroup>\n        </ng-container>\n      </ng-container>\n    </select>\n  </div>\n\n  <po-field-container-bottom\n    *ngIf=\"!readonly\"\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" }]
+                ], standalone: false, 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 class=\"po-field-container-content\">\n    <select\n      #select\n      class=\"po-select\"\n      [class.po-select-aa]=\"size === 'small'\"\n      [ngClass]=\"iconNameLib === 'AnimaliaIcon' ? 'po-select-phosphor' : 'po-select-poicon'\"\n      [attr.name]=\"name\"\n      [class.po-select-placeholder]=\"!selectedValue?.toString() && !!placeholder\"\n      [disabled]=\"disabled\"\n      [id]=\"id\"\n      [required]=\"required\"\n      (blur)=\"onBlur($event)\"\n      (change)=\"onSelectChange($event.target.value)\"\n      (keydown)=\"onKeyDown($event)\"\n    >\n      <ng-container *ngIf=\"!isSafari\">\n        <option\n          *ngIf=\"!selectedValue?.toString() || !!placeholder\"\n          [disabled]=\"!!placeholder\"\n          [hidden]=\"!selectedValue?.toString() && !placeholder\"\n          [selected]=\"!selectedValue?.toString()\"\n          [value]=\"placeholder ?? ''\"\n        >\n          {{ placeholder }}\n        </option>\n        <option [hidden]=\"true\">{{ displayValue }}</option>\n      </ng-container>\n\n      <ng-container *ngIf=\"isSafari\">\n        <option>{{ displayValue || placeholder }}</option>\n      </ng-container>\n\n      <ng-container *ngIf=\"optionWithoutGroup.length > 0\">\n        <option *ngFor=\"let item of optionWithoutGroup\" [disabled]=\"readonly\" [value]=\"item?.[this.fieldValue]\">\n          {{ item?.[this.fieldLabel] }}\n        </option>\n      </ng-container>\n      <ng-container *ngIf=\"listGroupOptions.length > 0\">\n        <ng-container *ngFor=\"let item of listGroupOptions\">\n          <optgroup *ngIf=\"item?.options.length > 0\" label=\"{{ item?.label }}\" [disabled]=\"readonly\">\n            <option *ngFor=\"let subItem of item.options\" [value]=\"subItem?.[this.fieldValue]\" [disabled]=\"readonly\">\n              {{ subItem?.[this.fieldLabel] }}\n            </option>\n          </optgroup>\n        </ng-container>\n      </ng-container>\n    </select>\n  </div>\n\n  <po-field-container-bottom\n    *ngIf=\"!readonly\"\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" }]
     }], () => [{ type: undefined, decorators: [{
                 type: Optional
             }, {
@@ -47660,6 +47699,9 @@ class PoSelectComponent extends PoFieldValidateModel {
             }] }, { type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: PoThemeService }], { selectElement: [{
             type: ViewChild,
             args: ['select', { read: ElementRef, static: true }]
+        }], blur: [{
+            type: Output,
+            args: ['p-blur']
         }], ngModelChange: [{
             type: Output,
             args: ['ngModelChange']
@@ -50792,8 +50834,8 @@ class PoDynamicFormFieldsComponent extends PoDynamicFormFieldsBaseComponent {
     updatePreviousValue() {
         this.previousValue = JSON.parse(JSON.stringify(this.value));
     }
-    trackBy(index) {
-        return index;
+    trackBy(index, field) {
+        return field.property;
     }
     applyFieldValidation(index, validatedField) {
         const field = this.fields[index];
@@ -50941,7 +50983,7 @@ class PoDynamicFormFieldsComponent extends PoDynamicFormFieldsBaseComponent {
         return differences;
     }
     hasContainer() {
-        return this.visibleFields && this.visibleFields.some(field => field.container);
+        return this.visibleFields?.some(field => field.container) ?? false;
     }
     handleChangesContainer(prevContainers, currContainers, key) {
         for (let i = 0; i < prevContainers.length; i++) {