@po-ui/ng-components 21.13.0 → 21.13.1

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

@@ -14372,7 +14372,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImpo
             }] } });
 
 /* istanbul ignore next */
-const providers$7 = [
+const providers$6 = [
     {
         provide: NG_VALUE_ACCESSOR,
         // eslint-disable-next-line
@@ -14897,11 +14897,11 @@ class PoCalendarComponent extends PoCalendarBaseComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: PoCalendarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", type: PoCalendarComponent, isStandalone: false, selector: "po-calendar", providers: providers$7, viewQueries: [{ propertyName: "monthOptions", predicate: ["monthOption"], descendants: true }, { propertyName: "yearOptions", predicate: ["yearOption"], 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 class=\"po-calendar\">\n    <ng-container *ngTemplateOutlet=\"calendarWrapper; context: { partType: 'single' }\"></ng-container>\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", dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: PoButtonComponent, selector: "po-button" }, { 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: 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"] }, { 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", type: PoCalendarComponent, isStandalone: false, selector: "po-calendar", providers: providers$6, viewQueries: [{ propertyName: "monthOptions", predicate: ["monthOption"], descendants: true }, { propertyName: "yearOptions", predicate: ["yearOption"], 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 class=\"po-calendar\">\n    <ng-container *ngTemplateOutlet=\"calendarWrapper; context: { partType: 'single' }\"></ng-container>\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", dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: PoButtonComponent, selector: "po-button" }, { 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: 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"] }, { 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", 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 class=\"po-calendar\">\n    <ng-container *ngTemplateOutlet=\"calendarWrapper; context: { partType: 'single' }\"></ng-container>\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" }]
+            args: [{ selector: 'po-calendar', changeDetection: ChangeDetectionStrategy.OnPush, providers: providers$6, 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 class=\"po-calendar\">\n    <ng-container *ngTemplateOutlet=\"calendarWrapper; context: { partType: 'single' }\"></ng-container>\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" }]
         }], ctorParameters: () => [], propDecorators: { monthOptions: [{
                 type: ViewChildren,
                 args: ['monthOption']
@@ -21675,20 +21675,6 @@ const poCalendarPositionDefault$1 = 'bottom-left';
  *  <file name="sample-po-datepicker-airfare-reactive-form/sample-po-datepicker-airfare-reactive-form.component.ts"> </file>
  * </example>
  */
-/* istanbul ignore next */
-const providers$6 = [
-    {
-        provide: NG_VALUE_ACCESSOR,
-        useExisting: forwardRef(() => PoDatepickerComponent),
-        multi: true
-    },
-    {
-        provide: NG_VALIDATORS,
-        useExisting: forwardRef(() => PoDatepickerComponent),
-        multi: true
-    },
-    PoControlPositionService
-];
 class PoDatepickerComponent extends PoDatepickerBaseComponent {
     controlPosition = inject(PoControlPositionService);
     renderer = inject(Renderer2);
@@ -22463,11 +22449,35 @@ class PoDatepickerComponent extends PoDatepickerBaseComponent {
         return setHelperSettings(label, additionalHelpTooltip, this.poHelperComponent(), this.size, this.isAdditionalHelpEventTriggered() ? this.additionalHelp : undefined);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: PoDatepickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", type: PoDatepickerComponent, isStandalone: false, selector: "po-datepicker", host: { listeners: { "keyup": "onKeyup($event)", "keydown": "onKeydown($event)" } }, providers: providers$6, viewQueries: [{ propertyName: "calendar", first: true, predicate: ["calendar"], descendants: true, static: true }, { propertyName: "dialogPicker", first: true, predicate: ["dialogPicker"], descendants: true, read: ElementRef }, { propertyName: "iconDatepicker", first: true, predicate: ["iconDatepicker"], 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: "helperEl", first: true, predicate: ["helperEl"], descendants: true, read: PoHelperComponent }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "@let poHelper = setHelper(label, additionalHelpTooltip);\n<po-field-container\n  [class.po-date-picker-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\n      cdkOverlayOrigin\n      #trigger=\"cdkOverlayOrigin\"\n      class=\"po-field-container-content po-field-container-content-datepicker\"\n    >\n      <div class=\"po-field-container-input\">\n        <input\n          #inp\n          type=\"text\"\n          class=\"po-input po-datepicker\"\n          [class.po-input-icon-right]=\"clean && inp.value && !isDisabled\"\n          [class.po-datepicker-field-disabled]=\"isDisabled\"\n          [attr.data-focused-element]=\"!isDisabled\"\n          [attr.data-inactive-component]=\"isDisabled || readonly\"\n          [attr.name]=\"name\"\n          [attr.p-size]=\"size\"\n          [autocomplete]=\"autocomplete\"\n          [disabled]=\"isDisabled\"\n          [id]=\"id\"\n          [placeholder]=\"isDisabled ? '' : placeholder\"\n          [readonly]=\"readonly\"\n          [required]=\"required\"\n          [attr.data-append-in-body]=\"appendBox\"\n          (blur)=\"eventOnBlur($event)\"\n          (click)=\"eventOnClick($event)\"\n          (keydown)=\"onKeyDown($event)\"\n          (keydown.tab)=\"handleCleanKeyboardTab($event)\"\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 && dateInputValue && !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]=\"inputEl\"\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              #iconDatepicker\n              class=\"po-datepicker-button\"\n              [class.po-button-tertiary-danger]=\"getErrorPattern()\"\n              p-icon=\"ICON_CALENDAR_DOTS\"\n              p-kind=\"tertiary\"\n              [p-disabled]=\"isDisabled || readonly\"\n              [p-size]=\"size\"\n              (keydown)=\"onKeyPress($event)\"\n              (keydown.tab)=\"handleCleanKeyboardTab($event)\"\n              (p-click)=\"togglePicker(false)\"\n            >\n            </po-button>\n          </div>\n        }\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=\"sharedCalendarContent\"></ng-container>\n      </ng-template>\n    } @else {\n      <ng-container *ngTemplateOutlet=\"sharedCalendarContent\"></ng-container>\n    }\n\n    <ng-template #sharedCalendarContent>\n      <div #dialogPicker [class.po-datepicker-popup-calendar]=\"!verifyMobile()\" tabindex=\"-1\" [hidden]=\"!visible\">\n        @if (verifyMobile()) {\n          <div class=\"po-datepicker-calendar-overlay\"></div>\n        }\n        <po-calendar\n          #calendar\n          [class.po-datepicker-calendar-mobile]=\"verifyMobile()\"\n          [(ngModel)]=\"date\"\n          [p-max-date]=\"maxDate\"\n          [p-min-date]=\"minDate\"\n          [p-locale]=\"locale\"\n          [p-size]=\"size\"\n          [p-mode]=\"mode\"\n          [p-year-range-limit]=\"yearRangeLimit\"\n          (p-change)=\"dateSelected($event)\"\n          (p-change-month-year)=\"adjustCalendarPosition()\"\n          (keydown)=\"onCalendarKeyDown($event)\"\n          (p-close)=\"closeCalendar(false)\"\n        ></po-calendar>\n      </div>\n    </ng-template>\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: "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: 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: i5.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: i5.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: PoCalendarComponent, selector: "po-calendar" }, { kind: "component", type: PoButtonComponent, selector: "po-button" }, { kind: "component", type: PoHelperComponent, selector: "po-helper" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", type: PoDatepickerComponent, isStandalone: false, selector: "po-datepicker", host: { listeners: { "keyup": "onKeyup($event)", "keydown": "onKeydown($event)" } }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => PoDatepickerComponent),
+                multi: true
+            },
+            {
+                provide: NG_VALIDATORS,
+                useExisting: forwardRef(() => PoDatepickerComponent),
+                multi: true
+            },
+            PoControlPositionService
+        ], viewQueries: [{ propertyName: "calendar", first: true, predicate: ["calendar"], descendants: true, static: true }, { propertyName: "dialogPicker", first: true, predicate: ["dialogPicker"], descendants: true, read: ElementRef }, { propertyName: "iconDatepicker", first: true, predicate: ["iconDatepicker"], 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: "helperEl", first: true, predicate: ["helperEl"], descendants: true, read: PoHelperComponent }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "@let poHelper = setHelper(label, additionalHelpTooltip);\n<po-field-container\n  [class.po-date-picker-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\n      cdkOverlayOrigin\n      #trigger=\"cdkOverlayOrigin\"\n      class=\"po-field-container-content po-field-container-content-datepicker\"\n    >\n      <div class=\"po-field-container-input\">\n        <input\n          #inp\n          type=\"text\"\n          class=\"po-input po-datepicker\"\n          [class.po-input-icon-right]=\"clean && inp.value && !isDisabled\"\n          [class.po-datepicker-field-disabled]=\"isDisabled\"\n          [attr.data-focused-element]=\"!isDisabled\"\n          [attr.data-inactive-component]=\"isDisabled || readonly\"\n          [attr.name]=\"name\"\n          [attr.p-size]=\"size\"\n          [autocomplete]=\"autocomplete\"\n          [disabled]=\"isDisabled\"\n          [id]=\"id\"\n          [placeholder]=\"isDisabled ? '' : placeholder\"\n          [readonly]=\"readonly\"\n          [required]=\"required\"\n          [attr.data-append-in-body]=\"appendBox\"\n          (blur)=\"eventOnBlur($event)\"\n          (click)=\"eventOnClick($event)\"\n          (keydown)=\"onKeyDown($event)\"\n          (keydown.tab)=\"handleCleanKeyboardTab($event)\"\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 && dateInputValue && !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]=\"inputEl\"\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              #iconDatepicker\n              class=\"po-datepicker-button\"\n              [class.po-button-tertiary-danger]=\"getErrorPattern()\"\n              p-icon=\"ICON_CALENDAR_DOTS\"\n              p-kind=\"tertiary\"\n              [p-disabled]=\"isDisabled || readonly\"\n              [p-size]=\"size\"\n              (keydown)=\"onKeyPress($event)\"\n              (keydown.tab)=\"handleCleanKeyboardTab($event)\"\n              (p-click)=\"togglePicker(false)\"\n            >\n            </po-button>\n          </div>\n        }\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=\"sharedCalendarContent\"></ng-container>\n      </ng-template>\n    } @else {\n      <ng-container *ngTemplateOutlet=\"sharedCalendarContent\"></ng-container>\n    }\n\n    <ng-template #sharedCalendarContent>\n      <div #dialogPicker [class.po-datepicker-popup-calendar]=\"!verifyMobile()\" tabindex=\"-1\" [hidden]=\"!visible\">\n        @if (verifyMobile()) {\n          <div class=\"po-datepicker-calendar-overlay\"></div>\n        }\n        <po-calendar\n          #calendar\n          [class.po-datepicker-calendar-mobile]=\"verifyMobile()\"\n          [(ngModel)]=\"date\"\n          [p-max-date]=\"maxDate\"\n          [p-min-date]=\"minDate\"\n          [p-locale]=\"locale\"\n          [p-size]=\"size\"\n          [p-mode]=\"mode\"\n          [p-year-range-limit]=\"yearRangeLimit\"\n          (p-change)=\"dateSelected($event)\"\n          (p-change-month-year)=\"adjustCalendarPosition()\"\n          (keydown)=\"onCalendarKeyDown($event)\"\n          (p-close)=\"closeCalendar(false)\"\n        ></po-calendar>\n      </div>\n    </ng-template>\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: "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: 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: i5.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: i5.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: PoCalendarComponent, selector: "po-calendar" }, { 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.11", ngImport: i0, type: PoDatepickerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'po-datepicker', providers: providers$6, changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "@let poHelper = setHelper(label, additionalHelpTooltip);\n<po-field-container\n  [class.po-date-picker-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\n      cdkOverlayOrigin\n      #trigger=\"cdkOverlayOrigin\"\n      class=\"po-field-container-content po-field-container-content-datepicker\"\n    >\n      <div class=\"po-field-container-input\">\n        <input\n          #inp\n          type=\"text\"\n          class=\"po-input po-datepicker\"\n          [class.po-input-icon-right]=\"clean && inp.value && !isDisabled\"\n          [class.po-datepicker-field-disabled]=\"isDisabled\"\n          [attr.data-focused-element]=\"!isDisabled\"\n          [attr.data-inactive-component]=\"isDisabled || readonly\"\n          [attr.name]=\"name\"\n          [attr.p-size]=\"size\"\n          [autocomplete]=\"autocomplete\"\n          [disabled]=\"isDisabled\"\n          [id]=\"id\"\n          [placeholder]=\"isDisabled ? '' : placeholder\"\n          [readonly]=\"readonly\"\n          [required]=\"required\"\n          [attr.data-append-in-body]=\"appendBox\"\n          (blur)=\"eventOnBlur($event)\"\n          (click)=\"eventOnClick($event)\"\n          (keydown)=\"onKeyDown($event)\"\n          (keydown.tab)=\"handleCleanKeyboardTab($event)\"\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 && dateInputValue && !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]=\"inputEl\"\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              #iconDatepicker\n              class=\"po-datepicker-button\"\n              [class.po-button-tertiary-danger]=\"getErrorPattern()\"\n              p-icon=\"ICON_CALENDAR_DOTS\"\n              p-kind=\"tertiary\"\n              [p-disabled]=\"isDisabled || readonly\"\n              [p-size]=\"size\"\n              (keydown)=\"onKeyPress($event)\"\n              (keydown.tab)=\"handleCleanKeyboardTab($event)\"\n              (p-click)=\"togglePicker(false)\"\n            >\n            </po-button>\n          </div>\n        }\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=\"sharedCalendarContent\"></ng-container>\n      </ng-template>\n    } @else {\n      <ng-container *ngTemplateOutlet=\"sharedCalendarContent\"></ng-container>\n    }\n\n    <ng-template #sharedCalendarContent>\n      <div #dialogPicker [class.po-datepicker-popup-calendar]=\"!verifyMobile()\" tabindex=\"-1\" [hidden]=\"!visible\">\n        @if (verifyMobile()) {\n          <div class=\"po-datepicker-calendar-overlay\"></div>\n        }\n        <po-calendar\n          #calendar\n          [class.po-datepicker-calendar-mobile]=\"verifyMobile()\"\n          [(ngModel)]=\"date\"\n          [p-max-date]=\"maxDate\"\n          [p-min-date]=\"minDate\"\n          [p-locale]=\"locale\"\n          [p-size]=\"size\"\n          [p-mode]=\"mode\"\n          [p-year-range-limit]=\"yearRangeLimit\"\n          (p-change)=\"dateSelected($event)\"\n          (p-change-month-year)=\"adjustCalendarPosition()\"\n          (keydown)=\"onCalendarKeyDown($event)\"\n          (p-close)=\"closeCalendar(false)\"\n        ></po-calendar>\n      </div>\n    </ng-template>\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" }]
+            args: [{ selector: 'po-datepicker', providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => PoDatepickerComponent),
+                            multi: true
+                        },
+                        {
+                            provide: NG_VALIDATORS,
+                            useExisting: forwardRef(() => PoDatepickerComponent),
+                            multi: true
+                        },
+                        PoControlPositionService
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "@let poHelper = setHelper(label, additionalHelpTooltip);\n<po-field-container\n  [class.po-date-picker-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\n      cdkOverlayOrigin\n      #trigger=\"cdkOverlayOrigin\"\n      class=\"po-field-container-content po-field-container-content-datepicker\"\n    >\n      <div class=\"po-field-container-input\">\n        <input\n          #inp\n          type=\"text\"\n          class=\"po-input po-datepicker\"\n          [class.po-input-icon-right]=\"clean && inp.value && !isDisabled\"\n          [class.po-datepicker-field-disabled]=\"isDisabled\"\n          [attr.data-focused-element]=\"!isDisabled\"\n          [attr.data-inactive-component]=\"isDisabled || readonly\"\n          [attr.name]=\"name\"\n          [attr.p-size]=\"size\"\n          [autocomplete]=\"autocomplete\"\n          [disabled]=\"isDisabled\"\n          [id]=\"id\"\n          [placeholder]=\"isDisabled ? '' : placeholder\"\n          [readonly]=\"readonly\"\n          [required]=\"required\"\n          [attr.data-append-in-body]=\"appendBox\"\n          (blur)=\"eventOnBlur($event)\"\n          (click)=\"eventOnClick($event)\"\n          (keydown)=\"onKeyDown($event)\"\n          (keydown.tab)=\"handleCleanKeyboardTab($event)\"\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 && dateInputValue && !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]=\"inputEl\"\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              #iconDatepicker\n              class=\"po-datepicker-button\"\n              [class.po-button-tertiary-danger]=\"getErrorPattern()\"\n              p-icon=\"ICON_CALENDAR_DOTS\"\n              p-kind=\"tertiary\"\n              [p-disabled]=\"isDisabled || readonly\"\n              [p-size]=\"size\"\n              (keydown)=\"onKeyPress($event)\"\n              (keydown.tab)=\"handleCleanKeyboardTab($event)\"\n              (p-click)=\"togglePicker(false)\"\n            >\n            </po-button>\n          </div>\n        }\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=\"sharedCalendarContent\"></ng-container>\n      </ng-template>\n    } @else {\n      <ng-container *ngTemplateOutlet=\"sharedCalendarContent\"></ng-container>\n    }\n\n    <ng-template #sharedCalendarContent>\n      <div #dialogPicker [class.po-datepicker-popup-calendar]=\"!verifyMobile()\" tabindex=\"-1\" [hidden]=\"!visible\">\n        @if (verifyMobile()) {\n          <div class=\"po-datepicker-calendar-overlay\"></div>\n        }\n        <po-calendar\n          #calendar\n          [class.po-datepicker-calendar-mobile]=\"verifyMobile()\"\n          [(ngModel)]=\"date\"\n          [p-max-date]=\"maxDate\"\n          [p-min-date]=\"minDate\"\n          [p-locale]=\"locale\"\n          [p-size]=\"size\"\n          [p-mode]=\"mode\"\n          [p-year-range-limit]=\"yearRangeLimit\"\n          (p-change)=\"dateSelected($event)\"\n          (p-change-month-year)=\"adjustCalendarPosition()\"\n          (keydown)=\"onCalendarKeyDown($event)\"\n          (p-close)=\"closeCalendar(false)\"\n        ></po-calendar>\n      </div>\n    </ng-template>\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: { calendar: [{
                 type: ViewChild,
                 args: ['calendar', { static: true }]