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

package/esm2015/views/agenda/agenda-task-item.component.js

@@ -0,0 +1,98 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { Component, Input, ChangeDetectionStrategy, HostBinding, Inject, LOCALE_ID } from '@angular/core';
+import { toLocalDate } from '@progress/kendo-date-math';
+import { isRecurrence, isRecurrenceException, formatEventTime } from '../utils';
+import * as i0 from "@angular/core";
+import * as i1 from "@progress/kendo-angular-l10n";
+import * as i2 from "@angular/common";
+/**
+ * @hidden
+ */
+export class AgendaTaskItemComponent {
+    constructor(localization, localeId) {
+        this.localization = localization;
+        this.localeId = localeId;
+    }
+    get eventTitle() {
+        const start = toLocalDate(this.item.start);
+        const end = toLocalDate(this.item.end);
+        const time = formatEventTime(start, end, this.item.isAllDay, this.localeId);
+        return `${time}, ${this.item.event.title}`;
+    }
+    get eventColor() {
+        return this.item.color;
+    }
+    get deleteMessage() {
+        return this.localization.get('deleteTitle');
+    }
+    get isRecurrence() {
+        return isRecurrence(this.item);
+    }
+    get isRecurrenceException() {
+        return isRecurrenceException(this.item);
+    }
+    get removable() {
+        return this.editable && this.editable.remove !== false;
+    }
+}
+AgendaTaskItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: AgendaTaskItemComponent, deps: [{ token: i1.LocalizationService }, { token: LOCALE_ID }], target: i0.ɵɵFactoryTarget.Component });
+AgendaTaskItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: AgendaTaskItemComponent, selector: "[kendoSchedulerAgendaTaskItem]", inputs: { item: ["kendoSchedulerAgendaTaskItem", "item"], color: "color", eventTemplate: "eventTemplate", editable: "editable" }, host: { properties: { "attr.aria-label": "this.eventTitle" } }, ngImport: i0, template: `
+        <div class="k-task" [title]="item.title">
+            <span class="k-scheduler-mark" *ngIf="eventColor" [style.background-color]="eventColor"></span>
+            <span class="k-icon k-i-reload" *ngIf="isRecurrence"></span>
+            <span class="k-icon k-i-non-recurrence" *ngIf="isRecurrenceException"></span>
+            <ng-container *ngIf="!eventTemplate">
+                {{item?.title }}
+            </ng-container>
+            <ng-container *ngIf="eventTemplate" [ngTemplateOutlet]="eventTemplate"
+                [ngTemplateOutletContext]="{ $implicit: item.event, event: item.event, resources: item.resources }">
+            </ng-container>
+
+            <span *ngIf="removable" class="k-link k-event-delete" aria-hidden="true" [attr.title]="deleteMessage">
+                <span class="k-icon k-i-close"></span>
+            </span>
+        </div>
+    `, isInline: true, directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: AgendaTaskItemComponent, decorators: [{
+            type: Component,
+            args: [{
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    // eslint-disable-next-line @angular-eslint/component-selector
+                    selector: '[kendoSchedulerAgendaTaskItem]',
+                    template: `
+        <div class="k-task" [title]="item.title">
+            <span class="k-scheduler-mark" *ngIf="eventColor" [style.background-color]="eventColor"></span>
+            <span class="k-icon k-i-reload" *ngIf="isRecurrence"></span>
+            <span class="k-icon k-i-non-recurrence" *ngIf="isRecurrenceException"></span>
+            <ng-container *ngIf="!eventTemplate">
+                {{item?.title }}
+            </ng-container>
+            <ng-container *ngIf="eventTemplate" [ngTemplateOutlet]="eventTemplate"
+                [ngTemplateOutletContext]="{ $implicit: item.event, event: item.event, resources: item.resources }">
+            </ng-container>
+
+            <span *ngIf="removable" class="k-link k-event-delete" aria-hidden="true" [attr.title]="deleteMessage">
+                <span class="k-icon k-i-close"></span>
+            </span>
+        </div>
+    `
+                }]
+        }], ctorParameters: function () { return [{ type: i1.LocalizationService }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [LOCALE_ID]
+                }] }]; }, propDecorators: { item: [{
+                type: Input,
+                args: ["kendoSchedulerAgendaTaskItem"]
+            }], color: [{
+                type: Input
+            }], eventTemplate: [{
+                type: Input
+            }], editable: [{
+                type: Input
+            }], eventTitle: [{
+                type: HostBinding,
+                args: ['attr.aria-label']
+            }] } });

package/esm2015/views/agenda/agenda-view-internal.component.js

@@ -0,0 +1,377 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { Component, Input, ViewChild, ElementRef } from '@angular/core';
+import { anyChanged } from '@progress/kendo-angular-common';
+import { addDays, getDate } from '@progress/kendo-date-math';
+import { Subscription, BehaviorSubject, combineLatest, fromEvent, merge } from 'rxjs';
+import { switchMap, take, map } from 'rxjs/operators';
+import { scrollbarWidth, hasScrollbar, closestInScope, hasClasses } from '../../common/dom-queries';
+import { createResourceGroups, groupEvents } from './utils';
+import { ignoreContentChild, elementOffset } from '../utils';
+import * as i0 from "@angular/core";
+import * as i1 from "../view-context.service";
+import * as i2 from "../view-state.service";
+import * as i3 from "@progress/kendo-angular-intl";
+import * as i4 from "../../pdf/pdf.service";
+import * as i5 from "@progress/kendo-angular-l10n";
+import * as i6 from "./agenda-header.component";
+import * as i7 from "./agenda-view-list.component";
+import * as i8 from "@angular/common";
+/**
+ * @hidden
+ */
+export class AgendaViewInternalComponent {
+    constructor(viewContext, viewState, intl, renderer, element, zone, pdfService, localization) {
+        this.viewContext = viewContext;
+        this.viewState = viewState;
+        this.intl = intl;
+        this.renderer = renderer;
+        this.element = element;
+        this.zone = zone;
+        this.pdfService = pdfService;
+        this.localization = localization;
+        this.tasks = new BehaviorSubject(null);
+        this.groupedResources = [];
+        this.spans = [];
+        this.subs = new Subscription();
+    }
+    get eventTemplateRef() {
+        return this.eventTemplate || (this.schedulerEventTemplate || {}).templateRef;
+    }
+    get agendaTimeTemplateRef() {
+        return this.agendaTimeTemplate || (this.schedulerAgendaTimeTemplate || {}).templateRef;
+    }
+    get agendaDateTemplateRef() {
+        return this.agendaDateTemplate || (this.schedulerAgendaDateTemplate || {}).templateRef;
+    }
+    ngOnInit() {
+        this.updateContentHeight = this.updateContentHeight.bind(this);
+        this.subs.add(this.viewContext.selectedDate.subscribe(this.onSelectDate.bind(this)));
+        this.subs.add(this.viewContext.action.subscribe(this.onAction.bind(this)));
+        this.subs.add(this.viewContext.execute.subscribe(this.execute.bind(this)));
+        this.subs.add(this.viewContext.resize.subscribe(this.updateContentHeight));
+        this.subs.add(combineLatest(this.viewContext.items, this.viewState.dateRange).pipe(map(([items, dateRange]) => {
+            this.items = items;
+            this.range = dateRange;
+            return this.createEventGroups();
+        }))
+            .subscribe((tasks) => {
+            this.tasks.next(tasks);
+        }));
+        this.subs.add(this.viewContext.optionsChange.subscribe(this.optionsChange.bind(this)));
+        const onStable = () => this.zone.onStable.pipe(take(1));
+        this.subs.add(combineLatest(this.tasks, this.localization.changes).pipe(switchMap(onStable))
+            .subscribe(this.updateContentHeight));
+        this.subs.add(this.pdfService.createElement.subscribe(this.createPDFElement.bind(this)));
+    }
+    ngOnChanges(changes) {
+        if (anyChanged(['selectedDateFormat', 'selectedShortDateFormat', 'numberOfDays'], changes)) {
+            this.viewState.notifyDateRange(this.dateRange(this.selectedDate));
+        }
+    }
+    ngAfterViewInit() {
+        if (!this.element) {
+            return;
+        }
+        const contentElement = this.content.nativeElement;
+        this.zone.runOutsideAngular(() => {
+            this.subs.add(merge(fromEvent(contentElement, 'click'), fromEvent(contentElement, 'contextmenu'), fromEvent(contentElement, 'dblclick'))
+                .subscribe(e => this.onClick(e)));
+            this.subs.add(fromEvent(contentElement, 'keydown')
+                .subscribe(e => this.onKeydown(e)));
+        });
+    }
+    onClick(e) {
+        const targetTask = this.targetTask(e.target);
+        if (targetTask) {
+            const { task, eventTarget } = targetTask;
+            const eventType = e.type;
+            const isSingle = eventType === 'click';
+            const isDouble = eventType === 'dblclick';
+            if (isSingle && closestInScope(e.target, node => hasClasses(node, 'k-event-delete'), eventTarget)) {
+                this.viewState.emitEvent('remove', { event: task.event, dataItem: task.event.dataItem });
+            }
+            else {
+                const name = isDouble ? 'eventDblClick' : 'eventClick';
+                this.viewState.emitEvent(name, { type: eventType, event: task.event, originalEvent: e });
+            }
+        }
+    }
+    onKeydown(e) {
+        const targetTask = this.targetTask(e.target);
+        if (targetTask) {
+            const task = targetTask.task;
+            this.viewState.emitEvent('eventKeydown', { event: task.event, dataItem: task.event.dataItem, originalEvent: e });
+        }
+    }
+    targetTask(target) {
+        const eventTarget = closestInScope(target, node => node.hasAttribute('data-task-index'), this.element.nativeElement);
+        if (eventTarget) {
+            return {
+                eventTarget,
+                task: this.elementTask(eventTarget)
+            };
+        }
+    }
+    updateContentHeight() {
+        const element = this.element.nativeElement;
+        const parent = element.parentNode;
+        const content = this.content.nativeElement;
+        this.renderer.setStyle(content, 'height', '');
+        let height = parent.clientHeight;
+        for (let idx = 0; idx < parent.children.length; idx++) {
+            const child = parent.children[idx];
+            if (child !== element && !ignoreContentChild(child)) {
+                height -= child.offsetHeight;
+            }
+        }
+        const headerElement = this.headerWrap.nativeElement;
+        height -= this.headerWrap ? headerElement.offsetHeight : 0;
+        this.renderer.setStyle(content, 'height', `${height}px`);
+        const rtl = this.localization.rtl;
+        const padding = hasScrollbar(content, 'vertical') ? scrollbarWidth() : 0;
+        this.renderer.setStyle(headerElement, !rtl ? 'padding-right' : 'padding-left', `${padding}px`);
+        this.renderer.setStyle(headerElement, rtl ? 'padding-right' : 'padding-left', '0px');
+        this.viewState.notifyLayoutEnd();
+    }
+    ngOnDestroy() {
+        this.subs.unsubscribe();
+    }
+    optionsChange(changes) {
+        this.group = changes.group;
+        this.resources = changes.resources;
+        this.groupResources();
+        this.min = changes.min;
+        this.max = changes.max;
+        this.editable = changes.editable;
+        if (this.items && this.items.length) {
+            this.tasks.next(this.createEventGroups());
+        }
+        this.schedulerEventTemplate = changes.eventTemplate;
+        this.schedulerAgendaTimeTemplate = changes.agendaTimeTemplate;
+        this.schedulerAgendaDateTemplate = changes.agendaDateTemplate;
+    }
+    onSelectDate(date) {
+        this.selectedDate = date;
+        this.viewState.notifyDateRange(this.dateRange());
+    }
+    onAction(e) {
+        const now = getDate(this.selectedDate);
+        if (e.type === 'next') {
+            const next = getDate(addDays(now, this.numberOfDays));
+            if (this.isInRange(next)) {
+                this.viewState.notifyNextDate(next);
+            }
+        }
+        if (e.type === 'prev') {
+            const next = getDate(addDays(now, -this.numberOfDays));
+            if (this.isInRange(next)) {
+                this.viewState.notifyNextDate(next);
+            }
+        }
+    }
+    createEventGroups() {
+        const resourceGroups = this.groupedResources.length ? createResourceGroups(this.groupedResources) : null;
+        const eventGroups = this.groups = groupEvents(this.items, {
+            taskResources: this.taskResources,
+            resourceGroups,
+            allResources: this.resources,
+            spans: this.spans,
+            dateRange: this.range
+        });
+        return eventGroups;
+    }
+    dateRange(date = this.selectedDate) {
+        const start = getDate(date);
+        const end = getDate(addDays(start, this.numberOfDays));
+        const rangeEnd = getDate(addDays(start, this.numberOfDays - 1));
+        const text = this.intl.format(this.selectedDateFormat, start, rangeEnd);
+        const shortText = this.intl.format(this.selectedShortDateFormat, start, rangeEnd);
+        return { start, end, text, shortText };
+    }
+    groupResources() {
+        const resources = this.resources || [];
+        const group = this.group || {};
+        const grouped = group.resources;
+        const groupedResources = this.groupedResources = [];
+        if (grouped && grouped.length) {
+            for (let groupIdx = 0; groupIdx < grouped.length; groupIdx++) {
+                const name = grouped[groupIdx];
+                const resource = resources.find(item => item.name === name);
+                if (resource) {
+                    groupedResources.push(resource);
+                }
+            }
+        }
+        this.spans = this.resourceSpans();
+    }
+    resourceSpans() {
+        const spans = [1];
+        const resources = this.groupedResources;
+        let span = 1;
+        for (let idx = resources.length - 1; idx > 0; idx--) {
+            span *= ((resources[idx].data || []).length || 1);
+            spans.unshift(span);
+        }
+        return spans;
+    }
+    get taskResources() {
+        if (this.groupedResources.length) {
+            return this.groupedResources;
+        }
+        else if (this.resources && this.resources.length) {
+            return [this.resources[0]];
+        }
+        else {
+            return [{}];
+        }
+    }
+    isInRange(date) {
+        const dateRange = this.dateRange(date);
+        return (!this.min || this.min < dateRange.end) && (!this.max || dateRange.start <= this.max);
+    }
+    createPDFElement() {
+        const element = this.element.nativeElement.cloneNode(true);
+        element.style.width = `${this.element.nativeElement.offsetWidth}px`;
+        element.querySelector('.k-scheduler-content').style.height = 'auto';
+        const header = element.querySelector('.k-scheduler-header');
+        header.style.paddingRight = 0;
+        header.style.paddingLeft = 0;
+        this.pdfService.elementReady.emit({
+            element: element
+        });
+    }
+    elementTask(element) {
+        const index = parseInt(element.getAttribute('data-task-index'), 10);
+        const groupIndex = parseInt(element.getAttribute('data-group-index'), 10);
+        const group = this.groups[groupIndex];
+        const task = group.tasks.itemAt(index);
+        return task;
+    }
+    execute(e) {
+        if (e.name === 'slotByPosition') {
+            const slot = this.slotByPosition(e.args);
+            e.result(slot);
+        }
+        else if (e.name === 'eventFromElement') {
+            const task = this.elementTask(e.args.element);
+            if (task) {
+                e.result(task.event);
+            }
+        }
+    }
+    slotByPosition({ x, y }) {
+        const contentTable = this.content.nativeElement.querySelector('table');
+        const offset = elementOffset(contentTable);
+        if (offset.top <= y && y <= offset.top + offset.height) {
+            const contentRows = contentTable.rows;
+            if (!contentRows.length) {
+                return;
+            }
+            const taskOffset = elementOffset(contentRows[0].cells[contentRows[0].cells.length - 1]);
+            if (taskOffset.left <= x && x <= taskOffset.left + taskOffset.width) {
+                for (let idx = 0; idx < contentRows.length; idx++) {
+                    const row = contentRows[idx];
+                    const rowOffset = elementOffset(row);
+                    if (rowOffset.top <= y && y <= rowOffset.top + rowOffset.height) {
+                        const element = row.querySelector('[data-task-index]');
+                        const task = this.elementTask(element);
+                        const event = task.event;
+                        return {
+                            element: new ElementRef(element),
+                            start: event.start,
+                            end: event.end,
+                            event: event,
+                            resources: task.resources,
+                            isAllDay: task.isAllDay
+                        };
+                    }
+                }
+            }
+        }
+    }
+}
+AgendaViewInternalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: AgendaViewInternalComponent, deps: [{ token: i1.ViewContextService }, { token: i2.ViewStateService }, { token: i3.IntlService }, { token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i0.NgZone }, { token: i4.PDFService }, { token: i5.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
+AgendaViewInternalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: AgendaViewInternalComponent, selector: "agenda-view-internal", inputs: { eventTemplate: "eventTemplate", slotClass: "slotClass", eventClass: "eventClass", eventStyles: "eventStyles", agendaTimeTemplate: "agendaTimeTemplate", agendaDateTemplate: "agendaDateTemplate", selectedDateFormat: "selectedDateFormat", selectedShortDateFormat: "selectedShortDateFormat", numberOfDays: "numberOfDays" }, viewQueries: [{ propertyName: "headerWrap", first: true, predicate: ["headerWrap"], descendants: true, read: ElementRef, static: true }, { propertyName: "content", first: true, predicate: ["content"], descendants: true, read: ElementRef, static: true }], usesOnChanges: true, ngImport: i0, template: `
+        <table class="k-scheduler-layout k-scheduler-agendaview k-scheduler-agenda">
+            <tbody>
+                <tr>
+                    <td>
+                        <div kendoSchedulerAgendaHeader [resources]="groupedResources" #headerWrap></div>
+                    </td>
+                </tr>
+                <tr>
+                    <td>
+                        <div kendoSchedulerAgendaList #content
+                            [editable]="editable"
+                            [eventTemplate]="eventTemplateRef"
+                            [slotClass]="slotClass"
+                            [eventClass]="eventClass"
+                            [eventStyles]="eventStyles"
+                            [agendaTimeTemplate]="agendaTimeTemplateRef"
+                            [agendaDateTemplate]="agendaDateTemplateRef"
+                            [tasks]="tasks | async">
+                        </div>
+                    </td>
+                </tr>
+            </tbody>
+        </table>
+    `, isInline: true, components: [{ type: i6.AgendaHeaderComponent, selector: "[kendoSchedulerAgendaHeader]", inputs: ["resources"] }, { type: i7.AgendaListComponent, selector: "[kendoSchedulerAgendaList]", inputs: ["tasks", "eventTemplate", "slotClass", "eventClass", "eventStyles", "agendaTimeTemplate", "agendaDateTemplate", "editable"] }], pipes: { "async": i8.AsyncPipe } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: AgendaViewInternalComponent, decorators: [{
+            type: Component,
+            args: [{
+                    // eslint-disable-next-line @angular-eslint/component-selector
+                    selector: 'agenda-view-internal',
+                    template: `
+        <table class="k-scheduler-layout k-scheduler-agendaview k-scheduler-agenda">
+            <tbody>
+                <tr>
+                    <td>
+                        <div kendoSchedulerAgendaHeader [resources]="groupedResources" #headerWrap></div>
+                    </td>
+                </tr>
+                <tr>
+                    <td>
+                        <div kendoSchedulerAgendaList #content
+                            [editable]="editable"
+                            [eventTemplate]="eventTemplateRef"
+                            [slotClass]="slotClass"
+                            [eventClass]="eventClass"
+                            [eventStyles]="eventStyles"
+                            [agendaTimeTemplate]="agendaTimeTemplateRef"
+                            [agendaDateTemplate]="agendaDateTemplateRef"
+                            [tasks]="tasks | async">
+                        </div>
+                    </td>
+                </tr>
+            </tbody>
+        </table>
+    `
+                }]
+        }], ctorParameters: function () { return [{ type: i1.ViewContextService }, { type: i2.ViewStateService }, { type: i3.IntlService }, { type: i0.Renderer2 }, { type: i0.ElementRef }, { type: i0.NgZone }, { type: i4.PDFService }, { type: i5.LocalizationService }]; }, propDecorators: { eventTemplate: [{
+                type: Input
+            }], slotClass: [{
+                type: Input
+            }], eventClass: [{
+                type: Input
+            }], eventStyles: [{
+                type: Input
+            }], agendaTimeTemplate: [{
+                type: Input
+            }], agendaDateTemplate: [{
+                type: Input
+            }], selectedDateFormat: [{
+                type: Input
+            }], selectedShortDateFormat: [{
+                type: Input
+            }], numberOfDays: [{
+                type: Input
+            }], headerWrap: [{
+                type: ViewChild,
+                args: ['headerWrap', { read: ElementRef, static: true }]
+            }], content: [{
+                type: ViewChild,
+                args: ['content', { read: ElementRef, static: true }]
+            }] } });

package/esm2015/views/agenda/agenda-view-list.component.js

@@ -0,0 +1,170 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { Component, HostBinding, Input } from '@angular/core';
+import { toLocalDate } from '@progress/kendo-date-math';
+import { convertNgClassBindings } from '../utils';
+import * as i0 from "@angular/core";
+import * as i1 from "@progress/kendo-angular-intl";
+import * as i2 from "@progress/kendo-angular-l10n";
+import * as i3 from "./agenda-header-item.component";
+import * as i4 from "./agenda-task-item.component";
+import * as i5 from "@angular/common";
+import * as i6 from "../../navigation/focusable.directive";
+/**
+ * @hidden
+ */
+export class AgendaListComponent {
+    constructor(intlService, localization) {
+        this.intlService = intlService;
+        this.localization = localization;
+        this.classes = true;
+    }
+    extractDataItem(item) {
+        return item.type === "group" ? item.dataItem.items[0] : item.dataItem;
+    }
+    formatTime(dataItem) {
+        if (dataItem.isAllDay) {
+            return this.localization.get('allDay');
+        }
+        let format = "{0:t}-{1:t}";
+        if (dataItem.head) {
+            format = "{0:t}";
+        }
+        else if (dataItem.tail) {
+            format = "{1:t}";
+        }
+        return this.intlService.format(format, toLocalDate(dataItem.start), toLocalDate(dataItem.end));
+    }
+    trackByFn(index, _item) {
+        return index;
+    }
+    cellClasses(item) {
+        const task = this.extractDataItem(item);
+        let result = [];
+        if (this.slotClass) {
+            result = result.concat(convertNgClassBindings(this.slotClass({
+                start: task.start,
+                end: task.end,
+                resources: task.resources,
+                event: task.event
+            })));
+        }
+        if (this.eventClass) {
+            result = result.concat(convertNgClassBindings(this.eventClass({
+                event: task.event,
+                resources: task.resources
+            })));
+        }
+        return result;
+    }
+    getEventStyles(item) {
+        if (this.eventStyles) {
+            const task = this.extractDataItem(item);
+            return this.eventStyles({
+                event: task.event,
+                resources: task.resources
+            });
+        }
+    }
+}
+AgendaListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: AgendaListComponent, deps: [{ token: i1.IntlService }, { token: i2.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
+AgendaListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: AgendaListComponent, selector: "[kendoSchedulerAgendaList]", inputs: { tasks: "tasks", eventTemplate: "eventTemplate", slotClass: "slotClass", eventClass: "eventClass", eventStyles: "eventStyles", agendaTimeTemplate: "agendaTimeTemplate", agendaDateTemplate: "agendaDateTemplate", editable: "editable" }, host: { properties: { "class.k-scheduler-content": "this.classes" } }, ngImport: i0, template: `
+        <table class="k-scheduler-table" role="presentation">
+            <tbody>
+                <ng-container *ngFor="let group of tasks; let groupIndex = index;">
+                    <tr *ngFor="let item of group.tasks;let index = index; trackBy: trackByFn">
+                        <ng-container *ngFor="let resource of group.resources;let resourceIndex = index">
+                            <td *ngIf="group.spans[resourceIndex] && index === 0" class="k-scheduler-groupcolumn" [attr.rowspan]="group.spans[resourceIndex]">
+                                {{ resource }}
+                            </td>
+                        </ng-container>
+                        <td *ngIf="item.type === 'group'"
+                            [kendoSchedulerAgendaHeaderItem]="item"
+                            [agendaDateTemplate]="agendaDateTemplate">
+                        </td>
+                        <td class="k-scheduler-timecolumn">
+                            <div *ngIf="!agendaTimeTemplate">
+                                <span class="k-icon k-i-arrow-60-left" *ngIf="extractDataItem(item).tail"></span>
+                                {{formatTime(extractDataItem(item)) }}
+                                <span class="k-icon k-i-arrow-60-right" *ngIf="extractDataItem(item).head"></span>
+                            </div>
+                            <ng-container *ngIf="agendaTimeTemplate" [ngTemplateOutlet]="agendaTimeTemplate"
+                                [ngTemplateOutletContext]="extractDataItem(item)">
+                            </ng-container>
+                        </td>
+                        <td [attr.data-group-index]="groupIndex" [attr.data-task-index]="index"
+                            [ngClass]="cellClasses(item)" [ngStyle]="getEventStyles(item)"
+                            [kendoSchedulerFocusIndex]="groupIndex"
+                            [kendoSchedulerAgendaTaskItem]="extractDataItem(item)"
+                                [editable]="editable"
+                                [eventTemplate]="eventTemplate"
+                        ></td>
+                    </tr>
+                </ng-container>
+            </tbody>
+        </table>
+    `, isInline: true, components: [{ type: i3.AgendaHeaderItemComponent, selector: "[kendoSchedulerAgendaHeaderItem]", inputs: ["kendoSchedulerAgendaHeaderItem", "agendaDateTemplate"] }, { type: i4.AgendaTaskItemComponent, selector: "[kendoSchedulerAgendaTaskItem]", inputs: ["kendoSchedulerAgendaTaskItem", "color", "eventTemplate", "editable"] }], directives: [{ type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i5.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i6.FocusableDirective, selector: "[kendoSchedulerFocusIndex]", inputs: ["kendoSchedulerFocusIndex"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: AgendaListComponent, decorators: [{
+            type: Component,
+            args: [{
+                    // eslint-disable-next-line @angular-eslint/component-selector
+                    selector: '[kendoSchedulerAgendaList]',
+                    template: `
+        <table class="k-scheduler-table" role="presentation">
+            <tbody>
+                <ng-container *ngFor="let group of tasks; let groupIndex = index;">
+                    <tr *ngFor="let item of group.tasks;let index = index; trackBy: trackByFn">
+                        <ng-container *ngFor="let resource of group.resources;let resourceIndex = index">
+                            <td *ngIf="group.spans[resourceIndex] && index === 0" class="k-scheduler-groupcolumn" [attr.rowspan]="group.spans[resourceIndex]">
+                                {{ resource }}
+                            </td>
+                        </ng-container>
+                        <td *ngIf="item.type === 'group'"
+                            [kendoSchedulerAgendaHeaderItem]="item"
+                            [agendaDateTemplate]="agendaDateTemplate">
+                        </td>
+                        <td class="k-scheduler-timecolumn">
+                            <div *ngIf="!agendaTimeTemplate">
+                                <span class="k-icon k-i-arrow-60-left" *ngIf="extractDataItem(item).tail"></span>
+                                {{formatTime(extractDataItem(item)) }}
+                                <span class="k-icon k-i-arrow-60-right" *ngIf="extractDataItem(item).head"></span>
+                            </div>
+                            <ng-container *ngIf="agendaTimeTemplate" [ngTemplateOutlet]="agendaTimeTemplate"
+                                [ngTemplateOutletContext]="extractDataItem(item)">
+                            </ng-container>
+                        </td>
+                        <td [attr.data-group-index]="groupIndex" [attr.data-task-index]="index"
+                            [ngClass]="cellClasses(item)" [ngStyle]="getEventStyles(item)"
+                            [kendoSchedulerFocusIndex]="groupIndex"
+                            [kendoSchedulerAgendaTaskItem]="extractDataItem(item)"
+                                [editable]="editable"
+                                [eventTemplate]="eventTemplate"
+                        ></td>
+                    </tr>
+                </ng-container>
+            </tbody>
+        </table>
+    `
+                }]
+        }], ctorParameters: function () { return [{ type: i1.IntlService }, { type: i2.LocalizationService }]; }, propDecorators: { classes: [{
+                type: HostBinding,
+                args: ['class.k-scheduler-content']
+            }], tasks: [{
+                type: Input
+            }], eventTemplate: [{
+                type: Input
+            }], slotClass: [{
+                type: Input
+            }], eventClass: [{
+                type: Input
+            }], eventStyles: [{
+                type: Input
+            }], agendaTimeTemplate: [{
+                type: Input
+            }], agendaDateTemplate: [{
+                type: Input
+            }], editable: [{
+                type: Input
+            }] } });