iptdevs-design-system 1.3.17 → 1.3.18

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.
Files changed (9) hide show
  1. package/esm2020/lib/components/atoms/aside-button/aside-button.component.mjs +8 -14
  2. package/esm2020/lib/components/molecules/sidenav/sidenav.component.mjs +62 -118
  3. package/fesm2015/iptdevs-design-system.mjs +67 -129
  4. package/fesm2015/iptdevs-design-system.mjs.map +1 -1
  5. package/fesm2020/iptdevs-design-system.mjs +67 -129
  6. package/fesm2020/iptdevs-design-system.mjs.map +1 -1
  7. package/lib/components/atoms/aside-button/aside-button.component.d.ts +1 -4
  8. package/lib/components/molecules/sidenav/sidenav.component.d.ts +1 -0
  9. package/package.json +1 -1
package/fesm2020/iptdevs-design-system.mjs CHANGED
@@ -12,10 +12,9 @@ import * as i3 from '@angular/material/sidenav';
12
12
  import { MatSidenavModule } from '@angular/material/sidenav';
13
13
  import * as i4 from '@angular/material/toolbar';
14
14
  import { MatToolbarModule } from '@angular/material/toolbar';
15
- import * as i5 from '@angular/material/icon';
16
- import { MatIconModule } from '@angular/material/icon';
17
- import * as i6 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: [{
@@ -917,159 +910,104 @@ class SidenavComponent {
917
910
  clickPage(event) {
918
911
  this.pageChangeEvent.emit(event);
919
912
  }
913
+ logout() {
914
+ this.storageService.logout();
915
+ }
920
916
  }
921
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 });
922
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: `
923
- <mat-sidenav #sidenav mode="push">
924
- <mat-toolbar color="primary">
925
- <span>Departamento Académico</span>
926
- <span class="spacer"></span>
927
- <button mat-icon-button (click)="sidenav.toggle()">
928
- <mat-icon class="mat-icon-button">menu</mat-icon>
929
- </button>
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>
930
923
  </mat-toolbar>
931
924
 
932
925
  <mat-nav-list *ngFor="let route of routes">
933
- <ipt-aside-button
934
- [buttonActive]="this.setPage === route.page"
935
- [url]="route.url"
936
- [type]="route.type"
937
- [icon]="route.icon"
938
- [text]="route.text"
939
- (isClicked)="clickPage(route.page)"
940
- >
941
- </ipt-aside-button>
942
-
943
- <ipt-aside-button
944
- [buttonActive]="this.setPage === 'logout'"
945
- [url]="''"
946
- [type]="'0'"
947
- [icon]="'/assets/icons/cerrar-sesion.png'"
948
- [text]="'Cerrar sesión'"
949
- (isClicked)="clickPage('logout')"
950
- >
951
- </ipt-aside-button>
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>
952
935
  </mat-nav-list>
953
936
  </mat-sidenav>
954
937
 
955
938
  <mat-toolbar class="header">
956
- <button mat-icon-button (click)="sidenav.toggle()">
957
- <mat-icon>menu</mat-icon>
958
- </button>
939
+ <div class="menu-container" (click)="sidenav.toggle()">
940
+ <p>Menu</p>
941
+ <div class="menu-icon"></div>
942
+ </div>
943
+
959
944
  <img class="img-logo" src="/assets/logos/IPT-logo.png" alt="" />
945
+
960
946
  <div class="text-container">
961
947
  <span class="p1">{{ currentDay }}</span>
962
948
  <span *ngIf="hour >= 0 && hour < 12" class="p2">
963
- Hey {{userName}}, Good moorning!
949
+ Hey {{ userName }}, Good moorning!
964
950
  </span>
965
951
  <p *ngIf="hour >= 12 && hour < 18" class="p2">
966
- Hey {{userName}}, Good afternoon!
952
+ Hey {{ userName }}, Good afternoon!
953
+ </p>
954
+ <p *ngIf="hour >= 18 && hour < 24" class="p2">
955
+ Hey {{ userName }}, Good evening!
967
956
  </p>
968
- <p *ngIf="hour > 18 && hour < 4" class="p2">Hey {{userName}}, Good evening!</p>
969
- </div>
970
-
971
- <div class="main-search-container">
972
- <div class="search-container">
973
- <input
974
- type="text"
975
- name="search"
976
- placeholder="What are you doing today?"
977
- class="search-input"
978
- />
979
- <!-- <hr class="hr-icon-search"> -->
980
- <a href="#" class="icon"> </a>
981
- </div>
982
- </div>
983
-
984
- <div class="icons-container">
985
- <a href="#" class="notification-icon"></a>
986
- <hr class="hr-icons" />
987
- <a href="#" class="settings"></a>
988
- <hr class="hr-icons" />
989
- <a href="#" class="help"></a>
990
957
  </div>
991
958
 
992
- <div class="profile-container">
993
- <p class="name-profile">{{userName}}</p>
994
- <div class="photo-profile"></div>
959
+ <div class="logout-container" (click)="logout()">
960
+ <p class="logout-button">Cerrar sesión</p>
961
+ <div class="photo-logout"></div>
995
962
  </div>
996
963
  </mat-toolbar>
997
- `, 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"] }] });
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)}.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.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"] }] });
998
965
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: SidenavComponent, decorators: [{
999
966
  type: Component,
1000
967
  args: [{ selector: 'ipt-sidenav', template: `
1001
- <mat-sidenav #sidenav mode="push">
1002
- <mat-toolbar color="primary">
1003
- <span>Departamento Académico</span>
1004
- <span class="spacer"></span>
1005
- <button mat-icon-button (click)="sidenav.toggle()">
1006
- <mat-icon class="mat-icon-button">menu</mat-icon>
1007
- </button>
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>
1008
972
  </mat-toolbar>
1009
973
 
1010
974
  <mat-nav-list *ngFor="let route of routes">
1011
- <ipt-aside-button
1012
- [buttonActive]="this.setPage === route.page"
1013
- [url]="route.url"
1014
- [type]="route.type"
1015
- [icon]="route.icon"
1016
- [text]="route.text"
1017
- (isClicked)="clickPage(route.page)"
1018
- >
1019
- </ipt-aside-button>
1020
-
1021
- <ipt-aside-button
1022
- [buttonActive]="this.setPage === 'logout'"
1023
- [url]="''"
1024
- [type]="'0'"
1025
- [icon]="'/assets/icons/cerrar-sesion.png'"
1026
- [text]="'Cerrar sesión'"
1027
- (isClicked)="clickPage('logout')"
1028
- >
1029
- </ipt-aside-button>
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>
1030
984
  </mat-nav-list>
1031
985
  </mat-sidenav>
1032
986
 
1033
987
  <mat-toolbar class="header">
1034
- <button mat-icon-button (click)="sidenav.toggle()">
1035
- <mat-icon>menu</mat-icon>
1036
- </button>
988
+ <div class="menu-container" (click)="sidenav.toggle()">
989
+ <p>Menu</p>
990
+ <div class="menu-icon"></div>
991
+ </div>
992
+
1037
993
  <img class="img-logo" src="/assets/logos/IPT-logo.png" alt="" />
994
+
1038
995
  <div class="text-container">
1039
996
  <span class="p1">{{ currentDay }}</span>
1040
997
  <span *ngIf="hour >= 0 && hour < 12" class="p2">
1041
- Hey {{userName}}, Good moorning!
998
+ Hey {{ userName }}, Good moorning!
1042
999
  </span>
1043
1000
  <p *ngIf="hour >= 12 && hour < 18" class="p2">
1044
- Hey {{userName}}, Good afternoon!
1001
+ Hey {{ userName }}, Good afternoon!
1002
+ </p>
1003
+ <p *ngIf="hour >= 18 && hour < 24" class="p2">
1004
+ Hey {{ userName }}, Good evening!
1045
1005
  </p>
1046
- <p *ngIf="hour > 18 && hour < 4" class="p2">Hey {{userName}}, Good evening!</p>
1047
- </div>
1048
-
1049
- <div class="main-search-container">
1050
- <div class="search-container">
1051
- <input
1052
- type="text"
1053
- name="search"
1054
- placeholder="What are you doing today?"
1055
- class="search-input"
1056
- />
1057
- <!-- <hr class="hr-icon-search"> -->
1058
- <a href="#" class="icon"> </a>
1059
- </div>
1060
- </div>
1061
-
1062
- <div class="icons-container">
1063
- <a href="#" class="notification-icon"></a>
1064
- <hr class="hr-icons" />
1065
- <a href="#" class="settings"></a>
1066
- <hr class="hr-icons" />
1067
- <a href="#" class="help"></a>
1068
1006
  </div>
1069
1007
 
1070
- <div class="profile-container">
1071
- <p class="name-profile">{{userName}}</p>
1072
- <div class="photo-profile"></div>
1008
+ <div class="logout-container" (click)="logout()">
1009
+ <p class="logout-button">Cerrar sesión</p>
1010
+ <div class="photo-logout"></div>
1073
1011
  </div>
1074
1012
  </mat-toolbar>
1075
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)}.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"] }]