mmhglobal-dynamicform 1.1.8 → 1.1.12
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +12 -0
- package/bundles/mmhglobal-dynamicform.umd.js +21 -13
- package/bundles/mmhglobal-dynamicform.umd.js.map +1 -1
- package/bundles/mmhglobal-dynamicform.umd.min.js +1 -1
- package/bundles/mmhglobal-dynamicform.umd.min.js.map +1 -1
- package/esm2015/lib/zgrid/zgrid.component.js +15 -7
- package/esm2015/lib/zkcard/zkcard.component.js +2 -2
- package/esm2015/lib/ztree/ztree.component.js +3 -3
- package/esm2015/lib/ztreelist/ztreelist.component.js +2 -2
- package/fesm2015/mmhglobal-dynamicform.js +18 -10
- package/fesm2015/mmhglobal-dynamicform.js.map +1 -1
- package/mmhglobal-dynamicform.metadata.json +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -3,6 +3,18 @@
|
|
|
3
3
|
This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 11.2.13.
|
|
4
4
|
|
|
5
5
|
## Changelog
|
|
6
|
+
`1.1.12`<br/>
|
|
7
|
+
zgrid fix save state.
|
|
8
|
+
|
|
9
|
+
`1.1.11`<br/>
|
|
10
|
+
ztreelist html fix.<br/>
|
|
11
|
+
|
|
12
|
+
`1.1.10`<br/>
|
|
13
|
+
ztreelist remove filtering and reordering.<br/>
|
|
14
|
+
|
|
15
|
+
`1.1.9`<br/>
|
|
16
|
+
ztree UI enhancement.<br/>
|
|
17
|
+
change zkcard default icon.
|
|
6
18
|
|
|
7
19
|
`1.1.8`<br/>
|
|
8
20
|
change GrantType to number type and default value as 4.<br/>
|
|
@@ -5357,17 +5357,25 @@
|
|
|
5357
5357
|
var _columns = _zgridComponent.columns;
|
|
5358
5358
|
// Keep existing grid column setting
|
|
5359
5359
|
this.zGridStatePersistingService.set(_gridName, this.columns);
|
|
5360
|
+
var configValue = _columns.toArray().map(function (item) {
|
|
5361
|
+
var _zGridColumnSettings = Object.keys(item)
|
|
5362
|
+
.filter(function (propName) {
|
|
5363
|
+
return !propName.toLowerCase().includes('template');
|
|
5364
|
+
})
|
|
5365
|
+
.reduce(function (acc, curr) {
|
|
5366
|
+
var _a;
|
|
5367
|
+
return (Object.assign(Object.assign({}, acc), (_a = {}, _a[curr] = item[curr], _a)));
|
|
5368
|
+
}, {});
|
|
5369
|
+
return _zGridColumnSettings;
|
|
5370
|
+
});
|
|
5371
|
+
// remove extra element form array
|
|
5372
|
+
configValue.forEach(function (item) {
|
|
5373
|
+
delete item['headerStyle'];
|
|
5374
|
+
delete item['__ngContext__'];
|
|
5375
|
+
});
|
|
5360
5376
|
var gridSetting = {
|
|
5361
5377
|
// state: this.state,
|
|
5362
|
-
columnsConfig:
|
|
5363
|
-
var _zGridColumnSettings = Object.keys(item)
|
|
5364
|
-
.filter(function (propName) { return !propName.toLowerCase().includes('template'); })
|
|
5365
|
-
.reduce(function (acc, curr) {
|
|
5366
|
-
var _a;
|
|
5367
|
-
return (Object.assign(Object.assign({}, acc), (_a = {}, _a[curr] = item[curr], _a)));
|
|
5368
|
-
}, {});
|
|
5369
|
-
return _zGridColumnSettings;
|
|
5370
|
-
})
|
|
5378
|
+
columnsConfig: configValue
|
|
5371
5379
|
};
|
|
5372
5380
|
// Find any setting from localstorage and update, if not just add in.
|
|
5373
5381
|
var _arrGridCaching = this.zGridStatePersistingService.get(_storageKey);
|
|
@@ -6014,7 +6022,7 @@
|
|
|
6014
6022
|
ZkcardComponent.decorators = [
|
|
6015
6023
|
{ type: i0.Component, args: [{
|
|
6016
6024
|
selector: 'app-zkcard',
|
|
6017
|
-
template: "<!--<kendo-multiselect [data]=\"filterItems\" [value]=\"value\" [placeholder]=\"'Survey Status'\" [filterable]=\"true\"\r\n (valueChange)=\"valueChange($event)\"></kendo-multiselect>\r\n -->\r\n<div class=\"survey-card-list\">\r\n <div *ngFor=\"let card of scrollViewCards.data\">\r\n <!--<scrollview-card [card]=\"card\"></scrollview-card>-->\r\n <kendo-card class=\"custom-card-draft\" *ngIf=\"card.WFS_StatusName == 'Draft'\" [width]=\"'250px'\">\r\n <kendo-card-header class=\"k-hbox\">\r\n <div>\r\n <h1 kendoCardTitle>{{ card.SurveyTemplateName }}</h1>\r\n <p kendoCardSubtitle>Survey Doc No: {{card.DocumentNo}}</p>\r\n </div>\r\n </kendo-card-header>\r\n <kendo-card-body class=\"card-body\">\r\n Mill Name: {{card.PartnerMillName}}\r\n <br />\r\n Survey Status: {{card.WFS_StatusName}}\r\n </kendo-card-body>\r\n <kendo-card-footer>\r\n Survey Progression:\r\n <kendo-progressbar style=\"width: 210px; border-radius:10px\" [value]=\"card.value\" [label]=\"label\" [progressCssStyle]=\"progressStyles\">\r\n </kendo-progressbar>\r\n\r\n <kendo-card-actions class=\"k-hbox-actionBtn\" orientation=\"horizontal\" [layout]=\"'end'\">\r\n <button class=\"k-button k-navigation\"\r\n (click)=\"start(card)\">\r\n <div style=\"justify-content:space-between\">\r\n <span> Continue </span>\r\n <fa-icon [icon]=\"getFontAwesome('play')\"></fa-icon>\r\n </div>\r\n </button>\r\n </kendo-card-actions>\r\n </kendo-card-footer>\r\n </kendo-card>\r\n\r\n <kendo-card class=\"custom-card-submit\" *ngIf=\"card.WFS_StatusName == 'Submitted'\" [width]=\"'250px'\">\r\n <kendo-card-header class=\"k-hbox\">\r\n <div>\r\n <h1 kendoCardTitle>{{ card.SurveyTemplateName }}</h1>\r\n <p kendoCardSubtitle>Survey Doc No: {{card.DocumentNo}}</p>\r\n </div>\r\n </kendo-card-header>\r\n <kendo-card-body class=\"card-body\">\r\n Mill Name: {{card.PartnerMillName}}\r\n <br />\r\n Survey Status: {{card.WFS_StatusName}}\r\n </kendo-card-body>\r\n <kendo-card-footer>\r\n Survey Progression:\r\n <kendo-progressbar style=\"width: 210px; border-radius:10px\" [value]=\"card.value\" [label]=\"label\" [progressCssStyle]=\"progressStyles\">\r\n </kendo-progressbar>\r\n <kendo-card-actions class=\"k-hbox-actionBtn\" orientation=\"horizontal\" [layout]=\"'end'\">\r\n <button class=\"k-button k-navigation\"\r\n (click)=\"start(card)\">\r\n <div style=\"justify-content:space-between\">\r\n <span>
|
|
6025
|
+
template: "<!--<kendo-multiselect [data]=\"filterItems\" [value]=\"value\" [placeholder]=\"'Survey Status'\" [filterable]=\"true\"\r\n (valueChange)=\"valueChange($event)\"></kendo-multiselect>\r\n -->\r\n<div class=\"survey-card-list\">\r\n <div *ngFor=\"let card of scrollViewCards.data\">\r\n <!--<scrollview-card [card]=\"card\"></scrollview-card>-->\r\n <kendo-card class=\"custom-card-draft\" *ngIf=\"card.WFS_StatusName == 'Draft'\" [width]=\"'250px'\">\r\n <kendo-card-header class=\"k-hbox\">\r\n <div>\r\n <h1 kendoCardTitle>{{ card.SurveyTemplateName }}</h1>\r\n <p kendoCardSubtitle>Survey Doc No: {{card.DocumentNo}}</p>\r\n </div>\r\n </kendo-card-header>\r\n <kendo-card-body class=\"card-body\">\r\n Mill Name: {{card.PartnerMillName}}\r\n <br />\r\n Survey Status: {{card.WFS_StatusName}}\r\n </kendo-card-body>\r\n <kendo-card-footer>\r\n Survey Progression:\r\n <kendo-progressbar style=\"width: 210px; border-radius:10px\" [value]=\"card.value\" [label]=\"label\" [progressCssStyle]=\"progressStyles\">\r\n </kendo-progressbar>\r\n\r\n <kendo-card-actions class=\"k-hbox-actionBtn\" orientation=\"horizontal\" [layout]=\"'end'\">\r\n <button class=\"k-button k-navigation\"\r\n (click)=\"start(card)\">\r\n <div style=\"justify-content:space-between\">\r\n <span> Continue </span>\r\n <fa-icon [icon]=\"getFontAwesome('play')\"></fa-icon>\r\n </div>\r\n </button>\r\n </kendo-card-actions>\r\n </kendo-card-footer>\r\n </kendo-card>\r\n\r\n <kendo-card class=\"custom-card-submit\" *ngIf=\"card.WFS_StatusName == 'Submitted'\" [width]=\"'250px'\">\r\n <kendo-card-header class=\"k-hbox\">\r\n <div>\r\n <h1 kendoCardTitle>{{ card.SurveyTemplateName }}</h1>\r\n <p kendoCardSubtitle>Survey Doc No: {{card.DocumentNo}}</p>\r\n </div>\r\n </kendo-card-header>\r\n <kendo-card-body class=\"card-body\">\r\n Mill Name: {{card.PartnerMillName}}\r\n <br />\r\n Survey Status: {{card.WFS_StatusName}}\r\n </kendo-card-body>\r\n <kendo-card-footer>\r\n Survey Progression:\r\n <kendo-progressbar style=\"width: 210px; border-radius:10px\" [value]=\"card.value\" [label]=\"label\" [progressCssStyle]=\"progressStyles\">\r\n </kendo-progressbar>\r\n <kendo-card-actions class=\"k-hbox-actionBtn\" orientation=\"horizontal\" [layout]=\"'end'\">\r\n <button class=\"k-button k-navigation\"\r\n (click)=\"start(card)\">\r\n <div style=\"justify-content:space-between\">\r\n <span> View </span>\r\n <fa-icon [icon]=\"getFontAwesome('file-alt')\"></fa-icon>\r\n </div>\r\n </button>\r\n </kendo-card-actions>\r\n </kendo-card-footer>\r\n </kendo-card>\r\n\r\n <kendo-card class=\"custom-card-new\" *ngIf=\"card.WFS_StatusName == 'New'\" [width]=\"'250px'\">\r\n <kendo-card-header class=\"k-hbox\">\r\n <div>\r\n <h1 kendoCardTitle>{{ card.SurveyTemplateName }}</h1>\r\n <p kendoCardSubtitle>{{card.DocumentNo}}</p>\r\n </div>\r\n </kendo-card-header>\r\n <kendo-card-body class=\"card-body\">\r\n Mill Name: {{card.PartnerMillName}}\r\n <br />\r\n Survey Status: {{card.WFS_StatusName}}\r\n </kendo-card-body>\r\n <kendo-card-footer>\r\n Survey Progression: \r\n <kendo-progressbar style=\"width: 210px; border-radius:10px\" [value]=\"card.value\" [label]=\"label\" [progressCssStyle]=\"progressStyles\">\r\n </kendo-progressbar>\r\n <kendo-card-actions class=\"k-hbox-actionBtn\" orientation=\"horizontal\" [layout]=\"'end'\">\r\n <button class=\"k-button k-navigation\"\r\n (click)=\"start(card)\">\r\n <div style=\"justify-content:space-between\">\r\n <span> Start </span>\r\n <fa-icon [icon]=\"getFontAwesome('play')\"></fa-icon>\r\n </div>\r\n </button>\r\n </kendo-card-actions>\r\n </kendo-card-footer>\r\n </kendo-card>\r\n </div>\r\n</div>\r\n",
|
|
6018
6026
|
styles: [".survey-card-list{display:flex;flex-wrap:wrap;background-color:#f0dcd9;align-items:center;border-radius:10px}.custom-card-submit{margin:20px;border:3px solid green;border-radius:15px}.custom-card-draft,.custom-card-new{margin:20px;border:3px solid orange;border-radius:15px}"]
|
|
6019
6027
|
},] }
|
|
6020
6028
|
];
|
|
@@ -8251,8 +8259,8 @@
|
|
|
8251
8259
|
ZtreeComponent.decorators = [
|
|
8252
8260
|
{ type: i0.Component, args: [{
|
|
8253
8261
|
selector: "app-ztree",
|
|
8254
|
-
template: "<
|
|
8255
|
-
styles: [""]
|
|
8262
|
+
template: "<div style=\"width:100%\" *ngIf=\"(!!componentProperties.isVisibleField ? group[componentProperties.isVisibleField] : componentProperties.isVisible)\">\r\n <kendo-treeview [nodes]=\"getItems()\" kendoTreeViewExpandable kendoTreeViewSelectable kendoTreeViewDragAndDrop\r\n kendoTreeViewDragAndDropEditing\r\n [isExpanded]=\"isExpanded\"\r\n (collapse)=\"handleCollapse($event)\"\r\n (expand)=\"handleExpand($event)\"\r\n (nodeDrop)=\"handleNodeDrop($event)\" \r\n (nodeDragEnd)=\"handleNodeDragEnd($event)\"\r\n (selectionChange)=\"onSelectionChange($event)\" kendoTreeViewHierarchyBinding childrenField=\"Value\">\r\n <ng-template kendoTreeViewNodeTemplate let-dataItem #nodetemplate>\r\n\r\n <ion-button *ngIf=\"!!data.OnAddNode\" (click)=\"onAddNode($event, dataItem, data, group)\"\r\n style=\"zoom: 0.6;margin: 0 0 0 2px;\" mat-raised-button color=\"primary\" size=\"medium\" [hidden]=\"(!!dataItem.OnAddNodeVisible)\">\r\n <!-- <ion-icon name=\"add\" slot=\"icon-only\"></ion-icon> -->\r\n <fa-icon [icon]=\"'plus'\"></fa-icon>\r\n </ion-button>\r\n <ion-button *ngIf=\"!!data.OnRemoveNode\" (click)=\"onRemoveNode($event, dataItem, data, group)\"\r\n style=\"zoom: 0.6;margin: 0 15px 0 10px;\" color=\"danger\" mat-raised-button size=\"medium\" [hidden]=\"(!!dataItem.OnRemoveNodeVisible)\">\r\n <!-- <ion-icon name=\"close\" slot=\"icon-only\"></ion-icon> -->\r\n <fa-icon [icon]=\"'minus'\"></fa-icon>\r\n </ion-button>\r\n\r\n {{ getTemplate(dataItem, data, group) }}\r\n\r\n </ng-template>\r\n </kendo-treeview>\r\n</div>\r\n",
|
|
8263
|
+
styles: [":host{--ion-color-primary:#479400;--ion-color-primary-rgb:56,128,255;--ion-color-primary-contrast:#fff;--ion-color-primary-contrast-rgb:255,255,255;--ion-color-primary-shade:#3171e0;--ion-color-primary-tint:#4c8dff}:host ::ng-deep .k-treeview .k-in{border-radius:2px;border:1px solid #c8dbf5;background-color:#e3ecf8}:host ::ng-deep .k-treeview .k-in,:host ::ng-deep .k-treeview .k-in.k-state-selected{width:100%;margin:5px;padding:9px 20px 9px 8px;color:#0a45ab;font-size:13px;cursor:pointer}:host ::ng-deep .k-treeview .k-in.k-state-selected{border-radius:2px;background-color:#a9c3e8}:host ::ng-deep .k-treeview .k-in.k-state-hover,:host ::ng-deep .k-treeview .k-in:hover{width:100%;margin:5px;padding:9px 20px 9px 8px;border-radius:2px;background-color:#c9daf2;color:#0a45ab;font-size:13px;cursor:pointer}"]
|
|
8256
8264
|
},] }
|
|
8257
8265
|
];
|
|
8258
8266
|
ZtreeComponent.ctorParameters = function () { return []; };
|
|
@@ -8772,7 +8780,7 @@
|
|
|
8772
8780
|
ZtreelistComponent.decorators = [
|
|
8773
8781
|
{ type: i0.Component, args: [{
|
|
8774
8782
|
selector: "app-ztreelist",
|
|
8775
|
-
template: "<div *ngIf=\"(!!componentProperties.isVisibleField ? group[componentProperties.isVisibleField] : componentProperties.isVisible)\" style=\"margin: 10px 0 6px 0;\">\r\n <div *ngIf=\"data.Title\" class=\"treelistTitle\">{{data.Title}}</div>\r\n <kendo-treelist [kendoTreeListFlatBinding]=\"dataSource\" [ngStyle]=\"getGridStyle()\" [idField]=\"options.idField\" [parentIdField]=\"options.parentIdField\"\r\n (cellClick)=\"cellClickHandler($event)\"\r\n [sortable]=\"options.sortable\"\r\n [resizable]=\"options.resizable\"\r\n [filterable]=\"options.filterable\"\r\n [reorderable]=\"options.resizable\"\r\n [columnMenu]=\"options.columnMenu\"\r\n [scrollable]=\"options.scrollable\"\r\n [aggregate]=\"options.aggregate\"\r\n [pageable]=\"options.pageAble\"\r\n [pageSize]=\"data.PageSize\"\r\n [initiallyExpanded]=\"data.DefaultCollapse === false\"\r\n (filterChange)=\"onFilterChange($event)\"\r\n kendoTreeListExpandable\r\n treelist>\r\n\r\n <ng-container *ngFor=\"let col of options.columns; index as i\">\r\n <kendo-treelist-column *ngIf=\"!col.command\" [class]=\"col.class\"\r\n [expandable]=\"i===0\" [field]=\"col.field\" [title]=\"col.title || col.field\" [width]=\"col.width || 250\" [hidden]=\"!isColumnsVisible(col.visible)\">\r\n <div [ngSwitch]=\"true\">\r\n <div *ngSwitchCase=\"col.fieldType === 'number'\r\n || col.fieldType === 'currency'\r\n || col.fieldType === 'znumeric'\">\r\n <ng-template kendoTreeListFilterCellTemplate let-filter let-column=\"column\">\r\n <kendo-treelist-numeric-filter-cell [column]=\"column\" [filter]=\"filter\" operator=\"eq\">\r\n <kendo-filter-eq-operator></kendo-filter-eq-operator>\r\n <kendo-filter-neq-operator></kendo-filter-neq-operator>\r\n <kendo-filter-lt-operator></kendo-filter-lt-operator>\r\n <kendo-filter-lte-operator></kendo-filter-lte-operator>\r\n <kendo-filter-gt-operator></kendo-filter-gt-operator>\r\n <kendo-filter-gte-operator></kendo-filter-gte-operator>\r\n <kendo-filter-isnull-operator></kendo-filter-isnull-operator>\r\n <kendo-filter-isnotnull-operator></kendo-filter-isnotnull-operator>\r\n </kendo-treelist-numeric-filter-cell>\r\n </ng-template>\r\n </div>\r\n <div *ngSwitchCase=\"col.fieldType == 'zdate'\r\n || col.fieldType === 'zdatetime'\r\n || col.fieldType === 'zuidatetime'\">\r\n <div *ngIf=\"col.filterByDateRange === true\">\r\n <ng-template kendoTreeListFilterCellTemplate let-filter let-column=\"column\" operator=\"lte\">\r\n <date-range-filter-cell class=\"date-range-filter\"\r\n [filter]=\"filter\"\r\n [field]=\"col.field\">\r\n <kendo-treelist-filter-lt-operator></kendo-treelist-filter-lt-operator>\r\n <kendo-treelist-filter-lte-operator></kendo-treelist-filter-lte-operator>\r\n <kendo-treelist-filter-gt-operator></kendo-treelist-filter-gt-operator>\r\n <kendo-treelist-filter-gte-operator></kendo-treelist-filter-gte-operator>\r\n <kendo-treelist-filter-isnull-operator></kendo-treelist-filter-isnull-operator>\r\n <kendo-treelist-filter-isnotnull-operator></kendo-treelist-filter-isnotnull-operator>\r\n </date-range-filter-cell>\r\n </ng-template>\r\n </div>\r\n <div *ngIf=\"col.filterByDateRange === false\">\r\n <ng-template kendoTreeListFilterCellTemplate let-filter let-column=\"column\">\r\n <kendo-treelist-date-filter-cell [column]=\"column\" [filter]=\"filter\" operator=\"lte\">\r\n <kendo-treelist-filter-lt-operator></kendo-treelist-filter-lt-operator>\r\n <kendo-treelist-filter-lte-operator></kendo-treelist-filter-lte-operator>\r\n <kendo-treelist-filter-gt-operator></kendo-treelist-filter-gt-operator>\r\n <kendo-treelist-filter-gte-operator></kendo-treelist-filter-gte-operator>\r\n <kendo-treelist-filter-isnull-operator></kendo-treelist-filter-isnull-operator>\r\n <kendo-treelist-filter-isnotnull-operator></kendo-treelist-filter-isnotnull-operator>\r\n </kendo-treelist-date-filter-cell>\r\n </ng-template>\r\n </div>\r\n </div>\r\n <div *ngSwitchDefault>\r\n <ng-template kendoTreeListFilterCellTemplate let-filter let-column=\"column\">\r\n <kendo-treelist-string-filter-cell [column]=\"column\" [filter]=\"filter\" operator=\"contains\">\r\n <kendo-treelist-filter-contains-operator></kendo-treelist-filter-contains-operator>\r\n <kendo-treelist-filter-eq-operator></kendo-treelist-filter-eq-operator>\r\n <kendo-treelist-filter-neq-operator></kendo-treelist-filter-neq-operator>\r\n <kendo-treelist-filter-startswith-operator></kendo-treelist-filter-startswith-operator>\r\n <kendo-treelist-filter-endswith-operator></kendo-treelist-filter-endswith-operator>\r\n <kendo-treelist-filter-isnull-operator></kendo-treelist-filter-isnull-operator>\r\n <kendo-treelist-filter-isnotnull-operator></kendo-treelist-filter-isnotnull-operator>\r\n </kendo-treelist-string-filter-cell>\r\n </ng-template>\r\n </div>\r\n </div>\r\n <ng-template kendoTreeListCellTemplate let-dataItem let-rowIndex=\"rowIndex\" let-cellContext=\"cellContext\">\r\n <div style=\"margin: 7px 0;display: inline;\" [style.color]=\"(!!dataItem.Color ? [dataItem.Color] : 'black')\" *ngIf=\"!col.navigateTo && col.isEditableInGrid !== true\" [ngSwitch]=\"col.fieldType\" [ngClass]=\"getColClass(dataItem, col)\">\r\n <span *ngSwitchCase=\"'zdate'\">\r\n {{ dataItem[col.field] | date: 'dd/MM/yyyy' }}\r\n </span>\r\n <span *ngSwitchCase=\"'zshortdate'\">\r\n {{ dataItem[col.field] | date: 'MMM yyyy' }}\r\n </span>\r\n <span *ngSwitchCase=\"'zdatetime'\">\r\n {{ dataItem[col.field] | date: 'dd/MM/yyyy hh:mm:ss aa' }}\r\n </span>\r\n <span *ngSwitchCase=\"'zuidatetime'\">\r\n {{ dataItem[col.field] | date: 'dd/MM/yyyy hh:mm:ss aa' }}\r\n </span>\r\n <span *ngSwitchCase=\"'number'\">\r\n <div style=\"text-align:right;\">{{ dataItem[col.field] | number }} </div>\r\n </span>\r\n <span *ngSwitchCase=\"'currency'\">\r\n <div style=\"text-align:right;\">{{ dataItem[col.field] | number: '1.2-2' }}</div>\r\n </span>\r\n <span *ngSwitchCase=\"'znumeric'\">\r\n <div style=\"text-align:right;\">{{ dataItem[col.field] | number: getFormat(col) }}</div>\r\n </span>\r\n <span *ngSwitchCase=\"'url'\" style=\"color: blue; cursor: pointer; text-decoration:underline;\">\r\n {{ dataItem[col.field] }}\r\n </span>\r\n <span *ngSwitchDefault>\r\n {{ dataItem[col.field]}}\r\n </span>\r\n </div>\r\n <div style=\"margin: 7px 0;display: inline;\" [style.color]=\"(!!dataItem.Color ? [dataItem.Color] : 'black')\" *ngIf=\"!col.navigateTo && col.isEditableInGrid === true && isInlineEditColVisible(dataItem, col)\" [ngSwitch]=\"col.fieldType\" [ngClass]=\"getColClass(dataItem, col)\">\r\n <span *ngSwitchCase=\"'checkbox'\">\r\n <app-zcheckbox style=\"width: 100%;\" [data]=\"getInlineField(col.Value)\" [group]=\"group\" [form]=\"getInlineForm(dataItem)\" (click)=\"buttonClick(col, cellContext)\"></app-zcheckbox>\r\n </span>\r\n <span *ngSwitchCase=\"'zuiselectmultiple'\">\r\n <app-zselectmultiple style=\"width: 100%;\" [data]=\"getInlineField(col.field)\" [group]=\"group\" [form]=\"getInlineForm(dataItem)\"></app-zselectmultiple>\r\n </span>\r\n <span *ngSwitchCase=\"'textarea'\">\r\n <app-ztextarea style=\"width: 100%;\" [data]=\"getInlineField(col.Value)\" [group]=\"group\" [form]=\"getInlineForm(dataItem)\"></app-ztextarea>\r\n </span>\r\n <span *ngSwitchCase=\"['zuidatetime','zdate','zdatetime','zshortdate'].includes(col.fieldType) ? col.fieldType : ''\">\r\n <app-zdatetime style=\"width: 100%;\" [data]=\"getInlineField(col.Value)\" [group]=\"group\" [form]=\"getInlineForm(dataItem)\"></app-zdatetime>\r\n </span>\r\n </div>\r\n <span *ngIf=\"!!col.navigateTo\" (click)=\"onNavigateTo($event, col, dataItem, dataItem[col.field])\">\r\n <ion-button color=\"light\" size=\"small\">\r\n {{ dataItem[col.field] }}\r\n <!-- <ion-icon slot= \"end\" name=\"arrow-forward\"></ion-icon> -->\r\n <fa-icon slot=\"end\" [icon]=\"'arrow-right'\"></fa-icon>\r\n </ion-button>\r\n </span>\r\n <!-- <strong>{{ dataItem[col.field] }}</strong> -->\r\n <!-- <span class=\"{{dataItem.Discontinued ? 'discontinued' : 'active'}}\">\r\n {{dataItem.Discontinued ? \"discontinued\" : \"active\"}}\r\n </span> -->\r\n </ng-template>\r\n <ng-template *ngIf=\"col.footerTemplate\" kendoTreeListFooterTemplate let-aggregates=\"aggregates\">\r\n <b>\r\n <div *ngIf=\"!col.navigateTo\" [ngSwitch]=\"col.fieldType\" [ngClass]=\"{'rightAligned': col.fieldType === 'number' || col.fieldType === 'currency'}\">\r\n <span *ngSwitchCase=\"'number'\">\r\n {{ col.aggregateTitle | titlecase }} {{ aggregates[col.field][col.aggregateType] | number }}\r\n </span>\r\n <span *ngSwitchCase=\"'currency'\">\r\n {{ col.aggregateTitle | titlecase }} {{ aggregates[col.field][col.aggregateType] | number: '1.2-2' }}\r\n </span>\r\n </div>\r\n </b>\r\n </ng-template>\r\n </kendo-treelist-column>\r\n <kendo-treelist-command-column *ngIf=\"!!col.command\" [title]=\"col.title || col.field\" [width]=\"col.width || 250\">\r\n <ng-template kendoTreeListCellTemplate let-cellContext=\"cellContext\">\r\n <div [ngClass]=\"col.class\">\r\n <button *ngFor=\"let col2 of col.command; index as i\" type=\"button\" [kendoTreeListEditCommand]=\"cellContext\"\r\n [title]=\"col2.text\" (click)=\"buttonClick(col2, cellContext)\"\r\n [hidden]=\"isButtonHidden(col2, cellContext)\">\r\n <fa-icon [icon]=\"col2.icon\" [style.color]=\"(!!col2.color ? [col2.color] : 'black')\">\r\n </fa-icon>\r\n <div *ngIf=\"col2.ShowLabel === undefined || col2.ShowLabel\">{{col2.text}}</div>\r\n </button>\r\n </div>\r\n </ng-template>\r\n </kendo-treelist-command-column>\r\n </ng-container>\r\n\r\n <!-- <kendo-treelist-command-column width=\"140\">\r\n <ng-template kendoTreeListCellTemplate let-isNew=\"isNew\" let-cellContext=\"cellContext\">\r\n <button [kendoTreeListAddCommand]=\"cellContext\"\r\n icon=\"filter-add-expression\" title=\"Add Child\">\r\n </button>\r\n <button [kendoTreeListCancelCommand]=\"cellContext\"\r\n icon=\"cancel\" title=\"{{ isNew ? 'Discard changes' : 'Cancel' }}\">\r\n </button>\r\n </ng-template>\r\n </kendo-treelist-command-column> -->\r\n </kendo-treelist>\r\n</div>\r\n",
|
|
8783
|
+
template: "<div *ngIf=\"(!!componentProperties.isVisibleField ? group[componentProperties.isVisibleField] : componentProperties.isVisible)\" style=\"margin: 10px 0 6px 0;\">\r\n <div *ngIf=\"data.Title\" class=\"treelistTitle\">{{data.Title}}</div>\r\n <kendo-treelist [kendoTreeListFlatBinding]=\"dataSource\" [ngStyle]=\"getGridStyle()\" [idField]=\"options.idField\" [parentIdField]=\"options.parentIdField\"\r\n (cellClick)=\"cellClickHandler($event)\"\r\n [sortable]=\"options.sortable\"\r\n [resizable]=\"options.resizable\"\r\n [filterable]=\"false\"\r\n [reorderable]=\"false\"\r\n [columnMenu]=\"options.columnMenu\"\r\n [scrollable]=\"options.scrollable\"\r\n [aggregate]=\"options.aggregate\"\r\n [pageable]=\"options.pageAble\"\r\n [pageSize]=\"data.PageSize\"\r\n [initiallyExpanded]=\"data.DefaultCollapse === false\"\r\n (filterChange)=\"onFilterChange($event)\"\r\n kendoTreeListExpandable\r\n treelist>\r\n\r\n <!--\r\n [filterable]=\"options.filterable\"\r\n [reorderable]=\"options.resizable\"\r\n -->\r\n <ng-container *ngFor=\"let col of options.columns; index as i\">\r\n <kendo-treelist-column *ngIf=\"!col.command\" [class]=\"col.class\"\r\n [expandable]=\"i===0\" [field]=\"col.field\" [title]=\"col.title || col.field\" [width]=\"col.width || 250\" [hidden]=\"!isColumnsVisible(col.visible)\">\r\n <div [ngSwitch]=\"true\">\r\n <div *ngSwitchCase=\"col.fieldType === 'number'\r\n || col.fieldType === 'currency'\r\n || col.fieldType === 'znumeric'\">\r\n <ng-template kendoTreeListFilterCellTemplate let-filter let-column=\"column\">\r\n <kendo-treelist-numeric-filter-cell [column]=\"column\" [filter]=\"filter\" operator=\"eq\">\r\n <kendo-filter-eq-operator></kendo-filter-eq-operator>\r\n <kendo-filter-neq-operator></kendo-filter-neq-operator>\r\n <kendo-filter-lt-operator></kendo-filter-lt-operator>\r\n <kendo-filter-lte-operator></kendo-filter-lte-operator>\r\n <kendo-filter-gt-operator></kendo-filter-gt-operator>\r\n <kendo-filter-gte-operator></kendo-filter-gte-operator>\r\n <kendo-filter-isnull-operator></kendo-filter-isnull-operator>\r\n <kendo-filter-isnotnull-operator></kendo-filter-isnotnull-operator>\r\n </kendo-treelist-numeric-filter-cell>\r\n </ng-template>\r\n </div>\r\n <div *ngSwitchCase=\"col.fieldType == 'zdate'\r\n || col.fieldType === 'zdatetime'\r\n || col.fieldType === 'zuidatetime'\">\r\n <div *ngIf=\"col.filterByDateRange === true\">\r\n <ng-template kendoTreeListFilterCellTemplate let-filter let-column=\"column\" operator=\"lte\">\r\n <date-range-filter-cell class=\"date-range-filter\"\r\n [filter]=\"filter\"\r\n [field]=\"col.field\">\r\n <kendo-treelist-filter-lt-operator></kendo-treelist-filter-lt-operator>\r\n <kendo-treelist-filter-lte-operator></kendo-treelist-filter-lte-operator>\r\n <kendo-treelist-filter-gt-operator></kendo-treelist-filter-gt-operator>\r\n <kendo-treelist-filter-gte-operator></kendo-treelist-filter-gte-operator>\r\n <kendo-treelist-filter-isnull-operator></kendo-treelist-filter-isnull-operator>\r\n <kendo-treelist-filter-isnotnull-operator></kendo-treelist-filter-isnotnull-operator>\r\n </date-range-filter-cell>\r\n </ng-template>\r\n </div>\r\n <div *ngIf=\"col.filterByDateRange === false\">\r\n <ng-template kendoTreeListFilterCellTemplate let-filter let-column=\"column\">\r\n <kendo-treelist-date-filter-cell [column]=\"column\" [filter]=\"filter\" operator=\"lte\">\r\n <kendo-treelist-filter-lt-operator></kendo-treelist-filter-lt-operator>\r\n <kendo-treelist-filter-lte-operator></kendo-treelist-filter-lte-operator>\r\n <kendo-treelist-filter-gt-operator></kendo-treelist-filter-gt-operator>\r\n <kendo-treelist-filter-gte-operator></kendo-treelist-filter-gte-operator>\r\n <kendo-treelist-filter-isnull-operator></kendo-treelist-filter-isnull-operator>\r\n <kendo-treelist-filter-isnotnull-operator></kendo-treelist-filter-isnotnull-operator>\r\n </kendo-treelist-date-filter-cell>\r\n </ng-template>\r\n </div>\r\n </div>\r\n <div *ngSwitchDefault>\r\n <ng-template kendoTreeListFilterCellTemplate let-filter let-column=\"column\">\r\n <kendo-treelist-string-filter-cell [column]=\"column\" [filter]=\"filter\" operator=\"contains\">\r\n <kendo-treelist-filter-contains-operator></kendo-treelist-filter-contains-operator>\r\n <kendo-treelist-filter-eq-operator></kendo-treelist-filter-eq-operator>\r\n <kendo-treelist-filter-neq-operator></kendo-treelist-filter-neq-operator>\r\n <kendo-treelist-filter-startswith-operator></kendo-treelist-filter-startswith-operator>\r\n <kendo-treelist-filter-endswith-operator></kendo-treelist-filter-endswith-operator>\r\n <kendo-treelist-filter-isnull-operator></kendo-treelist-filter-isnull-operator>\r\n <kendo-treelist-filter-isnotnull-operator></kendo-treelist-filter-isnotnull-operator>\r\n </kendo-treelist-string-filter-cell>\r\n </ng-template>\r\n </div>\r\n </div>\r\n <ng-template kendoTreeListCellTemplate let-dataItem let-rowIndex=\"rowIndex\" let-cellContext=\"cellContext\">\r\n <div style=\"margin: 7px 0;display: inline;\" [style.color]=\"(!!dataItem.Color ? [dataItem.Color] : 'black')\" *ngIf=\"!col.navigateTo && col.isEditableInGrid !== true\" [ngSwitch]=\"col.fieldType\" [ngClass]=\"getColClass(dataItem, col)\">\r\n <span *ngSwitchCase=\"'zdate'\">\r\n {{ dataItem[col.field] | date: 'dd/MM/yyyy' }}\r\n </span>\r\n <span *ngSwitchCase=\"'zshortdate'\">\r\n {{ dataItem[col.field] | date: 'MMM yyyy' }}\r\n </span>\r\n <span *ngSwitchCase=\"'zdatetime'\">\r\n {{ dataItem[col.field] | date: 'dd/MM/yyyy hh:mm:ss aa' }}\r\n </span>\r\n <span *ngSwitchCase=\"'zuidatetime'\">\r\n {{ dataItem[col.field] | date: 'dd/MM/yyyy hh:mm:ss aa' }}\r\n </span>\r\n <span *ngSwitchCase=\"'number'\">\r\n <div style=\"text-align:right;\">{{ dataItem[col.field] | number }} </div>\r\n </span>\r\n <span *ngSwitchCase=\"'currency'\">\r\n <div style=\"text-align:right;\">{{ dataItem[col.field] | number: '1.2-2' }}</div>\r\n </span>\r\n <span *ngSwitchCase=\"'znumeric'\">\r\n <div style=\"text-align:right;\">{{ dataItem[col.field] | number: getFormat(col) }}</div>\r\n </span>\r\n <span *ngSwitchCase=\"'url'\" style=\"color: blue; cursor: pointer; text-decoration:underline;\">\r\n {{ dataItem[col.field] }}\r\n </span>\r\n <span *ngSwitchDefault>\r\n {{ dataItem[col.field]}}\r\n </span>\r\n </div>\r\n <div style=\"margin: 7px 0;display: inline;\" [style.color]=\"(!!dataItem.Color ? [dataItem.Color] : 'black')\" *ngIf=\"!col.navigateTo && col.isEditableInGrid === true && isInlineEditColVisible(dataItem, col)\" [ngSwitch]=\"col.fieldType\" [ngClass]=\"getColClass(dataItem, col)\">\r\n <span *ngSwitchCase=\"'checkbox'\">\r\n <app-zcheckbox style=\"width: 100%;\" [data]=\"getInlineField(col.Value)\" [group]=\"group\" [form]=\"getInlineForm(dataItem)\" (click)=\"buttonClick(col, cellContext)\"></app-zcheckbox>\r\n </span>\r\n <span *ngSwitchCase=\"'zuiselectmultiple'\">\r\n <app-zselectmultiple style=\"width: 100%;\" [data]=\"getInlineField(col.field)\" [group]=\"group\" [form]=\"getInlineForm(dataItem)\"></app-zselectmultiple>\r\n </span>\r\n <span *ngSwitchCase=\"'textarea'\">\r\n <app-ztextarea style=\"width: 100%;\" [data]=\"getInlineField(col.Value)\" [group]=\"group\" [form]=\"getInlineForm(dataItem)\"></app-ztextarea>\r\n </span>\r\n <span *ngSwitchCase=\"['zuidatetime','zdate','zdatetime','zshortdate'].includes(col.fieldType) ? col.fieldType : ''\">\r\n <app-zdatetime style=\"width: 100%;\" [data]=\"getInlineField(col.Value)\" [group]=\"group\" [form]=\"getInlineForm(dataItem)\"></app-zdatetime>\r\n </span>\r\n </div>\r\n <span *ngIf=\"!!col.navigateTo\" (click)=\"onNavigateTo($event, col, dataItem, dataItem[col.field])\">\r\n <ion-button color=\"light\" size=\"small\">\r\n {{ dataItem[col.field] }}\r\n <!-- <ion-icon slot= \"end\" name=\"arrow-forward\"></ion-icon> -->\r\n <fa-icon slot=\"end\" [icon]=\"'arrow-right'\"></fa-icon>\r\n </ion-button>\r\n </span> \r\n </ng-template>\r\n <ng-template *ngIf=\"col.footerTemplate\" kendoTreeListFooterTemplate let-aggregates=\"aggregates\">\r\n <div *ngIf=\"!col.navigateTo\" [ngSwitch]=\"col.fieldType\" [ngClass]=\"{'rightAligned': col.fieldType === 'number' || col.fieldType === 'currency'}\">\r\n <span *ngSwitchCase=\"'number'\">\r\n <b>\r\n {{ col.aggregateTitle | titlecase }} {{ aggregates[col.field][col.aggregateType] | number }}\r\n </b>\r\n </span>\r\n <span *ngSwitchCase=\"'currency'\">\r\n <b>\r\n {{ col.aggregateTitle | titlecase }} {{ aggregates[col.field][col.aggregateType] | number: '1.2-2' }}\r\n </b>\r\n </span>\r\n </div>\r\n </ng-template>\r\n </kendo-treelist-column>\r\n <kendo-treelist-command-column *ngIf=\"!!col.command\" [title]=\"col.title || col.field\" [width]=\"col.width || 250\">\r\n <ng-template kendoTreeListCellTemplate let-cellContext=\"cellContext\">\r\n <div [ngClass]=\"col.class\">\r\n <button *ngFor=\"let col2 of col.command; index as i\" type=\"button\" [kendoTreeListEditCommand]=\"cellContext\"\r\n [title]=\"col2.text\" (click)=\"buttonClick(col2, cellContext)\"\r\n [hidden]=\"isButtonHidden(col2, cellContext)\">\r\n <fa-icon [icon]=\"col2.icon\" [style.color]=\"(!!col2.color ? [col2.color] : 'black')\">\r\n </fa-icon>\r\n <div *ngIf=\"col2.ShowLabel === undefined || col2.ShowLabel\">{{col2.text}}</div>\r\n </button>\r\n </div>\r\n </ng-template>\r\n </kendo-treelist-command-column>\r\n </ng-container>\r\n\r\n <!-- <kendo-treelist-command-column width=\"140\">\r\n <ng-template kendoTreeListCellTemplate let-isNew=\"isNew\" let-cellContext=\"cellContext\">\r\n <button [kendoTreeListAddCommand]=\"cellContext\"\r\n icon=\"filter-add-expression\" title=\"Add Child\">\r\n </button>\r\n <button [kendoTreeListCancelCommand]=\"cellContext\"\r\n icon=\"cancel\" title=\"{{ isNew ? 'Discard changes' : 'Cancel' }}\">\r\n </button>\r\n </ng-template>\r\n </kendo-treelist-command-column> -->\r\n </kendo-treelist>\r\n</div>\r\n",
|
|
8776
8784
|
styles: [":host ::ng-deep kendo-treelist .k-grid-content{white-space:nowrap}:host ::ng-deep kendo-treelist .k-toolbar{background-color:#e3ecf8}:host ::ng-deep kendo-treelist .k-grid-add-row,:host ::ng-deep kendo-treelist .k-grid-footer,:host ::ng-deep kendo-treelist .k-grid-header,:host ::ng-deep kendo-treelist .k-grouping-header{background-color:#e3ecf8;font-weight:600}:host ::ng-deep kendo-treelist .k-button{border-radius:5px;box-shadow:0 2px 2px rgba(0,0,0,.1);background-color:#c9daf2}:host ::ng-deep kendo-treelist .k-grid-header .k-grid-filter:hover,:host ::ng-deep kendo-treelist .k-grid-header .k-header-column-menu:hover,:host ::ng-deep kendo-treelist .k-grid-header .k-hierarchy-cell .k-icon:hover{background-color:#c9daf2}:host ::ng-deep kendo-treelist .k-grid .k-grid-filter,:host ::ng-deep kendo-treelist .k-grid .k-header-column-menu,:host ::ng-deep kendo-treelist .k-grid .k-hierarchy-cell .k-icon{color:#132842}:host ::ng-deep kendo-treelist .k-dropdown .k-dropdown-wrap,:host ::ng-deep kendo-treelist .k-dropdowntree .k-dropdown-wrap{border-radius:2px;background-color:rgba(214,224,239,.5)}:host ::ng-deep kendo-treelist tr.k-alt{background-color:rgba(232,238,246,.5)}:host ::ng-deep kendo-treelist tbody tr.k-state-hover,:host ::ng-deep kendo-treelist tbody tr:hover{background-color:rgba(214,224,239,.5)}:host ::ng-deep kendo-treelist .k-pager-wrap{background-color:#e3ecf8}:host ::ng-deep kendo-treelist .k-pager-numbers .k-link.k-state-selected{color:#ff5e5b;background-color:rgba(255,94,91,.4)}:host ::ng-deep kendo-treelist .k-pager-numbers .k-link.k-state-hover,:host ::ng-deep kendo-treelist .k-pager-numbers .k-link:hover{color:#ff5e5b;background-color:rgba(255,94,91,.15)}.cellWrapText .gridCell{white-space:pre-line!important}.treelistTitle{margin:20px 10px 5px;font-size:18px;font-weight:700}.rightAligned{text-align:right;display:table!important;margin:0 0 0 auto!important}.centerAligned{text-align:center;display:table!important;margin:0 auto!important}.k-i-loading{position:absolute;top:100px;left:0;right:0;bottom:0;font-size:45px;background-color:hsla(0,0%,100%,.3);color:#0f4800}"]
|
|
8777
8785
|
},] }
|
|
8778
8786
|
];
|