@po-ui/ng-components 17.26.6 → 17.26.7

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

@@ -1,10 +1,10 @@
 import * as i0 from '@angular/core';
-import { Directive, Input, Component, ChangeDetectionStrategy, NgModule, InjectionToken, TemplateRef, Optional, Inject, Injectable, EventEmitter, Output, ElementRef, HostListener, ViewChild, ChangeDetectorRef, inject, ViewChildren, ContentChildren, HostBinding, forwardRef, ViewContainerRef, ContentChild, Pipe, Injector, APP_INITIALIZER } from '@angular/core';
+import { Directive, Input, Component, ChangeDetectionStrategy, NgModule, InjectionToken, TemplateRef, Optional, Inject, Injectable, EventEmitter, Output, ElementRef, HostListener, ViewChild, inject, ChangeDetectorRef, ViewChildren, ContentChildren, HostBinding, forwardRef, ViewContainerRef, ContentChild, Pipe, Injector, APP_INITIALIZER } from '@angular/core';
 import * as i1 from '@angular/common';
 import { CommonModule, DOCUMENT, DecimalPipe, NgOptimizedImage, CurrencyPipe, DatePipe, TitleCasePipe } from '@angular/common';
 import * as i2$3 from '@angular/animations';
-import { style, animate, transition, trigger, animateChild, query, group, state, keyframes } from '@angular/animations';
-import { Subject, filter, debounceTime, fromEvent, timer, from, of, Subscription, ReplaySubject, throwError, map as map$1, catchError as catchError$1, Observable } from 'rxjs';
+import { trigger, transition, style, animate, group, query, animateChild, state, keyframes } from '@angular/animations';
+import { Subject, filter, fromEvent, debounceTime, from, timer, of, Subscription, ReplaySubject, throwError, map as map$1, catchError as catchError$1, Observable } from 'rxjs';
 import * as i2 from '@angular/router';
 import { RouterModule, NavigationEnd, NavigationCancel } from '@angular/router';
 import * as i5 from '@angular/cdk/listbox';
@@ -14,8 +14,8 @@ import * as i2$1 from '@angular/forms';
 import { NG_VALUE_ACCESSOR, FormsModule, NG_VALIDATORS, NgControl, ControlContainer, NgForm } from '@angular/forms';
 import * as i1$2 from '@angular/common/http';
 import { HttpHeaders, HttpEventType, HttpResponse, HttpRequest, HTTP_INTERCEPTORS, HttpClient } from '@angular/common/http';
-import { debounceTime as debounceTime$1, mapTo, concatMap, scan, tap, switchMap, delay, take, takeWhile, map, filter as filter$1, distinctUntilChanged, catchError, finalize } from 'rxjs/operators';
-import * as i5$1 from '@angular/cdk/overlay';
+import { debounceTime as debounceTime$1, concatMap, mapTo, scan, tap, switchMap, take, delay, takeWhile, map, filter as filter$1, distinctUntilChanged, catchError, finalize } from 'rxjs/operators';
+import * as i7 from '@angular/cdk/overlay';
 import { OverlayModule } from '@angular/cdk/overlay';
 import * as i2$2 from '@angular/cdk/scrolling';
 import { CdkVirtualScrollViewport, ScrollingModule } from '@angular/cdk/scrolling';
@@ -803,7 +803,13 @@ function isLanguage(value) {
 }
 /* istanbul ignore next */
 function reloadCurrentPage() {
-    window.location.assign(location.href);
+    const currentUrl = window.location.origin + window.location.pathname;
+    if (isValidUrl(currentUrl)) {
+        window.location.assign(currentUrl);
+    }
+}
+function isValidUrl(url, location = window.location) {
+    return url === location.origin + location.pathname;
 }
 function convertToBoolean(val) {
     if (typeof val === 'string') {
@@ -15676,10 +15682,10 @@ class PoMask {
     }
     setSelectionRange($event) {
         if (this.initialPosition > this.finalPosition) {
-            $event.target.setSelectionRange(this.finalPosition, this.initialPosition);
+            $event.target.setSelectionRange?.(this.finalPosition, this.initialPosition);
         }
         else {
-            $event.target.setSelectionRange(this.initialPosition, this.finalPosition);
+            $event.target.setSelectionRange?.(this.initialPosition, this.finalPosition);
         }
     }
     keydown($event) {
@@ -15799,7 +15805,7 @@ class PoMask {
     }
     // posiciona o cursor de acordo com o controle de posição
     setPositions($event) {
-        $event.target.setSelectionRange(this.initialPosition, this.finalPosition);
+        $event.target.setSelectionRange?.(this.initialPosition, this.finalPosition);
     }
     // muda a posição do cursor e atualiza o controle de posição
     changePosition($event, value) {
@@ -16392,6 +16398,20 @@ class PoDatepickerBaseComponent {
     get locale() {
         return this._locale || this.shortLanguage;
     }
+    /**
+     * @optional
+     *
+     * @description
+     *
+     * Define que o calendário do DatePicker será incluído no body da página, em vez de suspenso junto ao campo de entrada do componente.
+     * Essa opção é útil em cenários onde o DatePicker precisa ser renderizado fora do conteúdo principal da página,
+     * como em formulários que utilizam scroll ou containers com overflow escondido.
+     *
+     * > Obs: O uso dessa propriedade pode interferir na sequência de tabulação da página, especialmente em formulários longos.
+     *
+     * @default `false`
+     */
+    appendBox = false;
     constructor(languageService) {
         this.languageService = languageService;
     }
@@ -16516,7 +16536,7 @@ class PoDatepickerBaseComponent {
         this.hour = 'T00:00:00' + timezone;
     }
     static ɵfac = function PoDatepickerBaseComponent_Factory(t) { return new (t || PoDatepickerBaseComponent)(i0.ɵɵdirectiveInject(PoLanguageService)); };
-    static ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: PoDatepickerBaseComponent, inputs: { autoFocus: [i0.ɵɵInputFlags.HasDecoratorInputTransform, "p-auto-focus", "autoFocus", convertToBoolean], name: "name", optional: [i0.ɵɵInputFlags.None, "p-optional", "optional"], errorPattern: [i0.ɵɵInputFlags.None, "p-error-pattern", "errorPattern"], noAutocomplete: [i0.ɵɵInputFlags.None, "p-no-autocomplete", "noAutocomplete"], placeholder: [i0.ɵɵInputFlags.None, "p-placeholder", "placeholder"], setDisabled: [i0.ɵɵInputFlags.None, "p-disabled", "setDisabled"], setReadonly: [i0.ɵɵInputFlags.None, "p-readonly", "setReadonly"], setRequired: [i0.ɵɵInputFlags.None, "p-required", "setRequired"], showRequired: [i0.ɵɵInputFlags.None, "p-show-required", "showRequired"], setClean: [i0.ɵɵInputFlags.None, "p-clean", "setClean"], minDate: [i0.ɵɵInputFlags.None, "p-min-date", "minDate"], maxDate: [i0.ɵɵInputFlags.None, "p-max-date", "maxDate"], format: [i0.ɵɵInputFlags.None, "p-format", "format"], isoFormat: [i0.ɵɵInputFlags.None, "p-iso-format", "isoFormat"], locale: [i0.ɵɵInputFlags.None, "p-locale", "locale"] }, outputs: { onblur: "p-blur", onchange: "p-change" }, features: [i0.ɵɵInputTransformsFeature] });
+    static ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: PoDatepickerBaseComponent, inputs: { autoFocus: [i0.ɵɵInputFlags.HasDecoratorInputTransform, "p-auto-focus", "autoFocus", convertToBoolean], name: "name", optional: [i0.ɵɵInputFlags.None, "p-optional", "optional"], errorPattern: [i0.ɵɵInputFlags.None, "p-error-pattern", "errorPattern"], noAutocomplete: [i0.ɵɵInputFlags.None, "p-no-autocomplete", "noAutocomplete"], placeholder: [i0.ɵɵInputFlags.None, "p-placeholder", "placeholder"], setDisabled: [i0.ɵɵInputFlags.None, "p-disabled", "setDisabled"], setReadonly: [i0.ɵɵInputFlags.None, "p-readonly", "setReadonly"], setRequired: [i0.ɵɵInputFlags.None, "p-required", "setRequired"], showRequired: [i0.ɵɵInputFlags.None, "p-show-required", "showRequired"], setClean: [i0.ɵɵInputFlags.None, "p-clean", "setClean"], minDate: [i0.ɵɵInputFlags.None, "p-min-date", "minDate"], maxDate: [i0.ɵɵInputFlags.None, "p-max-date", "maxDate"], format: [i0.ɵɵInputFlags.None, "p-format", "format"], isoFormat: [i0.ɵɵInputFlags.None, "p-iso-format", "isoFormat"], locale: [i0.ɵɵInputFlags.None, "p-locale", "locale"], appendBox: [i0.ɵɵInputFlags.HasDecoratorInputTransform, "p-append-in-body", "appendBox", convertToBoolean] }, outputs: { onblur: "p-blur", onchange: "p-change" }, features: [i0.ɵɵInputTransformsFeature] });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PoDatepickerBaseComponent, [{
         type: Directive
@@ -16574,6 +16594,9 @@ class PoDatepickerBaseComponent {
         }], locale: [{
             type: Input,
             args: ['p-locale']
+        }], appendBox: [{
+            type: Input,
+            args: [{ alias: 'p-append-in-body', transform: convertToBoolean }]
         }] }); })();
 
 const PoDatepickerLiterals = {
@@ -16595,17 +16618,65 @@ const _c0$15 = ["calendar"];
 const _c1$t = ["dialogPicker"];
 const _c2$f = ["iconDatepicker"];
 const _c3$a = ["inp"];
-function PoDatepickerComponent_po_clean_6_Template(rf, ctx) { if (rf & 1) {
-    const _r7 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "po-clean", 14);
-    i0.ɵɵlistener("p-change-event", function PoDatepickerComponent_po_clean_6_Template_po_clean_p_change_event_0_listener() { i0.ɵɵrestoreView(_r7); const ctx_r6 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r6.clear()); });
+function PoDatepickerComponent_po_clean_9_Template(rf, ctx) { if (rf & 1) {
+    const _r13 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "po-clean", 16);
+    i0.ɵɵlistener("p-change-event", function PoDatepickerComponent_po_clean_9_Template_po_clean_p_change_event_0_listener() { i0.ɵɵrestoreView(_r13); const ctx_r12 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r12.clear()); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext();
-    i0.ɵɵproperty("p-element-ref", ctx_r1.inputEl);
+    const ctx_r3 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("p-element-ref", ctx_r3.inputEl);
+} }
+function PoDatepickerComponent_ng_container_12_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementContainer(0);
+} }
+function PoDatepickerComponent_ng_template_13_div_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "div", 21);
+} }
+function PoDatepickerComponent_ng_template_13_Template(rf, ctx) { if (rf & 1) {
+    const _r18 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", null, 17);
+    i0.ɵɵtemplate(2, PoDatepickerComponent_ng_template_13_div_2_Template, 1, 0, "div", 18);
+    i0.ɵɵelementStart(3, "po-calendar", 19, 20);
+    i0.ɵɵtwoWayListener("ngModelChange", function PoDatepickerComponent_ng_template_13_Template_po_calendar_ngModelChange_3_listener($event) { i0.ɵɵrestoreView(_r18); const ctx_r17 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r17.date, $event) || (ctx_r17.date = $event); return i0.ɵɵresetView($event); });
+    i0.ɵɵlistener("p-change", function PoDatepickerComponent_ng_template_13_Template_po_calendar_p_change_3_listener() { i0.ɵɵrestoreView(_r18); const ctx_r19 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r19.dateSelected()); });
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r6 = i0.ɵɵnextContext();
+    i0.ɵɵclassProp("po-datepicker-popup-calendar", !ctx_r6.verifyMobile());
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("ngIf", ctx_r6.verifyMobile());
+    i0.ɵɵadvance();
+    i0.ɵɵclassProp("po-datepicker-calendar-mobile", ctx_r6.verifyMobile());
+    i0.ɵɵtwoWayProperty("ngModel", ctx_r6.date);
+    i0.ɵɵproperty("p-max-date", ctx_r6.maxDate)("p-min-date", ctx_r6.minDate)("p-locale", ctx_r6.locale);
+} }
+function PoDatepickerComponent_ng_template_15_ng_container_0_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementContainer(0);
+} }
+function PoDatepickerComponent_ng_template_15_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵtemplate(0, PoDatepickerComponent_ng_template_15_ng_container_0_Template, 1, 0, "ng-container", 22);
+} if (rf & 2) {
+    i0.ɵɵnextContext();
+    const _r7 = i0.ɵɵreference(14);
+    i0.ɵɵproperty("ngTemplateOutlet", _r7);
+} }
+function PoDatepickerComponent_ng_template_17_ng_template_0_ng_container_0_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementContainer(0);
+} }
+function PoDatepickerComponent_ng_template_17_ng_template_0_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵtemplate(0, PoDatepickerComponent_ng_template_17_ng_template_0_ng_container_0_Template, 1, 0, "ng-container", 22);
+} if (rf & 2) {
+    i0.ɵɵnextContext(2);
+    const _r7 = i0.ɵɵreference(14);
+    i0.ɵɵproperty("ngTemplateOutlet", _r7);
 } }
-function PoDatepickerComponent_div_11_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "div", 15);
+function PoDatepickerComponent_ng_template_17_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵtemplate(0, PoDatepickerComponent_ng_template_17_ng_template_0_Template, 1, 1, "ng-template", 23);
+} if (rf & 2) {
+    i0.ɵɵnextContext();
+    const _r1 = i0.ɵɵreference(4);
+    i0.ɵɵproperty("cdkConnectedOverlayOrigin", _r1)("cdkConnectedOverlayOpen", true);
 } }
 const poCalendarContentOffset$1 = 8;
 const poCalendarPositionDefault$1 = 'bottom-left';
@@ -16933,17 +17004,21 @@ class PoDatepickerComponent extends PoDatepickerBaseComponent {
         window.removeEventListener('scroll', this.onScroll, true);
     }
     setDialogPickerStyleDisplay(value) {
-        this.dialogPicker.nativeElement.style.display = value;
+        if (this.dialogPicker && this.dialogPicker.nativeElement) {
+            this.dialogPicker.nativeElement.style.display = value;
+        }
     }
     setCalendarPosition() {
         this.setDialogPickerStyleDisplay('block');
-        this.controlPosition.setElements(this.dialogPicker.nativeElement, poCalendarContentOffset$1, this.inputEl, ['top-left', 'top-right', 'bottom-left', 'bottom-right'], false, true);
-        this.controlPosition.adjustPosition(poCalendarPositionDefault$1);
+        if (this.dialogPicker && this.dialogPicker.nativeElement) {
+            this.controlPosition.setElements(this.dialogPicker.nativeElement, poCalendarContentOffset$1, this.inputEl, ['top-left', 'top-right', 'bottom-left', 'bottom-right'], false, true);
+            this.controlPosition.adjustPosition(poCalendarPositionDefault$1);
+        }
     }
     static ɵfac = function PoDatepickerComponent_Factory(t) { return new (t || PoDatepickerComponent)(i0.ɵɵdirectiveInject(PoLanguageService), i0.ɵɵdirectiveInject(PoControlPositionService), i0.ɵɵdirectiveInject(i0.Renderer2), i0.ɵɵdirectiveInject(i0.ElementRef)); };
     static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PoDatepickerComponent, selectors: [["po-datepicker"]], viewQuery: function PoDatepickerComponent_Query(rf, ctx) { if (rf & 1) {
             i0.ɵɵviewQuery(_c0$15, 7);
-            i0.ɵɵviewQuery(_c1$t, 7, ElementRef);
+            i0.ɵɵviewQuery(_c1$t, 5, ElementRef);
             i0.ɵɵviewQuery(_c2$f, 5);
             i0.ɵɵviewQuery(_c3$a, 7, ElementRef);
         } if (rf & 2) {
@@ -16966,29 +17041,27 @@ class PoDatepickerComponent extends PoDatepickerBaseComponent {
                     multi: true
                 },
                 PoControlPositionService
-            ]), i0.ɵɵInheritDefinitionFeature], decls: 15, vars: 29, consts: [[3, "p-disabled", "p-id", "p-label", "p-optional", "p-required", "p-show-required"], [1, "po-field-container-content", "po-field-container-content-datepicker"], [1, "po-field-container-input"], ["type", "text", 1, "po-input", "po-datepicker", 3, "autocomplete", "disabled", "id", "placeholder", "readonly", "required", "blur", "click"], ["inp", ""], [1, "po-field-icon-container-right"], ["class", "po-icon-input", 3, "p-element-ref", "p-change-event", 4, "ngIf"], ["p-icon", "ICON_CALENDAR", "p-kind", "tertiary", 1, "po-datepicker-button", 3, "p-disabled", "keydown", "p-click"], ["iconDatepicker", ""], ["dialogPicker", ""], ["class", "po-datepicker-calendar-overlay", 4, "ngIf"], [3, "ngModel", "p-max-date", "p-min-date", "p-locale", "ngModelChange", "p-change"], ["calendar", ""], [3, "p-help", "p-disabled", "p-error-pattern"], [1, "po-icon-input", 3, "p-element-ref", "p-change-event"], [1, "po-datepicker-calendar-overlay"]], template: function PoDatepickerComponent_Template(rf, ctx) { if (rf & 1) {
-            i0.ɵɵelementStart(0, "po-field-container", 0)(1, "div", 1)(2, "div", 2)(3, "input", 3, 4);
-            i0.ɵɵlistener("blur", function PoDatepickerComponent_Template_input_blur_3_listener($event) { return ctx.eventOnBlur($event); })("click", function PoDatepickerComponent_Template_input_click_3_listener($event) { return ctx.eventOnClick($event); });
+            ]), i0.ɵɵInheritDefinitionFeature], decls: 20, vars: 23, consts: [[3, "p-disabled", "p-id", "p-label", "p-optional", "p-required", "p-show-required"], ["outerContainer", ""], ["cdkOverlayOrigin", "", 1, "po-field-container-content", "po-field-container-content-datepicker"], ["trigger", "cdkOverlayOrigin"], [1, "po-field-container-input"], ["type", "text", 1, "po-input", "po-datepicker", 3, "autocomplete", "disabled", "id", "placeholder", "readonly", "required", "blur", "click"], ["inp", ""], [1, "po-field-icon-container-right"], ["class", "po-icon-input", 3, "p-element-ref", "p-change-event", 4, "ngIf"], ["p-icon", "ICON_CALENDAR", "p-kind", "tertiary", 1, "po-datepicker-button", 3, "p-disabled", "keydown", "p-click"], ["iconDatepicker", ""], [4, "ngIf", "ngIfThen", "ngIfElse"], ["sharedCalendarContent", ""], ["dropdownDefault", ""], ["dropdownCDK", ""], [3, "p-help", "p-disabled", "p-error-pattern"], [1, "po-icon-input", 3, "p-element-ref", "p-change-event"], ["dialogPicker", ""], ["class", "po-datepicker-calendar-overlay", 4, "ngIf"], [3, "ngModel", "p-max-date", "p-min-date", "p-locale", "ngModelChange", "p-change"], ["calendar", ""], [1, "po-datepicker-calendar-overlay"], [4, "ngTemplateOutlet"], ["cdkConnectedOverlay", "", 3, "cdkConnectedOverlayOrigin", "cdkConnectedOverlayOpen"]], template: function PoDatepickerComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵelementStart(0, "po-field-container", 0)(1, "div", null, 1)(3, "div", 2, 3)(5, "div", 4)(6, "input", 5, 6);
+            i0.ɵɵlistener("blur", function PoDatepickerComponent_Template_input_blur_6_listener($event) { return ctx.eventOnBlur($event); })("click", function PoDatepickerComponent_Template_input_click_6_listener($event) { return ctx.eventOnClick($event); });
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(5, "div", 5);
-            i0.ɵɵtemplate(6, PoDatepickerComponent_po_clean_6_Template, 1, 1, "po-clean", 6);
-            i0.ɵɵelementEnd()();
-            i0.ɵɵelementStart(7, "po-button", 7, 8);
-            i0.ɵɵlistener("keydown", function PoDatepickerComponent_Template_po_button_keydown_7_listener($event) { return ctx.onKeyPress($event); })("p-click", function PoDatepickerComponent_Template_po_button_p_click_7_listener() { return ctx.togglePicker(); });
+            i0.ɵɵelementStart(8, "div", 7);
+            i0.ɵɵtemplate(9, PoDatepickerComponent_po_clean_9_Template, 1, 1, "po-clean", 8);
             i0.ɵɵelementEnd()();
-            i0.ɵɵelementStart(9, "div", null, 9);
-            i0.ɵɵtemplate(11, PoDatepickerComponent_div_11_Template, 1, 0, "div", 10);
-            i0.ɵɵelementStart(12, "po-calendar", 11, 12);
-            i0.ɵɵtwoWayListener("ngModelChange", function PoDatepickerComponent_Template_po_calendar_ngModelChange_12_listener($event) { i0.ɵɵtwoWayBindingSet(ctx.date, $event) || (ctx.date = $event); return $event; });
-            i0.ɵɵlistener("p-change", function PoDatepickerComponent_Template_po_calendar_p_change_12_listener() { return ctx.dateSelected(); });
+            i0.ɵɵelementStart(10, "po-button", 9, 10);
+            i0.ɵɵlistener("keydown", function PoDatepickerComponent_Template_po_button_keydown_10_listener($event) { return ctx.onKeyPress($event); })("p-click", function PoDatepickerComponent_Template_po_button_p_click_10_listener() { return ctx.togglePicker(); });
             i0.ɵɵelementEnd()();
-            i0.ɵɵelement(14, "po-field-container-bottom", 13);
+            i0.ɵɵtemplate(12, PoDatepickerComponent_ng_container_12_Template, 1, 0, "ng-container", 11)(13, PoDatepickerComponent_ng_template_13_Template, 5, 9, "ng-template", null, 12, i0.ɵɵtemplateRefExtractor)(15, PoDatepickerComponent_ng_template_15_Template, 1, 1, "ng-template", null, 13, i0.ɵɵtemplateRefExtractor)(17, PoDatepickerComponent_ng_template_17_Template, 1, 2, "ng-template", null, 14, i0.ɵɵtemplateRefExtractor);
+            i0.ɵɵelementEnd();
+            i0.ɵɵelement(19, "po-field-container-bottom", 15);
             i0.ɵɵelementEnd();
         } if (rf & 2) {
-            const _r0 = i0.ɵɵreference(4);
+            const _r2 = i0.ɵɵreference(7);
+            const _r9 = i0.ɵɵreference(16);
+            const _r11 = i0.ɵɵreference(18);
             i0.ɵɵproperty("p-disabled", ctx.disabled)("p-id", ctx.id)("p-label", ctx.label)("p-optional", ctx.optional)("p-required", ctx.required)("p-show-required", ctx.showRequired);
-            i0.ɵɵadvance(3);
-            i0.ɵɵclassProp("po-input-icon-right", ctx.clean && _r0.value);
+            i0.ɵɵadvance(6);
+            i0.ɵɵclassProp("po-input-icon-right", ctx.clean && _r2.value);
             i0.ɵɵproperty("autocomplete", ctx.autocomplete)("disabled", ctx.disabled)("id", ctx.id)("placeholder", ctx.disabled ? "" : ctx.placeholder)("readonly", ctx.readonly)("required", ctx.required);
             i0.ɵɵattribute("name", ctx.name);
             i0.ɵɵadvance(3);
@@ -16996,16 +17069,10 @@ class PoDatepickerComponent extends PoDatepickerBaseComponent {
             i0.ɵɵadvance();
             i0.ɵɵproperty("p-disabled", ctx.disabled || ctx.readonly);
             i0.ɵɵadvance(2);
-            i0.ɵɵclassProp("po-datepicker-popup-calendar", !ctx.verifyMobile());
-            i0.ɵɵadvance(2);
-            i0.ɵɵproperty("ngIf", ctx.verifyMobile());
-            i0.ɵɵadvance();
-            i0.ɵɵclassProp("po-datepicker-calendar-mobile", ctx.verifyMobile());
-            i0.ɵɵtwoWayProperty("ngModel", ctx.date);
-            i0.ɵɵproperty("p-max-date", ctx.maxDate)("p-min-date", ctx.minDate)("p-locale", ctx.locale);
-            i0.ɵɵadvance(2);
+            i0.ɵɵproperty("ngIf", ctx.appendBox)("ngIfThen", _r11)("ngIfElse", _r9);
+            i0.ɵɵadvance(7);
             i0.ɵɵproperty("p-help", ctx.help)("p-disabled", ctx.disabled)("p-error-pattern", ctx.getErrorPattern());
-        } }, dependencies: [i1.NgIf, i2$1.NgControlStatus, i2$1.NgModel, PoFieldContainerBottomComponent, PoFieldContainerComponent, PoCleanComponent, PoCalendarComponent, PoButtonComponent], encapsulation: 2, changeDetection: 0 });
+        } }, dependencies: [i1.NgIf, i1.NgTemplateOutlet, i2$1.NgControlStatus, i2$1.NgModel, PoFieldContainerBottomComponent, PoFieldContainerComponent, i7.CdkConnectedOverlay, i7.CdkOverlayOrigin, PoCleanComponent, PoCalendarComponent, PoButtonComponent], encapsulation: 2, changeDetection: 0 });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PoDatepickerComponent, [{
         type: Component,
@@ -17021,13 +17088,13 @@ class PoDatepickerComponent extends PoDatepickerBaseComponent {
                         multi: true
                     },
                     PoControlPositionService
-                ], changeDetection: ChangeDetectionStrategy.OnPush, 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 po-field-container-content-datepicker\">\n    <div class=\"po-field-container-input\">\n      <input\n        #inp\n        class=\"po-input po-datepicker\"\n        [class.po-input-icon-right]=\"clean && inp.value\"\n        type=\"text\"\n        [attr.name]=\"name\"\n        [autocomplete]=\"autocomplete\"\n        [disabled]=\"disabled\"\n        [id]=\"id\"\n        [placeholder]=\"disabled ? '' : placeholder\"\n        [readonly]=\"readonly\"\n        [required]=\"required\"\n        (blur)=\"eventOnBlur($event)\"\n        (click)=\"eventOnClick($event)\"\n      />\n      <div class=\"po-field-icon-container-right\">\n        <po-clean\n          class=\"po-icon-input\"\n          *ngIf=\"clean && !disabled && !readonly\"\n          [p-element-ref]=\"inputEl\"\n          (p-change-event)=\"clear()\"\n        >\n        </po-clean>\n      </div>\n    </div>\n    <po-button\n      #iconDatepicker\n      class=\"po-datepicker-button\"\n      p-icon=\"ICON_CALENDAR\"\n      p-kind=\"tertiary\"\n      [p-disabled]=\"disabled || readonly\"\n      (keydown)=\"onKeyPress($event)\"\n      (p-click)=\"togglePicker()\"\n    >\n    </po-button>\n  </div>\n\n  <div #dialogPicker [class.po-datepicker-popup-calendar]=\"!verifyMobile()\">\n    <div *ngIf=\"verifyMobile()\" class=\"po-datepicker-calendar-overlay\"></div>\n    <po-calendar\n      [class.po-datepicker-calendar-mobile]=\"verifyMobile()\"\n      #calendar\n      [(ngModel)]=\"date\"\n      [p-max-date]=\"maxDate\"\n      [p-min-date]=\"minDate\"\n      [p-locale]=\"locale\"\n      (p-change)=\"dateSelected()\"\n    >\n    </po-calendar>\n  </div>\n\n  <po-field-container-bottom\n    [p-help]=\"help\"\n    [p-disabled]=\"disabled\"\n    [p-error-pattern]=\"getErrorPattern()\"\n  ></po-field-container-bottom>\n</po-field-container>\n" }]
+                ], changeDetection: ChangeDetectionStrategy.OnPush, 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 #outerContainer>\n    <div\n      cdkOverlayOrigin\n      #trigger=\"cdkOverlayOrigin\"\n      class=\"po-field-container-content po-field-container-content-datepicker\"\n    >\n      <div class=\"po-field-container-input\">\n        <input\n          #inp\n          class=\"po-input po-datepicker\"\n          [class.po-input-icon-right]=\"clean && inp.value\"\n          type=\"text\"\n          [attr.name]=\"name\"\n          [autocomplete]=\"autocomplete\"\n          [disabled]=\"disabled\"\n          [id]=\"id\"\n          [placeholder]=\"disabled ? '' : placeholder\"\n          [readonly]=\"readonly\"\n          [required]=\"required\"\n          (blur)=\"eventOnBlur($event)\"\n          (click)=\"eventOnClick($event)\"\n        />\n        <div class=\"po-field-icon-container-right\">\n          <po-clean\n            class=\"po-icon-input\"\n            *ngIf=\"clean && !disabled && !readonly\"\n            [p-element-ref]=\"inputEl\"\n            (p-change-event)=\"clear()\"\n          >\n          </po-clean>\n        </div>\n      </div>\n      <po-button\n        #iconDatepicker\n        class=\"po-datepicker-button\"\n        p-icon=\"ICON_CALENDAR\"\n        p-kind=\"tertiary\"\n        [p-disabled]=\"disabled || readonly\"\n        (keydown)=\"onKeyPress($event)\"\n        (p-click)=\"togglePicker()\"\n      >\n      </po-button>\n    </div>\n\n    <ng-container *ngIf=\"appendBox; then dropdownCDK; else dropdownDefault\"> </ng-container>\n\n    <ng-template #sharedCalendarContent>\n      <div #dialogPicker [class.po-datepicker-popup-calendar]=\"!verifyMobile()\">\n        <div *ngIf=\"verifyMobile()\" class=\"po-datepicker-calendar-overlay\"></div>\n        <po-calendar\n          [class.po-datepicker-calendar-mobile]=\"verifyMobile()\"\n          #calendar\n          [(ngModel)]=\"date\"\n          [p-max-date]=\"maxDate\"\n          [p-min-date]=\"minDate\"\n          [p-locale]=\"locale\"\n          (p-change)=\"dateSelected()\"\n        ></po-calendar>\n      </div>\n    </ng-template>\n\n    <ng-template #dropdownDefault>\n      <ng-container *ngTemplateOutlet=\"sharedCalendarContent\"></ng-container>\n    </ng-template>\n\n    <ng-template #dropdownCDK>\n      <ng-template cdkConnectedOverlay [cdkConnectedOverlayOrigin]=\"trigger\" [cdkConnectedOverlayOpen]=\"true\">\n        <ng-container *ngTemplateOutlet=\"sharedCalendarContent\"></ng-container>\n      </ng-template>\n    </ng-template>\n  </div>\n\n  <po-field-container-bottom\n    [p-help]=\"help\"\n    [p-disabled]=\"disabled\"\n    [p-error-pattern]=\"getErrorPattern()\"\n  ></po-field-container-bottom>\n</po-field-container>\n" }]
     }], () => [{ type: PoLanguageService }, { type: PoControlPositionService }, { type: i0.Renderer2 }, { type: i0.ElementRef }], { calendar: [{
             type: ViewChild,
             args: ['calendar', { static: true }]
         }], dialogPicker: [{
             type: ViewChild,
-            args: ['dialogPicker', { read: ElementRef, static: true }]
+            args: ['dialogPicker', { read: ElementRef, static: false }]
         }], iconDatepicker: [{
             type: ViewChild,
             args: ['iconDatepicker']
@@ -17057,17 +17124,37 @@ class PoDatepickerComponent extends PoDatepickerBaseComponent {
 class PoDatepickerModule {
     static ɵfac = function PoDatepickerModule_Factory(t) { return new (t || PoDatepickerModule)(); };
     static ɵmod = /*@__PURE__*/ i0.ɵɵdefineNgModule({ type: PoDatepickerModule });
-    static ɵinj = /*@__PURE__*/ i0.ɵɵdefineInjector({ imports: [CommonModule, FormsModule, PoFieldContainerModule, PoCleanModule, PoCalendarModule, PoButtonModule] });
+    static ɵinj = /*@__PURE__*/ i0.ɵɵdefineInjector({ imports: [CommonModule,
+            FormsModule,
+            PoFieldContainerModule,
+            OverlayModule,
+            PoCleanModule,
+            PoCalendarModule,
+            PoButtonModule] });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PoDatepickerModule, [{
         type: NgModule,
         args: [{
-                imports: [CommonModule, FormsModule, PoFieldContainerModule, PoCleanModule, PoCalendarModule, PoButtonModule],
+                imports: [
+                    CommonModule,
+                    FormsModule,
+                    PoFieldContainerModule,
+                    OverlayModule,
+                    PoCleanModule,
+                    PoCalendarModule,
+                    PoButtonModule
+                ],
                 exports: [PoDatepickerComponent],
                 declarations: [PoDatepickerComponent]
             }]
     }], null, null); })();
-(function () { (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(PoDatepickerModule, { declarations: [PoDatepickerComponent], imports: [CommonModule, FormsModule, PoFieldContainerModule, PoCleanModule, PoCalendarModule, PoButtonModule], exports: [PoDatepickerComponent] }); })();
+(function () { (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(PoDatepickerModule, { declarations: [PoDatepickerComponent], imports: [CommonModule,
+        FormsModule,
+        PoFieldContainerModule,
+        OverlayModule,
+        PoCleanModule,
+        PoCalendarModule,
+        PoButtonModule], exports: [PoDatepickerComponent] }); })();
 
 const poModalLiterals = {
     en: {
@@ -28578,7 +28665,7 @@ class PoComboComponent extends PoComboBaseComponent {
             i0.ɵɵproperty("ngIf", ctx.appendBox)("ngIfThen", _r10)("ngIfElse", _r8);
             i0.ɵɵadvance(5);
             i0.ɵɵproperty("p-help", ctx.help)("p-disabled", ctx.disabled);
-        } }, dependencies: [i1.NgClass, i1.NgIf, i1.NgTemplateOutlet, i5$1.CdkConnectedOverlay, i5$1.CdkOverlayOrigin, PoCleanComponent, PoFieldContainerBottomComponent, PoFieldContainerComponent, PoIconComponent, PoListBoxComponent], encapsulation: 2, changeDetection: 0 });
+        } }, dependencies: [i1.NgClass, i1.NgIf, i1.NgTemplateOutlet, i7.CdkConnectedOverlay, i7.CdkOverlayOrigin, PoCleanComponent, PoFieldContainerBottomComponent, PoFieldContainerComponent, PoIconComponent, PoListBoxComponent], encapsulation: 2, changeDetection: 0 });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PoComboComponent, [{
         type: Component,
@@ -42102,7 +42189,7 @@ class PoFieldModule {
         PoSwitchModule,
         PoTagModule] }); })();
 i0.ɵɵsetComponentScope(PoLookupModalComponent, function () { return [i1.NgIf, i2$1.DefaultValueAccessor, i2$1.NgControlStatus, i2$1.NgModel, PoDisclaimerGroupComponent, PoFieldContainerComponent, PoModalComponent, PoTableComponent, PoIconComponent]; }, []);
-i0.ɵɵsetComponentScope(PoMultiselectComponent, function () { return [i1.NgClass, i1.NgForOf, i1.NgIf, i1.NgTemplateOutlet, i5$1.CdkConnectedOverlay, i5$1.CdkOverlayOrigin, PoFieldContainerBottomComponent, PoFieldContainerComponent, PoIconComponent, PoTagComponent, PoMultiselectDropdownComponent]; }, []);
+i0.ɵɵsetComponentScope(PoMultiselectComponent, function () { return [i1.NgClass, i1.NgForOf, i1.NgIf, i1.NgTemplateOutlet, i7.CdkConnectedOverlay, i7.CdkOverlayOrigin, PoFieldContainerBottomComponent, PoFieldContainerComponent, PoIconComponent, PoTagComponent, PoMultiselectDropdownComponent]; }, []);
 
 /**
  * @usedBy PoInfoComponent