mmhglobal-dynamicform 2.29.0 → 2.30.0

package/fesm2020/mmhglobal-dynamicform.mjs

@@ -78,6 +78,8 @@ import * as i7$1 from '@progress/kendo-angular-navigation';
 import { NavigationModule } from '@progress/kendo-angular-navigation';
 import * as i3$4 from '@progress/kendo-angular-menu';
 import { MenusModule } from '@progress/kendo-angular-menu';
+import * as i2$e from '@progress/kendo-angular-gantt';
+import { GanttModule } from '@progress/kendo-angular-gantt';
 import * as i1$1 from '@angular/platform-browser';
 import * as i7 from '@angular/flex-layout/extended';
 import * as i5$2 from '@angular/flex-layout/flex';
@@ -4979,7 +4981,7 @@ class ZformComponent {
                 this.addToFieldIndex(field);
                 this.fieldService.patchFieldProperty(field);
                 if (typeof field.Value === "string" && field.Value.indexOf(".") !== -1) {
-                    if (['zgrid', 'ztree', 'textareajson'].indexOf(field.Type) === -1) {
+                    if (['zgrid', 'ztree', 'textareajson', 'zganttchart'].indexOf(field.Type) === -1) {
                         console.warn("FormControl - invalid field value", field.Value);
                     }
                 }
@@ -5669,7 +5671,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.3", ngImpor
         }], ctorParameters: function () { return [{ type: ZComponentService }]; } });
 
 /********** Angular **********/
-// For: zgrid, ztree, ztreelist
+// For: zgrid, ztree, ztreelist, zganttchart
 class DataListingFieldBase extends FieldBase {
     constructor(componentService) {
         super(componentService);
@@ -7011,9 +7013,10 @@ class ZworkflowbuttonsComponent extends ButtonFieldBase {
                     return;
                 }
                 // Disable trigger timer
+                const currentScope = this;
                 if (!attributes['DisableTriggerTimer']) {
-                    setTimeout(function () {
-                        this.group['isTriggered'] = false;
+                    setTimeout(() => {
+                        currentScope.group['isTriggered'] = false;
                     }, 500);
                 }
                 console.log("Functional Button: ", button.Name);
@@ -12753,7 +12756,7 @@ class ZudfComponent extends ContainerFieldBase {
             const fieldIndex = index ? `${index}.${i + 1}` : `${i}`;
             this.fieldService.patchFieldProperty(field);
             if (typeof field.Value === "string" && field.Value.indexOf(".") !== -1) {
-                if (['zgrid', 'ztree', 'zimg', 'textareajson'].indexOf(field.Type) === -1) {
+                if (['zgrid', 'ztree', 'zimg', 'textareajson', 'zganttchart'].indexOf(field.Type) === -1) {
                     console.warn("FormControl - invalid field value", field.Value);
                 }
             }
@@ -14113,7 +14116,7 @@ class ZloopComponent extends ContainerFieldBase {
         if (!field.SubType) {
             this.fieldService.patchFieldProperty(field);
             if (typeof field.Value === "string" && field.Value.indexOf(".") !== -1) {
-                if (['zgrid', 'ztree', 'textareajson'].indexOf(field.Type) === -1) {
+                if (['zgrid', 'ztree', 'textareajson', 'zganttchart'].indexOf(field.Type) === -1) {
                     console.warn("FormControl - invalid field value", field.Value);
                 }
             }
@@ -14560,6 +14563,158 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.3", ngImpor
                 type: Input
             }] } });
 
+/********** Angular **********/
+class ZganttchartComponent extends DataListingFieldBase {
+    constructor(componentService) {
+        super(componentService);
+        this.componentService = componentService;
+        this.activeView = "day";
+        this.views = ["day", "week", "month", "year"];
+        this.collapsible = false;
+        this.collapsed = false;
+        this.timelineSize = '70%';
+        this.columns = []; // Initialize columns array
+        this.selectable = false;
+        this.totalCount = 0;
+        this.selectionState = new Set();
+        this.isSelected = (dataItem) => {
+            return this.selectionState.has(dataItem[this.data.UniqueKey ?? "Id"]);
+        };
+    }
+    ngOnInit() {
+        this.collapsible = this.data.AllowCollapse ?? false;
+        this.collapsed = this.data.DefaultCollapse ?? false;
+        this.timelineSize = this.data.TimelineSize ?? '70%';
+        this.selectable = this.data.Selectable ?? false;
+        this.initViews();
+        this.setActiveView();
+        this.generateGridColumns();
+        ZComponentHelper.registerComponent(this);
+    }
+    ngAfterViewInit() {
+        this.componentService.decrementComponentCounterForField(this.data);
+    }
+    ngOnDestroy() {
+    }
+    initViews() {
+        if (this.data.TimelineViewType && Array.isArray(this.data.TimelineViewType)) {
+            this.views = this.data.TimelineViewType
+                .map(view => view.toLowerCase())
+                .filter(view => this.isValidTimelineView(view));
+        }
+    }
+    setActiveView() {
+        if (this.data.TimelimeDefault) {
+            const defaultView = this.data.TimelimeDefault.toLowerCase();
+            if (this.isValidTimelineView(defaultView)) {
+                this.activeView = defaultView;
+            }
+        }
+    }
+    isValidTimelineView(view) {
+        return ['day', 'week', 'month', 'year'].includes(view);
+    }
+    generateGridColumns() {
+        if (!Array.isArray(this.data.ColumnFields) || this.data.ColumnFields.length === 0) {
+            console.warn(`Invalid/Empty gantt chart column fields: '${this.data.Name}'`);
+            return;
+        }
+        this.columns = this.data.ColumnFields.map(field => ({
+            name: field.Name,
+            field: field.Value,
+            title: field.Name,
+            width: field.width || 80,
+            format: field.Format
+        }));
+    }
+    setData(ganttData) {
+        if (ganttData) {
+            this.ganttData = ganttData.map(task => ({
+                ...task,
+                start: this.ensureDate(task.start),
+                end: this.ensureDate(task.end)
+            })).filter(task => task.start && task.end); // Only include tasks with valid start and end dates
+            if (this.data.Max) {
+                this.ganttData = this.ganttData.slice(0, this.data.Max);
+            }
+            this.updateValueVariable();
+            this.totalCount = this.ganttData.length;
+        }
+        else {
+            console.warn('No data provided to setData; received a null or undefined parameter.');
+        }
+    }
+    updateValueVariable() {
+        // Extract and trim the value from this.data.value if it exists
+        const fieldName = this.data.Value.split('.').pop(); // Gets the last part after the last dot
+        if (!fieldName) {
+            console.warn(`Gantt Chart ${this.data.Name} Value could not be determined.`);
+            return;
+        }
+        // Determine the target object 
+        if (this.data.Value.includes('group.') && this.group) {
+            this.group[fieldName] = this.ganttData;
+        }
+        else {
+            if (this.hasOwnProperty(fieldName)) {
+                this[fieldName] = this.ganttData;
+            }
+        }
+    }
+    ensureDate(date) {
+        // Check if the date is already a Date object
+        if (date instanceof Date) {
+            return date;
+        }
+        // If the date is a string, convert it to a Date object
+        const parsedDate = new Date(date);
+        if (!isNaN(parsedDate.getTime())) {
+            return parsedDate;
+        }
+        else {
+            // Log a warning if the date string is invalid and return a default date or null
+            // console.warn(`Invalid date format: ${date}`);
+            return null; // or return null if you prefer to handle invalid dates differently
+        }
+    }
+    get selectedKeys() {
+        return Array.from(this.selectionState);
+    }
+    toggleSelection({ dataItem, sender, originalEvent, }) {
+        // Prevents context menu opening
+        originalEvent.preventDefault();
+        const uniqueKey = this.data.UniqueKey ?? "Id";
+        // For future toggling multi select 
+        // if (this.isSelected(dataItem)) {
+        //   this.selectionState.delete(dataItem[uniqueKey]);
+        // }
+        // else {
+        //   this.selectionState.add(dataItem[uniqueKey]);
+        // }
+        this.selectionState = new Set;
+        this.selectionState.add(dataItem[uniqueKey]);
+        // Manually trigger the Gantt to re-evaluate the isSelected callback for each task
+        sender.updateView();
+        if (this.data.OnItemClick) {
+            const func = ZComponentHelper.getGroupEvalValue.call(this, this.data.OnItemClick);
+            if (typeof func === 'function') {
+                const callFunc = func.bind(this.group.ctrlScope);
+                callFunc(dataItem);
+            }
+            return;
+        }
+    }
+    clearSelection() {
+        this.selectionState = new Set;
+    }
+}
+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"] }] });
+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"] }]
+        }], ctorParameters: function () { return [{ type: ZComponentService }]; } });
+
 /********** Angular **********/
 class MmhglobalDynamicformModule {
 }
@@ -14647,7 +14802,8 @@ MmhglobalDynamicformModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.
         KScrollViewComponent,
         ContextMenuComponent,
         FiconComponent,
-        SfdatetimepickerComponent], imports: [IonicModule,
+        SfdatetimepickerComponent,
+        ZganttchartComponent], imports: [IonicModule,
         IonicSelectableModule,
         CommonModule,
         RouterModule,
@@ -14696,7 +14852,8 @@ MmhglobalDynamicformModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.
         ColorPickerModule,
         ScrollViewModule,
         MenusModule,
-        DateTimePickerModule], exports: [ScrollbarThemeDirective,
+        DateTimePickerModule,
+        GanttModule], exports: [ScrollbarThemeDirective,
         FieldElementDirective,
         ZGridBindingDirective,
         ZGridPopupAnchorDirective,
@@ -14777,7 +14934,8 @@ MmhglobalDynamicformModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.
         KmenuComponent,
         KScrollViewComponent,
         FiconComponent,
-        SfdatetimepickerComponent] });
+        SfdatetimepickerComponent,
+        ZganttchartComponent] });
 MmhglobalDynamicformModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: MmhglobalDynamicformModule, providers: [
         ModalService
     ], imports: [[
@@ -14830,7 +14988,8 @@ MmhglobalDynamicformModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.
             ColorPickerModule,
             ScrollViewModule,
             MenusModule,
-            DateTimePickerModule
+            DateTimePickerModule,
+            GanttModule
         ]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: MmhglobalDynamicformModule, decorators: [{
             type: NgModule,
@@ -14919,7 +15078,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.3", ngImpor
                         KScrollViewComponent,
                         ContextMenuComponent,
                         FiconComponent,
-                        SfdatetimepickerComponent
+                        SfdatetimepickerComponent,
+                        ZganttchartComponent
                     ],
                     imports: [
                         IonicModule,
@@ -14971,7 +15131,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.3", ngImpor
                         ColorPickerModule,
                         ScrollViewModule,
                         MenusModule,
-                        DateTimePickerModule
+                        DateTimePickerModule,
+                        GanttModule
                     ],
                     exports: [
                         ScrollbarThemeDirective,
@@ -15055,7 +15216,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.3", ngImpor
                         KmenuComponent,
                         KScrollViewComponent,
                         FiconComponent,
-                        SfdatetimepickerComponent
+                        SfdatetimepickerComponent,
+                        ZganttchartComponent
                     ],
                     providers: [
                         ModalService
@@ -15072,5 +15234,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.3", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { ButtonFieldBase, ContainerFieldBase, ContextMenuComponent, DataListingFieldBase, DateIonicFormatParser, DateIonicMinMaxParser, DateKendoFormatParser, DateParserFilter, DateRangeFilterCellComponent, DivzLayout, EditorFilter, ElementContainerDirective, FiconComponent, FieldBase, FieldElementDirective, HtmlSanitizePipe, InputErrorMessageComponent, InputFieldAddOnsComponent, InputFieldBase, KScrollViewComponent, KcardComponent, KmenuComponent, KsplitterComponent, MainService, MmhglobalDynamicformModule, MyFileInfo, OpenOnFocusDirective, PageLoaderComponent, PanelAreaFilter, ProcessingRecordLoaderComponent, ScrollbarThemeDirective, SfdatetimepickerComponent, SfquerybuilderComponent, SpinnerComponent, TabFilter, UiactionbuttonComponent, UiappmenucontentComponent, UibulletinComponent, UicontainerComponent, UicontentComponent, UiheaderComponent, UimenubuttonComponent, UimenucontentComponent, UipageComponent, UivalidationmessageComponent, VirtualScrollComponent, ZBulletComponent, ZChipComponent, ZComponentService, ZGridBindingDirective, ZGridPopupAnchorDirective, ZInputContainerComponent, ZInputParser, ZNumericParser, ZSchedulerToolBarComponent, ZSelectTranslationParser, ZTreeListOptions, ZbuttonsComponent, ZcardComponent, ZchartComponent, ZcheckboxComponent, ZcodeeditorComponent, ZcolorpickerComponent, ZdaterangeComponent, ZdatetimeComponent, ZdivComponent, ZformComponent, ZformcontrolComponent, ZgaugeComponent, ZgridComponent, ZgridContainerComponent, ZimgComponent, ZlabelComponent, ZloopComponent, ZmfbComponent, ZmodalComponent, ZmodalMobileComponent, ZnumericComponent, ZpostselectinputComponent, ZprogressbarComponent, ZreportComponent, ZschedulerComponent, ZselectmultipleComponent, ZtabComponent, ZtextComponent, ZtextareaComponent, ZtexteditorComponent, ZtreeComponent, ZtreelistComponent, ZtrendcardComponent, ZudfComponent, ZunknownComponent, ZuploadComponent, ZworkflowbuttonsComponent, refreshGrid };
+export { ButtonFieldBase, ContainerFieldBase, ContextMenuComponent, DataListingFieldBase, DateIonicFormatParser, DateIonicMinMaxParser, DateKendoFormatParser, DateParserFilter, DateRangeFilterCellComponent, DivzLayout, EditorFilter, ElementContainerDirective, FiconComponent, FieldBase, FieldElementDirective, HtmlSanitizePipe, InputErrorMessageComponent, InputFieldAddOnsComponent, InputFieldBase, KScrollViewComponent, KcardComponent, KmenuComponent, KsplitterComponent, MainService, MmhglobalDynamicformModule, MyFileInfo, OpenOnFocusDirective, PageLoaderComponent, PanelAreaFilter, ProcessingRecordLoaderComponent, ScrollbarThemeDirective, SfdatetimepickerComponent, SfquerybuilderComponent, SpinnerComponent, TabFilter, UiactionbuttonComponent, UiappmenucontentComponent, UibulletinComponent, UicontainerComponent, UicontentComponent, UiheaderComponent, UimenubuttonComponent, UimenucontentComponent, UipageComponent, UivalidationmessageComponent, VirtualScrollComponent, ZBulletComponent, ZChipComponent, ZComponentService, ZGridBindingDirective, ZGridPopupAnchorDirective, ZInputContainerComponent, ZInputParser, ZNumericParser, ZSchedulerToolBarComponent, ZSelectTranslationParser, ZTreeListOptions, ZbuttonsComponent, ZcardComponent, ZchartComponent, ZcheckboxComponent, ZcodeeditorComponent, ZcolorpickerComponent, ZdaterangeComponent, ZdatetimeComponent, ZdivComponent, ZformComponent, ZformcontrolComponent, ZganttchartComponent, ZgaugeComponent, ZgridComponent, ZgridContainerComponent, ZimgComponent, ZlabelComponent, ZloopComponent, ZmfbComponent, ZmodalComponent, ZmodalMobileComponent, ZnumericComponent, ZpostselectinputComponent, ZprogressbarComponent, ZreportComponent, ZschedulerComponent, ZselectmultipleComponent, ZtabComponent, ZtextComponent, ZtextareaComponent, ZtexteditorComponent, ZtreeComponent, ZtreelistComponent, ZtrendcardComponent, ZudfComponent, ZunknownComponent, ZuploadComponent, ZworkflowbuttonsComponent, refreshGrid };
 //# sourceMappingURL=mmhglobal-dynamicform.mjs.map