@progress/kendo-angular-gantt 13.2.0-develop.1 → 13.2.0-develop.3

package/fesm2015/progress-kendo-angular-gantt.mjs

@@ -3,7 +3,7 @@
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 import * as i0 from '@angular/core';
-import { Injectable, Component, HostBinding, Input, InjectionToken, EventEmitter, Directive, ViewChild, forwardRef, Inject, ViewContainerRef, Output, Optional, QueryList, SkipSelf, Host, ContentChildren, ContentChild, HostListener, isDevMode, NgModule } from '@angular/core';
+import { Injectable, Component, HostBinding, Input, InjectionToken, Inject, LOCALE_ID, EventEmitter, Directive, ViewChild, forwardRef, ViewContainerRef, Output, Optional, QueryList, SkipSelf, Host, ContentChildren, ContentChild, HostListener, isDevMode, NgModule } from '@angular/core';
 import * as i11 from '@progress/kendo-angular-treelist';
 import { ColumnBase, ColumnComponent, ColumnGroupComponent, SpanColumnComponent, DataBoundTreeComponent, ExpandableTreeComponent, TreeListComponent, FlatBindingDirective, HierarchyBindingDirective, ExpandableDirective, TreeListModule } from '@progress/kendo-angular-treelist';
 import { Subject, Subscription, fromEvent, forkJoin, EMPTY, isObservable, of } from 'rxjs';
@@ -15,8 +15,10 @@ import { cloneDate, addWeeks, firstDayInWeek, addDays, lastDayOfMonth, getDate,
 import { getter, touchEnabled } from '@progress/kendo-common';
 import * as i6 from '@angular/common';
 import { CommonModule } from '@angular/common';
-import { orderBy } from '@progress/kendo-data-query';
+import { __decorate, __param, __metadata } from 'tslib';
 import * as i1 from '@progress/kendo-angular-intl';
+import { IntlService, IntlModule } from '@progress/kendo-angular-intl';
+import { orderBy } from '@progress/kendo-data-query';
 import { xIcon, plusIcon, minusIcon, saveIcon, cancelOutlineIcon, trashIcon } from '@progress/kendo-svg-icons';
 import * as i7 from '@progress/kendo-angular-icons';
 import { IconsModule } from '@progress/kendo-angular-icons';
@@ -50,8 +52,8 @@ const packageMetadata = {
     name: '@progress/kendo-angular-gantt',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1688396905,
-    version: '13.2.0-develop.1',
+    publishDate: 1688546776,
+    version: '13.2.0-develop.3',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/?utm_medium=product&utm_source=kendoangular&utm_campaign=kendo-ui-angular-purchase-license-keys-warning'
 };
 
@@ -717,10 +719,15 @@ const MONTH_FORMAT = 'MMM';
 /**
  * @hidden
  */
-class TimelineBaseViewService {
-    constructor(intlService, mapper) {
+const YEAR_FORMAT = 'yyyy';
+/**
+ * @hidden
+ */
+let TimelineBaseViewService = class TimelineBaseViewService {
+    constructor(intlService, mapper, localeId) {
         this.intlService = intlService;
         this.mapper = mapper;
+        this.localeId = localeId;
         this._viewStart = 0;
     }
     get viewStart() {
@@ -753,13 +760,14 @@ class TimelineBaseViewService {
      * @param end - The tasks' range end date
      * @returns {Array<Object>} - A collection containing the hour slots
      */
-    getHours(start, end) {
+    getHours(start, end, customDateFormat) {
         const slots = [];
         const workDayStart = this.intlService.parseDate(this.options.workDayStart).getHours();
         const workDayEnd = this.intlService.parseDate(this.options.workDayEnd).getHours();
         // TODO: retrieve from option?
         const hourSpan = 1;
         let startDate = new Date(start);
+        const hoursFormat = customDateFormat ? customDateFormat : HOUR_FORMAT;
         const endDate = new Date(end);
         while (startDate < endDate) {
             const slotEnd = new Date(startDate);
@@ -769,7 +777,7 @@ class TimelineBaseViewService {
                 start: startDate,
                 end: slotEnd,
                 isWorking: isWorkSlot,
-                text: this.intlService.formatDate(startDate, HOUR_FORMAT),
+                text: this.intlService.formatDate(startDate, hoursFormat, this.localeId),
                 span: 1,
                 slotWidth: this.options.slotWidth
             });
@@ -783,9 +791,10 @@ class TimelineBaseViewService {
      * @param end - The tasks' range end date
      * @returns {Array<Object>} - A collection containing the day slots
      */
-    getDays(start, end) {
+    getDays(start, end, customDateFormat) {
         const slots = [];
         let startDay = new Date(start);
+        const dayFormat = customDateFormat ? customDateFormat : DAY_FORMAT;
         const endDay = new Date(end);
         while (startDay <= endDay) {
             // Get the days with cleared time values (except for start and end day)
@@ -797,7 +806,7 @@ class TimelineBaseViewService {
                 start: startDay,
                 end: slotEnd,
                 isWorking: isWorking,
-                text: this.intlService.formatDate(startDay, DAY_FORMAT),
+                text: this.intlService.formatDate(startDay, dayFormat, this.localeId),
                 span: 1,
                 slotWidth: this.options.slotWidth
             });
@@ -805,18 +814,19 @@ class TimelineBaseViewService {
         }
         return slots;
     }
-    getWeeks(start, end) {
+    getWeeks(start, end, customDateFormat) {
         const weekStart = this.intlService.firstDay();
         const slots = [];
         let startDay = new Date(start);
+        const dayFormat = customDateFormat ? customDateFormat : DAY_FORMAT;
         const endDay = new Date(end);
         while (startDay <= endDay) {
             const lastWeekDay = lastDayOfWeek(startDay, weekStart);
             const slotEnd = lastWeekDay > endDay ? endDay : lastWeekDay;
             const daySlots = this.getDays(startDay, slotEnd);
             const span = daySlots.length;
-            const firstDay = this.intlService.formatDate(firstDayInWeek(getDate(startDay), weekStart), DAY_FORMAT);
-            const lastDay = this.intlService.formatDate(slotEnd, DAY_FORMAT);
+            const firstDay = this.intlService.formatDate(firstDayInWeek(getDate(startDay), weekStart), dayFormat, this.localeId);
+            const lastDay = this.intlService.formatDate(slotEnd, dayFormat, this.localeId);
             if (span > 0) {
                 slots.push({
                     start: daySlots[0].start,
@@ -830,9 +840,10 @@ class TimelineBaseViewService {
         }
         return slots;
     }
-    getMonths(start, end, isMainViewType) {
+    getMonths(start, end, isMainViewType, customDateFormat) {
         const slots = [];
         let startDay = new Date(start);
+        const monthFormat = customDateFormat ? customDateFormat : MONTH_FORMAT;
         const endDay = new Date(end);
         while (startDay < endDay) {
             const endMonth = lastDayOfMonth(startDay);
@@ -841,7 +852,7 @@ class TimelineBaseViewService {
             const weekSlots = this.getWeeks(startDay, slotEnd);
             const span = isMainViewType ? daySlots.length : weekSlots.length;
             const monthStart = firstDayOfMonth(getDate(startDay));
-            const shortText = this.intlService.formatDate(monthStart, MONTH_FORMAT);
+            const shortText = this.intlService.formatDate(monthStart, monthFormat, this.localeId);
             if (span > 0) {
                 slots.push({
                     start: isMainViewType ? daySlots[0].start : weekSlots[0].start,
@@ -855,10 +866,11 @@ class TimelineBaseViewService {
         }
         return slots;
     }
-    getYears(start, end) {
+    getYears(start, end, customDateFormat) {
         const slots = [];
         let startDay = new Date(start);
         const endDay = new Date(end);
+        const yearFormat = customDateFormat ? customDateFormat : YEAR_FORMAT;
         while (startDay < endDay) {
             const yearEnd = lastDayOfMonth(lastMonthOfYear(startDay));
             const slotEnd = endDay < yearEnd ? endDay : yearEnd;
@@ -869,7 +881,7 @@ class TimelineBaseViewService {
                     start: monthSlots[0].start,
                     end: monthSlots[span - 1].end,
                     span: span,
-                    text: slotEnd.getFullYear(),
+                    text: this.intlService.formatDate(slotEnd, yearFormat),
                     slotWidth: this.options.slotWidth
                 });
             }
@@ -877,14 +889,20 @@ class TimelineBaseViewService {
         }
         return slots;
     }
-}
+};
+TimelineBaseViewService = __decorate([
+    __param(2, Inject(LOCALE_ID)),
+    __metadata("design:paramtypes", [IntlService,
+        MappingService, String])
+], TimelineBaseViewService);
 
 /**
  * @hidden
  */
 class TimelineDayViewService extends TimelineBaseViewService {
-    constructor(intlService, mapper) {
-        super(intlService, mapper);
+    constructor(intlService, mapper, localeId) {
+        super(intlService, mapper, localeId);
+        this.localeId = localeId;
     }
     /**
      * Gets a date an hour before the first task start with minutes, seconds, milliseconds cleared.
@@ -915,14 +933,15 @@ class TimelineDayViewService extends TimelineBaseViewService {
      * Used to render the number of columns and the header
      */
     getSlots(tasks) {
+        var _a, _b;
         // will return the header rows slots
         const slots = [];
         const { start, end } = this.getRange(tasks);
-        const daySlots = this.getDays(start, end);
+        const daySlots = this.getDays(start, end, (_a = this.options.timelineHeadersDateFormat) === null || _a === void 0 ? void 0 : _a.groupHeaderDateFormat);
         const hourSlots = [];
         for (let i = 0; i < daySlots.length; i++) {
             const daySlot = daySlots[i];
-            const hours = this.getHours(daySlot.start, daySlot.end);
+            const hours = this.getHours(daySlot.start, daySlot.end, (_b = this.options.timelineHeadersDateFormat) === null || _b === void 0 ? void 0 : _b.columnHeaderDateFormat);
             daySlot.span = hours.length;
             hourSlots.push(...hours);
         }
@@ -930,18 +949,24 @@ class TimelineDayViewService extends TimelineBaseViewService {
         return slots;
     }
 }
-TimelineDayViewService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: TimelineDayViewService, deps: [{ token: i1.IntlService }, { token: MappingService }], target: i0.ɵɵFactoryTarget.Injectable });
+TimelineDayViewService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: TimelineDayViewService, deps: [{ token: i1.IntlService }, { token: MappingService }, { token: LOCALE_ID }], target: i0.ɵɵFactoryTarget.Injectable });
 TimelineDayViewService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: TimelineDayViewService });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: TimelineDayViewService, decorators: [{
             type: Injectable
-        }], ctorParameters: function () { return [{ type: i1.IntlService }, { type: MappingService }]; } });
+        }], ctorParameters: function () {
+        return [{ type: i1.IntlService }, { type: MappingService }, { type: undefined, decorators: [{
+                        type: Inject,
+                        args: [LOCALE_ID]
+                    }] }];
+    } });
 
 /**
  * @hidden
  */
 class TimelineMonthViewService extends TimelineBaseViewService {
-    constructor(intlService, mapper) {
-        super(intlService, mapper);
+    constructor(intlService, mapper, localeId) {
+        super(intlService, mapper, localeId);
+        this.localeId = localeId;
     }
     /**
      * Gets a week before the first week in which a task starts.
@@ -976,27 +1001,34 @@ class TimelineMonthViewService extends TimelineBaseViewService {
      * Used to render the number of columns and the header
      */
     getSlots(tasks) {
+        var _a, _b;
         // will return the header rows slots
         const slots = [];
         const { start, end } = this.getRange(tasks);
-        const months = this.getMonths(start, end, true);
-        const weeks = this.getWeeks(start, end);
+        const months = this.getMonths(start, end, true, (_a = this.options.timelineHeadersDateFormat) === null || _a === void 0 ? void 0 : _a.groupHeaderDateFormat);
+        const weeks = this.getWeeks(start, end, (_b = this.options.timelineHeadersDateFormat) === null || _b === void 0 ? void 0 : _b.columnHeaderDateFormat);
         slots.push(months, weeks);
         return slots;
     }
 }
-TimelineMonthViewService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: TimelineMonthViewService, deps: [{ token: i1.IntlService }, { token: MappingService }], target: i0.ɵɵFactoryTarget.Injectable });
+TimelineMonthViewService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: TimelineMonthViewService, deps: [{ token: i1.IntlService }, { token: MappingService }, { token: LOCALE_ID }], target: i0.ɵɵFactoryTarget.Injectable });
 TimelineMonthViewService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: TimelineMonthViewService });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: TimelineMonthViewService, decorators: [{
             type: Injectable
-        }], ctorParameters: function () { return [{ type: i1.IntlService }, { type: MappingService }]; } });
+        }], ctorParameters: function () {
+        return [{ type: i1.IntlService }, { type: MappingService }, { type: undefined, decorators: [{
+                        type: Inject,
+                        args: [LOCALE_ID]
+                    }] }];
+    } });
 
 /**
  * @hidden
  */
 class TimelineWeekViewService extends TimelineBaseViewService {
-    constructor(intlService, mapper) {
-        super(intlService, mapper);
+    constructor(intlService, mapper, localeId) {
+        super(intlService, mapper, localeId);
+        this.localeId = localeId;
     }
     /**
      * Gets a date a day before the first task start with hours, minutes, seconds, milliseconds cleared.
@@ -1027,27 +1059,34 @@ class TimelineWeekViewService extends TimelineBaseViewService {
      * Used to render the number of columns and the header
      */
     getSlots(tasks) {
+        var _a, _b;
         // will return the header rows slots
         const slots = [];
         const { start, end } = this.getRange(tasks);
-        const weeks = this.getWeeks(start, end);
-        const days = this.getDays(start, end);
+        const weeks = this.getWeeks(start, end, (_a = this.options.timelineHeadersDateFormat) === null || _a === void 0 ? void 0 : _a.groupHeaderDateFormat);
+        const days = this.getDays(start, end, (_b = this.options.timelineHeadersDateFormat) === null || _b === void 0 ? void 0 : _b.columnHeaderDateFormat);
         slots.push(weeks, days);
         return slots;
     }
 }
-TimelineWeekViewService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: TimelineWeekViewService, deps: [{ token: i1.IntlService }, { token: MappingService }], target: i0.ɵɵFactoryTarget.Injectable });
+TimelineWeekViewService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: TimelineWeekViewService, deps: [{ token: i1.IntlService }, { token: MappingService }, { token: LOCALE_ID }], target: i0.ɵɵFactoryTarget.Injectable });
 TimelineWeekViewService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: TimelineWeekViewService });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: TimelineWeekViewService, decorators: [{
             type: Injectable
-        }], ctorParameters: function () { return [{ type: i1.IntlService }, { type: MappingService }]; } });
+        }], ctorParameters: function () {
+        return [{ type: i1.IntlService }, { type: MappingService }, { type: undefined, decorators: [{
+                        type: Inject,
+                        args: [LOCALE_ID]
+                    }] }];
+    } });
 
 /**
  * @hidden
  */
 class TimeLineYearViewService extends TimelineBaseViewService {
-    constructor(intlService, mapper) {
-        super(intlService, mapper);
+    constructor(intlService, mapper, localeId) {
+        super(intlService, mapper, localeId);
+        this.localeId = localeId;
     }
     getTableWidth(tasks) {
         const timeSlots = this.getSlots(tasks)[1];
@@ -1073,20 +1112,26 @@ class TimeLineYearViewService extends TimelineBaseViewService {
      * Used to render the number of columns and the header
      */
     getSlots(tasks) {
+        var _a, _b;
         // will return the header rows slots
         const slots = [];
         const { start, end } = this.getRange(tasks);
-        const years = this.getYears(start, end);
-        const months = this.getMonths(start, end);
+        const years = this.getYears(start, end, (_a = this.options.timelineHeadersDateFormat) === null || _a === void 0 ? void 0 : _a.groupHeaderDateFormat);
+        const months = this.getMonths(start, end, false, (_b = this.options.timelineHeadersDateFormat) === null || _b === void 0 ? void 0 : _b.columnHeaderDateFormat);
         slots.push(years, months);
         return slots;
     }
 }
-TimeLineYearViewService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: TimeLineYearViewService, deps: [{ token: i1.IntlService }, { token: MappingService }], target: i0.ɵɵFactoryTarget.Injectable });
+TimeLineYearViewService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: TimeLineYearViewService, deps: [{ token: i1.IntlService }, { token: MappingService }, { token: LOCALE_ID }], target: i0.ɵɵFactoryTarget.Injectable });
 TimeLineYearViewService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: TimeLineYearViewService });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: TimeLineYearViewService, decorators: [{
             type: Injectable
-        }], ctorParameters: function () { return [{ type: i1.IntlService }, { type: MappingService }]; } });
+        }], ctorParameters: function () {
+        return [{ type: i1.IntlService }, { type: MappingService }, { type: undefined, decorators: [{
+                        type: Inject,
+                        args: [LOCALE_ID]
+                    }] }];
+    } });
 
 /**
  * @hidden
@@ -1123,6 +1168,7 @@ class OptionChangesService {
     constructor() {
         this.viewChanges = new EventEmitter();
         this.columnChanges = new EventEmitter();
+        this.dateFormatChanges = new EventEmitter();
     }
     notifyColumnChanges() {
         this.columnChanges.emit();
@@ -1130,6 +1176,9 @@ class OptionChangesService {
     notifyViewChanges() {
         this.viewChanges.emit();
     }
+    notifyDateFormatChanges() {
+        this.dateFormatChanges.emit();
+    }
 }
 OptionChangesService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: OptionChangesService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
 OptionChangesService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: OptionChangesService });
@@ -3903,10 +3952,13 @@ class ViewBase {
             this.optionChangesService.notifyColumnChanges();
             this.dependencyDomService.notifyChanges();
         }
+        if (anyChanged(['timelineHeadersDateFormat'], changes)) {
+            this.optionChangesService.notifyDateFormatChanges();
+        }
     }
 }
 ViewBase.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ViewBase, deps: [{ token: OptionChangesService }, { token: DependencyDomService }], target: i0.ɵɵFactoryTarget.Directive });
-ViewBase.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: ViewBase, selector: "kendo-gantt-view-base", inputs: { slotWidth: "slotWidth" }, usesOnChanges: true, ngImport: i0 });
+ViewBase.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: ViewBase, selector: "kendo-gantt-view-base", inputs: { slotWidth: "slotWidth", timelineHeadersDateFormat: "timelineHeadersDateFormat" }, usesOnChanges: true, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ViewBase, decorators: [{
             type: Directive,
             args: [{
@@ -3915,6 +3967,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 }]
         }], ctorParameters: function () { return [{ type: OptionChangesService }, { type: DependencyDomService }]; }, propDecorators: { slotWidth: [{
                 type: Input
+            }], timelineHeadersDateFormat: [{
+                type: Input
             }] } });
 
 /**
@@ -5317,6 +5371,9 @@ class GanttComponent {
         this.optionChangesSubscriptions.add(this.optionChangesService.viewChanges.subscribe(() => {
             this.loadTimelineData();
         }));
+        this.optionChangesSubscriptions.add(this.optionChangesService.dateFormatChanges.subscribe(() => {
+            this.loadTimelineData();
+        }));
         this.optionChangesSubscriptions.add(this.optionChangesService.columnChanges.subscribe(() => {
             this.treeList.columns.notifyOnChanges();
         }));
@@ -7859,7 +7916,8 @@ const IMPORTED_MODULES = [
     TabStripModule,
     GridModule,
     DropDownsModule,
-    IconsModule
+    IconsModule,
+    IntlModule
 ];
 const DECLARATIONS = [
     GanttComponent,
@@ -7994,7 +8052,8 @@ GanttModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "1
         TabStripModule,
         GridModule,
         DropDownsModule,
-        IconsModule], exports: [GanttComponent,
+        IconsModule,
+        IntlModule], exports: [GanttComponent,
         GanttFlatBindingDirective,
         GanttHierarchyBindingDirective,
         GanttTaskComponent,