@memberjunction/ng-explorer-core 4.3.1 → 5.0.0

package/dist/lib/app-view/application-view.component.js

@@ -0,0 +1,611 @@
+import { Component, Input, ViewChild } from '@angular/core';
+import { Metadata, LogError, RunView } from '@memberjunction/core';
+import { ItemType } from '../../generic/Item.types';
+import { BaseBrowserComponent } from '../base-browser-component/base-browser-component';
+import * as i0 from "@angular/core";
+import * as i1 from "@angular/router";
+import * as i2 from "@angular/common";
+import * as i3 from "@memberjunction/ng-shared";
+import * as i4 from "@progress/kendo-angular-buttons";
+import * as i5 from "@memberjunction/ng-user-view-properties";
+import * as i6 from "@memberjunction/ng-record-selector";
+import * as i7 from "@memberjunction/ng-resource-permissions";
+import * as i8 from "@memberjunction/ng-generic-dialog";
+import * as i9 from "@memberjunction/ng-shared-generic";
+import * as i10 from "../resource-browser/resource-browser.component";
+const _c0 = ["entityRow"];
+const _c1 = ["userViewDialog"];
+const _c2 = ["availableResourcesComponent"];
+function ApplicationViewComponent_div_0_div_13_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 24);
+    i0.ɵɵelement(1, "span", 25);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngClass", ctx_r1.app.Icon);
+} }
+function ApplicationViewComponent_div_0_div_17_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 26);
+    i0.ɵɵelement(1, "i", 27);
+    i0.ɵɵtext(2);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate1(" ", ctx_r1.app.Description, " ");
+} }
+function ApplicationViewComponent_div_0_div_21_button_2_i_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 33);
+} if (rf & 2) {
+    const item_r4 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵproperty("ngClass", item_r4.Icon);
+} }
+function ApplicationViewComponent_div_0_div_21_button_2_Template(rf, ctx) { if (rf & 1) {
+    const _r3 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 31);
+    i0.ɵɵlistener("click", function ApplicationViewComponent_div_0_div_21_button_2_Template_button_click_0_listener() { const item_r4 = i0.ɵɵrestoreView(_r3).$implicit; const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.onAppEntityButtonClicked(item_r4)); });
+    i0.ɵɵtemplate(1, ApplicationViewComponent_div_0_div_21_button_2_i_1_Template, 1, 1, "i", 32);
+    i0.ɵɵelementStart(2, "span");
+    i0.ɵɵtext(3);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const item_r4 = ctx.$implicit;
+    const ctx_r1 = i0.ɵɵnextContext(3);
+    i0.ɵɵclassProp("mj-entity-btn-active", ctx_r1.IsEntitySelected(item_r4));
+    i0.ɵɵproperty("title", item_r4.Description || item_r4.Name);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", item_r4.Icon && item_r4.Icon.length > 0);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(item_r4.Name);
+} }
+function ApplicationViewComponent_div_0_div_21_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 28)(1, "div", 29);
+    i0.ɵɵtemplate(2, ApplicationViewComponent_div_0_div_21_button_2_Template, 4, 5, "button", 30);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("ngForOf", ctx_r1.SelectedAppEntities);
+} }
+function ApplicationViewComponent_div_0_div_22_Template(rf, ctx) { if (rf & 1) {
+    const _r5 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 34);
+    i0.ɵɵelement(1, "i", 35);
+    i0.ɵɵelementStart(2, "h3");
+    i0.ɵɵtext(3, "No Entities Selected");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(4, "p");
+    i0.ɵɵtext(5, "Configure which entities you'd like to work with in this application");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(6, "button", 36);
+    i0.ɵɵlistener("click", function ApplicationViewComponent_div_0_div_22_Template_button_click_6_listener() { i0.ɵɵrestoreView(_r5); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.ShowAppEntitySelectionDialog()); });
+    i0.ɵɵelementStart(7, "span", 37);
+    i0.ɵɵelement(8, "i", 15);
+    i0.ɵɵtext(9, " Configure Entities ");
+    i0.ɵɵelementEnd()()();
+} }
+function ApplicationViewComponent_div_0_div_23_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 38);
+    i0.ɵɵelement(1, "mj-loading", 39);
+    i0.ɵɵelementEnd();
+} }
+function ApplicationViewComponent_div_0_div_24_Template(rf, ctx) { if (rf & 1) {
+    const _r6 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 40)(1, "mj-resource-browser", 41);
+    i0.ɵɵlistener("ResourceSelected", function ApplicationViewComponent_div_0_div_24_Template_mj_resource_browser_ResourceSelected_1_listener($event) { i0.ɵɵrestoreView(_r6); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.onItemClick($event)); })("NavigateToParentEvent", function ApplicationViewComponent_div_0_div_24_Template_mj_resource_browser_NavigateToParentEvent_1_listener() { i0.ɵɵrestoreView(_r6); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.navigateToParentFolder()); })("EditItemEvent", function ApplicationViewComponent_div_0_div_24_Template_mj_resource_browser_EditItemEvent_1_listener($event) { i0.ɵɵrestoreView(_r6); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.editView($event)); });
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("EnableCategories", true)("CategoryEntityID", ctx_r1.currentlySelectedAppEntity == null ? null : ctx_r1.currentlySelectedAppEntity.ID)("CurrentCategoryID", ctx_r1.selectedFolderID)("Title", ctx_r1.currentlySelectedAppEntity == null ? null : ctx_r1.currentlySelectedAppEntity.Name)("ItemFilter", ctx_r1.ResourceItemFilter)("NewItemOptions", ctx_r1.NewItemOptions);
+} }
+function ApplicationViewComponent_div_0_mj_available_resources_29_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "mj-available-resources", 42, 1);
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵproperty("User", ctx_r1.currentUser)("ResourceTypeID", ctx_r1.ViewResourceTypeID)("ResourceExtraFilter", ctx_r1.FilterOutCurrentUserViews);
+} }
+function ApplicationViewComponent_div_0_Template(rf, ctx) { if (rf & 1) {
+    const _r1 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 3)(1, "nav", 4)(2, "span", 5);
+    i0.ɵɵlistener("click", function ApplicationViewComponent_div_0_Template_span_click_2_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.GoHome($event)); });
+    i0.ɵɵelement(3, "i", 6);
+    i0.ɵɵtext(4, " Home ");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelement(5, "i", 7);
+    i0.ɵɵelementStart(6, "span", 5);
+    i0.ɵɵlistener("click", function ApplicationViewComponent_div_0_Template_span_click_6_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.GoToApps($event)); });
+    i0.ɵɵtext(7, "Applications");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelement(8, "i", 7);
+    i0.ɵɵelementStart(9, "span", 8);
+    i0.ɵɵtext(10);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(11, "div", 9)(12, "div", 10);
+    i0.ɵɵtemplate(13, ApplicationViewComponent_div_0_div_13_Template, 2, 1, "div", 11);
+    i0.ɵɵelementStart(14, "div")(15, "h1");
+    i0.ɵɵtext(16);
+    i0.ɵɵelementEnd();
+    i0.ɵɵtemplate(17, ApplicationViewComponent_div_0_div_17_Template, 3, 1, "div", 12);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(18, "div", 13)(19, "button", 14);
+    i0.ɵɵlistener("click", function ApplicationViewComponent_div_0_Template_button_click_19_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.ShowAppEntitySelectionDialog()); });
+    i0.ɵɵelement(20, "i", 15);
+    i0.ɵɵelementEnd()()();
+    i0.ɵɵtemplate(21, ApplicationViewComponent_div_0_div_21_Template, 3, 1, "div", 16)(22, ApplicationViewComponent_div_0_div_22_Template, 10, 0, "div", 17)(23, ApplicationViewComponent_div_0_div_23_Template, 2, 0, "div", 18)(24, ApplicationViewComponent_div_0_div_24_Template, 2, 6, "div", 19);
+    i0.ɵɵelementStart(25, "mj-record-selector-dialog", 20);
+    i0.ɵɵlistener("DialogClosed", function ApplicationViewComponent_div_0_Template_mj_record_selector_dialog_DialogClosed_25_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.OnAppEntitySelectionDialogClosed($event)); });
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(26, "mj-user-view-properties-dialog", 21, 0);
+    i0.ɵɵlistener("dialogClosed", function ApplicationViewComponent_div_0_Template_mj_user_view_properties_dialog_dialogClosed_26_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.OnViewPropertiesDialogClose($event)); });
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(28, "mj-generic-dialog", 22);
+    i0.ɵɵlistener("DialogClosed", function ApplicationViewComponent_div_0_Template_mj_generic_dialog_DialogClosed_28_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.HandleLinkToSharedView($event)); });
+    i0.ɵɵtemplate(29, ApplicationViewComponent_div_0_mj_available_resources_29_Template, 2, 3, "mj-available-resources", 23);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵadvance(10);
+    i0.ɵɵtextInterpolate(ctx_r1.app.Name);
+    i0.ɵɵadvance(3);
+    i0.ɵɵproperty("ngIf", ctx_r1.app.Icon && ctx_r1.app.Icon.length > 0);
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate(ctx_r1.app.Name);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", ctx_r1.app.Description);
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("title", "Configure Entities");
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("ngIf", ctx_r1.SelectedAppEntities.length > 0);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", ctx_r1.SelectedAppEntities.length === 0 && !ctx_r1.showLoader);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", ctx_r1.showLoader);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", ctx_r1.SelectedAppEntities.length > 0 && !ctx_r1.showLoader);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("AvailableRecords", ctx_r1.AllAppEntities)("SelectedRecords", ctx_r1.SelectedAppEntities)("UnselectedRecords", ctx_r1.UnselectedAppEntities)("DialogVisible", ctx_r1.AppEntitySelectionDialogVisible);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ShowPropertiesButton", false);
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("DialogVisible", ctx_r1.LinkToSharedViewDialogVisible);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", ctx_r1.LinkToSharedViewDialogVisible);
+} }
+export class ApplicationViewComponent extends BaseBrowserComponent {
+    router;
+    route;
+    location;
+    sharedService;
+    cdr;
+    entityRowRef;
+    viewPropertiesDialog;
+    availableResourcesComponent;
+    categoryEntityID;
+    currentlySelectedAppEntity;
+    ResourceItemFilter = "";
+    AppEntitySelectionDialogVisible = false;
+    AllAppEntities = [];
+    SelectedAppEntities = [];
+    UnselectedAppEntities = [];
+    app;
+    userApp;
+    currentUser;
+    FilterOutCurrentUserViews;
+    NewItemOptions = [
+        {
+            Text: 'New View',
+            Description: 'Create a new User View',
+            Icon: 'folder',
+            Action: () => {
+                this.createNewView();
+            }
+        },
+        {
+            Text: 'New Record',
+            Description: `Create a new record for the currently selected entity`,
+            Icon: 'plus',
+            Action: () => {
+                this.createNewRecord();
+            }
+        }
+    ];
+    ViewResourceTypeID;
+    constructor(router, route, location, sharedService, cdr) {
+        super();
+        this.router = router;
+        this.route = route;
+        this.location = location;
+        this.sharedService = sharedService;
+        this.cdr = cdr;
+        this.categoryEntityName = "User View Categories";
+        this.itemEntityName = "User Views";
+    }
+    async ngOnInit() {
+        const md = new Metadata();
+        this.currentUser = md.CurrentUser;
+        this.ViewResourceTypeID = this.sharedService.ResourceTypeByName('User Views')?.ID || '';
+        this.route.paramMap.subscribe(async (params) => {
+            const appName = params.get('appName');
+            const entityName = params.get('entityName');
+            const folderID = params.get('folderID');
+            this.showLoader = true;
+            if (folderID) {
+                this.selectedFolderID = folderID;
+            }
+            if (appName && appName !== this.app?.Name) {
+                const md = new Metadata();
+                const rv = new RunView();
+                const appNameToLower = appName.toLowerCase();
+                this.app = md.Applications.find(a => a.Name.toLowerCase() === appNameToLower);
+                // if we get here and we have a blank app, problem
+                if (!this.app) {
+                    throw new Error(`Application ${appName} not found`);
+                }
+                // next up we need to find the UserApplication record based on the app and the current user
+                const userAppResult = await rv.RunView({
+                    EntityName: "User Applications",
+                    ExtraFilter: `UserID='${md.CurrentUser.ID}' AND ApplicationID='${this.app.ID}'`,
+                    ResultType: 'entity_object'
+                });
+                if (!userAppResult || userAppResult.Success === false || userAppResult.Results.length === 0)
+                    throw new Error('User Application Record for current user and selected application not found');
+                this.userApp = userAppResult.Results[0];
+                const matches = this.app.ApplicationEntities
+                    .map(ae => md.Entities.find(e => e.ID === ae.EntityID))
+                    .filter(e => e) // filter out null entries  
+                    .sort((a, b) => {
+                    if (!a || !b) {
+                        return 0;
+                    }
+                    return a.Name.localeCompare(b.Name);
+                }); // sort by name
+                // store the entire list of POSSIBLE app entities in this list
+                this.AllAppEntities = matches; // we filter out null above so this cast is safe;
+                const userAppEntities = await rv.RunView({
+                    EntityName: 'User Application Entities',
+                    ResultType: 'entity_object',
+                    ExtraFilter: `UserApplicationID = '${this.userApp.ID}'`,
+                    OrderBy: 'Sequence, Entity'
+                });
+                if (userAppEntities && userAppEntities.Success) {
+                    this.SelectedAppEntities = userAppEntities.Results.map(uae => this.AllAppEntities.find(ae => uae.EntityID === ae.ID)).filter(val => val); // now we have our selected app entities and they're sorted properly
+                    this.UnselectedAppEntities = this.AllAppEntities.filter(e => !this.SelectedAppEntities.some(sa => sa.ID === e.ID));
+                    // special case - if we have NO user app entities and the application has entities that are marked as DefaultForNewUser=1 we will add them now
+                    const defaultEntities = this.app.ApplicationEntities.filter(a => a.DefaultForNewUser);
+                    if (this.SelectedAppEntities.length === 0 && defaultEntities.length > 0) {
+                        // there are some entities that should default for a new user, so let's add them to the selected entities and remove from the Unselected
+                        // app entities and then call the Save method that we use when the user dialog ends
+                        this.SelectedAppEntities = defaultEntities.map(de => this.AllAppEntities.find(aae => de.EntityID === aae.ID)).filter(val => val);
+                        // now we have the default entities in place for the app, remove them from the Unselected array
+                        this.UnselectedAppEntities = this.UnselectedAppEntities.filter(e => !this.SelectedAppEntities.some(se => se.ID === e.ID));
+                        // now save
+                        await this.OnAppEntitySelectionDialogClosed(true);
+                    }
+                }
+            }
+            // now down here we have either loaded the app above, or already had the current app loaded. Now we move on to set the current entity and load er up
+            if (this.app && this.SelectedAppEntities.length) {
+                if (entityName) {
+                    // sometimes the entity name contains a ? and values after it, look for that and only grab stuff to left of ?
+                    const entityNameParts = entityName.split('?');
+                    const entityNameToLower = entityNameParts[0].toLowerCase().trim();
+                    const selectedAppEntity = this.SelectedAppEntities.find(e => e.Name.toLocaleLowerCase() === entityNameToLower);
+                    if (selectedAppEntity) {
+                        await this.loadEntityAndFolders(selectedAppEntity);
+                    }
+                    else
+                        await this.loadEntityAndFolders(this.SelectedAppEntities[0]);
+                }
+                else {
+                    await this.loadEntityAndFolders(this.SelectedAppEntities[0]);
+                }
+            }
+            this.showLoader = false;
+        });
+    }
+    IsEntitySelected(entity) {
+        if (this.currentlySelectedAppEntity?.ID === entity.ID)
+            return true;
+        else
+            return false;
+    }
+    ShowAppEntitySelectionDialog() {
+        this.AppEntitySelectionDialogVisible = true;
+    }
+    async OnAppEntitySelectionDialogClosed(save) {
+        this.AppEntitySelectionDialogVisible = false;
+        // now we need to process the changes if the user hit save
+        if (save) {
+            // we need to basically make sure the User Application Entities entity for this user maps to the set of selected Entities within the application, in the order selected as well
+            const rv = new RunView();
+            const md = new Metadata();
+            const userAppEntities = await rv.RunView({
+                EntityName: 'User Application Entities',
+                ResultType: 'entity_object',
+                ExtraFilter: `UserApplicationID = '${this.userApp.ID}'`,
+                OrderBy: 'Sequence'
+            });
+            // userAppEntities.results is the current DB state, we need to now compare it to the SelectedAppEntities array
+            // and if there are changes either update sequence values or delete records that aren't selected anymore.  
+            const existingUserAppEntities = userAppEntities.Results;
+            const userAppEntitiesToSave = [];
+            const userAppEntitiesToDelete = [];
+            // first we need to update the sequence values for the selected applications
+            for (let index = 0; index < this.SelectedAppEntities.length; index++) {
+                const e = this.SelectedAppEntities[index];
+                const existing = existingUserAppEntities.find(uae => uae.EntityID === e.ID);
+                if (existing) {
+                    if (existing.Sequence !== index) {
+                        existing.Sequence = index;
+                        userAppEntitiesToSave.push(existing);
+                    }
+                }
+                else {
+                    // this is a new app entity that the user has selected
+                    const newApp = await md.GetEntityObject("User Application Entities");
+                    newApp.UserApplicationID = this.userApp.ID;
+                    newApp.Sequence = index;
+                    newApp.EntityID = e.ID;
+                    userAppEntitiesToSave.push(newApp);
+                }
+            }
+            // now we need to add the records that aren't selected anymore to a delete array
+            for (let index = 0; index < existingUserAppEntities.length; index++) {
+                const existing = existingUserAppEntities[index];
+                if (!this.SelectedAppEntities.some(sa => sa.ID === existing.EntityID)) {
+                    userAppEntitiesToDelete.push(existing);
+                }
+            }
+            // finally, we need to submit a single transaction so we have one server round trip to commit all this good stuff
+            const tg = await md.CreateTransactionGroup();
+            for (const toSave of userAppEntitiesToSave) {
+                toSave.TransactionGroup = tg;
+                await toSave.Save();
+            }
+            for (const d of userAppEntitiesToDelete) {
+                d.TransactionGroup = tg;
+                await d.Delete();
+            }
+            if (!await tg.Submit()) {
+                // the data doesn't need to be updated when we are succesful because we're all bound to the same data which is cool
+                // but in this case we need to notify the user it failed
+                this.sharedService.CreateSimpleNotification('There was an error saving your entity selections. Please try again later or notify a system administrator.', "error", 3500);
+            }
+        }
+    }
+    onAppEntityButtonClicked(e) {
+        if (e.ID === this.currentlySelectedAppEntity?.ID)
+            return;
+        this.selectedFolderID = null;
+        this.currentlySelectedAppEntity = e;
+        this.navigateToCurrentPage();
+    }
+    async loadEntityAndFolders(entity) {
+        if (!entity) {
+            this.currentlySelectedAppEntity = undefined; // make sure our current selection is wiped out here
+            return;
+        }
+        this.showLoader = true;
+        this.currentlySelectedAppEntity = entity;
+        this.categoryEntityID = entity.ID;
+        this.ResourceItemFilter = `EntityID='${entity.ID}'`;
+        this.FilterOutCurrentUserViews = `UserID <> '${this.currentUser.ID}' AND EntityID = '${entity.ID}'`;
+        if (this.selectedFolderID) {
+            let viewResult = await super.RunView(this.categoryEntityName, `ID='${this.selectedFolderID}'`);
+            if (viewResult.length > 0) {
+                this.pageTitle = viewResult[0].Name;
+            }
+        }
+        else {
+            this.pageTitle = this.currentlySelectedAppEntity.Name;
+        }
+        const md = new Metadata();
+        const parentFolderIDFilter = this.selectedFolderID ? `ParentID='${this.selectedFolderID}'` : 'ParentID IS NULL';
+        const categoryFilter = `UserID='${md.CurrentUser.ID}' AND EntityID='${this.currentlySelectedAppEntity.ID}' AND ` + parentFolderIDFilter;
+        const categoryIDFilter = this.selectedFolderID ? `CategoryID='${this.selectedFolderID}'` : 'CategoryID IS NULL';
+        const userViewFilter = `UserID = '${md.CurrentUser.ID}' AND EntityID='${this.currentlySelectedAppEntity.ID}' AND ` + categoryIDFilter;
+        await super.LoadData({
+            sortItemsAfterLoad: true,
+            categoryItemFilter: categoryFilter,
+            entityItemFilter: userViewFilter,
+            linkItemFilter: `EntityID='${this.currentlySelectedAppEntity.ID}'`,
+            showLoader: true
+        });
+        this.showLoader = false;
+        this.cdr.detectChanges(); // tell Angular to detect changes as we just change the current entity so that affects some UI elements visualy like which button shows as selected
+    }
+    onItemClick(item) {
+        if (!item) {
+            return;
+        }
+        if (item.Type === ItemType.Resource) {
+            this.router.navigate(['resource', 'view', item.Data.ID], { queryParams: { viewMode: this.viewMode } });
+        }
+        else if (item.Type === ItemType.Folder) {
+            this.selectedFolderID = item.Data.ID;
+            this.navigateToCurrentPage();
+        }
+    }
+    entityItemClick(info) {
+        if (info) {
+            const paramsArray = ['entity', info.Entity];
+            this.router.navigate(paramsArray, { queryParams: { viewMode: this.viewMode } });
+        }
+    }
+    favoriteItemClick(fav) {
+        if (fav) {
+            if (fav.Entity === 'User Views') {
+                // opening a view, different route
+                this.router.navigate(['resource', 'view', fav.RecordID], { queryParams: { viewMode: this.viewMode } });
+            }
+            else {
+                this.router.navigate(['resource', 'record', fav.RecordID], { queryParams: { Entity: fav.Entity, viewMode: this.viewMode } });
+            }
+        }
+    }
+    navigateToCurrentPage() {
+        if (!this.app) {
+            throw new Error('Application Not Loaded');
+        }
+        //we're capable of loading the data associated with the selected ApplicationEntityInfo object
+        //without a page refresh, but we'd need additonal logic to handle routing, e.g. back
+        //button in the browser taking you to the last selected entity.
+        //so its easier if we instead navigate to this page with an updated url and leverage angular's router
+        let folderID = this.selectedFolderID;
+        let url = ["/app", this.app.Name];
+        let appEntityName = this.currentlySelectedAppEntity?.Name || null;
+        if (appEntityName) {
+            url.push(`${appEntityName}`);
+            if (folderID) {
+                url.push(`${folderID}`);
+            }
+        }
+        this.router.navigate(url, { queryParams: { viewMode: this.viewMode } });
+    }
+    onViewModeChange(viewMode) {
+        this.viewMode = viewMode;
+    }
+    LinkToSharedViewDialogVisible = false;
+    createItemClickedEvent(event) {
+        switch (event.Text.trim().toLowerCase()) {
+            case 'link to shared view':
+                this.LinkToSharedViewDialogVisible = true;
+                break;
+            default:
+                LogError('Unknown dropdown option clicked');
+                break;
+        }
+    }
+    async HandleLinkToSharedView(okClicked) {
+        this.LinkToSharedViewDialogVisible = false;
+        if (okClicked) {
+            const resources = this.availableResourcesComponent.SelectedResources;
+            const md = new Metadata();
+            let success = true;
+            for (const r of resources) {
+                const newResourceLink = await md.GetEntityObject('Resource Links');
+                newResourceLink.ResourceRecordID = r.ResourceRecordID;
+                newResourceLink.ResourceTypeID = r.ResourceTypeID;
+                newResourceLink.UserID = this.currentUser.ID;
+                newResourceLink.FolderID = this.selectedFolderID;
+                if (!await newResourceLink.Save()) {
+                    LogError('Error saving new resource link: ' + newResourceLink.LatestResult.Message);
+                    success = false;
+                }
+                else {
+                    await this.loadEntityAndFolders(this.currentlySelectedAppEntity); // refresh the view
+                }
+            }
+            if (!success) {
+                this.sharedService.CreateSimpleNotification('There was an error linking to the shared view(s). Please try again later or notify a system administrator.', 'error', 3500);
+            }
+        }
+    }
+    createNewView() {
+        if (this.viewPropertiesDialog && this.currentlySelectedAppEntity) {
+            this.viewPropertiesDialog.CategoryID = this.selectedFolderID; // pass along a folder if we have one, if null, that's fine it saves to "root" which is the null CategoryID
+            this.viewPropertiesDialog.CreateView(this.currentlySelectedAppEntity.Name);
+        }
+        else {
+            LogError("View Properties Dialog not found");
+        }
+    }
+    async editView(event) {
+        event.Cancel = true;
+        if (this.viewPropertiesDialog) {
+            let data = event.Item.Data;
+            this.viewPropertiesDialog.Open(data.ID);
+        }
+        else {
+            LogError("View Properties Dialog not found");
+        }
+    }
+    async OnViewPropertiesDialogClose(args) {
+        //user view properties dialog handles navigating to the newly created views
+        //so we only need to worry about saves to existing views
+        if (args && args.Saved && this.currentlySelectedAppEntity) {
+            args.Cancel = true;
+            await this.loadEntityAndFolders(this.currentlySelectedAppEntity);
+        }
+    }
+    async navigateToParentFolder() {
+        if (this.selectedFolderID) {
+            const rv = new RunView();
+            const parentResult = await rv.RunView({
+                EntityName: "User View Categories",
+                ExtraFilter: `ID='${this.selectedFolderID}'`,
+            });
+            if (parentResult && parentResult.Success && parentResult.Results.length > 0) {
+                this.selectedFolderID = parentResult.Results[0].ParentID;
+                this.navigateToCurrentPage();
+            }
+        }
+    }
+    async GoToApps(event) {
+        event.preventDefault();
+        this.router.navigate(['data']);
+    }
+    async GoHome(event) {
+        event.preventDefault();
+        // tell the router to go to /home
+        this.router.navigate(['home']);
+    }
+    createNewRecord() {
+        if (!this.currentlySelectedAppEntity) {
+            LogError("Unable to create new record: No Entity selected");
+            return;
+        }
+        const md = new Metadata();
+        const entityInfo = md.EntityByName(this.currentlySelectedAppEntity.Name);
+        if (!entityInfo.AllowCreateAPI) {
+            LogError(`Unable to create new record: ${entityInfo.Name} does not allow creation`);
+            return;
+        }
+        const permissions = entityInfo.GetUserPermisions(md.CurrentUser);
+        if (!permissions.CanCreate) {
+            LogError(`Unable to create new record: Current User ${md.CurrentUser.Name} does not have permission to create records for ${entityInfo.Name}`);
+            return;
+        }
+        // route to a resource/record with a blank string for the 3rd segment which is normally the pkey value
+        // here we don't provide the pkey value so the record component will know to create a new record
+        this.router.navigate(['resource', 'record', '' /*add this 3rd param that's blank so the route validates*/], { queryParams: {
+                Entity: entityInfo.Name,
+                NewRecordValues: null
+            }
+        });
+    }
+    static ɵfac = function ApplicationViewComponent_Factory(t) { return new (t || ApplicationViewComponent)(i0.ɵɵdirectiveInject(i1.Router), i0.ɵɵdirectiveInject(i1.ActivatedRoute), i0.ɵɵdirectiveInject(i2.Location), i0.ɵɵdirectiveInject(i3.SharedService), i0.ɵɵdirectiveInject(i0.ChangeDetectorRef)); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ApplicationViewComponent, selectors: [["mj-application-view"]], viewQuery: function ApplicationViewComponent_Query(rf, ctx) { if (rf & 1) {
+            i0.ɵɵviewQuery(_c0, 5);
+            i0.ɵɵviewQuery(_c1, 5);
+            i0.ɵɵviewQuery(_c2, 5);
+        } if (rf & 2) {
+            let _t;
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.entityRowRef = _t.first);
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.viewPropertiesDialog = _t.first);
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.availableResourcesComponent = _t.first);
+        } }, inputs: { categoryEntityID: "categoryEntityID" }, features: [i0.ɵɵInheritDefinitionFeature], decls: 1, vars: 1, consts: [["userViewDialog", ""], ["availableResourcesComponent", ""], ["class", "mj-page-container", 4, "ngIf"], [1, "mj-page-container"], [1, "mj-breadcrumb"], [1, "mj-breadcrumb-item", 3, "click"], [1, "fas", "fa-home"], [1, "fas", "fa-chevron-right", "mj-breadcrumb-separator"], [1, "mj-breadcrumb-current"], [1, "mj-header"], [1, "mj-header-title"], ["class", "mj-header-icon", 4, "ngIf"], ["class", "mj-header-subtitle", 4, "ngIf"], [1, "mj-header-actions"], ["kendoButton", "", "fillMode", "flat", "rounded", "full", "size", "large", "themeColor", "primary", 3, "click", "title"], [1, "fas", "fa-cog"], ["class", "mj-entity-selection", 4, "ngIf"], ["class", "mj-empty-state", 4, "ngIf"], ["class", "mj-loading mj-loading-overlay", 4, "ngIf"], ["class", "mj-main-content", 4, "ngIf"], ["EntityName", "Entities", "DisplayField", "Name", "DisplayIconField", "Icon", 3, "DialogClosed", "AvailableRecords", "SelectedRecords", "UnselectedRecords", "DialogVisible"], [3, "dialogClosed", "ShowPropertiesButton"], ["DialogTitle", "Available Resources", 3, "DialogClosed", "DialogVisible"], ["ExtraColumns", "UserName, Description", "SelectionMode", "Multiple", 3, "User", "ResourceTypeID", "ResourceExtraFilter", 4, "ngIf"], [1, "mj-header-icon"], [3, "ngClass"], [1, "mj-header-subtitle"], [1, "fas", "fa-info-circle"], [1, "mj-entity-selection"], [1, "mj-entity-buttons"], ["class", "mj-entity-btn", 3, "mj-entity-btn-active", "title", "click", 4, "ngFor", "ngForOf"], [1, "mj-entity-btn", 3, "click", "title"], ["class", "mj-entity-btn-icon", 3, "ngClass", 4, "ngIf"], [1, "mj-entity-btn-icon", 3, "ngClass"], [1, "mj-empty-state"], [1, "fas", "fa-database", "mj-empty-icon"], ["kendoButton", "", "themeColor", "primary", "rounded", "medium", "size", "large", 3, "click"], [1, "button-content"], [1, "mj-loading", "mj-loading-overlay"], ["text", "Loading application...", "size", "large"], [1, "mj-main-content"], ["ResourceTypeName", "User Views", "DisplayMode", "Tile", 3, "ResourceSelected", "NavigateToParentEvent", "EditItemEvent", "EnableCategories", "CategoryEntityID", "CurrentCategoryID", "Title", "ItemFilter", "NewItemOptions"], ["ExtraColumns", "UserName, Description", "SelectionMode", "Multiple", 3, "User", "ResourceTypeID", "ResourceExtraFilter"]], template: function ApplicationViewComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵtemplate(0, ApplicationViewComponent_div_0_Template, 30, 16, "div", 2);
+        } if (rf & 2) {
+            i0.ɵɵproperty("ngIf", ctx.app);
+        } }, dependencies: [i2.NgClass, i2.NgForOf, i2.NgIf, i4.ButtonComponent, i5.UserViewPropertiesDialogComponent, i6.RecordSelectorDialogComponent, i7.AvailableResourcesComponent, i8.GenericDialogComponent, i9.LoadingComponent, i10.ResourceBrowserComponent], styles: ["[_nghost-%COMP%] {\n    display: block;\n}\n\n\n\n.mj-entity-selection[_ngcontent-%COMP%] {\n    background: linear-gradient(135deg, var(--gray-600) 0%, #f8f9fa 100%);\n    border-radius: var(--border-radius);\n    padding: 20px;\n    margin-bottom: 24px;\n    box-shadow: \n        0 2px 8px rgba(0, 0, 0, 0.08),\n        inset 0 1px 0 rgba(255, 255, 255, 0.9);\n    position: relative;\n    overflow: hidden;\n    \n    \n\n    &::before {\n        content: '';\n        position: absolute;\n        top: 0;\n        left: 0;\n        right: 0;\n        bottom: 0;\n        background-image: \n            repeating-linear-gradient(\n                45deg,\n                transparent,\n                transparent 10px,\n                rgba(255, 255, 255, 0.05) 10px,\n                rgba(255, 255, 255, 0.05) 20px\n            );\n        pointer-events: none;\n    }\n}\n\n.mj-entity-buttons[_ngcontent-%COMP%] {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 12px;\n    position: relative;\n    z-index: 1;\n}\n\n\n\n.mj-entity-btn[_ngcontent-%COMP%] {\n    display: inline-flex;\n    align-items: center;\n    gap: 8px;\n    padding: 12px 20px;\n    background: var(--white-color);\n    border: 2px solid var(--gray-700);\n    border-radius: 50px;\n    font-size: 14px;\n    font-weight: 500;\n    color: var(--navy);\n    cursor: pointer;\n    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n    position: relative;\n    overflow: hidden;\n    white-space: nowrap;\n    \n    \n\n    &::before {\n        content: '';\n        position: absolute;\n        top: 0;\n        left: -100%;\n        width: 100%;\n        height: 100%;\n        background: linear-gradient(\n            90deg,\n            transparent,\n            rgba(0, 118, 182, 0.1),\n            transparent\n        );\n        transition: left 0.6s ease;\n    }\n    \n    &:hover {\n        transform: translateY(-2px);\n        border-color: var(--mj-blue);\n        box-shadow: \n            0 6px 20px rgba(0, 118, 182, 0.15),\n            0 2px 8px rgba(0, 0, 0, 0.1);\n        \n        &::before {\n            left: 100%;\n        }\n        \n        .mj-entity-btn-icon {\n            transform: rotate(10deg) scale(1.1);\n            color: var(--mj-blue);\n        }\n    }\n    \n    &:active {\n        transform: translateY(0);\n        box-shadow: \n            0 2px 8px rgba(0, 118, 182, 0.15),\n            inset 0 1px 2px rgba(0, 0, 0, 0.1);\n    }\n}\n\n\n\n.mj-entity-btn-active[_ngcontent-%COMP%] {\n    background: linear-gradient(135deg, var(--mj-blue) 0%, #005a9e 100%);\n    color: var(--white-color);\n    border-color: var(--mj-blue);\n    font-weight: 600;\n    box-shadow: \n        0 4px 16px rgba(0, 118, 182, 0.3),\n        inset 0 1px 0 rgba(255, 255, 255, 0.2);\n    \n    &::after {\n        content: '';\n        position: absolute;\n        bottom: -2px;\n        left: 10%;\n        right: 10%;\n        height: 3px;\n        background: var(--light-blue);\n        border-radius: 3px 3px 0 0;\n        box-shadow: 0 0 10px var(--light-blue);\n    }\n    \n    &:hover {\n        background: linear-gradient(135deg, #0084d1 0%, var(--mj-blue) 100%);\n        transform: translateY(-2px) scale(1.02);\n        box-shadow: \n            0 8px 24px rgba(0, 118, 182, 0.4),\n            inset 0 1px 0 rgba(255, 255, 255, 0.3);\n    }\n    \n    .mj-entity-btn-icon {\n        color: var(--white-color);\n        filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.2));\n    }\n}\n\n\n\n.mj-entity-btn-icon[_ngcontent-%COMP%] {\n    font-size: 16px;\n    transition: all 0.3s ease;\n    color: var(--mj-blue);\n}\n\n\n\n.button-content[_ngcontent-%COMP%] {\n    display: inline-flex;\n    align-items: center;\n    gap: 8px;\n}\n\n\n\n.mj-main-content[_ngcontent-%COMP%] {\n    animation: fadeInUp 0.4s ease-out;\n}\n\n\n\n.mj-version-info[_ngcontent-%COMP%] {\n    position: fixed;\n    bottom: 2rem;\n    right: 2rem;\n    background: linear-gradient(135deg, var(--navy) 0%, #0a2a4d 100%);\n    color: var(--white-color);\n    padding: 0.75rem 1.25rem;\n    border-radius: 50px;\n    font-size: 0.85rem;\n    font-weight: 500;\n    box-shadow: \n        0 4px 16px rgba(9, 35, 64, 0.3),\n        inset 0 1px 0 rgba(255, 255, 255, 0.1);\n    z-index: 1000;\n    display: flex;\n    align-items: center;\n    gap: 0.5rem;\n    transition: all var(--transition-time);\n    backdrop-filter: blur(10px);\n    border: 1px solid rgba(255, 255, 255, 0.1);\n    \n    &:hover {\n        background: linear-gradient(135deg, var(--mj-blue) 0%, #005a9e 100%);\n        transform: translateY(-4px) scale(1.05);\n        box-shadow: \n            0 8px 32px rgba(0, 118, 182, 0.4),\n            inset 0 1px 0 rgba(255, 255, 255, 0.2);\n    }\n    \n    i {\n        font-size: 0.75rem;\n    }\n}\n\n\n\n@media (max-width: 768px) {\n    .mj-entity-selection[_ngcontent-%COMP%] {\n        padding: 16px;\n        margin-bottom: 20px;\n    }\n    \n    .mj-entity-buttons[_ngcontent-%COMP%] {\n        gap: 8px;\n    }\n    \n    .mj-entity-btn[_ngcontent-%COMP%] {\n        padding: 10px 16px;\n        font-size: 13px;\n        \n        .mj-entity-btn-icon {\n            font-size: 14px;\n        }\n    }\n    \n    .mj-header[_ngcontent-%COMP%] {\n        .mj-header-icon {\n            width: 48px;\n            height: 48px;\n            \n            span {\n                font-size: 24px;\n            }\n        }\n        \n        h1 {\n            font-size: 2rem;\n        }\n    }\n    \n    .mj-empty-state[_ngcontent-%COMP%] {\n        padding: 60px 30px;\n        margin: 20px auto;\n        \n        .mj-empty-icon {\n            font-size: 4rem;\n        }\n        \n        h3 {\n            font-size: 1.5rem;\n        }\n        \n        p {\n            font-size: 1rem;\n        }\n    }\n    \n    .mj-version-info[_ngcontent-%COMP%] {\n        bottom: 1rem;\n        right: 1rem;\n        font-size: 0.8rem;\n        padding: 0.6rem 1rem;\n    }\n}\n\n@media (max-width: 480px) {\n    .mj-entity-buttons[_ngcontent-%COMP%] {\n        flex-direction: column;\n        width: 100%;\n    }\n    \n    .mj-entity-btn[_ngcontent-%COMP%] {\n        width: 100%;\n        justify-content: center;\n    }\n    \n    .mj-header[_ngcontent-%COMP%] {\n        h1 {\n            font-size: 1.5rem;\n        }\n    }\n}\n\n\n\n.mj-entity-btn[_ngcontent-%COMP%]:focus-visible, \n.mj-btn-icon-only[_ngcontent-%COMP%]:focus-visible {\n    outline: 2px solid var(--mj-blue);\n    outline-offset: 2px;\n}\n\n\n\n@media (prefers-contrast: high) {\n    .mj-entity-btn[_ngcontent-%COMP%], \n   .mj-btn-icon-only[_ngcontent-%COMP%] {\n        border-width: 2px !important;\n    }\n    \n    .mj-entity-btn-active[_ngcontent-%COMP%] {\n        border-width: 3px !important;\n    }\n}\n\n\n\n@media (prefers-reduced-motion: reduce) {\n    *[_ngcontent-%COMP%], \n   *[_ngcontent-%COMP%]::before, \n   *[_ngcontent-%COMP%]::after {\n        animation-duration: 0.01ms !important;\n        transition-duration: 0.01ms !important;\n    }\n    \n    .mj-entity-btn[_ngcontent-%COMP%]:hover, \n   .mj-btn-icon-only[_ngcontent-%COMP%]:hover {\n        transform: none !important;\n    }\n}\n\n\n\n@media (prefers-color-scheme: dark) {\n    \n\n}"] });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ApplicationViewComponent, [{
+        type: Component,
+        args: [{ selector: 'mj-application-view', template: "<!-- Enhanced Application View Component -->\n<div class=\"mj-page-container\" *ngIf=\"this.app\">\n    <!-- Enhanced Breadcrumb Navigation -->\n     <nav class=\"mj-breadcrumb\">\n        <span class=\"mj-breadcrumb-item\" (click)=\"GoHome($event)\">\n            <i class=\"fas fa-home\"></i>\n            Home\n        </span>\n        <i class=\"fas fa-chevron-right mj-breadcrumb-separator\"></i>\n        <span class=\"mj-breadcrumb-item\" (click)=\"GoToApps($event)\">Applications</span>\n        <i class=\"fas fa-chevron-right mj-breadcrumb-separator\"></i>\n        <span class=\"mj-breadcrumb-current\">{{this.app.Name}}</span>\n    </nav>\n\n    <!-- Enhanced Header Section -->\n    <div class=\"mj-header\"> \n        <div class=\"mj-header-title\">\n            <div class=\"mj-header-icon\" *ngIf=\"this.app.Icon && this.app.Icon.length > 0\">\n                <span [ngClass]=\"this.app.Icon\"></span>\n            </div>\n            <div>\n                <h1>{{this.app.Name}}</h1>\n                <div class=\"mj-header-subtitle\" *ngIf=\"this.app.Description\">\n                    <i class=\"fas fa-info-circle\"></i>\n                    {{this.app.Description}}\n                </div>\n            </div>\n        </div>\n        <div class=\"mj-header-actions\">\n            <button kendoButton\n                fillMode=\"flat\"\n                rounded=\"full\"\n                size=\"large\"\n                themeColor=\"primary\"\n                [title]=\"'Configure Entities'\"\n                (click)=\"ShowAppEntitySelectionDialog()\">\n                <i class=\"fas fa-cog\"></i>\n            </button>\n        </div>\n    </div>\n\n    <!-- Enhanced Entity Selection Bar -->\n    <div class=\"mj-entity-selection\" *ngIf=\"SelectedAppEntities.length > 0\">\n        <div class=\"mj-entity-buttons\">\n            <button\n                *ngFor=\"let item of SelectedAppEntities\"\n                class=\"mj-entity-btn\"\n                [class.mj-entity-btn-active]=\"IsEntitySelected(item)\"\n                (click)=\"onAppEntityButtonClicked(item)\"\n                [title]=\"item.Description || item.Name\"\n            >\n                <i *ngIf=\"item.Icon && item.Icon.length > 0\" \n                   [ngClass]=\"item.Icon\" \n                   class=\"mj-entity-btn-icon\"></i>\n                <span>{{item.Name}}</span>\n            </button>\n        </div>\n    </div>\n\n    <!-- Enhanced Empty State -->\n    <div class=\"mj-empty-state\" *ngIf=\"SelectedAppEntities.length === 0 && !showLoader\">\n        <i class=\"fas fa-database mj-empty-icon\"></i>\n        <h3>No Entities Selected</h3>\n        <p>Configure which entities you'd like to work with in this application</p>\n        <button kendoButton\n            themeColor=\"primary\"\n            rounded=\"medium\"\n            size=\"large\"\n            (click)=\"ShowAppEntitySelectionDialog()\">\n            <span class=\"button-content\">\n                <i class=\"fas fa-cog\"></i>\n                Configure Entities\n            </span>\n        </button>\n    </div>\n\n    <!-- Enhanced Loading State -->\n    <div class=\"mj-loading mj-loading-overlay\" *ngIf=\"showLoader\">\n        <mj-loading text=\"Loading application...\" size=\"large\"></mj-loading>\n    </div>\n\n    <!-- Main Content Area -->\n    <div class=\"mj-main-content\" *ngIf=\"SelectedAppEntities.length > 0 && !showLoader\">\n        <mj-resource-browser\n            ResourceTypeName=\"User Views\"\n            [EnableCategories]=\"true\"\n            [CategoryEntityID]=\"currentlySelectedAppEntity?.ID\"\n            [CurrentCategoryID]=\"selectedFolderID\"\n            [Title]=\"currentlySelectedAppEntity?.Name\"\n            [ItemFilter]=\"ResourceItemFilter\"\n            DisplayMode=\"Tile\"\n            [NewItemOptions]=\"NewItemOptions\"\n            (ResourceSelected)=\"onItemClick($event)\"\n            (NavigateToParentEvent)=\"navigateToParentFolder()\"\n            (EditItemEvent)=\"editView($event)\"\n        />\n    </div>\n\n    <!-- Dialogs -->\n    <mj-record-selector-dialog  \n        EntityName=\"Entities\"\n        [AvailableRecords]=\"AllAppEntities\" \n        [SelectedRecords]=\"SelectedAppEntities\" \n        [UnselectedRecords]=\"UnselectedAppEntities\"\n        [DialogVisible]=\"AppEntitySelectionDialogVisible\"\n        DisplayField=\"Name\"\n        DisplayIconField=\"Icon\"\n        (DialogClosed)=\"OnAppEntitySelectionDialogClosed($event)\"\n    >\n    </mj-record-selector-dialog>\n\n    <mj-user-view-properties-dialog \n        #userViewDialog \n        [ShowPropertiesButton]=\"false\"\n        (dialogClosed)=\"OnViewPropertiesDialogClose($event)\">\n    </mj-user-view-properties-dialog>\n\n    <mj-generic-dialog\n        DialogTitle=\"Available Resources\"\n        (DialogClosed)=\"HandleLinkToSharedView($event)\"\n        [DialogVisible]=\"LinkToSharedViewDialogVisible\"\n    >\n        <mj-available-resources\n            *ngIf=\"LinkToSharedViewDialogVisible\"  \n            #availableResourcesComponent\n            [User]=\"currentUser\"\n            [ResourceTypeID]=\"ViewResourceTypeID\"\n            [ResourceExtraFilter]=\"FilterOutCurrentUserViews\"\n            ExtraColumns=\"UserName, Description\"\n            SelectionMode=\"Multiple\"\n        >\n        </mj-available-resources>\n    </mj-generic-dialog>    \n</div>\n", styles: [":host {\n    display: block;\n}\n\n/* Entity Selection Bar */\n.mj-entity-selection {\n    background: linear-gradient(135deg, var(--gray-600) 0%, #f8f9fa 100%);\n    border-radius: var(--border-radius);\n    padding: 20px;\n    margin-bottom: 24px;\n    box-shadow: \n        0 2px 8px rgba(0, 0, 0, 0.08),\n        inset 0 1px 0 rgba(255, 255, 255, 0.9);\n    position: relative;\n    overflow: hidden;\n    \n    /* Subtle pattern overlay */\n    &::before {\n        content: '';\n        position: absolute;\n        top: 0;\n        left: 0;\n        right: 0;\n        bottom: 0;\n        background-image: \n            repeating-linear-gradient(\n                45deg,\n                transparent,\n                transparent 10px,\n                rgba(255, 255, 255, 0.05) 10px,\n                rgba(255, 255, 255, 0.05) 20px\n            );\n        pointer-events: none;\n    }\n}\n\n.mj-entity-buttons {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 12px;\n    position: relative;\n    z-index: 1;\n}\n\n/* Entity Selection Buttons - Modern pill design */\n.mj-entity-btn {\n    display: inline-flex;\n    align-items: center;\n    gap: 8px;\n    padding: 12px 20px;\n    background: var(--white-color);\n    border: 2px solid var(--gray-700);\n    border-radius: 50px;\n    font-size: 14px;\n    font-weight: 500;\n    color: var(--navy);\n    cursor: pointer;\n    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n    position: relative;\n    overflow: hidden;\n    white-space: nowrap;\n    \n    /* Shine effect on hover */\n    &::before {\n        content: '';\n        position: absolute;\n        top: 0;\n        left: -100%;\n        width: 100%;\n        height: 100%;\n        background: linear-gradient(\n            90deg,\n            transparent,\n            rgba(0, 118, 182, 0.1),\n            transparent\n        );\n        transition: left 0.6s ease;\n    }\n    \n    &:hover {\n        transform: translateY(-2px);\n        border-color: var(--mj-blue);\n        box-shadow: \n            0 6px 20px rgba(0, 118, 182, 0.15),\n            0 2px 8px rgba(0, 0, 0, 0.1);\n        \n        &::before {\n            left: 100%;\n        }\n        \n        .mj-entity-btn-icon {\n            transform: rotate(10deg) scale(1.1);\n            color: var(--mj-blue);\n        }\n    }\n    \n    &:active {\n        transform: translateY(0);\n        box-shadow: \n            0 2px 8px rgba(0, 118, 182, 0.15),\n            inset 0 1px 2px rgba(0, 0, 0, 0.1);\n    }\n}\n\n/* Active Entity Button */\n.mj-entity-btn-active {\n    background: linear-gradient(135deg, var(--mj-blue) 0%, #005a9e 100%);\n    color: var(--white-color);\n    border-color: var(--mj-blue);\n    font-weight: 600;\n    box-shadow: \n        0 4px 16px rgba(0, 118, 182, 0.3),\n        inset 0 1px 0 rgba(255, 255, 255, 0.2);\n    \n    &::after {\n        content: '';\n        position: absolute;\n        bottom: -2px;\n        left: 10%;\n        right: 10%;\n        height: 3px;\n        background: var(--light-blue);\n        border-radius: 3px 3px 0 0;\n        box-shadow: 0 0 10px var(--light-blue);\n    }\n    \n    &:hover {\n        background: linear-gradient(135deg, #0084d1 0%, var(--mj-blue) 100%);\n        transform: translateY(-2px) scale(1.02);\n        box-shadow: \n            0 8px 24px rgba(0, 118, 182, 0.4),\n            inset 0 1px 0 rgba(255, 255, 255, 0.3);\n    }\n    \n    .mj-entity-btn-icon {\n        color: var(--white-color);\n        filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.2));\n    }\n}\n\n/* Entity Button Icon */\n.mj-entity-btn-icon {\n    font-size: 16px;\n    transition: all 0.3s ease;\n    color: var(--mj-blue);\n}\n\n/* Button content wrapper */\n.button-content {\n    display: inline-flex;\n    align-items: center;\n    gap: 8px;\n}\n\n/* Main Content Wrapper */\n.mj-main-content {\n    animation: fadeInUp 0.4s ease-out;\n}\n\n/* Version Info Badge */\n.mj-version-info {\n    position: fixed;\n    bottom: 2rem;\n    right: 2rem;\n    background: linear-gradient(135deg, var(--navy) 0%, #0a2a4d 100%);\n    color: var(--white-color);\n    padding: 0.75rem 1.25rem;\n    border-radius: 50px;\n    font-size: 0.85rem;\n    font-weight: 500;\n    box-shadow: \n        0 4px 16px rgba(9, 35, 64, 0.3),\n        inset 0 1px 0 rgba(255, 255, 255, 0.1);\n    z-index: 1000;\n    display: flex;\n    align-items: center;\n    gap: 0.5rem;\n    transition: all var(--transition-time);\n    backdrop-filter: blur(10px);\n    border: 1px solid rgba(255, 255, 255, 0.1);\n    \n    &:hover {\n        background: linear-gradient(135deg, var(--mj-blue) 0%, #005a9e 100%);\n        transform: translateY(-4px) scale(1.05);\n        box-shadow: \n            0 8px 32px rgba(0, 118, 182, 0.4),\n            inset 0 1px 0 rgba(255, 255, 255, 0.2);\n    }\n    \n    i {\n        font-size: 0.75rem;\n    }\n}\n\n/* Responsive Design */\n@media (max-width: 768px) {\n    .mj-entity-selection {\n        padding: 16px;\n        margin-bottom: 20px;\n    }\n    \n    .mj-entity-buttons {\n        gap: 8px;\n    }\n    \n    .mj-entity-btn {\n        padding: 10px 16px;\n        font-size: 13px;\n        \n        .mj-entity-btn-icon {\n            font-size: 14px;\n        }\n    }\n    \n    .mj-header {\n        .mj-header-icon {\n            width: 48px;\n            height: 48px;\n            \n            span {\n                font-size: 24px;\n            }\n        }\n        \n        h1 {\n            font-size: 2rem;\n        }\n    }\n    \n    .mj-empty-state {\n        padding: 60px 30px;\n        margin: 20px auto;\n        \n        .mj-empty-icon {\n            font-size: 4rem;\n        }\n        \n        h3 {\n            font-size: 1.5rem;\n        }\n        \n        p {\n            font-size: 1rem;\n        }\n    }\n    \n    .mj-version-info {\n        bottom: 1rem;\n        right: 1rem;\n        font-size: 0.8rem;\n        padding: 0.6rem 1rem;\n    }\n}\n\n@media (max-width: 480px) {\n    .mj-entity-buttons {\n        flex-direction: column;\n        width: 100%;\n    }\n    \n    .mj-entity-btn {\n        width: 100%;\n        justify-content: center;\n    }\n    \n    .mj-header {\n        h1 {\n            font-size: 1.5rem;\n        }\n    }\n}\n\n/* Accessibility Enhancements */\n.mj-entity-btn:focus-visible,\n.mj-btn-icon-only:focus-visible {\n    outline: 2px solid var(--mj-blue);\n    outline-offset: 2px;\n}\n\n/* High Contrast Mode */\n@media (prefers-contrast: high) {\n    .mj-entity-btn,\n    .mj-btn-icon-only {\n        border-width: 2px !important;\n    }\n    \n    .mj-entity-btn-active {\n        border-width: 3px !important;\n    }\n}\n\n/* Reduced Motion */\n@media (prefers-reduced-motion: reduce) {\n    *,\n    *::before,\n    *::after {\n        animation-duration: 0.01ms !important;\n        transition-duration: 0.01ms !important;\n    }\n    \n    .mj-entity-btn:hover,\n    .mj-btn-icon-only:hover {\n        transform: none !important;\n    }\n}\n\n/* Dark Mode Support (if needed in future) */\n@media (prefers-color-scheme: dark) {\n    /* Dark mode overrides can be added here */\n}\n"] }]
+    }], () => [{ type: i1.Router }, { type: i1.ActivatedRoute }, { type: i2.Location }, { type: i3.SharedService }, { type: i0.ChangeDetectorRef }], { entityRowRef: [{
+            type: ViewChild,
+            args: ['entityRow']
+        }], viewPropertiesDialog: [{
+            type: ViewChild,
+            args: ['userViewDialog']
+        }], availableResourcesComponent: [{
+            type: ViewChild,
+            args: ['availableResourcesComponent']
+        }], categoryEntityID: [{
+            type: Input
+        }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ApplicationViewComponent, { className: "ApplicationViewComponent" }); })();
+//# sourceMappingURL=application-view.component.js.map