@progress/kendo-angular-dateinputs 11.4.0-develop.8 → 11.4.0-develop.9

package/datetimepicker/datetimepicker.component.d.ts

@@ -10,6 +10,7 @@ import { IntlService } from '@progress/kendo-angular-intl';
 import { LocalizationService } from '@progress/kendo-angular-l10n';
 import { PickerService } from '../common/picker.service';
 import { DisabledDatesService } from '../calendar/services/disabled-dates.service';
+import { AdaptiveMode } from '../util';
 import { CalendarComponent } from '../calendar/calendar.component';
 import { TimeSelectorComponent } from '../timepicker/timeselector.component';
 import { DateInputComponent } from '../dateinput/dateinput.component';
@@ -31,6 +32,7 @@ import { DateInputSize } from '../common/models/size';
 import { DateInputRounded } from '../common/models/rounded';
 import { DateInputFillMode } from '../common/models/fillmode';
 import { SVGIcon } from '@progress/kendo-svg-icons';
+import { ActionSheetComponent } from '@progress/kendo-angular-navigation';
 import * as i0 from "@angular/core";
 /**
  * Represents the [Kendo UI DateTimePicker component for Angular]({% slug overview_datetimepicker %}).
@@ -136,9 +138,17 @@ export declare class DateTimePickerComponent implements OnInit, OnChanges, After
     set popupSettings(settings: PopupSettings);
     get popupSettings(): PopupSettings;
     /**
-     * Sets the title of the input element of the DateTimePicker.
+     * Sets the title of the input element of the DateTimePicker and the title text rendered
+     * in the header of the popup(action sheet). Applicable only when [`AdaptiveMode` is set to `auto`](slug:api_dateinputs_adaptivemode).
      */
     title: string;
+    /**
+     * Sets the subtitle text rendered in the header of the popup(action sheet).
+     * Applicable only when [`AdaptiveMode` is set to `auto`](slug:api_dateinputs_adaptivemode).
+     */
+    set subtitle(subtitle: string);
+    get subtitle(): string;
+    private _subtitle;
     /**
      * Sets or gets the `disabled` property of the DateTimePicker and determines whether the component is active
      * ([see example]({% slug disabled_datetimepicker %})).
@@ -238,6 +248,10 @@ export declare class DateTimePickerComponent implements OnInit, OnChanges, After
      * Determines whether the built-in validation for incomplete dates is to be enforced when a form is being validated.
      */
     incompleteDateValidation: boolean;
+    /**
+     * Enables or disables the adaptive mode. By default the adaptive rendering is disabled.
+     */
+    adaptiveMode: AdaptiveMode;
     /**
      * Fires each time the user selects a new value.
      * ([more information and example]({% slug overview_datetimepicker %}#toc-methods-and-events)).
@@ -266,7 +280,7 @@ export declare class DateTimePickerComponent implements OnInit, OnChanges, After
      */
     onBlur: EventEmitter<any>;
     /**
-     * Indicates whether the component is currently open.
+     * Indicates whether the component is currently open. That is when the popup or actionSheet is open.
      */
     get isOpen(): boolean;
     /**
@@ -335,6 +349,18 @@ export declare class DateTimePickerComponent implements OnInit, OnChanges, After
      * The inactive tab component gets disabled and becomes inaccessible on tab click.
      */
     get disableTimeSelector(): boolean;
+    /**
+     * @hidden
+     */
+    get isAdaptiveModeEnabled(): boolean;
+    /**
+     * @hidden
+     */
+    get isAdaptive(): boolean;
+    /**
+     * @hidden
+     */
+    onResize(): void;
     /**
      * @hidden
      *
@@ -368,6 +394,10 @@ export declare class DateTimePickerComponent implements OnInit, OnChanges, After
      * @hidden
      */
     calendarMax: Date;
+    /**
+     * @hidden
+     */
+    xIcon: SVGIcon;
     /**
      * @hidden
      */
@@ -400,6 +430,7 @@ export declare class DateTimePickerComponent implements OnInit, OnChanges, After
     private get appendTo();
     private container;
     private popupTemplate;
+    actionSheet: ActionSheetComponent;
     private get popupUID();
     private popupRef;
     private _popupSettings;
@@ -419,9 +450,11 @@ export declare class DateTimePickerComponent implements OnInit, OnChanges, After
     private disabledDatesValidateFn;
     private incompleteValidator;
     private subscriptions;
+    private ariaActiveDescendantSubscription;
     private _size;
     private _rounded;
     private _fillMode;
+    private windowSize;
     constructor(popupService: PopupService, intl: IntlService, cdr: ChangeDetectorRef, pickerService: PickerService, ngZone: NgZone, wrapper: ElementRef<HTMLElement>, touchEnabled: boolean, localization: LocalizationService, disabledDatesService: DisabledDatesService, renderer: Renderer2);
     ngOnInit(): void;
     ngAfterViewInit(): void;
@@ -437,7 +470,8 @@ export declare class DateTimePickerComponent implements OnInit, OnChanges, After
      */
     blur(): void;
     /**
-     * Toggles the visibility of the popup. If you use the `toggle` method to show or hide the popup,
+     * Toggles the visibility of the popup or actionSheet.
+     * If you use the `toggle` method to show or hide the popup or actionSheet,
      * the `open` and `close` events do not fire.
      * ([more information and example]({% slug overview_datetimepicker %}#toc-methods-and-events)).
      *
@@ -506,6 +540,10 @@ export declare class DateTimePickerComponent implements OnInit, OnChanges, After
      * @hidden
      */
     handleInputValueChange(value: Date): void;
+    /**
+     * @hidden
+     */
+    handleDateInputClick(): void;
     /**
      * @hidden
      */
@@ -522,6 +560,10 @@ export declare class DateTimePickerComponent implements OnInit, OnChanges, After
      * @hidden
      */
     handleBackTabOut(event: KeyboardEvent): void;
+    /**
+     * @hidden
+     */
+    handleActionSheetCollapse(): void;
     /**
      * @hidden
      */
@@ -532,6 +574,13 @@ export declare class DateTimePickerComponent implements OnInit, OnChanges, After
      * Prevents the diversion of the focus from the currently active element in the component.
      */
     preventMouseDown(event: MouseEvent): void;
+    private _togglePopup;
+    private toggleActionSheet;
+    private updateActionSheetAdaptiveAppearance;
+    /**
+     * Changes the tab and the calendar or clock icon to the designated default.
+     */
+    private resetActiveTab;
     private verifyValue;
     private verifyMinMaxRange;
     /**
@@ -552,9 +601,13 @@ export declare class DateTimePickerComponent implements OnInit, OnChanges, After
      * Literals will be left only if they are not preceded by date parts.
      */
     private timeFormatPartFilter;
-    private togglePopup;
+    /**
+     * @hidden
+     */
+    toggleDateTime(open: boolean): void;
     private switchFocus;
     private openPopup;
+    private setAriaActiveDescendant;
     private closePopup;
     private handleValueChange;
     /**
@@ -576,5 +629,5 @@ export declare class DateTimePickerComponent implements OnInit, OnChanges, After
     private handleDateCompletenessChange;
     private setComponentClasses;
     static ɵfac: i0.ɵɵFactoryDeclaration<DateTimePickerComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<DateTimePickerComponent, "kendo-datetimepicker", ["kendo-datetimepicker"], { "focusableId": "focusableId"; "value": "value"; "format": "format"; "twoDigitYearMax": "twoDigitYearMax"; "tabindex": "tabindex"; "disabledDates": "disabledDates"; "popupSettings": "popupSettings"; "title": "title"; "disabled": "disabled"; "readonly": "readonly"; "readOnlyInput": "readOnlyInput"; "cancelButton": "cancelButton"; "formatPlaceholder": "formatPlaceholder"; "placeholder": "placeholder"; "steps": "steps"; "focusedDate": "focusedDate"; "calendarType": "calendarType"; "animateCalendarNavigation": "animateCalendarNavigation"; "weekNumber": "weekNumber"; "min": "min"; "max": "max"; "rangeValidation": "rangeValidation"; "disabledDatesValidation": "disabledDatesValidation"; "incompleteDateValidation": "incompleteDateValidation"; "defaultTab": "defaultTab"; "size": "size"; "rounded": "rounded"; "fillMode": "fillMode"; }, { "valueChange": "valueChange"; "open": "open"; "close": "close"; "onFocus": "focus"; "onBlur": "blur"; }, ["cellTemplate", "monthCellTemplate", "yearCellTemplate", "decadeCellTemplate", "centuryCellTemplate", "weekNumberTemplate", "headerTitleTemplate"], never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DateTimePickerComponent, "kendo-datetimepicker", ["kendo-datetimepicker"], { "focusableId": "focusableId"; "value": "value"; "format": "format"; "twoDigitYearMax": "twoDigitYearMax"; "tabindex": "tabindex"; "disabledDates": "disabledDates"; "popupSettings": "popupSettings"; "title": "title"; "subtitle": "subtitle"; "disabled": "disabled"; "readonly": "readonly"; "readOnlyInput": "readOnlyInput"; "cancelButton": "cancelButton"; "formatPlaceholder": "formatPlaceholder"; "placeholder": "placeholder"; "steps": "steps"; "focusedDate": "focusedDate"; "calendarType": "calendarType"; "animateCalendarNavigation": "animateCalendarNavigation"; "weekNumber": "weekNumber"; "min": "min"; "max": "max"; "rangeValidation": "rangeValidation"; "disabledDatesValidation": "disabledDatesValidation"; "incompleteDateValidation": "incompleteDateValidation"; "adaptiveMode": "adaptiveMode"; "defaultTab": "defaultTab"; "size": "size"; "rounded": "rounded"; "fillMode": "fillMode"; }, { "valueChange": "valueChange"; "open": "open"; "close": "close"; "onFocus": "focus"; "onBlur": "blur"; }, ["cellTemplate", "monthCellTemplate", "yearCellTemplate", "decadeCellTemplate", "centuryCellTemplate", "weekNumberTemplate", "headerTitleTemplate"], never>;
 }

package/datetimepicker/datetimepicker.module.d.ts

@@ -15,12 +15,13 @@ import * as i9 from "@progress/kendo-angular-popup";
 import * as i10 from "@progress/kendo-angular-common";
 import * as i11 from "../calendar/templates.module";
 import * as i12 from "@progress/kendo-angular-icons";
+import * as i13 from "../common/adaptive.module";
 /**
  * Represents the [NgModule](link:site.data.urls.angular['ngmoduleapi'])
  * definition for the DateTimePicker component.
  */
 export declare class DateTimePickerModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<DateTimePickerModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<DateTimePickerModule, [typeof i1.DateTimePickerComponent, typeof i2.DateTimePickerCustomMessagesComponent, typeof i3.LocalizedMessagesDirective], [typeof i4.CommonModule, typeof i5.IntlModule, typeof i6.DateInputModule, typeof i7.CalendarModule, typeof i8.TimePickerModule, typeof i9.PopupModule, typeof i10.EventsModule, typeof i11.TemplatesModule, typeof i12.IconsModule], [typeof i1.DateTimePickerComponent, typeof i2.DateTimePickerCustomMessagesComponent, typeof i3.LocalizedMessagesDirective, typeof i11.TemplatesModule]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<DateTimePickerModule, [typeof i1.DateTimePickerComponent, typeof i2.DateTimePickerCustomMessagesComponent, typeof i3.LocalizedMessagesDirective], [typeof i4.CommonModule, typeof i5.IntlModule, typeof i6.DateInputModule, typeof i7.CalendarModule, typeof i8.TimePickerModule, typeof i9.PopupModule, typeof i10.EventsModule, typeof i11.TemplatesModule, typeof i12.IconsModule, typeof i13.AdaptiveModule], [typeof i1.DateTimePickerComponent, typeof i2.DateTimePickerCustomMessagesComponent, typeof i3.LocalizedMessagesDirective, typeof i11.TemplatesModule]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<DateTimePickerModule>;
 }

package/esm2020/calendar/calendar.component.mjs

@@ -31,7 +31,7 @@ import { CalendarViewEnum } from './models/view.enum';
 import { minValidator } from '../validators/min.validator';
 import { maxValidator } from '../validators/max.validator';
 import { MIN_DATE, MAX_DATE } from '../defaults';
-import { areDatesEqual, dateInRange, getToday, hasExistingValue, last, noop } from '../util';
+import { areDatesEqual, dateInRange, DEFAULT_SIZE, getSizeClass, getToday, hasExistingValue, last, noop } from '../util';
 import { closest } from '../common/dom-queries';
 import { requiresZoneOnBlur, preventDefault, isPresent, isArrowWithShiftPressed, selectors, attributeNames } from '../common/utils';
 import { from as fromPromise } from 'rxjs';
@@ -202,6 +202,7 @@ export class CalendarComponent {
          * ([more information and example]({% slug overview_calendar %}#toc-events)).
          */
         this.valueChange = new EventEmitter();
+        this._size = DEFAULT_SIZE;
         this.isActive = false;
         this.cellUID = guid();
         this.selectedDates = [];
@@ -438,6 +439,31 @@ export class CalendarComponent {
     get navigationItemTemplateRef() {
         return this._navigationItemTemplateRef || this.navigationItemTemplate;
     }
+    /**
+     * @hidden
+     *
+     * TODO: Make visible when true sizing of all calendar elements is implemented
+     * Sets the size of the component.
+     *
+     * The possible values are:
+     * * `small`
+     * * `medium` (Default)
+     * * `large`
+     * * `none`
+     *
+     */
+    set size(size) {
+        const element = this.type === 'infinite' ? this.element : this.multiViewCalendar.element;
+        this.renderer.removeClass(element.nativeElement, getSizeClass('calendar', this.size));
+        const newSize = size ? size : DEFAULT_SIZE;
+        if (newSize !== 'none') {
+            this.renderer.addClass(element.nativeElement, getSizeClass('calendar', newSize));
+        }
+        this._size = newSize;
+    }
+    get size() {
+        return this._size;
+    }
     get activeViewEnum() {
         const activeView = CalendarViewEnum[this.activeView];
         return activeView < this.bottomViewEnum ? this.bottomViewEnum : activeView;
@@ -488,6 +514,10 @@ export class CalendarComponent {
     }
     ngAfterViewInit() {
         this.setAriaActivedescendant();
+        if (this.size !== 'none') {
+            const element = this.type === 'infinite' ? this.element : this.multiViewCalendar.element;
+            this.renderer.addClass(element.nativeElement, getSizeClass('calendar', this.size));
+        }
     }
     ngAfterViewChecked() {
         if (!this.syncNavigation) {
@@ -924,7 +954,7 @@ export class CalendarComponent {
     }
 }
 CalendarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: CalendarComponent, deps: [{ token: i1.BusViewService }, { token: i2.CalendarDOMService }, { token: i0.ElementRef }, { token: i3.NavigationService }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: i0.Injector }, { token: i4.ScrollSyncService }, { token: i5.DisabledDatesService }, { token: i6.LocalizationService }, { token: i7.SelectionService }, { token: i8.PickerService, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-CalendarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: CalendarComponent, selector: "kendo-calendar", inputs: { id: "id", focusedDate: "focusedDate", min: "min", max: "max", rangeValidation: "rangeValidation", selection: "selection", value: "value", disabled: "disabled", tabindex: "tabindex", tabIndex: "tabIndex", disabledDates: "disabledDates", navigation: "navigation", activeView: "activeView", bottomView: "bottomView", topView: "topView", type: "type", animateNavigation: "animateNavigation", weekNumber: "weekNumber", cellTemplateRef: ["cellTemplate", "cellTemplateRef"], monthCellTemplateRef: ["monthCellTemplate", "monthCellTemplateRef"], yearCellTemplateRef: ["yearCellTemplate", "yearCellTemplateRef"], decadeCellTemplateRef: ["decadeCellTemplate", "decadeCellTemplateRef"], centuryCellTemplateRef: ["centuryCellTemplate", "centuryCellTemplateRef"], weekNumberTemplateRef: ["weekNumberTemplate", "weekNumberTemplateRef"], headerTitleTemplateRef: ["headerTitleTemplate", "headerTitleTemplateRef"], navigationItemTemplateRef: ["navigationItemTemplate", "navigationItemTemplateRef"] }, outputs: { activeViewChange: "activeViewChange", navigate: "navigate", activeViewDateChange: "activeViewDateChange", onBlur: "blur", onFocus: "focus", valueChange: "valueChange" }, host: { properties: { "class.k-week-number": "this.weekNumber", "attr.id": "this.widgetId", "attr.aria-disabled": "this.ariaDisabled", "class.k-disabled": "this.ariaDisabled" } }, providers: [
+CalendarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: CalendarComponent, selector: "kendo-calendar", inputs: { id: "id", focusedDate: "focusedDate", min: "min", max: "max", rangeValidation: "rangeValidation", selection: "selection", value: "value", disabled: "disabled", tabindex: "tabindex", tabIndex: "tabIndex", disabledDates: "disabledDates", navigation: "navigation", activeView: "activeView", bottomView: "bottomView", topView: "topView", type: "type", animateNavigation: "animateNavigation", weekNumber: "weekNumber", cellTemplateRef: ["cellTemplate", "cellTemplateRef"], monthCellTemplateRef: ["monthCellTemplate", "monthCellTemplateRef"], yearCellTemplateRef: ["yearCellTemplate", "yearCellTemplateRef"], decadeCellTemplateRef: ["decadeCellTemplate", "decadeCellTemplateRef"], centuryCellTemplateRef: ["centuryCellTemplate", "centuryCellTemplateRef"], weekNumberTemplateRef: ["weekNumberTemplate", "weekNumberTemplateRef"], headerTitleTemplateRef: ["headerTitleTemplate", "headerTitleTemplateRef"], navigationItemTemplateRef: ["navigationItemTemplate", "navigationItemTemplateRef"], size: "size" }, outputs: { activeViewChange: "activeViewChange", navigate: "navigate", activeViewDateChange: "activeViewDateChange", onBlur: "blur", onFocus: "focus", valueChange: "valueChange" }, host: { properties: { "class.k-week-number": "this.weekNumber", "attr.id": "this.widgetId", "attr.aria-disabled": "this.ariaDisabled", "class.k-disabled": "this.ariaDisabled" } }, providers: [
         BusViewService,
         CALENDAR_VALUE_ACCESSOR,
         CALENDAR_RANGE_VALIDATORS,
@@ -1263,6 +1293,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
             }], navigationItemTemplateRef: [{
                 type: Input,
                 args: ['navigationItemTemplate']
+            }], size: [{
+                type: Input
             }], navigationView: [{
                 type: ViewChild,
                 args: [NavigationComponent, { static: false }]

package/esm2020/calendar/multiview-calendar.component.mjs

@@ -580,7 +580,8 @@ export class MultiViewCalendarComponent {
         if (!this.element) {
             return;
         }
-        this.element.nativeElement.querySelector('.k-calendar-view').focus();
+        // Prevent the content from auto-scrolling when daterange is in adaptive mode
+        this.element.nativeElement.querySelector('.k-calendar-view').focus({ preventScroll: true });
     }
     /**
      * Blurs the Calendar component.

package/esm2020/common/adaptive.module.mjs

@@ -0,0 +1,41 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2023 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { NgModule } from '@angular/core';
+import { ResizeSensorModule } from '@progress/kendo-angular-common';
+import { NavigationModule } from '@progress/kendo-angular-navigation';
+import { ButtonModule } from '@progress/kendo-angular-buttons';
+import { TextBoxModule } from '@progress/kendo-angular-inputs';
+import * as i0 from "@angular/core";
+const ADAPTIVE_MODULES = [
+    NavigationModule,
+    ResizeSensorModule,
+    ButtonModule,
+    TextBoxModule
+];
+/**
+ * Represents the [NgModule](link:site.data.urls.angular['ngmoduleapi'])
+ * definition for the modules specific to the Adaptive Mode.
+ */
+export class AdaptiveModule {
+}
+AdaptiveModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: AdaptiveModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+AdaptiveModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: AdaptiveModule, imports: [NavigationModule,
+        ResizeSensorModule,
+        ButtonModule,
+        TextBoxModule], exports: [NavigationModule,
+        ResizeSensorModule,
+        ButtonModule,
+        TextBoxModule] });
+AdaptiveModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: AdaptiveModule, imports: [[...ADAPTIVE_MODULES], NavigationModule,
+        ResizeSensorModule,
+        ButtonModule,
+        TextBoxModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: AdaptiveModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [...ADAPTIVE_MODULES],
+                    exports: [...ADAPTIVE_MODULES]
+                }]
+        }] });