@memberjunction/ng-explorer-core 0.9.66 → 0.9.77

package/dist/lib/single-application/single-application.component.js

@@ -8,7 +8,7 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
     });
 };
 import { Component } from '@angular/core';
-import { Metadata, RunView } from '@memberjunction/core';
+import { Metadata } from '@memberjunction/core';
 import * as i0 from "@angular/core";
 import * as i1 from "@angular/router";
 import * as i2 from "../../shared/shared.service";
@@ -48,10 +48,9 @@ export class SingleApplicationComponent {
         this.appName = '';
         this.appDescription = '';
         this.appEntities = [];
-        this.appFavorites = [];
     }
     ngOnInit() {
-        this.route.paramMap.subscribe(params => {
+        this.route.paramMap.subscribe((params) => __awaiter(this, void 0, void 0, function* () {
             const appName = params.get('appName');
             // Perform any necessary actions with the ViewID, such as fetching data
             if (appName) {
@@ -61,27 +60,9 @@ export class SingleApplicationComponent {
                 if (app) {
                     this.appDescription = app.Description;
                     this.appEntities = app.ApplicationEntities;
-                    const rv = new RunView();
-                    rv.RunView({
-                        EntityName: 'User Favorites',
-                        ExtraFilter: `UserID=${md.CurrentUser.ID} AND EntityID IN (${app.ApplicationEntities.map(ae => ae.EntityID).join(',')})`
-                    }).then((favorites) => __awaiter(this, void 0, void 0, function* () {
-                        this.appFavorites = favorites.Results; // set the result in the list and let the below happen after async and it will update via data binding when done
-                        const input = favorites.Results.map((fav) => {
-                            return { EntityName: fav.Entity, PrimaryKeyValue: fav.RecordID };
-                        });
-                        const results = yield md.GetEntityRecordNames(input);
-                        if (results)
-                            results.forEach((result) => {
-                                const fav = favorites.Results.find((f) => f.Entity === result.EntityName && f.RecordID === result.PrimaryKeyValue);
-                                if (fav) {
-                                    fav.RecordName = result.Success ? result.RecordName : fav.Entity + ' ' + fav.RecordID;
-                                }
-                            });
-                    }));
                 }
             }
-        });
+        }));
     }
     entityItemClick(info) {
         if (info) {

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

@@ -154,7 +154,7 @@ export class AddItemComponent {
             title: name ? name : 'New Item - ' + id,
             col: 1,
             rowSpan: 3,
-            colSpan: 1,
+            colSpan: 2,
             ResourceData: new ResourceData({
                 Name: '',
                 ResourceTypeID: this.resourceType.ID,

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

@@ -0,0 +1,13 @@
+import { EventEmitter, OnInit } from '@angular/core';
+import { DashboardItem } from '../../single-dashboard.component';
+import * as i0 from "@angular/core";
+export declare class DeleteItemComponent implements OnInit {
+    onClose: EventEmitter<any>;
+    removeDashboardItem: EventEmitter<any>;
+    dashboardItem: DashboardItem | null;
+    ngOnInit(): void;
+    confirmDeleteItem(): void;
+    closeDialog(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DeleteItemComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DeleteItemComponent, "app-delete-item-dialog", never, { "dashboardItem": "dashboardItem"; }, { "onClose": "onClose"; "removeDashboardItem": "removeDashboardItem"; }, never, never, false, never>;
+}

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

@@ -0,0 +1,59 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import * as i0 from "@angular/core";
+import * as i1 from "@progress/kendo-angular-dialog";
+import * as i2 from "@progress/kendo-angular-buttons";
+export class DeleteItemComponent {
+    constructor() {
+        this.onClose = new EventEmitter();
+        this.removeDashboardItem = new EventEmitter();
+    }
+    ngOnInit() {
+    }
+    confirmDeleteItem() {
+        if (this.dashboardItem) {
+            this.removeDashboardItem.emit(this.dashboardItem);
+        }
+        else {
+            console.log("item is null");
+        }
+        this.onClose.emit();
+    }
+    closeDialog() {
+        this.onClose.emit();
+    }
+}
+DeleteItemComponent.ɵfac = function DeleteItemComponent_Factory(t) { return new (t || DeleteItemComponent)(); };
+DeleteItemComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: DeleteItemComponent, selectors: [["app-delete-item-dialog"]], inputs: { dashboardItem: "dashboardItem" }, outputs: { onClose: "onClose", removeDashboardItem: "removeDashboardItem" }, decls: 13, vars: 1, consts: [[1, "modal-body-wrap", 3, "close"], [1, "k-m-7.5", "k-text-center"], [1, "k-actions", "k-actions-end", "popup-actions"], ["kendoButton", "", "themeColor", "primary", 3, "click"], [1, "k-icon", "k-i-check"], ["kendoButton", "", 3, "click"], [1, "k-icon", "k-i-close"]], template: function DeleteItemComponent_Template(rf, ctx) { if (rf & 1) {
+        i0.ɵɵelementStart(0, "kendo-dialog", 0);
+        i0.ɵɵlistener("close", function DeleteItemComponent_Template_kendo_dialog_close_0_listener() { return ctx.closeDialog(); });
+        i0.ɵɵelementStart(1, "p", 1);
+        i0.ɵɵtext(2, " Are you sure you want to delete ");
+        i0.ɵɵelementStart(3, "b");
+        i0.ɵɵtext(4);
+        i0.ɵɵelementEnd();
+        i0.ɵɵtext(5, "? ");
+        i0.ɵɵelementEnd();
+        i0.ɵɵelementStart(6, "div", 2)(7, "button", 3);
+        i0.ɵɵlistener("click", function DeleteItemComponent_Template_button_click_7_listener() { return ctx.confirmDeleteItem(); });
+        i0.ɵɵelement(8, "span", 4);
+        i0.ɵɵtext(9, " Yes ");
+        i0.ɵɵelementEnd();
+        i0.ɵɵelementStart(10, "button", 5);
+        i0.ɵɵlistener("click", function DeleteItemComponent_Template_button_click_10_listener() { return ctx.closeDialog(); });
+        i0.ɵɵelement(11, "span", 6);
+        i0.ɵɵtext(12, " No");
+        i0.ɵɵelementEnd()()();
+    } if (rf & 2) {
+        i0.ɵɵadvance(4);
+        i0.ɵɵtextInterpolate(ctx.dashboardItem == null ? null : ctx.dashboardItem.title);
+    } }, dependencies: [i1.DialogComponent, i2.Button], 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(DeleteItemComponent, [{
+        type: Component,
+        args: [{ selector: 'app-delete-item-dialog', template: "<kendo-dialog class=\"modal-body-wrap\" (close)=\"closeDialog()\">\r\n    <p class=\"k-m-7.5 k-text-center\">\r\n        Are you sure you want to delete <b>{{dashboardItem?.title}}</b>?\r\n    </p>\r\n    <div class=\"k-actions k-actions-end popup-actions\">\r\n        <button kendoButton (click)=\"confirmDeleteItem()\" themeColor=\"primary\">\r\n            <span class=\"k-icon k-i-check\"></span> Yes\r\n        </button>\r\n        <button kendoButton (click)=\"closeDialog()\"><span class=\"k-icon k-i-close\"></span> No</button>\r\n    </div>\r\n</kendo-dialog>", 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  "] }]
+    }], null, { onClose: [{
+            type: Output
+        }], removeDashboardItem: [{
+            type: Output
+        }], dashboardItem: [{
+            type: Input
+        }] }); })();

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

@@ -1,4 +1,5 @@
-import { EventEmitter, OnInit } from '@angular/core';
+import { ElementRef, EventEmitter, OnInit } from '@angular/core';
+import { TileLayoutReorderEvent, TileLayoutResizeEvent } from "@progress/kendo-angular-layout";
 import { ResourceData } from '../generic/base-resource-component';
 import { DashboardEntity, ResourceTypeEntity } from '@memberjunction/core-entities';
 import { SharedService } from '../../shared/shared.service';
@@ -6,6 +7,7 @@ import { ResourceContainerComponent } from '../generic/resource-container-compon
 import * as i0 from "@angular/core";
 export declare class SingleDashboardComponent implements OnInit {
     private sharedService;
+    dashboardNameInput: ElementRef<HTMLInputElement>;
     ResourceData: ResourceData;
     dashboardSaved: EventEmitter<DashboardEntity>;
     loadComplete: EventEmitter<any>;
@@ -15,7 +17,13 @@ export declare class SingleDashboardComponent implements OnInit {
     config: DashboardConfigDetails;
     isItemDialogOpened: boolean;
     isEditDialogOpened: boolean;
+    isEditDashboardNameDialogOpened: boolean;
+    isDeletingDashboardItem: boolean;
+    allowResize: boolean;
+    allowReorder: boolean;
+    isEditingDashboard: boolean;
     selectedResource: ResourceTypeEntity | null;
+    selectedDashboardItem: DashboardItem | null;
     private saveChangesSubject;
     get contentLoading(): boolean;
     constructor(sharedService: SharedService);
@@ -25,11 +33,23 @@ export declare class SingleDashboardComponent implements OnInit {
     loadingComplete(resourceComponent: ResourceContainerComponent): void;
     addItem(resourceType?: any): void;
     closeDialog(data: any): void;
-    editDashboard(): void;
+    toggleEditDashboard(allowEdit: boolean): void;
+    onClickSaveDashboard(): Promise<void>;
+    onclickCancelChanges(): Promise<void>;
     closeDashboardDialog(data?: any): void;
     saveChanges(data: any): void;
     SaveDashboard(): Promise<boolean>;
     dashboardSaveComplete(entity: DashboardEntity): void;
+    toggleInlineNameEdit(visible: boolean): void;
+    saveDashboardName(): void;
+    cancelNameChange(): void;
+    closeDeleteItemComponent(): void;
+    showConfirmDeleteDashboardItem(item: DashboardItem): void;
+    deleteDashboardItem(item: DashboardItem): Promise<void>;
+    getIsEditingItemBodyStyle(): string;
+    getIsEditingItemHeaderStyle(): string;
+    onReorder(e: TileLayoutReorderEvent): void;
+    onResize(e: TileLayoutResizeEvent): 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>;
 }

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

@@ -7,46 +7,132 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
-import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { Component, EventEmitter, Input, Output, ViewChild } from '@angular/core';
 import { ResourceData } from '../generic/base-resource-component';
 import { Metadata } from '@memberjunction/core';
 import { Subject, debounceTime } from 'rxjs';
 import * as i0 from "@angular/core";
 import * as i1 from "../../shared/shared.service";
+const _c0 = ["dashboardNameInput"];
 function SingleDashboardComponent_app_add_item_dialog_0_Template(rf, ctx) { if (rf & 1) {
-    const _r4 = i0.ɵɵgetCurrentView();
+    const _r11 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "app-add-item-dialog", 14);
-    i0.ɵɵlistener("onClose", function SingleDashboardComponent_app_add_item_dialog_0_Template_app_add_item_dialog_onClose_0_listener($event) { i0.ɵɵrestoreView(_r4); const ctx_r3 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r3.closeDialog($event)); });
+    i0.ɵɵlistener("onClose", function SingleDashboardComponent_app_add_item_dialog_0_Template_app_add_item_dialog_onClose_0_listener($event) { i0.ɵɵrestoreView(_r11); const ctx_r10 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r10.closeDialog($event)); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
     i0.ɵɵproperty("selectedResource", ctx_r0.selectedResource);
 } }
 function SingleDashboardComponent_div_1_Template(rf, ctx) { if (rf & 1) {
-    const _r6 = i0.ɵɵgetCurrentView();
+    const _r13 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "div")(1, "app-edit-dashboard", 15);
-    i0.ɵɵlistener("onClose", function SingleDashboardComponent_div_1_Template_app_edit_dashboard_onClose_1_listener($event) { i0.ɵɵrestoreView(_r6); const ctx_r5 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r5.closeDashboardDialog($event)); })("triggerAddItem", function SingleDashboardComponent_div_1_Template_app_edit_dashboard_triggerAddItem_1_listener($event) { i0.ɵɵrestoreView(_r6); const ctx_r7 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r7.addItem($event)); })("onSave", function SingleDashboardComponent_div_1_Template_app_edit_dashboard_onSave_1_listener($event) { i0.ɵɵrestoreView(_r6); const ctx_r8 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r8.saveChanges($event)); });
+    i0.ɵɵlistener("onClose", function SingleDashboardComponent_div_1_Template_app_edit_dashboard_onClose_1_listener($event) { i0.ɵɵrestoreView(_r13); const ctx_r12 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r12.closeDashboardDialog($event)); })("triggerAddItem", function SingleDashboardComponent_div_1_Template_app_edit_dashboard_triggerAddItem_1_listener($event) { i0.ɵɵrestoreView(_r13); const ctx_r14 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r14.addItem($event)); })("onSave", function SingleDashboardComponent_div_1_Template_app_edit_dashboard_onSave_1_listener($event) { i0.ɵɵrestoreView(_r13); const ctx_r15 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r15.saveChanges($event)); });
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
     i0.ɵɵadvance(1);
     i0.ɵɵproperty("items", ctx_r1.items)("config", ctx_r1.config);
 } }
-function SingleDashboardComponent_kendo_tilelayout_item_17_Template(rf, ctx) { if (rf & 1) {
-    const _r11 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "kendo-tilelayout-item", 16)(1, "kendo-tilelayout-item-header");
+function SingleDashboardComponent_app_delete_item_dialog_2_Template(rf, ctx) { if (rf & 1) {
+    const _r17 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "app-delete-item-dialog", 16);
+    i0.ɵɵlistener("removeDashboardItem", function SingleDashboardComponent_app_delete_item_dialog_2_Template_app_delete_item_dialog_removeDashboardItem_0_listener($event) { i0.ɵɵrestoreView(_r17); const ctx_r16 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r16.deleteDashboardItem($event)); })("onClose", function SingleDashboardComponent_app_delete_item_dialog_2_Template_app_delete_item_dialog_onClose_0_listener() { i0.ɵɵrestoreView(_r17); const ctx_r18 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r18.closeDeleteItemComponent()); });
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("dashboardItem", ctx_r2.selectedDashboardItem);
+} }
+function SingleDashboardComponent_div_6_Template(rf, ctx) { if (rf & 1) {
+    const _r21 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 8)(1, "input", 17, 18);
+    i0.ɵɵlistener("keydown.enter", function SingleDashboardComponent_div_6_Template_input_keydown_enter_1_listener() { i0.ɵɵrestoreView(_r21); const ctx_r20 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r20.saveDashboardName()); });
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "kendo-button", 19);
+    i0.ɵɵlistener("click", function SingleDashboardComponent_div_6_Template_kendo_button_click_3_listener() { i0.ɵɵrestoreView(_r21); const ctx_r22 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r22.saveDashboardName()); });
+    i0.ɵɵelement(4, "span", 20);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(5, "kendo-button", 19);
+    i0.ɵɵlistener("click", function SingleDashboardComponent_div_6_Template_kendo_button_click_5_listener() { i0.ɵɵrestoreView(_r21); const ctx_r23 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r23.cancelNameChange()); });
+    i0.ɵɵelement(6, "span", 21);
+    i0.ɵɵelementEnd()();
+} }
+function SingleDashboardComponent_ng_template_7_Template(rf, ctx) { if (rf & 1) {
+    const _r25 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelement(0, "span", 22);
+    i0.ɵɵelementStart(1, "h3", 19);
+    i0.ɵɵlistener("click", function SingleDashboardComponent_ng_template_7_Template_h3_click_1_listener() { i0.ɵɵrestoreView(_r25); const ctx_r24 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r24.toggleInlineNameEdit(true)); });
     i0.ɵɵtext(2);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "kendo-tilelayout-item-body")(4, "app-resource", 17);
-    i0.ɵɵlistener("ContentLoadingStarted", function SingleDashboardComponent_kendo_tilelayout_item_17_Template_app_resource_ContentLoadingStarted_4_listener($event) { i0.ɵɵrestoreView(_r11); const ctx_r10 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r10.loadingStarted($event)); })("ContentLoadingComplete", function SingleDashboardComponent_kendo_tilelayout_item_17_Template_app_resource_ContentLoadingComplete_4_listener($event) { i0.ɵɵrestoreView(_r11); const ctx_r12 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r12.loadingComplete($event)); });
-    i0.ɵɵelementEnd()()();
 } if (rf & 2) {
-    const item_r9 = ctx.$implicit;
-    i0.ɵɵproperty("col", item_r9.col)("colSpan", item_r9.colSpan)("rowSpan", item_r9.rowSpan)("id", item_r9.uniqueId);
-    i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate1(" ", item_r9.title, " ");
+    const ctx_r5 = i0.ɵɵnextContext();
     i0.ɵɵadvance(2);
-    i0.ɵɵproperty("Data", item_r9.ResourceData)("isVisible", true);
+    i0.ɵɵtextInterpolate(ctx_r5.dashboardEntity.Name);
+} }
+function SingleDashboardComponent_div_10_Template(rf, ctx) { if (rf & 1) {
+    const _r27 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div")(1, "kendo-button", 19);
+    i0.ɵɵlistener("click", function SingleDashboardComponent_div_10_Template_kendo_button_click_1_listener() { i0.ɵɵrestoreView(_r27); const ctx_r26 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r26.onClickSaveDashboard()); });
+    i0.ɵɵelement(2, "span", 23);
+    i0.ɵɵtext(3, " Save ");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(4, "kendo-button", 19);
+    i0.ɵɵlistener("click", function SingleDashboardComponent_div_10_Template_kendo_button_click_4_listener() { i0.ɵɵrestoreView(_r27); const ctx_r28 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r28.onclickCancelChanges()); });
+    i0.ɵɵelement(5, "span", 21);
+    i0.ɵɵtext(6, " Cancel ");
+    i0.ɵɵelementEnd()();
+} }
+function SingleDashboardComponent_ng_template_11_Template(rf, ctx) { if (rf & 1) {
+    const _r30 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "kendo-button", 19);
+    i0.ɵɵlistener("click", function SingleDashboardComponent_ng_template_11_Template_kendo_button_click_0_listener() { i0.ɵɵrestoreView(_r30); const ctx_r29 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r29.addItem()); });
+    i0.ɵɵelement(1, "span", 24);
+    i0.ɵɵtext(2, " Add Item ");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "kendo-button", 25);
+    i0.ɵɵlistener("click", function SingleDashboardComponent_ng_template_11_Template_kendo_button_click_3_listener() { i0.ɵɵrestoreView(_r30); const ctx_r31 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r31.toggleEditDashboard(true)); });
+    i0.ɵɵelement(4, "span", 26);
+    i0.ɵɵtext(5, " Edit Dashboard ");
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    i0.ɵɵadvance(3);
+    i0.ɵɵproperty("primary", true);
+} }
+function SingleDashboardComponent_kendo_tilelayout_item_15_div_3_Template(rf, ctx) { if (rf & 1) {
+    const _r35 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div")(1, "div", 30)(2, "button", 31);
+    i0.ɵɵlistener("click", function SingleDashboardComponent_kendo_tilelayout_item_15_div_3_Template_button_click_2_listener() { i0.ɵɵrestoreView(_r35); const ctx_r34 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r34.toggleEditDashboard(true)); });
+    i0.ɵɵelement(3, "span", 32);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(4, "button", 31);
+    i0.ɵɵlistener("click", function SingleDashboardComponent_kendo_tilelayout_item_15_div_3_Template_button_click_4_listener() { i0.ɵɵrestoreView(_r35); const item_r32 = i0.ɵɵnextContext().$implicit; const ctx_r36 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r36.showConfirmDeleteDashboardItem(item_r32)); });
+    i0.ɵɵelement(5, "span", 33);
+    i0.ɵɵelementEnd()()();
+} }
+const _c1 = function (a1) { return ["dashboard-item-header", a1]; };
+const _c2 = function (a0) { return [a0]; };
+function SingleDashboardComponent_kendo_tilelayout_item_15_Template(rf, ctx) { if (rf & 1) {
+    const _r39 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "kendo-tilelayout-item", 27)(1, "kendo-tilelayout-item-header", 28);
+    i0.ɵɵtext(2);
+    i0.ɵɵtemplate(3, SingleDashboardComponent_kendo_tilelayout_item_15_div_3_Template, 6, 0, "div", 1);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(4, "kendo-tilelayout-item-body", 28)(5, "app-resource", 29);
+    i0.ɵɵlistener("ContentLoadingStarted", function SingleDashboardComponent_kendo_tilelayout_item_15_Template_app_resource_ContentLoadingStarted_5_listener($event) { i0.ɵɵrestoreView(_r39); const ctx_r38 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r38.loadingStarted($event)); })("ContentLoadingComplete", function SingleDashboardComponent_kendo_tilelayout_item_15_Template_app_resource_ContentLoadingComplete_5_listener($event) { i0.ɵɵrestoreView(_r39); const ctx_r40 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r40.loadingComplete($event)); });
+    i0.ɵɵelementEnd()()();
+} if (rf & 2) {
+    const item_r32 = ctx.$implicit;
+    const ctx_r9 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("col", item_r32.col)("colSpan", item_r32.colSpan)("rowSpan", item_r32.rowSpan)("id", item_r32.uniqueId);
+    i0.ɵɵadvance(1);
+    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(10, _c1, ctx_r9.getIsEditingItemHeaderStyle()));
+    i0.ɵɵadvance(1);
+    i0.ɵɵtextInterpolate1(" ", item_r32.title, " ");
+    i0.ɵɵadvance(1);
+    i0.ɵɵproperty("ngIf", !ctx_r9.isEditingDashboard);
+    i0.ɵɵadvance(1);
+    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(12, _c2, ctx_r9.getIsEditingItemBodyStyle()));
+    i0.ɵɵadvance(1);
+    i0.ɵɵproperty("Data", item_r32.ResourceData)("isVisible", true);
 } }
 export class SingleDashboardComponent {
     get contentLoading() {
@@ -66,6 +152,11 @@ export class SingleDashboardComponent {
         this.config = new DashboardConfigDetails();
         this.isItemDialogOpened = false;
         this.isEditDialogOpened = false;
+        this.isEditDashboardNameDialogOpened = false;
+        this.isDeletingDashboardItem = false;
+        this.allowResize = false;
+        this.allowReorder = false;
+        this.isEditingDashboard = false;
         this.saveChangesSubject = new Subject();
         this.saveChangesSubject
             .pipe(debounceTime(500))
@@ -81,7 +172,7 @@ export class SingleDashboardComponent {
             if (this.ResourceData) {
                 const md = new Metadata();
                 let uiConfig = { items: [] };
-                this.dashboardEntity = (yield md.GetEntityObject('Dashboards'));
+                this.dashboardEntity = yield md.GetEntityObject('Dashboards');
                 if (this.ResourceData.ResourceRecordID && this.ResourceData.ResourceRecordID > 0) {
                     yield this.dashboardEntity.Load(this.ResourceData.ResourceRecordID);
                     // now we have loaded and we need to get the UIConfigDetails
@@ -153,13 +244,36 @@ export class SingleDashboardComponent {
         if (data) {
             const dashboardItem = this.CreateDashboardItem(data);
             this.items.push(dashboardItem);
+            console.log(dashboardItem);
             this.saveChangesSubject.next(true);
         }
         this.selectedResource = null;
         this.isItemDialogOpened = false;
     }
-    editDashboard() {
-        this.isEditDialogOpened = true;
+    toggleEditDashboard(allowEdit) {
+        this.allowReorder = allowEdit;
+        this.allowResize = allowEdit;
+        this.isEditingDashboard = allowEdit;
+        this.toggleInlineNameEdit(false);
+    }
+    onClickSaveDashboard() {
+        return __awaiter(this, void 0, void 0, function* () {
+            this.toggleEditDashboard(false);
+            let result = yield this.SaveDashboard();
+            if (result) {
+                this.sharedService.CreateSimpleNotification("Dashboard changes have been saved.", "success");
+                yield this.ngOnInit();
+            }
+            else {
+                this.sharedService.CreateSimpleNotification("An error occured saving the dashboard changes", "error");
+            }
+        });
+    }
+    onclickCancelChanges() {
+        return __awaiter(this, void 0, void 0, function* () {
+            this.toggleEditDashboard(false);
+            yield this.ngOnInit();
+        });
     }
     closeDashboardDialog(data = null) {
         this.isEditDialogOpened = false;
@@ -198,46 +312,122 @@ export class SingleDashboardComponent {
     dashboardSaveComplete(entity) {
         this.dashboardSaved.emit(entity);
     }
+    toggleInlineNameEdit(visible) {
+        var _a, _b;
+        this.isEditDashboardNameDialogOpened = visible;
+        if (this.isEditDashboardNameDialogOpened) {
+            (_b = (_a = this.dashboardNameInput) === null || _a === void 0 ? void 0 : _a.nativeElement) === null || _b === void 0 ? void 0 : _b.focus();
+        }
+    }
+    saveDashboardName() {
+        this.toggleInlineNameEdit(true);
+        const inputValue = this.dashboardNameInput.nativeElement.value;
+        if (inputValue && inputValue.length > 3) {
+            this.dashboardEntity.Name = inputValue;
+            this.SaveDashboard();
+        }
+        else {
+            this.sharedService.CreateSimpleNotification('Invalid dashboard name: Must be at least 3 characters.', 'warning');
+        }
+    }
+    cancelNameChange() {
+        this.toggleInlineNameEdit(false);
+    }
+    closeDeleteItemComponent() {
+        this.selectedDashboardItem = null;
+        this.isDeletingDashboardItem = false;
+    }
+    showConfirmDeleteDashboardItem(item) {
+        this.selectedDashboardItem = item;
+        this.isDeletingDashboardItem = true;
+    }
+    deleteDashboardItem(item) {
+        return __awaiter(this, void 0, void 0, function* () {
+            this.items = this.items.filter(i => i.uniqueId != item.uniqueId);
+            let result = yield this.SaveDashboard();
+            if (result) {
+                this.sharedService.CreateSimpleNotification(`Dashboard item ${item.uniqueId} deleted successfully`, "success");
+            }
+            else {
+                this.sharedService.CreateSimpleNotification(`Unable to delete dashboard item ${item.uniqueId}`, "error");
+            }
+            this.selectedDashboardItem = null;
+            this.isDeletingDashboardItem = false;
+        });
+    }
+    getIsEditingItemBodyStyle() {
+        return this.isEditingDashboard ? "bg-light-grey" : "";
+    }
+    getIsEditingItemHeaderStyle() {
+        return this.isEditingDashboard ? "bg-dark-grey" : "bg-blue";
+    }
+    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;
+        }
+    }
+    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;
+        }
+    }
 }
 SingleDashboardComponent.ɵfac = function SingleDashboardComponent_Factory(t) { return new (t || SingleDashboardComponent)(i0.ɵɵdirectiveInject(i1.SharedService)); };
-SingleDashboardComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SingleDashboardComponent, selectors: [["app-single-dashboard"]], inputs: { ResourceData: "ResourceData" }, outputs: { dashboardSaved: "dashboardSaved", loadComplete: "loadComplete", loadStarted: "loadStarted" }, decls: 18, vars: 9, consts: [[3, "selectedResource", "onClose", 4, "ngIf"], [4, "ngIf"], [1, "dashboard-container"], [1, "main-head-dashboard"], [1, "dashboard-title"], [1, "k-icon", "k-i-star"], [1, "dashboard-header", "k-d-flex", "k-flex-row", "k-justify-content-flex-end"], [3, "click"], [1, "k-icon", "k-i-plus"], [3, "primary", "click"], [1, "k-icon", "k-i-gear"], [1, "tile-resource-container"], [3, "columns", "rowHeight", "resizable", "reorderable"], [3, "col", "colSpan", "rowSpan", "id", 4, "ngFor", "ngForOf"], [3, "selectedResource", "onClose"], [3, "items", "config", "onClose", "triggerAddItem", "onSave"], [3, "col", "colSpan", "rowSpan", "id"], [3, "Data", "isVisible", "ContentLoadingStarted", "ContentLoadingComplete"]], template: function SingleDashboardComponent_Template(rf, ctx) { if (rf & 1) {
+SingleDashboardComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SingleDashboardComponent, selectors: [["app-single-dashboard"]], viewQuery: function SingleDashboardComponent_Query(rf, ctx) { if (rf & 1) {
+        i0.ɵɵviewQuery(_c0, 5);
+    } if (rf & 2) {
+        let _t;
+        i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.dashboardNameInput = _t.first);
+    } }, inputs: { ResourceData: "ResourceData" }, outputs: { dashboardSaved: "dashboardSaved", loadComplete: "loadComplete", loadStarted: "loadStarted" }, decls: 16, vars: 12, consts: [[3, "selectedResource", "onClose", 4, "ngIf"], [4, "ngIf"], [3, "dashboardItem", "removeDashboardItem", "onClose", 4, "ngIf"], [1, "dashboard-container"], [1, "main-head-dashboard"], [1, "dashboard-title"], ["class", "dashboard-header k-d-flex k-flex-row k-justify-content-flex-end", 4, "ngIf", "ngIfElse"], ["dashboard_name_header", ""], [1, "dashboard-header", "k-d-flex", "k-flex-row", "k-justify-content-flex-end"], [4, "ngIf", "ngIfElse"], ["edit_dashboard_buttons", ""], [1, "tile-resource-container"], [3, "columns", "rowHeight", "resizable", "reorderable", "reorder", "resize"], [3, "col", "colSpan", "rowSpan", "id", 4, "ngFor", "ngForOf"], [3, "selectedResource", "onClose"], [3, "items", "config", "onClose", "triggerAddItem", "onSave"], [3, "dashboardItem", "removeDashboardItem", "onClose"], ["type", "text", "placeholder", "Enter name here", "id", "txtDashboardName", 1, "k-textbox", "k-input", "k-input-md", "k-rounded-md", "k-input-solid", 3, "keydown.enter"], ["dashboardNameInput", ""], [3, "click"], [1, "k-i-check", "k-button-icon", "k-icon", "ng-star-inserted"], [1, "k-icon", "k-i-cancel"], [1, "k-icon", "k-i-star"], [1, "k-icon", "k-i-check"], [1, "k-icon", "k-i-plus"], [3, "primary", "click"], [1, "k-icon", "k-i-gear"], [3, "col", "colSpan", "rowSpan", "id"], [3, "ngClass"], [3, "Data", "isVisible", "ContentLoadingStarted", "ContentLoadingComplete"], [1, "btn-wrapper"], ["kendoButton", "", "fillMode", "flat", 3, "click"], [1, "k-icon", "k-i-edit"], [1, "k-icon", "k-i-delete"]], template: function SingleDashboardComponent_Template(rf, ctx) { if (rf & 1) {
         i0.ɵɵtemplate(0, SingleDashboardComponent_app_add_item_dialog_0_Template, 1, 1, "app-add-item-dialog", 0);
         i0.ɵɵtemplate(1, SingleDashboardComponent_div_1_Template, 2, 2, "div", 1);
-        i0.ɵɵelementStart(2, "div", 2)(3, "div", 3)(4, "div", 4);
-        i0.ɵɵelement(5, "span", 5);
-        i0.ɵɵelementStart(6, "h3");
-        i0.ɵɵtext(7);
-        i0.ɵɵelementEnd()();
-        i0.ɵɵelementStart(8, "div", 6)(9, "kendo-button", 7);
-        i0.ɵɵlistener("click", function SingleDashboardComponent_Template_kendo_button_click_9_listener() { return ctx.addItem(); });
-        i0.ɵɵelement(10, "span", 8);
-        i0.ɵɵtext(11, " Add Item ");
+        i0.ɵɵtemplate(2, SingleDashboardComponent_app_delete_item_dialog_2_Template, 1, 1, "app-delete-item-dialog", 2);
+        i0.ɵɵelementStart(3, "div", 3)(4, "div", 4)(5, "div", 5);
+        i0.ɵɵtemplate(6, SingleDashboardComponent_div_6_Template, 7, 0, "div", 6);
+        i0.ɵɵtemplate(7, SingleDashboardComponent_ng_template_7_Template, 3, 1, "ng-template", null, 7, i0.ɵɵtemplateRefExtractor);
         i0.ɵɵelementEnd();
-        i0.ɵɵelementStart(12, "kendo-button", 9);
-        i0.ɵɵlistener("click", function SingleDashboardComponent_Template_kendo_button_click_12_listener() { return ctx.editDashboard(); });
-        i0.ɵɵelement(13, "span", 10);
-        i0.ɵɵtext(14, " Edit Dashboard ");
-        i0.ɵɵelementEnd()()();
-        i0.ɵɵelementStart(15, "div", 11)(16, "kendo-tilelayout", 12);
-        i0.ɵɵtemplate(17, SingleDashboardComponent_kendo_tilelayout_item_17_Template, 5, 7, "kendo-tilelayout-item", 13);
+        i0.ɵɵelementStart(9, "div", 8);
+        i0.ɵɵtemplate(10, SingleDashboardComponent_div_10_Template, 7, 0, "div", 9);
+        i0.ɵɵtemplate(11, SingleDashboardComponent_ng_template_11_Template, 6, 1, "ng-template", null, 10, i0.ɵɵtemplateRefExtractor);
+        i0.ɵɵelementEnd()();
+        i0.ɵɵelementStart(13, "div", 11)(14, "kendo-tilelayout", 12);
+        i0.ɵɵlistener("reorder", function SingleDashboardComponent_Template_kendo_tilelayout_reorder_14_listener($event) { return ctx.onReorder($event); })("resize", function SingleDashboardComponent_Template_kendo_tilelayout_resize_14_listener($event) { return ctx.onResize($event); });
+        i0.ɵɵtemplate(15, SingleDashboardComponent_kendo_tilelayout_item_15_Template, 6, 14, "kendo-tilelayout-item", 13);
         i0.ɵɵelementEnd()()();
     } if (rf & 2) {
+        const _r4 = i0.ɵɵreference(8);
+        const _r7 = i0.ɵɵreference(12);
         i0.ɵɵproperty("ngIf", ctx.isItemDialogOpened);
         i0.ɵɵadvance(1);
         i0.ɵɵproperty("ngIf", ctx.isEditDialogOpened);
-        i0.ɵɵadvance(6);
-        i0.ɵɵtextInterpolate(ctx.ResourceData.Name);
-        i0.ɵɵadvance(5);
-        i0.ɵɵproperty("primary", true);
+        i0.ɵɵadvance(1);
+        i0.ɵɵproperty("ngIf", ctx.isDeletingDashboardItem);
+        i0.ɵɵadvance(4);
+        i0.ɵɵproperty("ngIf", ctx.isEditDashboardNameDialogOpened)("ngIfElse", _r4);
+        i0.ɵɵadvance(4);
+        i0.ɵɵproperty("ngIf", ctx.isEditingDashboard)("ngIfElse", _r7);
         i0.ɵɵadvance(4);
-        i0.ɵɵproperty("columns", ctx.config.columns)("rowHeight", ctx.config.rowHeight)("resizable", false)("reorderable", false);
+        i0.ɵɵproperty("columns", ctx.config.columns)("rowHeight", ctx.config.rowHeight)("resizable", ctx.allowResize)("reorderable", ctx.allowReorder);
         i0.ɵɵadvance(1);
         i0.ɵɵproperty("ngForOf", ctx.items);
-    } }, styles: [".dashboard-title[_ngcontent-%COMP%] {\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 10px;\r\n}\r\n.dashboard-title[_ngcontent-%COMP%]   .k-icon[_ngcontent-%COMP%] {\r\n    color: #ff6358;\r\n    font-size: 25px;\r\n}\r\n.dashboard-title[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\r\ncolor:  #424242;\r\nfont-size: 28px;\r\nfont-style: normal;\r\nfont-weight: 300;\r\nline-height: 28px;\r\n}\r\n.dashboard-header[_ngcontent-%COMP%] {\r\n    display: flex;\r\n    gap: 10px;\r\n    align-items: center;\r\n}\r\n  .dashboard-header .btn-ref .k-button-text {\r\n    display: flex;\r\n    gap: 10px;\r\n}\r\n    .dashboard-header[_ngcontent-%COMP%]   .btn-ref[_ngcontent-%COMP%] {\r\n    border: none;\r\n    background: transparent;\r\n}\r\n.main-head-dashboard[_ngcontent-%COMP%] {\r\n    display: flex;\r\n    justify-content: space-between;\r\n    align-items: center;\r\n    margin-bottom: 20px;\r\n    padding-bottom: 20px;\r\n    border-bottom: 1px solid rgba(0, 0, 0, 0.08);\r\n}\r\n.tile-resource-container[_ngcontent-%COMP%]   .k-tilelayout[_ngcontent-%COMP%] {\r\n    background: #fff;\r\n}"] });
+    } }, styles: [".dashboard-title[_ngcontent-%COMP%] {\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 10px;\r\n}\r\n.dashboard-title[_ngcontent-%COMP%]   .k-icon[_ngcontent-%COMP%] {\r\n    color: #ff6358;\r\n    font-size: 25px;\r\n}\r\n.dashboard-title[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\r\ncolor:  #424242;\r\nfont-size: 28px;\r\nfont-style: normal;\r\nfont-weight: 300;\r\nline-height: 28px;\r\n}\r\n.dashboard-header[_ngcontent-%COMP%] {\r\n    display: flex;\r\n    gap: 10px;\r\n    align-items: center;\r\n}\r\n  .dashboard-header .btn-ref .k-button-text {\r\n    display: flex;\r\n    gap: 10px;\r\n}\r\n    .dashboard-header[_ngcontent-%COMP%]   .btn-ref[_ngcontent-%COMP%] {\r\n    border: none;\r\n    background: transparent;\r\n}\r\n.main-head-dashboard[_ngcontent-%COMP%] {\r\n    display: flex;\r\n    justify-content: space-between;\r\n    align-items: center;\r\n    margin-bottom: 20px;\r\n    padding-bottom: 20px;\r\n    border-bottom: 1px solid rgba(0, 0, 0, 0.08);\r\n}\r\n\r\n.tile-resource-container[_ngcontent-%COMP%]   .k-tilelayout[_ngcontent-%COMP%] {\r\n    background: #fff;\r\n}\r\n\r\n.bg-light-grey[_ngcontent-%COMP%] {\r\n    background-color: lightgray;\r\n}\r\n\r\n.bg-dark-grey[_ngcontent-%COMP%] {\r\n    background-color: darkgray;\r\n}\r\n\r\n.bg-blue[_ngcontent-%COMP%] {\r\n    background-color: #4250AD;\r\n    color: white;\r\n}\r\n\r\n.dashboard-item-header[_ngcontent-%COMP%] {\r\n    display: flex;\r\n    justify-content: space-between;\r\n    align-items: center;\r\n}\r\n\r\n.button-spacing[_ngcontent-%COMP%] {\r\n    margin-right: 8px\r\n}"] });
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SingleDashboardComponent, [{
         type: Component,
-        args: [{ selector: 'app-single-dashboard', template: "<app-add-item-dialog *ngIf=\"isItemDialogOpened\" (onClose)=\"closeDialog($event)\" [selectedResource]=\"selectedResource\"></app-add-item-dialog>\r\n<div *ngIf=\"isEditDialogOpened\">\r\n  <app-edit-dashboard (onClose)=\"closeDashboardDialog($event)\" (triggerAddItem)=\"addItem($event)\" [items]=\"items\" [config]=\"config\" (onSave)=\"saveChanges($event)\"></app-edit-dashboard>\r\n</div>\r\n\r\n\r\n<div class=\"dashboard-container\">\r\n  <div class=\"main-head-dashboard\">\r\n    <div class=\"dashboard-title\">\r\n      <span class=\"k-icon k-i-star\"></span>\r\n      <h3>{{ResourceData.Name}}</h3> \r\n    </div>\r\n    <div class=\"dashboard-header k-d-flex k-flex-row k-justify-content-flex-end\">\r\n      <!-- <kendo-button class=\"btn-ref\" >\r\n        <span class=\"k-icon k-i-reload\"></span> \r\n        Refresh\r\n      </kendo-button> -->\r\n      <kendo-button (click)=\"addItem()\">\r\n        <span class=\"k-icon k-i-plus\"></span>\r\n        Add Item\r\n      </kendo-button>\r\n      <kendo-button (click)=\"editDashboard()\" [primary]=\"true\">\r\n        <span class=\"k-icon k-i-gear\"></span>\r\n        Edit Dashboard\r\n      </kendo-button>\r\n    </div>\r\n  </div>\r\n  <div class=\"tile-resource-container\">\r\n    <kendo-tilelayout\r\n      [columns]=\"config.columns\"\r\n      [rowHeight]=\"config.rowHeight\"\r\n      [resizable]=\"false\"\r\n      [reorderable]=\"false\"\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\" *ngIf=\"editMode\" (click)=\"removeItem(item)\">X</kendo-button> -->\r\n        </kendo-tilelayout-item-header>\r\n        <kendo-tilelayout-item-body>\r\n          <app-resource [Data]=\"item.ResourceData\" [isVisible]=\"true\" (ContentLoadingStarted)=\"loadingStarted($event)\" (ContentLoadingComplete)=\"loadingComplete($event)\"></app-resource>\r\n        </kendo-tilelayout-item-body>\r\n      </kendo-tilelayout-item>\r\n    </kendo-tilelayout>\r\n  </div>\r\n</div>\r\n", styles: [".dashboard-title {\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 10px;\r\n}\r\n.dashboard-title .k-icon {\r\n    color: #ff6358;\r\n    font-size: 25px;\r\n}\r\n.dashboard-title h3 {\r\ncolor:  #424242;\r\nfont-size: 28px;\r\nfont-style: normal;\r\nfont-weight: 300;\r\nline-height: 28px;\r\n}\r\n.dashboard-header {\r\n    display: flex;\r\n    gap: 10px;\r\n    align-items: center;\r\n}\r\n::ng-deep .dashboard-header .btn-ref .k-button-text {\r\n    display: flex;\r\n    gap: 10px;\r\n}\r\n    .dashboard-header .btn-ref {\r\n    border: none;\r\n    background: transparent;\r\n}\r\n.main-head-dashboard {\r\n    display: flex;\r\n    justify-content: space-between;\r\n    align-items: center;\r\n    margin-bottom: 20px;\r\n    padding-bottom: 20px;\r\n    border-bottom: 1px solid rgba(0, 0, 0, 0.08);\r\n}\r\n.tile-resource-container .k-tilelayout {\r\n    background: #fff;\r\n}"] }]
-    }], function () { return [{ type: i1.SharedService }]; }, { ResourceData: [{
+        args: [{ selector: 'app-single-dashboard', template: "<app-add-item-dialog *ngIf=\"isItemDialogOpened\" (onClose)=\"closeDialog($event)\" [selectedResource]=\"selectedResource\"></app-add-item-dialog>\r\n<div *ngIf=\"isEditDialogOpened\">\r\n  <app-edit-dashboard (onClose)=\"closeDashboardDialog($event)\" (triggerAddItem)=\"addItem($event)\" [items]=\"items\" [config]=\"config\" (onSave)=\"saveChanges($event)\"></app-edit-dashboard>\r\n</div>\r\n\r\n<app-delete-item-dialog *ngIf=\"isDeletingDashboardItem\" [dashboardItem]=\"selectedDashboardItem\" (removeDashboardItem)=\"deleteDashboardItem($event)\" (onClose)=\"closeDeleteItemComponent()\"></app-delete-item-dialog>\r\n\r\n<div class=\"dashboard-container\">\r\n  <div class=\"main-head-dashboard\">\r\n    <div class=\"dashboard-title\">\r\n      <div *ngIf=\"isEditDashboardNameDialogOpened; else dashboard_name_header\" class=\"dashboard-header k-d-flex k-flex-row k-justify-content-flex-end\">\r\n        <input class=\"k-textbox k-input k-input-md k-rounded-md k-input-solid\" (keydown.enter)=\"saveDashboardName()\" type=\"text\" placeholder=\"Enter name here\" id=\"txtDashboardName\" #dashboardNameInput>\r\n        <kendo-button (click)=\"saveDashboardName()\">\r\n          <span class=\"k-i-check k-button-icon k-icon ng-star-inserted\"></span>\r\n        </kendo-button>\r\n        <kendo-button (click)=\"cancelNameChange()\" >\r\n          <span class=\"k-icon k-i-cancel\"></span>\r\n        </kendo-button>\r\n      </div>\r\n      <ng-template #dashboard_name_header>\r\n        <span class=\"k-icon k-i-star\"></span>\r\n        <h3 (click)=\"toggleInlineNameEdit(true)\">{{dashboardEntity.Name}}</h3>\r\n      </ng-template>\r\n    </div>\r\n    <div class=\"dashboard-header k-d-flex k-flex-row k-justify-content-flex-end\">\r\n      <div *ngIf=\"isEditingDashboard; else edit_dashboard_buttons\">\r\n        <kendo-button (click)=\"onClickSaveDashboard()\">\r\n          <span class=\"k-icon k-i-check\"></span>\r\n          Save\r\n        </kendo-button>\r\n        <kendo-button (click)=\"onclickCancelChanges()\">\r\n          <span class=\"k-icon k-i-cancel\"></span>\r\n          Cancel\r\n        </kendo-button>\r\n      </div>\r\n      <ng-template #edit_dashboard_buttons>\r\n        <kendo-button (click)=\"addItem()\">\r\n          <span class=\"k-icon k-i-plus\"></span>\r\n          Add Item\r\n        </kendo-button>\r\n        <kendo-button (click)=\"toggleEditDashboard(true)\" [primary]=\"true\">\r\n          <span class=\"k-icon k-i-gear\"></span>\r\n          Edit Dashboard\r\n        </kendo-button>\r\n      </ng-template>\r\n    </div>\r\n  </div>\r\n  <div class=\"tile-resource-container\">\r\n    <kendo-tilelayout\r\n      [columns]=\"config.columns\"\r\n      [rowHeight]=\"config.rowHeight\"\r\n      [resizable]=\"allowResize\"\r\n      [reorderable]=\"allowReorder\"\r\n      (reorder)=\"onReorder($event)\"\r\n      (resize)=\"onResize($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 [ngClass]=\"['dashboard-item-header', getIsEditingItemHeaderStyle()]\">\r\n          {{item.title}}\r\n          <div *ngIf=\"!isEditingDashboard\">\r\n            <div class=\"btn-wrapper\">\r\n              <button kendoButton fillMode=\"flat\" (click)=\"toggleEditDashboard(true)\">\r\n                <span class=\"k-icon k-i-edit\"></span>\r\n              </button>\r\n              <button kendoButton fillMode=\"flat\" (click)=\"showConfirmDeleteDashboardItem(item)\"><span\r\n                  class=\"k-icon k-i-delete\"></span></button>\r\n            </div>\r\n          </div>\r\n        </kendo-tilelayout-item-header>\r\n        <kendo-tilelayout-item-body [ngClass]=\"[getIsEditingItemBodyStyle()]\">\r\n          <app-resource [Data]=\"item.ResourceData\" [isVisible]=\"true\" (ContentLoadingStarted)=\"loadingStarted($event)\" (ContentLoadingComplete)=\"loadingComplete($event)\"></app-resource>\r\n        </kendo-tilelayout-item-body>\r\n      </kendo-tilelayout-item>\r\n    </kendo-tilelayout>\r\n  </div>\r\n</div>\r\n", styles: [".dashboard-title {\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 10px;\r\n}\r\n.dashboard-title .k-icon {\r\n    color: #ff6358;\r\n    font-size: 25px;\r\n}\r\n.dashboard-title h3 {\r\ncolor:  #424242;\r\nfont-size: 28px;\r\nfont-style: normal;\r\nfont-weight: 300;\r\nline-height: 28px;\r\n}\r\n.dashboard-header {\r\n    display: flex;\r\n    gap: 10px;\r\n    align-items: center;\r\n}\r\n::ng-deep .dashboard-header .btn-ref .k-button-text {\r\n    display: flex;\r\n    gap: 10px;\r\n}\r\n    .dashboard-header .btn-ref {\r\n    border: none;\r\n    background: transparent;\r\n}\r\n.main-head-dashboard {\r\n    display: flex;\r\n    justify-content: space-between;\r\n    align-items: center;\r\n    margin-bottom: 20px;\r\n    padding-bottom: 20px;\r\n    border-bottom: 1px solid rgba(0, 0, 0, 0.08);\r\n}\r\n\r\n.tile-resource-container .k-tilelayout {\r\n    background: #fff;\r\n}\r\n\r\n.bg-light-grey {\r\n    background-color: lightgray;\r\n}\r\n\r\n.bg-dark-grey {\r\n    background-color: darkgray;\r\n}\r\n\r\n.bg-blue {\r\n    background-color: #4250AD;\r\n    color: white;\r\n}\r\n\r\n.dashboard-item-header {\r\n    display: flex;\r\n    justify-content: space-between;\r\n    align-items: center;\r\n}\r\n\r\n.button-spacing {\r\n    margin-right: 8px\r\n}"] }]
+    }], function () { return [{ type: i1.SharedService }]; }, { dashboardNameInput: [{
+            type: ViewChild,
+            args: ['dashboardNameInput']
+        }], ResourceData: [{
             type: Input
         }], dashboardSaved: [{
             type: Output