@memberjunction/ng-explorer-core 0.9.2

package/dist/lib/generic/section-loader-component.js

@@ -0,0 +1,65 @@
+import { Component, Input, ViewChild, ViewContainerRef } from '@angular/core';
+import { MJGlobal } from '@memberjunction/global';
+import { BaseFormSectionComponent } from './base-form-section-component';
+import * as i0 from "@angular/core";
+const _c0 = ["container"];
+function SectionLoaderComponent_ng_template_0_Template(rf, ctx) { }
+export class SectionLoaderComponent {
+    constructor() {
+        this.EditMode = false;
+        this._sectionObj = null;
+    }
+    ngOnChanges(changes) {
+        // react to EditMode change
+        if (changes['EditMode'] && !changes['EditMode'].firstChange && this._sectionObj) {
+            this._sectionObj.EditMode = this.EditMode;
+        }
+    }
+    ngAfterViewInit() {
+        // do this via a promise in order to defer the load by one pass of the event loop
+        // because that results in Angular not complaining about change detection due to dynamic
+        // nature of the inner component
+        Promise.resolve().then(() => this.loadComponent());
+    }
+    loadComponent() {
+        const sectionInfo = MJGlobal.Instance.ClassFactory.GetRegistration(BaseFormSectionComponent, `${this.Entity}.${this.Section}`);
+        if (sectionInfo) {
+            const componentRef = this.container.createComponent(sectionInfo.SubClass);
+            // pass in record and edit mode
+            this._sectionObj = componentRef.instance;
+            this._sectionObj.record = this.record;
+            this._sectionObj.EditMode = this.EditMode;
+        }
+    }
+    ngOnDestroy() {
+        // Don't forget to cleanup dynamically created components
+        this.container.clear();
+    }
+}
+SectionLoaderComponent.ɵfac = function SectionLoaderComponent_Factory(t) { return new (t || SectionLoaderComponent)(); };
+SectionLoaderComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SectionLoaderComponent, selectors: [["mj-form-section"]], viewQuery: function SectionLoaderComponent_Query(rf, ctx) { if (rf & 1) {
+        i0.ɵɵviewQuery(_c0, 5, ViewContainerRef);
+    } if (rf & 2) {
+        let _t;
+        i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.container = _t.first);
+    } }, inputs: { Entity: "Entity", Section: "Section", record: "record", EditMode: "EditMode" }, features: [i0.ɵɵNgOnChangesFeature], decls: 2, vars: 0, consts: [["container", ""]], template: function SectionLoaderComponent_Template(rf, ctx) { if (rf & 1) {
+        i0.ɵɵtemplate(0, SectionLoaderComponent_ng_template_0_Template, 0, 0, "ng-template", null, 0, i0.ɵɵtemplateRefExtractor);
+    } }, encapsulation: 2 });
+(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SectionLoaderComponent, [{
+        type: Component,
+        args: [{
+                selector: 'mj-form-section',
+                template: `<ng-template #container></ng-template>`
+            }]
+    }], null, { Entity: [{
+            type: Input
+        }], Section: [{
+            type: Input
+        }], record: [{
+            type: Input
+        }], EditMode: [{
+            type: Input
+        }], container: [{
+            type: ViewChild,
+            args: ['container', { read: ViewContainerRef }]
+        }] }); })();

package/dist/lib/generic-browse-list/generic-browse-list.component.d.ts

@@ -0,0 +1,16 @@
+import { EventEmitter } from '@angular/core';
+import { Router } from '@angular/router';
+import * as i0 from "@angular/core";
+export declare class GenericBrowseListComponent {
+    private router;
+    showLoader: boolean;
+    itemType: string;
+    title: string;
+    items: any[];
+    iconName: string;
+    itemClickEvent: EventEmitter<any>;
+    constructor(router: Router);
+    itemClick(item: any): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<GenericBrowseListComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<GenericBrowseListComponent, "app-generic-browse-list", never, { "showLoader": "showLoader"; "itemType": "itemType"; "title": "title"; "items": "items"; "iconName": "iconName"; }, { "itemClickEvent": "itemClickEvent"; }, never, never, false, never>;
+}

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

@@ -0,0 +1,91 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import * as i0 from "@angular/core";
+import * as i1 from "@angular/router";
+import * as i2 from "@angular/common";
+import * as i3 from "@progress/kendo-angular-indicators";
+import * as i4 from "@progress/kendo-angular-icons";
+import * as i5 from "@progress/kendo-angular-layout";
+function GenericBrowseListComponent_kendo_loader_6_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "kendo-loader", 6);
+} }
+function GenericBrowseListComponent_div_7_div_1_Template(rf, ctx) { if (rf & 1) {
+    const _r5 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div")(1, "kendo-card", 9)(2, "kendo-card-header", 10);
+    i0.ɵɵelement(3, "kendo-icon", 11);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(4, "kendo-card-body", 12);
+    i0.ɵɵlistener("click", function GenericBrowseListComponent_div_7_div_1_Template_kendo_card_body_click_4_listener() { const restoredCtx = i0.ɵɵrestoreView(_r5); const d_r3 = restoredCtx.$implicit; const ctx_r4 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r4.itemClick(d_r3)); });
+    i0.ɵɵelementStart(5, "div", 13)(6, "h5", 14);
+    i0.ɵɵtext(7);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(8, "p", 15);
+    i0.ɵɵtext(9);
+    i0.ɵɵelementEnd()()()()();
+} if (rf & 2) {
+    const d_r3 = ctx.$implicit;
+    const ctx_r2 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance(3);
+    i0.ɵɵclassMap(ctx_r2.iconName);
+    i0.ɵɵadvance(4);
+    i0.ɵɵtextInterpolate(d_r3.Name);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(d_r3.Description);
+} }
+function GenericBrowseListComponent_div_7_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 7);
+    i0.ɵɵtemplate(1, GenericBrowseListComponent_div_7_div_1_Template, 10, 4, "div", 8);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵadvance(1);
+    i0.ɵɵproperty("ngForOf", ctx_r1.items);
+} }
+export class GenericBrowseListComponent {
+    constructor(router) {
+        this.router = router;
+        this.showLoader = true;
+        this.itemType = '';
+        this.title = '';
+        this.items = [];
+        this.iconName = 'view-icon';
+        this.itemClickEvent = new EventEmitter();
+    }
+    itemClick(item) {
+        if (item) {
+            this.itemClickEvent.emit(item);
+        }
+    }
+}
+GenericBrowseListComponent.ɵfac = function GenericBrowseListComponent_Factory(t) { return new (t || GenericBrowseListComponent)(i0.ɵɵdirectiveInject(i1.Router)); };
+GenericBrowseListComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: GenericBrowseListComponent, selectors: [["app-generic-browse-list"]], inputs: { showLoader: "showLoader", itemType: "itemType", title: "title", items: "items", iconName: "iconName" }, outputs: { itemClickEvent: "itemClickEvent" }, decls: 8, vars: 3, consts: [[1, "card-container"], [1, "card-header-entity"], [1, "title-wrap"], [1, "main-area"], ["type", "converging-spinner", 4, "ngIf"], ["class", "card-list k-d-flex k-flex-row k-h-full k-flex-wrap", 4, "ngIf"], ["type", "converging-spinner"], [1, "card-list", "k-d-flex", "k-flex-row", "k-h-full", "k-flex-wrap"], [4, "ngFor", "ngForOf"], [1, "card-wrapper"], [1, "k-hstack", "view-card"], ["name", "table"], [3, "click"], [1, "view-card-content", "k-cursor-pointer"], ["kendoCardTitle", ""], ["kendoCardSubtitle", ""]], template: function GenericBrowseListComponent_Template(rf, ctx) { if (rf & 1) {
+        i0.ɵɵelementStart(0, "div", 0)(1, "div", 1)(2, "div", 2)(3, "h1");
+        i0.ɵɵtext(4);
+        i0.ɵɵelementEnd()()();
+        i0.ɵɵelementStart(5, "div", 3);
+        i0.ɵɵtemplate(6, GenericBrowseListComponent_kendo_loader_6_Template, 1, 0, "kendo-loader", 4);
+        i0.ɵɵtemplate(7, GenericBrowseListComponent_div_7_Template, 2, 1, "div", 5);
+        i0.ɵɵelementEnd()();
+    } if (rf & 2) {
+        i0.ɵɵadvance(4);
+        i0.ɵɵtextInterpolate(ctx.title);
+        i0.ɵɵadvance(2);
+        i0.ɵɵproperty("ngIf", ctx.showLoader);
+        i0.ɵɵadvance(1);
+        i0.ɵɵproperty("ngIf", !ctx.showLoader);
+    } }, dependencies: [i2.NgForOf, i2.NgIf, i3.LoaderComponent, i4.IconComponent, i5.CardComponent, i5.CardHeaderComponent, i5.CardBodyComponent, i5.CardTitleDirective, i5.CardSubtitleDirective], styles: [".main-area[_ngcontent-%COMP%] {\r\n    display: flex;\r\n    height: 100%;\r\n    width: 100%;\r\n    gap: 24px;\r\n    padding: 24px 0;\r\n}\r\n.list-view[_ngcontent-%COMP%] {\r\n    padding: 16px;\r\n    min-width: 300px;\r\n    border-radius: 4px;\r\n    background:  #FAFAFA;\r\n    border: none;\r\n}\r\n  .list-view .k-listview-header,   .list-view .k-listview-footer {\r\n    border: none;\r\n}\r\n  .list-view .k-listview-content {\r\n    border: 1px solid rgba(0, 0, 0, 0.08);\r\n    border-radius: 4px;\r\n    background: #fff;\r\n    padding: 16px;\r\n}\r\n\r\n.header[_ngcontent-%COMP%], .footer[_ngcontent-%COMP%] {\r\n    color: #424242;\r\n    font-size: 16px;\r\n    height: auto;\r\n    margin:0;\r\n}\r\n\r\n.header[_ngcontent-%COMP%] {\r\n    color: #424242;\r\n    margin-bottom: 16px;\r\n    display: flex;\r\n    justify-content: space-between;\r\n    align-items: center;\r\n}\r\n.header[_ngcontent-%COMP%]   .head-tag[_ngcontent-%COMP%] {\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 8px;\r\n    color:  #424242;\r\nfont-size: 16px;\r\nfont-style: normal;\r\nfont-weight: 400;\r\nline-height: 20px;\r\n}\r\n\r\n.header[_ngcontent-%COMP%]   .count[_ngcontent-%COMP%] {\r\n    width: 24px;\r\n    height: 24px;\r\n    min-width: 24px;\r\n    display: flex;\r\n    justify-content: center;\r\n    align-items: center;\r\n    font-size: 10px;\r\n    background: rgba(0, 0, 0, 0.08);\r\n    border-radius: 50%;\r\n}\r\n.footer[_ngcontent-%COMP%] {\r\n    font-size: 14px;\r\n    margin-top: 16px;\r\n}\r\n\r\n.list-item[_ngcontent-%COMP%] {\r\n    color:  #424242;\r\n    font-size: 14px;\r\n    font-style: normal;\r\n    font-weight: 400;\r\n    line-height: 30px;\r\n    cursor: pointer;\r\n    margin: 4px;\r\n}\r\n.card-container[_ngcontent-%COMP%] {\r\n    margin: 0;\r\n    padding: 0;\r\n    box-shadow: none;\r\n}\r\n.card-header-entity[_ngcontent-%COMP%] {\r\n    display: flex;\r\n    justify-content: space-between;\r\n    align-items: flex-start;\r\n    padding-bottom: 20px;\r\n    border-bottom: 1px solid rgba(0, 0, 0, 0.08);\r\n}\r\n.card-header-entity[_ngcontent-%COMP%]   .title-wrap[_ngcontent-%COMP%]   h1[_ngcontent-%COMP%] {\r\n    color: #424242;\r\n    font-size: 28px;\r\n    font-style: normal;\r\n    font-weight: 300;\r\n    line-height: 28px;\r\n    margin-bottom: 15px;\r\n  }\r\n  .card-header-entity[_ngcontent-%COMP%]   .title-wrap[_ngcontent-%COMP%] {\r\n    display: flex;\r\n    flex-direction: column;\r\n  }\r\n  .card-header-entity[_ngcontent-%COMP%]   .title-wrap[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\r\n    margin: 0;\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 8px;\r\n    color: #424242;\r\n    font-size: 14px;\r\n    font-style: normal;\r\n    font-weight: 400;\r\n    line-height: 20px;\r\n  }\r\n\r\n \r\n\r\n\r\n   \r\n  .view-card[_ngcontent-%COMP%]   .view-icon[_ngcontent-%COMP%] {\r\n    color: #ff6358;\r\n  }\r\n  .card-wrapper[_ngcontent-%COMP%] {\r\n    border: 1px solid rgba(0, 0, 0, 0.08);\r\n    border-radius: 6px;\r\n  }\r\n  .card-wrapper[_ngcontent-%COMP%]   .k-card-body[_ngcontent-%COMP%] {\r\n    background: #fff;\r\n    padding: 12px 20px;\r\n  }\r\n  .card-wrapper[_ngcontent-%COMP%]   .view-card[_ngcontent-%COMP%] {\r\n    overflow: auto;\r\n    display: flex;\r\n    justify-content: space-between;\r\n    align-items: center;\r\n    background: #fafafa;\r\n    padding: 4px 15px;\r\n  }\r\n  .view-card[_ngcontent-%COMP%]   .btn-wrapper[_ngcontent-%COMP%] {\r\n    display: flex;\r\n    align-items: center;\r\n  }\r\n  \r\n  .k-card-body[_ngcontent-%COMP%]   .view-card-content[_ngcontent-%COMP%]   h5[_ngcontent-%COMP%] {\r\n    color: #424242;\r\n    font-size: 16px;\r\n    font-style: normal;\r\n    font-weight: 400;\r\n    line-height: 20px;\r\n    margin-bottom: 0;\r\n    letter-spacing: 0.18px;\r\n  }\r\n  .k-card-body[_ngcontent-%COMP%]   .view-card-content[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\r\n    color: #666;\r\n    font-size: 14px;\r\n    font-style: normal;\r\n    font-weight: 400;\r\n    line-height: 20px;\r\n    height: 48px;\r\n    margin-bottom: 0;\r\n  }\r\n  .card-container[_ngcontent-%COMP%] {\r\n    padding: 0;\r\n    margin: 0;\r\n    box-shadow: none;\r\n  }\r\n  .card-header-entity[_ngcontent-%COMP%] {\r\n    display: flex;\r\n    justify-content: space-between;\r\n    align-items: flex-start;\r\n    padding-bottom: 20px;\r\n    border-bottom: 1px solid rgba(0, 0, 0, 0.08);\r\n  }\r\n  \r\n  .card-header-entity[_ngcontent-%COMP%]   .title-wrap[_ngcontent-%COMP%]   h1[_ngcontent-%COMP%] {\r\n    color: #424242;\r\n    font-size: 28px;\r\n    font-style: normal;\r\n    font-weight: 300;\r\n    line-height: 28px;\r\n    margin-bottom: 15px;\r\n  }\r\n  .card-header-entity[_ngcontent-%COMP%]   .title-wrap[_ngcontent-%COMP%] {\r\n    display: flex;\r\n    flex-direction: column;\r\n  }\r\n  .card-header-entity[_ngcontent-%COMP%]   .title-wrap[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\r\n    margin: 0;\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 8px;\r\n    color: #424242;\r\n    font-size: 14px;\r\n    font-style: normal;\r\n    font-weight: 400;\r\n    line-height: 20px;\r\n  }\r\n  .main-area[_ngcontent-%COMP%]   .card-list[_ngcontent-%COMP%] {\r\n    display: flex;\r\n    gap: 20px;\r\n  }"] });
+(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(GenericBrowseListComponent, [{
+        type: Component,
+        args: [{ selector: 'app-generic-browse-list', template: "<div  class=\"card-container\">\n    <div class=\"card-header-entity\">\n        <div class=\"title-wrap\">\n            <h1>{{title}}</h1>\n        </div>\n    </div>\n    <div class=\"main-area\"> \n        <kendo-loader *ngIf=\"showLoader\" type=\"converging-spinner\" ></kendo-loader>\n        <div class=\"card-list k-d-flex k-flex-row k-h-full k-flex-wrap\" *ngIf=\"!showLoader\">\n          <div *ngFor=\"let d of items\">\n            <kendo-card class=\"card-wrapper\">\n              <kendo-card-header class=\"k-hstack view-card\">\n                <kendo-icon name=\"table\" [class]=\"iconName\"></kendo-icon>\n              </kendo-card-header>\n    \n              <kendo-card-body (click)=\"itemClick(d)\">\n                <div class=\"view-card-content k-cursor-pointer\">\n                  <h5 kendoCardTitle>{{ d.Name }}</h5>\n                  <p kendoCardSubtitle>{{ d.Description }}</p>\n                </div>\n              </kendo-card-body>\n            </kendo-card>\n          </div>\n        </div>\n    </div>\n</div>", styles: ["\r\n.main-area {\r\n    display: flex;\r\n    height: 100%;\r\n    width: 100%;\r\n    gap: 24px;\r\n    padding: 24px 0;\r\n}\r\n.list-view {\r\n    padding: 16px;\r\n    min-width: 300px;\r\n    border-radius: 4px;\r\n    background:  #FAFAFA;\r\n    border: none;\r\n}\r\n::ng-deep .list-view .k-listview-header, \r\n::ng-deep .list-view .k-listview-footer {\r\n    border: none;\r\n}\r\n::ng-deep .list-view .k-listview-content {\r\n    border: 1px solid rgba(0, 0, 0, 0.08);\r\n    border-radius: 4px;\r\n    background: #fff;\r\n    padding: 16px;\r\n}\r\n\r\n.header,\r\n.footer {\r\n    color: #424242;\r\n    font-size: 16px;\r\n    height: auto;\r\n    margin:0;\r\n}\r\n\r\n.header {\r\n    color: #424242;\r\n    margin-bottom: 16px;\r\n    display: flex;\r\n    justify-content: space-between;\r\n    align-items: center;\r\n}\r\n.header .head-tag {\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 8px;\r\n    color:  #424242;\r\nfont-size: 16px;\r\nfont-style: normal;\r\nfont-weight: 400;\r\nline-height: 20px;\r\n}\r\n\r\n.header .count {\r\n    width: 24px;\r\n    height: 24px;\r\n    min-width: 24px;\r\n    display: flex;\r\n    justify-content: center;\r\n    align-items: center;\r\n    font-size: 10px;\r\n    background: rgba(0, 0, 0, 0.08);\r\n    border-radius: 50%;\r\n}\r\n.footer {\r\n    font-size: 14px;\r\n    margin-top: 16px;\r\n}\r\n\r\n.list-item {\r\n    color:  #424242;\r\n    font-size: 14px;\r\n    font-style: normal;\r\n    font-weight: 400;\r\n    line-height: 30px;\r\n    cursor: pointer;\r\n    margin: 4px;\r\n}\r\n.card-container {\r\n    margin: 0;\r\n    padding: 0;\r\n    box-shadow: none;\r\n}\r\n.card-header-entity {\r\n    display: flex;\r\n    justify-content: space-between;\r\n    align-items: flex-start;\r\n    padding-bottom: 20px;\r\n    border-bottom: 1px solid rgba(0, 0, 0, 0.08);\r\n}\r\n.card-header-entity .title-wrap h1 {\r\n    color: #424242;\r\n    font-size: 28px;\r\n    font-style: normal;\r\n    font-weight: 300;\r\n    line-height: 28px;\r\n    margin-bottom: 15px;\r\n  }\r\n  .card-header-entity .title-wrap {\r\n    display: flex;\r\n    flex-direction: column;\r\n  }\r\n  .card-header-entity .title-wrap p {\r\n    margin: 0;\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 8px;\r\n    color: #424242;\r\n    font-size: 14px;\r\n    font-style: normal;\r\n    font-weight: 400;\r\n    line-height: 20px;\r\n  }\r\n\r\n \r\n\r\n\r\n   \r\n  .view-card .view-icon {\r\n    color: #ff6358;\r\n  }\r\n  .card-wrapper {\r\n    border: 1px solid rgba(0, 0, 0, 0.08);\r\n    border-radius: 6px;\r\n  }\r\n  .card-wrapper .k-card-body {\r\n    background: #fff;\r\n    padding: 12px 20px;\r\n  }\r\n  .card-wrapper .view-card {\r\n    overflow: auto;\r\n    display: flex;\r\n    justify-content: space-between;\r\n    align-items: center;\r\n    background: #fafafa;\r\n    padding: 4px 15px;\r\n  }\r\n  .view-card .btn-wrapper {\r\n    display: flex;\r\n    align-items: center;\r\n  }\r\n  \r\n  .k-card-body .view-card-content h5 {\r\n    color: #424242;\r\n    font-size: 16px;\r\n    font-style: normal;\r\n    font-weight: 400;\r\n    line-height: 20px;\r\n    margin-bottom: 0;\r\n    letter-spacing: 0.18px;\r\n  }\r\n  .k-card-body .view-card-content p {\r\n    color: #666;\r\n    font-size: 14px;\r\n    font-style: normal;\r\n    font-weight: 400;\r\n    line-height: 20px;\r\n    height: 48px;\r\n    margin-bottom: 0;\r\n  }\r\n  .card-container {\r\n    padding: 0;\r\n    margin: 0;\r\n    box-shadow: none;\r\n  }\r\n  .card-header-entity {\r\n    display: flex;\r\n    justify-content: space-between;\r\n    align-items: flex-start;\r\n    padding-bottom: 20px;\r\n    border-bottom: 1px solid rgba(0, 0, 0, 0.08);\r\n  }\r\n  \r\n  .card-header-entity .title-wrap h1 {\r\n    color: #424242;\r\n    font-size: 28px;\r\n    font-style: normal;\r\n    font-weight: 300;\r\n    line-height: 28px;\r\n    margin-bottom: 15px;\r\n  }\r\n  .card-header-entity .title-wrap {\r\n    display: flex;\r\n    flex-direction: column;\r\n  }\r\n  .card-header-entity .title-wrap p {\r\n    margin: 0;\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 8px;\r\n    color: #424242;\r\n    font-size: 14px;\r\n    font-style: normal;\r\n    font-weight: 400;\r\n    line-height: 20px;\r\n  }\r\n  .main-area .card-list {\r\n    display: flex;\r\n    gap: 20px;\r\n  }\r\n  "] }]
+    }], function () { return [{ type: i1.Router }]; }, { showLoader: [{
+            type: Input
+        }], itemType: [{
+            type: Input
+        }], title: [{
+            type: Input
+        }], items: [{
+            type: Input
+        }], iconName: [{
+            type: Input
+        }], itemClickEvent: [{
+            type: Output
+        }] }); })();

package/dist/lib/guards/auth-guard.service.d.ts

@@ -0,0 +1,11 @@
+import { Router, CanActivate } from '@angular/router';
+import { MJAuthBase } from '@memberjunction/ng-auth-services';
+import * as i0 from "@angular/core";
+export declare class AuthGuardService implements CanActivate {
+    private authBase;
+    router: Router;
+    constructor(authBase: MJAuthBase, router: Router);
+    canActivate(): boolean;
+    static ɵfac: i0.ɵɵFactoryDeclaration<AuthGuardService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<AuthGuardService>;
+}

package/dist/lib/guards/auth-guard.service.js

@@ -0,0 +1,24 @@
+import { Injectable } from '@angular/core';
+import * as i0 from "@angular/core";
+import * as i1 from "@memberjunction/ng-auth-services";
+import * as i2 from "@angular/router";
+export class AuthGuardService {
+    constructor(authBase, router) {
+        this.authBase = authBase;
+        this.router = router;
+    }
+    canActivate() {
+        if (!this.authBase.authenticated) {
+            return false;
+        }
+        return true;
+    }
+}
+AuthGuardService.ɵfac = function AuthGuardService_Factory(t) { return new (t || AuthGuardService)(i0.ɵɵinject(i1.MJAuthBase), i0.ɵɵinject(i2.Router)); };
+AuthGuardService.ɵprov = /*@__PURE__*/ i0.ɵɵdefineInjectable({ token: AuthGuardService, factory: AuthGuardService.ɵfac, providedIn: 'root' });
+(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(AuthGuardService, [{
+        type: Injectable,
+        args: [{
+                providedIn: 'root',
+            }]
+    }], function () { return [{ type: i1.MJAuthBase }, { type: i2.Router }]; }, null); })();

package/dist/lib/guards/entities.guard.d.ts

@@ -0,0 +1,3 @@
+import { ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
+import { EntityPermissionType } from "@memberjunction/core";
+export declare function checkUserEntityPermissions(type: EntityPermissionType): (route: ActivatedRouteSnapshot, state: RouterStateSnapshot) => any;

package/dist/lib/guards/entities.guard.js

@@ -0,0 +1,38 @@
+import { EntityPermissionType, Metadata } from "@memberjunction/core";
+export function checkUserEntityPermissions(type) {
+    return (route, state) => {
+        const md = new Metadata();
+        const appName = route.params['appName'];
+        const entityName = route.params['entityName'];
+        if (md && md.Entities) {
+            const entity = md.Entities.find(e => {
+                return e.Name === entityName;
+            });
+            const permissions = entity === null || entity === void 0 ? void 0 : entity.GetUserPermisions(md.CurrentUser);
+            if (permissions) {
+                let bAllowed = false;
+                switch (type) {
+                    case EntityPermissionType.Create:
+                        bAllowed = permissions.CanCreate;
+                        break;
+                    case EntityPermissionType.Read:
+                        bAllowed = permissions.CanRead;
+                        break;
+                    case EntityPermissionType.Update:
+                        bAllowed = permissions.CanUpdate;
+                        break;
+                    case EntityPermissionType.Delete:
+                        bAllowed = permissions.CanDelete;
+                        break;
+                }
+                return bAllowed;
+            }
+            else {
+                return false;
+            }
+        }
+        else {
+            return false; // entity metadata not loaded yet
+        }
+    };
+}

package/dist/lib/header/MSFT_UserImageService.d.ts

@@ -0,0 +1,11 @@
+import { HttpClient } from '@angular/common/http';
+import { Observable } from 'rxjs';
+import * as i0 from "@angular/core";
+export declare class MSFTUserImageService {
+    private http;
+    private url;
+    constructor(http: HttpClient);
+    getPhoto(token: string): Observable<Blob>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MSFTUserImageService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<MSFTUserImageService>;
+}

package/dist/lib/header/MSFT_UserImageService.js

@@ -0,0 +1,23 @@
+import { HttpHeaders } from '@angular/common/http';
+import { Injectable } from '@angular/core';
+import * as i0 from "@angular/core";
+import * as i1 from "@angular/common/http";
+export class MSFTUserImageService {
+    constructor(http) {
+        this.http = http;
+        this.url = 'https://graph.microsoft.com/v1.0/me/photo/$value';
+    }
+    getPhoto(token) {
+        const headers = new HttpHeaders().set('Authorization', `Bearer ${token}`);
+        const val = this.http.get(this.url, { headers, responseType: 'blob' });
+        return val;
+    }
+}
+MSFTUserImageService.ɵfac = function MSFTUserImageService_Factory(t) { return new (t || MSFTUserImageService)(i0.ɵɵinject(i1.HttpClient)); };
+MSFTUserImageService.ɵprov = /*@__PURE__*/ i0.ɵɵdefineInjectable({ token: MSFTUserImageService, factory: MSFTUserImageService.ɵfac, providedIn: 'root' });
+(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MSFTUserImageService, [{
+        type: Injectable,
+        args: [{
+                providedIn: 'root',
+            }]
+    }], function () { return [{ type: i1.HttpClient }]; }, null); })();

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

@@ -0,0 +1,51 @@
+import { EventEmitter, ElementRef, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
+import { MJAuthBase } from '@memberjunction/ng-auth-services';
+import { SharedService } from '../shared/shared.service';
+import { DropDownListComponent } from '@progress/kendo-angular-dropdowns';
+import { MSFTUserImageService } from './MSFT_UserImageService';
+import { UserNotificationEntity } from '@memberjunction/core-entities';
+import * as i0 from "@angular/core";
+export declare class HeaderComponent implements OnInit {
+    authBase: MJAuthBase;
+    private sharedService;
+    private msftUserImageService;
+    private router;
+    applicationName: string;
+    applicationInstance: string;
+    menuItems: Array<string>;
+    selectedMenuItem: string;
+    userImageURL: string;
+    toggle: EventEmitter<any>;
+    searchInput: ElementRef<HTMLInputElement>;
+    entityDropdown: DropDownListComponent;
+    appName: string;
+    selectedLanguage: {
+        locale: string;
+        localeId: string;
+    };
+    popupSettings: {
+        width: string;
+    };
+    themes: any;
+    selectedTheme: any;
+    get UserNotifications(): UserNotificationEntity[];
+    get UnreadNotificationCount(): number;
+    constructor(authBase: MJAuthBase, sharedService: SharedService, msftUserImageService: MSFTUserImageService, router: Router);
+    changeTheme(theme: {
+        href: string;
+        text: string;
+    }): void;
+    onButtonClick(): void;
+    logout(): Promise<void>;
+    valueChange(event: any): Promise<void>;
+    showNotifications(event: any): Promise<void>;
+    searchableEntities: any[];
+    selectedEntity: any;
+    ngOnInit(): Promise<void>;
+    private loadSearchableEntities;
+    private isMicrosoft;
+    onSearch(event: any): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<HeaderComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<HeaderComponent, "app-header-component", never, { "applicationName": "applicationName"; "applicationInstance": "applicationInstance"; }, { "toggle": "toggle"; }, never, never, false, never>;
+}

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

@@ -0,0 +1,208 @@
+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]
+        }] }); })();

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

@@ -0,0 +1,9 @@
+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>;
+}