@progress/kendo-angular-dateinputs 19.3.0-develop.8 → 19.3.0

package/esm2022/timepicker/timepicker.component.mjs

@@ -7,7 +7,7 @@ import { NG_VALUE_ACCESSOR, NG_VALIDATORS, NgControl } from '@angular/forms';
 import { L10N_PREFIX, LocalizationService } from '@progress/kendo-angular-l10n';
 import { PopupService } from '@progress/kendo-angular-popup';
 import { cloneDate, isEqual } from '@progress/kendo-date-math';
-import { hasObservers, isControlRequired, KendoInput, Keys, MultiTabStop, ResizeSensorComponent, EventsOutsideAngularDirective } from '@progress/kendo-angular-common';
+import { hasObservers, isControlRequired, KendoInput, Keys, MultiTabStop, ResizeSensorComponent, EventsOutsideAngularDirective, normalizeNumpadKeys } from '@progress/kendo-angular-common';
 import { AdaptiveService } from '@progress/kendo-angular-utils';
 import { validatePackage } from '@progress/kendo-licensing';
 import { packageMetadata } from '../package-metadata';
@@ -136,7 +136,7 @@ export class TimePickerComponent extends MultiTabStop {
      * [placeholders]({% slug placeholders_timepicker %}).
      * @default null
      */
-    placeholder = null;
+    placeholder;
     /**
      * Specifies the smallest valid time value
      * ([see example]({% slug timeranges_timepicker %})).
@@ -551,8 +551,9 @@ export class TimePickerComponent extends MultiTabStop {
      * @hidden
      */
     handleKeydown(event) {
-        const { altKey, keyCode } = event;
-        if (keyCode === Keys.Escape) {
+        const { altKey } = event;
+        const code = normalizeNumpadKeys(event);
+        if (code === Keys.Escape) {
             this.focusInput();
             this.show = false;
             hasObservers(this.escape) && this.escape.emit();
@@ -560,13 +561,13 @@ export class TimePickerComponent extends MultiTabStop {
             return;
         }
         if (altKey) {
-            if (keyCode === Keys.ArrowUp) {
+            if (code === Keys.ArrowUp) {
                 event.preventDefault();
                 this.focusInput();
                 this.show = false;
                 this.cdr.detectChanges();
             }
-            if (keyCode === Keys.ArrowDown && !this.show) {
+            if (code === Keys.ArrowDown && !this.show) {
                 event.preventDefault();
                 this.show = true;
             }

package/esm2022/timepicker/timeselector.component.mjs

@@ -6,7 +6,7 @@ import { Component, ChangeDetectorRef, ChangeDetectionStrategy, ElementRef, Even
 import { L10N_PREFIX, LocalizationService } from '@progress/kendo-angular-l10n';
 import { IntlService } from '@progress/kendo-angular-intl';
 import { cloneDate, getDate } from '@progress/kendo-date-math';
-import { Keys, EventsOutsideAngularDirective } from '@progress/kendo-angular-common';
+import { Keys, EventsOutsideAngularDirective, normalizeNumpadKeys } from '@progress/kendo-angular-common';
 import { MIDNIGHT_DATE, MIN_TIME, MAX_TIME } from '../defaults';
 import { TimeListComponent } from './timelist.component';
 import { TimePickerDOMService } from './services/dom.service';
@@ -300,8 +300,8 @@ export class TimeSelectorComponent {
      * @hidden
      */
     handleTabOut(event) {
-        const { keyCode, shiftKey } = event;
-        if (event.target === this.now?.nativeElement && keyCode === Keys.Tab && shiftKey) {
+        const { code, shiftKey } = event;
+        if (event.target === this.now?.nativeElement && code === Keys.Tab && shiftKey) {
             event.preventDefault();
             if (this.isDateTimePicker) {
                 this.tabOutNow.emit();
@@ -311,7 +311,7 @@ export class TimeSelectorComponent {
             }
             return;
         }
-        if (keyCode === Keys.Tab && !shiftKey && event.target !== this.now?.nativeElement) {
+        if (code === Keys.Tab && !shiftKey && event.target !== this.now?.nativeElement) {
             event.preventDefault();
             if (document.activeElement === this.accept.nativeElement) {
                 if (this.cancel) {
@@ -377,17 +377,18 @@ export class TimeSelectorComponent {
         }
     }
     handleKeydown(args) {
-        const { keyCode, altKey } = args;
+        const { altKey } = args;
+        const code = normalizeNumpadKeys(args);
         // reserve the alt + arrow key commands for the picker
-        const arrowKeyPressed = [Keys.ArrowLeft, Keys.ArrowRight].indexOf(keyCode) !== -1;
+        const arrowKeyPressed = [Keys.ArrowLeft, Keys.ArrowRight].indexOf(code) !== -1;
         if (isPresent(this.pickerService) && arrowKeyPressed && altKey) {
             return;
         }
-        if (keyCode === Keys.Enter && !this.hasActiveButton()) {
+        if (code === Keys.Enter && !this.hasActiveButton()) {
             this.handleAccept();
         }
-        else if (keyCode === Keys.ArrowLeft || keyCode === Keys.ArrowRight) {
-            this.focusList(keyCode === Keys.ArrowLeft ? Direction.Left : Direction.Right);
+        else if (code === Keys.ArrowLeft || code === Keys.ArrowRight) {
+            this.focusList(code === Keys.ArrowLeft ? Direction.Left : Direction.Right);
         }
     }
     emitBlur(args) {

package/fesm2022/progress-kendo-angular-dateinputs.mjs

@@ -9,7 +9,7 @@ import * as i1$1 from '@progress/kendo-angular-l10n';
 import { ComponentMessages, LocalizationService, L10N_PREFIX, RTL } from '@progress/kendo-angular-l10n';
 import { cloneDate, MS_PER_HOUR, MS_PER_MINUTE, addDays, getDate, isEqual, addDecades, addCenturies, firstDecadeOfCentury, lastDecadeOfCentury, lastYearOfDecade, firstYearOfDecade, createDate, lastMonthOfYear, lastDayOfMonth, durationInCenturies, addYears, durationInDecades, addWeeks, addMonths, firstDayOfMonth, dayOfWeek, durationInMonths, firstMonthOfYear, durationInYears, weekInYear } from '@progress/kendo-date-math';
 import * as i19 from '@progress/kendo-angular-common';
-import { isDocumentAvailable, EventsOutsideAngularDirective, guid, Keys as Keys$1, hasObservers, isObject, KendoInput, ResizeSensorComponent, isObjectPresent, removeHTMLAttributes, parseAttributes, anyChanged, isControlRequired, setHTMLAttributes, MultiTabStop, ToggleButtonTabStopDirective, ResizeBatchService, KENDO_TOGGLEBUTTONTABSTOP } from '@progress/kendo-angular-common';
+import { normalizeNumpadKeys, Keys, isDocumentAvailable, EventsOutsideAngularDirective, guid, hasObservers, isObject, KendoInput, ResizeSensorComponent, isObjectPresent, removeHTMLAttributes, parseAttributes, anyChanged, isControlRequired, setHTMLAttributes, MultiTabStop, ToggleButtonTabStopDirective, ResizeBatchService, KENDO_TOGGLEBUTTONTABSTOP } from '@progress/kendo-angular-common';
 export { ToggleButtonTabStopDirective } from '@progress/kendo-angular-common';
 import { validatePackage } from '@progress/kendo-licensing';
 import * as i1 from '@progress/kendo-angular-intl';
@@ -36,8 +36,8 @@ const packageMetadata = {
     productName: 'Kendo UI for Angular',
     productCode: 'KENDOUIANGULAR',
     productCodes: ['KENDOUIANGULAR'],
-    publishDate: 1752479279,
-    version: '19.3.0-develop.8',
+    publishDate: 1755030481,
+    version: '19.3.0',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };
 
@@ -128,18 +128,10 @@ const isDateArray = (value) => Array.isArray(value) && value.length > 0 && value
 /**
  * @hidden
  */
-const isArrowWithShiftPressed = (args) => args.shiftKey && (args.keyCode === Keys.ArrowRight || args.keyCode === Keys.ArrowLeft || args.keyCode === Keys.ArrowDown || args.keyCode === Keys.ArrowUp);
-/**
- * @hidden
- * Enum with key codes.
- */
-var Keys;
-(function (Keys) {
-    Keys[Keys["ArrowDown"] = 40] = "ArrowDown";
-    Keys[Keys["ArrowLeft"] = 37] = "ArrowLeft";
-    Keys[Keys["ArrowRight"] = 39] = "ArrowRight";
-    Keys[Keys["ArrowUp"] = 38] = "ArrowUp";
-})(Keys || (Keys = {}));
+const isArrowWithShiftPressed = (args) => {
+    const code = normalizeNumpadKeys(args);
+    return args.shiftKey && (code === Keys.ArrowRight || code === Keys.ArrowLeft || code === Keys.ArrowDown || code === Keys.ArrowUp);
+};
 /**
  * @hidden
  */
@@ -3352,16 +3344,16 @@ const disabledDatesRangeValidator = (isDateDisabled) => {
 };
 
 const KEY_TO_ACTION = {
-    '33': Action.PrevView,
-    '34': Action.NextView,
-    '35': Action.LastInView,
-    '36': Action.FirstInView,
-    '37': Action.Left,
-    '38': Action.Up,
-    '39': Action.Right,
-    '40': Action.Down,
-    'meta+38': Action.UpperView,
-    'meta+40': Action.LowerView
+    'PageUp': Action.PrevView,
+    'PageDown': Action.NextView,
+    'End': Action.LastInView,
+    'Home': Action.FirstInView,
+    'ArrowLeft': Action.Left,
+    'ArrowUp': Action.Up,
+    'ArrowRight': Action.Right,
+    'ArrowDown': Action.Down,
+    'meta+ArrowUp': Action.UpperView,
+    'meta+ArrowDown': Action.LowerView
 };
 /**
  * @hidden
@@ -3372,7 +3364,9 @@ class NavigationService {
         this.bus = bus;
     }
     action(event) {
-        const action = `${event.ctrlKey || event.metaKey ? 'meta+' : ''}${event.keyCode}`;
+        // on some keyboards arrow keys, PageUp/Down, and Home/End are mapped to Numpad keys
+        const code = normalizeNumpadKeys(event);
+        const action = `${event.ctrlKey || event.metaKey ? 'meta+' : ''}${code}`;
         return KEY_TO_ACTION[action];
     }
     move(value, action, activeView) {
@@ -4269,16 +4263,17 @@ class MultiViewCalendarComponent {
      * @hidden
      */
     keydown(event) {
-        const arrowUpOrDownKeyPressed = [Keys$1.ArrowUp, Keys$1.ArrowDown].indexOf(event.keyCode) !== -1;
+        const code = normalizeNumpadKeys(event);
+        const arrowUpOrDownKeyPressed = [Keys.ArrowUp, Keys.ArrowDown].indexOf(code) !== -1;
         const ctrlKey = event.ctrlKey || event.metaKey;
-        const onArrowRightAndControl = event.keyCode === Keys$1.ArrowRight && ctrlKey;
-        const onArrowLeftAndControl = event.keyCode === Keys$1.ArrowLeft && ctrlKey;
-        const onTKeyPress = event.keyCode === Keys$1.KeyT;
-        const onEnterKeyPress = event.keyCode === Keys$1.Enter;
-        const onArrowUpPress = event.keyCode === Keys$1.ArrowUp;
+        const onArrowRightAndControl = code === Keys.ArrowRight && ctrlKey;
+        const onArrowLeftAndControl = code === Keys.ArrowLeft && ctrlKey;
+        const onTKeyPress = code === Keys.KeyT;
+        const onEnterKeyPress = code === Keys.Enter;
+        const onArrowUpPress = code === Keys.ArrowUp;
         const altKey = event.altKey;
-        const escKey = event.keyCode === Keys$1.Escape;
-        const tabKeyPress = event.keyCode === Keys$1.Tab;
+        const escKey = code === Keys.Escape;
+        const tabKeyPress = code === Keys.Tab;
         const shiftKeyPress = event.shiftKey;
         if (onArrowRightAndControl) {
             event.preventDefault();
@@ -7714,7 +7709,7 @@ class CalendarComponent {
      */
     handleMultiViewCalendarKeydown(args) {
         // Prevent form from submitting on enter if used in datepicker (classic view)
-        if (isPresent(this.pickerService) && args.keyCode === Keys$1.Enter) {
+        if (isPresent(this.pickerService) && (args.code === Keys.Enter || args.code === Keys.NumpadEnter)) {
             args.preventDefault();
         }
     }
@@ -7795,7 +7790,8 @@ class CalendarComponent {
         if (this.type === 'infinite') {
             // reserve the alt + arrow key commands for the picker
             const ctrlKey = args.ctrlKey || args.metaKey;
-            const arrowKeyPressed = [Keys$1.ArrowUp, Keys$1.ArrowRight, Keys$1.ArrowDown, Keys$1.ArrowLeft].indexOf(args.keyCode) !== -1;
+            const code = normalizeNumpadKeys(args);
+            const arrowKeyPressed = [Keys.ArrowUp, Keys.ArrowRight, Keys.ArrowDown, Keys.ArrowLeft].indexOf(code) !== -1;
             const reserveKeyCommandsForPicker = isPresent(this.pickerService) && arrowKeyPressed && args.altKey;
             if (reserveKeyCommandsForPicker) {
                 return;
@@ -7804,7 +7800,7 @@ class CalendarComponent {
                 args.preventDefault();
             }
             // Prevent form from submitting on enter if used in datepicker (infinite view)
-            const preventSubmitInDatePicker = isPresent(this.pickerService) && args.keyCode === Keys$1.Enter;
+            const preventSubmitInDatePicker = isPresent(this.pickerService) && code === Keys.Enter;
             if (preventSubmitInDatePicker) {
                 args.preventDefault();
             }
@@ -7814,7 +7810,7 @@ class CalendarComponent {
                 this.detectChanges();
                 args.preventDefault();
             }
-            if (args.keyCode === Keys$1.Enter) {
+            if (code === Keys.Enter) {
                 this.selectionService.lastClicked = this.focusedDate;
                 if (this.selection !== 'range') {
                     this.performSelection(this.focusedDate, args);
@@ -7823,7 +7819,7 @@ class CalendarComponent {
                     this.performRangeSelection(this.focusedDate);
                 }
             }
-            if (args.keyCode === Keys$1.KeyT) {
+            if (code === Keys.KeyT) {
                 this.focusToday();
             }
             if (isArrowWithShiftPressed(args) && this.selection !== 'range') {
@@ -8640,9 +8636,8 @@ class DateInputComponent {
      * Specifies the hint the DateInput displays when its value is `null`.
      * For more information, refer to the article on
      * [placeholders]({% slug placeholders_dateinput %}).
-     * @default null
      */
-    placeholder = null;
+    placeholder;
     /**
      * Configures the incremental steps of the DateInput.
      * For more information, refer to the article on
@@ -9078,7 +9073,7 @@ class DateInputComponent {
         this.control = formControl;
         this.subs.add(this.formControl?.statusChanges.subscribe(() => this.setAriaInvalid()));
         this.setAriaInvalid();
-        this.subs.add(this.dateInput?.nativeElement.addEventListener('keydown', this.handleKeyDown, true));
+        this.subs.add(this.renderer.listen(this.dateInput?.nativeElement, 'keydown', this.handleKeyDown));
     }
     ngOnDestroy() {
         this.subs.unsubscribe();
@@ -9352,7 +9347,7 @@ class DateInputComponent {
         [tabindex]="tabindex"
         [disabled]="disabled"
         [readonly]="readonly"
-        [placeholder]="placeholder"
+        [attr.placeholder]="placeholder"
         [attr.aria-expanded]="isPopupOpen"
         [attr.aria-haspopup]="hasPopup"
         [kendoEventsOutsideAngular]="{
@@ -9455,7 +9450,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
         [tabindex]="tabindex"
         [disabled]="disabled"
         [readonly]="readonly"
-        [placeholder]="placeholder"
+        [attr.placeholder]="placeholder"
         [attr.aria-expanded]="isPopupOpen"
         [attr.aria-haspopup]="hasPopup"
         [kendoEventsOutsideAngular]="{
@@ -10195,9 +10190,8 @@ class DatePickerComponent extends MultiTabStop {
     /**
      * Specifies the hint the DatePicker displays when its value is `null`.
      * ([more information and exaples]({% slug placeholders_datepicker %})).
-     * @default null
      */
-    placeholder = null;
+    placeholder;
     /**
      * Sets the `tabindex` of the DatePicker.
      * This property is used to set the order in which the DatePicker will receive focus when navigating through the page using the Tab key.
@@ -10720,22 +10714,23 @@ class DatePickerComponent extends MultiTabStop {
      * @hidden
      */
     handleKeydown(e) {
-        const { altKey, shiftKey, keyCode, target } = e;
-        if (keyCode === Keys$1.Escape) {
+        const { altKey, shiftKey, target } = e;
+        const code = normalizeNumpadKeys(e);
+        if (code === Keys.Escape) {
             this.dateInput.focus();
             this.show = false;
             hasObservers(this.escape) && this.escape.emit();
         }
         if (altKey) {
-            if (keyCode === Keys$1.ArrowDown && !this.show) {
+            if (code === Keys.ArrowDown && !this.show) {
                 this.show = true;
             }
-            if (keyCode === Keys$1.ArrowUp) {
+            if (code === Keys.ArrowUp) {
                 this.dateInput.focus();
                 this.show = false;
             }
         }
-        if (keyCode === Keys$1.Tab && this.show && this.calendar.isActive && isTabExitingCalendar(this.calendarType, target, shiftKey)) {
+        if (code === Keys.Tab && this.show && this.calendar.isActive && isTabExitingCalendar(this.calendarType, target, shiftKey)) {
             this.dateInput.focus();
             this.show = false;
         }
@@ -11554,13 +11549,18 @@ const listTitle = () => span('hour', 'k-title k-timeselector-title');
 const listItem = () => li('<span>02</span>', 'k-item');
 const list = () => ul([listItem()], 'k-reset');
 const scrollable = () => (div([list()], 'k-time-container k-flex k-content k-scrollable'));
-const actionSheetContent = (isDateTimePicker) => ([
+const actionSheetContent = (isDateTimePicker) => [
     isDateTimePicker ? div([div('button', 'k-button k-button-lg')], 'k-datetime-buttongroup') : null,
     div([
-        div([span('title', 'k-title')], 'k-time-header'),
-        div([listTitle(), div([scrollable()], 'k-time-list')], 'k-time-list-wrapper')
-    ], 'k-timeselector k-timeselector-lg')
-]);
+        div([span('04:08:48:49 AM', 'k-title k-timeselector-title'),
+            div('now', 'k-button k-button-md')
+        ], 'k-time-header'),
+        div([
+            span('', 'k-time-highlight'),
+            div([listTitle(), div([scrollable()], 'k-time-list')], 'k-time-list-wrapper'),
+        ], 'k-time-list-container'),
+    ], 'k-timeselector k-timeselector-lg'),
+];
 const timeListWrapper = (isAdaptiveEnabled = false, windowSize, isDateTimePicker) => {
     if (!isDocumentAvailable()) {
         return null;
@@ -11568,13 +11568,24 @@ const timeListWrapper = (isAdaptiveEnabled = false, windowSize, isDateTimePicker
     if (!isAdaptiveEnabled) {
         return div([listTitle(), div([scrollable()], 'k-time-list')], 'k-time-list-wrapper', { left: '-10000px', position: 'absolute' });
     }
-    return div([div([div([div([div([], 'k-i-x k-button-icon k-icon')], 'k-icon-wrapper-host')], 'k-button k-icon-button k-button-lg')], 'k-actionsheet-titlebar'),
+    return div([
         div([
-            isDateTimePicker ? div([...actionSheetContent(isDateTimePicker)], 'k-datetime-wrap k-time-tab') : actionSheetContent(isDateTimePicker)[1]
-        ], 'k-actionsheet-content'),
-        div([
-            div('button', 'k-button k-button-lg')
-        ], 'k-adaptive-actionsheet k-actionsheet-footer')], `k-actionsheet k-adaptive-actionsheet ${windowSize === 'small' ? 'k-actionsheet-fullscreen' : ''}`, { height: windowSize === 'small' ? '100%' : '60vh', left: '-10000px', position: 'absolute', top: 0 });
+            div([div([
+                    div([], 'k-actionsheet-title'),
+                    div([
+                        div([
+                            div([div('', 'k-i-check k-button-icon k-icon k-font-icon')], 'k-icon-wrapper-host'),
+                        ], 'k-button k-icon-button k-button-lg'),
+                    ], 'k-actionsheet-actions'),
+                ], 'k-actionsheet-titlebar-group')], 'k-actionsheet-titlebar'),
+            div([
+                isDateTimePicker
+                    ? div([...actionSheetContent(isDateTimePicker)], 'k-datetime-wrap k-time-tab')
+                    : actionSheetContent(isDateTimePicker)[1],
+            ], 'k-actionsheet-content'),
+            div([div('button', 'k-button k-button-lg')], 'k-actions k-actions-stretched k-actions-horizontal k-actionsheet-footer'),
+        ], 'k-actionsheet-view'),
+    ], `k-actionsheet k-adaptive-actionsheet ${windowSize === 'small' ? 'k-actionsheet-fullscreen' : ''}`, { height: windowSize === 'small' ? '100%' : '60vh', left: '-10000px', position: 'absolute', top: 0 });
 };
 /**
  * @hidden
@@ -11597,6 +11608,9 @@ class TimePickerDOMService {
         }
         this.calculateHeights();
     }
+    sumCSSProperties(style, ...properties) {
+        return properties.reduce((sum, property) => sum + parseFloat(style.getPropertyValue(property)), 0) || 0;
+    }
     calculateHeights(container) {
         if (!isDocumentAvailable()) {
             return;
@@ -11612,8 +11626,15 @@ class TimePickerDOMService {
             hostContainer = document.body;
             wrapper = hostContainer.appendChild(timeListWrapper(true, this.windowSize, this.isDateTimePicker));
         }
-        this.timeListHeight = wrapper.querySelector('.k-scrollable').offsetHeight;
-        this.itemHeight = wrapper.querySelector('li').offsetHeight;
+        const itemStyle = getComputedStyle(wrapper.querySelector('li'));
+        const listStyle = getComputedStyle(wrapper.querySelector('.k-scrollable'));
+        if (this.isAdaptiveEnabled && this.windowSize !== 'large') {
+            this.itemHeight = parseFloat(itemStyle.getPropertyValue('height'));
+        }
+        else {
+            this.itemHeight = this.sumCSSProperties(itemStyle, 'height', 'padding-top', 'padding-bottom');
+        }
+        this.timeListHeight = parseFloat(listStyle.getPropertyValue('height'));
         hostContainer.removeChild(wrapper);
     }
     isActive(element) {
@@ -12237,10 +12258,10 @@ const SNAP_THRESHOLD = 0.05; //% of the item height
 const SCROLL_THRESHOLD = 2; //< 2px threshold
 const nil = () => (null);
 const getters = {
-    35: (data, _) => data[data.length - 1],
-    36: (data, _) => data[0],
-    38: (data, index) => data[index - 1],
-    40: (data, index) => data[index + 1]
+    [Keys.End]: (data, _) => data[data.length - 1],
+    [Keys.Home]: (data, _) => data[0],
+    [Keys.ArrowUp]: (data, index) => data[index - 1],
+    [Keys.ArrowDown]: (data, index) => data[index + 1]
 };
 const services = {
     [TIME_PART.dayperiod]: DayPeriodService,
@@ -12463,15 +12484,16 @@ class TimeListComponent {
         return oldData && newData && oldData.text !== newData.text;
     }
     handleKeyDown(e) {
-        if (e.keyCode === Keys$1.Tab && !e.shiftKey && this.isLast) {
+        const code = normalizeNumpadKeys(e);
+        if (code === Keys.Tab && !e.shiftKey && this.isLast) {
             e.preventDefault();
             this.tabOutLastPart.emit();
         }
-        if (e.keyCode === Keys$1.Tab && e.shiftKey && this.isFirst) {
+        if (code === Keys.Tab && e.shiftKey && this.isFirst) {
             e.preventDefault();
             this.tabOutFirstPart.emit();
         }
-        const getter = getters[e.keyCode] || nil;
+        const getter = getters[code] || nil;
         const dataItem = getter(this.data, this.service.selectedIndex(this.value));
         if (dataItem) {
             this.handleChange(dataItem);
@@ -13066,8 +13088,8 @@ class TimeSelectorComponent {
      * @hidden
      */
     handleTabOut(event) {
-        const { keyCode, shiftKey } = event;
-        if (event.target === this.now?.nativeElement && keyCode === Keys$1.Tab && shiftKey) {
+        const { code, shiftKey } = event;
+        if (event.target === this.now?.nativeElement && code === Keys.Tab && shiftKey) {
             event.preventDefault();
             if (this.isDateTimePicker) {
                 this.tabOutNow.emit();
@@ -13077,7 +13099,7 @@ class TimeSelectorComponent {
             }
             return;
         }
-        if (keyCode === Keys$1.Tab && !shiftKey && event.target !== this.now?.nativeElement) {
+        if (code === Keys.Tab && !shiftKey && event.target !== this.now?.nativeElement) {
             event.preventDefault();
             if (document.activeElement === this.accept.nativeElement) {
                 if (this.cancel) {
@@ -13143,17 +13165,18 @@ class TimeSelectorComponent {
         }
     }
     handleKeydown(args) {
-        const { keyCode, altKey } = args;
+        const { altKey } = args;
+        const code = normalizeNumpadKeys(args);
         // reserve the alt + arrow key commands for the picker
-        const arrowKeyPressed = [Keys$1.ArrowLeft, Keys$1.ArrowRight].indexOf(keyCode) !== -1;
+        const arrowKeyPressed = [Keys.ArrowLeft, Keys.ArrowRight].indexOf(code) !== -1;
         if (isPresent(this.pickerService) && arrowKeyPressed && altKey) {
             return;
         }
-        if (keyCode === Keys$1.Enter && !this.hasActiveButton()) {
+        if (code === Keys.Enter && !this.hasActiveButton()) {
             this.handleAccept();
         }
-        else if (keyCode === Keys$1.ArrowLeft || keyCode === Keys$1.ArrowRight) {
-            this.focusList(keyCode === Keys$1.ArrowLeft ? Direction.Left : Direction.Right);
+        else if (code === Keys.ArrowLeft || code === Keys.ArrowRight) {
+            this.focusList(code === Keys.ArrowLeft ? Direction.Left : Direction.Right);
         }
     }
     emitBlur(args) {
@@ -13660,7 +13683,7 @@ class TimePickerComponent extends MultiTabStop {
      * [placeholders]({% slug placeholders_timepicker %}).
      * @default null
      */
-    placeholder = null;
+    placeholder;
     /**
      * Specifies the smallest valid time value
      * ([see example]({% slug timeranges_timepicker %})).
@@ -14075,8 +14098,9 @@ class TimePickerComponent extends MultiTabStop {
      * @hidden
      */
     handleKeydown(event) {
-        const { altKey, keyCode } = event;
-        if (keyCode === Keys$1.Escape) {
+        const { altKey } = event;
+        const code = normalizeNumpadKeys(event);
+        if (code === Keys.Escape) {
             this.focusInput();
             this.show = false;
             hasObservers(this.escape) && this.escape.emit();
@@ -14084,13 +14108,13 @@ class TimePickerComponent extends MultiTabStop {
             return;
         }
         if (altKey) {
-            if (keyCode === Keys$1.ArrowUp) {
+            if (code === Keys.ArrowUp) {
                 event.preventDefault();
                 this.focusInput();
                 this.show = false;
                 this.cdr.detectChanges();
             }
-            if (keyCode === Keys$1.ArrowDown && !this.show) {
+            if (code === Keys.ArrowDown && !this.show) {
                 event.preventDefault();
                 this.show = true;
             }
@@ -16339,22 +16363,23 @@ class DateTimePickerComponent extends MultiTabStop {
         if (this.disabled || this.readonly) {
             return;
         }
-        const { keyCode, altKey } = event;
-        switch (keyCode) {
-            case altKey && Keys$1.ArrowUp:
-            case Keys$1.Escape:
+        const { altKey } = event;
+        const code = normalizeNumpadKeys(event);
+        switch (code) {
+            case altKey && Keys.ArrowUp:
+            case Keys.Escape:
                 this.handleCancel();
                 break;
-            case !this.isOpen && altKey && Keys$1.ArrowDown:
+            case !this.isOpen && altKey && Keys.ArrowDown:
                 this.ngZone.run(() => this.toggleDateTime(true));
                 break;
-            case altKey && Keys$1.ArrowRight:
+            case altKey && Keys.ArrowRight:
                 this.changeActiveTab('time');
                 break;
-            case altKey && Keys$1.ArrowLeft:
+            case altKey && Keys.ArrowLeft:
                 this.changeActiveTab('date');
                 break;
-            case this.isOpen && this.timeSelector.isActive && isPresent(this.calendarValue) && Keys$1.Enter:
+            case this.isOpen && this.timeSelector.isActive && isPresent(this.calendarValue) && Keys.Enter:
                 this.handleAccept();
                 break;
             default: return;
@@ -16595,8 +16620,8 @@ class DateTimePickerComponent extends MultiTabStop {
         this.popupRef.popupAnchorViewportLeave.subscribe(() => this.handleCancel());
         if (this.calendar.type === 'infinite') {
             this.subscriptions.add(fromEvent(this.calendar.monthView.list.nativeElement, 'keydown').subscribe((event) => {
-                const { keyCode, shiftKey } = event;
-                if (keyCode === Keys$1.Tab && !shiftKey) {
+                const { code, shiftKey } = event;
+                if (code === Keys.Tab && !shiftKey) {
                     event.preventDefault();
                     if (!this.calendarValue && !this.cancelButton) {
                         this.dateTabButton.focus();
@@ -18774,8 +18799,9 @@ class DateRangePopupComponent {
         this.dateRangeService.setRange(this.dateRangeService.selectionRange);
     }
     handleKeydown(event) {
-        const { altKey, keyCode } = event;
-        if (keyCode === Keys$1.Escape || (altKey && keyCode === Keys$1.ArrowUp)) {
+        const { altKey } = event;
+        const code = normalizeNumpadKeys(event);
+        if (code === Keys.Escape || (altKey && code === Keys.ArrowUp)) {
             this.zone.run(() => this.cancelPopup());
         }
     }
@@ -19304,11 +19330,12 @@ class DateRangeComponent {
     * @hidden
     */
     keydown(event) {
-        const shouldOpenPopup = event.keyCode === Keys$1.ArrowDown && event.altKey;
+        const code = normalizeNumpadKeys(event);
+        const shouldOpenPopup = code === Keys.ArrowDown && event.altKey;
         if (shouldOpenPopup) {
             this.dateRangeService.activatePopup();
         }
-        const shouldClosePopup = (event.keyCode === Keys$1.ArrowUp && event.altKey) || event.keyCode === Keys$1.Escape;
+        const shouldClosePopup = (code === Keys.ArrowUp && event.altKey) || code === Keys.Escape;
         if (shouldClosePopup) {
             this.dateRangeService.deactivatePopup();
         }
@@ -19414,7 +19441,7 @@ class DateRangeInput {
             this.dateRangeService.range$.subscribe(range => this.updateInputValue(range)),
             fromEvent(this.element.nativeElement, 'click').subscribe(() => this.activate()),
             fromEvent(this.element.nativeElement, 'keydown').subscribe((event) => this.togglePopup(event || {}))
-        ].map(s => this.subscriptions.add(s));
+        ].forEach(s => this.subscriptions.add(s));
     }
     destroy() {
         this.subscriptions.unsubscribe();
@@ -19462,11 +19489,13 @@ class DateRangeInput {
             this.dateRangeService.setRange(range);
         }
     }
-    togglePopup({ altKey, keyCode }) {
-        if (keyCode === Keys$1.Escape) {
+    togglePopup(e) {
+        const code = normalizeNumpadKeys(e);
+        const altKey = e.altKey;
+        if (code === Keys.Escape) {
             this.dateRangeService.cancelPopup();
         }
-        else if (altKey && keyCode === Keys$1.ArrowDown) {
+        else if (altKey && code === Keys.ArrowDown) {
             this.dateRangeService.activatePopup();
         }
     }

package/index.d.ts

@@ -69,6 +69,8 @@ export { DateInputFormatPlaceholder, DateInputCustomFormatPlaceholder } from './
 export { AutoCorrectOn } from './daterange/auto-correct-on.type';
 export { SelectionRangeEnd } from './calendar/models/selection-range-end.type';
 export { SelectionRange } from './calendar/models/selection-range.interface';
+export { CalendarSelection } from './calendar/models/selection';
+export { CalendarOrientation } from './calendar/models/orientation';
 export { FormatSettings } from './dateinput/models/format-settings.model';
 export { PopupSettings } from './popup-settings.model';
 export { PreventableEvent } from './preventable-event';