@progress/kendo-angular-scheduler
Version:
Kendo UI Scheduler Angular - Outlook or Google-style angular scheduler calendar. Full-featured and customizable embedded scheduling from the creator developers trust for professional UI components.
195 lines (194 loc) • 7.91 kB
JavaScript
/**-----------------------------------------------------------------------------------------
* Copyright © 2025 Progress Software Corporation. All rights reserved.
* Licensed under commercial license. See LICENSE.md in the project root for more information
*-------------------------------------------------------------------------------------------*/
import { ElementRef, Input, HostBinding, Renderer2, TemplateRef, Directive } from '@angular/core';
import { anyChanged } from '@progress/kendo-angular-common';
import { LocalizationService } from '@progress/kendo-angular-l10n';
import { Subscription } from 'rxjs';
import { BaseSlotService } from './base-slot.service';
import { isRecurrence, isRecurrenceException, formatEventTime } from '../utils';
import { FocusService } from '../../navigation';
import { toLocalDate } from '@progress/kendo-date-math';
import { caretAltLeftIcon, caretAltRightIcon } from '@progress/kendo-svg-icons';
import { IntlService } from '@progress/kendo-angular-intl';
import * as i0 from "@angular/core";
import * as i1 from "./base-slot.service";
import * as i2 from "@progress/kendo-angular-l10n";
import * as i3 from "../../navigation";
import * as i4 from "@progress/kendo-angular-intl";
/**
* @hidden
*/
export class BaseViewItem {
slotService;
localization;
focusService;
element;
renderer;
intl;
item;
resourceIndex;
rangeIndex;
index;
eventTemplate;
editable;
dragHint;
resources;
className = true;
get taskIndex() {
return this.item.index;
}
get touchAction() {
return this.editable && this.editable.drag !== false ? 'none' : null;
}
get eventTitle() {
const startTime = toLocalDate(this.item.startTime);
const endTime = toLocalDate(this.item.endTime);
const time = formatEventTime(startTime, endTime, this.item.isAllDay, this.intl.localeId);
return `${time}, ${this.item.event.title}`;
}
get deleteMessage() {
return this.localization.get('deleteTitle');
}
get resizable() {
return this.editable && this.editable.resize !== false;
}
get removable() {
return this.editable && this.editable.remove !== false;
}
caretAltLeftIcon = caretAltLeftIcon;
caretAltRightIcon = caretAltRightIcon;
rect;
subs = new Subscription();
constructor(slotService, localization, focusService, element, renderer, intl) {
this.slotService = slotService;
this.localization = localization;
this.focusService = focusService;
this.element = element;
this.renderer = renderer;
this.intl = intl;
}
get isRecurrence() {
return isRecurrence(this.item);
}
get isRecurrenceException() {
return isRecurrenceException(this.item);
}
get nativeElement() {
if (this.element) {
return this.element.nativeElement;
}
}
setStyles(styles) {
const element = this.nativeElement;
if (element) {
for (const name in styles) {
if (styles.hasOwnProperty(name)) {
this.renderer.setStyle(element, name, styles[name]);
}
}
}
}
toggle(visible) {
this.setStyles({ display: visible ? null : 'none' });
}
reflow() {
const rect = this.rect;
if (rect) {
this.setStyles({
left: !this.localization.rtl ? `${rect.left}px` : '',
right: this.localization.rtl ? `${rect.left}px` : '',
top: `${rect.top}px`,
width: `${rect.width}px`,
height: `${rect.height}px`
});
}
}
ngOnInit() {
if (this.dragHint) {
return;
}
this.subs.add(this.slotService.slotsChange.subscribe(() => {
this.rect = null;
this.setStyles({
left: 0,
});
const slotId = { index: this.index, resourceIndex: this.resourceIndex, rangeIndex: this.rangeIndex };
this.slotService.unregisterItem(this, slotId);
if (this.resourceIndex >= 0) {
this.slotService.registerItem(this);
}
}));
}
ngOnChanges(changes) {
if (this.dragHint) {
return;
}
if (anyChanged(['index', 'resourceIndex', 'rangeIndex'], changes)) {
const { resourceIndex, index, rangeIndex } = changes;
const previousResourceIndex = resourceIndex ? resourceIndex.previousValue : this.resourceIndex;
const previousIndex = index ? index.previousValue : this.index;
const previousRangeIndex = rangeIndex ? rangeIndex.previousValue : this.rangeIndex;
const slotId = {
index: previousIndex,
resourceIndex: previousResourceIndex,
rangeIndex: previousRangeIndex
};
this.slotService.unregisterItem(this, slotId);
if (this.resourceIndex >= 0) {
this.slotService.registerItem(this);
this.toggle(true);
}
else {
this.toggle(false);
}
}
}
ngOnDestroy() {
if (this.dragHint) {
return;
}
this.slotService.unregisterItem(this);
this.subs.unsubscribe();
}
get arrowIcons() {
return !this.localization.rtl ? ['caret-alt-left', 'caret-alt-right'] : ['caret-alt-right', 'caret-alt-left'];
}
get arrowSVGIcons() {
return !this.localization.rtl ? [this.caretAltLeftIcon, this.caretAltRightIcon] : [this.caretAltRightIcon, this.caretAltLeftIcon];
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: BaseViewItem, deps: [{ token: i1.BaseSlotService }, { token: i2.LocalizationService }, { token: i3.FocusService }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i4.IntlService }], target: i0.ɵɵFactoryTarget.Directive });
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: BaseViewItem, inputs: { item: "item", resourceIndex: "resourceIndex", rangeIndex: "rangeIndex", index: "index", eventTemplate: "eventTemplate", editable: "editable", dragHint: "dragHint", resources: "resources" }, host: { properties: { "class.k-event": "this.className", "attr.data-task-index": "this.taskIndex", "style.touch-action": "this.touchAction", "attr.aria-label": "this.eventTitle" } }, usesOnChanges: true, ngImport: i0 });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: BaseViewItem, decorators: [{
type: Directive
}], ctorParameters: function () { return [{ type: i1.BaseSlotService }, { type: i2.LocalizationService }, { type: i3.FocusService }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i4.IntlService }]; }, propDecorators: { item: [{
type: Input
}], resourceIndex: [{
type: Input
}], rangeIndex: [{
type: Input
}], index: [{
type: Input
}], eventTemplate: [{
type: Input
}], editable: [{
type: Input
}], dragHint: [{
type: Input
}], resources: [{
type: Input
}], className: [{
type: HostBinding,
args: ['class.k-event']
}], taskIndex: [{
type: HostBinding,
args: ['attr.data-task-index']
}], touchAction: [{
type: HostBinding,
args: ['style.touch-action']
}], eventTitle: [{
type: HostBinding,
args: ['attr.aria-label']
}] } });