@memberjunction/ng-explorer-core 2.7.1 → 2.9.0

package/dist/lib/resource-browser/resource-browser.component.js

@@ -0,0 +1,855 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { Item, ItemType } from '../../generic/Item.types';
+import { Subject, debounceTime } from 'rxjs';
+import { LogError, Metadata, RunView } from '@memberjunction/core';
+import * as i0 from "@angular/core";
+import * as i1 from "@memberjunction/ng-shared";
+import * as i2 from "@angular/common";
+import * as i3 from "@progress/kendo-angular-grid";
+import * as i4 from "@progress/kendo-angular-dialog";
+import * as i5 from "@progress/kendo-angular-indicators";
+import * as i6 from "@progress/kendo-angular-buttons";
+import * as i7 from "@progress/kendo-angular-inputs";
+import * as i8 from "@progress/kendo-angular-layout";
+import * as i9 from "@memberjunction/ng-entity-form-dialog";
+function ResourceBrowserComponent_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+    const _r2 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "span", 21);
+    i0.ɵɵlistener("click", function ResourceBrowserComponent_Conditional_4_Template_span_click_0_listener() { i0.ɵɵrestoreView(_r2); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.goToParent()); });
+    i0.ɵɵelementEnd();
+    i0.ɵɵelement(1, "span", 22);
+} }
+function ResourceBrowserComponent_ng_template_14_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "span", 23);
+} }
+function ResourceBrowserComponent_Conditional_21_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "kendo-loader", 17);
+} }
+function ResourceBrowserComponent_Conditional_22_Conditional_0_ng_template_6_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    const _r6 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 36);
+    i0.ɵɵlistener("click", function ResourceBrowserComponent_Conditional_22_Conditional_0_ng_template_6_Conditional_1_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r6); const dataItem_r7 = i0.ɵɵnextContext().$implicit; const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.editItem(dataItem_r7)); });
+    i0.ɵɵelement(1, "span", 37);
+    i0.ɵɵelementEnd();
+} }
+function ResourceBrowserComponent_Conditional_22_Conditional_0_ng_template_6_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    const _r8 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 36);
+    i0.ɵɵlistener("click", function ResourceBrowserComponent_Conditional_22_Conditional_0_ng_template_6_Conditional_2_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r8); const dataItem_r7 = i0.ɵɵnextContext().$implicit; const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.deleteItem(dataItem_r7)); });
+    i0.ɵɵelement(1, "span", 38);
+    i0.ɵɵelementEnd();
+} }
+function ResourceBrowserComponent_Conditional_22_Conditional_0_ng_template_6_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+    const _r9 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 39);
+    i0.ɵɵlistener("click", function ResourceBrowserComponent_Conditional_22_Conditional_0_ng_template_6_Conditional_3_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r9); const dataItem_r7 = i0.ɵɵnextContext().$implicit; const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.unlinkItem(dataItem_r7)); });
+    i0.ɵɵelement(1, "span", 40);
+    i0.ɵɵelementEnd();
+} }
+function ResourceBrowserComponent_Conditional_22_Conditional_0_ng_template_6_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 33);
+    i0.ɵɵtemplate(1, ResourceBrowserComponent_Conditional_22_Conditional_0_ng_template_6_Conditional_1_Template, 2, 0, "button", 34)(2, ResourceBrowserComponent_Conditional_22_Conditional_0_ng_template_6_Conditional_2_Template, 2, 0, "button", 34)(3, ResourceBrowserComponent_Conditional_22_Conditional_0_ng_template_6_Conditional_3_Template, 2, 0, "button", 35);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext(3);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r2.EnableItemEdit ? 1 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r2.EnableItemDelete ? 2 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r2.EnableRemoveLink ? 3 : -1);
+} }
+function ResourceBrowserComponent_Conditional_22_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+    const _r5 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "kendo-grid", 26);
+    i0.ɵɵlistener("cellClick", function ResourceBrowserComponent_Conditional_22_Conditional_0_Template_kendo_grid_cellClick_0_listener($event) { i0.ɵɵrestoreView(_r5); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.onCellItemClicked($event)); });
+    i0.ɵɵelement(1, "kendo-grid-column", 27)(2, "kendo-grid-column", 28)(3, "kendo-grid-column", 29)(4, "kendo-grid-column", 30);
+    i0.ɵɵelementStart(5, "kendo-grid-column", 31);
+    i0.ɵɵtemplate(6, ResourceBrowserComponent_Conditional_22_Conditional_0_ng_template_6_Template, 4, 3, "ng-template", 32);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext(2);
+    i0.ɵɵproperty("kendoGridBinding", ctx_r2.Items);
+} }
+function ResourceBrowserComponent_Conditional_22_Conditional_1_For_2_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    const _r11 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 51);
+    i0.ɵɵlistener("click", function ResourceBrowserComponent_Conditional_22_Conditional_1_For_2_Conditional_2_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r11); const item_r12 = i0.ɵɵnextContext().$implicit; const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.editItem(item_r12)); });
+    i0.ɵɵelement(1, "span", 37);
+    i0.ɵɵelementEnd();
+} }
+function ResourceBrowserComponent_Conditional_22_Conditional_1_For_2_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+    const _r13 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 52);
+    i0.ɵɵlistener("click", function ResourceBrowserComponent_Conditional_22_Conditional_1_For_2_Conditional_3_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r13); const item_r12 = i0.ɵɵnextContext().$implicit; const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.deleteItem(item_r12)); });
+    i0.ɵɵelement(1, "span", 38);
+    i0.ɵɵelementEnd();
+} }
+function ResourceBrowserComponent_Conditional_22_Conditional_1_For_2_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+    const _r14 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 39);
+    i0.ɵɵlistener("click", function ResourceBrowserComponent_Conditional_22_Conditional_1_For_2_Conditional_4_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r14); const item_r12 = i0.ɵɵnextContext().$implicit; const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.unlinkItem(item_r12)); });
+    i0.ɵɵelement(1, "span", 40);
+    i0.ɵɵelementEnd();
+} }
+function ResourceBrowserComponent_Conditional_22_Conditional_1_For_2_Conditional_6_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 46);
+} if (rf & 2) {
+    const item_r12 = i0.ɵɵnextContext().$implicit;
+    const ctx_r2 = i0.ɵɵnextContext(3);
+    i0.ɵɵproperty("title", item_r12.Name + "(Shared)")("ngClass", ctx_r2.getIconForResourceType(item_r12));
+} }
+function ResourceBrowserComponent_Conditional_22_Conditional_1_For_2_Conditional_7_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "span", 47);
+} if (rf & 2) {
+    const item_r12 = i0.ɵɵnextContext().$implicit;
+    const ctx_r2 = i0.ɵɵnextContext(3);
+    i0.ɵɵproperty("title", item_r12.Name)("ngClass", ctx_r2.getIconForResourceType(item_r12));
+} }
+function ResourceBrowserComponent_Conditional_22_Conditional_1_For_2_Template(rf, ctx) { if (rf & 1) {
+    const _r10 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "kendo-card", 41)(1, "div", 42);
+    i0.ɵɵtemplate(2, ResourceBrowserComponent_Conditional_22_Conditional_1_For_2_Conditional_2_Template, 2, 0, "button", 43)(3, ResourceBrowserComponent_Conditional_22_Conditional_1_For_2_Conditional_3_Template, 2, 0, "button", 44)(4, ResourceBrowserComponent_Conditional_22_Conditional_1_For_2_Conditional_4_Template, 2, 0, "button", 35);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(5, "kendo-card-body", 45);
+    i0.ɵɵlistener("click", function ResourceBrowserComponent_Conditional_22_Conditional_1_For_2_Template_kendo_card_body_click_5_listener() { const item_r12 = i0.ɵɵrestoreView(_r10).$implicit; const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.itemClick(item_r12)); });
+    i0.ɵɵtemplate(6, ResourceBrowserComponent_Conditional_22_Conditional_1_For_2_Conditional_6_Template, 1, 2, "i", 46)(7, ResourceBrowserComponent_Conditional_22_Conditional_1_For_2_Conditional_7_Template, 1, 2, "span", 47);
+    i0.ɵɵelementStart(8, "div", 48)(9, "h5", 49);
+    i0.ɵɵtext(10);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(11, "p", 50);
+    i0.ɵɵtext(12);
+    i0.ɵɵelementEnd()()()();
+} if (rf & 2) {
+    const item_r12 = ctx.$implicit;
+    const ctx_r2 = i0.ɵɵnextContext(3);
+    i0.ɵɵadvance(2);
+    i0.ɵɵconditional(ctx_r2.EnableItemEdit && (!item_r12.IsLink || item_r12.LinkPermissionLevel === "Owner" || item_r12.LinkPermissionLevel === "Edit") ? 2 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r2.EnableItemDelete && (!item_r12.IsLink || item_r12.LinkPermissionLevel === "Owner") ? 3 : ctx_r2.EnableRemoveLink && item_r12.IsLink ? 4 : -1);
+    i0.ɵɵadvance(3);
+    i0.ɵɵconditional(item_r12.IsLink ? 6 : 7);
+    i0.ɵɵadvance(4);
+    i0.ɵɵtextInterpolate(item_r12.Name);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(item_r12.Description);
+} }
+function ResourceBrowserComponent_Conditional_22_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 25);
+    i0.ɵɵrepeaterCreate(1, ResourceBrowserComponent_Conditional_22_Conditional_1_For_2_Template, 13, 5, "kendo-card", 41, i0.ɵɵrepeaterTrackByIdentity);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance();
+    i0.ɵɵrepeater(ctx_r2.Items);
+} }
+function ResourceBrowserComponent_Conditional_22_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵtemplate(0, ResourceBrowserComponent_Conditional_22_Conditional_0_Template, 7, 1, "kendo-grid", 24)(1, ResourceBrowserComponent_Conditional_22_Conditional_1_Template, 3, 0, "div", 25);
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext();
+    i0.ɵɵconditional(ctx_r2.DisplayMode === "List" ? 0 : 1);
+} }
+function ResourceBrowserComponent_kendo_dialog_23_Template(rf, ctx) { if (rf & 1) {
+    const _r15 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "kendo-dialog", 53);
+    i0.ɵɵlistener("close", function ResourceBrowserComponent_kendo_dialog_23_Template_kendo_dialog_close_0_listener() { i0.ɵɵrestoreView(_r15); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onConfirmDeleteItem(false)); });
+    i0.ɵɵelementStart(1, "p", 54);
+    i0.ɵɵtext(2);
+    i0.ɵɵelementStart(3, "b");
+    i0.ɵɵtext(4);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(5, "kendo-dialog-actions", 55)(6, "button", 56);
+    i0.ɵɵlistener("click", function ResourceBrowserComponent_kendo_dialog_23_Template_button_click_6_listener() { i0.ɵɵrestoreView(_r15); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onConfirmDeleteItem(true)); });
+    i0.ɵɵtext(7, " Yes ");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(8, "button", 57);
+    i0.ɵɵlistener("click", function ResourceBrowserComponent_kendo_dialog_23_Template_button_click_8_listener() { i0.ɵɵrestoreView(_r15); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onConfirmDeleteItem(false)); });
+    i0.ɵɵtext(9, " No ");
+    i0.ɵɵelementEnd()()();
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("minWidth", 450)("width", 650);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate1(" Are you sure you want to ", (ctx_r2.selectedItem == null ? null : ctx_r2.selectedItem.IsLink) && (ctx_r2.selectedItem == null ? null : ctx_r2.selectedItem.LinkPermissionLevel) === "Owner" || !(ctx_r2.selectedItem == null ? null : ctx_r2.selectedItem.IsLink) ? "delete" : "unlink", " ");
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate1("", ctx_r2.selectedItem == null ? null : ctx_r2.selectedItem.Name, "?");
+} }
+function ResourceBrowserComponent_kendo_dialog_24_Template(rf, ctx) { if (rf & 1) {
+    const _r16 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "kendo-dialog", 58);
+    i0.ɵɵlistener("close", function ResourceBrowserComponent_kendo_dialog_24_Template_kendo_dialog_close_0_listener() { i0.ɵɵrestoreView(_r16); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.toggleCreateFolderView()); });
+    i0.ɵɵelementStart(1, "div", 8)(2, "kendo-textbox", 59);
+    i0.ɵɵlistener("valueChange", function ResourceBrowserComponent_kendo_dialog_24_Template_kendo_textbox_valueChange_2_listener($event) { i0.ɵɵrestoreView(_r16); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onCreateFolderKeyup($event)); });
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(3, "kendo-dialog-actions", 55)(4, "button", 56);
+    i0.ɵɵlistener("click", function ResourceBrowserComponent_kendo_dialog_24_Template_button_click_4_listener() { i0.ɵɵrestoreView(_r16); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.createFolder()); });
+    i0.ɵɵtext(5, " Create ");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(6, "button", 57);
+    i0.ɵɵlistener("click", function ResourceBrowserComponent_kendo_dialog_24_Template_button_click_6_listener() { i0.ɵɵrestoreView(_r16); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.toggleCreateFolderView()); });
+    i0.ɵɵtext(7, " Cancel ");
+    i0.ɵɵelementEnd()()();
+} if (rf & 2) {
+    i0.ɵɵproperty("minWidth", 250)("width", 450);
+} }
+export class NewItemOption {
+}
+export class ResourceBrowserComponent {
+    /**
+     * The name of the type of resource to display, cannot be changed after it is initially set
+     */
+    get ResourceTypeName() {
+        return this._ResourceTypeName;
+    }
+    set ResourceTypeName(value) {
+        if (this._ResourceTypeName === null) {
+            this._ResourceTypeName = value;
+        }
+        else {
+            // we do not ever want to allow an instance of this component to be "reused" where the Resource Type is changed so throw an exception here
+            throw new Error('Resource Type cannot be changed after it has been set');
+        }
+    }
+    /**
+     * This property will be true whenever the component is in the process of loading data
+     */
+    get IsLoading() {
+        return this._isLoading;
+    }
+    /**
+     * This is the field name in the Resource Type's Entity that is used to store the CategoryID (e.g. the Folder ID) for the resource.
+     * Not all entities in resource types support a CategoryID concept, so this can be null. This property is read only and
+     * is auto-populated during the configuration of the component.
+     */
+    get CategoryIDFieldName() {
+        return this._CategoryIDFieldName;
+    }
+    /**
+     * This is the field name in the Resource type's Category Entity, if a Category Entity was provided, that has the recursive/self-referencing foreign key to the parent category.
+     * This field is read only and is auto-populated during the configuration of the component.
+     */
+    get CategoryParentIDFieldName() {
+        return this._CategoryParentIDFieldName;
+    }
+    /**
+     * This is the field name in the Resource Type's Entity that is used to store the UserID of the user that OWNS the resource. Commonly, but not always a field called UserID, but can be
+     * any field in the Resource Type's entity that is a foreign key to the Users entity. This property is read only and is auto-populated during the configuration of the component.
+     */
+    get UserIDFieldName() {
+        return this._UserIDFieldName;
+    }
+    /**
+     * The current list of items being displayed in the browser, DO NOT MODIFY THIS! This is read only and is auto-populated by the component.
+     */
+    get Items() {
+        return this._items;
+    }
+    constructor(sharedService) {
+        this.sharedService = sharedService;
+        /*******************************************************************************************
+         * PROPERTIES
+         *******************************************************************************************/
+        this._ResourceTypeName = null;
+        /**
+         * Whether or not to enable categories, if set to false, categories will be ignored and not displayed
+         */
+        this.EnableCategories = true;
+        /**
+         * This property determines if the UI will include a button on items in the display to edit. The button will only be shown if the user has edit permissions, but this is a global setting to turn on/off the button even if the user has permissions. Default is true.
+         */
+        this.EnableItemEdit = true;
+        /**
+         * This property determines if the UI will include a button on items in the display to delete. The button will only be shown if the user has delete permissions, but this is a global setting to turn on/off the button even if the user has permissions. Default is true.
+         */
+        this.EnableItemDelete = true;
+        /**
+         * This proprerty determines if the UI will include a button on items in the display to unlink/remove a link to a shared resource (owned by another user).
+         * The button will only be shown if the user has permissions, but this is a global setting to turn on/off the button even if the user has permissions. Default is true.
+         */
+        this.EnableRemoveLink = true;
+        /**
+         * Array of NewItemOption objects that will be displayed in the Create New dropdown. Defaults to having a single entry for creating a new folder, you can remove this or add to it.
+         */
+        this.NewItemOptions = [{
+                Text: 'New Folder',
+                Description: 'Create a new folder',
+                Icon: 'folder',
+                Action: () => {
+                    console.log('New Folder');
+                }
+            }];
+        /**
+         * The visual display mode for this component, tile will show the contents in tiles that are spaced and wrapped based on the viewport, list will show the details of the items in a list, and tree will show the items in a tree view - tree view NOT implemented yet
+         */
+        this.DisplayMode = 'Tile';
+        /**
+         * Fires whenever a resource/item is selected within the component
+         */
+        this.ResourceSelected = new EventEmitter();
+        /*******************************************************************************************
+         * EVENTS
+         *******************************************************************************************/
+        /**
+         * Fires whenever the category (e.g. the folder) the user is currently viewing changes. This can happen when a user creates a new folder and navigates to it, navigates to an existing folder, goes "up" in the folder hierarchy, etc.
+         */
+        this.CategoryChanged = new EventEmitter();
+        /**
+         * Fires whenever the user changes the display mode of the component
+         */
+        this.DisplayModeChanged = new EventEmitter();
+        this._isLoading = false;
+        this._CategoryParentIDFieldName = undefined;
+        this._UserIDFieldName = undefined;
+        this._items = [];
+        // JS code here and below from old component....
+        this._filterDebounceTime = 250;
+        this.filterItemsSubject = new Subject();
+        this.filter = '';
+        this.sourceItems = null;
+        this.selectedItem = null;
+        this.deleteDialogOpened = false;
+        this.copyFromDialogOpened = false;
+        this.createFolderDialogOpened = false;
+        this.newFolderText = "Sample Folder";
+        this._allResourceTypes = [];
+        this.createNewRecordName = "Record";
+        this.entityObjectName = "";
+        /**
+         * Options for the create button dropdown
+         */
+        this.dropdownOptions = [
+            { text: "Folder" }
+        ];
+        this._currentDeleteOrUnlinkState = false;
+        this.filterItemsSubject
+            .pipe(debounceTime(this._filterDebounceTime))
+            .subscribe(() => this.filterItems(this.filter));
+    }
+    ngOnInit() {
+        return __awaiter(this, void 0, void 0, function* () {
+            var _a, _b, _c;
+            this._allResourceTypes = this.sharedService.ResourceTypes;
+            const rt = this._allResourceTypes.find(rt => rt.Entity === this.ResourceTypeName);
+            if (!rt)
+                throw new Error(`Resource Type ${this.ResourceTypeName} not found`);
+            else if (!rt.EntityID)
+                throw new Error(`Resource Type ${this.ResourceTypeName} does not have an EntityID specified. EntityID is required for any Resource Type to be used with this component.`);
+            else
+                this.ResourceType = rt;
+            // now get the entity info for the resource type and for its category entity, if one is specified. 
+            const md = new Metadata();
+            const resourceTypeEntity = md.EntityByID(this.ResourceType.EntityID);
+            const categoryEntity = this.ResourceType.CategoryEntityID ? md.EntityByID(this.ResourceType.CategoryEntityID) : null;
+            // figure out the column inside the entity that points to the categoryEntity, if we have a category entity
+            if (categoryEntity) {
+                this._CategoryIDFieldName = (_a = resourceTypeEntity.Fields.find(f => f.RelatedEntityID === categoryEntity.ID)) === null || _a === void 0 ? void 0 : _a.Name;
+                const usersEntity = md.EntityByName("Users");
+                this._UserIDFieldName = (_b = resourceTypeEntity.Fields.find(f => f.RelatedEntityID === usersEntity.ID)) === null || _b === void 0 ? void 0 : _b.Name;
+                this._CategoryParentIDFieldName = (_c = categoryEntity.Fields.find(f => f.RelatedEntityID === categoryEntity.ID)) === null || _c === void 0 ? void 0 : _c.Name;
+            }
+            yield this.Refresh();
+        });
+    }
+    /**
+     * Refresh the component from the database based on other current state variables.
+     */
+    Refresh() {
+        return __awaiter(this, void 0, void 0, function* () {
+            try {
+                const md = new Metadata();
+                if (!this.ResourceType || !this.ResourceType.Entity)
+                    throw new Error('Resource Type not set, or Resource Type does not have an Entity specified');
+                const rv = new RunView();
+                // create a combined filter for the SQL query that combines the user's provided ItemFilter, if provided, with a user filter that only includes items that are OWNED by the current user
+                // and finally filter on the current category, if one is set and we have a category entity
+                const combinedFilter = `${this.ItemFilter ? '(' + this.ItemFilter + ') AND' : ''}
+                              ([${this.UserIDFieldName}] = '${md.CurrentUser.ID}') 
+                              ${this.CurrentCategoryID && this.CategoryIDFieldName ? `AND ([${this.CategoryIDFieldName}] = '${this.CurrentCategoryID}')` : ''}`;
+                const itemResult = yield rv.RunView({
+                    EntityName: this.ResourceType.Entity,
+                    ExtraFilter: combinedFilter,
+                    OrderBy: this.OrderBy
+                });
+                if (!itemResult || !itemResult.Success)
+                    throw new Error(`Failed to load items for ${this.ResourceType.Entity}`);
+                this._items = itemResult.Results.map(r => new Item(r, ItemType.Resource));
+            }
+            catch (error) {
+                LogError(error);
+                console.error(error);
+            }
+        });
+    }
+    //wrapper function for the grid view
+    onCellItemClicked(event) {
+        this.itemClick(event.dataItem);
+    }
+    itemClick(item) {
+        if (!item) {
+            return;
+        }
+        this.ResourceSelected.emit(item);
+    }
+    backButtonClicked() {
+        // this.backButtonClickEvent.emit();
+    }
+    addResourceButtonClicked() {
+        return __awaiter(this, void 0, void 0, function* () {
+            // let event: BeforeAddItemEvent = new BeforeAddItemEvent("");
+            // this.BeforeAddItemEvent.emit(event);
+            // if(event.Cancel){
+            //   return;
+            // }
+            // const resourceName: string = `Sample ${this.ItemEntityName}`;
+            // const md: Metadata = new Metadata();
+            // const entity: BaseEntity = await md.GetEntityObject<BaseEntity>(this.ItemEntityName);
+            // entity.NewRecord();
+            // //some entities, like resources, have common fields 
+            // //we can try to set here
+            // entity.Set("Name", resourceName);
+            // entity.Set("UserID", md.CurrentUser.ID);
+            // let saveResult: boolean = await entity.Save();
+            // if(saveResult){
+            //   this.showNotification(`successfully created ${resourceName}`, "info");
+            //   let item: Item = new Item(entity, ItemType.Entity);
+            //   item.Name = resourceName;
+            //   this.AfterAddItemEvent.emit(new AfterAddItemEvent(item));
+            // }
+            // else{
+            //   this.showNotification(`Unable to create ${resourceName}`, "error");
+            // }
+        });
+    }
+    createFolder() {
+        return __awaiter(this, void 0, void 0, function* () {
+            // this.toggleCreateFolderView(false);
+            // let event: BeforeAddFolderEvent = new BeforeAddFolderEvent(this.newFolderText);
+            // if(event.Cancel){
+            //   return;
+            // }
+            // let folderName: string = this.newFolderText;
+            // let description: string = "";
+            // const md: Metadata = new Metadata();
+            // const folderEntity: BaseEntity = await md.GetEntityObject<BaseEntity>(this.CategoryEntityName);
+            // folderEntity.NewRecord();
+            // folderEntity.Set("Name", folderName);
+            // folderEntity.Set("ParentID", this.selectedFolderID);
+            // folderEntity.Set("Description", description);
+            // folderEntity.Set("UserID", md.CurrentUser.ID);
+            // if(this.categoryEntityID){
+            //   folderEntity.Set("EntityID", this.categoryEntityID);
+            // }
+            // let saveResult: boolean = await folderEntity.Save();
+            // if(saveResult){
+            //   this.showNotification(`successfully created folder ${folderName}`, "info");
+            //   let folder: Folder = new Folder(folderEntity.Get("ID"), folderEntity.Get("Name"));
+            //   folder.Description = folderEntity.Get("Description");
+            //   let item: Item = new Item(folder, ItemType.Folder);
+            //   let event: AfterAddFolderEvent = new AfterAddFolderEvent(item);
+            //   this.AfterAddFolderEvent.emit(event);
+            //   if(event.Cancel){
+            //     return;
+            //   }
+            //   //navigate to the newly created folder
+            //   //by raising an item click event
+            //   this.itemClick(item);
+            // }
+            // else{
+            //   this.sharedService.CreateSimpleNotification(`Unable to create folder ${folderName}`, "error", 3500);
+            // }
+            // this.newFolderText = "Sample Folder";
+        });
+    }
+    unlinkItem(item) {
+        return __awaiter(this, void 0, void 0, function* () {
+            yield this.deleteOrUnlink(item, false);
+        });
+    }
+    deleteOrUnlink(item, bDelete) {
+        return __awaiter(this, void 0, void 0, function* () {
+            // this._currentDeleteOrUnlinkState = bDelete;
+            // if(!item){
+            //   return;
+            // }
+            // this.selectedItem = item;
+            // if(item.Type === ItemType.Folder && bDelete){
+            //   let event: BeforeDeleteFolderEvent = new BeforeDeleteFolderEvent(item);
+            //   this.BeforeDeleteFolderEvent.emit(event);
+            //   if(event.Cancel){
+            //     return;
+            //   }
+            //   this.deleteDialogOpened = true;
+            // }
+            // else if(item.Type === ItemType.Entity && bDelete){
+            //   let event: BeforeDeleteItemEvent = new BeforeDeleteItemEvent(item);
+            //   this.BeforeDeleteItemEvent.emit(event);
+            //   if(event.Cancel){
+            //     return;
+            //   }
+            //   this.deleteDialogOpened = true;
+            // }
+            // else if (item.Type === ItemType.Entity && !bDelete) {
+            //   let event: BeforeUnlinkItemEvent = new BeforeUnlinkItemEvent(item);
+            //   this.BeforeUnlinkItemEvent.emit(event);
+            //   if(event.Cancel){
+            //     return;
+            //   }
+            //   this.deleteDialogOpened = true;
+            // }  
+        });
+    }
+    goToParent() {
+        //this.NavigateToParentEvent.emit();
+    }
+    deleteItem(item) {
+        return __awaiter(this, void 0, void 0, function* () {
+            yield this.deleteOrUnlink(item, true);
+        });
+    }
+    onConfirmDeleteItem(shouldDelete) {
+        return __awaiter(this, void 0, void 0, function* () {
+            // this.deleteDialogOpened = false;
+            // if(!this.selectedItem || !shouldDelete){
+            //   return;
+            // }
+            // let item: Item = this.selectedItem;
+            // if(item.Type === ItemType.Folder && this._currentDeleteOrUnlinkState){
+            //   let deleteResult = await this.deleteFolder(item);
+            //   if(deleteResult){
+            //     let deleteFolderEvent: AfterDeleteFolderEvent = new AfterDeleteFolderEvent(item);
+            //     this.AfterDeleteFolderEvent.emit(deleteFolderEvent);
+            //   }
+            // }
+            // else if(item.Type === ItemType.Entity && this._currentDeleteOrUnlinkState){
+            //   await this.deleteResource(item);
+            //   let deleteItemEvent: AfterDeleteItemEvent = new AfterDeleteItemEvent(item);
+            //   this.AfterDeleteItemEvent.emit(deleteItemEvent);
+            // }
+            // else if(item.Type === ItemType.Entity && !this._currentDeleteOrUnlinkState){
+            //   await this.unlinkResource(item);
+            //   let unlinkItemEvent: AfterUnlinkItemEvent = new AfterUnlinkItemEvent(item);
+            //   this.AfterUnlinkItemEvent.emit(unlinkItemEvent);
+            // }
+            // this.selectedItem = null;
+        });
+    }
+    deleteFolder(item) {
+        return __awaiter(this, void 0, void 0, function* () {
+            return true;
+            // const folder: Folder = <Folder>item.Data;
+            // //the DB will throw an error if we attempt to delete a folder that has children
+            // //i.e. sub folders or resources
+            // //so the default behavior is to notify the user that the delete operation cannot
+            // //go through 
+            // const folderHasChildren: boolean = await this.doesFolderHaveChildren(folder.ID);
+            // if(folderHasChildren){
+            //   this.showNotification(`unable to delete folder ${folder.Name} because it has children`, "error");
+            //   return false;
+            // }
+            // this.showLoader = true;
+            // const md = new Metadata();
+            // let folderEntity: BaseEntity = await md.GetEntityObject<BaseEntity>(this.CategoryEntityName);
+            // let pkv: KeyValuePair = new KeyValuePair();
+            // pkv.FieldName = "ID";
+            // pkv.Value = folder.ID;
+            // let compositeKey: CompositeKey = new CompositeKey([pkv]);
+            // //create view browser component - this will be used to display views
+            // //then create a new component for applications that wraps around the view browser component 
+            // let loadResult = await folderEntity.InnerLoad(compositeKey);
+            // if(!loadResult){
+            //   this.sharedService.CreateSimpleNotification(`Unable to fetch folder ${folder.Name}`, "error", 3500);
+            //   this.showLoader = false;
+            //   return false;
+            // }
+            // let deleteResult = await folderEntity.Delete();
+            // if(!deleteResult){
+            //   this.sharedService.CreateSimpleNotification(`Unable to delete folder ${folder.Name}`, "error", 3500);
+            //   this.showLoader = false;
+            //   return false;
+            // }
+            // else{
+            //   this.sharedService.CreateSimpleNotification(`Successfully deleted folder ${folder.Name}`, "info", 2000);
+            //   this.showLoader = false;
+            // }
+            // return true;
+        });
+    }
+    deleteResource(item) {
+        return __awaiter(this, void 0, void 0, function* () {
+            return true;
+            // let genericEntity: BaseEntity = <BaseEntity>item.Data;
+            // if(!genericEntity){
+            //   return false;
+            // }
+            // //the only assumption we are making here is that the entityID
+            // //is a number
+            // const entityID = this.TryGetID(genericEntity);
+            // if (entityID && entityID.length > 0) {
+            //   const md = new Metadata();
+            //   let entityObject = await md.GetEntityObject(this.ItemEntityName);
+            //   let pkv: KeyValuePair = new KeyValuePair();
+            //   pkv.FieldName = "ID";
+            //   pkv.Value = entityID;
+            //   let compositeKey: CompositeKey = new CompositeKey([pkv]);
+            //   let loadResult = await entityObject.InnerLoad(compositeKey);
+            //   if(loadResult){
+            //     let deleteResult = await entityObject.Delete();
+            //     if(deleteResult){
+            //       this.showNotification(`successfully deleted`, "info");
+            //       return true;
+            //     }
+            //     else{
+            //       this.showNotification(`Unable to delete`, "error");
+            //     }
+            //   }
+            //   else{
+            //     this.showNotification(`unable to fetch`, "error");
+            //   }
+            // }
+            // return false; 
+        });
+    }
+    unlinkResource(item) {
+        return __awaiter(this, void 0, void 0, function* () {
+            return true;
+            // // remove the link by removing the Resource Link record
+            // if (item.ResourceLinkID) {
+            //   const md = new Metadata();
+            //   const link = await md.GetEntityObject<ResourceLinkEntity>("Resource Links");
+            //   if (await link.Load(item.ResourceLinkID))
+            //     return await link.Delete();  
+            //   else
+            //     return false;
+            // }
+            // else
+            //   return false;
+        });
+    }
+    doesFolderHaveChildren(folderID) {
+        return __awaiter(this, void 0, void 0, function* () {
+            return true;
+            // const md: Metadata = new Metadata();
+            // const rv: RunView = new RunView();
+            // const folderResult = await rv.RunView({
+            //   EntityName:this.CategoryEntity,
+            //   ExtraFilter: `ParentID ='${folderID}'`
+            // });
+            // return folderResult && folderResult.Success && folderResult.Results.length > 0;
+        });
+    }
+    showNotification(message, type) {
+        // if(this.showNotifications){
+        //   this.sharedService.CreateSimpleNotification(message, type, 1000);
+        // }
+    }
+    TryGetID(data) {
+        if (data && data.ID) {
+            return data.ID;
+        }
+        else if (typeof data.Get === "function") {
+            return data.Get("ID");
+        }
+    }
+    changeViewMode(mode) {
+        // this.displayAsGrid = mode === 'grid';
+        // this.viewModeChangeEvent.emit(mode);
+    }
+    onKeyup(Value) {
+        this.filter = Value;
+        this.filterItemsSubject.next(true);
+    }
+    onCreateFolderKeyup(value) {
+        this.newFolderText = value;
+    }
+    filterItems(filter) {
+        if (!this.sourceItems) {
+            this.sourceItems = [...this._items];
+        }
+        if (!filter) {
+            this._items = [...this.sourceItems];
+            return;
+        }
+        this._items = this.sourceItems.filter(item => {
+            return item.Name.toLowerCase().includes(filter.toLowerCase());
+        });
+    }
+    SetFavoriteStatus(item) {
+        return __awaiter(this, void 0, void 0, function* () {
+            // if(!item){
+            //   return;
+            // }
+            // item.Favorite = !item.Favorite;
+            // const md: Metadata = new Metadata();
+            // let entityName: string = item.Type === ItemType.Folder ? this.CategoryEntityName : this.ItemEntityName;
+            // let compositeKey: CompositeKey = new CompositeKey([{FieldName: "ID", Value: item.Data.ID}]);
+            // await md.SetRecordFavoriteStatus(md.CurrentUser.ID, entityName, compositeKey, item.Favorite);
+        });
+    }
+    editItem(item) {
+        // if(!item){
+        //   return;
+        // }
+        // if(item.Type === ItemType.Folder){
+        //   let event: BeforeUpdateFolderEvent = new BeforeUpdateFolderEvent(item);
+        //   this.BeforeUpdateFolderEvent.emit(event);
+        //   if(event.Cancel){
+        //     return;
+        //   }
+        // }
+        // else{
+        //   let event: BeforeUpdateItemEvent = new BeforeUpdateItemEvent(item);
+        //   this.BeforeUpdateItemEvent.emit(event);
+        //   if(event.Cancel){
+        //     return;
+        //   }
+        // }
+    }
+    onDropdownItemClick(data) {
+        return __awaiter(this, void 0, void 0, function* () {
+            // if(!data || !data.text){
+            //   return;
+            // }
+            // if(data.text === "Folder"){
+            //   this.toggleCreateFolderView();
+            // }
+            // else if(data.text === this.resourceName){
+            //   this.addResourceButtonClicked();
+            // }
+            // else if(data.text === this.createNewRecordName){
+            //   if(this.entityFormDialogRef){
+            //     // create a new record for the given entity
+            //     const md = new Metadata();
+            //     const newRecord = await md.GetEntityObject(this.entityObjectName);  
+            //     this.entityFormDialogRef.Record = newRecord;
+            //     this.entityFormDialogRef.ShowForm();
+            //   }
+            // }
+            // else{
+            //   let event: DropdownOptionClickEvent = new DropdownOptionClickEvent(data.text);
+            //   this.dropdownOptionClickEvent.emit(event);
+            // }
+        });
+    }
+    toggleCopyFromView() {
+        this.copyFromDialogOpened = !this.copyFromDialogOpened;
+    }
+    getCopyFromTitle() {
+        return `Select ${this.ResourceTypeName} to Copy`;
+    }
+    toggleCreateFolderView(visible) {
+        if (visible !== undefined) {
+            this.createFolderDialogOpened = visible;
+        }
+        else {
+            this.createFolderDialogOpened = !this.createFolderDialogOpened;
+        }
+    }
+    getIconForResourceType(item) {
+        return "";
+        // if(!item){
+        //   return "";
+        // }
+        // const LargeClass: string = "fa-3x ";
+        // if(item.Type === ItemType.Folder){  
+        //   return LargeClass + "fa-regular fa-folder";
+        // }
+        // const resourceType = this._allResourceTypes.find(rt => rt.Entity === this.Resource);
+        // if(resourceType){
+        //   return LargeClass + resourceType.Icon;// + rotateStyle;
+        // }
+        // return "";
+    }
+}
+ResourceBrowserComponent.ɵfac = function ResourceBrowserComponent_Factory(t) { return new (t || ResourceBrowserComponent)(i0.ɵɵdirectiveInject(i1.SharedService)); };
+ResourceBrowserComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ResourceBrowserComponent, selectors: [["mj-resource-browser"]], inputs: { ResourceTypeName: "ResourceTypeName", EnableCategories: "EnableCategories", EnableItemEdit: "EnableItemEdit", EnableItemDelete: "EnableItemDelete", EnableRemoveLink: "EnableRemoveLink", Title: "Title", ItemFilter: "ItemFilter", OrderBy: "OrderBy", NewItemOptions: "NewItemOptions", CurrentCategoryID: "CurrentCategoryID", DisplayMode: "DisplayMode" }, outputs: { ResourceSelected: "ResourceSelected", CategoryChanged: "CategoryChanged", DisplayModeChanged: "DisplayModeChanged" }, decls: 27, vars: 8, consts: [["searchInput", ""], ["entityFormDialog", ""], [1, "generic-browser-list-container"], [1, "main-fav-wrapper"], [1, "title-wrapper"], [1, "title-flex-display"], ["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"], ["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"], ["title", "Parent", 1, "title-folder", "fa-solid", "fa-arrow-left", "fa-2xl", "breadcrumb-icon", 3, "click"], ["title", "Folder", 1, "title-folder", "fa-regular", "fa-folder", "fa-2xl"], [1, "fa-solid", "fa-magnifying-glass", "margin-left-small"], [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"], ["title", "Remove Link to Shared Item", 1, "list-btn"], [1, "list-btn", 3, "click"], [1, "fa-regular", "fa-pen-to-square"], [1, "fa-regular", "fa-trash-can"], ["title", "Remove Link to Shared Item", 1, "list-btn", 3, "click"], [1, "fa-solid", "fa-link-slash", 2, "color", "rgb(19, 92, 201)"], [1, "card-wrapper", "cursor-pointer"], [1, "list-item-icon"], ["title", "Edit Item", 1, "list-btn"], ["title", "Delete Item", 1, "list-btn"], [3, "click"], [2, "color", "rgb(19, 92, 201)", 3, "title", "ngClass"], [3, "title", "ngClass"], [1, "padding-top-small"], ["kendoCardTitle", ""], ["kendoCardSubtitle", ""], ["title", "Edit Item", 1, "list-btn", 3, "click"], ["title", "Delete Item", 1, "list-btn", 3, "click"], ["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 ResourceBrowserComponent_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, ResourceBrowserComponent_Conditional_4_Template, 2, 0);
+        i0.ɵɵelementStart(5, "h4");
+        i0.ɵɵtext(6);
+        i0.ɵɵelementEnd()();
+        i0.ɵɵelementStart(7, "kendo-dropdownbutton", 6);
+        i0.ɵɵlistener("itemClick", function ResourceBrowserComponent_Template_kendo_dropdownbutton_itemClick_7_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onDropdownItemClick($event)); });
+        i0.ɵɵelement(8, "span", 7);
+        i0.ɵɵtext(9, " Create New ");
+        i0.ɵɵelementEnd()();
+        i0.ɵɵelementStart(10, "div", 4)(11, "div", 8)(12, "kendo-textbox", 9, 0);
+        i0.ɵɵlistener("keyup", function ResourceBrowserComponent_Template_kendo_textbox_keyup_12_listener() { i0.ɵɵrestoreView(_r1); const searchInput_r4 = i0.ɵɵreference(13); return i0.ɵɵresetView(ctx.onKeyup(searchInput_r4.value)); });
+        i0.ɵɵtemplate(14, ResourceBrowserComponent_ng_template_14_Template, 1, 0, "ng-template", 10);
+        i0.ɵɵelementEnd()();
+        i0.ɵɵelementStart(15, "div", 11)(16, "button", 12);
+        i0.ɵɵlistener("click", function ResourceBrowserComponent_Template_button_click_16_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.changeViewMode("grid")); });
+        i0.ɵɵelement(17, "span", 13);
+        i0.ɵɵelementEnd();
+        i0.ɵɵelementStart(18, "button", 14);
+        i0.ɵɵlistener("click", function ResourceBrowserComponent_Template_button_click_18_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.changeViewMode("list")); });
+        i0.ɵɵelement(19, "span", 15);
+        i0.ɵɵelementEnd()()();
+        i0.ɵɵelementStart(20, "div", 16);
+        i0.ɵɵtemplate(21, ResourceBrowserComponent_Conditional_21_Template, 1, 0, "kendo-loader", 17)(22, ResourceBrowserComponent_Conditional_22_Template, 2, 1);
+        i0.ɵɵelementEnd()();
+        i0.ɵɵtemplate(23, ResourceBrowserComponent_kendo_dialog_23_Template, 10, 4, "kendo-dialog", 18)(24, ResourceBrowserComponent_kendo_dialog_24_Template, 8, 2, "kendo-dialog", 19);
+        i0.ɵɵelement(25, "mj-entity-form-dialog", 20, 1);
+        i0.ɵɵelementEnd();
+    } if (rf & 2) {
+        i0.ɵɵadvance(4);
+        i0.ɵɵconditional(ctx.CurrentCategoryID ? 4 : -1);
+        i0.ɵɵadvance(2);
+        i0.ɵɵtextInterpolate(ctx.Title);
+        i0.ɵɵadvance();
+        i0.ɵɵproperty("data", ctx.dropdownOptions);
+        i0.ɵɵadvance(5);
+        i0.ɵɵproperty("clearButton", true);
+        i0.ɵɵadvance(2);
+        i0.ɵɵproperty("showSeparator", true);
+        i0.ɵɵadvance(7);
+        i0.ɵɵconditional(ctx.IsLoading ? 21 : 22);
+        i0.ɵɵadvance(2);
+        i0.ɵɵproperty("ngIf", ctx.deleteDialogOpened);
+        i0.ɵɵadvance();
+        i0.ɵɵproperty("ngIf", ctx.createFolderDialogOpened);
+    } }, 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-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}\n\n.breadcrumb-icon[_ngcontent-%COMP%] {\n    cursor: pointer;\n}\n.breacrumb-icon[_ngcontent-%COMP%]:hover {\n    color: var(--primary-color);\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(ResourceBrowserComponent, [{
+        type: Component,
+        args: [{ selector: 'mj-resource-browser', 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(CurrentCategoryID){\n          <span title=\"Parent\" class=\"title-folder fa-solid fa-arrow-left fa-2xl breadcrumb-icon\" (click)=\"goToParent()\"></span> \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      @if (IsLoading) {\n        <kendo-loader type=\"converging-spinner\"></kendo-loader>\n      }\n      @else {\n        @if(DisplayMode === 'List'){\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(EnableItemEdit){\n                    <button class=\"list-btn\" (click)=\"editItem(dataItem)\">\n                      <span class=\"fa-regular fa-pen-to-square\"></span>\n                    </button>\n                  }\n                  @if(EnableItemDelete) {\n                    <button class=\"list-btn\" (click)=\"deleteItem(dataItem)\">\n                      <span class=\"fa-regular fa-trash-can\"></span>\n                    </button>  \n                  }\n                  @if(EnableRemoveLink) {\n                    <button (click)=\"unlinkItem(dataItem)\" class=\"list-btn\" title=\"Remove Link to Shared Item\" >\n                      <span class=\"fa-solid fa-link-slash\" style=\"color: rgb(19, 92, 201);\"></span>\n                    </button>                    \n                  }\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(EnableItemEdit && (!item.IsLink || item.LinkPermissionLevel === 'Owner' || item.LinkPermissionLevel === 'Edit')) {\n                    <button (click)=\"editItem(item)\" class=\"list-btn\" title=\"Edit Item\">\n                      <span class=\"fa-regular fa-pen-to-square\"></span>\n                    </button>\n                  }\n                  @if(EnableItemDelete && (!item.IsLink || item.LinkPermissionLevel === 'Owner') ) {\n                    <button (click)=\"deleteItem(item)\" class=\"list-btn\" title=\"Delete Item\">\n                      <span class=\"fa-regular fa-trash-can\"></span>\n                    </button>                    \n                  }\n                  @else if (EnableRemoveLink && item.IsLink) {\n                    <button (click)=\"unlinkItem(item)\" class=\"list-btn\" title=\"Remove Link to Shared Item\" >\n                      <span class=\"fa-solid fa-link-slash\" style=\"color: rgb(19, 92, 201);\"></span>\n                    </button>                    \n                  }\n                </div>\n                <kendo-card-body (click)=\"itemClick(item)\">\n                    @if(item.IsLink) {\n                      <i [title]=\"item.Name + '(Shared)'\" [ngClass]=\"getIconForResourceType(item)\" style=\"color: rgb(19, 92, 201);\"></i>\n                    }\n                    @else {\n                      <span [title]=\"item.Name\" [ngClass]=\"getIconForResourceType(item)\"></span>\n                    }\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 {{(selectedItem?.IsLink && selectedItem?.LinkPermissionLevel === 'Owner') || !selectedItem?.IsLink ? 'delete' : 'unlink'}} <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\n      </button>\n      <button class=\"yes-btn\" (click)=\"onConfirmDeleteItem(false)\" kendoButton fillMode=\"outline\" themeColor=\"info\">\n        No \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-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\n.breadcrumb-icon {\n    cursor: pointer;\n}\n.breacrumb-icon:hover {\n    color: var(--primary-color);\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 }], { ResourceTypeName: [{
+            type: Input,
+            args: [{ required: true }]
+        }], EnableCategories: [{
+            type: Input
+        }], EnableItemEdit: [{
+            type: Input
+        }], EnableItemDelete: [{
+            type: Input
+        }], EnableRemoveLink: [{
+            type: Input
+        }], Title: [{
+            type: Input
+        }], ItemFilter: [{
+            type: Input
+        }], OrderBy: [{
+            type: Input
+        }], NewItemOptions: [{
+            type: Input
+        }], CurrentCategoryID: [{
+            type: Input
+        }], DisplayMode: [{
+            type: Input
+        }], ResourceSelected: [{
+            type: Output
+        }], CategoryChanged: [{
+            type: Output
+        }], DisplayModeChanged: [{
+            type: Output
+        }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ResourceBrowserComponent, { className: "ResourceBrowserComponent", filePath: "src/lib/resource-browser/resource-browser.component.ts", lineNumber: 21 }); })();
+//# sourceMappingURL=resource-browser.component.js.map