sgh-navbar 0.0.1

package/esm2020/lib/toolbar/toolbar.component.mjs

@@ -0,0 +1,46 @@
+import { Component, Input, Output, EventEmitter } from '@angular/core';
+import { fadeInOut } from '../sidenav/helper';
+import * as i0 from "@angular/core";
+import * as i1 from "@angular/common";
+import * as i2 from "@angular/forms";
+export class ToolbarComponent {
+    constructor() {
+        this.searchShow = false;
+        this.notificationShow = true;
+        this.bgColor = "#33284e";
+        this.searchInputEvent = new EventEmitter();
+        this.logOutEvent = new EventEmitter();
+        this.isNotifNavCollapsed = false;
+        this.searchInput = "";
+    }
+    clickNoti() {
+        this.isNotifNavCollapsed = !this.isNotifNavCollapsed;
+    }
+    onSearchInput() {
+        this.searchInputEvent.emit(this.searchInput);
+    }
+    logOut() {
+        this.logOutEvent.emit(this.searchInput);
+    }
+}
+ToolbarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: ToolbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+ToolbarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: ToolbarComponent, selector: "app-toolbar", inputs: { searchShow: "searchShow", notificationShow: "notificationShow", bgColor: "bgColor" }, outputs: { searchInputEvent: "searchInputEvent", logOutEvent: "logOutEvent" }, ngImport: i0, template: "<nav [style.background-color]=\"bgColor\">\r\n    <div class=\"search\">\r\n      <div class=\"box\" *ngIf=\"searchShow\">\r\n        <i class=\"fa fa-search\"></i>\r\n        <input type=\"text\" name=\"\" [(ngModel)]=\"searchInput\" (keyup)=\"onSearchInput()\" placeholder=\"Search\">\r\n      </div>\r\n    </div>\r\n    <div class=\"icon\" id=\"bell\" (click)=\"clickNoti()\" *ngIf=\"notificationShow\">\r\n      <i class=\"fa fa-lg fa-bell\" style=\"color: #fff;\"></i>\r\n    </div>\r\n    <div class=\"icon\" id=\"bell\" (click)=\"logOut()\">\r\n      <i class=\"fa fa-lg fa-sign-out\" style=\"color: #fff;\"></i>\r\n    </div>\r\n\r\n    <div *ngIf=\"isNotifNavCollapsed\" class=\"notifications\" id=\"box\">\r\n        <h2>Notifications <i class=\"fas fa-search\"></i> - <span>2</span></h2>\r\n        <div class=\"notifications-item\"> <img src=\"https://i.imgur.com/uIgDDDd.jpg\" alt=\"img\">\r\n            <div class=\"text\">\r\n                <h4>Samso aliao</h4>\r\n                <p>Samso Nagaro Like your home work</p>\r\n            </div>\r\n        </div>\r\n        <div class=\"notifications-item\"> <img src=\"https://img.icons8.com/flat_round/64/000000/vote-badge.png\" alt=\"img\">\r\n            <div class=\"text\">\r\n                <h4>John Silvester</h4>\r\n                <p>+20 vista badge earned</p>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</nav>\r\n", styles: ["nav{display:flex;align-items:center;background:#494553;height:60px;position:relative}.icon{cursor:pointer;margin-right:50px}.icon span{background:#f00;padding:7px;border-radius:50%;color:#fff;vertical-align:top;margin-left:-25px}.icon img{display:inline-block;width:26px}.icon:hover{opacity:.7}.search{flex:1;margin-left:50px;color:#eee;font-size:20px;font-family:monospace}.notifications{width:300px;height:auto;opacity:1;position:absolute;top:63px;right:62px;border-radius:5px 0 5px 5px;background-color:#fff;z-index:2;box-shadow:0 4px 8px #0003,0 6px 20px #00000030}.notifications h2{font-size:14px;padding:10px;border-bottom:1px solid #eee;color:#999}.notifications h2 span{color:red}.notifications-item{display:flex;border-bottom:1px solid #eee;padding:6px 9px;margin-bottom:0;cursor:pointer}.notifications-item:hover{background-color:#eee}.notifications-item img{display:block;width:50px;height:50px;margin-right:9px;border-radius:50%;margin-top:2px}.notifications-item .text h4{color:#777;font-size:16px;margin-top:3px}.notifications-item .text p{color:#aaa;font-size:12px}.box{width:280px;height:40px;background-color:#fff;border-radius:30px;display:flex;align-items:center;padding:20px}.box>i{font-size:20px;color:#777}.box>input{flex:1;height:35px;border:none;outline:none;font-size:18px;padding-left:10px}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], animations: [
+        fadeInOut
+    ] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: ToolbarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-toolbar', animations: [
+                        fadeInOut
+                    ], template: "<nav [style.background-color]=\"bgColor\">\r\n    <div class=\"search\">\r\n      <div class=\"box\" *ngIf=\"searchShow\">\r\n        <i class=\"fa fa-search\"></i>\r\n        <input type=\"text\" name=\"\" [(ngModel)]=\"searchInput\" (keyup)=\"onSearchInput()\" placeholder=\"Search\">\r\n      </div>\r\n    </div>\r\n    <div class=\"icon\" id=\"bell\" (click)=\"clickNoti()\" *ngIf=\"notificationShow\">\r\n      <i class=\"fa fa-lg fa-bell\" style=\"color: #fff;\"></i>\r\n    </div>\r\n    <div class=\"icon\" id=\"bell\" (click)=\"logOut()\">\r\n      <i class=\"fa fa-lg fa-sign-out\" style=\"color: #fff;\"></i>\r\n    </div>\r\n\r\n    <div *ngIf=\"isNotifNavCollapsed\" class=\"notifications\" id=\"box\">\r\n        <h2>Notifications <i class=\"fas fa-search\"></i> - <span>2</span></h2>\r\n        <div class=\"notifications-item\"> <img src=\"https://i.imgur.com/uIgDDDd.jpg\" alt=\"img\">\r\n            <div class=\"text\">\r\n                <h4>Samso aliao</h4>\r\n                <p>Samso Nagaro Like your home work</p>\r\n            </div>\r\n        </div>\r\n        <div class=\"notifications-item\"> <img src=\"https://img.icons8.com/flat_round/64/000000/vote-badge.png\" alt=\"img\">\r\n            <div class=\"text\">\r\n                <h4>John Silvester</h4>\r\n                <p>+20 vista badge earned</p>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</nav>\r\n", styles: ["nav{display:flex;align-items:center;background:#494553;height:60px;position:relative}.icon{cursor:pointer;margin-right:50px}.icon span{background:#f00;padding:7px;border-radius:50%;color:#fff;vertical-align:top;margin-left:-25px}.icon img{display:inline-block;width:26px}.icon:hover{opacity:.7}.search{flex:1;margin-left:50px;color:#eee;font-size:20px;font-family:monospace}.notifications{width:300px;height:auto;opacity:1;position:absolute;top:63px;right:62px;border-radius:5px 0 5px 5px;background-color:#fff;z-index:2;box-shadow:0 4px 8px #0003,0 6px 20px #00000030}.notifications h2{font-size:14px;padding:10px;border-bottom:1px solid #eee;color:#999}.notifications h2 span{color:red}.notifications-item{display:flex;border-bottom:1px solid #eee;padding:6px 9px;margin-bottom:0;cursor:pointer}.notifications-item:hover{background-color:#eee}.notifications-item img{display:block;width:50px;height:50px;margin-right:9px;border-radius:50%;margin-top:2px}.notifications-item .text h4{color:#777;font-size:16px;margin-top:3px}.notifications-item .text p{color:#aaa;font-size:12px}.box{width:280px;height:40px;background-color:#fff;border-radius:30px;display:flex;align-items:center;padding:20px}.box>i{font-size:20px;color:#777}.box>input{flex:1;height:35px;border:none;outline:none;font-size:18px;padding-left:10px}\n"] }]
+        }], propDecorators: { searchShow: [{
+                type: Input
+            }], notificationShow: [{
+                type: Input
+            }], bgColor: [{
+                type: Input
+            }], searchInputEvent: [{
+                type: Output
+            }], logOutEvent: [{
+                type: Output
+            }] } });
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidG9vbGJhci5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9zZ2gtbmF2YmFyL3NyYy9saWIvdG9vbGJhci90b29sYmFyLmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL3NnaC1uYXZiYXIvc3JjL2xpYi90b29sYmFyL3Rvb2xiYXIuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFNBQVMsRUFBRSxLQUFLLEVBQUUsTUFBTSxFQUFFLFlBQVksRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUN2RSxPQUFPLEVBQUUsU0FBUyxFQUFFLE1BQU0sbUJBQW1CLENBQUM7Ozs7QUFVOUMsTUFBTSxPQUFPLGdCQUFnQjtJQVI3QjtRQVVXLGVBQVUsR0FBRyxLQUFLLENBQUM7UUFDbkIscUJBQWdCLEdBQUcsSUFBSSxDQUFDO1FBQ3hCLFlBQU8sR0FBRyxTQUFTLENBQUM7UUFDbkIscUJBQWdCLEdBQUcsSUFBSSxZQUFZLEVBQVUsQ0FBQztRQUM5QyxnQkFBVyxHQUFHLElBQUksWUFBWSxFQUFVLENBQUM7UUFFbkQsd0JBQW1CLEdBQUcsS0FBSyxDQUFDO1FBQzVCLGdCQUFXLEdBQUMsRUFBRSxDQUFDO0tBY2hCO0lBWkMsU0FBUztRQUNQLElBQUksQ0FBQyxtQkFBbUIsR0FBRyxDQUFDLElBQUksQ0FBQyxtQkFBbUIsQ0FBQztJQUN2RCxDQUFDO0lBRUQsYUFBYTtRQUNYLElBQUksQ0FBQyxnQkFBZ0IsQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLFdBQVcsQ0FBQyxDQUFDO0lBQy9DLENBQUM7SUFFRCxNQUFNO1FBQ0osSUFBSSxDQUFDLFdBQVcsQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLFdBQVcsQ0FBQyxDQUFDO0lBRTFDLENBQUM7OzhHQXRCVSxnQkFBZ0I7a0dBQWhCLGdCQUFnQixrT0NYN0IsKzNDQThCQSxzZ0VEdkJjO1FBQ1YsU0FBUztLQUNWOzRGQUVVLGdCQUFnQjtrQkFSNUIsU0FBUzsrQkFDRSxhQUFhLGNBR1g7d0JBQ1YsU0FBUztxQkFDVjs4QkFJUSxVQUFVO3NCQUFsQixLQUFLO2dCQUNHLGdCQUFnQjtzQkFBeEIsS0FBSztnQkFDRyxPQUFPO3NCQUFmLEtBQUs7Z0JBQ0ksZ0JBQWdCO3NCQUF6QixNQUFNO2dCQUNHLFdBQVc7c0JBQXBCLE1BQU0iLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21wb25lbnQsIElucHV0LCBPdXRwdXQsIEV2ZW50RW1pdHRlciB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgZmFkZUluT3V0IH0gZnJvbSAnLi4vc2lkZW5hdi9oZWxwZXInO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICdhcHAtdG9vbGJhcicsXG4gIHRlbXBsYXRlVXJsOiAnLi90b29sYmFyLmNvbXBvbmVudC5odG1sJyxcbiAgc3R5bGVVcmxzOiBbJy4vdG9vbGJhci5jb21wb25lbnQuc2NzcyddLFxuICBhbmltYXRpb25zOiBbXG4gICAgZmFkZUluT3V0XG4gIF1cbn0pXG5leHBvcnQgY2xhc3MgVG9vbGJhckNvbXBvbmVudCB7XG5cbiAgQElucHV0KCkgc2VhcmNoU2hvdyA9IGZhbHNlO1xuICBASW5wdXQoKSBub3RpZmljYXRpb25TaG93ID0gdHJ1ZTtcbiAgQElucHV0KCkgYmdDb2xvciA9IFwiIzMzMjg0ZVwiO1xuICBAT3V0cHV0KCkgc2VhcmNoSW5wdXRFdmVudCA9IG5ldyBFdmVudEVtaXR0ZXI8c3RyaW5nPigpO1xuICBAT3V0cHV0KCkgbG9nT3V0RXZlbnQgPSBuZXcgRXZlbnRFbWl0dGVyPHN0cmluZz4oKTtcblxuICBpc05vdGlmTmF2Q29sbGFwc2VkID0gZmFsc2U7XG4gIHNlYXJjaElucHV0PVwiXCI7XG5cbiAgY2xpY2tOb3RpKCl7XG4gICAgdGhpcy5pc05vdGlmTmF2Q29sbGFwc2VkID0gIXRoaXMuaXNOb3RpZk5hdkNvbGxhcHNlZDtcbiAgfVxuXG4gIG9uU2VhcmNoSW5wdXQoKSB7XG4gICAgdGhpcy5zZWFyY2hJbnB1dEV2ZW50LmVtaXQodGhpcy5zZWFyY2hJbnB1dCk7XG4gIH1cblxuICBsb2dPdXQoKXtcbiAgICB0aGlzLmxvZ091dEV2ZW50LmVtaXQodGhpcy5zZWFyY2hJbnB1dCk7XG5cbiAgfVxufVxuIiwiPG5hdiBbc3R5bGUuYmFja2dyb3VuZC1jb2xvcl09XCJiZ0NvbG9yXCI+XHJcbiAgICA8ZGl2IGNsYXNzPVwic2VhcmNoXCI+XHJcbiAgICAgIDxkaXYgY2xhc3M9XCJib3hcIiAqbmdJZj1cInNlYXJjaFNob3dcIj5cclxuICAgICAgICA8aSBjbGFzcz1cImZhIGZhLXNlYXJjaFwiPjwvaT5cclxuICAgICAgICA8aW5wdXQgdHlwZT1cInRleHRcIiBuYW1lPVwiXCIgWyhuZ01vZGVsKV09XCJzZWFyY2hJbnB1dFwiIChrZXl1cCk9XCJvblNlYXJjaElucHV0KClcIiBwbGFjZWhvbGRlcj1cIlNlYXJjaFwiPlxyXG4gICAgICA8L2Rpdj5cclxuICAgIDwvZGl2PlxyXG4gICAgPGRpdiBjbGFzcz1cImljb25cIiBpZD1cImJlbGxcIiAoY2xpY2spPVwiY2xpY2tOb3RpKClcIiAqbmdJZj1cIm5vdGlmaWNhdGlvblNob3dcIj5cclxuICAgICAgPGkgY2xhc3M9XCJmYSBmYS1sZyBmYS1iZWxsXCIgc3R5bGU9XCJjb2xvcjogI2ZmZjtcIj48L2k+XHJcbiAgICA8L2Rpdj5cclxuICAgIDxkaXYgY2xhc3M9XCJpY29uXCIgaWQ9XCJiZWxsXCIgKGNsaWNrKT1cImxvZ091dCgpXCI+XHJcbiAgICAgIDxpIGNsYXNzPVwiZmEgZmEtbGcgZmEtc2lnbi1vdXRcIiBzdHlsZT1cImNvbG9yOiAjZmZmO1wiPjwvaT5cclxuICAgIDwvZGl2PlxyXG5cclxuICAgIDxkaXYgKm5nSWY9XCJpc05vdGlmTmF2Q29sbGFwc2VkXCIgY2xhc3M9XCJub3RpZmljYXRpb25zXCIgaWQ9XCJib3hcIj5cclxuICAgICAgICA8aDI+Tm90aWZpY2F0aW9ucyA8aSBjbGFzcz1cImZhcyBmYS1zZWFyY2hcIj48L2k+IC0gPHNwYW4+Mjwvc3Bhbj48L2gyPlxyXG4gICAgICAgIDxkaXYgY2xhc3M9XCJub3RpZmljYXRpb25zLWl0ZW1cIj4gPGltZyBzcmM9XCJodHRwczovL2kuaW1ndXIuY29tL3VJZ0RERGQuanBnXCIgYWx0PVwiaW1nXCI+XHJcbiAgICAgICAgICAgIDxkaXYgY2xhc3M9XCJ0ZXh0XCI+XHJcbiAgICAgICAgICAgICAgICA8aDQ+U2Ftc28gYWxpYW88L2g0PlxyXG4gICAgICAgICAgICAgICAgPHA+U2Ftc28gTmFnYXJvIExpa2UgeW91ciBob21lIHdvcms8L3A+XHJcbiAgICAgICAgICAgIDwvZGl2PlxyXG4gICAgICAgIDwvZGl2PlxyXG4gICAgICAgIDxkaXYgY2xhc3M9XCJub3RpZmljYXRpb25zLWl0ZW1cIj4gPGltZyBzcmM9XCJodHRwczovL2ltZy5pY29uczguY29tL2ZsYXRfcm91bmQvNjQvMDAwMDAwL3ZvdGUtYmFkZ2UucG5nXCIgYWx0PVwiaW1nXCI+XHJcbiAgICAgICAgICAgIDxkaXYgY2xhc3M9XCJ0ZXh0XCI+XHJcbiAgICAgICAgICAgICAgICA8aDQ+Sm9obiBTaWx2ZXN0ZXI8L2g0PlxyXG4gICAgICAgICAgICAgICAgPHA+KzIwIHZpc3RhIGJhZGdlIGVhcm5lZDwvcD5cclxuICAgICAgICAgICAgPC9kaXY+XHJcbiAgICAgICAgPC9kaXY+XHJcbiAgICA8L2Rpdj5cclxuPC9uYXY+XHJcbiJdfQ==

package/esm2020/public-api.mjs

@@ -0,0 +1,10 @@
+/*
+ * Public API Surface of sgh-navbar
+ */
+export * from './lib/sgh-navbar.service';
+export * from './lib/sgh-navbar.component';
+export * from './lib/sgh-navbar.module';
+export * from './lib/sidenav/sidenav.component';
+export * from './lib/sidenav/sublevel-menu.component';
+export * from './lib/toolbar/toolbar.component';
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicHVibGljLWFwaS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3Byb2plY3RzL3NnaC1uYXZiYXIvc3JjL3B1YmxpYy1hcGkudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUE7O0dBRUc7QUFFSCxjQUFjLDBCQUEwQixDQUFDO0FBQ3pDLGNBQWMsNEJBQTRCLENBQUM7QUFDM0MsY0FBYyx5QkFBeUIsQ0FBQztBQUd4QyxjQUFjLGlDQUFpQyxDQUFDO0FBQ2hELGNBQWMsdUNBQXVDLENBQUM7QUFDdEQsY0FBYyxpQ0FBaUMsQ0FBQyIsInNvdXJjZXNDb250ZW50IjpbIi8qXG4gKiBQdWJsaWMgQVBJIFN1cmZhY2Ugb2Ygc2doLW5hdmJhclxuICovXG5cbmV4cG9ydCAqIGZyb20gJy4vbGliL3NnaC1uYXZiYXIuc2VydmljZSc7XG5leHBvcnQgKiBmcm9tICcuL2xpYi9zZ2gtbmF2YmFyLmNvbXBvbmVudCc7XG5leHBvcnQgKiBmcm9tICcuL2xpYi9zZ2gtbmF2YmFyLm1vZHVsZSc7XG5cblxuZXhwb3J0ICogZnJvbSAnLi9saWIvc2lkZW5hdi9zaWRlbmF2LmNvbXBvbmVudCc7XG5leHBvcnQgKiBmcm9tICcuL2xpYi9zaWRlbmF2L3N1YmxldmVsLW1lbnUuY29tcG9uZW50JztcbmV4cG9ydCAqIGZyb20gJy4vbGliL3Rvb2xiYXIvdG9vbGJhci5jb21wb25lbnQnO1xuIl19

package/esm2020/sgh-navbar.mjs

@@ -0,0 +1,5 @@
+/**
+ * Generated bundle index. Do not edit.
+ */
+export * from './public-api';
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2doLW5hdmJhci5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3Byb2plY3RzL3NnaC1uYXZiYXIvc3JjL3NnaC1uYXZiYXIudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUE7O0dBRUc7QUFFSCxjQUFjLGNBQWMsQ0FBQyIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogR2VuZXJhdGVkIGJ1bmRsZSBpbmRleC4gRG8gbm90IGVkaXQuXG4gKi9cblxuZXhwb3J0ICogZnJvbSAnLi9wdWJsaWMtYXBpJztcbiJdfQ==

package/fesm2015/sgh-navbar.mjs

@@ -0,0 +1,487 @@
+import * as i0 from '@angular/core';
+import { Injectable, Component, Input, EventEmitter, Output, HostListener, NgModule } from '@angular/core';
+import { trigger, transition, style, animate, state, keyframes } from '@angular/animations';
+import * as i1 from '@angular/router';
+import { RouterModule } from '@angular/router';
+import * as i2 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as i2$1 from '@angular/forms';
+import { FormsModule } from '@angular/forms';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { HttpClientModule } from '@angular/common/http';
+
+class SghNavbarService {
+    constructor() { }
+}
+SghNavbarService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: SghNavbarService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+SghNavbarService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: SghNavbarService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: SghNavbarService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: function () { return []; } });
+
+class SghNavbarComponent {
+    constructor() { }
+    ngOnInit() {
+    }
+}
+SghNavbarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: SghNavbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+SghNavbarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: SghNavbarComponent, selector: "lib-sgh-navbar", ngImport: i0, template: `
+    <p>
+      sgh-navbar works!
+    </p>
+  `, isInline: true });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: SghNavbarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-sgh-navbar', template: `
+    <p>
+      sgh-navbar works!
+    </p>
+  ` }]
+        }], ctorParameters: function () { return []; } });
+
+const fadeInOut = trigger('fadeInOut', [
+    transition(':enter', [
+        style({ opacity: 0 }),
+        animate('350ms', style({ opacity: 1 }))
+    ]),
+    transition(':leave', [
+        style({ opacity: 1 }),
+        animate('350ms', style({ opacity: 0 }))
+    ])
+]);
+
+class SublevelMenuComponent {
+    constructor(router) {
+        this.router = router;
+        this.data = {
+            routeLink: '',
+            icon: '',
+            label: '',
+            items: []
+        };
+        this.collapsed = false;
+        this.multiple = false;
+    }
+    ngOnInit() {
+    }
+    handleClick(item) {
+        if (!this.multiple) {
+            if (this.data.items && this.data.items.length > 0) {
+                for (let modelItem of this.data.items) {
+                    if (item !== modelItem && modelItem.expanded) {
+                        modelItem.expanded = false;
+                    }
+                }
+            }
+        }
+        item.expanded = !item.expanded;
+    }
+    getActiveClass(item) {
+        return item.expanded && this.router.url.includes(item.routeLink)
+            ? 'active-sublevel'
+            : '';
+    }
+}
+SublevelMenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: SublevelMenuComponent, deps: [{ token: i1.Router }], target: i0.ɵɵFactoryTarget.Component });
+SublevelMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: SublevelMenuComponent, selector: "app-sublevel-menu", inputs: { data: "data", collapsed: "collapsed", animating: "animating", expanded: "expanded", multiple: "multiple" }, ngImport: i0, template: `
+    <ul *ngIf="collapsed && data.items && data.items.length > 0"
+    [@submenu]="expanded
+      ? {value: 'visible',
+          params: {transitionParams: '400ms cubic-bezier(0.86, 0, 0.07, 1)', height: '*'}}
+      : {value: 'hidden',
+          params: {transitionParams: '400ms cubic-bezier(0.86, 0, 0.07, 1)', height: '0'}}"
+      class="sublevel-nav"
+    >
+      <li *ngFor="let item of data.items" class="sublevel-nav-item">
+          <a class="sublevel-nav-link"
+          (click)="handleClick(item)"
+            *ngIf="item.items && item.items.length > 0"
+            [ngClass]="getActiveClass(item)"
+          >
+            <i class="sublevel-link-icon fa fa-circle"></i>
+            <span class="sublevel-link-text" @fadeInOut
+                *ngIf="collapsed">{{item.label}}</span>
+            <i *ngIf="item.items && collapsed" class="menu-collapse-icon"
+              [ngClass]="!item.expanded ? 'fal fa-angle-right' : 'fal fa-angle-down'"
+            ></i>
+          </a>
+          <a class="sublevel-nav-link"
+            *ngIf="!item.items || (item.items && item.items.length === 0)"
+            [routerLink]="[item.routeLink]"
+            routerLinkActive="active-sublevel"
+            [routerLinkActiveOptions]="{exact: true}"
+          >
+            <i class="sublevel-link-icon fa fa-circle"></i>
+            <span class="sublevel-link-text" @fadeInOut
+               *ngIf="collapsed">{{item.label}}</span>
+          </a>
+          <div *ngIf="item.items && item.items.length > 0">
+            <app-sublevel-menu
+              [data]="item"
+              [collapsed]="collapsed"
+              [multiple]="multiple"
+              [expanded]="item.expanded"
+            ></app-sublevel-menu>
+          </div>
+      </li>
+    </ul>
+  `, isInline: true, styles: [".sidenav{background:#494553;transition:all .5s ease;position:fixed;z-index:1;top:0;width:5rem;height:100vh;box-shadow:.023rem 0 1.25rem #72778163;overflow:hidden}.sidenav .logo-container{display:flex;align-items:center;padding:.938rem .938rem 0;width:100%}.sidenav .logo-container .logo{background:#fff;text-align:center;width:3rem;min-width:3rem;border-radius:.313rem;padding:.313rem;font-size:24px;font-weight:900;cursor:pointer;border:none;height:3rem}.sidenav .logo-container .logo-text{font-size:24px;font-weight:700;color:#fff}.sidenav .logo-container .btn-close{margin-left:auto;cursor:pointer;width:2rem;height:2rem;border-radius:50%;background-color:transparent;border:none}.sidenav .logo-container .btn-close .fa-times{color:#fff;font-size:24px}.sidenav .logo{overflow:hidden}.sidenav-collapsed{width:16.5625rem}.sidenav-collapsed .logo-container .logo{transition:all .5s ease;width:auto;min-width:auto;height:3rem}.sidenav-nav{list-style:none;padding:.938rem;margin:0;display:flex;flex-direction:column;align-items:center;cursor:pointer}.sidenav-nav .sidenav-nav-item{width:100%;margin-bottom:.625rem}.sidenav-nav .sidenav-nav-item .sidenav-nav-link{display:flex;align-items:center;height:3rem;color:#f3f3f3;text-decoration:none;border-radius:.625rem;transition:all .7s ease}.sidenav-nav .sidenav-nav-item .sidenav-nav-link .sidenav-link-icon{font-size:22px;width:2rem;min-width:2rem;margin:0 .5rem;text-align:center}.sidenav-nav .sidenav-nav-item .sidenav-nav-link .sidenav-link-text{margin-left:1.5rem}.sidenav-nav .sidenav-nav-item .sidenav-nav-link:hover{background-color:#fff;color:#000}.sidenav-nav .sidenav-nav-item .sidenav-nav-link:hover .menu-collapse-icon{color:#000}.active{background-color:#fff}.active .menu-collapse-icon,.active .sidenav-link-icon,.active .sidenav-link-text{color:#000}.active-sublevel{color:#f3f3f3!important}.menu-collapse-icon{font-size:25px;width:2rem;min-width:2rem;margin:auto .5rem auto auto;text-align:center;color:#f3f3f3}.sublevel-nav{list-style:none;margin-left:10px}.sublevel-nav .sublevel-nav-item .sublevel-nav-link{display:flex;align-items:center;height:3rem;color:#fff;text-decoration:none;border-radius:.625rem;transition:all .3s ease}.sublevel-nav .sublevel-nav-item .sublevel-nav-link .sublevel-link-icon{font-size:4px;width:2rem;min-width:2rem;margin:0 .5rem;text-align:center}.sublevel-nav .sublevel-nav-item .sublevel-nav-link .sublevel-link-text{margin-left:.8rem}.sublevel-nav .sublevel-nav-item .sublevel-nav-link:hover{color:#afafaf}.scrollwrap{overflow-y:auto;visibility:hidden;height:calc(100% - 3.65rem)}.sidenav-nav,.scrollwrap:hover,.scrollwrap:focus{visibility:visible}.scrollwrap_delayed{transition:visibility .4s .2s}.scrollwrap_delayed:hover{transition:visibility .2s .2s}.scrollwrap::-webkit-scrollbar{width:10px}.scrollwrap::-webkit-scrollbar-track{background:transparent}.scrollwrap::-webkit-scrollbar-thumb{background-color:#556268;border-radius:20px}.scrollwrap{scrollbar-width:thin;scrollbar-color:#556268 transparent}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i1.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "component", type: SublevelMenuComponent, selector: "app-sublevel-menu", inputs: ["data", "collapsed", "animating", "expanded", "multiple"] }], animations: [
+        fadeInOut,
+        trigger('submenu', [
+            state('hidden', style({
+                height: '0',
+                overflow: 'hidden'
+            })),
+            state('visible', style({
+                height: '*'
+            })),
+            transition('visible <=> hidden', [style({ overflow: 'hidden' }),
+                animate('{{transitionParams}}')]),
+            transition('void => *', animate(0))
+        ])
+    ] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: SublevelMenuComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-sublevel-menu', template: `
+    <ul *ngIf="collapsed && data.items && data.items.length > 0"
+    [@submenu]="expanded
+      ? {value: 'visible',
+          params: {transitionParams: '400ms cubic-bezier(0.86, 0, 0.07, 1)', height: '*'}}
+      : {value: 'hidden',
+          params: {transitionParams: '400ms cubic-bezier(0.86, 0, 0.07, 1)', height: '0'}}"
+      class="sublevel-nav"
+    >
+      <li *ngFor="let item of data.items" class="sublevel-nav-item">
+          <a class="sublevel-nav-link"
+          (click)="handleClick(item)"
+            *ngIf="item.items && item.items.length > 0"
+            [ngClass]="getActiveClass(item)"
+          >
+            <i class="sublevel-link-icon fa fa-circle"></i>
+            <span class="sublevel-link-text" @fadeInOut
+                *ngIf="collapsed">{{item.label}}</span>
+            <i *ngIf="item.items && collapsed" class="menu-collapse-icon"
+              [ngClass]="!item.expanded ? 'fal fa-angle-right' : 'fal fa-angle-down'"
+            ></i>
+          </a>
+          <a class="sublevel-nav-link"
+            *ngIf="!item.items || (item.items && item.items.length === 0)"
+            [routerLink]="[item.routeLink]"
+            routerLinkActive="active-sublevel"
+            [routerLinkActiveOptions]="{exact: true}"
+          >
+            <i class="sublevel-link-icon fa fa-circle"></i>
+            <span class="sublevel-link-text" @fadeInOut
+               *ngIf="collapsed">{{item.label}}</span>
+          </a>
+          <div *ngIf="item.items && item.items.length > 0">
+            <app-sublevel-menu
+              [data]="item"
+              [collapsed]="collapsed"
+              [multiple]="multiple"
+              [expanded]="item.expanded"
+            ></app-sublevel-menu>
+          </div>
+      </li>
+    </ul>
+  `, animations: [
+                        fadeInOut,
+                        trigger('submenu', [
+                            state('hidden', style({
+                                height: '0',
+                                overflow: 'hidden'
+                            })),
+                            state('visible', style({
+                                height: '*'
+                            })),
+                            transition('visible <=> hidden', [style({ overflow: 'hidden' }),
+                                animate('{{transitionParams}}')]),
+                            transition('void => *', animate(0))
+                        ])
+                    ], styles: [".sidenav{background:#494553;transition:all .5s ease;position:fixed;z-index:1;top:0;width:5rem;height:100vh;box-shadow:.023rem 0 1.25rem #72778163;overflow:hidden}.sidenav .logo-container{display:flex;align-items:center;padding:.938rem .938rem 0;width:100%}.sidenav .logo-container .logo{background:#fff;text-align:center;width:3rem;min-width:3rem;border-radius:.313rem;padding:.313rem;font-size:24px;font-weight:900;cursor:pointer;border:none;height:3rem}.sidenav .logo-container .logo-text{font-size:24px;font-weight:700;color:#fff}.sidenav .logo-container .btn-close{margin-left:auto;cursor:pointer;width:2rem;height:2rem;border-radius:50%;background-color:transparent;border:none}.sidenav .logo-container .btn-close .fa-times{color:#fff;font-size:24px}.sidenav .logo{overflow:hidden}.sidenav-collapsed{width:16.5625rem}.sidenav-collapsed .logo-container .logo{transition:all .5s ease;width:auto;min-width:auto;height:3rem}.sidenav-nav{list-style:none;padding:.938rem;margin:0;display:flex;flex-direction:column;align-items:center;cursor:pointer}.sidenav-nav .sidenav-nav-item{width:100%;margin-bottom:.625rem}.sidenav-nav .sidenav-nav-item .sidenav-nav-link{display:flex;align-items:center;height:3rem;color:#f3f3f3;text-decoration:none;border-radius:.625rem;transition:all .7s ease}.sidenav-nav .sidenav-nav-item .sidenav-nav-link .sidenav-link-icon{font-size:22px;width:2rem;min-width:2rem;margin:0 .5rem;text-align:center}.sidenav-nav .sidenav-nav-item .sidenav-nav-link .sidenav-link-text{margin-left:1.5rem}.sidenav-nav .sidenav-nav-item .sidenav-nav-link:hover{background-color:#fff;color:#000}.sidenav-nav .sidenav-nav-item .sidenav-nav-link:hover .menu-collapse-icon{color:#000}.active{background-color:#fff}.active .menu-collapse-icon,.active .sidenav-link-icon,.active .sidenav-link-text{color:#000}.active-sublevel{color:#f3f3f3!important}.menu-collapse-icon{font-size:25px;width:2rem;min-width:2rem;margin:auto .5rem auto auto;text-align:center;color:#f3f3f3}.sublevel-nav{list-style:none;margin-left:10px}.sublevel-nav .sublevel-nav-item .sublevel-nav-link{display:flex;align-items:center;height:3rem;color:#fff;text-decoration:none;border-radius:.625rem;transition:all .3s ease}.sublevel-nav .sublevel-nav-item .sublevel-nav-link .sublevel-link-icon{font-size:4px;width:2rem;min-width:2rem;margin:0 .5rem;text-align:center}.sublevel-nav .sublevel-nav-item .sublevel-nav-link .sublevel-link-text{margin-left:.8rem}.sublevel-nav .sublevel-nav-item .sublevel-nav-link:hover{color:#afafaf}.scrollwrap{overflow-y:auto;visibility:hidden;height:calc(100% - 3.65rem)}.sidenav-nav,.scrollwrap:hover,.scrollwrap:focus{visibility:visible}.scrollwrap_delayed{transition:visibility .4s .2s}.scrollwrap_delayed:hover{transition:visibility .2s .2s}.scrollwrap::-webkit-scrollbar{width:10px}.scrollwrap::-webkit-scrollbar-track{background:transparent}.scrollwrap::-webkit-scrollbar-thumb{background-color:#556268;border-radius:20px}.scrollwrap{scrollbar-width:thin;scrollbar-color:#556268 transparent}\n"] }]
+        }], ctorParameters: function () { return [{ type: i1.Router }]; }, propDecorators: { data: [{
+                type: Input
+            }], collapsed: [{
+                type: Input
+            }], animating: [{
+                type: Input
+            }], expanded: [{
+                type: Input
+            }], multiple: [{
+                type: Input
+            }] } });
+
+const navbarData = [
+    {
+        routeLink: 'dashboard',
+        icon: 'fal fa-home',
+        label: 'Dashboard'
+    },
+    {
+        routeLink: 'products',
+        icon: 'fal fa-box-open',
+        label: 'Products',
+        items: [
+            {
+                routeLink: 'products/level1.1',
+                label: 'Level 1.1',
+                items: [
+                    {
+                        routeLink: 'products/level2.1',
+                        label: 'Level 2.1',
+                    },
+                    {
+                        routeLink: 'products/level2.2',
+                        label: 'Level 2.2',
+                        items: [
+                            {
+                                routeLink: 'products/level3.1',
+                                label: 'Level 3.1'
+                            },
+                            {
+                                routeLink: 'products/level3.2',
+                                label: 'Level 3.2'
+                            }
+                        ]
+                    }
+                ]
+            },
+            {
+                routeLink: 'products/level1.2',
+                label: 'Level 1.2',
+            }
+        ]
+    },
+    {
+        routeLink: 'statistics',
+        icon: 'fal fa-chart-bar',
+        label: 'Statistics'
+    },
+    {
+        routeLink: 'coupens',
+        icon: 'fal fa-tags',
+        label: 'Coupens',
+        items: [
+            {
+                routeLink: 'coupens/list',
+                label: 'List Coupens'
+            },
+            {
+                routeLink: 'coupens/create',
+                label: 'Create Coupens'
+            }
+        ]
+    },
+    {
+        routeLink: 'pages',
+        icon: 'fal fa-file',
+        label: 'Pages'
+    },
+    {
+        routeLink: 'media',
+        icon: 'fal fa-camera',
+        label: 'Media'
+    },
+    {
+        routeLink: 'settings',
+        icon: 'fal fa-cog',
+        label: 'Settings',
+        expanded: true,
+        items: [
+            {
+                routeLink: 'settings/profile',
+                label: 'Profile'
+            },
+            {
+                routeLink: 'settings/customize',
+                label: 'Customize'
+            }
+        ]
+    },
+];
+
+class SidenavComponent {
+    constructor(router) {
+        this.router = router;
+        this.onToggleSideNav = new EventEmitter();
+        this.collapsed = false;
+        this.screenWidth = 0;
+        this.navData = navbarData;
+        this.bgColor = "#33284e";
+        this.imgSm = "assets/favicon.ico";
+        this.imgLg = "assets/SPAY.png";
+        this.multiple = false;
+    }
+    onResize(event) {
+        this.screenWidth = window.innerWidth;
+        if (this.screenWidth <= 768) {
+            this.collapsed = false;
+            this.onToggleSideNav.emit({ collapsed: this.collapsed, screenWidth: this.screenWidth });
+        }
+    }
+    ngOnInit() {
+        this.screenWidth = window.innerWidth;
+    }
+    toggleCollapse() {
+        this.collapsed = !this.collapsed;
+        this.onToggleSideNav.emit({ collapsed: this.collapsed, screenWidth: this.screenWidth });
+    }
+    closeSidenav() {
+        this.collapsed = false;
+        this.onToggleSideNav.emit({ collapsed: this.collapsed, screenWidth: this.screenWidth });
+    }
+    handleClick(item) {
+        this.shrinkItems(item);
+        item.expanded = !item.expanded;
+    }
+    getActiveClass(data) {
+        return this.router.url.includes(data.routeLink) ? 'active' : '';
+    }
+    shrinkItems(item) {
+        if (!this.multiple) {
+            for (let modelItem of this.navData) {
+                if (item !== modelItem && modelItem.expanded) {
+                    modelItem.expanded = false;
+                }
+            }
+        }
+    }
+}
+SidenavComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: SidenavComponent, deps: [{ token: i1.Router }], target: i0.ɵɵFactoryTarget.Component });
+SidenavComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: SidenavComponent, selector: "app-sidenav", inputs: { navData: "navData", bgColor: "bgColor", imgSm: "imgSm", imgLg: "imgLg" }, outputs: { onToggleSideNav: "onToggleSideNav" }, host: { listeners: { "window:resize": "onResize($event)" } }, ngImport: i0, template: "<div class=\"sidenav\" [style.background-color]=\"bgColor\" [ngClass]=\"collapsed ? 'sidenav-collapsed': ''\">\r\n    <div class=\"logo-container\">\r\n        <img class=\"logo\" *ngIf=\"!collapsed\" (click)=\"toggleCollapse()\" [src]=\"imgSm\" alt=\"img\">\r\n        <!-- <button class=\"logo\" (click)=\"toggleCollapse()\">SPDdasdsdaddad</button> -->\r\n        <div class=\"logo-text\" *ngIf=\"collapsed\" (click)=\"closeSidenav()\">\r\n          <img class=\"logo\" [src]=\"imgLg\" alt=\"img\">\r\n\r\n        </div>\r\n        <button class=\"btn-close\" @rotate *ngIf=\"collapsed\" (click)=\"closeSidenav()\">\r\n            <i class=\"fal fa-times close-icon\"></i>\r\n        </button>\r\n    </div>\r\n    <div class=\"scrollwrap scrollwrap_delayed\">\r\n        <ul class=\"sidenav-nav\">\r\n            <li class=\"sidenav-nav-item\" *ngFor=\"let data of navData\">\r\n                <a class=\"sidenav-nav-link\" (click)=\"handleClick(data)\"\r\n                    *ngIf=\"data.items && data.items.length > 0\"\r\n                    [ngClass]=\"getActiveClass(data)\"\r\n                >\r\n                    <i class=\"sidenav-link-icon\" [class]=\"data.icon\"></i>\r\n                    <span class=\"sidenav-link-text\" *ngIf=\"collapsed\">\r\n                        {{data.label}}\r\n                    </span>\r\n                    <i *ngIf=\"data.items && collapsed\" class=\"menu-collapse-icon\"\r\n                        [ngClass]=\"!data.expanded ? 'fal fa-angle-right' : 'fal fa-angle-down'\"\r\n                    ></i>\r\n                </a>\r\n\r\n                <a class=\"sidenav-nav-link\"\r\n                    *ngIf=\"!data.items || (data.items && data.items.length === 0)\"\r\n                    [routerLink]=\"[data.routeLink]\"\r\n                    routerLinkActive=\"active\"\r\n                    [routerLinkActiveOptions]=\"{exact: true}\"\r\n                    (click)=\"shrinkItems(data)\"\r\n                    >\r\n                    <i class=\"sidenav-link-icon\" [class]=\"data.icon\"></i>\r\n                    <span class=\"sidenav-link-text\" @fadeInOut *ngIf=\"collapsed\">\r\n                        {{data.label}}\r\n                    </span>\r\n                </a>\r\n                <div *ngIf=\"collapsed && data.items && data.items.length > 0\">\r\n                    <app-sublevel-menu\r\n                        [data]=\"data\"\r\n                        [collapsed]=\"collapsed\"\r\n                        [multiple]=\"multiple\"\r\n                        [expanded]=\"data.expanded\"\r\n                    ></app-sublevel-menu>\r\n                </div>\r\n            </li>\r\n        </ul>\r\n    </div>\r\n</div>\r\n", styles: [".sidenav{background:#494553;transition:all .5s ease;position:fixed;z-index:1;top:0;width:5rem;height:100vh;box-shadow:.023rem 0 1.25rem #72778163;overflow:hidden}.sidenav .logo-container{display:flex;align-items:center;padding:.938rem .938rem 0;width:100%}.sidenav .logo-container .logo{background:#fff;text-align:center;width:3rem;min-width:3rem;border-radius:.313rem;padding:.313rem;font-size:24px;font-weight:900;cursor:pointer;border:none;height:3rem}.sidenav .logo-container .logo-text{font-size:24px;font-weight:700;color:#fff}.sidenav .logo-container .btn-close{margin-left:auto;cursor:pointer;width:2rem;height:2rem;border-radius:50%;background-color:transparent;border:none}.sidenav .logo-container .btn-close .fa-times{color:#fff;font-size:24px}.sidenav .logo{overflow:hidden}.sidenav-collapsed{width:16.5625rem}.sidenav-collapsed .logo-container .logo{transition:all .5s ease;width:auto;min-width:auto;height:3rem}.sidenav-nav{list-style:none;padding:.938rem;margin:0;display:flex;flex-direction:column;align-items:center;cursor:pointer}.sidenav-nav .sidenav-nav-item{width:100%;margin-bottom:.625rem}.sidenav-nav .sidenav-nav-item .sidenav-nav-link{display:flex;align-items:center;height:3rem;color:#f3f3f3;text-decoration:none;border-radius:.625rem;transition:all .7s ease}.sidenav-nav .sidenav-nav-item .sidenav-nav-link .sidenav-link-icon{font-size:22px;width:2rem;min-width:2rem;margin:0 .5rem;text-align:center}.sidenav-nav .sidenav-nav-item .sidenav-nav-link .sidenav-link-text{margin-left:1.5rem}.sidenav-nav .sidenav-nav-item .sidenav-nav-link:hover{background-color:#fff;color:#000}.sidenav-nav .sidenav-nav-item .sidenav-nav-link:hover .menu-collapse-icon{color:#000}.active{background-color:#fff}.active .menu-collapse-icon,.active .sidenav-link-icon,.active .sidenav-link-text{color:#000}.active-sublevel{color:#f3f3f3!important}.menu-collapse-icon{font-size:25px;width:2rem;min-width:2rem;margin:auto .5rem auto auto;text-align:center;color:#f3f3f3}.sublevel-nav{list-style:none;margin-left:10px}.sublevel-nav .sublevel-nav-item .sublevel-nav-link{display:flex;align-items:center;height:3rem;color:#fff;text-decoration:none;border-radius:.625rem;transition:all .3s ease}.sublevel-nav .sublevel-nav-item .sublevel-nav-link .sublevel-link-icon{font-size:4px;width:2rem;min-width:2rem;margin:0 .5rem;text-align:center}.sublevel-nav .sublevel-nav-item .sublevel-nav-link .sublevel-link-text{margin-left:.8rem}.sublevel-nav .sublevel-nav-item .sublevel-nav-link:hover{color:#afafaf}.scrollwrap{overflow-y:auto;visibility:hidden;height:calc(100% - 3.65rem)}.sidenav-nav,.scrollwrap:hover,.scrollwrap:focus{visibility:visible}.scrollwrap_delayed{transition:visibility .4s .2s}.scrollwrap_delayed:hover{transition:visibility .2s .2s}.scrollwrap::-webkit-scrollbar{width:10px}.scrollwrap::-webkit-scrollbar-track{background:transparent}.scrollwrap::-webkit-scrollbar-thumb{background-color:#556268;border-radius:20px}.scrollwrap{scrollbar-width:thin;scrollbar-color:#556268 transparent}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i1.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "component", type: SublevelMenuComponent, selector: "app-sublevel-menu", inputs: ["data", "collapsed", "animating", "expanded", "multiple"] }], animations: [
+        fadeInOut,
+        trigger('rotate', [
+            transition(':enter', [
+                animate('1000ms', keyframes([
+                    style({ transform: 'rotate(0deg)', offset: '0' }),
+                    style({ transform: 'rotate(2turn)', offset: '1' })
+                ]))
+            ])
+        ])
+    ] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: SidenavComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-sidenav', animations: [
+                        fadeInOut,
+                        trigger('rotate', [
+                            transition(':enter', [
+                                animate('1000ms', keyframes([
+                                    style({ transform: 'rotate(0deg)', offset: '0' }),
+                                    style({ transform: 'rotate(2turn)', offset: '1' })
+                                ]))
+                            ])
+                        ])
+                    ], template: "<div class=\"sidenav\" [style.background-color]=\"bgColor\" [ngClass]=\"collapsed ? 'sidenav-collapsed': ''\">\r\n    <div class=\"logo-container\">\r\n        <img class=\"logo\" *ngIf=\"!collapsed\" (click)=\"toggleCollapse()\" [src]=\"imgSm\" alt=\"img\">\r\n        <!-- <button class=\"logo\" (click)=\"toggleCollapse()\">SPDdasdsdaddad</button> -->\r\n        <div class=\"logo-text\" *ngIf=\"collapsed\" (click)=\"closeSidenav()\">\r\n          <img class=\"logo\" [src]=\"imgLg\" alt=\"img\">\r\n\r\n        </div>\r\n        <button class=\"btn-close\" @rotate *ngIf=\"collapsed\" (click)=\"closeSidenav()\">\r\n            <i class=\"fal fa-times close-icon\"></i>\r\n        </button>\r\n    </div>\r\n    <div class=\"scrollwrap scrollwrap_delayed\">\r\n        <ul class=\"sidenav-nav\">\r\n            <li class=\"sidenav-nav-item\" *ngFor=\"let data of navData\">\r\n                <a class=\"sidenav-nav-link\" (click)=\"handleClick(data)\"\r\n                    *ngIf=\"data.items && data.items.length > 0\"\r\n                    [ngClass]=\"getActiveClass(data)\"\r\n                >\r\n                    <i class=\"sidenav-link-icon\" [class]=\"data.icon\"></i>\r\n                    <span class=\"sidenav-link-text\" *ngIf=\"collapsed\">\r\n                        {{data.label}}\r\n                    </span>\r\n                    <i *ngIf=\"data.items && collapsed\" class=\"menu-collapse-icon\"\r\n                        [ngClass]=\"!data.expanded ? 'fal fa-angle-right' : 'fal fa-angle-down'\"\r\n                    ></i>\r\n                </a>\r\n\r\n                <a class=\"sidenav-nav-link\"\r\n                    *ngIf=\"!data.items || (data.items && data.items.length === 0)\"\r\n                    [routerLink]=\"[data.routeLink]\"\r\n                    routerLinkActive=\"active\"\r\n                    [routerLinkActiveOptions]=\"{exact: true}\"\r\n                    (click)=\"shrinkItems(data)\"\r\n                    >\r\n                    <i class=\"sidenav-link-icon\" [class]=\"data.icon\"></i>\r\n                    <span class=\"sidenav-link-text\" @fadeInOut *ngIf=\"collapsed\">\r\n                        {{data.label}}\r\n                    </span>\r\n                </a>\r\n                <div *ngIf=\"collapsed && data.items && data.items.length > 0\">\r\n                    <app-sublevel-menu\r\n                        [data]=\"data\"\r\n                        [collapsed]=\"collapsed\"\r\n                        [multiple]=\"multiple\"\r\n                        [expanded]=\"data.expanded\"\r\n                    ></app-sublevel-menu>\r\n                </div>\r\n            </li>\r\n        </ul>\r\n    </div>\r\n</div>\r\n", styles: [".sidenav{background:#494553;transition:all .5s ease;position:fixed;z-index:1;top:0;width:5rem;height:100vh;box-shadow:.023rem 0 1.25rem #72778163;overflow:hidden}.sidenav .logo-container{display:flex;align-items:center;padding:.938rem .938rem 0;width:100%}.sidenav .logo-container .logo{background:#fff;text-align:center;width:3rem;min-width:3rem;border-radius:.313rem;padding:.313rem;font-size:24px;font-weight:900;cursor:pointer;border:none;height:3rem}.sidenav .logo-container .logo-text{font-size:24px;font-weight:700;color:#fff}.sidenav .logo-container .btn-close{margin-left:auto;cursor:pointer;width:2rem;height:2rem;border-radius:50%;background-color:transparent;border:none}.sidenav .logo-container .btn-close .fa-times{color:#fff;font-size:24px}.sidenav .logo{overflow:hidden}.sidenav-collapsed{width:16.5625rem}.sidenav-collapsed .logo-container .logo{transition:all .5s ease;width:auto;min-width:auto;height:3rem}.sidenav-nav{list-style:none;padding:.938rem;margin:0;display:flex;flex-direction:column;align-items:center;cursor:pointer}.sidenav-nav .sidenav-nav-item{width:100%;margin-bottom:.625rem}.sidenav-nav .sidenav-nav-item .sidenav-nav-link{display:flex;align-items:center;height:3rem;color:#f3f3f3;text-decoration:none;border-radius:.625rem;transition:all .7s ease}.sidenav-nav .sidenav-nav-item .sidenav-nav-link .sidenav-link-icon{font-size:22px;width:2rem;min-width:2rem;margin:0 .5rem;text-align:center}.sidenav-nav .sidenav-nav-item .sidenav-nav-link .sidenav-link-text{margin-left:1.5rem}.sidenav-nav .sidenav-nav-item .sidenav-nav-link:hover{background-color:#fff;color:#000}.sidenav-nav .sidenav-nav-item .sidenav-nav-link:hover .menu-collapse-icon{color:#000}.active{background-color:#fff}.active .menu-collapse-icon,.active .sidenav-link-icon,.active .sidenav-link-text{color:#000}.active-sublevel{color:#f3f3f3!important}.menu-collapse-icon{font-size:25px;width:2rem;min-width:2rem;margin:auto .5rem auto auto;text-align:center;color:#f3f3f3}.sublevel-nav{list-style:none;margin-left:10px}.sublevel-nav .sublevel-nav-item .sublevel-nav-link{display:flex;align-items:center;height:3rem;color:#fff;text-decoration:none;border-radius:.625rem;transition:all .3s ease}.sublevel-nav .sublevel-nav-item .sublevel-nav-link .sublevel-link-icon{font-size:4px;width:2rem;min-width:2rem;margin:0 .5rem;text-align:center}.sublevel-nav .sublevel-nav-item .sublevel-nav-link .sublevel-link-text{margin-left:.8rem}.sublevel-nav .sublevel-nav-item .sublevel-nav-link:hover{color:#afafaf}.scrollwrap{overflow-y:auto;visibility:hidden;height:calc(100% - 3.65rem)}.sidenav-nav,.scrollwrap:hover,.scrollwrap:focus{visibility:visible}.scrollwrap_delayed{transition:visibility .4s .2s}.scrollwrap_delayed:hover{transition:visibility .2s .2s}.scrollwrap::-webkit-scrollbar{width:10px}.scrollwrap::-webkit-scrollbar-track{background:transparent}.scrollwrap::-webkit-scrollbar-thumb{background-color:#556268;border-radius:20px}.scrollwrap{scrollbar-width:thin;scrollbar-color:#556268 transparent}\n"] }]
+        }], ctorParameters: function () { return [{ type: i1.Router }]; }, propDecorators: { onToggleSideNav: [{
+                type: Output
+            }], navData: [{
+                type: Input
+            }], bgColor: [{
+                type: Input
+            }], imgSm: [{
+                type: Input
+            }], imgLg: [{
+                type: Input
+            }], onResize: [{
+                type: HostListener,
+                args: ['window:resize', ['$event']]
+            }] } });
+
+class ToolbarComponent {
+    constructor() {
+        this.searchShow = false;
+        this.notificationShow = true;
+        this.bgColor = "#33284e";
+        this.searchInputEvent = new EventEmitter();
+        this.logOutEvent = new EventEmitter();
+        this.isNotifNavCollapsed = false;
+        this.searchInput = "";
+    }
+    clickNoti() {
+        this.isNotifNavCollapsed = !this.isNotifNavCollapsed;
+    }
+    onSearchInput() {
+        this.searchInputEvent.emit(this.searchInput);
+    }
+    logOut() {
+        this.logOutEvent.emit(this.searchInput);
+    }
+}
+ToolbarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: ToolbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+ToolbarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: ToolbarComponent, selector: "app-toolbar", inputs: { searchShow: "searchShow", notificationShow: "notificationShow", bgColor: "bgColor" }, outputs: { searchInputEvent: "searchInputEvent", logOutEvent: "logOutEvent" }, ngImport: i0, template: "<nav [style.background-color]=\"bgColor\">\r\n    <div class=\"search\">\r\n      <div class=\"box\" *ngIf=\"searchShow\">\r\n        <i class=\"fa fa-search\"></i>\r\n        <input type=\"text\" name=\"\" [(ngModel)]=\"searchInput\" (keyup)=\"onSearchInput()\" placeholder=\"Search\">\r\n      </div>\r\n    </div>\r\n    <div class=\"icon\" id=\"bell\" (click)=\"clickNoti()\" *ngIf=\"notificationShow\">\r\n      <i class=\"fa fa-lg fa-bell\" style=\"color: #fff;\"></i>\r\n    </div>\r\n    <div class=\"icon\" id=\"bell\" (click)=\"logOut()\">\r\n      <i class=\"fa fa-lg fa-sign-out\" style=\"color: #fff;\"></i>\r\n    </div>\r\n\r\n    <div *ngIf=\"isNotifNavCollapsed\" class=\"notifications\" id=\"box\">\r\n        <h2>Notifications <i class=\"fas fa-search\"></i> - <span>2</span></h2>\r\n        <div class=\"notifications-item\"> <img src=\"https://i.imgur.com/uIgDDDd.jpg\" alt=\"img\">\r\n            <div class=\"text\">\r\n                <h4>Samso aliao</h4>\r\n                <p>Samso Nagaro Like your home work</p>\r\n            </div>\r\n        </div>\r\n        <div class=\"notifications-item\"> <img src=\"https://img.icons8.com/flat_round/64/000000/vote-badge.png\" alt=\"img\">\r\n            <div class=\"text\">\r\n                <h4>John Silvester</h4>\r\n                <p>+20 vista badge earned</p>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</nav>\r\n", styles: ["nav{display:flex;align-items:center;background:#494553;height:60px;position:relative}.icon{cursor:pointer;margin-right:50px}.icon span{background:#f00;padding:7px;border-radius:50%;color:#fff;vertical-align:top;margin-left:-25px}.icon img{display:inline-block;width:26px}.icon:hover{opacity:.7}.search{flex:1;margin-left:50px;color:#eee;font-size:20px;font-family:monospace}.notifications{width:300px;height:auto;opacity:1;position:absolute;top:63px;right:62px;border-radius:5px 0 5px 5px;background-color:#fff;z-index:2;box-shadow:0 4px 8px #0003,0 6px 20px #00000030}.notifications h2{font-size:14px;padding:10px;border-bottom:1px solid #eee;color:#999}.notifications h2 span{color:red}.notifications-item{display:flex;border-bottom:1px solid #eee;padding:6px 9px;margin-bottom:0;cursor:pointer}.notifications-item:hover{background-color:#eee}.notifications-item img{display:block;width:50px;height:50px;margin-right:9px;border-radius:50%;margin-top:2px}.notifications-item .text h4{color:#777;font-size:16px;margin-top:3px}.notifications-item .text p{color:#aaa;font-size:12px}.box{width:280px;height:40px;background-color:#fff;border-radius:30px;display:flex;align-items:center;padding:20px}.box>i{font-size:20px;color:#777}.box>input{flex:1;height:35px;border:none;outline:none;font-size:18px;padding-left:10px}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], animations: [
+        fadeInOut
+    ] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: ToolbarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-toolbar', animations: [
+                        fadeInOut
+                    ], template: "<nav [style.background-color]=\"bgColor\">\r\n    <div class=\"search\">\r\n      <div class=\"box\" *ngIf=\"searchShow\">\r\n        <i class=\"fa fa-search\"></i>\r\n        <input type=\"text\" name=\"\" [(ngModel)]=\"searchInput\" (keyup)=\"onSearchInput()\" placeholder=\"Search\">\r\n      </div>\r\n    </div>\r\n    <div class=\"icon\" id=\"bell\" (click)=\"clickNoti()\" *ngIf=\"notificationShow\">\r\n      <i class=\"fa fa-lg fa-bell\" style=\"color: #fff;\"></i>\r\n    </div>\r\n    <div class=\"icon\" id=\"bell\" (click)=\"logOut()\">\r\n      <i class=\"fa fa-lg fa-sign-out\" style=\"color: #fff;\"></i>\r\n    </div>\r\n\r\n    <div *ngIf=\"isNotifNavCollapsed\" class=\"notifications\" id=\"box\">\r\n        <h2>Notifications <i class=\"fas fa-search\"></i> - <span>2</span></h2>\r\n        <div class=\"notifications-item\"> <img src=\"https://i.imgur.com/uIgDDDd.jpg\" alt=\"img\">\r\n            <div class=\"text\">\r\n                <h4>Samso aliao</h4>\r\n                <p>Samso Nagaro Like your home work</p>\r\n            </div>\r\n        </div>\r\n        <div class=\"notifications-item\"> <img src=\"https://img.icons8.com/flat_round/64/000000/vote-badge.png\" alt=\"img\">\r\n            <div class=\"text\">\r\n                <h4>John Silvester</h4>\r\n                <p>+20 vista badge earned</p>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</nav>\r\n", styles: ["nav{display:flex;align-items:center;background:#494553;height:60px;position:relative}.icon{cursor:pointer;margin-right:50px}.icon span{background:#f00;padding:7px;border-radius:50%;color:#fff;vertical-align:top;margin-left:-25px}.icon img{display:inline-block;width:26px}.icon:hover{opacity:.7}.search{flex:1;margin-left:50px;color:#eee;font-size:20px;font-family:monospace}.notifications{width:300px;height:auto;opacity:1;position:absolute;top:63px;right:62px;border-radius:5px 0 5px 5px;background-color:#fff;z-index:2;box-shadow:0 4px 8px #0003,0 6px 20px #00000030}.notifications h2{font-size:14px;padding:10px;border-bottom:1px solid #eee;color:#999}.notifications h2 span{color:red}.notifications-item{display:flex;border-bottom:1px solid #eee;padding:6px 9px;margin-bottom:0;cursor:pointer}.notifications-item:hover{background-color:#eee}.notifications-item img{display:block;width:50px;height:50px;margin-right:9px;border-radius:50%;margin-top:2px}.notifications-item .text h4{color:#777;font-size:16px;margin-top:3px}.notifications-item .text p{color:#aaa;font-size:12px}.box{width:280px;height:40px;background-color:#fff;border-radius:30px;display:flex;align-items:center;padding:20px}.box>i{font-size:20px;color:#777}.box>input{flex:1;height:35px;border:none;outline:none;font-size:18px;padding-left:10px}\n"] }]
+        }], propDecorators: { searchShow: [{
+                type: Input
+            }], notificationShow: [{
+                type: Input
+            }], bgColor: [{
+                type: Input
+            }], searchInputEvent: [{
+                type: Output
+            }], logOutEvent: [{
+                type: Output
+            }] } });
+
+class SghNavbarModule {
+}
+SghNavbarModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: SghNavbarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SghNavbarModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.12", ngImport: i0, type: SghNavbarModule, declarations: [SghNavbarComponent,
+        SublevelMenuComponent,
+        SidenavComponent,
+        ToolbarComponent], imports: [BrowserAnimationsModule,
+        CommonModule,
+        HttpClientModule,
+        RouterModule,
+        FormsModule], exports: [SghNavbarComponent,
+        SublevelMenuComponent,
+        SidenavComponent,
+        ToolbarComponent] });
+SghNavbarModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: SghNavbarModule, imports: [BrowserAnimationsModule,
+        CommonModule,
+        HttpClientModule,
+        RouterModule,
+        FormsModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: SghNavbarModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        SghNavbarComponent,
+                        SublevelMenuComponent,
+                        SidenavComponent,
+                        ToolbarComponent
+                    ],
+                    imports: [
+                        BrowserAnimationsModule,
+                        CommonModule,
+                        HttpClientModule,
+                        RouterModule,
+                        FormsModule
+                    ],
+                    exports: [
+                        SghNavbarComponent,
+                        SublevelMenuComponent,
+                        SidenavComponent,
+                        ToolbarComponent
+                    ]
+                }]
+        }] });
+
+/*
+ * Public API Surface of sgh-navbar
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { SghNavbarComponent, SghNavbarModule, SghNavbarService, SidenavComponent, SublevelMenuComponent, ToolbarComponent };
+//# sourceMappingURL=sgh-navbar.mjs.map