@progress/kendo-angular-scheduler 3.0.3-dev.202203091424 → 4.0.0-next.202204010908

package/esm2015/common/dom-queries.js

@@ -0,0 +1,122 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { isDocumentAvailable } from '@progress/kendo-angular-common';
+// TODO: Move to @progress/kendo-common
+const toClassList = (classNames) => String(classNames).trim().split(' ');
+/**
+ * @hidden
+ */
+export const hasClasses = (element, classNames) => {
+    const namesList = toClassList(classNames);
+    return Boolean(toClassList(element.className).find((className) => namesList.indexOf(className) >= 0));
+};
+/**
+ * @hidden
+ */
+export const matchesClasses = (classNames) => (element) => hasClasses(element, classNames);
+/**
+ * @hidden
+ */
+export const closest = (node, predicate) => {
+    while (node && !predicate(node)) {
+        node = node.parentNode;
+    }
+    return node;
+};
+/**
+ * @hidden
+ */
+export const firstElementChild = (node) => {
+    const children = node.children;
+    const length = children.length;
+    for (let idx = 0; idx < length; idx++) {
+        if (children[idx].nodeType === 1) {
+            return children[idx];
+        }
+    }
+};
+/**
+ * @hidden
+ */
+export const closestInScope = (node, predicate, scope) => {
+    while (node && node !== scope && !predicate(node)) {
+        node = node.parentNode;
+    }
+    if (node !== scope) {
+        return node;
+    }
+};
+/**
+ * @hidden
+ */
+export const wheelDeltaY = (e) => {
+    const deltaY = e.wheelDeltaY;
+    if (e.wheelDelta && (deltaY === undefined || deltaY)) {
+        return e.wheelDelta;
+    }
+    else if (e.detail && e.axis === e.VERTICAL_AXIS) {
+        return (-e.detail) * 10;
+    }
+    return 0;
+};
+/**
+ * @hidden
+ */
+export const preventLockedScroll = el => event => {
+    const delta = wheelDeltaY(event);
+    const scrollTop = el.scrollTop;
+    const allowScroll = (scrollTop === 0 && 0 < delta) || (el.scrollHeight <= el.offsetHeight + scrollTop && delta < 0);
+    if (!allowScroll) {
+        event.preventDefault();
+    }
+};
+let cachedScrollbarWidth = 0;
+/**
+ * @hidden
+ */
+export function scrollbarWidth() {
+    if (!cachedScrollbarWidth && isDocumentAvailable()) {
+        const div = document.createElement("div");
+        div.style.cssText = "overflow:scroll;overflow-x:hidden;zoom:1;clear:both;display:block";
+        div.innerHTML = "&nbsp;";
+        document.body.appendChild(div);
+        cachedScrollbarWidth = div.offsetWidth - div.scrollWidth;
+        document.body.removeChild(div);
+    }
+    return cachedScrollbarWidth;
+}
+/**
+ * @hidden
+ */
+export function hasScrollbar(element, type) {
+    const sizeField = type === 'vertical' ? 'Height' : 'Width';
+    return element[`scroll${sizeField}`] > element[`client${sizeField}`];
+}
+/**
+ * @hidden
+ */
+export function rtlScrollPosition(element, position) {
+    const initial = element.scrollLeft;
+    let result = position;
+    element.scrollLeft = -1;
+    if (element.scrollLeft < 0) {
+        result = -position;
+    }
+    else if (initial > 0) {
+        result = element.scrollWidth - element.offsetWidth - position;
+    }
+    return result;
+}
+/**
+ * @hidden
+ */
+export const isVisible = (element) => {
+    const rect = element.getBoundingClientRect();
+    const hasSize = rect.width > 0 && rect.height > 0;
+    const hasPosition = rect.x !== 0 && rect.y !== 0;
+    // Elements can have zero size due to styling, but they will still count as visible.
+    // For example, the selection checkbox has no size, but is made visible through styling.
+    return (hasSize || hasPosition) && window.getComputedStyle(element).visibility !== 'hidden';
+};

package/esm2015/common/modifiers.js

@@ -0,0 +1,31 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+// eslint-disable no-bitwise
+/**
+ * @hidden
+ */
+export var Modifiers;
+(function (Modifiers) {
+    Modifiers[Modifiers["None"] = 0] = "None";
+    Modifiers[Modifiers["AltKey"] = 1] = "AltKey";
+    Modifiers[Modifiers["CtrlKey"] = 2] = "CtrlKey";
+    Modifiers[Modifiers["ShiftKey"] = 4] = "ShiftKey";
+    Modifiers[Modifiers["MetaKey"] = 8] = "MetaKey";
+})(Modifiers || (Modifiers = {}));
+/**
+ * @hidden
+ */
+export function withModifiers(e, modifiers) {
+    return e.altKey === ((modifiers & Modifiers.AltKey) === Modifiers.AltKey) &&
+        e.ctrlKey === ((modifiers & Modifiers.CtrlKey) === Modifiers.CtrlKey) &&
+        e.shiftKey === ((modifiers & Modifiers.ShiftKey) === Modifiers.ShiftKey) &&
+        e.metaKey === ((modifiers & Modifiers.MetaKey) === Modifiers.MetaKey);
+}
+/**
+ * @hidden
+ */
+export function noModifiers(e) {
+    return withModifiers(e, Modifiers.None);
+}

package/esm2015/data-binding.directive.js

@@ -0,0 +1,149 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { Directive, Input } from '@angular/core';
+import { OCCURRENCE_ID } from './common/constants';
+import { parseRule, expand } from '@progress/kendo-recurrence';
+import { toUTCDateTime } from './views/utils';
+import { ZonedDate } from '@progress/kendo-date-math';
+import { clone, setField, getField } from './common/util';
+import * as i0 from "@angular/core";
+import * as i1 from "./scheduler.component";
+import * as i2 from "@progress/kendo-angular-intl";
+import * as i3 from "./editing/local-data-changes.service";
+// TODO
+// Extract as public method
+const occurrences = (item, fields, range, timezone, weekStart) => {
+    const rrule = parseRule({
+        recurrenceRule: getField(item, fields.recurrenceRule),
+        weekStart: weekStart
+    });
+    if (!rrule.start) {
+        const start = getField(item, fields.start);
+        rrule.start = ZonedDate.fromLocalDate(start, timezone);
+    }
+    if (!rrule.end) {
+        const end = getField(item, fields.end);
+        rrule.end = ZonedDate.fromLocalDate(end, timezone);
+    }
+    const exceptions = getField(item, fields.recurrenceExceptions);
+    if (exceptions) {
+        rrule.exceptionDates = exceptions
+            .map(exDate => ZonedDate.fromLocalDate(exDate, timezone));
+        // TODO: Merge exceptions from recurrence rule with event.recurrenceException
+    }
+    const utcRangeStart = toUTCDateTime(range.start);
+    const utcRangeEnd = toUTCDateTime(range.end);
+    const series = expand(rrule, {
+        rangeStart: ZonedDate.fromUTCDate(utcRangeStart, timezone),
+        rangeEnd: ZonedDate.fromUTCDate(utcRangeEnd, timezone)
+    });
+    if (!series.events.length) {
+        return [];
+    }
+    const expanded = series.events.map(occ => {
+        const event = clone(item);
+        setField(event, fields.id, OCCURRENCE_ID);
+        setField(event, fields.recurrenceId, getField(item, fields.id));
+        setField(event, fields.start, occ.start.toLocalDate());
+        setField(event, fields.end, occ.end.toLocalDate());
+        return event;
+    });
+    return [item, ...expanded];
+};
+/**
+ * A directive that processes Scheduler events in-memory.
+ *
+ * Processing includes the expanding of recurring events and the filtering of data for
+ * the currently active period.
+ *
+ * {% meta height:650 %}
+ * {% embed_file overview/app.component.ts preview %}
+ * {% embed_file shared/app.module.ts %}
+ * {% embed_file shared/main.ts %}
+ * {% embed_file shared/events-utc.ts %}
+ * {% endmeta %}
+ */
+export class DataBindingDirective {
+    constructor(scheduler, changeDetector, intl, localDataChangesService) {
+        this.scheduler = scheduler;
+        this.changeDetector = changeDetector;
+        this.intl = intl;
+        this.localDataChangesService = localDataChangesService;
+        this.originalData = [];
+        if (localDataChangesService) {
+            this.dataChangedSubscription = this.localDataChangesService.changes.subscribe(this.rebind.bind(this));
+        }
+    }
+    /**
+     * The array of data which will populate the Scheduler.
+     */
+    set data(value) {
+        this.originalData = value || [];
+        if (this.localDataChangesService) {
+            this.localDataChangesService.data = value;
+        }
+        this.scheduler.events = this.process();
+    }
+    /**
+     * @hidden
+     */
+    ngOnInit() {
+        this.subscription = this.scheduler
+            .dateChange
+            .subscribe(e => this.onDateChange(e));
+    }
+    /**
+     * @hidden
+     */
+    ngOnDestroy() {
+        if (this.subscription) {
+            this.subscription.unsubscribe();
+        }
+        if (this.dataChangedSubscription) {
+            this.dataChangedSubscription.unsubscribe();
+        }
+    }
+    /**
+     * @hidden
+     */
+    rebind() {
+        this.data = this.originalData;
+        this.changeDetector.markForCheck();
+    }
+    process() {
+        if (!this.dateRange) {
+            // No processing until a date range is set
+            return [];
+        }
+        const data = [];
+        const fields = this.scheduler.modelFields;
+        this.originalData
+            .forEach(item => {
+            if (getField(item, fields.recurrenceRule)) {
+                const series = occurrences(item, fields, this.dateRange, this.scheduler.timezone, this.scheduler.weekStart);
+                data.push(...series);
+            }
+            else {
+                data.push(item);
+            }
+        });
+        return data;
+    }
+    onDateChange(e) {
+        this.dateRange = e.dateRange;
+        this.rebind();
+    }
+}
+DataBindingDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DataBindingDirective, deps: [{ token: i1.SchedulerComponent }, { token: i0.ChangeDetectorRef }, { token: i2.IntlService }, { token: i3.LocalDataChangesService }], target: i0.ɵɵFactoryTarget.Directive });
+DataBindingDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: DataBindingDirective, selector: "[kendoSchedulerBinding]", inputs: { data: ["kendoSchedulerBinding", "data"] }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DataBindingDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[kendoSchedulerBinding]'
+                }]
+        }], ctorParameters: function () { return [{ type: i1.SchedulerComponent }, { type: i0.ChangeDetectorRef }, { type: i2.IntlService }, { type: i3.LocalDataChangesService }]; }, propDecorators: { data: [{
+                type: Input,
+                args: ['kendoSchedulerBinding']
+            }] } });

package/esm2015/editing/date-time-picker.component.js

@@ -0,0 +1,102 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { ViewChild } from '@angular/core';
+import { NG_VALUE_ACCESSOR } from '@angular/forms';
+import { Component, forwardRef, Input, Output, EventEmitter } from '@angular/core';
+import * as i0 from "@angular/core";
+import * as i1 from "@progress/kendo-angular-dateinputs";
+import * as i2 from "@angular/common";
+/**
+ * @hidden
+ */
+export const SCHEDULER_DATETIMEPICKER_VALUE_ACCESSOR = {
+    multi: true,
+    provide: NG_VALUE_ACCESSOR,
+    useExisting: forwardRef(() => SchedulerDateTimePickerComponent)
+};
+/**
+ * @hidden
+ */
+export class SchedulerDateTimePickerComponent {
+    constructor() {
+        this.valueChange = new EventEmitter();
+        this.onTouchedCallback = (_) => { };
+        this.onChangeCallback = (_) => { };
+    }
+    writeValue(newDate) {
+        if (newDate instanceof Date) {
+            this.date = newDate;
+        }
+    }
+    onValueChange(newValue) {
+        this.onChangeCallback(newValue);
+        this.valueChange.emit(newValue);
+    }
+    /**
+     * @hidden
+     */
+    focus() {
+        this.datePicker.focus();
+    }
+    /**
+     * @hidden
+     */
+    registerOnChange(fn) {
+        this.onChangeCallback = fn;
+    }
+    /**
+     * @hidden
+     */
+    registerOnTouched(fn) {
+        this.onTouchedCallback = fn;
+    }
+}
+SchedulerDateTimePickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SchedulerDateTimePickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+SchedulerDateTimePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SchedulerDateTimePickerComponent, selector: "kendo-scheduler-datetime-picker", inputs: { isAllDay: "isAllDay" }, outputs: { valueChange: "valueChange" }, providers: [
+        SCHEDULER_DATETIMEPICKER_VALUE_ACCESSOR
+    ], viewQueries: [{ propertyName: "datePicker", first: true, predicate: ["datepicker"], descendants: true, static: true }], ngImport: i0, template: `
+    <kendo-datepicker
+        #datepicker
+        [(value)]='date'
+        (valueChange)='onValueChange($event)'
+    ></kendo-datepicker>
+    <kendo-timepicker *ngIf='!isAllDay'
+        [(value)]='date'
+        (valueChange)='onValueChange($event)'
+    ></kendo-timepicker>
+    `, isInline: true, styles: ["\n        kendo-datepicker,\n        kendo-timepicker {\n            width: 170px;\n        }\n    "], components: [{ type: i1.DatePickerComponent, selector: "kendo-datepicker", inputs: ["cellTemplate", "monthCellTemplate", "yearCellTemplate", "decadeCellTemplate", "centuryCellTemplate", "weekNumberTemplate", "headerTitleTemplate", "navigationItemTemplate", "focusableId", "activeView", "bottomView", "topView", "calendarType", "animateCalendarNavigation", "disabled", "readonly", "readOnlyInput", "popupSettings", "navigation", "min", "max", "incompleteDateValidation", "focusedDate", "value", "format", "twoDigitYearMax", "formatPlaceholder", "placeholder", "tabindex", "tabIndex", "disabledDates", "title", "rangeValidation", "disabledDatesValidation", "weekNumber", "size", "rounded", "fillMode"], outputs: ["valueChange", "focus", "blur", "open", "close"], exportAs: ["kendo-datepicker"] }, { type: i1.TimePickerComponent, selector: "kendo-timepicker", inputs: ["focusableId", "disabled", "readonly", "readOnlyInput", "format", "formatPlaceholder", "placeholder", "min", "max", "incompleteDateValidation", "cancelButton", "nowButton", "steps", "popupSettings", "tabindex", "tabIndex", "title", "rangeValidation", "value", "size", "rounded", "fillMode"], outputs: ["valueChange", "focus", "blur", "open", "close"], exportAs: ["kendo-timepicker"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SchedulerDateTimePickerComponent, decorators: [{
+            type: Component,
+            args: [{
+                    providers: [
+                        SCHEDULER_DATETIMEPICKER_VALUE_ACCESSOR
+                    ],
+                    selector: 'kendo-scheduler-datetime-picker',
+                    template: `
+    <kendo-datepicker
+        #datepicker
+        [(value)]='date'
+        (valueChange)='onValueChange($event)'
+    ></kendo-datepicker>
+    <kendo-timepicker *ngIf='!isAllDay'
+        [(value)]='date'
+        (valueChange)='onValueChange($event)'
+    ></kendo-timepicker>
+    `,
+                    styles: [`
+        kendo-datepicker,
+        kendo-timepicker {
+            width: 170px;
+        }
+    `]
+                }]
+        }], propDecorators: { datePicker: [{
+                type: ViewChild,
+                args: ['datepicker', { static: true }]
+            }], isAllDay: [{
+                type: Input
+            }], valueChange: [{
+                type: Output
+            }] } });

package/esm2015/editing/dialogs.service.js

@@ -0,0 +1,86 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { Injectable } from '@angular/core';
+import { DialogCloseResult } from '@progress/kendo-angular-dialog';
+import { map, take } from 'rxjs/operators';
+import * as i0 from "@angular/core";
+import * as i1 from "@progress/kendo-angular-dialog";
+import * as i2 from "@progress/kendo-angular-l10n";
+import * as i3 from "../navigation/focus.service";
+import * as i4 from "../views/view-state.service";
+/**
+ * @hidden
+ */
+export class DialogsService {
+    constructor(dialogService, localization, changeDetector, focusService, viewState) {
+        this.dialogService = dialogService;
+        this.localization = localization;
+        this.changeDetector = changeDetector;
+        this.focusService = focusService;
+        this.viewState = viewState;
+        this.isOpen = false;
+    }
+    openRemoveConfirmationDialog() {
+        const dialog = this.dialogService.open({
+            title: this.textFor('deleteDialogTitle'),
+            content: this.textFor('deleteConfirmation'),
+            actions: [
+                { text: this.textFor('cancel'), value: false },
+                { text: this.textFor('destroy'), value: true }
+            ],
+            appendTo: this.container,
+            autoFocusedElement: 'button:nth-child(2)'
+        });
+        this.isOpen = true;
+        this.changeDetector.markForCheck();
+        return dialog.result.pipe(map((result) => {
+            this.isOpen = false;
+            if (result instanceof DialogCloseResult) {
+                this.focusService.focus();
+                return false;
+            }
+            this.viewState.layoutEnd.pipe(take(1)).subscribe(() => this.focusService.focus());
+            const res = result;
+            return res.value;
+        }));
+    }
+    openRecurringConfirmationDialog(operation) {
+        const dialog = this.dialogService.open({
+            actions: [
+                {
+                    text: operation === 0 /* Edit */ ? this.textFor('editOccurrence') : this.textFor('deleteOccurrence'),
+                    value: 1 /* Occurrence */
+                },
+                {
+                    text: operation === 0 /* Edit */ ? this.textFor('editSeries') : this.textFor('deleteSeries'),
+                    value: 2 /* Series */
+                }
+            ],
+            appendTo: this.container,
+            autoFocusedElement: 'button:nth-child(1)',
+            content: operation === 0 /* Edit */ ? this.textFor('editRecurringConfirmation') : this.textFor('deleteRecurringConfirmation'),
+            title: operation === 0 /* Edit */ ? this.textFor('editRecurringDialogTitle') : this.textFor('deleteRecurringDialogTitle')
+        });
+        this.isOpen = true;
+        this.changeDetector.markForCheck();
+        return dialog.result.pipe(map((result) => {
+            this.isOpen = false;
+            this.focusService.focus();
+            if (result instanceof DialogCloseResult) {
+                return undefined;
+            }
+            const res = result;
+            return res.value;
+        }));
+    }
+    textFor(key) {
+        return this.localization.get(key);
+    }
+}
+DialogsService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DialogsService, deps: [{ token: i1.DialogService }, { token: i2.LocalizationService }, { token: i0.ChangeDetectorRef }, { token: i3.FocusService }, { token: i4.ViewStateService }], target: i0.ɵɵFactoryTarget.Injectable });
+DialogsService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DialogsService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DialogsService, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: i1.DialogService }, { type: i2.LocalizationService }, { type: i0.ChangeDetectorRef }, { type: i3.FocusService }, { type: i4.ViewStateService }]; } });

package/esm2015/editing/edit-dialog-template.directive.js

@@ -0,0 +1,34 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { Directive, Optional, Input } from '@angular/core';
+import * as i0 from "@angular/core";
+/**
+ * Represents the template for the edit dialog of the Scheduler.
+ * To define the template, nest an `<ng-template>` tag
+ * with the `kendoSchedulerEditDialogTemplate` directive inside the `<kendo-scheduler>` tag.
+ *
+ * The template context is set to the current event and then the following additional fields are passed:
+ * - `event`&mdash;The currently edited event. Represents the default context that will be assigned to any template variable which utilizes the `let-x` syntax&mdash;for example, `let-event`.
+ * - `formGroup`&mdash;The current [`FormGroup`](https://angular.io/docs/ts/latest/api/forms/index/FormGroup-class.html).
+ * - `editMode`&mdash;The current edit mode.
+ * - `isNew`&mdash;The state of the current event.
+ */
+export class EditDialogTemplateDirective {
+    constructor(templateRef) {
+        this.templateRef = templateRef;
+    }
+}
+EditDialogTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: EditDialogTemplateDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
+EditDialogTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: EditDialogTemplateDirective, selector: "[kendoSchedulerEditDialogTemplate]", inputs: { autoFocusedElement: "autoFocusedElement" }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: EditDialogTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[kendoSchedulerEditDialogTemplate]'
+                }]
+        }], ctorParameters: function () { return [{ type: i0.TemplateRef, decorators: [{
+                    type: Optional
+                }] }]; }, propDecorators: { autoFocusedElement: [{
+                type: Input
+            }] } });