@po-ui/ng-components 21.27.0 → 21.28.0

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

@@ -15444,7 +15444,6 @@ class PoCalendarWrapperComponent {
     size;
     hideTodayButton = false;
     hasPresets = false;
-    // Template customizado para o header do calendário. Para uso interno do datepicker/datepicker-range.
     headerTemplate;
     _locale;
     set locale(value) {
@@ -15456,9 +15455,9 @@ class PoCalendarWrapperComponent {
     }
     headerChange = new EventEmitter();
     selectDate = new EventEmitter();
+    selectTodayEvent = new EventEmitter();
     hoverDateSource = new Subject();
     hoverDate = this.hoverDateSource.pipe(debounceTime$1(100));
-    // Evento para fechar o calendário. Para uso interno do datepicker/datepicker-range.
     closeCalendar = new EventEmitter();
     currentYear;
     displayYear;
@@ -15731,7 +15730,6 @@ class PoCalendarWrapperComponent {
         }
         return index === this.focusedDayIndex ? 0 : -1;
     }
-    // --- 4. Navegação (Setas) ---
     onNextMonth() {
         const newMonth = this.displayMonthNumber < 11 ? this.displayMonthNumber + 1 : 0;
         const newYear = this.displayMonthNumber < 11 ? this.displayYear : this.displayYear + 1;
@@ -15775,6 +15773,7 @@ class PoCalendarWrapperComponent {
         this.hoverDateSource.next(null);
     }
     onSelectToday() {
+        this.selectTodayEvent.emit();
         this.onSelectDate(this.today);
         if (this.displayMonthNumber !== this.today.getMonth() || this.displayYear !== this.today.getFullYear()) {
             this.updateDisplay(this.today.getFullYear(), this.today.getMonth());
@@ -15835,7 +15834,6 @@ class PoCalendarWrapperComponent {
         return key === 'Enter' || key === ' ';
     }
     handleSelectKey(day, index) {
-        // Bloqueia seleção de dias desabilitados
         if (this.isDayDisabled(day)) {
             return;
         }
@@ -16182,7 +16180,7 @@ class PoCalendarWrapperComponent {
         return `${index}:${weekDay}`;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: PoCalendarWrapperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: PoCalendarWrapperComponent, isStandalone: false, selector: "po-calendar-wrapper", inputs: { value: ["p-value", "value"], mode: ["p-mode", "mode"], responsive: ["p-responsive", "responsive"], partType: ["p-part-type", "partType"], range: ["p-range", "range"], activateDate: ["p-activate-date", "activateDate"], selectedValue: ["p-selected-value", "selectedValue"], minDate: ["p-min-date", "minDate"], maxDate: ["p-max-date", "maxDate"], hoverValue: ["p-hover-value", "hoverValue"], size: ["p-size", "size"], hideTodayButton: ["p-hide-today-button", "hideTodayButton"], hasPresets: ["p-presets", "hasPresets"], headerTemplate: ["p-header-template", "headerTemplate"], locale: ["p-locale", "locale"] }, outputs: { headerChange: "p-header-change", selectDate: "p-select-date", hoverDate: "p-hover-date", closeCalendar: "p-close-calendar" }, host: { listeners: { "keydown": "onHostKeydown($event)" } }, providers: [PoCalendarService], usesOnChanges: true, ngImport: i0, template: "<div class=\"po-calendar-wrapper\">\n  @if (isDayVisible) {\n    <ng-container>\n      @if (templateContext) {\n        <po-calendar-header\n          (p-previous)=\"onPreviousMonth()\"\n          (p-next)=\"onNextMonth()\"\n          [p-display-month]=\"displayMonth\"\n          [p-display-year]=\"displayYear\"\n          [p-template-context]=\"templateContext\"\n          [p-header-template]=\"headerTemplate || internalComboTemplate\"\n          [p-size]=\"size\"\n          [p-locale]=\"locale\"\n        >\n        </po-calendar-header>\n      }\n\n      <div class=\"po-calendar-content\">\n        <div class=\"po-calendar-labels\">\n          @for (weekDay of displayWeekDays; track trackByWeekDay($index, weekDay)) {\n            <div class=\"po-calendar-label\">\n              {{ weekDay }}\n            </div>\n          }\n        </div>\n\n        <div class=\"po-calendar-content-list-day\">\n          @for (day of displayDays; track trackByDay($index, day); let i = $index) {\n            <div\n              class=\"po-calendar-day\"\n              [ngClass]=\"getDayBackgroundColor(day)\"\n              (click)=\"onSelectDate(day)\"\n              (mouseenter)=\"onMouseEnter(day)\"\n              (mouseleave)=\"onMouseLeave()\"\n              (keydown)=\"onDayKeydown($event, day, i)\"\n              [tabindex]=\"getDayTabIndex(day, i)\"\n              attr-calendar\n              [attr.data-other-month]=\"day.getMonth() !== displayMonthNumber\"\n              [attr.data-day-index]=\"i\"\n            >\n              <span [ngClass]=\"getDayForegroundColor(day)\">\n                {{ day.getDate() }}\n              </span>\n            </div>\n          }\n        </div>\n      </div>\n    </ng-container>\n  }\n\n  @if (isMonthVisible) {\n    <ng-container>\n      <po-calendar-header\n        (p-previous)=\"updateYear(-1)\"\n        (p-next)=\"updateYear(1)\"\n        [p-template-context]=\"templateContext\"\n        [p-header-template]=\"headerTemplate || internalComboTemplate\"\n        [p-size]=\"size\"\n        [p-locale]=\"locale\"\n      >\n      </po-calendar-header>\n\n      <div class=\"po-calendar-content\">\n        <div class=\"po-calendar-labels\">\n          <div class=\"po-calendar-label\">\n            {{ monthLabel }}\n          </div>\n        </div>\n        <div class=\"po-calendar-content-list-month\">\n          @for (month of displayMonths; track trackByMonth($index, month); let i = $index) {\n            <div\n              class=\"po-calendar-month\"\n              [ngClass]=\"getBackgroundColor(i, displayMonthNumber)\"\n              (click)=\"onSelectMonth(displayYear, i)\"\n              attr-calendar\n            >\n              <span [ngClass]=\"getForegroundColor(i, displayMonthNumber)\">\n                {{ month }}\n              </span>\n            </div>\n          }\n        </div>\n      </div>\n    </ng-container>\n  }\n\n  @if (isYearVisible) {\n    <ng-container>\n      <po-calendar-header\n        (p-previous)=\"updateYear(-10)\"\n        (p-next)=\"updateYear(10)\"\n        [p-template-context]=\"templateContext\"\n        [p-header-template]=\"headerTemplate || internalComboTemplate\"\n        [p-size]=\"size\"\n        [p-locale]=\"locale\"\n      >\n      </po-calendar-header>\n\n      <div class=\"po-calendar-content\">\n        <div class=\"po-calendar-labels\">\n          <div class=\"po-calendar-label\">\n            {{ yearLabel }}\n          </div>\n        </div>\n\n        <div class=\"po-calendar-content-list-year\">\n          @for (year of displayDecade; track trackByYear($index, year)) {\n            <div\n              class=\"po-calendar-year\"\n              [ngClass]=\"getBackgroundColor(year, currentYear)\"\n              (click)=\"onSelectYear(year, displayMonthNumber)\"\n              attr-calendar\n            >\n              <span [ngClass]=\"getForegroundColor(year, currentYear)\">\n                {{ year }}\n              </span>\n            </div>\n          }\n        </div>\n      </div>\n    </ng-container>\n  }\n  @if (!responsive || (responsive && !hasPresets)) {\n    <po-calendar-footer\n      [p-label-clear]=\"displayToClean\"\n      [p-label-today]=\"displayToday\"\n      [p-hide-today-button]=\"hideTodayButton\"\n      [p-size]=\"size\"\n      [p-responsive]=\"responsive\"\n      [p-today-disabled]=\"isTodayUnavailable()\"\n      (p-clear)=\"onClear()\"\n      (p-select-today)=\"onSelectToday()\"\n      (p-close-calendar)=\"onFooterCloseCalendar()\"\n    ></po-calendar-footer>\n  }\n</div>\n\n<ng-template #internalComboTemplate let-combo>\n  <po-combo\n    #monthCombo\n    class=\"po-combo-first\"\n    [name]=\"'month-' + comboKey\"\n    [p-clean]=\"false\"\n    [p-remove-initial-filter]=\"true\"\n    [ngModel]=\"combo.monthIndex\"\n    [p-options]=\"combo.monthsOptions\"\n    (p-change)=\"combo.updateDate(combo.year, $event)\"\n    (p-blur)=\"combo.onComboBlur(monthCombo)\"\n    [p-size]=\"size\"\n  >\n  </po-combo>\n\n  <po-combo\n    #yearCombo\n    class=\"po-combo-last\"\n    [name]=\"'year-' + comboKey\"\n    [p-clean]=\"false\"\n    [p-remove-initial-filter]=\"true\"\n    [ngModel]=\"combo.year\"\n    [p-options]=\"combo.yearsOptions\"\n    (p-change)=\"combo.updateDate($event, combo.monthIndex)\"\n    (p-blur)=\"combo.onComboBlur(yearCombo)\"\n    [p-size]=\"size\"\n  >\n  </po-combo>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: PoComboComponent, selector: "po-combo" }, { kind: "component", type: PoCalendarFooterComponent, selector: "po-calendar-footer", inputs: ["p-size", "p-label-clear", "p-label-today", "p-responsive", "p-today-disabled", "p-hide-today-button"], outputs: ["p-clear", "p-select-today", "p-close-calendar"] }, { kind: "component", type: PoCalendarHeaderComponent, selector: "po-calendar-header", inputs: ["p-hide-previous", "p-hide-next", "p-display-month", "p-display-year", "p-display-month-label", "p-month-options", "p-header-template", "p-template-context", "p-size", "p-locale"], outputs: ["p-previous", "p-next", "p-select-month", "p-select-year"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: PoCalendarWrapperComponent, isStandalone: false, selector: "po-calendar-wrapper", inputs: { value: ["p-value", "value"], mode: ["p-mode", "mode"], responsive: ["p-responsive", "responsive"], partType: ["p-part-type", "partType"], range: ["p-range", "range"], activateDate: ["p-activate-date", "activateDate"], selectedValue: ["p-selected-value", "selectedValue"], minDate: ["p-min-date", "minDate"], maxDate: ["p-max-date", "maxDate"], hoverValue: ["p-hover-value", "hoverValue"], size: ["p-size", "size"], hideTodayButton: ["p-hide-today-button", "hideTodayButton"], hasPresets: ["p-presets", "hasPresets"], headerTemplate: ["p-header-template", "headerTemplate"], locale: ["p-locale", "locale"] }, outputs: { headerChange: "p-header-change", selectDate: "p-select-date", selectTodayEvent: "p-select-today", hoverDate: "p-hover-date", closeCalendar: "p-close-calendar" }, host: { listeners: { "keydown": "onHostKeydown($event)" } }, providers: [PoCalendarService], usesOnChanges: true, ngImport: i0, template: "<div class=\"po-calendar-wrapper\">\n  @if (isDayVisible) {\n    <ng-container>\n      @if (templateContext) {\n        <po-calendar-header\n          (p-previous)=\"onPreviousMonth()\"\n          (p-next)=\"onNextMonth()\"\n          [p-display-month]=\"displayMonth\"\n          [p-display-year]=\"displayYear\"\n          [p-template-context]=\"templateContext\"\n          [p-header-template]=\"headerTemplate || internalComboTemplate\"\n          [p-size]=\"size\"\n          [p-locale]=\"locale\"\n        >\n        </po-calendar-header>\n      }\n\n      <div class=\"po-calendar-content\">\n        <div class=\"po-calendar-labels\">\n          @for (weekDay of displayWeekDays; track trackByWeekDay($index, weekDay)) {\n            <div class=\"po-calendar-label\">\n              {{ weekDay }}\n            </div>\n          }\n        </div>\n\n        <div class=\"po-calendar-content-list-day\">\n          @for (day of displayDays; track trackByDay($index, day); let i = $index) {\n            <div\n              class=\"po-calendar-day\"\n              [ngClass]=\"getDayBackgroundColor(day)\"\n              (click)=\"onSelectDate(day)\"\n              (mouseenter)=\"onMouseEnter(day)\"\n              (mouseleave)=\"onMouseLeave()\"\n              (keydown)=\"onDayKeydown($event, day, i)\"\n              [tabindex]=\"getDayTabIndex(day, i)\"\n              attr-calendar\n              [attr.data-other-month]=\"day.getMonth() !== displayMonthNumber\"\n              [attr.data-day-index]=\"i\"\n            >\n              <span [ngClass]=\"getDayForegroundColor(day)\">\n                {{ day.getDate() }}\n              </span>\n            </div>\n          }\n        </div>\n      </div>\n    </ng-container>\n  }\n\n  @if (isMonthVisible) {\n    <ng-container>\n      <po-calendar-header\n        (p-previous)=\"updateYear(-1)\"\n        (p-next)=\"updateYear(1)\"\n        [p-template-context]=\"templateContext\"\n        [p-header-template]=\"headerTemplate || internalComboTemplate\"\n        [p-size]=\"size\"\n        [p-locale]=\"locale\"\n      >\n      </po-calendar-header>\n\n      <div class=\"po-calendar-content\">\n        <div class=\"po-calendar-labels\">\n          <div class=\"po-calendar-label\">\n            {{ monthLabel }}\n          </div>\n        </div>\n        <div class=\"po-calendar-content-list-month\">\n          @for (month of displayMonths; track trackByMonth($index, month); let i = $index) {\n            <div\n              class=\"po-calendar-month\"\n              [ngClass]=\"getBackgroundColor(i, displayMonthNumber)\"\n              (click)=\"onSelectMonth(displayYear, i)\"\n              attr-calendar\n            >\n              <span [ngClass]=\"getForegroundColor(i, displayMonthNumber)\">\n                {{ month }}\n              </span>\n            </div>\n          }\n        </div>\n      </div>\n    </ng-container>\n  }\n\n  @if (isYearVisible) {\n    <ng-container>\n      <po-calendar-header\n        (p-previous)=\"updateYear(-10)\"\n        (p-next)=\"updateYear(10)\"\n        [p-template-context]=\"templateContext\"\n        [p-header-template]=\"headerTemplate || internalComboTemplate\"\n        [p-size]=\"size\"\n        [p-locale]=\"locale\"\n      >\n      </po-calendar-header>\n\n      <div class=\"po-calendar-content\">\n        <div class=\"po-calendar-labels\">\n          <div class=\"po-calendar-label\">\n            {{ yearLabel }}\n          </div>\n        </div>\n\n        <div class=\"po-calendar-content-list-year\">\n          @for (year of displayDecade; track trackByYear($index, year)) {\n            <div\n              class=\"po-calendar-year\"\n              [ngClass]=\"getBackgroundColor(year, currentYear)\"\n              (click)=\"onSelectYear(year, displayMonthNumber)\"\n              attr-calendar\n            >\n              <span [ngClass]=\"getForegroundColor(year, currentYear)\">\n                {{ year }}\n              </span>\n            </div>\n          }\n        </div>\n      </div>\n    </ng-container>\n  }\n  @if (!responsive || (responsive && !hasPresets)) {\n    <po-calendar-footer\n      [p-label-clear]=\"displayToClean\"\n      [p-label-today]=\"displayToday\"\n      [p-hide-today-button]=\"hideTodayButton\"\n      [p-size]=\"size\"\n      [p-responsive]=\"responsive\"\n      [p-today-disabled]=\"isTodayUnavailable()\"\n      (p-clear)=\"onClear()\"\n      (p-select-today)=\"onSelectToday()\"\n      (p-close-calendar)=\"onFooterCloseCalendar()\"\n    ></po-calendar-footer>\n  }\n</div>\n\n<ng-template #internalComboTemplate let-combo>\n  <po-combo\n    #monthCombo\n    class=\"po-combo-first\"\n    [name]=\"'month-' + comboKey\"\n    [p-clean]=\"false\"\n    [p-remove-initial-filter]=\"true\"\n    [ngModel]=\"combo.monthIndex\"\n    [p-options]=\"combo.monthsOptions\"\n    (p-change)=\"combo.updateDate(combo.year, $event)\"\n    (p-blur)=\"combo.onComboBlur(monthCombo)\"\n    [p-size]=\"size\"\n  >\n  </po-combo>\n\n  <po-combo\n    #yearCombo\n    class=\"po-combo-last\"\n    [name]=\"'year-' + comboKey\"\n    [p-clean]=\"false\"\n    [p-remove-initial-filter]=\"true\"\n    [ngModel]=\"combo.year\"\n    [p-options]=\"combo.yearsOptions\"\n    (p-change)=\"combo.updateDate($event, combo.monthIndex)\"\n    (p-blur)=\"combo.onComboBlur(yearCombo)\"\n    [p-size]=\"size\"\n  >\n  </po-combo>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: PoComboComponent, selector: "po-combo" }, { kind: "component", type: PoCalendarFooterComponent, selector: "po-calendar-footer", inputs: ["p-size", "p-label-clear", "p-label-today", "p-responsive", "p-today-disabled", "p-hide-today-button"], outputs: ["p-clear", "p-select-today", "p-close-calendar"] }, { kind: "component", type: PoCalendarHeaderComponent, selector: "po-calendar-header", inputs: ["p-hide-previous", "p-hide-next", "p-display-month", "p-display-year", "p-display-month-label", "p-month-options", "p-header-template", "p-template-context", "p-size", "p-locale"], outputs: ["p-previous", "p-next", "p-select-month", "p-select-year"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: PoCalendarWrapperComponent, decorators: [{
             type: Component,
@@ -16238,6 +16236,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
             }], selectDate: [{
                 type: Output,
                 args: ['p-select-date']
+            }], selectTodayEvent: [{
+                type: Output,
+                args: ['p-select-today']
             }], hoverDate: [{
                 type: Output,
                 args: ['p-hover-date']
@@ -16402,6 +16403,7 @@ class PoCalendarComponent extends PoCalendarBaseComponent {
     selectedIndexYear = null;
     selectedMonth;
     selectedYear;
+    isTodayPresetSelection = false;
     _isRange = signal(false, ...(ngDevMode ? [{ debugName: "_isRange" }] : /* istanbul ignore next */ []));
     _rangePresetsValue = signal(false, ...(ngDevMode ? [{ debugName: "_rangePresetsValue" }] : /* istanbul ignore next */ []));
     _rangePresetOptionsValue = signal(undefined, ...(ngDevMode ? [{ debugName: "_rangePresetOptionsValue" }] : /* istanbul ignore next */ []));
@@ -16430,7 +16432,6 @@ class PoCalendarComponent extends PoCalendarBaseComponent {
         }
         const customPresets = hasCustomPresets ? rangePresetOptions : [];
         const combined = [...defaultPresets, ...customPresets];
-        // Regra: o preset "today" é obrigatório e deve estar presente mesmo com apenas presets customizados
         if (combined.length > 0 && !combined.some(p => p.label.toLowerCase() === 'today')) {
             const todayPreset = PO_CALENDAR_DEFAULT_RANGE_PRESETS.find(p => p.label === 'today');
             if (todayPreset) {
@@ -16649,9 +16650,9 @@ class PoCalendarComponent extends PoCalendarBaseComponent {
         this.value = newValue;
         const newModel = this.convertDateToISO(this.value);
         this.updateModel(newModel);
-        this.change.emit(newModel);
-        // Em modo date-time, se a data selecionada é "hoje", define a hora atual no timer
-        if (this.isDateTime && this.timerComponent && this.poCalendarService.isToday(selectedDate)) {
+        if (this.isDateTime && this.timerComponent && this.isTodayPresetSelection) {
+            this.close.emit();
+            this.change.emit(newModel);
             const now = new Date();
             const hours = ('0' + now.getHours()).slice(-2);
             const minutes = ('0' + now.getMinutes()).slice(-2);
@@ -16659,16 +16660,26 @@ class PoCalendarComponent extends PoCalendarBaseComponent {
             const currentTime = this.showSeconds ? `${hours}:${minutes}:${seconds}` : `${hours}:${minutes}`;
             this.timerComponent.writeValue(currentTime);
             this.changeTime.emit(currentTime);
+            this.isTodayPresetSelection = false;
+        }
+        else {
+            this.change.emit(newModel);
         }
     }
     onHoverDate(date) {
         this.hoverValue = date;
     }
+    onSelectTodayPreset() {
+        this.isTodayPresetSelection = true;
+    }
     onHeaderChange({ month, year }, partType) {
         this.updateActivateDateFromHeaderChange(month, year, partType);
         this.changeMonthYear.emit({ month, year });
     }
     onCloseCalendar() {
+        if (this.isDateTime) {
+            return;
+        }
         this.change.emit(this.value);
         this.close.emit();
     }
@@ -16730,7 +16741,6 @@ class PoCalendarComponent extends PoCalendarBaseComponent {
             }
             return 1; // Presente
         };
-        // Ordena em ASC: Futuro → Presente → Passado, proximidade crescente dentro de cada grupo
         const sorted = [...presets].sort((a, b) => {
             const rangeA = a.dateRange(today);
             const rangeB = b.dateRange(today);
@@ -16746,7 +16756,6 @@ class PoCalendarComponent extends PoCalendarBaseComponent {
             return distA - distB;
         });
         const resolvedOrder = order ?? this.rangePresetsOrder;
-        // DESC: inverte completamente a lista (Passado → Presente → Futuro, mais distante primeiro)
         return resolvedOrder === 'desc' ? sorted.reverse() : sorted;
     }
     normalizeDate(date) {
@@ -16895,11 +16904,11 @@ class PoCalendarComponent extends PoCalendarBaseComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: PoCalendarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: PoCalendarComponent, isStandalone: false, selector: "po-calendar", providers: providers$7, viewQueries: [{ propertyName: "timerComponent", first: true, predicate: ["timer"], descendants: true }, { propertyName: "yearOptions", predicate: ["yearOption"], descendants: true }, { propertyName: "monthOptions", predicate: ["monthOption"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "@if (isMonthYear) {\n  <div class=\"po-calendar po-calendar-month-year\">\n    <ng-container *ngTemplateOutlet=\"calendarMonth\"></ng-container>\n    <ng-container *ngTemplateOutlet=\"calendarYear\"></ng-container>\n  </div>\n} @else if (isYear) {\n  <div class=\"po-calendar po-calendar-year\">\n    <ng-container *ngTemplateOutlet=\"calendarYear\"></ng-container>\n  </div>\n} @else if (isRange) {\n  <div\n    class=\"po-calendar\"\n    [class.po-calendar-with-presets]=\"effectivePresets().length > 0\"\n    [class.po-calendar-mobile]=\"isResponsive || widthWithPresets\"\n    [class.po-calendar-responsive]=\"!isResponsive && widthWithPresets\"\n  >\n    @if (effectivePresets().length > 0 && !isResponsive && !widthWithPresets) {\n      <po-calendar-preset-list\n        [p-presets]=\"effectivePresets()\"\n        [p-locale]=\"locale\"\n        [p-selected-preset]=\"selectedPresetLabel\"\n        [p-size]=\"size\"\n        (p-select-preset)=\"onPresetSelected($event)\"\n        (p-close-calendar)=\"onCloseCalendar()\"\n      ></po-calendar-preset-list>\n    }\n    <ng-container *ngTemplateOutlet=\"calendarWrapper; context: { partType: 'start' }\"></ng-container>\n    @if (effectivePresets().length > 0 && (isResponsive || widthWithPresets)) {\n      <po-calendar-preset-list\n        [p-presets]=\"effectivePresets()\"\n        [p-locale]=\"locale\"\n        [p-selected-preset]=\"selectedPresetLabel\"\n        [p-size]=\"size\"\n        [p-responsive]=\"true\"\n        (p-select-preset)=\"onPresetSelected($event)\"\n        (p-close-calendar)=\"onCloseCalendar()\"\n      ></po-calendar-preset-list>\n\n      <po-calendar-footer\n        [p-size]=\"size\"\n        [p-responsive]=\"isResponsive\"\n        [p-hide-today-button]=\"true\"\n        [p-label-clear]=\"displayToClean\"\n        (p-clear)=\"onSelectDate($event)\"\n        (p-close-calendar)=\"onCloseCalendar()\"\n      ></po-calendar-footer>\n    }\n  </div>\n} @else {\n  <div\n    [class.po-calendar-date-time]=\"isDateTime\"\n    [class.po-calendar-three-columns]=\"showSeconds || format === '12'\"\n    [class.po-calendar-four-columns]=\"showSeconds && format === '12'\"\n  >\n    <div class=\"po-calendar\">\n      <ng-container *ngTemplateOutlet=\"calendarWrapper; context: { partType: 'single' }\"></ng-container>\n    </div>\n    @if (isDateTime) {\n      <ng-container *ngTemplateOutlet=\"calendarTimer\"></ng-container>\n    }\n  </div>\n}\n\n<ng-template #calendarWrapper let-partType=\"partType\">\n  <po-calendar-wrapper\n    [p-value]=\"getValue(partType)\"\n    [p-activate-date]=\"getActivateDate(partType)\"\n    [p-locale]=\"locale\"\n    [p-min-date]=\"minDate\"\n    [p-presets]=\"effectivePresets().length > 0\"\n    [p-max-date]=\"maxDate\"\n    [p-part-type]=\"partType\"\n    [p-range]=\"isRange\"\n    [p-responsive]=\"isResponsive || widthWithPresets\"\n    [p-selected-value]=\"value\"\n    [p-hover-value]=\"hoverValue\"\n    [p-hide-today-button]=\"effectivePresets().length > 0\"\n    (p-header-change)=\"onHeaderChange($event, partType)\"\n    (p-select-date)=\"onSelectDate($event, partType)\"\n    (p-hover-date)=\"onHoverDate($event)\"\n    (p-close-calendar)=\"onCloseCalendar()\"\n    [p-header-template]=\"headerTemplate\"\n    [p-size]=\"size\"\n  >\n  </po-calendar-wrapper>\n</ng-template>\n\n<ng-template #calendarMonth>\n  <ul class=\"po-calendar-months\">\n    @for (month of displayMonths; track month; let i = $index) {\n      <li class=\"po-calendar-month-item\">\n        <po-button\n          #monthOption\n          [class.po-button-selected]=\"i === selectedIndexMonth\"\n          role=\"option\"\n          p-kind=\"tertiary\"\n          p-label=\"{{ month }}\"\n          [attr.aria-selected]=\"i === selectedIndexMonth\"\n          [p-tabindex]=\"i === focusedIndex ? 0 : -1\"\n          [p-size]=\"size\"\n          [p-disabled]=\"isMonthDisabled(i)\"\n          (p-click)=\"selectMonth(i, $event, true)\"\n          (keydown)=\"onKeydownMonth($event, i)\"\n        ></po-button>\n      </li>\n    }\n  </ul>\n</ng-template>\n\n<ng-template #calendarYear>\n  <ul class=\"po-calendar-years\">\n    @for (year of displayYears; track year; let i = $index) {\n      <li class=\"po-calendar-year-item\">\n        <po-button\n          #yearOption\n          [class.po-button-selected]=\"i === selectedIndexYear\"\n          role=\"option\"\n          p-kind=\"tertiary\"\n          p-label=\"{{ year }}\"\n          [attr.aria-selected]=\"i === selectedIndexYear\"\n          [p-tabindex]=\"i === focusedIndex ? 0 : -1\"\n          [p-size]=\"size\"\n          [p-disabled]=\"isYearDisabled(year)\"\n          (p-click)=\"selectYear(i, $event, true, year)\"\n          (keydown)=\"onKeydownYear($event, i)\"\n        >\n        </po-button>\n      </li>\n    }\n  </ul>\n</ng-template>\n\n<ng-template #calendarTimer>\n  <div class=\"po-calendar-vertical-divider\"></div>\n  <po-timer\n    #timer\n    [p-format]=\"format\"\n    [p-locale]=\"locale\"\n    [p-min-time]=\"minTime\"\n    [p-max-time]=\"maxTime\"\n    [p-minute-interval]=\"minuteInterval\"\n    [p-second-interval]=\"secondInterval\"\n    [p-show-seconds]=\"showSeconds\"\n    [p-size]=\"size\"\n    (p-change)=\"onTimeChange($event)\"\n    (p-boundary-tab)=\"onTimerBoundaryTab($event)\"\n  ></po-timer>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: PoButtonComponent, selector: "po-button" }, { kind: "component", type: PoTimerComponent, selector: "po-timer", outputs: ["p-boundary-tab"] }, { kind: "component", type: PoCalendarFooterComponent, selector: "po-calendar-footer", inputs: ["p-size", "p-label-clear", "p-label-today", "p-responsive", "p-today-disabled", "p-hide-today-button"], outputs: ["p-clear", "p-select-today", "p-close-calendar"] }, { kind: "component", type: PoCalendarWrapperComponent, selector: "po-calendar-wrapper", inputs: ["p-value", "p-mode", "p-responsive", "p-part-type", "p-range", "p-activate-date", "p-selected-value", "p-min-date", "p-max-date", "p-hover-value", "p-size", "p-hide-today-button", "p-presets", "p-header-template", "p-locale"], outputs: ["p-header-change", "p-select-date", "p-hover-date", "p-close-calendar"] }, { kind: "component", type: PoCalendarPresetListComponent, selector: "po-calendar-preset-list", inputs: ["p-size", "p-presets", "p-selected-preset", "p-responsive", "p-locale"], outputs: ["p-close-calendar", "p-select-preset"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: PoCalendarComponent, isStandalone: false, selector: "po-calendar", providers: providers$7, viewQueries: [{ propertyName: "timerComponent", first: true, predicate: ["timer"], descendants: true }, { propertyName: "yearOptions", predicate: ["yearOption"], descendants: true }, { propertyName: "monthOptions", predicate: ["monthOption"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "@if (isMonthYear) {\n  <div class=\"po-calendar po-calendar-month-year\">\n    <ng-container *ngTemplateOutlet=\"calendarMonth\"></ng-container>\n    <ng-container *ngTemplateOutlet=\"calendarYear\"></ng-container>\n  </div>\n} @else if (isYear) {\n  <div class=\"po-calendar po-calendar-year\">\n    <ng-container *ngTemplateOutlet=\"calendarYear\"></ng-container>\n  </div>\n} @else if (isRange) {\n  <div\n    class=\"po-calendar\"\n    [class.po-calendar-with-presets]=\"effectivePresets().length > 0\"\n    [class.po-calendar-mobile]=\"isResponsive || widthWithPresets\"\n    [class.po-calendar-responsive]=\"!isResponsive && widthWithPresets\"\n  >\n    @if (effectivePresets().length > 0 && !isResponsive && !widthWithPresets) {\n      <po-calendar-preset-list\n        [p-presets]=\"effectivePresets()\"\n        [p-locale]=\"locale\"\n        [p-selected-preset]=\"selectedPresetLabel\"\n        [p-size]=\"size\"\n        (p-select-preset)=\"onPresetSelected($event)\"\n        (p-close-calendar)=\"onCloseCalendar()\"\n      ></po-calendar-preset-list>\n    }\n    <ng-container *ngTemplateOutlet=\"calendarWrapper; context: { partType: 'start' }\"></ng-container>\n    @if (effectivePresets().length > 0 && (isResponsive || widthWithPresets)) {\n      <po-calendar-preset-list\n        [p-presets]=\"effectivePresets()\"\n        [p-locale]=\"locale\"\n        [p-selected-preset]=\"selectedPresetLabel\"\n        [p-size]=\"size\"\n        [p-responsive]=\"true\"\n        (p-select-preset)=\"onPresetSelected($event)\"\n        (p-close-calendar)=\"onCloseCalendar()\"\n      ></po-calendar-preset-list>\n\n      <po-calendar-footer\n        [p-size]=\"size\"\n        [p-responsive]=\"isResponsive\"\n        [p-hide-today-button]=\"true\"\n        [p-label-clear]=\"displayToClean\"\n        (p-clear)=\"onSelectDate($event)\"\n        (p-close-calendar)=\"onCloseCalendar()\"\n      ></po-calendar-footer>\n    }\n  </div>\n} @else {\n  <div\n    [class.po-calendar-date-time]=\"isDateTime\"\n    [class.po-calendar-three-columns]=\"showSeconds || format === '12'\"\n    [class.po-calendar-four-columns]=\"showSeconds && format === '12'\"\n  >\n    <div class=\"po-calendar\">\n      <ng-container *ngTemplateOutlet=\"calendarWrapper; context: { partType: 'single' }\"></ng-container>\n    </div>\n    @if (isDateTime) {\n      <ng-container *ngTemplateOutlet=\"calendarTimer\"></ng-container>\n    }\n  </div>\n}\n\n<ng-template #calendarWrapper let-partType=\"partType\">\n  <po-calendar-wrapper\n    [p-value]=\"getValue(partType)\"\n    [p-activate-date]=\"getActivateDate(partType)\"\n    [p-locale]=\"locale\"\n    [p-min-date]=\"minDate\"\n    [p-presets]=\"effectivePresets().length > 0\"\n    [p-max-date]=\"maxDate\"\n    [p-part-type]=\"partType\"\n    [p-range]=\"isRange\"\n    [p-responsive]=\"isResponsive || widthWithPresets\"\n    [p-selected-value]=\"value\"\n    [p-hover-value]=\"hoverValue\"\n    [p-hide-today-button]=\"effectivePresets().length > 0\"\n    (p-header-change)=\"onHeaderChange($event, partType)\"\n    (p-select-date)=\"onSelectDate($event, partType)\"\n    (p-select-today)=\"onSelectTodayPreset()\"\n    (p-hover-date)=\"onHoverDate($event)\"\n    (p-close-calendar)=\"onCloseCalendar()\"\n    [p-header-template]=\"headerTemplate\"\n    [p-size]=\"size\"\n  >\n  </po-calendar-wrapper>\n</ng-template>\n\n<ng-template #calendarMonth>\n  <ul class=\"po-calendar-months\">\n    @for (month of displayMonths; track month; let i = $index) {\n      <li class=\"po-calendar-month-item\">\n        <po-button\n          #monthOption\n          [class.po-button-selected]=\"i === selectedIndexMonth\"\n          role=\"option\"\n          p-kind=\"tertiary\"\n          p-label=\"{{ month }}\"\n          [attr.aria-selected]=\"i === selectedIndexMonth\"\n          [p-tabindex]=\"i === focusedIndex ? 0 : -1\"\n          [p-size]=\"size\"\n          [p-disabled]=\"isMonthDisabled(i)\"\n          (p-click)=\"selectMonth(i, $event, true)\"\n          (keydown)=\"onKeydownMonth($event, i)\"\n        ></po-button>\n      </li>\n    }\n  </ul>\n</ng-template>\n\n<ng-template #calendarYear>\n  <ul class=\"po-calendar-years\">\n    @for (year of displayYears; track year; let i = $index) {\n      <li class=\"po-calendar-year-item\">\n        <po-button\n          #yearOption\n          [class.po-button-selected]=\"i === selectedIndexYear\"\n          role=\"option\"\n          p-kind=\"tertiary\"\n          p-label=\"{{ year }}\"\n          [attr.aria-selected]=\"i === selectedIndexYear\"\n          [p-tabindex]=\"i === focusedIndex ? 0 : -1\"\n          [p-size]=\"size\"\n          [p-disabled]=\"isYearDisabled(year)\"\n          (p-click)=\"selectYear(i, $event, true, year)\"\n          (keydown)=\"onKeydownYear($event, i)\"\n        >\n        </po-button>\n      </li>\n    }\n  </ul>\n</ng-template>\n\n<ng-template #calendarTimer>\n  <div class=\"po-calendar-vertical-divider\"></div>\n  <po-timer\n    #timer\n    [p-format]=\"format\"\n    [p-locale]=\"locale\"\n    [p-min-time]=\"minTime\"\n    [p-max-time]=\"maxTime\"\n    [p-minute-interval]=\"minuteInterval\"\n    [p-second-interval]=\"secondInterval\"\n    [p-show-seconds]=\"showSeconds\"\n    [p-size]=\"size\"\n    (p-change)=\"onTimeChange($event)\"\n    (p-boundary-tab)=\"onTimerBoundaryTab($event)\"\n  ></po-timer>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: PoButtonComponent, selector: "po-button" }, { kind: "component", type: PoTimerComponent, selector: "po-timer", outputs: ["p-boundary-tab"] }, { kind: "component", type: PoCalendarFooterComponent, selector: "po-calendar-footer", inputs: ["p-size", "p-label-clear", "p-label-today", "p-responsive", "p-today-disabled", "p-hide-today-button"], outputs: ["p-clear", "p-select-today", "p-close-calendar"] }, { kind: "component", type: PoCalendarWrapperComponent, selector: "po-calendar-wrapper", inputs: ["p-value", "p-mode", "p-responsive", "p-part-type", "p-range", "p-activate-date", "p-selected-value", "p-min-date", "p-max-date", "p-hover-value", "p-size", "p-hide-today-button", "p-presets", "p-header-template", "p-locale"], outputs: ["p-header-change", "p-select-date", "p-select-today", "p-hover-date", "p-close-calendar"] }, { kind: "component", type: PoCalendarPresetListComponent, selector: "po-calendar-preset-list", inputs: ["p-size", "p-presets", "p-selected-preset", "p-responsive", "p-locale"], outputs: ["p-close-calendar", "p-select-preset"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: PoCalendarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'po-calendar', changeDetection: ChangeDetectionStrategy.OnPush, providers: providers$7, standalone: false, template: "@if (isMonthYear) {\n  <div class=\"po-calendar po-calendar-month-year\">\n    <ng-container *ngTemplateOutlet=\"calendarMonth\"></ng-container>\n    <ng-container *ngTemplateOutlet=\"calendarYear\"></ng-container>\n  </div>\n} @else if (isYear) {\n  <div class=\"po-calendar po-calendar-year\">\n    <ng-container *ngTemplateOutlet=\"calendarYear\"></ng-container>\n  </div>\n} @else if (isRange) {\n  <div\n    class=\"po-calendar\"\n    [class.po-calendar-with-presets]=\"effectivePresets().length > 0\"\n    [class.po-calendar-mobile]=\"isResponsive || widthWithPresets\"\n    [class.po-calendar-responsive]=\"!isResponsive && widthWithPresets\"\n  >\n    @if (effectivePresets().length > 0 && !isResponsive && !widthWithPresets) {\n      <po-calendar-preset-list\n        [p-presets]=\"effectivePresets()\"\n        [p-locale]=\"locale\"\n        [p-selected-preset]=\"selectedPresetLabel\"\n        [p-size]=\"size\"\n        (p-select-preset)=\"onPresetSelected($event)\"\n        (p-close-calendar)=\"onCloseCalendar()\"\n      ></po-calendar-preset-list>\n    }\n    <ng-container *ngTemplateOutlet=\"calendarWrapper; context: { partType: 'start' }\"></ng-container>\n    @if (effectivePresets().length > 0 && (isResponsive || widthWithPresets)) {\n      <po-calendar-preset-list\n        [p-presets]=\"effectivePresets()\"\n        [p-locale]=\"locale\"\n        [p-selected-preset]=\"selectedPresetLabel\"\n        [p-size]=\"size\"\n        [p-responsive]=\"true\"\n        (p-select-preset)=\"onPresetSelected($event)\"\n        (p-close-calendar)=\"onCloseCalendar()\"\n      ></po-calendar-preset-list>\n\n      <po-calendar-footer\n        [p-size]=\"size\"\n        [p-responsive]=\"isResponsive\"\n        [p-hide-today-button]=\"true\"\n        [p-label-clear]=\"displayToClean\"\n        (p-clear)=\"onSelectDate($event)\"\n        (p-close-calendar)=\"onCloseCalendar()\"\n      ></po-calendar-footer>\n    }\n  </div>\n} @else {\n  <div\n    [class.po-calendar-date-time]=\"isDateTime\"\n    [class.po-calendar-three-columns]=\"showSeconds || format === '12'\"\n    [class.po-calendar-four-columns]=\"showSeconds && format === '12'\"\n  >\n    <div class=\"po-calendar\">\n      <ng-container *ngTemplateOutlet=\"calendarWrapper; context: { partType: 'single' }\"></ng-container>\n    </div>\n    @if (isDateTime) {\n      <ng-container *ngTemplateOutlet=\"calendarTimer\"></ng-container>\n    }\n  </div>\n}\n\n<ng-template #calendarWrapper let-partType=\"partType\">\n  <po-calendar-wrapper\n    [p-value]=\"getValue(partType)\"\n    [p-activate-date]=\"getActivateDate(partType)\"\n    [p-locale]=\"locale\"\n    [p-min-date]=\"minDate\"\n    [p-presets]=\"effectivePresets().length > 0\"\n    [p-max-date]=\"maxDate\"\n    [p-part-type]=\"partType\"\n    [p-range]=\"isRange\"\n    [p-responsive]=\"isResponsive || widthWithPresets\"\n    [p-selected-value]=\"value\"\n    [p-hover-value]=\"hoverValue\"\n    [p-hide-today-button]=\"effectivePresets().length > 0\"\n    (p-header-change)=\"onHeaderChange($event, partType)\"\n    (p-select-date)=\"onSelectDate($event, partType)\"\n    (p-hover-date)=\"onHoverDate($event)\"\n    (p-close-calendar)=\"onCloseCalendar()\"\n    [p-header-template]=\"headerTemplate\"\n    [p-size]=\"size\"\n  >\n  </po-calendar-wrapper>\n</ng-template>\n\n<ng-template #calendarMonth>\n  <ul class=\"po-calendar-months\">\n    @for (month of displayMonths; track month; let i = $index) {\n      <li class=\"po-calendar-month-item\">\n        <po-button\n          #monthOption\n          [class.po-button-selected]=\"i === selectedIndexMonth\"\n          role=\"option\"\n          p-kind=\"tertiary\"\n          p-label=\"{{ month }}\"\n          [attr.aria-selected]=\"i === selectedIndexMonth\"\n          [p-tabindex]=\"i === focusedIndex ? 0 : -1\"\n          [p-size]=\"size\"\n          [p-disabled]=\"isMonthDisabled(i)\"\n          (p-click)=\"selectMonth(i, $event, true)\"\n          (keydown)=\"onKeydownMonth($event, i)\"\n        ></po-button>\n      </li>\n    }\n  </ul>\n</ng-template>\n\n<ng-template #calendarYear>\n  <ul class=\"po-calendar-years\">\n    @for (year of displayYears; track year; let i = $index) {\n      <li class=\"po-calendar-year-item\">\n        <po-button\n          #yearOption\n          [class.po-button-selected]=\"i === selectedIndexYear\"\n          role=\"option\"\n          p-kind=\"tertiary\"\n          p-label=\"{{ year }}\"\n          [attr.aria-selected]=\"i === selectedIndexYear\"\n          [p-tabindex]=\"i === focusedIndex ? 0 : -1\"\n          [p-size]=\"size\"\n          [p-disabled]=\"isYearDisabled(year)\"\n          (p-click)=\"selectYear(i, $event, true, year)\"\n          (keydown)=\"onKeydownYear($event, i)\"\n        >\n        </po-button>\n      </li>\n    }\n  </ul>\n</ng-template>\n\n<ng-template #calendarTimer>\n  <div class=\"po-calendar-vertical-divider\"></div>\n  <po-timer\n    #timer\n    [p-format]=\"format\"\n    [p-locale]=\"locale\"\n    [p-min-time]=\"minTime\"\n    [p-max-time]=\"maxTime\"\n    [p-minute-interval]=\"minuteInterval\"\n    [p-second-interval]=\"secondInterval\"\n    [p-show-seconds]=\"showSeconds\"\n    [p-size]=\"size\"\n    (p-change)=\"onTimeChange($event)\"\n    (p-boundary-tab)=\"onTimerBoundaryTab($event)\"\n  ></po-timer>\n</ng-template>\n" }]
+            args: [{ selector: 'po-calendar', changeDetection: ChangeDetectionStrategy.OnPush, providers: providers$7, standalone: false, template: "@if (isMonthYear) {\n  <div class=\"po-calendar po-calendar-month-year\">\n    <ng-container *ngTemplateOutlet=\"calendarMonth\"></ng-container>\n    <ng-container *ngTemplateOutlet=\"calendarYear\"></ng-container>\n  </div>\n} @else if (isYear) {\n  <div class=\"po-calendar po-calendar-year\">\n    <ng-container *ngTemplateOutlet=\"calendarYear\"></ng-container>\n  </div>\n} @else if (isRange) {\n  <div\n    class=\"po-calendar\"\n    [class.po-calendar-with-presets]=\"effectivePresets().length > 0\"\n    [class.po-calendar-mobile]=\"isResponsive || widthWithPresets\"\n    [class.po-calendar-responsive]=\"!isResponsive && widthWithPresets\"\n  >\n    @if (effectivePresets().length > 0 && !isResponsive && !widthWithPresets) {\n      <po-calendar-preset-list\n        [p-presets]=\"effectivePresets()\"\n        [p-locale]=\"locale\"\n        [p-selected-preset]=\"selectedPresetLabel\"\n        [p-size]=\"size\"\n        (p-select-preset)=\"onPresetSelected($event)\"\n        (p-close-calendar)=\"onCloseCalendar()\"\n      ></po-calendar-preset-list>\n    }\n    <ng-container *ngTemplateOutlet=\"calendarWrapper; context: { partType: 'start' }\"></ng-container>\n    @if (effectivePresets().length > 0 && (isResponsive || widthWithPresets)) {\n      <po-calendar-preset-list\n        [p-presets]=\"effectivePresets()\"\n        [p-locale]=\"locale\"\n        [p-selected-preset]=\"selectedPresetLabel\"\n        [p-size]=\"size\"\n        [p-responsive]=\"true\"\n        (p-select-preset)=\"onPresetSelected($event)\"\n        (p-close-calendar)=\"onCloseCalendar()\"\n      ></po-calendar-preset-list>\n\n      <po-calendar-footer\n        [p-size]=\"size\"\n        [p-responsive]=\"isResponsive\"\n        [p-hide-today-button]=\"true\"\n        [p-label-clear]=\"displayToClean\"\n        (p-clear)=\"onSelectDate($event)\"\n        (p-close-calendar)=\"onCloseCalendar()\"\n      ></po-calendar-footer>\n    }\n  </div>\n} @else {\n  <div\n    [class.po-calendar-date-time]=\"isDateTime\"\n    [class.po-calendar-three-columns]=\"showSeconds || format === '12'\"\n    [class.po-calendar-four-columns]=\"showSeconds && format === '12'\"\n  >\n    <div class=\"po-calendar\">\n      <ng-container *ngTemplateOutlet=\"calendarWrapper; context: { partType: 'single' }\"></ng-container>\n    </div>\n    @if (isDateTime) {\n      <ng-container *ngTemplateOutlet=\"calendarTimer\"></ng-container>\n    }\n  </div>\n}\n\n<ng-template #calendarWrapper let-partType=\"partType\">\n  <po-calendar-wrapper\n    [p-value]=\"getValue(partType)\"\n    [p-activate-date]=\"getActivateDate(partType)\"\n    [p-locale]=\"locale\"\n    [p-min-date]=\"minDate\"\n    [p-presets]=\"effectivePresets().length > 0\"\n    [p-max-date]=\"maxDate\"\n    [p-part-type]=\"partType\"\n    [p-range]=\"isRange\"\n    [p-responsive]=\"isResponsive || widthWithPresets\"\n    [p-selected-value]=\"value\"\n    [p-hover-value]=\"hoverValue\"\n    [p-hide-today-button]=\"effectivePresets().length > 0\"\n    (p-header-change)=\"onHeaderChange($event, partType)\"\n    (p-select-date)=\"onSelectDate($event, partType)\"\n    (p-select-today)=\"onSelectTodayPreset()\"\n    (p-hover-date)=\"onHoverDate($event)\"\n    (p-close-calendar)=\"onCloseCalendar()\"\n    [p-header-template]=\"headerTemplate\"\n    [p-size]=\"size\"\n  >\n  </po-calendar-wrapper>\n</ng-template>\n\n<ng-template #calendarMonth>\n  <ul class=\"po-calendar-months\">\n    @for (month of displayMonths; track month; let i = $index) {\n      <li class=\"po-calendar-month-item\">\n        <po-button\n          #monthOption\n          [class.po-button-selected]=\"i === selectedIndexMonth\"\n          role=\"option\"\n          p-kind=\"tertiary\"\n          p-label=\"{{ month }}\"\n          [attr.aria-selected]=\"i === selectedIndexMonth\"\n          [p-tabindex]=\"i === focusedIndex ? 0 : -1\"\n          [p-size]=\"size\"\n          [p-disabled]=\"isMonthDisabled(i)\"\n          (p-click)=\"selectMonth(i, $event, true)\"\n          (keydown)=\"onKeydownMonth($event, i)\"\n        ></po-button>\n      </li>\n    }\n  </ul>\n</ng-template>\n\n<ng-template #calendarYear>\n  <ul class=\"po-calendar-years\">\n    @for (year of displayYears; track year; let i = $index) {\n      <li class=\"po-calendar-year-item\">\n        <po-button\n          #yearOption\n          [class.po-button-selected]=\"i === selectedIndexYear\"\n          role=\"option\"\n          p-kind=\"tertiary\"\n          p-label=\"{{ year }}\"\n          [attr.aria-selected]=\"i === selectedIndexYear\"\n          [p-tabindex]=\"i === focusedIndex ? 0 : -1\"\n          [p-size]=\"size\"\n          [p-disabled]=\"isYearDisabled(year)\"\n          (p-click)=\"selectYear(i, $event, true, year)\"\n          (keydown)=\"onKeydownYear($event, i)\"\n        >\n        </po-button>\n      </li>\n    }\n  </ul>\n</ng-template>\n\n<ng-template #calendarTimer>\n  <div class=\"po-calendar-vertical-divider\"></div>\n  <po-timer\n    #timer\n    [p-format]=\"format\"\n    [p-locale]=\"locale\"\n    [p-min-time]=\"minTime\"\n    [p-max-time]=\"maxTime\"\n    [p-minute-interval]=\"minuteInterval\"\n    [p-second-interval]=\"secondInterval\"\n    [p-show-seconds]=\"showSeconds\"\n    [p-size]=\"size\"\n    (p-change)=\"onTimeChange($event)\"\n    (p-boundary-tab)=\"onTimerBoundaryTab($event)\"\n  ></po-timer>\n</ng-template>\n" }]
         }], ctorParameters: () => [], propDecorators: { timerComponent: [{
                 type: ViewChild,
                 args: ['timer']
@@ -29695,12 +29704,9 @@ class PoDatetimepickerBaseComponent {
     _size = undefined;
     _date;
     _timeValue = '';
-    previousValue;
     _resolvedMinDate;
     _resolvedMaxDate;
     hasValidatorRequired;
-    hour = 'T00:00:00-00:00';
-    isExtendedISO = false;
     objMask;
     onChangeModel = null;
     onTouchedModel = null;
@@ -30088,7 +30094,6 @@ class PoDatetimepickerBaseComponent {
             else {
                 this._locale = this.shortLanguage;
             }
-            // Recalcula o formato de data baseado no locale (se não foi definido explicitamente)
             this._format = this.resolveFormat();
             this.objMask = this.buildMask(replaceFormatSeparator(this.format, this.languageService.getDateSeparator(this.localeInput())));
             this.refreshValue(this._date);
@@ -30172,7 +30177,6 @@ class PoDatetimepickerBaseComponent {
             this.processStringValue(value);
         }
         this.refreshValue(this._date);
-        // Normaliza o model para ISO 8601 se o valor recebido era Date ou string válida
         if (this._date && this._timeValue) {
             this.callOnChange(this.getModelValue());
         }
@@ -30203,11 +30207,9 @@ class PoDatetimepickerBaseComponent {
         if (this.requiredFailed(c.value)) {
             return { required: { valid: false } };
         }
-        // Validação de range de data (p-min-date / p-max-date)
         if (this._date && !this.isDateInRange()) {
             return { date: { valid: false } };
         }
-        // Validação de range de hora (p-min-time / p-max-time)
         if (this._timeValue && !this.isTimeInRange(this._timeValue)) {
             return { time: { valid: false } };
         }
@@ -30226,15 +30228,9 @@ class PoDatetimepickerBaseComponent {
     set timeValue(value) {
         this._timeValue = value;
     }
-    // Retorna o formato de data efetivo, considerando:
-    // 1. Valor explícito de `p-date-format`
-    // 2. Formato padrão do locale
     get format() {
         return this._format || this.resolveFormat();
     }
-    // Retorna o formato de hora efetivo, considerando:
-    // 1. Valor explícito de `p-format` (timerFormat)
-    // 2. Formato padrão do locale (12h para en, 24h para pt/es/ru)
     get resolvedTimerFormat() {
         const explicit = this.timerFormat();
         if (explicit) {
@@ -30243,7 +30239,6 @@ class PoDatetimepickerBaseComponent {
         const localeTimeFormat = PoDatetimepickerTimeFormatByLocale[this.locale] || '24';
         return localeTimeFormat === '12' ? PoTimerFormat.Format12 : PoTimerFormat.Format24;
     }
-    // Indica se o formato de hora é 12h (AM/PM).
     get is12HourFormat() {
         return this.resolvedTimerFormat === PoTimerFormat.Format12;
     }
@@ -30280,27 +30275,6 @@ class PoDatetimepickerBaseComponent {
     mapSizeToIcon(size) {
         return mapInputSizeToLoadingIcon(size);
     }
-    // Retorna o valor do model no formato ISO 8601 combinando data e hora com timezone local.
-    //
-    // Formato de saída: `yyyy-mm-ddTHH:mm:ss+/-HH:mm` ou `yyyy-mm-ddTHH:mm+/-HH:mm`.
-    //
-    // O componente opera internamente em **local timezone**:
-    // - O valor exibido ao usuário é sempre em horário local.
-    // - O valor emitido no model inclui o offset do timezone local para que consumidores
-    //   possam converter para UTC ou outro timezone conforme necessário.
-    // - Ao receber um valor via `writeValue`, strings ISO com timezone são convertidas
-    //   para horário local antes de serem armazenadas.
-    // - Objetos `Date` do JavaScript já representam instantes em UTC internamente,
-    //   mas são exibidos em horário local — o componente segue esse comportamento.
-    //
-    // Exemplos de saída (timezone -03:00 / Brasília):
-    // - `2026-05-09T14:30:00-03:00`
-    // - `2026-05-09T14:30-03:00`
-    //
-    // Considerações sobre horário de verão:
-    // - O offset é calculado no momento da emissão do valor, usando `Date.getTimezoneOffset()`
-    //   da data selecionada. Isso garante que o offset correto seja aplicado mesmo quando
-    //   a data selecionada está em período de horário de verão diferente do momento atual.
     getModelValue() {
         if (!this._date) {
             return '';
@@ -30310,12 +30284,6 @@ class PoDatetimepickerBaseComponent {
         const timezone = this.getTimezoneOffset(this._date);
         return `${dateISO}T${time}${timezone}`;
     }
-    // Retorna o offset do timezone local no formato `+/-HH:mm`.
-    //
-    // Usa a data informada para calcular o offset, garantindo que o horário de verão
-    // seja considerado corretamente (o offset pode variar conforme a data).
-    //
-    // @param date Data de referência para cálculo do offset.
     getTimezoneOffset(date) {
         const referenceDate = date || new Date();
         const offset = referenceDate.getTimezoneOffset();
@@ -30325,32 +30293,22 @@ class PoDatetimepickerBaseComponent {
         const minutes = ('00' + (offsetAbsolute % 60)).slice(-2);
         return `${sign}${hours}:${minutes}`;
     }
-    // Executa a função onChange propagando o valor para o formulário.
     callOnChange(value, retry = true) {
         if (this.onChangeModel) {
             this.onChangeModel(value);
-            this.previousValue = value;
         }
         else if (retry) {
             setTimeout(() => this.callOnChange(value, false));
         }
     }
-    // Atualiza o model com o valor combinado de data e hora.
     controlModel() {
         const modelValue = this.getModelValue();
         this.callOnChange(modelValue || '');
     }
-    // Formata o horário para exibição, incluindo AM/PM quando em formato 12h.
-    //
-    // @param time Horário no formato HH:mm ou HH:mm:ss (24h interno)
-    // @returns Horário formatado para exibição (ex: "02:30" ou "14:30")
-    // Nota: Para formato 12h, retorna apenas a parte numérica (sem AM/PM).
-    // O período é exibido no input separado gerenciado pelo componente.
     formatTimeForDisplay(time) {
         if (!time) {
             return this.is12HourFormat ? '12:00' : '00:00';
         }
-        // Trunca segundos se showSeconds está desabilitado
         const parts = time.split(':');
         if (!this.showSeconds() && parts.length > 2) {
             time = `${parts[0]}:${parts[1]}`;
@@ -30358,7 +30316,6 @@ class PoDatetimepickerBaseComponent {
         if (!this.is12HourFormat) {
             return time;
         }
-        // Converte de 24h para 12h (sem AM/PM — o período é gerenciado separadamente)
         let hours = Number.parseInt(parts[0], 10);
         const minutes = parts[1];
         const seconds = this.showSeconds() && parts.length > 2 ? parts[2] : null;
@@ -30372,13 +30329,8 @@ class PoDatetimepickerBaseComponent {
         return seconds ? `${hoursStr}:${minutes}:${seconds}` : `${hoursStr}:${minutes}`;
     }
     // --- Protected / Private ---
-    // Constrói a máscara para o input de datetime.
-    // Formato resultante: "99/99/9999 99:99" (24h e 12h)
-    // Com segundos: "99/99/9999 99:99:99"
-    // Nota: O sufixo AM/PM em formato 12h é gerenciado separadamente (não faz parte da máscara).
     buildMask(format = this.format) {
         let mask = format.toUpperCase();
-        // Parte da data
         mask = mask.replace(/DD/g, '99');
         mask = mask.replace(/MM/g, '99');
         mask = mask.replace(/YYYY/g, '9999');
@@ -30389,7 +30341,6 @@ class PoDatetimepickerBaseComponent {
         else {
             mask += ' 99:99';
         }
-        // AM/PM NÃO é incluído na máscara — é gerenciado como sufixo fixo no componente.
         return new PoMask(mask, true);
     }
     validateModel(value) {
@@ -30397,24 +30348,18 @@ class PoDatetimepickerBaseComponent {
             this.validatorChange();
         }
     }
-    // Retorna a data mínima resolvida (cacheada).
     get resolvedMinDate() {
         return this._resolvedMinDate;
     }
-    // Retorna a data máxima resolvida (cacheada).
     get resolvedMaxDate() {
         return this._resolvedMaxDate;
     }
-    // Verifica se a data selecionada está dentro do intervalo [minDate, maxDate].
-    // Segue o mesmo padrão do po-datepicker: `PoUtils.validateDateRange`.
     isDateInRange() {
         if (!this._date) {
             return true;
         }
         return PoUtils.validateDateRange(this._date, this.resolvedMinDate, this.resolvedMaxDate);
     }
-    // Verifica se o horário selecionado está dentro do intervalo [minTime, maxTime].
-    // Segue o mesmo padrão do po-timepicker: converte para segundos e compara.
     isTimeInRange(time) {
         if (!time) {
             return true;
@@ -30436,7 +30381,6 @@ class PoDatetimepickerBaseComponent {
         }
         return true;
     }
-    // Converte uma string de horário (HH:mm ou HH:mm:ss) para total de segundos.
     timeToSeconds(time) {
         const parts = time.split(':');
         const hours = Number.parseInt(parts[0], 10) || 0;
@@ -30444,7 +30388,6 @@ class PoDatetimepickerBaseComponent {
         const seconds = parts.length >= 3 ? Number.parseInt(parts[2], 10) || 0 : 0;
         return hours * 3600 + minutes * 60 + seconds;
     }
-    // Resolve o formato de data efetivo baseado no input explícito ou no locale.
     resolveFormat() {
         const explicit = this.dateFormat?.();
         if (explicit) {
@@ -30455,37 +30398,23 @@ class PoDatetimepickerBaseComponent {
         }
         return PoDatetimepickerFormatByLocale[this.locale] || poDatepickerFormatDefault;
     }
-    // Processa um valor string recebido via writeValue.
-    // Formatos aceitos:
-    // - `yyyy-mm-ddTHH:mm:ss+/-HH:mm` (ISO 8601 com timezone)
-    // - `yyyy-mm-ddTHH:mm:ssZ` (UTC)
-    // - `yyyy-mm-ddTHH:mm:ss` (sem timezone, interpretado como local)
-    // - `yyyy-mm-ddTHH:mm` (sem segundos)
-    // - `yyyy-mm-dd` (apenas data, hora assume 00:00)
-    //
-    // Quando o valor contém timezone, é convertido para horário local antes de ser armazenado.
-    // Isso garante que o valor exibido ao usuário sempre represente o horário local.
     processStringValue(value) {
         if (value.includes('T')) {
             const tIndex = value.indexOf('T');
             const datePart = value.substring(0, tIndex);
             const timeAndTz = value.substring(tIndex + 1);
-            // Tenta fazer parse completo via Date para respeitar timezone
             const fullDate = new Date(value);
             if (!isNaN(fullDate.getTime())) {
-                // Parse bem-sucedido — Date converte automaticamente para local timezone
                 this._date = new Date(fullDate.getFullYear(), fullDate.getMonth(), fullDate.getDate());
                 this._timeValue = this.extractTimeFromDate(fullDate);
             }
             else {
-                // Fallback: parse manual sem timezone
                 const parsedDate = convertIsoToDate(datePart, false, false);
                 this._date = parsedDate;
                 this._timeValue = this.normalizeTimePart(timeAndTz);
             }
         }
         else {
-            // Apenas data (yyyy-mm-dd)
             const parsedDate = convertIsoToDate(value, false, false);
             this._date = parsedDate;
             this._timeValue = '00:00';
@@ -30499,7 +30428,7 @@ class PoDatetimepickerBaseComponent {
         const hours = ('0' + date.getHours()).slice(-2);
         const minutes = ('0' + date.getMinutes()).slice(-2);
         const seconds = ('0' + date.getSeconds()).slice(-2);
-        if (this.showSeconds() && seconds !== '00') {
+        if (this.showSeconds()) {
             return `${hours}:${minutes}:${seconds}`;
         }
         return `${hours}:${minutes}`;
@@ -30580,13 +30509,11 @@ class PoDatetimepickerComponent extends PoDatetimepickerBaseComponent {
     iconDatepicker;
     calendarComponent;
     inputEl;
-    iconClean;
     dialogPicker;
     helperEl;
     datetimepickerField;
     renderer = inject(Renderer2);
     cd = inject(ChangeDetectorRef);
-    poCalendarService = inject(PoCalendarService);
     controlPosition = inject(PoControlPositionService);
     id = `po-datetimepicker[${uuid()}]`;
     displayAdditionalHelp = false;
@@ -30598,6 +30525,8 @@ class PoDatetimepickerComponent extends PoDatetimepickerBaseComponent {
     clickListener;
     eventResizeListener;
     valueBeforeChange = '';
+    hadValueOnOpen = false;
+    isTodayPresetInProgress = false;
     constructor() {
         const languageService = inject(PoLanguageService);
         const el = inject(ElementRef);
@@ -30628,6 +30557,8 @@ class PoDatetimepickerComponent extends PoDatetimepickerBaseComponent {
         }
         if (!this.visible) {
             this.visible = true;
+            this.hadValueOnOpen = !!(this.date && this.timeValue);
+            this.syncDateFromInput();
             this.setCalendarPosition();
             this.initializeListeners();
             this.syncCalendarAndTimer();
@@ -30689,25 +30620,51 @@ class PoDatetimepickerComponent extends PoDatetimepickerBaseComponent {
         }
         this.objMask?.keyup($event);
         if (this.objMask?.valueToModel || this.objMask?.valueToModel === '') {
-            const inputValue = this.inputEl.nativeElement.value;
-            const minLength = this.getExpectedInputLength();
-            if (this.objMask.valueToModel.length >= minLength) {
-                this.parseInputAndSync(inputValue);
-            }
-            else {
-                this.date = undefined;
-                this.timeValue = '';
-                this.controlModel();
-                this.syncCalendarAndTimer();
+            this.processKeyupWithMask();
+        }
+        else {
+            this.clearDateTimeState();
+            this.syncCalendarAndTimer();
+        }
+    }
+    processKeyupWithMask() {
+        const inputValue = this.inputEl.nativeElement.value;
+        const minLength = this.getExpectedInputLength();
+        if (this.objMask.valueToModel.length >= minLength) {
+            this.tryParseCompleteInput(inputValue);
+        }
+        else {
+            this.clearDateTimeState();
+            this.controlModel();
+            this.syncCalendarAndTimer();
+        }
+    }
+    tryParseCompleteInput(inputValue) {
+        const parsed = this.parseDateTimeFromInput(inputValue);
+        if (parsed) {
+            this.date = parsed.date;
+            this.timeValue = this.normalizeTimeWithSeconds(parsed.time);
+            if (this.is12HourFormat) {
+                const hours = Number.parseInt(parsed.time.split(':')[0], 10);
+                this.currentPeriod = hours >= 12 ? 'PM' : 'AM';
             }
+            this.controlModel();
+            this.syncCalendarAndTimer();
         }
         else {
-            this.date = undefined;
-            this.timeValue = '';
+            this.clearDateTimeState();
+            this.controlModel();
             this.syncCalendarAndTimer();
         }
     }
+    clearDateTimeState() {
+        this.date = undefined;
+        this.timeValue = '';
+    }
     onKeydown($event) {
+        if ($event?.target === this.inputEl?.nativeElement) {
+            this.keydown.emit($event);
+        }
         if (this.isReadonly) {
             return;
         }
@@ -30719,7 +30676,6 @@ class PoDatetimepickerComponent extends PoDatetimepickerBaseComponent {
         }
         if ($event?.target === this.inputEl?.nativeElement) {
             this.objMask?.keydown($event);
-            this.keydown.emit($event);
         }
     }
     onInputFocus() {
@@ -30728,8 +30684,6 @@ class PoDatetimepickerComponent extends PoDatetimepickerBaseComponent {
     onPeriodBlur() {
         this.isInputFocused = false;
     }
-    // Chamado ao sair do campo (blur).
-    // Finaliza a edição, valida o valor e sincroniza com o calendário/timer.
     eventOnBlur($event) {
         this.isInputFocused = false;
         this.onTouchedModel?.();
@@ -30772,7 +30726,6 @@ class PoDatetimepickerComponent extends PoDatetimepickerBaseComponent {
             }
         }
     }
-    // Chamado ao clicar no input.
     eventOnClick($event) {
         if (this.verifyMobile()) {
             $event.target.blur();
@@ -30782,14 +30735,11 @@ class PoDatetimepickerComponent extends PoDatetimepickerBaseComponent {
             this.objMask?.click($event);
         }
     }
-    // Chamado ao clicar em qualquer parte do wrapper do campo.
-    // Foca o input principal se o clique não foi no period input ou nos ícones.
     onFieldClick($event) {
         if (this.isDisabled || this.isReadonly) {
             return;
         }
         const target = $event.target;
-        // Se clicou no period input ou nos botões, não redireciona
         if (target.closest('.po-datetimepicker-field-period') || target.closest('.po-field-icon-container-right')) {
             return;
         }
@@ -30804,27 +30754,25 @@ class PoDatetimepickerComponent extends PoDatetimepickerBaseComponent {
             this.closeCalendar(false);
         }
     }
-    // Chamado quando Tab/Shift+Tab atinge a borda do timer (última ou primeira coluna).
-    // Quando direction é 'forward' (Tab na última coluna), fecha o calendário e foca no botão toggle.
     onTimerBoundaryTab(event) {
         if (event.direction === 'forward') {
             event.event.preventDefault();
             this.closeCalendar(false);
         }
     }
-    // Sobrescreve writeValue para sincronizar valueBeforeChange,
+    onCalendarClose() {
+        this.isTodayPresetInProgress = true;
+        this.closeCalendar(false);
+    }
     writeValue(value) {
         super.writeValue(value);
         this.valueBeforeChange = this.getModelValue();
     }
-    // Atualiza o valor exibido no input quando o model muda externamente (writeValue)
-    // ou quando o locale muda em runtime.
     refreshValue(value) {
         if (!this.inputEl) {
             return;
         }
         if (value && value instanceof Date && !Number.isNaN(value.getTime())) {
-            // Atualiza o período atual com base no horário armazenado (formato 24h)
             if (this.is12HourFormat && this.timeValue) {
                 const hours = Number.parseInt(this.timeValue.split(':')[0], 10);
                 this.currentPeriod = hours >= 12 ? 'PM' : 'AM';
@@ -30834,35 +30782,26 @@ class PoDatetimepickerComponent extends PoDatetimepickerBaseComponent {
         else if (!value) {
             this.inputEl.nativeElement.value = '';
         }
-        // Se value é inválido (NaN), não altera o input — mantém o valor atual
         this.cd?.markForCheck();
     }
-    // Chamado quando o timer emite uma mudança de horário.
-    // Atualiza o valor, propaga o model, emite p-change e fecha o calendário.
-    // Só processa se já há data válida selecionada (seleção completa = data + hora).
     onTimeChange(time) {
         if (!time) {
             return;
         }
-        this.timeValue = time;
+        this.timeValue = this.normalizeTimeWithSeconds(time);
         if (this.date && !Number.isNaN(this.date.getTime())) {
             this.controlModel();
             this.refreshValue(this.date);
             this.emitChangeIfDifferent(this.getModelValue());
-            this.closeCalendar(true);
+            if (this.isTodayPresetInProgress) {
+                this.isTodayPresetInProgress = false;
+            }
+            else if (!this.hadValueOnOpen) {
+                this.closeCalendar(true);
+            }
             this.cd.markForCheck();
         }
     }
-    // Chamado quando o calendário emite uma mudança de data.
-    //
-    // Distingue entre:
-    // - "Limpar": calendar emite change('') — string vazia
-    // - Tab/close interno: calendar emite change(null) — ignorar
-    // - Seleção de data: calendar emite change('yyyy-mm-dd') — processar
-    //
-    // Ao selecionar uma data, NÃO emite p-change nem propaga model com hora 00:00.
-    // O p-change só será emitido quando o timer completar a seleção (data + hora).
-    // Exceção: "Hoje" define data+hora simultaneamente, então emite e fecha.
     onDateChange(date) {
         if (date === null || date === undefined) {
             return;
@@ -30873,44 +30812,35 @@ class PoDatetimepickerComponent extends PoDatetimepickerBaseComponent {
             this.callOnChange('');
             this.emitChangeIfDifferent('');
             this.refreshValue(undefined);
-            this.closeCalendar(true);
+            this.closeCalendar(false);
             this.cd.markForCheck();
             return;
         }
-        // date vem no formato ISO yyyy-mm-dd do po-calendar
         const parsedDate = new Date(date + 'T00:00:00');
         if (Number.isNaN(parsedDate.getTime())) {
             return;
         }
         this.date = parsedDate;
-        // "Hoje" — hora já foi definida via p-change-time antes deste evento.
-        // Emite model completo e fecha.
-        if (this.poCalendarService.isToday(parsedDate) && this.timeValue) {
-            this.controlModel();
-            this.refreshValue(this.date);
-            this.emitChangeIfDifferent(this.getModelValue());
-            this.closeCalendar(true);
+        if (this.isTodayPresetInProgress) {
             return;
         }
-        // Se já existe hora preenchida, a seleção de data atualiza o model
-        // imediatamente mas mantém o calendário aberto para possível ajuste de hora.
         if (this.timeValue) {
             this.controlModel();
             this.refreshValue(this.date);
             this.emitChangeIfDifferent(this.getModelValue());
             return;
         }
-        // Seleção de data sem hora — apenas atualiza o display
-        // (aguarda seleção de hora no timer para completar)
         this.refreshValue(this.date);
     }
-    // Chamado ao clicar no botão de limpar (po-clean no input).
-    // Limpa data, hora, input e reseta o calendário/timer.
     clear(triggeredByKeyboard = false) {
         this.date = undefined;
         this.timeValue = '';
         this.currentPeriod = 'AM';
         this.inputEl.nativeElement.value = '';
+        if (this.objMask) {
+            this.objMask.valueToModel = '';
+            this.objMask.valueToInput = '';
+        }
         if (triggeredByKeyboard) {
             setTimeout(() => {
                 this.focus();
@@ -30989,7 +30919,6 @@ class PoDatetimepickerComponent extends PoDatetimepickerBaseComponent {
         dateFormatted = dateFormatted.replace('mm', month);
         dateFormatted = dateFormatted.replace('yyyy', year);
         dateFormatted = dateFormatted.replace(/\//g, separator);
-        // Se não há hora selecionada, exibe placeholders vazios para indicar que falta preencher
         if (!time) {
             const timePlaceholder = this.showSeconds() ? '--:--:--' : '--:--';
             return `${dateFormatted} ${timePlaceholder}`;
@@ -30997,16 +30926,11 @@ class PoDatetimepickerComponent extends PoDatetimepickerBaseComponent {
         const timeDisplay = this.formatTimeForDisplay(time);
         return `${dateFormatted} ${timeDisplay}`;
     }
-    // Faz o parse do valor digitado no input e sincroniza com o calendário e timer.
-    //
-    // Formato esperado: "dd/mm/yyyy HH:mm" ou "mm/dd/yyyy HH:mm" (conforme locale)
-    // Para 12h: "dd/mm/yyyy hh:mm AM/PM"
     parseInputAndSync(inputValue) {
         const parsed = this.parseDateTimeFromInput(inputValue);
         if (parsed) {
             this.date = parsed.date;
-            this.timeValue = parsed.time;
-            // Sincroniza currentPeriod com o horário parseado (formato 24h)
+            this.timeValue = this.normalizeTimeWithSeconds(parsed.time);
             if (this.is12HourFormat) {
                 const hours = Number.parseInt(parsed.time.split(':')[0], 10);
                 this.currentPeriod = hours >= 12 ? 'PM' : 'AM';
@@ -31020,30 +30944,24 @@ class PoDatetimepickerComponent extends PoDatetimepickerBaseComponent {
             this.callOnChange(this.literals.invalidDatetime);
         }
     }
-    // Extrai data e hora de uma string formatada conforme o locale.
     parseDateTimeFromInput(inputValue) {
         if (!inputValue) {
             return null;
         }
-        // Separa a parte de data da parte de hora pelo espaço
-        // Formato: "dd/mm/yyyy HH:mm" ou "dd/mm/yyyy hh:mm AM"
         const separator = this.languageService.getDateSeparator(this.localeInput());
-        const datePartLength = 10; // dd/mm/yyyy sempre tem 10 chars (com separador)
+        const datePartLength = 10;
         const datePart = inputValue.substring(0, datePartLength);
-        const timePart = inputValue.substring(datePartLength + 1).trim(); // +1 para o espaço
-        // Parse da data
+        const timePart = inputValue.substring(datePartLength + 1).trim();
         const date = this.getDateFromFormattedString(datePart, separator);
         if (!date) {
             return null;
         }
-        // Parse da hora
         const time = this.parseTimeFromInput(timePart);
         if (!time) {
             return null;
         }
         return { date, time };
     }
-    // Converte uma string de data formatada (ex: "09/05/2026") em um objeto Date.
     getDateFromFormattedString(dateStr, separator) {
         const format = this.format.replace(/\//g, separator);
         const dayIndex = format.indexOf('dd');
@@ -31065,7 +30983,6 @@ class PoDatetimepickerComponent extends PoDatetimepickerBaseComponent {
         }
         return date;
     }
-    // Converte uma string de hora (ex: "14:30" ou "02:30 PM") em formato 24h "HH:mm" ou "HH:mm:ss".
     parseTimeFromInput(timeStr) {
         if (!timeStr) {
             return null;
@@ -31074,8 +30991,6 @@ class PoDatetimepickerComponent extends PoDatetimepickerBaseComponent {
     }
     parse12HourTime(timeStr) {
         const periodMatch = /(AM|PM)$/i.exec(timeStr);
-        // Se o período está na string (ex: "02:30 PM"), usa-o diretamente.
-        // Caso contrário, usa o currentPeriod do input separado.
         const period = periodMatch ? periodMatch[1].toUpperCase() : this.currentPeriod;
         const timeOnly = periodMatch ? timeStr.replace(/(AM|PM)/i, '').trim() : timeStr.trim();
         const parts = timeOnly.split(':');
@@ -31131,6 +31046,9 @@ class PoDatetimepickerComponent extends PoDatetimepickerBaseComponent {
             }
             return `${hoursStr}:${minutesStr}:${this.padTime(seconds)}`;
         }
+        if (this.showSeconds()) {
+            return null;
+        }
         return `${hoursStr}:${minutesStr}`;
     }
     isValidSeconds(seconds) {
@@ -31139,15 +31057,43 @@ class PoDatetimepickerComponent extends PoDatetimepickerBaseComponent {
     padTime(value) {
         return ('0' + value).slice(-2);
     }
-    // Sincroniza o calendário e o timer com os valores internos de date e timeValue.
+    normalizeTimeWithSeconds(time) {
+        if (!time || !this.showSeconds()) {
+            return time;
+        }
+        const parts = time.split(':');
+        if (parts.length === 2) {
+            return `${time}:00`;
+        }
+        return time;
+    }
+    syncDateFromInput() {
+        if (this.date) {
+            return;
+        }
+        const inputValue = this.inputEl?.nativeElement?.value;
+        if (!inputValue || inputValue.length < 10) {
+            return;
+        }
+        const separator = this.languageService.getDateSeparator(this.localeInput());
+        const fullParsed = this.parseDateTimeFromInput(inputValue);
+        if (fullParsed) {
+            this.date = fullParsed.date;
+            this.timeValue = this.normalizeTimeWithSeconds(fullParsed.time);
+            return;
+        }
+        const datePart = inputValue.substring(0, 10);
+        const parsedDate = this.getDateFromFormattedString(datePart, separator);
+        if (parsedDate) {
+            this.date = parsedDate;
+        }
+    }
     syncCalendarAndTimer() {
         if (!this.calendarComponent) {
             return;
         }
         if (this.date) {
-            // Sincroniza o calendário com a data selecionada
             this.calendarComponent.writeValue(this.date);
-            // Sincroniza o timer com o horário
             if (this.calendarComponent.timerComponent && this.timeValue) {
                 this.calendarComponent.timerComponent.writeValue(this.timeValue);
             }
@@ -31156,24 +31102,19 @@ class PoDatetimepickerComponent extends PoDatetimepickerBaseComponent {
             }
         }
         else {
-            // Sem data válida — reseta o calendário e o timer
             this.calendarComponent.writeValue(null);
             if (this.calendarComponent.timerComponent) {
                 this.calendarComponent.timerComponent.writeValue(null);
             }
         }
     }
-    // Retorna o comprimento mínimo esperado do input (sem formatação) para considerar completo.
-    // Formato 24h: ddmmyyyyHHmm = 12 chars (ou 14 com segundos)
-    // Formato 12h: ddmmyyyyHHmm = 12 chars (ou 14 com segundos) — AM/PM é sufixo fixo, não conta.
     getExpectedInputLength() {
-        let length = 12; // ddmmyyyy + HHmm
+        let length = 16;
         if (this.showSeconds()) {
-            length += 2; // ss
+            length += 3;
         }
         return length;
     }
-    // --- Position ---
     setCalendarPosition() {
         this.setDialogPickerStyleDisplay('block');
         this.adjustCalendarPosition();
@@ -31192,7 +31133,6 @@ class PoDatetimepickerComponent extends PoDatetimepickerBaseComponent {
             });
         }
     }
-    // --- Listeners ---
     initializeListeners() {
         this.clickListener = this.renderer.listen('document', 'click', (event) => {
             this.wasClickedOnPicker(event);
@@ -31236,8 +31176,6 @@ class PoDatetimepickerComponent extends PoDatetimepickerBaseComponent {
             this.onchange.emit(value);
         }
     }
-    // --- Período AM/PM (input separado) ---
-    // Chamado quando uma tecla é pressionada no input de período AM/PM.
     onPeriodKeydown(event) {
         if (event.key === 'ArrowUp' || event.key === 'ArrowDown') {
             event.preventDefault();
@@ -31250,32 +31188,25 @@ class PoDatetimepickerComponent extends PoDatetimepickerBaseComponent {
             event.preventDefault();
             return;
         }
-        // Shift+Tab: volta para o input principal
         if (event.key === 'Tab' && event.shiftKey) {
             event.preventDefault();
             this.focus();
             return;
         }
-        // Tab: avança para o clean ou botão do calendário
         if (event.key === 'Tab' && !event.shiftKey) {
-            // Permite o fluxo natural de tab (para clean/botão)
             return;
         }
-        // Bloqueia qualquer outra digitação (o período é read-only toggle)
         if (event.key.length === 1) {
             event.preventDefault();
         }
     }
-    // Chamado ao clicar no input de período AM/PM — alterna o período.
     onPeriodClick(event) {
         if (!this.isReadonly && !this.isDisabled) {
             this.togglePeriod();
         }
     }
-    // Alterna o período entre AM e PM e atualiza o model.
     togglePeriod() {
         this.currentPeriod = this.currentPeriod === 'AM' ? 'PM' : 'AM';
-        // Reparse o input para atualizar o model com o novo período
         const inputValue = this.inputEl.nativeElement.value;
         const minLength = this.getExpectedInputLength();
         if (this.objMask?.valueToModel && this.objMask.valueToModel.length >= minLength) {
@@ -31286,11 +31217,11 @@ class PoDatetimepickerComponent extends PoDatetimepickerBaseComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: PoDatetimepickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: PoDatetimepickerComponent, isStandalone: false, selector: "po-datetimepicker", host: { listeners: { "keyup": "onKeyup($event)", "keydown": "onKeydown($event)" } }, providers: providers$6, viewQueries: [{ propertyName: "iconDatepicker", first: true, predicate: ["iconCalendar"], descendants: true }, { propertyName: "calendarComponent", first: true, predicate: ["calendar"], descendants: true }, { propertyName: "inputEl", first: true, predicate: ["inp"], descendants: true, read: ElementRef, static: true }, { propertyName: "iconClean", first: true, predicate: ["iconClean"], descendants: true, read: ElementRef }, { propertyName: "dialogPicker", first: true, predicate: ["dialogPicker"], descendants: true, read: ElementRef }, { propertyName: "helperEl", first: true, predicate: ["helperEl"], descendants: true, read: PoHelperComponent }, { propertyName: "datetimepickerField", first: true, predicate: ["datetimepickerField"], descendants: true, read: ElementRef, static: true }], usesInheritance: true, ngImport: i0, template: "@let poHelper = setHelper(label());\n<po-field-container\n  [class.po-date-picker-container-disabled]=\"isDisabled\"\n  [p-id]=\"id\"\n  [p-label]=\"label()\"\n  [p-disabled]=\"isDisabled\"\n  [p-optional]=\"optional()\"\n  [p-required]=\"isRequired\"\n  [p-show-required]=\"showRequired()\"\n  [p-helper]=\"label() ? poHelper.helperSettings : undefined\"\n  [p-show-helper]=\"label() ? displayAdditionalHelp : undefined\"\n  [p-size]=\"hostSize\"\n  [p-text-wrap]=\"labelTextWrap()\"\n  [p-compact-label]=\"compactLabel()\"\n>\n  <div #outerContainer>\n    <div\n      cdkOverlayOrigin\n      #trigger=\"cdkOverlayOrigin\"\n      class=\"po-field-container-content po-field-container-content-datetimepicker\"\n    >\n      <div class=\"po-field-container-input\">\n        <div\n          #datetimepickerField\n          class=\"po-datetimepicker-field po-input\"\n          [class.po-input-icon-right]=\"isClean && dateTimeInputValue && !isDisabled && !isReadonly\"\n          [class.po-datetimepicker-field-disabled]=\"isDisabled\"\n          [class.po-datetimepicker-field-readonly]=\"isReadonly\"\n          [class.po-datetimepicker-field-focused]=\"isInputFocused\"\n          [attr.data-inactive-component]=\"isDisabled || isReadonly\"\n          [attr.p-size]=\"hostSize\"\n          (keydown)=\"onFieldClick($event)\"\n          (click)=\"onFieldClick($event)\"\n        >\n          <div\n            class=\"po-datetimepicker-field-segment\"\n            [attr.data-value]=\"dateTimeInputValue || placeholderValue || '                '\"\n          >\n            <input\n              #inp\n              type=\"text\"\n              class=\"po-datetimepicker-inner-input\"\n              [attr.data-focused-element]=\"!isDisabled\"\n              [attr.name]=\"name()\"\n              [id]=\"id\"\n              [autocomplete]=\"isNoAutocomplete\"\n              [disabled]=\"isDisabled\"\n              [placeholder]=\"isDisabled ? '' : placeholderValue\"\n              [readonly]=\"isReadonly\"\n              [required]=\"isRequired\"\n              [attr.data-append-in-body]=\"appendBox()\"\n              (blur)=\"eventOnBlur($event)\"\n              (click)=\"eventOnClick($event)\"\n              (focus)=\"onInputFocus()\"\n            />\n          </div>\n          @if (is12HourFormat && dateTimeInputValue) {\n            <div\n              class=\"po-datetimepicker-field-segment po-datetimepicker-field-period\"\n              [attr.data-value]=\"currentPeriod\"\n            >\n              <input\n                class=\"po-datetimepicker-segment-input po-datetimepicker-period-input\"\n                type=\"text\"\n                maxlength=\"2\"\n                readonly\n                [value]=\"currentPeriod\"\n                [disabled]=\"isDisabled\"\n                [attr.tabindex]=\"isDisabled || isReadonly ? -1 : 0\"\n                role=\"spinbutton\"\n                [attr.aria-label]=\"currentPeriod\"\n                (keydown)=\"onPeriodKeydown($event)\"\n                (click)=\"onPeriodClick($event)\"\n                (focus)=\"onInputFocus()\"\n                (blur)=\"onPeriodBlur()\"\n              />\n            </div>\n          }\n          @if (loading()) {\n            <po-loading-icon [p-size]=\"mapSizeToIcon(hostSize)\"></po-loading-icon>\n          } @else {\n            <div class=\"po-field-icon-container-right\">\n              @if (isClean && dateTimeInputValue && !isDisabled && !isReadonly) {\n                <po-clean\n                  #iconClean\n                  tabindex=\"0\"\n                  role=\"button\"\n                  [attr.aria-label]=\"literals.clean\"\n                  class=\"po-icon-input\"\n                  p-icon=\"ICON_FILL_CLEAR_CONTENT\"\n                  [p-element-ref]=\"inputEl\"\n                  [p-size]=\"hostSize\"\n                  (p-change-event)=\"clear()\"\n                  (keydown.enter)=\"clear(true); $event.preventDefault()\"\n                  (keydown.space)=\"clear(true); $event.preventDefault()\"\n                >\n                </po-clean>\n                <div class=\"po-button-vertical-divider\"></div>\n              }\n              <po-button\n                #iconCalendar\n                class=\"po-datetimepicker-button\"\n                [class.po-button-tertiary-danger]=\"getErrorPattern()\"\n                p-icon=\"ICON_CALENDAR_DOTS\"\n                p-kind=\"tertiary\"\n                [p-disabled]=\"isDisabled || isReadonly\"\n                [p-size]=\"hostSize\"\n                (p-click)=\"togglePicker(false)\"\n                (keydown)=\"eventOnButtonKeydown($event)\"\n              >\n              </po-button>\n            </div>\n          }\n        </div>\n      </div>\n      @if ((!this.label() && poHelperComponent()) || (!this.label() && poHelper.hideAdditionalHelp)) {\n        <po-helper\n          #helperEl\n          class=\"po-field-helper-button\"\n          [p-size]=\"hostSize\"\n          [p-helper]=\"poHelper.helperSettings\"\n          [p-disabled]=\"isDisabled\"\n          [p-append-in-body]=\"appendBox()\"\n        >\n        </po-helper>\n      }\n    </div>\n\n    @if (appendBox()) {\n      <ng-template\n        cdkConnectedOverlay\n        [cdkConnectedOverlayOrigin]=\"trigger\"\n        [cdkConnectedOverlayOpen]=\"true\"\n        [cdkConnectedOverlayDisableClose]=\"true\"\n      >\n        <ng-container *ngTemplateOutlet=\"sharedCalendarContent\"></ng-container>\n      </ng-template>\n    } @else {\n      <ng-container *ngTemplateOutlet=\"sharedCalendarContent\"></ng-container>\n    }\n  </div>\n\n  @if (!isReadonly) {\n    <po-field-container-bottom\n      [p-append-in-body]=\"appendBox()\"\n      [p-help]=\"help()\"\n      [p-disabled]=\"isDisabled\"\n      [p-error-pattern]=\"getErrorPattern()\"\n      [p-error-limit]=\"errorLimit()\"\n      [p-size]=\"hostSize\"\n    ></po-field-container-bottom>\n  }\n</po-field-container>\n\n<ng-template #sharedCalendarContent>\n  <div #dialogPicker [class.po-datetimepicker-popup-calendar]=\"!verifyMobile()\" tabindex=\"-1\" [hidden]=\"!visible\">\n    @if (verifyMobile()) {\n      <div class=\"po-datetimepicker-calendar-overlay\"></div>\n    }\n    <po-calendar\n      #calendar\n      [class.po-datetimepicker-calendar-mobile]=\"verifyMobile()\"\n      p-mode=\"date-time\"\n      [p-size]=\"hostSize\"\n      [p-locale]=\"locale\"\n      [p-format]=\"resolvedTimerFormat\"\n      [p-min-date]=\"resolvedMinDate\"\n      [p-max-date]=\"resolvedMaxDate\"\n      [p-max-time]=\"maxTime()\"\n      [p-min-time]=\"minTime()\"\n      [p-minute-interval]=\"minuteInterval()\"\n      [p-second-interval]=\"secondInterval()\"\n      [p-show-seconds]=\"showSeconds()\"\n      (p-change)=\"onDateChange($event)\"\n      (p-change-time)=\"onTimeChange($event)\"\n      (p-change-month-year)=\"adjustCalendarPosition()\"\n      (p-timer-boundary-tab)=\"onTimerBoundaryTab($event)\"\n      (keydown)=\"eventOnCalendarKeydown($event)\"\n    ></po-calendar>\n  </div>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2$1.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation", "cdkConnectedOverlayUsePopover", "cdkConnectedOverlayMatchWidth", "cdkConnectedOverlay"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i2$1.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "component", type: PoCleanComponent, selector: "po-clean" }, { kind: "component", type: PoHelperComponent, selector: "po-helper" }, { kind: "component", type: PoButtonComponent, selector: "po-button" }, { kind: "component", type: PoLoadingIconComponent, selector: "po-loading-icon", inputs: ["p-neutral-color", "p-size", "p-in-overlay"] }, { kind: "component", type: PoCalendarComponent, selector: "po-calendar" }, { kind: "component", type: PoFieldContainerBottomComponent, selector: "po-field-container-bottom", inputs: ["p-append-in-body", "p-disabled", "p-error-pattern", "p-error-limit", "p-help", "p-size", "p-helper", "p-show-helper"] }, { kind: "component", type: PoFieldContainerComponent, selector: "po-field-container", inputs: ["p-disabled", "p-id", "p-label", "p-help", "p-helper", "p-show-helper", "p-text-wrap", "p-optional", "p-required", "p-show-required", "p-size", "p-compact-label"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: PoDatetimepickerComponent, isStandalone: false, selector: "po-datetimepicker", host: { listeners: { "keyup": "onKeyup($event)", "keydown": "onKeydown($event)" } }, providers: providers$6, viewQueries: [{ propertyName: "iconDatepicker", first: true, predicate: ["iconCalendar"], descendants: true }, { propertyName: "calendarComponent", first: true, predicate: ["calendar"], descendants: true }, { propertyName: "inputEl", first: true, predicate: ["inp"], descendants: true, read: ElementRef, static: true }, { propertyName: "dialogPicker", first: true, predicate: ["dialogPicker"], descendants: true, read: ElementRef }, { propertyName: "helperEl", first: true, predicate: ["helperEl"], descendants: true, read: PoHelperComponent }, { propertyName: "datetimepickerField", first: true, predicate: ["datetimepickerField"], descendants: true, read: ElementRef, static: true }], usesInheritance: true, ngImport: i0, template: "@let poHelper = setHelper(label());\n<po-field-container\n  [class.po-date-picker-container-disabled]=\"isDisabled\"\n  [p-id]=\"id\"\n  [p-label]=\"label()\"\n  [p-disabled]=\"isDisabled\"\n  [p-optional]=\"optional()\"\n  [p-required]=\"isRequired\"\n  [p-show-required]=\"showRequired()\"\n  [p-helper]=\"label() ? poHelper.helperSettings : undefined\"\n  [p-show-helper]=\"label() ? displayAdditionalHelp : undefined\"\n  [p-size]=\"hostSize\"\n  [p-text-wrap]=\"labelTextWrap()\"\n  [p-compact-label]=\"compactLabel()\"\n>\n  <div #outerContainer>\n    <div\n      cdkOverlayOrigin\n      #trigger=\"cdkOverlayOrigin\"\n      class=\"po-field-container-content po-field-container-content-datetimepicker\"\n    >\n      <div class=\"po-field-container-input\">\n        <div\n          #datetimepickerField\n          class=\"po-datetimepicker-field po-input\"\n          [class.po-input-icon-right]=\"isClean && dateTimeInputValue && !isDisabled && !isReadonly\"\n          [class.po-datetimepicker-field-disabled]=\"isDisabled\"\n          [class.po-datetimepicker-field-readonly]=\"isReadonly\"\n          [class.po-datetimepicker-field-focused]=\"isInputFocused\"\n          [attr.data-inactive-component]=\"isDisabled || isReadonly\"\n          [attr.p-size]=\"hostSize\"\n          (keydown)=\"onFieldClick($event)\"\n          (click)=\"onFieldClick($event)\"\n        >\n          <div\n            class=\"po-datetimepicker-field-segment\"\n            [attr.data-value]=\"dateTimeInputValue || placeholderValue || '                '\"\n          >\n            <input\n              #inp\n              type=\"text\"\n              class=\"po-datetimepicker-inner-input\"\n              [attr.data-focused-element]=\"!isDisabled\"\n              [attr.name]=\"name()\"\n              [id]=\"id\"\n              [autocomplete]=\"isNoAutocomplete\"\n              [disabled]=\"isDisabled\"\n              [placeholder]=\"isDisabled ? '' : placeholderValue\"\n              [readonly]=\"isReadonly\"\n              [required]=\"isRequired\"\n              [attr.data-append-in-body]=\"appendBox()\"\n              (blur)=\"eventOnBlur($event)\"\n              (click)=\"eventOnClick($event)\"\n              (focus)=\"onInputFocus()\"\n            />\n          </div>\n          @if (is12HourFormat && dateTimeInputValue) {\n            <div\n              class=\"po-datetimepicker-field-segment po-datetimepicker-field-period\"\n              [attr.data-value]=\"currentPeriod\"\n            >\n              <input\n                class=\"po-datetimepicker-segment-input po-datetimepicker-period-input\"\n                type=\"text\"\n                maxlength=\"2\"\n                readonly\n                [value]=\"currentPeriod\"\n                [disabled]=\"isDisabled\"\n                [attr.tabindex]=\"isDisabled || isReadonly ? -1 : 0\"\n                role=\"spinbutton\"\n                [attr.aria-label]=\"currentPeriod\"\n                (keydown)=\"onPeriodKeydown($event)\"\n                (click)=\"onPeriodClick($event)\"\n                (focus)=\"onInputFocus()\"\n                (blur)=\"onPeriodBlur()\"\n              />\n            </div>\n          }\n          @if (loading()) {\n            <po-loading-icon [p-size]=\"mapSizeToIcon(hostSize)\"></po-loading-icon>\n          } @else {\n            <div class=\"po-field-icon-container-right\">\n              @if (isClean && dateTimeInputValue && !isDisabled && !isReadonly) {\n                <po-clean\n                  #iconClean\n                  tabindex=\"0\"\n                  role=\"button\"\n                  [attr.aria-label]=\"literals.clean\"\n                  class=\"po-icon-input\"\n                  p-icon=\"ICON_FILL_CLEAR_CONTENT\"\n                  [p-element-ref]=\"inputEl\"\n                  [p-size]=\"hostSize\"\n                  (p-change-event)=\"clear()\"\n                  (keydown.enter)=\"clear(true); $event.preventDefault()\"\n                  (keydown.space)=\"clear(true); $event.preventDefault()\"\n                >\n                </po-clean>\n                <div class=\"po-button-vertical-divider\"></div>\n              }\n              <po-button\n                #iconCalendar\n                class=\"po-datetimepicker-button\"\n                [class.po-button-tertiary-danger]=\"getErrorPattern()\"\n                p-icon=\"ICON_CALENDAR_DOTS\"\n                p-kind=\"tertiary\"\n                [p-disabled]=\"isDisabled || isReadonly\"\n                [p-size]=\"hostSize\"\n                (p-click)=\"togglePicker(false)\"\n                (keydown)=\"eventOnButtonKeydown($event)\"\n              >\n              </po-button>\n            </div>\n          }\n        </div>\n      </div>\n      @if ((!this.label() && poHelperComponent()) || (!this.label() && poHelper.hideAdditionalHelp)) {\n        <po-helper\n          #helperEl\n          class=\"po-field-helper-button\"\n          [p-size]=\"hostSize\"\n          [p-helper]=\"poHelper.helperSettings\"\n          [p-disabled]=\"isDisabled\"\n          [p-append-in-body]=\"appendBox()\"\n        >\n        </po-helper>\n      }\n    </div>\n\n    @if (appendBox()) {\n      <ng-template\n        cdkConnectedOverlay\n        [cdkConnectedOverlayOrigin]=\"trigger\"\n        [cdkConnectedOverlayOpen]=\"true\"\n        [cdkConnectedOverlayDisableClose]=\"true\"\n      >\n        <ng-container *ngTemplateOutlet=\"sharedCalendarContent\"></ng-container>\n      </ng-template>\n    } @else {\n      <ng-container *ngTemplateOutlet=\"sharedCalendarContent\"></ng-container>\n    }\n  </div>\n\n  @if (!isReadonly) {\n    <po-field-container-bottom\n      [p-append-in-body]=\"appendBox()\"\n      [p-help]=\"help()\"\n      [p-disabled]=\"isDisabled\"\n      [p-error-pattern]=\"getErrorPattern()\"\n      [p-error-limit]=\"errorLimit()\"\n      [p-size]=\"hostSize\"\n    ></po-field-container-bottom>\n  }\n</po-field-container>\n\n<ng-template #sharedCalendarContent>\n  <div #dialogPicker [class.po-datetimepicker-popup-calendar]=\"!verifyMobile()\" tabindex=\"-1\" [hidden]=\"!visible\">\n    @if (verifyMobile()) {\n      <div class=\"po-datetimepicker-calendar-overlay\"></div>\n    }\n    <po-calendar\n      #calendar\n      [class.po-datetimepicker-calendar-mobile]=\"verifyMobile()\"\n      p-mode=\"date-time\"\n      [p-size]=\"hostSize\"\n      [p-locale]=\"locale\"\n      [p-format]=\"resolvedTimerFormat\"\n      [p-min-date]=\"resolvedMinDate\"\n      [p-max-date]=\"resolvedMaxDate\"\n      [p-max-time]=\"maxTime()\"\n      [p-min-time]=\"minTime()\"\n      [p-minute-interval]=\"minuteInterval()\"\n      [p-second-interval]=\"secondInterval()\"\n      [p-show-seconds]=\"showSeconds()\"\n      (p-change)=\"onDateChange($event)\"\n      (p-change-time)=\"onTimeChange($event)\"\n      (p-close)=\"onCalendarClose()\"\n      (p-change-month-year)=\"adjustCalendarPosition()\"\n      (p-timer-boundary-tab)=\"onTimerBoundaryTab($event)\"\n      (keydown)=\"eventOnCalendarKeydown($event)\"\n    ></po-calendar>\n  </div>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2$1.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation", "cdkConnectedOverlayUsePopover", "cdkConnectedOverlayMatchWidth", "cdkConnectedOverlay"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i2$1.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "component", type: PoCleanComponent, selector: "po-clean" }, { kind: "component", type: PoHelperComponent, selector: "po-helper" }, { kind: "component", type: PoButtonComponent, selector: "po-button" }, { kind: "component", type: PoLoadingIconComponent, selector: "po-loading-icon", inputs: ["p-neutral-color", "p-size", "p-in-overlay"] }, { kind: "component", type: PoCalendarComponent, selector: "po-calendar" }, { kind: "component", type: PoFieldContainerBottomComponent, selector: "po-field-container-bottom", inputs: ["p-append-in-body", "p-disabled", "p-error-pattern", "p-error-limit", "p-help", "p-size", "p-helper", "p-show-helper"] }, { kind: "component", type: PoFieldContainerComponent, selector: "po-field-container", inputs: ["p-disabled", "p-id", "p-label", "p-help", "p-helper", "p-show-helper", "p-text-wrap", "p-optional", "p-required", "p-show-required", "p-size", "p-compact-label"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: PoDatetimepickerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'po-datetimepicker', providers: providers$6, standalone: false, template: "@let poHelper = setHelper(label());\n<po-field-container\n  [class.po-date-picker-container-disabled]=\"isDisabled\"\n  [p-id]=\"id\"\n  [p-label]=\"label()\"\n  [p-disabled]=\"isDisabled\"\n  [p-optional]=\"optional()\"\n  [p-required]=\"isRequired\"\n  [p-show-required]=\"showRequired()\"\n  [p-helper]=\"label() ? poHelper.helperSettings : undefined\"\n  [p-show-helper]=\"label() ? displayAdditionalHelp : undefined\"\n  [p-size]=\"hostSize\"\n  [p-text-wrap]=\"labelTextWrap()\"\n  [p-compact-label]=\"compactLabel()\"\n>\n  <div #outerContainer>\n    <div\n      cdkOverlayOrigin\n      #trigger=\"cdkOverlayOrigin\"\n      class=\"po-field-container-content po-field-container-content-datetimepicker\"\n    >\n      <div class=\"po-field-container-input\">\n        <div\n          #datetimepickerField\n          class=\"po-datetimepicker-field po-input\"\n          [class.po-input-icon-right]=\"isClean && dateTimeInputValue && !isDisabled && !isReadonly\"\n          [class.po-datetimepicker-field-disabled]=\"isDisabled\"\n          [class.po-datetimepicker-field-readonly]=\"isReadonly\"\n          [class.po-datetimepicker-field-focused]=\"isInputFocused\"\n          [attr.data-inactive-component]=\"isDisabled || isReadonly\"\n          [attr.p-size]=\"hostSize\"\n          (keydown)=\"onFieldClick($event)\"\n          (click)=\"onFieldClick($event)\"\n        >\n          <div\n            class=\"po-datetimepicker-field-segment\"\n            [attr.data-value]=\"dateTimeInputValue || placeholderValue || '                '\"\n          >\n            <input\n              #inp\n              type=\"text\"\n              class=\"po-datetimepicker-inner-input\"\n              [attr.data-focused-element]=\"!isDisabled\"\n              [attr.name]=\"name()\"\n              [id]=\"id\"\n              [autocomplete]=\"isNoAutocomplete\"\n              [disabled]=\"isDisabled\"\n              [placeholder]=\"isDisabled ? '' : placeholderValue\"\n              [readonly]=\"isReadonly\"\n              [required]=\"isRequired\"\n              [attr.data-append-in-body]=\"appendBox()\"\n              (blur)=\"eventOnBlur($event)\"\n              (click)=\"eventOnClick($event)\"\n              (focus)=\"onInputFocus()\"\n            />\n          </div>\n          @if (is12HourFormat && dateTimeInputValue) {\n            <div\n              class=\"po-datetimepicker-field-segment po-datetimepicker-field-period\"\n              [attr.data-value]=\"currentPeriod\"\n            >\n              <input\n                class=\"po-datetimepicker-segment-input po-datetimepicker-period-input\"\n                type=\"text\"\n                maxlength=\"2\"\n                readonly\n                [value]=\"currentPeriod\"\n                [disabled]=\"isDisabled\"\n                [attr.tabindex]=\"isDisabled || isReadonly ? -1 : 0\"\n                role=\"spinbutton\"\n                [attr.aria-label]=\"currentPeriod\"\n                (keydown)=\"onPeriodKeydown($event)\"\n                (click)=\"onPeriodClick($event)\"\n                (focus)=\"onInputFocus()\"\n                (blur)=\"onPeriodBlur()\"\n              />\n            </div>\n          }\n          @if (loading()) {\n            <po-loading-icon [p-size]=\"mapSizeToIcon(hostSize)\"></po-loading-icon>\n          } @else {\n            <div class=\"po-field-icon-container-right\">\n              @if (isClean && dateTimeInputValue && !isDisabled && !isReadonly) {\n                <po-clean\n                  #iconClean\n                  tabindex=\"0\"\n                  role=\"button\"\n                  [attr.aria-label]=\"literals.clean\"\n                  class=\"po-icon-input\"\n                  p-icon=\"ICON_FILL_CLEAR_CONTENT\"\n                  [p-element-ref]=\"inputEl\"\n                  [p-size]=\"hostSize\"\n                  (p-change-event)=\"clear()\"\n                  (keydown.enter)=\"clear(true); $event.preventDefault()\"\n                  (keydown.space)=\"clear(true); $event.preventDefault()\"\n                >\n                </po-clean>\n                <div class=\"po-button-vertical-divider\"></div>\n              }\n              <po-button\n                #iconCalendar\n                class=\"po-datetimepicker-button\"\n                [class.po-button-tertiary-danger]=\"getErrorPattern()\"\n                p-icon=\"ICON_CALENDAR_DOTS\"\n                p-kind=\"tertiary\"\n                [p-disabled]=\"isDisabled || isReadonly\"\n                [p-size]=\"hostSize\"\n                (p-click)=\"togglePicker(false)\"\n                (keydown)=\"eventOnButtonKeydown($event)\"\n              >\n              </po-button>\n            </div>\n          }\n        </div>\n      </div>\n      @if ((!this.label() && poHelperComponent()) || (!this.label() && poHelper.hideAdditionalHelp)) {\n        <po-helper\n          #helperEl\n          class=\"po-field-helper-button\"\n          [p-size]=\"hostSize\"\n          [p-helper]=\"poHelper.helperSettings\"\n          [p-disabled]=\"isDisabled\"\n          [p-append-in-body]=\"appendBox()\"\n        >\n        </po-helper>\n      }\n    </div>\n\n    @if (appendBox()) {\n      <ng-template\n        cdkConnectedOverlay\n        [cdkConnectedOverlayOrigin]=\"trigger\"\n        [cdkConnectedOverlayOpen]=\"true\"\n        [cdkConnectedOverlayDisableClose]=\"true\"\n      >\n        <ng-container *ngTemplateOutlet=\"sharedCalendarContent\"></ng-container>\n      </ng-template>\n    } @else {\n      <ng-container *ngTemplateOutlet=\"sharedCalendarContent\"></ng-container>\n    }\n  </div>\n\n  @if (!isReadonly) {\n    <po-field-container-bottom\n      [p-append-in-body]=\"appendBox()\"\n      [p-help]=\"help()\"\n      [p-disabled]=\"isDisabled\"\n      [p-error-pattern]=\"getErrorPattern()\"\n      [p-error-limit]=\"errorLimit()\"\n      [p-size]=\"hostSize\"\n    ></po-field-container-bottom>\n  }\n</po-field-container>\n\n<ng-template #sharedCalendarContent>\n  <div #dialogPicker [class.po-datetimepicker-popup-calendar]=\"!verifyMobile()\" tabindex=\"-1\" [hidden]=\"!visible\">\n    @if (verifyMobile()) {\n      <div class=\"po-datetimepicker-calendar-overlay\"></div>\n    }\n    <po-calendar\n      #calendar\n      [class.po-datetimepicker-calendar-mobile]=\"verifyMobile()\"\n      p-mode=\"date-time\"\n      [p-size]=\"hostSize\"\n      [p-locale]=\"locale\"\n      [p-format]=\"resolvedTimerFormat\"\n      [p-min-date]=\"resolvedMinDate\"\n      [p-max-date]=\"resolvedMaxDate\"\n      [p-max-time]=\"maxTime()\"\n      [p-min-time]=\"minTime()\"\n      [p-minute-interval]=\"minuteInterval()\"\n      [p-second-interval]=\"secondInterval()\"\n      [p-show-seconds]=\"showSeconds()\"\n      (p-change)=\"onDateChange($event)\"\n      (p-change-time)=\"onTimeChange($event)\"\n      (p-change-month-year)=\"adjustCalendarPosition()\"\n      (p-timer-boundary-tab)=\"onTimerBoundaryTab($event)\"\n      (keydown)=\"eventOnCalendarKeydown($event)\"\n    ></po-calendar>\n  </div>\n</ng-template>\n" }]
+            args: [{ selector: 'po-datetimepicker', providers: providers$6, standalone: false, template: "@let poHelper = setHelper(label());\n<po-field-container\n  [class.po-date-picker-container-disabled]=\"isDisabled\"\n  [p-id]=\"id\"\n  [p-label]=\"label()\"\n  [p-disabled]=\"isDisabled\"\n  [p-optional]=\"optional()\"\n  [p-required]=\"isRequired\"\n  [p-show-required]=\"showRequired()\"\n  [p-helper]=\"label() ? poHelper.helperSettings : undefined\"\n  [p-show-helper]=\"label() ? displayAdditionalHelp : undefined\"\n  [p-size]=\"hostSize\"\n  [p-text-wrap]=\"labelTextWrap()\"\n  [p-compact-label]=\"compactLabel()\"\n>\n  <div #outerContainer>\n    <div\n      cdkOverlayOrigin\n      #trigger=\"cdkOverlayOrigin\"\n      class=\"po-field-container-content po-field-container-content-datetimepicker\"\n    >\n      <div class=\"po-field-container-input\">\n        <div\n          #datetimepickerField\n          class=\"po-datetimepicker-field po-input\"\n          [class.po-input-icon-right]=\"isClean && dateTimeInputValue && !isDisabled && !isReadonly\"\n          [class.po-datetimepicker-field-disabled]=\"isDisabled\"\n          [class.po-datetimepicker-field-readonly]=\"isReadonly\"\n          [class.po-datetimepicker-field-focused]=\"isInputFocused\"\n          [attr.data-inactive-component]=\"isDisabled || isReadonly\"\n          [attr.p-size]=\"hostSize\"\n          (keydown)=\"onFieldClick($event)\"\n          (click)=\"onFieldClick($event)\"\n        >\n          <div\n            class=\"po-datetimepicker-field-segment\"\n            [attr.data-value]=\"dateTimeInputValue || placeholderValue || '                '\"\n          >\n            <input\n              #inp\n              type=\"text\"\n              class=\"po-datetimepicker-inner-input\"\n              [attr.data-focused-element]=\"!isDisabled\"\n              [attr.name]=\"name()\"\n              [id]=\"id\"\n              [autocomplete]=\"isNoAutocomplete\"\n              [disabled]=\"isDisabled\"\n              [placeholder]=\"isDisabled ? '' : placeholderValue\"\n              [readonly]=\"isReadonly\"\n              [required]=\"isRequired\"\n              [attr.data-append-in-body]=\"appendBox()\"\n              (blur)=\"eventOnBlur($event)\"\n              (click)=\"eventOnClick($event)\"\n              (focus)=\"onInputFocus()\"\n            />\n          </div>\n          @if (is12HourFormat && dateTimeInputValue) {\n            <div\n              class=\"po-datetimepicker-field-segment po-datetimepicker-field-period\"\n              [attr.data-value]=\"currentPeriod\"\n            >\n              <input\n                class=\"po-datetimepicker-segment-input po-datetimepicker-period-input\"\n                type=\"text\"\n                maxlength=\"2\"\n                readonly\n                [value]=\"currentPeriod\"\n                [disabled]=\"isDisabled\"\n                [attr.tabindex]=\"isDisabled || isReadonly ? -1 : 0\"\n                role=\"spinbutton\"\n                [attr.aria-label]=\"currentPeriod\"\n                (keydown)=\"onPeriodKeydown($event)\"\n                (click)=\"onPeriodClick($event)\"\n                (focus)=\"onInputFocus()\"\n                (blur)=\"onPeriodBlur()\"\n              />\n            </div>\n          }\n          @if (loading()) {\n            <po-loading-icon [p-size]=\"mapSizeToIcon(hostSize)\"></po-loading-icon>\n          } @else {\n            <div class=\"po-field-icon-container-right\">\n              @if (isClean && dateTimeInputValue && !isDisabled && !isReadonly) {\n                <po-clean\n                  #iconClean\n                  tabindex=\"0\"\n                  role=\"button\"\n                  [attr.aria-label]=\"literals.clean\"\n                  class=\"po-icon-input\"\n                  p-icon=\"ICON_FILL_CLEAR_CONTENT\"\n                  [p-element-ref]=\"inputEl\"\n                  [p-size]=\"hostSize\"\n                  (p-change-event)=\"clear()\"\n                  (keydown.enter)=\"clear(true); $event.preventDefault()\"\n                  (keydown.space)=\"clear(true); $event.preventDefault()\"\n                >\n                </po-clean>\n                <div class=\"po-button-vertical-divider\"></div>\n              }\n              <po-button\n                #iconCalendar\n                class=\"po-datetimepicker-button\"\n                [class.po-button-tertiary-danger]=\"getErrorPattern()\"\n                p-icon=\"ICON_CALENDAR_DOTS\"\n                p-kind=\"tertiary\"\n                [p-disabled]=\"isDisabled || isReadonly\"\n                [p-size]=\"hostSize\"\n                (p-click)=\"togglePicker(false)\"\n                (keydown)=\"eventOnButtonKeydown($event)\"\n              >\n              </po-button>\n            </div>\n          }\n        </div>\n      </div>\n      @if ((!this.label() && poHelperComponent()) || (!this.label() && poHelper.hideAdditionalHelp)) {\n        <po-helper\n          #helperEl\n          class=\"po-field-helper-button\"\n          [p-size]=\"hostSize\"\n          [p-helper]=\"poHelper.helperSettings\"\n          [p-disabled]=\"isDisabled\"\n          [p-append-in-body]=\"appendBox()\"\n        >\n        </po-helper>\n      }\n    </div>\n\n    @if (appendBox()) {\n      <ng-template\n        cdkConnectedOverlay\n        [cdkConnectedOverlayOrigin]=\"trigger\"\n        [cdkConnectedOverlayOpen]=\"true\"\n        [cdkConnectedOverlayDisableClose]=\"true\"\n      >\n        <ng-container *ngTemplateOutlet=\"sharedCalendarContent\"></ng-container>\n      </ng-template>\n    } @else {\n      <ng-container *ngTemplateOutlet=\"sharedCalendarContent\"></ng-container>\n    }\n  </div>\n\n  @if (!isReadonly) {\n    <po-field-container-bottom\n      [p-append-in-body]=\"appendBox()\"\n      [p-help]=\"help()\"\n      [p-disabled]=\"isDisabled\"\n      [p-error-pattern]=\"getErrorPattern()\"\n      [p-error-limit]=\"errorLimit()\"\n      [p-size]=\"hostSize\"\n    ></po-field-container-bottom>\n  }\n</po-field-container>\n\n<ng-template #sharedCalendarContent>\n  <div #dialogPicker [class.po-datetimepicker-popup-calendar]=\"!verifyMobile()\" tabindex=\"-1\" [hidden]=\"!visible\">\n    @if (verifyMobile()) {\n      <div class=\"po-datetimepicker-calendar-overlay\"></div>\n    }\n    <po-calendar\n      #calendar\n      [class.po-datetimepicker-calendar-mobile]=\"verifyMobile()\"\n      p-mode=\"date-time\"\n      [p-size]=\"hostSize\"\n      [p-locale]=\"locale\"\n      [p-format]=\"resolvedTimerFormat\"\n      [p-min-date]=\"resolvedMinDate\"\n      [p-max-date]=\"resolvedMaxDate\"\n      [p-max-time]=\"maxTime()\"\n      [p-min-time]=\"minTime()\"\n      [p-minute-interval]=\"minuteInterval()\"\n      [p-second-interval]=\"secondInterval()\"\n      [p-show-seconds]=\"showSeconds()\"\n      (p-change)=\"onDateChange($event)\"\n      (p-change-time)=\"onTimeChange($event)\"\n      (p-close)=\"onCalendarClose()\"\n      (p-change-month-year)=\"adjustCalendarPosition()\"\n      (p-timer-boundary-tab)=\"onTimerBoundaryTab($event)\"\n      (keydown)=\"eventOnCalendarKeydown($event)\"\n    ></po-calendar>\n  </div>\n</ng-template>\n" }]
         }], ctorParameters: () => [], propDecorators: { iconDatepicker: [{
                 type: ViewChild,
                 args: ['iconCalendar']
@@ -31300,9 +31231,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
             }], inputEl: [{
                 type: ViewChild,
                 args: ['inp', { read: ElementRef, static: true }]
-            }], iconClean: [{
-                type: ViewChild,
-                args: ['iconClean', { read: ElementRef }]
             }], dialogPicker: [{
                 type: ViewChild,
                 args: ['dialogPicker', { read: ElementRef, static: false }]
@@ -32243,6 +32171,15 @@ class PoTimepickerComponent extends PoTimepickerBaseComponent {
     get isPlaceholder() {
         return !this.hourDisplay && !this.minuteDisplay && (!this.showSeconds || !this.secondDisplay);
     }
+    get showSeparator() {
+        if (!this.placeholder?.trim()) {
+            return true;
+        }
+        if (this.hasValue()) {
+            return true;
+        }
+        return this.placeholder.includes(':');
+    }
     get customPlaceholderSegments() {
         if (!this.placeholder?.trim()) {
             return [];
@@ -33280,7 +33217,7 @@ class PoTimepickerComponent extends PoTimepickerBaseComponent {
                 multi: true
             },
             PoControlPositionService
-        ], viewQueries: [{ propertyName: "dialogPicker", first: true, predicate: ["dialogPicker"], descendants: true, read: ElementRef }, { propertyName: "iconTimepicker", first: true, predicate: ["iconTimepicker"], descendants: true }, { propertyName: "inputEl", first: true, predicate: ["inp"], descendants: true, read: ElementRef, static: true }, { propertyName: "minuteInputEl", first: true, predicate: ["minuteInput"], descendants: true, read: ElementRef }, { propertyName: "secondInputEl", first: true, predicate: ["secondInput"], descendants: true, read: ElementRef }, { propertyName: "timepickerFieldEl", first: true, predicate: ["timepickerField"], descendants: true, read: ElementRef }, { propertyName: "iconClean", first: true, predicate: ["iconClean"], descendants: true, read: ElementRef }, { propertyName: "helperEl", first: true, predicate: ["helperEl"], descendants: true, read: PoHelperComponent }, { propertyName: "timerComponent", first: true, predicate: ["timer"], descendants: true }, { propertyName: "periodInputEl", first: true, predicate: ["periodInput"], descendants: true, read: ElementRef }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "@let poHelper = setHelper(label);\n<po-field-container\n  [class.po-timepicker-container-disabled]=\"isDisabled\"\n  [p-disabled]=\"isDisabled\"\n  [p-id]=\"id\"\n  [p-label]=\"label\"\n  [p-optional]=\"optional\"\n  [p-required]=\"required\"\n  [p-show-required]=\"showRequired\"\n  [p-helper]=\"label ? poHelper.helperSettings : undefined\"\n  [p-show-helper]=\"label ? displayAdditionalHelp : undefined\"\n  [p-size]=\"size\"\n  [p-text-wrap]=\"labelTextWrap()\"\n  [p-compact-label]=\"compactLabel()\"\n>\n  <div #outerContainer>\n    <div cdkOverlayOrigin #trigger=\"cdkOverlayOrigin\" class=\"po-field-container-content\">\n      <div class=\"po-field-container-input\">\n        <div\n          #timepickerField\n          class=\"po-timepicker-field po-input\"\n          [class.po-input-icon-right]=\"clean && hasValue() && !isDisabled\"\n          [class.po-timepicker-field-disabled]=\"isDisabled\"\n          [class.po-timepicker-field-readonly]=\"readonly\"\n          [class.po-timepicker-field-focused]=\"isSegmentFocused\"\n          [class.po-timepicker-field-placeholder]=\"isPlaceholder\"\n          [attr.data-inactive-component]=\"isDisabled || readonly\"\n          [attr.p-size]=\"size\"\n          [attr.data-append-in-body]=\"appendBox\"\n          [attr.aria-label]=\"label || literals.field\"\n          role=\"group\"\n          (click)=\"onFieldClick($event)\"\n          (keydown)=\"onKeyDown($event)\"\n        >\n          <div class=\"po-timepicker-field-segment\" [attr.data-value]=\"hourDisplay || hourPlaceholder || '  '\">\n            <input\n              #inp\n              class=\"po-timepicker-segment-input\"\n              maxlength=\"2\"\n              type=\"text\"\n              inputmode=\"numeric\"\n              role=\"spinbutton\"\n              [attr.aria-label]=\"literals.hour\"\n              [attr.aria-valuenow]=\"hourDisplay ? +hourDisplay : null\"\n              [attr.aria-valuemin]=\"is12HourFormat ? 1 : 0\"\n              [attr.aria-valuemax]=\"is12HourFormat ? 12 : 23\"\n              [attr.aria-valuetext]=\"hourDisplay || null\"\n              [attr.data-focused-element]=\"!isDisabled\"\n              [attr.name]=\"name\"\n              [autocomplete]=\"autocomplete\"\n              [disabled]=\"isDisabled\"\n              [id]=\"id\"\n              [readonly]=\"readonly\"\n              [required]=\"required\"\n              [placeholder]=\"isDisabled ? '' : hourPlaceholder\"\n              (input)=\"onSegmentInput($event, 'hour')\"\n              (blur)=\"onSegmentBlur($event)\"\n              (focus)=\"onSegmentFocus()\"\n              (click)=\"eventOnClick($event)\"\n              (keydown)=\"onSegmentKeydown($event, 'hour')\"\n            />\n          </div>\n\n          <div class=\"po-timepicker-field-separator\">:</div>\n\n          <div class=\"po-timepicker-field-segment\" [attr.data-value]=\"minuteDisplay || minutePlaceholder || '  '\">\n            <input\n              #minuteInput\n              class=\"po-timepicker-segment-input\"\n              maxlength=\"2\"\n              type=\"text\"\n              inputmode=\"numeric\"\n              role=\"spinbutton\"\n              [attr.aria-label]=\"literals.minute\"\n              [attr.aria-valuenow]=\"minuteDisplay ? +minuteDisplay : null\"\n              aria-valuemin=\"0\"\n              aria-valuemax=\"59\"\n              [attr.aria-valuetext]=\"minuteDisplay || null\"\n              [disabled]=\"isDisabled\"\n              [readonly]=\"readonly\"\n              [placeholder]=\"isDisabled ? '' : minutePlaceholder\"\n              (input)=\"onSegmentInput($event, 'minute')\"\n              (blur)=\"onSegmentBlur($event)\"\n              (focus)=\"onSegmentFocus()\"\n              (click)=\"eventOnClick($event)\"\n              (keydown)=\"onSegmentKeydown($event, 'minute')\"\n            />\n          </div>\n\n          @if (showSeconds) {\n            <div class=\"po-timepicker-field-separator\">:</div>\n\n            <div class=\"po-timepicker-field-segment\" [attr.data-value]=\"secondDisplay || secondPlaceholder || '  '\">\n              <input\n                #secondInput\n                class=\"po-timepicker-segment-input\"\n                maxlength=\"2\"\n                type=\"text\"\n                inputmode=\"numeric\"\n                role=\"spinbutton\"\n                [attr.aria-label]=\"literals.second\"\n                [attr.aria-valuenow]=\"secondDisplay ? +secondDisplay : null\"\n                aria-valuemin=\"0\"\n                aria-valuemax=\"59\"\n                [attr.aria-valuetext]=\"secondDisplay || null\"\n                [disabled]=\"isDisabled\"\n                [readonly]=\"readonly\"\n                [placeholder]=\"isDisabled ? '' : secondPlaceholder\"\n                (input)=\"onSegmentInput($event, 'second')\"\n                (blur)=\"onSegmentBlur($event)\"\n                (focus)=\"onSegmentFocus()\"\n                (click)=\"eventOnClick($event)\"\n                (keydown)=\"onSegmentKeydown($event, 'second')\"\n              />\n            </div>\n          }\n\n          @if (is12HourFormat) {\n            <div\n              class=\"po-timepicker-field-segment po-timepicker-field-period\"\n              [attr.data-value]=\"periodDisplay || 'AM'\"\n            >\n              <input\n                #periodInput\n                class=\"po-timepicker-segment-input po-timepicker-period-input\"\n                maxlength=\"2\"\n                type=\"text\"\n                [value]=\"periodDisplay || 'AM'\"\n                [disabled]=\"isDisabled\"\n                [attr.tabindex]=\"isDisabled || readonly ? -1 : 0\"\n                role=\"spinbutton\"\n                [attr.aria-label]=\"periodDisplay || 'AM'\"\n                (keydown)=\"onPeriodSegmentKeydown($event)\"\n                (click)=\"onPeriodSegmentClick($event)\"\n                (blur)=\"onSegmentBlur($event)\"\n                (focus)=\"onSegmentFocus()\"\n              />\n            </div>\n          }\n\n          @if (loading) {\n            <po-loading-icon [p-size]=\"mapSizeToIcon(size)\"></po-loading-icon>\n          } @else {\n            <div class=\"po-field-icon-container-right\">\n              @if (clean && hasValue() && !isDisabled && !readonly) {\n                <po-clean\n                  #iconClean\n                  tabindex=\"0\"\n                  role=\"button\"\n                  [attr.aria-label]=\"literals.clean\"\n                  class=\"po-icon-input\"\n                  p-icon=\"ICON_FILL_CLEAR_CONTENT\"\n                  [p-element-ref]=\"cleanElementRef\"\n                  [p-size]=\"size\"\n                  (p-change-event)=\"clear()\"\n                  (keydown)=\"handleCleanKeyboardTab($event)\"\n                  (keydown.enter)=\"clearAndFocus(); $event.preventDefault()\"\n                  (keydown.space)=\"clearAndFocus(); $event.preventDefault()\"\n                >\n                </po-clean>\n                <div class=\"po-button-vertical-divider\"></div>\n              }\n              <po-button\n                #iconTimepicker\n                class=\"po-timepicker-button\"\n                [class.po-button-tertiary-danger]=\"getErrorPattern()\"\n                p-icon=\"ICON_CLOCK\"\n                p-kind=\"tertiary\"\n                [p-aria-label]=\"literals.open\"\n                [p-disabled]=\"isDisabled || readonly\"\n                [p-size]=\"size\"\n                (keydown)=\"onKeyPress($event)\"\n                (keydown.tab)=\"handleTimepickerButtonKeyboardTab($event)\"\n                (p-click)=\"togglePicker(false)\"\n              >\n              </po-button>\n            </div>\n          }\n        </div>\n      </div>\n      @if ((!this.label && poHelperComponent()) || (!this.label && poHelper.hideAdditionalHelp)) {\n        <po-helper\n          #helperEl\n          class=\"po-field-helper-button\"\n          [p-size]=\"size\"\n          [p-helper]=\"poHelper.helperSettings\"\n          [p-disabled]=\"isDisabled\"\n          [p-append-in-body]=\"appendBox\"\n        >\n        </po-helper>\n      }\n    </div>\n\n    @if (appendBox) {\n      <ng-template\n        cdkConnectedOverlay\n        [cdkConnectedOverlayOrigin]=\"trigger\"\n        [cdkConnectedOverlayOpen]=\"true\"\n        [cdkConnectedOverlayDisableClose]=\"true\"\n      >\n        <ng-container *ngTemplateOutlet=\"sharedTimerContent\"></ng-container>\n      </ng-template>\n    } @else {\n      <ng-container *ngTemplateOutlet=\"sharedTimerContent\"></ng-container>\n    }\n\n    <ng-template #sharedTimerContent>\n      @if (visible) {\n        <div #dialogPicker [class.po-timepicker-popup-timer]=\"!verifyMobile()\" tabindex=\"-1\">\n          @if (verifyMobile()) {\n            <div class=\"po-timepicker-timer-overlay\"></div>\n          }\n          <po-timer\n            #timer\n            [class.po-timepicker-timer-mobile]=\"verifyMobile()\"\n            [p-format]=\"format\"\n            [p-locale]=\"locale\"\n            [p-show-seconds]=\"showSeconds\"\n            [p-minute-interval]=\"minuteInterval\"\n            [p-second-interval]=\"secondInterval\"\n            [p-min-time]=\"minTime\"\n            [p-max-time]=\"maxTime\"\n            [p-size]=\"size\"\n            [p-value]=\"timeValue\"\n            (p-change)=\"timerSelected($event)\"\n            (p-boundary-tab)=\"onTimerBoundaryTab($event)\"\n            (keydown)=\"onTimerKeyDown($event)\"\n            (focusout)=\"onTimerFocusOut($event)\"\n          ></po-timer>\n        </div>\n      }\n    </ng-template>\n\n    <span class=\"po-sr-only\" aria-live=\"polite\" aria-atomic=\"true\">{{ ariaLiveMessage }}</span>\n  </div>\n\n  @if (!readonly) {\n    <po-field-container-bottom\n      [p-append-in-body]=\"appendBox\"\n      [p-help]=\"help\"\n      [p-disabled]=\"isDisabled\"\n      [p-error-pattern]=\"getErrorPattern()\"\n      [p-error-limit]=\"errorLimit\"\n      [p-size]=\"size\"\n    ></po-field-container-bottom>\n  }\n</po-field-container>\n", dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: PoFieldContainerBottomComponent, selector: "po-field-container-bottom", inputs: ["p-append-in-body", "p-disabled", "p-error-pattern", "p-error-limit", "p-help", "p-size", "p-helper", "p-show-helper"] }, { kind: "component", type: PoFieldContainerComponent, selector: "po-field-container", inputs: ["p-disabled", "p-id", "p-label", "p-help", "p-helper", "p-show-helper", "p-text-wrap", "p-optional", "p-required", "p-show-required", "p-size", "p-compact-label"] }, { kind: "directive", type: i2$1.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation", "cdkConnectedOverlayUsePopover", "cdkConnectedOverlayMatchWidth", "cdkConnectedOverlay"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i2$1.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "component", type: PoCleanComponent, selector: "po-clean" }, { kind: "component", type: PoLoadingIconComponent, selector: "po-loading-icon", inputs: ["p-neutral-color", "p-size", "p-in-overlay"] }, { kind: "component", type: PoTimerComponent, selector: "po-timer", outputs: ["p-boundary-tab"] }, { kind: "component", type: PoButtonComponent, selector: "po-button" }, { kind: "component", type: PoHelperComponent, selector: "po-helper" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        ], viewQueries: [{ propertyName: "dialogPicker", first: true, predicate: ["dialogPicker"], descendants: true, read: ElementRef }, { propertyName: "iconTimepicker", first: true, predicate: ["iconTimepicker"], descendants: true }, { propertyName: "inputEl", first: true, predicate: ["inp"], descendants: true, read: ElementRef, static: true }, { propertyName: "minuteInputEl", first: true, predicate: ["minuteInput"], descendants: true, read: ElementRef }, { propertyName: "secondInputEl", first: true, predicate: ["secondInput"], descendants: true, read: ElementRef }, { propertyName: "timepickerFieldEl", first: true, predicate: ["timepickerField"], descendants: true, read: ElementRef }, { propertyName: "iconClean", first: true, predicate: ["iconClean"], descendants: true, read: ElementRef }, { propertyName: "helperEl", first: true, predicate: ["helperEl"], descendants: true, read: PoHelperComponent }, { propertyName: "timerComponent", first: true, predicate: ["timer"], descendants: true }, { propertyName: "periodInputEl", first: true, predicate: ["periodInput"], descendants: true, read: ElementRef }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "@let poHelper = setHelper(label);\n<po-field-container\n  [class.po-timepicker-container-disabled]=\"isDisabled\"\n  [p-disabled]=\"isDisabled\"\n  [p-id]=\"id\"\n  [p-label]=\"label\"\n  [p-optional]=\"optional\"\n  [p-required]=\"required\"\n  [p-show-required]=\"showRequired\"\n  [p-helper]=\"label ? poHelper.helperSettings : undefined\"\n  [p-show-helper]=\"label ? displayAdditionalHelp : undefined\"\n  [p-size]=\"size\"\n  [p-text-wrap]=\"labelTextWrap()\"\n  [p-compact-label]=\"compactLabel()\"\n>\n  <div #outerContainer>\n    <div cdkOverlayOrigin #trigger=\"cdkOverlayOrigin\" class=\"po-field-container-content\">\n      <div class=\"po-field-container-input\">\n        <div\n          #timepickerField\n          class=\"po-timepicker-field po-input\"\n          [class.po-input-icon-right]=\"clean && hasValue() && !isDisabled\"\n          [class.po-timepicker-field-disabled]=\"isDisabled\"\n          [class.po-timepicker-field-readonly]=\"readonly\"\n          [class.po-timepicker-field-focused]=\"isSegmentFocused\"\n          [class.po-timepicker-field-placeholder]=\"isPlaceholder\"\n          [attr.data-inactive-component]=\"isDisabled || readonly\"\n          [attr.p-size]=\"size\"\n          [attr.data-append-in-body]=\"appendBox\"\n          [attr.aria-label]=\"label || literals.field\"\n          role=\"group\"\n          (click)=\"onFieldClick($event)\"\n          (keydown)=\"onKeyDown($event)\"\n        >\n          <div class=\"po-timepicker-field-segment\" [attr.data-value]=\"hourDisplay || hourPlaceholder || '  '\">\n            <input\n              #inp\n              class=\"po-timepicker-segment-input\"\n              maxlength=\"2\"\n              type=\"text\"\n              inputmode=\"numeric\"\n              role=\"spinbutton\"\n              [attr.aria-label]=\"literals.hour\"\n              [attr.aria-valuenow]=\"hourDisplay ? +hourDisplay : null\"\n              [attr.aria-valuemin]=\"is12HourFormat ? 1 : 0\"\n              [attr.aria-valuemax]=\"is12HourFormat ? 12 : 23\"\n              [attr.aria-valuetext]=\"hourDisplay || null\"\n              [attr.data-focused-element]=\"!isDisabled\"\n              [attr.name]=\"name\"\n              [autocomplete]=\"autocomplete\"\n              [disabled]=\"isDisabled\"\n              [id]=\"id\"\n              [readonly]=\"readonly\"\n              [required]=\"required\"\n              [placeholder]=\"isDisabled ? '' : hourPlaceholder\"\n              (input)=\"onSegmentInput($event, 'hour')\"\n              (blur)=\"onSegmentBlur($event)\"\n              (focus)=\"onSegmentFocus()\"\n              (click)=\"eventOnClick($event)\"\n              (keydown)=\"onSegmentKeydown($event, 'hour')\"\n            />\n          </div>\n\n          <div class=\"po-timepicker-field-separator\" [class.po-timepicker-field-separator-hidden]=\"!showSeparator\">\n            :\n          </div>\n\n          <div class=\"po-timepicker-field-segment\" [attr.data-value]=\"minuteDisplay || minutePlaceholder || '  '\">\n            <input\n              #minuteInput\n              class=\"po-timepicker-segment-input\"\n              maxlength=\"2\"\n              type=\"text\"\n              inputmode=\"numeric\"\n              role=\"spinbutton\"\n              [attr.aria-label]=\"literals.minute\"\n              [attr.aria-valuenow]=\"minuteDisplay ? +minuteDisplay : null\"\n              aria-valuemin=\"0\"\n              aria-valuemax=\"59\"\n              [attr.aria-valuetext]=\"minuteDisplay || null\"\n              [disabled]=\"isDisabled\"\n              [readonly]=\"readonly\"\n              [placeholder]=\"isDisabled ? '' : minutePlaceholder\"\n              (input)=\"onSegmentInput($event, 'minute')\"\n              (blur)=\"onSegmentBlur($event)\"\n              (focus)=\"onSegmentFocus()\"\n              (click)=\"eventOnClick($event)\"\n              (keydown)=\"onSegmentKeydown($event, 'minute')\"\n            />\n          </div>\n\n          @if (showSeconds) {\n            <div class=\"po-timepicker-field-separator\" [class.po-timepicker-field-separator-hidden]=\"!showSeparator\">\n              :\n            </div>\n\n            <div class=\"po-timepicker-field-segment\" [attr.data-value]=\"secondDisplay || secondPlaceholder || '  '\">\n              <input\n                #secondInput\n                class=\"po-timepicker-segment-input\"\n                maxlength=\"2\"\n                type=\"text\"\n                inputmode=\"numeric\"\n                role=\"spinbutton\"\n                [attr.aria-label]=\"literals.second\"\n                [attr.aria-valuenow]=\"secondDisplay ? +secondDisplay : null\"\n                aria-valuemin=\"0\"\n                aria-valuemax=\"59\"\n                [attr.aria-valuetext]=\"secondDisplay || null\"\n                [disabled]=\"isDisabled\"\n                [readonly]=\"readonly\"\n                [placeholder]=\"isDisabled ? '' : secondPlaceholder\"\n                (input)=\"onSegmentInput($event, 'second')\"\n                (blur)=\"onSegmentBlur($event)\"\n                (focus)=\"onSegmentFocus()\"\n                (click)=\"eventOnClick($event)\"\n                (keydown)=\"onSegmentKeydown($event, 'second')\"\n              />\n            </div>\n          }\n\n          @if (is12HourFormat && hasValue()) {\n            <div\n              class=\"po-timepicker-field-segment po-timepicker-field-period\"\n              [attr.data-value]=\"periodDisplay || 'AM'\"\n            >\n              <input\n                #periodInput\n                class=\"po-timepicker-segment-input po-timepicker-period-input\"\n                maxlength=\"2\"\n                type=\"text\"\n                [value]=\"periodDisplay || 'AM'\"\n                [disabled]=\"isDisabled\"\n                [attr.tabindex]=\"isDisabled || readonly ? -1 : 0\"\n                role=\"spinbutton\"\n                [attr.aria-label]=\"periodDisplay || 'AM'\"\n                (keydown)=\"onPeriodSegmentKeydown($event)\"\n                (click)=\"onPeriodSegmentClick($event)\"\n                (blur)=\"onSegmentBlur($event)\"\n                (focus)=\"onSegmentFocus()\"\n              />\n            </div>\n          }\n\n          @if (loading) {\n            <po-loading-icon [p-size]=\"mapSizeToIcon(size)\"></po-loading-icon>\n          } @else {\n            <div class=\"po-field-icon-container-right\">\n              @if (clean && hasValue() && !isDisabled && !readonly) {\n                <po-clean\n                  #iconClean\n                  tabindex=\"0\"\n                  role=\"button\"\n                  [attr.aria-label]=\"literals.clean\"\n                  class=\"po-icon-input\"\n                  p-icon=\"ICON_FILL_CLEAR_CONTENT\"\n                  [p-element-ref]=\"cleanElementRef\"\n                  [p-size]=\"size\"\n                  (p-change-event)=\"clear()\"\n                  (keydown)=\"handleCleanKeyboardTab($event)\"\n                  (keydown.enter)=\"clearAndFocus(); $event.preventDefault()\"\n                  (keydown.space)=\"clearAndFocus(); $event.preventDefault()\"\n                >\n                </po-clean>\n                <div class=\"po-button-vertical-divider\"></div>\n              }\n              <po-button\n                #iconTimepicker\n                class=\"po-timepicker-button\"\n                [class.po-button-tertiary-danger]=\"getErrorPattern()\"\n                p-icon=\"ICON_CLOCK\"\n                p-kind=\"tertiary\"\n                [p-aria-label]=\"literals.open\"\n                [p-disabled]=\"isDisabled || readonly\"\n                [p-size]=\"size\"\n                (keydown)=\"onKeyPress($event)\"\n                (keydown.tab)=\"handleTimepickerButtonKeyboardTab($event)\"\n                (p-click)=\"togglePicker(false)\"\n              >\n              </po-button>\n            </div>\n          }\n        </div>\n      </div>\n      @if ((!this.label && poHelperComponent()) || (!this.label && poHelper.hideAdditionalHelp)) {\n        <po-helper\n          #helperEl\n          class=\"po-field-helper-button\"\n          [p-size]=\"size\"\n          [p-helper]=\"poHelper.helperSettings\"\n          [p-disabled]=\"isDisabled\"\n          [p-append-in-body]=\"appendBox\"\n        >\n        </po-helper>\n      }\n    </div>\n\n    @if (appendBox) {\n      <ng-template\n        cdkConnectedOverlay\n        [cdkConnectedOverlayOrigin]=\"trigger\"\n        [cdkConnectedOverlayOpen]=\"true\"\n        [cdkConnectedOverlayDisableClose]=\"true\"\n      >\n        <ng-container *ngTemplateOutlet=\"sharedTimerContent\"></ng-container>\n      </ng-template>\n    } @else {\n      <ng-container *ngTemplateOutlet=\"sharedTimerContent\"></ng-container>\n    }\n\n    <ng-template #sharedTimerContent>\n      @if (visible) {\n        <div #dialogPicker [class.po-timepicker-popup-timer]=\"!verifyMobile()\" tabindex=\"-1\">\n          @if (verifyMobile()) {\n            <div class=\"po-timepicker-timer-overlay\"></div>\n          }\n          <po-timer\n            #timer\n            [class.po-timepicker-timer-mobile]=\"verifyMobile()\"\n            [p-format]=\"format\"\n            [p-locale]=\"locale\"\n            [p-show-seconds]=\"showSeconds\"\n            [p-minute-interval]=\"minuteInterval\"\n            [p-second-interval]=\"secondInterval\"\n            [p-min-time]=\"minTime\"\n            [p-max-time]=\"maxTime\"\n            [p-size]=\"size\"\n            [p-value]=\"timeValue\"\n            (p-change)=\"timerSelected($event)\"\n            (p-boundary-tab)=\"onTimerBoundaryTab($event)\"\n            (keydown)=\"onTimerKeyDown($event)\"\n            (focusout)=\"onTimerFocusOut($event)\"\n          ></po-timer>\n        </div>\n      }\n    </ng-template>\n\n    <span class=\"po-sr-only\" aria-live=\"polite\" aria-atomic=\"true\">{{ ariaLiveMessage }}</span>\n  </div>\n\n  @if (!readonly) {\n    <po-field-container-bottom\n      [p-append-in-body]=\"appendBox\"\n      [p-help]=\"help\"\n      [p-disabled]=\"isDisabled\"\n      [p-error-pattern]=\"getErrorPattern()\"\n      [p-error-limit]=\"errorLimit\"\n      [p-size]=\"size\"\n    ></po-field-container-bottom>\n  }\n</po-field-container>\n", dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: PoFieldContainerBottomComponent, selector: "po-field-container-bottom", inputs: ["p-append-in-body", "p-disabled", "p-error-pattern", "p-error-limit", "p-help", "p-size", "p-helper", "p-show-helper"] }, { kind: "component", type: PoFieldContainerComponent, selector: "po-field-container", inputs: ["p-disabled", "p-id", "p-label", "p-help", "p-helper", "p-show-helper", "p-text-wrap", "p-optional", "p-required", "p-show-required", "p-size", "p-compact-label"] }, { kind: "directive", type: i2$1.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation", "cdkConnectedOverlayUsePopover", "cdkConnectedOverlayMatchWidth", "cdkConnectedOverlay"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i2$1.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "component", type: PoCleanComponent, selector: "po-clean" }, { kind: "component", type: PoLoadingIconComponent, selector: "po-loading-icon", inputs: ["p-neutral-color", "p-size", "p-in-overlay"] }, { kind: "component", type: PoTimerComponent, selector: "po-timer", outputs: ["p-boundary-tab"] }, { kind: "component", type: PoButtonComponent, selector: "po-button" }, { kind: "component", type: PoHelperComponent, selector: "po-helper" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: PoTimepickerComponent, decorators: [{
             type: Component,
@@ -33296,7 +33233,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
                             multi: true
                         },
                         PoControlPositionService
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "@let poHelper = setHelper(label);\n<po-field-container\n  [class.po-timepicker-container-disabled]=\"isDisabled\"\n  [p-disabled]=\"isDisabled\"\n  [p-id]=\"id\"\n  [p-label]=\"label\"\n  [p-optional]=\"optional\"\n  [p-required]=\"required\"\n  [p-show-required]=\"showRequired\"\n  [p-helper]=\"label ? poHelper.helperSettings : undefined\"\n  [p-show-helper]=\"label ? displayAdditionalHelp : undefined\"\n  [p-size]=\"size\"\n  [p-text-wrap]=\"labelTextWrap()\"\n  [p-compact-label]=\"compactLabel()\"\n>\n  <div #outerContainer>\n    <div cdkOverlayOrigin #trigger=\"cdkOverlayOrigin\" class=\"po-field-container-content\">\n      <div class=\"po-field-container-input\">\n        <div\n          #timepickerField\n          class=\"po-timepicker-field po-input\"\n          [class.po-input-icon-right]=\"clean && hasValue() && !isDisabled\"\n          [class.po-timepicker-field-disabled]=\"isDisabled\"\n          [class.po-timepicker-field-readonly]=\"readonly\"\n          [class.po-timepicker-field-focused]=\"isSegmentFocused\"\n          [class.po-timepicker-field-placeholder]=\"isPlaceholder\"\n          [attr.data-inactive-component]=\"isDisabled || readonly\"\n          [attr.p-size]=\"size\"\n          [attr.data-append-in-body]=\"appendBox\"\n          [attr.aria-label]=\"label || literals.field\"\n          role=\"group\"\n          (click)=\"onFieldClick($event)\"\n          (keydown)=\"onKeyDown($event)\"\n        >\n          <div class=\"po-timepicker-field-segment\" [attr.data-value]=\"hourDisplay || hourPlaceholder || '  '\">\n            <input\n              #inp\n              class=\"po-timepicker-segment-input\"\n              maxlength=\"2\"\n              type=\"text\"\n              inputmode=\"numeric\"\n              role=\"spinbutton\"\n              [attr.aria-label]=\"literals.hour\"\n              [attr.aria-valuenow]=\"hourDisplay ? +hourDisplay : null\"\n              [attr.aria-valuemin]=\"is12HourFormat ? 1 : 0\"\n              [attr.aria-valuemax]=\"is12HourFormat ? 12 : 23\"\n              [attr.aria-valuetext]=\"hourDisplay || null\"\n              [attr.data-focused-element]=\"!isDisabled\"\n              [attr.name]=\"name\"\n              [autocomplete]=\"autocomplete\"\n              [disabled]=\"isDisabled\"\n              [id]=\"id\"\n              [readonly]=\"readonly\"\n              [required]=\"required\"\n              [placeholder]=\"isDisabled ? '' : hourPlaceholder\"\n              (input)=\"onSegmentInput($event, 'hour')\"\n              (blur)=\"onSegmentBlur($event)\"\n              (focus)=\"onSegmentFocus()\"\n              (click)=\"eventOnClick($event)\"\n              (keydown)=\"onSegmentKeydown($event, 'hour')\"\n            />\n          </div>\n\n          <div class=\"po-timepicker-field-separator\">:</div>\n\n          <div class=\"po-timepicker-field-segment\" [attr.data-value]=\"minuteDisplay || minutePlaceholder || '  '\">\n            <input\n              #minuteInput\n              class=\"po-timepicker-segment-input\"\n              maxlength=\"2\"\n              type=\"text\"\n              inputmode=\"numeric\"\n              role=\"spinbutton\"\n              [attr.aria-label]=\"literals.minute\"\n              [attr.aria-valuenow]=\"minuteDisplay ? +minuteDisplay : null\"\n              aria-valuemin=\"0\"\n              aria-valuemax=\"59\"\n              [attr.aria-valuetext]=\"minuteDisplay || null\"\n              [disabled]=\"isDisabled\"\n              [readonly]=\"readonly\"\n              [placeholder]=\"isDisabled ? '' : minutePlaceholder\"\n              (input)=\"onSegmentInput($event, 'minute')\"\n              (blur)=\"onSegmentBlur($event)\"\n              (focus)=\"onSegmentFocus()\"\n              (click)=\"eventOnClick($event)\"\n              (keydown)=\"onSegmentKeydown($event, 'minute')\"\n            />\n          </div>\n\n          @if (showSeconds) {\n            <div class=\"po-timepicker-field-separator\">:</div>\n\n            <div class=\"po-timepicker-field-segment\" [attr.data-value]=\"secondDisplay || secondPlaceholder || '  '\">\n              <input\n                #secondInput\n                class=\"po-timepicker-segment-input\"\n                maxlength=\"2\"\n                type=\"text\"\n                inputmode=\"numeric\"\n                role=\"spinbutton\"\n                [attr.aria-label]=\"literals.second\"\n                [attr.aria-valuenow]=\"secondDisplay ? +secondDisplay : null\"\n                aria-valuemin=\"0\"\n                aria-valuemax=\"59\"\n                [attr.aria-valuetext]=\"secondDisplay || null\"\n                [disabled]=\"isDisabled\"\n                [readonly]=\"readonly\"\n                [placeholder]=\"isDisabled ? '' : secondPlaceholder\"\n                (input)=\"onSegmentInput($event, 'second')\"\n                (blur)=\"onSegmentBlur($event)\"\n                (focus)=\"onSegmentFocus()\"\n                (click)=\"eventOnClick($event)\"\n                (keydown)=\"onSegmentKeydown($event, 'second')\"\n              />\n            </div>\n          }\n\n          @if (is12HourFormat) {\n            <div\n              class=\"po-timepicker-field-segment po-timepicker-field-period\"\n              [attr.data-value]=\"periodDisplay || 'AM'\"\n            >\n              <input\n                #periodInput\n                class=\"po-timepicker-segment-input po-timepicker-period-input\"\n                maxlength=\"2\"\n                type=\"text\"\n                [value]=\"periodDisplay || 'AM'\"\n                [disabled]=\"isDisabled\"\n                [attr.tabindex]=\"isDisabled || readonly ? -1 : 0\"\n                role=\"spinbutton\"\n                [attr.aria-label]=\"periodDisplay || 'AM'\"\n                (keydown)=\"onPeriodSegmentKeydown($event)\"\n                (click)=\"onPeriodSegmentClick($event)\"\n                (blur)=\"onSegmentBlur($event)\"\n                (focus)=\"onSegmentFocus()\"\n              />\n            </div>\n          }\n\n          @if (loading) {\n            <po-loading-icon [p-size]=\"mapSizeToIcon(size)\"></po-loading-icon>\n          } @else {\n            <div class=\"po-field-icon-container-right\">\n              @if (clean && hasValue() && !isDisabled && !readonly) {\n                <po-clean\n                  #iconClean\n                  tabindex=\"0\"\n                  role=\"button\"\n                  [attr.aria-label]=\"literals.clean\"\n                  class=\"po-icon-input\"\n                  p-icon=\"ICON_FILL_CLEAR_CONTENT\"\n                  [p-element-ref]=\"cleanElementRef\"\n                  [p-size]=\"size\"\n                  (p-change-event)=\"clear()\"\n                  (keydown)=\"handleCleanKeyboardTab($event)\"\n                  (keydown.enter)=\"clearAndFocus(); $event.preventDefault()\"\n                  (keydown.space)=\"clearAndFocus(); $event.preventDefault()\"\n                >\n                </po-clean>\n                <div class=\"po-button-vertical-divider\"></div>\n              }\n              <po-button\n                #iconTimepicker\n                class=\"po-timepicker-button\"\n                [class.po-button-tertiary-danger]=\"getErrorPattern()\"\n                p-icon=\"ICON_CLOCK\"\n                p-kind=\"tertiary\"\n                [p-aria-label]=\"literals.open\"\n                [p-disabled]=\"isDisabled || readonly\"\n                [p-size]=\"size\"\n                (keydown)=\"onKeyPress($event)\"\n                (keydown.tab)=\"handleTimepickerButtonKeyboardTab($event)\"\n                (p-click)=\"togglePicker(false)\"\n              >\n              </po-button>\n            </div>\n          }\n        </div>\n      </div>\n      @if ((!this.label && poHelperComponent()) || (!this.label && poHelper.hideAdditionalHelp)) {\n        <po-helper\n          #helperEl\n          class=\"po-field-helper-button\"\n          [p-size]=\"size\"\n          [p-helper]=\"poHelper.helperSettings\"\n          [p-disabled]=\"isDisabled\"\n          [p-append-in-body]=\"appendBox\"\n        >\n        </po-helper>\n      }\n    </div>\n\n    @if (appendBox) {\n      <ng-template\n        cdkConnectedOverlay\n        [cdkConnectedOverlayOrigin]=\"trigger\"\n        [cdkConnectedOverlayOpen]=\"true\"\n        [cdkConnectedOverlayDisableClose]=\"true\"\n      >\n        <ng-container *ngTemplateOutlet=\"sharedTimerContent\"></ng-container>\n      </ng-template>\n    } @else {\n      <ng-container *ngTemplateOutlet=\"sharedTimerContent\"></ng-container>\n    }\n\n    <ng-template #sharedTimerContent>\n      @if (visible) {\n        <div #dialogPicker [class.po-timepicker-popup-timer]=\"!verifyMobile()\" tabindex=\"-1\">\n          @if (verifyMobile()) {\n            <div class=\"po-timepicker-timer-overlay\"></div>\n          }\n          <po-timer\n            #timer\n            [class.po-timepicker-timer-mobile]=\"verifyMobile()\"\n            [p-format]=\"format\"\n            [p-locale]=\"locale\"\n            [p-show-seconds]=\"showSeconds\"\n            [p-minute-interval]=\"minuteInterval\"\n            [p-second-interval]=\"secondInterval\"\n            [p-min-time]=\"minTime\"\n            [p-max-time]=\"maxTime\"\n            [p-size]=\"size\"\n            [p-value]=\"timeValue\"\n            (p-change)=\"timerSelected($event)\"\n            (p-boundary-tab)=\"onTimerBoundaryTab($event)\"\n            (keydown)=\"onTimerKeyDown($event)\"\n            (focusout)=\"onTimerFocusOut($event)\"\n          ></po-timer>\n        </div>\n      }\n    </ng-template>\n\n    <span class=\"po-sr-only\" aria-live=\"polite\" aria-atomic=\"true\">{{ ariaLiveMessage }}</span>\n  </div>\n\n  @if (!readonly) {\n    <po-field-container-bottom\n      [p-append-in-body]=\"appendBox\"\n      [p-help]=\"help\"\n      [p-disabled]=\"isDisabled\"\n      [p-error-pattern]=\"getErrorPattern()\"\n      [p-error-limit]=\"errorLimit\"\n      [p-size]=\"size\"\n    ></po-field-container-bottom>\n  }\n</po-field-container>\n" }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "@let poHelper = setHelper(label);\n<po-field-container\n  [class.po-timepicker-container-disabled]=\"isDisabled\"\n  [p-disabled]=\"isDisabled\"\n  [p-id]=\"id\"\n  [p-label]=\"label\"\n  [p-optional]=\"optional\"\n  [p-required]=\"required\"\n  [p-show-required]=\"showRequired\"\n  [p-helper]=\"label ? poHelper.helperSettings : undefined\"\n  [p-show-helper]=\"label ? displayAdditionalHelp : undefined\"\n  [p-size]=\"size\"\n  [p-text-wrap]=\"labelTextWrap()\"\n  [p-compact-label]=\"compactLabel()\"\n>\n  <div #outerContainer>\n    <div cdkOverlayOrigin #trigger=\"cdkOverlayOrigin\" class=\"po-field-container-content\">\n      <div class=\"po-field-container-input\">\n        <div\n          #timepickerField\n          class=\"po-timepicker-field po-input\"\n          [class.po-input-icon-right]=\"clean && hasValue() && !isDisabled\"\n          [class.po-timepicker-field-disabled]=\"isDisabled\"\n          [class.po-timepicker-field-readonly]=\"readonly\"\n          [class.po-timepicker-field-focused]=\"isSegmentFocused\"\n          [class.po-timepicker-field-placeholder]=\"isPlaceholder\"\n          [attr.data-inactive-component]=\"isDisabled || readonly\"\n          [attr.p-size]=\"size\"\n          [attr.data-append-in-body]=\"appendBox\"\n          [attr.aria-label]=\"label || literals.field\"\n          role=\"group\"\n          (click)=\"onFieldClick($event)\"\n          (keydown)=\"onKeyDown($event)\"\n        >\n          <div class=\"po-timepicker-field-segment\" [attr.data-value]=\"hourDisplay || hourPlaceholder || '  '\">\n            <input\n              #inp\n              class=\"po-timepicker-segment-input\"\n              maxlength=\"2\"\n              type=\"text\"\n              inputmode=\"numeric\"\n              role=\"spinbutton\"\n              [attr.aria-label]=\"literals.hour\"\n              [attr.aria-valuenow]=\"hourDisplay ? +hourDisplay : null\"\n              [attr.aria-valuemin]=\"is12HourFormat ? 1 : 0\"\n              [attr.aria-valuemax]=\"is12HourFormat ? 12 : 23\"\n              [attr.aria-valuetext]=\"hourDisplay || null\"\n              [attr.data-focused-element]=\"!isDisabled\"\n              [attr.name]=\"name\"\n              [autocomplete]=\"autocomplete\"\n              [disabled]=\"isDisabled\"\n              [id]=\"id\"\n              [readonly]=\"readonly\"\n              [required]=\"required\"\n              [placeholder]=\"isDisabled ? '' : hourPlaceholder\"\n              (input)=\"onSegmentInput($event, 'hour')\"\n              (blur)=\"onSegmentBlur($event)\"\n              (focus)=\"onSegmentFocus()\"\n              (click)=\"eventOnClick($event)\"\n              (keydown)=\"onSegmentKeydown($event, 'hour')\"\n            />\n          </div>\n\n          <div class=\"po-timepicker-field-separator\" [class.po-timepicker-field-separator-hidden]=\"!showSeparator\">\n            :\n          </div>\n\n          <div class=\"po-timepicker-field-segment\" [attr.data-value]=\"minuteDisplay || minutePlaceholder || '  '\">\n            <input\n              #minuteInput\n              class=\"po-timepicker-segment-input\"\n              maxlength=\"2\"\n              type=\"text\"\n              inputmode=\"numeric\"\n              role=\"spinbutton\"\n              [attr.aria-label]=\"literals.minute\"\n              [attr.aria-valuenow]=\"minuteDisplay ? +minuteDisplay : null\"\n              aria-valuemin=\"0\"\n              aria-valuemax=\"59\"\n              [attr.aria-valuetext]=\"minuteDisplay || null\"\n              [disabled]=\"isDisabled\"\n              [readonly]=\"readonly\"\n              [placeholder]=\"isDisabled ? '' : minutePlaceholder\"\n              (input)=\"onSegmentInput($event, 'minute')\"\n              (blur)=\"onSegmentBlur($event)\"\n              (focus)=\"onSegmentFocus()\"\n              (click)=\"eventOnClick($event)\"\n              (keydown)=\"onSegmentKeydown($event, 'minute')\"\n            />\n          </div>\n\n          @if (showSeconds) {\n            <div class=\"po-timepicker-field-separator\" [class.po-timepicker-field-separator-hidden]=\"!showSeparator\">\n              :\n            </div>\n\n            <div class=\"po-timepicker-field-segment\" [attr.data-value]=\"secondDisplay || secondPlaceholder || '  '\">\n              <input\n                #secondInput\n                class=\"po-timepicker-segment-input\"\n                maxlength=\"2\"\n                type=\"text\"\n                inputmode=\"numeric\"\n                role=\"spinbutton\"\n                [attr.aria-label]=\"literals.second\"\n                [attr.aria-valuenow]=\"secondDisplay ? +secondDisplay : null\"\n                aria-valuemin=\"0\"\n                aria-valuemax=\"59\"\n                [attr.aria-valuetext]=\"secondDisplay || null\"\n                [disabled]=\"isDisabled\"\n                [readonly]=\"readonly\"\n                [placeholder]=\"isDisabled ? '' : secondPlaceholder\"\n                (input)=\"onSegmentInput($event, 'second')\"\n                (blur)=\"onSegmentBlur($event)\"\n                (focus)=\"onSegmentFocus()\"\n                (click)=\"eventOnClick($event)\"\n                (keydown)=\"onSegmentKeydown($event, 'second')\"\n              />\n            </div>\n          }\n\n          @if (is12HourFormat && hasValue()) {\n            <div\n              class=\"po-timepicker-field-segment po-timepicker-field-period\"\n              [attr.data-value]=\"periodDisplay || 'AM'\"\n            >\n              <input\n                #periodInput\n                class=\"po-timepicker-segment-input po-timepicker-period-input\"\n                maxlength=\"2\"\n                type=\"text\"\n                [value]=\"periodDisplay || 'AM'\"\n                [disabled]=\"isDisabled\"\n                [attr.tabindex]=\"isDisabled || readonly ? -1 : 0\"\n                role=\"spinbutton\"\n                [attr.aria-label]=\"periodDisplay || 'AM'\"\n                (keydown)=\"onPeriodSegmentKeydown($event)\"\n                (click)=\"onPeriodSegmentClick($event)\"\n                (blur)=\"onSegmentBlur($event)\"\n                (focus)=\"onSegmentFocus()\"\n              />\n            </div>\n          }\n\n          @if (loading) {\n            <po-loading-icon [p-size]=\"mapSizeToIcon(size)\"></po-loading-icon>\n          } @else {\n            <div class=\"po-field-icon-container-right\">\n              @if (clean && hasValue() && !isDisabled && !readonly) {\n                <po-clean\n                  #iconClean\n                  tabindex=\"0\"\n                  role=\"button\"\n                  [attr.aria-label]=\"literals.clean\"\n                  class=\"po-icon-input\"\n                  p-icon=\"ICON_FILL_CLEAR_CONTENT\"\n                  [p-element-ref]=\"cleanElementRef\"\n                  [p-size]=\"size\"\n                  (p-change-event)=\"clear()\"\n                  (keydown)=\"handleCleanKeyboardTab($event)\"\n                  (keydown.enter)=\"clearAndFocus(); $event.preventDefault()\"\n                  (keydown.space)=\"clearAndFocus(); $event.preventDefault()\"\n                >\n                </po-clean>\n                <div class=\"po-button-vertical-divider\"></div>\n              }\n              <po-button\n                #iconTimepicker\n                class=\"po-timepicker-button\"\n                [class.po-button-tertiary-danger]=\"getErrorPattern()\"\n                p-icon=\"ICON_CLOCK\"\n                p-kind=\"tertiary\"\n                [p-aria-label]=\"literals.open\"\n                [p-disabled]=\"isDisabled || readonly\"\n                [p-size]=\"size\"\n                (keydown)=\"onKeyPress($event)\"\n                (keydown.tab)=\"handleTimepickerButtonKeyboardTab($event)\"\n                (p-click)=\"togglePicker(false)\"\n              >\n              </po-button>\n            </div>\n          }\n        </div>\n      </div>\n      @if ((!this.label && poHelperComponent()) || (!this.label && poHelper.hideAdditionalHelp)) {\n        <po-helper\n          #helperEl\n          class=\"po-field-helper-button\"\n          [p-size]=\"size\"\n          [p-helper]=\"poHelper.helperSettings\"\n          [p-disabled]=\"isDisabled\"\n          [p-append-in-body]=\"appendBox\"\n        >\n        </po-helper>\n      }\n    </div>\n\n    @if (appendBox) {\n      <ng-template\n        cdkConnectedOverlay\n        [cdkConnectedOverlayOrigin]=\"trigger\"\n        [cdkConnectedOverlayOpen]=\"true\"\n        [cdkConnectedOverlayDisableClose]=\"true\"\n      >\n        <ng-container *ngTemplateOutlet=\"sharedTimerContent\"></ng-container>\n      </ng-template>\n    } @else {\n      <ng-container *ngTemplateOutlet=\"sharedTimerContent\"></ng-container>\n    }\n\n    <ng-template #sharedTimerContent>\n      @if (visible) {\n        <div #dialogPicker [class.po-timepicker-popup-timer]=\"!verifyMobile()\" tabindex=\"-1\">\n          @if (verifyMobile()) {\n            <div class=\"po-timepicker-timer-overlay\"></div>\n          }\n          <po-timer\n            #timer\n            [class.po-timepicker-timer-mobile]=\"verifyMobile()\"\n            [p-format]=\"format\"\n            [p-locale]=\"locale\"\n            [p-show-seconds]=\"showSeconds\"\n            [p-minute-interval]=\"minuteInterval\"\n            [p-second-interval]=\"secondInterval\"\n            [p-min-time]=\"minTime\"\n            [p-max-time]=\"maxTime\"\n            [p-size]=\"size\"\n            [p-value]=\"timeValue\"\n            (p-change)=\"timerSelected($event)\"\n            (p-boundary-tab)=\"onTimerBoundaryTab($event)\"\n            (keydown)=\"onTimerKeyDown($event)\"\n            (focusout)=\"onTimerFocusOut($event)\"\n          ></po-timer>\n        </div>\n      }\n    </ng-template>\n\n    <span class=\"po-sr-only\" aria-live=\"polite\" aria-atomic=\"true\">{{ ariaLiveMessage }}</span>\n  </div>\n\n  @if (!readonly) {\n    <po-field-container-bottom\n      [p-append-in-body]=\"appendBox\"\n      [p-help]=\"help\"\n      [p-disabled]=\"isDisabled\"\n      [p-error-pattern]=\"getErrorPattern()\"\n      [p-error-limit]=\"errorLimit\"\n      [p-size]=\"size\"\n    ></po-field-container-bottom>\n  }\n</po-field-container>\n" }]
         }], ctorParameters: () => [], propDecorators: { dialogPicker: [{
                 type: ViewChild,
                 args: ['dialogPicker', { read: ElementRef, static: false }]
@@ -41335,11 +41272,11 @@ class PoTableDetailComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: PoTableDetailComponent, deps: [{ token: i1.DecimalPipe }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: PoTableDetailComponent, isStandalone: false, selector: "po-table-detail", inputs: { componentsSize: ["p-components-size", "componentsSize"], items: ["p-items", "items"], parentRow: ["p-parent-row", "parentRow"], isSelectable: ["p-selectable", "isSelectable"], detail: ["p-detail", "detail"] }, outputs: { selectRow: "p-select-row" }, ngImport: i0, template: "<table class=\"po-table-master-detail\">\n  @if (typeHeaderTop) {\n    <thead>\n      <tr>\n        @if (isSelectable) {\n          <th class=\"po-table-header po-table-column-selectable\"></th>\n        }\n        <th class=\"po-table-header po-table-header-column po-table-header-master-detail\"></th>\n        @for (detail of detail.columns; track detail) {\n          <th class=\"po-table-header po-table-header-ellipsis\">\n            <div\n              class=\"po-table-header-flex\"\n              [class.po-table-header-flex-right]=\"detail.type === 'currency' || detail.type === 'number'\"\n            >\n              {{ getColumnTitleLabel(detail) }}\n            </div>\n          </th>\n        }\n      </tr>\n    </thead>\n  }\n  <tbody>\n    @for (item of items; track item) {\n      <tr class=\"po-table-detail-row\" [class.po-table-row-active]=\"item.$selected && isSelectable\">\n        @if (isSelectable) {\n          <td class=\"po-table-column-master-detail-space-checkbox\"></td>\n          <td class=\"po-table-column po-table-column-selectable\">\n            <po-checkbox\n              name=\"checkbox\"\n              (p-change)=\"onSelectRow(item)\"\n              [p-checkboxValue]=\"item.$selected\"\n              [p-size]=\"componentsSize\"\n            ></po-checkbox>\n          </td>\n        } @else {\n          <td class=\"po-table-column-master-detail-space\"></td>\n        }\n        @for (detail of detailColumns; track detail) {\n          <td\n            class=\"po-table-column-master-detail po-table-master-detail-label\"\n            (click)=\"isSelectable ? onSelectRow(item) : 'javascript:;'\"\n            [class.po-table-column-right]=\"typeHeaderTop && (detail.type === 'currency' || detail.type === 'number')\"\n          >\n            @if (typeHeaderInline) {\n              <strong> {{ getColumnTitleLabel(detail) }}: </strong>\n            }\n            @switch (detail.type) {\n              @case ('currency') {\n                <span>{{ getDetailData(item, detail) | currency: detail.format : 'symbol' : '1.2-2' }}</span>\n              }\n              @case ('date') {\n                <span>{{ getDetailData(item, detail) | date: detail.format || 'dd/MM/yyyy' }}</span>\n              }\n              @case ('time') {\n                <span>{{ getDetailData(item, detail) | po_time: detail.format || 'HH:mm:ss.ffffff' }}</span>\n              }\n              @case ('dateTime') {\n                <span>\n                  {{ getDetailData(item, detail) | date: detail.format || 'dd/MM/yyyy HH:mm:ss' }}\n                </span>\n              }\n              @case ('number') {\n                <span>{{ formatNumberDetail(getDetailData(item, detail), detail.format) }}</span>\n              }\n              @default {\n                <span>{{ getDetailData(item, detail) }}</span>\n              }\n            }\n          </td>\n        }\n      </tr>\n    }\n  </tbody>\n</table>\n", dependencies: [{ kind: "component", type: PoCheckboxComponent, selector: "po-checkbox" }, { kind: "pipe", type: i1.CurrencyPipe, name: "currency" }, { kind: "pipe", type: i1.DatePipe, name: "date" }, { kind: "pipe", type: PoTimePipe, name: "po_time" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: PoTableDetailComponent, isStandalone: false, selector: "po-table-detail", inputs: { componentsSize: ["p-components-size", "componentsSize"], items: ["p-items", "items"], parentRow: ["p-parent-row", "parentRow"], isSelectable: ["p-selectable", "isSelectable"], detail: ["p-detail", "detail"] }, outputs: { selectRow: "p-select-row" }, ngImport: i0, template: "<table class=\"po-table-master-detail\">\n  @if (typeHeaderTop) {\n    <thead>\n      <tr>\n        @if (isSelectable) {\n          <th class=\"po-table-header po-table-column-selectable\"></th>\n        }\n        <th class=\"po-table-header po-table-header-column po-table-header-master-detail\"></th>\n        @for (detail of detail.columns; track $index) {\n          <th class=\"po-table-header po-table-header-ellipsis\">\n            <div\n              class=\"po-table-header-flex\"\n              [class.po-table-header-flex-right]=\"detail.type === 'currency' || detail.type === 'number'\"\n            >\n              {{ getColumnTitleLabel(detail) }}\n            </div>\n          </th>\n        }\n      </tr>\n    </thead>\n  }\n  <tbody>\n    @for (item of items; track $index) {\n      <tr class=\"po-table-detail-row\" [class.po-table-row-active]=\"item.$selected && isSelectable\">\n        @if (isSelectable) {\n          <td class=\"po-table-column-master-detail-space-checkbox\"></td>\n          <td class=\"po-table-column po-table-column-selectable\">\n            <po-checkbox\n              name=\"checkbox\"\n              (p-change)=\"onSelectRow(item)\"\n              [p-checkboxValue]=\"item.$selected\"\n              [p-size]=\"componentsSize\"\n            ></po-checkbox>\n          </td>\n        } @else {\n          <td class=\"po-table-column-master-detail-space\"></td>\n        }\n        @for (detail of detailColumns; track $index) {\n          <td\n            class=\"po-table-column-master-detail po-table-master-detail-label\"\n            (click)=\"isSelectable ? onSelectRow(item) : 'javascript:;'\"\n            [class.po-table-column-right]=\"typeHeaderTop && (detail.type === 'currency' || detail.type === 'number')\"\n          >\n            @if (typeHeaderInline) {\n              <strong> {{ getColumnTitleLabel(detail) }}: </strong>\n            }\n            @switch (detail.type) {\n              @case ('currency') {\n                <span>{{ getDetailData(item, detail) | currency: detail.format : 'symbol' : '1.2-2' }}</span>\n              }\n              @case ('date') {\n                <span>{{ getDetailData(item, detail) | date: detail.format || 'dd/MM/yyyy' }}</span>\n              }\n              @case ('time') {\n                <span>{{ getDetailData(item, detail) | po_time: detail.format || 'HH:mm:ss.ffffff' }}</span>\n              }\n              @case ('dateTime') {\n                <span>\n                  {{ getDetailData(item, detail) | date: detail.format || 'dd/MM/yyyy HH:mm:ss' }}\n                </span>\n              }\n              @case ('number') {\n                <span>{{ formatNumberDetail(getDetailData(item, detail), detail.format) }}</span>\n              }\n              @default {\n                <span>{{ getDetailData(item, detail) }}</span>\n              }\n            }\n          </td>\n        }\n      </tr>\n    }\n  </tbody>\n</table>\n", dependencies: [{ kind: "component", type: PoCheckboxComponent, selector: "po-checkbox" }, { kind: "pipe", type: i1.CurrencyPipe, name: "currency" }, { kind: "pipe", type: i1.DatePipe, name: "date" }, { kind: "pipe", type: PoTimePipe, name: "po_time" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: PoTableDetailComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'po-table-detail', standalone: false, template: "<table class=\"po-table-master-detail\">\n  @if (typeHeaderTop) {\n    <thead>\n      <tr>\n        @if (isSelectable) {\n          <th class=\"po-table-header po-table-column-selectable\"></th>\n        }\n        <th class=\"po-table-header po-table-header-column po-table-header-master-detail\"></th>\n        @for (detail of detail.columns; track detail) {\n          <th class=\"po-table-header po-table-header-ellipsis\">\n            <div\n              class=\"po-table-header-flex\"\n              [class.po-table-header-flex-right]=\"detail.type === 'currency' || detail.type === 'number'\"\n            >\n              {{ getColumnTitleLabel(detail) }}\n            </div>\n          </th>\n        }\n      </tr>\n    </thead>\n  }\n  <tbody>\n    @for (item of items; track item) {\n      <tr class=\"po-table-detail-row\" [class.po-table-row-active]=\"item.$selected && isSelectable\">\n        @if (isSelectable) {\n          <td class=\"po-table-column-master-detail-space-checkbox\"></td>\n          <td class=\"po-table-column po-table-column-selectable\">\n            <po-checkbox\n              name=\"checkbox\"\n              (p-change)=\"onSelectRow(item)\"\n              [p-checkboxValue]=\"item.$selected\"\n              [p-size]=\"componentsSize\"\n            ></po-checkbox>\n          </td>\n        } @else {\n          <td class=\"po-table-column-master-detail-space\"></td>\n        }\n        @for (detail of detailColumns; track detail) {\n          <td\n            class=\"po-table-column-master-detail po-table-master-detail-label\"\n            (click)=\"isSelectable ? onSelectRow(item) : 'javascript:;'\"\n            [class.po-table-column-right]=\"typeHeaderTop && (detail.type === 'currency' || detail.type === 'number')\"\n          >\n            @if (typeHeaderInline) {\n              <strong> {{ getColumnTitleLabel(detail) }}: </strong>\n            }\n            @switch (detail.type) {\n              @case ('currency') {\n                <span>{{ getDetailData(item, detail) | currency: detail.format : 'symbol' : '1.2-2' }}</span>\n              }\n              @case ('date') {\n                <span>{{ getDetailData(item, detail) | date: detail.format || 'dd/MM/yyyy' }}</span>\n              }\n              @case ('time') {\n                <span>{{ getDetailData(item, detail) | po_time: detail.format || 'HH:mm:ss.ffffff' }}</span>\n              }\n              @case ('dateTime') {\n                <span>\n                  {{ getDetailData(item, detail) | date: detail.format || 'dd/MM/yyyy HH:mm:ss' }}\n                </span>\n              }\n              @case ('number') {\n                <span>{{ formatNumberDetail(getDetailData(item, detail), detail.format) }}</span>\n              }\n              @default {\n                <span>{{ getDetailData(item, detail) }}</span>\n              }\n            }\n          </td>\n        }\n      </tr>\n    }\n  </tbody>\n</table>\n" }]
+            args: [{ selector: 'po-table-detail', standalone: false, template: "<table class=\"po-table-master-detail\">\n  @if (typeHeaderTop) {\n    <thead>\n      <tr>\n        @if (isSelectable) {\n          <th class=\"po-table-header po-table-column-selectable\"></th>\n        }\n        <th class=\"po-table-header po-table-header-column po-table-header-master-detail\"></th>\n        @for (detail of detail.columns; track $index) {\n          <th class=\"po-table-header po-table-header-ellipsis\">\n            <div\n              class=\"po-table-header-flex\"\n              [class.po-table-header-flex-right]=\"detail.type === 'currency' || detail.type === 'number'\"\n            >\n              {{ getColumnTitleLabel(detail) }}\n            </div>\n          </th>\n        }\n      </tr>\n    </thead>\n  }\n  <tbody>\n    @for (item of items; track $index) {\n      <tr class=\"po-table-detail-row\" [class.po-table-row-active]=\"item.$selected && isSelectable\">\n        @if (isSelectable) {\n          <td class=\"po-table-column-master-detail-space-checkbox\"></td>\n          <td class=\"po-table-column po-table-column-selectable\">\n            <po-checkbox\n              name=\"checkbox\"\n              (p-change)=\"onSelectRow(item)\"\n              [p-checkboxValue]=\"item.$selected\"\n              [p-size]=\"componentsSize\"\n            ></po-checkbox>\n          </td>\n        } @else {\n          <td class=\"po-table-column-master-detail-space\"></td>\n        }\n        @for (detail of detailColumns; track $index) {\n          <td\n            class=\"po-table-column-master-detail po-table-master-detail-label\"\n            (click)=\"isSelectable ? onSelectRow(item) : 'javascript:;'\"\n            [class.po-table-column-right]=\"typeHeaderTop && (detail.type === 'currency' || detail.type === 'number')\"\n          >\n            @if (typeHeaderInline) {\n              <strong> {{ getColumnTitleLabel(detail) }}: </strong>\n            }\n            @switch (detail.type) {\n              @case ('currency') {\n                <span>{{ getDetailData(item, detail) | currency: detail.format : 'symbol' : '1.2-2' }}</span>\n              }\n              @case ('date') {\n                <span>{{ getDetailData(item, detail) | date: detail.format || 'dd/MM/yyyy' }}</span>\n              }\n              @case ('time') {\n                <span>{{ getDetailData(item, detail) | po_time: detail.format || 'HH:mm:ss.ffffff' }}</span>\n              }\n              @case ('dateTime') {\n                <span>\n                  {{ getDetailData(item, detail) | date: detail.format || 'dd/MM/yyyy HH:mm:ss' }}\n                </span>\n              }\n              @case ('number') {\n                <span>{{ formatNumberDetail(getDetailData(item, detail), detail.format) }}</span>\n              }\n              @default {\n                <span>{{ getDetailData(item, detail) }}</span>\n              }\n            }\n          </td>\n        }\n      </tr>\n    }\n  </tbody>\n</table>\n" }]
         }], ctorParameters: () => [{ type: i1.DecimalPipe }], propDecorators: { componentsSize: [{
                 type: Input,
                 args: ['p-components-size']
@@ -41414,11 +41351,11 @@ class PoTableShowSubtitleComponent {
     /** Define o tamanho dos elementos que possuem `p-size` dentro do componente. */
     componentsSize;
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: PoTableShowSubtitleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: PoTableShowSubtitleComponent, isStandalone: false, selector: "po-table-show-subtitle", inputs: { subtitles: ["p-subtitles", "subtitles"], literals: ["p-literals", "literals"], componentsSize: ["p-components-size", "componentsSize"] }, ngImport: i0, template: "<div class=\"po-table-footer-show-subtitle\" (click)=\"modal.open()\">\n  <div class=\"po-table-footer-show-subtitle-container\">\n    <span class=\"po-table-show-subtitle\">{{ literals.seeCompleteSubtitle }}</span>\n  </div>\n</div>\n\n<po-modal #modal p-size=\"sm\" [p-title]=\"literals.completeSubtitle\" [p-components-size]=\"componentsSize\">\n  @for (subtitle of subtitles; track subtitle) {\n    <div class=\"po-table-subtitle-footer-modal po-row\">\n      <po-table-subtitle-circle p-hide-title=\"true\" [p-subtitle]=\"subtitle\"> </po-table-subtitle-circle>\n      <span class=\"po-table-subtitle-text\">{{ subtitle.label }}</span>\n    </div>\n  }\n</po-modal>\n", dependencies: [{ kind: "component", type: PoModalComponent, selector: "po-modal" }, { kind: "component", type: PoTableSubtitleCircleComponent, selector: "po-table-subtitle-circle", inputs: ["p-hide-title", "p-subtitle"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: PoTableShowSubtitleComponent, isStandalone: false, selector: "po-table-show-subtitle", inputs: { subtitles: ["p-subtitles", "subtitles"], literals: ["p-literals", "literals"], componentsSize: ["p-components-size", "componentsSize"] }, ngImport: i0, template: "<div class=\"po-table-footer-show-subtitle\" (click)=\"modal.open()\">\n  <div class=\"po-table-footer-show-subtitle-container\">\n    <span class=\"po-table-show-subtitle\">{{ literals.seeCompleteSubtitle }}</span>\n  </div>\n</div>\n\n<po-modal #modal p-size=\"sm\" [p-title]=\"literals.completeSubtitle\" [p-components-size]=\"componentsSize\">\n  @for (subtitle of subtitles; track $index) {\n    <div class=\"po-table-subtitle-footer-modal po-row\">\n      <po-table-subtitle-circle p-hide-title=\"true\" [p-subtitle]=\"subtitle\"> </po-table-subtitle-circle>\n      <span class=\"po-table-subtitle-text\">{{ subtitle.label }}</span>\n    </div>\n  }\n</po-modal>\n", dependencies: [{ kind: "component", type: PoModalComponent, selector: "po-modal" }, { kind: "component", type: PoTableSubtitleCircleComponent, selector: "po-table-subtitle-circle", inputs: ["p-hide-title", "p-subtitle"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: PoTableShowSubtitleComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'po-table-show-subtitle', standalone: false, template: "<div class=\"po-table-footer-show-subtitle\" (click)=\"modal.open()\">\n  <div class=\"po-table-footer-show-subtitle-container\">\n    <span class=\"po-table-show-subtitle\">{{ literals.seeCompleteSubtitle }}</span>\n  </div>\n</div>\n\n<po-modal #modal p-size=\"sm\" [p-title]=\"literals.completeSubtitle\" [p-components-size]=\"componentsSize\">\n  @for (subtitle of subtitles; track subtitle) {\n    <div class=\"po-table-subtitle-footer-modal po-row\">\n      <po-table-subtitle-circle p-hide-title=\"true\" [p-subtitle]=\"subtitle\"> </po-table-subtitle-circle>\n      <span class=\"po-table-subtitle-text\">{{ subtitle.label }}</span>\n    </div>\n  }\n</po-modal>\n" }]
+            args: [{ selector: 'po-table-show-subtitle', standalone: false, template: "<div class=\"po-table-footer-show-subtitle\" (click)=\"modal.open()\">\n  <div class=\"po-table-footer-show-subtitle-container\">\n    <span class=\"po-table-show-subtitle\">{{ literals.seeCompleteSubtitle }}</span>\n  </div>\n</div>\n\n<po-modal #modal p-size=\"sm\" [p-title]=\"literals.completeSubtitle\" [p-components-size]=\"componentsSize\">\n  @for (subtitle of subtitles; track $index) {\n    <div class=\"po-table-subtitle-footer-modal po-row\">\n      <po-table-subtitle-circle p-hide-title=\"true\" [p-subtitle]=\"subtitle\"> </po-table-subtitle-circle>\n      <span class=\"po-table-subtitle-text\">{{ subtitle.label }}</span>\n    </div>\n  }\n</po-modal>\n" }]
         }], propDecorators: { subtitles: [{
                 type: Input,
                 args: ['p-subtitles']
@@ -41496,11 +41433,11 @@ class PoTableSubtitleFooterComponent {
         this.showSubtitle = itemsSize > containerSize;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: PoTableSubtitleFooterComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: PoTableSubtitleFooterComponent, isStandalone: false, selector: "po-table-subtitle-footer", inputs: { componentsSize: ["p-components-size", "componentsSize"], literals: ["p-literals", "literals"], subtitles: ["p-subtitles", "subtitles"] }, ngImport: i0, template: "<div class=\"po-table-subtitle-footer-container\">\n  @for (subtitle of subtitles; track subtitle) {\n    <div class=\"po-table-subtitle-footer\">\n      <po-table-subtitle-circle p-hide-title=\"true\" [p-subtitle]=\"subtitle\"> </po-table-subtitle-circle>\n      <span class=\"po-table-subtitle-text\">{{ subtitle.label }}</span>\n    </div>\n  }\n  @if (showSubtitle) {\n    <po-table-show-subtitle [p-components-size]=\"componentsSize\" [p-literals]=\"literals\" [p-subtitles]=\"subtitles\">\n    </po-table-show-subtitle>\n  }\n</div>\n", dependencies: [{ kind: "component", type: PoTableShowSubtitleComponent, selector: "po-table-show-subtitle", inputs: ["p-subtitles", "p-literals", "p-components-size"] }, { kind: "component", type: PoTableSubtitleCircleComponent, selector: "po-table-subtitle-circle", inputs: ["p-hide-title", "p-subtitle"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: PoTableSubtitleFooterComponent, isStandalone: false, selector: "po-table-subtitle-footer", inputs: { componentsSize: ["p-components-size", "componentsSize"], literals: ["p-literals", "literals"], subtitles: ["p-subtitles", "subtitles"] }, ngImport: i0, template: "<div class=\"po-table-subtitle-footer-container\">\n  @for (subtitle of subtitles; track $index) {\n    <div class=\"po-table-subtitle-footer\">\n      <po-table-subtitle-circle p-hide-title=\"true\" [p-subtitle]=\"subtitle\"> </po-table-subtitle-circle>\n      <span class=\"po-table-subtitle-text\">{{ subtitle.label }}</span>\n    </div>\n  }\n  @if (showSubtitle) {\n    <po-table-show-subtitle [p-components-size]=\"componentsSize\" [p-literals]=\"literals\" [p-subtitles]=\"subtitles\">\n    </po-table-show-subtitle>\n  }\n</div>\n", dependencies: [{ kind: "component", type: PoTableShowSubtitleComponent, selector: "po-table-show-subtitle", inputs: ["p-subtitles", "p-literals", "p-components-size"] }, { kind: "component", type: PoTableSubtitleCircleComponent, selector: "po-table-subtitle-circle", inputs: ["p-hide-title", "p-subtitle"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: PoTableSubtitleFooterComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'po-table-subtitle-footer', standalone: false, template: "<div class=\"po-table-subtitle-footer-container\">\n  @for (subtitle of subtitles; track subtitle) {\n    <div class=\"po-table-subtitle-footer\">\n      <po-table-subtitle-circle p-hide-title=\"true\" [p-subtitle]=\"subtitle\"> </po-table-subtitle-circle>\n      <span class=\"po-table-subtitle-text\">{{ subtitle.label }}</span>\n    </div>\n  }\n  @if (showSubtitle) {\n    <po-table-show-subtitle [p-components-size]=\"componentsSize\" [p-literals]=\"literals\" [p-subtitles]=\"subtitles\">\n    </po-table-show-subtitle>\n  }\n</div>\n" }]
+            args: [{ selector: 'po-table-subtitle-footer', standalone: false, template: "<div class=\"po-table-subtitle-footer-container\">\n  @for (subtitle of subtitles; track $index) {\n    <div class=\"po-table-subtitle-footer\">\n      <po-table-subtitle-circle p-hide-title=\"true\" [p-subtitle]=\"subtitle\"> </po-table-subtitle-circle>\n      <span class=\"po-table-subtitle-text\">{{ subtitle.label }}</span>\n    </div>\n  }\n  @if (showSubtitle) {\n    <po-table-show-subtitle [p-components-size]=\"componentsSize\" [p-literals]=\"literals\" [p-subtitles]=\"subtitles\">\n    </po-table-show-subtitle>\n  }\n</div>\n" }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }], propDecorators: { componentsSize: [{
                 type: Input,
                 args: ['p-components-size']
@@ -45239,6 +45176,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
  *  <file name="sample-po-input-reactive-form/sample-po-input-reactive-form.component.html"> </file>
  *  <file name="sample-po-input-reactive-form/sample-po-input-reactive-form.component.ts"> </file>
  * </example>
+ *
+ * <example name="po-input-mask-dynamic" title="PO Input - Dynamic Mask (CPF/CNPJ)">
+ *  <file name="sample-po-input-mask-dynamic/sample-po-input-mask-dynamic.component.html"> </file>
+ *  <file name="sample-po-input-mask-dynamic/sample-po-input-mask-dynamic.component.ts"> </file>
+ *  <file name="sample-po-input-mask-dynamic/document-mask.ts"> </file>
+ * </example>
  */
 class PoInputComponent extends PoInputGeneric {
     inp;
@@ -47725,11 +47668,11 @@ class PoLookupComponent extends PoLookupBaseComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: PoLookupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: PoLookupComponent, isStandalone: false, selector: "po-lookup", providers: providers$2, viewQueries: [{ propertyName: "helperEl", first: true, predicate: ["helperEl"], descendants: true, read: PoHelperComponent }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "@let poHelper = setHelper(label, additionalHelpTooltip);\n@let needsHelper = !label && (poHelperComponent() || poHelper.hideAdditionalHelp);\n\n<ng-template #poHelperTemplate>\n  <po-helper\n    #helperEl\n    class=\"po-field-helper-button\"\n    [p-size]=\"size\"\n    [p-helper]=\"poHelper.helperSettings\"\n    [p-disabled]=\"isDisabled\"\n    [p-append-in-body]=\"appendBox\"\n  ></po-helper>\n</ng-template>\n\n<po-field-container\n  [p-disabled]=\"isDisabled\"\n  [p-id]=\"id\"\n  [p-label]=\"label\"\n  [p-optional]=\"optional\"\n  [p-required]=\"required\"\n  [p-show-required]=\"showRequired\"\n  [p-helper]=\"label ? poHelper.helperSettings : undefined\"\n  [p-show-helper]=\"label ? displayAdditionalHelp : undefined\"\n  [p-size]=\"size\"\n  [p-text-wrap]=\"labelTextWrap()\"\n  [p-compact-label]=\"compactLabel()\"\n>\n  @if (!disclaimers.length) {\n    <div\n      class=\"po-field-container-content po-lookup\"\n      [class.po-lookup-disabled]=\"disabled\"\n      [class.po-lookup-loading]=\"loading\"\n    >\n      <div class=\"po-field-container-content-helper-wrapper\">\n        <div class=\"po-field-container-input\">\n          <input\n            #inp\n            class=\"po-lookup-input po-lookup-input-trigger\"\n            [ngClass]=\"clean && inp.value ? 'po-input-double-icon-right' : 'po-input-icon-right'\"\n            [id]=\"id\"\n            type=\"text\"\n            [autocomplete]=\"autocomplete\"\n            [disabled]=\"isDisabled\"\n            [placeholder]=\"placeholder\"\n            [required]=\"required\"\n            (blur)=\"searchEvent()\"\n            (keydown)=\"onKeyDown($event)\"\n          />\n          <div class=\"po-field-icon-container-right po-lookup-buttons\">\n            @if (loading) {\n              <div class=\"po-lookup-button po-lookup-button-loading\">\n                <po-loading-icon class=\"po-lookup-loading-icon\" [p-size]=\"mapSizeToIcon(size)\"></po-loading-icon>\n              </div>\n            } @else {\n              @if (clean && !isDisabled && !!inp.value) {\n                <po-clean\n                  tabindex=\"0\"\n                  role=\"button\"\n                  [attr.aria-label]=\"literals.clean\"\n                  class=\"po-lookup-button po-lookup-button-clean\"\n                  [class.po-lookup-button-aa]=\"size === 'small'\"\n                  [p-element-ref]=\"inp\"\n                  [p-size]=\"size\"\n                  (p-change-event)=\"cleanModel()\"\n                  (click)=\"cleanModel(); $event.preventDefault()\"\n                  (keydown.enter)=\"cleanModel(); $event.preventDefault()\"\n                ></po-clean>\n              }\n            }\n            <div\n              #iconLookup\n              tabindex=\"0\"\n              role=\"button\"\n              class=\"po-lookup-button po-lookup-button-trigger po-field-icon\"\n              [class.po-field-icon-disabled]=\"isDisabled\"\n              [ariaLabel]=\"literals.search\"\n              (p-change-event)=\"openLookup()\"\n              (click)=\"!isDisabled && openLookup(); $event.preventDefault()\"\n              (keydown.enter)=\"!isDisabled && openLookup(); $event.preventDefault()\"\n            >\n              <po-icon\n                p-icon=\"ICON_SEARCH\"\n                [class.po-field-icon]=\"!isDisabled\"\n                [class.po-field-icon-aa]=\"!isDisabled && size === 'small'\"\n              ></po-icon>\n            </div>\n          </div>\n        </div>\n\n        @if (needsHelper) {\n          <ng-container *ngTemplateOutlet=\"poHelperTemplate\"></ng-container>\n        }\n      </div>\n    </div>\n  } @else {\n    <div\n      class=\"po-field-container-content po-lookup\"\n      [class.po-lookup-disabled]=\"disabled\"\n      [class.po-lookup-loading]=\"loading\"\n    >\n      <div class=\"po-field-container-content-helper-wrapper\">\n        <div class=\"po-field-container-input\">\n          <div\n            #inp\n            [tabindex]=\"isDisabled ? -1 : 0\"\n            class=\"po-lookup-input po-input-icon-right po-icon-input\"\n            [ngClass]=\"clean && inp.value ? 'po-input-double-icon-right' : 'po-input-icon-right'\"\n            [class.po-lookup-input-auto]=\"autoHeight\"\n            [class.po-lookup-input-static]=\"!autoHeight\"\n            [class.po-lookup-input-padding-button-clean]=\"clean || loading\"\n            [class.po-lookup-input-disabled]=\"isDisabled\"\n            [class.po-lookup-input-auto-dynamic-height]=\"isExpandedHeight\"\n            (blur)=\"onBlur()\"\n            (keydown)=\"onKeyDown($event)\"\n          >\n            @if (placeholder && !disclaimers?.length) {\n              <span class=\"po-lookup-input-placeholder\">{{ placeholder }}</span>\n            }\n            @for (disclaimer of visibleDisclaimers; track disclaimer) {\n              <po-disclaimer\n                class=\"po-lookup-input-disclaimer\"\n                [p-label]=\"disclaimer.label\"\n                [p-value]=\"disclaimer.value\"\n                [p-hide-close]=\"disclaimer.value === '' || isDisabled\"\n                [class.po-clickable]=\"disclaimer.value === '' && !isDisabled\"\n                (p-close-action)=\"closeDisclaimer(disclaimer.value)\"\n              ></po-disclaimer>\n            }\n          </div>\n          <div class=\"po-field-icon-container-right po-lookup-buttons\">\n            @if (loading) {\n              <div class=\"po-lookup-button po-lookup-button-loading\">\n                <po-loading-icon class=\"po-lookup-loading-icon\" [p-size]=\"mapSizeToIcon(size)\"></po-loading-icon>\n              </div>\n            } @else {\n              @if (clean && !isDisabled && !!inp.value) {\n                <po-clean\n                  tabindex=\"0\"\n                  role=\"button\"\n                  [attr.aria-label]=\"literals.clean\"\n                  class=\"po-lookup-button po-lookup-button-clean\"\n                  [p-element-ref]=\"inp\"\n                  [p-size]=\"size\"\n                  (p-change-event)=\"cleanModel()\"\n                  (click)=\"cleanModel(); $event.preventDefault()\"\n                  (keydown.enter)=\"cleanModel(); $event.preventDefault()\"\n                ></po-clean>\n              }\n            }\n            <div\n              #iconLookup\n              tabindex=\"0\"\n              role=\"button\"\n              class=\"po-lookup-button po-lookup-button-trigger po-field-icon\"\n              [class.po-field-icon-disabled]=\"isDisabled\"\n              [ariaLabel]=\"literals.search\"\n              (p-change-event)=\"openLookup()\"\n              (click)=\"!isDisabled && openLookup(); $event.preventDefault()\"\n              (keydown.enter)=\"!isDisabled && openLookup(); $event.preventDefault()\"\n            >\n              <po-icon\n                p-icon=\"ICON_SEARCH\"\n                [class.po-field-icon]=\"!isDisabled\"\n                [class.po-field-icon-aa]=\"!isDisabled && size === 'small'\"\n              ></po-icon>\n            </div>\n          </div>\n        </div>\n\n        @if (needsHelper) {\n          <ng-container *ngTemplateOutlet=\"poHelperTemplate\"></ng-container>\n        }\n      </div>\n    </div>\n  }\n\n  <po-field-container-bottom\n    [p-append-in-body]=\"appendBox\"\n    [p-help]=\"help\"\n    [p-disabled]=\"isDisabled\"\n    [p-error-pattern]=\"getErrorPattern()\"\n    [p-error-limit]=\"errorLimit\"\n    [p-size]=\"size\"\n  ></po-field-container-bottom>\n</po-field-container>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: PoCleanComponent, selector: "po-clean" }, { kind: "component", type: PoDisclaimerComponent, selector: "po-disclaimer" }, { kind: "component", type: PoFieldContainerBottomComponent, selector: "po-field-container-bottom", inputs: ["p-append-in-body", "p-disabled", "p-error-pattern", "p-error-limit", "p-help", "p-size", "p-helper", "p-show-helper"] }, { kind: "component", type: PoFieldContainerComponent, selector: "po-field-container", inputs: ["p-disabled", "p-id", "p-label", "p-help", "p-helper", "p-show-helper", "p-text-wrap", "p-optional", "p-required", "p-show-required", "p-size", "p-compact-label"] }, { kind: "component", type: PoHelperComponent, selector: "po-helper" }, { kind: "component", type: PoIconComponent, selector: "po-icon", inputs: ["p-icon"] }, { kind: "component", type: PoLoadingIconComponent, selector: "po-loading-icon", inputs: ["p-neutral-color", "p-size", "p-in-overlay"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: PoLookupComponent, isStandalone: false, selector: "po-lookup", providers: providers$2, viewQueries: [{ propertyName: "helperEl", first: true, predicate: ["helperEl"], descendants: true, read: PoHelperComponent }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "@let poHelper = setHelper(label, additionalHelpTooltip);\n@let needsHelper = !label && (poHelperComponent() || poHelper.hideAdditionalHelp);\n\n<ng-template #poHelperTemplate>\n  <po-helper\n    #helperEl\n    class=\"po-field-helper-button\"\n    [p-size]=\"size\"\n    [p-helper]=\"poHelper.helperSettings\"\n    [p-disabled]=\"isDisabled\"\n    [p-append-in-body]=\"appendBox\"\n  ></po-helper>\n</ng-template>\n\n<po-field-container\n  [p-disabled]=\"isDisabled\"\n  [p-id]=\"id\"\n  [p-label]=\"label\"\n  [p-optional]=\"optional\"\n  [p-required]=\"required\"\n  [p-show-required]=\"showRequired\"\n  [p-helper]=\"label ? poHelper.helperSettings : undefined\"\n  [p-show-helper]=\"label ? displayAdditionalHelp : undefined\"\n  [p-size]=\"size\"\n  [p-text-wrap]=\"labelTextWrap()\"\n  [p-compact-label]=\"compactLabel()\"\n>\n  @if (!disclaimers.length) {\n    <div\n      class=\"po-field-container-content po-lookup\"\n      [class.po-lookup-disabled]=\"disabled\"\n      [class.po-lookup-loading]=\"loading\"\n    >\n      <div class=\"po-field-container-content-helper-wrapper\">\n        <div class=\"po-field-container-input\">\n          <input\n            #inp\n            class=\"po-lookup-input po-lookup-input-trigger\"\n            [ngClass]=\"clean && inp.value ? 'po-input-double-icon-right' : 'po-input-icon-right'\"\n            [id]=\"id\"\n            type=\"text\"\n            [autocomplete]=\"autocomplete\"\n            [disabled]=\"isDisabled\"\n            [placeholder]=\"placeholder\"\n            [required]=\"required\"\n            (blur)=\"searchEvent()\"\n            (keydown)=\"onKeyDown($event)\"\n          />\n          <div class=\"po-field-icon-container-right po-lookup-buttons\">\n            @if (loading) {\n              <div class=\"po-lookup-button po-lookup-button-loading\">\n                <po-loading-icon class=\"po-lookup-loading-icon\" [p-size]=\"mapSizeToIcon(size)\"></po-loading-icon>\n              </div>\n            } @else {\n              @if (clean && !isDisabled && !!inp.value) {\n                <po-clean\n                  tabindex=\"0\"\n                  role=\"button\"\n                  [attr.aria-label]=\"literals.clean\"\n                  class=\"po-lookup-button po-lookup-button-clean\"\n                  [class.po-lookup-button-aa]=\"size === 'small'\"\n                  [p-element-ref]=\"inp\"\n                  [p-size]=\"size\"\n                  (p-change-event)=\"cleanModel()\"\n                  (click)=\"cleanModel(); $event.preventDefault()\"\n                  (keydown.enter)=\"cleanModel(); $event.preventDefault()\"\n                ></po-clean>\n              }\n            }\n            <div\n              #iconLookup\n              tabindex=\"0\"\n              role=\"button\"\n              class=\"po-lookup-button po-lookup-button-trigger po-field-icon\"\n              [class.po-field-icon-disabled]=\"isDisabled\"\n              [ariaLabel]=\"literals.search\"\n              (p-change-event)=\"openLookup()\"\n              (click)=\"!isDisabled && openLookup(); $event.preventDefault()\"\n              (keydown.enter)=\"!isDisabled && openLookup(); $event.preventDefault()\"\n            >\n              <po-icon\n                p-icon=\"ICON_SEARCH\"\n                [class.po-field-icon]=\"!isDisabled\"\n                [class.po-field-icon-aa]=\"!isDisabled && size === 'small'\"\n              ></po-icon>\n            </div>\n          </div>\n        </div>\n\n        @if (needsHelper) {\n          <ng-container *ngTemplateOutlet=\"poHelperTemplate\"></ng-container>\n        }\n      </div>\n    </div>\n  } @else {\n    <div\n      class=\"po-field-container-content po-lookup\"\n      [class.po-lookup-disabled]=\"disabled\"\n      [class.po-lookup-loading]=\"loading\"\n    >\n      <div class=\"po-field-container-content-helper-wrapper\">\n        <div class=\"po-field-container-input\">\n          <div\n            #inp\n            [tabindex]=\"isDisabled ? -1 : 0\"\n            class=\"po-lookup-input po-input-icon-right po-icon-input\"\n            [ngClass]=\"clean && inp.value ? 'po-input-double-icon-right' : 'po-input-icon-right'\"\n            [class.po-lookup-input-auto]=\"autoHeight\"\n            [class.po-lookup-input-static]=\"!autoHeight\"\n            [class.po-lookup-input-padding-button-clean]=\"clean || loading\"\n            [class.po-lookup-input-disabled]=\"isDisabled\"\n            [class.po-lookup-input-auto-dynamic-height]=\"isExpandedHeight\"\n            (blur)=\"onBlur()\"\n            (keydown)=\"onKeyDown($event)\"\n          >\n            @if (placeholder && !disclaimers?.length) {\n              <span class=\"po-lookup-input-placeholder\">{{ placeholder }}</span>\n            }\n            @for (disclaimer of visibleDisclaimers; track $index) {\n              <po-disclaimer\n                class=\"po-lookup-input-disclaimer\"\n                [p-label]=\"disclaimer.label\"\n                [p-value]=\"disclaimer.value\"\n                [p-hide-close]=\"disclaimer.value === '' || isDisabled\"\n                [class.po-clickable]=\"disclaimer.value === '' && !isDisabled\"\n                (p-close-action)=\"closeDisclaimer(disclaimer.value)\"\n              ></po-disclaimer>\n            }\n          </div>\n          <div class=\"po-field-icon-container-right po-lookup-buttons\">\n            @if (loading) {\n              <div class=\"po-lookup-button po-lookup-button-loading\">\n                <po-loading-icon class=\"po-lookup-loading-icon\" [p-size]=\"mapSizeToIcon(size)\"></po-loading-icon>\n              </div>\n            } @else {\n              @if (clean && !isDisabled && !!inp.value) {\n                <po-clean\n                  tabindex=\"0\"\n                  role=\"button\"\n                  [attr.aria-label]=\"literals.clean\"\n                  class=\"po-lookup-button po-lookup-button-clean\"\n                  [p-element-ref]=\"inp\"\n                  [p-size]=\"size\"\n                  (p-change-event)=\"cleanModel()\"\n                  (click)=\"cleanModel(); $event.preventDefault()\"\n                  (keydown.enter)=\"cleanModel(); $event.preventDefault()\"\n                ></po-clean>\n              }\n            }\n            <div\n              #iconLookup\n              tabindex=\"0\"\n              role=\"button\"\n              class=\"po-lookup-button po-lookup-button-trigger po-field-icon\"\n              [class.po-field-icon-disabled]=\"isDisabled\"\n              [ariaLabel]=\"literals.search\"\n              (p-change-event)=\"openLookup()\"\n              (click)=\"!isDisabled && openLookup(); $event.preventDefault()\"\n              (keydown.enter)=\"!isDisabled && openLookup(); $event.preventDefault()\"\n            >\n              <po-icon\n                p-icon=\"ICON_SEARCH\"\n                [class.po-field-icon]=\"!isDisabled\"\n                [class.po-field-icon-aa]=\"!isDisabled && size === 'small'\"\n              ></po-icon>\n            </div>\n          </div>\n        </div>\n\n        @if (needsHelper) {\n          <ng-container *ngTemplateOutlet=\"poHelperTemplate\"></ng-container>\n        }\n      </div>\n    </div>\n  }\n\n  <po-field-container-bottom\n    [p-append-in-body]=\"appendBox\"\n    [p-help]=\"help\"\n    [p-disabled]=\"isDisabled\"\n    [p-error-pattern]=\"getErrorPattern()\"\n    [p-error-limit]=\"errorLimit\"\n    [p-size]=\"size\"\n  ></po-field-container-bottom>\n</po-field-container>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: PoCleanComponent, selector: "po-clean" }, { kind: "component", type: PoDisclaimerComponent, selector: "po-disclaimer" }, { kind: "component", type: PoFieldContainerBottomComponent, selector: "po-field-container-bottom", inputs: ["p-append-in-body", "p-disabled", "p-error-pattern", "p-error-limit", "p-help", "p-size", "p-helper", "p-show-helper"] }, { kind: "component", type: PoFieldContainerComponent, selector: "po-field-container", inputs: ["p-disabled", "p-id", "p-label", "p-help", "p-helper", "p-show-helper", "p-text-wrap", "p-optional", "p-required", "p-show-required", "p-size", "p-compact-label"] }, { kind: "component", type: PoHelperComponent, selector: "po-helper" }, { kind: "component", type: PoIconComponent, selector: "po-icon", inputs: ["p-icon"] }, { kind: "component", type: PoLoadingIconComponent, selector: "po-loading-icon", inputs: ["p-neutral-color", "p-size", "p-in-overlay"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: PoLookupComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'po-lookup', changeDetection: ChangeDetectionStrategy.OnPush, providers: providers$2, standalone: false, template: "@let poHelper = setHelper(label, additionalHelpTooltip);\n@let needsHelper = !label && (poHelperComponent() || poHelper.hideAdditionalHelp);\n\n<ng-template #poHelperTemplate>\n  <po-helper\n    #helperEl\n    class=\"po-field-helper-button\"\n    [p-size]=\"size\"\n    [p-helper]=\"poHelper.helperSettings\"\n    [p-disabled]=\"isDisabled\"\n    [p-append-in-body]=\"appendBox\"\n  ></po-helper>\n</ng-template>\n\n<po-field-container\n  [p-disabled]=\"isDisabled\"\n  [p-id]=\"id\"\n  [p-label]=\"label\"\n  [p-optional]=\"optional\"\n  [p-required]=\"required\"\n  [p-show-required]=\"showRequired\"\n  [p-helper]=\"label ? poHelper.helperSettings : undefined\"\n  [p-show-helper]=\"label ? displayAdditionalHelp : undefined\"\n  [p-size]=\"size\"\n  [p-text-wrap]=\"labelTextWrap()\"\n  [p-compact-label]=\"compactLabel()\"\n>\n  @if (!disclaimers.length) {\n    <div\n      class=\"po-field-container-content po-lookup\"\n      [class.po-lookup-disabled]=\"disabled\"\n      [class.po-lookup-loading]=\"loading\"\n    >\n      <div class=\"po-field-container-content-helper-wrapper\">\n        <div class=\"po-field-container-input\">\n          <input\n            #inp\n            class=\"po-lookup-input po-lookup-input-trigger\"\n            [ngClass]=\"clean && inp.value ? 'po-input-double-icon-right' : 'po-input-icon-right'\"\n            [id]=\"id\"\n            type=\"text\"\n            [autocomplete]=\"autocomplete\"\n            [disabled]=\"isDisabled\"\n            [placeholder]=\"placeholder\"\n            [required]=\"required\"\n            (blur)=\"searchEvent()\"\n            (keydown)=\"onKeyDown($event)\"\n          />\n          <div class=\"po-field-icon-container-right po-lookup-buttons\">\n            @if (loading) {\n              <div class=\"po-lookup-button po-lookup-button-loading\">\n                <po-loading-icon class=\"po-lookup-loading-icon\" [p-size]=\"mapSizeToIcon(size)\"></po-loading-icon>\n              </div>\n            } @else {\n              @if (clean && !isDisabled && !!inp.value) {\n                <po-clean\n                  tabindex=\"0\"\n                  role=\"button\"\n                  [attr.aria-label]=\"literals.clean\"\n                  class=\"po-lookup-button po-lookup-button-clean\"\n                  [class.po-lookup-button-aa]=\"size === 'small'\"\n                  [p-element-ref]=\"inp\"\n                  [p-size]=\"size\"\n                  (p-change-event)=\"cleanModel()\"\n                  (click)=\"cleanModel(); $event.preventDefault()\"\n                  (keydown.enter)=\"cleanModel(); $event.preventDefault()\"\n                ></po-clean>\n              }\n            }\n            <div\n              #iconLookup\n              tabindex=\"0\"\n              role=\"button\"\n              class=\"po-lookup-button po-lookup-button-trigger po-field-icon\"\n              [class.po-field-icon-disabled]=\"isDisabled\"\n              [ariaLabel]=\"literals.search\"\n              (p-change-event)=\"openLookup()\"\n              (click)=\"!isDisabled && openLookup(); $event.preventDefault()\"\n              (keydown.enter)=\"!isDisabled && openLookup(); $event.preventDefault()\"\n            >\n              <po-icon\n                p-icon=\"ICON_SEARCH\"\n                [class.po-field-icon]=\"!isDisabled\"\n                [class.po-field-icon-aa]=\"!isDisabled && size === 'small'\"\n              ></po-icon>\n            </div>\n          </div>\n        </div>\n\n        @if (needsHelper) {\n          <ng-container *ngTemplateOutlet=\"poHelperTemplate\"></ng-container>\n        }\n      </div>\n    </div>\n  } @else {\n    <div\n      class=\"po-field-container-content po-lookup\"\n      [class.po-lookup-disabled]=\"disabled\"\n      [class.po-lookup-loading]=\"loading\"\n    >\n      <div class=\"po-field-container-content-helper-wrapper\">\n        <div class=\"po-field-container-input\">\n          <div\n            #inp\n            [tabindex]=\"isDisabled ? -1 : 0\"\n            class=\"po-lookup-input po-input-icon-right po-icon-input\"\n            [ngClass]=\"clean && inp.value ? 'po-input-double-icon-right' : 'po-input-icon-right'\"\n            [class.po-lookup-input-auto]=\"autoHeight\"\n            [class.po-lookup-input-static]=\"!autoHeight\"\n            [class.po-lookup-input-padding-button-clean]=\"clean || loading\"\n            [class.po-lookup-input-disabled]=\"isDisabled\"\n            [class.po-lookup-input-auto-dynamic-height]=\"isExpandedHeight\"\n            (blur)=\"onBlur()\"\n            (keydown)=\"onKeyDown($event)\"\n          >\n            @if (placeholder && !disclaimers?.length) {\n              <span class=\"po-lookup-input-placeholder\">{{ placeholder }}</span>\n            }\n            @for (disclaimer of visibleDisclaimers; track disclaimer) {\n              <po-disclaimer\n                class=\"po-lookup-input-disclaimer\"\n                [p-label]=\"disclaimer.label\"\n                [p-value]=\"disclaimer.value\"\n                [p-hide-close]=\"disclaimer.value === '' || isDisabled\"\n                [class.po-clickable]=\"disclaimer.value === '' && !isDisabled\"\n                (p-close-action)=\"closeDisclaimer(disclaimer.value)\"\n              ></po-disclaimer>\n            }\n          </div>\n          <div class=\"po-field-icon-container-right po-lookup-buttons\">\n            @if (loading) {\n              <div class=\"po-lookup-button po-lookup-button-loading\">\n                <po-loading-icon class=\"po-lookup-loading-icon\" [p-size]=\"mapSizeToIcon(size)\"></po-loading-icon>\n              </div>\n            } @else {\n              @if (clean && !isDisabled && !!inp.value) {\n                <po-clean\n                  tabindex=\"0\"\n                  role=\"button\"\n                  [attr.aria-label]=\"literals.clean\"\n                  class=\"po-lookup-button po-lookup-button-clean\"\n                  [p-element-ref]=\"inp\"\n                  [p-size]=\"size\"\n                  (p-change-event)=\"cleanModel()\"\n                  (click)=\"cleanModel(); $event.preventDefault()\"\n                  (keydown.enter)=\"cleanModel(); $event.preventDefault()\"\n                ></po-clean>\n              }\n            }\n            <div\n              #iconLookup\n              tabindex=\"0\"\n              role=\"button\"\n              class=\"po-lookup-button po-lookup-button-trigger po-field-icon\"\n              [class.po-field-icon-disabled]=\"isDisabled\"\n              [ariaLabel]=\"literals.search\"\n              (p-change-event)=\"openLookup()\"\n              (click)=\"!isDisabled && openLookup(); $event.preventDefault()\"\n              (keydown.enter)=\"!isDisabled && openLookup(); $event.preventDefault()\"\n            >\n              <po-icon\n                p-icon=\"ICON_SEARCH\"\n                [class.po-field-icon]=\"!isDisabled\"\n                [class.po-field-icon-aa]=\"!isDisabled && size === 'small'\"\n              ></po-icon>\n            </div>\n          </div>\n        </div>\n\n        @if (needsHelper) {\n          <ng-container *ngTemplateOutlet=\"poHelperTemplate\"></ng-container>\n        }\n      </div>\n    </div>\n  }\n\n  <po-field-container-bottom\n    [p-append-in-body]=\"appendBox\"\n    [p-help]=\"help\"\n    [p-disabled]=\"isDisabled\"\n    [p-error-pattern]=\"getErrorPattern()\"\n    [p-error-limit]=\"errorLimit\"\n    [p-size]=\"size\"\n  ></po-field-container-bottom>\n</po-field-container>\n" }]
+            args: [{ selector: 'po-lookup', changeDetection: ChangeDetectionStrategy.OnPush, providers: providers$2, standalone: false, template: "@let poHelper = setHelper(label, additionalHelpTooltip);\n@let needsHelper = !label && (poHelperComponent() || poHelper.hideAdditionalHelp);\n\n<ng-template #poHelperTemplate>\n  <po-helper\n    #helperEl\n    class=\"po-field-helper-button\"\n    [p-size]=\"size\"\n    [p-helper]=\"poHelper.helperSettings\"\n    [p-disabled]=\"isDisabled\"\n    [p-append-in-body]=\"appendBox\"\n  ></po-helper>\n</ng-template>\n\n<po-field-container\n  [p-disabled]=\"isDisabled\"\n  [p-id]=\"id\"\n  [p-label]=\"label\"\n  [p-optional]=\"optional\"\n  [p-required]=\"required\"\n  [p-show-required]=\"showRequired\"\n  [p-helper]=\"label ? poHelper.helperSettings : undefined\"\n  [p-show-helper]=\"label ? displayAdditionalHelp : undefined\"\n  [p-size]=\"size\"\n  [p-text-wrap]=\"labelTextWrap()\"\n  [p-compact-label]=\"compactLabel()\"\n>\n  @if (!disclaimers.length) {\n    <div\n      class=\"po-field-container-content po-lookup\"\n      [class.po-lookup-disabled]=\"disabled\"\n      [class.po-lookup-loading]=\"loading\"\n    >\n      <div class=\"po-field-container-content-helper-wrapper\">\n        <div class=\"po-field-container-input\">\n          <input\n            #inp\n            class=\"po-lookup-input po-lookup-input-trigger\"\n            [ngClass]=\"clean && inp.value ? 'po-input-double-icon-right' : 'po-input-icon-right'\"\n            [id]=\"id\"\n            type=\"text\"\n            [autocomplete]=\"autocomplete\"\n            [disabled]=\"isDisabled\"\n            [placeholder]=\"placeholder\"\n            [required]=\"required\"\n            (blur)=\"searchEvent()\"\n            (keydown)=\"onKeyDown($event)\"\n          />\n          <div class=\"po-field-icon-container-right po-lookup-buttons\">\n            @if (loading) {\n              <div class=\"po-lookup-button po-lookup-button-loading\">\n                <po-loading-icon class=\"po-lookup-loading-icon\" [p-size]=\"mapSizeToIcon(size)\"></po-loading-icon>\n              </div>\n            } @else {\n              @if (clean && !isDisabled && !!inp.value) {\n                <po-clean\n                  tabindex=\"0\"\n                  role=\"button\"\n                  [attr.aria-label]=\"literals.clean\"\n                  class=\"po-lookup-button po-lookup-button-clean\"\n                  [class.po-lookup-button-aa]=\"size === 'small'\"\n                  [p-element-ref]=\"inp\"\n                  [p-size]=\"size\"\n                  (p-change-event)=\"cleanModel()\"\n                  (click)=\"cleanModel(); $event.preventDefault()\"\n                  (keydown.enter)=\"cleanModel(); $event.preventDefault()\"\n                ></po-clean>\n              }\n            }\n            <div\n              #iconLookup\n              tabindex=\"0\"\n              role=\"button\"\n              class=\"po-lookup-button po-lookup-button-trigger po-field-icon\"\n              [class.po-field-icon-disabled]=\"isDisabled\"\n              [ariaLabel]=\"literals.search\"\n              (p-change-event)=\"openLookup()\"\n              (click)=\"!isDisabled && openLookup(); $event.preventDefault()\"\n              (keydown.enter)=\"!isDisabled && openLookup(); $event.preventDefault()\"\n            >\n              <po-icon\n                p-icon=\"ICON_SEARCH\"\n                [class.po-field-icon]=\"!isDisabled\"\n                [class.po-field-icon-aa]=\"!isDisabled && size === 'small'\"\n              ></po-icon>\n            </div>\n          </div>\n        </div>\n\n        @if (needsHelper) {\n          <ng-container *ngTemplateOutlet=\"poHelperTemplate\"></ng-container>\n        }\n      </div>\n    </div>\n  } @else {\n    <div\n      class=\"po-field-container-content po-lookup\"\n      [class.po-lookup-disabled]=\"disabled\"\n      [class.po-lookup-loading]=\"loading\"\n    >\n      <div class=\"po-field-container-content-helper-wrapper\">\n        <div class=\"po-field-container-input\">\n          <div\n            #inp\n            [tabindex]=\"isDisabled ? -1 : 0\"\n            class=\"po-lookup-input po-input-icon-right po-icon-input\"\n            [ngClass]=\"clean && inp.value ? 'po-input-double-icon-right' : 'po-input-icon-right'\"\n            [class.po-lookup-input-auto]=\"autoHeight\"\n            [class.po-lookup-input-static]=\"!autoHeight\"\n            [class.po-lookup-input-padding-button-clean]=\"clean || loading\"\n            [class.po-lookup-input-disabled]=\"isDisabled\"\n            [class.po-lookup-input-auto-dynamic-height]=\"isExpandedHeight\"\n            (blur)=\"onBlur()\"\n            (keydown)=\"onKeyDown($event)\"\n          >\n            @if (placeholder && !disclaimers?.length) {\n              <span class=\"po-lookup-input-placeholder\">{{ placeholder }}</span>\n            }\n            @for (disclaimer of visibleDisclaimers; track $index) {\n              <po-disclaimer\n                class=\"po-lookup-input-disclaimer\"\n                [p-label]=\"disclaimer.label\"\n                [p-value]=\"disclaimer.value\"\n                [p-hide-close]=\"disclaimer.value === '' || isDisabled\"\n                [class.po-clickable]=\"disclaimer.value === '' && !isDisabled\"\n                (p-close-action)=\"closeDisclaimer(disclaimer.value)\"\n              ></po-disclaimer>\n            }\n          </div>\n          <div class=\"po-field-icon-container-right po-lookup-buttons\">\n            @if (loading) {\n              <div class=\"po-lookup-button po-lookup-button-loading\">\n                <po-loading-icon class=\"po-lookup-loading-icon\" [p-size]=\"mapSizeToIcon(size)\"></po-loading-icon>\n              </div>\n            } @else {\n              @if (clean && !isDisabled && !!inp.value) {\n                <po-clean\n                  tabindex=\"0\"\n                  role=\"button\"\n                  [attr.aria-label]=\"literals.clean\"\n                  class=\"po-lookup-button po-lookup-button-clean\"\n                  [p-element-ref]=\"inp\"\n                  [p-size]=\"size\"\n                  (p-change-event)=\"cleanModel()\"\n                  (click)=\"cleanModel(); $event.preventDefault()\"\n                  (keydown.enter)=\"cleanModel(); $event.preventDefault()\"\n                ></po-clean>\n              }\n            }\n            <div\n              #iconLookup\n              tabindex=\"0\"\n              role=\"button\"\n              class=\"po-lookup-button po-lookup-button-trigger po-field-icon\"\n              [class.po-field-icon-disabled]=\"isDisabled\"\n              [ariaLabel]=\"literals.search\"\n              (p-change-event)=\"openLookup()\"\n              (click)=\"!isDisabled && openLookup(); $event.preventDefault()\"\n              (keydown.enter)=\"!isDisabled && openLookup(); $event.preventDefault()\"\n            >\n              <po-icon\n                p-icon=\"ICON_SEARCH\"\n                [class.po-field-icon]=\"!isDisabled\"\n                [class.po-field-icon-aa]=\"!isDisabled && size === 'small'\"\n              ></po-icon>\n            </div>\n          </div>\n        </div>\n\n        @if (needsHelper) {\n          <ng-container *ngTemplateOutlet=\"poHelperTemplate\"></ng-container>\n        }\n      </div>\n    </div>\n  }\n\n  <po-field-container-bottom\n    [p-append-in-body]=\"appendBox\"\n    [p-help]=\"help\"\n    [p-disabled]=\"isDisabled\"\n    [p-error-pattern]=\"getErrorPattern()\"\n    [p-error-limit]=\"errorLimit\"\n    [p-size]=\"size\"\n  ></po-field-container-bottom>\n</po-field-container>\n" }]
         }], ctorParameters: () => [], propDecorators: { helperEl: [{
                 type: ViewChild,
                 args: ['helperEl', { read: PoHelperComponent, static: false }]
@@ -56079,7 +56022,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
  * @description
  *
  * Módulo dos componentes: po-checkbox, po-checkbox-group, po-combo, po-datepicker, po-datetimepicker, po-datepicker-range, po-email, po-input,
- * po-lookup, po-number, po-multiselect, po-password, po-radio-group, po-select, po-switch, po-textarea, po-upload, po-url e po-search-ai.
+ * po-lookup, po-number, po-multiselect, po-password, po-radio-group, po-select, po-switch, po-textarea, po-timepicker, po-upload, po-url e po-search-ai.
  *
  * > Não esqueça de importar o módulo `FormsModule` para usar os componentes de formulários e caso esteja trabalhando com
  * > formulários reativos, importe o módulo `ReactiveFormsModule`, ambos nativos do Angular.
@@ -61150,11 +61093,11 @@ class PoMenuItemComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: PoMenuItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: PoMenuItemComponent, isStandalone: false, selector: "po-menu-item", inputs: { action: ["p-action", "action"], badgeAlert: ["p-badge-alert", "badgeAlert"], badgeColor: ["p-badge-color", "badgeColor"], collapsedMenu: ["p-collapsed-menu", "collapsedMenu"], icon: ["p-icon", "icon"], id: ["p-id", "id"], isOpened: ["p-is-opened", "isOpened"], label: ["p-label", "label"], level: ["p-level", "level"], link: ["p-link", "link"], shortLabel: ["p-short-label", "shortLabel"], type: ["p-type", "type"], badgeValue: ["p-badge-value", "badgeValue"], isSelected: ["p-is-selected", "isSelected"], isSubItem: ["p-is-sub-item", "isSubItem"], subItems: ["p-sub-items", "subItems"] }, viewQueries: [{ propertyName: "menuSubItems", first: true, predicate: ["menuSubItems"], descendants: true }], ngImport: i0, template: "<!-- menu com link interno -->\n@if (type === 'internalLink') {\n  <a\n    class=\"po-menu-item-link\"\n    role=\"menuitem\"\n    [attr.aria-label]=\"label\"\n    [routerLink]=\"link\"\n    (keydown.enter)=\"clickMenuItem($event)\"\n    (keydown.space)=\"clickMenuItem($event)\"\n    p-tooltip-position=\"right\"\n    [p-tooltip]=\"collapsedMenu && shortLabel ? shortLabel : undefined\"\n    [p-append-in-body]=\"true\"\n  >\n    <ng-container *ngTemplateOutlet=\"menuItemTemplate\"></ng-container>\n  </a>\n}\n<!-- menu com link externo -->\n@if (type === 'externalLink') {\n  <a\n    class=\"po-menu-item-link\"\n    role=\"menuitem\"\n    [attr.aria-label]=\"label\"\n    [href]=\"link\"\n    (keydown.enter)=\"clickMenuItem($event)\"\n    (keydown.space)=\"clickMenuItem($event)\"\n    p-tooltip-position=\"right\"\n    [p-tooltip]=\"collapsedMenu && shortLabel ? shortLabel : undefined\"\n    [p-append-in-body]=\"true\"\n  >\n    <ng-container *ngTemplateOutlet=\"menuItemTemplate\"></ng-container>\n  </a>\n}\n<!-- menu sem link -->\n@if (type === 'noLink') {\n  <a\n    class=\"po-menu-item-link\"\n    href=\"javascript:;\"\n    role=\"menuitem\"\n    [attr.aria-label]=\"label\"\n    (keydown.enter)=\"clickMenuItem($event)\"\n    (keydown.space)=\"clickMenuItem($event)\"\n    p-tooltip-position=\"right\"\n    [p-tooltip]=\"collapsedMenu && shortLabel ? shortLabel : undefined\"\n    [p-append-in-body]=\"true\"\n  >\n    <ng-container *ngTemplateOutlet=\"menuItemTemplate\"></ng-container>\n  </a>\n}\n<!-- menu sem dados -->\n@if (type === 'noData') {\n  <div class=\"po-menu-item-link\" role=\"none\">\n    <ng-container *ngTemplateOutlet=\"menuItemTemplate\"></ng-container>\n  </div>\n}\n<!-- menu com sub itens -->\n@if (type === 'subItems') {\n  <div class=\"po-menu-item-link po-clickable\" role=\"menuitem\" [attr.aria-expanded]=\"isOpened ? true : false\">\n    <ng-container *ngTemplateOutlet=\"menuItemTemplate\"></ng-container>\n    <div\n      #menuSubItems\n      class=\"po-menu-sub-items\"\n      [hidden]=\"collapsedMenu || !isOpened\"\n      [attr.aria-expanded]=\"isOpened ? true : false\"\n      [attr.aria-hidden]=\"!isOpened ? true : false\"\n      role=\"group\"\n      [style.maxHeight.px]=\"maxHeight\"\n    >\n      <ul class=\"po-menu-sub-items-list\">\n        @for (subItem of subItems; track subItem) {\n          <li class=\"po-menu-sub-items-list-item\" [attr.aria-level]=\"subItem.level\">\n            <po-menu-item\n              p-is-sub-item\n              [p-action]=\"subItem.action\"\n              [p-badge-alert]=\"subItem.badgeAlert\"\n              [p-badge-color]=\"subItem.badge ? subItem.badge.color : undefined\"\n              [p-badge-value]=\"subItem.badge ? subItem.badge.value : undefined\"\n              [p-id]=\"subItem.id\"\n              [p-label]=\"subItem.label\"\n              [p-level]=\"subItem.level\"\n              [p-link]=\"subItem.link\"\n              [p-sub-items]=\"subItem.subItems\"\n              [p-type]=\"subItem.type\"\n            ></po-menu-item>\n          </li>\n        }\n      </ul>\n    </div>\n  </div>\n}\n\n<ng-template #menuItemTemplate>\n  <div\n    p-tooltip-position=\"right\"\n    [p-tooltip]=\"type === 'subItems' && collapsedMenu && shortLabel ? shortLabel : undefined\"\n    [p-append-in-body]=\"true\"\n    class=\"po-menu-item\"\n    [tabindex]=\"type === 'subItems' ? 0 : -1\"\n    [attr.aria-label]=\"label\"\n    [attr.role]=\"type === 'subItems' ? 'menuitem' : undefined\"\n    [class.po-menu-icon-container]=\"level === 1 && icon\"\n    [class.po-menu-item-selected]=\"isSelected\"\n    [class.po-menu-item-level-two]=\"level === 2\"\n    [class.po-menu-item-level-three]=\"level === 3\"\n    [class.po-menu-item-level-four]=\"level === 4\"\n    [class.po-menu-item-grouper-up]=\"type === 'subItems' && isOpened\"\n    [class.po-menu-item-grouper-down]=\"type === 'subItems' && !isOpened\"\n    [class.po-menu-item-no-data]=\"type === 'noData'\"\n    [class.po-menu-sub-item-selected]=\"isSelectedSubItem\"\n    (click)=\"clickMenuItem($event)\"\n    (keydown.enter)=\"clickMenuItem($event)\"\n    (keydown.space)=\"clickMenuItem($event)\"\n  >\n    @if (level === 1 && icon) {\n      <po-icon aria-hidden=\"true\" class=\"po-menu-icon-item\" [p-icon]=\"icon\"></po-icon>\n    }\n\n    @if (type === 'subItems' && !collapsedMenu) {\n      <po-icon\n        class=\"po-menu-group-icon\"\n        [p-icon]=\"isOpened ? 'ICON_ARROW_UP po-field-icon' : 'ICON_ARROW_DOWN po-field-icon'\"\n      ></po-icon>\n    }\n\n    <span [class.po-menu-icon-label]=\"level === 1 && icon\">\n      {{ label }}\n    </span>\n\n    @if (canShowBadge) {\n      <po-badge\n        aria-hidden=\"true\"\n        [ngClass]=\"!collapsedMenu ? 'po-menu-badge-align' : 'po-menu-badge-align-collapsed'\"\n        [p-color]=\"badgeColor\"\n        [p-value]=\"badgeValue\"\n      ></po-badge>\n    }\n\n    @if (badgeAlert) {\n      <span\n        aria-hidden=\"true\"\n        class=\"po-color-07\"\n        [ngClass]=\"!collapsedMenu ? 'po-menu-badge-alert' : 'po-menu-badge-alert-collapsed'\"\n      ></span>\n    }\n  </div>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: PoBadgeComponent, selector: "po-badge" }, { kind: "component", type: PoIconComponent, selector: "po-icon", inputs: ["p-icon"] }, { kind: "directive", type: PoTooltipDirective, selector: "[p-tooltip]" }, { kind: "component", type: PoMenuItemComponent, selector: "po-menu-item", inputs: ["p-action", "p-badge-alert", "p-badge-color", "p-collapsed-menu", "p-icon", "p-id", "p-is-opened", "p-label", "p-level", "p-link", "p-short-label", "p-type", "p-badge-value", "p-is-selected", "p-is-sub-item", "p-sub-items"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: PoMenuItemComponent, isStandalone: false, selector: "po-menu-item", inputs: { action: ["p-action", "action"], badgeAlert: ["p-badge-alert", "badgeAlert"], badgeColor: ["p-badge-color", "badgeColor"], collapsedMenu: ["p-collapsed-menu", "collapsedMenu"], icon: ["p-icon", "icon"], id: ["p-id", "id"], isOpened: ["p-is-opened", "isOpened"], label: ["p-label", "label"], level: ["p-level", "level"], link: ["p-link", "link"], shortLabel: ["p-short-label", "shortLabel"], type: ["p-type", "type"], badgeValue: ["p-badge-value", "badgeValue"], isSelected: ["p-is-selected", "isSelected"], isSubItem: ["p-is-sub-item", "isSubItem"], subItems: ["p-sub-items", "subItems"] }, viewQueries: [{ propertyName: "menuSubItems", first: true, predicate: ["menuSubItems"], descendants: true }], ngImport: i0, template: "<!-- menu com link interno -->\n@if (type === 'internalLink') {\n  <a\n    class=\"po-menu-item-link\"\n    role=\"menuitem\"\n    [attr.aria-label]=\"label\"\n    [routerLink]=\"link\"\n    (keydown.enter)=\"clickMenuItem($event)\"\n    (keydown.space)=\"clickMenuItem($event)\"\n    p-tooltip-position=\"right\"\n    [p-tooltip]=\"collapsedMenu && shortLabel ? shortLabel : undefined\"\n    [p-append-in-body]=\"true\"\n  >\n    <ng-container *ngTemplateOutlet=\"menuItemTemplate\"></ng-container>\n  </a>\n}\n<!-- menu com link externo -->\n@if (type === 'externalLink') {\n  <a\n    class=\"po-menu-item-link\"\n    role=\"menuitem\"\n    [attr.aria-label]=\"label\"\n    [href]=\"link\"\n    (keydown.enter)=\"clickMenuItem($event)\"\n    (keydown.space)=\"clickMenuItem($event)\"\n    p-tooltip-position=\"right\"\n    [p-tooltip]=\"collapsedMenu && shortLabel ? shortLabel : undefined\"\n    [p-append-in-body]=\"true\"\n  >\n    <ng-container *ngTemplateOutlet=\"menuItemTemplate\"></ng-container>\n  </a>\n}\n<!-- menu sem link -->\n@if (type === 'noLink') {\n  <a\n    class=\"po-menu-item-link\"\n    href=\"javascript:;\"\n    role=\"menuitem\"\n    [attr.aria-label]=\"label\"\n    (keydown.enter)=\"clickMenuItem($event)\"\n    (keydown.space)=\"clickMenuItem($event)\"\n    p-tooltip-position=\"right\"\n    [p-tooltip]=\"collapsedMenu && shortLabel ? shortLabel : undefined\"\n    [p-append-in-body]=\"true\"\n  >\n    <ng-container *ngTemplateOutlet=\"menuItemTemplate\"></ng-container>\n  </a>\n}\n<!-- menu sem dados -->\n@if (type === 'noData') {\n  <div class=\"po-menu-item-link\" role=\"none\">\n    <ng-container *ngTemplateOutlet=\"menuItemTemplate\"></ng-container>\n  </div>\n}\n<!-- menu com sub itens -->\n@if (type === 'subItems') {\n  <div class=\"po-menu-item-link po-clickable\" role=\"menuitem\" [attr.aria-expanded]=\"isOpened ? true : false\">\n    <ng-container *ngTemplateOutlet=\"menuItemTemplate\"></ng-container>\n    <div\n      #menuSubItems\n      class=\"po-menu-sub-items\"\n      [hidden]=\"collapsedMenu || !isOpened\"\n      [attr.aria-expanded]=\"isOpened ? true : false\"\n      [attr.aria-hidden]=\"!isOpened ? true : false\"\n      role=\"group\"\n      [style.maxHeight.px]=\"maxHeight\"\n    >\n      <ul class=\"po-menu-sub-items-list\">\n        @for (subItem of subItems; track $index) {\n          <li class=\"po-menu-sub-items-list-item\" [attr.aria-level]=\"subItem.level\">\n            <po-menu-item\n              p-is-sub-item\n              [p-action]=\"subItem.action\"\n              [p-badge-alert]=\"subItem.badgeAlert\"\n              [p-badge-color]=\"subItem.badge ? subItem.badge.color : undefined\"\n              [p-badge-value]=\"subItem.badge ? subItem.badge.value : undefined\"\n              [p-id]=\"subItem.id\"\n              [p-label]=\"subItem.label\"\n              [p-level]=\"subItem.level\"\n              [p-link]=\"subItem.link\"\n              [p-sub-items]=\"subItem.subItems\"\n              [p-type]=\"subItem.type\"\n            ></po-menu-item>\n          </li>\n        }\n      </ul>\n    </div>\n  </div>\n}\n\n<ng-template #menuItemTemplate>\n  <div\n    p-tooltip-position=\"right\"\n    [p-tooltip]=\"type === 'subItems' && collapsedMenu && shortLabel ? shortLabel : undefined\"\n    [p-append-in-body]=\"true\"\n    class=\"po-menu-item\"\n    [tabindex]=\"type === 'subItems' ? 0 : -1\"\n    [attr.aria-label]=\"label\"\n    [attr.role]=\"type === 'subItems' ? 'menuitem' : undefined\"\n    [class.po-menu-icon-container]=\"level === 1 && icon\"\n    [class.po-menu-item-selected]=\"isSelected\"\n    [class.po-menu-item-level-two]=\"level === 2\"\n    [class.po-menu-item-level-three]=\"level === 3\"\n    [class.po-menu-item-level-four]=\"level === 4\"\n    [class.po-menu-item-grouper-up]=\"type === 'subItems' && isOpened\"\n    [class.po-menu-item-grouper-down]=\"type === 'subItems' && !isOpened\"\n    [class.po-menu-item-no-data]=\"type === 'noData'\"\n    [class.po-menu-sub-item-selected]=\"isSelectedSubItem\"\n    (click)=\"clickMenuItem($event)\"\n    (keydown.enter)=\"clickMenuItem($event)\"\n    (keydown.space)=\"clickMenuItem($event)\"\n  >\n    @if (level === 1 && icon) {\n      <po-icon aria-hidden=\"true\" class=\"po-menu-icon-item\" [p-icon]=\"icon\"></po-icon>\n    }\n\n    @if (type === 'subItems' && !collapsedMenu) {\n      <po-icon\n        class=\"po-menu-group-icon\"\n        [p-icon]=\"isOpened ? 'ICON_ARROW_UP po-field-icon' : 'ICON_ARROW_DOWN po-field-icon'\"\n      ></po-icon>\n    }\n\n    <span [class.po-menu-icon-label]=\"level === 1 && icon\">\n      {{ label }}\n    </span>\n\n    @if (canShowBadge) {\n      <po-badge\n        aria-hidden=\"true\"\n        [ngClass]=\"!collapsedMenu ? 'po-menu-badge-align' : 'po-menu-badge-align-collapsed'\"\n        [p-color]=\"badgeColor\"\n        [p-value]=\"badgeValue\"\n      ></po-badge>\n    }\n\n    @if (badgeAlert) {\n      <span\n        aria-hidden=\"true\"\n        class=\"po-color-07\"\n        [ngClass]=\"!collapsedMenu ? 'po-menu-badge-alert' : 'po-menu-badge-alert-collapsed'\"\n      ></span>\n    }\n  </div>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: PoBadgeComponent, selector: "po-badge" }, { kind: "component", type: PoIconComponent, selector: "po-icon", inputs: ["p-icon"] }, { kind: "directive", type: PoTooltipDirective, selector: "[p-tooltip]" }, { kind: "component", type: PoMenuItemComponent, selector: "po-menu-item", inputs: ["p-action", "p-badge-alert", "p-badge-color", "p-collapsed-menu", "p-icon", "p-id", "p-is-opened", "p-label", "p-level", "p-link", "p-short-label", "p-type", "p-badge-value", "p-is-selected", "p-is-sub-item", "p-sub-items"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: PoMenuItemComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'po-menu-item', standalone: false, template: "<!-- menu com link interno -->\n@if (type === 'internalLink') {\n  <a\n    class=\"po-menu-item-link\"\n    role=\"menuitem\"\n    [attr.aria-label]=\"label\"\n    [routerLink]=\"link\"\n    (keydown.enter)=\"clickMenuItem($event)\"\n    (keydown.space)=\"clickMenuItem($event)\"\n    p-tooltip-position=\"right\"\n    [p-tooltip]=\"collapsedMenu && shortLabel ? shortLabel : undefined\"\n    [p-append-in-body]=\"true\"\n  >\n    <ng-container *ngTemplateOutlet=\"menuItemTemplate\"></ng-container>\n  </a>\n}\n<!-- menu com link externo -->\n@if (type === 'externalLink') {\n  <a\n    class=\"po-menu-item-link\"\n    role=\"menuitem\"\n    [attr.aria-label]=\"label\"\n    [href]=\"link\"\n    (keydown.enter)=\"clickMenuItem($event)\"\n    (keydown.space)=\"clickMenuItem($event)\"\n    p-tooltip-position=\"right\"\n    [p-tooltip]=\"collapsedMenu && shortLabel ? shortLabel : undefined\"\n    [p-append-in-body]=\"true\"\n  >\n    <ng-container *ngTemplateOutlet=\"menuItemTemplate\"></ng-container>\n  </a>\n}\n<!-- menu sem link -->\n@if (type === 'noLink') {\n  <a\n    class=\"po-menu-item-link\"\n    href=\"javascript:;\"\n    role=\"menuitem\"\n    [attr.aria-label]=\"label\"\n    (keydown.enter)=\"clickMenuItem($event)\"\n    (keydown.space)=\"clickMenuItem($event)\"\n    p-tooltip-position=\"right\"\n    [p-tooltip]=\"collapsedMenu && shortLabel ? shortLabel : undefined\"\n    [p-append-in-body]=\"true\"\n  >\n    <ng-container *ngTemplateOutlet=\"menuItemTemplate\"></ng-container>\n  </a>\n}\n<!-- menu sem dados -->\n@if (type === 'noData') {\n  <div class=\"po-menu-item-link\" role=\"none\">\n    <ng-container *ngTemplateOutlet=\"menuItemTemplate\"></ng-container>\n  </div>\n}\n<!-- menu com sub itens -->\n@if (type === 'subItems') {\n  <div class=\"po-menu-item-link po-clickable\" role=\"menuitem\" [attr.aria-expanded]=\"isOpened ? true : false\">\n    <ng-container *ngTemplateOutlet=\"menuItemTemplate\"></ng-container>\n    <div\n      #menuSubItems\n      class=\"po-menu-sub-items\"\n      [hidden]=\"collapsedMenu || !isOpened\"\n      [attr.aria-expanded]=\"isOpened ? true : false\"\n      [attr.aria-hidden]=\"!isOpened ? true : false\"\n      role=\"group\"\n      [style.maxHeight.px]=\"maxHeight\"\n    >\n      <ul class=\"po-menu-sub-items-list\">\n        @for (subItem of subItems; track subItem) {\n          <li class=\"po-menu-sub-items-list-item\" [attr.aria-level]=\"subItem.level\">\n            <po-menu-item\n              p-is-sub-item\n              [p-action]=\"subItem.action\"\n              [p-badge-alert]=\"subItem.badgeAlert\"\n              [p-badge-color]=\"subItem.badge ? subItem.badge.color : undefined\"\n              [p-badge-value]=\"subItem.badge ? subItem.badge.value : undefined\"\n              [p-id]=\"subItem.id\"\n              [p-label]=\"subItem.label\"\n              [p-level]=\"subItem.level\"\n              [p-link]=\"subItem.link\"\n              [p-sub-items]=\"subItem.subItems\"\n              [p-type]=\"subItem.type\"\n            ></po-menu-item>\n          </li>\n        }\n      </ul>\n    </div>\n  </div>\n}\n\n<ng-template #menuItemTemplate>\n  <div\n    p-tooltip-position=\"right\"\n    [p-tooltip]=\"type === 'subItems' && collapsedMenu && shortLabel ? shortLabel : undefined\"\n    [p-append-in-body]=\"true\"\n    class=\"po-menu-item\"\n    [tabindex]=\"type === 'subItems' ? 0 : -1\"\n    [attr.aria-label]=\"label\"\n    [attr.role]=\"type === 'subItems' ? 'menuitem' : undefined\"\n    [class.po-menu-icon-container]=\"level === 1 && icon\"\n    [class.po-menu-item-selected]=\"isSelected\"\n    [class.po-menu-item-level-two]=\"level === 2\"\n    [class.po-menu-item-level-three]=\"level === 3\"\n    [class.po-menu-item-level-four]=\"level === 4\"\n    [class.po-menu-item-grouper-up]=\"type === 'subItems' && isOpened\"\n    [class.po-menu-item-grouper-down]=\"type === 'subItems' && !isOpened\"\n    [class.po-menu-item-no-data]=\"type === 'noData'\"\n    [class.po-menu-sub-item-selected]=\"isSelectedSubItem\"\n    (click)=\"clickMenuItem($event)\"\n    (keydown.enter)=\"clickMenuItem($event)\"\n    (keydown.space)=\"clickMenuItem($event)\"\n  >\n    @if (level === 1 && icon) {\n      <po-icon aria-hidden=\"true\" class=\"po-menu-icon-item\" [p-icon]=\"icon\"></po-icon>\n    }\n\n    @if (type === 'subItems' && !collapsedMenu) {\n      <po-icon\n        class=\"po-menu-group-icon\"\n        [p-icon]=\"isOpened ? 'ICON_ARROW_UP po-field-icon' : 'ICON_ARROW_DOWN po-field-icon'\"\n      ></po-icon>\n    }\n\n    <span [class.po-menu-icon-label]=\"level === 1 && icon\">\n      {{ label }}\n    </span>\n\n    @if (canShowBadge) {\n      <po-badge\n        aria-hidden=\"true\"\n        [ngClass]=\"!collapsedMenu ? 'po-menu-badge-align' : 'po-menu-badge-align-collapsed'\"\n        [p-color]=\"badgeColor\"\n        [p-value]=\"badgeValue\"\n      ></po-badge>\n    }\n\n    @if (badgeAlert) {\n      <span\n        aria-hidden=\"true\"\n        class=\"po-color-07\"\n        [ngClass]=\"!collapsedMenu ? 'po-menu-badge-alert' : 'po-menu-badge-alert-collapsed'\"\n      ></span>\n    }\n  </div>\n</ng-template>\n" }]
+            args: [{ selector: 'po-menu-item', standalone: false, template: "<!-- menu com link interno -->\n@if (type === 'internalLink') {\n  <a\n    class=\"po-menu-item-link\"\n    role=\"menuitem\"\n    [attr.aria-label]=\"label\"\n    [routerLink]=\"link\"\n    (keydown.enter)=\"clickMenuItem($event)\"\n    (keydown.space)=\"clickMenuItem($event)\"\n    p-tooltip-position=\"right\"\n    [p-tooltip]=\"collapsedMenu && shortLabel ? shortLabel : undefined\"\n    [p-append-in-body]=\"true\"\n  >\n    <ng-container *ngTemplateOutlet=\"menuItemTemplate\"></ng-container>\n  </a>\n}\n<!-- menu com link externo -->\n@if (type === 'externalLink') {\n  <a\n    class=\"po-menu-item-link\"\n    role=\"menuitem\"\n    [attr.aria-label]=\"label\"\n    [href]=\"link\"\n    (keydown.enter)=\"clickMenuItem($event)\"\n    (keydown.space)=\"clickMenuItem($event)\"\n    p-tooltip-position=\"right\"\n    [p-tooltip]=\"collapsedMenu && shortLabel ? shortLabel : undefined\"\n    [p-append-in-body]=\"true\"\n  >\n    <ng-container *ngTemplateOutlet=\"menuItemTemplate\"></ng-container>\n  </a>\n}\n<!-- menu sem link -->\n@if (type === 'noLink') {\n  <a\n    class=\"po-menu-item-link\"\n    href=\"javascript:;\"\n    role=\"menuitem\"\n    [attr.aria-label]=\"label\"\n    (keydown.enter)=\"clickMenuItem($event)\"\n    (keydown.space)=\"clickMenuItem($event)\"\n    p-tooltip-position=\"right\"\n    [p-tooltip]=\"collapsedMenu && shortLabel ? shortLabel : undefined\"\n    [p-append-in-body]=\"true\"\n  >\n    <ng-container *ngTemplateOutlet=\"menuItemTemplate\"></ng-container>\n  </a>\n}\n<!-- menu sem dados -->\n@if (type === 'noData') {\n  <div class=\"po-menu-item-link\" role=\"none\">\n    <ng-container *ngTemplateOutlet=\"menuItemTemplate\"></ng-container>\n  </div>\n}\n<!-- menu com sub itens -->\n@if (type === 'subItems') {\n  <div class=\"po-menu-item-link po-clickable\" role=\"menuitem\" [attr.aria-expanded]=\"isOpened ? true : false\">\n    <ng-container *ngTemplateOutlet=\"menuItemTemplate\"></ng-container>\n    <div\n      #menuSubItems\n      class=\"po-menu-sub-items\"\n      [hidden]=\"collapsedMenu || !isOpened\"\n      [attr.aria-expanded]=\"isOpened ? true : false\"\n      [attr.aria-hidden]=\"!isOpened ? true : false\"\n      role=\"group\"\n      [style.maxHeight.px]=\"maxHeight\"\n    >\n      <ul class=\"po-menu-sub-items-list\">\n        @for (subItem of subItems; track $index) {\n          <li class=\"po-menu-sub-items-list-item\" [attr.aria-level]=\"subItem.level\">\n            <po-menu-item\n              p-is-sub-item\n              [p-action]=\"subItem.action\"\n              [p-badge-alert]=\"subItem.badgeAlert\"\n              [p-badge-color]=\"subItem.badge ? subItem.badge.color : undefined\"\n              [p-badge-value]=\"subItem.badge ? subItem.badge.value : undefined\"\n              [p-id]=\"subItem.id\"\n              [p-label]=\"subItem.label\"\n              [p-level]=\"subItem.level\"\n              [p-link]=\"subItem.link\"\n              [p-sub-items]=\"subItem.subItems\"\n              [p-type]=\"subItem.type\"\n            ></po-menu-item>\n          </li>\n        }\n      </ul>\n    </div>\n  </div>\n}\n\n<ng-template #menuItemTemplate>\n  <div\n    p-tooltip-position=\"right\"\n    [p-tooltip]=\"type === 'subItems' && collapsedMenu && shortLabel ? shortLabel : undefined\"\n    [p-append-in-body]=\"true\"\n    class=\"po-menu-item\"\n    [tabindex]=\"type === 'subItems' ? 0 : -1\"\n    [attr.aria-label]=\"label\"\n    [attr.role]=\"type === 'subItems' ? 'menuitem' : undefined\"\n    [class.po-menu-icon-container]=\"level === 1 && icon\"\n    [class.po-menu-item-selected]=\"isSelected\"\n    [class.po-menu-item-level-two]=\"level === 2\"\n    [class.po-menu-item-level-three]=\"level === 3\"\n    [class.po-menu-item-level-four]=\"level === 4\"\n    [class.po-menu-item-grouper-up]=\"type === 'subItems' && isOpened\"\n    [class.po-menu-item-grouper-down]=\"type === 'subItems' && !isOpened\"\n    [class.po-menu-item-no-data]=\"type === 'noData'\"\n    [class.po-menu-sub-item-selected]=\"isSelectedSubItem\"\n    (click)=\"clickMenuItem($event)\"\n    (keydown.enter)=\"clickMenuItem($event)\"\n    (keydown.space)=\"clickMenuItem($event)\"\n  >\n    @if (level === 1 && icon) {\n      <po-icon aria-hidden=\"true\" class=\"po-menu-icon-item\" [p-icon]=\"icon\"></po-icon>\n    }\n\n    @if (type === 'subItems' && !collapsedMenu) {\n      <po-icon\n        class=\"po-menu-group-icon\"\n        [p-icon]=\"isOpened ? 'ICON_ARROW_UP po-field-icon' : 'ICON_ARROW_DOWN po-field-icon'\"\n      ></po-icon>\n    }\n\n    <span [class.po-menu-icon-label]=\"level === 1 && icon\">\n      {{ label }}\n    </span>\n\n    @if (canShowBadge) {\n      <po-badge\n        aria-hidden=\"true\"\n        [ngClass]=\"!collapsedMenu ? 'po-menu-badge-align' : 'po-menu-badge-align-collapsed'\"\n        [p-color]=\"badgeColor\"\n        [p-value]=\"badgeValue\"\n      ></po-badge>\n    }\n\n    @if (badgeAlert) {\n      <span\n        aria-hidden=\"true\"\n        class=\"po-color-07\"\n        [ngClass]=\"!collapsedMenu ? 'po-menu-badge-alert' : 'po-menu-badge-alert-collapsed'\"\n      ></span>\n    }\n  </div>\n</ng-template>\n" }]
         }], propDecorators: { action: [{
                 type: Input,
                 args: ['p-action']
@@ -65391,11 +65334,11 @@ class PoSlideCirclesComponent {
     /** Evento emitido ao clicar em um controle. */
     click = new EventEmitter();
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: PoSlideCirclesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: PoSlideCirclesComponent, isStandalone: false, selector: "po-slide-circles", inputs: { currentSlideIndex: ["p-current-slide-index", "currentSlideIndex"], items: ["p-items", "items"] }, outputs: { click: "p-click" }, ngImport: i0, template: "<div class=\"po-slide-circles\">\n  @for (item of items; track item; let index = $index) {\n    <div\n      class=\"po-slide-circle\"\n      [class.po-slide-active-circle]=\"index === currentSlideIndex\"\n      (click)=\"click.emit(index)\"\n    ></div>\n  }\n</div>\n" });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: PoSlideCirclesComponent, isStandalone: false, selector: "po-slide-circles", inputs: { currentSlideIndex: ["p-current-slide-index", "currentSlideIndex"], items: ["p-items", "items"] }, outputs: { click: "p-click" }, ngImport: i0, template: "<div class=\"po-slide-circles\">\n  @for (item of items; track $index; let index = $index) {\n    <div\n      class=\"po-slide-circle\"\n      [class.po-slide-active-circle]=\"index === currentSlideIndex\"\n      (click)=\"click.emit(index)\"\n    ></div>\n  }\n</div>\n" });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: PoSlideCirclesComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'po-slide-circles', standalone: false, template: "<div class=\"po-slide-circles\">\n  @for (item of items; track item; let index = $index) {\n    <div\n      class=\"po-slide-circle\"\n      [class.po-slide-active-circle]=\"index === currentSlideIndex\"\n      (click)=\"click.emit(index)\"\n    ></div>\n  }\n</div>\n" }]
+            args: [{ selector: 'po-slide-circles', standalone: false, template: "<div class=\"po-slide-circles\">\n  @for (item of items; track $index; let index = $index) {\n    <div\n      class=\"po-slide-circle\"\n      [class.po-slide-active-circle]=\"index === currentSlideIndex\"\n      (click)=\"click.emit(index)\"\n    ></div>\n  }\n</div>\n" }]
         }], propDecorators: { currentSlideIndex: [{
                 type: Input,
                 args: ['p-current-slide-index']
@@ -65897,11 +65840,11 @@ class PoSlideComponent extends PoSlideBaseComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: PoSlideComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: PoSlideComponent, isStandalone: false, selector: "po-slide", host: { listeners: { "window:resize": "onResize()" } }, queries: [{ propertyName: "slideContentTemplate", first: true, predicate: PoSlideContentTemplateDirective, descendants: true, static: true }], viewQueries: [{ propertyName: "slide", first: true, predicate: ["slide"], descendants: true, static: true }, { propertyName: "itemsElements", predicate: PoSlideItemComponent, descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"po-slide-wrapper\">\n  <div class=\"po-slide-outer\">\n    <div class=\"po-slide-inner\" #slide>\n      @for (item of slideItems; track item; let index = $index) {\n        <po-slide-item\n          [p-action]=\"item.action\"\n          [p-data]=\"item\"\n          [p-image]=\"item.image\"\n          [p-image-height]=\"imageHeight\"\n          [p-template]=\"slideContentTemplate\"\n          [p-alt]=\"item.alt\"\n          [p-link]=\"item.link\"\n        >\n        </po-slide-item>\n      }\n    </div>\n\n    @if (!hideArrows && hasSlides && slides.length > 1) {\n      <po-slide-control p-control=\"previous\" (p-click)=\"previousControl()\"> </po-slide-control>\n    }\n\n    @if (!hideArrows && hasSlides && slides.length > 1) {\n      <po-slide-control p-control=\"next\" (p-click)=\"nextControl()\"> </po-slide-control>\n    }\n  </div>\n\n  @if (hasSlides && slides.length > 1) {\n    <po-slide-circles [p-current-slide-index]=\"currentSlideIndex\" [p-items]=\"slideItems\" (p-click)=\"goToItem($event)\">\n    </po-slide-circles>\n  }\n</div>\n", dependencies: [{ kind: "component", type: PoSlideCirclesComponent, selector: "po-slide-circles", inputs: ["p-current-slide-index", "p-items"], outputs: ["p-click"] }, { kind: "component", type: PoSlideControlComponent, selector: "po-slide-control", inputs: ["p-control"], outputs: ["p-click"] }, { kind: "component", type: PoSlideItemComponent, selector: "po-slide-item", inputs: ["p-action", "p-alt", "p-data", "p-image", "p-image-height", "p-template", "p-link"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: PoSlideComponent, isStandalone: false, selector: "po-slide", host: { listeners: { "window:resize": "onResize()" } }, queries: [{ propertyName: "slideContentTemplate", first: true, predicate: PoSlideContentTemplateDirective, descendants: true, static: true }], viewQueries: [{ propertyName: "slide", first: true, predicate: ["slide"], descendants: true, static: true }, { propertyName: "itemsElements", predicate: PoSlideItemComponent, descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"po-slide-wrapper\">\n  <div class=\"po-slide-outer\">\n    <div class=\"po-slide-inner\" #slide>\n      @for (item of slideItems; track $index; let index = $index) {\n        <po-slide-item\n          [p-action]=\"item.action\"\n          [p-data]=\"item\"\n          [p-image]=\"item.image\"\n          [p-image-height]=\"imageHeight\"\n          [p-template]=\"slideContentTemplate\"\n          [p-alt]=\"item.alt\"\n          [p-link]=\"item.link\"\n        >\n        </po-slide-item>\n      }\n    </div>\n\n    @if (!hideArrows && hasSlides && slides.length > 1) {\n      <po-slide-control p-control=\"previous\" (p-click)=\"previousControl()\"> </po-slide-control>\n    }\n\n    @if (!hideArrows && hasSlides && slides.length > 1) {\n      <po-slide-control p-control=\"next\" (p-click)=\"nextControl()\"> </po-slide-control>\n    }\n  </div>\n\n  @if (hasSlides && slides.length > 1) {\n    <po-slide-circles [p-current-slide-index]=\"currentSlideIndex\" [p-items]=\"slideItems\" (p-click)=\"goToItem($event)\">\n    </po-slide-circles>\n  }\n</div>\n", dependencies: [{ kind: "component", type: PoSlideCirclesComponent, selector: "po-slide-circles", inputs: ["p-current-slide-index", "p-items"], outputs: ["p-click"] }, { kind: "component", type: PoSlideControlComponent, selector: "po-slide-control", inputs: ["p-control"], outputs: ["p-click"] }, { kind: "component", type: PoSlideItemComponent, selector: "po-slide-item", inputs: ["p-action", "p-alt", "p-data", "p-image", "p-image-height", "p-template", "p-link"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: PoSlideComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'po-slide', standalone: false, template: "<div class=\"po-slide-wrapper\">\n  <div class=\"po-slide-outer\">\n    <div class=\"po-slide-inner\" #slide>\n      @for (item of slideItems; track item; let index = $index) {\n        <po-slide-item\n          [p-action]=\"item.action\"\n          [p-data]=\"item\"\n          [p-image]=\"item.image\"\n          [p-image-height]=\"imageHeight\"\n          [p-template]=\"slideContentTemplate\"\n          [p-alt]=\"item.alt\"\n          [p-link]=\"item.link\"\n        >\n        </po-slide-item>\n      }\n    </div>\n\n    @if (!hideArrows && hasSlides && slides.length > 1) {\n      <po-slide-control p-control=\"previous\" (p-click)=\"previousControl()\"> </po-slide-control>\n    }\n\n    @if (!hideArrows && hasSlides && slides.length > 1) {\n      <po-slide-control p-control=\"next\" (p-click)=\"nextControl()\"> </po-slide-control>\n    }\n  </div>\n\n  @if (hasSlides && slides.length > 1) {\n    <po-slide-circles [p-current-slide-index]=\"currentSlideIndex\" [p-items]=\"slideItems\" (p-click)=\"goToItem($event)\">\n    </po-slide-circles>\n  }\n</div>\n" }]
+            args: [{ selector: 'po-slide', standalone: false, template: "<div class=\"po-slide-wrapper\">\n  <div class=\"po-slide-outer\">\n    <div class=\"po-slide-inner\" #slide>\n      @for (item of slideItems; track $index; let index = $index) {\n        <po-slide-item\n          [p-action]=\"item.action\"\n          [p-data]=\"item\"\n          [p-image]=\"item.image\"\n          [p-image-height]=\"imageHeight\"\n          [p-template]=\"slideContentTemplate\"\n          [p-alt]=\"item.alt\"\n          [p-link]=\"item.link\"\n        >\n        </po-slide-item>\n      }\n    </div>\n\n    @if (!hideArrows && hasSlides && slides.length > 1) {\n      <po-slide-control p-control=\"previous\" (p-click)=\"previousControl()\"> </po-slide-control>\n    }\n\n    @if (!hideArrows && hasSlides && slides.length > 1) {\n      <po-slide-control p-control=\"next\" (p-click)=\"nextControl()\"> </po-slide-control>\n    }\n  </div>\n\n  @if (hasSlides && slides.length > 1) {\n    <po-slide-circles [p-current-slide-index]=\"currentSlideIndex\" [p-items]=\"slideItems\" (p-click)=\"goToItem($event)\">\n    </po-slide-circles>\n  }\n</div>\n" }]
         }], propDecorators: { slideContentTemplate: [{
                 type: ContentChild,
                 args: [PoSlideContentTemplateDirective, { static: true }]
@@ -68203,11 +68146,11 @@ class PoContextTabButtonComponent extends PoTabButtonComponent {
         this.activeCloseIcon = false;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: PoContextTabButtonComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.19", type: PoContextTabButtonComponent, isStandalone: false, selector: "po-context-tab-button", inputs: { hideClose: ["p-hide-close", "hideClose"], showTooltip: ["p-show-tooltip", "showTooltip"], literals: ["p-literals", "literals"] }, outputs: { close: "p-close", changeVisible: "p-change-visible" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div\n  #tabButtom\n  role=\"tab\"\n  [p-tooltip]=\"widthButton > 239 || showTooltip ? label : ''\"\n  p-tooltip-position=\"top\"\n  class=\"po-tab-button-default\"\n  [id]=\"id\"\n  [ngClass]=\"{ 'po-tab-focusable': !disabled && !hide }\"\n  [attr.tabindex]=\"disabled ? null : 0\"\n  [attr.aria-selected]=\"active\"\n  [class.po-tab-button-active]=\"active\"\n  [class.po-tab-button-disabled]=\"disabled\"\n  (click)=\"onClick()\"\n  (focusin)=\"onFocusIn()\"\n  (focusout)=\"onFocusOut()\"\n  (keyup.enter)=\"onClick()\"\n>\n  <div class=\"po-tab-button-content\">\n    <span [ngClass]=\"!hideClose ? 'po-context-tab-button-label' : 'po-tab-button-label'\" class=\"po-text-ellipsis\">\n      {{ label }}\n    </span>\n    <div\n      class=\"po-tab-button-content-close-icon\"\n      *ngIf=\"!hideClose\"\n      (click)=\"closeTab($event)\"\n      (keydown)=\"closeTab($event)\"\n    >\n      <po-icon\n        [tabIndex]=\"activeCloseIcon ? 0 : -1\"\n        [attr.aria-label]=\"literals.close\"\n        p-icon=\"ICON_CLOSE\"\n        class=\"po-tab-button-icon-close\"\n      ></po-icon>\n    </div>\n  </div>\n</div>\n<div [ngClass]=\"{ 'po-tab-border-active': active, 'po-tab-border-disabled': !active }\"></div>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: PoIconComponent, selector: "po-icon", inputs: ["p-icon"] }, { kind: "directive", type: PoTooltipDirective, selector: "[p-tooltip]" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: PoContextTabButtonComponent, isStandalone: false, selector: "po-context-tab-button", inputs: { hideClose: ["p-hide-close", "hideClose"], showTooltip: ["p-show-tooltip", "showTooltip"], literals: ["p-literals", "literals"] }, outputs: { close: "p-close", changeVisible: "p-change-visible" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div\n  #tabButtom\n  role=\"tab\"\n  [p-tooltip]=\"widthButton > 239 || showTooltip ? label : ''\"\n  p-tooltip-position=\"top\"\n  class=\"po-tab-button-default\"\n  [id]=\"id\"\n  [ngClass]=\"{ 'po-tab-focusable': !disabled && !hide }\"\n  [attr.tabindex]=\"disabled ? null : 0\"\n  [attr.aria-selected]=\"active\"\n  [class.po-tab-button-active]=\"active\"\n  [class.po-tab-button-disabled]=\"disabled\"\n  (click)=\"onClick()\"\n  (focusin)=\"onFocusIn()\"\n  (focusout)=\"onFocusOut()\"\n  (keyup.enter)=\"onClick()\"\n>\n  <div class=\"po-tab-button-content\">\n    <span [ngClass]=\"!hideClose ? 'po-context-tab-button-label' : 'po-tab-button-label'\" class=\"po-text-ellipsis\">\n      {{ label }}\n    </span>\n    @if (!hideClose) {\n      <div class=\"po-tab-button-content-close-icon\" (click)=\"closeTab($event)\" (keydown)=\"closeTab($event)\">\n        <po-icon\n          [tabIndex]=\"activeCloseIcon ? 0 : -1\"\n          [attr.aria-label]=\"literals.close\"\n          p-icon=\"ICON_CLOSE\"\n          class=\"po-tab-button-icon-close\"\n        ></po-icon>\n      </div>\n    }\n  </div>\n</div>\n<div [ngClass]=\"{ 'po-tab-border-active': active, 'po-tab-border-disabled': !active }\"></div>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: PoIconComponent, selector: "po-icon", inputs: ["p-icon"] }, { kind: "directive", type: PoTooltipDirective, selector: "[p-tooltip]" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: PoContextTabButtonComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'po-context-tab-button', standalone: false, template: "<div\n  #tabButtom\n  role=\"tab\"\n  [p-tooltip]=\"widthButton > 239 || showTooltip ? label : ''\"\n  p-tooltip-position=\"top\"\n  class=\"po-tab-button-default\"\n  [id]=\"id\"\n  [ngClass]=\"{ 'po-tab-focusable': !disabled && !hide }\"\n  [attr.tabindex]=\"disabled ? null : 0\"\n  [attr.aria-selected]=\"active\"\n  [class.po-tab-button-active]=\"active\"\n  [class.po-tab-button-disabled]=\"disabled\"\n  (click)=\"onClick()\"\n  (focusin)=\"onFocusIn()\"\n  (focusout)=\"onFocusOut()\"\n  (keyup.enter)=\"onClick()\"\n>\n  <div class=\"po-tab-button-content\">\n    <span [ngClass]=\"!hideClose ? 'po-context-tab-button-label' : 'po-tab-button-label'\" class=\"po-text-ellipsis\">\n      {{ label }}\n    </span>\n    <div\n      class=\"po-tab-button-content-close-icon\"\n      *ngIf=\"!hideClose\"\n      (click)=\"closeTab($event)\"\n      (keydown)=\"closeTab($event)\"\n    >\n      <po-icon\n        [tabIndex]=\"activeCloseIcon ? 0 : -1\"\n        [attr.aria-label]=\"literals.close\"\n        p-icon=\"ICON_CLOSE\"\n        class=\"po-tab-button-icon-close\"\n      ></po-icon>\n    </div>\n  </div>\n</div>\n<div [ngClass]=\"{ 'po-tab-border-active': active, 'po-tab-border-disabled': !active }\"></div>\n" }]
+            args: [{ selector: 'po-context-tab-button', standalone: false, template: "<div\n  #tabButtom\n  role=\"tab\"\n  [p-tooltip]=\"widthButton > 239 || showTooltip ? label : ''\"\n  p-tooltip-position=\"top\"\n  class=\"po-tab-button-default\"\n  [id]=\"id\"\n  [ngClass]=\"{ 'po-tab-focusable': !disabled && !hide }\"\n  [attr.tabindex]=\"disabled ? null : 0\"\n  [attr.aria-selected]=\"active\"\n  [class.po-tab-button-active]=\"active\"\n  [class.po-tab-button-disabled]=\"disabled\"\n  (click)=\"onClick()\"\n  (focusin)=\"onFocusIn()\"\n  (focusout)=\"onFocusOut()\"\n  (keyup.enter)=\"onClick()\"\n>\n  <div class=\"po-tab-button-content\">\n    <span [ngClass]=\"!hideClose ? 'po-context-tab-button-label' : 'po-tab-button-label'\" class=\"po-text-ellipsis\">\n      {{ label }}\n    </span>\n    @if (!hideClose) {\n      <div class=\"po-tab-button-content-close-icon\" (click)=\"closeTab($event)\" (keydown)=\"closeTab($event)\">\n        <po-icon\n          [tabIndex]=\"activeCloseIcon ? 0 : -1\"\n          [attr.aria-label]=\"literals.close\"\n          p-icon=\"ICON_CLOSE\"\n          class=\"po-tab-button-icon-close\"\n        ></po-icon>\n      </div>\n    }\n  </div>\n</div>\n<div [ngClass]=\"{ 'po-tab-border-active': active, 'po-tab-border-disabled': !active }\"></div>\n" }]
         }], propDecorators: { hideClose: [{
                 type: Input,
                 args: ['p-hide-close']