@memberjunction/ng-explorer-core 2.48.0 → 2.49.0

package/dist/lib/single-list-detail/single-list-detail.component.js

@@ -1,12 +1,3 @@
-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, Input } from '@angular/core';
 import { EntityFieldTSType, LogError, LogStatus, Metadata, RunView } from '@memberjunction/core';
 import { Subject, debounceTime } from 'rxjs';
@@ -221,61 +212,64 @@ function SingleListDetailComponent_kendo_dialog_16_Template(rf, ctx) { if (rf &
     i0.ɵɵproperty("disabled", ctx_r2.showDialogLoader);
 } }
 export class SingleListDetailComponent {
+    router;
+    route;
+    sharedService;
+    ListID = "";
+    listRecord = null;
+    sourceEntityInfo = null;
+    showLoader = false;
+    sourceGridData = [];
+    filteredGridData = [];
+    showAddDialog = false;
+    showAddLoader = false;
+    showDialogLoader = false;
+    userViews = null;
+    filterDebounceTime = 250;
+    filterItemsSubject = new Subject();
+    filter = '';
+    userViewsToAdd = [];
+    page = 0;
+    pageSize = 50;
+    gridHeight = 750;
+    sortSettings = [];
+    selectedKeys = [];
+    selectModeEnabled = false;
+    viewColumns = [];
+    visibleColumns = [];
+    totalRowCount = 0;
+    viewExecutionTime = 0;
+    recordsToSave = 0;
+    recordsSaved = 0;
+    fetchingRecordsToSave = false;
+    showAddSingleRecordsDialog = false;
+    fetchingListRecords = false;
+    listRecords = [];
+    selectedListRecords = [];
+    searchFilter = "";
+    filterListrecordsSubject = new Subject();
+    addOptions = [
+        {
+            Text: 'Add From View',
+            Description: 'Add all records of a view to this list',
+            Icon: 'folder',
+            Action: () => {
+                this.toggleAddFromViewDialog(true);
+            }
+        },
+        {
+            Text: 'Add a Record',
+            Description: 'Add a specific record to the list',
+            Icon: 'folder',
+            Action: () => {
+                this.toggleAddRecordsDialog(true);
+            }
+        }
+    ];
     constructor(router, route, sharedService) {
         this.router = router;
         this.route = route;
         this.sharedService = sharedService;
-        this.ListID = "";
-        this.listRecord = null;
-        this.sourceEntityInfo = null;
-        this.showLoader = false;
-        this.sourceGridData = [];
-        this.filteredGridData = [];
-        this.showAddDialog = false;
-        this.showAddLoader = false;
-        this.showDialogLoader = false;
-        this.userViews = null;
-        this.filterDebounceTime = 250;
-        this.filterItemsSubject = new Subject();
-        this.filter = '';
-        this.userViewsToAdd = [];
-        this.page = 0;
-        this.pageSize = 50;
-        this.gridHeight = 750;
-        this.sortSettings = [];
-        this.selectedKeys = [];
-        this.selectModeEnabled = false;
-        this.viewColumns = [];
-        this.visibleColumns = [];
-        this.totalRowCount = 0;
-        this.viewExecutionTime = 0;
-        this.recordsToSave = 0;
-        this.recordsSaved = 0;
-        this.fetchingRecordsToSave = false;
-        this.showAddSingleRecordsDialog = false;
-        this.fetchingListRecords = false;
-        this.listRecords = [];
-        this.selectedListRecords = [];
-        this.searchFilter = "";
-        this.filterListrecordsSubject = new Subject();
-        this.addOptions = [
-            {
-                Text: 'Add From View',
-                Description: 'Add all records of a view to this list',
-                Icon: 'folder',
-                Action: () => {
-                    this.toggleAddFromViewDialog(true);
-                }
-            },
-            {
-                Text: 'Add a Record',
-                Description: 'Add a specific record to the list',
-                Icon: 'folder',
-                Action: () => {
-                    this.toggleAddRecordsDialog(true);
-                }
-            }
-        ];
         this.filterItemsSubject
             .pipe(debounceTime(this.filterDebounceTime))
             .subscribe(() => this.filterItems(this.filter));
@@ -283,61 +277,57 @@ export class SingleListDetailComponent {
             .pipe(debounceTime(this.filterDebounceTime))
             .subscribe(() => this.loadListRecords());
     }
-    ngOnInit() {
-        return __awaiter(this, void 0, void 0, function* () {
-            if (this.ListID) {
-                yield this.loadList(this.ListID);
-            }
-        });
+    async ngOnInit() {
+        if (this.ListID) {
+            await this.loadList(this.ListID);
+        }
     }
-    loadList(listID) {
-        return __awaiter(this, void 0, void 0, function* () {
-            if (!listID) {
-                return;
-            }
-            const startTime = new Date().getTime();
-            this.showLoader = true;
-            const md = new Metadata();
-            const rv = new RunView();
-            this.listRecord = yield md.GetEntityObject("Lists");
-            const loadResult = yield this.listRecord.Load(listID);
-            if (!loadResult) {
-                LogError("Error loading list with ID " + listID, undefined, this.listRecord.LatestResult);
-                this.showLoader = false;
-                return;
-            }
-            this.sourceEntityInfo = md.EntityByID(this.listRecord.EntityID);
-            this.viewColumns = this.sourceEntityInfo.Fields.filter((field) => field.DefaultInView).map((field) => {
-                return {
-                    ID: field.ID,
-                    Name: field.CodeName,
-                    DisplayName: field.DisplayName,
-                    EntityField: field,
-                    hidden: false,
-                    orderIndex: field.Sequence,
-                    width: field.DefaultColumnWidth || 100,
-                };
-            });
-            /*make sure there is an entity field linked*/
-            this.visibleColumns = this.viewColumns.filter(x => x.hidden === false && x.EntityField).sort((a, b) => {
-                const aOrder = a.orderIndex != null ? a.orderIndex : 9999;
-                const bOrder = b.orderIndex != null ? b.orderIndex : 9999;
-                return aOrder - bOrder;
-            });
-            const primaryKeyName = this.sourceEntityInfo.FirstPrimaryKey.Name;
-            const rvResult = yield rv.RunView({
-                EntityName: this.listRecord.Entity,
-                ExtraFilter: `${primaryKeyName} IN (SELECT [RecordID] FROM ${md.ConfigData.MJCoreSchemaName}.[vwListDetails] WHERE ListID = '${this.listRecord.ID}')`
-            }, md.CurrentUser);
-            if (!rvResult.Success) {
-                LogError(`Error loading ${this.listRecord.Entity} records: ${rvResult.ErrorMessage}`);
-                this.showLoader = false;
-                return;
-            }
-            this.sourceGridData = this.filteredGridData = rvResult.Results;
-            this.viewExecutionTime = (new Date().getTime() - startTime) / 1000; // in seconds
+    async loadList(listID) {
+        if (!listID) {
+            return;
+        }
+        const startTime = new Date().getTime();
+        this.showLoader = true;
+        const md = new Metadata();
+        const rv = new RunView();
+        this.listRecord = await md.GetEntityObject("Lists");
+        const loadResult = await this.listRecord.Load(listID);
+        if (!loadResult) {
+            LogError("Error loading list with ID " + listID, undefined, this.listRecord.LatestResult);
             this.showLoader = false;
+            return;
+        }
+        this.sourceEntityInfo = md.EntityByID(this.listRecord.EntityID);
+        this.viewColumns = this.sourceEntityInfo.Fields.filter((field) => field.DefaultInView).map((field) => {
+            return {
+                ID: field.ID,
+                Name: field.CodeName,
+                DisplayName: field.DisplayName,
+                EntityField: field,
+                hidden: false,
+                orderIndex: field.Sequence,
+                width: field.DefaultColumnWidth || 100,
+            };
+        });
+        /*make sure there is an entity field linked*/
+        this.visibleColumns = this.viewColumns.filter(x => x.hidden === false && x.EntityField).sort((a, b) => {
+            const aOrder = a.orderIndex != null ? a.orderIndex : 9999;
+            const bOrder = b.orderIndex != null ? b.orderIndex : 9999;
+            return aOrder - bOrder;
         });
+        const primaryKeyName = this.sourceEntityInfo.FirstPrimaryKey.Name;
+        const rvResult = await rv.RunView({
+            EntityName: this.listRecord.Entity,
+            ExtraFilter: `${primaryKeyName} IN (SELECT [RecordID] FROM ${md.ConfigData.MJCoreSchemaName}.[vwListDetails] WHERE ListID = '${this.listRecord.ID}')`
+        }, md.CurrentUser);
+        if (!rvResult.Success) {
+            LogError(`Error loading ${this.listRecord.Entity} records: ${rvResult.ErrorMessage}`);
+            this.showLoader = false;
+            return;
+        }
+        this.sourceGridData = this.filteredGridData = rvResult.Results;
+        this.viewExecutionTime = (new Date().getTime() - startTime) / 1000; // in seconds
+        this.showLoader = false;
     }
     pageChange(event) {
         this.page = event.skip;
@@ -390,89 +380,83 @@ export class SingleListDetailComponent {
                 return { 'text-align': 'left', 'vertical-align': 'top' };
         }
     }
-    toggleAddFromViewDialog(show) {
-        return __awaiter(this, void 0, void 0, function* () {
-            this.showAddDialog = show;
-            if (show && !this.userViews) {
-                yield this.loadEntityViews();
-            }
-        });
+    async toggleAddFromViewDialog(show) {
+        this.showAddDialog = show;
+        if (show && !this.userViews) {
+            await this.loadEntityViews();
+        }
     }
-    loadEntityViews() {
-        return __awaiter(this, void 0, void 0, function* () {
-            this.showAddLoader = true;
-            if (!this.listRecord || !this.listRecord.Entity) {
-                return;
-            }
-            const rv = new RunView();
-            const md = new Metadata();
-            const runViewResult = yield rv.RunView({
+    async loadEntityViews() {
+        this.showAddLoader = true;
+        if (!this.listRecord || !this.listRecord.Entity) {
+            return;
+        }
+        const rv = new RunView();
+        const md = new Metadata();
+        const runViewResult = await rv.RunView({
+            EntityName: "User Views",
+            ExtraFilter: `UserID = '${md.CurrentUser.ID}' AND EntityID = '${this.listRecord.EntityID}'`,
+            ResultType: 'entity_object'
+        }, md.CurrentUser);
+        if (!runViewResult.Success) {
+            this.showAddLoader = false;
+            LogError(`Error loading ${this.listRecord.Entity} User View records for user ${md.CurrentUser.ID}`);
+            return;
+        }
+        this.userViews = runViewResult.Results;
+        this.showAddLoader = false;
+    }
+    async addTolist() {
+        if (!this.listRecord) {
+            return;
+        }
+        if (!this.listRecord.Entity) {
+            return;
+        }
+        this.showAddLoader = true;
+        this.fetchingRecordsToSave = true;
+        const rv = new RunView();
+        const md = new Metadata();
+        const hashMap = new Map();
+        await Promise.all(this.userViewsToAdd.map(async (userView) => {
+            const runViewResult = await rv.RunView({
                 EntityName: "User Views",
-                ExtraFilter: `UserID = '${md.CurrentUser.ID}' AND EntityID = '${this.listRecord.EntityID}'`,
-                ResultType: 'entity_object'
+                ViewEntity: userView,
+                Fields: ["ID"]
             }, md.CurrentUser);
             if (!runViewResult.Success) {
-                this.showAddLoader = false;
-                LogError(`Error loading ${this.listRecord.Entity} User View records for user ${md.CurrentUser.ID}`);
-                return;
-            }
-            this.userViews = runViewResult.Results;
-            this.showAddLoader = false;
-        });
-    }
-    addTolist() {
-        return __awaiter(this, void 0, void 0, function* () {
-            if (!this.listRecord) {
+                LogError(`Error loading view ${userView.Name} for user ${md.CurrentUser.ID}`);
                 return;
             }
-            if (!this.listRecord.Entity) {
-                return;
+            const records = runViewResult.Results;
+            for (const record of records) {
+                hashMap.set(record.ID, record);
             }
-            this.showAddLoader = true;
-            this.fetchingRecordsToSave = true;
-            const rv = new RunView();
-            const md = new Metadata();
-            const hashMap = new Map();
-            yield Promise.all(this.userViewsToAdd.map((userView) => __awaiter(this, void 0, void 0, function* () {
-                const runViewResult = yield rv.RunView({
-                    EntityName: "User Views",
-                    ViewEntity: userView,
-                    Fields: ["ID"]
-                }, md.CurrentUser);
-                if (!runViewResult.Success) {
-                    LogError(`Error loading view ${userView.Name} for user ${md.CurrentUser.ID}`);
-                    return;
-                }
-                const records = runViewResult.Results;
-                for (const record of records) {
-                    hashMap.set(record.ID, record);
+        }));
+        this.recordsToSave = hashMap.size;
+        this.recordsSaved = 0;
+        this.fetchingRecordsToSave = false;
+        LogStatus(`Adding ${hashMap.size} records to list ${this.listRecord.ID}`);
+        //now add the records to the list
+        const recordIDs = [...hashMap.keys()];
+        const chunkSize = 100;
+        for (let i = 0; i < recordIDs.length; i += chunkSize) {
+            const chunk = recordIDs.slice(i, i + chunkSize);
+            await Promise.all(chunk.map(async (recordID) => {
+                const listDetail = await md.GetEntityObject("List Details");
+                listDetail.ListID = this.listRecord.ID;
+                listDetail.RecordID = recordID.toString();
+                listDetail.ContextCurrentUser = md.CurrentUser;
+                const saveResult = await listDetail.Save();
+                if (!saveResult) {
+                    LogError(`Error adding record ${recordID} to list ${this.listRecord.ID}`, undefined, listDetail.LatestResult);
                 }
-            })));
-            this.recordsToSave = hashMap.size;
-            this.recordsSaved = 0;
-            this.fetchingRecordsToSave = false;
-            LogStatus(`Adding ${hashMap.size} records to list ${this.listRecord.ID}`);
-            //now add the records to the list
-            const recordIDs = [...hashMap.keys()];
-            const chunkSize = 100;
-            for (let i = 0; i < recordIDs.length; i += chunkSize) {
-                const chunk = recordIDs.slice(i, i + chunkSize);
-                yield Promise.all(chunk.map((recordID) => __awaiter(this, void 0, void 0, function* () {
-                    const listDetail = yield md.GetEntityObject("List Details");
-                    listDetail.ListID = this.listRecord.ID;
-                    listDetail.RecordID = recordID.toString();
-                    listDetail.ContextCurrentUser = md.CurrentUser;
-                    const saveResult = yield listDetail.Save();
-                    if (!saveResult) {
-                        LogError(`Error adding record ${recordID} to list ${this.listRecord.ID}`, undefined, listDetail.LatestResult);
-                    }
-                    this.recordsSaved++;
-                })));
-            }
-            this.showAddLoader = false;
-            this.toggleAddFromViewDialog(false);
-            this.loadList(this.listRecord.ID);
-        });
+                this.recordsSaved++;
+            }));
+        }
+        this.showAddLoader = false;
+        this.toggleAddFromViewDialog(false);
+        this.loadList(this.listRecord.ID);
     }
     onListSearchValueChange(Value) {
         this.filter = Value;
@@ -516,114 +500,108 @@ export class SingleListDetailComponent {
         }
         item.Action();
     }
-    toggleAddRecordsDialog(show) {
-        return __awaiter(this, void 0, void 0, function* () {
-            this.showAddSingleRecordsDialog = show;
-            if (show) {
-                this.listRecords = [];
-                this.searchFilter = "";
-                yield this.loadListRecords();
-            }
-        });
+    async toggleAddRecordsDialog(show) {
+        this.showAddSingleRecordsDialog = show;
+        if (show) {
+            this.listRecords = [];
+            this.searchFilter = "";
+            await this.loadListRecords();
+        }
     }
-    loadListRecords() {
-        return __awaiter(this, void 0, void 0, function* () {
-            if (!this.listRecord) {
-                LogError("Error loading list records. List record is null");
-                return;
-            }
-            if (!this.sourceEntityInfo) {
-                LogError("Error loading list records. Source entity info is null");
-                return;
-            }
-            this.fetchingListRecords = true;
-            const primaryKeyName = this.sourceEntityInfo.FirstPrimaryKey.Name;
-            let filter = undefined;
-            const nameField = this.sourceEntityInfo.Fields.find((field) => field.IsNameField);
-            if (nameField && this.searchFilter) {
-                filter = `${nameField.Name} LIKE '%${this.searchFilter}%'`;
-            }
-            const rv = new RunView();
-            const rvResult = yield rv.RunView({
-                EntityName: this.listRecord.Entity,
-                ExtraFilter: filter,
-                MaxRows: 50
-            });
-            if (!rvResult.Success) {
-                LogError(`Error loading list records for list ${this.listRecord.ID}`, undefined, rvResult.ErrorMessage);
-                this.fetchingListRecords = false;
-                return;
-            }
-            this.listRecords = rvResult.Results.filter((record) => {
-                const alreadyExits = this.sourceGridData.some((selectedRecord) => selectedRecord.ID === record[primaryKeyName]);
-                return !alreadyExits;
-            }).map((record) => {
-                let result = { ID: record[primaryKeyName], Name: record[nameField.Name] };
-                return result;
-            });
+    async loadListRecords() {
+        if (!this.listRecord) {
+            LogError("Error loading list records. List record is null");
+            return;
+        }
+        if (!this.sourceEntityInfo) {
+            LogError("Error loading list records. Source entity info is null");
+            return;
+        }
+        this.fetchingListRecords = true;
+        const primaryKeyName = this.sourceEntityInfo.FirstPrimaryKey.Name;
+        let filter = undefined;
+        const nameField = this.sourceEntityInfo.Fields.find((field) => field.IsNameField);
+        if (nameField && this.searchFilter) {
+            filter = `${nameField.Name} LIKE '%${this.searchFilter}%'`;
+        }
+        const rv = new RunView();
+        const rvResult = await rv.RunView({
+            EntityName: this.listRecord.Entity,
+            ExtraFilter: filter,
+            MaxRows: 50
+        });
+        if (!rvResult.Success) {
+            LogError(`Error loading list records for list ${this.listRecord.ID}`, undefined, rvResult.ErrorMessage);
             this.fetchingListRecords = false;
+            return;
+        }
+        this.listRecords = rvResult.Results.filter((record) => {
+            const alreadyExits = this.sourceGridData.some((selectedRecord) => selectedRecord.ID === record[primaryKeyName]);
+            return !alreadyExits;
+        }).map((record) => {
+            let result = { ID: record[primaryKeyName], Name: record[nameField.Name] };
+            return result;
         });
+        this.fetchingListRecords = false;
     }
-    addListRecord(listRecord) {
-        return __awaiter(this, void 0, void 0, function* () {
-            if (!this.listRecord) {
-                LogError("Error adding list record. List record is null");
-                this.sharedService.CreateSimpleNotification("Unable to add record to list");
-                return;
-            }
-            const md = new Metadata();
-            const listEntity = yield md.GetEntityObject("List Details", md.CurrentUser);
-            listEntity.ListID = this.listRecord.ID;
-            listEntity.RecordID = listRecord.ID;
-            const saveResult = yield listEntity.Save();
-            if (!saveResult) {
-                LogError(`Error adding record ${listRecord.ID} to list ${this.listRecord.ID}`, undefined, listEntity.LatestResult);
-                const alreadyExists = listEntity.LatestResult.Message.includes("already exists in List");
-                if (alreadyExists) {
-                    this.sharedService.CreateSimpleNotification("Record already exists in this list", 'error', 2500);
-                    return;
-                }
-                this.sharedService.CreateSimpleNotification("Unable to add record to list", 'error', 2500);
+    async addListRecord(listRecord) {
+        if (!this.listRecord) {
+            LogError("Error adding list record. List record is null");
+            this.sharedService.CreateSimpleNotification("Unable to add record to list");
+            return;
+        }
+        const md = new Metadata();
+        const listEntity = await md.GetEntityObject("List Details", md.CurrentUser);
+        listEntity.ListID = this.listRecord.ID;
+        listEntity.RecordID = listRecord.ID;
+        const saveResult = await listEntity.Save();
+        if (!saveResult) {
+            LogError(`Error adding record ${listRecord.ID} to list ${this.listRecord.ID}`, undefined, listEntity.LatestResult);
+            const alreadyExists = listEntity.LatestResult.Message.includes("already exists in List");
+            if (alreadyExists) {
+                this.sharedService.CreateSimpleNotification("Record already exists in this list", 'error', 2500);
                 return;
             }
-            this.sharedService.CreateSimpleNotification("Unable to add record to list", 'success', 2500);
-        });
+            this.sharedService.CreateSimpleNotification("Unable to add record to list", 'error', 2500);
+            return;
+        }
+        this.sharedService.CreateSimpleNotification("Unable to add record to list", 'success', 2500);
     }
+    static ɵfac = function SingleListDetailComponent_Factory(t) { return new (t || SingleListDetailComponent)(i0.ɵɵdirectiveInject(i1.Router), i0.ɵɵdirectiveInject(i1.ActivatedRoute), i0.ɵɵdirectiveInject(i2.SharedService)); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SingleListDetailComponent, selectors: [["mj-list-detail"]], inputs: { ListID: "ListID" }, decls: 17, vars: 7, consts: [["searchInput", ""], [1, "app-container"], [1, "flex-display-row-header"], ["textField", "Text", "themeColor", "info", 1, "add-btn", 3, "itemClick", "data"], [1, "fa-solid", "fa-plus"], [1, "title-wrapper"], [1, "search"], ["type", "text", "placeholder", "Search in List", "size", "large", "rounded", "large", "fillMode", "solid", 3, "keyup", "clearButton"], ["kendoTextBoxPrefixTemplate", "", 3, "showSeparator"], ["type", "converging-spinner"], [3, "data"], ["class", "dialog-wrapper", "title", "Select Views to Add", 3, "minWidth", "width", "height", "close", 4, "ngIf"], ["class", "dialog-wrapper", 3, "title", "minWidth", "width", "height", "close", 4, "ngIf"], [1, "fa-solid", "fa-magnifying-glass", "margin-left-small"], [3, "width", "headerStyle", "style", 4, "ngIf"], [3, "field", "title", "width", "editable", "editor", "headerStyle", "style", 4, "ngFor", "ngForOf"], [3, "width", "headerStyle"], [3, "field", "title", "width", "editable", "editor", "headerStyle"], [4, "ngIf"], ["kendoGridFooterTemplate", ""], [2, "font-size", "smaller", "font-weight", "normal"], ["title", "Select Views to Add", 1, "dialog-wrapper", 3, "close", "minWidth", "width", "height"], [1, "popup-actions-btn"], ["kendoButton", "", "themeColor", "info", 1, "cancel-btn", 3, "click", "disabled"], ["kendoButton", "", "fillMode", "outline", "themeColor", "info", 1, "yes-btn", 3, "click", "disabled"], [3, "min", "max", "value", "indeterminate"], [1, "search-header"], ["id", "listSearch", "placeholder", "Search Views...", "kendoTextBox", "", 1, "search-bar", 3, "clearButton"], [1, "overflow-y-scroll"], [1, "list-item"], [1, "list-text", 3, "ngClass"], ["kendoButton", "", 1, "btn-no-border", "btn-selected"], ["kendoButton", "", 1, "btn-no-border"], ["kendoButton", "", 1, "btn-no-border", "btn-selected", 3, "click"], [1, "fa-solid", "fa-minus"], ["kendoButton", "", 1, "btn-no-border", 3, "click"], [1, "btn-margin-right"], [1, "dialog-wrapper", 3, "close", "title", "minWidth", "width", "height"], ["id", "listRecordSearch", "kendoTextBox", "", 1, "search-bar", 3, "valueChange", "placeholder", "clearButton"], [1, "list-text"]], template: function SingleListDetailComponent_Template(rf, ctx) { if (rf & 1) {
+            const _r1 = i0.ɵɵgetCurrentView();
+            i0.ɵɵelementStart(0, "div", 1)(1, "div", 2)(2, "h1");
+            i0.ɵɵtext(3);
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(4, "kendo-dropdownbutton", 3);
+            i0.ɵɵlistener("itemClick", function SingleListDetailComponent_Template_kendo_dropdownbutton_itemClick_4_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onDropdownItemClick($event)); });
+            i0.ɵɵelement(5, "span", 4);
+            i0.ɵɵtext(6, " Add to List ");
+            i0.ɵɵelementEnd()();
+            i0.ɵɵelementStart(7, "div")(8, "div", 5)(9, "div", 6)(10, "kendo-textbox", 7, 0);
+            i0.ɵɵlistener("keyup", function SingleListDetailComponent_Template_kendo_textbox_keyup_10_listener() { i0.ɵɵrestoreView(_r1); const searchInput_r2 = i0.ɵɵreference(11); return i0.ɵɵresetView(ctx.onListSearchValueChange(searchInput_r2.value)); });
+            i0.ɵɵtemplate(12, SingleListDetailComponent_ng_template_12_Template, 1, 0, "ng-template", 8);
+            i0.ɵɵelementEnd()()()();
+            i0.ɵɵtemplate(13, SingleListDetailComponent_Conditional_13_Template, 1, 0, "kendo-loader", 9)(14, SingleListDetailComponent_Conditional_14_Template, 3, 3, "kendo-grid", 10);
+            i0.ɵɵelementEnd();
+            i0.ɵɵtemplate(15, SingleListDetailComponent_kendo_dialog_15_Template, 8, 6, "kendo-dialog", 11)(16, SingleListDetailComponent_kendo_dialog_16_Template, 6, 6, "kendo-dialog", 12);
+        } if (rf & 2) {
+            i0.ɵɵadvance(3);
+            i0.ɵɵtextInterpolate(ctx.listRecord ? ctx.listRecord.Name : "List");
+            i0.ɵɵadvance();
+            i0.ɵɵproperty("data", ctx.addOptions);
+            i0.ɵɵadvance(6);
+            i0.ɵɵproperty("clearButton", true);
+            i0.ɵɵadvance(2);
+            i0.ɵɵproperty("showSeparator", true);
+            i0.ɵɵadvance();
+            i0.ɵɵconditional(ctx.showLoader ? 13 : 14);
+            i0.ɵɵadvance(2);
+            i0.ɵɵproperty("ngIf", ctx.showAddDialog);
+            i0.ɵɵadvance();
+            i0.ɵɵproperty("ngIf", ctx.showAddSingleRecordsDialog);
+        } }, dependencies: [i3.NgClass, i3.NgForOf, i3.NgIf, i4.GridComponent, i4.ColumnComponent, i4.FooterTemplateDirective, i4.CheckboxColumnComponent, i5.DialogComponent, i5.DialogActionsComponent, i6.LoaderComponent, i7.ButtonComponent, i7.DropDownButtonComponent, i8.TextBoxComponent, i8.TextBoxPrefixTemplateDirective, i9.ProgressBarComponent, i3.DecimalPipe], styles: [".app-container[_ngcontent-%COMP%] {\n    padding: 20px;\n}\n\n.flex-display-row-header[_ngcontent-%COMP%] {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    padding-bottom: 10px;\n}\n\n.title-wrapper[_ngcontent-%COMP%] {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    padding: 14px 0;\n    border-bottom: 1px solid var(--med-gray);\n}\n\n.title-wrapper[_ngcontent-%COMP%]   h4[_ngcontent-%COMP%] {\n    margin: 0;\n    font-size: 24px;\n    line-height: 28px;\n}\n\n.title-wrapper[_ngcontent-%COMP%]   .search[_ngcontent-%COMP%]   input[_ngcontent-%COMP%] {\n    width: 100%;\n    height: 100%;\n    font-size: 16px;\n    background: transparent;\n    border: none;\n    box-sizing: border-box;\n    padding-left: 40px;\n}\n\n .title-wrapper[_ngcontent-%COMP%]   .search[_ngcontent-%COMP%]  {\n    background: var(--light-shade);\n    width: 360px;\n    height: 44px;\n    position: relative;\n    border-radius: 10px;\n}\n\n.title-wrapper[_ngcontent-%COMP%]   .search[_ngcontent-%COMP%]   svg[_ngcontent-%COMP%] {\n    position: absolute;\n    top: 50%;\n    transform: translateY(-50%);\n    left: 12px;\n}\n\n.add-btn[_ngcontent-%COMP%] {\n    padding: 10px 30px;\n    border-radius: 10px;\n    color: white;\n    background-color: var(--border-blue);\n    font-size: initial;\n    cursor: pointer;\n}\n\n.add-btn[_ngcontent-%COMP%]:hover {\n    filter: brightness(85%);\n}\n\n.margin-left-small[_ngcontent-%COMP%] {\n    margin-left: 10px;\n}\n\n\n.overflow-y-scroll[_ngcontent-%COMP%] {\n    overflow-y: auto;\n    max-height: 300px;\n}\n\n.padding-bottom-small[_ngcontent-%COMP%] {\n    padding-bottom: 10px;\n}\n\n.list-item[_ngcontent-%COMP%] {\n    display: flex;\n    justify-content: space-between;\n    padding-bottom: 5px;\n    align-items: center;\n}\n\n.btn-no-border[_ngcontent-%COMP%] {\n    border: none;\n    background: none;\n    color: var(--border-blue);\n    font-size: 16px;\n    font-weight: 500;\n    cursor: pointer;\n}\n\n.btn-selected[_ngcontent-%COMP%] {\n    font-weight: bold;\n}\n\n.list-text[_ngcontent-%COMP%] {\n    font-size: large;\n}\n.list-selected[_ngcontent-%COMP%] {\n    font-weight: bold;\n    color: var(--border-blue);\n}\n\n.btn-margin-right[_ngcontent-%COMP%] {\n    margin-right: 35px;\n}\n\n.divider[_ngcontent-%COMP%] {\n    color: lightgray\n}\n\n.search-header[_ngcontent-%COMP%] {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    padding: 10px 0;\n}\n\n.search-bar[_ngcontent-%COMP%] {\n    width: 65%;\n    padding-bottom: 10px;\n}\n\n.dialog-wrapper[_ngcontent-%COMP%] {\n    padding: 15px 25px;\n}\n\n.btn-outline[_ngcontent-%COMP%] {\n    border: 2px solid var(--border-blue);\n    border-radius: 8px;\n    padding: 5px 30px;\n\n    background: none;\n    color: var(--border-blue);\n    font-size: 16px;\n    font-weight: 500;\n    cursor: pointer;\n}\n\n.k-dropdown-button[_ngcontent-%COMP%]   .k-button[_ngcontent-%COMP%] {\n    background: var(--border-blue);\n    color: var(--white-color);\n    font-size: 16px;\n    border: none;\n    padding: 8px 25px;\n    border-radius: 10px;\n}\n\n.k-dropdown-button[_ngcontent-%COMP%]   .k-button[_ngcontent-%COMP%]   .k-button-text[_ngcontent-%COMP%]   .card-header-entity[_ngcontent-%COMP%]   .add-item[_ngcontent-%COMP%]   .k-button[_ngcontent-%COMP%]   .k-button-text[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n}\n\n.btn-cmn[_ngcontent-%COMP%] {\n    width: 44px;\n    height: 44px;\n    min-width: 44px;\n    background: transparent;\n    border-radius: 8px;\n    border: 1px solid var(--gray-color);\n}\n\n.btn-cmn.active[_ngcontent-%COMP%] {\n    border: 1px solid var(--border-blue);\n}", ".main-area[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  width: 100%;\n  gap: 24px;\n  padding: 24px 0;\n}\n.list-view[_ngcontent-%COMP%] {\n  padding: 16px;\n  min-width: 300px;\n  border-radius: 4px;\n  background:  #FAFAFA;\n  border: none;\n}\n  .list-view .k-listview-header, \n  .list-view .k-listview-footer {\n  border: none;\n}\n  .list-view .k-listview-content {\n  border: 1px solid rgba(0, 0, 0, 0.08);\n  border-radius: 4px;\n  background: #fff;\n  padding: 16px;\n}\n\n.header[_ngcontent-%COMP%], \n.footer[_ngcontent-%COMP%] {\n  color: #424242;\n  font-size: 16px;\n  height: auto;\n  margin:0;\n}\n\n.header[_ngcontent-%COMP%] {\n  color: #424242;\n  margin-bottom: 16px;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n}\n.header[_ngcontent-%COMP%]   .head-tag[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  color:  #424242;\nfont-size: 16px;\nfont-style: normal;\nfont-weight: 400;\nline-height: 20px;\n}\n\n.header[_ngcontent-%COMP%]   .count[_ngcontent-%COMP%] {\n  width: 24px;\n  height: 24px;\n  min-width: 24px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  font-size: 10px;\n  background: rgba(0, 0, 0, 0.08);\n  border-radius: 50%;\n}\n.footer[_ngcontent-%COMP%] {\n  font-size: 14px;\n  margin-top: 16px;\n}\n\n.list-item[_ngcontent-%COMP%] {\n  color:  #424242;\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 30px;\n  cursor: pointer;\n  margin: 4px;\n}\n.card-container[_ngcontent-%COMP%] {\n  margin: 0;\n  padding: 0;\n  box-shadow: none;\n}\n.card-header-entity[_ngcontent-%COMP%] {\n  display: flex;\n  justify-content: space-between;\n  align-items: flex-start;\n  padding-bottom: 20px;\n  border-bottom: 1px solid rgba(0, 0, 0, 0.08);\n}\n.card-header-entity[_ngcontent-%COMP%]   .title-wrap[_ngcontent-%COMP%]   h1[_ngcontent-%COMP%] {\n  color: #424242;\n  font-size: 28px;\n  font-style: normal;\n  font-weight: 300;\n  line-height: 28px;\n  margin-bottom: 15px;\n}\n.card-header-entity[_ngcontent-%COMP%]   .title-wrap[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n}\n.card-header-entity[_ngcontent-%COMP%]   .title-wrap[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n  margin: 0;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  color: #424242;\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 20px;\n}\n\n\n\n\n \n.view-card[_ngcontent-%COMP%]   .view-icon[_ngcontent-%COMP%] {\n  color: var(--sideNav);\n}\n.card-wrapper[_ngcontent-%COMP%] {\n  border: 1px solid rgba(0, 0, 0, 0.08);\n  border-radius: 6px;\n  width: 100% !important;\n}\n.card-wrapper[_ngcontent-%COMP%]   .k-card-body[_ngcontent-%COMP%] {\n  background: #fff;\n  padding: 12px 20px;\n}\n.card-wrapper[_ngcontent-%COMP%]   .view-card[_ngcontent-%COMP%] {\n  overflow: auto;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  background: #fafafa;\n  padding: 4px 15px;\n}\n.view-card[_ngcontent-%COMP%]   .btn-wrapper[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n}\n\n.k-card-body[_ngcontent-%COMP%]   .view-card-content[_ngcontent-%COMP%]   h5[_ngcontent-%COMP%] {\n  color: #424242;\n  font-size: 16px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 20px;\n  margin-bottom: 0;\n  letter-spacing: 0.18px;\n}\n.k-card-body[_ngcontent-%COMP%]   .view-card-content[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n  color: #666;\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 20px;\n  height: 48px;\n  margin-bottom: 0;\n}\n.card-container[_ngcontent-%COMP%] {\n  padding: 0;\n  margin: 0;\n  box-shadow: none;\n}\n.card-header-entity[_ngcontent-%COMP%] {\n  display: flex;\n  justify-content: space-between;\n  align-items: flex-start;\n  padding-bottom: 20px;\n  border-bottom: 1px solid rgba(0, 0, 0, 0.08);\n}\n\n.card-header-entity[_ngcontent-%COMP%]   .title-wrap[_ngcontent-%COMP%]   h1[_ngcontent-%COMP%] {\n  color: #424242;\n  font-size: 28px;\n  font-style: normal;\n  font-weight: 300;\n  line-height: 28px;\n  margin-bottom: 15px;\n}\n.card-header-entity[_ngcontent-%COMP%]   .title-wrap[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n}\n.card-header-entity[_ngcontent-%COMP%]   .title-wrap[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n  margin: 0;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  color: #424242;\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 20px;\n}\n.main-area[_ngcontent-%COMP%]   .card-list[_ngcontent-%COMP%] {\n  display: grid;\n  grid-template-columns: repeat(4, 1fr);\n  gap: 20px;\n}"] });
 }
-SingleListDetailComponent.ɵfac = function SingleListDetailComponent_Factory(t) { return new (t || SingleListDetailComponent)(i0.ɵɵdirectiveInject(i1.Router), i0.ɵɵdirectiveInject(i1.ActivatedRoute), i0.ɵɵdirectiveInject(i2.SharedService)); };
-SingleListDetailComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SingleListDetailComponent, selectors: [["mj-list-detail"]], inputs: { ListID: "ListID" }, decls: 17, vars: 7, consts: [["searchInput", ""], [1, "app-container"], [1, "flex-display-row-header"], ["textField", "Text", "themeColor", "info", 1, "add-btn", 3, "itemClick", "data"], [1, "fa-solid", "fa-plus"], [1, "title-wrapper"], [1, "search"], ["type", "text", "placeholder", "Search in List", "size", "large", "rounded", "large", "fillMode", "solid", 3, "keyup", "clearButton"], ["kendoTextBoxPrefixTemplate", "", 3, "showSeparator"], ["type", "converging-spinner"], [3, "data"], ["class", "dialog-wrapper", "title", "Select Views to Add", 3, "minWidth", "width", "height", "close", 4, "ngIf"], ["class", "dialog-wrapper", 3, "title", "minWidth", "width", "height", "close", 4, "ngIf"], [1, "fa-solid", "fa-magnifying-glass", "margin-left-small"], [3, "width", "headerStyle", "style", 4, "ngIf"], [3, "field", "title", "width", "editable", "editor", "headerStyle", "style", 4, "ngFor", "ngForOf"], [3, "width", "headerStyle"], [3, "field", "title", "width", "editable", "editor", "headerStyle"], [4, "ngIf"], ["kendoGridFooterTemplate", ""], [2, "font-size", "smaller", "font-weight", "normal"], ["title", "Select Views to Add", 1, "dialog-wrapper", 3, "close", "minWidth", "width", "height"], [1, "popup-actions-btn"], ["kendoButton", "", "themeColor", "info", 1, "cancel-btn", 3, "click", "disabled"], ["kendoButton", "", "fillMode", "outline", "themeColor", "info", 1, "yes-btn", 3, "click", "disabled"], [3, "min", "max", "value", "indeterminate"], [1, "search-header"], ["id", "listSearch", "placeholder", "Search Views...", "kendoTextBox", "", 1, "search-bar", 3, "clearButton"], [1, "overflow-y-scroll"], [1, "list-item"], [1, "list-text", 3, "ngClass"], ["kendoButton", "", 1, "btn-no-border", "btn-selected"], ["kendoButton", "", 1, "btn-no-border"], ["kendoButton", "", 1, "btn-no-border", "btn-selected", 3, "click"], [1, "fa-solid", "fa-minus"], ["kendoButton", "", 1, "btn-no-border", 3, "click"], [1, "btn-margin-right"], [1, "dialog-wrapper", 3, "close", "title", "minWidth", "width", "height"], ["id", "listRecordSearch", "kendoTextBox", "", 1, "search-bar", 3, "valueChange", "placeholder", "clearButton"], [1, "list-text"]], template: function SingleListDetailComponent_Template(rf, ctx) { if (rf & 1) {
-        const _r1 = i0.ɵɵgetCurrentView();
-        i0.ɵɵelementStart(0, "div", 1)(1, "div", 2)(2, "h1");
-        i0.ɵɵtext(3);
-        i0.ɵɵelementEnd();
-        i0.ɵɵelementStart(4, "kendo-dropdownbutton", 3);
-        i0.ɵɵlistener("itemClick", function SingleListDetailComponent_Template_kendo_dropdownbutton_itemClick_4_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onDropdownItemClick($event)); });
-        i0.ɵɵelement(5, "span", 4);
-        i0.ɵɵtext(6, " Add to List ");
-        i0.ɵɵelementEnd()();
-        i0.ɵɵelementStart(7, "div")(8, "div", 5)(9, "div", 6)(10, "kendo-textbox", 7, 0);
-        i0.ɵɵlistener("keyup", function SingleListDetailComponent_Template_kendo_textbox_keyup_10_listener() { i0.ɵɵrestoreView(_r1); const searchInput_r2 = i0.ɵɵreference(11); return i0.ɵɵresetView(ctx.onListSearchValueChange(searchInput_r2.value)); });
-        i0.ɵɵtemplate(12, SingleListDetailComponent_ng_template_12_Template, 1, 0, "ng-template", 8);
-        i0.ɵɵelementEnd()()()();
-        i0.ɵɵtemplate(13, SingleListDetailComponent_Conditional_13_Template, 1, 0, "kendo-loader", 9)(14, SingleListDetailComponent_Conditional_14_Template, 3, 3, "kendo-grid", 10);
-        i0.ɵɵelementEnd();
-        i0.ɵɵtemplate(15, SingleListDetailComponent_kendo_dialog_15_Template, 8, 6, "kendo-dialog", 11)(16, SingleListDetailComponent_kendo_dialog_16_Template, 6, 6, "kendo-dialog", 12);
-    } if (rf & 2) {
-        i0.ɵɵadvance(3);
-        i0.ɵɵtextInterpolate(ctx.listRecord ? ctx.listRecord.Name : "List");
-        i0.ɵɵadvance();
-        i0.ɵɵproperty("data", ctx.addOptions);
-        i0.ɵɵadvance(6);
-        i0.ɵɵproperty("clearButton", true);
-        i0.ɵɵadvance(2);
-        i0.ɵɵproperty("showSeparator", true);
-        i0.ɵɵadvance();
-        i0.ɵɵconditional(ctx.showLoader ? 13 : 14);
-        i0.ɵɵadvance(2);
-        i0.ɵɵproperty("ngIf", ctx.showAddDialog);
-        i0.ɵɵadvance();
-        i0.ɵɵproperty("ngIf", ctx.showAddSingleRecordsDialog);
-    } }, dependencies: [i3.NgClass, i3.NgForOf, i3.NgIf, i4.GridComponent, i4.ColumnComponent, i4.FooterTemplateDirective, i4.CheckboxColumnComponent, i5.DialogComponent, i5.DialogActionsComponent, i6.LoaderComponent, i7.ButtonComponent, i7.DropDownButtonComponent, i8.TextBoxComponent, i8.TextBoxPrefixTemplateDirective, i9.ProgressBarComponent, i3.DecimalPipe], styles: [".app-container[_ngcontent-%COMP%] {\n    padding: 20px;\n}\n\n.flex-display-row-header[_ngcontent-%COMP%] {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    padding-bottom: 10px;\n}\n\n.title-wrapper[_ngcontent-%COMP%] {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    padding: 14px 0;\n    border-bottom: 1px solid var(--med-gray);\n}\n\n.title-wrapper[_ngcontent-%COMP%]   h4[_ngcontent-%COMP%] {\n    margin: 0;\n    font-size: 24px;\n    line-height: 28px;\n}\n\n.title-wrapper[_ngcontent-%COMP%]   .search[_ngcontent-%COMP%]   input[_ngcontent-%COMP%] {\n    width: 100%;\n    height: 100%;\n    font-size: 16px;\n    background: transparent;\n    border: none;\n    box-sizing: border-box;\n    padding-left: 40px;\n}\n\n .title-wrapper[_ngcontent-%COMP%]   .search[_ngcontent-%COMP%]  {\n    background: var(--light-shade);\n    width: 360px;\n    height: 44px;\n    position: relative;\n    border-radius: 10px;\n}\n\n.title-wrapper[_ngcontent-%COMP%]   .search[_ngcontent-%COMP%]   svg[_ngcontent-%COMP%] {\n    position: absolute;\n    top: 50%;\n    transform: translateY(-50%);\n    left: 12px;\n}\n\n.add-btn[_ngcontent-%COMP%] {\n    padding: 10px 30px;\n    border-radius: 10px;\n    color: white;\n    background-color: var(--border-blue);\n    font-size: initial;\n    cursor: pointer;\n}\n\n.add-btn[_ngcontent-%COMP%]:hover {\n    filter: brightness(85%);\n}\n\n.margin-left-small[_ngcontent-%COMP%] {\n    margin-left: 10px;\n}\n\n\n.overflow-y-scroll[_ngcontent-%COMP%] {\n    overflow-y: auto;\n    max-height: 300px;\n}\n\n.padding-bottom-small[_ngcontent-%COMP%] {\n    padding-bottom: 10px;\n}\n\n.list-item[_ngcontent-%COMP%] {\n    display: flex;\n    justify-content: space-between;\n    padding-bottom: 5px;\n    align-items: center;\n}\n\n.btn-no-border[_ngcontent-%COMP%] {\n    border: none;\n    background: none;\n    color: var(--border-blue);\n    font-size: 16px;\n    font-weight: 500;\n    cursor: pointer;\n}\n\n.btn-selected[_ngcontent-%COMP%] {\n    font-weight: bold;\n}\n\n.list-text[_ngcontent-%COMP%] {\n    font-size: large;\n}\n.list-selected[_ngcontent-%COMP%] {\n    font-weight: bold;\n    color: var(--border-blue);\n}\n\n.btn-margin-right[_ngcontent-%COMP%] {\n    margin-right: 35px;\n}\n\n.divider[_ngcontent-%COMP%] {\n    color: lightgray\n}\n\n.search-header[_ngcontent-%COMP%] {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    padding: 10px 0;\n}\n\n.search-bar[_ngcontent-%COMP%] {\n    width: 65%;\n    padding-bottom: 10px;\n}\n\n.dialog-wrapper[_ngcontent-%COMP%] {\n    padding: 15px 25px;\n}\n\n.btn-outline[_ngcontent-%COMP%] {\n    border: 2px solid var(--border-blue);\n    border-radius: 8px;\n    padding: 5px 30px;\n\n    background: none;\n    color: var(--border-blue);\n    font-size: 16px;\n    font-weight: 500;\n    cursor: pointer;\n}\n\n.k-dropdown-button[_ngcontent-%COMP%]   .k-button[_ngcontent-%COMP%] {\n    background: var(--border-blue);\n    color: var(--white-color);\n    font-size: 16px;\n    border: none;\n    padding: 8px 25px;\n    border-radius: 10px;\n}\n\n.k-dropdown-button[_ngcontent-%COMP%]   .k-button[_ngcontent-%COMP%]   .k-button-text[_ngcontent-%COMP%]   .card-header-entity[_ngcontent-%COMP%]   .add-item[_ngcontent-%COMP%]   .k-button[_ngcontent-%COMP%]   .k-button-text[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n}\n\n.btn-cmn[_ngcontent-%COMP%] {\n    width: 44px;\n    height: 44px;\n    min-width: 44px;\n    background: transparent;\n    border-radius: 8px;\n    border: 1px solid var(--gray-color);\n}\n\n.btn-cmn.active[_ngcontent-%COMP%] {\n    border: 1px solid var(--border-blue);\n}", ".main-area[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  width: 100%;\n  gap: 24px;\n  padding: 24px 0;\n}\n.list-view[_ngcontent-%COMP%] {\n  padding: 16px;\n  min-width: 300px;\n  border-radius: 4px;\n  background:  #FAFAFA;\n  border: none;\n}\n  .list-view .k-listview-header, \n  .list-view .k-listview-footer {\n  border: none;\n}\n  .list-view .k-listview-content {\n  border: 1px solid rgba(0, 0, 0, 0.08);\n  border-radius: 4px;\n  background: #fff;\n  padding: 16px;\n}\n\n.header[_ngcontent-%COMP%], \n.footer[_ngcontent-%COMP%] {\n  color: #424242;\n  font-size: 16px;\n  height: auto;\n  margin:0;\n}\n\n.header[_ngcontent-%COMP%] {\n  color: #424242;\n  margin-bottom: 16px;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n}\n.header[_ngcontent-%COMP%]   .head-tag[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  color:  #424242;\nfont-size: 16px;\nfont-style: normal;\nfont-weight: 400;\nline-height: 20px;\n}\n\n.header[_ngcontent-%COMP%]   .count[_ngcontent-%COMP%] {\n  width: 24px;\n  height: 24px;\n  min-width: 24px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  font-size: 10px;\n  background: rgba(0, 0, 0, 0.08);\n  border-radius: 50%;\n}\n.footer[_ngcontent-%COMP%] {\n  font-size: 14px;\n  margin-top: 16px;\n}\n\n.list-item[_ngcontent-%COMP%] {\n  color:  #424242;\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 30px;\n  cursor: pointer;\n  margin: 4px;\n}\n.card-container[_ngcontent-%COMP%] {\n  margin: 0;\n  padding: 0;\n  box-shadow: none;\n}\n.card-header-entity[_ngcontent-%COMP%] {\n  display: flex;\n  justify-content: space-between;\n  align-items: flex-start;\n  padding-bottom: 20px;\n  border-bottom: 1px solid rgba(0, 0, 0, 0.08);\n}\n.card-header-entity[_ngcontent-%COMP%]   .title-wrap[_ngcontent-%COMP%]   h1[_ngcontent-%COMP%] {\n  color: #424242;\n  font-size: 28px;\n  font-style: normal;\n  font-weight: 300;\n  line-height: 28px;\n  margin-bottom: 15px;\n}\n.card-header-entity[_ngcontent-%COMP%]   .title-wrap[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n}\n.card-header-entity[_ngcontent-%COMP%]   .title-wrap[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n  margin: 0;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  color: #424242;\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 20px;\n}\n\n\n\n\n \n.view-card[_ngcontent-%COMP%]   .view-icon[_ngcontent-%COMP%] {\n  color: var(--sideNav);\n}\n.card-wrapper[_ngcontent-%COMP%] {\n  border: 1px solid rgba(0, 0, 0, 0.08);\n  border-radius: 6px;\n  width: 100% !important;\n}\n.card-wrapper[_ngcontent-%COMP%]   .k-card-body[_ngcontent-%COMP%] {\n  background: #fff;\n  padding: 12px 20px;\n}\n.card-wrapper[_ngcontent-%COMP%]   .view-card[_ngcontent-%COMP%] {\n  overflow: auto;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  background: #fafafa;\n  padding: 4px 15px;\n}\n.view-card[_ngcontent-%COMP%]   .btn-wrapper[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n}\n\n.k-card-body[_ngcontent-%COMP%]   .view-card-content[_ngcontent-%COMP%]   h5[_ngcontent-%COMP%] {\n  color: #424242;\n  font-size: 16px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 20px;\n  margin-bottom: 0;\n  letter-spacing: 0.18px;\n}\n.k-card-body[_ngcontent-%COMP%]   .view-card-content[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n  color: #666;\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 20px;\n  height: 48px;\n  margin-bottom: 0;\n}\n.card-container[_ngcontent-%COMP%] {\n  padding: 0;\n  margin: 0;\n  box-shadow: none;\n}\n.card-header-entity[_ngcontent-%COMP%] {\n  display: flex;\n  justify-content: space-between;\n  align-items: flex-start;\n  padding-bottom: 20px;\n  border-bottom: 1px solid rgba(0, 0, 0, 0.08);\n}\n\n.card-header-entity[_ngcontent-%COMP%]   .title-wrap[_ngcontent-%COMP%]   h1[_ngcontent-%COMP%] {\n  color: #424242;\n  font-size: 28px;\n  font-style: normal;\n  font-weight: 300;\n  line-height: 28px;\n  margin-bottom: 15px;\n}\n.card-header-entity[_ngcontent-%COMP%]   .title-wrap[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n}\n.card-header-entity[_ngcontent-%COMP%]   .title-wrap[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n  margin: 0;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  color: #424242;\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 20px;\n}\n.main-area[_ngcontent-%COMP%]   .card-list[_ngcontent-%COMP%] {\n  display: grid;\n  grid-template-columns: repeat(4, 1fr);\n  gap: 20px;\n}"] });
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SingleListDetailComponent, [{
         type: Component,
         args: [{ selector: 'mj-list-detail', template: "<div class=\"app-container\">\n    <div class=\"flex-display-row-header\">\n        <h1>{{listRecord ? listRecord.Name: \"List\"}}</h1>\n        <kendo-dropdownbutton \n          class=\"add-btn\" \n          (itemClick)=\"onDropdownItemClick($event)\" \n          [data]=\"addOptions\" \n          textField=\"Text\"\n          themeColor=\"info\">\n            <span class=\"fa-solid fa-plus\"></span>\n              Add to List\n        </kendo-dropdownbutton> \n    </div>\n    <div>\n        <div class=\"title-wrapper\">\n            <div class=\"search\">\n              <kendo-textbox \n              type=\"text\" \n              #searchInput \n              placeholder=\"Search in List\" \n              (keyup)=\"onListSearchValueChange(searchInput.value)\"\n              [clearButton]=\"true\"\n              size=\"large\"\n              rounded=\"large\"\n              fillMode=\"solid\"\n              >\n                <ng-template kendoTextBoxPrefixTemplate [showSeparator]=\"true\">\n                  <span class=\"fa-solid fa-magnifying-glass margin-left-small\"></span>\n                </ng-template>\n              </kendo-textbox>\n            </div>\n        </div>\n    </div>\n    @if(showLoader){\n        <kendo-loader type=\"converging-spinner\"></kendo-loader>\n    }\n    @else{\n        <kendo-grid [data]=\"filteredGridData\">\n            <kendo-grid-checkbox-column \n                *ngIf=\"selectModeEnabled\" \n                [width]=\"50\" \n                [headerStyle]=\"{ 'font-weight' : 'bold', 'background-color': 'white' }\" \n                [style]=\"{'text-align': 'center', 'vertical-align': 'center'}\">\n            </kendo-grid-checkbox-column>\n            \n            <kendo-grid-column \n                *ngFor=\"let item of visibleColumns\" \n                [field]=\"item.Name || ''\" \n                [title]=\"GetColumnTitle(item)\"\n                [width]=\"item.width ? item.width : 100\"\n                [editable]=\"item.EntityField?.AllowUpdateAPI || false\"\n                [editor]=\"getEditor(item.EntityField)\"\n                [headerStyle]=\"{ 'font-weight' : 'bold', 'background-color': 'white' }\"\n                [style]=\"this.GetColumnCellStyle(item)\"\n                >\n                <ng-template *ngIf=\"item===visibleColumns[0]\" kendoGridFooterTemplate >\n                    {{this.filteredGridData.length | number}}{{this.totalRowCount > this.filteredGridData.length ? ' of ' + (this.totalRowCount | number) : ' rows'}}<br/><span style=\"font-size: smaller; font-weight: normal;\">{{viewExecutionTime | number:'1.2-2'}} seconds</span>\n                </ng-template>\n            </kendo-grid-column>\n\n            <!--\n            <kendo-excelexport #excelExport [data]=\"exportData\" [fileName]=\"(_viewEntity ? _viewEntity.Get('Name') : _entityInfo?.Name) + '.xlsx'\">\n                <kendo-excelexport-column *ngFor=\"let exportCol of exportColumns\" [field]=\"exportCol.Name\" [title]=\"exportCol.Name\">\n                </kendo-excelexport-column>\n            </kendo-excelexport>\n            -->\n        </kendo-grid>\n    }\n</div>\n\n<kendo-dialog\nclass=\"dialog-wrapper\"\ntitle=\"Select Views to Add\"\n*ngIf=\"showAddDialog\"\n(close)=\"toggleAddFromViewDialog(false)\"\n[minWidth]=\"250\"\n[width]=\"650\"\n[height]=\"550\"\n>\n@if(showAddLoader){\n    <kendo-loader type=\"converging-spinner\"></kendo-loader>\n    <kendo-progressbar \n        [min]=\"0\"\n        [max]=\"recordsToSave\"\n        [value]=\"recordsSaved\"\n        [indeterminate]=\"fetchingRecordsToSave\"\n    />\n}\n@else {\n    <div class=\"search-header\">\n        <kendo-textbox\n            id=\"listSearch\"\n            placeholder=\"Search Views...\"\n            kendoTextBox\n            [clearButton]=\"true\"\n            class=\"search-bar\"\n        />\n    </div>\n    <hr>\n    @for(userView of userViews; track userView){\n        <div class=\"overflow-y-scroll\">\n            <div class=\"list-item\">\n                <div class=\"list-text\" [ngClass]=\"{'list-selected': userViewsToAdd.includes(userView)}\">\n                    {{userView.Name}}\n                </div>\n                @if(userViewsToAdd.includes(userView)){\n                    <button kendoButton class=\"btn-no-border btn-selected\" (click)=\"removeViewFromSelectedList(userView)\">\n                        <span class=\"fa-solid fa-minus\"></span>\n                        Remove\n                    </button>\n                }\n                @else {\n                    <button kendoButton class=\"btn-no-border\" (click)=\"addViewToSelectedList(userView)\">\n                        <div class=\"btn-margin-right\">\n                            <span class=\"fa-solid fa-plus\"></span>\n                            Add\n                        </div>\n                    </button>\n                }\n            </div>\n            <hr>\n        </div>\n    }\n}\n    <kendo-dialog-actions class=\"popup-actions-btn\">\n        <button class=\"cancel-btn\" (click)=\"addTolist()\" [disabled]=\"showAddLoader\" kendoButton themeColor=\"info\">\n            Done\n        </button>\n        <button  class=\"yes-btn\" (click)=\"toggleAddFromViewDialog(false)\" [disabled]=\"showAddLoader\" kendoButton fillMode=\"outline\" themeColor=\"info\">\n            Cancel\n        </button>\n    </kendo-dialog-actions>\n</kendo-dialog>\n\n<kendo-dialog\nclass=\"dialog-wrapper\"\n[title]=\"'Select ' + (listRecord ? listRecord.Entity : 'Records') + ' to Add to List'\"\n*ngIf=\"showAddSingleRecordsDialog\"\n(close)=\"toggleAddRecordsDialog(false)\"\n[minWidth]=\"250\"\n[width]=\"650\"\n[height]=\"550\"\n>\n@if(showDialogLoader){\n    <kendo-loader type=\"converging-spinner\"></kendo-loader>\n    <kendo-progressbar \n        [min]=\"0\"\n        [max]=\"recordsToSave\"\n        [value]=\"recordsSaved\"\n        [indeterminate]=\"fetchingRecordsToSave\"\n    />\n}\n@else {\n    <div class=\"search-header\">\n        <kendo-textbox\n            id=\"listRecordSearch\"\n            (valueChange)=\"onListRecordDialogValueChange($event)\"\n            [placeholder]=\"'Search ' + (listRecord ? listRecord.Entity : 'Records') + '...'\"\n            kendoTextBox\n            [clearButton]=\"true\"\n            class=\"search-bar\"\n        />\n    </div>\n    <hr>\n    @if(fetchingListRecords){\n        <kendo-loader type=\"converging-spinner\"></kendo-loader>\n    }\n    @else {\n        @for(listRecord of listRecords; track listRecord){\n            <div class=\"overflow-y-scroll\">\n                <div class=\"list-item\">\n                    <div class=\"list-text\">\n                        {{listRecord.Name}}\n                    </div>\n                    <button kendoButton class=\"btn-no-border\" (click)=\"addListRecord(listRecord)\">\n                        <div class=\"btn-margin-right\">\n                            <span class=\"fa-solid fa-plus\"></span>\n                            Add\n                        </div>\n                    </button>\n                </div>\n                <hr>\n            </div>\n        }\n    }\n}\n    <kendo-dialog-actions class=\"popup-actions-btn\">\n        <button  class=\"yes-btn\" (click)=\"toggleAddRecordsDialog(false)\" [disabled]=\"showDialogLoader\" kendoButton fillMode=\"outline\" themeColor=\"info\">\n            Close\n        </button>\n    </kendo-dialog-actions>\n</kendo-dialog>", styles: [".app-container {\n    padding: 20px;\n}\n\n.flex-display-row-header {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    padding-bottom: 10px;\n}\n\n.title-wrapper {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    padding: 14px 0;\n    border-bottom: 1px solid var(--med-gray);\n}\n\n.title-wrapper h4 {\n    margin: 0;\n    font-size: 24px;\n    line-height: 28px;\n}\n\n.title-wrapper .search input {\n    width: 100%;\n    height: 100%;\n    font-size: 16px;\n    background: transparent;\n    border: none;\n    box-sizing: border-box;\n    padding-left: 40px;\n}\n\n .title-wrapper .search  {\n    background: var(--light-shade);\n    width: 360px;\n    height: 44px;\n    position: relative;\n    border-radius: 10px;\n}\n\n.title-wrapper .search svg {\n    position: absolute;\n    top: 50%;\n    transform: translateY(-50%);\n    left: 12px;\n}\n\n.add-btn {\n    padding: 10px 30px;\n    border-radius: 10px;\n    color: white;\n    background-color: var(--border-blue);\n    font-size: initial;\n    cursor: pointer;\n}\n\n.add-btn:hover {\n    filter: brightness(85%);\n}\n\n.margin-left-small {\n    margin-left: 10px;\n}\n\n\n.overflow-y-scroll {\n    overflow-y: auto;\n    max-height: 300px;\n}\n\n.padding-bottom-small {\n    padding-bottom: 10px;\n}\n\n.list-item {\n    display: flex;\n    justify-content: space-between;\n    padding-bottom: 5px;\n    align-items: center;\n}\n\n.btn-no-border {\n    border: none;\n    background: none;\n    color: var(--border-blue);\n    font-size: 16px;\n    font-weight: 500;\n    cursor: pointer;\n}\n\n.btn-selected {\n    font-weight: bold;\n}\n\n.list-text {\n    font-size: large;\n}\n.list-selected {\n    font-weight: bold;\n    color: var(--border-blue);\n}\n\n.btn-margin-right {\n    margin-right: 35px;\n}\n\n.divider {\n    color: lightgray\n}\n\n.search-header {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    padding: 10px 0;\n}\n\n.search-bar {\n    width: 65%;\n    padding-bottom: 10px;\n}\n\n.dialog-wrapper {\n    padding: 15px 25px;\n}\n\n.btn-outline {\n    border: 2px solid var(--border-blue);\n    border-radius: 8px;\n    padding: 5px 30px;\n\n    background: none;\n    color: var(--border-blue);\n    font-size: 16px;\n    font-weight: 500;\n    cursor: pointer;\n}\n\n.k-dropdown-button .k-button {\n    background: var(--border-blue);\n    color: var(--white-color);\n    font-size: 16px;\n    border: none;\n    padding: 8px 25px;\n    border-radius: 10px;\n}\n\n.k-dropdown-button .k-button .k-button-text .card-header-entity .add-item .k-button .k-button-text {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n}\n\n.btn-cmn {\n    width: 44px;\n    height: 44px;\n    min-width: 44px;\n    background: transparent;\n    border-radius: 8px;\n    border: 1px solid var(--gray-color);\n}\n\n.btn-cmn.active {\n    border: 1px solid var(--border-blue);\n}", "\n.main-area {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  width: 100%;\n  gap: 24px;\n  padding: 24px 0;\n}\n.list-view {\n  padding: 16px;\n  min-width: 300px;\n  border-radius: 4px;\n  background:  #FAFAFA;\n  border: none;\n}\n::ng-deep .list-view .k-listview-header, \n::ng-deep .list-view .k-listview-footer {\n  border: none;\n}\n::ng-deep .list-view .k-listview-content {\n  border: 1px solid rgba(0, 0, 0, 0.08);\n  border-radius: 4px;\n  background: #fff;\n  padding: 16px;\n}\n\n.header,\n.footer {\n  color: #424242;\n  font-size: 16px;\n  height: auto;\n  margin:0;\n}\n\n.header {\n  color: #424242;\n  margin-bottom: 16px;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n}\n.header .head-tag {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  color:  #424242;\nfont-size: 16px;\nfont-style: normal;\nfont-weight: 400;\nline-height: 20px;\n}\n\n.header .count {\n  width: 24px;\n  height: 24px;\n  min-width: 24px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  font-size: 10px;\n  background: rgba(0, 0, 0, 0.08);\n  border-radius: 50%;\n}\n.footer {\n  font-size: 14px;\n  margin-top: 16px;\n}\n\n.list-item {\n  color:  #424242;\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 30px;\n  cursor: pointer;\n  margin: 4px;\n}\n.card-container {\n  margin: 0;\n  padding: 0;\n  box-shadow: none;\n}\n.card-header-entity {\n  display: flex;\n  justify-content: space-between;\n  align-items: flex-start;\n  padding-bottom: 20px;\n  border-bottom: 1px solid rgba(0, 0, 0, 0.08);\n}\n.card-header-entity .title-wrap h1 {\n  color: #424242;\n  font-size: 28px;\n  font-style: normal;\n  font-weight: 300;\n  line-height: 28px;\n  margin-bottom: 15px;\n}\n.card-header-entity .title-wrap {\n  display: flex;\n  flex-direction: column;\n}\n.card-header-entity .title-wrap p {\n  margin: 0;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  color: #424242;\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 20px;\n}\n\n\n\n\n \n.view-card .view-icon {\n  color: var(--sideNav);\n}\n.card-wrapper {\n  border: 1px solid rgba(0, 0, 0, 0.08);\n  border-radius: 6px;\n  width: 100% !important;\n}\n.card-wrapper .k-card-body {\n  background: #fff;\n  padding: 12px 20px;\n}\n.card-wrapper .view-card {\n  overflow: auto;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  background: #fafafa;\n  padding: 4px 15px;\n}\n.view-card .btn-wrapper {\n  display: flex;\n  align-items: center;\n}\n\n.k-card-body .view-card-content h5 {\n  color: #424242;\n  font-size: 16px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 20px;\n  margin-bottom: 0;\n  letter-spacing: 0.18px;\n}\n.k-card-body .view-card-content p {\n  color: #666;\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 20px;\n  height: 48px;\n  margin-bottom: 0;\n}\n.card-container {\n  padding: 0;\n  margin: 0;\n  box-shadow: none;\n}\n.card-header-entity {\n  display: flex;\n  justify-content: space-between;\n  align-items: flex-start;\n  padding-bottom: 20px;\n  border-bottom: 1px solid rgba(0, 0, 0, 0.08);\n}\n\n.card-header-entity .title-wrap h1 {\n  color: #424242;\n  font-size: 28px;\n  font-style: normal;\n  font-weight: 300;\n  line-height: 28px;\n  margin-bottom: 15px;\n}\n.card-header-entity .title-wrap {\n  display: flex;\n  flex-direction: column;\n}\n.card-header-entity .title-wrap p {\n  margin: 0;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  color: #424242;\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 20px;\n}\n.main-area .card-list {\n  display: grid;\n  grid-template-columns: repeat(4, 1fr);\n  gap: 20px;\n}\n"] }]