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

package/esm2015/editing/recurrence/recurrence-monthly-yearly-editor.component.js

@@ -0,0 +1,434 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { Component, ViewChildren, Input } from '@angular/core';
+import { isPresent } from '../../common/util';
+import { dayRule, weekdayRule, weekendRule } from './recurrence.service';
+import { RepeatOnRadioButtonDirective } from './repeat-on-radio-button.directive';
+import * as i0 from "@angular/core";
+import * as i1 from "./recurrence.service";
+import * as i2 from "@progress/kendo-angular-l10n";
+import * as i3 from "@progress/kendo-angular-dropdowns";
+import * as i4 from "@progress/kendo-angular-inputs";
+import * as i5 from "./repeat-on-radio-button.directive";
+import * as i6 from "@angular/common";
+/**
+ * @hidden
+ */
+export class RecurrenceMonthlyYearlyEditorComponent {
+    constructor(recurrence, localization) {
+        this.recurrence = recurrence;
+        this.localization = localization;
+        this.uniqueId = this.recurrence.getUniqueId();
+        this.numericOptions = {
+            min: 1,
+            max: 31,
+            format: '#',
+            autoCorrect: true,
+            step: 1,
+            spinners: true
+        };
+        this.setInitialValues();
+        this.subscribeEventHandlers();
+    }
+    set userNumericOptions(options) {
+        this.numericOptions = Object.assign(Object.assign({}, this.numericOptions), options);
+    }
+    setInitialValues() {
+        this.extendedWeekDays = this.recurrence.extendedWeekDays;
+        this.offsetPositions = this.recurrence.offsetPositions;
+        this.currentOffset = this.defaultOffset;
+        this.currentWeekDay = this.defaultWeekDay;
+        if (this.currentFreq === 'yearly') {
+            this.months = this.recurrence.months;
+            this.currentMonthMonthDay = this.currentMonthWeekDay = this.recurrence.rrule.byMonth[0];
+        }
+    }
+    subscribeEventHandlers() {
+        this.subs = this.recurrence.repeatOnRuleChange.subscribe(this.onRepeatOnRuleChange.bind(this));
+        this.subs.add(this.recurrence.frequencyChange.subscribe(this.onFrequencyChange.bind(this)));
+    }
+    onRepeatOnRuleChange(newRepeatOnRule) {
+        if (newRepeatOnRule === 'monthday') {
+            this.recurrence.rrule.byMonthDay = [this.monthDay];
+            if (this.currentFreq === 'yearly') {
+                this.recurrence.rrule.byMonth = [this.currentMonthMonthDay];
+            }
+        }
+        else if (newRepeatOnRule === 'weekday') {
+            if (typeof this.weekDay === 'string') {
+                /* day, weekday or weekend */
+                this.recurrence.rrule.bySetPosition = [this.offset];
+                this.recurrence.rrule.byWeekDay = this.weekDayRuleFromString(this.weekDay);
+            }
+            else {
+                /* specific weekday */
+                this.recurrence.rrule.byWeekDay = [{
+                        day: this.weekDay,
+                        offset: this.offset
+                    }];
+            }
+            if (this.currentFreq === 'yearly') {
+                this.recurrence.rrule.byMonth = [this.currentMonthWeekDay];
+            }
+        }
+    }
+    onFrequencyChange() {
+        this.setInitialValues();
+    }
+    ngOnDestroy() {
+        if (this.subs) {
+            this.subs.unsubscribe();
+        }
+    }
+    get monthDay() {
+        const rrule = this.recurrence.rrule;
+        if (isPresent(rrule.byMonthDay) && rrule.byMonthDay.length > 0) {
+            return rrule.byMonthDay[0];
+        }
+        else if (isPresent(this.currentMonthDay)) {
+            return this.currentMonthDay;
+        }
+        else {
+            return this.recurrence.start.getDate();
+        }
+    }
+    get weekDay() {
+        const rrule = this.recurrence.rrule;
+        if (isPresent(rrule.byWeekDay)) {
+            const weekDaysCount = rrule.byWeekDay.length;
+            switch (weekDaysCount) {
+                case 7:
+                    return 'day';
+                case 5:
+                    return 'weekday';
+                case 2:
+                    return 'weekend';
+                case 1:
+                    return rrule.byWeekDay[0].day;
+                default:
+                    break;
+            }
+        }
+        else if (isPresent(this.currentWeekDay)) {
+            return this.currentWeekDay;
+        }
+        return this.defaultWeekDay;
+    }
+    get offset() {
+        const rrule = this.recurrence.rrule;
+        if (isPresent(rrule.byWeekDay)) {
+            const weekDaysCount = rrule.byWeekDay.length;
+            switch (weekDaysCount) {
+                case 7:
+                case 5:
+                case 2:
+                    return rrule.bySetPosition[0];
+                case 1:
+                    return rrule.byWeekDay[0].offset;
+                default:
+                    break;
+            }
+        }
+        else if (isPresent(this.currentOffset)) {
+            return this.currentOffset;
+        }
+        return this.defaultOffset;
+    }
+    onMonthChange(month, repeatOnRule) {
+        if (repeatOnRule === 'monthday') {
+            this.currentMonthMonthDay = month;
+        }
+        else {
+            this.currentMonthWeekDay = month;
+        }
+        this.recurrence.setMonths([month]);
+    }
+    onMonthDayChange(monthDay) {
+        this.currentMonthDay = monthDay;
+        this.recurrence.monthDays = [monthDay];
+    }
+    onOffsetPositionChange(offset) {
+        const rrule = this.recurrence.rrule;
+        if (isPresent(rrule.byWeekDay)) {
+            const weekDaysCount = rrule.byWeekDay.length;
+            switch (weekDaysCount) {
+                case 7:
+                case 5:
+                case 2:
+                    this.recurrence.positions = [offset];
+                    break;
+                case 1:
+                    rrule.byWeekDay[0].offset = offset;
+                    this.recurrence.onChange();
+                    break;
+                default:
+                    break;
+            }
+        }
+        this.currentOffset = offset;
+    }
+    onWeekDayChange(weekDay) {
+        let weekDays;
+        if (typeof weekDay === 'string') {
+            /* day, weekday or weekend */
+            weekDays = this.weekDayRuleFromString(weekDay);
+            this.recurrence.positions = [this.offset];
+        }
+        else {
+            /* specific weekday */
+            weekDays = [{
+                    day: weekDay,
+                    offset: this.offset
+                }];
+        }
+        this.currentWeekDay = weekDay;
+        this.recurrence.setWeekDays(weekDays);
+    }
+    isDisabled(repeatOn) {
+        return this.recurrence.repeatOnRule !== repeatOn;
+    }
+    get currentFreq() {
+        return this.recurrence.frequency;
+    }
+    get defaultOffset() {
+        return 1;
+    }
+    get defaultWeekDay() {
+        return this.recurrence.start.getDay();
+    }
+    weekDayRuleFromString(weekDay) {
+        switch (weekDay) {
+            case 'day':
+                return dayRule;
+            case 'weekday':
+                return weekdayRule;
+            case 'weekend':
+                return weekendRule;
+            default:
+                break;
+        }
+        return null;
+    }
+    textForRepeatOn() {
+        const freq = this.currentFreq;
+        switch (freq) {
+            case 'monthly':
+                return this.textFor('monthlyRepeatOn');
+            case 'yearly':
+                return this.textFor('yearlyRepeatOn');
+            default:
+                break;
+        }
+    }
+    textFor(key) {
+        return this.localization.get(key);
+    }
+    onRepeatOnLabelClick() {
+        const selected = this.repeatOnRadioButtons.toArray().find(r => r.elem.checked);
+        if (selected) {
+            selected.elem.focus();
+        }
+    }
+}
+RecurrenceMonthlyYearlyEditorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: RecurrenceMonthlyYearlyEditorComponent, deps: [{ token: i1.RecurrenceService }, { token: i2.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
+RecurrenceMonthlyYearlyEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: RecurrenceMonthlyYearlyEditorComponent, selector: "kendo-recurrence-monthly-yearly-editor", inputs: { userNumericOptions: "userNumericOptions" }, viewQueries: [{ propertyName: "repeatOnRadioButtons", predicate: RepeatOnRadioButtonDirective, descendants: true }], ngImport: i0, template: `
+        <div class='k-edit-label'>
+            <label (click)="onRepeatOnLabelClick()">{{ textForRepeatOn() }}</label>
+        </div>
+        <div class='k-edit-field'>
+            <ul class='k-reset' [style.width.px]='650'>
+                <li>
+                    <input kendoRecurrenceRepeatOnRadioButton='monthday-{{uniqueId}}' />
+
+                    <label class='k-radio-label' for='k-repeaton-monthday-{{uniqueId}}'>
+                        <ng-template [ngIf]="currentFreq === 'monthly'">
+                            {{ textFor('monthlyDay') }}
+                        </ng-template>
+                    </label>
+
+                    <ng-template [ngIf]="currentFreq === 'yearly'">
+                        <kendo-dropdownlist
+                            [data]='months'
+                            textField='text'
+                            valueField='value'
+                            [value]='currentMonthMonthDay'
+                            [valuePrimitive]='true'
+                            (valueChange)="onMonthChange($event, 'monthday')"
+                            [disabled]="isDisabled('monthday')"
+                            [style.width.px]="170"
+                            [style.margin]="'0 .4ex 0 1ex'">
+                        </kendo-dropdownlist>
+                    </ng-template>
+
+                    <kendo-numerictextbox
+                        [style.width.px]='70'
+                        [min]="numericOptions.min"
+                        [max]="numericOptions.max"
+                        [decimals]="0"
+                        [format]="numericOptions.format"
+                        [autoCorrect]="numericOptions.autoCorrect"
+                        [readonly]="numericOptions.readonly"
+                        [selectOnFocus]="numericOptions.selectOnFocus"
+                        [spinners]="numericOptions.spinners"
+                        [step]="numericOptions.step"
+                        [title]="numericOptions.title"
+                        [value]='monthDay'
+                        (valueChange)='onMonthDayChange($event)'
+                        [disabled]="isDisabled('monthday')"
+                        [style.margin]="'0 .4ex 0 1ex'">
+                    </kendo-numerictextbox>
+                </li>
+                <li>
+                    <input kendoRecurrenceRepeatOnRadioButton='weekday-{{uniqueId}}' />
+                    <label class='k-radio-label' for='k-repeaton-weekday-{{uniqueId}}'></label>
+
+                    <kendo-dropdownlist
+                        [data]='offsetPositions'
+                        textField='text'
+                        valueField='value'
+                        [value]='offset'
+                        [valuePrimitive]='true'
+                        (valueChange)='onOffsetPositionChange($event)'
+                        [disabled]="isDisabled('weekday')"
+                        [style.width.px]="170"
+                        [style.margin]="'0 .4ex 0 1ex'">
+                    </kendo-dropdownlist>
+
+                    <kendo-dropdownlist
+                        [data]="extendedWeekDays"
+                        textField='text'
+                        valueField='value'
+                        [value]='weekDay'
+                        [valuePrimitive]='true'
+                        (valueChange)='onWeekDayChange($event)'
+                        [disabled]="isDisabled('weekday')"
+                        [style.width.px]="170"
+                        [style.margin]="'0 .4ex 0 1ex'">
+                    </kendo-dropdownlist>
+
+                    <ng-template [ngIf]="currentFreq === 'yearly'">
+                        <span>{{ textFor('yearlyOf') }}</span>
+
+                        <kendo-dropdownlist
+                            [data]='months'
+                            textField='text'
+                            valueField='value'
+                            [value]='currentMonthWeekDay'
+                            [valuePrimitive]='true'
+                            (valueChange)="onMonthChange($event, 'weekday')"
+                            [disabled]="isDisabled('weekday')"
+                            [style.width.px]="170"
+                            [style.margin]="'0 .4ex 0 1ex'">
+                        </kendo-dropdownlist>
+                    </ng-template>
+                </li>
+            </ul>
+        </div>
+    `, isInline: true, components: [{ type: i3.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"] }, { type: i4.NumericTextBoxComponent, selector: "kendo-numerictextbox", inputs: ["focusableId", "disabled", "readonly", "title", "autoCorrect", "format", "max", "min", "decimals", "placeholder", "step", "spinners", "rangeValidation", "tabindex", "tabIndex", "changeValueOnScroll", "selectOnFocus", "value", "maxlength", "size", "rounded", "fillMode"], outputs: ["valueChange", "focus", "blur"], exportAs: ["kendoNumericTextBox"] }], directives: [{ type: i5.RepeatOnRadioButtonDirective, selector: "[kendoRecurrenceRepeatOnRadioButton]", inputs: ["kendoRecurrenceRepeatOnRadioButton"] }, { type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: RecurrenceMonthlyYearlyEditorComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'kendo-recurrence-monthly-yearly-editor',
+                    template: `
+        <div class='k-edit-label'>
+            <label (click)="onRepeatOnLabelClick()">{{ textForRepeatOn() }}</label>
+        </div>
+        <div class='k-edit-field'>
+            <ul class='k-reset' [style.width.px]='650'>
+                <li>
+                    <input kendoRecurrenceRepeatOnRadioButton='monthday-{{uniqueId}}' />
+
+                    <label class='k-radio-label' for='k-repeaton-monthday-{{uniqueId}}'>
+                        <ng-template [ngIf]="currentFreq === 'monthly'">
+                            {{ textFor('monthlyDay') }}
+                        </ng-template>
+                    </label>
+
+                    <ng-template [ngIf]="currentFreq === 'yearly'">
+                        <kendo-dropdownlist
+                            [data]='months'
+                            textField='text'
+                            valueField='value'
+                            [value]='currentMonthMonthDay'
+                            [valuePrimitive]='true'
+                            (valueChange)="onMonthChange($event, 'monthday')"
+                            [disabled]="isDisabled('monthday')"
+                            [style.width.px]="170"
+                            [style.margin]="'0 .4ex 0 1ex'">
+                        </kendo-dropdownlist>
+                    </ng-template>
+
+                    <kendo-numerictextbox
+                        [style.width.px]='70'
+                        [min]="numericOptions.min"
+                        [max]="numericOptions.max"
+                        [decimals]="0"
+                        [format]="numericOptions.format"
+                        [autoCorrect]="numericOptions.autoCorrect"
+                        [readonly]="numericOptions.readonly"
+                        [selectOnFocus]="numericOptions.selectOnFocus"
+                        [spinners]="numericOptions.spinners"
+                        [step]="numericOptions.step"
+                        [title]="numericOptions.title"
+                        [value]='monthDay'
+                        (valueChange)='onMonthDayChange($event)'
+                        [disabled]="isDisabled('monthday')"
+                        [style.margin]="'0 .4ex 0 1ex'">
+                    </kendo-numerictextbox>
+                </li>
+                <li>
+                    <input kendoRecurrenceRepeatOnRadioButton='weekday-{{uniqueId}}' />
+                    <label class='k-radio-label' for='k-repeaton-weekday-{{uniqueId}}'></label>
+
+                    <kendo-dropdownlist
+                        [data]='offsetPositions'
+                        textField='text'
+                        valueField='value'
+                        [value]='offset'
+                        [valuePrimitive]='true'
+                        (valueChange)='onOffsetPositionChange($event)'
+                        [disabled]="isDisabled('weekday')"
+                        [style.width.px]="170"
+                        [style.margin]="'0 .4ex 0 1ex'">
+                    </kendo-dropdownlist>
+
+                    <kendo-dropdownlist
+                        [data]="extendedWeekDays"
+                        textField='text'
+                        valueField='value'
+                        [value]='weekDay'
+                        [valuePrimitive]='true'
+                        (valueChange)='onWeekDayChange($event)'
+                        [disabled]="isDisabled('weekday')"
+                        [style.width.px]="170"
+                        [style.margin]="'0 .4ex 0 1ex'">
+                    </kendo-dropdownlist>
+
+                    <ng-template [ngIf]="currentFreq === 'yearly'">
+                        <span>{{ textFor('yearlyOf') }}</span>
+
+                        <kendo-dropdownlist
+                            [data]='months'
+                            textField='text'
+                            valueField='value'
+                            [value]='currentMonthWeekDay'
+                            [valuePrimitive]='true'
+                            (valueChange)="onMonthChange($event, 'weekday')"
+                            [disabled]="isDisabled('weekday')"
+                            [style.width.px]="170"
+                            [style.margin]="'0 .4ex 0 1ex'">
+                        </kendo-dropdownlist>
+                    </ng-template>
+                </li>
+            </ul>
+        </div>
+    `
+                }]
+        }], ctorParameters: function () { return [{ type: i1.RecurrenceService }, { type: i2.LocalizationService }]; }, propDecorators: { userNumericOptions: [{
+                type: Input
+            }], repeatOnRadioButtons: [{
+                type: ViewChildren,
+                args: [RepeatOnRadioButtonDirective]
+            }] } });

package/esm2015/editing/recurrence/recurrence-weekday-rule-editor.component.js

@@ -0,0 +1,105 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { Component, ViewChildren } from '@angular/core';
+import { capitalize, isPresent } from '../../common/util';
+import { Button } from '@progress/kendo-angular-buttons';
+import * as i0 from "@angular/core";
+import * as i1 from "./recurrence.service";
+import * as i2 from "@progress/kendo-angular-l10n";
+import * as i3 from "@progress/kendo-angular-buttons";
+import * as i4 from "@angular/common";
+/**
+ * @hidden
+ */
+export class RecurrenceWeekdayRuleEditorComponent {
+    constructor(recurrence, localization) {
+        this.recurrence = recurrence;
+        this.localization = localization;
+        this.selected = [];
+        this.weekDays = this.recurrence.weekDays;
+        this.setSelectedDays();
+    }
+    setSelectedDays() {
+        for (let i = 0; i < 7; i++) {
+            this.selected[i] = false;
+        }
+        if (isPresent(this.rrule.byWeekDay)) {
+            this.rrule.byWeekDay.forEach((rule) => {
+                this.selected[rule.day] = true;
+            });
+        }
+    }
+    onSelectedChange(isSelected, day) {
+        this.selected[day] = isSelected;
+        this.recurrence.setWeekDays(this.serializeToWeekDayRuleArray(this.selected));
+    }
+    isSelected(day) {
+        return this.selected[day.value];
+    }
+    serializeToWeekDayRuleArray(arr) {
+        let selectedValues = [];
+        arr.forEach((isSelected, idx) => {
+            if (isSelected) {
+                selectedValues.push({ day: idx, offset: 0 });
+            }
+        });
+        return selectedValues.length > 0 ? selectedValues : null;
+    }
+    get rrule() {
+        return this.recurrence.rrule;
+    }
+    capitalize(day) {
+        return capitalize(day);
+    }
+    textFor(key) {
+        return this.localization.get(key);
+    }
+    onWeeklyRepeatOnClick() {
+        const selected = this.weekDayButtons.toArray().find(r => r.selected);
+        if (selected) {
+            selected.focus();
+        }
+    }
+}
+RecurrenceWeekdayRuleEditorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: RecurrenceWeekdayRuleEditorComponent, deps: [{ token: i1.RecurrenceService }, { token: i2.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
+RecurrenceWeekdayRuleEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: RecurrenceWeekdayRuleEditorComponent, selector: "kendo-recurrence-weekday-rule-editor", viewQueries: [{ propertyName: "weekDayButtons", predicate: Button, descendants: true }], ngImport: i0, template: `
+        <div class='k-edit-label'>
+            <label (click)="onWeeklyRepeatOnClick()">{{ textFor('weeklyRepeatOn') }}</label>
+        </div>
+        <div class='k-edit-field'>
+            <kendo-buttongroup [selection]="'multiple'">
+                <button *ngFor='let day of weekDays' kendoButton
+                        [style.width.px]="75"
+                        [toggleable]="true"
+                        [selected]="isSelected(day)"
+                        (selectedChange)="onSelectedChange($event, day.value)"
+                >{{ capitalize(day.text) }}</button>
+            </kendo-buttongroup>
+        </div>
+    `, isInline: true, components: [{ type: i3.ButtonGroupComponent, selector: "kendo-buttongroup", inputs: ["disabled", "selection", "width", "tabIndex"], outputs: ["navigate"], exportAs: ["kendoButtonGroup"] }], directives: [{ type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3.ButtonDirective, selector: "button[kendoButton], span[kendoButton]", inputs: ["toggleable", "togglable", "selected", "tabIndex", "icon", "iconClass", "imageUrl", "disabled", "size", "rounded", "fillMode", "themeColor", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: RecurrenceWeekdayRuleEditorComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'kendo-recurrence-weekday-rule-editor',
+                    template: `
+        <div class='k-edit-label'>
+            <label (click)="onWeeklyRepeatOnClick()">{{ textFor('weeklyRepeatOn') }}</label>
+        </div>
+        <div class='k-edit-field'>
+            <kendo-buttongroup [selection]="'multiple'">
+                <button *ngFor='let day of weekDays' kendoButton
+                        [style.width.px]="75"
+                        [toggleable]="true"
+                        [selected]="isSelected(day)"
+                        (selectedChange)="onSelectedChange($event, day.value)"
+                >{{ capitalize(day.text) }}</button>
+            </kendo-buttongroup>
+        </div>
+    `
+                }]
+        }], ctorParameters: function () { return [{ type: i1.RecurrenceService }, { type: i2.LocalizationService }]; }, propDecorators: { weekDayButtons: [{
+                type: ViewChildren,
+                args: [Button]
+            }] } });