@gravionlabs/helix-core 22.0.0

package/fesm2022/gravionlabs-helix-core-datepicker.mjs

@@ -0,0 +1,3795 @@
+export * from '@gravionlabs/helix-core/types/datepicker';
+import * as i3 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as i0 from '@angular/core';
+import { Injectable, forwardRef, InjectionToken, inject, input, booleanAttribute, numberAttribute, computed, output, viewChild, contentChild, effect, contentChildren, ViewEncapsulation, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
+import { NG_VALUE_ACCESSOR } from '@angular/forms';
+import { uuid, getOuterWidth, isDate, findSingle, getFocusableElements, hasClass, getIndex, find, isNotEmpty, addStyle, appendChild, absolutePosition, relativePosition, addClass, setAttribute, isTouchDevice } from '@gravionlabs/helix-core/uix/utils';
+import * as i1 from '@gravionlabs/helix-core/api';
+import { HelixTemplate, TranslationKeys, SharedModule } from '@gravionlabs/helix-core/api';
+import { AutoFocus } from '@gravionlabs/helix-core/autofocus';
+import { PARENT_INSTANCE } from '@gravionlabs/helix-core/basecomponent';
+import { BaseInput } from '@gravionlabs/helix-core/baseinput';
+import * as i2 from '@gravionlabs/helix-core/bind';
+import { Bind, BindModule } from '@gravionlabs/helix-core/bind';
+import { Button } from '@gravionlabs/helix-core/button';
+import { blockBodyScroll, unblockBodyScroll, ConnectedOverlayScrollHandler } from '@gravionlabs/helix-core/dom';
+import { ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, ChevronDownIcon, TimesIcon, CalendarIcon } from '@gravionlabs/helix-core/icons';
+import { InputText } from '@gravionlabs/helix-core/inputtext';
+import * as i4 from '@gravionlabs/helix-core/motion';
+import { MotionModule } from '@gravionlabs/helix-core/motion';
+import { Ripple } from '@gravionlabs/helix-core/ripple';
+import { ZIndexUtils } from '@gravionlabs/helix-core/utils';
+import { BaseStyle } from '@gravionlabs/helix-core/base';
+
+const style$1 = /*css*/ `
+    .h-datepicker {
+        display: inline-flex;
+        max-width: 100%;
+    }
+
+    .h-datepicker:has(.h-datepicker-dropdown) .h-datepicker-input {
+        border-start-end-radius: 0;
+        border-end-end-radius: 0;
+    }
+
+    .h-datepicker-input {
+        flex: 1 1 auto;
+        width: 1%;
+    }
+
+    .h-datepicker-dropdown {
+        cursor: pointer;
+        display: inline-flex;
+        user-select: none;
+        align-items: center;
+        justify-content: center;
+        overflow: hidden;
+        position: relative;
+        width: dt('datepicker.dropdown.width');
+        border-start-end-radius: dt('datepicker.dropdown.border.radius');
+        border-end-end-radius: dt('datepicker.dropdown.border.radius');
+        background: dt('datepicker.dropdown.background');
+        border: 1px solid dt('datepicker.dropdown.border.color');
+        border-inline-start: 0 none;
+        color: dt('datepicker.dropdown.color');
+        transition:
+            background dt('datepicker.transition.duration'),
+            color dt('datepicker.transition.duration'),
+            border-color dt('datepicker.transition.duration'),
+            outline-color dt('datepicker.transition.duration');
+        outline-color: transparent;
+    }
+
+    .h-datepicker-dropdown:not(:disabled):hover {
+        background: dt('datepicker.dropdown.hover.background');
+        border-color: dt('datepicker.dropdown.hover.border.color');
+        color: dt('datepicker.dropdown.hover.color');
+    }
+
+    .h-datepicker-dropdown:not(:disabled):active {
+        background: dt('datepicker.dropdown.active.background');
+        border-color: dt('datepicker.dropdown.active.border.color');
+        color: dt('datepicker.dropdown.active.color');
+    }
+
+    .h-datepicker-dropdown:focus-visible {
+        box-shadow: dt('datepicker.dropdown.focus.ring.shadow');
+        outline: dt('datepicker.dropdown.focus.ring.width') dt('datepicker.dropdown.focus.ring.style') dt('datepicker.dropdown.focus.ring.color');
+        outline-offset: dt('datepicker.dropdown.focus.ring.offset');
+    }
+
+    .h-datepicker:has(.h-datepicker-input-icon-container) {
+        position: relative;
+    }
+
+    .h-datepicker:has(.h-datepicker-input-icon-container) .h-datepicker-input {
+        padding-inline-end: calc((dt('form.field.padding.x') * 2) + dt('icon.size'));
+    }
+
+    .h-datepicker-input-icon-container {
+        cursor: pointer;
+        position: absolute;
+        top: 50%;
+        inset-inline-end: dt('form.field.padding.x');
+        margin-block-start: calc(-1 * (dt('icon.size') / 2));
+        color: dt('datepicker.input.icon.color');
+        line-height: 1;
+        z-index: 1;
+    }
+
+    .h-datepicker:has(.h-datepicker-input:disabled) .h-datepicker-input-icon-container {
+        cursor: default;
+    }
+
+    .h-datepicker-fluid {
+        display: flex;
+    }
+
+    .h-datepicker .h-datepicker-panel {
+        min-width: 100%;
+    }
+
+    .h-datepicker-panel {
+        width: auto;
+        padding: dt('datepicker.panel.padding');
+        background: dt('datepicker.panel.background');
+        color: dt('datepicker.panel.color');
+        border: 1px solid dt('datepicker.panel.border.color');
+        border-radius: dt('datepicker.panel.border.radius');
+        box-shadow: dt('datepicker.panel.shadow');
+    }
+
+    .h-datepicker-panel-inline {
+        display: inline-block;
+        overflow-x: auto;
+        box-shadow: none;
+    }
+
+    .h-datepicker-header {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: dt('datepicker.header.padding');
+        background: dt('datepicker.header.background');
+        color: dt('datepicker.header.color');
+        border-block-end: 1px solid dt('datepicker.header.border.color');
+    }
+
+    .h-datepicker-next-button:dir(rtl) {
+        order: -1;
+    }
+
+    .h-datepicker-prev-button:dir(rtl) {
+        order: 1;
+    }
+
+    .h-datepicker-title {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        gap: dt('datepicker.title.gap');
+        font-weight: dt('datepicker.title.font.weight');
+    }
+
+    .h-datepicker-select-year,
+    .h-datepicker-select-month {
+        border: none;
+        background: transparent;
+        margin: 0;
+        cursor: pointer;
+        font-weight: inherit;
+        transition:
+            background dt('datepicker.transition.duration'),
+            color dt('datepicker.transition.duration'),
+            border-color dt('datepicker.transition.duration'),
+            outline-color dt('datepicker.transition.duration'),
+            box-shadow dt('datepicker.transition.duration');
+    }
+
+    .h-datepicker-select-month {
+        padding: dt('datepicker.select.month.padding');
+        color: dt('datepicker.select.month.color');
+        border-radius: dt('datepicker.select.month.border.radius');
+    }
+
+    .h-datepicker-select-year {
+        padding: dt('datepicker.select.year.padding');
+        color: dt('datepicker.select.year.color');
+        border-radius: dt('datepicker.select.year.border.radius');
+    }
+
+    .h-datepicker-select-month:enabled:hover {
+        background: dt('datepicker.select.month.hover.background');
+        color: dt('datepicker.select.month.hover.color');
+    }
+
+    .h-datepicker-select-year:enabled:hover {
+        background: dt('datepicker.select.year.hover.background');
+        color: dt('datepicker.select.year.hover.color');
+    }
+
+    .h-datepicker-select-month:focus-visible,
+    .h-datepicker-select-year:focus-visible {
+        box-shadow: dt('datepicker.date.focus.ring.shadow');
+        outline: dt('datepicker.date.focus.ring.width') dt('datepicker.date.focus.ring.style') dt('datepicker.date.focus.ring.color');
+        outline-offset: dt('datepicker.date.focus.ring.offset');
+    }
+
+    .h-datepicker-calendar-container {
+        display: flex;
+    }
+
+    .h-datepicker-calendar-container .h-datepicker-calendar {
+        flex: 1 1 auto;
+        border-inline-start: 1px solid dt('datepicker.group.border.color');
+        padding-inline-end: dt('datepicker.group.gap');
+        padding-inline-start: dt('datepicker.group.gap');
+    }
+
+    .h-datepicker-calendar-container .h-datepicker-calendar:first-child {
+        padding-inline-start: 0;
+        border-inline-start: 0 none;
+    }
+
+    .h-datepicker-calendar-container .h-datepicker-calendar:last-child {
+        padding-inline-end: 0;
+    }
+
+    .h-datepicker-day-view {
+        width: 100%;
+        border-collapse: collapse;
+        font-size: 1rem;
+        margin: dt('datepicker.day.view.margin');
+    }
+
+    .h-datepicker-weekday-cell {
+        padding: dt('datepicker.week.day.padding');
+    }
+
+    .h-datepicker-weekday {
+        font-weight: dt('datepicker.week.day.font.weight');
+        color: dt('datepicker.week.day.color');
+    }
+
+    .h-datepicker-day-cell {
+        padding: dt('datepicker.date.padding');
+    }
+
+    .h-datepicker-day {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        cursor: pointer;
+        margin: 0 auto;
+        overflow: hidden;
+        position: relative;
+        width: dt('datepicker.date.width');
+        height: dt('datepicker.date.height');
+        border-radius: dt('datepicker.date.border.radius');
+        transition:
+            background dt('datepicker.transition.duration'),
+            color dt('datepicker.transition.duration'),
+            border-color dt('datepicker.transition.duration'),
+            box-shadow dt('datepicker.transition.duration'),
+            outline-color dt('datepicker.transition.duration');
+        border: 1px solid transparent;
+        outline-color: transparent;
+        color: dt('datepicker.date.color');
+    }
+
+    .h-datepicker-day:not(.h-datepicker-day-selected):not(.h-disabled):hover {
+        background: dt('datepicker.date.hover.background');
+        color: dt('datepicker.date.hover.color');
+    }
+
+    .h-datepicker-day:focus-visible {
+        box-shadow: dt('datepicker.date.focus.ring.shadow');
+        outline: dt('datepicker.date.focus.ring.width') dt('datepicker.date.focus.ring.style') dt('datepicker.date.focus.ring.color');
+        outline-offset: dt('datepicker.date.focus.ring.offset');
+    }
+
+    .h-datepicker-day-selected {
+        background: dt('datepicker.date.selected.background');
+        color: dt('datepicker.date.selected.color');
+    }
+
+    .h-datepicker-day-selected-range {
+        background: dt('datepicker.date.range.selected.background');
+        color: dt('datepicker.date.range.selected.color');
+    }
+
+    .h-datepicker-today > .h-datepicker-day {
+        background: dt('datepicker.today.background');
+        color: dt('datepicker.today.color');
+    }
+
+    .h-datepicker-today > .h-datepicker-day-selected {
+        background: dt('datepicker.date.selected.background');
+        color: dt('datepicker.date.selected.color');
+    }
+
+    .h-datepicker-today > .h-datepicker-day-selected-range {
+        background: dt('datepicker.date.range.selected.background');
+        color: dt('datepicker.date.range.selected.color');
+    }
+
+    .h-datepicker-weeknumber {
+        text-align: center;
+    }
+
+    .h-datepicker-month-view {
+        margin: dt('datepicker.month.view.margin');
+    }
+
+    .h-datepicker-month {
+        width: 33.3%;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        cursor: pointer;
+        overflow: hidden;
+        position: relative;
+        padding: dt('datepicker.month.padding');
+        transition:
+            background dt('datepicker.transition.duration'),
+            color dt('datepicker.transition.duration'),
+            border-color dt('datepicker.transition.duration'),
+            box-shadow dt('datepicker.transition.duration'),
+            outline-color dt('datepicker.transition.duration');
+        border-radius: dt('datepicker.month.border.radius');
+        outline-color: transparent;
+        color: dt('datepicker.date.color');
+    }
+
+    .h-datepicker-month:not(.h-disabled):not(.h-datepicker-month-selected):hover {
+        color: dt('datepicker.date.hover.color');
+        background: dt('datepicker.date.hover.background');
+    }
+
+    .h-datepicker-month-selected {
+        color: dt('datepicker.date.selected.color');
+        background: dt('datepicker.date.selected.background');
+    }
+
+    .h-datepicker-month:not(.h-disabled):focus-visible {
+        box-shadow: dt('datepicker.date.focus.ring.shadow');
+        outline: dt('datepicker.date.focus.ring.width') dt('datepicker.date.focus.ring.style') dt('datepicker.date.focus.ring.color');
+        outline-offset: dt('datepicker.date.focus.ring.offset');
+    }
+
+    .h-datepicker-year-view {
+        margin: dt('datepicker.year.view.margin');
+    }
+
+    .h-datepicker-year {
+        width: 50%;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        cursor: pointer;
+        overflow: hidden;
+        position: relative;
+        padding: dt('datepicker.year.padding');
+        transition:
+            background dt('datepicker.transition.duration'),
+            color dt('datepicker.transition.duration'),
+            border-color dt('datepicker.transition.duration'),
+            box-shadow dt('datepicker.transition.duration'),
+            outline-color dt('datepicker.transition.duration');
+        border-radius: dt('datepicker.year.border.radius');
+        outline-color: transparent;
+        color: dt('datepicker.date.color');
+    }
+
+    .h-datepicker-year:not(.h-disabled):not(.h-datepicker-year-selected):hover {
+        color: dt('datepicker.date.hover.color');
+        background: dt('datepicker.date.hover.background');
+    }
+
+    .h-datepicker-year-selected {
+        color: dt('datepicker.date.selected.color');
+        background: dt('datepicker.date.selected.background');
+    }
+
+    .h-datepicker-year:not(.h-disabled):focus-visible {
+        box-shadow: dt('datepicker.date.focus.ring.shadow');
+        outline: dt('datepicker.date.focus.ring.width') dt('datepicker.date.focus.ring.style') dt('datepicker.date.focus.ring.color');
+        outline-offset: dt('datepicker.date.focus.ring.offset');
+    }
+
+    .h-datepicker-buttonbar {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding: dt('datepicker.buttonbar.padding');
+        border-block-start: 1px solid dt('datepicker.buttonbar.border.color');
+    }
+
+    .h-datepicker-buttonbar .h-button {
+        width: auto;
+    }
+
+    .h-datepicker-time-picker {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        border-block-start: 1px solid dt('datepicker.time.picker.border.color');
+        padding: 0;
+        gap: dt('datepicker.time.picker.gap');
+    }
+
+    .h-datepicker-calendar-container + .h-datepicker-time-picker {
+        padding: dt('datepicker.time.picker.padding');
+    }
+
+    .h-datepicker-time-picker > div {
+        display: flex;
+        align-items: center;
+        flex-direction: column;
+        gap: dt('datepicker.time.picker.button.gap');
+    }
+
+    .h-datepicker-time-picker span {
+        font-size: 1rem;
+    }
+
+    .h-datepicker-timeonly .h-datepicker-time-picker {
+        border-block-start: 0 none;
+    }
+
+    .h-datepicker-time-picker:dir(rtl) {
+        flex-direction: row-reverse;
+    }
+
+    .h-datepicker:has(.h-inputtext-sm) .h-datepicker-dropdown {
+        width: dt('datepicker.dropdown.sm.width');
+    }
+
+    .h-datepicker:has(.h-inputtext-sm) .h-datepicker-dropdown .h-icon,
+    .h-datepicker:has(.h-inputtext-sm) .h-datepicker-input-icon {
+        font-size: dt('form.field.sm.font.size');
+        width: dt('form.field.sm.font.size');
+        height: dt('form.field.sm.font.size');
+    }
+
+    .h-datepicker:has(.h-inputtext-lg) .h-datepicker-dropdown {
+        width: dt('datepicker.dropdown.lg.width');
+    }
+
+    .h-datepicker:has(.h-inputtext-lg) .h-datepicker-dropdown .h-icon,
+    .h-datepicker:has(.h-inputtext-lg) .h-datepicker-input-icon {
+        font-size: dt('form.field.lg.font.size');
+        width: dt('form.field.lg.font.size');
+        height: dt('form.field.lg.font.size');
+    }
+
+    .h-datepicker-clear-icon {
+        position: absolute;
+        top: 50%;
+        margin-top: -0.5rem;
+        cursor: pointer;
+        color: dt('form.field.icon.color');
+        inset-inline-end: dt('form.field.padding.x');
+    }
+
+    .h-datepicker:has(.h-datepicker-dropdown) .h-datepicker-clear-icon {
+        inset-inline-end: calc(dt('datepicker.dropdown.width') + dt('form.field.padding.x'));
+    }
+
+    .h-datepicker:has(.h-datepicker-input-icon-container) .h-datepicker-clear-icon {
+        inset-inline-end: calc((dt('form.field.padding.x') * 2) + dt('icon.size'));
+    }
+
+    .h-datepicker:has(.h-datepicker-clear-icon) .h-datepicker-input {
+        padding-inline-end: calc((dt('form.field.padding.x') * 2) + dt('icon.size'));
+    }
+
+    .h-datepicker:has(.h-datepicker-input-icon-container):has(.h-datepicker-clear-icon) .h-datepicker-input {
+        padding-inline-end: calc((dt('form.field.padding.x') * 3) + calc(dt('icon.size') * 2));
+    }
+
+    .h-inputgroup .h-datepicker-dropdown {
+        border-radius: 0;
+    }
+
+    .h-inputgroup > .h-datepicker:last-child:has(.h-datepicker-dropdown) > .h-datepicker-input {
+        border-start-end-radius: 0;
+        border-end-end-radius: 0;
+    }
+
+    .h-inputgroup > .h-datepicker:last-child .h-datepicker-dropdown {
+        border-start-end-radius: dt('datepicker.dropdown.border.radius');
+        border-end-end-radius: dt('datepicker.dropdown.border.radius');
+    }
+`;
+
+const style = /*css*/ `
+${style$1}
+
+/* For Helix */
+.h-datepicker.ng-invalid.ng-dirty .h-inputtext {
+    border-color: dt('inputtext.invalid.border.color');
+}
+`;
+const inlineStyles = {
+    root: () => ({ position: 'relative' })
+};
+const classes = {
+    root: ({ instance }) => [
+        'h-datepicker h-component h-inputwrapper',
+        {
+            'h-invalid': instance.invalid(),
+            'h-datepicker-fluid': instance.hasFluid,
+            'h-inputwrapper-filled': instance.$filled(),
+            'h-variant-filled': instance.$variant() === 'filled',
+            'h-inputwrapper-focus': instance.focus || instance.overlayVisible,
+            'h-focus': instance.focus || instance.overlayVisible
+        }
+    ],
+    pcInputText: 'h-datepicker-input',
+    dropdown: 'h-datepicker-dropdown',
+    inputIconContainer: 'h-datepicker-input-icon-container',
+    inputIcon: 'h-datepicker-input-icon',
+    panel: ({ instance }) => [
+        'h-datepicker-panel h-component',
+        {
+            'h-datepicker-panel h-component': true,
+            'h-datepicker-panel-inline': instance.inline,
+            'h-disabled': instance.$disabled(),
+            'h-datepicker-timeonly': instance.timeOnly
+        }
+    ],
+    calendarContainer: 'h-datepicker-calendar-container',
+    calendar: 'h-datepicker-calendar',
+    header: 'h-datepicker-header',
+    pcPrevButton: 'h-datepicker-prev-button',
+    title: 'h-datepicker-title',
+    selectMonth: 'h-datepicker-select-month',
+    selectYear: 'h-datepicker-select-year',
+    decade: 'h-datepicker-decade',
+    pcNextButton: 'h-datepicker-next-button',
+    dayView: 'h-datepicker-day-view',
+    weekHeader: 'h-datepicker-weekheader h-disabled',
+    weekNumber: 'h-datepicker-weeknumber',
+    weekLabelContainer: 'h-datepicker-weeklabel-container h-disabled',
+    weekDayCell: 'h-datepicker-weekday-cell',
+    weekDay: 'h-datepicker-weekday',
+    dayCell: ({ date }) => [
+        'h-datepicker-day-cell',
+        {
+            'h-datepicker-other-month': date.otherMonth,
+            'h-datepicker-today': date.today
+        }
+    ],
+    day: ({ instance, date }) => {
+        let selectedDayClass = '';
+        if (instance.isRangeSelection() && instance.isSelected(date) && date.selectable) {
+            const startDate = instance.value[0];
+            const endDate = instance.value[1];
+            const isStart = startDate && date.year === startDate.getFullYear() && date.month === startDate.getMonth() && date.day === startDate.getDate();
+            const isEnd = endDate && date.year === endDate.getFullYear() && date.month === endDate.getMonth() && date.day === endDate.getDate();
+            selectedDayClass = isStart || isEnd ? 'h-datepicker-day-selected' : 'h-datepicker-day-selected-range';
+        }
+        return {
+            'h-datepicker-day': true,
+            'h-datepicker-day-selected': !instance.isRangeSelection() && instance.isSelected(date) && date.selectable,
+            'h-disabled': instance.$disabled() || !date.selectable,
+            [selectedDayClass]: true
+        };
+    },
+    monthView: 'h-datepicker-month-view',
+    month: ({ instance, index }) => [
+        'h-datepicker-month',
+        {
+            'h-datepicker-month-selected': instance.isMonthSelected(index),
+            'h-disabled': instance.isMonthDisabled(index)
+        }
+    ],
+    yearView: 'h-datepicker-year-view',
+    year: ({ instance, year }) => [
+        'h-datepicker-year',
+        {
+            'h-datepicker-year-selected': instance.isYearSelected(year),
+            'h-disabled': instance.isYearDisabled(year)
+        }
+    ],
+    timePicker: 'h-datepicker-time-picker',
+    hourPicker: 'h-datepicker-hour-picker',
+    pcIncrementButton: 'h-datepicker-increment-button',
+    pcDecrementButton: 'h-datepicker-decrement-button',
+    separator: 'h-datepicker-separator',
+    minutePicker: 'h-datepicker-minute-picker',
+    secondPicker: 'h-datepicker-second-picker',
+    ampmPicker: 'h-datepicker-ampm-picker',
+    buttonbar: 'h-datepicker-buttonbar',
+    pcTodayButton: 'h-datepicker-today-button',
+    pcClearButton: 'h-datepicker-clear-button',
+    clearIcon: 'h-datepicker-clear-icon'
+};
+class DatePickerStyle extends BaseStyle {
+    name = 'datepicker';
+    style = style;
+    classes = classes;
+    inlineStyles = inlineStyles;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: DatePickerStyle, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: DatePickerStyle });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: DatePickerStyle, decorators: [{
+            type: Injectable
+        }] });
+/**
+ *
+ * DatePicker is a form component to work with dates.
+ *
+ * [Live Demo](https://www.primeng.org/datepicker/)
+ *
+ * @module datepickerstyle
+ *
+ */
+var DatePickerClasses;
+(function (DatePickerClasses) {
+    /**
+     * Class name of the root element
+     */
+    DatePickerClasses["root"] = "h-datepicker";
+    /**
+     * Class name of the input element
+     */
+    DatePickerClasses["pcInputText"] = "h-datepicker-input";
+    /**
+     * Class name of the dropdown element
+     */
+    DatePickerClasses["dropdown"] = "h-datepicker-dropdown";
+    /**
+     * Class name of the input icon container element
+     */
+    DatePickerClasses["inputIconContainer"] = "h-datepicker-input-icon-container";
+    /**
+     * Class name of the input icon element
+     */
+    DatePickerClasses["inputIcon"] = "h-datepicker-input-icon";
+    /**
+     * Class name of the panel element
+     */
+    DatePickerClasses["panel"] = "h-datepicker-panel";
+    /**
+     * Class name of the calendar container element
+     */
+    DatePickerClasses["calendarContainer"] = "h-datepicker-calendar-container";
+    /**
+     * Class name of the calendar element
+     */
+    DatePickerClasses["calendar"] = "h-datepicker-calendar";
+    /**
+     * Class name of the header element
+     */
+    DatePickerClasses["header"] = "h-datepicker-header";
+    /**
+     * Class name of the previous button element
+     */
+    DatePickerClasses["pcPrevButton"] = "h-datepicker-prev-button";
+    /**
+     * Class name of the title element
+     */
+    DatePickerClasses["title"] = "h-datepicker-title";
+    /**
+     * Class name of the select month element
+     */
+    DatePickerClasses["selectMonth"] = "h-datepicker-select-month";
+    /**
+     * Class name of the select year element
+     */
+    DatePickerClasses["selectYear"] = "h-datepicker-select-year";
+    /**
+     * Class name of the decade element
+     */
+    DatePickerClasses["decade"] = "h-datepicker-decade";
+    /**
+     * Class name of the next button element
+     */
+    DatePickerClasses["pcNextButton"] = "h-datepicker-next-button";
+    /**
+     * Class name of the day view element
+     */
+    DatePickerClasses["dayView"] = "h-datepicker-day-view";
+    /**
+     * Class name of the week header element
+     */
+    DatePickerClasses["weekHeader"] = "h-datepicker-weekheader";
+    /**
+     * Class name of the week number element
+     */
+    DatePickerClasses["weekNumber"] = "h-datepicker-weeknumber";
+    /**
+     * Class name of the week label container element
+     */
+    DatePickerClasses["weekLabelContainer"] = "h-datepicker-weeklabel-container";
+    /**
+     * Class name of the week day cell element
+     */
+    DatePickerClasses["weekDayCell"] = "h-datepicker-weekday-cell";
+    /**
+     * Class name of the week day element
+     */
+    DatePickerClasses["weekDay"] = "h-datepicker-weekday";
+    /**
+     * Class name of the day cell element
+     */
+    DatePickerClasses["dayCell"] = "h-datepicker-day-cell";
+    /**
+     * Class name of the day element
+     */
+    DatePickerClasses["day"] = "h-datepicker-day";
+    /**
+     * Class name of the month view element
+     */
+    DatePickerClasses["monthView"] = "h-datepicker-month-view";
+    /**
+     * Class name of the month element
+     */
+    DatePickerClasses["month"] = "h-datepicker-month";
+    /**
+     * Class name of the year view element
+     */
+    DatePickerClasses["yearView"] = "h-datepicker-year-view";
+    /**
+     * Class name of the year element
+     */
+    DatePickerClasses["year"] = "h-datepicker-year";
+    /**
+     * Class name of the time picker element
+     */
+    DatePickerClasses["timePicker"] = "h-datepicker-time-picker";
+    /**
+     * Class name of the hour picker element
+     */
+    DatePickerClasses["hourPicker"] = "h-datepicker-hour-picker";
+    /**
+     * Class name of the increment button element
+     */
+    DatePickerClasses["pcIncrementButton"] = "h-datepicker-increment-button";
+    /**
+     * Class name of the decrement button element
+     */
+    DatePickerClasses["pcDecrementButton"] = "h-datepicker-decrement-button";
+    /**
+     * Class name of the separator element
+     */
+    DatePickerClasses["separator"] = "h-datepicker-separator";
+    /**
+     * Class name of the minute picker element
+     */
+    DatePickerClasses["minutePicker"] = "h-datepicker-minute-picker";
+    /**
+     * Class name of the second picker element
+     */
+    DatePickerClasses["secondPicker"] = "h-datepicker-second-picker";
+    /**
+     * Class name of the ampm picker element
+     */
+    DatePickerClasses["ampmPicker"] = "h-datepicker-ampm-picker";
+    /**
+     * Class name of the buttonbar element
+     */
+    DatePickerClasses["buttonbar"] = "h-datepicker-buttonbar";
+    /**
+     * Class name of the today button element
+     */
+    DatePickerClasses["pcTodayButton"] = "h-datepicker-today-button";
+    /**
+     * Class name of the clear button element
+     */
+    DatePickerClasses["pcClearButton"] = "h-datepicker-clear-button";
+    /**
+     * Class name of the clear icon
+     */
+    DatePickerClasses["clearIcon"] = "h-datepicker-clear-icon";
+})(DatePickerClasses || (DatePickerClasses = {}));
+
+const DATEPICKER_VALUE_ACCESSOR = {
+    provide: NG_VALUE_ACCESSOR,
+    useExisting: forwardRef(() => DatePicker),
+    multi: true
+};
+const DATEPICKER_INSTANCE = new InjectionToken('DATEPICKER_INSTANCE');
+/**
+ * DatePicker is a form component to work with dates.
+ * @group Components
+ */
+class DatePicker extends BaseInput {
+    zone;
+    overlayService;
+    componentName = 'DatePicker';
+    bindDirectiveInstance = inject(Bind, { self: true });
+    $pcDatePicker = inject(DATEPICKER_INSTANCE, { optional: true, skipSelf: true }) ?? undefined;
+    iconDisplay = input('button', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "iconDisplay" }] : /* istanbul ignore next */ []));
+    /**
+     * Style class of the component.
+     * @deprecated since v20.0.0, use `class` instead.
+     * @group Props
+     */
+    styleClass = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "styleClass" }] : /* istanbul ignore next */ []));
+    /**
+     * Inline style of the input field.
+     * @group Props
+     */
+    inputStyle = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "inputStyle" }] : /* istanbul ignore next */ []));
+    /**
+     * Identifier of the focus input to match a label defined for the component.
+     * @group Props
+     */
+    inputId = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "inputId" }] : /* istanbul ignore next */ []));
+    /**
+     * Style class of the input field.
+     * @group Props
+     */
+    inputStyleClass = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "inputStyleClass" }] : /* istanbul ignore next */ []));
+    /**
+     * Placeholder text for the input.
+     * @group Props
+     */
+    placeholder = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "placeholder" }] : /* istanbul ignore next */ []));
+    /**
+     * Establishes relationships between the component and label(s) where its value should be one or more element IDs.
+     * @group Props
+     */
+    ariaLabelledBy = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "ariaLabelledBy" }] : /* istanbul ignore next */ []));
+    /**
+     * Defines a string that labels the input for accessibility.
+     * @group Props
+     */
+    ariaLabel = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    /**
+     * Defines a string that labels the icon button for accessibility.
+     * @group Props
+     */
+    iconAriaLabel = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "iconAriaLabel" }] : /* istanbul ignore next */ []));
+    /**
+     * Format of the date which can also be defined at locale settings.
+     * @group Props
+     */
+    dateFormat = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "dateFormat" }] : /* istanbul ignore next */ []));
+    /**
+     * Separator for multiple selection mode.
+     * @group Props
+     */
+    multipleSeparator = input(',', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "multipleSeparator" }] : /* istanbul ignore next */ []));
+    /**
+     * Separator for joining start and end dates on range selection mode.
+     * @group Props
+     */
+    rangeSeparator = input('-', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "rangeSeparator" }] : /* istanbul ignore next */ []));
+    /**
+     * When enabled, displays the datepicker as inline. Default is false for popup mode.
+     * @group Props
+     */
+    inline = input(false, { ...(ngDevMode ? { debugName: "inline" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * Whether to display dates in other months (non-selectable) at the start or end of the current month. To make these days selectable use the selectOtherMonths option.
+     * @group Props
+     */
+    showOtherMonths = input(true, { ...(ngDevMode ? { debugName: "showOtherMonths" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * Whether days in other months shown before or after the current month are selectable. This only applies if the showOtherMonths option is set to true.
+     * @group Props
+     */
+    selectOtherMonths = input(undefined, { ...(ngDevMode ? { debugName: "selectOtherMonths" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * When enabled, displays a button with icon next to input.
+     * @group Props
+     */
+    showIcon = input(undefined, { ...(ngDevMode ? { debugName: "showIcon" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * Icon of the datepicker button.
+     * @group Props
+     */
+    icon = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "icon" }] : /* istanbul ignore next */ []));
+    /**
+     * When specified, prevents entering the date manually with keyboard.
+     * @group Props
+     */
+    readonlyInput = input(undefined, { ...(ngDevMode ? { debugName: "readonlyInput" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * The cutoff year for determining the century for a date.
+     * @group Props
+     */
+    shortYearCutoff = input('+10', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "shortYearCutoff" }] : /* istanbul ignore next */ []));
+    /**
+     * Specifies 12 or 24 hour format.
+     * @group Props
+     */
+    hourFormat = input('24', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hourFormat" }] : /* istanbul ignore next */ []));
+    /**
+     * Whether to display timepicker only.
+     * @group Props
+     */
+    timeOnly = input(undefined, { ...(ngDevMode ? { debugName: "timeOnly" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * Hours to change per step.
+     * @group Props
+     */
+    stepHour = input(1, { ...(ngDevMode ? { debugName: "stepHour" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+    /**
+     * Minutes to change per step.
+     * @group Props
+     */
+    stepMinute = input(1, { ...(ngDevMode ? { debugName: "stepMinute" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+    /**
+     * Seconds to change per step.
+     * @group Props
+     */
+    stepSecond = input(1, { ...(ngDevMode ? { debugName: "stepSecond" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+    /**
+     * Whether to show the seconds in time picker.
+     * @group Props
+     */
+    showSeconds = input(false, { ...(ngDevMode ? { debugName: "showSeconds" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * When disabled, datepicker will not be visible with input focus.
+     * @group Props
+     */
+    showOnFocus = input(true, { ...(ngDevMode ? { debugName: "showOnFocus" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * When enabled, datepicker will show week numbers.
+     * @group Props
+     */
+    showWeek = input(false, { ...(ngDevMode ? { debugName: "showWeek" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * When enabled, datepicker will start week numbers from first day of the year.
+     * @group Props
+     */
+    startWeekFromFirstDayOfYear = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "startWeekFromFirstDayOfYear" }] : /* istanbul ignore next */ []));
+    /**
+     * When enabled, a clear icon is displayed to clear the value.
+     * @group Props
+     */
+    showClear = input(false, { ...(ngDevMode ? { debugName: "showClear" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * Type of the value to write back to ngModel, default is date and alternative is string.
+     * @group Props
+     */
+    dataType = input('date', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dataType" }] : /* istanbul ignore next */ []));
+    /**
+     * Defines the quantity of the selection, valid values are "single", "multiple" and "range".
+     * @group Props
+     */
+    selectionMode = input('single', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selectionMode" }] : /* istanbul ignore next */ []));
+    /**
+     * Maximum number of selectable dates in multiple mode.
+     * @group Props
+     */
+    maxDateCount = input(undefined, { ...(ngDevMode ? { debugName: "maxDateCount" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+    /**
+     * Whether to display today and clear buttons at the footer
+     * @group Props
+     */
+    showButtonBar = input(undefined, { ...(ngDevMode ? { debugName: "showButtonBar" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * Style class of the today button.
+     * @group Props
+     */
+    todayButtonStyleClass = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "todayButtonStyleClass" }] : /* istanbul ignore next */ []));
+    /**
+     * Style class of the clear button.
+     * @group Props
+     */
+    clearButtonStyleClass = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "clearButtonStyleClass" }] : /* istanbul ignore next */ []));
+    /**
+     * When present, it specifies that the component should automatically get focus on load.
+     * @group Props
+     */
+    autofocus = input(undefined, { ...(ngDevMode ? { debugName: "autofocus" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * Whether to automatically manage layering.
+     * @group Props
+     */
+    autoZIndex = input(true, { ...(ngDevMode ? { debugName: "autoZIndex" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * Base zIndex value to use in layering.
+     * @group Props
+     */
+    baseZIndex = input(0, { ...(ngDevMode ? { debugName: "baseZIndex" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+    /**
+     * Style class of the datetimepicker container element.
+     * @group Props
+     */
+    panelStyleClass = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "panelStyleClass" }] : /* istanbul ignore next */ []));
+    /**
+     * Inline style of the datetimepicker container element.
+     * @group Props
+     */
+    panelStyle = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "panelStyle" }] : /* istanbul ignore next */ []));
+    /**
+     * Keep invalid value when input blur.
+     * @group Props
+     */
+    keepInvalid = input(false, { ...(ngDevMode ? { debugName: "keepInvalid" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * Whether to hide the overlay on date selection.
+     * @group Props
+     */
+    hideOnDateTimeSelect = input(true, { ...(ngDevMode ? { debugName: "hideOnDateTimeSelect" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * When enabled, datepicker overlay is displayed as optimized for touch devices.
+     * @group Props
+     */
+    touchUI = input(undefined, { ...(ngDevMode ? { debugName: "touchUI" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * Separator of time selector.
+     * @group Props
+     */
+    timeSeparator = input(':', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "timeSeparator" }] : /* istanbul ignore next */ []));
+    /**
+     * When enabled, can only focus on elements inside the datepicker.
+     * @group Props
+     */
+    focusTrap = input(true, { ...(ngDevMode ? { debugName: "focusTrap" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * Transition options of the show animation.
+     * @group Props
+     * @deprecated since v21.0.0, use `motionOptions` instead.
+     */
+    showTransitionOptions = input('.12s cubic-bezier(0, 0, 0.2, 1)', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showTransitionOptions" }] : /* istanbul ignore next */ []));
+    /**
+     * Transition options of the hide animation.
+     * @group Props
+     * @deprecated since v21.0.0, use `motionOptions` instead.
+     */
+    hideTransitionOptions = input('.1s linear', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hideTransitionOptions" }] : /* istanbul ignore next */ []));
+    /**
+     * Index of the element in tabbing order.
+     * @group Props
+     */
+    tabindex = input(undefined, { ...(ngDevMode ? { debugName: "tabindex" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+    /**
+     * The minimum selectable date.
+     * @group Props
+     */
+    minDate = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "minDate" }] : /* istanbul ignore next */ []));
+    /**
+     * The maximum selectable date.
+     * @group Props
+     */
+    maxDate = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "maxDate" }] : /* istanbul ignore next */ []));
+    /**
+     * Array with dates that should be disabled (not selectable).
+     * @group Props
+     */
+    disabledDates = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "disabledDates" }] : /* istanbul ignore next */ []));
+    /**
+     * Array with weekday numbers that should be disabled (not selectable).
+     * @group Props
+     */
+    disabledDays = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "disabledDays" }] : /* istanbul ignore next */ []));
+    /**
+     * Whether to display timepicker.
+     * @group Props
+     */
+    showTime = input(undefined, { ...(ngDevMode ? { debugName: "showTime" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * An array of options for responsive design.
+     * @group Props
+     */
+    responsiveOptions = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "responsiveOptions" }] : /* istanbul ignore next */ []));
+    /**
+     * Number of months to display.
+     * @group Props
+     */
+    numberOfMonths = input(1, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "numberOfMonths" }] : /* istanbul ignore next */ []));
+    /**
+     * Defines the first of the week for various date calculations.
+     * @group Props
+     */
+    firstDayOfWeek = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "firstDayOfWeek" }] : /* istanbul ignore next */ []));
+    /**
+     * Type of view to display, valid values are "date" for datepicker and "month" for month picker.
+     * @group Props
+     */
+    view = input('date', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "view" }] : /* istanbul ignore next */ []));
+    /**
+     * Set the date to highlight on first opening if the field is blank.
+     * @group Props
+     */
+    defaultDate = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "defaultDate" }] : /* istanbul ignore next */ []));
+    /**
+     * Target element to attach the overlay, valid values are "body" or a local ng-template variable of another element (note: use binding with brackets for template variables, e.g. [appendTo]="mydiv" for a div element having #mydiv as variable name).
+     * @defaultValue 'self'
+     * @group Props
+     */
+    appendTo = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "appendTo" }] : /* istanbul ignore next */ []));
+    /**
+     * The motion options.
+     * @group Props
+     */
+    motionOptions = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "motionOptions" }] : /* istanbul ignore next */ []));
+    computedMotionOptions = computed(() => {
+        return {
+            ...this.ptm('motion'),
+            ...this.motionOptions()
+        };
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "computedMotionOptions" }] : /* istanbul ignore next */ []));
+    /**
+     * Callback to invoke on focus of input field.
+     * @param {Event} event - browser event.
+     * @group Emits
+     */
+    onFocus = output();
+    /**
+     * Callback to invoke on blur of input field.
+     * @param {Event} event - browser event.
+     * @group Emits
+     */
+    onBlur = output();
+    /**
+     * Callback to invoke when date panel closed.
+     * @param {HTMLDivElement} element - The element being transitioned/animated.
+     * @group Emits
+     */
+    onClose = output();
+    /**
+     * Callback to invoke on date select.
+     * @param {Date} date - date value.
+     * @group Emits
+     */
+    onSelect = output();
+    /**
+     * Callback to invoke when input field cleared.
+     * @group Emits
+     */
+    onClear = output();
+    /**
+     * Callback to invoke when input field is being typed.
+     * @param {Event} event - browser event
+     * @group Emits
+     */
+    onInput = output();
+    /**
+     * Callback to invoke when today button is clicked.
+     * @param {Date} date - today as a date instance.
+     * @group Emits
+     */
+    onTodayClick = output();
+    /**
+     * Callback to invoke when clear button is clicked.
+     * @param {Event} event - browser event.
+     * @group Emits
+     */
+    onClearClick = output();
+    /**
+     * Callback to invoke when a month is changed using the navigators.
+     * @param {DatePickerMonthChangeEvent} event - custom month change event.
+     * @group Emits
+     */
+    onMonthChange = output();
+    /**
+     * Callback to invoke when a year is changed using the navigators.
+     * @param {DatePickerYearChangeEvent} event - custom year change event.
+     * @group Emits
+     */
+    onYearChange = output();
+    /**
+     * Callback to invoke when clicked outside of the date panel.
+     * @group Emits
+     */
+    onClickOutside = output();
+    /**
+     * Callback to invoke when datepicker panel is shown.
+     * @param {HTMLDivElement} element - The element being transitioned/animated.
+     * @group Emits
+     */
+    onShow = output();
+    inputfieldViewChild = viewChild('inputfield', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "inputfieldViewChild" }] : /* istanbul ignore next */ []));
+    contentViewChild = viewChild('contentWrapper', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "contentViewChild" }] : /* istanbul ignore next */ []));
+    _componentStyle = inject(DatePickerStyle);
+    value;
+    dates;
+    months;
+    weekDays;
+    currentMonth;
+    currentYear;
+    currentHour;
+    currentMinute;
+    currentSecond;
+    p;
+    pm;
+    mask;
+    maskClickListener;
+    overlay;
+    responsiveStyleElement;
+    overlayVisible;
+    overlayMinWidth;
+    $appendTo = computed(() => this.appendTo() || this.config.overlayAppendTo(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "$appendTo" }] : /* istanbul ignore next */ []));
+    calendarElement;
+    timePickerTimer;
+    documentClickListener;
+    animationEndListener;
+    ticksTo1970;
+    yearOptions;
+    focus;
+    isKeydown;
+    _yearRange;
+    preventDocumentListener;
+    dayClass(date) {
+        return this._componentStyle.classes.day({ instance: this, date: date });
+    }
+    /**
+     * Custom template for date cells.
+     * @param {DatePickerDateTemplateContext} context - date template context.
+     * @group Templates
+     */
+    dateTemplate = contentChild('date', { ...(ngDevMode ? { debugName: "dateTemplate" } : /* istanbul ignore next */ {}), descendants: false });
+    /**
+     * Custom template for header section.
+     * @group Templates
+     */
+    headerTemplate = contentChild('header', { ...(ngDevMode ? { debugName: "headerTemplate" } : /* istanbul ignore next */ {}), descendants: false });
+    /**
+     * Custom template for footer section.
+     * @group Templates
+     */
+    footerTemplate = contentChild('footer', { ...(ngDevMode ? { debugName: "footerTemplate" } : /* istanbul ignore next */ {}), descendants: false });
+    /**
+     * Custom template for disabled date cells.
+     * @param {DatePickerDisabledDateTemplateContext} context - disabled date template context.
+     * @group Templates
+     */
+    disabledDateTemplate = contentChild('disabledDate', { ...(ngDevMode ? { debugName: "disabledDateTemplate" } : /* istanbul ignore next */ {}), descendants: false });
+    /**
+     * Custom template for decade view.
+     * @param {DatePickerDecadeTemplateContext} context - decade template context.
+     * @group Templates
+     */
+    decadeTemplate = contentChild('decade', { ...(ngDevMode ? { debugName: "decadeTemplate" } : /* istanbul ignore next */ {}), descendants: false });
+    /**
+     * Custom template for previous month icon.
+     * @group Templates
+     */
+    previousIconTemplate = contentChild('previousicon', { ...(ngDevMode ? { debugName: "previousIconTemplate" } : /* istanbul ignore next */ {}), descendants: false });
+    /**
+     * Custom template for next month icon.
+     * @group Templates
+     */
+    nextIconTemplate = contentChild('nexticon', { ...(ngDevMode ? { debugName: "nextIconTemplate" } : /* istanbul ignore next */ {}), descendants: false });
+    /**
+     * Custom template for trigger icon.
+     * @group Templates
+     */
+    triggerIconTemplate = contentChild('triggericon', { ...(ngDevMode ? { debugName: "triggerIconTemplate" } : /* istanbul ignore next */ {}), descendants: false });
+    /**
+     * Custom template for clear icon.
+     * @group Templates
+     */
+    clearIconTemplate = contentChild('clearicon', { ...(ngDevMode ? { debugName: "clearIconTemplate" } : /* istanbul ignore next */ {}), descendants: false });
+    /**
+     * Custom template for decrement icon.
+     * @group Templates
+     */
+    decrementIconTemplate = contentChild('decrementicon', { ...(ngDevMode ? { debugName: "decrementIconTemplate" } : /* istanbul ignore next */ {}), descendants: false });
+    /**
+     * Custom template for increment icon.
+     * @group Templates
+     */
+    incrementIconTemplate = contentChild('incrementicon', { ...(ngDevMode ? { debugName: "incrementIconTemplate" } : /* istanbul ignore next */ {}), descendants: false });
+    /**
+     * Custom template for input icon.
+     * @param {DatePickerInputIconTemplateContext} context - input icon template context.
+     * @group Templates
+     */
+    inputIconTemplate = contentChild('inputicon', { ...(ngDevMode ? { debugName: "inputIconTemplate" } : /* istanbul ignore next */ {}), descendants: false });
+    /**
+     * Custom template for button bar.
+     * @param {DatePickerButtonBarTemplateContext} context - button bar template context.
+     * @group Templates
+     */
+    buttonBarTemplate = contentChild('buttonbar', { ...(ngDevMode ? { debugName: "buttonBarTemplate" } : /* istanbul ignore next */ {}), descendants: false });
+    _dateTemplate;
+    _headerTemplate;
+    _footerTemplate;
+    _disabledDateTemplate;
+    _decadeTemplate;
+    _previousIconTemplate;
+    _nextIconTemplate;
+    _triggerIconTemplate;
+    _clearIconTemplate;
+    _decrementIconTemplate;
+    _incrementIconTemplate;
+    _inputIconTemplate;
+    _buttonBarTemplate;
+    selectElement;
+    todayElement;
+    focusElement;
+    scrollHandler;
+    documentResizeListener;
+    navigationState = null;
+    isMonthNavigate;
+    initialized;
+    translationSubscription;
+    _locale;
+    currentView;
+    attributeSelector;
+    panelId;
+    preventFocus;
+    _focusKey = null;
+    window;
+    get locale() {
+        return this._locale;
+    }
+    get iconButtonAriaLabel() {
+        const iconAriaLabel = this.iconAriaLabel();
+        return iconAriaLabel ? iconAriaLabel : this.getTranslation('chooseDate');
+    }
+    get prevIconAriaLabel() {
+        return this.currentView === 'year' ? this.getTranslation('prevDecade') : this.currentView === 'month' ? this.getTranslation('prevYear') : this.getTranslation('prevMonth');
+    }
+    get nextIconAriaLabel() {
+        return this.currentView === 'year' ? this.getTranslation('nextDecade') : this.currentView === 'month' ? this.getTranslation('nextYear') : this.getTranslation('nextMonth');
+    }
+    constructor(zone, overlayService) {
+        super();
+        this.zone = zone;
+        this.overlayService = overlayService;
+        this.window = this.document.defaultView;
+        // Mirrors the former `minDate` setter: recreate the visible months when the min date changes.
+        effect(() => {
+            this.minDate();
+            if (this.currentMonth != undefined && this.currentMonth != null && this.currentYear) {
+                this.createMonths(this.currentMonth, this.currentYear);
+            }
+        });
+        // Mirrors the former `maxDate` setter: recreate the visible months when the max date changes.
+        effect(() => {
+            this.maxDate();
+            if (this.currentMonth != undefined && this.currentMonth != null && this.currentYear) {
+                this.createMonths(this.currentMonth, this.currentYear);
+            }
+        });
+        // Mirrors the former `disabledDates` setter: recreate the visible months when the disabled dates change.
+        effect(() => {
+            this.disabledDates();
+            if (this.currentMonth != undefined && this.currentMonth != null && this.currentYear) {
+                this.createMonths(this.currentMonth, this.currentYear);
+            }
+        });
+        // Mirrors the former `disabledDays` setter: recreate the visible months when the disabled days change.
+        effect(() => {
+            this.disabledDays();
+            if (this.currentMonth != undefined && this.currentMonth != null && this.currentYear) {
+                this.createMonths(this.currentMonth, this.currentYear);
+            }
+        });
+        // Mirrors the former `showTime` setter.
+        effect(() => {
+            this.showTime();
+            if (this.currentHour === undefined) {
+                this.initTime(this.value || new Date());
+            }
+            this.updateInputfield();
+        });
+        // Mirrors the former `responsiveOptions` setter.
+        effect(() => {
+            this.responsiveOptions();
+            this.destroyResponsiveStyleElement();
+            this.createResponsiveStyle();
+        });
+        // Mirrors the former `numberOfMonths` setter.
+        effect(() => {
+            this.numberOfMonths();
+            this.destroyResponsiveStyleElement();
+            this.createResponsiveStyle();
+        });
+        // Mirrors the former `firstDayOfWeek` setter.
+        effect(() => {
+            this.firstDayOfWeek();
+            this.createWeekDays();
+        });
+        // Mirrors the former `view` setter.
+        effect(() => {
+            this.currentView = this.view();
+        });
+        // Mirrors the former `defaultDate` setter.
+        effect(() => {
+            const defaultDate = this.defaultDate();
+            if (this.initialized) {
+                const date = defaultDate || new Date();
+                this.currentMonth = date.getMonth();
+                this.currentYear = date.getFullYear();
+                this.initTime(date);
+                this.createMonths(this.currentMonth, this.currentYear);
+            }
+        });
+        // Mirrors the former `dateFormat` setter.
+        effect(() => {
+            this.dateFormat();
+            if (this.initialized) {
+                this.updateInputfield();
+            }
+        });
+        // Mirrors the former `hourFormat` setter.
+        effect(() => {
+            this.hourFormat();
+            if (this.initialized) {
+                this.updateInputfield();
+            }
+        });
+        // Mirrors the former contentWrapper view-query setter.
+        effect(() => {
+            const content = this.contentViewChild();
+            if (content && this.overlay) {
+                if (this.isMonthNavigate) {
+                    Promise.resolve(null).then(() => this.updateFocus());
+                    this.isMonthNavigate = false;
+                }
+                else {
+                    if (!this.focus && !this.inline()) {
+                        this.initFocusableCell();
+                    }
+                }
+            }
+        });
+    }
+    onInit() {
+        this.attributeSelector = uuid('pn_id_');
+        this.panelId = this.attributeSelector + '_panel';
+        const date = this.defaultDate() || new Date();
+        this.createResponsiveStyle();
+        this.currentMonth = date.getMonth();
+        this.currentYear = date.getFullYear();
+        this.yearOptions = [];
+        this.currentView = this.view();
+        if (this.view() === 'date') {
+            this.createWeekDays();
+            this.initTime(date);
+            this.createMonths(this.currentMonth, this.currentYear);
+            this.ticksTo1970 = ((1970 - 1) * 365 + Math.floor(1970 / 4) - Math.floor(1970 / 100) + Math.floor(1970 / 400)) * 24 * 60 * 60 * 10000000;
+        }
+        this.translationSubscription = this.config.translationObserver.subscribe(() => {
+            this.createWeekDays();
+            this.cd.markForCheck();
+        });
+        this.initialized = true;
+    }
+    onAfterViewInit() {
+        if (this.inline()) {
+            this.contentViewChild() && this.contentViewChild().nativeElement.setAttribute(this.attributeSelector, '');
+        }
+        else {
+            if (!this.$disabled() && this.overlay) {
+                this.initFocusableCell();
+                if (this.numberOfMonths() === 1) {
+                    if (this.contentViewChild() && this.contentViewChild().nativeElement) {
+                        this.contentViewChild().nativeElement.style.width = getOuterWidth(this.el?.nativeElement) + 'px';
+                    }
+                }
+            }
+        }
+    }
+    onAfterViewChecked() {
+        this.bindDirectiveInstance.setAttrs(this.ptms(['host', 'root']));
+    }
+    templates = contentChildren(HelixTemplate, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "templates" }] : /* istanbul ignore next */ []));
+    onAfterContentInit() {
+        this.templates().forEach((item) => {
+            switch (item.getType()) {
+                case 'date':
+                    this._dateTemplate = item.template;
+                    break;
+                case 'decade':
+                    this._decadeTemplate = item.template;
+                    break;
+                case 'disabledDate':
+                    this._disabledDateTemplate = item.template;
+                    break;
+                case 'header':
+                    this._headerTemplate = item.template;
+                    break;
+                case 'inputicon':
+                    this._inputIconTemplate = item.template;
+                    break;
+                case 'buttonbar':
+                    this._buttonBarTemplate = item.template;
+                    break;
+                case 'previousicon':
+                    this._previousIconTemplate = item.template;
+                    break;
+                case 'nexticon':
+                    this._nextIconTemplate = item.template;
+                    break;
+                case 'triggericon':
+                    this._triggerIconTemplate = item.template;
+                    break;
+                case 'clearicon':
+                    this._clearIconTemplate = item.template;
+                    break;
+                case 'decrementicon':
+                    this._decrementIconTemplate = item.template;
+                    break;
+                case 'incrementicon':
+                    this._incrementIconTemplate = item.template;
+                    break;
+                case 'footer':
+                    this._footerTemplate = item.template;
+                    break;
+                default:
+                    this._dateTemplate = item.template;
+                    break;
+            }
+        });
+    }
+    getTranslation(option) {
+        return this.config.getTranslation(option);
+    }
+    populateYearOptions(start, end) {
+        this.yearOptions = [];
+        for (let i = start; i <= end; i++) {
+            this.yearOptions.push(i);
+        }
+    }
+    createWeekDays() {
+        this.weekDays = [];
+        let dayIndex = this.getFirstDateOfWeek();
+        let dayLabels = this.getTranslation(TranslationKeys.DAY_NAMES_MIN);
+        for (let i = 0; i < 7; i++) {
+            this.weekDays.push(dayLabels[dayIndex]);
+            dayIndex = dayIndex == 6 ? 0 : ++dayIndex;
+        }
+    }
+    monthPickerValues() {
+        let monthPickerValues = [];
+        for (let i = 0; i <= 11; i++) {
+            monthPickerValues.push(this.config.getTranslation('monthNamesShort')[i]);
+        }
+        return monthPickerValues;
+    }
+    yearPickerValues() {
+        let yearPickerValues = [];
+        let base = this.currentYear - (this.currentYear % 10);
+        for (let i = 0; i < 10; i++) {
+            yearPickerValues.push(base + i);
+        }
+        return yearPickerValues;
+    }
+    createMonths(month, year) {
+        this.months = this.months = [];
+        for (let i = 0; i < this.numberOfMonths(); i++) {
+            let m = month + i;
+            let y = year;
+            if (m > 11) {
+                m = m % 12;
+                y = year + Math.floor((month + i) / 12);
+            }
+            this.months.push(this.createMonth(m, y));
+        }
+    }
+    getWeekNumber(date) {
+        let checkDate = new Date(date.getTime());
+        if (this.startWeekFromFirstDayOfYear()) {
+            let firstDayOfWeek = +this.getFirstDateOfWeek();
+            checkDate.setDate(checkDate.getDate() + 6 + firstDayOfWeek - checkDate.getDay());
+        }
+        else {
+            checkDate.setDate(checkDate.getDate() + 4 - (checkDate.getDay() || 7));
+        }
+        let time = checkDate.getTime();
+        checkDate.setMonth(0);
+        checkDate.setDate(1);
+        return Math.floor(Math.round((time - checkDate.getTime()) / 86400000) / 7) + 1;
+    }
+    createMonth(month, year) {
+        let dates = [];
+        let firstDay = this.getFirstDayOfMonthIndex(month, year);
+        let daysLength = this.getDaysCountInMonth(month, year);
+        let prevMonthDaysLength = this.getDaysCountInPrevMonth(month, year);
+        let dayNo = 1;
+        let today = new Date();
+        let weekNumbers = [];
+        let monthRows = Math.ceil((daysLength + firstDay) / 7);
+        for (let i = 0; i < monthRows; i++) {
+            let week = [];
+            if (i == 0) {
+                for (let j = prevMonthDaysLength - firstDay + 1; j <= prevMonthDaysLength; j++) {
+                    let prev = this.getPreviousMonthAndYear(month, year);
+                    week.push({
+                        day: j,
+                        month: prev.month,
+                        year: prev.year,
+                        otherMonth: true,
+                        today: this.isToday(today, j, prev.month, prev.year),
+                        selectable: this.isSelectable(j, prev.month, prev.year, true)
+                    });
+                }
+                let remainingDaysLength = 7 - week.length;
+                for (let j = 0; j < remainingDaysLength; j++) {
+                    week.push({
+                        day: dayNo,
+                        month: month,
+                        year: year,
+                        today: this.isToday(today, dayNo, month, year),
+                        selectable: this.isSelectable(dayNo, month, year, false)
+                    });
+                    dayNo++;
+                }
+            }
+            else {
+                for (let j = 0; j < 7; j++) {
+                    if (dayNo > daysLength) {
+                        let next = this.getNextMonthAndYear(month, year);
+                        week.push({
+                            day: dayNo - daysLength,
+                            month: next.month,
+                            year: next.year,
+                            otherMonth: true,
+                            today: this.isToday(today, dayNo - daysLength, next.month, next.year),
+                            selectable: this.isSelectable(dayNo - daysLength, next.month, next.year, true)
+                        });
+                    }
+                    else {
+                        week.push({
+                            day: dayNo,
+                            month: month,
+                            year: year,
+                            today: this.isToday(today, dayNo, month, year),
+                            selectable: this.isSelectable(dayNo, month, year, false)
+                        });
+                    }
+                    dayNo++;
+                }
+            }
+            if (this.showWeek()) {
+                weekNumbers.push(this.getWeekNumber(new Date(week[0].year, week[0].month, week[0].day)));
+            }
+            dates.push(week);
+        }
+        return {
+            month: month,
+            year: year,
+            dates: dates,
+            weekNumbers: weekNumbers
+        };
+    }
+    initTime(date) {
+        this.pm = date.getHours() > 11;
+        if (this.showTime()) {
+            this.currentMinute = date.getMinutes();
+            this.currentSecond = this.showSeconds() ? date.getSeconds() : 0;
+            this.setCurrentHourPM(date.getHours());
+        }
+        else if (this.timeOnly()) {
+            this.currentMinute = 0;
+            this.currentHour = 0;
+            this.currentSecond = 0;
+        }
+    }
+    navBackward(event) {
+        if (this.$disabled()) {
+            event.preventDefault();
+            return;
+        }
+        this.isMonthNavigate = true;
+        if (this.currentView === 'month') {
+            this.decrementYear();
+            setTimeout(() => {
+                this.updateFocus();
+            }, 1);
+        }
+        else if (this.currentView === 'year') {
+            this.decrementDecade();
+            setTimeout(() => {
+                this.updateFocus();
+            }, 1);
+        }
+        else {
+            if (this.currentMonth === 0) {
+                this.currentMonth = 11;
+                this.decrementYear();
+            }
+            else {
+                this.currentMonth--;
+            }
+            this.onMonthChange.emit({ month: this.currentMonth + 1, year: this.currentYear });
+            this.createMonths(this.currentMonth, this.currentYear);
+        }
+    }
+    navForward(event) {
+        if (this.$disabled()) {
+            event.preventDefault();
+            return;
+        }
+        this.isMonthNavigate = true;
+        if (this.currentView === 'month') {
+            this.incrementYear();
+            setTimeout(() => {
+                this.updateFocus();
+            }, 1);
+        }
+        else if (this.currentView === 'year') {
+            this.incrementDecade();
+            setTimeout(() => {
+                this.updateFocus();
+            }, 1);
+        }
+        else {
+            if (this.currentMonth === 11) {
+                this.currentMonth = 0;
+                this.incrementYear();
+            }
+            else {
+                this.currentMonth++;
+            }
+            this.onMonthChange.emit({ month: this.currentMonth + 1, year: this.currentYear });
+            this.createMonths(this.currentMonth, this.currentYear);
+        }
+    }
+    decrementYear() {
+        this.currentYear--;
+        let _yearOptions = this.yearOptions;
+        if (this.currentYear < _yearOptions[0]) {
+            let difference = _yearOptions[_yearOptions.length - 1] - _yearOptions[0];
+            this.populateYearOptions(_yearOptions[0] - difference, _yearOptions[_yearOptions.length - 1] - difference);
+        }
+    }
+    decrementDecade() {
+        this.currentYear = this.currentYear - 10;
+    }
+    incrementDecade() {
+        this.currentYear = this.currentYear + 10;
+    }
+    incrementYear() {
+        this.currentYear++;
+        let _yearOptions = this.yearOptions;
+        if (this.currentYear > _yearOptions[_yearOptions.length - 1]) {
+            let difference = _yearOptions[_yearOptions.length - 1] - _yearOptions[0];
+            this.populateYearOptions(_yearOptions[0] + difference, _yearOptions[_yearOptions.length - 1] + difference);
+        }
+    }
+    switchToMonthView(event) {
+        this.setCurrentView('month');
+        event.preventDefault();
+    }
+    switchToYearView(event) {
+        this.setCurrentView('year');
+        event.preventDefault();
+    }
+    onDateSelect(event, dateMeta) {
+        if (this.$disabled() || !dateMeta.selectable) {
+            event.preventDefault();
+            return;
+        }
+        if (this.isMultipleSelection() && this.isSelected(dateMeta)) {
+            this.value = this.value.filter((date, i) => {
+                return !this.isDateEquals(date, dateMeta);
+            });
+            if (this.value.length === 0) {
+                this.value = null;
+            }
+            this.updateModel(this.value);
+        }
+        else {
+            if (this.shouldSelectDate(dateMeta)) {
+                this.selectDate(dateMeta);
+            }
+        }
+        if (this.hideOnDateTimeSelect() && (this.isSingleSelection() || (this.isRangeSelection() && this.value[1]))) {
+            setTimeout(() => {
+                event.preventDefault();
+                this.hideOverlay();
+                if (this.mask) {
+                    this.disableModality();
+                }
+                this.cd.markForCheck();
+            }, 150);
+        }
+        this.updateInputfield();
+        event.preventDefault();
+    }
+    shouldSelectDate(dateMeta) {
+        if (this.isMultipleSelection())
+            return this.maxDateCount() != null ? this.maxDateCount() > (this.value ? this.value.length : 0) : true;
+        else
+            return true;
+    }
+    onMonthSelect(event, index) {
+        if (this.view() === 'month') {
+            this.onDateSelect(event, { year: this.currentYear, month: index, day: 1, selectable: true });
+        }
+        else {
+            this.currentMonth = index;
+            this.createMonths(this.currentMonth, this.currentYear);
+            this.setCurrentView('date');
+            this.onMonthChange.emit({ month: this.currentMonth + 1, year: this.currentYear });
+        }
+    }
+    onYearSelect(event, year) {
+        if (this.view() === 'year') {
+            this.onDateSelect(event, { year: year, month: 0, day: 1, selectable: true });
+        }
+        else {
+            this.currentYear = year;
+            this.setCurrentView('month');
+            this.onYearChange.emit({ month: this.currentMonth + 1, year: this.currentYear });
+        }
+    }
+    updateInputfield() {
+        let formattedValue = '';
+        if (this.value) {
+            if (this.isSingleSelection()) {
+                formattedValue = this.formatDateTime(this.value);
+            }
+            else if (this.isMultipleSelection()) {
+                for (let i = 0; i < this.value.length; i++) {
+                    let dateAsString = this.formatDateTime(this.value[i]);
+                    formattedValue += dateAsString;
+                    if (i !== this.value.length - 1) {
+                        formattedValue += this.multipleSeparator() + ' ';
+                    }
+                }
+            }
+            else if (this.isRangeSelection()) {
+                if (this.value && this.value.length) {
+                    let startDate = this.value[0];
+                    let endDate = this.value[1];
+                    formattedValue = this.formatDateTime(startDate);
+                    if (endDate) {
+                        formattedValue += ' ' + this.rangeSeparator() + ' ' + this.formatDateTime(endDate);
+                    }
+                }
+            }
+        }
+        this.writeModelValue(formattedValue);
+        this.inputFieldValue = formattedValue;
+        if (this.inputfieldViewChild() && this.inputfieldViewChild().nativeElement) {
+            this.inputfieldViewChild().nativeElement.value = this.inputFieldValue;
+        }
+    }
+    inputFieldValue = null;
+    formatDateTime(date) {
+        let formattedValue = this.keepInvalid() ? date : null;
+        const isDateValid = this.isValidDateForTimeConstraints(date);
+        if (this.isValidDate(date)) {
+            if (this.timeOnly()) {
+                formattedValue = this.formatTime(date);
+            }
+            else {
+                formattedValue = this.formatDate(date, this.getDateFormat());
+                if (this.showTime()) {
+                    formattedValue += ' ' + this.formatTime(date);
+                }
+            }
+        }
+        else if (this.dataType() === 'string') {
+            formattedValue = date;
+        }
+        formattedValue = isDateValid ? formattedValue : '';
+        return formattedValue;
+    }
+    formatDateMetaToDate(dateMeta) {
+        return new Date(dateMeta.year, dateMeta.month, dateMeta.day);
+    }
+    formatDateKey(date) {
+        return `${date.getFullYear()}-${date.getMonth()}-${date.getDate()}`;
+    }
+    setCurrentHourPM(hours) {
+        if (this.hourFormat() == '12') {
+            this.pm = hours > 11;
+            if (hours >= 12) {
+                this.currentHour = hours == 12 ? 12 : hours - 12;
+            }
+            else {
+                this.currentHour = hours == 0 ? 12 : hours;
+            }
+        }
+        else {
+            this.currentHour = hours;
+        }
+    }
+    setCurrentView(currentView) {
+        this.currentView = currentView;
+        this.cd.detectChanges();
+        this.alignOverlay();
+    }
+    selectDate(dateMeta) {
+        let date = this.formatDateMetaToDate(dateMeta);
+        if (this.showTime()) {
+            if (this.hourFormat() == '12') {
+                if (this.currentHour === 12)
+                    date.setHours(this.pm ? 12 : 0);
+                else
+                    date.setHours(this.pm ? this.currentHour + 12 : this.currentHour);
+            }
+            else {
+                date.setHours(this.currentHour);
+            }
+            date.setMinutes(this.currentMinute);
+            date.setSeconds(this.currentSecond);
+        }
+        if (this.minDate() && this.minDate() > date) {
+            date = this.minDate();
+            this.setCurrentHourPM(date.getHours());
+            this.currentMinute = date.getMinutes();
+            this.currentSecond = date.getSeconds();
+        }
+        if (this.maxDate() && this.maxDate() < date) {
+            date = this.maxDate();
+            this.setCurrentHourPM(date.getHours());
+            this.currentMinute = date.getMinutes();
+            this.currentSecond = date.getSeconds();
+        }
+        if (this.isSingleSelection()) {
+            this.updateModel(date);
+        }
+        else if (this.isMultipleSelection()) {
+            this.updateModel(this.value ? [...this.value, date] : [date]);
+        }
+        else if (this.isRangeSelection()) {
+            if (this.value && this.value.length) {
+                let startDate = this.value[0];
+                let endDate = this.value[1];
+                if (!endDate && date.getTime() >= startDate.getTime()) {
+                    endDate = date;
+                }
+                else {
+                    startDate = date;
+                    endDate = null;
+                }
+                this.updateModel([startDate, endDate]);
+            }
+            else {
+                this.updateModel([date, null]);
+            }
+        }
+        this.onSelect.emit(date);
+    }
+    updateModel(value) {
+        this.value = value;
+        const dataType = this.dataType();
+        if (dataType == 'date') {
+            this.writeModelValue(this.value);
+            this.onModelChange(this.value);
+        }
+        else if (dataType == 'string') {
+            if (this.isSingleSelection()) {
+                this.onModelChange(this.formatDateTime(this.value));
+            }
+            else {
+                let stringArrValue = null;
+                if (Array.isArray(this.value)) {
+                    stringArrValue = this.value.map((date) => this.formatDateTime(date));
+                }
+                this.writeModelValue(stringArrValue);
+                this.onModelChange(stringArrValue);
+            }
+        }
+    }
+    getFirstDayOfMonthIndex(month, year) {
+        let day = new Date();
+        day.setDate(1);
+        day.setMonth(month);
+        day.setFullYear(year);
+        let dayIndex = day.getDay() + this.getSundayIndex();
+        return dayIndex >= 7 ? dayIndex - 7 : dayIndex;
+    }
+    getDaysCountInMonth(month, year) {
+        return 32 - this.daylightSavingAdjust(new Date(year, month, 32)).getDate();
+    }
+    getDaysCountInPrevMonth(month, year) {
+        let prev = this.getPreviousMonthAndYear(month, year);
+        return this.getDaysCountInMonth(prev.month, prev.year);
+    }
+    getPreviousMonthAndYear(month, year) {
+        let m, y;
+        if (month === 0) {
+            m = 11;
+            y = year - 1;
+        }
+        else {
+            m = month - 1;
+            y = year;
+        }
+        return { month: m, year: y };
+    }
+    getNextMonthAndYear(month, year) {
+        let m, y;
+        if (month === 11) {
+            m = 0;
+            y = year + 1;
+        }
+        else {
+            m = month + 1;
+            y = year;
+        }
+        return { month: m, year: y };
+    }
+    getSundayIndex() {
+        let firstDayOfWeek = this.getFirstDateOfWeek();
+        return firstDayOfWeek > 0 ? 7 - firstDayOfWeek : 0;
+    }
+    isSelected(dateMeta) {
+        if (this.value) {
+            if (this.isSingleSelection()) {
+                return this.isDateEquals(this.value, dateMeta);
+            }
+            else if (this.isMultipleSelection()) {
+                let selected = false;
+                for (let date of this.value) {
+                    selected = this.isDateEquals(date, dateMeta);
+                    if (selected) {
+                        break;
+                    }
+                }
+                return selected;
+            }
+            else if (this.isRangeSelection()) {
+                if (this.value[1])
+                    return this.isDateEquals(this.value[0], dateMeta) || this.isDateEquals(this.value[1], dateMeta) || this.isDateBetween(this.value[0], this.value[1], dateMeta);
+                else
+                    return this.isDateEquals(this.value[0], dateMeta);
+            }
+        }
+        else {
+            return false;
+        }
+    }
+    isComparable() {
+        return this.value != null && typeof this.value !== 'string';
+    }
+    isMonthSelected(month) {
+        if (!this.isComparable())
+            return false;
+        if (this.isMultipleSelection()) {
+            return this.value.some((currentValue) => currentValue.getMonth() === month && currentValue.getFullYear() === this.currentYear);
+        }
+        else if (this.isRangeSelection()) {
+            if (!this.value[1]) {
+                return this.value[0]?.getFullYear() === this.currentYear && this.value[0]?.getMonth() === month;
+            }
+            else {
+                const currentDate = new Date(this.currentYear, month, 1);
+                const startDate = new Date(this.value[0].getFullYear(), this.value[0].getMonth(), 1);
+                const endDate = new Date(this.value[1].getFullYear(), this.value[1].getMonth(), 1);
+                return currentDate >= startDate && currentDate <= endDate;
+            }
+        }
+        else {
+            return this.value.getMonth() === month && this.value.getFullYear() === this.currentYear;
+        }
+    }
+    isMonthDisabled(month, year) {
+        const yearToCheck = year ?? this.currentYear;
+        for (let day = 1; day < this.getDaysCountInMonth(month, yearToCheck) + 1; day++) {
+            if (this.isSelectable(day, month, yearToCheck, false)) {
+                return false;
+            }
+        }
+        return true;
+    }
+    isYearDisabled(year) {
+        return Array(12)
+            .fill(0)
+            .every((v, month) => this.isMonthDisabled(month, year));
+    }
+    isYearSelected(year) {
+        if (this.isComparable()) {
+            let value = this.isRangeSelection() ? this.value[0] : this.value;
+            return !this.isMultipleSelection() ? value.getFullYear() === year : false;
+        }
+        return false;
+    }
+    isDateEquals(value, dateMeta) {
+        if (value && isDate(value))
+            return value.getDate() === dateMeta.day && value.getMonth() === dateMeta.month && value.getFullYear() === dateMeta.year;
+        else
+            return false;
+    }
+    isDateBetween(start, end, dateMeta) {
+        let between = false;
+        if (isDate(start) && isDate(end)) {
+            let date = this.formatDateMetaToDate(dateMeta);
+            return start.getTime() <= date.getTime() && end.getTime() >= date.getTime();
+        }
+        return between;
+    }
+    isSingleSelection() {
+        return this.selectionMode() === 'single';
+    }
+    isRangeSelection() {
+        return this.selectionMode() === 'range';
+    }
+    isMultipleSelection() {
+        return this.selectionMode() === 'multiple';
+    }
+    isToday(today, day, month, year) {
+        return today.getDate() === day && today.getMonth() === month && today.getFullYear() === year;
+    }
+    isSelectable(day, month, year, otherMonth) {
+        let validMin = true;
+        let validMax = true;
+        let validDate = true;
+        let validDay = true;
+        if (otherMonth && !this.selectOtherMonths()) {
+            return false;
+        }
+        const minDate = this.minDate();
+        if (minDate) {
+            if (minDate.getFullYear() > year) {
+                validMin = false;
+            }
+            else if (minDate.getFullYear() === year && this.currentView != 'year') {
+                if (minDate.getMonth() > month) {
+                    validMin = false;
+                }
+                else if (minDate.getMonth() === month) {
+                    if (minDate.getDate() > day) {
+                        validMin = false;
+                    }
+                }
+            }
+        }
+        const maxDate = this.maxDate();
+        if (maxDate) {
+            if (maxDate.getFullYear() < year) {
+                validMax = false;
+            }
+            else if (maxDate.getFullYear() === year) {
+                if (maxDate.getMonth() < month) {
+                    validMax = false;
+                }
+                else if (maxDate.getMonth() === month) {
+                    if (maxDate.getDate() < day) {
+                        validMax = false;
+                    }
+                }
+            }
+        }
+        if (this.disabledDates()) {
+            validDate = !this.isDateDisabled(day, month, year);
+        }
+        if (this.disabledDays()) {
+            validDay = !this.isDayDisabled(day, month, year);
+        }
+        return validMin && validMax && validDate && validDay;
+    }
+    isDateDisabled(day, month, year) {
+        const disabledDates = this.disabledDates();
+        if (disabledDates) {
+            for (let disabledDate of disabledDates) {
+                if (disabledDate.getFullYear() === year && disabledDate.getMonth() === month && disabledDate.getDate() === day) {
+                    return true;
+                }
+            }
+        }
+        return false;
+    }
+    isDayDisabled(day, month, year) {
+        const disabledDays = this.disabledDays();
+        if (disabledDays) {
+            let weekday = new Date(year, month, day);
+            let weekdayNumber = weekday.getDay();
+            return disabledDays.indexOf(weekdayNumber) !== -1;
+        }
+        return false;
+    }
+    onInputFocus(event) {
+        this.focus = true;
+        if (this.showOnFocus()) {
+            this.showOverlay();
+        }
+        this.onFocus.emit(event);
+    }
+    onInputClick() {
+        if (this.showOnFocus() && !this.overlayVisible) {
+            this.showOverlay();
+        }
+    }
+    onInputBlur(event) {
+        this.focus = false;
+        this.onBlur.emit(event);
+        if (!this.keepInvalid()) {
+            this.updateInputfield();
+        }
+        this.onModelTouched();
+    }
+    onButtonClick(event, inputfield = this.inputfieldViewChild()?.nativeElement) {
+        if (this.$disabled()) {
+            return;
+        }
+        if (!this.overlayVisible) {
+            inputfield.focus();
+            this.showOverlay();
+        }
+        else {
+            this.hideOverlay();
+        }
+    }
+    clear() {
+        this.value = null;
+        this.inputFieldValue = null;
+        this.writeModelValue(this.value);
+        this.onModelChange(this.value);
+        this.updateInputfield();
+        // TODO: The 'emit' function requires a mandatory any argument
+        this.onClear.emit();
+    }
+    onOverlayClick(event) {
+        this.overlayService.add({
+            originalEvent: event,
+            target: this.el.nativeElement
+        });
+    }
+    getMonthName(index) {
+        return this.config.getTranslation('monthNames')[index];
+    }
+    getYear(month) {
+        return this.currentView === 'month' ? this.currentYear : month.year;
+    }
+    switchViewButtonDisabled() {
+        return this.numberOfMonths() > 1 || this.$disabled();
+    }
+    onPrevButtonClick(event) {
+        this.navigationState = { backward: true, button: true };
+        this.navBackward(event);
+    }
+    onNextButtonClick(event) {
+        this.navigationState = { backward: false, button: true };
+        this.navForward(event);
+    }
+    onContainerButtonKeydown(event) {
+        const inline = this.inline();
+        switch (event.which) {
+            //tab
+            case 9:
+                if (!inline) {
+                    this.trapFocus(event);
+                }
+                if (inline) {
+                    const headerElements = findSingle(this.el?.nativeElement, '.h-datepicker-header');
+                    const element = event.target;
+                    if (this.timeOnly()) {
+                        return;
+                    }
+                    else {
+                        if (element == headerElements?.children[headerElements?.children?.length - 1]) {
+                            this.initFocusableCell();
+                        }
+                    }
+                }
+                break;
+            //escape
+            case 27:
+                this.inputfieldViewChild()?.nativeElement.focus();
+                this.overlayVisible = false;
+                event.preventDefault();
+                break;
+            default:
+                //Noop
+                break;
+        }
+    }
+    onInputKeydown(event) {
+        this.isKeydown = true;
+        if (event.keyCode === 40 && this.contentViewChild()) {
+            this.trapFocus(event);
+        }
+        else if (event.keyCode === 27) {
+            if (this.overlayVisible) {
+                this.inputfieldViewChild()?.nativeElement.focus();
+                this.overlayVisible = false;
+                event.preventDefault();
+            }
+        }
+        else if (event.keyCode === 13) {
+            if (this.overlayVisible) {
+                this.overlayVisible = false;
+                event.preventDefault();
+            }
+        }
+        else if (event.keyCode === 9 && this.contentViewChild()) {
+            getFocusableElements(this.contentViewChild().nativeElement).forEach((el) => (el.tabIndex = '-1'));
+            if (this.overlayVisible) {
+                this.overlayVisible = false;
+            }
+        }
+    }
+    onDateCellKeydown(event, dateMeta, groupIndex) {
+        const cellContent = event.currentTarget;
+        const cell = cellContent.parentElement;
+        const currentDate = this.formatDateMetaToDate(dateMeta);
+        switch (event.which) {
+            //down arrow
+            case 40: {
+                cellContent.tabIndex = '-1';
+                let cellIndex = getIndex(cell);
+                let nextRow = cell.parentElement.nextElementSibling;
+                if (nextRow) {
+                    let focusCell = nextRow.children[cellIndex].children[0];
+                    if (hasClass(focusCell, 'h-disabled')) {
+                        this.navigationState = { backward: false };
+                        this.navForward(event);
+                    }
+                    else {
+                        nextRow.children[cellIndex].children[0].tabIndex = '0';
+                        nextRow.children[cellIndex].children[0].focus();
+                    }
+                }
+                else {
+                    this.navigationState = { backward: false };
+                    this.navForward(event);
+                }
+                event.preventDefault();
+                break;
+            }
+            //up arrow
+            case 38: {
+                cellContent.tabIndex = '-1';
+                let cellIndex = getIndex(cell);
+                let prevRow = cell.parentElement.previousElementSibling;
+                if (prevRow) {
+                    let focusCell = prevRow.children[cellIndex].children[0];
+                    if (hasClass(focusCell, 'h-disabled')) {
+                        this.navigationState = { backward: true };
+                        this.navBackward(event);
+                    }
+                    else {
+                        focusCell.tabIndex = '0';
+                        focusCell.focus();
+                    }
+                }
+                else {
+                    this.navigationState = { backward: true };
+                    this.navBackward(event);
+                }
+                event.preventDefault();
+                break;
+            }
+            //left arrow
+            case 37: {
+                cellContent.tabIndex = '-1';
+                let prevCell = cell.previousElementSibling;
+                if (prevCell) {
+                    let focusCell = prevCell.children[0];
+                    if (hasClass(focusCell, 'h-disabled') || hasClass(focusCell.parentElement, 'h-datepicker-weeknumber')) {
+                        this.navigateToMonth(true, groupIndex);
+                    }
+                    else {
+                        focusCell.tabIndex = '0';
+                        focusCell.focus();
+                    }
+                }
+                else {
+                    this.navigateToMonth(true, groupIndex);
+                }
+                event.preventDefault();
+                break;
+            }
+            //right arrow
+            case 39: {
+                cellContent.tabIndex = '-1';
+                let nextCell = cell.nextElementSibling;
+                if (nextCell) {
+                    let focusCell = nextCell.children[0];
+                    if (hasClass(focusCell, 'h-disabled')) {
+                        this.navigateToMonth(false, groupIndex);
+                    }
+                    else {
+                        focusCell.tabIndex = '0';
+                        focusCell.focus();
+                    }
+                }
+                else {
+                    this.navigateToMonth(false, groupIndex);
+                }
+                event.preventDefault();
+                break;
+            }
+            //enter
+            //space
+            case 13:
+            case 32: {
+                this.onDateSelect(event, dateMeta);
+                event.preventDefault();
+                break;
+            }
+            //escape
+            case 27: {
+                this.inputfieldViewChild()?.nativeElement.focus();
+                this.overlayVisible = false;
+                event.preventDefault();
+                break;
+            }
+            //tab
+            case 9: {
+                if (!this.inline()) {
+                    this.trapFocus(event);
+                }
+                break;
+            }
+            // page up
+            case 33: {
+                cellContent.tabIndex = '-1';
+                const dateToFocus = new Date(currentDate.getFullYear(), currentDate.getMonth() - 1, currentDate.getDate());
+                const focusKey = this.formatDateKey(dateToFocus);
+                this.navigateToMonth(true, groupIndex, `span[data-date='${focusKey}']:not(.h-disabled):not(.h-ink)`);
+                event.preventDefault();
+                break;
+            }
+            // page down
+            case 34: {
+                cellContent.tabIndex = '-1';
+                const dateToFocus = new Date(currentDate.getFullYear(), currentDate.getMonth() + 1, currentDate.getDate());
+                const focusKey = this.formatDateKey(dateToFocus);
+                this.navigateToMonth(false, groupIndex, `span[data-date='${focusKey}']:not(.h-disabled):not(.h-ink)`);
+                event.preventDefault();
+                break;
+            }
+            //home
+            case 36:
+                cellContent.tabIndex = '-1';
+                const firstDayDate = new Date(currentDate.getFullYear(), currentDate.getMonth(), 1);
+                const firstDayDateKey = this.formatDateKey(firstDayDate);
+                const firstDayCell = findSingle(cellContent.offsetParent, `span[data-date='${firstDayDateKey}']:not(.h-disabled):not(.h-ink)`);
+                if (firstDayCell) {
+                    firstDayCell.tabIndex = '0';
+                    firstDayCell.focus();
+                }
+                event.preventDefault();
+                break;
+            //end
+            case 35:
+                cellContent.tabIndex = '-1';
+                const lastDayDate = new Date(currentDate.getFullYear(), currentDate.getMonth() + 1, 0);
+                const lastDayDateKey = this.formatDateKey(lastDayDate);
+                const lastDayCell = findSingle(cellContent.offsetParent, `span[data-date='${lastDayDateKey}']:not(.h-disabled):not(.h-ink)`);
+                if (lastDayDate) {
+                    lastDayCell.tabIndex = '0';
+                    lastDayCell.focus();
+                }
+                event.preventDefault();
+                break;
+            default:
+                //no op
+                break;
+        }
+    }
+    onMonthCellKeydown(event, index) {
+        const cell = event.currentTarget;
+        switch (event.which) {
+            //arrows
+            case 38:
+            case 40: {
+                cell.tabIndex = '-1';
+                var cells = cell.parentElement.children;
+                var cellIndex = getIndex(cell);
+                let nextCell = cells[event.which === 40 ? cellIndex + 3 : cellIndex - 3];
+                if (nextCell) {
+                    nextCell.tabIndex = '0';
+                    nextCell.focus();
+                }
+                event.preventDefault();
+                break;
+            }
+            //left arrow
+            case 37: {
+                cell.tabIndex = '-1';
+                let prevCell = cell.previousElementSibling;
+                if (prevCell) {
+                    prevCell.tabIndex = '0';
+                    prevCell.focus();
+                }
+                else {
+                    this.navigationState = { backward: true };
+                    this.navBackward(event);
+                }
+                event.preventDefault();
+                break;
+            }
+            //right arrow
+            case 39: {
+                cell.tabIndex = '-1';
+                let nextCell = cell.nextElementSibling;
+                if (nextCell) {
+                    nextCell.tabIndex = '0';
+                    nextCell.focus();
+                }
+                else {
+                    this.navigationState = { backward: false };
+                    this.navForward(event);
+                }
+                event.preventDefault();
+                break;
+            }
+            //enter
+            //space
+            case 13:
+            case 32: {
+                this.onMonthSelect(event, index);
+                event.preventDefault();
+                break;
+            }
+            //escape
+            case 27: {
+                this.inputfieldViewChild()?.nativeElement.focus();
+                this.overlayVisible = false;
+                event.preventDefault();
+                break;
+            }
+            //tab
+            case 9: {
+                if (!this.inline()) {
+                    this.trapFocus(event);
+                }
+                break;
+            }
+            default:
+                //no op
+                break;
+        }
+    }
+    onYearCellKeydown(event, index) {
+        const cell = event.currentTarget;
+        switch (event.which) {
+            //arrows
+            case 38:
+            case 40: {
+                cell.tabIndex = '-1';
+                var cells = cell.parentElement.children;
+                var cellIndex = getIndex(cell);
+                let nextCell = cells[event.which === 40 ? cellIndex + 2 : cellIndex - 2];
+                if (nextCell) {
+                    nextCell.tabIndex = '0';
+                    nextCell.focus();
+                }
+                event.preventDefault();
+                break;
+            }
+            //left arrow
+            case 37: {
+                cell.tabIndex = '-1';
+                let prevCell = cell.previousElementSibling;
+                if (prevCell) {
+                    prevCell.tabIndex = '0';
+                    prevCell.focus();
+                }
+                else {
+                    this.navigationState = { backward: true };
+                    this.navBackward(event);
+                }
+                event.preventDefault();
+                break;
+            }
+            //right arrow
+            case 39: {
+                cell.tabIndex = '-1';
+                let nextCell = cell.nextElementSibling;
+                if (nextCell) {
+                    nextCell.tabIndex = '0';
+                    nextCell.focus();
+                }
+                else {
+                    this.navigationState = { backward: false };
+                    this.navForward(event);
+                }
+                event.preventDefault();
+                break;
+            }
+            //enter
+            //space
+            case 13:
+            case 32: {
+                this.onYearSelect(event, index);
+                event.preventDefault();
+                break;
+            }
+            //escape
+            case 27: {
+                this.inputfieldViewChild()?.nativeElement.focus();
+                this.overlayVisible = false;
+                event.preventDefault();
+                break;
+            }
+            //tab
+            case 9: {
+                this.trapFocus(event);
+                break;
+            }
+            default:
+                //no op
+                break;
+        }
+    }
+    navigateToMonth(prev, groupIndex, focusKey) {
+        if (prev) {
+            if (this.numberOfMonths() === 1 || groupIndex === 0) {
+                this.navigationState = { backward: true };
+                this._focusKey = focusKey;
+                this.navBackward(event);
+            }
+            else {
+                let prevMonthContainer = this.contentViewChild().nativeElement.children[groupIndex - 1];
+                if (focusKey) {
+                    const firstDayCell = findSingle(prevMonthContainer, focusKey);
+                    firstDayCell.tabIndex = '0';
+                    firstDayCell.focus();
+                }
+                else {
+                    let cells = find(prevMonthContainer, '.h-datepicker-calendar td span:not(.h-disabled):not(.h-ink)');
+                    let focusCell = cells[cells.length - 1];
+                    focusCell.tabIndex = '0';
+                    focusCell.focus();
+                }
+            }
+        }
+        else {
+            if (this.numberOfMonths() === 1 || groupIndex === this.numberOfMonths() - 1) {
+                this.navigationState = { backward: false };
+                this._focusKey = focusKey;
+                this.navForward(event);
+            }
+            else {
+                let nextMonthContainer = this.contentViewChild().nativeElement.children[groupIndex + 1];
+                if (focusKey) {
+                    const firstDayCell = findSingle(nextMonthContainer, focusKey);
+                    firstDayCell.tabIndex = '0';
+                    firstDayCell.focus();
+                }
+                else {
+                    let focusCell = findSingle(nextMonthContainer, '.h-datepicker-calendar td span:not(.h-disabled):not(.h-ink)');
+                    focusCell.tabIndex = '0';
+                    focusCell.focus();
+                }
+            }
+        }
+    }
+    updateFocus() {
+        let cell;
+        if (this.navigationState) {
+            if (this.navigationState.button) {
+                this.initFocusableCell();
+                if (this.navigationState.backward)
+                    findSingle(this.contentViewChild().nativeElement, '.h-datepicker-prev-button').focus();
+                else
+                    findSingle(this.contentViewChild().nativeElement, '.h-datepicker-next-button').focus();
+            }
+            else {
+                if (this.navigationState.backward) {
+                    let cells;
+                    if (this.currentView === 'month') {
+                        cells = find(this.contentViewChild().nativeElement, '.h-datepicker-month-view .h-datepicker-month:not(.h-disabled)');
+                    }
+                    else if (this.currentView === 'year') {
+                        cells = find(this.contentViewChild().nativeElement, '.h-datepicker-year-view .h-datepicker-year:not(.h-disabled)');
+                    }
+                    else {
+                        cells = find(this.contentViewChild().nativeElement, this._focusKey || '.h-datepicker-calendar td span:not(.h-disabled):not(.h-ink)');
+                    }
+                    if (cells && cells.length > 0) {
+                        cell = cells[cells.length - 1];
+                    }
+                }
+                else {
+                    if (this.currentView === 'month') {
+                        cell = findSingle(this.contentViewChild().nativeElement, '.h-datepicker-month-view .h-datepicker-month:not(.h-disabled)');
+                    }
+                    else if (this.currentView === 'year') {
+                        cell = findSingle(this.contentViewChild().nativeElement, '.h-datepicker-year-view .h-datepicker-year:not(.h-disabled)');
+                    }
+                    else {
+                        cell = findSingle(this.contentViewChild().nativeElement, this._focusKey || '.h-datepicker-calendar td span:not(.h-disabled):not(.h-ink)');
+                    }
+                }
+                if (cell) {
+                    cell.tabIndex = '0';
+                    cell.focus();
+                }
+            }
+            this.navigationState = null;
+            this._focusKey = null;
+        }
+        else {
+            this.initFocusableCell();
+        }
+    }
+    initFocusableCell() {
+        const contentEl = this.contentViewChild()?.nativeElement;
+        let cell;
+        if (this.currentView === 'month') {
+            let cells = find(contentEl, '.h-datepicker-month-view .h-datepicker-month:not(.h-disabled)');
+            let selectedCell = findSingle(contentEl, '.h-datepicker-month-view .h-datepicker-month.h-highlight');
+            cells.forEach((cell) => (cell.tabIndex = -1));
+            cell = selectedCell || cells[0];
+            if (cells.length === 0) {
+                let disabledCells = find(contentEl, '.h-datepicker-month-view .h-datepicker-month.h-disabled[tabindex = "0"]');
+                disabledCells.forEach((cell) => (cell.tabIndex = -1));
+            }
+        }
+        else if (this.currentView === 'year') {
+            let cells = find(contentEl, '.h-datepicker-year-view .h-datepicker-year:not(.h-disabled)');
+            let selectedCell = findSingle(contentEl, '.h-datepicker-year-view .h-datepicker-year.h-highlight');
+            cells.forEach((cell) => (cell.tabIndex = -1));
+            cell = selectedCell || cells[0];
+            if (cells.length === 0) {
+                let disabledCells = find(contentEl, '.h-datepicker-year-view .h-datepicker-year.h-disabled[tabindex = "0"]');
+                disabledCells.forEach((cell) => (cell.tabIndex = -1));
+            }
+        }
+        else {
+            cell = findSingle(contentEl, 'span.h-highlight');
+            if (!cell) {
+                let todayCell = findSingle(contentEl, 'td.h-datepicker-today span:not(.h-disabled):not(.h-ink)');
+                if (todayCell)
+                    cell = todayCell;
+                else
+                    cell = findSingle(contentEl, '.h-datepicker-calendar td span:not(.h-disabled):not(.h-ink)');
+            }
+        }
+        if (cell) {
+            cell.tabIndex = '0';
+            if (!this.preventFocus && (!this.navigationState || !this.navigationState.button)) {
+                setTimeout(() => {
+                    if (!this.$disabled()) {
+                        cell.focus();
+                    }
+                }, 1);
+            }
+            this.preventFocus = false;
+        }
+    }
+    trapFocus(event) {
+        let focusableElements = getFocusableElements(this.contentViewChild().nativeElement);
+        if (focusableElements && focusableElements.length > 0) {
+            if (!focusableElements[0].ownerDocument.activeElement) {
+                focusableElements[0].focus();
+            }
+            else {
+                let focusedIndex = focusableElements.indexOf(focusableElements[0].ownerDocument.activeElement);
+                if (event.shiftKey) {
+                    if (focusedIndex == -1 || focusedIndex === 0) {
+                        if (this.focusTrap()) {
+                            focusableElements[focusableElements.length - 1].focus();
+                        }
+                        else {
+                            if (focusedIndex === -1)
+                                return this.hideOverlay();
+                            else if (focusedIndex === 0)
+                                return;
+                        }
+                    }
+                    else {
+                        focusableElements[focusedIndex - 1].focus();
+                    }
+                }
+                else {
+                    if (focusedIndex == -1) {
+                        if (this.timeOnly()) {
+                            focusableElements[0].focus();
+                        }
+                        else {
+                            let spanIndex = 0;
+                            for (let i = 0; i < focusableElements.length; i++) {
+                                if (focusableElements[i].tagName === 'SPAN')
+                                    spanIndex = i;
+                            }
+                            focusableElements[spanIndex].focus();
+                        }
+                    }
+                    else if (focusedIndex === focusableElements.length - 1) {
+                        if (!this.focusTrap() && focusedIndex != -1)
+                            return this.hideOverlay();
+                        focusableElements[0].focus();
+                    }
+                    else {
+                        focusableElements[focusedIndex + 1].focus();
+                    }
+                }
+            }
+        }
+        event.preventDefault();
+    }
+    onMonthDropdownChange(m) {
+        this.currentMonth = parseInt(m);
+        this.onMonthChange.emit({ month: this.currentMonth + 1, year: this.currentYear });
+        this.createMonths(this.currentMonth, this.currentYear);
+    }
+    onYearDropdownChange(y) {
+        this.currentYear = parseInt(y);
+        this.onYearChange.emit({ month: this.currentMonth + 1, year: this.currentYear });
+        this.createMonths(this.currentMonth, this.currentYear);
+    }
+    convertTo24Hour(hours, pm) {
+        //@ts-ignore
+        if (this.hourFormat() == '12') {
+            if (hours === 12) {
+                return pm ? 12 : 0;
+            }
+            else {
+                return pm ? hours + 12 : hours;
+            }
+        }
+        return hours;
+    }
+    constrainTime(hour, minute, second, pm) {
+        let returnTimeTriple = [hour, minute, second];
+        let minHoursExceeds12 = false;
+        let value = this.value;
+        const convertedHour = this.convertTo24Hour(hour, pm);
+        const isRange = this.isRangeSelection(), isMultiple = this.isMultipleSelection(), isMultiValue = isRange || isMultiple;
+        if (isMultiValue) {
+            if (!this.value) {
+                this.value = [new Date(), new Date()];
+            }
+            if (isRange) {
+                value = this.value[1] || this.value[0];
+            }
+            if (isMultiple) {
+                value = this.value[this.value.length - 1];
+            }
+        }
+        const valueDateString = value && isDate(value) ? value.toDateString() : null;
+        let isMinDate = this.minDate() && valueDateString && this.minDate().toDateString() === valueDateString;
+        let isMaxDate = this.maxDate() && valueDateString && this.maxDate().toDateString() === valueDateString;
+        if (isMinDate) {
+            minHoursExceeds12 = this.minDate().getHours() >= 12;
+        }
+        switch (true // intentional fall through
+        ) {
+            case isMinDate && minHoursExceeds12 && this.minDate().getHours() === 12 && this.minDate().getHours() > convertedHour:
+                returnTimeTriple[0] = 11;
+            case isMinDate && this.minDate().getHours() === convertedHour && this.minDate().getMinutes() > minute:
+                returnTimeTriple[1] = this.minDate().getMinutes();
+            case isMinDate && this.minDate().getHours() === convertedHour && this.minDate().getMinutes() === minute && this.minDate().getSeconds() > second:
+                returnTimeTriple[2] = this.minDate().getSeconds();
+                break;
+            case isMinDate && !minHoursExceeds12 && this.minDate().getHours() - 1 === convertedHour && this.minDate().getHours() > convertedHour:
+                returnTimeTriple[0] = 11;
+                this.pm = true;
+            case isMinDate && this.minDate().getHours() === convertedHour && this.minDate().getMinutes() > minute:
+                returnTimeTriple[1] = this.minDate().getMinutes();
+            case isMinDate && this.minDate().getHours() === convertedHour && this.minDate().getMinutes() === minute && this.minDate().getSeconds() > second:
+                returnTimeTriple[2] = this.minDate().getSeconds();
+                break;
+            case isMinDate && minHoursExceeds12 && this.minDate().getHours() > convertedHour && convertedHour !== 12:
+                this.setCurrentHourPM(this.minDate().getHours());
+                returnTimeTriple[0] = this.currentHour || 0;
+            case isMinDate && this.minDate().getHours() === convertedHour && this.minDate().getMinutes() > minute:
+                returnTimeTriple[1] = this.minDate().getMinutes();
+            case isMinDate && this.minDate().getHours() === convertedHour && this.minDate().getMinutes() === minute && this.minDate().getSeconds() > second:
+                returnTimeTriple[2] = this.minDate().getSeconds();
+                break;
+            case isMinDate && this.minDate().getHours() > convertedHour:
+                returnTimeTriple[0] = this.minDate().getHours();
+            case isMinDate && this.minDate().getHours() === convertedHour && this.minDate().getMinutes() > minute:
+                returnTimeTriple[1] = this.minDate().getMinutes();
+            case isMinDate && this.minDate().getHours() === convertedHour && this.minDate().getMinutes() === minute && this.minDate().getSeconds() > second:
+                returnTimeTriple[2] = this.minDate().getSeconds();
+                break;
+            case isMaxDate && this.maxDate().getHours() < convertedHour:
+                returnTimeTriple[0] = this.maxDate().getHours();
+            case isMaxDate && this.maxDate().getHours() === convertedHour && this.maxDate().getMinutes() < minute:
+                returnTimeTriple[1] = this.maxDate().getMinutes();
+            case isMaxDate && this.maxDate().getHours() === convertedHour && this.maxDate().getMinutes() === minute && this.maxDate().getSeconds() < second:
+                returnTimeTriple[2] = this.maxDate().getSeconds();
+                break;
+        }
+        return returnTimeTriple;
+    }
+    incrementHour(event) {
+        const prevHour = this.currentHour ?? 0;
+        let newHour = (this.currentHour ?? 0) + this.stepHour();
+        let newPM = this.pm;
+        if (this.hourFormat() == '24')
+            newHour = newHour >= 24 ? newHour - 24 : newHour;
+        else if (this.hourFormat() == '12') {
+            // Before the AM/PM break, now after
+            if (prevHour < 12 && newHour > 11) {
+                newPM = !this.pm;
+            }
+            newHour = newHour >= 13 ? newHour - 12 : newHour;
+        }
+        this.toggleAMPMIfNotMinDate(newPM);
+        [this.currentHour, this.currentMinute, this.currentSecond] = this.constrainTime(newHour, this.currentMinute, this.currentSecond, newPM);
+        event.preventDefault();
+    }
+    toggleAMPMIfNotMinDate(newPM) {
+        let value = this.value;
+        const valueDateString = value && isDate(value) ? value.toDateString() : null;
+        let isMinDate = this.minDate() && valueDateString && this.minDate().toDateString() === valueDateString;
+        if (isMinDate && this.minDate().getHours() >= 12) {
+            this.pm = true;
+        }
+        else {
+            this.pm = newPM;
+        }
+    }
+    onTimePickerElementMouseDown(event, type, direction) {
+        if (!this.$disabled()) {
+            this.repeat(event, null, type, direction);
+            event.preventDefault();
+        }
+    }
+    onTimePickerElementMouseUp(event) {
+        if (!this.$disabled()) {
+            this.clearTimePickerTimer();
+            this.updateTime();
+        }
+    }
+    onTimePickerElementMouseLeave() {
+        if (!this.$disabled() && this.timePickerTimer) {
+            this.clearTimePickerTimer();
+            this.updateTime();
+        }
+    }
+    repeat(event, interval, type, direction) {
+        let i = interval || 500;
+        this.clearTimePickerTimer();
+        this.timePickerTimer = setTimeout(() => {
+            this.repeat(event, 100, type, direction);
+            this.cd.markForCheck();
+        }, i);
+        switch (type) {
+            case 0:
+                if (direction === 1)
+                    this.incrementHour(event);
+                else
+                    this.decrementHour(event);
+                break;
+            case 1:
+                if (direction === 1)
+                    this.incrementMinute(event);
+                else
+                    this.decrementMinute(event);
+                break;
+            case 2:
+                if (direction === 1)
+                    this.incrementSecond(event);
+                else
+                    this.decrementSecond(event);
+                break;
+        }
+        this.updateInputfield();
+    }
+    clearTimePickerTimer() {
+        if (this.timePickerTimer) {
+            clearTimeout(this.timePickerTimer);
+            this.timePickerTimer = null;
+        }
+    }
+    decrementHour(event) {
+        let newHour = (this.currentHour ?? 0) - this.stepHour();
+        let newPM = this.pm;
+        if (this.hourFormat() == '24')
+            newHour = newHour < 0 ? 24 + newHour : newHour;
+        else if (this.hourFormat() == '12') {
+            // If we were at noon/midnight, then switch
+            if (this.currentHour === 12) {
+                newPM = !this.pm;
+            }
+            newHour = newHour <= 0 ? 12 + newHour : newHour;
+        }
+        this.toggleAMPMIfNotMinDate(newPM);
+        [this.currentHour, this.currentMinute, this.currentSecond] = this.constrainTime(newHour, this.currentMinute, this.currentSecond, newPM);
+        event.preventDefault();
+    }
+    incrementMinute(event) {
+        let newMinute = (this.currentMinute ?? 0) + this.stepMinute();
+        newMinute = newMinute > 59 ? newMinute - 60 : newMinute;
+        [this.currentHour, this.currentMinute, this.currentSecond] = this.constrainTime(this.currentHour || 0, newMinute, this.currentSecond, this.pm);
+        event.preventDefault();
+    }
+    decrementMinute(event) {
+        let newMinute = (this.currentMinute ?? 0) - this.stepMinute();
+        newMinute = newMinute < 0 ? 60 + newMinute : newMinute;
+        [this.currentHour, this.currentMinute, this.currentSecond] = this.constrainTime(this.currentHour || 0, newMinute, this.currentSecond || 0, this.pm);
+        event.preventDefault();
+    }
+    incrementSecond(event) {
+        let newSecond = this.currentSecond + this.stepSecond();
+        newSecond = newSecond > 59 ? newSecond - 60 : newSecond;
+        [this.currentHour, this.currentMinute, this.currentSecond] = this.constrainTime(this.currentHour || 0, this.currentMinute || 0, newSecond, this.pm);
+        event.preventDefault();
+    }
+    decrementSecond(event) {
+        let newSecond = this.currentSecond - this.stepSecond();
+        newSecond = newSecond < 0 ? 60 + newSecond : newSecond;
+        [this.currentHour, this.currentMinute, this.currentSecond] = this.constrainTime(this.currentHour || 0, this.currentMinute || 0, newSecond, this.pm);
+        event.preventDefault();
+    }
+    updateTime() {
+        let value = this.value;
+        if (this.isRangeSelection()) {
+            value = this.value[1] || this.value[0];
+        }
+        if (this.isMultipleSelection()) {
+            value = this.value[this.value.length - 1];
+        }
+        value = value && isDate(value) ? new Date(value.getTime()) : new Date();
+        if (this.hourFormat() == '12') {
+            if (this.currentHour === 12)
+                value.setHours(this.pm ? 12 : 0);
+            else
+                value.setHours(this.pm ? this.currentHour + 12 : this.currentHour);
+        }
+        else {
+            value.setHours(this.currentHour);
+        }
+        value.setMinutes(this.currentMinute);
+        value.setSeconds(this.currentSecond);
+        if (this.isRangeSelection()) {
+            if (this.value[1])
+                value = [this.value[0], value];
+            else
+                value = [value, null];
+        }
+        if (this.isMultipleSelection()) {
+            value = [...this.value.slice(0, -1), value];
+        }
+        this.updateModel(value);
+        this.onSelect.emit(value);
+        this.updateInputfield();
+    }
+    toggleAMPM(event) {
+        const newPM = !this.pm;
+        this.pm = newPM;
+        [this.currentHour, this.currentMinute, this.currentSecond] = this.constrainTime(this.currentHour || 0, this.currentMinute || 0, this.currentSecond || 0, newPM);
+        this.updateTime();
+        event.preventDefault();
+    }
+    onUserInput(event) {
+        // IE 11 Workaround for input placeholder : https://github.com/primefaces/primeng/issues/2026
+        if (!this.isKeydown) {
+            return;
+        }
+        this.isKeydown = false;
+        let val = event.target.value;
+        try {
+            let value = this.parseValueFromString(val);
+            if (this.isValidSelection(value)) {
+                this.updateModel(value);
+                this.updateUI();
+            }
+            else if (this.keepInvalid()) {
+                this.updateModel(value);
+            }
+        }
+        catch (err) {
+            //invalid date
+            let value = this.keepInvalid() ? val : null;
+            this.updateModel(value);
+        }
+        this.onInput.emit(event);
+    }
+    isValidSelection(value) {
+        if (this.isSingleSelection()) {
+            return this.isSelectable(value.getDate(), value.getMonth(), value.getFullYear(), false);
+        }
+        let isValid = value.every((v) => this.isSelectable(v.getDate(), v.getMonth(), v.getFullYear(), false));
+        if (isValid && this.isRangeSelection()) {
+            isValid = value.length === 1 || (value.length > 1 && value[1] >= value[0]);
+        }
+        return isValid;
+    }
+    parseValueFromString(text) {
+        if (!text || text.trim().length === 0) {
+            return null;
+        }
+        let value;
+        if (this.isSingleSelection()) {
+            value = this.parseDateTime(text);
+        }
+        else if (this.isMultipleSelection()) {
+            let tokens = text.split(this.multipleSeparator());
+            value = [];
+            for (let token of tokens) {
+                value.push(this.parseDateTime(token.trim()));
+            }
+        }
+        else if (this.isRangeSelection()) {
+            let tokens = text.split(' ' + this.rangeSeparator() + ' ');
+            value = [];
+            for (let i = 0; i < tokens.length; i++) {
+                value[i] = this.parseDateTime(tokens[i].trim());
+            }
+        }
+        return value;
+    }
+    parseDateTime(text) {
+        let date;
+        let parts = text.split(' ');
+        if (this.timeOnly()) {
+            date = new Date();
+            this.populateTime(date, parts[0], parts[1]);
+        }
+        else {
+            const dateFormat = this.getDateFormat();
+            if (this.showTime()) {
+                let ampm = this.hourFormat() == '12' ? parts.pop() : null;
+                let timeString = parts.pop();
+                date = this.parseDate(parts.join(' '), dateFormat);
+                this.populateTime(date, timeString, ampm);
+            }
+            else {
+                date = this.parseDate(text, dateFormat);
+            }
+        }
+        return date;
+    }
+    populateTime(value, timeString, ampm) {
+        if (this.hourFormat() == '12' && !ampm) {
+            throw 'Invalid Time';
+        }
+        this.pm = ampm === 'PM' || ampm === 'pm';
+        let time = this.parseTime(timeString);
+        value.setHours(time.hour);
+        value.setMinutes(time.minute);
+        value.setSeconds(time.second);
+    }
+    isValidDate(date) {
+        return isDate(date) && isNotEmpty(date);
+    }
+    updateUI() {
+        let propValue = this.value;
+        if (Array.isArray(propValue)) {
+            propValue = propValue.length === 2 ? propValue[1] : propValue[0];
+        }
+        let val = this.defaultDate() && this.isValidDate(this.defaultDate()) && !this.value ? this.defaultDate() : propValue && this.isValidDate(propValue) ? propValue : new Date();
+        this.currentMonth = val.getMonth();
+        this.currentYear = val.getFullYear();
+        this.createMonths(this.currentMonth, this.currentYear);
+        if (this.showTime() || this.timeOnly()) {
+            this.setCurrentHourPM(val.getHours());
+            this.currentMinute = val.getMinutes();
+            this.currentSecond = this.showSeconds() ? val.getSeconds() : 0;
+        }
+    }
+    showOverlay() {
+        if (!this.overlayVisible) {
+            this.updateUI();
+            if (!this.touchUI()) {
+                this.preventFocus = true;
+            }
+            this.overlayMinWidth = this.el.nativeElement.offsetWidth;
+            this.overlayVisible = true;
+        }
+    }
+    hideOverlay() {
+        this.inputfieldViewChild()?.nativeElement.focus();
+        this.overlayVisible = false;
+        this.clearTimePickerTimer();
+        if (this.touchUI()) {
+            this.disableModality();
+        }
+        this.cd.markForCheck();
+    }
+    toggle() {
+        if (!this.inline()) {
+            if (!this.overlayVisible) {
+                this.showOverlay();
+                this.inputfieldViewChild()?.nativeElement.focus();
+            }
+            else {
+                this.hideOverlay();
+            }
+        }
+    }
+    onOverlayBeforeEnter(event) {
+        this.overlay = event.element;
+        this.$attrSelector && this.overlay.setAttribute(this.$attrSelector, '');
+        const styles = !this.inline() ? { position: 'absolute', top: '0', minWidth: `${this.overlayMinWidth}px` } : undefined;
+        addStyle(this.overlay, styles || {});
+        this.appendOverlay();
+        this.alignOverlay();
+        this.setZIndex();
+        this.updateFocus();
+        this.bindListeners();
+        this.onShow.emit(event.element);
+    }
+    onOverlayAfterLeave(event) {
+        if (this.autoZIndex()) {
+            ZIndexUtils.clear(event.element);
+        }
+        this.restoreOverlayAppend();
+        this.onOverlayHide();
+        this.onClose.emit(event.element);
+    }
+    appendOverlay() {
+        if (this.$appendTo() && this.$appendTo() !== 'self') {
+            if (this.$appendTo() === 'body')
+                this.document.body.appendChild(this.overlay);
+            else
+                appendChild(this.$appendTo(), this.overlay);
+        }
+    }
+    restoreOverlayAppend() {
+        if (this.overlay && this.$appendTo() !== 'self') {
+            this.el.nativeElement.appendChild(this.overlay);
+        }
+    }
+    alignOverlay() {
+        if (this.touchUI()) {
+            this.enableModality(this.overlay);
+        }
+        else if (this.overlay) {
+            if (this.$appendTo() && this.$appendTo() !== 'self') {
+                absolutePosition(this.overlay, this.inputfieldViewChild()?.nativeElement);
+            }
+            else {
+                relativePosition(this.overlay, this.inputfieldViewChild()?.nativeElement);
+            }
+        }
+    }
+    bindListeners() {
+        this.bindDocumentClickListener();
+        this.bindDocumentResizeListener();
+        this.bindScrollListener();
+    }
+    setZIndex() {
+        if (this.autoZIndex()) {
+            if (this.touchUI())
+                ZIndexUtils.set('modal', this.overlay, this.baseZIndex() || this.config.zIndex.modal);
+            else
+                ZIndexUtils.set('overlay', this.overlay, this.baseZIndex() || this.config.zIndex.overlay);
+        }
+    }
+    enableModality(element) {
+        if (!this.mask && this.touchUI()) {
+            this.mask = this.renderer.createElement('div');
+            this.renderer.setStyle(this.mask, 'zIndex', String(parseInt(element.style.zIndex) - 1));
+            let maskStyleClass = 'h-overlay-mask h-datepicker-mask h-datepicker-mask-scrollblocker h-overlay-mask h-overlay-mask-enter-active';
+            addClass(this.mask, maskStyleClass);
+            this.maskClickListener = this.renderer.listen(this.mask, 'click', (event) => {
+                this.disableModality();
+                this.overlayVisible = false;
+            });
+            this.renderer.appendChild(this.document.body, this.mask);
+            blockBodyScroll();
+        }
+    }
+    disableModality() {
+        if (this.mask) {
+            addClass(this.mask, 'h-overlay-mask-leave');
+            if (!this.animationEndListener) {
+                this.animationEndListener = this.renderer.listen(this.mask, 'animationend', this.destroyMask.bind(this));
+            }
+        }
+    }
+    destroyMask() {
+        if (!this.mask) {
+            return;
+        }
+        this.renderer.removeChild(this.document.body, this.mask);
+        let bodyChildren = this.document.body.children;
+        let hasBlockerMasks;
+        for (let i = 0; i < bodyChildren.length; i++) {
+            let bodyChild = bodyChildren[i];
+            if (hasClass(bodyChild, 'h-datepicker-mask-scrollblocker')) {
+                hasBlockerMasks = true;
+                break;
+            }
+        }
+        if (!hasBlockerMasks) {
+            unblockBodyScroll();
+        }
+        this.unbindAnimationEndListener();
+        this.unbindMaskClickListener();
+        this.mask = null;
+    }
+    unbindMaskClickListener() {
+        if (this.maskClickListener) {
+            this.maskClickListener();
+            this.maskClickListener = null;
+        }
+    }
+    unbindAnimationEndListener() {
+        if (this.animationEndListener && this.mask) {
+            this.animationEndListener();
+            this.animationEndListener = null;
+        }
+    }
+    getDateFormat() {
+        return this.dateFormat() || this.getTranslation('dateFormat');
+    }
+    getFirstDateOfWeek() {
+        return this.firstDayOfWeek() || this.getTranslation(TranslationKeys.FIRST_DAY_OF_WEEK);
+    }
+    // Ported from jquery-ui datepicker formatDate
+    formatDate(date, format) {
+        if (!date) {
+            return '';
+        }
+        let iFormat;
+        const lookAhead = (match) => {
+            const matches = iFormat + 1 < format.length && format.charAt(iFormat + 1) === match;
+            if (matches) {
+                iFormat++;
+            }
+            return matches;
+        }, formatNumber = (match, value, len) => {
+            let num = '' + value;
+            if (lookAhead(match)) {
+                while (num.length < len) {
+                    num = '0' + num;
+                }
+            }
+            return num;
+        }, formatName = (match, value, shortNames, longNames) => {
+            return lookAhead(match) ? longNames[value] : shortNames[value];
+        };
+        let output = '';
+        let literal = false;
+        if (date) {
+            for (iFormat = 0; iFormat < format.length; iFormat++) {
+                if (literal) {
+                    if (format.charAt(iFormat) === "'" && !lookAhead("'")) {
+                        literal = false;
+                    }
+                    else {
+                        output += format.charAt(iFormat);
+                    }
+                }
+                else {
+                    switch (format.charAt(iFormat)) {
+                        case 'd':
+                            output += formatNumber('d', date.getDate(), 2);
+                            break;
+                        case 'D':
+                            output += formatName('D', date.getDay(), this.getTranslation(TranslationKeys.DAY_NAMES_SHORT), this.getTranslation(TranslationKeys.DAY_NAMES));
+                            break;
+                        case 'o':
+                            output += formatNumber('o', Math.round((new Date(date.getFullYear(), date.getMonth(), date.getDate()).getTime() - new Date(date.getFullYear(), 0, 0).getTime()) / 86400000), 3);
+                            break;
+                        case 'm':
+                            output += formatNumber('m', date.getMonth() + 1, 2);
+                            break;
+                        case 'M':
+                            output += formatName('M', date.getMonth(), this.getTranslation(TranslationKeys.MONTH_NAMES_SHORT), this.getTranslation(TranslationKeys.MONTH_NAMES));
+                            break;
+                        case 'y':
+                            output += lookAhead('y') ? date.getFullYear() : (date.getFullYear() % 100 < 10 ? '0' : '') + (date.getFullYear() % 100);
+                            break;
+                        case '@':
+                            output += date.getTime();
+                            break;
+                        case '!':
+                            output += date.getTime() * 10000 + this.ticksTo1970;
+                            break;
+                        case "'":
+                            if (lookAhead("'")) {
+                                output += "'";
+                            }
+                            else {
+                                literal = true;
+                            }
+                            break;
+                        default:
+                            output += format.charAt(iFormat);
+                    }
+                }
+            }
+        }
+        return output;
+    }
+    formatTime(date) {
+        if (!date) {
+            return '';
+        }
+        let output = '';
+        let hours = date.getHours();
+        let minutes = date.getMinutes();
+        let seconds = date.getSeconds();
+        if (this.hourFormat() == '12' && hours > 11 && hours != 12) {
+            hours -= 12;
+        }
+        if (this.hourFormat() == '12') {
+            output += hours === 0 ? 12 : hours < 10 ? '0' + hours : hours;
+        }
+        else {
+            output += hours < 10 ? '0' + hours : hours;
+        }
+        output += ':';
+        output += minutes < 10 ? '0' + minutes : minutes;
+        if (this.showSeconds()) {
+            output += ':';
+            output += seconds < 10 ? '0' + seconds : seconds;
+        }
+        if (this.hourFormat() == '12') {
+            output += date.getHours() > 11 ? ' PM' : ' AM';
+        }
+        return output;
+    }
+    parseTime(value) {
+        let tokens = value.split(':');
+        let validTokenLength = this.showSeconds() ? 3 : 2;
+        if (tokens.length !== validTokenLength) {
+            throw 'Invalid time';
+        }
+        let h = parseInt(tokens[0]);
+        let m = parseInt(tokens[1]);
+        let s = this.showSeconds() ? parseInt(tokens[2]) : null;
+        if (isNaN(h) || isNaN(m) || h > 23 || m > 59 || (this.hourFormat() == '12' && h > 12) || (this.showSeconds() && (isNaN(s) || s > 59))) {
+            throw 'Invalid time';
+        }
+        else {
+            if (this.hourFormat() == '12') {
+                if (h !== 12 && this.pm) {
+                    h += 12;
+                }
+                else if (!this.pm && h === 12) {
+                    h -= 12;
+                }
+            }
+            return { hour: h, minute: m, second: s };
+        }
+    }
+    // Ported from jquery-ui datepicker parseDate
+    parseDate(value, format) {
+        if (format == null || value == null) {
+            throw 'Invalid arguments';
+        }
+        value = typeof value === 'object' ? value.toString() : value + '';
+        if (value === '') {
+            return null;
+        }
+        const shortYearCutoffValue = this.shortYearCutoff();
+        let iFormat, dim, extra, iValue = 0, shortYearCutoff = typeof shortYearCutoffValue !== 'string' ? shortYearCutoffValue : (new Date().getFullYear() % 100) + parseInt(shortYearCutoffValue, 10), year = -1, month = -1, day = -1, doy = -1, literal = false, date, lookAhead = (match) => {
+            let matches = iFormat + 1 < format.length && format.charAt(iFormat + 1) === match;
+            if (matches) {
+                iFormat++;
+            }
+            return matches;
+        }, getNumber = (match) => {
+            let isDoubled = lookAhead(match), size = match === '@' ? 14 : match === '!' ? 20 : match === 'y' && isDoubled ? 4 : match === 'o' ? 3 : 2, minSize = match === 'y' ? size : 1, digits = new RegExp('^\\d{' + minSize + ',' + size + '}'), num = value.substring(iValue).match(digits);
+            if (!num) {
+                throw 'Missing number at position ' + iValue;
+            }
+            iValue += num[0].length;
+            return parseInt(num[0], 10);
+        }, getName = (match, shortNames, longNames) => {
+            let index = -1;
+            let arr = lookAhead(match) ? longNames : shortNames;
+            let names = [];
+            for (let i = 0; i < arr.length; i++) {
+                names.push([i, arr[i]]);
+            }
+            names.sort((a, b) => {
+                return -(a[1].length - b[1].length);
+            });
+            for (let i = 0; i < names.length; i++) {
+                let name = names[i][1];
+                if (value.substr(iValue, name.length).toLowerCase() === name.toLowerCase()) {
+                    index = names[i][0];
+                    iValue += name.length;
+                    break;
+                }
+            }
+            if (index !== -1) {
+                return index + 1;
+            }
+            else {
+                throw 'Unknown name at position ' + iValue;
+            }
+        }, checkLiteral = () => {
+            if (value.charAt(iValue) !== format.charAt(iFormat)) {
+                throw 'Unexpected literal at position ' + iValue;
+            }
+            iValue++;
+        };
+        if (this.view() === 'month') {
+            day = 1;
+        }
+        for (iFormat = 0; iFormat < format.length; iFormat++) {
+            if (literal) {
+                if (format.charAt(iFormat) === "'" && !lookAhead("'")) {
+                    literal = false;
+                }
+                else {
+                    checkLiteral();
+                }
+            }
+            else {
+                switch (format.charAt(iFormat)) {
+                    case 'd':
+                        day = getNumber('d');
+                        break;
+                    case 'D':
+                        getName('D', this.getTranslation(TranslationKeys.DAY_NAMES_SHORT), this.getTranslation(TranslationKeys.DAY_NAMES));
+                        break;
+                    case 'o':
+                        doy = getNumber('o');
+                        break;
+                    case 'm':
+                        month = getNumber('m');
+                        break;
+                    case 'M':
+                        month = getName('M', this.getTranslation(TranslationKeys.MONTH_NAMES_SHORT), this.getTranslation(TranslationKeys.MONTH_NAMES));
+                        break;
+                    case 'y':
+                        year = getNumber('y');
+                        break;
+                    case '@':
+                        date = new Date(getNumber('@'));
+                        year = date.getFullYear();
+                        month = date.getMonth() + 1;
+                        day = date.getDate();
+                        break;
+                    case '!':
+                        date = new Date((getNumber('!') - this.ticksTo1970) / 10000);
+                        year = date.getFullYear();
+                        month = date.getMonth() + 1;
+                        day = date.getDate();
+                        break;
+                    case "'":
+                        if (lookAhead("'")) {
+                            checkLiteral();
+                        }
+                        else {
+                            literal = true;
+                        }
+                        break;
+                    default:
+                        checkLiteral();
+                }
+            }
+        }
+        if (iValue < value.length) {
+            extra = value.substr(iValue);
+            if (!/^\s+/.test(extra)) {
+                throw 'Extra/unparsed characters found in date: ' + extra;
+            }
+        }
+        if (year === -1) {
+            year = new Date().getFullYear();
+        }
+        else if (year < 100) {
+            year += new Date().getFullYear() - (new Date().getFullYear() % 100) + (year <= shortYearCutoff ? 0 : -100);
+        }
+        if (doy > -1) {
+            month = 1;
+            day = doy;
+            do {
+                dim = this.getDaysCountInMonth(year, month - 1);
+                if (day <= dim) {
+                    break;
+                }
+                month++;
+                day -= dim;
+            } while (true);
+        }
+        if (this.view() === 'year') {
+            month = month === -1 ? 1 : month;
+            day = day === -1 ? 1 : day;
+        }
+        date = this.daylightSavingAdjust(new Date(year, month - 1, day));
+        if (date.getFullYear() !== year || date.getMonth() + 1 !== month || date.getDate() !== day) {
+            throw 'Invalid date'; // E.g. 31/02/00
+        }
+        return date;
+    }
+    daylightSavingAdjust(date) {
+        if (!date) {
+            return null;
+        }
+        date.setHours(date.getHours() > 12 ? date.getHours() + 2 : 0);
+        return date;
+    }
+    isValidDateForTimeConstraints(selectedDate) {
+        if (this.keepInvalid()) {
+            return true; // If we are keeping invalid dates, we don't need to check for time constraints
+        }
+        return (!this.minDate() || selectedDate >= this.minDate()) && (!this.maxDate() || selectedDate <= this.maxDate());
+    }
+    onTodayButtonClick(event) {
+        const date = new Date();
+        const dateMeta = {
+            day: date.getDate(),
+            month: date.getMonth(),
+            year: date.getFullYear(),
+            otherMonth: date.getMonth() !== this.currentMonth || date.getFullYear() !== this.currentYear,
+            today: true,
+            selectable: true
+        };
+        this.createMonths(date.getMonth(), date.getFullYear());
+        this.onDateSelect(event, dateMeta);
+        this.onTodayClick.emit(date);
+    }
+    onClearButtonClick(event) {
+        this.updateModel(null);
+        this.updateInputfield();
+        this.hideOverlay();
+        this.onClearClick.emit(event);
+    }
+    createResponsiveStyle() {
+        if (this.numberOfMonths() > 1 && this.responsiveOptions()) {
+            if (!this.responsiveStyleElement) {
+                this.responsiveStyleElement = this.renderer.createElement('style');
+                this.responsiveStyleElement.type = 'text/css';
+                setAttribute(this.responsiveStyleElement, 'nonce', this.config?.csp()?.nonce);
+                this.renderer.appendChild(this.document.body, this.responsiveStyleElement);
+            }
+            let innerHTML = '';
+            if (this.responsiveOptions()) {
+                let responsiveOptions = [...(this.responsiveOptions() ?? [])].filter((o) => !!(o.breakpoint && o.numMonths)).sort((o1, o2) => -1 * o1.breakpoint.localeCompare(o2.breakpoint, undefined, { numeric: true }));
+                for (let i = 0; i < responsiveOptions.length; i++) {
+                    let { breakpoint, numMonths } = responsiveOptions[i];
+                    let styles = `
+                        .h-datepicker[${this.attributeSelector}] .h-datepicker-group:nth-child(${numMonths}) .h-datepicker-next {
+                            display: inline-flex !important;
+                        }
+                    `;
+                    for (let j = numMonths; j < this.numberOfMonths(); j++) {
+                        styles += `
+                            .h-datepicker[${this.attributeSelector}] .h-datepicker-group:nth-child(${j + 1}) {
+                                display: none !important;
+                            }
+                        `;
+                    }
+                    innerHTML += `
+                        @media screen and (max-width: ${breakpoint}) {
+                            ${styles}
+                        }
+                    `;
+                }
+            }
+            this.responsiveStyleElement.innerHTML = innerHTML;
+            setAttribute(this.responsiveStyleElement, 'nonce', this.config?.csp()?.nonce);
+        }
+    }
+    destroyResponsiveStyleElement() {
+        if (this.responsiveStyleElement) {
+            this.responsiveStyleElement.remove();
+            this.responsiveStyleElement = null;
+        }
+    }
+    bindDocumentClickListener() {
+        if (!this.documentClickListener) {
+            this.zone.runOutsideAngular(() => {
+                const documentTarget = this.el ? this.el.nativeElement.ownerDocument : this.document;
+                this.documentClickListener = this.renderer.listen(documentTarget, 'mousedown', (event) => {
+                    if (this.isOutsideClicked(event) && this.overlayVisible) {
+                        this.zone.run(() => {
+                            this.hideOverlay();
+                            this.onClickOutside.emit(event);
+                            this.cd.markForCheck();
+                        });
+                    }
+                });
+            });
+        }
+    }
+    unbindDocumentClickListener() {
+        if (this.documentClickListener) {
+            this.documentClickListener();
+            this.documentClickListener = null;
+        }
+    }
+    bindDocumentResizeListener() {
+        if (!this.documentResizeListener && !this.touchUI()) {
+            this.documentResizeListener = this.renderer.listen(this.window, 'resize', this.onWindowResize.bind(this));
+        }
+    }
+    unbindDocumentResizeListener() {
+        if (this.documentResizeListener) {
+            this.documentResizeListener();
+            this.documentResizeListener = null;
+        }
+    }
+    bindScrollListener() {
+        if (!this.scrollHandler) {
+            this.scrollHandler = new ConnectedOverlayScrollHandler(this.el?.nativeElement, () => {
+                if (this.overlayVisible) {
+                    this.hideOverlay();
+                }
+            });
+        }
+        this.scrollHandler.bindScrollListener();
+    }
+    unbindScrollListener() {
+        if (this.scrollHandler) {
+            this.scrollHandler.unbindScrollListener();
+        }
+    }
+    isOutsideClicked(event) {
+        return !(this.el.nativeElement.isSameNode(event.target) || this.isNavIconClicked(event) || this.el.nativeElement.contains(event.target) || (this.overlay && this.overlay.contains(event.target)));
+    }
+    isNavIconClicked(event) {
+        return hasClass(event.target, 'h-datepicker-prev-button') || hasClass(event.target, 'h-datepicker-prev-icon') || hasClass(event.target, 'h-datepicker-next-button') || hasClass(event.target, 'h-datepicker-next-icon');
+    }
+    onWindowResize() {
+        if (this.overlayVisible && !isTouchDevice()) {
+            this.hideOverlay();
+        }
+    }
+    onOverlayHide() {
+        this.currentView = this.view();
+        if (this.mask) {
+            this.destroyMask();
+        }
+        this.unbindDocumentClickListener();
+        this.unbindDocumentResizeListener();
+        this.unbindScrollListener();
+        this.overlay = null;
+    }
+    /**
+     * @override
+     *
+     * @see {@link BaseEditableHolder.writeControlValue}
+     * Writes the value to the control.
+     */
+    writeControlValue(value) {
+        this.value = value;
+        if (this.value && typeof this.value === 'string') {
+            try {
+                this.value = this.parseValueFromString(this.value);
+            }
+            catch {
+                if (this.keepInvalid()) {
+                    this.value = value;
+                }
+            }
+        }
+        this.updateInputfield();
+        this.updateUI();
+        this.cd.markForCheck();
+    }
+    onDestroy() {
+        if (this.scrollHandler) {
+            this.scrollHandler.destroy();
+            this.scrollHandler = null;
+        }
+        if (this.translationSubscription) {
+            this.translationSubscription.unsubscribe();
+        }
+        if (this.overlay && this.autoZIndex()) {
+            ZIndexUtils.clear(this.overlay);
+        }
+        this.destroyResponsiveStyleElement();
+        this.clearTimePickerTimer();
+        this.restoreOverlayAppend();
+        this.onOverlayHide();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: DatePicker, deps: [{ token: i0.NgZone }, { token: i1.OverlayService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: DatePicker, isStandalone: true, selector: "h-datePicker, h-datepicker, h-date-picker", inputs: { iconDisplay: { classPropertyName: "iconDisplay", publicName: "iconDisplay", isSignal: true, isRequired: false, transformFunction: null }, styleClass: { classPropertyName: "styleClass", publicName: "styleClass", isSignal: true, isRequired: false, transformFunction: null }, inputStyle: { classPropertyName: "inputStyle", publicName: "inputStyle", isSignal: true, isRequired: false, transformFunction: null }, inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: false, transformFunction: null }, inputStyleClass: { classPropertyName: "inputStyleClass", publicName: "inputStyleClass", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledBy: { classPropertyName: "ariaLabelledBy", publicName: "ariaLabelledBy", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, iconAriaLabel: { classPropertyName: "iconAriaLabel", publicName: "iconAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, dateFormat: { classPropertyName: "dateFormat", publicName: "dateFormat", isSignal: true, isRequired: false, transformFunction: null }, multipleSeparator: { classPropertyName: "multipleSeparator", publicName: "multipleSeparator", isSignal: true, isRequired: false, transformFunction: null }, rangeSeparator: { classPropertyName: "rangeSeparator", publicName: "rangeSeparator", isSignal: true, isRequired: false, transformFunction: null }, inline: { classPropertyName: "inline", publicName: "inline", isSignal: true, isRequired: false, transformFunction: null }, showOtherMonths: { classPropertyName: "showOtherMonths", publicName: "showOtherMonths", isSignal: true, isRequired: false, transformFunction: null }, selectOtherMonths: { classPropertyName: "selectOtherMonths", publicName: "selectOtherMonths", isSignal: true, isRequired: false, transformFunction: null }, showIcon: { classPropertyName: "showIcon", publicName: "showIcon", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, readonlyInput: { classPropertyName: "readonlyInput", publicName: "readonlyInput", isSignal: true, isRequired: false, transformFunction: null }, shortYearCutoff: { classPropertyName: "shortYearCutoff", publicName: "shortYearCutoff", isSignal: true, isRequired: false, transformFunction: null }, hourFormat: { classPropertyName: "hourFormat", publicName: "hourFormat", isSignal: true, isRequired: false, transformFunction: null }, timeOnly: { classPropertyName: "timeOnly", publicName: "timeOnly", isSignal: true, isRequired: false, transformFunction: null }, stepHour: { classPropertyName: "stepHour", publicName: "stepHour", isSignal: true, isRequired: false, transformFunction: null }, stepMinute: { classPropertyName: "stepMinute", publicName: "stepMinute", isSignal: true, isRequired: false, transformFunction: null }, stepSecond: { classPropertyName: "stepSecond", publicName: "stepSecond", isSignal: true, isRequired: false, transformFunction: null }, showSeconds: { classPropertyName: "showSeconds", publicName: "showSeconds", isSignal: true, isRequired: false, transformFunction: null }, showOnFocus: { classPropertyName: "showOnFocus", publicName: "showOnFocus", isSignal: true, isRequired: false, transformFunction: null }, showWeek: { classPropertyName: "showWeek", publicName: "showWeek", isSignal: true, isRequired: false, transformFunction: null }, startWeekFromFirstDayOfYear: { classPropertyName: "startWeekFromFirstDayOfYear", publicName: "startWeekFromFirstDayOfYear", isSignal: true, isRequired: false, transformFunction: null }, showClear: { classPropertyName: "showClear", publicName: "showClear", isSignal: true, isRequired: false, transformFunction: null }, dataType: { classPropertyName: "dataType", publicName: "dataType", isSignal: true, isRequired: false, transformFunction: null }, selectionMode: { classPropertyName: "selectionMode", publicName: "selectionMode", isSignal: true, isRequired: false, transformFunction: null }, maxDateCount: { classPropertyName: "maxDateCount", publicName: "maxDateCount", isSignal: true, isRequired: false, transformFunction: null }, showButtonBar: { classPropertyName: "showButtonBar", publicName: "showButtonBar", isSignal: true, isRequired: false, transformFunction: null }, todayButtonStyleClass: { classPropertyName: "todayButtonStyleClass", publicName: "todayButtonStyleClass", isSignal: true, isRequired: false, transformFunction: null }, clearButtonStyleClass: { classPropertyName: "clearButtonStyleClass", publicName: "clearButtonStyleClass", isSignal: true, isRequired: false, transformFunction: null }, autofocus: { classPropertyName: "autofocus", publicName: "autofocus", isSignal: true, isRequired: false, transformFunction: null }, autoZIndex: { classPropertyName: "autoZIndex", publicName: "autoZIndex", isSignal: true, isRequired: false, transformFunction: null }, baseZIndex: { classPropertyName: "baseZIndex", publicName: "baseZIndex", isSignal: true, isRequired: false, transformFunction: null }, panelStyleClass: { classPropertyName: "panelStyleClass", publicName: "panelStyleClass", isSignal: true, isRequired: false, transformFunction: null }, panelStyle: { classPropertyName: "panelStyle", publicName: "panelStyle", isSignal: true, isRequired: false, transformFunction: null }, keepInvalid: { classPropertyName: "keepInvalid", publicName: "keepInvalid", isSignal: true, isRequired: false, transformFunction: null }, hideOnDateTimeSelect: { classPropertyName: "hideOnDateTimeSelect", publicName: "hideOnDateTimeSelect", isSignal: true, isRequired: false, transformFunction: null }, touchUI: { classPropertyName: "touchUI", publicName: "touchUI", isSignal: true, isRequired: false, transformFunction: null }, timeSeparator: { classPropertyName: "timeSeparator", publicName: "timeSeparator", isSignal: true, isRequired: false, transformFunction: null }, focusTrap: { classPropertyName: "focusTrap", publicName: "focusTrap", isSignal: true, isRequired: false, transformFunction: null }, showTransitionOptions: { classPropertyName: "showTransitionOptions", publicName: "showTransitionOptions", isSignal: true, isRequired: false, transformFunction: null }, hideTransitionOptions: { classPropertyName: "hideTransitionOptions", publicName: "hideTransitionOptions", isSignal: true, isRequired: false, transformFunction: null }, tabindex: { classPropertyName: "tabindex", publicName: "tabindex", isSignal: true, isRequired: false, transformFunction: null }, minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: true, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: true, isRequired: false, transformFunction: null }, disabledDates: { classPropertyName: "disabledDates", publicName: "disabledDates", isSignal: true, isRequired: false, transformFunction: null }, disabledDays: { classPropertyName: "disabledDays", publicName: "disabledDays", isSignal: true, isRequired: false, transformFunction: null }, showTime: { classPropertyName: "showTime", publicName: "showTime", isSignal: true, isRequired: false, transformFunction: null }, responsiveOptions: { classPropertyName: "responsiveOptions", publicName: "responsiveOptions", isSignal: true, isRequired: false, transformFunction: null }, numberOfMonths: { classPropertyName: "numberOfMonths", publicName: "numberOfMonths", isSignal: true, isRequired: false, transformFunction: null }, firstDayOfWeek: { classPropertyName: "firstDayOfWeek", publicName: "firstDayOfWeek", isSignal: true, isRequired: false, transformFunction: null }, view: { classPropertyName: "view", publicName: "view", isSignal: true, isRequired: false, transformFunction: null }, defaultDate: { classPropertyName: "defaultDate", publicName: "defaultDate", isSignal: true, isRequired: false, transformFunction: null }, appendTo: { classPropertyName: "appendTo", publicName: "appendTo", isSignal: true, isRequired: false, transformFunction: null }, motionOptions: { classPropertyName: "motionOptions", publicName: "motionOptions", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onFocus: "onFocus", onBlur: "onBlur", onClose: "onClose", onSelect: "onSelect", onClear: "onClear", onInput: "onInput", onTodayClick: "onTodayClick", onClearClick: "onClearClick", onMonthChange: "onMonthChange", onYearChange: "onYearChange", onClickOutside: "onClickOutside", onShow: "onShow" }, host: { properties: { "class": "cn(cx('root'), styleClass())", "style": "sx('root')" } }, providers: [DATEPICKER_VALUE_ACCESSOR, DatePickerStyle, { provide: DATEPICKER_INSTANCE, useExisting: DatePicker }, { provide: PARENT_INSTANCE, useExisting: DatePicker }], queries: [{ propertyName: "dateTemplate", first: true, predicate: ["date"], isSignal: true }, { propertyName: "headerTemplate", first: true, predicate: ["header"], isSignal: true }, { propertyName: "footerTemplate", first: true, predicate: ["footer"], isSignal: true }, { propertyName: "disabledDateTemplate", first: true, predicate: ["disabledDate"], isSignal: true }, { propertyName: "decadeTemplate", first: true, predicate: ["decade"], isSignal: true }, { propertyName: "previousIconTemplate", first: true, predicate: ["previousicon"], isSignal: true }, { propertyName: "nextIconTemplate", first: true, predicate: ["nexticon"], isSignal: true }, { propertyName: "triggerIconTemplate", first: true, predicate: ["triggericon"], isSignal: true }, { propertyName: "clearIconTemplate", first: true, predicate: ["clearicon"], isSignal: true }, { propertyName: "decrementIconTemplate", first: true, predicate: ["decrementicon"], isSignal: true }, { propertyName: "incrementIconTemplate", first: true, predicate: ["incrementicon"], isSignal: true }, { propertyName: "inputIconTemplate", first: true, predicate: ["inputicon"], isSignal: true }, { propertyName: "buttonBarTemplate", first: true, predicate: ["buttonbar"], isSignal: true }, { propertyName: "templates", predicate: HelixTemplate, isSignal: true }], viewQueries: [{ propertyName: "inputfieldViewChild", first: true, predicate: ["inputfield"], descendants: true, isSignal: true }, { propertyName: "contentViewChild", first: true, predicate: ["contentWrapper"], descendants: true, isSignal: true }], usesInheritance: true, hostDirectives: [{ directive: i2.Bind }], ngImport: i0, template: "@if (!inline()) {\n  <input\n    #inputfield\n    hInputText\n    data-h-maskable\n    [pSize]=\"size()\"\n    [attr.size]=\"inputSize()\"\n    type=\"text\"\n    role=\"combobox\"\n    [attr.id]=\"inputId()\"\n    [attr.name]=\"name()\"\n    [attr.aria-required]=\"required()\"\n    aria-autocomplete=\"none\"\n    aria-haspopup=\"dialog\"\n    [attr.aria-expanded]=\"overlayVisible ?? false\"\n    [attr.aria-controls]=\"overlayVisible ? panelId : null\"\n    [attr.aria-labelledby]=\"ariaLabelledBy()\"\n    [attr.aria-label]=\"ariaLabel()\"\n    [value]=\"inputFieldValue\"\n    (focus)=\"onInputFocus($event)\"\n    (keydown)=\"onInputKeydown($event)\"\n    (click)=\"onInputClick()\"\n    (blur)=\"onInputBlur($event)\"\n    [attr.required]=\"required() ? '' : undefined\"\n    [attr.readonly]=\"readonlyInput() ? '' : undefined\"\n    [attr.disabled]=\"$disabled() ? '' : undefined\"\n    (input)=\"onUserInput($event)\"\n    [ngStyle]=\"inputStyle()\"\n    [class]=\"cn(cx('pcInputText'), inputStyleClass())\"\n    [attr.placeholder]=\"placeholder()\"\n    [attr.tabindex]=\"tabindex()\"\n    [attr.inputmode]=\"touchUI() ? 'off' : null\"\n    autocomplete=\"off\"\n    [hAutoFocus]=\"autofocus()\"\n    [variant]=\"$variant()\"\n    [fluid]=\"hasFluid\"\n    [invalid]=\"invalid()\"\n    [pt]=\"ptm('pcInputText')\"\n    [unstyled]=\"unstyled()\"\n    />\n  @if (showClear() && !$disabled() && inputfieldViewChild()?.nativeElement?.value) {\n    @if (!clearIconTemplate() && !_clearIconTemplate) {\n      <svg data-h-icon=\"times\" [class]=\"cx('clearIcon')\" [hBind]=\"ptm('inputIcon')\" (click)=\"clear()\" />\n    }\n    @if (clearIconTemplate() || _clearIconTemplate) {\n      <span [class]=\"cx('clearIcon')\" [hBind]=\"ptm('inputIcon')\" (click)=\"clear()\">\n        <ng-template *ngTemplateOutlet=\"clearIconTemplate() || _clearIconTemplate\"></ng-template>\n      </span>\n    }\n  }\n  @if (showIcon() && iconDisplay() === 'button') {\n    <button\n      type=\"button\"\n      [attr.aria-label]=\"iconButtonAriaLabel\"\n      aria-haspopup=\"dialog\"\n      [attr.aria-expanded]=\"overlayVisible ?? false\"\n      [attr.aria-controls]=\"overlayVisible ? panelId : null\"\n      (click)=\"onButtonClick($event, inputfield)\"\n      [class]=\"cx('dropdown')\"\n      [disabled]=\"$disabled()\"\n      tabindex=\"0\"\n      [hBind]=\"ptm('dropdown')\"\n      >\n      @if (icon()) {\n        <span [ngClass]=\"icon()\" [hBind]=\"ptm('dropdownIcon')\"></span>\n      }\n      @if (!icon()) {\n        @if (!triggerIconTemplate() && !_triggerIconTemplate) {\n          <svg data-h-icon=\"calendar\" [hBind]=\"ptm('dropdownIcon')\" />\n        }\n        <ng-template *ngTemplateOutlet=\"triggerIconTemplate() || _triggerIconTemplate\"></ng-template>\n      }\n    </button>\n  }\n  @if (iconDisplay() === 'input' && showIcon()) {\n    <span [class]=\"cx('inputIconContainer')\" [hBind]=\"ptm('inputIconContainer')\" [attr.data-h]=\"inputIconDataP\">\n      @if (!inputIconTemplate() && !_inputIconTemplate) {\n        <svg data-h-icon=\"calendar\" (click)=\"onButtonClick($event)\" [class]=\"cx('inputIcon')\" [hBind]=\"ptm('inputIcon')\" />\n      }\n      <ng-container *ngTemplateOutlet=\"inputIconTemplate() || _inputIconTemplate; context: { clickCallBack: onButtonClick.bind(this) }\"></ng-container>\n    </span>\n  }\n}\n<h-motion [visible]=\"inline() || overlayVisible\" name=\"h-anchored-overlay\" [appear]=\"!inline()\" [options]=\"computedMotionOptions()\" (onBeforeEnter)=\"onOverlayBeforeEnter($event)\" (onAfterLeave)=\"onOverlayAfterLeave($event)\">\n  <div\n    #contentWrapper\n    [attr.id]=\"panelId\"\n    [ngStyle]=\"panelStyle()\"\n    [class]=\"cn(cx('panel'), panelStyleClass())\"\n    [attr.aria-label]=\"getTranslation('chooseDate')\"\n    [attr.role]=\"inline() ? null : 'dialog'\"\n    [attr.aria-modal]=\"inline() ? null : 'true'\"\n    (click)=\"onOverlayClick($event)\"\n    [hBind]=\"ptm('panel')\"\n    >\n    <ng-content select=\"h-header\"></ng-content>\n    <ng-container *ngTemplateOutlet=\"headerTemplate() || _headerTemplate\"></ng-container>\n    @if (!timeOnly()) {\n      <div [class]=\"cx('calendarContainer')\" [hBind]=\"ptm('calendarContainer')\">\n        @for (month of months; track month; let i = $index) {\n          <div [class]=\"cx('calendar')\" [hBind]=\"ptm('calendar')\">\n            <div [class]=\"cx('header')\" [hBind]=\"ptm('header')\">\n              <h-button\n                rounded\n                variant=\"text\"\n                severity=\"secondary\"\n                (keydown)=\"onContainerButtonKeydown($event)\"\n                [styleClass]=\"cx('pcPrevButton')\"\n                (onClick)=\"onPrevButtonClick($event)\"\n                [ngStyle]=\"{ visibility: i === 0 ? 'visible' : 'hidden' }\"\n                type=\"button\"\n                [ariaLabel]=\"prevIconAriaLabel\"\n                [pt]=\"ptm('pcPrevButton')\"\n                [attr.data-pc-group-section]=\"'navigator'\"\n                >\n                <ng-template #icon>\n                  @if (!previousIconTemplate() && !_previousIconTemplate) {\n                    <svg data-h-icon=\"chevron-left\" />\n                  }\n                  @if (previousIconTemplate() || _previousIconTemplate) {\n                    <span>\n                      <ng-template *ngTemplateOutlet=\"previousIconTemplate() || _previousIconTemplate\"></ng-template>\n                    </span>\n                  }\n                </ng-template>\n              </h-button>\n              <div [class]=\"cx('title')\" [hBind]=\"ptm('title')\">\n                @if (currentView === 'date') {\n                  <button\n                    type=\"button\"\n                    (click)=\"switchToMonthView($event)\"\n                    (keydown)=\"onContainerButtonKeydown($event)\"\n                    [class]=\"cx('selectMonth')\"\n                    [attr.disabled]=\"switchViewButtonDisabled() ? '' : undefined\"\n                    [attr.aria-label]=\"this.getTranslation('chooseMonth')\"\n                    hRipple\n                    [hBind]=\"ptm('selectMonth')\"\n                    [attr.data-pc-group-section]=\"'navigator'\"\n                    >\n                    {{ getMonthName(month.month) }}\n                  </button>\n                }\n                @if (currentView !== 'year') {\n                  <button\n                    type=\"button\"\n                    (click)=\"switchToYearView($event)\"\n                    (keydown)=\"onContainerButtonKeydown($event)\"\n                    [class]=\"cx('selectYear')\"\n                    [attr.disabled]=\"switchViewButtonDisabled() ? '' : undefined\"\n                    [attr.aria-label]=\"getTranslation('chooseYear')\"\n                    hRipple\n                    [hBind]=\"ptm('selectYear')\"\n                    [attr.data-pc-group-section]=\"'navigator'\"\n                    >\n                    {{ getYear(month) }}\n                  </button>\n                }\n                @if (currentView === 'year') {\n                  <span [class]=\"cx('decade')\" [hBind]=\"ptm('decade')\">\n                    @if (!decadeTemplate() && !_decadeTemplate) {\n                      {{ yearPickerValues()[0] }} - {{ yearPickerValues()[yearPickerValues().length - 1] }}\n                    }\n                    <ng-container *ngTemplateOutlet=\"decadeTemplate() || _decadeTemplate; context: { $implicit: yearPickerValues }\"></ng-container>\n                  </span>\n                }\n              </div>\n              <h-button\n                rounded\n                variant=\"text\"\n                severity=\"secondary\"\n                (keydown)=\"onContainerButtonKeydown($event)\"\n                [styleClass]=\"cx('pcNextButton')\"\n                (onClick)=\"onNextButtonClick($event)\"\n                [ngStyle]=\"{ visibility: i === months.length - 1 ? 'visible' : 'hidden' }\"\n                [ariaLabel]=\"nextIconAriaLabel\"\n                [pt]=\"ptm('pcNextButton')\"\n                [attr.data-pc-group-section]=\"'navigator'\"\n                >\n                <ng-template #icon>\n                  @if (!nextIconTemplate() && !_nextIconTemplate) {\n                    <svg data-h-icon=\"chevron-right\" />\n                  }\n                  @if (nextIconTemplate() || _nextIconTemplate) {\n                    <ng-template *ngTemplateOutlet=\"nextIconTemplate() || _nextIconTemplate\"></ng-template>\n                  }\n                </ng-template>\n              </h-button>\n            </div>\n            @if (currentView === 'date') {\n              <table [class]=\"cx('dayView')\" role=\"grid\" [hBind]=\"ptm('table')\">\n                <thead [hBind]=\"ptm('tableHeader')\">\n                  <tr [hBind]=\"ptm('tableHeaderRow')\">\n                    @if (showWeek()) {\n                      <th [class]=\"cx('weekHeader')\" [hBind]=\"ptm('weekHeader')\">\n                        <span [hBind]=\"ptm('weekHeaderLabel')\">{{ getTranslation('weekHeader') }}</span>\n                      </th>\n                    }\n                    @for (weekDay of weekDays; track weekDay; let begin = $first; let end = $last) {\n                      <th [class]=\"cx('weekDayCell')\" scope=\"col\" [hBind]=\"ptm('weekDayCell')\">\n                        <span [class]=\"cx('weekDay')\" [hBind]=\"ptm('weekDay')\">{{ weekDay }}</span>\n                      </th>\n                    }\n                  </tr>\n                </thead>\n                <tbody [hBind]=\"ptm('tableBody')\">\n                  @for (week of month.dates; track week; let j = $index) {\n                    <tr [hBind]=\"ptm('tableBodyRow')\">\n                      @if (showWeek()) {\n                        <td [class]=\"cx('weekNumber')\" [hBind]=\"ptm('weekNumber')\">\n                          <span [class]=\"cx('weekLabelContainer')\" [hBind]=\"ptm('weekLabelContainer')\">\n                            {{ month.weekNumbers[j] }}\n                          </span>\n                        </td>\n                      }\n                      @for (date of week; track date) {\n                        <td [attr.aria-label]=\"date.day\" [class]=\"cx('dayCell', { date })\" [hBind]=\"ptm('dayCell')\">\n                          @if (date.otherMonth ? showOtherMonths() : true) {\n                            <span\n                              [ngClass]=\"dayClass(date)\"\n                              (click)=\"onDateSelect($event, date)\"\n                              draggable=\"false\"\n                              [attr.data-date]=\"formatDateKey(formatDateMetaToDate(date))\"\n                              (keydown)=\"onDateCellKeydown($event, date, i)\"\n                              hRipple\n                              [hBind]=\"ptm('day')\"\n                              >\n                              @if (!dateTemplate() && !_dateTemplate && (date.selectable || (!disabledDateTemplate() && !_disabledDateTemplate))) {\n                                {{ date.day }}\n                              }\n                              @if (date.selectable || (!disabledDateTemplate() && !_disabledDateTemplate)) {\n                                <ng-container *ngTemplateOutlet=\"dateTemplate() || _dateTemplate; context: { $implicit: date }\"></ng-container>\n                              }\n                              @if (!date.selectable) {\n                                <ng-container *ngTemplateOutlet=\"disabledDateTemplate() || _disabledDateTemplate; context: { $implicit: date }\"></ng-container>\n                              }\n                            </span>\n                            @if (isSelected(date)) {\n                              <div class=\"h-hidden-accessible\" aria-live=\"polite\">\n                                {{ date.day }}\n                              </div>\n                            }\n                          }\n                        </td>\n                      }\n                    </tr>\n                  }\n                </tbody>\n              </table>\n            }\n          </div>\n        }\n      </div>\n      @if (currentView === 'month') {\n        <div [class]=\"cx('monthView')\" [hBind]=\"ptm('monthView')\">\n          @for (m of monthPickerValues(); track m; let i = $index) {\n            <span (click)=\"onMonthSelect($event, i)\" (keydown)=\"onMonthCellKeydown($event, i)\" [class]=\"cx('month', { month: m, index: i })\" hRipple [hBind]=\"ptm('month')\">\n              {{ m }}\n              @if (isMonthSelected(i)) {\n                <div class=\"h-hidden-accessible\" aria-live=\"polite\">\n                  {{ m }}\n                </div>\n              }\n            </span>\n          }\n        </div>\n      }\n      @if (currentView === 'year') {\n        <div [class]=\"cx('yearView')\" [hBind]=\"ptm('yearView')\">\n          @for (y of yearPickerValues(); track y) {\n            <span (click)=\"onYearSelect($event, y)\" (keydown)=\"onYearCellKeydown($event, y)\" [class]=\"cx('year', { year: y })\" hRipple [hBind]=\"ptm('year')\">\n              {{ y }}\n              @if (isYearSelected(y)) {\n                <div class=\"h-hidden-accessible\" aria-live=\"polite\">\n                  {{ y }}\n                </div>\n              }\n            </span>\n          }\n        </div>\n      }\n    }\n    @if ((showTime() || timeOnly()) && currentView === 'date') {\n      <div [class]=\"cx('timePicker')\" [hBind]=\"ptm('timePicker')\">\n        <div [class]=\"cx('hourPicker')\" [hBind]=\"ptm('hourPicker')\">\n          <h-button\n            rounded\n            variant=\"text\"\n            severity=\"secondary\"\n            [styleClass]=\"cx('pcIncrementButton')\"\n            (keydown)=\"onContainerButtonKeydown($event)\"\n            (keydown.enter)=\"incrementHour($event)\"\n            (keydown.space)=\"incrementHour($event)\"\n            (mousedown)=\"onTimePickerElementMouseDown($event, 0, 1)\"\n            (mouseup)=\"onTimePickerElementMouseUp($event)\"\n            (keyup.enter)=\"onTimePickerElementMouseUp($event)\"\n            (keyup.space)=\"onTimePickerElementMouseUp($event)\"\n            (mouseleave)=\"onTimePickerElementMouseLeave()\"\n            [attr.aria-label]=\"getTranslation('nextHour')\"\n            [pt]=\"ptm('pcIncrementButton')\"\n            [attr.data-pc-group-section]=\"'timepickerbutton'\"\n            >\n            <ng-template #icon>\n              @if (!incrementIconTemplate() && !_incrementIconTemplate) {\n                <svg data-h-icon=\"chevron-up\" [hBind]=\"ptm('pcIncrementButton')['icon']\" />\n              }\n              <ng-template *ngTemplateOutlet=\"incrementIconTemplate() || _incrementIconTemplate\"></ng-template>\n            </ng-template>\n          </h-button>\n          <span [hBind]=\"ptm('hour')\">@if (currentHour < 10) {\n            0\n          }{{ currentHour }}</span>\n          <h-button\n            rounded\n            variant=\"text\"\n            severity=\"secondary\"\n            [styleClass]=\"cx('pcDecrementButton')\"\n            (keydown)=\"onContainerButtonKeydown($event)\"\n            (keydown.enter)=\"decrementHour($event)\"\n            (keydown.space)=\"decrementHour($event)\"\n            (mousedown)=\"onTimePickerElementMouseDown($event, 0, -1)\"\n            (mouseup)=\"onTimePickerElementMouseUp($event)\"\n            (keyup.enter)=\"onTimePickerElementMouseUp($event)\"\n            (keyup.space)=\"onTimePickerElementMouseUp($event)\"\n            (mouseleave)=\"onTimePickerElementMouseLeave()\"\n            [attr.aria-label]=\"getTranslation('prevHour')\"\n            [pt]=\"ptm('pcDecrementButton')\"\n            [attr.data-pc-group-section]=\"'timepickerbutton'\"\n            >\n            <ng-template #icon>\n              @if (!decrementIconTemplate() && !_decrementIconTemplate) {\n                <svg data-h-icon=\"chevron-down\" [hBind]=\"ptm('pcDecrementButton')['icon']\" />\n              }\n              <ng-template *ngTemplateOutlet=\"decrementIconTemplate() || _decrementIconTemplate\"></ng-template>\n            </ng-template>\n          </h-button>\n        </div>\n        <div class=\"h-datepicker-separator\" [hBind]=\"ptm('separatorContainer')\">\n          <span [hBind]=\"ptm('separator')\">{{ timeSeparator() }}</span>\n        </div>\n        <div [class]=\"cx('minutePicker')\" [hBind]=\"ptm('minutePicker')\">\n          <h-button\n            rounded\n            variant=\"text\"\n            severity=\"secondary\"\n            [styleClass]=\"cx('pcIncrementButton')\"\n            (keydown)=\"onContainerButtonKeydown($event)\"\n            (keydown.enter)=\"incrementMinute($event)\"\n            (keydown.space)=\"incrementMinute($event)\"\n            (mousedown)=\"onTimePickerElementMouseDown($event, 1, 1)\"\n            (mouseup)=\"onTimePickerElementMouseUp($event)\"\n            (keyup.enter)=\"onTimePickerElementMouseUp($event)\"\n            (keyup.space)=\"onTimePickerElementMouseUp($event)\"\n            (mouseleave)=\"onTimePickerElementMouseLeave()\"\n            [attr.aria-label]=\"getTranslation('nextMinute')\"\n            [pt]=\"ptm('pcIncrementButton')\"\n            [attr.data-pc-group-section]=\"'timepickerbutton'\"\n            >\n            <ng-template #icon>\n              @if (!incrementIconTemplate() && !_incrementIconTemplate) {\n                <svg data-h-icon=\"chevron-up\" [hBind]=\"ptm('pcIncrementButton')['icon']\" />\n              }\n              <ng-template *ngTemplateOutlet=\"incrementIconTemplate() || _incrementIconTemplate\"></ng-template>\n            </ng-template>\n          </h-button>\n          <span [hBind]=\"ptm('minute')\">@if (currentMinute < 10) {\n            0\n          }{{ currentMinute }}</span>\n          <h-button\n            rounded\n            variant=\"text\"\n            severity=\"secondary\"\n            [styleClass]=\"cx('pcDecrementButton')\"\n            (keydown)=\"onContainerButtonKeydown($event)\"\n            (keydown.enter)=\"decrementMinute($event)\"\n            (keydown.space)=\"decrementMinute($event)\"\n            (mousedown)=\"onTimePickerElementMouseDown($event, 1, -1)\"\n            (mouseup)=\"onTimePickerElementMouseUp($event)\"\n            (keyup.enter)=\"onTimePickerElementMouseUp($event)\"\n            (keyup.space)=\"onTimePickerElementMouseUp($event)\"\n            (mouseleave)=\"onTimePickerElementMouseLeave()\"\n            [attr.aria-label]=\"getTranslation('prevMinute')\"\n            [pt]=\"ptm('pcDecrementButton')\"\n            [attr.data-pc-group-section]=\"'timepickerbutton'\"\n            >\n            <ng-template #icon>\n              @if (!decrementIconTemplate() && !_decrementIconTemplate) {\n                <svg data-h-icon=\"chevron-down\" [hBind]=\"ptm('pcDecrementButton')['icon']\" />\n              }\n              <ng-template *ngTemplateOutlet=\"decrementIconTemplate() || _decrementIconTemplate\"></ng-template>\n            </ng-template>\n          </h-button>\n        </div>\n        @if (showSeconds()) {\n          <div [class]=\"cx('separator')\" [hBind]=\"ptm('separatorContainer')\">\n            <span [hBind]=\"ptm('separator')\">{{ timeSeparator() }}</span>\n          </div>\n        }\n        @if (showSeconds()) {\n          <div [class]=\"cx('secondPicker')\" [hBind]=\"ptm('secondPicker')\">\n            <h-button\n              rounded\n              variant=\"text\"\n              severity=\"secondary\"\n              [styleClass]=\"cx('pcIncrementButton')\"\n              (keydown)=\"onContainerButtonKeydown($event)\"\n              (keydown.enter)=\"incrementSecond($event)\"\n              (keydown.space)=\"incrementSecond($event)\"\n              (mousedown)=\"onTimePickerElementMouseDown($event, 2, 1)\"\n              (mouseup)=\"onTimePickerElementMouseUp($event)\"\n              (keyup.enter)=\"onTimePickerElementMouseUp($event)\"\n              (keyup.space)=\"onTimePickerElementMouseUp($event)\"\n              (mouseleave)=\"onTimePickerElementMouseLeave()\"\n              [attr.aria-label]=\"getTranslation('nextSecond')\"\n              [pt]=\"ptm('pcIncrementButton')\"\n              [attr.data-pc-group-section]=\"'timepickerbutton'\"\n              >\n              <ng-template #icon>\n                @if (!incrementIconTemplate() && !_incrementIconTemplate) {\n                  <svg data-h-icon=\"chevron-up\" [hBind]=\"ptm('pcIncrementButton')['icon']\" />\n                }\n                <ng-template *ngTemplateOutlet=\"incrementIconTemplate() || _incrementIconTemplate\"></ng-template>\n              </ng-template>\n            </h-button>\n            <span [hBind]=\"ptm('second')\">@if (currentSecond < 10) {\n              0\n            }{{ currentSecond }}</span>\n            <h-button\n              rounded\n              variant=\"text\"\n              severity=\"secondary\"\n              [styleClass]=\"cx('pcDecrementButton')\"\n              (keydown)=\"onContainerButtonKeydown($event)\"\n              (keydown.enter)=\"decrementSecond($event)\"\n              (keydown.space)=\"decrementSecond($event)\"\n              (mousedown)=\"onTimePickerElementMouseDown($event, 2, -1)\"\n              (mouseup)=\"onTimePickerElementMouseUp($event)\"\n              (keyup.enter)=\"onTimePickerElementMouseUp($event)\"\n              (keyup.space)=\"onTimePickerElementMouseUp($event)\"\n              (mouseleave)=\"onTimePickerElementMouseLeave()\"\n              [attr.aria-label]=\"getTranslation('prevSecond')\"\n              [pt]=\"ptm('pcDecrementButton')\"\n              [attr.data-pc-group-section]=\"'timepickerbutton'\"\n              >\n              <ng-template #icon>\n                @if (!decrementIconTemplate() && !_decrementIconTemplate) {\n                  <svg data-h-icon=\"chevron-down\" [hBind]=\"ptm('pcDecrementButton')['icon']\" />\n                }\n                <ng-template *ngTemplateOutlet=\"decrementIconTemplate() || _decrementIconTemplate\"></ng-template>\n              </ng-template>\n            </h-button>\n          </div>\n        }\n        @if (hourFormat() == '12') {\n          <div [class]=\"cx('separator')\" [hBind]=\"ptm('separatorContainer')\">\n            <span [hBind]=\"ptm('separator')\">{{ timeSeparator() }}</span>\n          </div>\n        }\n        @if (hourFormat() == '12') {\n          <div [class]=\"cx('ampmPicker')\" [hBind]=\"ptm('ampmPicker')\">\n            <h-button\n              text\n              rounded\n              severity=\"secondary\"\n              [styleClass]=\"cx('pcIncrementButton')\"\n              (keydown)=\"onContainerButtonKeydown($event)\"\n              (onClick)=\"toggleAMPM($event)\"\n              (keydown.enter)=\"toggleAMPM($event)\"\n              [attr.aria-label]=\"getTranslation('am')\"\n              [pt]=\"ptm('pcIncrementButton')\"\n              [attr.data-pc-group-section]=\"'timepickerbutton'\"\n              >\n              <ng-template #icon>\n                @if (!incrementIconTemplate() && !_incrementIconTemplate) {\n                  <svg data-h-icon=\"chevron-up\" [hBind]=\"ptm('pcIncrementButton')['icon']\" />\n                }\n                <ng-template *ngTemplateOutlet=\"incrementIconTemplate() || _incrementIconTemplate\"></ng-template>\n              </ng-template>\n            </h-button>\n            <span [hBind]=\"ptm('ampm')\">{{ pm ? 'PM' : 'AM' }}</span>\n            <h-button\n              text\n              rounded\n              severity=\"secondary\"\n              [styleClass]=\"cx('pcDecrementButton')\"\n              (keydown)=\"onContainerButtonKeydown($event)\"\n              (click)=\"toggleAMPM($event)\"\n              (keydown.enter)=\"toggleAMPM($event)\"\n              [attr.aria-label]=\"getTranslation('pm')\"\n              [pt]=\"ptm('pcDecrementButton')\"\n              [attr.data-pc-group-section]=\"'timepickerbutton'\"\n              >\n              <ng-template #icon>\n                @if (!decrementIconTemplate() && !_decrementIconTemplate) {\n                  <svg data-h-icon=\"chevron-down\" [hBind]=\"ptm('pcDecrementButton')['icon']\" />\n                }\n                <ng-template *ngTemplateOutlet=\"decrementIconTemplate() || _decrementIconTemplate\"></ng-template>\n              </ng-template>\n            </h-button>\n          </div>\n        }\n      </div>\n    }\n    @if (showButtonBar()) {\n      <div [class]=\"cx('buttonbar')\" [hBind]=\"ptm('buttonbar')\">\n        @if (buttonBarTemplate() || _buttonBarTemplate) {\n          <ng-container *ngTemplateOutlet=\"buttonBarTemplate() || _buttonBarTemplate; context: { todayCallback: onTodayButtonClick.bind(this), clearCallback: onClearButtonClick.bind(this) }\"></ng-container>\n        } @else {\n          <h-button\n            size=\"small\"\n            [styleClass]=\"cx('pcTodayButton')\"\n            [label]=\"getTranslation('today')\"\n            (keydown)=\"onContainerButtonKeydown($event)\"\n            (onClick)=\"onTodayButtonClick($event)\"\n            [ngClass]=\"todayButtonStyleClass()\"\n            severity=\"secondary\"\n            variant=\"text\"\n            size=\"small\"\n            [pt]=\"ptm('pcTodayButton')\"\n            [attr.data-pc-group-section]=\"'button'\"\n            />\n          <h-button\n            size=\"small\"\n            [styleClass]=\"cx('pcClearButton')\"\n            [label]=\"getTranslation('clear')\"\n            (keydown)=\"onContainerButtonKeydown($event)\"\n            (onClick)=\"onClearButtonClick($event)\"\n            [ngClass]=\"clearButtonStyleClass()\"\n            severity=\"secondary\"\n            variant=\"text\"\n            size=\"small\"\n            [pt]=\"ptm('pcClearButton')\"\n            [attr.data-pc-group-section]=\"'button'\"\n            />\n        }\n      </div>\n    }\n    <ng-content select=\"h-footer\"></ng-content>\n    <ng-container *ngTemplateOutlet=\"footerTemplate() || _footerTemplate\"></ng-container>\n  </div>\n</h-motion>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: Button, selector: "h-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "directive", type: Ripple, selector: "[hRipple]" }, { kind: "component", type: ChevronLeftIcon, selector: "[data-h-icon=\"chevron-left\"]" }, { kind: "component", type: ChevronRightIcon, selector: "[data-h-icon=\"chevron-right\"]" }, { kind: "component", type: ChevronUpIcon, selector: "[data-h-icon=\"chevron-up\"]" }, { kind: "component", type: ChevronDownIcon, selector: "[data-h-icon=\"chevron-down\"]" }, { kind: "component", type: TimesIcon, selector: "[data-h-icon=\"times\"]" }, { kind: "component", type: CalendarIcon, selector: "[data-h-icon=\"calendar\"]" }, { kind: "directive", type: AutoFocus, selector: "[hAutoFocus]", inputs: ["hAutoFocus"] }, { kind: "directive", type: InputText, selector: "[hInputText]", inputs: ["hostName", "ptInputText", "pInputTextPT", "pInputTextUnstyled", "pSize", "variant", "fluid", "invalid"] }, { kind: "ngmodule", type: SharedModule }, { kind: "ngmodule", type: BindModule }, { kind: "directive", type: i2.Bind, selector: "[hBind]", inputs: ["hBind"] }, { kind: "ngmodule", type: MotionModule }, { kind: "component", type: i4.Motion, selector: "h-motion", inputs: ["visible", "mountOnEnter", "unmountOnLeave", "name", "type", "safe", "disabled", "appear", "enter", "leave", "duration", "hideStrategy", "enterFromClass", "enterToClass", "enterActiveClass", "leaveFromClass", "leaveToClass", "leaveActiveClass", "options"], outputs: ["onBeforeEnter", "onEnter", "onAfterEnter", "onEnterCancelled", "onBeforeLeave", "onLeave", "onAfterLeave", "onLeaveCancelled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: DatePicker, decorators: [{
+            type: Component,
+            args: [{ selector: 'h-datePicker, h-datepicker, h-date-picker', standalone: true, imports: [CommonModule, Button, Ripple, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, ChevronDownIcon, TimesIcon, CalendarIcon, AutoFocus, InputText, SharedModule, BindModule, MotionModule], hostDirectives: [Bind], providers: [DATEPICKER_VALUE_ACCESSOR, DatePickerStyle, { provide: DATEPICKER_INSTANCE, useExisting: DatePicker }, { provide: PARENT_INSTANCE, useExisting: DatePicker }], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
+                        '[class]': "cn(cx('root'), styleClass())",
+                        '[style]': "sx('root')"
+                    }, template: "@if (!inline()) {\n  <input\n    #inputfield\n    hInputText\n    data-h-maskable\n    [pSize]=\"size()\"\n    [attr.size]=\"inputSize()\"\n    type=\"text\"\n    role=\"combobox\"\n    [attr.id]=\"inputId()\"\n    [attr.name]=\"name()\"\n    [attr.aria-required]=\"required()\"\n    aria-autocomplete=\"none\"\n    aria-haspopup=\"dialog\"\n    [attr.aria-expanded]=\"overlayVisible ?? false\"\n    [attr.aria-controls]=\"overlayVisible ? panelId : null\"\n    [attr.aria-labelledby]=\"ariaLabelledBy()\"\n    [attr.aria-label]=\"ariaLabel()\"\n    [value]=\"inputFieldValue\"\n    (focus)=\"onInputFocus($event)\"\n    (keydown)=\"onInputKeydown($event)\"\n    (click)=\"onInputClick()\"\n    (blur)=\"onInputBlur($event)\"\n    [attr.required]=\"required() ? '' : undefined\"\n    [attr.readonly]=\"readonlyInput() ? '' : undefined\"\n    [attr.disabled]=\"$disabled() ? '' : undefined\"\n    (input)=\"onUserInput($event)\"\n    [ngStyle]=\"inputStyle()\"\n    [class]=\"cn(cx('pcInputText'), inputStyleClass())\"\n    [attr.placeholder]=\"placeholder()\"\n    [attr.tabindex]=\"tabindex()\"\n    [attr.inputmode]=\"touchUI() ? 'off' : null\"\n    autocomplete=\"off\"\n    [hAutoFocus]=\"autofocus()\"\n    [variant]=\"$variant()\"\n    [fluid]=\"hasFluid\"\n    [invalid]=\"invalid()\"\n    [pt]=\"ptm('pcInputText')\"\n    [unstyled]=\"unstyled()\"\n    />\n  @if (showClear() && !$disabled() && inputfieldViewChild()?.nativeElement?.value) {\n    @if (!clearIconTemplate() && !_clearIconTemplate) {\n      <svg data-h-icon=\"times\" [class]=\"cx('clearIcon')\" [hBind]=\"ptm('inputIcon')\" (click)=\"clear()\" />\n    }\n    @if (clearIconTemplate() || _clearIconTemplate) {\n      <span [class]=\"cx('clearIcon')\" [hBind]=\"ptm('inputIcon')\" (click)=\"clear()\">\n        <ng-template *ngTemplateOutlet=\"clearIconTemplate() || _clearIconTemplate\"></ng-template>\n      </span>\n    }\n  }\n  @if (showIcon() && iconDisplay() === 'button') {\n    <button\n      type=\"button\"\n      [attr.aria-label]=\"iconButtonAriaLabel\"\n      aria-haspopup=\"dialog\"\n      [attr.aria-expanded]=\"overlayVisible ?? false\"\n      [attr.aria-controls]=\"overlayVisible ? panelId : null\"\n      (click)=\"onButtonClick($event, inputfield)\"\n      [class]=\"cx('dropdown')\"\n      [disabled]=\"$disabled()\"\n      tabindex=\"0\"\n      [hBind]=\"ptm('dropdown')\"\n      >\n      @if (icon()) {\n        <span [ngClass]=\"icon()\" [hBind]=\"ptm('dropdownIcon')\"></span>\n      }\n      @if (!icon()) {\n        @if (!triggerIconTemplate() && !_triggerIconTemplate) {\n          <svg data-h-icon=\"calendar\" [hBind]=\"ptm('dropdownIcon')\" />\n        }\n        <ng-template *ngTemplateOutlet=\"triggerIconTemplate() || _triggerIconTemplate\"></ng-template>\n      }\n    </button>\n  }\n  @if (iconDisplay() === 'input' && showIcon()) {\n    <span [class]=\"cx('inputIconContainer')\" [hBind]=\"ptm('inputIconContainer')\" [attr.data-h]=\"inputIconDataP\">\n      @if (!inputIconTemplate() && !_inputIconTemplate) {\n        <svg data-h-icon=\"calendar\" (click)=\"onButtonClick($event)\" [class]=\"cx('inputIcon')\" [hBind]=\"ptm('inputIcon')\" />\n      }\n      <ng-container *ngTemplateOutlet=\"inputIconTemplate() || _inputIconTemplate; context: { clickCallBack: onButtonClick.bind(this) }\"></ng-container>\n    </span>\n  }\n}\n<h-motion [visible]=\"inline() || overlayVisible\" name=\"h-anchored-overlay\" [appear]=\"!inline()\" [options]=\"computedMotionOptions()\" (onBeforeEnter)=\"onOverlayBeforeEnter($event)\" (onAfterLeave)=\"onOverlayAfterLeave($event)\">\n  <div\n    #contentWrapper\n    [attr.id]=\"panelId\"\n    [ngStyle]=\"panelStyle()\"\n    [class]=\"cn(cx('panel'), panelStyleClass())\"\n    [attr.aria-label]=\"getTranslation('chooseDate')\"\n    [attr.role]=\"inline() ? null : 'dialog'\"\n    [attr.aria-modal]=\"inline() ? null : 'true'\"\n    (click)=\"onOverlayClick($event)\"\n    [hBind]=\"ptm('panel')\"\n    >\n    <ng-content select=\"h-header\"></ng-content>\n    <ng-container *ngTemplateOutlet=\"headerTemplate() || _headerTemplate\"></ng-container>\n    @if (!timeOnly()) {\n      <div [class]=\"cx('calendarContainer')\" [hBind]=\"ptm('calendarContainer')\">\n        @for (month of months; track month; let i = $index) {\n          <div [class]=\"cx('calendar')\" [hBind]=\"ptm('calendar')\">\n            <div [class]=\"cx('header')\" [hBind]=\"ptm('header')\">\n              <h-button\n                rounded\n                variant=\"text\"\n                severity=\"secondary\"\n                (keydown)=\"onContainerButtonKeydown($event)\"\n                [styleClass]=\"cx('pcPrevButton')\"\n                (onClick)=\"onPrevButtonClick($event)\"\n                [ngStyle]=\"{ visibility: i === 0 ? 'visible' : 'hidden' }\"\n                type=\"button\"\n                [ariaLabel]=\"prevIconAriaLabel\"\n                [pt]=\"ptm('pcPrevButton')\"\n                [attr.data-pc-group-section]=\"'navigator'\"\n                >\n                <ng-template #icon>\n                  @if (!previousIconTemplate() && !_previousIconTemplate) {\n                    <svg data-h-icon=\"chevron-left\" />\n                  }\n                  @if (previousIconTemplate() || _previousIconTemplate) {\n                    <span>\n                      <ng-template *ngTemplateOutlet=\"previousIconTemplate() || _previousIconTemplate\"></ng-template>\n                    </span>\n                  }\n                </ng-template>\n              </h-button>\n              <div [class]=\"cx('title')\" [hBind]=\"ptm('title')\">\n                @if (currentView === 'date') {\n                  <button\n                    type=\"button\"\n                    (click)=\"switchToMonthView($event)\"\n                    (keydown)=\"onContainerButtonKeydown($event)\"\n                    [class]=\"cx('selectMonth')\"\n                    [attr.disabled]=\"switchViewButtonDisabled() ? '' : undefined\"\n                    [attr.aria-label]=\"this.getTranslation('chooseMonth')\"\n                    hRipple\n                    [hBind]=\"ptm('selectMonth')\"\n                    [attr.data-pc-group-section]=\"'navigator'\"\n                    >\n                    {{ getMonthName(month.month) }}\n                  </button>\n                }\n                @if (currentView !== 'year') {\n                  <button\n                    type=\"button\"\n                    (click)=\"switchToYearView($event)\"\n                    (keydown)=\"onContainerButtonKeydown($event)\"\n                    [class]=\"cx('selectYear')\"\n                    [attr.disabled]=\"switchViewButtonDisabled() ? '' : undefined\"\n                    [attr.aria-label]=\"getTranslation('chooseYear')\"\n                    hRipple\n                    [hBind]=\"ptm('selectYear')\"\n                    [attr.data-pc-group-section]=\"'navigator'\"\n                    >\n                    {{ getYear(month) }}\n                  </button>\n                }\n                @if (currentView === 'year') {\n                  <span [class]=\"cx('decade')\" [hBind]=\"ptm('decade')\">\n                    @if (!decadeTemplate() && !_decadeTemplate) {\n                      {{ yearPickerValues()[0] }} - {{ yearPickerValues()[yearPickerValues().length - 1] }}\n                    }\n                    <ng-container *ngTemplateOutlet=\"decadeTemplate() || _decadeTemplate; context: { $implicit: yearPickerValues }\"></ng-container>\n                  </span>\n                }\n              </div>\n              <h-button\n                rounded\n                variant=\"text\"\n                severity=\"secondary\"\n                (keydown)=\"onContainerButtonKeydown($event)\"\n                [styleClass]=\"cx('pcNextButton')\"\n                (onClick)=\"onNextButtonClick($event)\"\n                [ngStyle]=\"{ visibility: i === months.length - 1 ? 'visible' : 'hidden' }\"\n                [ariaLabel]=\"nextIconAriaLabel\"\n                [pt]=\"ptm('pcNextButton')\"\n                [attr.data-pc-group-section]=\"'navigator'\"\n                >\n                <ng-template #icon>\n                  @if (!nextIconTemplate() && !_nextIconTemplate) {\n                    <svg data-h-icon=\"chevron-right\" />\n                  }\n                  @if (nextIconTemplate() || _nextIconTemplate) {\n                    <ng-template *ngTemplateOutlet=\"nextIconTemplate() || _nextIconTemplate\"></ng-template>\n                  }\n                </ng-template>\n              </h-button>\n            </div>\n            @if (currentView === 'date') {\n              <table [class]=\"cx('dayView')\" role=\"grid\" [hBind]=\"ptm('table')\">\n                <thead [hBind]=\"ptm('tableHeader')\">\n                  <tr [hBind]=\"ptm('tableHeaderRow')\">\n                    @if (showWeek()) {\n                      <th [class]=\"cx('weekHeader')\" [hBind]=\"ptm('weekHeader')\">\n                        <span [hBind]=\"ptm('weekHeaderLabel')\">{{ getTranslation('weekHeader') }}</span>\n                      </th>\n                    }\n                    @for (weekDay of weekDays; track weekDay; let begin = $first; let end = $last) {\n                      <th [class]=\"cx('weekDayCell')\" scope=\"col\" [hBind]=\"ptm('weekDayCell')\">\n                        <span [class]=\"cx('weekDay')\" [hBind]=\"ptm('weekDay')\">{{ weekDay }}</span>\n                      </th>\n                    }\n                  </tr>\n                </thead>\n                <tbody [hBind]=\"ptm('tableBody')\">\n                  @for (week of month.dates; track week; let j = $index) {\n                    <tr [hBind]=\"ptm('tableBodyRow')\">\n                      @if (showWeek()) {\n                        <td [class]=\"cx('weekNumber')\" [hBind]=\"ptm('weekNumber')\">\n                          <span [class]=\"cx('weekLabelContainer')\" [hBind]=\"ptm('weekLabelContainer')\">\n                            {{ month.weekNumbers[j] }}\n                          </span>\n                        </td>\n                      }\n                      @for (date of week; track date) {\n                        <td [attr.aria-label]=\"date.day\" [class]=\"cx('dayCell', { date })\" [hBind]=\"ptm('dayCell')\">\n                          @if (date.otherMonth ? showOtherMonths() : true) {\n                            <span\n                              [ngClass]=\"dayClass(date)\"\n                              (click)=\"onDateSelect($event, date)\"\n                              draggable=\"false\"\n                              [attr.data-date]=\"formatDateKey(formatDateMetaToDate(date))\"\n                              (keydown)=\"onDateCellKeydown($event, date, i)\"\n                              hRipple\n                              [hBind]=\"ptm('day')\"\n                              >\n                              @if (!dateTemplate() && !_dateTemplate && (date.selectable || (!disabledDateTemplate() && !_disabledDateTemplate))) {\n                                {{ date.day }}\n                              }\n                              @if (date.selectable || (!disabledDateTemplate() && !_disabledDateTemplate)) {\n                                <ng-container *ngTemplateOutlet=\"dateTemplate() || _dateTemplate; context: { $implicit: date }\"></ng-container>\n                              }\n                              @if (!date.selectable) {\n                                <ng-container *ngTemplateOutlet=\"disabledDateTemplate() || _disabledDateTemplate; context: { $implicit: date }\"></ng-container>\n                              }\n                            </span>\n                            @if (isSelected(date)) {\n                              <div class=\"h-hidden-accessible\" aria-live=\"polite\">\n                                {{ date.day }}\n                              </div>\n                            }\n                          }\n                        </td>\n                      }\n                    </tr>\n                  }\n                </tbody>\n              </table>\n            }\n          </div>\n        }\n      </div>\n      @if (currentView === 'month') {\n        <div [class]=\"cx('monthView')\" [hBind]=\"ptm('monthView')\">\n          @for (m of monthPickerValues(); track m; let i = $index) {\n            <span (click)=\"onMonthSelect($event, i)\" (keydown)=\"onMonthCellKeydown($event, i)\" [class]=\"cx('month', { month: m, index: i })\" hRipple [hBind]=\"ptm('month')\">\n              {{ m }}\n              @if (isMonthSelected(i)) {\n                <div class=\"h-hidden-accessible\" aria-live=\"polite\">\n                  {{ m }}\n                </div>\n              }\n            </span>\n          }\n        </div>\n      }\n      @if (currentView === 'year') {\n        <div [class]=\"cx('yearView')\" [hBind]=\"ptm('yearView')\">\n          @for (y of yearPickerValues(); track y) {\n            <span (click)=\"onYearSelect($event, y)\" (keydown)=\"onYearCellKeydown($event, y)\" [class]=\"cx('year', { year: y })\" hRipple [hBind]=\"ptm('year')\">\n              {{ y }}\n              @if (isYearSelected(y)) {\n                <div class=\"h-hidden-accessible\" aria-live=\"polite\">\n                  {{ y }}\n                </div>\n              }\n            </span>\n          }\n        </div>\n      }\n    }\n    @if ((showTime() || timeOnly()) && currentView === 'date') {\n      <div [class]=\"cx('timePicker')\" [hBind]=\"ptm('timePicker')\">\n        <div [class]=\"cx('hourPicker')\" [hBind]=\"ptm('hourPicker')\">\n          <h-button\n            rounded\n            variant=\"text\"\n            severity=\"secondary\"\n            [styleClass]=\"cx('pcIncrementButton')\"\n            (keydown)=\"onContainerButtonKeydown($event)\"\n            (keydown.enter)=\"incrementHour($event)\"\n            (keydown.space)=\"incrementHour($event)\"\n            (mousedown)=\"onTimePickerElementMouseDown($event, 0, 1)\"\n            (mouseup)=\"onTimePickerElementMouseUp($event)\"\n            (keyup.enter)=\"onTimePickerElementMouseUp($event)\"\n            (keyup.space)=\"onTimePickerElementMouseUp($event)\"\n            (mouseleave)=\"onTimePickerElementMouseLeave()\"\n            [attr.aria-label]=\"getTranslation('nextHour')\"\n            [pt]=\"ptm('pcIncrementButton')\"\n            [attr.data-pc-group-section]=\"'timepickerbutton'\"\n            >\n            <ng-template #icon>\n              @if (!incrementIconTemplate() && !_incrementIconTemplate) {\n                <svg data-h-icon=\"chevron-up\" [hBind]=\"ptm('pcIncrementButton')['icon']\" />\n              }\n              <ng-template *ngTemplateOutlet=\"incrementIconTemplate() || _incrementIconTemplate\"></ng-template>\n            </ng-template>\n          </h-button>\n          <span [hBind]=\"ptm('hour')\">@if (currentHour < 10) {\n            0\n          }{{ currentHour }}</span>\n          <h-button\n            rounded\n            variant=\"text\"\n            severity=\"secondary\"\n            [styleClass]=\"cx('pcDecrementButton')\"\n            (keydown)=\"onContainerButtonKeydown($event)\"\n            (keydown.enter)=\"decrementHour($event)\"\n            (keydown.space)=\"decrementHour($event)\"\n            (mousedown)=\"onTimePickerElementMouseDown($event, 0, -1)\"\n            (mouseup)=\"onTimePickerElementMouseUp($event)\"\n            (keyup.enter)=\"onTimePickerElementMouseUp($event)\"\n            (keyup.space)=\"onTimePickerElementMouseUp($event)\"\n            (mouseleave)=\"onTimePickerElementMouseLeave()\"\n            [attr.aria-label]=\"getTranslation('prevHour')\"\n            [pt]=\"ptm('pcDecrementButton')\"\n            [attr.data-pc-group-section]=\"'timepickerbutton'\"\n            >\n            <ng-template #icon>\n              @if (!decrementIconTemplate() && !_decrementIconTemplate) {\n                <svg data-h-icon=\"chevron-down\" [hBind]=\"ptm('pcDecrementButton')['icon']\" />\n              }\n              <ng-template *ngTemplateOutlet=\"decrementIconTemplate() || _decrementIconTemplate\"></ng-template>\n            </ng-template>\n          </h-button>\n        </div>\n        <div class=\"h-datepicker-separator\" [hBind]=\"ptm('separatorContainer')\">\n          <span [hBind]=\"ptm('separator')\">{{ timeSeparator() }}</span>\n        </div>\n        <div [class]=\"cx('minutePicker')\" [hBind]=\"ptm('minutePicker')\">\n          <h-button\n            rounded\n            variant=\"text\"\n            severity=\"secondary\"\n            [styleClass]=\"cx('pcIncrementButton')\"\n            (keydown)=\"onContainerButtonKeydown($event)\"\n            (keydown.enter)=\"incrementMinute($event)\"\n            (keydown.space)=\"incrementMinute($event)\"\n            (mousedown)=\"onTimePickerElementMouseDown($event, 1, 1)\"\n            (mouseup)=\"onTimePickerElementMouseUp($event)\"\n            (keyup.enter)=\"onTimePickerElementMouseUp($event)\"\n            (keyup.space)=\"onTimePickerElementMouseUp($event)\"\n            (mouseleave)=\"onTimePickerElementMouseLeave()\"\n            [attr.aria-label]=\"getTranslation('nextMinute')\"\n            [pt]=\"ptm('pcIncrementButton')\"\n            [attr.data-pc-group-section]=\"'timepickerbutton'\"\n            >\n            <ng-template #icon>\n              @if (!incrementIconTemplate() && !_incrementIconTemplate) {\n                <svg data-h-icon=\"chevron-up\" [hBind]=\"ptm('pcIncrementButton')['icon']\" />\n              }\n              <ng-template *ngTemplateOutlet=\"incrementIconTemplate() || _incrementIconTemplate\"></ng-template>\n            </ng-template>\n          </h-button>\n          <span [hBind]=\"ptm('minute')\">@if (currentMinute < 10) {\n            0\n          }{{ currentMinute }}</span>\n          <h-button\n            rounded\n            variant=\"text\"\n            severity=\"secondary\"\n            [styleClass]=\"cx('pcDecrementButton')\"\n            (keydown)=\"onContainerButtonKeydown($event)\"\n            (keydown.enter)=\"decrementMinute($event)\"\n            (keydown.space)=\"decrementMinute($event)\"\n            (mousedown)=\"onTimePickerElementMouseDown($event, 1, -1)\"\n            (mouseup)=\"onTimePickerElementMouseUp($event)\"\n            (keyup.enter)=\"onTimePickerElementMouseUp($event)\"\n            (keyup.space)=\"onTimePickerElementMouseUp($event)\"\n            (mouseleave)=\"onTimePickerElementMouseLeave()\"\n            [attr.aria-label]=\"getTranslation('prevMinute')\"\n            [pt]=\"ptm('pcDecrementButton')\"\n            [attr.data-pc-group-section]=\"'timepickerbutton'\"\n            >\n            <ng-template #icon>\n              @if (!decrementIconTemplate() && !_decrementIconTemplate) {\n                <svg data-h-icon=\"chevron-down\" [hBind]=\"ptm('pcDecrementButton')['icon']\" />\n              }\n              <ng-template *ngTemplateOutlet=\"decrementIconTemplate() || _decrementIconTemplate\"></ng-template>\n            </ng-template>\n          </h-button>\n        </div>\n        @if (showSeconds()) {\n          <div [class]=\"cx('separator')\" [hBind]=\"ptm('separatorContainer')\">\n            <span [hBind]=\"ptm('separator')\">{{ timeSeparator() }}</span>\n          </div>\n        }\n        @if (showSeconds()) {\n          <div [class]=\"cx('secondPicker')\" [hBind]=\"ptm('secondPicker')\">\n            <h-button\n              rounded\n              variant=\"text\"\n              severity=\"secondary\"\n              [styleClass]=\"cx('pcIncrementButton')\"\n              (keydown)=\"onContainerButtonKeydown($event)\"\n              (keydown.enter)=\"incrementSecond($event)\"\n              (keydown.space)=\"incrementSecond($event)\"\n              (mousedown)=\"onTimePickerElementMouseDown($event, 2, 1)\"\n              (mouseup)=\"onTimePickerElementMouseUp($event)\"\n              (keyup.enter)=\"onTimePickerElementMouseUp($event)\"\n              (keyup.space)=\"onTimePickerElementMouseUp($event)\"\n              (mouseleave)=\"onTimePickerElementMouseLeave()\"\n              [attr.aria-label]=\"getTranslation('nextSecond')\"\n              [pt]=\"ptm('pcIncrementButton')\"\n              [attr.data-pc-group-section]=\"'timepickerbutton'\"\n              >\n              <ng-template #icon>\n                @if (!incrementIconTemplate() && !_incrementIconTemplate) {\n                  <svg data-h-icon=\"chevron-up\" [hBind]=\"ptm('pcIncrementButton')['icon']\" />\n                }\n                <ng-template *ngTemplateOutlet=\"incrementIconTemplate() || _incrementIconTemplate\"></ng-template>\n              </ng-template>\n            </h-button>\n            <span [hBind]=\"ptm('second')\">@if (currentSecond < 10) {\n              0\n            }{{ currentSecond }}</span>\n            <h-button\n              rounded\n              variant=\"text\"\n              severity=\"secondary\"\n              [styleClass]=\"cx('pcDecrementButton')\"\n              (keydown)=\"onContainerButtonKeydown($event)\"\n              (keydown.enter)=\"decrementSecond($event)\"\n              (keydown.space)=\"decrementSecond($event)\"\n              (mousedown)=\"onTimePickerElementMouseDown($event, 2, -1)\"\n              (mouseup)=\"onTimePickerElementMouseUp($event)\"\n              (keyup.enter)=\"onTimePickerElementMouseUp($event)\"\n              (keyup.space)=\"onTimePickerElementMouseUp($event)\"\n              (mouseleave)=\"onTimePickerElementMouseLeave()\"\n              [attr.aria-label]=\"getTranslation('prevSecond')\"\n              [pt]=\"ptm('pcDecrementButton')\"\n              [attr.data-pc-group-section]=\"'timepickerbutton'\"\n              >\n              <ng-template #icon>\n                @if (!decrementIconTemplate() && !_decrementIconTemplate) {\n                  <svg data-h-icon=\"chevron-down\" [hBind]=\"ptm('pcDecrementButton')['icon']\" />\n                }\n                <ng-template *ngTemplateOutlet=\"decrementIconTemplate() || _decrementIconTemplate\"></ng-template>\n              </ng-template>\n            </h-button>\n          </div>\n        }\n        @if (hourFormat() == '12') {\n          <div [class]=\"cx('separator')\" [hBind]=\"ptm('separatorContainer')\">\n            <span [hBind]=\"ptm('separator')\">{{ timeSeparator() }}</span>\n          </div>\n        }\n        @if (hourFormat() == '12') {\n          <div [class]=\"cx('ampmPicker')\" [hBind]=\"ptm('ampmPicker')\">\n            <h-button\n              text\n              rounded\n              severity=\"secondary\"\n              [styleClass]=\"cx('pcIncrementButton')\"\n              (keydown)=\"onContainerButtonKeydown($event)\"\n              (onClick)=\"toggleAMPM($event)\"\n              (keydown.enter)=\"toggleAMPM($event)\"\n              [attr.aria-label]=\"getTranslation('am')\"\n              [pt]=\"ptm('pcIncrementButton')\"\n              [attr.data-pc-group-section]=\"'timepickerbutton'\"\n              >\n              <ng-template #icon>\n                @if (!incrementIconTemplate() && !_incrementIconTemplate) {\n                  <svg data-h-icon=\"chevron-up\" [hBind]=\"ptm('pcIncrementButton')['icon']\" />\n                }\n                <ng-template *ngTemplateOutlet=\"incrementIconTemplate() || _incrementIconTemplate\"></ng-template>\n              </ng-template>\n            </h-button>\n            <span [hBind]=\"ptm('ampm')\">{{ pm ? 'PM' : 'AM' }}</span>\n            <h-button\n              text\n              rounded\n              severity=\"secondary\"\n              [styleClass]=\"cx('pcDecrementButton')\"\n              (keydown)=\"onContainerButtonKeydown($event)\"\n              (click)=\"toggleAMPM($event)\"\n              (keydown.enter)=\"toggleAMPM($event)\"\n              [attr.aria-label]=\"getTranslation('pm')\"\n              [pt]=\"ptm('pcDecrementButton')\"\n              [attr.data-pc-group-section]=\"'timepickerbutton'\"\n              >\n              <ng-template #icon>\n                @if (!decrementIconTemplate() && !_decrementIconTemplate) {\n                  <svg data-h-icon=\"chevron-down\" [hBind]=\"ptm('pcDecrementButton')['icon']\" />\n                }\n                <ng-template *ngTemplateOutlet=\"decrementIconTemplate() || _decrementIconTemplate\"></ng-template>\n              </ng-template>\n            </h-button>\n          </div>\n        }\n      </div>\n    }\n    @if (showButtonBar()) {\n      <div [class]=\"cx('buttonbar')\" [hBind]=\"ptm('buttonbar')\">\n        @if (buttonBarTemplate() || _buttonBarTemplate) {\n          <ng-container *ngTemplateOutlet=\"buttonBarTemplate() || _buttonBarTemplate; context: { todayCallback: onTodayButtonClick.bind(this), clearCallback: onClearButtonClick.bind(this) }\"></ng-container>\n        } @else {\n          <h-button\n            size=\"small\"\n            [styleClass]=\"cx('pcTodayButton')\"\n            [label]=\"getTranslation('today')\"\n            (keydown)=\"onContainerButtonKeydown($event)\"\n            (onClick)=\"onTodayButtonClick($event)\"\n            [ngClass]=\"todayButtonStyleClass()\"\n            severity=\"secondary\"\n            variant=\"text\"\n            size=\"small\"\n            [pt]=\"ptm('pcTodayButton')\"\n            [attr.data-pc-group-section]=\"'button'\"\n            />\n          <h-button\n            size=\"small\"\n            [styleClass]=\"cx('pcClearButton')\"\n            [label]=\"getTranslation('clear')\"\n            (keydown)=\"onContainerButtonKeydown($event)\"\n            (onClick)=\"onClearButtonClick($event)\"\n            [ngClass]=\"clearButtonStyleClass()\"\n            severity=\"secondary\"\n            variant=\"text\"\n            size=\"small\"\n            [pt]=\"ptm('pcClearButton')\"\n            [attr.data-pc-group-section]=\"'button'\"\n            />\n        }\n      </div>\n    }\n    <ng-content select=\"h-footer\"></ng-content>\n    <ng-container *ngTemplateOutlet=\"footerTemplate() || _footerTemplate\"></ng-container>\n  </div>\n</h-motion>\n" }]
+        }], ctorParameters: () => [{ type: i0.NgZone }, { type: i1.OverlayService }], propDecorators: { iconDisplay: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconDisplay", required: false }] }], styleClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "styleClass", required: false }] }], inputStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputStyle", required: false }] }], inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: false }] }], inputStyleClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputStyleClass", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], ariaLabelledBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabelledBy", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], iconAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconAriaLabel", required: false }] }], dateFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "dateFormat", required: false }] }], multipleSeparator: [{ type: i0.Input, args: [{ isSignal: true, alias: "multipleSeparator", required: false }] }], rangeSeparator: [{ type: i0.Input, args: [{ isSignal: true, alias: "rangeSeparator", required: false }] }], inline: [{ type: i0.Input, args: [{ isSignal: true, alias: "inline", required: false }] }], showOtherMonths: [{ type: i0.Input, args: [{ isSignal: true, alias: "showOtherMonths", required: false }] }], selectOtherMonths: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectOtherMonths", required: false }] }], showIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "showIcon", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], readonlyInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonlyInput", required: false }] }], shortYearCutoff: [{ type: i0.Input, args: [{ isSignal: true, alias: "shortYearCutoff", required: false }] }], hourFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "hourFormat", required: false }] }], timeOnly: [{ type: i0.Input, args: [{ isSignal: true, alias: "timeOnly", required: false }] }], stepHour: [{ type: i0.Input, args: [{ isSignal: true, alias: "stepHour", required: false }] }], stepMinute: [{ type: i0.Input, args: [{ isSignal: true, alias: "stepMinute", required: false }] }], stepSecond: [{ type: i0.Input, args: [{ isSignal: true, alias: "stepSecond", required: false }] }], showSeconds: [{ type: i0.Input, args: [{ isSignal: true, alias: "showSeconds", required: false }] }], showOnFocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "showOnFocus", required: false }] }], showWeek: [{ type: i0.Input, args: [{ isSignal: true, alias: "showWeek", required: false }] }], startWeekFromFirstDayOfYear: [{ type: i0.Input, args: [{ isSignal: true, alias: "startWeekFromFirstDayOfYear", required: false }] }], showClear: [{ type: i0.Input, args: [{ isSignal: true, alias: "showClear", required: false }] }], dataType: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataType", required: false }] }], selectionMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectionMode", required: false }] }], maxDateCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxDateCount", required: false }] }], showButtonBar: [{ type: i0.Input, args: [{ isSignal: true, alias: "showButtonBar", required: false }] }], todayButtonStyleClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "todayButtonStyleClass", required: false }] }], clearButtonStyleClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearButtonStyleClass", required: false }] }], autofocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "autofocus", required: false }] }], autoZIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoZIndex", required: false }] }], baseZIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "baseZIndex", required: false }] }], panelStyleClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelStyleClass", required: false }] }], panelStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelStyle", required: false }] }], keepInvalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "keepInvalid", required: false }] }], hideOnDateTimeSelect: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideOnDateTimeSelect", required: false }] }], touchUI: [{ type: i0.Input, args: [{ isSignal: true, alias: "touchUI", required: false }] }], timeSeparator: [{ type: i0.Input, args: [{ isSignal: true, alias: "timeSeparator", required: false }] }], focusTrap: [{ type: i0.Input, args: [{ isSignal: true, alias: "focusTrap", required: false }] }], showTransitionOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "showTransitionOptions", required: false }] }], hideTransitionOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideTransitionOptions", required: false }] }], tabindex: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabindex", required: false }] }], minDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "minDate", required: false }] }], maxDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxDate", required: false }] }], disabledDates: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabledDates", required: false }] }], disabledDays: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabledDays", required: false }] }], showTime: [{ type: i0.Input, args: [{ isSignal: true, alias: "showTime", required: false }] }], responsiveOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "responsiveOptions", required: false }] }], numberOfMonths: [{ type: i0.Input, args: [{ isSignal: true, alias: "numberOfMonths", required: false }] }], firstDayOfWeek: [{ type: i0.Input, args: [{ isSignal: true, alias: "firstDayOfWeek", required: false }] }], view: [{ type: i0.Input, args: [{ isSignal: true, alias: "view", required: false }] }], defaultDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultDate", required: false }] }], appendTo: [{ type: i0.Input, args: [{ isSignal: true, alias: "appendTo", required: false }] }], motionOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "motionOptions", required: false }] }], onFocus: [{ type: i0.Output, args: ["onFocus"] }], onBlur: [{ type: i0.Output, args: ["onBlur"] }], onClose: [{ type: i0.Output, args: ["onClose"] }], onSelect: [{ type: i0.Output, args: ["onSelect"] }], onClear: [{ type: i0.Output, args: ["onClear"] }], onInput: [{ type: i0.Output, args: ["onInput"] }], onTodayClick: [{ type: i0.Output, args: ["onTodayClick"] }], onClearClick: [{ type: i0.Output, args: ["onClearClick"] }], onMonthChange: [{ type: i0.Output, args: ["onMonthChange"] }], onYearChange: [{ type: i0.Output, args: ["onYearChange"] }], onClickOutside: [{ type: i0.Output, args: ["onClickOutside"] }], onShow: [{ type: i0.Output, args: ["onShow"] }], inputfieldViewChild: [{ type: i0.ViewChild, args: ['inputfield', { isSignal: true }] }], contentViewChild: [{ type: i0.ViewChild, args: ['contentWrapper', { isSignal: true }] }], dateTemplate: [{ type: i0.ContentChild, args: ['date', { ...{ descendants: false }, isSignal: true }] }], headerTemplate: [{ type: i0.ContentChild, args: ['header', { ...{ descendants: false }, isSignal: true }] }], footerTemplate: [{ type: i0.ContentChild, args: ['footer', { ...{ descendants: false }, isSignal: true }] }], disabledDateTemplate: [{ type: i0.ContentChild, args: ['disabledDate', { ...{ descendants: false }, isSignal: true }] }], decadeTemplate: [{ type: i0.ContentChild, args: ['decade', { ...{ descendants: false }, isSignal: true }] }], previousIconTemplate: [{ type: i0.ContentChild, args: ['previousicon', { ...{ descendants: false }, isSignal: true }] }], nextIconTemplate: [{ type: i0.ContentChild, args: ['nexticon', { ...{ descendants: false }, isSignal: true }] }], triggerIconTemplate: [{ type: i0.ContentChild, args: ['triggericon', { ...{ descendants: false }, isSignal: true }] }], clearIconTemplate: [{ type: i0.ContentChild, args: ['clearicon', { ...{ descendants: false }, isSignal: true }] }], decrementIconTemplate: [{ type: i0.ContentChild, args: ['decrementicon', { ...{ descendants: false }, isSignal: true }] }], incrementIconTemplate: [{ type: i0.ContentChild, args: ['incrementicon', { ...{ descendants: false }, isSignal: true }] }], inputIconTemplate: [{ type: i0.ContentChild, args: ['inputicon', { ...{ descendants: false }, isSignal: true }] }], buttonBarTemplate: [{ type: i0.ContentChild, args: ['buttonbar', { ...{ descendants: false }, isSignal: true }] }], templates: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => HelixTemplate), { isSignal: true }] }] } });
+class DatePickerModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: DatePickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.1.6", ngImport: i0, type: DatePickerModule, imports: [DatePicker, SharedModule], exports: [DatePicker, SharedModule] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: DatePickerModule, imports: [DatePicker, SharedModule, SharedModule] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: DatePickerModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [DatePicker, SharedModule],
+                    exports: [DatePicker, SharedModule]
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { DATEPICKER_VALUE_ACCESSOR, DatePicker, DatePickerClasses, DatePickerModule, DatePickerStyle };
+//# sourceMappingURL=gravionlabs-helix-core-datepicker.mjs.map