@memberjunction/ng-explorer-core 0.9.78 → 0.9.96

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

@@ -1,208 +1,220 @@
-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, Output, ViewChild, Input } from '@angular/core';
-import { MJEventType, MJGlobal } from '@memberjunction/global';
-import { EventCodes, SharedService } from '../../shared/shared.service';
-import { Metadata, RunView } from '@memberjunction/core';
-import { DropDownListComponent } from '@progress/kendo-angular-dropdowns';
-import * as i0 from "@angular/core";
-import * as i1 from "@memberjunction/ng-auth-services";
-import * as i2 from "../../shared/shared.service";
-import * as i3 from "./MSFT_UserImageService";
-import * as i4 from "@angular/router";
-import * as i5 from "@angular/common";
-import * as i6 from "@angular/forms";
-import * as i7 from "@progress/kendo-angular-inputs";
-import * as i8 from "@progress/kendo-angular-layout";
-import * as i9 from "@progress/kendo-angular-dropdowns";
-const _c0 = ["searchInput"];
-function HeaderComponent_span_17_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 21);
-    i0.ɵɵtext(1);
-    i0.ɵɵelementEnd();
-} if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext();
-    i0.ɵɵadvance(1);
-    i0.ɵɵtextInterpolate(ctx_r1.UnreadNotificationCount);
-} }
-export class HeaderComponent {
-    get UserNotifications() {
-        return SharedService.UserNotifications;
-    }
-    get UnreadNotificationCount() {
-        return SharedService.UnreadUserNotificationCount;
-    }
-    constructor(authBase, sharedService, msftUserImageService, router) {
-        this.authBase = authBase;
-        this.sharedService = sharedService;
-        this.msftUserImageService = msftUserImageService;
-        this.router = router;
-        this.menuItems = [
-            'User Name', 'Logout'
-        ];
-        this.selectedMenuItem = 'User Name';
-        this.userImageURL = 'assets/user.png';
-        this.toggle = new EventEmitter();
-        this.appName = '';
-        this.selectedLanguage = { locale: 'English', localeId: 'en-US' };
-        this.popupSettings = { width: '150' };
-        this.themes = [
-            {
-                href: 'assets/kendo-theme-default/dist/all.css',
-                text: 'Default'
-            }
-        ];
-        this.selectedTheme = this.themes[0];
-        this.searchableEntities = [];
-    }
-    changeTheme(theme) {
-        this.selectedTheme = theme;
-        const themeEl = document.getElementById('theme');
-        themeEl.href = theme.href;
-    }
-    onButtonClick() {
-        this.toggle.emit();
-    }
-    logout() {
-        return __awaiter(this, void 0, void 0, function* () {
-            this.authBase.logout();
-            localStorage.removeItem('auth');
-            localStorage.removeItem('claims');
-        });
-    }
-    valueChange(event) {
-        return __awaiter(this, void 0, void 0, function* () {
-            if (event === 'Logout') {
-                this.logout();
-            }
-        });
-    }
-    showNotifications(event) {
-        return __awaiter(this, void 0, void 0, function* () {
-            MJGlobal.Instance.RaiseEvent({
-                event: MJEventType.ComponentEvent,
-                component: this,
-                eventCode: EventCodes.ViewNotifications,
-                args: {}
-            });
-            this.router.navigate(['notifications']);
-        });
-    }
-    ngOnInit() {
-        return __awaiter(this, void 0, void 0, function* () {
-            this.appName = `${this.applicationName} - ${this.applicationInstance}`;
-            MJGlobal.Instance.GetEventListener(true).subscribe((event) => __awaiter(this, void 0, void 0, function* () {
-                if (event.event === MJEventType.LoggedIn) {
-                    yield this.loadSearchableEntities();
-                    const md = new Metadata();
-                    this.menuItems[0] = md.CurrentUser.FirstLast;
-                    this.selectedMenuItem = this.menuItems[0];
-                    if (this.isMicrosoft(event.args))
-                        this.msftUserImageService.getPhoto(event.args.accessToken).subscribe((blob) => {
-                            this.userImageURL = URL.createObjectURL(blob);
-                            this.sharedService.CurrentUserImage = this.userImageURL;
-                        });
-                }
-            }));
-        });
-    }
-    loadSearchableEntities() {
-        return __awaiter(this, void 0, void 0, function* () {
-            const rv = new RunView();
-            const result = yield rv.RunView({
-                EntityName: 'Entities',
-                ExtraFilter: 'AllowUserSearchAPI = 1'
-            });
-            if (result && result.Success) {
-                this.searchableEntities = result.Results;
-                if (this.searchableEntities.length > 0) {
-                    this.selectedEntity = this.searchableEntities[0];
-                }
-            }
-        });
-    }
-    isMicrosoft(claims) {
-        return claims && claims.authority && (claims.authority.includes('microsoftonline.com') ||
-            claims.authority.includes('microsoft.com'));
-    }
-    onSearch(event) {
-        const inputValue = this.searchInput.nativeElement.value;
-        if (inputValue && inputValue.length > 0 && inputValue.trim().length > 2 /* at least 3 characters to search*/) {
-            this.searchInput.nativeElement.value = ''; // blank it out
-            this.router.navigate(['resource', 'search', inputValue], { queryParams: { Entity: this.selectedEntity.Name } });
-        }
-        else {
-            this.sharedService.CreateSimpleNotification('Please enter at least 3 characters to search', 'warning', 1500);
-        }
-    }
-}
-HeaderComponent.ɵfac = function HeaderComponent_Factory(t) { return new (t || HeaderComponent)(i0.ɵɵdirectiveInject(i1.MJAuthBase), i0.ɵɵdirectiveInject(i2.SharedService), i0.ɵɵdirectiveInject(i3.MSFTUserImageService), i0.ɵɵdirectiveInject(i4.Router)); };
-HeaderComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: HeaderComponent, selectors: [["app-header-component"]], viewQuery: function HeaderComponent_Query(rf, ctx) { if (rf & 1) {
-        i0.ɵɵviewQuery(_c0, 5);
-        i0.ɵɵviewQuery(DropDownListComponent, 5);
-    } if (rf & 2) {
-        let _t;
-        i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.searchInput = _t.first);
-        i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.entityDropdown = _t.first);
-    } }, inputs: { applicationName: "applicationName", applicationInstance: "applicationInstance" }, outputs: { toggle: "toggle" }, decls: 22, vars: 7, consts: [[1, "header-wrap"], [1, "header", "header-bg"], [1, "nav-container"], [1, "menu-button"], [1, "k-icon", "hamburger-icon", 3, "click"], [1, "title"], ["kendoCardMedia", "", "src", "assets/MJ-Logo.png", "height", "45px", 1, "app-logo"], [1, "k-ml-2.5"], [1, "user-info-wrapper"], [1, "search-wrapper"], ["textField", "Name", "valueField", "ID", 1, "search-entity-list", 3, "data", "ngModel", "ngModelChange"], ["type", "text", "id", "txtSearch", "placeholder", "Search", "kendoTextBox", "", 3, "keydown.enter"], ["searchInput", ""], [1, "k-icon", "k-i-zoom", 3, "click"], [1, "icon-inbox", 3, "click"], [1, "k-icon", "k-i-inbox", 2, "cursor", "pointer"], ["class", "notification", 4, "ngIf"], ["shape", "circle", 1, "k-m-0", 2, "margin", "0", 3, "imageSrc"], [1, "user-info"], [1, "example-col"], [3, "data", "value", "valueChange"], [1, "notification"]], template: function HeaderComponent_Template(rf, ctx) { if (rf & 1) {
-        i0.ɵɵelementStart(0, "div", 0)(1, "div", 1)(2, "div", 2)(3, "div", 3)(4, "span", 4);
-        i0.ɵɵlistener("click", function HeaderComponent_Template_span_click_4_listener() { return ctx.onButtonClick(); });
-        i0.ɵɵelementEnd()();
-        i0.ɵɵelementStart(5, "div", 5);
-        i0.ɵɵelement(6, "img", 6);
-        i0.ɵɵelementStart(7, "h1", 7);
-        i0.ɵɵtext(8);
-        i0.ɵɵelementEnd()();
-        i0.ɵɵelementStart(9, "div", 8)(10, "div", 9)(11, "kendo-dropdownlist", 10);
-        i0.ɵɵlistener("ngModelChange", function HeaderComponent_Template_kendo_dropdownlist_ngModelChange_11_listener($event) { return ctx.selectedEntity = $event; });
-        i0.ɵɵelementEnd();
-        i0.ɵɵelementStart(12, "input", 11, 12);
-        i0.ɵɵlistener("keydown.enter", function HeaderComponent_Template_input_keydown_enter_12_listener($event) { return ctx.onSearch($event); });
-        i0.ɵɵelementEnd();
-        i0.ɵɵelementStart(14, "span", 13);
-        i0.ɵɵlistener("click", function HeaderComponent_Template_span_click_14_listener($event) { return ctx.onSearch($event); });
-        i0.ɵɵelementEnd()();
-        i0.ɵɵelementStart(15, "div", 14);
-        i0.ɵɵlistener("click", function HeaderComponent_Template_div_click_15_listener($event) { return ctx.showNotifications($event); });
-        i0.ɵɵelement(16, "span", 15);
-        i0.ɵɵtemplate(17, HeaderComponent_span_17_Template, 2, 1, "span", 16);
-        i0.ɵɵelementEnd();
-        i0.ɵɵelement(18, "kendo-avatar", 17);
-        i0.ɵɵelementStart(19, "div", 18)(20, "div", 19)(21, "kendo-dropdownlist", 20);
-        i0.ɵɵlistener("valueChange", function HeaderComponent_Template_kendo_dropdownlist_valueChange_21_listener($event) { return ctx.valueChange($event); });
-        i0.ɵɵelementEnd()()()()()()();
-    } if (rf & 2) {
-        i0.ɵɵadvance(8);
-        i0.ɵɵtextInterpolate(ctx.appName);
-        i0.ɵɵadvance(3);
-        i0.ɵɵproperty("data", ctx.searchableEntities)("ngModel", ctx.selectedEntity);
-        i0.ɵɵadvance(6);
-        i0.ɵɵproperty("ngIf", ctx.UnreadNotificationCount > 0);
-        i0.ɵɵadvance(1);
-        i0.ɵɵproperty("imageSrc", ctx.userImageURL);
-        i0.ɵɵadvance(3);
-        i0.ɵɵproperty("data", ctx.menuItems)("value", ctx.selectedMenuItem);
-    } }, dependencies: [i5.NgIf, i6.NgControlStatus, i6.NgModel, i7.TextBoxDirective, i8.AvatarComponent, i8.CardMediaDirective, i9.DropDownListComponent], styles: [".header-wrap[_ngcontent-%COMP%] {\r\n  flex: auto;\r\n}\r\n\r\n.title[_ngcontent-%COMP%] {\r\n  font-size: x-large;  \r\n}\r\n.app-logo[_ngcontent-%COMP%] {\r\n  width: 100px;\r\n  height: 50px;\r\n}\r\n\r\n.user-info[_ngcontent-%COMP%]   kendo-dropdownlist[_ngcontent-%COMP%] {\r\n  border: none;\r\n  background: transparent;\r\n  width: auto;\r\n  color: #fff;\r\n}\r\n.user-info-wrapper[_ngcontent-%COMP%] {\r\n  display: flex;\r\n  align-items: center;\r\n}\r\n.icon-inbox[_ngcontent-%COMP%] {\r\n  position: relative;\r\n  margin: 0 26px 0 40px;\r\n}\r\n.icon-inbox[_ngcontent-%COMP%]   .notification[_ngcontent-%COMP%] {\r\n  position: absolute;\r\n  top: -8px;\r\n  right: -8px;\r\n  width: 16px;\r\n  height: 16px;\r\n  min-width: 16px;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  background: #ff6358;\r\n  border-radius: 50%;\r\n  color: #fff;\r\n  font-size: 10px;\r\n}\r\n.user-info-wrapper[_ngcontent-%COMP%]   .header[_ngcontent-%COMP%]   .k-avatar[_ngcontent-%COMP%] {\r\n  padding-left: 25px;\r\n  border-left: 2px solid #fff;\r\n}\r\n.search-wrapper[_ngcontent-%COMP%] {\r\n  display: flex;\r\n  align-items: center;\r\n  position: relative;\r\n  width: 500px;\r\n}\r\n.search-entity-list[_ngcontent-%COMP%] {\r\n  width: 200px; \r\n}\r\n  .search-wrapper #txtSearch::placeholder,   .search-wrapper input::placeholder {\r\n  color: #fff;\r\n}\r\n.search-wrapper[_ngcontent-%COMP%]   .k-input[_ngcontent-%COMP%], .search-wrapper[_ngcontent-%COMP%]   .k-dropdownlist[_ngcontent-%COMP%] {\r\n  border-bottom: 1px solid rgba(255, 255, 255, 0.08);\r\n  background: transparent;\r\n  border-radius: 0;\r\n  color: #fff;\r\n}\r\n.search-wrapper[_ngcontent-%COMP%]   .k-icon[_ngcontent-%COMP%] {\r\n  position: absolute;\r\n  right: 0;\r\n  top: 50%;\r\n  transform: translateY(-50%);\r\n  z-index: 9;\r\n    cursor: pointer;\r\n  margin-right: 2px;\r\n} \r\n.k-input[_ngcontent-%COMP%] {\r\n  color: black;\r\n}\r\n\r\n\r\n\r\n@media (max-width: 1700px) {\r\n  .title[_ngcontent-%COMP%] {\r\n    font-size: x-small; \r\n  }\r\n  .app-logo[_ngcontent-%COMP%] {\r\n    width: 50px;\r\n    height: 25px;\r\n  }\r\n}\r\n@media (max-width: 1200px) {\r\n  .title[_ngcontent-%COMP%] {\r\n    display: none;\r\n  }\r\n  .app-logo[_ngcontent-%COMP%] {\r\n    display: none\r\n  }\r\n\r\n  .search-wrapper[_ngcontent-%COMP%] {\r\n    width: 350px;\r\n  }  \r\n  .search-entity-list[_ngcontent-%COMP%] {\r\n    width: 150px; \r\n  }\r\n}"] });
-(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(HeaderComponent, [{
-        type: Component,
-        args: [{ selector: 'app-header-component', template: "<div class=\"header-wrap\">\r\n  <div class=\"header header-bg\">\r\n    <div class=\"nav-container\">\r\n      <div class=\"menu-button\">\r\n        <span class=\"k-icon hamburger-icon\" (click)=\"onButtonClick()\"></span>\r\n      </div>\r\n\r\n      <div class=\"title\">\r\n        <img kendoCardMedia src=\"assets/MJ-Logo.png\" height=\"45px\" class=\"app-logo\" />\r\n        <h1 class=\"k-ml-2.5\">{{appName}}</h1>\r\n      </div>\r\n\r\n      <div class=\"user-info-wrapper\">\r\n        <div class=\"search-wrapper\">\r\n            <kendo-dropdownlist\r\n              [data]=\"searchableEntities\"\r\n              textField=\"Name\"\r\n              valueField=\"ID\"\r\n              class = \"search-entity-list\"\r\n              [(ngModel)]=\"selectedEntity\"\r\n            >\r\n            </kendo-dropdownlist>\r\n            <input \r\n            type=\"text\"\r\n            id=\"txtSearch\"\r\n            placeholder=\"Search\"\r\n            kendoTextBox\r\n            (keydown.enter)=\"onSearch($event)\"\r\n            #searchInput\r\n          />\r\n                        <span class=\"k-icon k-i-zoom\" (click)=\"onSearch($event)\"></span>\r\n                </div>\r\n      <div class=\"icon-inbox\" (click)=\"showNotifications($event)\">\r\n          <span class=\"k-icon k-i-inbox\" style=\"cursor: pointer;\"></span>\r\n          <span class=\"notification\" *ngIf=\"UnreadNotificationCount > 0\">{{UnreadNotificationCount}}</span>\r\n      </div>\r\n        <kendo-avatar class=\"k-m-0\" style=\"margin: 0;\" [imageSrc]=\"userImageURL\" shape=\"circle\"> </kendo-avatar>\r\n        <div class=\"user-info\">\r\n          <div class=\"example-col\">\r\n              <kendo-dropdownlist [data]=\"menuItems\"  [value]=\"selectedMenuItem\" (valueChange)=\"valueChange($event)\">\r\n              </kendo-dropdownlist>\r\n            \r\n          </div>\r\n      </div>\r\n     \r\n\r\n       \r\n      </div>\r\n    </div>\r\n  </div>\r\n  <!-- <div class=\"nav-breadcrumb\">\r\n        <kendo-breadcrumb (itemClick)=\"onBreadCrumbClick($event)\" [items]=\"breadCrumbItems\">\r\n        </kendo-breadcrumb>\r\n    </div> -->\r\n</div>\r\n", styles: [".header-wrap {\r\n  flex: auto;\r\n}\r\n\r\n.title {\r\n  font-size: x-large;  \r\n}\r\n.app-logo {\r\n  width: 100px;\r\n  height: 50px;\r\n}\r\n\r\n.user-info kendo-dropdownlist {\r\n  border: none;\r\n  background: transparent;\r\n  width: auto;\r\n  color: #fff;\r\n}\r\n.user-info-wrapper {\r\n  display: flex;\r\n  align-items: center;\r\n}\r\n.icon-inbox {\r\n  position: relative;\r\n  margin: 0 26px 0 40px;\r\n}\r\n.icon-inbox .notification {\r\n  position: absolute;\r\n  top: -8px;\r\n  right: -8px;\r\n  width: 16px;\r\n  height: 16px;\r\n  min-width: 16px;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  background: #ff6358;\r\n  border-radius: 50%;\r\n  color: #fff;\r\n  font-size: 10px;\r\n}\r\n.user-info-wrapper .header .k-avatar {\r\n  padding-left: 25px;\r\n  border-left: 2px solid #fff;\r\n}\r\n.search-wrapper {\r\n  display: flex;\r\n  align-items: center;\r\n  position: relative;\r\n  width: 500px;\r\n}\r\n.search-entity-list {\r\n  width: 200px; \r\n}\r\n::ng-deep .search-wrapper #txtSearch::placeholder, ::ng-deep .search-wrapper input::placeholder {\r\n  color: #fff;\r\n}\r\n.search-wrapper .k-input, .search-wrapper .k-dropdownlist {\r\n  border-bottom: 1px solid rgba(255, 255, 255, 0.08);\r\n  background: transparent;\r\n  border-radius: 0;\r\n  color: #fff;\r\n}\r\n.search-wrapper .k-icon {\r\n  position: absolute;\r\n  right: 0;\r\n  top: 50%;\r\n  transform: translateY(-50%);\r\n  z-index: 9;\r\n    cursor: pointer;\r\n  margin-right: 2px;\r\n} \r\n.k-input {\r\n  color: black;\r\n}\r\n\r\n\r\n/*RESPONSIVE STUFF HERE */\r\n@media (max-width: 1700px) {\r\n  .title {\r\n    font-size: x-small; /* or any other size you prefer */\r\n  }\r\n  .app-logo {\r\n    width: 50px;\r\n    height: 25px;\r\n  }\r\n}\r\n@media (max-width: 1200px) {\r\n  .title {\r\n    display: none;\r\n  }\r\n  .app-logo {\r\n    display: none\r\n  }\r\n\r\n  .search-wrapper {\r\n    width: 350px;\r\n  }  \r\n  .search-entity-list {\r\n    width: 150px; \r\n  }\r\n}\r\n"] }]
-    }], function () { return [{ type: i1.MJAuthBase }, { type: i2.SharedService }, { type: i3.MSFTUserImageService }, { type: i4.Router }]; }, { applicationName: [{
-            type: Input
-        }], applicationInstance: [{
-            type: Input
-        }], toggle: [{
-            type: Output
-        }], searchInput: [{
-            type: ViewChild,
-            args: ['searchInput']
-        }], entityDropdown: [{
-            type: ViewChild,
-            args: [DropDownListComponent]
-        }] }); })();
+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, Output, ViewChild, Input } from '@angular/core';
+import { MJEventType, MJGlobal } from '@memberjunction/global';
+import { EventCodes, SharedService } from '../../shared/shared.service';
+import { Metadata, RunView } from '@memberjunction/core';
+import { DropDownListComponent } from '@progress/kendo-angular-dropdowns';
+import * as i0 from "@angular/core";
+import * as i1 from "@memberjunction/ng-auth-services";
+import * as i2 from "../../shared/shared.service";
+import * as i3 from "./MSFT_UserImageService";
+import * as i4 from "@angular/router";
+import * as i5 from "@angular/common";
+import * as i6 from "@angular/forms";
+import * as i7 from "@progress/kendo-angular-inputs";
+import * as i8 from "@progress/kendo-angular-icons";
+import * as i9 from "@progress/kendo-angular-layout";
+import * as i10 from "@progress/kendo-angular-dropdowns";
+const _c0 = ["searchInput"];
+function HeaderComponent_span_20_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 21);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(ctx_r1.UnreadNotificationCount);
+} }
+export class HeaderComponent {
+    get UserNotifications() {
+        return SharedService.UserNotifications;
+    }
+    get UnreadNotificationCount() {
+        return SharedService.UnreadUserNotificationCount;
+    }
+    constructor(authBase, sharedService, msftUserImageService, router) {
+        this.authBase = authBase;
+        this.sharedService = sharedService;
+        this.msftUserImageService = msftUserImageService;
+        this.router = router;
+        this.menuItems = [
+            'User Name', 'Logout'
+        ];
+        this.selectedMenuItem = 'User Name';
+        this.userImageURL = 'assets/user.png';
+        this.toggle = new EventEmitter();
+        this.appName = '';
+        this.selectedLanguage = { locale: 'English', localeId: 'en-US' };
+        this.popupSettings = { width: '150' };
+        this.themes = [
+            {
+                href: 'assets/kendo-theme-default/dist/all.css',
+                text: 'Default'
+            }
+        ];
+        this.selectedTheme = this.themes[0];
+        this.searchableEntities = [];
+    }
+    changeTheme(theme) {
+        this.selectedTheme = theme;
+        const themeEl = document.getElementById('theme');
+        themeEl.href = theme.href;
+    }
+    onButtonClick() {
+        this.toggle.emit();
+    }
+    logout() {
+        return __awaiter(this, void 0, void 0, function* () {
+            this.authBase.logout();
+            localStorage.removeItem('auth');
+            localStorage.removeItem('claims');
+        });
+    }
+    valueChange(event) {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (event === 'Logout') {
+                this.logout();
+            }
+        });
+    }
+    showNotifications(event) {
+        return __awaiter(this, void 0, void 0, function* () {
+            MJGlobal.Instance.RaiseEvent({
+                event: MJEventType.ComponentEvent,
+                component: this,
+                eventCode: EventCodes.ViewNotifications,
+                args: {}
+            });
+            this.router.navigate(['notifications']);
+        });
+    }
+    ngOnInit() {
+        return __awaiter(this, void 0, void 0, function* () {
+            this.appName = `${this.applicationName} - ${this.applicationInstance}`;
+            MJGlobal.Instance.GetEventListener(true).subscribe((event) => __awaiter(this, void 0, void 0, function* () {
+                if (event.event === MJEventType.LoggedIn) {
+                    yield this.loadSearchableEntities();
+                    const md = new Metadata();
+                    this.menuItems[0] = md.CurrentUser.FirstLast;
+                    this.selectedMenuItem = this.menuItems[0];
+                    if (this.isMicrosoft(event.args))
+                        this.msftUserImageService.getPhoto(event.args.accessToken).subscribe((blob) => {
+                            this.userImageURL = URL.createObjectURL(blob);
+                            this.sharedService.CurrentUserImage = this.userImageURL;
+                        });
+                }
+            }));
+        });
+    }
+    loadSearchableEntities() {
+        return __awaiter(this, void 0, void 0, function* () {
+            const rv = new RunView();
+            const result = yield rv.RunView({
+                EntityName: 'Entities',
+                ExtraFilter: 'AllowUserSearchAPI = 1'
+            });
+            if (result && result.Success) {
+                this.searchableEntities = result.Results;
+                if (this.searchableEntities.length > 0) {
+                    this.selectedEntity = this.searchableEntities[0];
+                }
+            }
+        });
+    }
+    isMicrosoft(claims) {
+        return claims && claims.authority && (claims.authority.includes('microsoftonline.com') ||
+            claims.authority.includes('microsoft.com'));
+    }
+    onSearch(event) {
+        const inputValue = this.searchInput.nativeElement.value;
+        if (inputValue && inputValue.length > 0 && inputValue.trim().length > 2 /* at least 3 characters to search*/) {
+            this.searchInput.nativeElement.value = ''; // blank it out
+            this.router.navigate(['resource', 'search', inputValue], { queryParams: { Entity: this.selectedEntity.Name } });
+        }
+        else {
+            this.sharedService.CreateSimpleNotification('Please enter at least 3 characters to search', 'warning', 1500);
+        }
+    }
+}
+HeaderComponent.ɵfac = function HeaderComponent_Factory(t) { return new (t || HeaderComponent)(i0.ɵɵdirectiveInject(i1.MJAuthBase), i0.ɵɵdirectiveInject(i2.SharedService), i0.ɵɵdirectiveInject(i3.MSFTUserImageService), i0.ɵɵdirectiveInject(i4.Router)); };
+HeaderComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: HeaderComponent, selectors: [["app-header-component"]], viewQuery: function HeaderComponent_Query(rf, ctx) { if (rf & 1) {
+        i0.ɵɵviewQuery(_c0, 5);
+        i0.ɵɵviewQuery(DropDownListComponent, 5);
+    } if (rf & 2) {
+        let _t;
+        i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.searchInput = _t.first);
+        i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.entityDropdown = _t.first);
+    } }, inputs: { applicationName: "applicationName", applicationInstance: "applicationInstance" }, outputs: { toggle: "toggle" }, decls: 25, vars: 10, consts: [[1, "header-wrap"], [1, "header", "header-bg"], [1, "nav-container"], [1, "menu-button"], [1, "k-icon", 3, "click"], [3, "icon"], [1, "title"], ["kendoCardMedia", "", "src", "assets/MJ-Logo.png", "height", "45px", 1, "app-logo"], [1, "k-ml-2.5"], [1, "user-info-wrapper"], [1, "search-wrapper"], ["textField", "Name", "valueField", "ID", 1, "search-entity-list", 3, "data", "ngModel", "ngModelChange"], ["type", "text", "id", "txtSearch", "placeholder", "Search", "kendoTextBox", "", 3, "keydown.enter"], ["searchInput", ""], [1, "icon-inbox", 3, "click"], [1, "k-icon", 2, "cursor", "pointer"], ["class", "notification", 4, "ngIf"], ["shape", "circle", 1, "k-m-0", 2, "margin", "0", 3, "imageSrc"], [1, "user-info"], [1, "example-col"], [3, "data", "value", "valueChange"], [1, "notification"]], template: function HeaderComponent_Template(rf, ctx) { if (rf & 1) {
+        i0.ɵɵelementStart(0, "div", 0)(1, "div", 1)(2, "div", 2)(3, "div", 3)(4, "span", 4);
+        i0.ɵɵlistener("click", function HeaderComponent_Template_span_click_4_listener() { return ctx.onButtonClick(); });
+        i0.ɵɵelement(5, "kendo-svgicon", 5);
+        i0.ɵɵelementEnd()();
+        i0.ɵɵelementStart(6, "div", 6);
+        i0.ɵɵelement(7, "img", 7);
+        i0.ɵɵelementStart(8, "h1", 8);
+        i0.ɵɵtext(9);
+        i0.ɵɵelementEnd()();
+        i0.ɵɵelementStart(10, "div", 9)(11, "div", 10)(12, "kendo-dropdownlist", 11);
+        i0.ɵɵlistener("ngModelChange", function HeaderComponent_Template_kendo_dropdownlist_ngModelChange_12_listener($event) { return ctx.selectedEntity = $event; });
+        i0.ɵɵelementEnd();
+        i0.ɵɵelementStart(13, "input", 12, 13);
+        i0.ɵɵlistener("keydown.enter", function HeaderComponent_Template_input_keydown_enter_13_listener($event) { return ctx.onSearch($event); });
+        i0.ɵɵelementEnd();
+        i0.ɵɵelementStart(15, "span", 4);
+        i0.ɵɵlistener("click", function HeaderComponent_Template_span_click_15_listener($event) { return ctx.onSearch($event); });
+        i0.ɵɵelement(16, "kendo-svgicon", 5);
+        i0.ɵɵelementEnd()();
+        i0.ɵɵelementStart(17, "div", 14);
+        i0.ɵɵlistener("click", function HeaderComponent_Template_div_click_17_listener($event) { return ctx.showNotifications($event); });
+        i0.ɵɵelementStart(18, "span", 15);
+        i0.ɵɵelement(19, "kendo-svgicon", 5);
+        i0.ɵɵelementEnd();
+        i0.ɵɵtemplate(20, HeaderComponent_span_20_Template, 2, 1, "span", 16);
+        i0.ɵɵelementEnd();
+        i0.ɵɵelement(21, "kendo-avatar", 17);
+        i0.ɵɵelementStart(22, "div", 18)(23, "div", 19)(24, "kendo-dropdownlist", 20);
+        i0.ɵɵlistener("valueChange", function HeaderComponent_Template_kendo_dropdownlist_valueChange_24_listener($event) { return ctx.valueChange($event); });
+        i0.ɵɵelementEnd()()()()()()();
+    } if (rf & 2) {
+        i0.ɵɵadvance(5);
+        i0.ɵɵproperty("icon", ctx.sharedService.kendoSVGIcon("menu"));
+        i0.ɵɵadvance(4);
+        i0.ɵɵtextInterpolate(ctx.appName);
+        i0.ɵɵadvance(3);
+        i0.ɵɵproperty("data", ctx.searchableEntities)("ngModel", ctx.selectedEntity);
+        i0.ɵɵadvance(4);
+        i0.ɵɵproperty("icon", ctx.sharedService.kendoSVGIcon("search"));
+        i0.ɵɵadvance(3);
+        i0.ɵɵproperty("icon", ctx.sharedService.kendoSVGIcon("inbox"));
+        i0.ɵɵadvance();
+        i0.ɵɵproperty("ngIf", ctx.UnreadNotificationCount > 0);
+        i0.ɵɵadvance();
+        i0.ɵɵproperty("imageSrc", ctx.userImageURL);
+        i0.ɵɵadvance(3);
+        i0.ɵɵproperty("data", ctx.menuItems)("value", ctx.selectedMenuItem);
+    } }, dependencies: [i5.NgIf, i6.NgControlStatus, i6.NgModel, i7.TextBoxDirective, i8.SVGIconComponent, i9.AvatarComponent, i9.CardMediaDirective, i10.DropDownListComponent], styles: [".header-wrap[_ngcontent-%COMP%] {\r\n  flex: auto;\r\n}\r\n\r\n.title[_ngcontent-%COMP%] {\r\n  font-size: x-large;  \r\n}\r\n.app-logo[_ngcontent-%COMP%] {\r\n  width: 100px;\r\n  height: 50px;\r\n}\r\n\r\n.user-info[_ngcontent-%COMP%]   kendo-dropdownlist[_ngcontent-%COMP%] {\r\n  border: none;\r\n  background: transparent;\r\n  width: auto;\r\n  color: #fff;\r\n}\r\n.user-info-wrapper[_ngcontent-%COMP%] {\r\n  display: flex;\r\n  align-items: center;\r\n}\r\n.icon-inbox[_ngcontent-%COMP%] {\r\n  position: relative;\r\n  margin: 0 26px 0 40px;\r\n}\r\n.icon-inbox[_ngcontent-%COMP%]   .notification[_ngcontent-%COMP%] {\r\n  position: absolute;\r\n  top: -8px;\r\n  right: -8px;\r\n  width: 16px;\r\n  height: 16px;\r\n  min-width: 16px;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  background: #ff6358;\r\n  border-radius: 50%;\r\n  color: #fff;\r\n  font-size: 10px;\r\n}\r\n.user-info-wrapper[_ngcontent-%COMP%]   .header[_ngcontent-%COMP%]   .k-avatar[_ngcontent-%COMP%] {\r\n  padding-left: 25px;\r\n  border-left: 2px solid #fff;\r\n}\r\n.search-wrapper[_ngcontent-%COMP%] {\r\n  display: flex;\r\n  align-items: center;\r\n  position: relative;\r\n  width: 500px;\r\n}\r\n.search-entity-list[_ngcontent-%COMP%] {\r\n  width: 200px; \r\n}\r\n  .search-wrapper #txtSearch::placeholder,   .search-wrapper input::placeholder {\r\n  color: #fff;\r\n}\r\n.search-wrapper[_ngcontent-%COMP%]   .k-input[_ngcontent-%COMP%], .search-wrapper[_ngcontent-%COMP%]   .k-dropdownlist[_ngcontent-%COMP%] {\r\n  border-bottom: 1px solid rgba(255, 255, 255, 0.08);\r\n  background: transparent;\r\n  border-radius: 0;\r\n  color: #fff;\r\n}\r\n.search-wrapper[_ngcontent-%COMP%]   .k-icon[_ngcontent-%COMP%] {\r\n  position: absolute;\r\n  right: 0;\r\n  top: 50%;\r\n  transform: translateY(-50%);\r\n  z-index: 9;\r\n    cursor: pointer;\r\n  margin-right: 2px;\r\n} \r\n.k-input[_ngcontent-%COMP%] {\r\n  color: black;\r\n}\r\n\r\n\r\n\n\r\n@media (max-width: 1700px) {\r\n  .title[_ngcontent-%COMP%] {\r\n    font-size: x-small; \n\r\n  }\r\n  .app-logo[_ngcontent-%COMP%] {\r\n    width: 50px;\r\n    height: 25px;\r\n  }\r\n}\r\n@media (max-width: 1200px) {\r\n  .title[_ngcontent-%COMP%] {\r\n    display: none;\r\n  }\r\n  .app-logo[_ngcontent-%COMP%] {\r\n    display: none\r\n  }\r\n\r\n  .search-wrapper[_ngcontent-%COMP%] {\r\n    width: 350px;\r\n  }  \r\n  .search-entity-list[_ngcontent-%COMP%] {\r\n    width: 150px; \r\n  }\r\n}"] });
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(HeaderComponent, [{
+        type: Component,
+        args: [{ selector: 'app-header-component', template: "<div class=\"header-wrap\">\r\n  <div class=\"header header-bg\">\r\n    <div class=\"nav-container\">\r\n      <div class=\"menu-button\">\r\n        <span class=\"k-icon\" (click)=\"onButtonClick()\"><kendo-svgicon [icon]=\"sharedService.kendoSVGIcon('menu')\" ></kendo-svgicon></span>\r\n      </div>\r\n\r\n      <div class=\"title\">\r\n        <img kendoCardMedia src=\"assets/MJ-Logo.png\" height=\"45px\" class=\"app-logo\" />\r\n        <h1 class=\"k-ml-2.5\">{{appName}}</h1>\r\n      </div>\r\n\r\n      <div class=\"user-info-wrapper\">\r\n        <div class=\"search-wrapper\">\r\n            <kendo-dropdownlist\r\n              [data]=\"searchableEntities\"\r\n              textField=\"Name\"\r\n              valueField=\"ID\"\r\n              class = \"search-entity-list\"\r\n              [(ngModel)]=\"selectedEntity\"\r\n            >\r\n            </kendo-dropdownlist>\r\n            <input \r\n            type=\"text\"\r\n            id=\"txtSearch\"\r\n            placeholder=\"Search\"\r\n            kendoTextBox\r\n            (keydown.enter)=\"onSearch($event)\"\r\n            #searchInput\r\n          />\r\n                        <span class=\"k-icon\" (click)=\"onSearch($event)\"><kendo-svgicon [icon]=\"sharedService.kendoSVGIcon('search')\"></kendo-svgicon></span>\r\n                </div>\r\n      <div class=\"icon-inbox\" (click)=\"showNotifications($event)\">\r\n          <span class=\"k-icon\" style=\"cursor: pointer;\"><kendo-svgicon [icon]=\"sharedService.kendoSVGIcon('inbox')\"></kendo-svgicon></span>\r\n          <span class=\"notification\" *ngIf=\"UnreadNotificationCount > 0\">{{UnreadNotificationCount}}</span>\r\n      </div>\r\n        <kendo-avatar class=\"k-m-0\" style=\"margin: 0;\" [imageSrc]=\"userImageURL\" shape=\"circle\"> </kendo-avatar>\r\n        <div class=\"user-info\">\r\n          <div class=\"example-col\">\r\n              <kendo-dropdownlist [data]=\"menuItems\"  [value]=\"selectedMenuItem\" (valueChange)=\"valueChange($event)\">\r\n              </kendo-dropdownlist>\r\n            \r\n          </div>\r\n      </div>\r\n     \r\n\r\n       \r\n      </div>\r\n    </div>\r\n  </div>\r\n  <!-- <div class=\"nav-breadcrumb\">\r\n        <kendo-breadcrumb (itemClick)=\"onBreadCrumbClick($event)\" [items]=\"breadCrumbItems\">\r\n        </kendo-breadcrumb>\r\n    </div> -->\r\n</div>\r\n", styles: [".header-wrap {\r\n  flex: auto;\r\n}\r\n\r\n.title {\r\n  font-size: x-large;  \r\n}\r\n.app-logo {\r\n  width: 100px;\r\n  height: 50px;\r\n}\r\n\r\n.user-info kendo-dropdownlist {\r\n  border: none;\r\n  background: transparent;\r\n  width: auto;\r\n  color: #fff;\r\n}\r\n.user-info-wrapper {\r\n  display: flex;\r\n  align-items: center;\r\n}\r\n.icon-inbox {\r\n  position: relative;\r\n  margin: 0 26px 0 40px;\r\n}\r\n.icon-inbox .notification {\r\n  position: absolute;\r\n  top: -8px;\r\n  right: -8px;\r\n  width: 16px;\r\n  height: 16px;\r\n  min-width: 16px;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  background: #ff6358;\r\n  border-radius: 50%;\r\n  color: #fff;\r\n  font-size: 10px;\r\n}\r\n.user-info-wrapper .header .k-avatar {\r\n  padding-left: 25px;\r\n  border-left: 2px solid #fff;\r\n}\r\n.search-wrapper {\r\n  display: flex;\r\n  align-items: center;\r\n  position: relative;\r\n  width: 500px;\r\n}\r\n.search-entity-list {\r\n  width: 200px; \r\n}\r\n::ng-deep .search-wrapper #txtSearch::placeholder, ::ng-deep .search-wrapper input::placeholder {\r\n  color: #fff;\r\n}\r\n.search-wrapper .k-input, .search-wrapper .k-dropdownlist {\r\n  border-bottom: 1px solid rgba(255, 255, 255, 0.08);\r\n  background: transparent;\r\n  border-radius: 0;\r\n  color: #fff;\r\n}\r\n.search-wrapper .k-icon {\r\n  position: absolute;\r\n  right: 0;\r\n  top: 50%;\r\n  transform: translateY(-50%);\r\n  z-index: 9;\r\n    cursor: pointer;\r\n  margin-right: 2px;\r\n} \r\n.k-input {\r\n  color: black;\r\n}\r\n\r\n\r\n/*RESPONSIVE STUFF HERE */\r\n@media (max-width: 1700px) {\r\n  .title {\r\n    font-size: x-small; /* or any other size you prefer */\r\n  }\r\n  .app-logo {\r\n    width: 50px;\r\n    height: 25px;\r\n  }\r\n}\r\n@media (max-width: 1200px) {\r\n  .title {\r\n    display: none;\r\n  }\r\n  .app-logo {\r\n    display: none\r\n  }\r\n\r\n  .search-wrapper {\r\n    width: 350px;\r\n  }  \r\n  .search-entity-list {\r\n    width: 150px; \r\n  }\r\n}\r\n"] }]
+    }], () => [{ type: i1.MJAuthBase }, { type: i2.SharedService }, { type: i3.MSFTUserImageService }, { type: i4.Router }], { applicationName: [{
+            type: Input
+        }], applicationInstance: [{
+            type: Input
+        }], toggle: [{
+            type: Output
+        }], searchInput: [{
+            type: ViewChild,
+            args: ['searchInput']
+        }], entityDropdown: [{
+            type: ViewChild,
+            args: [DropDownListComponent]
+        }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(HeaderComponent, { className: "HeaderComponent", filePath: "src\\lib\\header\\header.component.ts", lineNumber: 17 }); })();

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

@@ -1,9 +1,11 @@
-import { Router } from '@angular/router';
-import * as i0 from "@angular/core";
-export declare class HomeComponent {
-    private router;
-    constructor(router: Router);
-    navigate(route: string): void;
-    static ɵfac: i0.ɵɵFactoryDeclaration<HomeComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<HomeComponent, "app-home", never, {}, {}, never, never, false, never>;
-}
+import { Router } from '@angular/router';
+import { SharedService } from '../../public-api';
+import * as i0 from "@angular/core";
+export declare class HomeComponent {
+    sharedService: SharedService;
+    private router;
+    constructor(sharedService: SharedService, router: Router);
+    navigate(route: string): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<HomeComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<HomeComponent, "app-home", never, {}, {}, never, never, false, never>;
+}