@progress/kendo-angular-dateinputs 16.5.0 → 16.6.0-develop.10

package/esm2020/datepicker/datepicker.component.mjs

@@ -2,12 +2,12 @@
 * Copyright © 2024 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-import { Component, ChangeDetectionStrategy, ChangeDetectorRef, ElementRef, TemplateRef, EventEmitter, HostBinding, Renderer2, Input, Output, ContentChild, ViewChild, ViewContainerRef, NgZone, Inject, Optional, forwardRef, isDevMode, Injector, } from '@angular/core';
+import { Component, ChangeDetectionStrategy, ChangeDetectorRef, ElementRef, TemplateRef, EventEmitter, HostBinding, Renderer2, Input, Output, ContentChild, ViewChild, ViewContainerRef, NgZone, forwardRef, isDevMode, Injector, } from '@angular/core';
 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 } from '@progress/kendo-date-math';
-import { hasObservers, isControlRequired, isDocumentAvailable, KendoInput, Keys, MultiTabStop } from '@progress/kendo-angular-common';
+import { hasObservers, isControlRequired, isDocumentAvailable, KendoInput, Keys, MultiTabStop, ResizeSensorComponent, EventsOutsideAngularDirective } from '@progress/kendo-angular-common';
 import { validatePackage } from '@progress/kendo-licensing';
 import { packageMetadata } from '../package-metadata';
 import { MIN_DATE, MAX_DATE } from '../defaults';
@@ -26,30 +26,28 @@ import { NavigationItemTemplateDirective } from '../calendar/templates/navigatio
 import { PickerService } from '../common/picker.service';
 import { DisabledDatesService } from '../calendar/services/disabled-dates.service';
 import { noop, isValidRange, setTime, isWindowAvailable, isTabExitingCalendar, getSizeClass, getRoundedClass, getFillModeClass, DEFAULT_FILL_MODE, DEFAULT_ROUNDED, DEFAULT_SIZE, windowSize } from '../util';
-import { TOUCH_ENABLED } from '../touch-enabled';
 import { requiresZoneOnBlur, currentFocusTarget, attributeNames } from '../common/utils';
 import { fromEvent } from 'rxjs';
 import { incompleteDateValidator } from '../validators/incomplete-date.validator';
 import { disabledDatesValidator } from '../validators/disabled-date.validator';
+import { DateInputComponent } from '../dateinput/dateinput.component';
 import { calendarIcon, xIcon } from '@progress/kendo-svg-icons';
-import { ActionSheetComponent } from '@progress/kendo-angular-navigation';
+import { ActionSheetComponent, ActionSheetTemplateDirective } from '@progress/kendo-angular-navigation';
 import { HeaderTemplateDirective } from '../calendar/templates/header-template.directive';
 import { FooterTemplateDirective } from '../calendar/templates/footer-template.directive';
+import { CalendarCustomMessagesComponent } from '../calendar/localization/calendar-custom-messages.component';
+import { CalendarComponent } from '../calendar/calendar.component';
+import { ButtonComponent } from '@progress/kendo-angular-buttons';
+import { NgTemplateOutlet, NgIf } from '@angular/common';
+import { IconWrapperComponent } from '@progress/kendo-angular-icons';
+import { DateInputCustomMessagesComponent } from '../dateinput/localization/dateinput-custom-messages.component';
+import { DatePickerLocalizedMessagesDirective } from './localization/datepicker-localized-messages.directive';
+import { touchEnabled } from '@progress/kendo-common';
 import * as i0 from "@angular/core";
 import * as i1 from "@progress/kendo-angular-l10n";
 import * as i2 from "@progress/kendo-angular-popup";
 import * as i3 from "../common/picker.service";
 import * as i4 from "../calendar/services/disabled-dates.service";
-import * as i5 from "@angular/common";
-import * as i6 from "../dateinput/dateinput.component";
-import * as i7 from "../dateinput/localization/dateinput-custom-messages.component";
-import * as i8 from "../calendar/calendar.component";
-import * as i9 from "../calendar/localization/calendar-custom-messages.component";
-import * as i10 from "@progress/kendo-angular-common";
-import * as i11 from "@progress/kendo-angular-icons";
-import * as i12 from "@progress/kendo-angular-navigation";
-import * as i13 from "@progress/kendo-angular-buttons";
-import * as i14 from "./localization/datepicker-localized-messages.directive";
 const MIN_DOC_LINK = 'http://www.telerik.com/kendo-angular-ui/components/dateinputs/api/DatePickerComponent/#toc-min';
 const MAX_DOC_LINK = 'http://www.telerik.com/kendo-angular-ui/components/dateinputs/api/DatePickerComponent/#toc-max';
 const VALUE_DOC_LINK = 'http://www.telerik.com/kendo-angular-ui/components/dateinputs/datepicker/#toc-using-with-json';
@@ -59,7 +57,7 @@ const TWO_DIGIT_YEAR_MAX = 68;
  * Represents the [Kendo UI DatePicker component for Angular](slug:overview_datepicker).
  */
 export class DatePickerComponent extends MultiTabStop {
-    constructor(zone, localization, cdr, popupService, wrapper, renderer, injector, pickerService, disabledDatesService, touchEnabled) {
+    constructor(zone, localization, cdr, popupService, wrapper, renderer, injector, pickerService, disabledDatesService) {
         super();
         this.zone = zone;
         this.localization = localization;
@@ -70,7 +68,6 @@ export class DatePickerComponent extends MultiTabStop {
         this.injector = injector;
         this.pickerService = pickerService;
         this.disabledDatesService = disabledDatesService;
-        this.touchEnabled = touchEnabled;
         /**
          * @hidden
          */
@@ -166,10 +163,7 @@ export class DatePickerComponent extends MultiTabStop {
          */
         this.incompleteDateValidation = false;
         /**
-         * @hidden
-         *
-         * Determines whether to auto correct invalid segments automatically.
-         * TODO: To be fixed in common package before enabling: https://github.com/telerik/kendo-dateinputs-common/issues/24
+         * Determines whether to autocorrect invalid segments automatically.
          *
          * @default true
          */
@@ -973,7 +967,7 @@ export class DatePickerComponent extends MultiTabStop {
         this.ariaActiveDescendantSubscription = focusedCellChangeEvent.subscribe((id) => this.renderer.setAttribute(this.dateInput?.inputElement, attributeNames.ariaActiveDescendant, id));
     }
     focusInput() {
-        if (this.touchEnabled) {
+        if (touchEnabled) {
             return;
         }
         this.dateInput.focus();
@@ -990,7 +984,7 @@ export class DatePickerComponent extends MultiTabStop {
                 this.calendar.focus();
             }
         }
-        else if (!this.touchEnabled) {
+        else if (!touchEnabled) {
             this.dateInput.focus();
         }
         else if (!this.dateInput.isActive) {
@@ -1087,8 +1081,8 @@ export class DatePickerComponent extends MultiTabStop {
         }
     }
 }
-DatePickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DatePickerComponent, deps: [{ token: i0.NgZone }, { token: i1.LocalizationService }, { token: i0.ChangeDetectorRef }, { token: i2.PopupService }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.Injector }, { token: i3.PickerService }, { token: i4.DisabledDatesService }, { token: TOUCH_ENABLED, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-DatePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: DatePickerComponent, selector: "kendo-datepicker", inputs: { focusableId: "focusableId", cellTemplateRef: ["cellTemplate", "cellTemplateRef"], clearButton: "clearButton", inputAttributes: "inputAttributes", monthCellTemplateRef: ["monthCellTemplate", "monthCellTemplateRef"], yearCellTemplateRef: ["yearCellTemplate", "yearCellTemplateRef"], decadeCellTemplateRef: ["decadeCellTemplate", "decadeCellTemplateRef"], centuryCellTemplateRef: ["centuryCellTemplate", "centuryCellTemplateRef"], weekNumberTemplateRef: ["weekNumberTemplate", "weekNumberTemplateRef"], headerTitleTemplateRef: ["headerTitleTemplate", "headerTitleTemplateRef"], headerTemplateRef: ["headerTemplate", "headerTemplateRef"], footerTemplateRef: ["footerTemplate", "footerTemplateRef"], footer: "footer", navigationItemTemplateRef: ["navigationItemTemplate", "navigationItemTemplateRef"], weekDaysFormat: "weekDaysFormat", showOtherMonthDays: "showOtherMonthDays", activeView: "activeView", bottomView: "bottomView", topView: "topView", calendarType: "calendarType", animateCalendarNavigation: "animateCalendarNavigation", disabled: "disabled", readonly: "readonly", readOnlyInput: "readOnlyInput", popupSettings: "popupSettings", navigation: "navigation", min: "min", max: "max", incompleteDateValidation: "incompleteDateValidation", autoCorrectParts: "autoCorrectParts", autoSwitchParts: "autoSwitchParts", autoSwitchKeys: "autoSwitchKeys", enableMouseWheel: "enableMouseWheel", allowCaretMode: "allowCaretMode", autoFill: "autoFill", focusedDate: "focusedDate", value: "value", format: "format", twoDigitYearMax: "twoDigitYearMax", formatPlaceholder: "formatPlaceholder", placeholder: "placeholder", tabindex: "tabindex", tabIndex: "tabIndex", disabledDates: "disabledDates", title: "title", subtitle: "subtitle", rangeValidation: "rangeValidation", disabledDatesValidation: "disabledDatesValidation", weekNumber: "weekNumber", size: "size", rounded: "rounded", fillMode: "fillMode", adaptiveMode: "adaptiveMode" }, outputs: { valueChange: "valueChange", onFocus: "focus", onBlur: "blur", open: "open", close: "close", escape: "escape" }, host: { properties: { "class.k-readonly": "this.readonly", "class.k-datepicker": "this.wrapperClasses", "class.k-input": "this.wrapperClasses", "class.k-disabled": "this.disabledClass" } }, providers: [
+DatePickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DatePickerComponent, deps: [{ token: i0.NgZone }, { token: i1.LocalizationService }, { token: i0.ChangeDetectorRef }, { token: i2.PopupService }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.Injector }, { token: i3.PickerService }, { token: i4.DisabledDatesService }], target: i0.ɵɵFactoryTarget.Component });
+DatePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: DatePickerComponent, isStandalone: true, selector: "kendo-datepicker", inputs: { focusableId: "focusableId", cellTemplateRef: ["cellTemplate", "cellTemplateRef"], clearButton: "clearButton", inputAttributes: "inputAttributes", monthCellTemplateRef: ["monthCellTemplate", "monthCellTemplateRef"], yearCellTemplateRef: ["yearCellTemplate", "yearCellTemplateRef"], decadeCellTemplateRef: ["decadeCellTemplate", "decadeCellTemplateRef"], centuryCellTemplateRef: ["centuryCellTemplate", "centuryCellTemplateRef"], weekNumberTemplateRef: ["weekNumberTemplate", "weekNumberTemplateRef"], headerTitleTemplateRef: ["headerTitleTemplate", "headerTitleTemplateRef"], headerTemplateRef: ["headerTemplate", "headerTemplateRef"], footerTemplateRef: ["footerTemplate", "footerTemplateRef"], footer: "footer", navigationItemTemplateRef: ["navigationItemTemplate", "navigationItemTemplateRef"], weekDaysFormat: "weekDaysFormat", showOtherMonthDays: "showOtherMonthDays", activeView: "activeView", bottomView: "bottomView", topView: "topView", calendarType: "calendarType", animateCalendarNavigation: "animateCalendarNavigation", disabled: "disabled", readonly: "readonly", readOnlyInput: "readOnlyInput", popupSettings: "popupSettings", navigation: "navigation", min: "min", max: "max", incompleteDateValidation: "incompleteDateValidation", autoCorrectParts: "autoCorrectParts", autoSwitchParts: "autoSwitchParts", autoSwitchKeys: "autoSwitchKeys", enableMouseWheel: "enableMouseWheel", allowCaretMode: "allowCaretMode", autoFill: "autoFill", focusedDate: "focusedDate", value: "value", format: "format", twoDigitYearMax: "twoDigitYearMax", formatPlaceholder: "formatPlaceholder", placeholder: "placeholder", tabindex: "tabindex", tabIndex: "tabIndex", disabledDates: "disabledDates", title: "title", subtitle: "subtitle", rangeValidation: "rangeValidation", disabledDatesValidation: "disabledDatesValidation", weekNumber: "weekNumber", size: "size", rounded: "rounded", fillMode: "fillMode", adaptiveMode: "adaptiveMode" }, outputs: { valueChange: "valueChange", onFocus: "focus", onBlur: "blur", open: "open", close: "close", escape: "escape" }, host: { properties: { "class.k-readonly": "this.readonly", "class.k-datepicker": "this.wrapperClasses", "class.k-input": "this.wrapperClasses", "class.k-disabled": "this.disabledClass" } }, providers: [
         { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => DatePickerComponent), multi: true },
         { provide: NG_VALIDATORS, useExisting: forwardRef(() => DatePickerComponent), multi: true },
         { provide: KendoInput, useExisting: forwardRef(() => DatePickerComponent) },
@@ -1273,7 +1267,7 @@ DatePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", ve
                 </kendo-calendar-messages>
             </kendo-calendar>
         </ng-template>
-    `, isInline: true, dependencies: [{ kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i6.DateInputComponent, selector: "kendo-dateinput", inputs: ["focusableId", "pickerType", "clearButton", "disabled", "readonly", "title", "tabindex", "role", "ariaReadOnly", "tabIndex", "isRequired", "format", "formatPlaceholder", "placeholder", "steps", "max", "min", "rangeValidation", "autoCorrectParts", "autoSwitchParts", "autoSwitchKeys", "allowCaretMode", "autoFill", "incompleteDateValidation", "twoDigitYearMax", "enableMouseWheel", "value", "spinners", "isPopupOpen", "hasPopup", "size", "rounded", "fillMode", "inputAttributes"], outputs: ["valueChange", "valueUpdate", "focus", "blur"], exportAs: ["kendo-dateinput"] }, { kind: "component", type: i7.DateInputCustomMessagesComponent, selector: "kendo-dateinput-messages" }, { kind: "component", type: i8.CalendarComponent, selector: "kendo-calendar", inputs: ["showOtherMonthDays", "id", "focusedDate", "min", "max", "rangeValidation", "weekDaysFormat", "footer", "selection", "allowReverse", "value", "disabled", "tabindex", "tabIndex", "disabledDates", "navigation", "activeView", "bottomView", "topView", "type", "animateNavigation", "weekNumber", "cellTemplate", "monthCellTemplate", "yearCellTemplate", "decadeCellTemplate", "centuryCellTemplate", "weekNumberTemplate", "headerTitleTemplate", "headerTemplate", "footerTemplate", "navigationItemTemplate", "size", "activeRangeEnd"], outputs: ["activeViewChange", "navigate", "activeViewDateChange", "blur", "focus", "valueChange"], exportAs: ["kendo-calendar"] }, { kind: "component", type: i9.CalendarCustomMessagesComponent, selector: "kendo-calendar-messages" }, { kind: "directive", type: i10.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { kind: "component", type: i11.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "component", type: i12.ActionSheetComponent, selector: "kendo-actionsheet", inputs: ["title", "subtitle", "items", "cssClass", "animation", "expanded", "titleId"], outputs: ["expandedChange", "expand", "collapse", "itemClick", "overlayClick"], exportAs: ["kendoActionSheet"] }, { kind: "directive", type: i12.ActionSheetTemplateDirective, selector: "[kendoActionSheetTemplate]" }, { kind: "component", type: i10.ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }, { kind: "component", type: i13.ButtonComponent, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "directive", type: i14.DatePickerLocalizedMessagesDirective, selector: "[kendoDatePickerLocalizedMessages]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    `, isInline: true, dependencies: [{ kind: "directive", type: DatePickerLocalizedMessagesDirective, selector: "[kendoDatePickerLocalizedMessages]" }, { kind: "component", type: DateInputComponent, selector: "kendo-dateinput", inputs: ["focusableId", "pickerType", "clearButton", "disabled", "readonly", "title", "tabindex", "role", "ariaReadOnly", "tabIndex", "isRequired", "format", "formatPlaceholder", "placeholder", "steps", "max", "min", "rangeValidation", "autoCorrectParts", "autoSwitchParts", "autoSwitchKeys", "allowCaretMode", "autoFill", "incompleteDateValidation", "twoDigitYearMax", "enableMouseWheel", "value", "spinners", "isPopupOpen", "hasPopup", "size", "rounded", "fillMode", "inputAttributes"], outputs: ["valueChange", "valueUpdate", "focus", "blur"], exportAs: ["kendo-dateinput"] }, { kind: "component", type: DateInputCustomMessagesComponent, selector: "kendo-dateinput-messages" }, { kind: "directive", type: EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }, { kind: "component", type: ActionSheetComponent, selector: "kendo-actionsheet", inputs: ["title", "subtitle", "items", "cssClass", "animation", "expanded", "titleId"], outputs: ["expandedChange", "expand", "collapse", "itemClick", "overlayClick"], exportAs: ["kendoActionSheet"] }, { kind: "directive", type: ActionSheetTemplateDirective, selector: "[kendoActionSheetTemplate]" }, { kind: "component", type: ButtonComponent, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "component", type: CalendarComponent, selector: "kendo-calendar", inputs: ["showOtherMonthDays", "id", "focusedDate", "min", "max", "rangeValidation", "weekDaysFormat", "footer", "selection", "allowReverse", "value", "disabled", "tabindex", "tabIndex", "disabledDates", "navigation", "activeView", "bottomView", "topView", "type", "animateNavigation", "weekNumber", "cellTemplate", "monthCellTemplate", "yearCellTemplate", "decadeCellTemplate", "centuryCellTemplate", "weekNumberTemplate", "headerTitleTemplate", "headerTemplate", "footerTemplate", "navigationItemTemplate", "size", "activeRangeEnd"], outputs: ["activeViewChange", "navigate", "activeViewDateChange", "blur", "focus", "valueChange"], exportAs: ["kendo-calendar"] }, { kind: "component", type: CalendarCustomMessagesComponent, selector: "kendo-calendar-messages" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DatePickerComponent, decorators: [{
             type: Component,
             args: [{
@@ -1466,14 +1460,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                 </kendo-calendar-messages>
             </kendo-calendar>
         </ng-template>
-    `
+    `,
+                    standalone: true,
+                    imports: [DatePickerLocalizedMessagesDirective, DateInputComponent, DateInputCustomMessagesComponent, EventsOutsideAngularDirective, IconWrapperComponent, NgTemplateOutlet, NgIf, ResizeSensorComponent, ActionSheetComponent, ActionSheetTemplateDirective, ButtonComponent, CalendarComponent, CalendarCustomMessagesComponent]
                 }]
-        }], ctorParameters: function () { return [{ type: i0.NgZone }, { type: i1.LocalizationService }, { type: i0.ChangeDetectorRef }, { type: i2.PopupService }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.Injector }, { type: i3.PickerService }, { type: i4.DisabledDatesService }, { type: undefined, decorators: [{
-                    type: Optional
-                }, {
-                    type: Inject,
-                    args: [TOUCH_ENABLED]
-                }] }]; }, propDecorators: { container: [{
+        }], ctorParameters: function () { return [{ type: i0.NgZone }, { type: i1.LocalizationService }, { type: i0.ChangeDetectorRef }, { type: i2.PopupService }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.Injector }, { type: i3.PickerService }, { type: i4.DisabledDatesService }]; }, propDecorators: { container: [{
                 type: ViewChild,
                 args: ['container', { read: ViewContainerRef, static: true }]
             }], popupTemplate: [{

package/esm2020/datepicker/datepicker.module.mjs

@@ -3,21 +3,31 @@
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 import { NgModule } from '@angular/core';
-import { DatePickerComponent } from './datepicker.component';
-import { CommonModule } from '@angular/common';
-import { IntlModule } from '@progress/kendo-angular-intl';
-import { PopupModule } from '@progress/kendo-angular-popup';
-import { CalendarModule } from '../calendar/calendar.module';
-import { TemplatesModule } from '../calendar/templates.module';
-import { DateInputModule } from '../dateinput/dateinput.module';
-import { EventsModule, ToggleButtonTabStopModule } from '@progress/kendo-angular-common';
-import { DatePickerLocalizedMessagesDirective } from './localization/datepicker-localized-messages.directive';
-import { DatePickerCustomMessagesComponent } from './localization/datepicker-custom-messages.component';
-import { touchEnabled } from '@progress/kendo-common';
-import { TOUCH_ENABLED } from '../touch-enabled';
-import { IconsModule } from '@progress/kendo-angular-icons';
-import { AdaptiveModule } from '../common/adaptive.module';
+import { KENDO_DATEPICKER } from '../directives';
+import { IconsService } from '@progress/kendo-angular-icons';
+import { ResizeBatchService } from '@progress/kendo-angular-common';
+import { PopupService } from '@progress/kendo-angular-popup';
+import { CenturyViewService } from '../calendar/services/century-view.service';
+import { DecadeViewService } from '../calendar/services/decade-view.service';
+import { CalendarDOMService } from '../calendar/services/dom.service';
+import { MonthViewService } from '../calendar/services/month-view.service';
+import { NavigationService } from '../calendar/services/navigation.service';
+import { WeekNamesService } from '../calendar/services/weeknames.service';
+import { YearViewService } from '../calendar/services/year-view.service';
 import * as i0 from "@angular/core";
+import * as i1 from "./localization/datepicker-custom-messages.component";
+import * as i2 from "./datepicker.component";
+import * as i3 from "../calendar/templates/cell-template.directive";
+import * as i4 from "../calendar/templates/century-cell-template.directive";
+import * as i5 from "../calendar/templates/decade-cell-template.directive";
+import * as i6 from "../calendar/templates/footer-template.directive";
+import * as i7 from "../calendar/templates/header-template.directive";
+import * as i8 from "../calendar/templates/header-title-template.directive";
+import * as i9 from "../calendar/templates/month-cell-template.directive";
+import * as i10 from "../calendar/templates/navigation-item-template.directive";
+import * as i11 from "../calendar/templates/weeknumber-cell-template.directive";
+import * as i12 from "../calendar/templates/year-cell-template.directive";
+// IMPORTANT: NgModule export kept for backwards compatibility
 /**
  * Represents the [NgModule](link:site.data.urls.angular['ngmoduleapi'])
  * definition for the DatePicker component.
@@ -25,57 +35,39 @@ import * as i0 from "@angular/core";
 export class DatePickerModule {
 }
 DatePickerModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DatePickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-DatePickerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: DatePickerModule, declarations: [DatePickerComponent,
-        DatePickerCustomMessagesComponent,
-        DatePickerLocalizedMessagesDirective], imports: [CommonModule,
-        DateInputModule,
-        CalendarModule,
-        IntlModule,
-        PopupModule,
-        TemplatesModule,
-        EventsModule,
-        IconsModule,
-        AdaptiveModule], exports: [DatePickerComponent,
-        DatePickerCustomMessagesComponent,
-        DatePickerLocalizedMessagesDirective,
-        TemplatesModule,
-        ToggleButtonTabStopModule] });
-DatePickerModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DatePickerModule, providers: [{ provide: TOUCH_ENABLED, useValue: touchEnabled }], imports: [CommonModule,
-        DateInputModule,
-        CalendarModule,
-        IntlModule,
-        PopupModule,
-        TemplatesModule,
-        EventsModule,
-        IconsModule,
-        AdaptiveModule, TemplatesModule,
-        ToggleButtonTabStopModule] });
+DatePickerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: DatePickerModule, imports: [i1.DatePickerCustomMessagesComponent, i2.DatePickerComponent, i3.CellTemplateDirective, i4.CenturyCellTemplateDirective, i5.DecadeCellTemplateDirective, i6.FooterTemplateDirective, i7.HeaderTemplateDirective, i8.HeaderTitleTemplateDirective, i9.MonthCellTemplateDirective, i10.NavigationItemTemplateDirective, i11.WeekNumberCellTemplateDirective, i12.YearCellTemplateDirective, i10.NavigationItemTemplateDirective], exports: [i1.DatePickerCustomMessagesComponent, i2.DatePickerComponent, i3.CellTemplateDirective, i4.CenturyCellTemplateDirective, i5.DecadeCellTemplateDirective, i6.FooterTemplateDirective, i7.HeaderTemplateDirective, i8.HeaderTitleTemplateDirective, i9.MonthCellTemplateDirective, i10.NavigationItemTemplateDirective, i11.WeekNumberCellTemplateDirective, i12.YearCellTemplateDirective, i10.NavigationItemTemplateDirective] });
+DatePickerModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DatePickerModule, providers: [
+        // DateInputModule providers
+        IconsService,
+        // CalendarModule providers
+        ResizeBatchService,
+        CalendarDOMService,
+        CenturyViewService,
+        DecadeViewService,
+        MonthViewService,
+        YearViewService,
+        WeekNamesService,
+        PopupService,
+        NavigationService
+    ], imports: [i1.DatePickerCustomMessagesComponent, i2.DatePickerComponent] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DatePickerModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [
-                        DatePickerComponent,
-                        DatePickerCustomMessagesComponent,
-                        DatePickerLocalizedMessagesDirective
-                    ],
-                    exports: [
-                        DatePickerComponent,
-                        DatePickerCustomMessagesComponent,
-                        DatePickerLocalizedMessagesDirective,
-                        TemplatesModule,
-                        ToggleButtonTabStopModule
-                    ],
-                    imports: [
-                        CommonModule,
-                        DateInputModule,
-                        CalendarModule,
-                        IntlModule,
-                        PopupModule,
-                        TemplatesModule,
-                        EventsModule,
-                        IconsModule,
-                        AdaptiveModule
-                    ],
-                    providers: [{ provide: TOUCH_ENABLED, useValue: touchEnabled }]
+                    exports: [...KENDO_DATEPICKER],
+                    imports: [...KENDO_DATEPICKER],
+                    providers: [
+                        // DateInputModule providers
+                        IconsService,
+                        // CalendarModule providers
+                        ResizeBatchService,
+                        CalendarDOMService,
+                        CenturyViewService,
+                        DecadeViewService,
+                        MonthViewService,
+                        YearViewService,
+                        WeekNamesService,
+                        PopupService,
+                        NavigationService
+                    ]
                 }]
         }] });

package/esm2020/datepicker/localization/datepicker-custom-messages.component.mjs

@@ -20,7 +20,7 @@ export class DatePickerCustomMessagesComponent extends DatePickerMessages {
     }
 }
 DatePickerCustomMessagesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DatePickerCustomMessagesComponent, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
-DatePickerCustomMessagesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: DatePickerCustomMessagesComponent, selector: "kendo-datepicker-messages", providers: [
+DatePickerCustomMessagesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: DatePickerCustomMessagesComponent, isStandalone: true, selector: "kendo-datepicker-messages", providers: [
         {
             provide: DatePickerMessages,
             useExisting: forwardRef(() => DatePickerCustomMessagesComponent)
@@ -36,6 +36,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                         }
                     ],
                     selector: 'kendo-datepicker-messages',
-                    template: ``
+                    template: ``,
+                    standalone: true
                 }]
         }], ctorParameters: function () { return [{ type: i1.LocalizationService }]; } });

package/esm2020/datepicker/localization/datepicker-localized-messages.directive.mjs

@@ -17,7 +17,7 @@ export class DatePickerLocalizedMessagesDirective extends DatePickerMessages {
     }
 }
 DatePickerLocalizedMessagesDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DatePickerLocalizedMessagesDirective, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Directive });
-DatePickerLocalizedMessagesDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: DatePickerLocalizedMessagesDirective, selector: "[kendoDatePickerLocalizedMessages]", providers: [
+DatePickerLocalizedMessagesDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: DatePickerLocalizedMessagesDirective, isStandalone: true, selector: "[kendoDatePickerLocalizedMessages]", providers: [
         {
             provide: DatePickerMessages,
             useExisting: forwardRef(() => DatePickerLocalizedMessagesDirective)
@@ -32,6 +32,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                             useExisting: forwardRef(() => DatePickerLocalizedMessagesDirective)
                         }
                     ],
-                    selector: '[kendoDatePickerLocalizedMessages]'
+                    selector: '[kendoDatePickerLocalizedMessages]',
+                    standalone: true
                 }]
         }], ctorParameters: function () { return [{ type: i1.LocalizationService }]; } });

package/esm2020/daterange/date-range-end-input.directive.mjs

@@ -80,11 +80,12 @@ export class DateRangeEndInputDirective extends DateRangeInput {
     }
 }
 DateRangeEndInputDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DateRangeEndInputDirective, deps: [{ token: i1.DateRangeService }, { token: i2.DateInputComponent }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive });
-DateRangeEndInputDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: DateRangeEndInputDirective, selector: "[kendoDateRangeEndInput]", inputs: { autoCorrectOn: "autoCorrectOn", navigateCalendarOnFocus: "navigateCalendarOnFocus" }, usesInheritance: true, ngImport: i0 });
+DateRangeEndInputDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: DateRangeEndInputDirective, isStandalone: true, selector: "[kendoDateRangeEndInput]", inputs: { autoCorrectOn: "autoCorrectOn", navigateCalendarOnFocus: "navigateCalendarOnFocus" }, usesInheritance: true, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DateRangeEndInputDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[kendoDateRangeEndInput]'
+                    selector: '[kendoDateRangeEndInput]',
+                    standalone: true
                 }]
         }], ctorParameters: function () { return [{ type: i1.DateRangeService }, { type: i2.DateInputComponent }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.NgZone }]; }, propDecorators: { autoCorrectOn: [{
                 type: Input

package/esm2020/daterange/date-range-popup-template.directive.mjs

@@ -14,10 +14,11 @@ export class DateRangePopupTemplateDirective {
     }
 }
 DateRangePopupTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DateRangePopupTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
-DateRangePopupTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: DateRangePopupTemplateDirective, selector: "[kendoDateRangePopupTemplate]", ngImport: i0 });
+DateRangePopupTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: DateRangePopupTemplateDirective, isStandalone: true, selector: "[kendoDateRangePopupTemplate]", ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DateRangePopupTemplateDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[kendoDateRangePopupTemplate]'
+                    selector: '[kendoDateRangePopupTemplate]',
+                    standalone: true
                 }]
         }], ctorParameters: function () { return [{ type: i0.TemplateRef }]; } });

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

@@ -9,24 +9,21 @@ import { DateRangePopupTemplateDirective } from './date-range-popup-template.dir
 import { DateRangeService } from './date-range.service';
 import { MultiViewCalendarComponent } from '../calendar/multiview-calendar.component';
 import { PreventableEvent } from '../preventable-event';
-import { isDocumentAvailable, guid, Keys, hasObservers } from '@progress/kendo-angular-common';
+import { isDocumentAvailable, guid, Keys, hasObservers, ResizeSensorComponent } from '@progress/kendo-angular-common';
 import { Subscription, fromEvent, merge } from 'rxjs';
 import { filter, map } from 'rxjs/operators';
 import { isWindowAvailable, windowSize } from '../util';
 import { isPresent } from '../common/utils';
 import { xIcon } from '@progress/kendo-svg-icons';
 import { DateRangeSelectionDirective } from './date-range-selection.directive';
-import { ActionSheetComponent } from '@progress/kendo-angular-navigation';
+import { ActionSheetComponent, ActionSheetTemplateDirective } from '@progress/kendo-angular-navigation';
+import { ButtonComponent } from '@progress/kendo-angular-buttons';
+import { NgIf } from '@angular/common';
+import { DateRangePopupLocalizedMessagesDirective } from './localization/daterange-popup-localized-messages.directive';
 import * as i0 from "@angular/core";
 import * as i1 from "@progress/kendo-angular-popup";
 import * as i2 from "./date-range.service";
 import * as i3 from "@progress/kendo-angular-l10n";
-import * as i4 from "@angular/common";
-import * as i5 from "../calendar/multiview-calendar.component";
-import * as i6 from "@progress/kendo-angular-navigation";
-import * as i7 from "@progress/kendo-angular-common";
-import * as i8 from "@progress/kendo-angular-buttons";
-import * as i9 from "./localization/daterange-popup-localized-messages.directive";
 /**
  * Represents the Kendo UI DateRangePopup component for Angular.
  *
@@ -501,7 +498,7 @@ export class DateRangePopupComponent {
     }
 }
 DateRangePopupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DateRangePopupComponent, deps: [{ token: i1.PopupService }, { token: i2.DateRangeService }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: i3.LocalizationService }, { token: i0.ChangeDetectorRef }, { token: RTL, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-DateRangePopupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: DateRangePopupComponent, selector: "kendo-daterange-popup", inputs: { allowReverse: "allowReverse", animate: "animate", anchor: "anchor", anchorAlign: "anchorAlign", appendTo: "appendTo", collision: "collision", popupAlign: "popupAlign", margin: "margin", adaptiveMode: "adaptiveMode", title: "title", subtitle: "subtitle", size: "size" }, outputs: { open: "open", close: "close", onBlur: "blur", onFocus: "focus", cancel: "cancel" }, providers: [
+DateRangePopupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: DateRangePopupComponent, isStandalone: true, selector: "kendo-daterange-popup", inputs: { allowReverse: "allowReverse", animate: "animate", anchor: "anchor", anchorAlign: "anchorAlign", appendTo: "appendTo", collision: "collision", popupAlign: "popupAlign", margin: "margin", adaptiveMode: "adaptiveMode", title: "title", subtitle: "subtitle", size: "size" }, outputs: { open: "open", close: "close", onBlur: "blur", onFocus: "focus", cancel: "cancel" }, providers: [
         LocalizationService,
         {
             provide: L10N_PREFIX,
@@ -607,7 +604,7 @@ DateRangePopupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0"
                 </div>
             </ng-template>
         </kendo-actionsheet>
-    `, isInline: true, dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i5.MultiViewCalendarComponent, selector: "kendo-multiviewcalendar", inputs: ["showOtherMonthDays", "showCalendarHeader", "size", "id", "focusedDate", "footer", "min", "max", "rangeValidation", "disabledDatesRangeValidation", "selection", "allowReverse", "value", "disabled", "tabindex", "tabIndex", "weekDaysFormat", "isActive", "disabledDates", "activeView", "bottomView", "topView", "showViewHeader", "animateNavigation", "weekNumber", "activeRangeEnd", "selectionRange", "views", "orientation", "cellTemplate", "monthCellTemplate", "yearCellTemplate", "decadeCellTemplate", "centuryCellTemplate", "weekNumberTemplate", "footerTemplate", "headerTitleTemplate", "headerTemplate"], outputs: ["activeViewChange", "navigate", "cellEnter", "cellLeave", "valueChange", "rangeSelectionChange", "blur", "focus", "focusCalendar", "onClosePopup", "onTabPress", "onShiftTabPress"], exportAs: ["kendo-multiviewcalendar"] }, { kind: "component", type: i6.ActionSheetComponent, selector: "kendo-actionsheet", inputs: ["title", "subtitle", "items", "cssClass", "animation", "expanded", "titleId"], outputs: ["expandedChange", "expand", "collapse", "itemClick", "overlayClick"], exportAs: ["kendoActionSheet"] }, { kind: "directive", type: i6.ActionSheetTemplateDirective, selector: "[kendoActionSheetTemplate]" }, { kind: "component", type: i7.ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }, { kind: "component", type: i8.ButtonComponent, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "directive", type: i9.DateRangePopupLocalizedMessagesDirective, selector: "[kendoDateRangePopupLocalizedMessages]" }] });
+    `, isInline: true, dependencies: [{ kind: "directive", type: DateRangePopupLocalizedMessagesDirective, selector: "[kendoDateRangePopupLocalizedMessages]" }, { kind: "component", type: MultiViewCalendarComponent, selector: "kendo-multiviewcalendar", inputs: ["showOtherMonthDays", "showCalendarHeader", "size", "id", "focusedDate", "footer", "min", "max", "rangeValidation", "disabledDatesRangeValidation", "selection", "allowReverse", "value", "disabled", "tabindex", "tabIndex", "weekDaysFormat", "isActive", "disabledDates", "activeView", "bottomView", "topView", "showViewHeader", "animateNavigation", "weekNumber", "activeRangeEnd", "selectionRange", "views", "orientation", "cellTemplate", "monthCellTemplate", "yearCellTemplate", "decadeCellTemplate", "centuryCellTemplate", "weekNumberTemplate", "footerTemplate", "headerTitleTemplate", "headerTemplate"], outputs: ["activeViewChange", "navigate", "cellEnter", "cellLeave", "valueChange", "rangeSelectionChange", "blur", "focus", "focusCalendar", "onClosePopup", "onTabPress", "onShiftTabPress"], exportAs: ["kendo-multiviewcalendar"] }, { kind: "component", type: ActionSheetComponent, selector: "kendo-actionsheet", inputs: ["title", "subtitle", "items", "cssClass", "animation", "expanded", "titleId"], outputs: ["expandedChange", "expand", "collapse", "itemClick", "overlayClick"], exportAs: ["kendoActionSheet"] }, { kind: "directive", type: ActionSheetTemplateDirective, selector: "[kendoActionSheetTemplate]" }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }, { kind: "component", type: ButtonComponent, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DateRangePopupComponent, decorators: [{
             type: Component,
             args: [{
@@ -720,7 +717,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                 </div>
             </ng-template>
         </kendo-actionsheet>
-    `
+    `,
+                    standalone: true,
+                    imports: [DateRangePopupLocalizedMessagesDirective, MultiViewCalendarComponent, ActionSheetComponent, ActionSheetTemplateDirective, NgIf, ResizeSensorComponent, ButtonComponent]
                 }]
         }], ctorParameters: function () { return [{ type: i1.PopupService }, { type: i2.DateRangeService }, { type: i0.NgZone }, { type: i0.Renderer2 }, { type: i3.LocalizationService }, { type: i0.ChangeDetectorRef }, { type: undefined, decorators: [{
                     type: Optional

package/esm2020/daterange/date-range-selection.directive.mjs

@@ -193,11 +193,12 @@ export class DateRangeSelectionDirective {
     }
 }
 DateRangeSelectionDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DateRangeSelectionDirective, deps: [{ token: i1.MultiViewCalendarComponent }, { token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i2.DateRangeService, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
-DateRangeSelectionDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: DateRangeSelectionDirective, selector: "[kendoDateRangeSelection]", inputs: { autoCorrectOn: "autoCorrectOn", selectionRange: "selectionRange", activeRangeEnd: "activeRangeEnd", shouldSetRange: "shouldSetRange" }, outputs: { activeRangeEndChange: "activeRangeEndChange", selectionRangeChange: "selectionRangeChange" }, ngImport: i0 });
+DateRangeSelectionDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: DateRangeSelectionDirective, isStandalone: true, selector: "[kendoDateRangeSelection]", inputs: { autoCorrectOn: "autoCorrectOn", selectionRange: "selectionRange", activeRangeEnd: "activeRangeEnd", shouldSetRange: "shouldSetRange" }, outputs: { activeRangeEndChange: "activeRangeEndChange", selectionRangeChange: "selectionRangeChange" }, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DateRangeSelectionDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[kendoDateRangeSelection]'
+                    selector: '[kendoDateRangeSelection]',
+                    standalone: true
                 }]
         }], ctorParameters: function () { return [{ type: i1.MultiViewCalendarComponent }, { type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i2.DateRangeService, decorators: [{
                     type: Optional

package/esm2020/daterange/date-range-start-input.directive.mjs

@@ -82,11 +82,12 @@ export class DateRangeStartInputDirective extends DateRangeInput {
     }
 }
 DateRangeStartInputDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DateRangeStartInputDirective, deps: [{ token: i1.DateRangeService }, { token: i2.DateInputComponent }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive });
-DateRangeStartInputDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: DateRangeStartInputDirective, selector: "[kendoDateRangeStartInput]", inputs: { autoCorrectOn: "autoCorrectOn", navigateCalendarOnFocus: "navigateCalendarOnFocus" }, usesInheritance: true, ngImport: i0 });
+DateRangeStartInputDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: DateRangeStartInputDirective, isStandalone: true, selector: "[kendoDateRangeStartInput]", inputs: { autoCorrectOn: "autoCorrectOn", navigateCalendarOnFocus: "navigateCalendarOnFocus" }, usesInheritance: true, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DateRangeStartInputDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[kendoDateRangeStartInput]'
+                    selector: '[kendoDateRangeStartInput]',
+                    standalone: true
                 }]
         }], ctorParameters: function () { return [{ type: i1.DateRangeService }, { type: i2.DateInputComponent }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.NgZone }]; }, propDecorators: { autoCorrectOn: [{
                 type: Input

package/esm2020/daterange/date-range.component.mjs

@@ -8,10 +8,9 @@ import { packageMetadata } from '../package-metadata';
 import { DateRangePopupComponent } from './date-range-popup.component';
 import { DateRangeService } from './date-range.service';
 import { Keys } from '@progress/kendo-angular-common';
+import { NgIf } from '@angular/common';
 import * as i0 from "@angular/core";
 import * as i1 from "./date-range.service";
-import * as i2 from "@angular/common";
-import * as i3 from "./date-range-popup.component";
 /**
  * Represents the Kendo UI DateRange component for Angular.
  *
@@ -68,10 +67,10 @@ export class DateRangeComponent {
     }
 }
 DateRangeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DateRangeComponent, deps: [{ token: i1.DateRangeService }], target: i0.ɵɵFactoryTarget.Component });
-DateRangeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: DateRangeComponent, selector: "kendo-daterange", inputs: { size: "size" }, host: { listeners: { "keydown": "keydown($event)" }, properties: { "class.k-daterangepicker": "this.wrapperClass" } }, providers: [DateRangeService], queries: [{ propertyName: "contentPopup", predicate: DateRangePopupComponent }], ngImport: i0, template: `
+DateRangeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: DateRangeComponent, isStandalone: true, selector: "kendo-daterange", inputs: { size: "size" }, host: { listeners: { "keydown": "keydown($event)" }, properties: { "class.k-daterangepicker": "this.wrapperClass" } }, providers: [DateRangeService], queries: [{ propertyName: "contentPopup", predicate: DateRangePopupComponent }], ngImport: i0, template: `
         <ng-content></ng-content>
         <kendo-daterange-popup *ngIf="showDefault" [size]="size"></kendo-daterange-popup>
-    `, isInline: true, dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.DateRangePopupComponent, selector: "kendo-daterange-popup", inputs: ["allowReverse", "animate", "anchor", "anchorAlign", "appendTo", "collision", "popupAlign", "margin", "adaptiveMode", "title", "subtitle", "size"], outputs: ["open", "close", "blur", "focus", "cancel"], exportAs: ["kendo-daterange-popup"] }] });
+    `, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: DateRangePopupComponent, selector: "kendo-daterange-popup", inputs: ["allowReverse", "animate", "anchor", "anchorAlign", "appendTo", "collision", "popupAlign", "margin", "adaptiveMode", "title", "subtitle", "size"], outputs: ["open", "close", "blur", "focus", "cancel"], exportAs: ["kendo-daterange-popup"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DateRangeComponent, decorators: [{
             type: Component,
             args: [{
@@ -80,7 +79,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                     template: `
         <ng-content></ng-content>
         <kendo-daterange-popup *ngIf="showDefault" [size]="size"></kendo-daterange-popup>
-    `
+    `,
+                    standalone: true,
+                    imports: [NgIf, DateRangePopupComponent]
                 }]
         }], ctorParameters: function () { return [{ type: i1.DateRangeService }]; }, propDecorators: { size: [{
                 type: Input