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