iptdevs-design-system 1.3.16 → 1.3.19

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -8,14 +8,13 @@ import { Validators, FormsModule, ReactiveFormsModule } from '@angular/forms';
8
8
  import Swal from 'sweetalert2';
9
9
  import * as i1$2 from '@angular/common/http';
10
10
  import { HttpHeaders } from '@angular/common/http';
11
- import * as i4 from '@angular/material/sidenav';
11
+ import * as i3 from '@angular/material/sidenav';
12
12
  import { MatSidenavModule } from '@angular/material/sidenav';
13
- import * as i5 from '@angular/material/toolbar';
13
+ import * as i4 from '@angular/material/toolbar';
14
14
  import { MatToolbarModule } from '@angular/material/toolbar';
15
- import * as i6 from '@angular/material/icon';
16
- import { MatIconModule } from '@angular/material/icon';
17
- import * as i7 from '@angular/material/list';
15
+ import * as i5 from '@angular/material/list';
18
16
  import { MatListModule } from '@angular/material/list';
17
+ import { MatIconModule } from '@angular/material/icon';
19
18
  import * as i1$3 from '@angular/router';
20
19
 
21
20
  class AsideButtonComponent {
@@ -27,44 +26,38 @@ class AsideButtonComponent {
27
26
  }
28
27
  }
29
28
  AsideButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: AsideButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
30
- AsideButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.3", type: AsideButtonComponent, selector: "ipt-aside-button", inputs: { icon: "icon", text: "text", type: "type", url: "url", textColor: "textColor", buttonActive: "buttonActive" }, outputs: { isClicked: "isClicked" }, ngImport: i0, template: `
29
+ AsideButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.3", type: AsideButtonComponent, selector: "ipt-aside-button", inputs: { icon: "icon", text: "text", buttonActive: "buttonActive" }, outputs: { isClicked: "isClicked" }, ngImport: i0, template: `
31
30
  <div [ngSwitch]="buttonActive">
32
31
  <a *ngSwitchCase="0" class="flex-item-menu__link" (click)="clickAction()">
33
32
  <img src="{{ icon }}" alt="icon_url" />
34
- <p [ngStyle]="{'color': textColor}">{{ text }}</p>
33
+ <p>{{ text }}</p>
35
34
  </a>
36
35
 
37
36
  <a *ngSwitchCase="1" class="flex-item-menu__link flex-item-active" (click)="clickAction()">
38
37
  <img src="{{ icon }}" alt="icon_url" />
39
- <p [ngStyle]="{'color': textColor}">{{ text }}</p>
38
+ <p>{{ text }}</p>
40
39
  </a>
41
40
  </div>
42
- `, isInline: true, styles: ["*{font-family:Poppins,sans-serif}@media (min-width: 320px){.flex-item-menu__link{cursor:pointer;width:-webkit-fill-available;width:-moz-available;text-decoration:none;display:flex;justify-items:center;padding:.4rem 1rem;transition:all .3s ease 0s;border-radius:30px;margin:15px}.flex-item-menu__link img{cursor:pointer;width:1.4rem;height:1.4rem}.flex-item-menu__link p{cursor:pointer;display:inline;font-weight:500;font-family:Poppins,sans-serif;font-size:.8rem;padding:0 .8rem;margin:auto 0}a:hover,a:focus,.flex-item-menu__link:hover,.flex-item-menu__link p:focus{color:#fff;background-color:#ffffff4f;-webkit-backdrop-filter:blur(100px);backdrop-filter:blur(100px);box-shadow:#0006 0 30px 90px;border-radius:50px}.flex-item-img{width:2.5rem;height:2.5rem;padding:.4rem}.flex-item-active{box-shadow:#0006 0 30px 90px;background:transparent;border:1px solid white}}@media (min-width: 1024px){.flex-item-menu__link{padding:.4rem 1rem}.flex-item-menu__link:focus{border:1px solid white}.flex-item-menu__link img{cursor:pointer;width:1.6rem;height:1.6rem}.flex-item-menu__link p{font-size:1rem}a:hover,a:focus,.flex-item-menu__link:hover,.flex-item-menu__link p:focus{color:#fff;background-color:#ffffff4f;-webkit-backdrop-filter:blur(100px);backdrop-filter:blur(100px);box-shadow:#0006 0 30px 90px}.flex-item-img{width:2.5rem;height:2.5rem;padding:.4rem}}\n"], directives: [{ type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
41
+ `, isInline: true, styles: ["*{font-family:Poppins,sans-serif}@media (min-width: 320px){.flex-item-menu__link{cursor:pointer;width:-webkit-fill-available;width:-moz-available;text-decoration:none;display:flex;justify-items:center;padding:.4rem 1rem;transition:all .3s ease 0s;border-radius:30px;margin:15px}.flex-item-menu__link img{cursor:pointer;width:2.5rem;height:2.5rem;padding:.4rem}.flex-item-menu__link p{cursor:pointer;display:inline;font-weight:500;font-family:Poppins,sans-serif;font-size:16px;padding:0 .8rem;margin:auto 0}a:hover,a:focus,.flex-item-menu__link:hover,.flex-item-menu__link p:focus{color:#fff;background-color:#ffffff4f;-webkit-backdrop-filter:blur(100px);backdrop-filter:blur(100px);box-shadow:#0006 0 30px 90px;border-radius:50px;font-size:18px}.flex-item-img{width:2.5rem;height:2.5rem;padding:.4rem}.flex-item-active{box-shadow:#0006 0 30px 90px;background:transparent;border:1px solid white}}@media (min-width: 1024px){.flex-item-menu__link{padding:.4rem 1rem}.flex-item-menu__link:focus{border:1px solid white}.flex-item-menu__link img{cursor:pointer;width:2.5rem;height:2.5rem;padding:.4rem}.flex-item-menu__link p{font-size:16px}a:hover,a:focus,.flex-item-menu__link:hover,.flex-item-menu__link p:focus{color:#fff;background-color:#ffffff4f;-webkit-backdrop-filter:blur(100px);backdrop-filter:blur(100px);box-shadow:#0006 0 30px 90px;font-size:18px}.flex-item-img{width:2.5rem;height:2.5rem;padding:.4rem}}\n"], directives: [{ type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }] });
43
42
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: AsideButtonComponent, decorators: [{
44
43
  type: Component,
45
44
  args: [{ selector: 'ipt-aside-button', template: `
46
45
  <div [ngSwitch]="buttonActive">
47
46
  <a *ngSwitchCase="0" class="flex-item-menu__link" (click)="clickAction()">
48
47
  <img src="{{ icon }}" alt="icon_url" />
49
- <p [ngStyle]="{'color': textColor}">{{ text }}</p>
48
+ <p>{{ text }}</p>
50
49
  </a>
51
50
 
52
51
  <a *ngSwitchCase="1" class="flex-item-menu__link flex-item-active" (click)="clickAction()">
53
52
  <img src="{{ icon }}" alt="icon_url" />
54
- <p [ngStyle]="{'color': textColor}">{{ text }}</p>
53
+ <p>{{ text }}</p>
55
54
  </a>
56
55
  </div>
57
- `, styles: ["*{font-family:Poppins,sans-serif}@media (min-width: 320px){.flex-item-menu__link{cursor:pointer;width:-webkit-fill-available;width:-moz-available;text-decoration:none;display:flex;justify-items:center;padding:.4rem 1rem;transition:all .3s ease 0s;border-radius:30px;margin:15px}.flex-item-menu__link img{cursor:pointer;width:1.4rem;height:1.4rem}.flex-item-menu__link p{cursor:pointer;display:inline;font-weight:500;font-family:Poppins,sans-serif;font-size:.8rem;padding:0 .8rem;margin:auto 0}a:hover,a:focus,.flex-item-menu__link:hover,.flex-item-menu__link p:focus{color:#fff;background-color:#ffffff4f;-webkit-backdrop-filter:blur(100px);backdrop-filter:blur(100px);box-shadow:#0006 0 30px 90px;border-radius:50px}.flex-item-img{width:2.5rem;height:2.5rem;padding:.4rem}.flex-item-active{box-shadow:#0006 0 30px 90px;background:transparent;border:1px solid white}}@media (min-width: 1024px){.flex-item-menu__link{padding:.4rem 1rem}.flex-item-menu__link:focus{border:1px solid white}.flex-item-menu__link img{cursor:pointer;width:1.6rem;height:1.6rem}.flex-item-menu__link p{font-size:1rem}a:hover,a:focus,.flex-item-menu__link:hover,.flex-item-menu__link p:focus{color:#fff;background-color:#ffffff4f;-webkit-backdrop-filter:blur(100px);backdrop-filter:blur(100px);box-shadow:#0006 0 30px 90px}.flex-item-img{width:2.5rem;height:2.5rem;padding:.4rem}}\n"] }]
56
+ `, styles: ["*{font-family:Poppins,sans-serif}@media (min-width: 320px){.flex-item-menu__link{cursor:pointer;width:-webkit-fill-available;width:-moz-available;text-decoration:none;display:flex;justify-items:center;padding:.4rem 1rem;transition:all .3s ease 0s;border-radius:30px;margin:15px}.flex-item-menu__link img{cursor:pointer;width:2.5rem;height:2.5rem;padding:.4rem}.flex-item-menu__link p{cursor:pointer;display:inline;font-weight:500;font-family:Poppins,sans-serif;font-size:16px;padding:0 .8rem;margin:auto 0}a:hover,a:focus,.flex-item-menu__link:hover,.flex-item-menu__link p:focus{color:#fff;background-color:#ffffff4f;-webkit-backdrop-filter:blur(100px);backdrop-filter:blur(100px);box-shadow:#0006 0 30px 90px;border-radius:50px;font-size:18px}.flex-item-img{width:2.5rem;height:2.5rem;padding:.4rem}.flex-item-active{box-shadow:#0006 0 30px 90px;background:transparent;border:1px solid white}}@media (min-width: 1024px){.flex-item-menu__link{padding:.4rem 1rem}.flex-item-menu__link:focus{border:1px solid white}.flex-item-menu__link img{cursor:pointer;width:2.5rem;height:2.5rem;padding:.4rem}.flex-item-menu__link p{font-size:16px}a:hover,a:focus,.flex-item-menu__link:hover,.flex-item-menu__link p:focus{color:#fff;background-color:#ffffff4f;-webkit-backdrop-filter:blur(100px);backdrop-filter:blur(100px);box-shadow:#0006 0 30px 90px;font-size:18px}.flex-item-img{width:2.5rem;height:2.5rem;padding:.4rem}}\n"] }]
58
57
  }], propDecorators: { icon: [{
59
58
  type: Input
60
59
  }], text: [{
61
60
  type: Input
62
- }], type: [{
63
- type: Input
64
- }], url: [{
65
- type: Input
66
- }], textColor: [{
67
- type: Input
68
61
  }], buttonActive: [{
69
62
  type: Input
70
63
  }], isClicked: [{
@@ -895,84 +888,135 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.3", ngImpor
895
888
  }] } });
896
889
 
897
890
  class SidenavComponent {
898
- constructor(userService, baseService, storageService) {
891
+ constructor(userService, storageService) {
899
892
  this.userService = userService;
900
- this.baseService = baseService;
901
893
  this.storageService = storageService;
902
894
  this.pageChangeEvent = new EventEmitter();
903
895
  this.routes = [];
896
+ this.options = { weekday: 'long', month: 'long', day: 'numeric' };
897
+ this.currentDay = new Date().toLocaleDateString('en-EN', this.options);
898
+ this.hour = new Date().getHours();
904
899
  }
905
900
  ngOnInit() {
906
901
  let user = this.storageService.getCurrentUser()?.token;
907
902
  let token = user === undefined ? '' : user;
908
903
  let request = {
909
- token: token
904
+ token: token,
910
905
  };
911
- this.userService.getRoutesForRole(request).subscribe(response => {
906
+ this.userService.getRoutesForRole(request).subscribe((response) => {
912
907
  this.routes = response.data;
913
908
  });
914
909
  }
915
910
  clickPage(event) {
916
911
  this.pageChangeEvent.emit(event);
917
912
  }
913
+ logout() {
914
+ this.storageService.logout();
915
+ }
918
916
  }
919
- 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 });
920
- 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: `
921
- <mat-sidenav #sidenav mode="push">
922
- <mat-toolbar color="primary">
923
- <span>{{department}}</span>
924
- <span class="spacer"></span>
925
- <button mat-icon-button (click)="sidenav.toggle()">
926
- <mat-icon>Menu</mat-icon>
927
- </button>
928
- </mat-toolbar>
917
+ 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 });
918
+ 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: `
919
+ <mat-sidenav #sidenav mode="push" >
920
+ <mat-toolbar color="primary" (click)="sidenav.toggle()">
921
+ <span style="font-size: 15px;">{{department}}</span>
922
+ <span class="menu-icon-close"></span>
923
+ </mat-toolbar>
924
+
925
+ <mat-nav-list *ngFor="let route of routes">
926
+ <nav class="flex-container-menu">
927
+ <ipt-aside-button
928
+ [buttonActive]="this.setPage === route.page"
929
+ [icon]="route.icon"
930
+ [text]="route.text"
931
+ (isClicked)="clickPage(route.page)"
932
+ >
933
+ </ipt-aside-button>
934
+ </nav>
935
+ </mat-nav-list>
936
+ </mat-sidenav>
937
+
938
+ <mat-toolbar class="header">
939
+ <div class="menu-container" (click)="sidenav.toggle()">
940
+ <p>Menu</p>
941
+ <div class="menu-icon"></div>
942
+ </div>
929
943
 
930
- <mat-nav-list>
931
- <nav class="flex-container-menu" (click)="sidenav.toggle()" *ngFor="let route of routes">
932
- <ipt-aside-button
933
- [buttonActive]="this.setPage === route.page"
934
- [url]="route.url"
935
- [type]="route.type"
936
- [icon]="route.icon"
937
- [text]="route.text"
938
- (isClicked)="clickPage(route.page)"
939
- >
940
- </ipt-aside-button>
941
- </nav>
942
- </mat-nav-list>
943
- </mat-sidenav>
944
- `, isInline: true, styles: ["*{font-family:Poppins,sans-serif}@media screen and (min-width: 320px){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)}}@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}}\n"], 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"] }] });
944
+ <img class="img-logo" src="/assets/logos/IPT-logo.png" alt="" />
945
+
946
+ <div class="text-container">
947
+ <span class="p1">{{ currentDay }}</span>
948
+ <span *ngIf="hour >= 0 && hour < 12" class="p2">
949
+ Hey {{ userName }}, Good moorning!
950
+ </span>
951
+ <p *ngIf="hour >= 12 && hour < 18" class="p2">
952
+ Hey {{ userName }}, Good afternoon!
953
+ </p>
954
+ <p *ngIf="hour >= 18 && hour < 24" class="p2">
955
+ Hey {{ userName }}, Good evening!
956
+ </p>
957
+ </div>
958
+
959
+ <div class="logout-container" (click)="logout()">
960
+ <p class="logout-button">Cerrar sesión</p>
961
+ <div class="photo-logout"></div>
962
+ </div>
963
+ </mat-toolbar>
964
+ `, 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)}.logout-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}.logout-button{display:flex;align-items:center;color:#1c77f7;font-weight:500;font-size:16px;margin-left:20px;text-align:center;width:150px}.photo-logout{background:url(/assets/icons/exit.png);background-size:25px 25px;background-position:center;background-repeat:no-repeat}.menu-icon{background:url(/assets/icons/icon-menu.png);background-size:25px 25px;background-position:center;background-repeat:no-repeat}.menu-icon-close{background:url(/assets/icons/cruz.png);background-size:25px 25px;background-position:center;background-repeat:no-repeat;width:35px;height:35px}.menu-container{box-shadow:#11111a1a 0 8px 24px,#11111a1a 0 16px 56px,#11111a1a 0 24px 80px;height:35px;width:52.5px;width:auto;border-radius:30px;display:flex}.menu-container p{width:85px;display:flex;align-items:center;color:#1c77f7;font-weight:500;font-size:16px;margin:0 0 0 15px;text-align:center}}@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}.flex-container-menu{font-size:18px;color:#fff!important}.mat-nav-list{padding:0}\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.MatNavList, selector: "mat-nav-list", inputs: ["disableRipple", "disabled"], exportAs: ["matNavList"] }, { type: AsideButtonComponent, selector: "ipt-aside-button", inputs: ["icon", "text", "buttonActive"], outputs: ["isClicked"] }], directives: [{ type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
945
965
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: SidenavComponent, decorators: [{
946
966
  type: Component,
947
967
  args: [{ selector: 'ipt-sidenav', template: `
948
- <mat-sidenav #sidenav mode="push">
949
- <mat-toolbar color="primary">
950
- <span>{{department}}</span>
951
- <span class="spacer"></span>
952
- <button mat-icon-button (click)="sidenav.toggle()">
953
- <mat-icon>Menu</mat-icon>
954
- </button>
955
- </mat-toolbar>
968
+ <mat-sidenav #sidenav mode="push" >
969
+ <mat-toolbar color="primary" (click)="sidenav.toggle()">
970
+ <span style="font-size: 15px;">{{department}}</span>
971
+ <span class="menu-icon-close"></span>
972
+ </mat-toolbar>
973
+
974
+ <mat-nav-list *ngFor="let route of routes">
975
+ <nav class="flex-container-menu">
976
+ <ipt-aside-button
977
+ [buttonActive]="this.setPage === route.page"
978
+ [icon]="route.icon"
979
+ [text]="route.text"
980
+ (isClicked)="clickPage(route.page)"
981
+ >
982
+ </ipt-aside-button>
983
+ </nav>
984
+ </mat-nav-list>
985
+ </mat-sidenav>
986
+
987
+ <mat-toolbar class="header">
988
+ <div class="menu-container" (click)="sidenav.toggle()">
989
+ <p>Menu</p>
990
+ <div class="menu-icon"></div>
991
+ </div>
992
+
993
+ <img class="img-logo" src="/assets/logos/IPT-logo.png" alt="" />
994
+
995
+ <div class="text-container">
996
+ <span class="p1">{{ currentDay }}</span>
997
+ <span *ngIf="hour >= 0 && hour < 12" class="p2">
998
+ Hey {{ userName }}, Good moorning!
999
+ </span>
1000
+ <p *ngIf="hour >= 12 && hour < 18" class="p2">
1001
+ Hey {{ userName }}, Good afternoon!
1002
+ </p>
1003
+ <p *ngIf="hour >= 18 && hour < 24" class="p2">
1004
+ Hey {{ userName }}, Good evening!
1005
+ </p>
1006
+ </div>
956
1007
 
957
- <mat-nav-list>
958
- <nav class="flex-container-menu" (click)="sidenav.toggle()" *ngFor="let route of routes">
959
- <ipt-aside-button
960
- [buttonActive]="this.setPage === route.page"
961
- [url]="route.url"
962
- [type]="route.type"
963
- [icon]="route.icon"
964
- [text]="route.text"
965
- (isClicked)="clickPage(route.page)"
966
- >
967
- </ipt-aside-button>
968
- </nav>
969
- </mat-nav-list>
970
- </mat-sidenav>
971
- `, styles: ["*{font-family:Poppins,sans-serif}@media screen and (min-width: 320px){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)}}@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}}\n"] }]
972
- }], ctorParameters: function () { return [{ type: UserService }, { type: BaseService }, { type: StorageService }]; }, propDecorators: { department: [{
1008
+ <div class="logout-container" (click)="logout()">
1009
+ <p class="logout-button">Cerrar sesión</p>
1010
+ <div class="photo-logout"></div>
1011
+ </div>
1012
+ </mat-toolbar>
1013
+ `, 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)}.logout-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}.logout-button{display:flex;align-items:center;color:#1c77f7;font-weight:500;font-size:16px;margin-left:20px;text-align:center;width:150px}.photo-logout{background:url(/assets/icons/exit.png);background-size:25px 25px;background-position:center;background-repeat:no-repeat}.menu-icon{background:url(/assets/icons/icon-menu.png);background-size:25px 25px;background-position:center;background-repeat:no-repeat}.menu-icon-close{background:url(/assets/icons/cruz.png);background-size:25px 25px;background-position:center;background-repeat:no-repeat;width:35px;height:35px}.menu-container{box-shadow:#11111a1a 0 8px 24px,#11111a1a 0 16px 56px,#11111a1a 0 24px 80px;height:35px;width:52.5px;width:auto;border-radius:30px;display:flex}.menu-container p{width:85px;display:flex;align-items:center;color:#1c77f7;font-weight:500;font-size:16px;margin:0 0 0 15px;text-align:center}}@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}.flex-container-menu{font-size:18px;color:#fff!important}.mat-nav-list{padding:0}\n"] }]
1014
+ }], ctorParameters: function () { return [{ type: UserService }, { type: StorageService }]; }, propDecorators: { department: [{
973
1015
  type: Input
974
1016
  }], setPage: [{
975
1017
  type: Input
1018
+ }], userName: [{
1019
+ type: Input
976
1020
  }], pageChangeEvent: [{
977
1021
  type: Output
978
1022
  }] } });