@progress/kendo-angular-dateinputs 7.0.1 → 7.1.0-dev.202207291058

package/calendar/header.component.d.ts

@@ -7,6 +7,7 @@ import { LocalizationService } from '@progress/kendo-angular-l10n';
 import { IntlService } from '@progress/kendo-angular-intl';
 import { CalendarView } from './models/view.type';
 import { CalendarViewEnum } from './models/view.enum';
+import { CalendarOrientation } from './models/orientation';
 import { BusViewService } from './services/bus-view.service';
 import { DisabledDatesService } from './services/disabled-dates.service';
 import * as i0 from "@angular/core";
@@ -35,10 +36,13 @@ export declare class HeaderComponent implements OnChanges, OnInit, OnDestroy {
     isPrevDisabled: boolean;
     isNextDisabled: boolean;
     showNavigationButtons: boolean;
+    orientation: CalendarOrientation;
     todayButtonClick: EventEmitter<Date>;
     prevButtonClick: EventEmitter<any>;
     nextButtonClick: EventEmitter<any>;
     getComponentClass: boolean;
+    get horizontalHostClass(): boolean;
+    get verticalHostClass(): boolean;
     private subscriptions;
     constructor(bus: BusViewService, cdr: ChangeDetectorRef, localization: LocalizationService, intl: IntlService, disabledDatesService: DisabledDatesService);
     ngOnInit(): void;
@@ -51,5 +55,5 @@ export declare class HeaderComponent implements OnChanges, OnInit, OnDestroy {
     private getTitle;
     private setTodayAvailability;
     static ɵfac: i0.ɵɵFactoryDeclaration<HeaderComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<HeaderComponent, "kendo-calendar-header", never, { "activeView": "activeView"; "currentDate": "currentDate"; "min": "min"; "max": "max"; "rangeLength": "rangeLength"; "templateRef": "templateRef"; "isPrevDisabled": "isPrevDisabled"; "isNextDisabled": "isNextDisabled"; "showNavigationButtons": "showNavigationButtons"; }, { "todayButtonClick": "todayButtonClick"; "prevButtonClick": "prevButtonClick"; "nextButtonClick": "nextButtonClick"; }, never, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<HeaderComponent, "kendo-calendar-header", never, { "activeView": "activeView"; "currentDate": "currentDate"; "min": "min"; "max": "max"; "rangeLength": "rangeLength"; "templateRef": "templateRef"; "isPrevDisabled": "isPrevDisabled"; "isNextDisabled": "isNextDisabled"; "showNavigationButtons": "showNavigationButtons"; "orientation": "orientation"; }, { "todayButtonClick": "todayButtonClick"; "prevButtonClick": "prevButtonClick"; "nextButtonClick": "nextButtonClick"; }, never, never>;
 }

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

@@ -11,6 +11,7 @@ import { SelectionRangeEnd } from './models/selection-range-end.type';
 import { SelectionRange } from './models/selection-range.interface';
 import { Action } from './models/navigation-action.enum';
 import { CalendarViewEnum } from './models/view.enum';
+import { CalendarOrientation } from './models/orientation';
 import * as i0 from "@angular/core";
 /**
  * @hidden
@@ -36,6 +37,7 @@ export declare class HorizontalViewListComponent implements OnChanges, AfterView
     views: number;
     showViewHeader: boolean;
     animateNavigation: boolean;
+    orientation: CalendarOrientation;
     get weekNumber(): boolean;
     set weekNumber(showWeekNumbers: boolean);
     cellClick: EventEmitter<any>;
@@ -44,6 +46,8 @@ export declare class HorizontalViewListComponent implements OnChanges, AfterView
     cellLeave: EventEmitter<Date>;
     activeDateChange: EventEmitter<Date>;
     getComponentClass: boolean;
+    get horizontalHostClass(): boolean;
+    get verticalHostClass(): boolean;
     get getComponentMonthClass(): boolean;
     get getComponentYearClass(): boolean;
     get getComponentDecadeClass(): boolean;
@@ -78,5 +82,5 @@ export declare class HorizontalViewListComponent implements OnChanges, AfterView
     private isInDates;
     private getTake;
     static ɵfac: i0.ɵɵFactoryDeclaration<HorizontalViewListComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<HorizontalViewListComponent, "kendo-calendar-horizontal", never, { "cellTemplateRef": "cellTemplateRef"; "weekNumberTemplateRef": "weekNumberTemplateRef"; "activeRangeEnd": "activeRangeEnd"; "activeView": "activeView"; "cellUID": "cellUID"; "focusedDate": "focusedDate"; "isActive": "isActive"; "min": "min"; "max": "max"; "selectionRange": "selectionRange"; "selectedDates": "selectedDates"; "views": "views"; "showViewHeader": "showViewHeader"; "animateNavigation": "animateNavigation"; "weekNumber": "weekNumber"; }, { "cellClick": "cellClick"; "weekNumberCellClick": "weekNumberCellClick"; "cellEnter": "cellEnter"; "cellLeave": "cellLeave"; "activeDateChange": "activeDateChange"; }, never, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<HorizontalViewListComponent, "kendo-calendar-horizontal", never, { "cellTemplateRef": "cellTemplateRef"; "weekNumberTemplateRef": "weekNumberTemplateRef"; "activeRangeEnd": "activeRangeEnd"; "activeView": "activeView"; "cellUID": "cellUID"; "focusedDate": "focusedDate"; "isActive": "isActive"; "min": "min"; "max": "max"; "selectionRange": "selectionRange"; "selectedDates": "selectedDates"; "views": "views"; "showViewHeader": "showViewHeader"; "animateNavigation": "animateNavigation"; "orientation": "orientation"; "weekNumber": "weekNumber"; }, { "cellClick": "cellClick"; "weekNumberCellClick": "weekNumberCellClick"; "cellEnter": "cellEnter"; "cellLeave": "cellLeave"; "activeDateChange": "activeDateChange"; }, never, never>;
 }

package/calendar/models/orientation.d.ts

@@ -0,0 +1,8 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+/**
+ * Specifies the Calendar orientation.
+ */
+export declare type CalendarOrientation = 'horizontal' | 'vertical';

package/calendar/multiview-calendar.component.d.ts

@@ -24,6 +24,7 @@ import { CalendarViewEnum } from './models/view.enum';
 import { SelectionRangeEnd } from './models/selection-range-end.type';
 import { SelectionRange } from './models/selection-range.interface';
 import { CalendarSelection } from './models/selection';
+import { CalendarOrientation } from './models/orientation';
 import * as i0 from "@angular/core";
 /**
  * @hidden
@@ -193,6 +194,14 @@ export declare class MultiViewCalendarComponent implements AfterViewInit, Contro
      * defines the number of rendered months.
      */
     views: number;
+    /**
+     * Specifies the orientation of the MultiViewCalendar.
+     *
+     * The available values are:
+     * * `horizontal` (default)
+     * * `vertical`
+     */
+    orientation: CalendarOrientation;
     /**
      * Fires when the active view is changed
      * ([more information and example]({% slug overview_multiviewcalendar %}#toc-events)).
@@ -500,5 +509,5 @@ export declare class MultiViewCalendarComponent implements AfterViewInit, Contro
     private parseSelectionToValue;
     private performSelection;
     static ɵfac: i0.ɵɵFactoryDeclaration<MultiViewCalendarComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<MultiViewCalendarComponent, "kendo-multiviewcalendar", ["kendo-multiviewcalendar"], { "id": "id"; "focusedDate": "focusedDate"; "min": "min"; "max": "max"; "rangeValidation": "rangeValidation"; "disabledDatesRangeValidation": "disabledDatesRangeValidation"; "selection": "selection"; "value": "value"; "disabled": "disabled"; "tabindex": "tabindex"; "tabIndex": "tabIndex"; "isActive": "isActive"; "disabledDates": "disabledDates"; "activeView": "activeView"; "bottomView": "bottomView"; "topView": "topView"; "showViewHeader": "showViewHeader"; "animateNavigation": "animateNavigation"; "weekNumber": "weekNumber"; "activeRangeEnd": "activeRangeEnd"; "selectionRange": "selectionRange"; "views": "views"; "cellTemplateRef": "cellTemplate"; "monthCellTemplateRef": "monthCellTemplate"; "yearCellTemplateRef": "yearCellTemplate"; "decadeCellTemplateRef": "decadeCellTemplate"; "centuryCellTemplateRef": "centuryCellTemplate"; "weekNumberTemplateRef": "weekNumberTemplate"; "headerTitleTemplateRef": "headerTitleTemplate"; }, { "activeViewChange": "activeViewChange"; "navigate": "navigate"; "cellEnter": "cellEnter"; "cellLeave": "cellLeave"; "valueChange": "valueChange"; "blurEvent": "blur"; }, ["cellTemplate", "monthCellTemplate", "yearCellTemplate", "decadeCellTemplate", "centuryCellTemplate", "weekNumberTemplate", "headerTitleTemplate"], never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MultiViewCalendarComponent, "kendo-multiviewcalendar", ["kendo-multiviewcalendar"], { "id": "id"; "focusedDate": "focusedDate"; "min": "min"; "max": "max"; "rangeValidation": "rangeValidation"; "disabledDatesRangeValidation": "disabledDatesRangeValidation"; "selection": "selection"; "value": "value"; "disabled": "disabled"; "tabindex": "tabindex"; "tabIndex": "tabIndex"; "isActive": "isActive"; "disabledDates": "disabledDates"; "activeView": "activeView"; "bottomView": "bottomView"; "topView": "topView"; "showViewHeader": "showViewHeader"; "animateNavigation": "animateNavigation"; "weekNumber": "weekNumber"; "activeRangeEnd": "activeRangeEnd"; "selectionRange": "selectionRange"; "views": "views"; "orientation": "orientation"; "cellTemplateRef": "cellTemplate"; "monthCellTemplateRef": "monthCellTemplate"; "yearCellTemplateRef": "yearCellTemplate"; "decadeCellTemplateRef": "decadeCellTemplate"; "centuryCellTemplateRef": "centuryCellTemplate"; "weekNumberTemplateRef": "weekNumberTemplate"; "headerTitleTemplateRef": "headerTitleTemplate"; }, { "activeViewChange": "activeViewChange"; "navigate": "navigate"; "cellEnter": "cellEnter"; "cellLeave": "cellLeave"; "valueChange": "valueChange"; "blurEvent": "blur"; }, ["cellTemplate", "monthCellTemplate", "yearCellTemplate", "decadeCellTemplate", "centuryCellTemplate", "weekNumberTemplate", "headerTitleTemplate"], never>;
 }

package/esm2015/calendar/calendar.component.js

@@ -985,7 +985,7 @@ CalendarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", vers
             </kendo-multiviewcalendar-messages>
         </kendo-multiviewcalendar>
     </ng-container>
-  `, isInline: true, components: [{ type: i9.NavigationComponent, selector: "kendo-calendar-navigation", inputs: ["activeView", "min", "max", "focusedDate", "templateRef"], outputs: ["valueChange", "pageChange"] }, { type: i10.ViewListComponent, selector: "kendo-calendar-viewlist", inputs: ["cellTemplateRef", "weekNumberTemplateRef", "headerTitleTemplateRef", "activeView", "cellUID", "focusedDate", "isActive", "min", "max", "selectedDates", "weekNumber"], outputs: ["cellClick", "weekNumberCellClick", "activeDateChange", "todayButtonClick", "pageChange"] }, { type: i11.ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }, { type: i12.MultiViewCalendarComponent, selector: "kendo-multiviewcalendar", inputs: ["id", "focusedDate", "min", "max", "rangeValidation", "disabledDatesRangeValidation", "selection", "value", "disabled", "tabindex", "tabIndex", "isActive", "disabledDates", "activeView", "bottomView", "topView", "showViewHeader", "animateNavigation", "weekNumber", "activeRangeEnd", "selectionRange", "views", "cellTemplate", "monthCellTemplate", "yearCellTemplate", "decadeCellTemplate", "centuryCellTemplate", "weekNumberTemplate", "headerTitleTemplate"], outputs: ["activeViewChange", "navigate", "cellEnter", "cellLeave", "valueChange", "blur"], exportAs: ["kendo-multiviewcalendar"] }, { type: i13.MultiViewCalendarCustomMessagesComponent, selector: "kendo-multiviewcalendar-messages" }], directives: [{ type: i14.CalendarLocalizedMessagesDirective, selector: "[kendoCalendarLocalizedMessages]" }, { type: i15.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, components: [{ type: i9.NavigationComponent, selector: "kendo-calendar-navigation", inputs: ["activeView", "min", "max", "focusedDate", "templateRef"], outputs: ["valueChange", "pageChange"] }, { type: i10.ViewListComponent, selector: "kendo-calendar-viewlist", inputs: ["cellTemplateRef", "weekNumberTemplateRef", "headerTitleTemplateRef", "activeView", "cellUID", "focusedDate", "isActive", "min", "max", "selectedDates", "weekNumber"], outputs: ["cellClick", "weekNumberCellClick", "activeDateChange", "todayButtonClick", "pageChange"] }, { type: i11.ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }, { type: i12.MultiViewCalendarComponent, selector: "kendo-multiviewcalendar", inputs: ["id", "focusedDate", "min", "max", "rangeValidation", "disabledDatesRangeValidation", "selection", "value", "disabled", "tabindex", "tabIndex", "isActive", "disabledDates", "activeView", "bottomView", "topView", "showViewHeader", "animateNavigation", "weekNumber", "activeRangeEnd", "selectionRange", "views", "orientation", "cellTemplate", "monthCellTemplate", "yearCellTemplate", "decadeCellTemplate", "centuryCellTemplate", "weekNumberTemplate", "headerTitleTemplate"], outputs: ["activeViewChange", "navigate", "cellEnter", "cellLeave", "valueChange", "blur"], exportAs: ["kendo-multiviewcalendar"] }, { type: i13.MultiViewCalendarCustomMessagesComponent, selector: "kendo-multiviewcalendar-messages" }], directives: [{ type: i14.CalendarLocalizedMessagesDirective, selector: "[kendoCalendarLocalizedMessages]" }, { type: i15.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: CalendarComponent, decorators: [{
             type: Component,
             args: [{

package/esm2015/calendar/header.component.js

@@ -33,12 +33,19 @@ export class HeaderComponent {
         this.isPrevDisabled = true;
         this.isNextDisabled = true;
         this.showNavigationButtons = false;
+        this.orientation = 'horizontal';
         this.todayButtonClick = new EventEmitter();
         this.prevButtonClick = new EventEmitter();
         this.nextButtonClick = new EventEmitter();
         this.getComponentClass = true;
         this.subscriptions = new Subscription();
     }
+    get horizontalHostClass() {
+        return this.orientation === 'horizontal';
+    }
+    get verticalHostClass() {
+        return this.orientation === 'vertical';
+    }
     ngOnInit() {
         this.subscriptions.add(this.intl.changes.subscribe(this.intlChange.bind(this)));
         this.subscriptions.add(this.localization.changes.subscribe(this.l10nChange.bind(this)));
@@ -105,7 +112,7 @@ export class HeaderComponent {
     }
 }
 HeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: HeaderComponent, deps: [{ token: i1.BusViewService }, { token: i0.ChangeDetectorRef }, { token: i2.LocalizationService }, { token: i3.IntlService }, { token: i4.DisabledDatesService }], target: i0.ɵɵFactoryTarget.Component });
-HeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: HeaderComponent, selector: "kendo-calendar-header", inputs: { activeView: "activeView", currentDate: "currentDate", min: "min", max: "max", rangeLength: "rangeLength", templateRef: "templateRef", isPrevDisabled: "isPrevDisabled", isNextDisabled: "isNextDisabled", showNavigationButtons: "showNavigationButtons" }, outputs: { todayButtonClick: "todayButtonClick", prevButtonClick: "prevButtonClick", nextButtonClick: "nextButtonClick" }, host: { properties: { "class.k-calendar-header": "this.getComponentClass", "class.k-hstack": "this.getComponentClass" } }, usesOnChanges: true, ngImport: i0, template: `
+HeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: HeaderComponent, selector: "kendo-calendar-header", inputs: { activeView: "activeView", currentDate: "currentDate", min: "min", max: "max", rangeLength: "rangeLength", templateRef: "templateRef", isPrevDisabled: "isPrevDisabled", isNextDisabled: "isNextDisabled", showNavigationButtons: "showNavigationButtons", orientation: "orientation" }, outputs: { todayButtonClick: "todayButtonClick", prevButtonClick: "prevButtonClick", nextButtonClick: "nextButtonClick" }, host: { properties: { "class.k-calendar-header": "this.getComponentClass", "class.k-hstack": "this.horizontalHostClass", "class.k-vstack": "this.verticalHostClass" } }, usesOnChanges: true, ngImport: i0, template: `
     <span class="k-button k-button-md k-rounded-md k-button-flat k-button-flat-base k-calendar-title" [class.k-disabled]="!navigate"
         [kendoEventsOutsideAngular]="{
             click: handleNavigation
@@ -226,6 +233,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 type: Input
             }], showNavigationButtons: [{
                 type: Input
+            }], orientation: [{
+                type: Input
             }], todayButtonClick: [{
                 type: Output
             }], prevButtonClick: [{
@@ -235,7 +244,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
             }], getComponentClass: [{
                 type: HostBinding,
                 args: ["class.k-calendar-header"]
-            }, {
+            }], horizontalHostClass: [{
                 type: HostBinding,
                 args: ["class.k-hstack"]
+            }], verticalHostClass: [{
+                type: HostBinding,
+                args: ["class.k-vstack"]
             }] } });

package/esm2015/calendar/horizontal-view-list.component.js

@@ -38,6 +38,7 @@ export class HorizontalViewListComponent {
         this.views = DEFAULT_VIEWS_LENGTH;
         this.showViewHeader = false;
         this.animateNavigation = false;
+        this.orientation = 'horizontal';
         this.cellClick = new EventEmitter();
         this.weekNumberCellClick = new EventEmitter();
         this.cellEnter = new EventEmitter();
@@ -54,6 +55,12 @@ export class HorizontalViewListComponent {
     set weekNumber(showWeekNumbers) {
         this.showWeekNumbers = showWeekNumbers;
     }
+    get horizontalHostClass() {
+        return this.orientation === 'horizontal';
+    }
+    get verticalHostClass() {
+        return this.orientation === 'vertical';
+    }
     get getComponentMonthClass() {
         return this.activeView === CalendarViewEnum.month;
     }
@@ -221,7 +228,7 @@ export class HorizontalViewListComponent {
     }
 }
 HorizontalViewListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: HorizontalViewListComponent, deps: [{ token: i1.BusViewService }, { token: i2.IntlService }, { token: i3.WeekNamesService }, { token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
-HorizontalViewListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: HorizontalViewListComponent, selector: "kendo-calendar-horizontal", inputs: { cellTemplateRef: "cellTemplateRef", weekNumberTemplateRef: "weekNumberTemplateRef", activeRangeEnd: "activeRangeEnd", activeView: "activeView", cellUID: "cellUID", focusedDate: "focusedDate", isActive: "isActive", min: "min", max: "max", selectionRange: "selectionRange", selectedDates: "selectedDates", views: "views", showViewHeader: "showViewHeader", animateNavigation: "animateNavigation", weekNumber: "weekNumber" }, outputs: { cellClick: "cellClick", weekNumberCellClick: "weekNumberCellClick", cellEnter: "cellEnter", cellLeave: "cellLeave", activeDateChange: "activeDateChange" }, host: { properties: { "class.k-calendar-view": "this.getComponentClass", "class.k-hstack": "this.getComponentClass", "class.k-align-items-start": "this.getComponentClass", "class.k-justify-content-center": "this.getComponentClass", "class.k-calendar-monthview": "this.getComponentMonthClass", "class.k-calendar-yearview": "this.getComponentYearClass", "class.k-calendar-decadeview": "this.getComponentDecadeClass", "class.k-calendar-centuryview": "this.getComponentCenturyClass" } }, usesOnChanges: true, ngImport: i0, template: `
+HorizontalViewListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: HorizontalViewListComponent, selector: "kendo-calendar-horizontal", inputs: { cellTemplateRef: "cellTemplateRef", weekNumberTemplateRef: "weekNumberTemplateRef", activeRangeEnd: "activeRangeEnd", activeView: "activeView", cellUID: "cellUID", focusedDate: "focusedDate", isActive: "isActive", min: "min", max: "max", selectionRange: "selectionRange", selectedDates: "selectedDates", views: "views", showViewHeader: "showViewHeader", animateNavigation: "animateNavigation", orientation: "orientation", weekNumber: "weekNumber" }, outputs: { cellClick: "cellClick", weekNumberCellClick: "weekNumberCellClick", cellEnter: "cellEnter", cellLeave: "cellLeave", activeDateChange: "activeDateChange" }, host: { properties: { "class.k-calendar-view": "this.getComponentClass", "class.k-align-items-start": "this.getComponentClass", "class.k-justify-content-center": "this.getComponentClass", "class.k-hstack": "this.horizontalHostClass", "class.k-vstack": "this.verticalHostClass", "class.k-calendar-monthview": "this.getComponentMonthClass", "class.k-calendar-yearview": "this.getComponentYearClass", "class.k-calendar-decadeview": "this.getComponentDecadeClass", "class.k-calendar-centuryview": "this.getComponentCenturyClass" } }, usesOnChanges: true, ngImport: i0, template: `
         <ng-template #tableTemplate let-date="date" let-class="className">
             <table
                 role="grid"
@@ -397,6 +404,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 type: Input
             }], animateNavigation: [{
                 type: Input
+            }], orientation: [{
+                type: Input
             }], weekNumber: [{
                 type: Input
             }], cellClick: [{
@@ -412,15 +421,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
             }], getComponentClass: [{
                 type: HostBinding,
                 args: ["class.k-calendar-view"]
-            }, {
-                type: HostBinding,
-                args: ["class.k-hstack"]
             }, {
                 type: HostBinding,
                 args: ["class.k-align-items-start"]
             }, {
                 type: HostBinding,
                 args: ["class.k-justify-content-center"]
+            }], horizontalHostClass: [{
+                type: HostBinding,
+                args: ["class.k-hstack"]
+            }], verticalHostClass: [{
+                type: HostBinding,
+                args: ["class.k-vstack"]
             }], getComponentMonthClass: [{
                 type: HostBinding,
                 args: ["class.k-calendar-monthview"]

package/esm2015/calendar/models/orientation.js

@@ -0,0 +1,5 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+export {};

package/esm2015/calendar/multiview-calendar.component.js

@@ -165,6 +165,14 @@ export class MultiViewCalendarComponent {
          * defines the number of rendered months.
          */
         this.views = 2;
+        /**
+         * Specifies the orientation of the MultiViewCalendar.
+         *
+         * The available values are:
+         * * `horizontal` (default)
+         * * `vertical`
+         */
+        this.orientation = 'horizontal';
         /**
          * Fires when the active view is changed
          * ([more information and example]({% slug overview_multiviewcalendar %}#toc-events)).
@@ -748,7 +756,7 @@ export class MultiViewCalendarComponent {
     }
 }
 MultiViewCalendarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: MultiViewCalendarComponent, deps: [{ token: i1.BusViewService }, { token: i0.ElementRef }, { token: i2.NavigationService }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: i3.DisabledDatesService }, { token: i4.SelectionService }], target: i0.ɵɵFactoryTarget.Component });
-MultiViewCalendarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: MultiViewCalendarComponent, selector: "kendo-multiviewcalendar", inputs: { id: "id", focusedDate: "focusedDate", min: "min", max: "max", rangeValidation: "rangeValidation", disabledDatesRangeValidation: "disabledDatesRangeValidation", selection: "selection", value: "value", disabled: "disabled", tabindex: "tabindex", tabIndex: "tabIndex", isActive: "isActive", disabledDates: "disabledDates", activeView: "activeView", bottomView: "bottomView", topView: "topView", showViewHeader: "showViewHeader", animateNavigation: "animateNavigation", weekNumber: "weekNumber", activeRangeEnd: "activeRangeEnd", selectionRange: "selectionRange", views: "views", cellTemplateRef: ["cellTemplate", "cellTemplateRef"], monthCellTemplateRef: ["monthCellTemplate", "monthCellTemplateRef"], yearCellTemplateRef: ["yearCellTemplate", "yearCellTemplateRef"], decadeCellTemplateRef: ["decadeCellTemplate", "decadeCellTemplateRef"], centuryCellTemplateRef: ["centuryCellTemplate", "centuryCellTemplateRef"], weekNumberTemplateRef: ["weekNumberTemplate", "weekNumberTemplateRef"], headerTitleTemplateRef: ["headerTitleTemplate", "headerTitleTemplateRef"] }, outputs: { activeViewChange: "activeViewChange", navigate: "navigate", cellEnter: "cellEnter", cellLeave: "cellLeave", valueChange: "valueChange", blurEvent: "blur" }, host: { listeners: { "focusout": "handleFocusout($event)", "focus": "handleFocus()", "mouseenter": "handleMouseEnter()", "mouseleave": "handleMouseLeave()", "mousedown": "handleMousedown($event)", "click": "handleClick()", "keydown": "keydown($event)" }, properties: { "attr.id": "this.widgetId", "attr.tabindex": "this.calendarTabIndex", "attr.aria-disabled": "this.ariaDisabled", "class.k-disabled": "this.ariaDisabled", "attr.aria-activedescendant": "this.ariaActivedescendant" } }, providers: [
+MultiViewCalendarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: MultiViewCalendarComponent, selector: "kendo-multiviewcalendar", inputs: { id: "id", focusedDate: "focusedDate", min: "min", max: "max", rangeValidation: "rangeValidation", disabledDatesRangeValidation: "disabledDatesRangeValidation", selection: "selection", value: "value", disabled: "disabled", tabindex: "tabindex", tabIndex: "tabIndex", isActive: "isActive", disabledDates: "disabledDates", activeView: "activeView", bottomView: "bottomView", topView: "topView", showViewHeader: "showViewHeader", animateNavigation: "animateNavigation", weekNumber: "weekNumber", activeRangeEnd: "activeRangeEnd", selectionRange: "selectionRange", views: "views", orientation: "orientation", cellTemplateRef: ["cellTemplate", "cellTemplateRef"], monthCellTemplateRef: ["monthCellTemplate", "monthCellTemplateRef"], yearCellTemplateRef: ["yearCellTemplate", "yearCellTemplateRef"], decadeCellTemplateRef: ["decadeCellTemplate", "decadeCellTemplateRef"], centuryCellTemplateRef: ["centuryCellTemplate", "centuryCellTemplateRef"], weekNumberTemplateRef: ["weekNumberTemplate", "weekNumberTemplateRef"], headerTitleTemplateRef: ["headerTitleTemplate", "headerTitleTemplateRef"] }, outputs: { activeViewChange: "activeViewChange", navigate: "navigate", cellEnter: "cellEnter", cellLeave: "cellLeave", valueChange: "valueChange", blurEvent: "blur" }, host: { listeners: { "focusout": "handleFocusout($event)", "focus": "handleFocus()", "mouseenter": "handleMouseEnter()", "mouseleave": "handleMouseLeave()", "mousedown": "handleMousedown($event)", "click": "handleClick()", "keydown": "keydown($event)" }, properties: { "attr.id": "this.widgetId", "attr.tabindex": "this.calendarTabIndex", "attr.aria-disabled": "this.ariaDisabled", "class.k-disabled": "this.ariaDisabled", "attr.aria-activedescendant": "this.ariaActivedescendant" } }, providers: [
         BusViewService,
         RANGE_CALENDAR_VALUE_ACCESSOR,
         RANGE_CALENDAR_RANGE_VALIDATORS,
@@ -782,6 +790,7 @@ MultiViewCalendarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0
         [isPrevDisabled]="isPrevDisabled"
         [isNextDisabled]="isNextDisabled"
         [showNavigationButtons]="true"
+        [orientation]="orientation"
         (todayButtonClick)="handleTodayButtonClick({ selectedDates: [$event], focusedDate: $event })"
         (prevButtonClick)="navigateView(prevView)"
         (nextButtonClick)="navigateView(nextView)"
@@ -807,6 +816,7 @@ MultiViewCalendarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0
         [activeRangeEnd]="activeRangeEnd"
         [selectionRange]="selectionRange"
         [selectedDates]="selectedDates"
+        [orientation]="orientation"
         (cellClick)="handleCellClick($event)"
         (weekNumberCellClick)="handleWeekNumberClick($event)"
         (cellEnter)="emitCellEvent(cellEnter, $event)"
@@ -814,7 +824,7 @@ MultiViewCalendarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0
         (activeDateChange)="setActiveDate($event)"
     >
     </kendo-calendar-horizontal>
-  `, isInline: true, components: [{ type: i5.HeaderComponent, selector: "kendo-calendar-header", inputs: ["activeView", "currentDate", "min", "max", "rangeLength", "templateRef", "isPrevDisabled", "isNextDisabled", "showNavigationButtons"], outputs: ["todayButtonClick", "prevButtonClick", "nextButtonClick"] }, { type: i6.HorizontalViewListComponent, selector: "kendo-calendar-horizontal", inputs: ["cellTemplateRef", "weekNumberTemplateRef", "activeRangeEnd", "activeView", "cellUID", "focusedDate", "isActive", "min", "max", "selectionRange", "selectedDates", "views", "showViewHeader", "animateNavigation", "weekNumber"], outputs: ["cellClick", "weekNumberCellClick", "cellEnter", "cellLeave", "activeDateChange"] }], directives: [{ type: i7.MultiViewCalendarLocalizedMessagesDirective, selector: "[kendoMultiViewCalendarLocalizedMessages]" }, { type: i8.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, components: [{ type: i5.HeaderComponent, selector: "kendo-calendar-header", inputs: ["activeView", "currentDate", "min", "max", "rangeLength", "templateRef", "isPrevDisabled", "isNextDisabled", "showNavigationButtons", "orientation"], outputs: ["todayButtonClick", "prevButtonClick", "nextButtonClick"] }, { type: i6.HorizontalViewListComponent, selector: "kendo-calendar-horizontal", inputs: ["cellTemplateRef", "weekNumberTemplateRef", "activeRangeEnd", "activeView", "cellUID", "focusedDate", "isActive", "min", "max", "selectionRange", "selectedDates", "views", "showViewHeader", "animateNavigation", "orientation", "weekNumber"], outputs: ["cellClick", "weekNumberCellClick", "cellEnter", "cellLeave", "activeDateChange"] }], directives: [{ type: i7.MultiViewCalendarLocalizedMessagesDirective, selector: "[kendoMultiViewCalendarLocalizedMessages]" }, { type: i8.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: MultiViewCalendarComponent, decorators: [{
             type: Component,
             args: [{
@@ -856,6 +866,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
         [isPrevDisabled]="isPrevDisabled"
         [isNextDisabled]="isNextDisabled"
         [showNavigationButtons]="true"
+        [orientation]="orientation"
         (todayButtonClick)="handleTodayButtonClick({ selectedDates: [$event], focusedDate: $event })"
         (prevButtonClick)="navigateView(prevView)"
         (nextButtonClick)="navigateView(nextView)"
@@ -881,6 +892,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
         [activeRangeEnd]="activeRangeEnd"
         [selectionRange]="selectionRange"
         [selectedDates]="selectedDates"
+        [orientation]="orientation"
         (cellClick)="handleCellClick($event)"
         (weekNumberCellClick)="handleWeekNumberClick($event)"
         (cellEnter)="emitCellEvent(cellEnter, $event)"
@@ -934,6 +946,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 type: Input
             }], views: [{
                 type: Input
+            }], orientation: [{
+                type: Input
             }], activeViewChange: [{
                 type: Output
             }], navigate: [{

package/esm2015/calendar/view-list.component.js

@@ -226,7 +226,7 @@ ViewListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", vers
             ></tbody>
         </table>
     </kendo-virtualization>
-  `, isInline: true, components: [{ type: i4.HeaderComponent, selector: "kendo-calendar-header", inputs: ["activeView", "currentDate", "min", "max", "rangeLength", "templateRef", "isPrevDisabled", "isNextDisabled", "showNavigationButtons"], outputs: ["todayButtonClick", "prevButtonClick", "nextButtonClick"] }, { type: i5.VirtualizationComponent, selector: "kendo-virtualization", inputs: ["direction", "itemHeight", "itemWidth", "topOffset", "bottomOffset", "maxScrollDifference", "scrollOffsetSize", "scrollDuration", "skip", "take", "total"], outputs: ["activeIndexChange", "pageChange", "scrollChange"] }, { type: i6.ViewComponent, selector: "[kendoCalendarView]", inputs: ["direction", "isActive", "activeView", "cellUID", "focusedDate", "viewDate", "activeRangeEnd", "selectionRange", "min", "max", "selectedDates", "weekNumber", "viewIndex", "templateRef", "weekNumberTemplateRef"], outputs: ["cellClick", "weekNumberCellClick", "cellEnter", "cellLeave"] }], directives: [{ type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i7.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i8.KForOf, selector: "[kFor][kForOf]", inputs: ["kForOf", "kForTrackBy", "kForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, components: [{ type: i4.HeaderComponent, selector: "kendo-calendar-header", inputs: ["activeView", "currentDate", "min", "max", "rangeLength", "templateRef", "isPrevDisabled", "isNextDisabled", "showNavigationButtons", "orientation"], outputs: ["todayButtonClick", "prevButtonClick", "nextButtonClick"] }, { type: i5.VirtualizationComponent, selector: "kendo-virtualization", inputs: ["direction", "itemHeight", "itemWidth", "topOffset", "bottomOffset", "maxScrollDifference", "scrollOffsetSize", "scrollDuration", "skip", "take", "total"], outputs: ["activeIndexChange", "pageChange", "scrollChange"] }, { type: i6.ViewComponent, selector: "[kendoCalendarView]", inputs: ["direction", "isActive", "activeView", "cellUID", "focusedDate", "viewDate", "activeRangeEnd", "selectionRange", "min", "max", "selectedDates", "weekNumber", "viewIndex", "templateRef", "weekNumberTemplateRef"], outputs: ["cellClick", "weekNumberCellClick", "cellEnter", "cellLeave"] }], directives: [{ type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i7.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i8.KForOf, selector: "[kFor][kForOf]", inputs: ["kForOf", "kForTrackBy", "kForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ViewListComponent, decorators: [{
             type: Component,
             args: [{

package/esm2015/calendar/view.component.js

@@ -115,9 +115,9 @@ export class ViewComponent {
             'k-range-split-end': !context.isOtherMonth && context.isRangeSplitEnd,
             'k-range-split-start': !context.isOtherMonth && context.isRangeSplitStart,
             'k-range-start': !context.isOtherMonth && isRangeStart,
-            'k-state-active': isStartActive || isEndActive,
-            'k-state-focused': !context.isOtherMonth && this.isActive && context.isFocused,
-            'k-state-selected': !context.isOtherMonth && (context.isSelected || isRangeStart || isRangeEnd),
+            'k-active': isStartActive || isEndActive,
+            'k-focus': !context.isOtherMonth && this.isActive && context.isFocused,
+            'k-selected': !context.isOtherMonth && (context.isSelected || isRangeStart || isRangeEnd),
             'k-today': !context.isOtherMonth && context.isToday,
             'k-weekend': context.isWeekend,
             'k-disabled': context.isDisabled,

package/esm2015/daterange/date-range-popup.component.js

@@ -297,7 +297,7 @@ DateRangePopupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0"
         <ng-template #defaultTemplate>
             <kendo-multiviewcalendar kendoDateRangeSelection></kendo-multiviewcalendar>
         </ng-template>
-    `, isInline: true, components: [{ type: i3.MultiViewCalendarComponent, selector: "kendo-multiviewcalendar", inputs: ["id", "focusedDate", "min", "max", "rangeValidation", "disabledDatesRangeValidation", "selection", "value", "disabled", "tabindex", "tabIndex", "isActive", "disabledDates", "activeView", "bottomView", "topView", "showViewHeader", "animateNavigation", "weekNumber", "activeRangeEnd", "selectionRange", "views", "cellTemplate", "monthCellTemplate", "yearCellTemplate", "decadeCellTemplate", "centuryCellTemplate", "weekNumberTemplate", "headerTitleTemplate"], outputs: ["activeViewChange", "navigate", "cellEnter", "cellLeave", "valueChange", "blur"], exportAs: ["kendo-multiviewcalendar"] }], directives: [{ type: i4.DateRangeSelectionDirective, selector: "[kendoDateRangeSelection]", inputs: ["autoCorrectOn", "selectionRange", "activeRangeEnd"], outputs: ["activeRangeEndChange", "selectionRangeChange"] }] });
+    `, isInline: true, components: [{ type: i3.MultiViewCalendarComponent, selector: "kendo-multiviewcalendar", inputs: ["id", "focusedDate", "min", "max", "rangeValidation", "disabledDatesRangeValidation", "selection", "value", "disabled", "tabindex", "tabIndex", "isActive", "disabledDates", "activeView", "bottomView", "topView", "showViewHeader", "animateNavigation", "weekNumber", "activeRangeEnd", "selectionRange", "views", "orientation", "cellTemplate", "monthCellTemplate", "yearCellTemplate", "decadeCellTemplate", "centuryCellTemplate", "weekNumberTemplate", "headerTitleTemplate"], outputs: ["activeViewChange", "navigate", "cellEnter", "cellLeave", "valueChange", "blur"], exportAs: ["kendo-multiviewcalendar"] }], directives: [{ type: i4.DateRangeSelectionDirective, selector: "[kendoDateRangeSelection]", inputs: ["autoCorrectOn", "selectionRange", "activeRangeEnd"], outputs: ["activeRangeEndChange", "selectionRangeChange"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DateRangePopupComponent, decorators: [{
             type: Component,
             args: [{

package/esm2015/package-metadata.js

@@ -9,7 +9,7 @@ export const packageMetadata = {
     name: '@progress/kendo-angular-dateinputs',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1652250169,
+    publishDate: 1659092106,
     version: '',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/?utm_medium=product&utm_source=kendoangular&utm_campaign=kendo-ui-angular-purchase-license-keys-warning'
 };

package/esm2015/timepicker/timeselector.component.js

@@ -154,13 +154,13 @@ export class TimeSelectorComponent {
             return;
         }
         this.timeListWrappers.forEach(listWrapper => {
-            this.renderer.removeClass(listWrapper.nativeElement, 'k-state-focused');
+            this.renderer.removeClass(listWrapper.nativeElement, 'k-focus');
         });
         if (value >= 0) {
             const listIndex = this.listIndex(value);
             const focusedWrapper = this.timeListWrappers.toArray()[listIndex];
             if (focusedWrapper) {
-                this.renderer.addClass(focusedWrapper.nativeElement, 'k-state-focused');
+                this.renderer.addClass(focusedWrapper.nativeElement, 'k-focus');
             }
         }
     }
@@ -405,7 +405,7 @@ TimeSelectorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
                 #now
                 *ngIf="showNowButton"
                 type="button"
-                class="k-button k-button-md k-rounded-md k-button-flat k-button-flat-base k-time-now"
+                class="k-button k-button-md k-rounded-md k-button-flat k-button-flat-primary k-time-now"
                 [attr.title]="localization.get('nowLabel')"
                 [attr.aria-label]="localization.get('nowLabel')"
                 [kendoEventsOutsideAngular]="{
@@ -447,7 +447,7 @@ TimeSelectorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
                 </div>
             </ng-template>
         </div>
-        <div class="k-time-footer k-action-buttons k-actions k-hstack k-justify-content-stretch" *ngIf="setButton || cancelButton">
+        <div class="k-time-footer k-action-buttons k-actions k-actions-stretched" *ngIf="setButton || cancelButton">
             <button
                 #cancel
                 *ngIf="cancelButton"
@@ -522,7 +522,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 #now
                 *ngIf="showNowButton"
                 type="button"
-                class="k-button k-button-md k-rounded-md k-button-flat k-button-flat-base k-time-now"
+                class="k-button k-button-md k-rounded-md k-button-flat k-button-flat-primary k-time-now"
                 [attr.title]="localization.get('nowLabel')"
                 [attr.aria-label]="localization.get('nowLabel')"
                 [kendoEventsOutsideAngular]="{
@@ -564,7 +564,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 </div>
             </ng-template>
         </div>
-        <div class="k-time-footer k-action-buttons k-actions k-hstack k-justify-content-stretch" *ngIf="setButton || cancelButton">
+        <div class="k-time-footer k-action-buttons k-actions k-actions-stretched" *ngIf="setButton || cancelButton">
             <button
                 #cancel
                 *ngIf="cancelButton"