@progress/kendo-angular-scheduler 3.1.0-dev.202204121440 → 4.0.0-dev.202204191149

package/esm2015/editing/recurrence/recurrence.service.js

@@ -0,0 +1,246 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { EventEmitter, Injectable } from "@angular/core";
+import { parseRule, serializeRule } from '@progress/kendo-recurrence';
+import { capitalize, isNullOrEmptyString } from '../../common/util';
+import { isPresent } from '../../common/util';
+import { toLocalDate, ZonedDate } from '@progress/kendo-date-math';
+import * as i0 from "@angular/core";
+import * as i1 from "@progress/kendo-angular-intl";
+import * as i2 from "@progress/kendo-angular-l10n";
+let uniqueIdCounter = 0;
+const offsetPositions = ['first', 'second', 'third', 'fourth', 'last'];
+const frequencies = ['never', 'daily', 'weekly', 'monthly', 'yearly'];
+/**
+ * @hidden
+ */
+export const dayRule = [
+    { day: 0, offset: 0 },
+    { day: 1, offset: 0 },
+    { day: 2, offset: 0 },
+    { day: 3, offset: 0 },
+    { day: 4, offset: 0 },
+    { day: 5, offset: 0 },
+    { day: 6, offset: 0 }
+];
+/**
+ * @hidden
+ */
+export const weekdayRule = [
+    { day: 1, offset: 0 },
+    { day: 2, offset: 0 },
+    { day: 3, offset: 0 },
+    { day: 4, offset: 0 },
+    { day: 5, offset: 0 }
+];
+/**
+ * @hidden
+ */
+export const weekendRule = [
+    { day: 0, offset: 0 },
+    { day: 6, offset: 0 }
+];
+/**
+ * @hidden
+ *
+ * The internal service for handling changes in the RecurrenceEditor component.
+ */
+export class RecurrenceService {
+    constructor(intl, localization) {
+        this.intl = intl;
+        this.localization = localization;
+        this.change = new EventEmitter();
+        this.endRuleChange = new EventEmitter();
+        this.frequencyChange = new EventEmitter();
+        this.repeatOnRuleChange = new EventEmitter();
+    }
+    init(rrule = "", start, timezone, weekStart) {
+        this.start = start;
+        this.timezone = timezone;
+        this.weekStart = weekStart;
+        this.rrule = parseRule({
+            recurrenceRule: rrule,
+            weekStart: weekStart
+        });
+    }
+    /**
+     * @hidden
+     */
+    getUniqueId() {
+        return uniqueIdCounter++;
+    }
+    get frequencies() {
+        return frequencies.map((freq) => ({
+            value: freq,
+            text: this.localization.get('frequencies' + capitalize(freq))
+        }));
+    }
+    get frequency() {
+        if (isPresent(this.rrule) && !isNullOrEmptyString(this.rrule.freq)) {
+            return this.rrule.freq;
+        }
+        return 'never';
+    }
+    setFrequency(freq) {
+        this.rrule = {};
+        this.rrule.freq = freq;
+        this.rrule.interval = 1;
+        if (freq === 'weekly') {
+            this.rrule.byWeekDay = [{
+                    day: this.start.getDay(),
+                    offset: 0
+                }];
+        }
+        if (freq === 'monthly' || freq === 'yearly') {
+            this.rrule.byMonthDay = [this.start.getDate()];
+        }
+        if (freq === 'yearly') {
+            this.rrule.byMonth = [this.start.getMonth() + 1];
+        }
+        this.frequencyChange.emit();
+        this.onChange();
+    }
+    set interval(newInterval) {
+        this.rrule.interval = newInterval;
+        this.onChange();
+    }
+    set count(newCount) {
+        this.rrule.count = newCount;
+        this.onChange();
+    }
+    set until(newUntil) {
+        this.rrule.until = ZonedDate.fromLocalDate(newUntil, this.timezone);
+        this.onChange();
+    }
+    get until() {
+        if (isPresent(this.rrule.until)) {
+            return toLocalDate(this.rrule.until);
+        }
+    }
+    setWeekDays(newWeekDays) {
+        this.rrule.byWeekDay = newWeekDays;
+        this.onChange();
+    }
+    set monthDays(newMonthDays) {
+        this.rrule.byMonthDay = newMonthDays;
+        this.onChange();
+    }
+    set positions(newPositions) {
+        this.rrule.bySetPosition = newPositions;
+        this.onChange();
+    }
+    setMonths(newMonths) {
+        this.rrule.byMonth = newMonths;
+        this.onChange();
+    }
+    get months() {
+        return this.intl.dateFormatNames({
+            type: 'months',
+            nameType: 'wide'
+        }).map((month, idx) => ({
+            text: month,
+            value: idx + 1
+        }));
+    }
+    /*
+        ToDo Refactor weekDays and extendedWeekDays getters into a single method
+    */
+    get weekDays() {
+        const firstDay = this.weekStart;
+        const abbrNames = this.intl.dateFormatNames({
+            type: 'days',
+            nameType: 'abbreviated'
+        }).map((day, idx) => ({
+            text: day,
+            value: idx
+        }));
+        /* Sorting according to first week day */
+        return (abbrNames.slice(firstDay)).concat(abbrNames.slice(0, firstDay));
+    }
+    get extendedWeekDays() {
+        const firstDay = this.weekStart;
+        let wideNames = this.intl.dateFormatNames({
+            type: 'days',
+            nameType: 'wide'
+        }).map((day, idx) => ({
+            text: day,
+            value: idx
+        }));
+        const sortedWideNames = (wideNames.slice(firstDay)).concat(wideNames.slice(0, firstDay));
+        const specialRules = [
+            { text: this.localization.get('weekdaysDay'), value: 'day' },
+            { text: this.localization.get('weekdaysWeekday'), value: 'weekday' },
+            { text: this.localization.get('weekdaysWeekendday'), value: 'weekend' }
+        ];
+        return specialRules.concat(sortedWideNames);
+    }
+    get offsetPositions() {
+        const values = [1, 2, 3, 4, -1];
+        return offsetPositions.map((offset, idx) => ({
+            text: this.localization.get('offsetPositions' + capitalize(offset)),
+            value: values[idx]
+        }));
+    }
+    get endRule() {
+        if (isPresent(this.rrule.count)) {
+            return 'count';
+        }
+        else if (isPresent(this.rrule.until)) {
+            return 'until';
+        }
+        else {
+            return 'never';
+        }
+    }
+    set endRule(endRule) {
+        if (endRule === 'count') {
+            this.rrule.until = null;
+        }
+        else if (endRule === 'until') {
+            this.rrule.count = null;
+        }
+        else {
+            /* never */
+            this.rrule.count = null;
+            this.rrule.until = null;
+        }
+        this.endRuleChange.emit(endRule);
+        this.onChange();
+    }
+    get repeatOnRule() {
+        if (isPresent(this.rrule.byWeekDay)) {
+            return 'weekday';
+        }
+        else if (isPresent(this.rrule.byMonthDay)) {
+            return 'monthday';
+        }
+        return null;
+    }
+    set repeatOnRule(repeatOnRule) {
+        if (repeatOnRule === 'monthday') {
+            this.rrule.byWeekDay = null;
+            this.rrule.bySetPosition = null;
+        }
+        else {
+            /* weekDays */
+            this.rrule.byMonthDay = null;
+        }
+        this.repeatOnRuleChange.emit(repeatOnRule);
+        this.onChange();
+    }
+    onChange() {
+        if (this.frequency === 'never') {
+            this.change.emit(null);
+        }
+        else {
+            this.change.emit(serializeRule(this.rrule, this.timezone));
+        }
+    }
+}
+RecurrenceService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: RecurrenceService, deps: [{ token: i1.IntlService }, { token: i2.LocalizationService }], target: i0.ɵɵFactoryTarget.Injectable });
+RecurrenceService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: RecurrenceService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: RecurrenceService, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: i1.IntlService }, { type: i2.LocalizationService }]; } });

package/esm2015/editing/recurrence/repeat-on-radio-button.directive.js

@@ -0,0 +1,72 @@
+/**-----------------------------------------------------------------------------------------
+* 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, HostBinding } from '@angular/core';
+import * as i0 from "@angular/core";
+import * as i1 from "./recurrence.service";
+/**
+ * @hidden
+ */
+export class RepeatOnRadioButtonDirective {
+    constructor(el, renderer, recurrence, changeDetector) {
+        this.el = el;
+        this.renderer = renderer;
+        this.recurrence = recurrence;
+        this.changeDetector = changeDetector;
+        this.type = 'radio';
+        this.radioClass = true;
+        this.radioSizeClass = true;
+        this.destroyChange = this.renderer.listen(this.elem, 'change', this.onChange.bind(this));
+    }
+    set repeatOnRule(value) {
+        const parts = value.split('-');
+        this._repeatOnRule = parts[0];
+        this._uniqueId = parts[1];
+    }
+    ngOnInit() {
+        this.renderer.setAttribute(this.elem, 'id', `k-repeaton-${this._repeatOnRule}-${this._uniqueId}`);
+        this.renderer.setAttribute(this.elem, 'name', `day-${this._uniqueId}`);
+    }
+    ngAfterContentChecked() {
+        this.setCheckedState();
+    }
+    ngOnDestroy() {
+        if (this.destroyChange) {
+            this.destroyChange();
+        }
+    }
+    onChange() {
+        if (this.elem.checked) {
+            this.recurrence.repeatOnRule = this._repeatOnRule;
+            this.changeDetector.markForCheck();
+        }
+    }
+    setCheckedState() {
+        const isChecked = this._repeatOnRule === this.recurrence.repeatOnRule;
+        this.renderer.setProperty(this.elem, 'checked', isChecked);
+    }
+    get elem() {
+        return this.el.nativeElement;
+    }
+}
+RepeatOnRadioButtonDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: RepeatOnRadioButtonDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i1.RecurrenceService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive });
+RepeatOnRadioButtonDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: RepeatOnRadioButtonDirective, selector: "[kendoRecurrenceRepeatOnRadioButton]", inputs: { repeatOnRule: ["kendoRecurrenceRepeatOnRadioButton", "repeatOnRule"] }, host: { properties: { "attr.type": "this.type", "class.k-radio": "this.radioClass", "class.k-radio-md": "this.radioSizeClass" } }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: RepeatOnRadioButtonDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[kendoRecurrenceRepeatOnRadioButton]'
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i1.RecurrenceService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { type: [{
+                type: HostBinding,
+                args: ['attr.type']
+            }], radioClass: [{
+                type: HostBinding,
+                args: ['class.k-radio']
+            }], radioSizeClass: [{
+                type: HostBinding,
+                args: ['class.k-radio-md']
+            }], repeatOnRule: [{
+                type: Input,
+                args: ["kendoRecurrenceRepeatOnRadioButton"]
+            }] } });

package/esm2015/editing/resource-editor-base.js

@@ -0,0 +1,59 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { Input, EventEmitter, Output, Directive } from '@angular/core';
+import { isPresent, getField } from '../common/util';
+import * as i0 from "@angular/core";
+/**
+ * @hidden
+ */
+export class ResourceEditorBase {
+    constructor() {
+        this.valueChange = new EventEmitter();
+        this.getField = getField;
+        this.onTouchedCallback = (_) => { };
+        this.onChangeCallback = (_) => { };
+    }
+    /**
+     * @hidden
+     */
+    writeValue(newValue) {
+        this.resourceValue = newValue;
+    }
+    getResourceStyle(dataItem) {
+        return {
+            'background-color': getField(dataItem, this.resource.colorField),
+            'margin-right': isPresent(getField(dataItem, this.resource.valueField)) ? '8px' : '4px'
+        };
+    }
+    onResourceValueChange(newValue) {
+        this.resourceValue = newValue;
+        this.emitChange(this.resourceValue);
+    }
+    /**
+     * @hidden
+     */
+    registerOnChange(fn) {
+        this.onChangeCallback = fn;
+    }
+    /**
+     * @hidden
+     */
+    registerOnTouched(fn) {
+        this.onTouchedCallback = fn;
+    }
+    emitChange(value) {
+        this.onChangeCallback(value);
+        this.valueChange.emit(value);
+    }
+}
+ResourceEditorBase.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ResourceEditorBase, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+ResourceEditorBase.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: ResourceEditorBase, inputs: { resource: "resource" }, outputs: { valueChange: "valueChange" }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ResourceEditorBase, decorators: [{
+            type: Directive
+        }], propDecorators: { resource: [{
+                type: Input
+            }], valueChange: [{
+                type: Output
+            }] } });

package/esm2015/editing/resource-multiple-editor.component.js

@@ -0,0 +1,90 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { Component, forwardRef, ViewChild } from '@angular/core';
+import { NG_VALUE_ACCESSOR } from '@angular/forms';
+import { ResourceEditorBase } from './resource-editor-base';
+import * as i0 from "@angular/core";
+import * as i1 from "@progress/kendo-angular-dropdowns";
+import * as i2 from "@angular/common";
+/**
+ * @hidden
+ */
+export const MULTIPLE_RESOURCE_VALUE_ACCESSOR = {
+    multi: true,
+    provide: NG_VALUE_ACCESSOR,
+    useExisting: forwardRef(() => MultipleResourceEditorComponent)
+};
+/**
+ * @hidden
+ */
+export class MultipleResourceEditorComponent extends ResourceEditorBase {
+    getTagStyle(dataItem) {
+        return {
+            'background-color': dataItem[this.resource.colorField]
+        };
+    }
+    focus() {
+        this.resourceMultiSelect.focus();
+    }
+}
+MultipleResourceEditorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: MultipleResourceEditorComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+MultipleResourceEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: MultipleResourceEditorComponent, selector: "kendo-multiple-resource-editor", providers: [
+        MULTIPLE_RESOURCE_VALUE_ACCESSOR
+    ], viewQueries: [{ propertyName: "resourceMultiSelect", first: true, predicate: ["resourceMultiSelect"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: `
+        <kendo-multiselect
+            #resourceMultiSelect
+            [data]='resource.data'
+            [textField]='resource.textField'
+            [valueField]='resource.valueField'
+            [valuePrimitive]='true'
+            [value]='resourceValue'
+            (valueChange)='onResourceValueChange($event)'
+        >
+            <ng-template kendoDropDownListItemTemplate let-dataItem>
+                <span *ngIf="resource.colorField" class="k-scheduler-mark"
+                [ngStyle]="getResourceStyle(dataItem)"></span>
+                {{ getField(dataItem, resource.textField) }}
+            </ng-template>
+            <ng-template kendoMultiSelectTagTemplate let-dataItem>
+                <span *ngIf="resource.colorField" class="k-scheduler-mark"
+                [ngStyle]="getTagStyle(dataItem)"></span>
+                {{ getField(dataItem, resource.textField) }}
+            </ng-template>
+        </kendo-multiselect>
+    `, isInline: true, components: [{ type: i1.MultiSelectComponent, selector: "kendo-multiselect", inputs: ["focusableId", "autoClose", "loading", "data", "value", "valueField", "textField", "tabindex", "tabIndex", "size", "rounded", "fillMode", "placeholder", "disabled", "itemDisabled", "checkboxes", "readonly", "filterable", "virtual", "popupSettings", "listHeight", "valuePrimitive", "clearButton", "tagMapper", "allowCustom", "valueNormalizer"], outputs: ["filterChange", "valueChange", "open", "opened", "close", "closed", "focus", "blur", "removeTag"], exportAs: ["kendoMultiSelect"] }], directives: [{ type: i1.ItemTemplateDirective, selector: "[kendoDropDownListItemTemplate],[kendoComboBoxItemTemplate],[kendoAutoCompleteItemTemplate],[kendoMultiSelectItemTemplate]" }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i1.TagTemplateDirective, selector: "[kendoMultiSelectTagTemplate],[kendoMultiSelectTreeTagTemplate]" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: MultipleResourceEditorComponent, decorators: [{
+            type: Component,
+            args: [{
+                    providers: [
+                        MULTIPLE_RESOURCE_VALUE_ACCESSOR
+                    ],
+                    selector: 'kendo-multiple-resource-editor',
+                    template: `
+        <kendo-multiselect
+            #resourceMultiSelect
+            [data]='resource.data'
+            [textField]='resource.textField'
+            [valueField]='resource.valueField'
+            [valuePrimitive]='true'
+            [value]='resourceValue'
+            (valueChange)='onResourceValueChange($event)'
+        >
+            <ng-template kendoDropDownListItemTemplate let-dataItem>
+                <span *ngIf="resource.colorField" class="k-scheduler-mark"
+                [ngStyle]="getResourceStyle(dataItem)"></span>
+                {{ getField(dataItem, resource.textField) }}
+            </ng-template>
+            <ng-template kendoMultiSelectTagTemplate let-dataItem>
+                <span *ngIf="resource.colorField" class="k-scheduler-mark"
+                [ngStyle]="getTagStyle(dataItem)"></span>
+                {{ getField(dataItem, resource.textField) }}
+            </ng-template>
+        </kendo-multiselect>
+    `
+                }]
+        }], propDecorators: { resourceMultiSelect: [{
+                type: ViewChild,
+                args: ['resourceMultiSelect', { static: true }]
+            }] } });

package/esm2015/editing/resource-single-editor.component.js

@@ -0,0 +1,75 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { Component, forwardRef, ViewChild } from '@angular/core';
+import { NG_VALUE_ACCESSOR } from '@angular/forms';
+import { ResourceEditorBase } from './resource-editor-base';
+import * as i0 from "@angular/core";
+import * as i1 from "@progress/kendo-angular-dropdowns";
+import * as i2 from "@angular/common";
+/**
+ * @hidden
+ */
+export const SINGLE_RESOURCE_VALUE_ACCESSOR = {
+    multi: true,
+    provide: NG_VALUE_ACCESSOR,
+    useExisting: forwardRef(() => SingleResourceEditorComponent)
+};
+/**
+ * @hidden
+ */
+export class SingleResourceEditorComponent extends ResourceEditorBase {
+    focus() {
+        this.resourceDropDown.focus();
+    }
+}
+SingleResourceEditorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SingleResourceEditorComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+SingleResourceEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SingleResourceEditorComponent, selector: "kendo-single-resource-editor", providers: [
+        SINGLE_RESOURCE_VALUE_ACCESSOR
+    ], viewQueries: [{ propertyName: "resourceDropDown", first: true, predicate: ["resourceDropDown"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: `
+        <kendo-dropdownlist
+            #resourceDropDown
+            [data]='resource.data'
+            [textField]='resource.textField'
+            [valueField]='resource.valueField'
+            [valuePrimitive]='true'
+            [value]='resourceValue'
+            (valueChange)='onResourceValueChange($event)'
+        >
+            <ng-template kendoDropDownListItemTemplate let-dataItem>
+                <span *ngIf="resource.colorField" class="k-scheduler-mark"
+                [ngStyle]="getResourceStyle(dataItem)"></span>
+                {{ getField(dataItem, resource.textField) }}
+            </ng-template>
+        </kendo-dropdownlist>
+    `, isInline: true, components: [{ type: i1.DropDownListComponent, selector: "kendo-dropdownlist", inputs: ["iconClass", "loading", "data", "value", "textField", "valueField", "popupSettings", "listHeight", "defaultItem", "disabled", "itemDisabled", "readonly", "filterable", "virtual", "ignoreCase", "delay", "valuePrimitive", "tabindex", "tabIndex", "size", "rounded", "fillMode", "id"], outputs: ["valueChange", "filterChange", "selectionChange", "open", "opened", "close", "closed", "focus", "blur"], exportAs: ["kendoDropDownList"] }], directives: [{ type: i1.ItemTemplateDirective, selector: "[kendoDropDownListItemTemplate],[kendoComboBoxItemTemplate],[kendoAutoCompleteItemTemplate],[kendoMultiSelectItemTemplate]" }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SingleResourceEditorComponent, decorators: [{
+            type: Component,
+            args: [{
+                    providers: [
+                        SINGLE_RESOURCE_VALUE_ACCESSOR
+                    ],
+                    selector: 'kendo-single-resource-editor',
+                    template: `
+        <kendo-dropdownlist
+            #resourceDropDown
+            [data]='resource.data'
+            [textField]='resource.textField'
+            [valueField]='resource.valueField'
+            [valuePrimitive]='true'
+            [value]='resourceValue'
+            (valueChange)='onResourceValueChange($event)'
+        >
+            <ng-template kendoDropDownListItemTemplate let-dataItem>
+                <span *ngIf="resource.colorField" class="k-scheduler-mark"
+                [ngStyle]="getResourceStyle(dataItem)"></span>
+                {{ getField(dataItem, resource.textField) }}
+            </ng-template>
+        </kendo-dropdownlist>
+    `
+                }]
+        }], propDecorators: { resourceDropDown: [{
+                type: ViewChild,
+                args: ['resourceDropDown', { static: true }]
+            }] } });

package/esm2015/editing/timezone-editor.component.js

@@ -0,0 +1,124 @@
+/**-----------------------------------------------------------------------------------------
+* 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 { Component, forwardRef, Input, EventEmitter, Output } from '@angular/core';
+import { NG_VALUE_ACCESSOR } from '@angular/forms';
+import { timezoneNames } from '@progress/kendo-date-math';
+import * as i0 from "@angular/core";
+import * as i1 from "@progress/kendo-angular-dropdowns";
+/**
+ * @hidden
+ */
+export const TIME_ZONE_VALUE_ACCESSOR = {
+    multi: true,
+    provide: NG_VALUE_ACCESSOR,
+    useExisting: forwardRef(() => TimeZoneEditorComponent)
+};
+/**
+ * Represents the Kendo UI TimeZone Editor component for Angular.
+ * `TimeZoneEditorComponent` displays the currently loaded timezones.
+ * Used for editing the `start` and `end` timezones of the `SchedulerEvent` objects.
+ */
+export class TimeZoneEditorComponent {
+    constructor() {
+        /**
+         * Specifies the width of the ComboBox which contains the names of the timezones.
+         */
+        this.width = 260;
+        /**
+         * Fires when the value of the component has changed.
+         */
+        this.valueChange = new EventEmitter();
+        this.onTouchedCallback = (_) => { };
+        this.onChangeCallback = (_) => { };
+        this.tzNames = timezoneNames();
+        this.tzSource = this.tzNames.slice();
+    }
+    /**
+     * @hidden
+     */
+    onTimeZoneChange(tzName) {
+        this.tz = tzName;
+        this.onChangeCallback(this.tz);
+        this.valueChange.emit(tzName);
+    }
+    /**
+     * @hidden
+     */
+    onTimeZoneFilterChange(value) {
+        this.tzSource = this.tzNames.filter((tz) => tz.toLowerCase().indexOf(value.toLowerCase()) !== -1);
+    }
+    /**
+     * @hidden
+     */
+    writeValue(value) {
+        if (typeof value === 'string' && this.tzNames.indexOf(value) >= 0) {
+            this.tz = value;
+        }
+    }
+    /**
+     * @hidden
+     */
+    focus() {
+        this.tzComboBox.focus();
+    }
+    /**
+     * @hidden
+     */
+    registerOnChange(fn) {
+        this.onChangeCallback = fn;
+    }
+    /**
+     * @hidden
+     */
+    registerOnTouched(fn) {
+        this.onTouchedCallback = fn;
+    }
+}
+TimeZoneEditorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TimeZoneEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+TimeZoneEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: TimeZoneEditorComponent, selector: "kendo-timezone-editor", inputs: { width: "width" }, outputs: { valueChange: "valueChange" }, providers: [
+        TIME_ZONE_VALUE_ACCESSOR
+    ], viewQueries: [{ propertyName: "tzComboBox", first: true, predicate: ["tzcombobox"], descendants: true, static: true }], ngImport: i0, template: `
+        <kendo-combobox
+            #tzcombobox
+            [style.width.px]="width"
+            [allowCustom]="false"
+            [data]="tzSource"
+            [filterable]="true"
+            [suggest]="true"
+            [value]="tz"
+            (filterChange)="onTimeZoneFilterChange($event)"
+            (valueChange)="onTimeZoneChange($event)">
+        </kendo-combobox>
+    `, isInline: true, components: [{ type: i1.ComboBoxComponent, selector: "kendo-combobox", inputs: ["focusableId", "allowCustom", "data", "value", "textField", "valueField", "valuePrimitive", "valueNormalizer", "placeholder", "popupSettings", "listHeight", "iconClass", "loading", "suggest", "clearButton", "disabled", "itemDisabled", "readonly", "tabindex", "tabIndex", "filterable", "virtual", "size", "rounded", "fillMode"], outputs: ["valueChange", "selectionChange", "filterChange", "open", "opened", "close", "closed", "focus", "blur"], exportAs: ["kendoComboBox"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TimeZoneEditorComponent, decorators: [{
+            type: Component,
+            args: [{
+                    providers: [
+                        TIME_ZONE_VALUE_ACCESSOR
+                    ],
+                    selector: 'kendo-timezone-editor',
+                    template: `
+        <kendo-combobox
+            #tzcombobox
+            [style.width.px]="width"
+            [allowCustom]="false"
+            [data]="tzSource"
+            [filterable]="true"
+            [suggest]="true"
+            [value]="tz"
+            (filterChange)="onTimeZoneFilterChange($event)"
+            (valueChange)="onTimeZoneChange($event)">
+        </kendo-combobox>
+    `
+                }]
+        }], ctorParameters: function () { return []; }, propDecorators: { tzComboBox: [{
+                type: ViewChild,
+                args: ['tzcombobox', { static: true }]
+            }], width: [{
+                type: Input
+            }], valueChange: [{
+                type: Output
+            }] } });