iptdevs-design-system 1.3.16 → 1.3.17
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.
- package/esm2020/lib/components/molecules/sidenav/sidenav.component.mjs +165 -60
- package/fesm2015/iptdevs-design-system.mjs +163 -57
- package/fesm2015/iptdevs-design-system.mjs.map +1 -1
- package/fesm2020/iptdevs-design-system.mjs +163 -57
- package/fesm2020/iptdevs-design-system.mjs.map +1 -1
- package/lib/components/molecules/sidenav/sidenav.component.d.ts +6 -4
- package/package.json +1 -1
|
@@ -8,13 +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
|
|
11
|
+
import * as i3 from '@angular/material/sidenav';
|
|
12
12
|
import { MatSidenavModule } from '@angular/material/sidenav';
|
|
13
|
-
import * as
|
|
13
|
+
import * as i4 from '@angular/material/toolbar';
|
|
14
14
|
import { MatToolbarModule } from '@angular/material/toolbar';
|
|
15
|
-
import * as
|
|
15
|
+
import * as i5 from '@angular/material/icon';
|
|
16
16
|
import { MatIconModule } from '@angular/material/icon';
|
|
17
|
-
import * as
|
|
17
|
+
import * as i6 from '@angular/material/list';
|
|
18
18
|
import { MatListModule } from '@angular/material/list';
|
|
19
19
|
import * as i1$3 from '@angular/router';
|
|
20
20
|
|
|
@@ -895,20 +895,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.3", ngImpor
|
|
|
895
895
|
}] } });
|
|
896
896
|
|
|
897
897
|
class SidenavComponent {
|
|
898
|
-
constructor(userService,
|
|
898
|
+
constructor(userService, storageService) {
|
|
899
899
|
this.userService = userService;
|
|
900
|
-
this.baseService = baseService;
|
|
901
900
|
this.storageService = storageService;
|
|
902
901
|
this.pageChangeEvent = new EventEmitter();
|
|
903
902
|
this.routes = [];
|
|
903
|
+
this.options = { weekday: 'long', month: 'long', day: 'numeric' };
|
|
904
|
+
this.currentDay = new Date().toLocaleDateString('en-EN', this.options);
|
|
905
|
+
this.hour = new Date().getHours();
|
|
904
906
|
}
|
|
905
907
|
ngOnInit() {
|
|
906
908
|
let user = this.storageService.getCurrentUser()?.token;
|
|
907
909
|
let token = user === undefined ? '' : user;
|
|
908
910
|
let request = {
|
|
909
|
-
token: token
|
|
911
|
+
token: token,
|
|
910
912
|
};
|
|
911
|
-
this.userService.getRoutesForRole(request).subscribe(response => {
|
|
913
|
+
this.userService.getRoutesForRole(request).subscribe((response) => {
|
|
912
914
|
this.routes = response.data;
|
|
913
915
|
});
|
|
914
916
|
}
|
|
@@ -916,63 +918,167 @@ class SidenavComponent {
|
|
|
916
918
|
this.pageChangeEvent.emit(event);
|
|
917
919
|
}
|
|
918
920
|
}
|
|
919
|
-
SidenavComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: SidenavComponent, deps: [{ token: UserService }, { token:
|
|
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
|
+
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
|
+
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: `
|
|
921
923
|
<mat-sidenav #sidenav mode="push">
|
|
922
|
-
|
|
923
|
-
|
|
924
|
-
|
|
925
|
-
|
|
926
|
-
|
|
927
|
-
|
|
928
|
-
|
|
929
|
-
|
|
930
|
-
|
|
931
|
-
|
|
932
|
-
|
|
933
|
-
|
|
934
|
-
|
|
935
|
-
|
|
936
|
-
|
|
937
|
-
|
|
938
|
-
|
|
939
|
-
|
|
940
|
-
|
|
941
|
-
|
|
942
|
-
|
|
943
|
-
|
|
944
|
-
|
|
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>
|
|
930
|
+
</mat-toolbar>
|
|
931
|
+
|
|
932
|
+
<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>
|
|
952
|
+
</mat-nav-list>
|
|
953
|
+
</mat-sidenav>
|
|
954
|
+
|
|
955
|
+
<mat-toolbar class="header">
|
|
956
|
+
<button mat-icon-button (click)="sidenav.toggle()">
|
|
957
|
+
<mat-icon>menu</mat-icon>
|
|
958
|
+
</button>
|
|
959
|
+
<img class="img-logo" src="/assets/logos/IPT-logo.png" alt="" />
|
|
960
|
+
<div class="text-container">
|
|
961
|
+
<span class="p1">{{ currentDay }}</span>
|
|
962
|
+
<span *ngIf="hour >= 0 && hour < 12" class="p2">
|
|
963
|
+
Hey {{userName}}, Good moorning!
|
|
964
|
+
</span>
|
|
965
|
+
<p *ngIf="hour >= 12 && hour < 18" class="p2">
|
|
966
|
+
Hey {{userName}}, Good afternoon!
|
|
967
|
+
</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
|
+
</div>
|
|
991
|
+
|
|
992
|
+
<div class="profile-container">
|
|
993
|
+
<p class="name-profile">{{userName}}</p>
|
|
994
|
+
<div class="photo-profile"></div>
|
|
995
|
+
</div>
|
|
996
|
+
</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"] }] });
|
|
945
998
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: SidenavComponent, decorators: [{
|
|
946
999
|
type: Component,
|
|
947
1000
|
args: [{ selector: 'ipt-sidenav', template: `
|
|
948
1001
|
<mat-sidenav #sidenav mode="push">
|
|
949
|
-
|
|
950
|
-
|
|
951
|
-
|
|
952
|
-
|
|
953
|
-
|
|
954
|
-
|
|
955
|
-
|
|
956
|
-
|
|
957
|
-
|
|
958
|
-
|
|
959
|
-
|
|
960
|
-
|
|
961
|
-
|
|
962
|
-
|
|
963
|
-
|
|
964
|
-
|
|
965
|
-
|
|
966
|
-
|
|
967
|
-
|
|
968
|
-
|
|
969
|
-
|
|
970
|
-
|
|
971
|
-
|
|
972
|
-
|
|
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>
|
|
1008
|
+
</mat-toolbar>
|
|
1009
|
+
|
|
1010
|
+
<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>
|
|
1030
|
+
</mat-nav-list>
|
|
1031
|
+
</mat-sidenav>
|
|
1032
|
+
|
|
1033
|
+
<mat-toolbar class="header">
|
|
1034
|
+
<button mat-icon-button (click)="sidenav.toggle()">
|
|
1035
|
+
<mat-icon>menu</mat-icon>
|
|
1036
|
+
</button>
|
|
1037
|
+
<img class="img-logo" src="/assets/logos/IPT-logo.png" alt="" />
|
|
1038
|
+
<div class="text-container">
|
|
1039
|
+
<span class="p1">{{ currentDay }}</span>
|
|
1040
|
+
<span *ngIf="hour >= 0 && hour < 12" class="p2">
|
|
1041
|
+
Hey {{userName}}, Good moorning!
|
|
1042
|
+
</span>
|
|
1043
|
+
<p *ngIf="hour >= 12 && hour < 18" class="p2">
|
|
1044
|
+
Hey {{userName}}, Good afternoon!
|
|
1045
|
+
</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
|
+
</div>
|
|
1069
|
+
|
|
1070
|
+
<div class="profile-container">
|
|
1071
|
+
<p class="name-profile">{{userName}}</p>
|
|
1072
|
+
<div class="photo-profile"></div>
|
|
1073
|
+
</div>
|
|
1074
|
+
</mat-toolbar>
|
|
1075
|
+
`, 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"] }]
|
|
1076
|
+
}], ctorParameters: function () { return [{ type: UserService }, { type: StorageService }]; }, propDecorators: { department: [{
|
|
973
1077
|
type: Input
|
|
974
1078
|
}], setPage: [{
|
|
975
1079
|
type: Input
|
|
1080
|
+
}], userName: [{
|
|
1081
|
+
type: Input
|
|
976
1082
|
}], pageChangeEvent: [{
|
|
977
1083
|
type: Output
|
|
978
1084
|
}] } });
|