npm - @progress/kendo-angular-dateinputs - Versions diffs - 16.3.0-develop.9 → 16.3.0 - Mend

@progress/kendo-angular-dateinputs 16.3.0-develop.9 → 16.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (12) hide show

package/calendar/horizontal-view-list.component.d.ts CHANGED Viewed

@@ -2,7 +2,7 @@
 * Copyright © 2024 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-import { ChangeDetectorRef, EventEmitter, OnChanges, TemplateRef, OnDestroy, ElementRef, Renderer2, AfterViewInit } from '@angular/core';
+import { ChangeDetectorRef, EventEmitter, OnChanges, TemplateRef, OnDestroy, ElementRef, Renderer2 } from '@angular/core';
 import { BusViewService } from './services/bus-view.service';
 import { ViewService } from './models/view-service.interface';
 import { WeekNamesService } from './services/weeknames.service';
@@ -17,7 +17,7 @@ import * as i0 from "@angular/core";
 /**
  * @hidden
  */
-export declare class HorizontalViewListComponent implements OnChanges, AfterViewInit, OnDestroy {
+export declare class HorizontalViewListComponent implements OnChanges, OnDestroy {
     private bus;
     intl: IntlService;
     private weekService;
@@ -86,19 +86,16 @@ export declare class HorizontalViewListComponent implements OnChanges, AfterView
     private animation;
     constructor(bus: BusViewService, intl: IntlService, weekService: WeekNamesService, cdr: ChangeDetectorRef, element: ElementRef<HTMLElement>, renderer: Renderer2);
     ngOnChanges(changes: any): void;
-    ngAfterViewInit(): void;
     ngOnDestroy(): void;
     initService(): void;
     isMonthView(): boolean;
     getCaptionTitle(date: Date): string;
-    getCaptionClass(): string;
     handleClassicCalendarFocus(): void;
     handleClassicCalendarBlur(event: any): void;
     animateView(action: Action): void;
     navigate(action: Action): Date;
     canNavigate(action: Action): boolean;
     private getWeekNames;
-    private setTableMinWidth;
     private intlChange;
     private clampDate;
     private move;

package/esm2020/calendar/header.component.mjs CHANGED Viewed

@@ -158,7 +158,7 @@ HeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", versio
             ></ng-template>
         </button>
         <span class="k-spacer"></span>
-        <span class="k-calendar-nav k-hstack">
+        <span class="k-calendar-nav">
             <button
                 *ngIf="showNavigationButtons"
                 kendoButton
@@ -179,7 +179,6 @@ HeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", versio
                 kendoButton
                 class="k-calendar-nav-today"
                 tabindex="-1"
-                themeColor="primary"
                 fillMode="flat"
                 role="link"
                 [size]="size"
@@ -196,6 +195,7 @@ HeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", versio
                 *ngIf="showNavigationButtons"
                 kendoButton
                 fillMode="flat"
+                [size]="size"
                 [svgIcon]="chevronRightIcon"
                 icon="chevron-right"
                 class="k-calendar-nav-next"
@@ -244,7 +244,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
             ></ng-template>
         </button>
         <span class="k-spacer"></span>
-        <span class="k-calendar-nav k-hstack">
+        <span class="k-calendar-nav">
             <button
                 *ngIf="showNavigationButtons"
                 kendoButton
@@ -265,7 +265,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                 kendoButton
                 class="k-calendar-nav-today"
                 tabindex="-1"
-                themeColor="primary"
                 fillMode="flat"
                 role="link"
                 [size]="size"
@@ -282,6 +281,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                 *ngIf="showNavigationButtons"
                 kendoButton
                 fillMode="flat"
+                [size]="size"
                 [svgIcon]="chevronRightIcon"
                 icon="chevron-right"
                 class="k-calendar-nav-next"

package/esm2020/calendar/horizontal-view-list.component.mjs CHANGED Viewed

@@ -135,13 +135,6 @@ export class HorizontalViewListComponent {
             this.renderer.setAttribute(this.element.nativeElement, 'tabindex', this.tabIndex.toString());
         }
     }
-    ngAfterViewInit() {
-        // make the calendar look the same in the different browsers
-        // which also smoothens the navigation animation
-        if (this.views === 1) {
-            this.setTableMinWidth();
-        }
-    }
     ngOnDestroy() {
         this.intlSubscription.unsubscribe();
     }
@@ -154,9 +147,6 @@ export class HorizontalViewListComponent {
     getCaptionTitle(date) {
         return this.service.title(date);
     }
-    getCaptionClass() {
-        return this.isMonthView() ? 'k-month-header' : 'k-meta-header';
-    }
     handleClassicCalendarFocus() {
         this.focusCalendar.emit();
     }
@@ -185,9 +175,6 @@ export class HorizontalViewListComponent {
         this.cdr.detectChanges();
         container.querySelectorAll('table').forEach(table => {
             this.renderer.setStyle(table, 'width', `${tableWidth}px`);
-            if (this.views === 1) {
-                this.renderer.setStyle(table, 'min-width', `${initialContainerWidth}px`);
-            }
         });
         // we always slide by the width of 1 table
         // cross-browser compatibility is ensured by measuring the client rectangle and substracting the gap
@@ -247,14 +234,6 @@ export class HorizontalViewListComponent {
     getWeekNames(type) {
         return this.weekService.getWeekNames(this.weekNumber, type);
     }
-    setTableMinWidth() {
-        const container = this.element.nativeElement;
-        const table = container.querySelector('table');
-        if (table) {
-            const containerWidth = parseFloat(getComputedStyle(container).width);
-            this.renderer.setStyle(table, 'min-width', `${containerWidth}px`);
-        }
-    }
     intlChange() {
         this.weekNames = this.getWeekNames(this.weekDaysFormat);
         this.wideWeekNames = this.getWeekNames('wide');
@@ -296,7 +275,7 @@ HorizontalViewListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.
                 (focus)="handleClassicCalendarFocus()"
                 (blur)="handleClassicCalendarBlur($event)"
             >
-                <caption *ngIf="showViewHeader" [ngClass]="getCaptionClass()">{{ getCaptionTitle(date) }}</caption>
+                <caption *ngIf="showViewHeader" class="k-calendar-caption">{{ getCaptionTitle(date) }}</caption>
                 <thead *ngIf="isMonthView()" class="k-calendar-thead" role="rowgroup">
                     <tr class="k-calendar-tr" role="row">
                         <th *ngFor="let name of weekNames; let i = index;"
@@ -385,7 +364,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                 (focus)="handleClassicCalendarFocus()"
                 (blur)="handleClassicCalendarBlur($event)"
             >
-                <caption *ngIf="showViewHeader" [ngClass]="getCaptionClass()">{{ getCaptionTitle(date) }}</caption>
+                <caption *ngIf="showViewHeader" class="k-calendar-caption">{{ getCaptionTitle(date) }}</caption>
                 <thead *ngIf="isMonthView()" class="k-calendar-thead" role="rowgroup">
                     <tr class="k-calendar-tr" role="row">
                         <th *ngFor="let name of weekNames; let i = index;"

package/esm2020/calendar/services/dom.service.mjs CHANGED Viewed

@@ -20,8 +20,8 @@ const table = containerFactory('table');
 const monthHeader = () => (div(`
             <span class="k-button k-button-md k-rounded-md k-button-flat k-button-flat-base k-calendar-title">March 2017</span>
             <span class="k-spacer"></span>
-            <span class="k-calendar-nav k-hstack">
-                <button class="k-calendar-nav-today k-button k-button-md k-button-flat k-button-flat-primary k-rounded-md">TODAY</button>
+            <span class="k-calendar-nav">
+                <button class="k-calendar-nav-today k-button k-button-md k-button-flat k-button-flat-base k-rounded-md">TODAY</button>
             </span>
         `, 'k-calendar-header'));
 const monthWeekHeader = () => (table([

package/esm2020/dateinput/dateinput.component.mjs CHANGED Viewed

@@ -12,7 +12,7 @@ import { IntlService, localeData } from '@progress/kendo-angular-intl';
 import { validatePackage } from '@progress/kendo-licensing';
 import { packageMetadata } from '../package-metadata';
 import { cloneDate, isEqual } from '@progress/kendo-date-math';
-import { hasObservers, isControlRequired, KendoInput, setHTMLAttributes, removeHTMLAttributes, isObjectPresent, parseAttributes } from '@progress/kendo-angular-common';
+import { hasObservers, isControlRequired, KendoInput, setHTMLAttributes, removeHTMLAttributes, isObjectPresent, parseAttributes, anyChanged } from '@progress/kendo-angular-common';
 import { Arrow } from './arrow.enum';
 import { noop, isValidRange, getSizeClass, getRoundedClass, getFillModeClass, DEFAULT_FILL_MODE, DEFAULT_ROUNDED, DEFAULT_SIZE } from '../util';
 import { PickerService } from '../common/picker.service';
@@ -592,7 +592,7 @@ export class DateInputComponent {
      */
     ngOnChanges(changes) {
         this.verifyRange();
-        if (changes['min'] || changes['max'] || changes['rangeValidation'] || changes['incompleteDateValidation']) {
+        if (anyChanged(['min', 'max', 'rangeValidation', 'incompleteDateValidation'], changes, false)) {
             this.minValidator = this.rangeValidation ? minValidator(this.min) : noop;
             this.maxValidator = this.rangeValidation ? maxValidator(this.max) : noop;
             this.incompleteValidator = this.incompleteDateValidation ? incompleteDateValidator() : noop;
@@ -615,6 +615,12 @@ export class DateInputComponent {
             this.kendoDate?.setOptions(this.options, true);
             this.updateFormatSections();
         }
+        if (anyChanged(['enableMouseWheel', 'autoFill', 'autoSwitchParts', 'autoSwitchKeys', 'twoDigitYearMax', 'allowCaretMode'], changes)) {
+            if (!this.kendoDate) {
+                return;
+            }
+            this.kendoDate?.setOptions(this.options, true);
+        }
     }
     updateFormatSections() {
         this.formatSections = this.intl.splitDateFormat(this.kendoDate.inputFormat)

package/esm2020/datepicker/datepicker.component.mjs CHANGED Viewed

@@ -639,6 +639,9 @@ export class DatePickerComponent extends MultiTabStop {
      * @hidden
      */
     ngOnDestroy() {
+        if (this.isAdaptive && this.isOpen) {
+            this.toggleActionSheet(false);
+        }
         this.isActive = false;
         this.show = false;
         if (this.localizationChangeSubscription) {
@@ -937,8 +940,10 @@ export class DatePickerComponent extends MultiTabStop {
         else if (!show && this.isOpen) {
             this.actionSheet.toggle();
             this.ariaActiveDescendantSubscription.unsubscribe();
-            this.renderer.removeAttribute(this.dateInput?.inputElement, attributeNames.ariaActiveDescendant);
-            this.renderer.removeAttribute(this.dateInput?.inputElement, attributeNames.ariaControls);
+            if (this.dateInput) {
+                this.renderer.removeAttribute(this.dateInput.inputElement, attributeNames.ariaActiveDescendant);
+                this.renderer.removeAttribute(this.dateInput.inputElement, attributeNames.ariaControls);
+            }
         }
         this._show = show;
     }

package/esm2020/daterange/date-range-popup.component.mjs CHANGED Viewed

@@ -572,7 +572,7 @@ DateRangePopupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0"
                 <div class="k-actionsheet-content !k-overflow-hidden">
                     <div class="k-scrollable-wrap">
                         <kendo-multiviewcalendar
-                            class="k-calendar-lg"
+                            size="large"
                             orientation="vertical"
                             [allowReverse]="allowReverse"
                             [focusedDate]="dateRangeService.focusedDate"
@@ -685,7 +685,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                 <div class="k-actionsheet-content !k-overflow-hidden">
                     <div class="k-scrollable-wrap">
                         <kendo-multiviewcalendar
-                            class="k-calendar-lg"
+                            size="large"
                             orientation="vertical"
                             [allowReverse]="allowReverse"
                             [focusedDate]="dateRangeService.focusedDate"

package/esm2020/datetimepicker/datetimepicker.component.mjs CHANGED Viewed

@@ -63,8 +63,8 @@ const DEFAULT_TIMESELECTOR_FORMAT = 't';
 const TWO_DIGIT_YEAR_MAX = 68;
 const ACCEPT_BUTTON_SELECTOR = '.k-button.k-time-accept';
 const CANCEL_BUTTON_SELECOTR = '.k-button.k-time-cancel';
-const DATE_TAB_BUTTON_SELECTOR = '.k-button.k-date-tab';
-const TIME_TAB_BUTTON_SELECTOR = '.k-button.k-time-tab';
+const DATE_TAB_BUTTON_SELECTOR = '.k-button.k-group-start';
+const TIME_TAB_BUTTON_SELECTOR = '.k-button.k-group-end';
 /**
  * Represents the [Kendo UI DateTimePicker component for Angular]({% slug overview_datetimepicker %}).
  */
@@ -723,7 +723,7 @@ export class DateTimePickerComponent extends MultiTabStop {
         }
     }
     ngOnDestroy() {
-        if (this.isOpen) {
+        if (this.isOpen && !this.isAdaptive) {
             this.closePopup();
         }
         this.subscriptions.unsubscribe();
@@ -1564,6 +1564,10 @@ DateTimePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0"
         <ng-template #dateTimeTemplate>
             <div
                 class="k-datetime-wrap k-{{activeTab}}-tab"
+                [ngClass]="{
+                    'k-datetime-wrap-md': !isAdaptive,
+                    'k-datetime-wrap-lg': isAdaptive
+                }"
                 [kendoEventsOutsideAngular]="{
                     mousedown: preventMouseDown,
                     keydown: handleKeyDown
@@ -1577,10 +1581,10 @@ DateTimePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0"
                     }"
                     [scope]="this"
                 >
-                    <div class="k-button-group k-button-group-stretched" role="group">
+                    <div class="k-button-group k-button-group-solid k-button-group-stretched" role="group">
                         <button
                             type="button"
-                            class="k-button k-group-start k-date-tab"
+                            class="k-button k-group-start"
                             [ngClass]="popupButtonsClasses()"
                             [class.k-active]="activeTab === 'date'"
                             [attr.aria-pressed]="activeTab === 'date' ? 'true' : 'false'"
@@ -1596,7 +1600,7 @@ DateTimePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0"
                         </button>
                         <button
                             type="button"
-                            class="k-button k-group-end k-time-tab"
+                            class="k-button k-group-end"
                             [ngClass]="popupButtonsClasses()"
                             [class.k-active]="activeTab === 'time'"
                             [attr.aria-pressed]="activeTab === 'time' ? 'true' : 'false'"
@@ -1712,6 +1716,7 @@ DateTimePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0"
                     >
                         {{localization.get('accept')}}
                     </button>
                     <button
                         *ngIf="cancelButton"
                         type="button"
@@ -1962,6 +1967,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
         <ng-template #dateTimeTemplate>
             <div
                 class="k-datetime-wrap k-{{activeTab}}-tab"
+                [ngClass]="{
+                    'k-datetime-wrap-md': !isAdaptive,
+                    'k-datetime-wrap-lg': isAdaptive
+                }"
                 [kendoEventsOutsideAngular]="{
                     mousedown: preventMouseDown,
                     keydown: handleKeyDown
@@ -1975,10 +1984,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                     }"
                     [scope]="this"
                 >
-                    <div class="k-button-group k-button-group-stretched" role="group">
+                    <div class="k-button-group k-button-group-solid k-button-group-stretched" role="group">
                         <button
                             type="button"
-                            class="k-button k-group-start k-date-tab"
+                            class="k-button k-group-start"
                             [ngClass]="popupButtonsClasses()"
                             [class.k-active]="activeTab === 'date'"
                             [attr.aria-pressed]="activeTab === 'date' ? 'true' : 'false'"
@@ -1994,7 +2003,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                         </button>
                         <button
                             type="button"
-                            class="k-button k-group-end k-time-tab"
+                            class="k-button k-group-end"
                             [ngClass]="popupButtonsClasses()"
                             [class.k-active]="activeTab === 'time'"
                             [attr.aria-pressed]="activeTab === 'time' ? 'true' : 'false'"
@@ -2110,6 +2119,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                     >
                         {{localization.get('accept')}}
                     </button>
                     <button
                         *ngIf="cancelButton"
                         type="button"

package/esm2020/package-metadata.mjs CHANGED Viewed

@@ -9,7 +9,7 @@ export const packageMetadata = {
     name: '@progress/kendo-angular-dateinputs',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1718629463,
-    version: '16.3.0-develop.9',
+    publishDate: 1718884867,
+    version: '16.3.0',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };

package/fesm2015/progress-kendo-angular-dateinputs.mjs CHANGED Viewed

@@ -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, firstYearOfDecade, createDate, lastYearOfDecade, lastMonthOfYear, lastDayOfMonth, durationInCenturies, addYears, durationInDecades, addWeeks, addMonths, firstDayOfMonth, dayOfWeek, durationInMonths, firstMonthOfYear, durationInYears, weekInYear } from '@progress/kendo-date-math';
 import * as i1$2 from '@progress/kendo-angular-common';
-import { isDocumentAvailable, guid, Keys as Keys$1, hasObservers, isObject, KendoInput, isObjectPresent, removeHTMLAttributes, parseAttributes, isControlRequired, setHTMLAttributes, MultiTabStop, EventsModule, ResizeSensorModule, ToggleButtonTabStopModule } from '@progress/kendo-angular-common';
+import { isDocumentAvailable, guid, Keys as Keys$1, hasObservers, isObject, KendoInput, isObjectPresent, removeHTMLAttributes, parseAttributes, anyChanged, isControlRequired, setHTMLAttributes, MultiTabStop, EventsModule, ResizeSensorModule, ToggleButtonTabStopModule } 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';
@@ -37,8 +37,8 @@ const packageMetadata = {
     name: '@progress/kendo-angular-dateinputs',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1718629463,
-    version: '16.3.0-develop.9',
+    publishDate: 1718884867,
+    version: '16.3.0',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };
@@ -2146,13 +2146,6 @@ class HorizontalViewListComponent {
             this.renderer.setAttribute(this.element.nativeElement, 'tabindex', this.tabIndex.toString());
         }
     }
-    ngAfterViewInit() {
-        // make the calendar look the same in the different browsers
-        // which also smoothens the navigation animation
-        if (this.views === 1) {
-            this.setTableMinWidth();
-        }
-    }
     ngOnDestroy() {
         this.intlSubscription.unsubscribe();
     }
@@ -2165,9 +2158,6 @@ class HorizontalViewListComponent {
     getCaptionTitle(date) {
         return this.service.title(date);
     }
-    getCaptionClass() {
-        return this.isMonthView() ? 'k-month-header' : 'k-meta-header';
-    }
     handleClassicCalendarFocus() {
         this.focusCalendar.emit();
     }
@@ -2196,9 +2186,6 @@ class HorizontalViewListComponent {
         this.cdr.detectChanges();
         container.querySelectorAll('table').forEach(table => {
             this.renderer.setStyle(table, 'width', `${tableWidth}px`);
-            if (this.views === 1) {
-                this.renderer.setStyle(table, 'min-width', `${initialContainerWidth}px`);
-            }
         });
         // we always slide by the width of 1 table
         // cross-browser compatibility is ensured by measuring the client rectangle and substracting the gap
@@ -2258,14 +2245,6 @@ class HorizontalViewListComponent {
     getWeekNames(type) {
         return this.weekService.getWeekNames(this.weekNumber, type);
     }
-    setTableMinWidth() {
-        const container = this.element.nativeElement;
-        const table = container.querySelector('table');
-        if (table) {
-            const containerWidth = parseFloat(getComputedStyle(container).width);
-            this.renderer.setStyle(table, 'min-width', `${containerWidth}px`);
-        }
-    }
     intlChange() {
         this.weekNames = this.getWeekNames(this.weekDaysFormat);
         this.wideWeekNames = this.getWeekNames('wide');
@@ -2307,7 +2286,7 @@ HorizontalViewListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.
                 (focus)="handleClassicCalendarFocus()"
                 (blur)="handleClassicCalendarBlur($event)"
             >
-                <caption *ngIf="showViewHeader" [ngClass]="getCaptionClass()">{{ getCaptionTitle(date) }}</caption>
+                <caption *ngIf="showViewHeader" class="k-calendar-caption">{{ getCaptionTitle(date) }}</caption>
                 <thead *ngIf="isMonthView()" class="k-calendar-thead" role="rowgroup">
                     <tr class="k-calendar-tr" role="row">
                         <th *ngFor="let name of weekNames; let i = index;"
@@ -2396,7 +2375,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                 (focus)="handleClassicCalendarFocus()"
                 (blur)="handleClassicCalendarBlur($event)"
             >
-                <caption *ngIf="showViewHeader" [ngClass]="getCaptionClass()">{{ getCaptionTitle(date) }}</caption>
+                <caption *ngIf="showViewHeader" class="k-calendar-caption">{{ getCaptionTitle(date) }}</caption>
                 <thead *ngIf="isMonthView()" class="k-calendar-thead" role="rowgroup">
                     <tr class="k-calendar-tr" role="row">
                         <th *ngFor="let name of weekNames; let i = index;"
@@ -2709,7 +2688,7 @@ HeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", versio
             ></ng-template>
         </button>
         <span class="k-spacer"></span>
-        <span class="k-calendar-nav k-hstack">
+        <span class="k-calendar-nav">
             <button
                 *ngIf="showNavigationButtons"
                 kendoButton
@@ -2730,7 +2709,6 @@ HeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", versio
                 kendoButton
                 class="k-calendar-nav-today"
                 tabindex="-1"
-                themeColor="primary"
                 fillMode="flat"
                 role="link"
                 [size]="size"
@@ -2747,6 +2725,7 @@ HeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", versio
                 *ngIf="showNavigationButtons"
                 kendoButton
                 fillMode="flat"
+                [size]="size"
                 [svgIcon]="chevronRightIcon"
                 icon="chevron-right"
                 class="k-calendar-nav-next"
@@ -2795,7 +2774,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
             ></ng-template>
         </button>
         <span class="k-spacer"></span>
-        <span class="k-calendar-nav k-hstack">
+        <span class="k-calendar-nav">
             <button
                 *ngIf="showNavigationButtons"
                 kendoButton
@@ -2816,7 +2795,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                 kendoButton
                 class="k-calendar-nav-today"
                 tabindex="-1"
-                themeColor="primary"
                 fillMode="flat"
                 role="link"
                 [size]="size"
@@ -2833,6 +2811,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                 *ngIf="showNavigationButtons"
                 kendoButton
                 fillMode="flat"
+                [size]="size"
                 [svgIcon]="chevronRightIcon"
                 icon="chevron-right"
                 class="k-calendar-nav-next"
@@ -5424,8 +5403,8 @@ const table = domContainerFactory('table');
 const monthHeader = () => (div$1(`
             <span class="k-button k-button-md k-rounded-md k-button-flat k-button-flat-base k-calendar-title">March 2017</span>
             <span class="k-spacer"></span>
-            <span class="k-calendar-nav k-hstack">
-                <button class="k-calendar-nav-today k-button k-button-md k-button-flat k-button-flat-primary k-rounded-md">TODAY</button>
+            <span class="k-calendar-nav">
+                <button class="k-calendar-nav-today k-button k-button-md k-button-flat k-button-flat-base k-rounded-md">TODAY</button>
             </span>
         `, 'k-calendar-header'));
 const monthWeekHeader = () => (table([
@@ -8598,9 +8577,9 @@ class DateInputComponent {
      * @hidden
      */
     ngOnChanges(changes) {
-        var _a;
+        var _a, _b;
         this.verifyRange();
-        if (changes['min'] || changes['max'] || changes['rangeValidation'] || changes['incompleteDateValidation']) {
+        if (anyChanged(['min', 'max', 'rangeValidation', 'incompleteDateValidation'], changes, false)) {
             this.minValidator = this.rangeValidation ? minValidator(this.min) : noop$2;
             this.maxValidator = this.rangeValidation ? maxValidator(this.max) : noop$2;
             this.incompleteValidator = this.incompleteDateValidation ? incompleteDateValidator() : noop$2;
@@ -8623,6 +8602,12 @@ class DateInputComponent {
             (_a = this.kendoDate) === null || _a === void 0 ? void 0 : _a.setOptions(this.options, true);
             this.updateFormatSections();
         }
+        if (anyChanged(['enableMouseWheel', 'autoFill', 'autoSwitchParts', 'autoSwitchKeys', 'twoDigitYearMax', 'allowCaretMode'], changes)) {
+            if (!this.kendoDate) {
+                return;
+            }
+            (_b = this.kendoDate) === null || _b === void 0 ? void 0 : _b.setOptions(this.options, true);
+        }
     }
     updateFormatSections() {
         this.formatSections = this.intl.splitDateFormat(this.kendoDate.inputFormat)
@@ -9957,6 +9942,9 @@ class DatePickerComponent extends MultiTabStop {
      * @hidden
      */
     ngOnDestroy() {
+        if (this.isAdaptive && this.isOpen) {
+            this.toggleActionSheet(false);
+        }
         this.isActive = false;
         this.show = false;
         if (this.localizationChangeSubscription) {
@@ -10243,7 +10231,7 @@ class DatePickerComponent extends MultiTabStop {
         }
     }
     toggleActionSheet(show) {
-        var _a, _b, _c;
+        var _a;
         if (show === this._show) {
             return;
         }
@@ -10257,8 +10245,10 @@ class DatePickerComponent extends MultiTabStop {
         else if (!show && this.isOpen) {
             this.actionSheet.toggle();
             this.ariaActiveDescendantSubscription.unsubscribe();
-            this.renderer.removeAttribute((_b = this.dateInput) === null || _b === void 0 ? void 0 : _b.inputElement, attributeNames.ariaActiveDescendant);
-            this.renderer.removeAttribute((_c = this.dateInput) === null || _c === void 0 ? void 0 : _c.inputElement, attributeNames.ariaControls);
+            if (this.dateInput) {
+                this.renderer.removeAttribute(this.dateInput.inputElement, attributeNames.ariaActiveDescendant);
+                this.renderer.removeAttribute(this.dateInput.inputElement, attributeNames.ariaControls);
+            }
         }
         this._show = show;
     }
@@ -14449,8 +14439,8 @@ const DEFAULT_TIMESELECTOR_FORMAT = 't';
 const TWO_DIGIT_YEAR_MAX = 68;
 const ACCEPT_BUTTON_SELECTOR = '.k-button.k-time-accept';
 const CANCEL_BUTTON_SELECOTR = '.k-button.k-time-cancel';
-const DATE_TAB_BUTTON_SELECTOR = '.k-button.k-date-tab';
-const TIME_TAB_BUTTON_SELECTOR = '.k-button.k-time-tab';
+const DATE_TAB_BUTTON_SELECTOR = '.k-button.k-group-start';
+const TIME_TAB_BUTTON_SELECTOR = '.k-button.k-group-end';
 /**
  * Represents the [Kendo UI DateTimePicker component for Angular]({% slug overview_datetimepicker %}).
  */
@@ -15117,7 +15107,7 @@ class DateTimePickerComponent extends MultiTabStop {
         }
     }
     ngOnDestroy() {
-        if (this.isOpen) {
+        if (this.isOpen && !this.isAdaptive) {
             this.closePopup();
         }
         this.subscriptions.unsubscribe();
@@ -15962,6 +15952,10 @@ DateTimePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0"
         <ng-template #dateTimeTemplate>
             <div
                 class="k-datetime-wrap k-{{activeTab}}-tab"
+                [ngClass]="{
+                    'k-datetime-wrap-md': !isAdaptive,
+                    'k-datetime-wrap-lg': isAdaptive
+                }"
                 [kendoEventsOutsideAngular]="{
                     mousedown: preventMouseDown,
                     keydown: handleKeyDown
@@ -15975,10 +15969,10 @@ DateTimePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0"
                     }"
                     [scope]="this"
                 >
-                    <div class="k-button-group k-button-group-stretched" role="group">
+                    <div class="k-button-group k-button-group-solid k-button-group-stretched" role="group">
                         <button
                             type="button"
-                            class="k-button k-group-start k-date-tab"
+                            class="k-button k-group-start"
                             [ngClass]="popupButtonsClasses()"
                             [class.k-active]="activeTab === 'date'"
                             [attr.aria-pressed]="activeTab === 'date' ? 'true' : 'false'"
@@ -15994,7 +15988,7 @@ DateTimePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0"
                         </button>
                         <button
                             type="button"
-                            class="k-button k-group-end k-time-tab"
+                            class="k-button k-group-end"
                             [ngClass]="popupButtonsClasses()"
                             [class.k-active]="activeTab === 'time'"
                             [attr.aria-pressed]="activeTab === 'time' ? 'true' : 'false'"
@@ -16110,6 +16104,7 @@ DateTimePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0"
                     >
                         {{localization.get('accept')}}
                     </button>
                     <button
                         *ngIf="cancelButton"
                         type="button"
@@ -16360,6 +16355,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
         <ng-template #dateTimeTemplate>
             <div
                 class="k-datetime-wrap k-{{activeTab}}-tab"
+                [ngClass]="{
+                    'k-datetime-wrap-md': !isAdaptive,
+                    'k-datetime-wrap-lg': isAdaptive
+                }"
                 [kendoEventsOutsideAngular]="{
                     mousedown: preventMouseDown,
                     keydown: handleKeyDown
@@ -16373,10 +16372,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                     }"
                     [scope]="this"
                 >
-                    <div class="k-button-group k-button-group-stretched" role="group">
+                    <div class="k-button-group k-button-group-solid k-button-group-stretched" role="group">
                         <button
                             type="button"
-                            class="k-button k-group-start k-date-tab"
+                            class="k-button k-group-start"
                             [ngClass]="popupButtonsClasses()"
                             [class.k-active]="activeTab === 'date'"
                             [attr.aria-pressed]="activeTab === 'date' ? 'true' : 'false'"
@@ -16392,7 +16391,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                         </button>
                         <button
                             type="button"
-                            class="k-button k-group-end k-time-tab"
+                            class="k-button k-group-end"
                             [ngClass]="popupButtonsClasses()"
                             [class.k-active]="activeTab === 'time'"
                             [attr.aria-pressed]="activeTab === 'time' ? 'true' : 'false'"
@@ -16508,6 +16507,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                     >
                         {{localization.get('accept')}}
                     </button>
                     <button
                         *ngIf="cancelButton"
                         type="button"
@@ -17728,7 +17728,7 @@ DateRangePopupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0"
                 <div class="k-actionsheet-content !k-overflow-hidden">
                     <div class="k-scrollable-wrap">
                         <kendo-multiviewcalendar
-                            class="k-calendar-lg"
+                            size="large"
                             orientation="vertical"
                             [allowReverse]="allowReverse"
                             [focusedDate]="dateRangeService.focusedDate"
@@ -17841,7 +17841,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                 <div class="k-actionsheet-content !k-overflow-hidden">
                     <div class="k-scrollable-wrap">
                         <kendo-multiviewcalendar
-                            class="k-calendar-lg"
+                            size="large"
                             orientation="vertical"
                             [allowReverse]="allowReverse"
                             [focusedDate]="dateRangeService.focusedDate"

package/fesm2020/progress-kendo-angular-dateinputs.mjs CHANGED Viewed

@@ -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, firstYearOfDecade, createDate, lastYearOfDecade, lastMonthOfYear, lastDayOfMonth, durationInCenturies, addYears, durationInDecades, addWeeks, addMonths, firstDayOfMonth, dayOfWeek, durationInMonths, firstMonthOfYear, durationInYears, weekInYear } from '@progress/kendo-date-math';
 import * as i1$2 from '@progress/kendo-angular-common';
-import { isDocumentAvailable, guid, Keys as Keys$1, hasObservers, isObject, KendoInput, isObjectPresent, removeHTMLAttributes, parseAttributes, isControlRequired, setHTMLAttributes, MultiTabStop, EventsModule, ResizeSensorModule, ToggleButtonTabStopModule } from '@progress/kendo-angular-common';
+import { isDocumentAvailable, guid, Keys as Keys$1, hasObservers, isObject, KendoInput, isObjectPresent, removeHTMLAttributes, parseAttributes, anyChanged, isControlRequired, setHTMLAttributes, MultiTabStop, EventsModule, ResizeSensorModule, ToggleButtonTabStopModule } 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';
@@ -37,8 +37,8 @@ const packageMetadata = {
     name: '@progress/kendo-angular-dateinputs',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1718629463,
-    version: '16.3.0-develop.9',
+    publishDate: 1718884867,
+    version: '16.3.0',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };
@@ -2146,13 +2146,6 @@ class HorizontalViewListComponent {
             this.renderer.setAttribute(this.element.nativeElement, 'tabindex', this.tabIndex.toString());
         }
     }
-    ngAfterViewInit() {
-        // make the calendar look the same in the different browsers
-        // which also smoothens the navigation animation
-        if (this.views === 1) {
-            this.setTableMinWidth();
-        }
-    }
     ngOnDestroy() {
         this.intlSubscription.unsubscribe();
     }
@@ -2165,9 +2158,6 @@ class HorizontalViewListComponent {
     getCaptionTitle(date) {
         return this.service.title(date);
     }
-    getCaptionClass() {
-        return this.isMonthView() ? 'k-month-header' : 'k-meta-header';
-    }
     handleClassicCalendarFocus() {
         this.focusCalendar.emit();
     }
@@ -2196,9 +2186,6 @@ class HorizontalViewListComponent {
         this.cdr.detectChanges();
         container.querySelectorAll('table').forEach(table => {
             this.renderer.setStyle(table, 'width', `${tableWidth}px`);
-            if (this.views === 1) {
-                this.renderer.setStyle(table, 'min-width', `${initialContainerWidth}px`);
-            }
         });
         // we always slide by the width of 1 table
         // cross-browser compatibility is ensured by measuring the client rectangle and substracting the gap
@@ -2258,14 +2245,6 @@ class HorizontalViewListComponent {
     getWeekNames(type) {
         return this.weekService.getWeekNames(this.weekNumber, type);
     }
-    setTableMinWidth() {
-        const container = this.element.nativeElement;
-        const table = container.querySelector('table');
-        if (table) {
-            const containerWidth = parseFloat(getComputedStyle(container).width);
-            this.renderer.setStyle(table, 'min-width', `${containerWidth}px`);
-        }
-    }
     intlChange() {
         this.weekNames = this.getWeekNames(this.weekDaysFormat);
         this.wideWeekNames = this.getWeekNames('wide');
@@ -2307,7 +2286,7 @@ HorizontalViewListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.
                 (focus)="handleClassicCalendarFocus()"
                 (blur)="handleClassicCalendarBlur($event)"
             >
-                <caption *ngIf="showViewHeader" [ngClass]="getCaptionClass()">{{ getCaptionTitle(date) }}</caption>
+                <caption *ngIf="showViewHeader" class="k-calendar-caption">{{ getCaptionTitle(date) }}</caption>
                 <thead *ngIf="isMonthView()" class="k-calendar-thead" role="rowgroup">
                     <tr class="k-calendar-tr" role="row">
                         <th *ngFor="let name of weekNames; let i = index;"
@@ -2396,7 +2375,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                 (focus)="handleClassicCalendarFocus()"
                 (blur)="handleClassicCalendarBlur($event)"
             >
-                <caption *ngIf="showViewHeader" [ngClass]="getCaptionClass()">{{ getCaptionTitle(date) }}</caption>
+                <caption *ngIf="showViewHeader" class="k-calendar-caption">{{ getCaptionTitle(date) }}</caption>
                 <thead *ngIf="isMonthView()" class="k-calendar-thead" role="rowgroup">
                     <tr class="k-calendar-tr" role="row">
                         <th *ngFor="let name of weekNames; let i = index;"
@@ -2709,7 +2688,7 @@ HeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", versio
             ></ng-template>
         </button>
         <span class="k-spacer"></span>
-        <span class="k-calendar-nav k-hstack">
+        <span class="k-calendar-nav">
             <button
                 *ngIf="showNavigationButtons"
                 kendoButton
@@ -2730,7 +2709,6 @@ HeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", versio
                 kendoButton
                 class="k-calendar-nav-today"
                 tabindex="-1"
-                themeColor="primary"
                 fillMode="flat"
                 role="link"
                 [size]="size"
@@ -2747,6 +2725,7 @@ HeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", versio
                 *ngIf="showNavigationButtons"
                 kendoButton
                 fillMode="flat"
+                [size]="size"
                 [svgIcon]="chevronRightIcon"
                 icon="chevron-right"
                 class="k-calendar-nav-next"
@@ -2795,7 +2774,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
             ></ng-template>
         </button>
         <span class="k-spacer"></span>
-        <span class="k-calendar-nav k-hstack">
+        <span class="k-calendar-nav">
             <button
                 *ngIf="showNavigationButtons"
                 kendoButton
@@ -2816,7 +2795,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                 kendoButton
                 class="k-calendar-nav-today"
                 tabindex="-1"
-                themeColor="primary"
                 fillMode="flat"
                 role="link"
                 [size]="size"
@@ -2833,6 +2811,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                 *ngIf="showNavigationButtons"
                 kendoButton
                 fillMode="flat"
+                [size]="size"
                 [svgIcon]="chevronRightIcon"
                 icon="chevron-right"
                 class="k-calendar-nav-next"
@@ -4959,8 +4938,8 @@ const table = domContainerFactory('table');
 const monthHeader = () => (div$1(`
             <span class="k-button k-button-md k-rounded-md k-button-flat k-button-flat-base k-calendar-title">March 2017</span>
             <span class="k-spacer"></span>
-            <span class="k-calendar-nav k-hstack">
-                <button class="k-calendar-nav-today k-button k-button-md k-button-flat k-button-flat-primary k-rounded-md">TODAY</button>
+            <span class="k-calendar-nav">
+                <button class="k-calendar-nav-today k-button k-button-md k-button-flat k-button-flat-base k-rounded-md">TODAY</button>
             </span>
         `, 'k-calendar-header'));
 const monthWeekHeader = () => (table([
@@ -8581,7 +8560,7 @@ class DateInputComponent {
      */
     ngOnChanges(changes) {
         this.verifyRange();
-        if (changes['min'] || changes['max'] || changes['rangeValidation'] || changes['incompleteDateValidation']) {
+        if (anyChanged(['min', 'max', 'rangeValidation', 'incompleteDateValidation'], changes, false)) {
             this.minValidator = this.rangeValidation ? minValidator(this.min) : noop$2;
             this.maxValidator = this.rangeValidation ? maxValidator(this.max) : noop$2;
             this.incompleteValidator = this.incompleteDateValidation ? incompleteDateValidator() : noop$2;
@@ -8604,6 +8583,12 @@ class DateInputComponent {
             this.kendoDate?.setOptions(this.options, true);
             this.updateFormatSections();
         }
+        if (anyChanged(['enableMouseWheel', 'autoFill', 'autoSwitchParts', 'autoSwitchKeys', 'twoDigitYearMax', 'allowCaretMode'], changes)) {
+            if (!this.kendoDate) {
+                return;
+            }
+            this.kendoDate?.setOptions(this.options, true);
+        }
     }
     updateFormatSections() {
         this.formatSections = this.intl.splitDateFormat(this.kendoDate.inputFormat)
@@ -9934,6 +9919,9 @@ class DatePickerComponent extends MultiTabStop {
      * @hidden
      */
     ngOnDestroy() {
+        if (this.isAdaptive && this.isOpen) {
+            this.toggleActionSheet(false);
+        }
         this.isActive = false;
         this.show = false;
         if (this.localizationChangeSubscription) {
@@ -10232,8 +10220,10 @@ class DatePickerComponent extends MultiTabStop {
         else if (!show && this.isOpen) {
             this.actionSheet.toggle();
             this.ariaActiveDescendantSubscription.unsubscribe();
-            this.renderer.removeAttribute(this.dateInput?.inputElement, attributeNames.ariaActiveDescendant);
-            this.renderer.removeAttribute(this.dateInput?.inputElement, attributeNames.ariaControls);
+            if (this.dateInput) {
+                this.renderer.removeAttribute(this.dateInput.inputElement, attributeNames.ariaActiveDescendant);
+                this.renderer.removeAttribute(this.dateInput.inputElement, attributeNames.ariaControls);
+            }
         }
         this._show = show;
     }
@@ -14412,8 +14402,8 @@ const DEFAULT_TIMESELECTOR_FORMAT = 't';
 const TWO_DIGIT_YEAR_MAX = 68;
 const ACCEPT_BUTTON_SELECTOR = '.k-button.k-time-accept';
 const CANCEL_BUTTON_SELECOTR = '.k-button.k-time-cancel';
-const DATE_TAB_BUTTON_SELECTOR = '.k-button.k-date-tab';
-const TIME_TAB_BUTTON_SELECTOR = '.k-button.k-time-tab';
+const DATE_TAB_BUTTON_SELECTOR = '.k-button.k-group-start';
+const TIME_TAB_BUTTON_SELECTOR = '.k-button.k-group-end';
 /**
  * Represents the [Kendo UI DateTimePicker component for Angular]({% slug overview_datetimepicker %}).
  */
@@ -15072,7 +15062,7 @@ class DateTimePickerComponent extends MultiTabStop {
         }
     }
     ngOnDestroy() {
-        if (this.isOpen) {
+        if (this.isOpen && !this.isAdaptive) {
             this.closePopup();
         }
         this.subscriptions.unsubscribe();
@@ -15913,6 +15903,10 @@ DateTimePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0"
         <ng-template #dateTimeTemplate>
             <div
                 class="k-datetime-wrap k-{{activeTab}}-tab"
+                [ngClass]="{
+                    'k-datetime-wrap-md': !isAdaptive,
+                    'k-datetime-wrap-lg': isAdaptive
+                }"
                 [kendoEventsOutsideAngular]="{
                     mousedown: preventMouseDown,
                     keydown: handleKeyDown
@@ -15926,10 +15920,10 @@ DateTimePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0"
                     }"
                     [scope]="this"
                 >
-                    <div class="k-button-group k-button-group-stretched" role="group">
+                    <div class="k-button-group k-button-group-solid k-button-group-stretched" role="group">
                         <button
                             type="button"
-                            class="k-button k-group-start k-date-tab"
+                            class="k-button k-group-start"
                             [ngClass]="popupButtonsClasses()"
                             [class.k-active]="activeTab === 'date'"
                             [attr.aria-pressed]="activeTab === 'date' ? 'true' : 'false'"
@@ -15945,7 +15939,7 @@ DateTimePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0"
                         </button>
                         <button
                             type="button"
-                            class="k-button k-group-end k-time-tab"
+                            class="k-button k-group-end"
                             [ngClass]="popupButtonsClasses()"
                             [class.k-active]="activeTab === 'time'"
                             [attr.aria-pressed]="activeTab === 'time' ? 'true' : 'false'"
@@ -16061,6 +16055,7 @@ DateTimePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0"
                     >
                         {{localization.get('accept')}}
                     </button>
                     <button
                         *ngIf="cancelButton"
                         type="button"
@@ -16311,6 +16306,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
         <ng-template #dateTimeTemplate>
             <div
                 class="k-datetime-wrap k-{{activeTab}}-tab"
+                [ngClass]="{
+                    'k-datetime-wrap-md': !isAdaptive,
+                    'k-datetime-wrap-lg': isAdaptive
+                }"
                 [kendoEventsOutsideAngular]="{
                     mousedown: preventMouseDown,
                     keydown: handleKeyDown
@@ -16324,10 +16323,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                     }"
                     [scope]="this"
                 >
-                    <div class="k-button-group k-button-group-stretched" role="group">
+                    <div class="k-button-group k-button-group-solid k-button-group-stretched" role="group">
                         <button
                             type="button"
-                            class="k-button k-group-start k-date-tab"
+                            class="k-button k-group-start"
                             [ngClass]="popupButtonsClasses()"
                             [class.k-active]="activeTab === 'date'"
                             [attr.aria-pressed]="activeTab === 'date' ? 'true' : 'false'"
@@ -16343,7 +16342,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                         </button>
                         <button
                             type="button"
-                            class="k-button k-group-end k-time-tab"
+                            class="k-button k-group-end"
                             [ngClass]="popupButtonsClasses()"
                             [class.k-active]="activeTab === 'time'"
                             [attr.aria-pressed]="activeTab === 'time' ? 'true' : 'false'"
@@ -16459,6 +16458,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                     >
                         {{localization.get('accept')}}
                     </button>
                     <button
                         *ngIf="cancelButton"
                         type="button"
@@ -17670,7 +17670,7 @@ DateRangePopupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0"
                 <div class="k-actionsheet-content !k-overflow-hidden">
                     <div class="k-scrollable-wrap">
                         <kendo-multiviewcalendar
-                            class="k-calendar-lg"
+                            size="large"
                             orientation="vertical"
                             [allowReverse]="allowReverse"
                             [focusedDate]="dateRangeService.focusedDate"
@@ -17783,7 +17783,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                 <div class="k-actionsheet-content !k-overflow-hidden">
                     <div class="k-scrollable-wrap">
                         <kendo-multiviewcalendar
-                            class="k-calendar-lg"
+                            size="large"
                             orientation="vertical"
                             [allowReverse]="allowReverse"
                             [focusedDate]="dateRangeService.focusedDate"

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@progress/kendo-angular-dateinputs",
-  "version": "16.3.0-develop.9",
+  "version": "16.3.0",
   "description": "Kendo UI for Angular Date Inputs Package - Everything you need to add date selection functionality to apps (DatePicker, TimePicker, DateInput, DateRangePicker, DateTimePicker, Calendar, and MultiViewCalendar).",
   "license": "SEE LICENSE IN LICENSE.md",
   "author": "Progress",
@@ -34,18 +34,18 @@
     "@angular/forms": "15 - 18",
     "@angular/platform-browser": "15 - 18",
     "@progress/kendo-licensing": "^1.0.2",
-    "@progress/kendo-angular-buttons": "16.3.0-develop.9",
-    "@progress/kendo-angular-common": "16.3.0-develop.9",
-    "@progress/kendo-angular-intl": "16.3.0-develop.9",
-    "@progress/kendo-angular-l10n": "16.3.0-develop.9",
-    "@progress/kendo-angular-icons": "16.3.0-develop.9",
-    "@progress/kendo-angular-popup": "16.3.0-develop.9",
-    "@progress/kendo-angular-navigation": "16.3.0-develop.9",
+    "@progress/kendo-angular-buttons": "16.3.0",
+    "@progress/kendo-angular-common": "16.3.0",
+    "@progress/kendo-angular-intl": "16.3.0",
+    "@progress/kendo-angular-l10n": "16.3.0",
+    "@progress/kendo-angular-icons": "16.3.0",
+    "@progress/kendo-angular-popup": "16.3.0",
+    "@progress/kendo-angular-navigation": "16.3.0",
     "rxjs": "^6.5.3 || ^7.0.0"
   },
   "dependencies": {
     "tslib": "^2.3.1",
-    "@progress/kendo-angular-schematics": "16.3.0-develop.9",
+    "@progress/kendo-angular-schematics": "16.3.0",
     "@progress/kendo-common": "^0.2.0",
     "@progress/kendo-date-math": "^1.1.0",
     "@progress/kendo-dateinputs-common": "^0.3.3"