@memberjunction/ng-explorer-core 1.8.1 → 2.1.1

package/dist/lib/generic-browser-list/generic-browser-list.component.js

@@ -10,7 +10,7 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
 import { Component, EventEmitter, Input, Output, ViewChild } from '@angular/core';
 import { Folder, Item, ItemType } from '../../generic/Item.types';
 import { Metadata, KeyValuePair, RunView, CompositeKey } from '@memberjunction/core';
-import { AfterAddFolderEvent, AfterAddItemEvent, AfterDeleteFolderEvent, AfterDeleteItemEvent, BeforeAddFolderEvent, BeforeAddItemEvent, BeforeDeleteFolderEvent, BeforeDeleteItemEvent, BeforeUpdateFolderEvent, BeforeUpdateItemEvent } from '../../generic/Events.types';
+import { AfterAddFolderEvent, AfterAddItemEvent, AfterDeleteFolderEvent, AfterDeleteItemEvent, BeforeAddFolderEvent, BeforeAddItemEvent, BeforeDeleteFolderEvent, BeforeDeleteItemEvent, BeforeUpdateFolderEvent, BeforeUpdateItemEvent, DropdownOptionClickEvent } from '../../generic/Events.types';
 import { Subject, debounceTime } from 'rxjs';
 import * as i0 from "@angular/core";
 import * as i1 from "@memberjunction/ng-shared";
@@ -188,6 +188,7 @@ export class GenericBrowserListComponent {
          * or as a grid of icons
          */
         this.displayItemsAsList = false;
+        this.extraDropdownOptions = [];
         //Before Evewnts
         this.BeforeAddFolderEvent = new EventEmitter();
         this.BeforeAddItemEvent = new EventEmitter();
@@ -204,6 +205,7 @@ export class GenericBrowserListComponent {
         this.AfterUpdateItemEvent = new EventEmitter();
         this.itemClickEvent = new EventEmitter();
         this.backButtonClickEvent = new EventEmitter();
+        this.dropdownOptionClickEvent = new EventEmitter();
         this.viewModeChangeEvent = new EventEmitter();
         this._resizeDebounceTime = 250;
         this._resizeEndDebounceTime = 500;
@@ -219,10 +221,10 @@ export class GenericBrowserListComponent {
         this.createNewRecordName = "Record";
         this.entityObjectName = "";
         /**
-         * Data for the create button dropdown
+         * Options for the create button dropdown
          */
-        this.createButtonDropdownData = [
-            { text: "Folder" },
+        this.dropdownOptions = [
+            { text: "Folder" }
         ];
         this.filterItemsSubject
             .pipe(debounceTime(this._resizeDebounceTime))
@@ -230,17 +232,9 @@ export class GenericBrowserListComponent {
     }
     ngOnInit() {
         return __awaiter(this, void 0, void 0, function* () {
-            if (!this.disableAddButton) {
-                this.createButtonDropdownData.unshift({ text: this.resourceName });
-            }
             const md = new Metadata();
-            if (this.categoryEntityID) {
-                let entity = md.Entities.find(e => e.ID == this.categoryEntityID);
-                if (entity) {
-                    this.createNewRecordName = `${entity.DisplayName} Record`;
-                    this.entityObjectName = entity.Name;
-                }
-                this.createButtonDropdownData.unshift({ text: this.createNewRecordName });
+            if (this.extraDropdownOptions && this.extraDropdownOptions.length > 0) {
+                this.dropdownOptions.push(...this.extraDropdownOptions);
             }
             const view = new RunView();
             const rvResult = yield view.RunView({
@@ -428,7 +422,7 @@ export class GenericBrowserListComponent {
             //the only assumption we are making here is that the entityID
             //is a number
             const entityID = this.TryGetID(genericEntity);
-            if (entityID && entityID > 0) {
+            if (entityID && entityID.length > 0) {
                 const md = new Metadata();
                 let entityObject = yield md.GetEntityObject(this.ItemEntityName);
                 let pkv = new KeyValuePair();
@@ -459,7 +453,7 @@ export class GenericBrowserListComponent {
             const rv = new RunView();
             const folderResult = yield rv.RunView({
                 EntityName: this.CategoryEntityName,
-                ExtraFilter: "ParentID = " + folderID
+                ExtraFilter: `ParentID ='${folderID}'`
             });
             return folderResult && folderResult.Success && folderResult.Results.length > 0;
         });
@@ -551,6 +545,10 @@ export class GenericBrowserListComponent {
                     this.entityFormDialogRef.ShowForm();
                 }
             }
+            else {
+                let event = new DropdownOptionClickEvent(data.text);
+                this.dropdownOptionClickEvent.emit(event);
+            }
         });
     }
     toggleCopyFromView() {
@@ -588,7 +586,7 @@ GenericBrowserListComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type:
     } if (rf & 2) {
         let _t;
         i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.entityFormDialogRef = _t.first);
-    } }, inputs: { showLoader: "showLoader", itemType: "itemType", title: "title", items: "items", iconName: "iconName", disableAddButton: "disableAddButton", disableEditButton: "disableEditButton", addText: "addText", backText: "backText", ItemEntityName: "ItemEntityName", CategoryEntityName: "CategoryEntityName", selectedFolderID: "selectedFolderID", showNotifications: "showNotifications", categoryEntityID: "categoryEntityID", displayAsGrid: "displayAsGrid", resourceName: "resourceName", viewingResource: "viewingResource", displayItemsAsList: "displayItemsAsList", createButtonDropdownData: "createButtonDropdownData" }, outputs: { BeforeAddFolderEvent: "BeforeAddFolderEvent", BeforeAddItemEvent: "BeforeAddItemEvent", BeforeDeleteFolderEvent: "BeforeDeleteFolderEvent", BeforeDeleteItemEvent: "BeforeDeleteItemEvent", BeforeUpdateFolderEvent: "BeforeUpdateFolderEvent", BeforeUpdateItemEvent: "BeforeUpdateItemEvent", AfterAddFolderEvent: "AfterAddFolderEvent", AfterAddItemEvent: "AfterAddItemEvent", AfterDeleteFolderEvent: "AfterDeleteFolderEvent", AfterDeleteItemEvent: "AfterDeleteItemEvent", AfterUpdateFolderEvent: "AfterUpdateFolderEvent", AfterUpdateItemEvent: "AfterUpdateItemEvent", itemClickEvent: "itemClickEvent", backButtonClickEvent: "backButtonClickEvent", viewModeChangeEvent: "viewModeChangeEvent" }, decls: 27, vars: 9, consts: [["searchInput", ""], ["entityFormDialog", ""], [1, "generic-browser-list-container"], [1, "main-fav-wrapper"], [1, "title-wrapper"], [1, "title-flex-display"], ["title", "Folder", 1, "title-folder", "fa-regular", "fa-folder", "fa-2xl"], ["themeColor", "info", 1, "custom-dropdwn", 3, "itemClick", "data"], [1, "fa-solid", "fa-plus"], [1, "search"], ["type", "text", "placeholder", "Search", "size", "large", "rounded", "large", "fillMode", "solid", 3, "keyup", "clearButton"], ["kendoTextBoxPrefixTemplate", "", 3, "showSeparator"], [1, "filter-wrapper"], ["kendobutton", "", 1, "cursor-pointer", "grid-btn", "btn-cmn", 3, "click"], [1, "fa-solid", "fa-bars"], ["kendobutton", "", 1, "cursor-pointer", "active", "btn-cmn", 3, "click"], [1, "fa-solid", "fa-table-cells-large"], [1, "main-area"], ["type", "converging-spinner", 4, "ngIf"], ["class", "dialog-wrapper", "title", "Confirm", 3, "minWidth", "width", "close", 4, "ngIf"], ["title", "Create new Folder", "class", "dialog-wrapper", 3, "minWidth", "width", "close", 4, "ngIf"], ["Mode", "complete"], [1, "fa-solid", "fa-magnifying-glass", "margin-left-small"], ["type", "converging-spinner"], [3, "kendoGridBinding"], [1, "card-list", "k-d-flex", "k-flex-row", "k-h-full", "k-flex-wrap"], [3, "cellClick", "kendoGridBinding"], ["field", "Name", "title", "Name"], ["field", "Size", "title", "Size"], ["field", "LastOpened", "title", "Last Opened"], ["field", "ModifiedBy", "title", "Modified By"], ["title", ""], ["kendoGridCellTemplate", ""], [1, "grid-wrapper"], [1, "list-btn"], [1, "list-btn", 3, "click"], [1, "fa-regular", "fa-trash-can"], [1, "fa-regular", "fa-pen-to-square"], [1, "card-wrapper", "cursor-pointer"], [1, "list-item-icon"], [3, "click"], [3, "title", "ngClass"], [1, "padding-top-small"], ["kendoCardTitle", ""], ["kendoCardSubtitle", ""], ["title", "Confirm", 1, "dialog-wrapper", 3, "close", "minWidth", "width"], [1, "k-m-7.5", "k-text-center"], [1, "popup-actions-btn"], ["kendoButton", "", "themeColor", "info", 1, "cancel-btn", 3, "click"], ["kendoButton", "", "fillMode", "outline", "themeColor", "info", 1, "yes-btn", 3, "click"], ["title", "Create new Folder", 1, "dialog-wrapper", 3, "close", "minWidth", "width"], ["placeholder", "Enter a folder name", 3, "valueChange"]], template: function GenericBrowserListComponent_Template(rf, ctx) { if (rf & 1) {
+    } }, inputs: { showLoader: "showLoader", itemType: "itemType", title: "title", items: "items", iconName: "iconName", disableAddButton: "disableAddButton", disableEditButton: "disableEditButton", addText: "addText", backText: "backText", ItemEntityName: "ItemEntityName", CategoryEntityName: "CategoryEntityName", selectedFolderID: "selectedFolderID", showNotifications: "showNotifications", categoryEntityID: "categoryEntityID", displayAsGrid: "displayAsGrid", resourceName: "resourceName", viewingResource: "viewingResource", displayItemsAsList: "displayItemsAsList", extraDropdownOptions: "extraDropdownOptions" }, outputs: { BeforeAddFolderEvent: "BeforeAddFolderEvent", BeforeAddItemEvent: "BeforeAddItemEvent", BeforeDeleteFolderEvent: "BeforeDeleteFolderEvent", BeforeDeleteItemEvent: "BeforeDeleteItemEvent", BeforeUpdateFolderEvent: "BeforeUpdateFolderEvent", BeforeUpdateItemEvent: "BeforeUpdateItemEvent", AfterAddFolderEvent: "AfterAddFolderEvent", AfterAddItemEvent: "AfterAddItemEvent", AfterDeleteFolderEvent: "AfterDeleteFolderEvent", AfterDeleteItemEvent: "AfterDeleteItemEvent", AfterUpdateFolderEvent: "AfterUpdateFolderEvent", AfterUpdateItemEvent: "AfterUpdateItemEvent", itemClickEvent: "itemClickEvent", backButtonClickEvent: "backButtonClickEvent", dropdownOptionClickEvent: "dropdownOptionClickEvent", viewModeChangeEvent: "viewModeChangeEvent" }, decls: 27, vars: 9, consts: [["searchInput", ""], ["entityFormDialog", ""], [1, "generic-browser-list-container"], [1, "main-fav-wrapper"], [1, "title-wrapper"], [1, "title-flex-display"], ["title", "Folder", 1, "title-folder", "fa-regular", "fa-folder", "fa-2xl"], ["themeColor", "info", 1, "custom-dropdwn", 3, "itemClick", "data"], [1, "fa-solid", "fa-plus"], [1, "search"], ["type", "text", "placeholder", "Search", "size", "large", "rounded", "large", "fillMode", "solid", 3, "keyup", "clearButton"], ["kendoTextBoxPrefixTemplate", "", 3, "showSeparator"], [1, "filter-wrapper"], ["kendobutton", "", 1, "cursor-pointer", "grid-btn", "btn-cmn", 3, "click"], [1, "fa-solid", "fa-bars"], ["kendobutton", "", 1, "cursor-pointer", "active", "btn-cmn", 3, "click"], [1, "fa-solid", "fa-table-cells-large"], [1, "main-area"], ["type", "converging-spinner", 4, "ngIf"], ["class", "dialog-wrapper", "title", "Confirm", 3, "minWidth", "width", "close", 4, "ngIf"], ["title", "Create new Folder", "class", "dialog-wrapper", 3, "minWidth", "width", "close", 4, "ngIf"], ["Mode", "complete"], [1, "fa-solid", "fa-magnifying-glass", "margin-left-small"], ["type", "converging-spinner"], [3, "kendoGridBinding"], [1, "card-list", "k-d-flex", "k-flex-row", "k-h-full", "k-flex-wrap"], [3, "cellClick", "kendoGridBinding"], ["field", "Name", "title", "Name"], ["field", "Size", "title", "Size"], ["field", "LastOpened", "title", "Last Opened"], ["field", "ModifiedBy", "title", "Modified By"], ["title", ""], ["kendoGridCellTemplate", ""], [1, "grid-wrapper"], [1, "list-btn"], [1, "list-btn", 3, "click"], [1, "fa-regular", "fa-trash-can"], [1, "fa-regular", "fa-pen-to-square"], [1, "card-wrapper", "cursor-pointer"], [1, "list-item-icon"], [3, "click"], [3, "title", "ngClass"], [1, "padding-top-small"], ["kendoCardTitle", ""], ["kendoCardSubtitle", ""], ["title", "Confirm", 1, "dialog-wrapper", 3, "close", "minWidth", "width"], [1, "k-m-7.5", "k-text-center"], [1, "popup-actions-btn"], ["kendoButton", "", "themeColor", "info", 1, "cancel-btn", 3, "click"], ["kendoButton", "", "fillMode", "outline", "themeColor", "info", 1, "yes-btn", 3, "click"], ["title", "Create new Folder", 1, "dialog-wrapper", 3, "close", "minWidth", "width"], ["placeholder", "Enter a folder name", 3, "valueChange"]], template: function GenericBrowserListComponent_Template(rf, ctx) { if (rf & 1) {
         const _r1 = i0.ɵɵgetCurrentView();
         i0.ɵɵelementStart(0, "div", 2)(1, "div", 3)(2, "div", 4)(3, "div", 5);
         i0.ɵɵtemplate(4, GenericBrowserListComponent_Conditional_4_Template, 1, 0, "span", 6);
@@ -624,7 +622,7 @@ GenericBrowserListComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type:
         i0.ɵɵadvance(2);
         i0.ɵɵtextInterpolate(ctx.title);
         i0.ɵɵadvance();
-        i0.ɵɵproperty("data", ctx.createButtonDropdownData);
+        i0.ɵɵproperty("data", ctx.dropdownOptions);
         i0.ɵɵadvance(5);
         i0.ɵɵproperty("clearButton", true);
         i0.ɵɵadvance(2);
@@ -640,7 +638,7 @@ GenericBrowserListComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type:
     } }, dependencies: [i2.NgClass, i2.NgIf, i3.GridComponent, i3.DataBindingDirective, i3.ColumnComponent, i3.CellTemplateDirective, i4.DialogComponent, i4.DialogActionsComponent, i5.LoaderComponent, i6.ButtonComponent, i6.DropDownButtonComponent, i7.TextBoxComponent, i7.TextBoxPrefixTemplateDirective, i8.CardComponent, i8.CardBodyComponent, i8.CardTitleDirective, i8.CardSubtitleDirective, i9.EntityFormDialogComponent], styles: [".card-header-entity .title-wrap h1 {\n    margin: 0 !important;\n    font-size: 36px !important;\n    line-height: 42px !important;\n    color: var(--black) !important;\n}\n   .card-header-entity .add-item .k-button {\n    border: 1px solid var(--border-blue) !important;\n    background: var(--white-color) !important;\n    color: var(--border-blue);\n    font-weight: 500 ;\n    font-size: 16px ;\n    border-radius: 10px;\n    line-height: 34px;\n}\n  .card-header-entity .add-item .k-button:hover {\n    background: var(--border-blue) !important;\n    color: var(--white-color);\n}\n  .card-header-entity .add-item .k-button:hover .k-button-text svg path {\n    fill: var(--white-color) !important;\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 .title-wrapper[_ngcontent-%COMP%]   h4[_ngcontent-%COMP%] {\n    margin: 0;\n    font-size: 24px;\n    line-height: 28px;\n }\n .main-fav-wrapper[_ngcontent-%COMP%] {\n    background: #fff;\n    padding: 20px;\n }\n .filter-wrapper[_ngcontent-%COMP%] {\n    display: flex;\n    justify-content: flex-start;\n    gap: 14px;\n    align-items: center;\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 .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  .main-fav-wrapper .title-wrapper .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  .main-fav-wrapper .title-wrapper .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.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.btn-cmn.active[_ngcontent-%COMP%] {\n    border: 1px solid var(--border-blue);\n}\n  .main-fav-wrapper .title-wrapper .filter-wrapper .k-dropdown-button .k-button {\n    border: 1px solid var(--gray-color);\n    border-radius: 8px;   padding: 10px 25px;\n    background: var(--white-color);\n    color: var(--sideNav);\n}\n  .main-area .card-list .card-wrapper .k-card-body {\n    padding: 16px !important;\n    position: relative;\n}\n  .main-fav-wrapper .main-area .card-list .card-wrapper .list-item-icon {\n    position: absolute;\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    top:12px;\n    right: 12px;\n    z-index: 9;\n}\n.grid-wrapper[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n}\n  .main-fav-wrapper .main-area .card-list .card-wrapper .list-item-icon .common-btn, .list-btn[_ngcontent-%COMP%] {\n    width: 38px;\n    height: 38px;\n    background: #000;\n    min-width: 38px;\n    border: 1px solid var(--gray-color);\n    border-radius: 8px; \n    display: flex;\n    justify-content: center;\n    align-items: center;\n    background: transparent;\n    cursor: pointer;\n}\n  .main-fav-wrapper .main-area .card-list .card-wrapper .k-card-body .list-item-icon:hover, .list-btn[_ngcontent-%COMP%]:hover {\n    border: 1px solid var(--border-active);\n}\n\n\n  .main-area .card-list .card-wrapper:hover {\n    box-shadow: 0px 0px 20px 0px rgba(60, 73, 99, 0.2);\n    border: 1px solid var(--border-active);\n}\n  .main-area .card-list .card-wrapper:hover .k-card-body .view-card-content-list h5 {\n    color: var(--border-blue);\n}\n  .main-area .card-list .card-wrapper .k-card-body .view-card-content-list p {\n    color: var(--sideNav);\n    font-size: 14px;\n    line-height: 16px;\n    height: auto;\n    text-overflow: ellipsis;\n    overflow: hidden;\n    display: -webkit-box;\n    -webkit-line-clamp: 2;\n    -webkit-box-orient: vertical;\n\n}\n  .main-area .card-list .card-wrapper .k-card-body .view-card-content-list h5 {\n    font-size: 18px;\n    line-height: 21px;\n    color: var(--text-darked);\n    font-weight: 600;\n}\n.breadcrumb-wrap[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    padding: 12px 0;\n}\n.breadcrumb-wrap[_ngcontent-%COMP%]   span[_ngcontent-%COMP%] {\n    font-size: 16px;\n    line-height: 18px;\n    font-weight: 400;\n    color: var(--black);\n}\n  .k-menu-popup {\n    box-shadow: 0px 0px 20px 0px rgba(60, 73, 99, 0.2);\n    border-radius: 10px;\n    padding: 16px;\n}\n\n  .k-menu-popup kendo-button-list ul li .k-menu-link {\n    box-shadow: none !important;\n} \n  .k-menu-popup kendo-button-list ul li .k-menu-link:active {\n    background: transparent !important;\n}\n  .k-menu-popup kendo-button-list ul li .k-menu-link .k-menu-link-text:hover {\n    color: var(--primary-color);\n    background: transparent !important;\n\n}\n  .dialog-wrapper .popup-actions-btn button {\n    flex: 1;\n}\n  .dialog-wrapper .popup-actions-btn {\n    display: flex;\n}\n  .dialog-wrapper .popup-actions-btn .cancel-btn {\n    background: var(--primary-color);\n    color: var(--white-color);\n    font-size: 16px;\n    font-weight: 700;\n    line-height: 34px;\n    text-align: center;\n    border-radius: 10px;\n    border: 1px solid transparent;\n\n}\n  .dialog-wrapper .popup-actions-btn .yes-btn {\n    border:1px solid var(--primary-color);\n    background: transparent;\n    color: var(--primary-color);\n    font-size: 16px;\n    font-weight: 700;\n    line-height: 34px;\n    text-align: center;\n    border-radius: 10px;\n    box-shadow: none;\n}\n  .dialog-wrapper .popup-actions-btn .yes-btn:focus {\n    box-shadow: none !important;\n}\n  .dialog-wrapper .k-window-title {\n    font-size: 30px;\n    font-weight: 500;\n    line-height: 36px;\n    text-align: left;\n    color: var(--text-darked);\n}\n  .dialog-wrapper p {\n    font-size: 16px;\n    font-weight: 500;\n    line-height: 20px;\n    text-align: left;\n    color: var(--black);\n}\n\n.margin-left-small[_ngcontent-%COMP%] {\n    margin-left: 10px;\n}\n\n.card-wrapper[_ngcontent-%COMP%] {\n    min-width: 230px;\n    height: 150px;\n    min-height: 125px;\n}\n\n.padding-top-small[_ngcontent-%COMP%] {\n    padding-top: 10px;\n}\n\n.cursor-pointer[_ngcontent-%COMP%] {\n    cursor: pointer;\n}\n\n.title-folder[_ngcontent-%COMP%] {\n    padding-right: 20px;\n    margin: auto;\n}\n\n.title-flex-display[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: row;\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(GenericBrowserListComponent, [{
         type: Component,
-        args: [{ selector: 'app-generic-browser-list', template: "\n<div class=\"generic-browser-list-container\">\n  <div class=\"main-fav-wrapper\">\n    <div class=\"title-wrapper\">\n      <div class=\"title-flex-display\">\n        @if(selectedFolderID){\n          <span title=\"Folder\" class=\"title-folder fa-regular fa-folder fa-2xl\"></span>\n        }\n        <h4>{{title}}</h4>\n      </div>\n      <kendo-dropdownbutton class=\"custom-dropdwn\" (itemClick)=\"onDropdownItemClick($event)\" [data]=\"createButtonDropdownData\" themeColor=\"info\">\n        <span class=\"fa-solid fa-plus\"></span>\n        Create New\n      </kendo-dropdownbutton>\n    </div>\n    <div class=\"title-wrapper\">\n      <div class=\"search\">\n        <kendo-textbox \n        type=\"text\" \n        #searchInput \n        placeholder=\"Search\" \n        (keyup)=\"onKeyup(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 class=\"filter-wrapper\">\n        <!--\n        <kendo-dropdownbutton [data]=\"data\" themeColor=\"primary\">\n          Sort By Recents\n        </kendo-dropdownbutton>\n        -->\n        <button kendobutton (click)=\"changeViewMode('grid')\" class=\"cursor-pointer grid-btn btn-cmn\">\n          <span class=\"fa-solid fa-bars\"></span>\n        </button>\n        <button kendobutton (click)=\"changeViewMode('list')\" class=\"cursor-pointer active btn-cmn\">\n          <span class=\"fa-solid fa-table-cells-large\"></span>\n        </button>\n      </div>\n    </div>\n\n    <div class=\"main-area\">\n      <kendo-loader *ngIf=\"showLoader\" type=\"converging-spinner\"></kendo-loader>\n      @if(!showLoader){\n        @if(displayAsGrid){\n          <kendo-grid (cellClick)=\"onCellItemClicked($event)\" [kendoGridBinding]=\"items\">\n            <kendo-grid-column field=\"Name\" title=\"Name\"></kendo-grid-column>\n            <kendo-grid-column field=\"Size\" title=\"Size\"></kendo-grid-column>\n            <kendo-grid-column field=\"LastOpened\" title=\"Last Opened\"></kendo-grid-column>\n            <kendo-grid-column field=\"ModifiedBy\" title=\"Modified By\"></kendo-grid-column>\n            <kendo-grid-column title=\"\">\n              <ng-template kendoGridCellTemplate let-dataItem>\n                <div class=\"grid-wrapper\">\n                  @if(disableEditButton){\n                    <button class=\"list-btn\" (click)=\"editItem(dataItem)\">\n                      <span class=\"fa-regular fa-pen-to-square\"></span>\n                    </button>\n                  }\n                  <button class=\"list-btn\" (click)=\"deleteItem(dataItem)\">\n                    <span class=\"fa-regular fa-trash-can\"></span>\n                  </button>\n                </div>\n              </ng-template>\n            </kendo-grid-column>\n          </kendo-grid>\n        }\n        @else{\n          <div class=\"card-list k-d-flex k-flex-row k-h-full k-flex-wrap\">\n            @for(item of items; track item){\n              <kendo-card class=\"card-wrapper cursor-pointer\">\n                <div class=\"list-item-icon\">\n                  @if(!disableEditButton){\n                    <button (click)=\"editItem(item)\" class=\"list-btn\">\n                      <span class=\"fa-regular fa-pen-to-square\"></span>\n                    </button>\n                  }\n                  <button (click)=\"deleteItem(item)\" class=\"list-btn\">\n                    <span class=\"fa-regular fa-trash-can\"></span>\n                  </button>\n                </div>\n                <kendo-card-body (click)=\"itemClick(item)\">\n                    <span (title)=\"item.Name\" [ngClass]=\"getIconForResourceType(item)\"></span>\n                    <div class=\"padding-top-small\">\n                      <h5 kendoCardTitle>{{ item.Name }}</h5>\n                      <p kendoCardSubtitle>{{ item.Description }}</p>\n                    </div>\n                </kendo-card-body>\n              </kendo-card>\n            }\n          </div>\n        }\n      }\n    </div>\n  </div>\n\n  <kendo-dialog \n  [minWidth]=\"450\"\n  [width]=\"650\"\n  class=\"dialog-wrapper\" \n  title=\"Confirm\" \n  *ngIf=\"deleteDialogOpened\" \n  (close)=\"onConfirmDeleteItem(false)\">\n    <p class=\"k-m-7.5 k-text-center\">\n      Are you sure you want to delete <b>{{selectedItem?.Name}}?</b>\n    </p>\n    <kendo-dialog-actions class=\"popup-actions-btn\">\n      <button class=\"cancel-btn\" (click)=\"onConfirmDeleteItem(true)\" kendoButton themeColor=\"info\">\n        Yes, Delete\n      </button>\n      <button class=\"yes-btn\" (click)=\"onConfirmDeleteItem(false)\" kendoButton fillMode=\"outline\" themeColor=\"info\">\n        No, Cancel\n      </button>\n    </kendo-dialog-actions>\n  </kendo-dialog>\n\n  <kendo-dialog \n    title=\"Create new Folder\" \n    *ngIf=\"createFolderDialogOpened\" \n    (close)=\"toggleCreateFolderView()\"\n    [minWidth]=\"250\"\n    [width]=\"450\"\n    class=\"dialog-wrapper\"\n  >\n  <div class=\"search\">\n    <kendo-textbox placeholder=\"Enter a folder name\" (valueChange)=\"onCreateFolderKeyup($event)\"/>\n  </div>\n    <kendo-dialog-actions class=\"popup-actions-btn\">\n      <button class=\"cancel-btn\" (click)=\"createFolder()\" kendoButton themeColor=\"info\">\n        Create\n      </button>\n      <button  class=\"yes-btn\" (click)=\"toggleCreateFolderView()\" kendoButton fillMode=\"outline\" themeColor=\"info\">\n        Cancel\n      </button>\n    </kendo-dialog-actions>\n  </kendo-dialog>\n  <mj-entity-form-dialog\n    #entityFormDialog\n    Mode=\"complete\"\n  >\n  </mj-entity-form-dialog>\n</div>\n", styles: ["::ng-deep .card-header-entity .title-wrap h1 {\n    margin: 0 !important;\n    font-size: 36px !important;\n    line-height: 42px !important;\n    color: var(--black) !important;\n}\n ::ng-deep .card-header-entity .add-item .k-button {\n    border: 1px solid var(--border-blue) !important;\n    background: var(--white-color) !important;\n    color: var(--border-blue);\n    font-weight: 500 ;\n    font-size: 16px ;\n    border-radius: 10px;\n    line-height: 34px;\n}\n::ng-deep .card-header-entity .add-item .k-button:hover {\n    background: var(--border-blue) !important;\n    color: var(--white-color);\n}\n::ng-deep .card-header-entity .add-item .k-button:hover .k-button-text svg path {\n    fill: var(--white-color) !important;\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 .title-wrapper h4 {\n    margin: 0;\n    font-size: 24px;\n    line-height: 28px;\n }\n .main-fav-wrapper {\n    background: #fff;\n    padding: 20px;\n }\n .filter-wrapper {\n    display: flex;\n    justify-content: flex-start;\n    gap: 14px;\n    align-items: center;\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 .title-wrapper .search svg {\n    position: absolute;\n    top: 50%;\n    transform: translateY(-50%);\n    left: 12px;\n}\n::ng-deep .main-fav-wrapper .title-wrapper .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::ng-deep .main-fav-wrapper .title-wrapper .k-dropdown-button .k-button .k-button-text, ::ng-deep .card-header-entity .add-item .k-button .k-button-text {\n    display: flex;\n    align-items: center;\n    gap: 8px;\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.btn-cmn.active {\n    border: 1px solid var(--border-blue);\n}\n::ng-deep .main-fav-wrapper .title-wrapper .filter-wrapper .k-dropdown-button .k-button {\n    border: 1px solid var(--gray-color);\n    border-radius: 8px;   padding: 10px 25px;\n    background: var(--white-color);\n    color: var(--sideNav);\n}\n::ng-deep .main-area .card-list .card-wrapper .k-card-body {\n    padding: 16px !important;\n    position: relative;\n}\n::ng-deep .main-fav-wrapper .main-area .card-list .card-wrapper .list-item-icon {\n    position: absolute;\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    top:12px;\n    right: 12px;\n    z-index: 9;\n}\n.grid-wrapper {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n}\n::ng-deep .main-fav-wrapper .main-area .card-list .card-wrapper .list-item-icon .common-btn, .list-btn {\n    width: 38px;\n    height: 38px;\n    background: #000;\n    min-width: 38px;\n    border: 1px solid var(--gray-color);\n    border-radius: 8px; \n    display: flex;\n    justify-content: center;\n    align-items: center;\n    background: transparent;\n    cursor: pointer;\n}\n::ng-deep .main-fav-wrapper .main-area .card-list .card-wrapper .k-card-body .list-item-icon:hover, .list-btn:hover {\n    border: 1px solid var(--border-active);\n}\n\n\n::ng-deep .main-area .card-list .card-wrapper:hover {\n    box-shadow: 0px 0px 20px 0px rgba(60, 73, 99, 0.2);\n    border: 1px solid var(--border-active);\n}\n::ng-deep .main-area .card-list .card-wrapper:hover .k-card-body .view-card-content-list h5 {\n    color: var(--border-blue);\n}\n::ng-deep .main-area .card-list .card-wrapper .k-card-body .view-card-content-list p {\n    color: var(--sideNav);\n    font-size: 14px;\n    line-height: 16px;\n    height: auto;\n    text-overflow: ellipsis;\n    overflow: hidden;\n    display: -webkit-box;\n    -webkit-line-clamp: 2;\n    -webkit-box-orient: vertical;\n\n}\n::ng-deep .main-area .card-list .card-wrapper .k-card-body .view-card-content-list h5 {\n    font-size: 18px;\n    line-height: 21px;\n    color: var(--text-darked);\n    font-weight: 600;\n}\n.breadcrumb-wrap {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    padding: 12px 0;\n}\n.breadcrumb-wrap span {\n    font-size: 16px;\n    line-height: 18px;\n    font-weight: 400;\n    color: var(--black);\n}\n::ng-deep .k-menu-popup {\n    box-shadow: 0px 0px 20px 0px rgba(60, 73, 99, 0.2);\n    border-radius: 10px;\n    padding: 16px;\n}\n\n::ng-deep .k-menu-popup kendo-button-list ul li .k-menu-link {\n    box-shadow: none !important;\n} \n::ng-deep .k-menu-popup kendo-button-list ul li .k-menu-link:active {\n    background: transparent !important;\n}\n::ng-deep .k-menu-popup kendo-button-list ul li .k-menu-link .k-menu-link-text:hover {\n    color: var(--primary-color);\n    background: transparent !important;\n\n}\n::ng-deep .dialog-wrapper .popup-actions-btn button {\n    flex: 1;\n}\n::ng-deep .dialog-wrapper .popup-actions-btn {\n    display: flex;\n}\n::ng-deep .dialog-wrapper .popup-actions-btn .cancel-btn {\n    background: var(--primary-color);\n    color: var(--white-color);\n    font-size: 16px;\n    font-weight: 700;\n    line-height: 34px;\n    text-align: center;\n    border-radius: 10px;\n    border: 1px solid transparent;\n\n}\n::ng-deep .dialog-wrapper .popup-actions-btn .yes-btn {\n    border:1px solid var(--primary-color);\n    background: transparent;\n    color: var(--primary-color);\n    font-size: 16px;\n    font-weight: 700;\n    line-height: 34px;\n    text-align: center;\n    border-radius: 10px;\n    box-shadow: none;\n}\n::ng-deep .dialog-wrapper .popup-actions-btn .yes-btn:focus {\n    box-shadow: none !important;\n}\n::ng-deep .dialog-wrapper .k-window-title {\n    font-size: 30px;\n    font-weight: 500;\n    line-height: 36px;\n    text-align: left;\n    color: var(--text-darked);\n}\n::ng-deep .dialog-wrapper p {\n    font-size: 16px;\n    font-weight: 500;\n    line-height: 20px;\n    text-align: left;\n    color: var(--black);\n}\n\n.margin-left-small {\n    margin-left: 10px;\n}\n\n.card-wrapper {\n    min-width: 230px;\n    height: 150px;\n    min-height: 125px;\n}\n\n.padding-top-small {\n    padding-top: 10px;\n}\n\n.cursor-pointer {\n    cursor: pointer;\n}\n\n.title-folder {\n    padding-right: 20px;\n    margin: auto;\n}\n\n.title-flex-display {\n    display: flex;\n    flex-direction: row;\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"] }]
+        args: [{ selector: 'app-generic-browser-list', template: "\n<div class=\"generic-browser-list-container\">\n  <div class=\"main-fav-wrapper\">\n    <div class=\"title-wrapper\">\n      <div class=\"title-flex-display\">\n        @if(selectedFolderID){\n          <span title=\"Folder\" class=\"title-folder fa-regular fa-folder fa-2xl\"></span>\n        }\n        <h4>{{title}}</h4>\n      </div>\n      <kendo-dropdownbutton class=\"custom-dropdwn\" (itemClick)=\"onDropdownItemClick($event)\" [data]=\"dropdownOptions\" themeColor=\"info\">\n        <span class=\"fa-solid fa-plus\"></span>\n        Create New\n      </kendo-dropdownbutton>\n    </div>\n    <div class=\"title-wrapper\">\n      <div class=\"search\">\n        <kendo-textbox \n        type=\"text\" \n        #searchInput \n        placeholder=\"Search\" \n        (keyup)=\"onKeyup(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 class=\"filter-wrapper\">\n        <!--\n        <kendo-dropdownbutton [data]=\"data\" themeColor=\"primary\">\n          Sort By Recents\n        </kendo-dropdownbutton>\n        -->\n        <button kendobutton (click)=\"changeViewMode('grid')\" class=\"cursor-pointer grid-btn btn-cmn\">\n          <span class=\"fa-solid fa-bars\"></span>\n        </button>\n        <button kendobutton (click)=\"changeViewMode('list')\" class=\"cursor-pointer active btn-cmn\">\n          <span class=\"fa-solid fa-table-cells-large\"></span>\n        </button>\n      </div>\n    </div>\n\n    <div class=\"main-area\">\n      <kendo-loader *ngIf=\"showLoader\" type=\"converging-spinner\"></kendo-loader>\n      @if(!showLoader){\n        @if(displayAsGrid){\n          <kendo-grid (cellClick)=\"onCellItemClicked($event)\" [kendoGridBinding]=\"items\">\n            <kendo-grid-column field=\"Name\" title=\"Name\"></kendo-grid-column>\n            <kendo-grid-column field=\"Size\" title=\"Size\"></kendo-grid-column>\n            <kendo-grid-column field=\"LastOpened\" title=\"Last Opened\"></kendo-grid-column>\n            <kendo-grid-column field=\"ModifiedBy\" title=\"Modified By\"></kendo-grid-column>\n            <kendo-grid-column title=\"\">\n              <ng-template kendoGridCellTemplate let-dataItem>\n                <div class=\"grid-wrapper\">\n                  @if(disableEditButton){\n                    <button class=\"list-btn\" (click)=\"editItem(dataItem)\">\n                      <span class=\"fa-regular fa-pen-to-square\"></span>\n                    </button>\n                  }\n                  <button class=\"list-btn\" (click)=\"deleteItem(dataItem)\">\n                    <span class=\"fa-regular fa-trash-can\"></span>\n                  </button>\n                </div>\n              </ng-template>\n            </kendo-grid-column>\n          </kendo-grid>\n        }\n        @else{\n          <div class=\"card-list k-d-flex k-flex-row k-h-full k-flex-wrap\">\n            @for(item of items; track item){\n              <kendo-card class=\"card-wrapper cursor-pointer\">\n                <div class=\"list-item-icon\">\n                  @if(!disableEditButton){\n                    <button (click)=\"editItem(item)\" class=\"list-btn\">\n                      <span class=\"fa-regular fa-pen-to-square\"></span>\n                    </button>\n                  }\n                  <button (click)=\"deleteItem(item)\" class=\"list-btn\">\n                    <span class=\"fa-regular fa-trash-can\"></span>\n                  </button>\n                </div>\n                <kendo-card-body (click)=\"itemClick(item)\">\n                    <span (title)=\"item.Name\" [ngClass]=\"getIconForResourceType(item)\"></span>\n                    <div class=\"padding-top-small\">\n                      <h5 kendoCardTitle>{{ item.Name }}</h5>\n                      <p kendoCardSubtitle>{{ item.Description }}</p>\n                    </div>\n                </kendo-card-body>\n              </kendo-card>\n            }\n          </div>\n        }\n      }\n    </div>\n  </div>\n\n  <kendo-dialog \n  [minWidth]=\"450\"\n  [width]=\"650\"\n  class=\"dialog-wrapper\" \n  title=\"Confirm\" \n  *ngIf=\"deleteDialogOpened\" \n  (close)=\"onConfirmDeleteItem(false)\">\n    <p class=\"k-m-7.5 k-text-center\">\n      Are you sure you want to delete <b>{{selectedItem?.Name}}?</b>\n    </p>\n    <kendo-dialog-actions class=\"popup-actions-btn\">\n      <button class=\"cancel-btn\" (click)=\"onConfirmDeleteItem(true)\" kendoButton themeColor=\"info\">\n        Yes, Delete\n      </button>\n      <button class=\"yes-btn\" (click)=\"onConfirmDeleteItem(false)\" kendoButton fillMode=\"outline\" themeColor=\"info\">\n        No, Cancel\n      </button>\n    </kendo-dialog-actions>\n  </kendo-dialog>\n\n  <kendo-dialog \n    title=\"Create new Folder\" \n    *ngIf=\"createFolderDialogOpened\" \n    (close)=\"toggleCreateFolderView()\"\n    [minWidth]=\"250\"\n    [width]=\"450\"\n    class=\"dialog-wrapper\"\n  >\n  <div class=\"search\">\n    <kendo-textbox placeholder=\"Enter a folder name\" (valueChange)=\"onCreateFolderKeyup($event)\"/>\n  </div>\n    <kendo-dialog-actions class=\"popup-actions-btn\">\n      <button class=\"cancel-btn\" (click)=\"createFolder()\" kendoButton themeColor=\"info\">\n        Create\n      </button>\n      <button  class=\"yes-btn\" (click)=\"toggleCreateFolderView()\" kendoButton fillMode=\"outline\" themeColor=\"info\">\n        Cancel\n      </button>\n    </kendo-dialog-actions>\n  </kendo-dialog>\n  <mj-entity-form-dialog\n    #entityFormDialog\n    Mode=\"complete\"\n  >\n  </mj-entity-form-dialog>\n</div>\n", styles: ["::ng-deep .card-header-entity .title-wrap h1 {\n    margin: 0 !important;\n    font-size: 36px !important;\n    line-height: 42px !important;\n    color: var(--black) !important;\n}\n ::ng-deep .card-header-entity .add-item .k-button {\n    border: 1px solid var(--border-blue) !important;\n    background: var(--white-color) !important;\n    color: var(--border-blue);\n    font-weight: 500 ;\n    font-size: 16px ;\n    border-radius: 10px;\n    line-height: 34px;\n}\n::ng-deep .card-header-entity .add-item .k-button:hover {\n    background: var(--border-blue) !important;\n    color: var(--white-color);\n}\n::ng-deep .card-header-entity .add-item .k-button:hover .k-button-text svg path {\n    fill: var(--white-color) !important;\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 .title-wrapper h4 {\n    margin: 0;\n    font-size: 24px;\n    line-height: 28px;\n }\n .main-fav-wrapper {\n    background: #fff;\n    padding: 20px;\n }\n .filter-wrapper {\n    display: flex;\n    justify-content: flex-start;\n    gap: 14px;\n    align-items: center;\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 .title-wrapper .search svg {\n    position: absolute;\n    top: 50%;\n    transform: translateY(-50%);\n    left: 12px;\n}\n::ng-deep .main-fav-wrapper .title-wrapper .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::ng-deep .main-fav-wrapper .title-wrapper .k-dropdown-button .k-button .k-button-text, ::ng-deep .card-header-entity .add-item .k-button .k-button-text {\n    display: flex;\n    align-items: center;\n    gap: 8px;\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.btn-cmn.active {\n    border: 1px solid var(--border-blue);\n}\n::ng-deep .main-fav-wrapper .title-wrapper .filter-wrapper .k-dropdown-button .k-button {\n    border: 1px solid var(--gray-color);\n    border-radius: 8px;   padding: 10px 25px;\n    background: var(--white-color);\n    color: var(--sideNav);\n}\n::ng-deep .main-area .card-list .card-wrapper .k-card-body {\n    padding: 16px !important;\n    position: relative;\n}\n::ng-deep .main-fav-wrapper .main-area .card-list .card-wrapper .list-item-icon {\n    position: absolute;\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    top:12px;\n    right: 12px;\n    z-index: 9;\n}\n.grid-wrapper {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n}\n::ng-deep .main-fav-wrapper .main-area .card-list .card-wrapper .list-item-icon .common-btn, .list-btn {\n    width: 38px;\n    height: 38px;\n    background: #000;\n    min-width: 38px;\n    border: 1px solid var(--gray-color);\n    border-radius: 8px; \n    display: flex;\n    justify-content: center;\n    align-items: center;\n    background: transparent;\n    cursor: pointer;\n}\n::ng-deep .main-fav-wrapper .main-area .card-list .card-wrapper .k-card-body .list-item-icon:hover, .list-btn:hover {\n    border: 1px solid var(--border-active);\n}\n\n\n::ng-deep .main-area .card-list .card-wrapper:hover {\n    box-shadow: 0px 0px 20px 0px rgba(60, 73, 99, 0.2);\n    border: 1px solid var(--border-active);\n}\n::ng-deep .main-area .card-list .card-wrapper:hover .k-card-body .view-card-content-list h5 {\n    color: var(--border-blue);\n}\n::ng-deep .main-area .card-list .card-wrapper .k-card-body .view-card-content-list p {\n    color: var(--sideNav);\n    font-size: 14px;\n    line-height: 16px;\n    height: auto;\n    text-overflow: ellipsis;\n    overflow: hidden;\n    display: -webkit-box;\n    -webkit-line-clamp: 2;\n    -webkit-box-orient: vertical;\n\n}\n::ng-deep .main-area .card-list .card-wrapper .k-card-body .view-card-content-list h5 {\n    font-size: 18px;\n    line-height: 21px;\n    color: var(--text-darked);\n    font-weight: 600;\n}\n.breadcrumb-wrap {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    padding: 12px 0;\n}\n.breadcrumb-wrap span {\n    font-size: 16px;\n    line-height: 18px;\n    font-weight: 400;\n    color: var(--black);\n}\n::ng-deep .k-menu-popup {\n    box-shadow: 0px 0px 20px 0px rgba(60, 73, 99, 0.2);\n    border-radius: 10px;\n    padding: 16px;\n}\n\n::ng-deep .k-menu-popup kendo-button-list ul li .k-menu-link {\n    box-shadow: none !important;\n} \n::ng-deep .k-menu-popup kendo-button-list ul li .k-menu-link:active {\n    background: transparent !important;\n}\n::ng-deep .k-menu-popup kendo-button-list ul li .k-menu-link .k-menu-link-text:hover {\n    color: var(--primary-color);\n    background: transparent !important;\n\n}\n::ng-deep .dialog-wrapper .popup-actions-btn button {\n    flex: 1;\n}\n::ng-deep .dialog-wrapper .popup-actions-btn {\n    display: flex;\n}\n::ng-deep .dialog-wrapper .popup-actions-btn .cancel-btn {\n    background: var(--primary-color);\n    color: var(--white-color);\n    font-size: 16px;\n    font-weight: 700;\n    line-height: 34px;\n    text-align: center;\n    border-radius: 10px;\n    border: 1px solid transparent;\n\n}\n::ng-deep .dialog-wrapper .popup-actions-btn .yes-btn {\n    border:1px solid var(--primary-color);\n    background: transparent;\n    color: var(--primary-color);\n    font-size: 16px;\n    font-weight: 700;\n    line-height: 34px;\n    text-align: center;\n    border-radius: 10px;\n    box-shadow: none;\n}\n::ng-deep .dialog-wrapper .popup-actions-btn .yes-btn:focus {\n    box-shadow: none !important;\n}\n::ng-deep .dialog-wrapper .k-window-title {\n    font-size: 30px;\n    font-weight: 500;\n    line-height: 36px;\n    text-align: left;\n    color: var(--text-darked);\n}\n::ng-deep .dialog-wrapper p {\n    font-size: 16px;\n    font-weight: 500;\n    line-height: 20px;\n    text-align: left;\n    color: var(--black);\n}\n\n.margin-left-small {\n    margin-left: 10px;\n}\n\n.card-wrapper {\n    min-width: 230px;\n    height: 150px;\n    min-height: 125px;\n}\n\n.padding-top-small {\n    padding-top: 10px;\n}\n\n.cursor-pointer {\n    cursor: pointer;\n}\n\n.title-folder {\n    padding-right: 20px;\n    margin: auto;\n}\n\n.title-flex-display {\n    display: flex;\n    flex-direction: row;\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"] }]
     }], () => [{ type: i1.SharedService }], { entityFormDialogRef: [{
             type: ViewChild,
             args: ['entityFormDialog']
@@ -680,6 +678,8 @@ GenericBrowserListComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type:
             type: Input
         }], displayItemsAsList: [{
             type: Input
+        }], extraDropdownOptions: [{
+            type: Input
         }], BeforeAddFolderEvent: [{
             type: Output
         }], BeforeAddItemEvent: [{
@@ -708,9 +708,9 @@ GenericBrowserListComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type:
             type: Output
         }], backButtonClickEvent: [{
             type: Output
+        }], dropdownOptionClickEvent: [{
+            type: Output
         }], viewModeChangeEvent: [{
             type: Output
-        }], createButtonDropdownData: [{
-            type: Input
         }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(GenericBrowserListComponent, { className: "GenericBrowserListComponent", filePath: "src/lib/generic-browser-list/generic-browser-list.component.ts", lineNumber: 16 }); })();

package/dist/lib/header/header.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"header.component.d.ts","sourceRoot":"","sources":["../../../src/lib/header/header.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,YAAY,EAAqB,UAAU,EAAE,MAAM,EAAS,MAAM,eAAe,CAAC;AAEtG,OAAO,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC;AAEzC,OAAO,EAAE,UAAU,EAAE,MAAM,kCAAkC,CAAC;AAE9D,OAAO,EAAc,aAAa,EAAE,MAAM,2BAA2B,CAAC;AAEtE,OAAO,EAAE,qBAAqB,EAAE,MAAM,mCAAmC,CAAC;AAC1E,OAAO,EAAE,oBAAoB,EAAE,MAAM,yBAAyB,CAAC;AAC/D,OAAO,EAAE,sBAAsB,EAAE,MAAM,+BAA+B,CAAC;;AAEvE,qBAKa,eAAgB,YAAW,MAAM;IAkCvB,QAAQ,EAAE,UAAU;IAAS,aAAa,EAAE,aAAa;IAAE,OAAO,CAAC,oBAAoB;IAAwB,OAAO,CAAC,MAAM;IAjCvI,eAAe,EAAG,MAAM,CAAC;IACzB,mBAAmB,EAAG,MAAM,CAAC;IAE/B,SAAS,EAAE,KAAK,CAAC,MAAM,CAAC,CAE7B;IACK,gBAAgB,EAAE,MAAM,CAAe;IACvC,YAAY,EAAE,MAAM,CAAqB;IAC/B,MAAM,oBAAsB;IAEnB,WAAW,EAAG,UAAU,CAAC,gBAAgB,CAAC,CAAA;IAClC,cAAc,EAAG,qBAAqB,CAAA;IAEjE,OAAO,EAAE,MAAM,CAAI;IAEnB,gBAAgB;;;MAA4C;IAC5D,aAAa;;MAAoB;IACjC,MAAM,EAAE,GAAG,CAKhB;IACK,aAAa,MAAkB;IAEtC,IAAW,iBAAiB,IAAI,sBAAsB,EAAE,CAEvD;IAED,IAAW,uBAAuB,IAAI,MAAM,CAE3C;gBAEkB,QAAQ,EAAE,UAAU,EAAS,aAAa,EAAE,aAAa,EAAU,oBAAoB,EAAE,oBAAoB,EAAU,MAAM,EAAE,MAAM;IAEjJ,WAAW,CAAC,KAAK,EAAE;QAAC,IAAI,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAC;IAM/C,aAAa,IAAI,IAAI;IAIf,MAAM;IAMN,WAAW,CAAC,KAAK,EAAE,GAAG;IAMtB,iBAAiB,CAAC,KAAK,EAAE,GAAG;IAWlC,kBAAkB,EAAE,GAAG,EAAE,CAAM;IAC/B,cAAc,EAAE,GAAG,CAAC;IACd,QAAQ;YAuBP,sBAAsB;IAepC,OAAO,CAAC,WAAW;IAKZ,QAAQ,CAAC,KAAK,EAAE,GAAG;yCAlHjB,eAAe;2CAAf,eAAe;CA6H3B"}
+{"version":3,"file":"header.component.d.ts","sourceRoot":"","sources":["../../../src/lib/header/header.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,YAAY,EAAqB,UAAU,EAAE,MAAM,EAAS,MAAM,eAAe,CAAC;AAEtG,OAAO,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC;AAEzC,OAAO,EAAE,UAAU,EAAE,MAAM,kCAAkC,CAAC;AAE9D,OAAO,EAAc,aAAa,EAAE,MAAM,2BAA2B,CAAC;AAEtE,OAAO,EAAE,qBAAqB,EAAE,MAAM,mCAAmC,CAAC;AAC1E,OAAO,EAAE,oBAAoB,EAAE,MAAM,yBAAyB,CAAC;AAC/D,OAAO,EAAE,sBAAsB,EAAE,MAAM,+BAA+B,CAAC;;AAEvE,qBAKa,eAAgB,YAAW,MAAM;IAkCvB,QAAQ,EAAE,UAAU;IAAS,aAAa,EAAE,aAAa;IAAE,OAAO,CAAC,oBAAoB;IAAwB,OAAO,CAAC,MAAM;IAjCvI,eAAe,EAAG,MAAM,CAAC;IACzB,mBAAmB,EAAG,MAAM,CAAC;IAE/B,SAAS,EAAE,KAAK,CAAC,MAAM,CAAC,CAE7B;IACK,gBAAgB,EAAE,MAAM,CAAe;IACvC,YAAY,EAAE,MAAM,CAAqB;IAC/B,MAAM,oBAAsB;IAEnB,WAAW,EAAG,UAAU,CAAC,gBAAgB,CAAC,CAAA;IAClC,cAAc,EAAG,qBAAqB,CAAA;IAEjE,OAAO,EAAE,MAAM,CAAI;IAEnB,gBAAgB;;;MAA4C;IAC5D,aAAa;;MAAoB;IACjC,MAAM,EAAE,GAAG,CAKhB;IACK,aAAa,MAAkB;IAEtC,IAAW,iBAAiB,IAAI,sBAAsB,EAAE,CAEvD;IAED,IAAW,uBAAuB,IAAI,MAAM,CAE3C;gBAEkB,QAAQ,EAAE,UAAU,EAAS,aAAa,EAAE,aAAa,EAAU,oBAAoB,EAAE,oBAAoB,EAAU,MAAM,EAAE,MAAM;IAEjJ,WAAW,CAAC,KAAK,EAAE;QAAC,IAAI,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAC;IAM/C,aAAa,IAAI,IAAI;IAIf,MAAM;IAMN,WAAW,CAAC,KAAK,EAAE,GAAG;IAMtB,iBAAiB,CAAC,KAAK,EAAE,GAAG;IAWlC,kBAAkB,EAAE,GAAG,EAAE,CAAM;IAC/B,cAAc,EAAE,GAAG,CAAC;IACd,QAAQ;YAuBP,sBAAsB;IAKpC,OAAO,CAAC,WAAW;IAKZ,QAAQ,CAAC,KAAK,EAAE,GAAG;yCAxGjB,eAAe;2CAAf,eAAe;CAmH3B"}

package/dist/lib/header/header.component.js

@@ -11,7 +11,7 @@ import { Component, EventEmitter, Output, ViewChild, Input } from '@angular/core
 import { take, firstValueFrom } from 'rxjs';
 import { MJEventType, MJGlobal } from '@memberjunction/global';
 import { EventCodes, SharedService } from '@memberjunction/ng-shared';
-import { Metadata, RunView } from '@memberjunction/core';
+import { Metadata } from '@memberjunction/core';
 import { DropDownListComponent } from '@progress/kendo-angular-dropdowns';
 import * as i0 from "@angular/core";
 import * as i1 from "@memberjunction/ng-auth-services";
@@ -120,18 +120,8 @@ export class HeaderComponent {
     }
     loadSearchableEntities() {
         return __awaiter(this, void 0, void 0, function* () {
-            const rv = new RunView();
-            const result = yield rv.RunView({
-                EntityName: 'Entities',
-                ExtraFilter: 'AllowUserSearchAPI = 1',
-                OrderBy: 'Name'
-            });
-            if (result && result.Success) {
-                this.searchableEntities = result.Results;
-                if (this.searchableEntities.length > 0) {
-                    this.selectedEntity = this.searchableEntities[0];
-                }
-            }
+            const md = new Metadata();
+            this.searchableEntities = md.Entities.filter((e) => e.AllowUserSearchAPI).sort((a, b) => a.Name.localeCompare(b.Name));
         });
     }
     isMicrosoft(claims) {

package/dist/lib/home-component/home.component.d.ts

@@ -1,10 +1,13 @@
 import { Router } from '@angular/router';
-import { SharedService } from '@memberjunction/ng-shared';
+import { Metadata } from '@memberjunction/core';
+import { BaseNavigationComponent, SharedService } from '@memberjunction/ng-shared';
 import * as i0 from "@angular/core";
-export declare class HomeComponent {
+export declare class HomeComponent extends BaseNavigationComponent {
     sharedService: SharedService;
     private router;
     constructor(sharedService: SharedService, router: Router);
+    md: Metadata;
+    HomeItems: import("@memberjunction/core/dist/generic/explorerNavigationItem").ExplorerNavigationItem[];
     navigate(route: string): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<HomeComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<HomeComponent, "app-home", never, {}, {}, never, never, false, never>;

package/dist/lib/home-component/home.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"home.component.d.ts","sourceRoot":"","sources":["../../../src/lib/home-component/home.component.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC;AACzC,OAAO,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;;AAE1D,qBAKa,aAAa;IACL,aAAa,EAAE,aAAa;IAAE,OAAO,CAAC,MAAM;gBAA5C,aAAa,EAAE,aAAa,EAAU,MAAM,EAAE,MAAM;IAChE,QAAQ,CAAC,KAAK,EAAE,MAAM;yCAFlB,aAAa;2CAAb,aAAa;CAKzB"}
+{"version":3,"file":"home.component.d.ts","sourceRoot":"","sources":["../../../src/lib/home-component/home.component.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC;AACzC,OAAO,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAEhD,OAAO,EAAE,uBAAuB,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;;AAEnF,qBAMa,aAAc,SAAQ,uBAAuB;IACrC,aAAa,EAAE,aAAa;IAAE,OAAO,CAAC,MAAM;gBAA5C,aAAa,EAAE,aAAa,EAAU,MAAM,EAAE,MAAM;IAIhE,EAAE,WAAkB;IACpB,SAAS,8FAAgF;IAEzF,QAAQ,CAAC,KAAK,EAAE,MAAM;yCARlB,aAAa;2CAAb,aAAa;CAazB"}

package/dist/lib/home-component/home.component.js

@@ -1,69 +1,67 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
 import { Component } from '@angular/core';
+import { Metadata } from '@memberjunction/core';
+import { RegisterClass } from '@memberjunction/global';
+import { BaseNavigationComponent } from '@memberjunction/ng-shared';
 import * as i0 from "@angular/core";
 import * as i1 from "@memberjunction/ng-shared";
 import * as i2 from "@angular/router";
-import * as i3 from "../favorites/favorites.component";
-export class HomeComponent {
+import * as i3 from "@angular/common";
+import * as i4 from "../favorites/favorites.component";
+function HomeComponent_For_8_Template(rf, ctx) { if (rf & 1) {
+    const _r1 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 7);
+    i0.ɵɵlistener("click", function HomeComponent_For_8_Template_div_click_0_listener() { const item_r2 = i0.ɵɵrestoreView(_r1).$implicit; const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.navigate(item_r2.Route)); });
+    i0.ɵɵelement(1, "span", 8);
+    i0.ɵɵelementStart(2, "span");
+    i0.ɵɵtext(3);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const item_r2 = ctx.$implicit;
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngClass", "fa-solid fa-4x sky-blue " + item_r2.IconCSSClass);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(item_r2.Name);
+} }
+let HomeComponent = class HomeComponent extends BaseNavigationComponent {
     constructor(sharedService, router) {
+        super();
         this.sharedService = sharedService;
         this.router = router;
+        this.md = new Metadata();
+        this.HomeItems = this.md.VisibleExplorerNavigationItems.filter(item => item.ShowInHomeScreen); // only want to show the home items here
     }
     navigate(route) {
-        this.router.navigate([route]);
+        this.router.navigate([route]).catch(err => {
+            console.error('Navigation error:', err);
+        });
     }
-}
+};
 HomeComponent.ɵfac = function HomeComponent_Factory(t) { return new (t || HomeComponent)(i0.ɵɵdirectiveInject(i1.SharedService), i0.ɵɵdirectiveInject(i2.Router)); };
-HomeComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: HomeComponent, selectors: [["app-home"]], decls: 36, vars: 0, consts: [[1, "home-container"], [1, "card-header-entity"], [1, "title-wrap"], [1, "main-area"], [1, "nav-container"], [1, "nav-item", 3, "click"], [1, "fa-solid", "fa-user", "fa-4x", "sky-blue"], [1, "fa-solid", "fa-table-cells", "fa-4x", "sky-blue"], [1, "fa-solid", "fa-database", "fa-4x", "sky-blue"], [1, "fa-solid", "fa-layer-group", "fa-4x", "sky-blue"], [1, "fa-solid", "fa-chart-line", "fa-4x", "sky-blue"], [1, "fa-solid", "fa-list-ul", "fa-4x", "sky-blue"], [1, "fa-solid", "fa-gear", "fa-4x", "sky-blue"], [1, "home-favorites"]], template: function HomeComponent_Template(rf, ctx) { if (rf & 1) {
+HomeComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: HomeComponent, selectors: [["app-home"]], features: [i0.ɵɵInheritDefinitionFeature], decls: 10, vars: 0, consts: [[1, "home-container"], [1, "card-header-entity"], [1, "title-wrap"], [1, "main-area"], [1, "nav-container"], [1, "nav-item"], [1, "home-favorites"], [1, "nav-item", 3, "click"], [3, "ngClass"]], template: function HomeComponent_Template(rf, ctx) { if (rf & 1) {
         i0.ɵɵelementStart(0, "div", 0)(1, "div", 1)(2, "div", 2)(3, "h1");
         i0.ɵɵtext(4, "Home");
         i0.ɵɵelementEnd()()();
-        i0.ɵɵelementStart(5, "div", 3)(6, "div", 4)(7, "div", 5);
-        i0.ɵɵlistener("click", function HomeComponent_Template_div_click_7_listener() { return ctx.navigate("askskip"); });
-        i0.ɵɵelement(8, "span", 6);
-        i0.ɵɵelementStart(9, "span");
-        i0.ɵɵtext(10, "Ask Skip");
+        i0.ɵɵelementStart(5, "div", 3)(6, "div", 4);
+        i0.ɵɵrepeaterCreate(7, HomeComponent_For_8_Template, 4, 2, "div", 5, i0.ɵɵrepeaterTrackByIdentity);
+        i0.ɵɵelementEnd();
+        i0.ɵɵelement(9, "app-favorites", 6);
         i0.ɵɵelementEnd()();
-        i0.ɵɵelementStart(11, "div", 5);
-        i0.ɵɵlistener("click", function HomeComponent_Template_div_click_11_listener() { return ctx.navigate("data"); });
-        i0.ɵɵelement(12, "span", 7);
-        i0.ɵɵelementStart(13, "span");
-        i0.ɵɵtext(14, "Data");
-        i0.ɵɵelementEnd()();
-        i0.ɵɵelementStart(15, "div", 5);
-        i0.ɵɵlistener("click", function HomeComponent_Template_div_click_15_listener() { return ctx.navigate("queries"); });
-        i0.ɵɵelement(16, "span", 8);
-        i0.ɵɵelementStart(17, "span");
-        i0.ɵɵtext(18, "Queries");
-        i0.ɵɵelementEnd()();
-        i0.ɵɵelementStart(19, "div", 5);
-        i0.ɵɵlistener("click", function HomeComponent_Template_div_click_19_listener() { return ctx.navigate("dashboards"); });
-        i0.ɵɵelement(20, "span", 9);
-        i0.ɵɵelementStart(21, "span");
-        i0.ɵɵtext(22, "Dashboards");
-        i0.ɵɵelementEnd()();
-        i0.ɵɵelementStart(23, "div", 5);
-        i0.ɵɵlistener("click", function HomeComponent_Template_div_click_23_listener() { return ctx.navigate("reports"); });
-        i0.ɵɵelement(24, "span", 10);
-        i0.ɵɵelementStart(25, "span");
-        i0.ɵɵtext(26, "Reports");
-        i0.ɵɵelementEnd()();
-        i0.ɵɵelementStart(27, "div", 5);
-        i0.ɵɵlistener("click", function HomeComponent_Template_div_click_27_listener() { return ctx.navigate("lists"); });
-        i0.ɵɵelement(28, "span", 11);
-        i0.ɵɵelementStart(29, "span");
-        i0.ɵɵtext(30, "Lists");
-        i0.ɵɵelementEnd()();
-        i0.ɵɵelementStart(31, "div", 5);
-        i0.ɵɵlistener("click", function HomeComponent_Template_div_click_31_listener() { return ctx.navigate("settings"); });
-        i0.ɵɵelement(32, "span", 12);
-        i0.ɵɵelementStart(33, "span");
-        i0.ɵɵtext(34, "Settings");
-        i0.ɵɵelementEnd()()();
-        i0.ɵɵelement(35, "app-favorites", 13);
-        i0.ɵɵelementEnd()();
-    } }, dependencies: [i3.FavoritesComponent], styles: [".home-container[_ngcontent-%COMP%] {\n    padding: 15px;\n}\n\n.nav-container[_ngcontent-%COMP%] {\n    display: grid;\n    grid-template-columns: repeat(4, 1fr);\n    gap: 24px;\n    flex: 1;\n}\n.nav-item[_ngcontent-%COMP%] {\n    border: solid 1px lightgray;\n    border-radius: 5px;\n    background: #fff;\n    border-radius: 15px;\n    width: 100%;;\n    height: auto;\n    box-sizing: border-box;\n    padding: 25px;\n    text-align: left;\n    display: flex;\n    gap: 26px;\n    vertical-align: middle; \n    font-size: 20px;\n    cursor: pointer;\n}\n.nav-item[_ngcontent-%COMP%]   .k-svg-icon[_ngcontent-%COMP%] {\n    width: 75px;\n    height: 75px;\n    color: var(--sky-blue);\n}\n.nav-item[_ngcontent-%COMP%]:hover  {\n    box-shadow: 0px 0px 20px 0px rgba(60, 73, 99, 0.2);\n}\n\n\n.home-favorites[_ngcontent-%COMP%] {\n    width: 500px;\n}\n\n.sky-blue[_ngcontent-%COMP%] {\n    color: var(--sky-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}"] });
+    } if (rf & 2) {
+        i0.ɵɵadvance(7);
+        i0.ɵɵrepeater(ctx.HomeItems);
+    } }, dependencies: [i3.NgClass, i4.FavoritesComponent], styles: [".home-container[_ngcontent-%COMP%] {\n    padding: 15px;\n}\n\n.nav-container[_ngcontent-%COMP%] {\n    display: grid;\n    grid-template-columns: repeat(4, 1fr);\n    gap: 24px;\n    flex: 1;\n}\n.nav-item[_ngcontent-%COMP%] {\n    border: solid 1px lightgray;\n    border-radius: 5px;\n    background: #fff;\n    border-radius: 15px;\n    width: 100%;;\n    height: auto;\n    box-sizing: border-box;\n    padding: 25px;\n    text-align: left;\n    display: flex;\n    gap: 26px;\n    vertical-align: middle; \n    font-size: 20px;\n    cursor: pointer;\n}\n.nav-item[_ngcontent-%COMP%]   .k-svg-icon[_ngcontent-%COMP%] {\n    width: 75px;\n    height: 75px;\n    color: var(--sky-blue);\n}\n.nav-item[_ngcontent-%COMP%]:hover  {\n    box-shadow: 0px 0px 20px 0px rgba(60, 73, 99, 0.2);\n}\n\n\n.home-favorites[_ngcontent-%COMP%] {\n    width: 500px;\n}\n\n.sky-blue[_ngcontent-%COMP%] {\n    color: var(--sky-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}"] });
+HomeComponent = __decorate([
+    RegisterClass(BaseNavigationComponent, 'Home')
+], HomeComponent);
+export { HomeComponent };
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(HomeComponent, [{
         type: Component,
-        args: [{ selector: 'app-home', template: "<div  class=\"home-container\">\n    <div class=\"card-header-entity\">\n        <div class=\"title-wrap\">\n            <h1>Home</h1>\n        </div>\n    </div>\n    <div class=\"main-area\"> \n        <div class=\"nav-container\">\n            <div class=\"nav-item\" (click)=\"navigate('askskip')\">\n                <span class=\"fa-solid fa-user fa-4x sky-blue\"></span>\n                <span>Ask Skip</span>\n            </div>\n            <div class=\"nav-item\" (click)=\"navigate('data')\">\n                <span class=\"fa-solid fa-table-cells fa-4x sky-blue\"></span>\n                <span>Data</span>\n            </div>\n            <div class=\"nav-item\" (click)=\"navigate('queries')\">\n                <span class=\"fa-solid fa-database fa-4x sky-blue\"></span>\n                <span>Queries</span>\n            </div>\n            <div class=\"nav-item\" (click)=\"navigate('dashboards')\">\n                <span class=\"fa-solid fa-layer-group fa-4x sky-blue\"></span>\n                <span>Dashboards</span>\n            </div>\n            <div class=\"nav-item\" (click)=\"navigate('reports')\">\n                <span class=\"fa-solid fa-chart-line fa-4x sky-blue\"></span>\n                <span>Reports</span>\n            </div>\n            <div class=\"nav-item\" (click)=\"navigate('lists')\">\n                <span class=\"fa-solid fa-list-ul fa-4x sky-blue\"></span>\n                <span>Lists</span>\n            </div>\n            <div class=\"nav-item\" (click)=\"navigate('settings')\">\n                <span class=\"fa-solid fa-gear fa-4x sky-blue\"></span>\n                <span>Settings</span>\n            </div>\n        </div>\n\n        <app-favorites class=\"home-favorites\"></app-favorites>\n    </div>\n</div>", styles: [".home-container {\n    padding: 15px;\n}\n\n.nav-container {\n    display: grid;\n    grid-template-columns: repeat(4, 1fr);\n    gap: 24px;\n    flex: 1;\n}\n.nav-item {\n    border: solid 1px lightgray;\n    border-radius: 5px;\n    background: #fff;\n    border-radius: 15px;\n    width: 100%;;\n    height: auto;\n    box-sizing: border-box;\n    padding: 25px;\n    text-align: left;\n    display: flex;\n    gap: 26px;\n    vertical-align: middle; \n    font-size: 20px;\n    cursor: pointer;\n}\n.nav-item .k-svg-icon {\n    width: 75px;\n    height: 75px;\n    color: var(--sky-blue);\n}\n.nav-item:hover  {\n    box-shadow: 0px 0px 20px 0px rgba(60, 73, 99, 0.2);\n}\n\n\n.home-favorites {\n    width: 500px;\n}\n\n.sky-blue {\n    color: var(--sky-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"] }]
+        args: [{ selector: 'app-home', template: "<div  class=\"home-container\">\n    <div class=\"card-header-entity\">\n        <div class=\"title-wrap\">\n            <h1>Home</h1>\n        </div>\n    </div>\n    <div class=\"main-area\"> \n        <div class=\"nav-container\">\n            <!-- <div class=\"nav-item\" (click)=\"navigate('askskip')\">\n                <span class=\"fa-solid fa-user fa-4x sky-blue\"></span>\n                <span>Ask Skip</span>\n            </div>\n            <div class=\"nav-item\" (click)=\"navigate('data')\">\n                <span class=\"fa-solid fa-table-cells fa-4x sky-blue\"></span>\n                <span>Data</span>\n            </div>\n            <div class=\"nav-item\" (click)=\"navigate('queries')\">\n                <span class=\"fa-solid fa-database fa-4x sky-blue\"></span>\n                <span>Queries</span>\n            </div>\n            <div class=\"nav-item\" (click)=\"navigate('dashboards')\">\n                <span class=\"fa-solid fa-layer-group fa-4x sky-blue\"></span>\n                <span>Dashboards</span>\n            </div>\n            <div class=\"nav-item\" (click)=\"navigate('reports')\">\n                <span class=\"fa-solid fa-chart-line fa-4x sky-blue\"></span>\n                <span>Reports</span>\n            </div>\n            <div class=\"nav-item\" (click)=\"navigate('lists')\">\n                <span class=\"fa-solid fa-list-ul fa-4x sky-blue\"></span>\n                <span>Lists</span>\n            </div>\n            <div class=\"nav-item\" (click)=\"navigate('settings')\">\n                <span class=\"fa-solid fa-gear fa-4x sky-blue\"></span>\n                <span>Settings</span>\n            </div> -->\n            @for (item of HomeItems; track item) {\n                <div class=\"nav-item\" (click)=\"navigate(item.Route)\">\n                    <span [ngClass]=\"'fa-solid fa-4x sky-blue ' + item.IconCSSClass\"></span>\n                    <span>{{item.Name}}</span>\n                </div>\n            }\n        </div>\n\n        <app-favorites class=\"home-favorites\"></app-favorites>\n    </div>\n</div>", styles: [".home-container {\n    padding: 15px;\n}\n\n.nav-container {\n    display: grid;\n    grid-template-columns: repeat(4, 1fr);\n    gap: 24px;\n    flex: 1;\n}\n.nav-item {\n    border: solid 1px lightgray;\n    border-radius: 5px;\n    background: #fff;\n    border-radius: 15px;\n    width: 100%;;\n    height: auto;\n    box-sizing: border-box;\n    padding: 25px;\n    text-align: left;\n    display: flex;\n    gap: 26px;\n    vertical-align: middle; \n    font-size: 20px;\n    cursor: pointer;\n}\n.nav-item .k-svg-icon {\n    width: 75px;\n    height: 75px;\n    color: var(--sky-blue);\n}\n.nav-item:hover  {\n    box-shadow: 0px 0px 20px 0px rgba(60, 73, 99, 0.2);\n}\n\n\n.home-favorites {\n    width: 500px;\n}\n\n.sky-blue {\n    color: var(--sky-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"] }]
     }], () => [{ type: i1.SharedService }, { type: i2.Router }], null); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(HomeComponent, { className: "HomeComponent", filePath: "src/lib/home-component/home.component.ts", lineNumber: 10 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(HomeComponent, { className: "HomeComponent", filePath: "src/lib/home-component/home.component.ts", lineNumber: 13 }); })();

package/dist/lib/list-view/list-view.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"list-view.component.d.ts","sourceRoot":"","sources":["../../../src/lib/list-view/list-view.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,MAAM,EAAE,MAAM,eAAe,CAAC;AAClD,OAAO,EAAE,cAAc,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAA;AACxD,OAAO,EAAE,UAAU,EAAE,MAAM,+BAA+B,CAAC;AAC3D,OAAO,EAAE,oBAAoB,EAAE,MAAM,kDAAkD,CAAC;AACxF,OAAO,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;AAC1D,OAAO,EAAE,IAAI,EAAE,MAAM,0BAA0B,CAAC;AAChD,OAAO,EAAE,kBAAkB,EAAE,qBAAqB,EAAE,MAAM,4BAA4B,CAAC;AACvF,OAAO,EAAc,UAAU,EAAY,MAAM,sBAAsB,CAAC;;AAExE,qBAKa,iBAAkB,SAAQ,oBAAqB,YAAW,MAAM;IAe5D,OAAO,CAAC,MAAM;IAAU,OAAO,CAAC,KAAK;IAAkB,OAAO,CAAC,aAAa;IAdlF,UAAU,EAAE,OAAO,CAAS;IAC5B,gBAAgB,EAAE,OAAO,CAAS;IAClC,KAAK,EAAE,UAAU,EAAE,CAAM;IACzB,gBAAgB,EAAE,OAAO,CAAS;IAClC,QAAQ,EAAE,UAAU,EAAE,CAAM;IAC5B,iBAAiB,EAAE,MAAM,EAAE,CAAM;IACjC,WAAW,EAAE,MAAM,EAAE,CAAM;IAI3B,QAAQ,EAAE,MAAM,CAAM;IACtB,eAAe,EAAE,MAAM,CAAM;IAC7B,cAAc,EAAE,UAAU,GAAG,IAAI,CAAQ;gBAE3B,MAAM,EAAE,MAAM,EAAU,KAAK,EAAE,cAAc,EAAU,aAAa,EAAE,aAAa;IAclG,QAAQ,IAAI,OAAO,CAAC,IAAI,CAAC;IAexB,SAAS,CAAC,IAAI,EAAE,IAAI;IAYpB,uBAAuB,CAAC,KAAK,EAAE,qBAAqB,GAAG,IAAI;IAE3D,oBAAoB,CAAC,KAAK,EAAE,kBAAkB,GAAG,IAAI;IAMrD,kBAAkB,CAAC,IAAI,EAAE,OAAO,GAAG,IAAI;IAUjC,UAAU,IAAI,OAAO,CAAC,IAAI,CAAC;IA2BjC,cAAc,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAInC,iBAAiB,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;yCAzGpC,iBAAiB;2CAAjB,iBAAiB;CA4G7B"}
+{"version":3,"file":"list-view.component.d.ts","sourceRoot":"","sources":["../../../src/lib/list-view/list-view.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,MAAM,EAAE,MAAM,eAAe,CAAC;AAClD,OAAO,EAAE,cAAc,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAA;AACxD,OAAO,EAAE,UAAU,EAAE,MAAM,+BAA+B,CAAC;AAC3D,OAAO,EAAE,oBAAoB,EAAE,MAAM,kDAAkD,CAAC;AACxF,OAAO,EAA2B,aAAa,EAAE,MAAM,2BAA2B,CAAC;AACnF,OAAO,EAAE,IAAI,EAAE,MAAM,0BAA0B,CAAC;AAChD,OAAO,EAAE,kBAAkB,EAAE,qBAAqB,EAAE,MAAM,4BAA4B,CAAC;AACvF,OAAO,EAAc,UAAU,EAAY,MAAM,sBAAsB,CAAC;;AAGxE,qBAMa,iBAAkB,SAAQ,oBAAqB,YAAW,MAAM;IAe5D,OAAO,CAAC,MAAM;IAAU,OAAO,CAAC,KAAK;IAAkB,OAAO,CAAC,aAAa;IAdlF,UAAU,EAAE,OAAO,CAAS;IAC5B,gBAAgB,EAAE,OAAO,CAAS;IAClC,KAAK,EAAE,UAAU,EAAE,CAAM;IACzB,gBAAgB,EAAE,OAAO,CAAS;IAClC,QAAQ,EAAE,UAAU,EAAE,CAAM;IAC5B,iBAAiB,EAAE,MAAM,EAAE,CAAM;IACjC,WAAW,EAAE,MAAM,EAAE,CAAM;IAI3B,QAAQ,EAAE,MAAM,CAAM;IACtB,eAAe,EAAE,MAAM,CAAM;IAC7B,cAAc,EAAE,UAAU,GAAG,IAAI,CAAQ;gBAE3B,MAAM,EAAE,MAAM,EAAU,KAAK,EAAE,cAAc,EAAU,aAAa,EAAE,aAAa;IAclG,QAAQ,IAAI,OAAO,CAAC,IAAI,CAAC;IAexB,SAAS,CAAC,IAAI,EAAE,IAAI;IAYpB,uBAAuB,CAAC,KAAK,EAAE,qBAAqB,GAAG,IAAI;IAE3D,oBAAoB,CAAC,KAAK,EAAE,kBAAkB,GAAG,IAAI;IAMrD,kBAAkB,CAAC,IAAI,EAAE,OAAO,GAAG,IAAI;IAUjC,UAAU,IAAI,OAAO,CAAC,IAAI,CAAC;IA2BjC,cAAc,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAInC,iBAAiB,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;yCAzGpC,iBAAiB;2CAAjB,iBAAiB;CA4G7B"}

package/dist/lib/list-view/list-view.component.js

@@ -1,3 +1,9 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
 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) {
@@ -9,7 +15,9 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
 };
 import { Component } from '@angular/core';
 import { BaseBrowserComponent } from '../base-browser-component/base-browser-component';
+import { BaseNavigationComponent } from '@memberjunction/ng-shared';
 import { Metadata } from '@memberjunction/core';
+import { RegisterClass } from '@memberjunction/global';
 import * as i0 from "@angular/core";
 import * as i1 from "@angular/router";
 import * as i2 from "@memberjunction/ng-shared";
@@ -69,7 +77,7 @@ function ListViewComponent_kendo_dialog_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵadvance(2);
     i0.ɵɵproperty("disabled", ctx_r1.showCreateLoader);
 } }
-export class ListViewComponent extends BaseBrowserComponent {
+let ListViewComponent = class ListViewComponent extends BaseBrowserComponent {
     constructor(router, route, sharedService) {
         var _a;
         super();
@@ -170,7 +178,7 @@ export class ListViewComponent extends BaseBrowserComponent {
     onSelectionChange(value) {
         this.selectedEntity = this.entities.find(e => `${e.SchemaName}.${e.Name}` === value) || null;
     }
-}
+};
 ListViewComponent.ɵfac = function ListViewComponent_Factory(t) { return new (t || ListViewComponent)(i0.ɵɵdirectiveInject(i1.Router), i0.ɵɵdirectiveInject(i1.ActivatedRoute), i0.ɵɵdirectiveInject(i2.SharedService)); };
 ListViewComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ListViewComponent, selectors: [["mj-list-view"]], features: [i0.ɵɵInheritDefinitionFeature], decls: 2, vars: 4, consts: [["title", "Lists", "itemType", "list", "iconName", "graph", "addText", "Create New List", "ItemEntityName", "Lists", "CategoryEntityName", "List Categories", "resourceName", "List", 3, "itemClickEvent", "AfterAddFolderEvent", "AfterAddItemEvent", "AfterDeleteItemEvent", "AfterDeleteFolderEvent", "viewModeChangeEvent", "BeforeUpdateItemEvent", "BeforeAddItemEvent", "items", "selectedFolderID", "showLoader"], ["title", "Create New List", 3, "minWidth", "width", "height", "close", 4, "ngIf"], ["title", "Create New List", 3, "close", "minWidth", "width", "height"], ["type", "converging-spinner"], [1, "col-xs-12", "col-sm-6", "example-col"], [1, "popup-actions-btn"], ["kendoButton", "", "themeColor", "info", 1, "cancel-btn", 3, "click", "disabled"], ["kendoButton", "", "fillMode", "outline", "themeColor", "info", 1, "yes-btn", 3, "click", "disabled"], ["text", "Name"], ["placeholder", "Enter List Name", 1, "mt-10", 3, "ngModelChange", "ngModel"], [1, "mt-10"], ["text", "Description"], ["placeholder", "Enter Description", "resizable", "vertical", 1, "mt-10", 3, "ngModelChange", "rows", "ngModel"], ["text", "Select an Entity"], [1, "mt-10", 3, "filterChange", "selectionChange", "data", "filterable"]], template: function ListViewComponent_Template(rf, ctx) { if (rf & 1) {
         i0.ɵɵelementStart(0, "app-generic-browser-list", 0);
@@ -182,8 +190,12 @@ ListViewComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ListViewC
         i0.ɵɵadvance();
         i0.ɵɵproperty("ngIf", ctx.showCreateDialog);
     } }, dependencies: [i3.NgIf, i4.NgControlStatus, i4.NgModel, i5.DialogComponent, i5.DialogActionsComponent, i6.LoaderComponent, i7.ButtonComponent, i8.TextAreaComponent, i8.TextBoxComponent, i9.LabelComponent, i10.DropDownListComponent, i11.GenericBrowserListComponent], styles: [".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}"] });
+ListViewComponent = __decorate([
+    RegisterClass(BaseNavigationComponent, 'Lists')
+], ListViewComponent);
+export { ListViewComponent };
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ListViewComponent, [{
         type: Component,
         args: [{ selector: 'mj-list-view', template: "<app-generic-browser-list \ntitle=\"Lists\"\nitemType=\"list\"\niconName=\"graph\" \n[items]=\"items\"\naddText=\"Create New List\"\nItemEntityName=\"Lists\"\nCategoryEntityName=\"List Categories\" \nresourceName = \"List\"\n(itemClickEvent)=\"itemClick($event)\"\n(AfterAddFolderEvent)=\"onEvent($event)\"\n(AfterAddItemEvent)=\"onEvent($event)\"\n(AfterDeleteItemEvent)=\"onEvent($event)\"\n(AfterDeleteFolderEvent)=\"onEvent($event)\"\n[selectedFolderID]=\"selectedFolderID\"\n[showLoader]=\"showLoader\"\n(viewModeChangeEvent)=\"onViewModeChange($event)\"\n(BeforeUpdateItemEvent)=\"onBeforeUpdateItemEvent($event)\"\n(BeforeAddItemEvent)=\"onBeforeAddItemEvent($event)\"\n/>\n<kendo-dialog\ntitle=\"Create New List\"\n*ngIf=\"showCreateDialog\"\n(close)=\"toggleCreateDialog(false)\"\n[minWidth]=\"250\"\n[width]=\"650\"\n[height]=\"550\"\n>\n    @if(showCreateLoader){\n        <kendo-loader type=\"converging-spinner\"></kendo-loader>\n    }\n    @else {\n        <div class=\"col-xs-12 col-sm-6 example-col\">\n            <kendo-label text=\"Name\">\n                <kendo-textbox  \n                    class=\"mt-10\"\n                    placeholder=\"Enter List Name\" \n                    [(ngModel)]=\"listName\">\n                </kendo-textbox>\n            </kendo-label>\n            <div class=\"mt-10\">\n                <kendo-label text=\"Description\">\n                    <kendo-textarea\n                        class=\"mt-10\"\n                        placeholder=\"Enter Description\"\n                        [rows]=\"3\"\n                        resizable=\"vertical\"\n                        [(ngModel)]=\"listDescription\"\n                    ></kendo-textarea>\n                </kendo-label>\n            </div>\n            <div class=\"mt-10\">\n                <kendo-label text=\"Select an Entity\">\n                    <kendo-dropdownlist \n                        class=\"mt-10\"\n                        [data]=\"entityNames\"\n                        [filterable]=\"true\"\n                        (filterChange)=\"onFilterChange($event)\"\n                        (selectionChange)=\"onSelectionChange($event)\"\n                    />\n                </kendo-label>\n            </div>\n        </div>\n    }\n    <kendo-dialog-actions class=\"popup-actions-btn\">\n        <button class=\"cancel-btn\" (click)=\"createList()\" [disabled]=\"!listName || !selectedEntity || showCreateLoader\" kendoButton themeColor=\"info\">\n          Create\n        </button>\n        <button  class=\"yes-btn\" (click)=\"toggleCreateDialog(false)\" [disabled]=\"showCreateLoader\" kendoButton fillMode=\"outline\" themeColor=\"info\">\n          Cancel\n        </button>\n    </kendo-dialog-actions>\n</kendo-dialog>", styles: ["\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"] }]
     }], () => [{ type: i1.Router }, { type: i1.ActivatedRoute }, { type: i2.SharedService }], null); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ListViewComponent, { className: "ListViewComponent", filePath: "src/lib/list-view/list-view.component.ts", lineNumber: 15 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ListViewComponent, { className: "ListViewComponent", filePath: "src/lib/list-view/list-view.component.ts", lineNumber: 17 }); })();