@memberjunction/ng-explorer-core 0.9.2

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

@@ -0,0 +1,266 @@
+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 { Metadata } from '@memberjunction/core';
+import { Subject, debounceTime } from 'rxjs';
+import * as i0 from "@angular/core";
+import * as i1 from "../shared/shared.service";
+function SingleDashboardComponent_app_add_item_dialog_0_Template(rf, ctx) { if (rf & 1) {
+    const _r4 = 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.ɵɵ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();
+    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.ɵɵ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");
+    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, " ");
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("Data", item_r9.ResourceData)("isVisible", true);
+} }
+export class SingleDashboardComponent {
+    get contentLoading() {
+        for (const item of this.items) {
+            if (item.contentLoading) {
+                return true;
+            }
+        }
+        return false;
+    }
+    constructor(sharedService) {
+        this.sharedService = sharedService;
+        this.dashboardSaved = new EventEmitter();
+        this.loadComplete = new EventEmitter();
+        this.loadStarted = new EventEmitter();
+        this.items = [];
+        this.config = new DashboardConfigDetails();
+        this.isItemDialogOpened = false;
+        this.isEditDialogOpened = false;
+        this.saveChangesSubject = new Subject();
+        this.saveChangesSubject
+            .pipe(debounceTime(500))
+            .subscribe(() => {
+            this.SaveDashboard();
+        });
+    }
+    ngOnInit() {
+        return __awaiter(this, void 0, void 0, function* () {
+            // load up the dashboard
+            const d = this.ResourceData;
+            const config = this.ResourceData.Configuration;
+            if (this.ResourceData) {
+                const md = new Metadata();
+                let uiConfig = { items: [] };
+                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
+                    const raw = this.dashboardEntity.UIConfigDetails;
+                    if (raw) {
+                        uiConfig = JSON.parse(raw);
+                        this.config.columns = uiConfig.columns;
+                        this.config.rowHeight = uiConfig.rowHeight;
+                        this.config.resizable = uiConfig.resizable;
+                        this.config.reorderable = uiConfig.reorderable;
+                    }
+                }
+                else {
+                    this.dashboardEntity.NewRecord(); // creating a new dashboard
+                    this.dashboardEntity.UserID = md.CurrentUser.ID;
+                    this.dashboardEntity.Name = 'New Dashboard';
+                    this.config.columns = this.config.columns || this.config.columns;
+                    this.config.rowHeight = this.config.rowHeight || this.config.rowHeight;
+                    this.config.resizable = this.config.resizable || this.config.resizable;
+                    this.config.reorderable = this.config.reorderable || this.config.reorderable;
+                }
+                // now we need to load up the items
+                this.items = [];
+                //const tempItems = uiConfig.items.sort((a: any, b: any) => a.order - b.order);
+                for (const item of uiConfig.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;
+    }
+    loadingStarted(resourceComponent) {
+        // look up the copmonent in the 
+        const item = this.items.find(i => i.ResourceData === resourceComponent.Data);
+        if (item) {
+            item.contentLoading = true;
+            this.loadStarted.emit();
+        }
+    }
+    loadingComplete(resourceComponent) {
+        // look up the copmonent in the 
+        const item = this.items.find(i => i.ResourceData === resourceComponent.Data);
+        if (item) {
+            item.contentLoading = false;
+            if (!this.contentLoading) {
+                this.loadComplete.emit();
+            }
+        }
+    }
+    addItem(resourceType = null) {
+        this.selectedResource = resourceType;
+        this.isItemDialogOpened = true;
+        this.isEditDialogOpened = false;
+    }
+    closeDialog(data) {
+        if (data) {
+            const dashboardItem = this.CreateDashboardItem(data);
+            this.items.push(dashboardItem);
+            this.saveChangesSubject.next(true);
+        }
+        this.selectedResource = null;
+        this.isItemDialogOpened = false;
+    }
+    editDashboard() {
+        this.isEditDialogOpened = true;
+    }
+    closeDashboardDialog(data = null) {
+        this.isEditDialogOpened = false;
+    }
+    saveChanges(data) {
+        if (data.config) {
+            this.config = data.config;
+        }
+        if (data.itemsChanged && data.items) {
+            this.items = data.items;
+            this.sharedService.InvokeManualResize();
+        }
+        this.SaveDashboard();
+        this.closeDashboardDialog();
+    }
+    SaveDashboard() {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (this.dashboardEntity) {
+                const configData = {
+                    columns: this.config.columns,
+                    rowHeight: this.config.rowHeight,
+                    resizable: this.config.resizable,
+                    reorderable: this.config.reorderable,
+                    items: this.items
+                };
+                const configJSON = JSON.stringify(configData);
+                this.dashboardEntity.UIConfigDetails = configJSON;
+                const result = yield this.dashboardEntity.Save();
+                this.dashboardSaved.emit(this.dashboardEntity);
+                return result;
+            }
+            else
+                return false;
+        });
+    }
+    dashboardSaveComplete(entity) {
+        this.dashboardSaved.emit(entity);
+    }
+}
+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) {
+        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.ɵɵ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.ɵɵelementEnd()()();
+    } if (rf & 2) {
+        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(4);
+        i0.ɵɵproperty("columns", ctx.config.columns)("rowHeight", ctx.config.rowHeight)("resizable", false)("reorderable", false);
+        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}"] });
+(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: [{
+            type: Input
+        }], dashboardSaved: [{
+            type: Output
+        }], loadComplete: [{
+            type: Output
+        }], loadStarted: [{
+            type: Output
+        }] }); })();
+export class DashboardConfigDetails {
+    constructor() {
+        this.columns = 4;
+        this.rowHeight = 150;
+        this.resizable = true;
+        this.reorderable = true;
+    }
+}
+export class DashboardItem {
+    getNextUniqueID() {
+        return DashboardItem.nextUniqueId++;
+    }
+    constructor() {
+        this.contentLoading = false;
+        this.uniqueId = this.getNextUniqueID();
+    }
+}
+DashboardItem.nextUniqueId = 1;

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

@@ -0,0 +1,33 @@
+import { OnInit } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
+import { UserViewEntity } from '@memberjunction/core-entities';
+import { ViewPropertiesDialogComponent } from '../user-view-properties/view-properties-dialog.component';
+import { NotificationService } from "@progress/kendo-angular-notification";
+import { SharedService } from '../shared/shared.service';
+import * as i0 from "@angular/core";
+export declare class SingleEntityComponent implements OnInit {
+    private router;
+    private route;
+    private notificationService;
+    private sharedService;
+    constructor(router: Router, route: ActivatedRoute, notificationService: NotificationService, sharedService: SharedService);
+    appName: string;
+    entityName: string;
+    entityFieldsText: string;
+    entityDescription: string;
+    entityViews: UserViewEntity[];
+    selectedView: UserViewEntity | null;
+    deleteDialogOpened: boolean;
+    showloader: boolean;
+    viewPropertiesDialog: ViewPropertiesDialogComponent;
+    ngOnInit(): void;
+    LoadData(entityName?: string): Promise<void>;
+    viewItemClick(info: UserViewEntity): void;
+    createNewView(): void;
+    editView(entity: UserViewEntity): void;
+    handleDeleteView(entity?: UserViewEntity | null): void;
+    deleteView(): Promise<void>;
+    viewPropertiesClosed(args: any): Promise<void>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SingleEntityComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SingleEntityComponent, "app-single-entity", never, {}, {}, never, never, false, never>;
+}

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

@@ -0,0 +1,252 @@
+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, ViewChild } from '@angular/core';
+import { Metadata } from '@memberjunction/core';
+import { ViewInfo } from '@memberjunction/core-entities';
+import { ViewPropertiesDialogComponent } from '../user-view-properties/view-properties-dialog.component';
+import * as i0 from "@angular/core";
+import * as i1 from "@angular/router";
+import * as i2 from "@progress/kendo-angular-notification";
+import * as i3 from "../shared/shared.service";
+import * as i4 from "@angular/common";
+import * as i5 from "@progress/kendo-angular-dialog";
+import * as i6 from "@progress/kendo-angular-buttons";
+import * as i7 from "@progress/kendo-angular-indicators";
+import * as i8 from "@progress/kendo-angular-icons";
+import * as i9 from "@progress/kendo-angular-layout";
+import * as i10 from "../user-view-properties/view-properties-dialog.component";
+function SingleEntityComponent_kendo_loader_12_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "kendo-loader", 10);
+} }
+function SingleEntityComponent_div_13_div_1_Template(rf, ctx) { if (rf & 1) {
+    const _r6 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div")(1, "kendo-card", 13)(2, "kendo-card-header", 14);
+    i0.ɵɵelement(3, "kendo-icon", 15);
+    i0.ɵɵelementStart(4, "div", 16)(5, "button", 17);
+    i0.ɵɵlistener("click", function SingleEntityComponent_div_13_div_1_Template_button_click_5_listener() { const restoredCtx = i0.ɵɵrestoreView(_r6); const entity_r4 = restoredCtx.$implicit; const ctx_r5 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r5.editView(entity_r4)); });
+    i0.ɵɵelement(6, "span", 18);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(7, "button", 17);
+    i0.ɵɵlistener("click", function SingleEntityComponent_div_13_div_1_Template_button_click_7_listener() { const restoredCtx = i0.ɵɵrestoreView(_r6); const entity_r4 = restoredCtx.$implicit; const ctx_r7 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r7.handleDeleteView(entity_r4)); });
+    i0.ɵɵelement(8, "span", 19);
+    i0.ɵɵelementEnd()()();
+    i0.ɵɵelementStart(9, "kendo-card-body", 20);
+    i0.ɵɵlistener("click", function SingleEntityComponent_div_13_div_1_Template_kendo_card_body_click_9_listener() { const restoredCtx = i0.ɵɵrestoreView(_r6); const entity_r4 = restoredCtx.$implicit; const ctx_r8 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r8.viewItemClick(entity_r4)); });
+    i0.ɵɵelementStart(10, "div", 21)(11, "h5", 22);
+    i0.ɵɵtext(12);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(13, "p", 23);
+    i0.ɵɵtext(14);
+    i0.ɵɵelementEnd()()()()();
+} if (rf & 2) {
+    const entity_r4 = ctx.$implicit;
+    i0.ɵɵadvance(12);
+    i0.ɵɵtextInterpolate(entity_r4.Name);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(entity_r4.Description);
+} }
+function SingleEntityComponent_div_13_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 11);
+    i0.ɵɵtemplate(1, SingleEntityComponent_div_13_div_1_Template, 15, 2, "div", 12);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵadvance(1);
+    i0.ɵɵproperty("ngForOf", ctx_r1.entityViews);
+} }
+function SingleEntityComponent_kendo_dialog_14_kendo_loader_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "kendo-loader", 10);
+} }
+function SingleEntityComponent_kendo_dialog_14_Template(rf, ctx) { if (rf & 1) {
+    const _r11 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "kendo-dialog", 24);
+    i0.ɵɵlistener("close", function SingleEntityComponent_kendo_dialog_14_Template_kendo_dialog_close_0_listener() { i0.ɵɵrestoreView(_r11); const ctx_r10 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r10.handleDeleteView()); });
+    i0.ɵɵtemplate(1, SingleEntityComponent_kendo_dialog_14_kendo_loader_1_Template, 1, 0, "kendo-loader", 7);
+    i0.ɵɵelementStart(2, "div")(3, "p", 25);
+    i0.ɵɵtext(4, " Are you sure you want to delete ");
+    i0.ɵɵelementStart(5, "b");
+    i0.ɵɵtext(6);
+    i0.ɵɵelementEnd();
+    i0.ɵɵtext(7, " View? ");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(8, "div", 26)(9, "button", 27);
+    i0.ɵɵlistener("click", function SingleEntityComponent_kendo_dialog_14_Template_button_click_9_listener() { i0.ɵɵrestoreView(_r11); const ctx_r12 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r12.deleteView()); });
+    i0.ɵɵelement(10, "span", 28);
+    i0.ɵɵtext(11, " Yes ");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(12, "button", 29);
+    i0.ɵɵlistener("click", function SingleEntityComponent_kendo_dialog_14_Template_button_click_12_listener() { i0.ɵɵrestoreView(_r11); const ctx_r13 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r13.handleDeleteView()); });
+    i0.ɵɵelement(13, "span", 30);
+    i0.ɵɵtext(14, " No");
+    i0.ɵɵelementEnd()()()();
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext();
+    i0.ɵɵadvance(1);
+    i0.ɵɵproperty("ngIf", ctx_r2.showloader);
+    i0.ɵɵadvance(1);
+    i0.ɵɵclassMap(ctx_r2.showloader ? "disabled-div" : "");
+    i0.ɵɵadvance(4);
+    i0.ɵɵtextInterpolate(ctx_r2.selectedView == null ? null : ctx_r2.selectedView.Name);
+} }
+export class SingleEntityComponent {
+    constructor(router, route, notificationService, sharedService) {
+        this.router = router;
+        this.route = route;
+        this.notificationService = notificationService;
+        this.sharedService = sharedService;
+        this.appName = '';
+        this.entityName = '';
+        this.entityFieldsText = '';
+        this.entityDescription = '';
+        this.entityViews = [];
+        this.selectedView = null;
+        this.deleteDialogOpened = false;
+        this.showloader = false;
+    }
+    ngOnInit() {
+        this.route.paramMap.subscribe((params) => __awaiter(this, void 0, void 0, function* () {
+            const entityName = params.get('entityName');
+            const appName = params.get('appName');
+            if (appName)
+                this.appName = appName;
+            // Perform any necessary actions with the ViewID, such as fetching data
+            if (entityName) {
+                this.entityName = entityName;
+                yield this.LoadData(entityName);
+            }
+        }));
+    }
+    LoadData(entityName = this.entityName) {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (entityName) {
+                this.showloader = true;
+                this.selectedView = null;
+                const md = new Metadata();
+                const entity = md.Entities.find(e => e.Name == entityName);
+                if (entity) {
+                    this.entityDescription = entity.Description;
+                    this.entityViews = (yield ViewInfo.GetViewsForUser(entity.ID));
+                    this.showloader = false;
+                }
+            }
+        });
+    }
+    viewItemClick(info) {
+        if (info) {
+            this.router.navigate(['resource', 'view', info.ID]);
+        }
+    }
+    createNewView() {
+        // launch the dialog
+        this.viewPropertiesDialog.CreateView(this.entityName);
+    }
+    editView(entity) {
+        var _a;
+        this.selectedView = entity;
+        this.viewPropertiesDialog.Open((_a = this.selectedView) === null || _a === void 0 ? void 0 : _a.ID);
+    }
+    handleDeleteView(entity = null) {
+        this.selectedView = entity;
+        this.deleteDialogOpened = !this.deleteDialogOpened;
+    }
+    deleteView() {
+        var _a;
+        return __awaiter(this, void 0, void 0, function* () {
+            if (this.selectedView) {
+                this.showloader = true;
+                const md = new Metadata();
+                const viewObj = yield md.GetEntityObject('User Views');
+                yield viewObj.Load((_a = this.selectedView) === null || _a === void 0 ? void 0 : _a.ID); // load the view to be deleted
+                if (yield viewObj.Delete()) { // delete the view
+                    this.notificationService.show({
+                        content: "View deleted successfully!",
+                        hideAfter: 800,
+                        position: { horizontal: "center", vertical: "top" },
+                        animation: { type: "fade", duration: 400 },
+                        type: { style: "success", icon: true },
+                    });
+                    this.showloader = false;
+                    this.deleteDialogOpened = false;
+                    yield this.LoadData(); // reload the updated data on UI
+                }
+                else {
+                    this.notificationService.show({
+                        content: "Error deleting view!",
+                        hideAfter: 800,
+                        position: { horizontal: "center", vertical: "top" },
+                        animation: { type: "fade", duration: 400 },
+                        type: { style: "error", icon: true },
+                    });
+                }
+            }
+        });
+    }
+    viewPropertiesClosed(args) {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (this.selectedView) {
+                yield this.LoadData(this.entityName);
+                this.viewPropertiesDialog.isDialogOpened = false;
+                this.selectedView = null;
+            }
+            else if (args && args.Saved === true && args.ViewEntity) {
+                const paramsArray = ['/app', this.appName, 'entity', this.entityName, 'view', args.ViewEntity.ID];
+                this.router.navigate(paramsArray);
+            }
+        });
+    }
+}
+SingleEntityComponent.ɵfac = function SingleEntityComponent_Factory(t) { return new (t || SingleEntityComponent)(i0.ɵɵdirectiveInject(i1.Router), i0.ɵɵdirectiveInject(i1.ActivatedRoute), i0.ɵɵdirectiveInject(i2.NotificationService), i0.ɵɵdirectiveInject(i3.SharedService)); };
+SingleEntityComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SingleEntityComponent, selectors: [["app-single-entity"]], viewQuery: function SingleEntityComponent_Query(rf, ctx) { if (rf & 1) {
+        i0.ɵɵviewQuery(ViewPropertiesDialogComponent, 7);
+    } if (rf & 2) {
+        let _t;
+        i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.viewPropertiesDialog = _t.first);
+    } }, decls: 15, vars: 7, consts: [[1, "card-container"], [1, "card-header-entity"], [1, "title-wrap"], [1, "k-icon", "k-i-information"], ["kendoButton", "", "icon", "gear", 3, "click"], [3, "EntityName", "ShowPropertiesButton", "dialogClosed"], [1, "main-area"], ["type", "converging-spinner", 4, "ngIf"], ["class", "card-list k-d-flex k-flex-row k-h-full k-flex-wrap", 4, "ngIf"], ["title", "Delete View", 3, "close", 4, "ngIf"], ["type", "converging-spinner"], [1, "card-list", "k-d-flex", "k-flex-row", "k-h-full", "k-flex-wrap"], [4, "ngFor", "ngForOf"], [1, "card-wrapper"], [1, "k-hstack", "view-card"], ["name", "table", 1, "view-icon"], [1, "btn-wrapper"], ["kendoButton", "", "fillMode", "flat", 3, "click"], [1, "k-icon", "k-i-edit"], [1, "k-icon", "k-i-delete"], [3, "click"], [1, "view-card-content", "k-cursor-pointer"], ["kendoCardTitle", ""], ["kendoCardSubtitle", ""], ["title", "Delete View", 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 SingleEntityComponent_Template(rf, ctx) { if (rf & 1) {
+        i0.ɵɵelementStart(0, "div", 0)(1, "div", 1)(2, "div", 2)(3, "h1");
+        i0.ɵɵtext(4);
+        i0.ɵɵelementEnd();
+        i0.ɵɵelementStart(5, "p");
+        i0.ɵɵelement(6, "span", 3);
+        i0.ɵɵtext(7);
+        i0.ɵɵelementEnd()();
+        i0.ɵɵelementStart(8, "button", 4);
+        i0.ɵɵlistener("click", function SingleEntityComponent_Template_button_click_8_listener() { return ctx.createNewView(); });
+        i0.ɵɵtext(9, "Create New View");
+        i0.ɵɵelementEnd()();
+        i0.ɵɵelementStart(10, "app-view-properties-dialog", 5);
+        i0.ɵɵlistener("dialogClosed", function SingleEntityComponent_Template_app_view_properties_dialog_dialogClosed_10_listener($event) { return ctx.viewPropertiesClosed($event); });
+        i0.ɵɵelementEnd();
+        i0.ɵɵelementStart(11, "div", 6);
+        i0.ɵɵtemplate(12, SingleEntityComponent_kendo_loader_12_Template, 1, 0, "kendo-loader", 7);
+        i0.ɵɵtemplate(13, SingleEntityComponent_div_13_Template, 2, 1, "div", 8);
+        i0.ɵɵelementEnd();
+        i0.ɵɵtemplate(14, SingleEntityComponent_kendo_dialog_14_Template, 15, 4, "kendo-dialog", 9);
+        i0.ɵɵelementEnd();
+    } if (rf & 2) {
+        i0.ɵɵadvance(4);
+        i0.ɵɵtextInterpolate(ctx.entityName);
+        i0.ɵɵadvance(3);
+        i0.ɵɵtextInterpolate1(" ", ctx.entityDescription, "");
+        i0.ɵɵadvance(3);
+        i0.ɵɵproperty("EntityName", ctx.entityName)("ShowPropertiesButton", false);
+        i0.ɵɵadvance(2);
+        i0.ɵɵproperty("ngIf", ctx.showloader);
+        i0.ɵɵadvance(1);
+        i0.ɵɵproperty("ngIf", !ctx.showloader);
+        i0.ɵɵadvance(1);
+        i0.ɵɵproperty("ngIf", ctx.deleteDialogOpened);
+    } }, dependencies: [i4.NgForOf, i4.NgIf, i5.DialogComponent, i6.Button, i7.LoaderComponent, i8.IconComponent, i9.CardComponent, i9.CardHeaderComponent, i9.CardBodyComponent, i9.CardTitleDirective, i9.CardSubtitleDirective, i10.ViewPropertiesDialogComponent], styles: [".list-item[_ngcontent-%COMP%] {\r\n    margin: 4px;\r\n    cursor: pointer;\r\n  }\r\n  \r\n  .view-card[_ngcontent-%COMP%]   .view-icon[_ngcontent-%COMP%] {\r\n    color: #ff6358;\r\n  }\r\n  .card-wrapper[_ngcontent-%COMP%] {\r\n    border: 1px solid rgba(0, 0, 0, 0.08);\r\n    border-radius: 6px;\r\n  }\r\n  .card-wrapper[_ngcontent-%COMP%]   .k-card-body[_ngcontent-%COMP%] {\r\n    background: #fff;\r\n    padding: 12px 20px;\r\n  }\r\n  .card-wrapper[_ngcontent-%COMP%]   .view-card[_ngcontent-%COMP%] {\r\n    overflow: auto;\r\n    display: flex;\r\n    justify-content: space-between;\r\n    align-items: center;\r\n    background: #fafafa;\r\n    padding: 4px 15px;\r\n  }\r\n  .view-card[_ngcontent-%COMP%]   .btn-wrapper[_ngcontent-%COMP%] {\r\n    display: flex;\r\n    align-items: center;\r\n  }\r\n  \r\n  .k-card-body[_ngcontent-%COMP%]   .view-card-content[_ngcontent-%COMP%]   h5[_ngcontent-%COMP%] {\r\n    color: #424242;\r\n    font-size: 16px;\r\n    font-style: normal;\r\n    font-weight: 400;\r\n    line-height: 20px;\r\n    margin-bottom: 0;\r\n    letter-spacing: 0.18px;\r\n  }\r\n  .k-card-body[_ngcontent-%COMP%]   .view-card-content[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\r\n    color: #666;\r\n    font-size: 14px;\r\n    font-style: normal;\r\n    font-weight: 400;\r\n    line-height: 20px;\r\n    height: 24px;\r\n    margin-bottom: 0;\r\n  }\r\n  .card-container[_ngcontent-%COMP%] {\r\n    padding: 0;\r\n    margin: 0;\r\n    box-shadow: none;\r\n  }\r\n  .card-header-entity[_ngcontent-%COMP%] {\r\n    display: flex;\r\n    justify-content: space-between;\r\n    align-items: flex-start;\r\n    padding-bottom: 20px;\r\n    border-bottom: 1px solid rgba(0, 0, 0, 0.08);\r\n  }\r\n  \r\n  .card-header-entity[_ngcontent-%COMP%]   .title-wrap[_ngcontent-%COMP%]   h1[_ngcontent-%COMP%] {\r\n    color: #424242;\r\n    font-size: 28px;\r\n    font-style: normal;\r\n    font-weight: 300;\r\n    line-height: 28px;\r\n    margin-bottom: 15px;\r\n  }\r\n  .card-header-entity[_ngcontent-%COMP%]   .title-wrap[_ngcontent-%COMP%] {\r\n    display: flex;\r\n    flex-direction: column;\r\n  }\r\n  .card-header-entity[_ngcontent-%COMP%]   .title-wrap[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\r\n    margin: 0;\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 8px;\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  .main-area[_ngcontent-%COMP%]   .card-list[_ngcontent-%COMP%] {\r\n    display: flex;\r\n    gap: 20px;\r\n  }", ".main-area[_ngcontent-%COMP%] {\r\n    display: flex;\r\n    height: 100%;\r\n    width: 100%;\r\n    gap: 24px;\r\n    padding: 24px 0;\r\n}\r\n.list-view[_ngcontent-%COMP%] {\r\n    padding: 16px;\r\n    min-width: 300px;\r\n    border-radius: 4px;\r\n    background:  #FAFAFA;\r\n    border: none;\r\n}\r\n  .list-view .k-listview-header,   .list-view .k-listview-footer {\r\n    border: none;\r\n}\r\n  .list-view .k-listview-content {\r\n    border: 1px solid rgba(0, 0, 0, 0.08);\r\n    border-radius: 4px;\r\n    background: #fff;\r\n    padding: 16px;\r\n}\r\n\r\n.header[_ngcontent-%COMP%], .footer[_ngcontent-%COMP%] {\r\n    color: #424242;\r\n    font-size: 16px;\r\n    height: auto;\r\n    margin:0;\r\n}\r\n\r\n.header[_ngcontent-%COMP%] {\r\n    color: #424242;\r\n    margin-bottom: 16px;\r\n    display: flex;\r\n    justify-content: space-between;\r\n    align-items: center;\r\n}\r\n.header[_ngcontent-%COMP%]   .head-tag[_ngcontent-%COMP%] {\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 8px;\r\n    color:  #424242;\r\nfont-size: 16px;\r\nfont-style: normal;\r\nfont-weight: 400;\r\nline-height: 20px;\r\n}\r\n\r\n.header[_ngcontent-%COMP%]   .count[_ngcontent-%COMP%] {\r\n    width: 24px;\r\n    height: 24px;\r\n    min-width: 24px;\r\n    display: flex;\r\n    justify-content: center;\r\n    align-items: center;\r\n    font-size: 10px;\r\n    background: rgba(0, 0, 0, 0.08);\r\n    border-radius: 50%;\r\n}\r\n.footer[_ngcontent-%COMP%] {\r\n    font-size: 14px;\r\n    margin-top: 16px;\r\n}\r\n\r\n.list-item[_ngcontent-%COMP%] {\r\n    color:  #424242;\r\n    font-size: 14px;\r\n    font-style: normal;\r\n    font-weight: 400;\r\n    line-height: 30px;\r\n    cursor: pointer;\r\n    margin: 4px;\r\n}\r\n.card-container[_ngcontent-%COMP%] {\r\n    margin: 0;\r\n    padding: 0;\r\n    box-shadow: none;\r\n}\r\n.card-header-entity[_ngcontent-%COMP%] {\r\n    display: flex;\r\n    justify-content: space-between;\r\n    align-items: flex-start;\r\n    padding-bottom: 20px;\r\n    border-bottom: 1px solid rgba(0, 0, 0, 0.08);\r\n}\r\n.card-header-entity[_ngcontent-%COMP%]   .title-wrap[_ngcontent-%COMP%]   h1[_ngcontent-%COMP%] {\r\n    color: #424242;\r\n    font-size: 28px;\r\n    font-style: normal;\r\n    font-weight: 300;\r\n    line-height: 28px;\r\n    margin-bottom: 15px;\r\n  }\r\n  .card-header-entity[_ngcontent-%COMP%]   .title-wrap[_ngcontent-%COMP%] {\r\n    display: flex;\r\n    flex-direction: column;\r\n  }\r\n  .card-header-entity[_ngcontent-%COMP%]   .title-wrap[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\r\n    margin: 0;\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 8px;\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\r\n \r\n\r\n\r\n   \r\n  .view-card[_ngcontent-%COMP%]   .view-icon[_ngcontent-%COMP%] {\r\n    color: #ff6358;\r\n  }\r\n  .card-wrapper[_ngcontent-%COMP%] {\r\n    border: 1px solid rgba(0, 0, 0, 0.08);\r\n    border-radius: 6px;\r\n  }\r\n  .card-wrapper[_ngcontent-%COMP%]   .k-card-body[_ngcontent-%COMP%] {\r\n    background: #fff;\r\n    padding: 12px 20px;\r\n  }\r\n  .card-wrapper[_ngcontent-%COMP%]   .view-card[_ngcontent-%COMP%] {\r\n    overflow: auto;\r\n    display: flex;\r\n    justify-content: space-between;\r\n    align-items: center;\r\n    background: #fafafa;\r\n    padding: 4px 15px;\r\n  }\r\n  .view-card[_ngcontent-%COMP%]   .btn-wrapper[_ngcontent-%COMP%] {\r\n    display: flex;\r\n    align-items: center;\r\n  }\r\n  \r\n  .k-card-body[_ngcontent-%COMP%]   .view-card-content[_ngcontent-%COMP%]   h5[_ngcontent-%COMP%] {\r\n    color: #424242;\r\n    font-size: 16px;\r\n    font-style: normal;\r\n    font-weight: 400;\r\n    line-height: 20px;\r\n    margin-bottom: 0;\r\n    letter-spacing: 0.18px;\r\n  }\r\n  .k-card-body[_ngcontent-%COMP%]   .view-card-content[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\r\n    color: #666;\r\n    font-size: 14px;\r\n    font-style: normal;\r\n    font-weight: 400;\r\n    line-height: 20px;\r\n    height: 48px;\r\n    margin-bottom: 0;\r\n  }\r\n  .card-container[_ngcontent-%COMP%] {\r\n    padding: 0;\r\n    margin: 0;\r\n    box-shadow: none;\r\n  }\r\n  .card-header-entity[_ngcontent-%COMP%] {\r\n    display: flex;\r\n    justify-content: space-between;\r\n    align-items: flex-start;\r\n    padding-bottom: 20px;\r\n    border-bottom: 1px solid rgba(0, 0, 0, 0.08);\r\n  }\r\n  \r\n  .card-header-entity[_ngcontent-%COMP%]   .title-wrap[_ngcontent-%COMP%]   h1[_ngcontent-%COMP%] {\r\n    color: #424242;\r\n    font-size: 28px;\r\n    font-style: normal;\r\n    font-weight: 300;\r\n    line-height: 28px;\r\n    margin-bottom: 15px;\r\n  }\r\n  .card-header-entity[_ngcontent-%COMP%]   .title-wrap[_ngcontent-%COMP%] {\r\n    display: flex;\r\n    flex-direction: column;\r\n  }\r\n  .card-header-entity[_ngcontent-%COMP%]   .title-wrap[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\r\n    margin: 0;\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 8px;\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  .main-area[_ngcontent-%COMP%]   .card-list[_ngcontent-%COMP%] {\r\n    display: flex;\r\n    gap: 20px;\r\n  }"] });
+(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SingleEntityComponent, [{
+        type: Component,
+        args: [{ selector: 'app-single-entity', template: "<div class=\"card-container\">\r\n  <div class=\"card-header-entity\">\r\n    <div class=\"title-wrap\">\r\n      <h1>{{entityName}}</h1>\r\n      <p> <span class=\"k-icon k-i-information\"></span> {{entityDescription}}</p>\r\n    </div>\r\n    <button kendoButton icon=\"gear\" (click)=\"createNewView()\">Create New View</button>\r\n  </div>\r\n  <app-view-properties-dialog [EntityName]=\"this.entityName\" [ShowPropertiesButton]=\"false\"\r\n    (dialogClosed)=\"viewPropertiesClosed($event)\"></app-view-properties-dialog>\r\n  <div class=\"main-area\">\r\n    <kendo-loader *ngIf=\"showloader\" type=\"converging-spinner\" ></kendo-loader>\r\n    <div class=\"card-list k-d-flex k-flex-row k-h-full k-flex-wrap\" *ngIf=\"!showloader\">\r\n      <div *ngFor=\"let entity of entityViews\">\r\n        <kendo-card class=\"card-wrapper\">\r\n          <kendo-card-header class=\"k-hstack view-card\">\r\n            <kendo-icon name=\"table\" class=\"view-icon\"></kendo-icon>\r\n            <div class=\"btn-wrapper\">\r\n              <button kendoButton fillMode=\"flat\" (click)=\"editView(entity)\">\r\n                <span class=\"k-icon k-i-edit\"></span>\r\n              </button>\r\n              <button kendoButton fillMode=\"flat\" (click)=\"handleDeleteView(entity)\"><span\r\n                  class=\"k-icon k-i-delete\"></span></button>\r\n            </div>\r\n          </kendo-card-header>\r\n\r\n          <kendo-card-body (click)=\"viewItemClick(entity)\">\r\n            <div class=\"view-card-content k-cursor-pointer\">\r\n              <h5 kendoCardTitle>{{ entity.Name }}</h5>\r\n              <p kendoCardSubtitle>{{ entity.Description }}</p>\r\n            </div>\r\n          </kendo-card-body>\r\n        </kendo-card>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <kendo-dialog title=\"Delete View\" *ngIf=\"deleteDialogOpened\" (close)=\"handleDeleteView()\">\r\n    <kendo-loader *ngIf=\"showloader\" type=\"converging-spinner\"></kendo-loader>\r\n    <div [class]=\"showloader ? 'disabled-div' : ''\">\r\n      <p class=\"k-m-7.5 k-text-center\">\r\n        Are you sure you want to delete <b>{{selectedView?.Name}}</b> View?\r\n      </p>\r\n      <div class=\"k-actions k-actions-end popup-actions\">\r\n        <button kendoButton (click)=\"deleteView()\" themeColor=\"primary\">\r\n          <span class=\"k-icon k-i-check\"></span> Yes\r\n        </button>\r\n        <button kendoButton (click)=\"handleDeleteView()\"><span class=\"k-icon k-i-close\"></span> No</button>\r\n      </div>\r\n    </div>\r\n  </kendo-dialog>\r\n</div>", styles: ["\r\n  \r\n  .list-item {\r\n    margin: 4px;\r\n    cursor: pointer;\r\n  }\r\n  \r\n  .view-card .view-icon {\r\n    color: #ff6358;\r\n  }\r\n  .card-wrapper {\r\n    border: 1px solid rgba(0, 0, 0, 0.08);\r\n    border-radius: 6px;\r\n  }\r\n  .card-wrapper .k-card-body {\r\n    background: #fff;\r\n    padding: 12px 20px;\r\n  }\r\n  .card-wrapper .view-card {\r\n    overflow: auto;\r\n    display: flex;\r\n    justify-content: space-between;\r\n    align-items: center;\r\n    background: #fafafa;\r\n    padding: 4px 15px;\r\n  }\r\n  .view-card .btn-wrapper {\r\n    display: flex;\r\n    align-items: center;\r\n  }\r\n  \r\n  .k-card-body .view-card-content h5 {\r\n    color: #424242;\r\n    font-size: 16px;\r\n    font-style: normal;\r\n    font-weight: 400;\r\n    line-height: 20px;\r\n    margin-bottom: 0;\r\n    letter-spacing: 0.18px;\r\n  }\r\n  .k-card-body .view-card-content p {\r\n    color: #666;\r\n    font-size: 14px;\r\n    font-style: normal;\r\n    font-weight: 400;\r\n    line-height: 20px;\r\n    height: 24px;\r\n    margin-bottom: 0;\r\n  }\r\n  .card-container {\r\n    padding: 0;\r\n    margin: 0;\r\n    box-shadow: none;\r\n  }\r\n  .card-header-entity {\r\n    display: flex;\r\n    justify-content: space-between;\r\n    align-items: flex-start;\r\n    padding-bottom: 20px;\r\n    border-bottom: 1px solid rgba(0, 0, 0, 0.08);\r\n  }\r\n  \r\n  .card-header-entity .title-wrap h1 {\r\n    color: #424242;\r\n    font-size: 28px;\r\n    font-style: normal;\r\n    font-weight: 300;\r\n    line-height: 28px;\r\n    margin-bottom: 15px;\r\n  }\r\n  .card-header-entity .title-wrap {\r\n    display: flex;\r\n    flex-direction: column;\r\n  }\r\n  .card-header-entity .title-wrap p {\r\n    margin: 0;\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 8px;\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  .main-area .card-list {\r\n    display: flex;\r\n    gap: 20px;\r\n  }\r\n  ", "\r\n.main-area {\r\n    display: flex;\r\n    height: 100%;\r\n    width: 100%;\r\n    gap: 24px;\r\n    padding: 24px 0;\r\n}\r\n.list-view {\r\n    padding: 16px;\r\n    min-width: 300px;\r\n    border-radius: 4px;\r\n    background:  #FAFAFA;\r\n    border: none;\r\n}\r\n::ng-deep .list-view .k-listview-header, \r\n::ng-deep .list-view .k-listview-footer {\r\n    border: none;\r\n}\r\n::ng-deep .list-view .k-listview-content {\r\n    border: 1px solid rgba(0, 0, 0, 0.08);\r\n    border-radius: 4px;\r\n    background: #fff;\r\n    padding: 16px;\r\n}\r\n\r\n.header,\r\n.footer {\r\n    color: #424242;\r\n    font-size: 16px;\r\n    height: auto;\r\n    margin:0;\r\n}\r\n\r\n.header {\r\n    color: #424242;\r\n    margin-bottom: 16px;\r\n    display: flex;\r\n    justify-content: space-between;\r\n    align-items: center;\r\n}\r\n.header .head-tag {\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 8px;\r\n    color:  #424242;\r\nfont-size: 16px;\r\nfont-style: normal;\r\nfont-weight: 400;\r\nline-height: 20px;\r\n}\r\n\r\n.header .count {\r\n    width: 24px;\r\n    height: 24px;\r\n    min-width: 24px;\r\n    display: flex;\r\n    justify-content: center;\r\n    align-items: center;\r\n    font-size: 10px;\r\n    background: rgba(0, 0, 0, 0.08);\r\n    border-radius: 50%;\r\n}\r\n.footer {\r\n    font-size: 14px;\r\n    margin-top: 16px;\r\n}\r\n\r\n.list-item {\r\n    color:  #424242;\r\n    font-size: 14px;\r\n    font-style: normal;\r\n    font-weight: 400;\r\n    line-height: 30px;\r\n    cursor: pointer;\r\n    margin: 4px;\r\n}\r\n.card-container {\r\n    margin: 0;\r\n    padding: 0;\r\n    box-shadow: none;\r\n}\r\n.card-header-entity {\r\n    display: flex;\r\n    justify-content: space-between;\r\n    align-items: flex-start;\r\n    padding-bottom: 20px;\r\n    border-bottom: 1px solid rgba(0, 0, 0, 0.08);\r\n}\r\n.card-header-entity .title-wrap h1 {\r\n    color: #424242;\r\n    font-size: 28px;\r\n    font-style: normal;\r\n    font-weight: 300;\r\n    line-height: 28px;\r\n    margin-bottom: 15px;\r\n  }\r\n  .card-header-entity .title-wrap {\r\n    display: flex;\r\n    flex-direction: column;\r\n  }\r\n  .card-header-entity .title-wrap p {\r\n    margin: 0;\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 8px;\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\r\n \r\n\r\n\r\n   \r\n  .view-card .view-icon {\r\n    color: #ff6358;\r\n  }\r\n  .card-wrapper {\r\n    border: 1px solid rgba(0, 0, 0, 0.08);\r\n    border-radius: 6px;\r\n  }\r\n  .card-wrapper .k-card-body {\r\n    background: #fff;\r\n    padding: 12px 20px;\r\n  }\r\n  .card-wrapper .view-card {\r\n    overflow: auto;\r\n    display: flex;\r\n    justify-content: space-between;\r\n    align-items: center;\r\n    background: #fafafa;\r\n    padding: 4px 15px;\r\n  }\r\n  .view-card .btn-wrapper {\r\n    display: flex;\r\n    align-items: center;\r\n  }\r\n  \r\n  .k-card-body .view-card-content h5 {\r\n    color: #424242;\r\n    font-size: 16px;\r\n    font-style: normal;\r\n    font-weight: 400;\r\n    line-height: 20px;\r\n    margin-bottom: 0;\r\n    letter-spacing: 0.18px;\r\n  }\r\n  .k-card-body .view-card-content p {\r\n    color: #666;\r\n    font-size: 14px;\r\n    font-style: normal;\r\n    font-weight: 400;\r\n    line-height: 20px;\r\n    height: 48px;\r\n    margin-bottom: 0;\r\n  }\r\n  .card-container {\r\n    padding: 0;\r\n    margin: 0;\r\n    box-shadow: none;\r\n  }\r\n  .card-header-entity {\r\n    display: flex;\r\n    justify-content: space-between;\r\n    align-items: flex-start;\r\n    padding-bottom: 20px;\r\n    border-bottom: 1px solid rgba(0, 0, 0, 0.08);\r\n  }\r\n  \r\n  .card-header-entity .title-wrap h1 {\r\n    color: #424242;\r\n    font-size: 28px;\r\n    font-style: normal;\r\n    font-weight: 300;\r\n    line-height: 28px;\r\n    margin-bottom: 15px;\r\n  }\r\n  .card-header-entity .title-wrap {\r\n    display: flex;\r\n    flex-direction: column;\r\n  }\r\n  .card-header-entity .title-wrap p {\r\n    margin: 0;\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 8px;\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  .main-area .card-list {\r\n    display: flex;\r\n    gap: 20px;\r\n  }\r\n  "] }]
+    }], function () { return [{ type: i1.Router }, { type: i1.ActivatedRoute }, { type: i2.NotificationService }, { type: i3.SharedService }]; }, { viewPropertiesDialog: [{
+            type: ViewChild,
+            args: [ViewPropertiesDialogComponent, { static: true }]
+        }] }); })();

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

@@ -0,0 +1,20 @@
+import { AfterViewInit, EventEmitter, OnInit } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+import { Container } from '@memberjunction/ng-container-directives';
+import * as i0 from "@angular/core";
+export declare class SingleRecordComponent implements OnInit, AfterViewInit {
+    private route;
+    formContainer: Container;
+    recordId: number;
+    entityName: string | null;
+    loadComplete: EventEmitter<any>;
+    constructor(route: ActivatedRoute);
+    appDescription: string;
+    useGenericForm: boolean;
+    loading: boolean;
+    ngOnInit(): void;
+    ngAfterViewInit(): void;
+    LoadForm(recordId: number, entityName: string): Promise<void>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SingleRecordComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SingleRecordComponent, "app-single-record", never, { "recordId": "recordId"; "entityName": "entityName"; }, { "loadComplete": "loadComplete"; }, never, never, false, never>;
+}