mmhglobal-dynamicform 2.36.0 → 2.36.2

package/fesm2020/mmhglobal-dynamicform.mjs

@@ -2288,16 +2288,18 @@ class ZComponentService {
         if (this.timePickerDateType.includes(data.Type)) {
             const userTimeZoneOffSet = this.convertOffsetMinToHour((new Date(value).getTimezoneOffset()));
             const datetimeWithoutTimeZone = this.removeTimeZoneAndConvertToISOString(value);
-            return new Date(`${datetimeWithoutTimeZone.split('.000Z')[0]}${userTimeZoneOffSet}`);
+            //return new Date(`${datetimeWithoutTimeZone.split('.000Z')[0]}${userTimeZoneOffSet}`);
+            return new Date(`${datetimeWithoutTimeZone.split('Z')[0]}${userTimeZoneOffSet}`);
         }
         else if (data.Type === 'zshortdate') {
-            const dateOnly = value.includes('T') ? value.split('T')[0] : value;
-            const date = new Date(dateOnly);
-            date.setUTCDate(1);
-            const dateInUTC = new Date(Date.UTC(date.getUTCFullYear(), date.getUTCMonth(), date.getUTCDate())); // Get date in UTC format
-            const timeInUTC = new Date(date.toUTCString()); // Get time in UTC format
-            // Returning the combined date and time as a single Date object
-            return new Date(dateInUTC.getFullYear(), dateInUTC.getMonth(), dateInUTC.getDate(), timeInUTC.getUTCHours(), timeInUTC.getUTCMinutes(), timeInUTC.getUTCSeconds());
+            const dateOnly = value.includes('T') ? value.split('T')[0] : value; // Extract date portion
+            const date = new Date(dateOnly); // Create a date object from the extracted date
+            date.setUTCDate(1); // Set day to the first of the month
+            // Convert to UTC, accounting for the timezone offset
+            const timezoneOffset = date.getTimezoneOffset(); // Get timezone offset in minutes
+            date.setMinutes(date.getMinutes() + timezoneOffset); // Adjust for timezone offset
+            // Return the final date object
+            return date;
         }
         else {
             const dateOnly = value.includes('T') ? value.split('T')[0] : value;
@@ -2512,7 +2514,7 @@ class ZGridBindingDirective extends DataBindingDirective {
     webapiService, toastService, 
     //private mainService: MainService,
     //private offlineDatabaseService: OfflineDatabaseService,
-    signalrService, gridService, loggingService, stateSettingService) {
+    signalrService, gridService, loggingService, stateSettingService, componentService) {
         super(grid);
         this.webapiService = webapiService;
         this.toastService = toastService;
@@ -2520,6 +2522,7 @@ class ZGridBindingDirective extends DataBindingDirective {
         this.gridService = gridService;
         this.loggingService = loggingService;
         this.stateSettingService = stateSettingService;
+        this.componentService = componentService;
         this.changeEvent = {
             pageChanged: false,
             filterChanged: false,
@@ -2986,6 +2989,7 @@ class ZGridBindingDirective extends DataBindingDirective {
     }
     handleGetDataBindingComplete(data, skipCacheData) {
         this.aggregateHandling(data.dataSet);
+        this.handleDateTimeIgnoringTimeZone(data.dataSet);
         this.grid.data = { data: data.dataSet, total: data.totalCount };
         if (!skipCacheData) {
             const stateLogic = this.gridService.getGridStateLogic(this.field);
@@ -3170,6 +3174,23 @@ class ZGridBindingDirective extends DataBindingDirective {
             col.aggregateValue = aggregateValue;
         });
     }
+    handleDateTimeIgnoringTimeZone(dataSet) {
+        // Column types related to date and time handling
+        const dateColumnTypes = ['zdate', 'ztime', 'zdatetime', 'zshortdate', 'zuidatetime', 'zuitime'];
+        // Filter columns that have date-related types
+        const dateTimeColumns = this.gridSetting.columns.filter(col => dateColumnTypes.includes(col.Type));
+        // Filter columns where the timezone should be ignored
+        const ignoreTimeZoneColumns = dateTimeColumns.filter(col => col.IsIgnoreTimeZone);
+        // If there are columns that should ignore the timezone
+        if (ignoreTimeZoneColumns.length > 0) {
+            dataSet.forEach(data => {
+                ignoreTimeZoneColumns.forEach(col => {
+                    // Adjust datetime based on the timezone ignoring setting
+                    data[col.Value] = this.componentService.localizeDateTimeByIgnoringTimeZone(data[col.Value], col);
+                });
+            });
+        }
+    }
     /**
      * Reset aggregate values for columns with aggregate types.
      *
@@ -3334,7 +3355,7 @@ class ZGridBindingDirective extends DataBindingDirective {
         this.loggingService.debugLog('generated grid columns', this.gridSetting);
     }
 }
-ZGridBindingDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: ZGridBindingDirective, deps: [{ token: GridComponent }, { token: i2.WebApiService }, { token: i2.ToastService }, { token: i2.SignalrService }, { token: ZGridService }, { token: i2.LoggingService }, { token: i2.StateSettingService }], target: i0.ɵɵFactoryTarget.Directive });
+ZGridBindingDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: ZGridBindingDirective, deps: [{ token: GridComponent }, { token: i2.WebApiService }, { token: i2.ToastService }, { token: i2.SignalrService }, { token: ZGridService }, { token: i2.LoggingService }, { token: i2.StateSettingService }, { token: ZComponentService }], target: i0.ɵɵFactoryTarget.Directive });
 ZGridBindingDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.3", type: ZGridBindingDirective, selector: "[zgridbinding]", inputs: { zgridbinding: "zgridbinding" }, usesInheritance: true, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: ZGridBindingDirective, decorators: [{
             type: Directive,
@@ -3344,7 +3365,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.3", ngImpor
         }], ctorParameters: function () { return [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [GridComponent]
-                }] }, { type: i2.WebApiService }, { type: i2.ToastService }, { type: i2.SignalrService }, { type: ZGridService }, { type: i2.LoggingService }, { type: i2.StateSettingService }]; }, propDecorators: { zgridbinding: [{
+                }] }, { type: i2.WebApiService }, { type: i2.ToastService }, { type: i2.SignalrService }, { type: ZGridService }, { type: i2.LoggingService }, { type: i2.StateSettingService }, { type: ZComponentService }]; }, propDecorators: { zgridbinding: [{
                 type: Input
             }] } });
 
@@ -8126,10 +8147,10 @@ class SfdatetimepickerComponent extends InputFieldBase {
     }
 }
 SfdatetimepickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: SfdatetimepickerComponent, deps: [{ token: ZComponentService }], target: i0.ɵɵFactoryTarget.Component });
-SfdatetimepickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.3", type: SfdatetimepickerComponent, selector: "app-sfdatetimepicker", viewQueries: [{ propertyName: "sfdatetimepicker", first: true, predicate: ["sfdatetimepicker"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"zdate-container e1tag-style\" [style]=\"componentProperties.style.style\">\r\n  <div class=\"dateTimeDesktopContainer\" *ngIf=\"!isMobileScreen()\">\r\n    <ejs-datetimepicker #sfdatetimepicker\r\n                        [value]=\"form.get(data.Value).value | dateParser : data\" \r\n                        (change)=\"onChange($event)\"\r\n                        [min]=\"minDate\"\r\n                        [max]=\"maxDate\"\r\n                        [step]=\"interval\"\r\n                        [format]=\"data | dateFormatKendo\"\r\n                        [required]=\"data.IsRequired\"\r\n                        [placeholder]=\"data.PlaceHolder\" \r\n                        [showClearButton]=\"data.ClearButton\" \r\n                        [strictMode]=\"disableStrictMode\"\r\n                        cssClass=\"e-custom\" \r\n                        [class.disabled]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\">\r\n    </ejs-datetimepicker>\r\n  </div>\r\n</div> ", styles: [".e-custom.e-input-group.e-control-wrapper input.e-input,.e-custom.e-input-focus input.e-input{font-size:var(--content-font-size);padding-left:8px}.e-custom.e-input-group.e-control-wrapper{border-radius:5px!important;border:.1px solid rgba(0,0,0,.3)!important}.e-custom.e-input-group.e-control-wrapper:focus-within{box-shadow:0 0 3px 1px var(--ion-color-primary)!important}.e-custom.e-input-group.e-control-wrapper input.e-input:focus{padding-left:8px}.e-custom.e-input-group:not(.e-float-icon-left):not(.e-float-input):before,.e-custom.e-input-group:not(.e-float-icon-left):not(.e-float-input):after{background:transparent!important}.e-custom.e-input-group.e-error,.e-custom.e-input-group.e-control-wrapper.e-error,.e-custom.e-input-group.e-error:not(.e-float-icon-left),.e-custom.e-input-group.e-control-wrapper.e-error:not(.e-float-icon-left){border-color:#f31700!important}.e-custom.e-input-group.e-error.e-control-wrapper:focus-within{box-shadow:0 0 3px #f31700!important}\n"], components: [{ type: i2$9.DateTimePickerComponent, selector: "ejs-datetimepicker", inputs: ["allowEdit", "calendarMode", "cssClass", "dayHeaderFormat", "depth", "enableMask", "enablePersistence", "enableRtl", "enabled", "firstDayOfWeek", "floatLabelType", "format", "htmlAttributes", "isMultiSelection", "keyConfigs", "locale", "maskPlaceholder", "max", "min", "openOnFocus", "placeholder", "readonly", "scrollTo", "serverTimezoneOffset", "showClearButton", "showTodayButton", "start", "step", "strictMode", "timeFormat", "value", "values", "weekNumber", "weekRule", "width", "zIndex"], outputs: ["blur", "change", "cleared", "close", "created", "destroyed", "focus", "navigated", "open", "renderDayCell", "valueChange"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "dateParser": DateParserFilter, "dateFormatKendo": DateKendoFormatParser }, encapsulation: i0.ViewEncapsulation.None });
+SfdatetimepickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.3", type: SfdatetimepickerComponent, selector: "app-sfdatetimepicker", viewQueries: [{ propertyName: "sfdatetimepicker", first: true, predicate: ["sfdatetimepicker"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"zdate-container e1tag-style\" [style]=\"componentProperties.style.style\">\r\n  <div class=\"dateTimeDesktopContainer\" *ngIf=\"!isMobileScreen()\">\r\n    <ejs-datetimepicker #sfdatetimepicker\r\n                        [ngModel]=\"form.get(data.Value).value | dateParser : data\" \r\n                        (change)=\"onChange($event)\"\r\n                        [min]=\"minDate\"\r\n                        [max]=\"maxDate\"\r\n                        [step]=\"interval\"\r\n                        [format]=\"data | dateFormatKendo\"\r\n                        [required]=\"data.IsRequired\"\r\n                        [placeholder]=\"data.PlaceHolder\" \r\n                        [showClearButton]=\"data.ClearButton\" \r\n                        [strictMode]=\"disableStrictMode\"\r\n                        cssClass=\"e-custom\" \r\n                        [class.disabled]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\">\r\n    </ejs-datetimepicker>\r\n  </div>\r\n</div> \r\n", styles: [".e-custom.e-input-group.e-control-wrapper input.e-input,.e-custom.e-input-focus input.e-input{font-size:var(--content-font-size);padding-left:8px}.e-custom.e-input-group.e-control-wrapper{border-radius:5px!important;border:.1px solid rgba(0,0,0,.3)!important}.e-custom.e-input-group.e-control-wrapper:focus-within{box-shadow:0 0 3px 1px var(--ion-color-primary)!important}.e-custom.e-input-group.e-control-wrapper input.e-input:focus{padding-left:8px}.e-custom.e-input-group:not(.e-float-icon-left):not(.e-float-input):before,.e-custom.e-input-group:not(.e-float-icon-left):not(.e-float-input):after{background:transparent!important}.e-custom.e-input-group.e-error,.e-custom.e-input-group.e-control-wrapper.e-error,.e-custom.e-input-group.e-error:not(.e-float-icon-left),.e-custom.e-input-group.e-control-wrapper.e-error:not(.e-float-icon-left){border-color:#f31700!important}.e-custom.e-input-group.e-error.e-control-wrapper:focus-within{box-shadow:0 0 3px #f31700!important}\n"], components: [{ type: i2$9.DateTimePickerComponent, selector: "ejs-datetimepicker", inputs: ["allowEdit", "calendarMode", "cssClass", "dayHeaderFormat", "depth", "enableMask", "enablePersistence", "enableRtl", "enabled", "firstDayOfWeek", "floatLabelType", "format", "htmlAttributes", "isMultiSelection", "keyConfigs", "locale", "maskPlaceholder", "max", "min", "openOnFocus", "placeholder", "readonly", "scrollTo", "serverTimezoneOffset", "showClearButton", "showTodayButton", "start", "step", "strictMode", "timeFormat", "value", "values", "weekNumber", "weekRule", "width", "zIndex"], outputs: ["blur", "change", "cleared", "close", "created", "destroyed", "focus", "navigated", "open", "renderDayCell", "valueChange"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i4$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }], pipes: { "dateParser": DateParserFilter, "dateFormatKendo": DateKendoFormatParser }, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: SfdatetimepickerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-sfdatetimepicker', encapsulation: ViewEncapsulation.None, template: "<div class=\"zdate-container e1tag-style\" [style]=\"componentProperties.style.style\">\r\n  <div class=\"dateTimeDesktopContainer\" *ngIf=\"!isMobileScreen()\">\r\n    <ejs-datetimepicker #sfdatetimepicker\r\n                        [value]=\"form.get(data.Value).value | dateParser : data\" \r\n                        (change)=\"onChange($event)\"\r\n                        [min]=\"minDate\"\r\n                        [max]=\"maxDate\"\r\n                        [step]=\"interval\"\r\n                        [format]=\"data | dateFormatKendo\"\r\n                        [required]=\"data.IsRequired\"\r\n                        [placeholder]=\"data.PlaceHolder\" \r\n                        [showClearButton]=\"data.ClearButton\" \r\n                        [strictMode]=\"disableStrictMode\"\r\n                        cssClass=\"e-custom\" \r\n                        [class.disabled]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\">\r\n    </ejs-datetimepicker>\r\n  </div>\r\n</div> ", styles: [".e-custom.e-input-group.e-control-wrapper input.e-input,.e-custom.e-input-focus input.e-input{font-size:var(--content-font-size);padding-left:8px}.e-custom.e-input-group.e-control-wrapper{border-radius:5px!important;border:.1px solid rgba(0,0,0,.3)!important}.e-custom.e-input-group.e-control-wrapper:focus-within{box-shadow:0 0 3px 1px var(--ion-color-primary)!important}.e-custom.e-input-group.e-control-wrapper input.e-input:focus{padding-left:8px}.e-custom.e-input-group:not(.e-float-icon-left):not(.e-float-input):before,.e-custom.e-input-group:not(.e-float-icon-left):not(.e-float-input):after{background:transparent!important}.e-custom.e-input-group.e-error,.e-custom.e-input-group.e-control-wrapper.e-error,.e-custom.e-input-group.e-error:not(.e-float-icon-left),.e-custom.e-input-group.e-control-wrapper.e-error:not(.e-float-icon-left){border-color:#f31700!important}.e-custom.e-input-group.e-error.e-control-wrapper:focus-within{box-shadow:0 0 3px #f31700!important}\n"] }]
+            args: [{ selector: 'app-sfdatetimepicker', encapsulation: ViewEncapsulation.None, template: "<div class=\"zdate-container e1tag-style\" [style]=\"componentProperties.style.style\">\r\n  <div class=\"dateTimeDesktopContainer\" *ngIf=\"!isMobileScreen()\">\r\n    <ejs-datetimepicker #sfdatetimepicker\r\n                        [ngModel]=\"form.get(data.Value).value | dateParser : data\" \r\n                        (change)=\"onChange($event)\"\r\n                        [min]=\"minDate\"\r\n                        [max]=\"maxDate\"\r\n                        [step]=\"interval\"\r\n                        [format]=\"data | dateFormatKendo\"\r\n                        [required]=\"data.IsRequired\"\r\n                        [placeholder]=\"data.PlaceHolder\" \r\n                        [showClearButton]=\"data.ClearButton\" \r\n                        [strictMode]=\"disableStrictMode\"\r\n                        cssClass=\"e-custom\" \r\n                        [class.disabled]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\">\r\n    </ejs-datetimepicker>\r\n  </div>\r\n</div> \r\n", styles: [".e-custom.e-input-group.e-control-wrapper input.e-input,.e-custom.e-input-focus input.e-input{font-size:var(--content-font-size);padding-left:8px}.e-custom.e-input-group.e-control-wrapper{border-radius:5px!important;border:.1px solid rgba(0,0,0,.3)!important}.e-custom.e-input-group.e-control-wrapper:focus-within{box-shadow:0 0 3px 1px var(--ion-color-primary)!important}.e-custom.e-input-group.e-control-wrapper input.e-input:focus{padding-left:8px}.e-custom.e-input-group:not(.e-float-icon-left):not(.e-float-input):before,.e-custom.e-input-group:not(.e-float-icon-left):not(.e-float-input):after{background:transparent!important}.e-custom.e-input-group.e-error,.e-custom.e-input-group.e-control-wrapper.e-error,.e-custom.e-input-group.e-error:not(.e-float-icon-left),.e-custom.e-input-group.e-control-wrapper.e-error:not(.e-float-icon-left){border-color:#f31700!important}.e-custom.e-input-group.e-error.e-control-wrapper:focus-within{box-shadow:0 0 3px #f31700!important}\n"] }]
         }], ctorParameters: function () { return [{ type: ZComponentService }]; }, propDecorators: { sfdatetimepicker: [{
                 type: ViewChild,
                 args: ["sfdatetimepicker"]
@@ -15098,10 +15119,10 @@ class ZganttchartComponent extends DataListingFieldBase {
     }
 }
 ZganttchartComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: ZganttchartComponent, deps: [{ token: ZComponentService }], target: i0.ɵɵFactoryTarget.Component });
-ZganttchartComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.3", type: ZganttchartComponent, selector: "app-zganttchart", usesInheritance: true, ngImport: i0, template: "<kendo-gantt [style.height.px]=\"500\"\n             [data]=\"ganttData\"\n             kendoGanttExpandable\n             [initiallyExpanded]=\"true\"\n             [toolbarSettings]=\"{ position: 'both', addTaskTool: 'none' }\"\n             [activeView]=\"activeView\"\n             [sortable]=\"true\"\n             [selectable]=\"selectable\"\n             [isSelected]=\"isSelected\"\n             (cellClick)=\"toggleSelection($event)\"\n             (taskClick)=\"toggleSelection($event)\"\n             [timelinePaneOptions]=\"{ collapsed: collapsed,\n                                      collapsible: collapsible,\n                                      size: timelineSize\n                                    }\">\n  <kendo-gantt-column *ngFor=\"let col of columns;\"\n                      [field]=\"col.field\"\n                      [title]=\"col.title\"\n                      [width]=\"col.width\"\n                      [format]=\"col.format\">\n  </kendo-gantt-column>\n  <ng-template kendoGanttToolbarTemplate\n               position=\"both\"\n               let-position=\"position\">\n    <div *ngIf=\"position === 'top'\" class=\"toolbar-top\">\n      <span>{{data.Title}}</span>\n      <kendo-gantt-view-selector [views]=\"views\"\n                                 [(activeView)]=\"activeView\"></kendo-gantt-view-selector>\n    </div>\n    <div *ngIf=\"position === 'bottom'\" class=\"toolbar-bottom\">\n      <span>Total {{totalCount}} records</span>\n    </div>\n  </ng-template>\n  <kendo-gantt-timeline-day-view></kendo-gantt-timeline-day-view>\n  <kendo-gantt-timeline-week-view></kendo-gantt-timeline-week-view>\n  <kendo-gantt-timeline-month-view></kendo-gantt-timeline-month-view>\n  <kendo-gantt-timeline-year-view></kendo-gantt-timeline-year-view>\n</kendo-gantt>\n", styles: ["label.k-radio-label{display:inline-block;margin-right:10px}.toolbar-top{display:flex;width:100%;justify-content:space-between;align-items:center}.toolbar-bottom{display:flex;width:100%;align-items:end}\n"], components: [{ type: i2$e.GanttComponent, selector: "kendo-gantt", inputs: ["aria-roledescription", "role", "taskModelFields", "dependencyModelFields", "activeView", "data", "isSelected", "validateNewDependency", "selectable", "toolbarSettings", "fetchChildren", "hasChildren", "dependencies", "sortable", "sort", "filterable", "filter", "workDayStart", "workDayEnd", "workWeekStart", "workWeekEnd", "navigable", "timelinePaneOptions", "treeListPaneOptions", "taskClass", "rowClass", "isExpanded", "columnsAutoSize", "columnMenu", "columnsReorderable", "columnsResizable", "dragScrollSettings"], outputs: ["selectionChange", "rowExpand", "taskDblClick", "cellDblClick", "cellClose", "taskDelete", "rowCollapse", "remove", "cancel", "save", "taskAdd", "dependencyAdd", "sortChange", "filterChange", "dataStateChange", "treeListPaneCollapsedChange", "timelinePaneCollapsedChange", "timelinePaneSizeChange", "activeViewChange", "columnResize", "columnReorder", "columnVisibilityChange", "columnLockedChange", "cellClick", "taskClick"], exportAs: ["kendoGantt"] }, { type: i2$e.GanttColumnComponent, selector: "kendo-gantt-column", inputs: ["format", "filter", "filterable", "editor", "editable", "locked", "lockable", "hidden", "media", "style", "headerStyle", "footerStyle", "class", "headerClass", "footerClass"] }, { type: i2$e.ViewSelectorComponent, selector: "kendo-gantt-view-selector", inputs: ["views", "activeView"], outputs: ["activeViewChange"] }, { type: i2$e.TimelineDayViewComponent, selector: "kendo-gantt-timeline-day-view" }, { type: i2$e.TimelineWeekViewComponent, selector: "kendo-gantt-timeline-week-view" }, { type: i2$e.TimelineMonthViewComponent, selector: "kendo-gantt-timeline-month-view" }, { type: i2$e.TimelineYearViewComponent, selector: "kendo-gantt-timeline-year-view" }], directives: [{ type: i2$e.GanttExpandableDirective, selector: "[kendoGanttExpandable]", inputs: ["expandBy"], exportAs: ["kendoGanttExpandable"] }, { type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2$e.ToolbarTemplateDirective, selector: "[kendoGanttToolbarTemplate]", inputs: ["position"] }, { type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+ZganttchartComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.3", type: ZganttchartComponent, selector: "app-zganttchart", usesInheritance: true, ngImport: i0, template: "<kendo-gantt [style.height.px]=\"500\"\r\n             [data]=\"ganttData\"\r\n             kendoGanttExpandable\r\n             [initiallyExpanded]=\"true\"\r\n             [toolbarSettings]=\"{ position: 'both', addTaskTool: 'none' }\"\r\n             [activeView]=\"activeView\"\r\n             [sortable]=\"true\"\r\n             [selectable]=\"selectable\"\r\n             [isSelected]=\"isSelected\"\r\n             (cellClick)=\"toggleSelection($event)\"\r\n             (taskClick)=\"toggleSelection($event)\"\r\n             [timelinePaneOptions]=\"{ collapsed: collapsed,\r\n                                      collapsible: collapsible,\r\n                                      size: timelineSize\r\n                                    }\">\r\n  <kendo-gantt-column *ngFor=\"let col of columns;\"\r\n                      [field]=\"col.field\"\r\n                      [title]=\"col.title\"\r\n                      [width]=\"col.width\"\r\n                      [format]=\"col.format\">\r\n  </kendo-gantt-column>\r\n  <ng-template kendoGanttToolbarTemplate\r\n               position=\"both\"\r\n               let-position=\"position\">\r\n    <div *ngIf=\"position === 'top'\" class=\"toolbar-top\">\r\n      <span>{{data.Title}}</span>\r\n      <kendo-gantt-view-selector [views]=\"views\"\r\n                                 [(activeView)]=\"activeView\"></kendo-gantt-view-selector>\r\n    </div>\r\n    <div *ngIf=\"position === 'bottom'\" class=\"toolbar-bottom\">\r\n      <span>Total {{totalCount}} records</span>\r\n    </div>\r\n  </ng-template>\r\n  <kendo-gantt-timeline-day-view></kendo-gantt-timeline-day-view>\r\n  <kendo-gantt-timeline-week-view></kendo-gantt-timeline-week-view>\r\n  <kendo-gantt-timeline-month-view></kendo-gantt-timeline-month-view>\r\n  <kendo-gantt-timeline-year-view></kendo-gantt-timeline-year-view>\r\n</kendo-gantt>\r\n", styles: ["label.k-radio-label{display:inline-block;margin-right:10px}.toolbar-top{display:flex;width:100%;justify-content:space-between;align-items:center}.toolbar-bottom{display:flex;width:100%;align-items:end}\n"], components: [{ type: i2$e.GanttComponent, selector: "kendo-gantt", inputs: ["aria-roledescription", "role", "taskModelFields", "dependencyModelFields", "activeView", "data", "isSelected", "validateNewDependency", "selectable", "toolbarSettings", "fetchChildren", "hasChildren", "dependencies", "sortable", "sort", "filterable", "filter", "workDayStart", "workDayEnd", "workWeekStart", "workWeekEnd", "navigable", "timelinePaneOptions", "treeListPaneOptions", "taskClass", "rowClass", "isExpanded", "columnsAutoSize", "columnMenu", "columnsReorderable", "columnsResizable", "dragScrollSettings"], outputs: ["selectionChange", "rowExpand", "taskDblClick", "cellDblClick", "cellClose", "taskDelete", "rowCollapse", "remove", "cancel", "save", "taskAdd", "dependencyAdd", "sortChange", "filterChange", "dataStateChange", "treeListPaneCollapsedChange", "timelinePaneCollapsedChange", "timelinePaneSizeChange", "activeViewChange", "columnResize", "columnReorder", "columnVisibilityChange", "columnLockedChange", "cellClick", "taskClick"], exportAs: ["kendoGantt"] }, { type: i2$e.GanttColumnComponent, selector: "kendo-gantt-column", inputs: ["format", "filter", "filterable", "editor", "editable", "locked", "lockable", "hidden", "media", "style", "headerStyle", "footerStyle", "class", "headerClass", "footerClass"] }, { type: i2$e.ViewSelectorComponent, selector: "kendo-gantt-view-selector", inputs: ["views", "activeView"], outputs: ["activeViewChange"] }, { type: i2$e.TimelineDayViewComponent, selector: "kendo-gantt-timeline-day-view" }, { type: i2$e.TimelineWeekViewComponent, selector: "kendo-gantt-timeline-week-view" }, { type: i2$e.TimelineMonthViewComponent, selector: "kendo-gantt-timeline-month-view" }, { type: i2$e.TimelineYearViewComponent, selector: "kendo-gantt-timeline-year-view" }], directives: [{ type: i2$e.GanttExpandableDirective, selector: "[kendoGanttExpandable]", inputs: ["expandBy"], exportAs: ["kendoGanttExpandable"] }, { type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2$e.ToolbarTemplateDirective, selector: "[kendoGanttToolbarTemplate]", inputs: ["position"] }, { type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: ZganttchartComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-zganttchart', template: "<kendo-gantt [style.height.px]=\"500\"\n             [data]=\"ganttData\"\n             kendoGanttExpandable\n             [initiallyExpanded]=\"true\"\n             [toolbarSettings]=\"{ position: 'both', addTaskTool: 'none' }\"\n             [activeView]=\"activeView\"\n             [sortable]=\"true\"\n             [selectable]=\"selectable\"\n             [isSelected]=\"isSelected\"\n             (cellClick)=\"toggleSelection($event)\"\n             (taskClick)=\"toggleSelection($event)\"\n             [timelinePaneOptions]=\"{ collapsed: collapsed,\n                                      collapsible: collapsible,\n                                      size: timelineSize\n                                    }\">\n  <kendo-gantt-column *ngFor=\"let col of columns;\"\n                      [field]=\"col.field\"\n                      [title]=\"col.title\"\n                      [width]=\"col.width\"\n                      [format]=\"col.format\">\n  </kendo-gantt-column>\n  <ng-template kendoGanttToolbarTemplate\n               position=\"both\"\n               let-position=\"position\">\n    <div *ngIf=\"position === 'top'\" class=\"toolbar-top\">\n      <span>{{data.Title}}</span>\n      <kendo-gantt-view-selector [views]=\"views\"\n                                 [(activeView)]=\"activeView\"></kendo-gantt-view-selector>\n    </div>\n    <div *ngIf=\"position === 'bottom'\" class=\"toolbar-bottom\">\n      <span>Total {{totalCount}} records</span>\n    </div>\n  </ng-template>\n  <kendo-gantt-timeline-day-view></kendo-gantt-timeline-day-view>\n  <kendo-gantt-timeline-week-view></kendo-gantt-timeline-week-view>\n  <kendo-gantt-timeline-month-view></kendo-gantt-timeline-month-view>\n  <kendo-gantt-timeline-year-view></kendo-gantt-timeline-year-view>\n</kendo-gantt>\n", styles: ["label.k-radio-label{display:inline-block;margin-right:10px}.toolbar-top{display:flex;width:100%;justify-content:space-between;align-items:center}.toolbar-bottom{display:flex;width:100%;align-items:end}\n"] }]
+            args: [{ selector: 'app-zganttchart', template: "<kendo-gantt [style.height.px]=\"500\"\r\n             [data]=\"ganttData\"\r\n             kendoGanttExpandable\r\n             [initiallyExpanded]=\"true\"\r\n             [toolbarSettings]=\"{ position: 'both', addTaskTool: 'none' }\"\r\n             [activeView]=\"activeView\"\r\n             [sortable]=\"true\"\r\n             [selectable]=\"selectable\"\r\n             [isSelected]=\"isSelected\"\r\n             (cellClick)=\"toggleSelection($event)\"\r\n             (taskClick)=\"toggleSelection($event)\"\r\n             [timelinePaneOptions]=\"{ collapsed: collapsed,\r\n                                      collapsible: collapsible,\r\n                                      size: timelineSize\r\n                                    }\">\r\n  <kendo-gantt-column *ngFor=\"let col of columns;\"\r\n                      [field]=\"col.field\"\r\n                      [title]=\"col.title\"\r\n                      [width]=\"col.width\"\r\n                      [format]=\"col.format\">\r\n  </kendo-gantt-column>\r\n  <ng-template kendoGanttToolbarTemplate\r\n               position=\"both\"\r\n               let-position=\"position\">\r\n    <div *ngIf=\"position === 'top'\" class=\"toolbar-top\">\r\n      <span>{{data.Title}}</span>\r\n      <kendo-gantt-view-selector [views]=\"views\"\r\n                                 [(activeView)]=\"activeView\"></kendo-gantt-view-selector>\r\n    </div>\r\n    <div *ngIf=\"position === 'bottom'\" class=\"toolbar-bottom\">\r\n      <span>Total {{totalCount}} records</span>\r\n    </div>\r\n  </ng-template>\r\n  <kendo-gantt-timeline-day-view></kendo-gantt-timeline-day-view>\r\n  <kendo-gantt-timeline-week-view></kendo-gantt-timeline-week-view>\r\n  <kendo-gantt-timeline-month-view></kendo-gantt-timeline-month-view>\r\n  <kendo-gantt-timeline-year-view></kendo-gantt-timeline-year-view>\r\n</kendo-gantt>\r\n", styles: ["label.k-radio-label{display:inline-block;margin-right:10px}.toolbar-top{display:flex;width:100%;justify-content:space-between;align-items:center}.toolbar-bottom{display:flex;width:100%;align-items:end}\n"] }]
         }], ctorParameters: function () { return [{ type: ZComponentService }]; } });
 
 /********** Angular **********/