iptdevs-design-system 1.3.14 → 1.3.17

package/fesm2020/iptdevs-design-system.mjs

@@ -8,13 +8,13 @@ import { Validators, FormsModule, ReactiveFormsModule } from '@angular/forms';
 import Swal from 'sweetalert2';
 import * as i1$2 from '@angular/common/http';
 import { HttpHeaders } from '@angular/common/http';
-import * as i4 from '@angular/material/sidenav';
+import * as i3 from '@angular/material/sidenav';
 import { MatSidenavModule } from '@angular/material/sidenav';
-import * as i5 from '@angular/material/toolbar';
+import * as i4 from '@angular/material/toolbar';
 import { MatToolbarModule } from '@angular/material/toolbar';
-import * as i6 from '@angular/material/icon';
+import * as i5 from '@angular/material/icon';
 import { MatIconModule } from '@angular/material/icon';
-import * as i7 from '@angular/material/list';
+import * as i6 from '@angular/material/list';
 import { MatListModule } from '@angular/material/list';
 import * as i1$3 from '@angular/router';
 
@@ -895,85 +895,190 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.3", ngImpor
             }] } });
 
 class SidenavComponent {
-    constructor(userService, baseService, storageService) {
+    constructor(userService, storageService) {
         this.userService = userService;
-        this.baseService = baseService;
         this.storageService = storageService;
         this.pageChangeEvent = new EventEmitter();
         this.routes = [];
+        this.options = { weekday: 'long', month: 'long', day: 'numeric' };
+        this.currentDay = new Date().toLocaleDateString('en-EN', this.options);
+        this.hour = new Date().getHours();
     }
     ngOnInit() {
         let user = this.storageService.getCurrentUser()?.token;
         let token = user === undefined ? '' : user;
         let request = {
-            token: token
+            token: token,
         };
-        this.userService.getRoutesForRole(request).subscribe(response => {
-            this.routes = this.baseService.jsonToArray(response.data);
-            console.log(this.routes);
+        this.userService.getRoutesForRole(request).subscribe((response) => {
+            this.routes = response.data;
         });
     }
     clickPage(event) {
         this.pageChangeEvent.emit(event);
     }
 }
-SidenavComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: SidenavComponent, deps: [{ token: UserService }, { token: BaseService }, { token: StorageService }], target: i0.ɵɵFactoryTarget.Component });
-SidenavComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.3", type: SidenavComponent, selector: "ipt-sidenav", inputs: { department: "department", setPage: "setPage" }, outputs: { pageChangeEvent: "pageChangeEvent" }, ngImport: i0, template: `
+SidenavComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: SidenavComponent, deps: [{ token: UserService }, { token: StorageService }], target: i0.ɵɵFactoryTarget.Component });
+SidenavComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.3", type: SidenavComponent, selector: "ipt-sidenav", inputs: { department: "department", setPage: "setPage", userName: "userName" }, outputs: { pageChangeEvent: "pageChangeEvent" }, ngImport: i0, template: `
     <mat-sidenav #sidenav mode="push">
-        <mat-toolbar color="primary">
-            <span>{{department}}</span>
-            <span class="spacer"></span>
-            <button mat-icon-button (click)="sidenav.toggle()">
-                <mat-icon>Menu</mat-icon>
-            </button>
-        </mat-toolbar>
-
-        <mat-nav-list>
-            <nav class="flex-container-menu" (click)="sidenav.toggle()" *ngFor="let route of routes">
-                <ipt-aside-button
-                    [buttonActive]="this.setPage === route.page"
-                    [url]="route.url"
-                    [type]="route.type"
-                    [icon]="route.icon"
-                    [text]="route.text"
-                    (isClicked)="clickPage(route.page)"
-                    >
-                </ipt-aside-button>
-            </nav>
-        </mat-nav-list>
-  </mat-sidenav>
-  `, isInline: true, styles: [""], components: [{ type: i4.MatSidenav, selector: "mat-sidenav", inputs: ["fixedInViewport", "fixedTopGap", "fixedBottomGap"], exportAs: ["matSidenav"] }, { type: i5.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { type: i6.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i7.MatNavList, selector: "mat-nav-list", inputs: ["disableRipple", "disabled"], exportAs: ["matNavList"] }, { type: AsideButtonComponent, selector: "ipt-aside-button", inputs: ["icon", "text", "type", "url", "textColor", "buttonActive"], outputs: ["isClicked"] }], directives: [{ type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+      <mat-toolbar color="primary">
+        <span>Departamento Académico</span>
+        <span class="spacer"></span>
+        <button mat-icon-button (click)="sidenav.toggle()">
+          <mat-icon class="mat-icon-button">menu</mat-icon>
+        </button>
+      </mat-toolbar>
+
+      <mat-nav-list *ngFor="let route of routes">
+        <ipt-aside-button
+          [buttonActive]="this.setPage === route.page"
+          [url]="route.url"
+          [type]="route.type"
+          [icon]="route.icon"
+          [text]="route.text"
+          (isClicked)="clickPage(route.page)"
+        >
+        </ipt-aside-button>
+
+        <ipt-aside-button
+          [buttonActive]="this.setPage === 'logout'"
+          [url]="''"
+          [type]="'0'"
+          [icon]="'/assets/icons/cerrar-sesion.png'"
+          [text]="'Cerrar sesión'"
+          (isClicked)="clickPage('logout')"
+        >
+        </ipt-aside-button>
+      </mat-nav-list>
+    </mat-sidenav>
+
+    <mat-toolbar class="header">
+      <button mat-icon-button (click)="sidenav.toggle()">
+        <mat-icon>menu</mat-icon>
+      </button>
+      <img class="img-logo" src="/assets/logos/IPT-logo.png" alt="" />
+      <div class="text-container">
+        <span class="p1">{{ currentDay }}</span>
+        <span *ngIf="hour >= 0 && hour < 12" class="p2">
+          Hey {{userName}}, Good moorning!
+        </span>
+        <p *ngIf="hour >= 12 && hour < 18" class="p2">
+          Hey {{userName}}, Good afternoon!
+        </p>
+        <p *ngIf="hour > 18 && hour < 4" class="p2">Hey {{userName}}, Good evening!</p>
+      </div>
+
+      <div class="main-search-container">
+        <div class="search-container">
+          <input
+            type="text"
+            name="search"
+            placeholder="What are you doing today?"
+            class="search-input"
+          />
+          <!-- <hr class="hr-icon-search"> -->
+          <a href="#" class="icon"> </a>
+        </div>
+      </div>
+
+      <div class="icons-container">
+        <a href="#" class="notification-icon"></a>
+        <hr class="hr-icons" />
+        <a href="#" class="settings"></a>
+        <hr class="hr-icons" />
+        <a href="#" class="help"></a>
+      </div>
+
+      <div class="profile-container">
+        <p class="name-profile">{{userName}}</p>
+        <div class="photo-profile"></div>
+      </div>
+    </mat-toolbar>
+  `, isInline: true, styles: ["*{font-family:Poppins,sans-serif}@media screen and (min-width: 320px){.header{background-color:#fff;display:flex;justify-content:space-between;filter:drop-shadow(0px -1px 7px #000)}mat-sidenav{width:-moz-fit-content!important;width:fit-content!important;background-color:#1c77f7!important}.img-logo,.text-container{display:none}.mat-toolbar.mat-primary{background-color:#fff!important;color:#003d99!important;filter:drop-shadow(0px -1px 7px #000)}.icon{background-image:url(/assets/icons/icono-buscador.png);background-size:cover;background-position:center;width:40px;height:40px}.icons-container{border-radius:30px;height:50px;display:flex;justify-content:center;align-items:center;gap:5%;width:auto}.notification-icon{height:35px;width:35px;background-image:url(/assets/icons/notification-icon.png);background-position:center;background-size:cover;background-repeat:no-repeat}.settings{height:35px;width:35px;background-image:url(/assets/icons/settings.png);background-position:center;background-size:cover;background-repeat:no-repeat}.help{background:url(/assets/icons/help.png);background-position:center;background-size:cover;background-repeat:no-repeat;width:35px;height:35px;border-radius:50%}.hr-icons{border:none;border-left:1px solid #1c77f7;height:70%;width:1px}.hr-icon-search{border:none;border-left:1px solid #1c77f7;height:100%;width:1px}.profile-container{box-shadow:#11111a1a 0 8px 24px,#11111a1a 0 16px 56px,#11111a1a 0 24px 80px;height:35px;width:auto;border-radius:30px;display:flex;margin-left:10px}.name-profile{display:flex;align-items:center;color:#1c77f7;font-weight:500;font-size:16px;margin-left:20px;text-align:center;width:150px}.photo-profile{background:url(/assets/icons/photo-profile.png);background-size:40px 40px;background-position:center;background-repeat:no-repeat}.main-search-container{display:none}}@media screen and (min-width: 768px){.img-logo{display:flex;width:120px;height:60px}.text-container{border-radius:40px;height:45px;width:100%;display:flex;gap:-100px;justify-content:center;flex-direction:column;align-items:flex-start}.p1{color:gray;margin-left:30px;font-size:13px;height:20px}.p2{margin-left:30px;font-size:14px;font-weight:600;color:#1c77f7}.main-search-container{display:flex;justify-content:flex-end;align-items:center;width:-moz-available}.search-container{margin-right:10px;height:20px;width:20px;border-radius:30px;padding:10px;display:flex;justify-content:center;align-items:center;cursor:pointer;transition:.4s;box-shadow:#11111a1a 0 8px 24px,#11111a1a 0 16px 56px,#11111a1a 0 24px 80px}.search-container:hover{width:300px;border-radius:30px;padding:10px 10px 10px 20px}.search-container:hover>.search-input{width:320px;border-radius:10px;padding-left:15px}.search-input{background:transparent;border:none;outline:none;width:0px;font-size:13px;transition:.8s}}\n"], components: [{ type: i3.MatSidenav, selector: "mat-sidenav", inputs: ["fixedInViewport", "fixedTopGap", "fixedBottomGap"], exportAs: ["matSidenav"] }, { type: i4.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i6.MatNavList, selector: "mat-nav-list", inputs: ["disableRipple", "disabled"], exportAs: ["matNavList"] }, { type: AsideButtonComponent, selector: "ipt-aside-button", inputs: ["icon", "text", "type", "url", "textColor", "buttonActive"], outputs: ["isClicked"] }], directives: [{ type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: SidenavComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ipt-sidenav', template: `
     <mat-sidenav #sidenav mode="push">
-        <mat-toolbar color="primary">
-            <span>{{department}}</span>
-            <span class="spacer"></span>
-            <button mat-icon-button (click)="sidenav.toggle()">
-                <mat-icon>Menu</mat-icon>
-            </button>
-        </mat-toolbar>
-
-        <mat-nav-list>
-            <nav class="flex-container-menu" (click)="sidenav.toggle()" *ngFor="let route of routes">
-                <ipt-aside-button
-                    [buttonActive]="this.setPage === route.page"
-                    [url]="route.url"
-                    [type]="route.type"
-                    [icon]="route.icon"
-                    [text]="route.text"
-                    (isClicked)="clickPage(route.page)"
-                    >
-                </ipt-aside-button>
-            </nav>
-        </mat-nav-list>
-  </mat-sidenav>
-  `, styles: [""] }]
-        }], ctorParameters: function () { return [{ type: UserService }, { type: BaseService }, { type: StorageService }]; }, propDecorators: { department: [{
+      <mat-toolbar color="primary">
+        <span>Departamento Académico</span>
+        <span class="spacer"></span>
+        <button mat-icon-button (click)="sidenav.toggle()">
+          <mat-icon class="mat-icon-button">menu</mat-icon>
+        </button>
+      </mat-toolbar>
+
+      <mat-nav-list *ngFor="let route of routes">
+        <ipt-aside-button
+          [buttonActive]="this.setPage === route.page"
+          [url]="route.url"
+          [type]="route.type"
+          [icon]="route.icon"
+          [text]="route.text"
+          (isClicked)="clickPage(route.page)"
+        >
+        </ipt-aside-button>
+
+        <ipt-aside-button
+          [buttonActive]="this.setPage === 'logout'"
+          [url]="''"
+          [type]="'0'"
+          [icon]="'/assets/icons/cerrar-sesion.png'"
+          [text]="'Cerrar sesión'"
+          (isClicked)="clickPage('logout')"
+        >
+        </ipt-aside-button>
+      </mat-nav-list>
+    </mat-sidenav>
+
+    <mat-toolbar class="header">
+      <button mat-icon-button (click)="sidenav.toggle()">
+        <mat-icon>menu</mat-icon>
+      </button>
+      <img class="img-logo" src="/assets/logos/IPT-logo.png" alt="" />
+      <div class="text-container">
+        <span class="p1">{{ currentDay }}</span>
+        <span *ngIf="hour >= 0 && hour < 12" class="p2">
+          Hey {{userName}}, Good moorning!
+        </span>
+        <p *ngIf="hour >= 12 && hour < 18" class="p2">
+          Hey {{userName}}, Good afternoon!
+        </p>
+        <p *ngIf="hour > 18 && hour < 4" class="p2">Hey {{userName}}, Good evening!</p>
+      </div>
+
+      <div class="main-search-container">
+        <div class="search-container">
+          <input
+            type="text"
+            name="search"
+            placeholder="What are you doing today?"
+            class="search-input"
+          />
+          <!-- <hr class="hr-icon-search"> -->
+          <a href="#" class="icon"> </a>
+        </div>
+      </div>
+
+      <div class="icons-container">
+        <a href="#" class="notification-icon"></a>
+        <hr class="hr-icons" />
+        <a href="#" class="settings"></a>
+        <hr class="hr-icons" />
+        <a href="#" class="help"></a>
+      </div>
+
+      <div class="profile-container">
+        <p class="name-profile">{{userName}}</p>
+        <div class="photo-profile"></div>
+      </div>
+    </mat-toolbar>
+  `, styles: ["*{font-family:Poppins,sans-serif}@media screen and (min-width: 320px){.header{background-color:#fff;display:flex;justify-content:space-between;filter:drop-shadow(0px -1px 7px #000)}mat-sidenav{width:-moz-fit-content!important;width:fit-content!important;background-color:#1c77f7!important}.img-logo,.text-container{display:none}.mat-toolbar.mat-primary{background-color:#fff!important;color:#003d99!important;filter:drop-shadow(0px -1px 7px #000)}.icon{background-image:url(/assets/icons/icono-buscador.png);background-size:cover;background-position:center;width:40px;height:40px}.icons-container{border-radius:30px;height:50px;display:flex;justify-content:center;align-items:center;gap:5%;width:auto}.notification-icon{height:35px;width:35px;background-image:url(/assets/icons/notification-icon.png);background-position:center;background-size:cover;background-repeat:no-repeat}.settings{height:35px;width:35px;background-image:url(/assets/icons/settings.png);background-position:center;background-size:cover;background-repeat:no-repeat}.help{background:url(/assets/icons/help.png);background-position:center;background-size:cover;background-repeat:no-repeat;width:35px;height:35px;border-radius:50%}.hr-icons{border:none;border-left:1px solid #1c77f7;height:70%;width:1px}.hr-icon-search{border:none;border-left:1px solid #1c77f7;height:100%;width:1px}.profile-container{box-shadow:#11111a1a 0 8px 24px,#11111a1a 0 16px 56px,#11111a1a 0 24px 80px;height:35px;width:auto;border-radius:30px;display:flex;margin-left:10px}.name-profile{display:flex;align-items:center;color:#1c77f7;font-weight:500;font-size:16px;margin-left:20px;text-align:center;width:150px}.photo-profile{background:url(/assets/icons/photo-profile.png);background-size:40px 40px;background-position:center;background-repeat:no-repeat}.main-search-container{display:none}}@media screen and (min-width: 768px){.img-logo{display:flex;width:120px;height:60px}.text-container{border-radius:40px;height:45px;width:100%;display:flex;gap:-100px;justify-content:center;flex-direction:column;align-items:flex-start}.p1{color:gray;margin-left:30px;font-size:13px;height:20px}.p2{margin-left:30px;font-size:14px;font-weight:600;color:#1c77f7}.main-search-container{display:flex;justify-content:flex-end;align-items:center;width:-moz-available}.search-container{margin-right:10px;height:20px;width:20px;border-radius:30px;padding:10px;display:flex;justify-content:center;align-items:center;cursor:pointer;transition:.4s;box-shadow:#11111a1a 0 8px 24px,#11111a1a 0 16px 56px,#11111a1a 0 24px 80px}.search-container:hover{width:300px;border-radius:30px;padding:10px 10px 10px 20px}.search-container:hover>.search-input{width:320px;border-radius:10px;padding-left:15px}.search-input{background:transparent;border:none;outline:none;width:0px;font-size:13px;transition:.8s}}\n"] }]
+        }], ctorParameters: function () { return [{ type: UserService }, { type: StorageService }]; }, propDecorators: { department: [{
                 type: Input
             }], setPage: [{
                 type: Input
+            }], userName: [{
+                type: Input
             }], pageChangeEvent: [{
                 type: Output
             }] } });