@progress/kendo-angular-scheduler 17.0.0-develop.9 → 17.0.0

package/{esm2020 → esm2022}/views/view-state.service.mjs

@@ -15,24 +15,60 @@ const emptyDateRange = () => ({
  * A service for publishing the view state and actions to the Scheduler.
  */
 export class ViewStateService {
+    /**
+     * A stream for publishing the visible date range of the current view to the Scheduler.
+     */
+    dateRange;
+    /**
+     * A stream for publishing the changes to the selected date that are initiated from the view.
+     */
+    nextDate;
+    /**
+     * A stream fro navigating from the current to another view.
+     */
+    navigate;
+    /**
+     * A stream for navigating from the current to another view.
+     */
+    viewEvent;
+    /**
+     * A stream for indicating that the view layout finished.
+     */
+    layoutEnd;
+    /**
+     * A stream for indicating that the view options has changed.
+     */
+    optionsChange;
+    /**
+     * A stream indicating that the user has started making a new slot selection.
+     */
+    slotSelectionStart;
+    /**
+     * A stream indicating that the user has dragged over a different slot while making a selection.
+     */
+    slotSelectionDrag;
+    /**
+     * A stream indicating that the user has finished making a slot selection.
+     */
+    slotSelectionEnd;
+    /**
+     * @hidden
+     */
+    toggleWorkHours = new Subject();
+    /**
+     * @hidden
+     */
+    toolbarVisibilityByView = new Map();
+    dateRangeSource = new BehaviorSubject(emptyDateRange());
+    nextDateSource = new Subject();
+    navigateSource = new Subject();
+    viewEventSource = new Subject();
+    layoutEndSource = new Subject();
+    optionsChangeSource = new Subject();
+    slotSelectionStartSource = new Subject();
+    slotSelectionStartDragSource = new Subject();
+    slotSelectionStartEndSource = new Subject();
     constructor() {
-        /**
-         * @hidden
-         */
-        this.toggleWorkHours = new Subject();
-        /**
-         * @hidden
-         */
-        this.toolbarVisibilityByView = new Map();
-        this.dateRangeSource = new BehaviorSubject(emptyDateRange());
-        this.nextDateSource = new Subject();
-        this.navigateSource = new Subject();
-        this.viewEventSource = new Subject();
-        this.layoutEndSource = new Subject();
-        this.optionsChangeSource = new Subject();
-        this.slotSelectionStartSource = new Subject();
-        this.slotSelectionStartDragSource = new Subject();
-        this.slotSelectionStartEndSource = new Subject();
         this.dateRange = this.dateRangeSource.asObservable();
         this.nextDate = this.nextDateSource.asObservable();
         this.navigate = this.navigateSource.asObservable();
@@ -97,10 +133,10 @@ export class ViewStateService {
     notifySlotSelectionEnd(selection) {
         this.slotSelectionStartEndSource.next(selection);
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ViewStateService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ViewStateService, providedIn: 'root' });
 }
-ViewStateService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ViewStateService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-ViewStateService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ViewStateService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ViewStateService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ViewStateService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'

package/{esm2020 → esm2022}/views/year/year-view-internal.component.mjs

@@ -20,6 +20,7 @@ import { createTasks, noop, yearEnd, yearStart } from './utils';
 import { MonthSlotService } from '../month/month-slot.service';
 import { IconWrapperComponent } from '@progress/kendo-angular-icons';
 import { NgIf, NgFor, NgClass, NgStyle } from '@angular/common';
+import { take } from 'rxjs/operators';
 import * as i0 from "@angular/core";
 import * as i1 from "@progress/kendo-angular-l10n";
 import * as i2 from "../../navigation";
@@ -35,24 +36,20 @@ const getDateAttribute = (element) => element?.querySelector('span>span[date]')?
  * @hidden
  */
 export class YearViewInternalComponent extends BaseView {
-    constructor(localization, focusService, intl, viewContext, viewState, zone, renderer, pdfService, element, slotService, scrollBarWidthService, changeDetector, localeId) {
-        super(viewContext, viewState, intl, slotService, zone, renderer, element, pdfService, localization, changeDetector, scrollBarWidthService);
-        this.localization = localization;
-        this.focusService = focusService;
-        this.intl = intl;
-        this.localeId = localeId;
-        this.caretAltLeftIcon = caretAltLeftIcon;
-        this.caretAltRightIcon = caretAltRightIcon;
-        this.eventsPerSelectedDay = [];
-        this.days = [];
-        this.tds = [];
-        this.isTooltipClicked = false;
-        this.slotByIndex = (slotIndex, args) => noop(slotIndex);
-        this.dragHintSize = (startSlot, endSlot) => noop(startSlot);
-        this.dragRanges = (slot) => noop(slot);
-        this.slotByPosition = (x, y, container) => noop(x);
-        this.cachedTds = [];
-    }
+    localization;
+    focusService;
+    intl;
+    localeId;
+    /**
+     * Calculates the next or previous range to be displayed
+     */
+    newRange;
+    /**
+     * Determines the displayed date range and formats the selected date
+     */
+    dateRangeFn;
+    calendar;
+    tooltip;
     get arrowIcons() {
         return !this.localization.rtl
             ? ['caret-alt-left', 'caret-alt-right']
@@ -63,6 +60,21 @@ export class YearViewInternalComponent extends BaseView {
             ? [this.caretAltLeftIcon, this.caretAltRightIcon]
             : [this.caretAltRightIcon, this.caretAltLeftIcon];
     }
+    caretAltLeftIcon = caretAltLeftIcon;
+    caretAltRightIcon = caretAltRightIcon;
+    eventsPerSelectedDay = [];
+    days = [];
+    focusedDate;
+    currentTd;
+    tds = [];
+    isTooltipClicked = false;
+    constructor(localization, focusService, intl, viewContext, viewState, zone, renderer, pdfService, element, slotService, scrollBarWidthService, changeDetector, localeId) {
+        super(viewContext, viewState, intl, slotService, zone, renderer, element, pdfService, localization, changeDetector, scrollBarWidthService);
+        this.localization = localization;
+        this.focusService = focusService;
+        this.intl = intl;
+        this.localeId = localeId;
+    }
     ngAfterViewInit() {
         this.updateTds();
         super.ngAfterViewInit();
@@ -175,7 +187,8 @@ export class YearViewInternalComponent extends BaseView {
         if (this.calendar) {
             this.calendar.min = start;
             this.calendar.max = yearEnd(start.getFullYear());
-            this.updateTds();
+            // wait for the view to update to get the new tds
+            this.zone.onStable.pipe(take(1)).subscribe(() => this.updateTds());
         }
     }
     onAction(e) {
@@ -211,6 +224,10 @@ export class YearViewInternalComponent extends BaseView {
     onTasksChange() {
         this.items.next(this.tasks);
     }
+    slotByIndex = (slotIndex, args) => noop(slotIndex);
+    dragHintSize = (startSlot, endSlot) => noop(startSlot);
+    dragRanges = (slot) => noop(slot);
+    slotByPosition = (x, y, container) => noop(x);
     createDaySlots({ start }) {
         const days = [];
         const monthsPerYear = 12;
@@ -228,12 +245,17 @@ export class YearViewInternalComponent extends BaseView {
     getLastDayOfMonth(year, month) {
         return new Date(year, month + 1, 0).getDate();
     }
+    cachedTds = [];
     updateTds() {
         this.cachedTds.forEach((td) => {
             this.renderer.setAttribute(td, 'class', 'k-calendar-td');
         });
         this.cachedTds = [];
         this.tds = Array.from(this.calendar.element.nativeElement.querySelectorAll('.k-calendar-td:not(.k-empty)'));
+        if (this.calendar.value instanceof Date &&
+            this.calendar.value.getFullYear() === this.calendar.min?.getFullYear()) {
+            this.currentTd = this.tds.find((td) => getDateAttribute(td) === this.calendar.value.toString());
+        }
         if (this.slotClass) {
             this.tds.forEach((td) => {
                 const date = toUTCDate(new Date(getDateAttribute(td)));
@@ -245,9 +267,8 @@ export class YearViewInternalComponent extends BaseView {
             });
         }
     }
-}
-YearViewInternalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: YearViewInternalComponent, deps: [{ token: i1.LocalizationService }, { token: i2.FocusService }, { token: i3.IntlService }, { token: i4.ViewContextService }, { token: i5.ViewStateService }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: i6.PDFService }, { token: i0.ElementRef }, { token: i7.MonthSlotService }, { token: i8.ScrollbarWidthService }, { token: i0.ChangeDetectorRef }, { token: LOCALE_ID }], target: i0.ɵɵFactoryTarget.Component });
-YearViewInternalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: YearViewInternalComponent, isStandalone: true, selector: "year-view-internal", inputs: { newRange: "newRange", dateRangeFn: "dateRangeFn", selectedDateFormat: "selectedDateFormat", selectedShortDateFormat: "selectedShortDateFormat" }, providers: [MonthSlotService], viewQueries: [{ propertyName: "calendar", first: true, predicate: MultiViewCalendarComponent, descendants: true }, { propertyName: "tooltip", first: true, predicate: TooltipDirective, descendants: true }], usesInheritance: true, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: YearViewInternalComponent, deps: [{ token: i1.LocalizationService }, { token: i2.FocusService }, { token: i3.IntlService }, { token: i4.ViewContextService }, { token: i5.ViewStateService }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: i6.PDFService }, { token: i0.ElementRef }, { token: i7.MonthSlotService }, { token: i8.ScrollbarWidthService }, { token: i0.ChangeDetectorRef }, { token: LOCALE_ID }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: YearViewInternalComponent, isStandalone: true, selector: "year-view-internal", inputs: { newRange: "newRange", dateRangeFn: "dateRangeFn" }, providers: [MonthSlotService], viewQueries: [{ propertyName: "calendar", first: true, predicate: MultiViewCalendarComponent, descendants: true }, { propertyName: "tooltip", first: true, predicate: TooltipDirective, descendants: true }], usesInheritance: true, ngImport: i0, template: `
         <div #content class="k-scheduler-layout k-scheduler-layout-flex k-scheduler-yearview">
             <div class="k-scheduler-body">
                 <kendo-multiviewcalendar
@@ -319,7 +340,8 @@ YearViewInternalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.
             </div>
         </ng-template>
     `, isInline: true, dependencies: [{ 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: "directive", type: TooltipDirective, selector: "[kendoTooltip]", inputs: ["filter", "position", "titleTemplate", "showOn", "showAfter", "callout", "closable", "offset", "tooltipWidth", "tooltipHeight", "tooltipClass", "tooltipContentClass", "collision", "closeTitle", "tooltipTemplate"], exportAs: ["kendoTooltip"] }, { kind: "directive", type: MonthCellTemplateDirective, selector: "[kendoCalendarMonthCellTemplate]" }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: YearViewInternalComponent, decorators: [{
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: YearViewInternalComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'year-view-internal',
@@ -412,8 +434,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
             }], tooltip: [{
                 type: ViewChild,
                 args: [TooltipDirective]
-            }], selectedDateFormat: [{
-                type: Input
-            }], selectedShortDateFormat: [{
-                type: Input
             }] } });

package/{esm2020 → esm2022}/views/year/year-view.component.mjs

@@ -21,35 +21,40 @@ import * as i4 from "@progress/kendo-angular-intl";
  * The component for rendering the **Year** view.
  */
 export class YearViewComponent extends ConfigurationViewBase {
-    constructor(localization, changeDetector, viewContext, viewState, intl) {
-        super(localization, changeDetector, viewContext, viewState);
-        this.intl = intl;
-        /**
-         * The long-date format for displaying the
-         * selected year in the Scheduler toolbar.
-         * For more information, see [Parsing and Formatting Dates and Numbers]({% slug parsingandformatting_intl %}#toc-date-formatting).
-         * @default '{0:yyy}'
-         */
-        this.selectedDateFormat = '{0:yyy}';
-        /**
-         * The short-date format for displaying the
-         * selected year in the Scheduler toolbar.
-         * For more information, see [Parsing and Formatting Dates and Numbers]({% slug parsingandformatting_intl %}#toc-date-formatting).
-         * @default '{0:yyy}'
-         */
-        this.selectedShortDateFormat = '{0:yyy}';
-        /**
-         * The invariant name for this view.
-         * @default 'year'
-         */
-        this.name = 'year';
-    }
+    intl;
+    /**
+     * The long-date format for displaying the
+     * selected year in the Scheduler toolbar.
+     * For more information, see [Parsing and Formatting Dates and Numbers]({% slug parsingandformatting_intl %}#toc-date-formatting).
+     * @default '{0:yyy}'
+     */
+    selectedDateFormat = '{0:yyy}';
+    /**
+     * The short-date format for displaying the
+     * selected year in the Scheduler toolbar.
+     * For more information, see [Parsing and Formatting Dates and Numbers]({% slug parsingandformatting_intl %}#toc-date-formatting).
+     * @default '{0:yyy}'
+     */
+    selectedShortDateFormat = '{0:yyy}';
     /**
      * @hidden
      */
     get title() {
         return this.localization.get('yearViewTitle');
     }
+    /**
+     * @hidden
+     */
+    highlightOngoingEvents;
+    /**
+     * The invariant name for this view.
+     * @default 'year'
+     */
+    name = 'year';
+    constructor(localization, changeDetector, viewContext, viewState, intl) {
+        super(localization, changeDetector, viewContext, viewState);
+        this.intl = intl;
+    }
     /**
      * @hidden
      */
@@ -67,12 +72,11 @@ export class YearViewComponent extends ConfigurationViewBase {
     newRange(date, direction = 1) {
         return new Date(addYears(date, direction));
     }
-}
-YearViewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: YearViewComponent, deps: [{ token: i1.LocalizationService }, { token: i0.ChangeDetectorRef }, { token: i2.ViewContextService }, { token: i3.ViewStateService }, { token: i4.IntlService }], target: i0.ɵɵFactoryTarget.Component });
-YearViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: YearViewComponent, isStandalone: true, selector: "kendo-scheduler-year-view", inputs: { selectedDateFormat: "selectedDateFormat", selectedShortDateFormat: "selectedShortDateFormat" }, providers: [{
-            provide: SchedulerView,
-            useExisting: forwardRef(() => YearViewComponent)
-        }], usesInheritance: true, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: YearViewComponent, deps: [{ token: i1.LocalizationService }, { token: i0.ChangeDetectorRef }, { token: i2.ViewContextService }, { token: i3.ViewStateService }, { token: i4.IntlService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: YearViewComponent, isStandalone: true, selector: "kendo-scheduler-year-view", inputs: { selectedDateFormat: "selectedDateFormat", selectedShortDateFormat: "selectedShortDateFormat", highlightOngoingEvents: "highlightOngoingEvents" }, providers: [{
+                provide: SchedulerView,
+                useExisting: forwardRef(() => YearViewComponent)
+            }], usesInheritance: true, ngImport: i0, template: `
         <ng-template #content>
             <year-view-internal
                 [selectedDateFormat]="selectedDateFormat"
@@ -84,8 +88,9 @@ YearViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", vers
                 [newRange]="newRange">
             </year-view-internal>
         </ng-template>
-    `, isInline: true, dependencies: [{ kind: "component", type: YearViewInternalComponent, selector: "year-view-internal", inputs: ["newRange", "dateRangeFn", "selectedDateFormat", "selectedShortDateFormat"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: YearViewComponent, decorators: [{
+    `, isInline: true, dependencies: [{ kind: "component", type: YearViewInternalComponent, selector: "year-view-internal", inputs: ["newRange", "dateRangeFn"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: YearViewComponent, decorators: [{
             type: Component,
             args: [{
                     changeDetection: ChangeDetectionStrategy.OnPush,
@@ -114,4 +119,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                 type: Input
             }], selectedShortDateFormat: [{
                 type: Input
+            }], highlightOngoingEvents: [{
+                type: Input
             }] } });