@memberjunction/ng-explorer-core 0.9.2

package/dist/lib/single-dashboard/Components/add-item/add-item.component.js

@@ -0,0 +1,212 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { Metadata, RunView } from '@memberjunction/core';
+import { ViewInfo } from '@memberjunction/core-entities';
+import { ResourceData } from '../../../generic/base-resource-component';
+import { SharedService } from '../../../shared/shared.service';
+import * as i0 from "@angular/core";
+import * as i1 from "@angular/common";
+import * as i2 from "@angular/forms";
+import * as i3 from "@progress/kendo-angular-dialog";
+import * as i4 from "@progress/kendo-angular-buttons";
+import * as i5 from "@progress/kendo-angular-indicators";
+import * as i6 from "@progress/kendo-angular-label";
+import * as i7 from "@progress/kendo-angular-dropdowns";
+function AddItemComponent_ng_container_7_kendo_label_4_Template(rf, ctx) { if (rf & 1) {
+    const _r5 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "kendo-label", 14);
+    i0.ɵɵelement(1, "br");
+    i0.ɵɵelementStart(2, "kendo-dropdownlist", 11);
+    i0.ɵɵlistener("valueChange", function AddItemComponent_ng_container_7_kendo_label_4_Template_kendo_dropdownlist_valueChange_2_listener($event) { i0.ɵɵrestoreView(_r5); const ctx_r4 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r4.onViewChange($event)); })("ngModelChange", function AddItemComponent_ng_container_7_kendo_label_4_Template_kendo_dropdownlist_ngModelChange_2_listener($event) { i0.ɵɵrestoreView(_r5); const ctx_r6 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r6.selectedView = $event); });
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("data", ctx_r2.Views)("textField", "Name")("valueField", "ID")("ngModel", ctx_r2.selectedView);
+} }
+function AddItemComponent_ng_container_7_kendo_loader_5_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "kendo-loader", 15);
+} }
+function AddItemComponent_ng_container_7_Template(rf, ctx) { if (rf & 1) {
+    const _r8 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementContainerStart(0);
+    i0.ɵɵelementStart(1, "kendo-label", 10);
+    i0.ɵɵelement(2, "br");
+    i0.ɵɵelementStart(3, "kendo-dropdownlist", 11);
+    i0.ɵɵlistener("valueChange", function AddItemComponent_ng_container_7_Template_kendo_dropdownlist_valueChange_3_listener($event) { i0.ɵɵrestoreView(_r8); const ctx_r7 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r7.onEntityChange($event)); })("ngModelChange", function AddItemComponent_ng_container_7_Template_kendo_dropdownlist_ngModelChange_3_listener($event) { i0.ɵɵrestoreView(_r8); const ctx_r9 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r9.selectedEntity = $event); });
+    i0.ɵɵelementEnd()();
+    i0.ɵɵtemplate(4, AddItemComponent_ng_container_7_kendo_label_4_Template, 3, 4, "kendo-label", 12);
+    i0.ɵɵtemplate(5, AddItemComponent_ng_container_7_kendo_loader_5_Template, 1, 0, "kendo-loader", 13);
+    i0.ɵɵelementContainerEnd();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵadvance(3);
+    i0.ɵɵproperty("data", ctx_r0.Entities)("textField", "Name")("valueField", "ID")("ngModel", ctx_r0.selectedEntity);
+    i0.ɵɵadvance(1);
+    i0.ɵɵproperty("ngIf", ctx_r0.selectedEntity && ctx_r0.Views.length);
+    i0.ɵɵadvance(1);
+    i0.ɵɵproperty("ngIf", ctx_r0.selectedEntity && !ctx_r0.Views.length);
+} }
+function AddItemComponent_ng_container_8_kendo_label_1_Template(rf, ctx) { if (rf & 1) {
+    const _r13 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "kendo-label", 17);
+    i0.ɵɵelement(1, "br");
+    i0.ɵɵelementStart(2, "kendo-dropdownlist", 11);
+    i0.ɵɵlistener("valueChange", function AddItemComponent_ng_container_8_kendo_label_1_Template_kendo_dropdownlist_valueChange_2_listener($event) { i0.ɵɵrestoreView(_r13); const ctx_r12 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r12.onViewChange($event)); })("ngModelChange", function AddItemComponent_ng_container_8_kendo_label_1_Template_kendo_dropdownlist_ngModelChange_2_listener($event) { i0.ɵɵrestoreView(_r13); const ctx_r14 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r14.selectedReport = $event); });
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r10 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("data", ctx_r10.Reports)("textField", "Name")("valueField", "ID")("ngModel", ctx_r10.selectedReport);
+} }
+function AddItemComponent_ng_container_8_kendo_loader_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "kendo-loader", 15);
+} }
+function AddItemComponent_ng_container_8_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementContainerStart(0);
+    i0.ɵɵtemplate(1, AddItemComponent_ng_container_8_kendo_label_1_Template, 3, 4, "kendo-label", 16);
+    i0.ɵɵtemplate(2, AddItemComponent_ng_container_8_kendo_loader_2_Template, 1, 0, "kendo-loader", 13);
+    i0.ɵɵelementContainerEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵadvance(1);
+    i0.ɵɵproperty("ngIf", ctx_r1.Reports.length);
+    i0.ɵɵadvance(1);
+    i0.ɵɵproperty("ngIf", !ctx_r1.Reports.length);
+} }
+export class AddItemComponent {
+    get ResourceTypes() {
+        return SharedService.Instance.ResourceTypes.filter((rt) => rt.Name !== 'Dashboards' && rt.Name !== 'Records');
+    }
+    constructor() {
+        this.onClose = new EventEmitter();
+        this.showloader = false;
+        this.resourceType = null;
+        this.selectedEntity = null;
+        this.selectedView = null;
+        this.selectedReport = null;
+        this.Entities = [];
+        this.Views = [];
+        this.Reports = [];
+        this.md = new Metadata();
+    }
+    ngOnInit() {
+        this.resourceType = this.selectedResource || SharedService.Instance.ViewResourceType;
+        this.onResourceTypeChange(this.resourceType);
+        this.Entities = this.md.Entities;
+    }
+    onResourceTypeChange(event) {
+        return __awaiter(this, void 0, void 0, function* () {
+            this.resourceType = event;
+            this.selectedEntity = null;
+            if (this.resourceType.Name === 'Reports') {
+                this.getReports();
+            }
+        });
+    }
+    getViews() {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (!this.selectedEntity)
+                return;
+            this.showloader = true;
+            this.Views = yield ViewInfo.GetViewsForUser(this.selectedEntity.ID);
+            this.showloader = false;
+        });
+    }
+    getReports() {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (!this.resourceType)
+                return;
+            this.showloader = true;
+            this.selectedReport = null;
+            const rv = new RunView();
+            const reports = yield rv.RunView({ EntityName: this.resourceType.Entity, ExtraFilter: 'UserID=' + this.md.CurrentUser.ID });
+            if (reports.Success) {
+                this.Reports = reports.Results;
+            }
+            this.showloader = false;
+        });
+    }
+    onEntityChange(event) {
+        this.selectedEntity = event;
+        this.selectedView = null;
+        this.selectedReport = null;
+        this.getViews();
+    }
+    onViewChange(event) {
+        this.selectedEntity = event.ID;
+    }
+    addItem() {
+        var _a, _b, _c, _d;
+        if (!this.selectedReport && !this.selectedView)
+            return;
+        const name = ((_a = this.selectedReport) === null || _a === void 0 ? void 0 : _a.Name) || ((_b = this.selectedView) === null || _b === void 0 ? void 0 : _b.Name);
+        const id = ((_c = this.selectedReport) === null || _c === void 0 ? void 0 : _c.ID) || ((_d = this.selectedView) === null || _d === void 0 ? void 0 : _d.ID);
+        const dashboardItem = {
+            title: name ? name : 'New Item - ' + id,
+            col: 1,
+            rowSpan: 3,
+            colSpan: 1,
+            ResourceData: new ResourceData({
+                Name: '',
+                ResourceTypeID: this.resourceType.ID,
+                ResourceRecordID: id,
+                Configuration: {}
+            }),
+        };
+        this.onClose.emit(dashboardItem);
+    }
+    closeDialog() {
+        this.onClose.emit();
+    }
+}
+AddItemComponent.ɵfac = function AddItemComponent_Factory(t) { return new (t || AddItemComponent)(); };
+AddItemComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: AddItemComponent, selectors: [["app-add-item-dialog"]], inputs: { selectedResource: "selectedResource" }, outputs: { onClose: "onClose" }, decls: 14, vars: 12, consts: [[1, "k-overlay"], ["title", "Add Item to Dashboard", 1, "modal-body-wrap", 3, "width", "minHeight", "minWidth", "resizable", "close"], [1, "k-d-flex", "k-flex-col", "resource-wrap"], ["text", "Resource Type"], [3, "data", "textField", "valueField", "subtitle", "ngModel", "valueChange", "ngModelChange"], [1, "user-view-wrap", 3, "ngSwitch"], [4, "ngSwitchCase"], [1, "k-actions", "k-actions-end", "popup-actions"], ["kendoButton", "", "icon", "save", "themeColor", "primary", 3, "click"], ["kendoButton", "", 3, "click"], ["text", "Entity"], [3, "data", "textField", "valueField", "ngModel", "valueChange", "ngModelChange"], ["text", "Views", 4, "ngIf"], ["type", "converging-spinner", 4, "ngIf"], ["text", "Views"], ["type", "converging-spinner"], ["text", "Reports", 4, "ngIf"], ["text", "Reports"]], template: function AddItemComponent_Template(rf, ctx) { if (rf & 1) {
+        i0.ɵɵelement(0, "div", 0);
+        i0.ɵɵelementStart(1, "kendo-window", 1);
+        i0.ɵɵlistener("close", function AddItemComponent_Template_kendo_window_close_1_listener() { return ctx.closeDialog(); });
+        i0.ɵɵelementStart(2, "div", 2)(3, "kendo-label", 3);
+        i0.ɵɵelement(4, "br");
+        i0.ɵɵelementStart(5, "kendo-dropdownlist", 4);
+        i0.ɵɵlistener("valueChange", function AddItemComponent_Template_kendo_dropdownlist_valueChange_5_listener($event) { return ctx.onResourceTypeChange($event); })("ngModelChange", function AddItemComponent_Template_kendo_dropdownlist_ngModelChange_5_listener($event) { return ctx.resourceType = $event; });
+        i0.ɵɵelementEnd()();
+        i0.ɵɵelementStart(6, "div", 5);
+        i0.ɵɵtemplate(7, AddItemComponent_ng_container_7_Template, 6, 6, "ng-container", 6);
+        i0.ɵɵtemplate(8, AddItemComponent_ng_container_8_Template, 3, 2, "ng-container", 6);
+        i0.ɵɵelementEnd()();
+        i0.ɵɵelementStart(9, "div", 7)(10, "button", 8);
+        i0.ɵɵlistener("click", function AddItemComponent_Template_button_click_10_listener() { return ctx.addItem(); });
+        i0.ɵɵtext(11, " Add ");
+        i0.ɵɵelementEnd();
+        i0.ɵɵelementStart(12, "button", 9);
+        i0.ɵɵlistener("click", function AddItemComponent_Template_button_click_12_listener() { return ctx.closeDialog(); });
+        i0.ɵɵtext(13, "Cancel");
+        i0.ɵɵelementEnd()()();
+    } if (rf & 2) {
+        i0.ɵɵadvance(1);
+        i0.ɵɵproperty("width", 500)("minHeight", 300)("minWidth", 400)("resizable", true);
+        i0.ɵɵadvance(4);
+        i0.ɵɵproperty("data", ctx.ResourceTypes)("textField", "DisplayName")("valueField", "ID")("subtitle", "sdfsdf")("ngModel", ctx.resourceType);
+        i0.ɵɵadvance(1);
+        i0.ɵɵproperty("ngSwitch", ctx.resourceType.Entity);
+        i0.ɵɵadvance(1);
+        i0.ɵɵproperty("ngSwitchCase", "User Views");
+        i0.ɵɵadvance(1);
+        i0.ɵɵproperty("ngSwitchCase", "Reports");
+    } }, dependencies: [i1.NgIf, i1.NgSwitch, i1.NgSwitchCase, i2.NgControlStatus, i2.NgModel, i3.WindowComponent, i4.Button, i5.LoaderComponent, i6.LabelComponent, i7.DropDownListComponent], styles: [".popup-actions[_ngcontent-%COMP%] {\r\n    width: 100%;\r\n    padding: 10px;\r\n    border-top: 1px solid rgba(0, 0, 0, 0.08);\r\n  }\r\n    .modal-body-wrap .k-window-content {\r\n    display: flex;\r\n    flex-direction: column;\r\n    height: 100%;\r\n    flex: 1;\r\n    padding: 0;\r\n  }\r\n  .resource-wrap[_ngcontent-%COMP%] {\r\n    flex: 1;\r\n    padding: 24px;\r\n    margin: 16px;\r\n    border-radius: 4px;\r\n    border: 1px solid rgba(0, 0, 0, 0.08);\r\n    box-sizing: border-box;\r\n    display: flex;\r\n    flex-direction: column;\r\n    gap: 20px;\r\n  }\r\n  .user-view-wrap[_ngcontent-%COMP%] {\r\n      display: flex;\r\n      flex-direction: column;\r\n      gap: 20px;\r\n  }\r\n    .resource-wrap .k-label {\r\n    color: #424242;\r\n    font-size: 14px;\r\n    font-style: normal;\r\n    font-weight: 400;\r\n    line-height: 20px;\r\n  }\r\n    .resource-wrap .k-dropdownlist {\r\n    border-radius: 4px;\r\n    border: 1px solid rgba(0, 0, 0, 0.08);\r\n    background: transparent;\r\n    line-height: 32px;\r\n    margin: 0;\r\n  }"] });
+(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(AddItemComponent, [{
+        type: Component,
+        args: [{ selector: 'app-add-item-dialog', template: "<div class=\"k-overlay\"></div>\r\n<kendo-window class=\"modal-body-wrap\" [width]=\"500\" [minHeight]=\"300\" [minWidth]=\"400\" [resizable]=\"true\" (close)=\"closeDialog()\"\r\n    title=\"Add Item to Dashboard\">\r\n    <div class=\"k-d-flex k-flex-col resource-wrap\">\r\n        <kendo-label text=\"Resource Type\">\r\n            <br />\r\n            <kendo-dropdownlist [data]=\"ResourceTypes\" [textField]=\"'DisplayName'\" [valueField]=\"'ID'\"  [subtitle]=\"'sdfsdf'\"\r\n                (valueChange)=\"onResourceTypeChange($event)\" [(ngModel)]=\"resourceType\">\r\n            </kendo-dropdownlist>\r\n        </kendo-label>\r\n        <div [ngSwitch]=\"resourceType.Entity \" class=\"user-view-wrap\">\r\n            <ng-container *ngSwitchCase=\"'User Views'\">\r\n                <kendo-label text=\"Entity\">\r\n                    <br />\r\n                    <kendo-dropdownlist [data]=\"Entities\" [textField]=\"'Name'\" [valueField]=\"'ID'\"\r\n                        (valueChange)=\"onEntityChange($event)\" [(ngModel)]=\"selectedEntity\">\r\n                    </kendo-dropdownlist>\r\n                </kendo-label>\r\n                <kendo-label text=\"Views\" *ngIf=\"selectedEntity && Views.length\">\r\n                    <br />\r\n                    <kendo-dropdownlist [data]=\"Views\" [textField]=\"'Name'\" [valueField]=\"'ID'\"\r\n                        (valueChange)=\"onViewChange($event)\" [(ngModel)]=\"selectedView\">\r\n                    </kendo-dropdownlist>\r\n                </kendo-label>\r\n                <kendo-loader *ngIf=\"selectedEntity && !Views.length\" type=\"converging-spinner\"></kendo-loader>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'Reports'\">\r\n                <kendo-label text=\"Reports\" *ngIf=\"Reports.length\">\r\n                    <br />\r\n                    <kendo-dropdownlist [data]=\"Reports\" [textField]=\"'Name'\" [valueField]=\"'ID'\"\r\n                        (valueChange)=\"onViewChange($event)\" [(ngModel)]=\"selectedReport\">\r\n                    </kendo-dropdownlist>\r\n                </kendo-label>\r\n                <kendo-loader *ngIf=\"!Reports.length\" type=\"converging-spinner\"></kendo-loader>\r\n            </ng-container>\r\n        </div>\r\n    </div>\r\n    <div class=\"k-actions k-actions-end popup-actions\">\r\n        <button kendoButton icon=\"save\" themeColor=\"primary\" (click)=\"addItem()\">\r\n            Add\r\n        </button>\r\n        <button kendoButton (click)=\"closeDialog()\">Cancel</button>\r\n    </div>\r\n</kendo-window>", styles: [".popup-actions {\r\n    width: 100%;\r\n    padding: 10px;\r\n    border-top: 1px solid rgba(0, 0, 0, 0.08);\r\n  }\r\n  ::ng-deep .modal-body-wrap .k-window-content {\r\n    display: flex;\r\n    flex-direction: column;\r\n    height: 100%;\r\n    flex: 1;\r\n    padding: 0;\r\n  }\r\n  .resource-wrap {\r\n    flex: 1;\r\n    padding: 24px;\r\n    margin: 16px;\r\n    border-radius: 4px;\r\n    border: 1px solid rgba(0, 0, 0, 0.08);\r\n    box-sizing: border-box;\r\n    display: flex;\r\n    flex-direction: column;\r\n    gap: 20px;\r\n  }\r\n  .user-view-wrap {\r\n      display: flex;\r\n      flex-direction: column;\r\n      gap: 20px;\r\n  }\r\n  ::ng-deep .resource-wrap .k-label {\r\n    color: #424242;\r\n    font-size: 14px;\r\n    font-style: normal;\r\n    font-weight: 400;\r\n    line-height: 20px;\r\n  }\r\n  ::ng-deep .resource-wrap .k-dropdownlist {\r\n    border-radius: 4px;\r\n    border: 1px solid rgba(0, 0, 0, 0.08);\r\n    background: transparent;\r\n    line-height: 32px;\r\n    margin: 0;\r\n  }\r\n  "] }]
+    }], function () { return []; }, { onClose: [{
+            type: Output
+        }], selectedResource: [{
+            type: Input
+        }] }); })();

package/dist/lib/single-dashboard/Components/edit-dashboard/edit-dashboard.component.d.ts

@@ -0,0 +1,26 @@
+import { EventEmitter } from '@angular/core';
+import { TileLayoutReorderEvent, TileLayoutResizeEvent } from '@progress/kendo-angular-layout';
+import { DashboardConfigDetails, DashboardItem } from '../../single-dashboard.component';
+import * as i0 from "@angular/core";
+export declare class EditDashboardComponent {
+    onSave: EventEmitter<any>;
+    onClose: EventEmitter<any>;
+    triggerAddItem: EventEmitter<any>;
+    editMode: boolean;
+    config: DashboardConfigDetails;
+    items: DashboardItem[];
+    _items: DashboardItem[];
+    itemsChanged: boolean;
+    get ResourceTypes(): any[];
+    resourceType: any;
+    ngOnInit(): Promise<void>;
+    protected CreateDashboardItem(item: any): DashboardItem;
+    removeItem(e: any): void;
+    onReorder(e: TileLayoutReorderEvent): void;
+    onResize(e: TileLayoutResizeEvent): void;
+    closeDialog(event?: any): void;
+    saveChanges(): void;
+    onItemSelect(event: any): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<EditDashboardComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<EditDashboardComponent, "app-edit-dashboard", never, { "editMode": "editMode"; "config": "config"; "items": "items"; }, { "onSave": "onSave"; "onClose": "onClose"; "triggerAddItem": "triggerAddItem"; }, never, never, false, never>;
+}

package/dist/lib/single-dashboard/Components/edit-dashboard/edit-dashboard.component.js

@@ -0,0 +1,169 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { ResourceData } from '../../../generic/base-resource-component';
+import { SharedService } from '../../../shared/shared.service';
+import { DashboardConfigDetails, DashboardItem } from '../../single-dashboard.component';
+import * as i0 from "@angular/core";
+import * as i1 from "@angular/common";
+import * as i2 from "@progress/kendo-angular-dialog";
+import * as i3 from "@progress/kendo-angular-buttons";
+import * as i4 from "@progress/kendo-angular-layout";
+function EditDashboardComponent_kendo_tilelayout_item_9_Template(rf, ctx) { if (rf & 1) {
+    const _r3 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "kendo-tilelayout-item", 15)(1, "kendo-tilelayout-item-header");
+    i0.ɵɵtext(2);
+    i0.ɵɵelementStart(3, "kendo-button", 16);
+    i0.ɵɵlistener("click", function EditDashboardComponent_kendo_tilelayout_item_9_Template_kendo_button_click_3_listener() { const restoredCtx = i0.ɵɵrestoreView(_r3); const item_r1 = restoredCtx.$implicit; const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.removeItem(item_r1)); });
+    i0.ɵɵtext(4, "X");
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelement(5, "kendo-tilelayout-item-body");
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const item_r1 = ctx.$implicit;
+    i0.ɵɵproperty("col", item_r1.col)("colSpan", item_r1.colSpan)("rowSpan", item_r1.rowSpan)("id", item_r1.uniqueId);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate1(" ", item_r1.title, " ");
+} }
+export class EditDashboardComponent {
+    constructor() {
+        this.onSave = new EventEmitter();
+        this.onClose = new EventEmitter();
+        this.triggerAddItem = new EventEmitter();
+        this.editMode = false;
+        this.config = new DashboardConfigDetails();
+        this.items = [];
+        this._items = [];
+        this.itemsChanged = false;
+        this.resourceType = null;
+    }
+    get ResourceTypes() {
+        return SharedService.Instance.ResourceTypes.filter((rt) => rt.Name !== 'Dashboards' && rt.Name !== 'Records');
+    }
+    ngOnInit() {
+        return __awaiter(this, void 0, void 0, function* () {
+            this._items = [];
+            for (const item of this.items) {
+                const dashboardItem = this.CreateDashboardItem(item);
+                this._items.push(dashboardItem);
+            }
+        });
+    }
+    CreateDashboardItem(item) {
+        const dashboardItem = new DashboardItem();
+        if (item) {
+            dashboardItem.title = item.title;
+            dashboardItem.order = item.order ? item.order : 0;
+            dashboardItem.col = item.col;
+            dashboardItem.row = item.row;
+            dashboardItem.rowSpan = item.rowSpan;
+            dashboardItem.colSpan = item.colSpan;
+            dashboardItem.ResourceData = new ResourceData(item.ResourceData);
+        }
+        return dashboardItem;
+    }
+    removeItem(e) {
+        // remove the selected item from the dashboard
+        const index = this._items.indexOf(e);
+        if (index >= 0) {
+            this._items.splice(index, 1);
+            this.itemsChanged = true;
+        }
+    }
+    onReorder(e) {
+        const item = this._items.find(i => i.uniqueId === parseInt(e.item.elem.nativeElement.id));
+        if (item) {
+            // move the item in our config state to the new index
+            if (e.oldIndex !== e.newIndex) {
+                this._items.splice(e.oldIndex, 1);
+                this._items.splice(e.newIndex, 0, item);
+            }
+            //item.order = e.item.order;
+            item.col = e.newCol ? e.newCol : item.col;
+            item.row = e.newRow ? e.newRow : item.row;
+            this.itemsChanged = true;
+        }
+    }
+    onResize(e) {
+        const item = this._items.find(i => i.uniqueId === parseInt(e.item.elem.nativeElement.id));
+        if (item) {
+            item.colSpan = e.newColSpan;
+            item.rowSpan = e.newRowSpan;
+            this.itemsChanged = true;
+        }
+    }
+    closeDialog(event = null) {
+        this.onClose.emit();
+    }
+    saveChanges() {
+        this.onSave.emit({
+            itemsChanged: this.itemsChanged,
+            items: this._items,
+            config: this.config,
+        });
+    }
+    onItemSelect(event) {
+        if (event.ID) {
+            this.triggerAddItem.emit(event);
+        }
+    }
+}
+EditDashboardComponent.ɵfac = function EditDashboardComponent_Factory(t) { return new (t || EditDashboardComponent)(); };
+EditDashboardComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: EditDashboardComponent, selectors: [["app-edit-dashboard"]], inputs: { editMode: "editMode", config: "config", items: "items" }, outputs: { onSave: "onSave", onClose: "onClose", triggerAddItem: "triggerAddItem" }, decls: 18, vars: 13, consts: [[1, "k-overlay"], ["title", "Customize Dashboard", 1, "kendo-window-hide-restore", 3, "width", "minHeight", "minWidth", "resizable", "state", "close"], [1, "k-d-flex", "k-flex-col", "k-justify-content-between", "k-h-full", "custom-dialog-body"], [1, "dialog-content"], [1, "dialog-actions"], ["themeColor", "primary", 1, "k-m-2", 3, "data", "textField", "itemClick"], [1, "k-icon", "k-i-plus"], [3, "columns", "rowHeight", "resizable", "reorderable", "resize", "reorder"], [3, "col", "colSpan", "rowSpan", "id", 4, "ngFor", "ngForOf"], [1, "dialog-footer"], [1, "k-card-footer", "!k-border-none"], [3, "click"], [1, "k-icon", "k-i-close"], [3, "primary", "click"], [1, "k-icon", "k-i-check"], [3, "col", "colSpan", "rowSpan", "id"], [1, "k-float-right", 3, "click"]], template: function EditDashboardComponent_Template(rf, ctx) { if (rf & 1) {
+        i0.ɵɵelement(0, "div", 0);
+        i0.ɵɵelementStart(1, "kendo-window", 1);
+        i0.ɵɵlistener("close", function EditDashboardComponent_Template_kendo_window_close_1_listener($event) { return ctx.closeDialog($event); });
+        i0.ɵɵelementStart(2, "div", 2)(3, "div", 3)(4, "div", 4)(5, "kendo-dropdownbutton", 5);
+        i0.ɵɵlistener("itemClick", function EditDashboardComponent_Template_kendo_dropdownbutton_itemClick_5_listener($event) { return ctx.onItemSelect($event); });
+        i0.ɵɵelement(6, "span", 6);
+        i0.ɵɵtext(7, " Add item ");
+        i0.ɵɵelementEnd()();
+        i0.ɵɵelementStart(8, "kendo-tilelayout", 7);
+        i0.ɵɵlistener("resize", function EditDashboardComponent_Template_kendo_tilelayout_resize_8_listener($event) { return ctx.onResize($event); })("reorder", function EditDashboardComponent_Template_kendo_tilelayout_reorder_8_listener($event) { return ctx.onReorder($event); });
+        i0.ɵɵtemplate(9, EditDashboardComponent_kendo_tilelayout_item_9_Template, 6, 5, "kendo-tilelayout-item", 8);
+        i0.ɵɵelementEnd()();
+        i0.ɵɵelementStart(10, "div", 9)(11, "div", 10)(12, "kendo-button", 11);
+        i0.ɵɵlistener("click", function EditDashboardComponent_Template_kendo_button_click_12_listener($event) { return ctx.closeDialog($event); });
+        i0.ɵɵelement(13, "span", 12);
+        i0.ɵɵtext(14, " Cancel ");
+        i0.ɵɵelementEnd();
+        i0.ɵɵelementStart(15, "kendo-button", 13);
+        i0.ɵɵlistener("click", function EditDashboardComponent_Template_kendo_button_click_15_listener() { return ctx.saveChanges(); });
+        i0.ɵɵelement(16, "span", 14);
+        i0.ɵɵtext(17, " Save ");
+        i0.ɵɵelementEnd()()()()();
+    } if (rf & 2) {
+        i0.ɵɵadvance(1);
+        i0.ɵɵproperty("width", 500)("minHeight", 300)("minWidth", 400)("resizable", true)("state", "maximized");
+        i0.ɵɵadvance(4);
+        i0.ɵɵproperty("data", ctx.ResourceTypes)("textField", "DisplayName");
+        i0.ɵɵadvance(3);
+        i0.ɵɵproperty("columns", ctx.config.columns)("rowHeight", ctx.config.rowHeight)("resizable", true)("reorderable", true);
+        i0.ɵɵadvance(1);
+        i0.ɵɵproperty("ngForOf", ctx._items);
+        i0.ɵɵadvance(6);
+        i0.ɵɵproperty("primary", true);
+    } }, dependencies: [i1.NgForOf, i2.WindowComponent, i3.Button, i3.DropDownButtonComponent, i4.TileLayoutComponent, i4.TileLayoutItemComponent, i4.TileLayoutItemHeaderComponent, i4.TileLayoutItemBodyComponent], styles: [".dialog-content[_ngcontent-%COMP%]   .dialog-actions[_ngcontent-%COMP%] {\r\n    display: flex;\r\n    justify-content: flex-end;\r\n}\r\n.dialog-footer[_ngcontent-%COMP%] {\r\n    display: flex;\r\n    justify-content: flex-end;\r\n    align-items: center;\r\n    width: auto;\r\n    height: 40px;\r\n    border-top: 1px solid rgba(0, 0, 0, 0.08);\r\n    background: #FFF;\r\n    padding: 8px 16px;\r\n}\r\n.custom-dialog-body[_ngcontent-%COMP%] {\r\nflex: 1;\r\n}\r\n.custom-dialog-body[_ngcontent-%COMP%]   .dialog-content[_ngcontent-%COMP%] {\r\n    flex: 1;\r\n    overflow: auto;\r\n    padding: 16px;\r\n    box-sizing: border-box;\r\n}\r\n.dialog-footer[_ngcontent-%COMP%]   .k-card-footer[_ngcontent-%COMP%] {\r\n    display: flex;\r\n    gap: 8px;\r\n    padding: 0;\r\n}\r\n  .kendo-window-hide-restore .k-window-content {\r\n    padding: 0;\r\n}\r\n.custom-dialog-body[_ngcontent-%COMP%]   .dialog-content[_ngcontent-%COMP%]   .k-tilelayout[_ngcontent-%COMP%] {\r\n    background: #fff;\r\n}"] });
+(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(EditDashboardComponent, [{
+        type: Component,
+        args: [{ selector: 'app-edit-dashboard', template: "<div class=\"k-overlay\"></div>\r\n<kendo-window \r\n  class=\"kendo-window-hide-restore\"\r\n  [width]=\"500\" \r\n  [minHeight]=\"300\" \r\n  [minWidth]=\"400\" \r\n  [resizable]=\"true\" \r\n  (close)=\"closeDialog($event)\"\r\n  [state]=\"'maximized'\" \r\n  title=\"Customize Dashboard\">\r\n    <div class=\"k-d-flex k-flex-col k-justify-content-between k-h-full custom-dialog-body\">\r\n      <div class=\"dialog-content \">\r\n        <div class=\"dialog-actions\">\r\n            <kendo-dropdownbutton class=\"k-m-2\" themeColor=\"primary\" [data]=\"ResourceTypes\" [textField]=\"'DisplayName'\" (itemClick)=\"onItemSelect($event)\">\r\n              <span class=\"k-icon k-i-plus\"></span> Add item\r\n            </kendo-dropdownbutton>\r\n        </div>\r\n        <kendo-tilelayout\r\n          [columns]=\"config.columns\"\r\n          [rowHeight]=\"config.rowHeight\"\r\n          [resizable]=\"true\"\r\n          [reorderable]=\"true\"\r\n          (resize)=\"onResize($event)\"\r\n          (reorder)=\"onReorder($event)\"\r\n        >\r\n          <kendo-tilelayout-item *ngFor=\"let item of _items\" [col]=\"item.col\" [colSpan]=\"item.colSpan\" [rowSpan]=\"item.rowSpan\" [id]=\"item.uniqueId\">\r\n            <kendo-tilelayout-item-header>\r\n              {{item.title}}\r\n              <kendo-button class=\"k-float-right\" (click)=\"removeItem(item)\">X</kendo-button>\r\n            </kendo-tilelayout-item-header>\r\n            <kendo-tilelayout-item-body>\r\n              <!-- <div class=\"overlay\"></div> -->\r\n              <!-- <app-resource [Data]=\"item.ResourceData\" [isVisible]=\"false\"></app-resource> -->\r\n            </kendo-tilelayout-item-body>\r\n          </kendo-tilelayout-item>\r\n        </kendo-tilelayout>\r\n        \r\n      </div>\r\n      <div class=\"dialog-footer\">\r\n        <div class=\"k-card-footer !k-border-none\">\r\n          <kendo-button (click)=\"closeDialog($event)\" >\r\n            <span class=\"k-icon k-i-close\"></span>\r\n            Cancel\r\n          </kendo-button>\r\n          <kendo-button (click)=\"saveChanges()\" [primary]=\"true\" >\r\n            <span class=\"k-icon k-i-check\"></span>\r\n            Save\r\n          </kendo-button>\r\n        </div>\r\n      </div>\r\n    </div>\r\n</kendo-window>", styles: [".dialog-content .dialog-actions {\r\n    display: flex;\r\n    justify-content: flex-end;\r\n}\r\n.dialog-footer {\r\n    display: flex;\r\n    justify-content: flex-end;\r\n    align-items: center;\r\n    width: auto;\r\n    height: 40px;\r\n    border-top: 1px solid rgba(0, 0, 0, 0.08);\r\n    background: #FFF;\r\n    padding: 8px 16px;\r\n}\r\n.custom-dialog-body {\r\nflex: 1;\r\n}\r\n.custom-dialog-body .dialog-content {\r\n    flex: 1;\r\n    overflow: auto;\r\n    padding: 16px;\r\n    box-sizing: border-box;\r\n}\r\n.dialog-footer .k-card-footer {\r\n    display: flex;\r\n    gap: 8px;\r\n    padding: 0;\r\n}\r\n::ng-deep .kendo-window-hide-restore .k-window-content {\r\n    padding: 0;\r\n}\r\n.custom-dialog-body .dialog-content .k-tilelayout {\r\n    background: #fff;\r\n}"] }]
+    }], null, { onSave: [{
+            type: Output
+        }], onClose: [{
+            type: Output
+        }], triggerAddItem: [{
+            type: Output
+        }], editMode: [{
+            type: Input
+        }], config: [{
+            type: Input
+        }], items: [{
+            type: Input
+        }] }); })();

package/dist/lib/single-dashboard/single-dashboard.component.d.ts

@@ -0,0 +1,55 @@
+import { EventEmitter, OnInit } from '@angular/core';
+import { ResourceData } from '../generic/base-resource-component';
+import { DashboardEntity, ResourceTypeEntity } from '@memberjunction/core-entities';
+import { SharedService } from '../shared/shared.service';
+import { ResourceContainerComponent } from '../generic/resource-container-component';
+import * as i0 from "@angular/core";
+export declare class SingleDashboardComponent implements OnInit {
+    private sharedService;
+    ResourceData: ResourceData;
+    dashboardSaved: EventEmitter<DashboardEntity>;
+    loadComplete: EventEmitter<any>;
+    loadStarted: EventEmitter<any>;
+    items: DashboardItem[];
+    dashboardEntity: DashboardEntity;
+    config: DashboardConfigDetails;
+    isItemDialogOpened: boolean;
+    isEditDialogOpened: boolean;
+    selectedResource: ResourceTypeEntity | null;
+    private saveChangesSubject;
+    get contentLoading(): boolean;
+    constructor(sharedService: SharedService);
+    ngOnInit(): Promise<void>;
+    protected CreateDashboardItem(item: any): DashboardItem;
+    loadingStarted(resourceComponent: ResourceContainerComponent): void;
+    loadingComplete(resourceComponent: ResourceContainerComponent): void;
+    addItem(resourceType?: any): void;
+    closeDialog(data: any): void;
+    editDashboard(): void;
+    closeDashboardDialog(data?: any): void;
+    saveChanges(data: any): void;
+    SaveDashboard(): Promise<boolean>;
+    dashboardSaveComplete(entity: DashboardEntity): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SingleDashboardComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SingleDashboardComponent, "app-single-dashboard", never, { "ResourceData": "ResourceData"; }, { "dashboardSaved": "dashboardSaved"; "loadComplete": "loadComplete"; "loadStarted": "loadStarted"; }, never, never, false, never>;
+}
+export declare class DashboardConfigDetails {
+    columns: number;
+    rowHeight: number;
+    resizable: boolean;
+    reorderable: boolean;
+}
+export declare class DashboardItem {
+    private static nextUniqueId;
+    private getNextUniqueID;
+    constructor();
+    uniqueId: number;
+    title: string;
+    col: number;
+    row: number;
+    rowSpan: number;
+    colSpan: number;
+    order: number;
+    ResourceData: ResourceData;
+    contentLoading: boolean;
+}