Merge remote-tracking branch 'origin/angular-14' into explore-redesign

This commit is contained in:
Konstantinos Triantafyllou 2023-02-14 12:15:42 +02:00
commit 88a35d4814
15 changed files with 158 additions and 58 deletions

View File

@ -22,24 +22,24 @@ declare var ResizeObserver;
<div [class.uk-hidden]="!isBrowser" id="page_content_sticky_footer" #sticky_footer <div [class.uk-hidden]="!isBrowser" id="page_content_sticky_footer" #sticky_footer
class="uk-tile-default uk-blur-background"> class="uk-tile-default uk-blur-background">
<div class="uk-container uk-container-large"> <div class="uk-container uk-container-large">
<div class="uk-padding-small uk-padding-remove-vertical"> <div [ngClass]="!isMobile?'uk-padding-small uk-padding-remove-vertical':''">
<ng-content select="[sticky_footer]"></ng-content> <ng-content select="[sticky_footer]"></ng-content>
</div> </div>
</div> </div>
</div> </div>
<div id="page_content_header" #header class="uk-blur-background" <div id="page_content_header" #header class="uk-blur-background" [class.uk-border-bottom]="border && isStickyActive"
[attr.style]="'margin-top: '+(footer_height? '-'+footer_height+'px': '0')"> [attr.style]="'margin-top: '+(footer_height? '-'+footer_height+'px': '0')">
<div class="uk-container uk-container-large"> <div class="uk-container uk-container-large">
<div class="uk-padding-small uk-padding-remove-vertical uk-padding-remove-right"> <div [ngClass]="!isMobile?'uk-padding-small uk-padding-remove-vertical uk-padding-remove-right':''">
<div class="header"> <div class="header">
<ng-content select="[header]"></ng-content> <ng-content select="[header]"></ng-content>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div id="page_content_actions" #actions class="uk-blur-background"> <div id="page_content_actions" #actions class="uk-blur-background" [class.uk-border-bottom]="border && isStickyActive">
<div class="uk-container uk-container-large"> <div class="uk-container uk-container-large">
<div class="uk-padding-small uk-padding-remove-vertical uk-padding-remove-right"> <div [ngClass]="!isMobile?'uk-padding-small uk-padding-remove-vertical uk-padding-remove-right':''">
<div class="actions"> <div class="actions">
<ng-content select="[actions]"></ng-content> <ng-content select="[actions]"></ng-content>
</div> </div>
@ -47,13 +47,13 @@ declare var ResizeObserver;
</div> </div>
</div> </div>
<div id="page_content_inner" class="uk-container uk-container-large"> <div id="page_content_inner" class="uk-container uk-container-large">
<div class="uk-padding-small uk-padding-remove-vertical"> <div [ngClass]="!isMobile?'uk-padding-small uk-padding-remove-vertical':''">
<ng-content select="[inner]"></ng-content> <ng-content select="[inner]"></ng-content>
</div> </div>
</div> </div>
<div id="page_content_footer" #footer> <div id="page_content_footer" #footer>
<div class="uk-container uk-container-large"> <div class="uk-container uk-container-large">
<div class="uk-padding-small uk-padding-remove-vertical"> <div [ngClass]="!isMobile?'uk-padding-small uk-padding-remove-vertical':''">
<ng-content select="[footer]"></ng-content> <ng-content select="[footer]"></ng-content>
</div> </div>
</div> </div>
@ -64,8 +64,11 @@ declare var ResizeObserver;
export class PageContentComponent implements OnInit, AfterViewInit, OnDestroy { export class PageContentComponent implements OnInit, AfterViewInit, OnDestroy {
@Input() @Input()
public headerSticky: boolean = false; public headerSticky: boolean = false;
@Input()
public border: boolean = true;
public offset: number; public offset: number;
public shouldSticky: boolean = true; public shouldSticky: boolean = true;
public isMobile: boolean = false;
@ViewChild('header') header: ElementRef; @ViewChild('header') header: ElementRef;
@ViewChild('actions') actions: ElementRef; @ViewChild('actions') actions: ElementRef;
public footer_height: number = 0; public footer_height: number = 0;
@ -74,6 +77,7 @@ export class PageContentComponent implements OnInit, AfterViewInit, OnDestroy {
header: null, header: null,
footer: null footer: null
} }
public isStickyActive: boolean = false;
subscriptions = []; subscriptions = [];
constructor(private layoutService: LayoutService, private cdr: ChangeDetectorRef, constructor(private layoutService: LayoutService, private cdr: ChangeDetectorRef,
@ -85,16 +89,16 @@ export class PageContentComponent implements OnInit, AfterViewInit, OnDestroy {
this.offset = Number.parseInt(getComputedStyle(document.documentElement).getPropertyValue('--header-height')); this.offset = Number.parseInt(getComputedStyle(document.documentElement).getPropertyValue('--header-height'));
this.stickyBugWorkaround(); this.stickyBugWorkaround();
} }
this.subscriptions.push(this.layoutService.isMobile.subscribe(isMobile => {
this.isMobile = isMobile;
this.cdr.detectChanges();
}));
} }
get isBrowser() { get isBrowser() {
return this.platformId === 'browser'; return this.platformId === 'browser';
} }
get isStickyActive() {
return this.sticky.header?.isActive;
}
ngAfterViewInit() { ngAfterViewInit() {
if (typeof document !== "undefined") { if (typeof document !== "undefined") {
this.observeStickyFooter(); this.observeStickyFooter();
@ -103,6 +107,14 @@ export class PageContentComponent implements OnInit, AfterViewInit, OnDestroy {
media: '@m', media: '@m',
offset: this.offset offset: this.offset
}); });
this.subscriptions.push(UIkit.util.on(document, 'active', '#' + this.sticky.header.$el.id, () => {
this.isStickyActive = true;
this.cdr.detectChanges();
}));
this.subscriptions.push(UIkit.util.on(document, 'inactive', '#' + this.sticky.header.$el.id, () => {
this.isStickyActive = false;
this.cdr.detectChanges();
}));
} }
if (this.sticky_footer) { if (this.sticky_footer) {
let footer_offset = this.calcStickyFooterOffset(this.sticky_footer.nativeElement); let footer_offset = this.calcStickyFooterOffset(this.sticky_footer.nativeElement);

View File

@ -46,6 +46,7 @@ export class LayoutService {
private isFrontPageSubject: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false); private isFrontPageSubject: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
/** /**
* Add isSmallScreen: true on data of route config, if screen is small. * Add isSmallScreen: true on data of route config, if screen is small.
* @deprecated
*/ */
private isSmallScreenSubject: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false); private isSmallScreenSubject: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
/** /**
@ -233,10 +234,16 @@ export class LayoutService {
this.replaceHeaderSubject.next(value); this.replaceHeaderSubject.next(value);
} }
/**
* @deprecated
* */
get isSmallScreen(): boolean { get isSmallScreen(): boolean {
return this.isSmallScreenSubject.getValue(); return this.isSmallScreenSubject.getValue();
} }
/**
* @deprecated
* */
setSmallScreen(value: boolean) { setSmallScreen(value: boolean) {
this.isSmallScreenSubject.next(value); this.isSmallScreenSubject.next(value);
} }

View File

@ -67,9 +67,11 @@
<div class="uk-card-body"> <div class="uk-card-body">
<span class="uk-text-bold uk-text-large">{{(showCurrent) ? item.email : item}}</span> <span class="uk-text-bold uk-text-large">{{(showCurrent) ? item.email : item}}</span>
</div> </div>
<div *ngIf="isCurator || !showCurrent" class="uk-card-footer uk-flex uk-flex-right"> <div *ngIf="!showCurrent || role === 'member' || canDelete" class="uk-card-footer uk-flex uk-flex-right">
<button (click)="openDeleteModal(item)" class="uk-button uk-button-link uk-flex uk-flex-middle" [disabled]="role === 'member' && item.isManager" <button (click)="openDeleteModal(item)" class="uk-button uk-button-link uk-flex uk-flex-middle"
[attr.uk-tooltip]="(role === 'member' && item.isManager)?'This user is a manager and cannot be removed.':null"> [disabled]="(role === 'member' && item.isManager) || isMe(item.id)"
[attr.uk-tooltip]="(role === 'member' && item.isManager)?'This user is a manager and cannot be removed.':
(isMe(item.id)?'You cannot remove yourself':null)">
<icon name="delete" [flex]="true" type="filled"></icon> <icon name="delete" [flex]="true" type="filled"></icon>
<span class="uk-margin-small-left uk-text-bold uk-text-uppercase">{{showCurrent ? 'Delete' : 'Cancel invitation'}}</span> <span class="uk-margin-small-left uk-text-bold uk-text-uppercase">{{showCurrent ? 'Delete' : 'Cancel invitation'}}</span>
</button> </button>

View File

@ -11,6 +11,7 @@ import {StringUtils} from "../../../utils/string-utils.class";
import {NotificationService} from "../../../notifications/notification.service"; import {NotificationService} from "../../../notifications/notification.service";
import {Subscription} from "rxjs"; import {Subscription} from "rxjs";
import {NotificationHandler} from "../../../utils/notification-handler"; import {NotificationHandler} from "../../../utils/notification-handler";
import {ClearCacheService} from "../../../services/clear-cache.service";
@Component({ @Component({
selector: 'role-users', selector: 'role-users',
@ -29,6 +30,8 @@ export class RoleUsersComponent implements OnInit, OnDestroy, OnChanges {
@Input() @Input()
public role: "member" | "manager" = "manager"; public role: "member" | "manager" = "manager";
@Input() @Input()
public deleteAuthorizationLevel: 'curator' | 'manager' = 'curator';
@Input()
public message: string = null; public message: string = null;
@Input() @Input()
public emailComposer: Function; public emailComposer: Function;
@ -63,6 +66,7 @@ export class RoleUsersComponent implements OnInit, OnDestroy, OnChanges {
constructor(private userRegistryService: UserRegistryService, constructor(private userRegistryService: UserRegistryService,
private userManagementService: UserManagementService, private userManagementService: UserManagementService,
private clearCacheService: ClearCacheService,
private notificationService: NotificationService, private notificationService: NotificationService,
private router: Router, private router: Router,
private fb: UntypedFormBuilder) { private fb: UntypedFormBuilder) {
@ -73,6 +77,7 @@ export class RoleUsersComponent implements OnInit, OnDestroy, OnChanges {
this.updateLists(); this.updateLists();
this.userManagementService.getUserInfo().subscribe(user => { this.userManagementService.getUserInfo().subscribe(user => {
this.user = user; this.user = user;
console.log(this.canDelete)
}); });
} }
@ -196,6 +201,7 @@ export class RoleUsersComponent implements OnInit, OnDestroy, OnChanges {
} }
this.filterActiveBySearch(this.filterForm.value.active); this.filterActiveBySearch(this.filterForm.value.active);
this.userManagementService.updateUserInfo(); this.userManagementService.updateUserInfo();
this.clearCacheService.clearCache(this.role + 's of ' + this.id + ' have been updated');
NotificationHandler.rise(this.selectedUser + ' <b>is no longer</b> ' + this.role + ' of ' + this.name + ' Dashboard'); NotificationHandler.rise(this.selectedUser + ' <b>is no longer</b> ' + this.role + ' of ' + this.name + ' Dashboard');
this.loadActive = false; this.loadActive = false;
}, error => { }, error => {
@ -267,6 +273,18 @@ export class RoleUsersComponent implements OnInit, OnDestroy, OnChanges {
}); });
} }
public get canDelete() {
return (this.deleteAuthorizationLevel === 'curator'?this.isCurator:this.isManager);
}
public isMe(userId: string) {
return userId.includes(this.user.id) && !this.isCurator;
}
public get isManager(): boolean {
return this.isCurator || !!Session.isManager(this.type, this.id, this.user);
}
public get isCurator(): boolean { public get isCurator(): boolean {
return this.isPortalAdmin || !!Session.isCurator(this.type, this.user); return this.isPortalAdmin || !!Session.isCurator(this.type, this.user);
} }

View File

@ -142,9 +142,6 @@ export class UserMiniComponent implements OnInit, OnChanges {
if (this.user) { if (this.user) {
this.userManagementService.logout(); this.userManagementService.logout();
} }
this.loggedIn = false;
this.isAuthorized = false;
this.user = new User();
} }
logIn() { logIn() {

View File

@ -94,7 +94,7 @@ declare var ResizeObserver;
</div> </div>
</div> </div>
<div> <div>
<div class="uk-sticky uk-background-default uk-padding uk-padding-remove-horizontal" uk-sticky> <div class="uk-sticky uk-background-default uk-padding-small uk-padding-remove-right" uk-sticky>
<slider-tabs type="scrollable" position="horizontal"> <slider-tabs type="scrollable" position="horizontal">
<slider-tab tabId="entities_m" tabTitle="1. Entities"></slider-tab> <slider-tab tabId="entities_m" tabTitle="1. Entities"></slider-tab>
<slider-tab tabId="inherited-and-inferred-attributes_m" <slider-tab tabId="inherited-and-inferred-attributes_m"

View File

@ -10,6 +10,7 @@ import {AlertModal} from "../utils/modal/alert";
import {properties} from "../../../environments/environment"; import {properties} from "../../../environments/environment";
import {EmailService} from "../utils/email/email.service"; import {EmailService} from "../utils/email/email.service";
import {Composer} from "../utils/email/composer"; import {Composer} from "../utils/email/composer";
import {ClearCacheService} from "../services/clear-cache.service";
@Component({ @Component({
selector: 'role-verification', selector: 'role-verification',
@ -106,7 +107,8 @@ export class RoleVerificationComponent implements OnInit, OnDestroy, AfterViewIn
private fb: UntypedFormBuilder, private fb: UntypedFormBuilder,
private emailService: EmailService, private emailService: EmailService,
private userManagementService: UserManagementService, private userManagementService: UserManagementService,
private userRegistryService: UserRegistryService) { private userRegistryService: UserRegistryService,
private clearCacheService: ClearCacheService) {
} }
ngOnInit() { ngOnInit() {
@ -195,6 +197,7 @@ export class RoleVerificationComponent implements OnInit, OnDestroy, AfterViewIn
public verifyManager() { public verifyManager() {
this.loading = true; this.loading = true;
this.subscriptions.push(this.userRegistryService.verify(this.verification.id, this.code.value).subscribe(() => { this.subscriptions.push(this.userRegistryService.verify(this.verification.id, this.code.value).subscribe(() => {
this.clearCacheService.clearCache('Managers updated');
this.managerModal.cancel(); this.managerModal.cancel();
this.error = null; this.error = null;
this.userManagementService.updateUserInfo(() => { this.userManagementService.updateUserInfo(() => {
@ -232,6 +235,7 @@ export class RoleVerificationComponent implements OnInit, OnDestroy, AfterViewIn
this.loading = true; this.loading = true;
if (!this.isMember) { if (!this.isMember) {
this.subscriptions.push(this.userRegistryService.verify(this.verification.id, this.code.value, "member").subscribe(() => { this.subscriptions.push(this.userRegistryService.verify(this.verification.id, this.code.value, "member").subscribe(() => {
this.clearCacheService.clearCache('Members updated');
this.loading = false; this.loading = false;
this.error = null; this.error = null;
this.userManagementService.updateUserInfo(() => { this.userManagementService.updateUserInfo(() => {

View File

@ -124,7 +124,6 @@ export class UserManagementService {
public logout() { public logout() {
this.setRedirectUrl(); this.setRedirectUrl();
Session.removeUser(); Session.removeUser();
this.getUserInfoSubject.next(null);
window.location.href = properties.logoutUrl + "?redirect=" + this.redirectUrl; window.location.href = properties.logoutUrl + "?redirect=" + this.redirectUrl;
} }
} }

View File

@ -14,50 +14,52 @@ export class UserRegistryService {
} }
public createRole(type: string, id: string): Observable<any[]> { public createRole(type: string, id: string): Observable<any[]> {
return this.http.post<any>(properties.registryUrl + 'create/' + encodeURIComponent(type) + '/' + encodeURIComponent(id), null, return this.http.post<any>(properties.registryUrl + 'create/' + type + '/' + id, null,
CustomOptions.registryOptions()).pipe(map((response: any) => response.response)); CustomOptions.registryOptions()).pipe(map((response: any) => response.response));
} }
public getMembersCount(type: string, id: string): Observable<any> { public getMembersCount(type: string, id: string): Observable<any> {
return this.http.get(properties.registryUrl + encodeURIComponent(type) + '/' + encodeURIComponent(id) + '/members/count'); let url = properties.registryUrl + type + '/' + id + '/members/count';
return this.http.get((properties.useCache) ? (properties.cacheUrl + encodeURIComponent(url)) : url);
} }
public subscribeTo(type: string, id: string): Observable<any> { public subscribeTo(type: string, id: string): Observable<any> {
return this.http.post(properties.registryUrl + 'subscribe/' + encodeURIComponent(type) + '/' + encodeURIComponent(id), return this.http.post(properties.registryUrl + 'subscribe/' + type + '/' + id,
null, CustomOptions.registryOptions()); null, CustomOptions.registryOptions());
} }
public unsubscribeFrom(type: string, id: string): Observable<any> { public unsubscribeFrom(type: string, id: string): Observable<any> {
return this.http.post(properties.registryUrl + 'unsubscribe/' + encodeURIComponent(type) + '/' + encodeURIComponent(id), return this.http.post(properties.registryUrl + 'unsubscribe/' + type + '/' + id,
null, CustomOptions.registryOptions()); null, CustomOptions.registryOptions());
} }
public remove(type: string, id: string, email: string, role: "member" | "manager" = "manager"): Observable<any> { public remove(type: string, id: string, email: string, role: "member" | "manager" = "manager"): Observable<any> {
return this.http.delete<any>(properties.registryUrl + return this.http.delete<any>(properties.registryUrl +
encodeURIComponent(type) + '/' + encodeURIComponent(id) + '/' + role + '/' + encodeURIComponent(email), CustomOptions.registryOptions()); type + '/' + id + '/' + role + '/' + encodeURIComponent(email), CustomOptions.registryOptions());
} }
public invite(type: string, id: string, details: any, role: "member" | "manager" = "manager"): Observable<any[]> { public invite(type: string, id: string, details: any, role: "member" | "manager" = "manager"): Observable<any[]> {
return this.http.post<any>(properties.registryUrl + 'invite/' + return this.http.post<any>(properties.registryUrl + 'invite/' +
encodeURIComponent(type) + '/' + encodeURIComponent(id) + '/' + role, details, type + '/' + id + '/' + role, details,
CustomOptions.registryOptions()).pipe(map((response: any) => response.response)); CustomOptions.registryOptions()).pipe(map((response: any) => response.response));
} }
public verify(id: string, code: string, role: "member" | "manager" = "manager"): Observable<any> { public verify(id: string, code: string, role: "member" | "manager" = "manager"): Observable<any> {
return this.http.post<any>(properties.registryUrl + 'verification/' + role + '/' + encodeURIComponent(id), code, CustomOptions.registryOptions()); return this.http.post<any>(properties.registryUrl + 'verification/' + role + '/' + id, code, CustomOptions.registryOptions());
} }
public getInvitation(id: string): Observable<any> { public getInvitation(id: string): Observable<any> {
return this.http.get<any>(properties.registryUrl + 'verification/' + encodeURIComponent(id), CustomOptions.registryOptions()) return this.http.get<any>(properties.registryUrl + 'verification/' + id, CustomOptions.registryOptions())
.pipe(map((response: any) => response.response)); .pipe(map((response: any) => response.response));
} }
public deleteVerification(id: string): Observable<any> { public deleteVerification(id: string): Observable<any> {
return this.http.delete<any>(properties.registryUrl + 'verification/' + encodeURIComponent(id), CustomOptions.registryOptions()); return this.http.delete<any>(properties.registryUrl + 'verification/' + id, CustomOptions.registryOptions());
} }
public getActive(type: string, id: string, role: "member" | "manager" = "manager"): Observable<any[]> { public getActive(type: string, id: string, role: "member" | "manager" = "manager"): Observable<any[]> {
return this.http.get<any>(properties.registryUrl + encodeURIComponent(type) + '/' + encodeURIComponent(id) + "/" + role + 's', let url = properties.registryUrl + type + '/' + id + "/" + role + 's';
return this.http.get<any>((properties.useCache) ? (properties.cacheUrl + encodeURIComponent(url)) : url,
CustomOptions.registryOptions()).pipe(map((response:any) => response.response), map(users => { CustomOptions.registryOptions()).pipe(map((response:any) => response.response), map(users => {
if(users.length > 0 && !users[0].email) { if(users.length > 0 && !users[0].email) {
return []; return [];
@ -68,13 +70,14 @@ export class UserRegistryService {
} }
public getPending(type: string, id: string, role: "member" | "manager" = "manager"): Observable<any[]> { public getPending(type: string, id: string, role: "member" | "manager" = "manager"): Observable<any[]> {
return this.http.get<any>(properties.registryUrl + 'invite/' + encodeURIComponent(type) + '/' + encodeURIComponent(id) + "/" + role + 's/', let url = properties.registryUrl + 'invite/' +type + '/' +id + "/" + role + 's/';
return this.http.get<any>((properties.useCache) ? (properties.cacheUrl + encodeURIComponent(url)) : url,
CustomOptions.registryOptions()).pipe(map((response: any) => response.response)); CustomOptions.registryOptions()).pipe(map((response: any) => response.response));
} }
public cancelInvitation(type: string, id: string, email: string, role: "member" | "manager" = "manager"): Observable<any> { public cancelInvitation(type: string, id: string, email: string, role: "member" | "manager" = "manager"): Observable<any> {
return this.http.delete<any>(properties.registryUrl + 'invite/' + return this.http.delete<any>(properties.registryUrl + 'invite/' +
encodeURIComponent(type) + '/' + encodeURIComponent(id) + '/' + role + '/' + encodeURIComponent(email), type + '/' + id + '/' + role + '/' + encodeURIComponent(email),
CustomOptions.registryOptions()); CustomOptions.registryOptions());
} }
} }

View File

@ -1,12 +1,6 @@
<div *ngIf="showMenu && activeHeader"> <div *ngIf="showMenu && activeHeader">
<div id="main-menu-small" class="uk-hidden@m"> <div id="main-menu-small" class="uk-hidden@m">
<nav class="uk-navbar-container uk-navbar" uk-navbar="delay-hide: 400"> <nav class="uk-navbar-container uk-navbar" uk-navbar="delay-hide: 400">
<div
*ngIf="(properties.environment =='beta' || properties.environment =='development') && showLogo && activeHeader.badge">
<img class="uk-position-top-left"
[src]="'assets/common-assets/'+(properties.environment =='beta'?'beta_flag.svg':'prototype_flag.svg')"
alt="BETA" style="height: 60px; width: 60px;">
</div>
<div *ngIf="!onlyTop || userMenu" class="uk-navbar-left" [class.uk-light]='activeHeader.darkBg'> <div *ngIf="!onlyTop || userMenu" class="uk-navbar-left" [class.uk-light]='activeHeader.darkBg'>
<a class="uk-navbar-toggle" href="#tm-mobile" uk-toggle> <a class="uk-navbar-toggle" href="#tm-mobile" uk-toggle>
<div uk-navbar-toggle-icon="" class="uk-navbar-toggle-icon uk-icon custom-navbar-toggle-icon"></div> <div uk-navbar-toggle-icon="" class="uk-navbar-toggle-icon uk-icon custom-navbar-toggle-icon"></div>
@ -177,7 +171,7 @@
<user-mini *ngIf="userMenu" [user]="user" <user-mini *ngIf="userMenu" [user]="user"
[userMenuItems]=userMenuItems [logInUrl]=properties.loginUrl [logOutUrl]=properties.logoutUrl [userMenuItems]=userMenuItems [logInUrl]=properties.loginUrl [logOutUrl]=properties.logoutUrl
[cookieDomain]=properties.cookieDomain></user-mini> [cookieDomain]=properties.cookieDomain></user-mini>
<div class="uk-visible@l"> <div class="uk-visible@m">
<ng-content select="[extra-m]"></ng-content> <ng-content select="[extra-m]"></ng-content>
</div> </div>
</div> </div>
@ -320,7 +314,7 @@
<img *ngIf="(mobile && activeHeader.logoSmallUrl) || (!mobile && activeHeader.logoUrl)" <img *ngIf="(mobile && activeHeader.logoSmallUrl) || (!mobile && activeHeader.logoUrl)"
[src]="!mobile?activeHeader.logoUrl:activeHeader.logoSmallUrl" [src]="!mobile?activeHeader.logoUrl:activeHeader.logoSmallUrl"
[alt]="activeHeader.title"> [alt]="activeHeader.title">
<div *ngIf="activeHeader.logoInfo" [innerHTML]="activeHeader.logoInfo"></div> <div *ngIf="activeHeader.logoInfo && !mobile" [innerHTML]="activeHeader.logoInfo"></div>
<ng-container *ngIf="(mobile && !activeHeader.logoSmallUrl) || (!mobile && !activeHeader.logoUrl)"> <ng-container *ngIf="(mobile && !activeHeader.logoSmallUrl) || (!mobile && !activeHeader.logoUrl)">
<div class="multi-line-ellipsis lines-2" [style.max-width]="(!mobile)?'25vw':null" [title]="activeHeader.title"> <div class="multi-line-ellipsis lines-2" [style.max-width]="(!mobile)?'25vw':null" [title]="activeHeader.title">
<p class="uk-margin-remove">{{activeHeader.title}}</p> <p class="uk-margin-remove">{{activeHeader.title}}</p>
@ -332,7 +326,7 @@
<img *ngIf="(mobile && activeHeader.logoSmallUrl) || (!mobile && activeHeader.logoUrl)" <img *ngIf="(mobile && activeHeader.logoSmallUrl) || (!mobile && activeHeader.logoUrl)"
[src]="!mobile?activeHeader.logoUrl:activeHeader.logoSmallUrl" [src]="!mobile?activeHeader.logoUrl:activeHeader.logoSmallUrl"
[alt]="activeHeader.title"> [alt]="activeHeader.title">
<div *ngIf="activeHeader.logoInfo" [innerHTML]="activeHeader.logoInfo"></div> <div *ngIf="activeHeader.logoInfo && !mobile" [innerHTML]="activeHeader.logoInfo"></div>
<ng-container *ngIf="(mobile && !activeHeader.logoSmallUrl) || (!mobile && !activeHeader.logoUrl)"> <ng-container *ngIf="(mobile && !activeHeader.logoSmallUrl) || (!mobile && !activeHeader.logoUrl)">
<div class="multi-line-ellipsis lines-2" [style.max-width]="(!mobile)?'25vw':null" [title]="activeHeader.title"> <div class="multi-line-ellipsis lines-2" [style.max-width]="(!mobile)?'25vw':null" [title]="activeHeader.title">
<p class="uk-margin-remove">{{activeHeader.title}}</p> <p class="uk-margin-remove">{{activeHeader.title}}</p>

View File

@ -0,0 +1,25 @@
import {Component, Input} from "@angular/core";
@Component({
selector: 'slider-arrow',
template: `
<div *ngIf="type" class="uk-slider-arrow" [ngClass]="positionClasses" [attr.uk-slider-item]="type">
<button class="uk-icon-button uk-icon-button-small uk-box-no-shadow uk-box-no-shadow-hover uk-border">
<icon [name]="icon" [flex]="true" visuallyHidden="download"></icon>
</button>
</div>
`
})
export class SliderArrowComponent {
@Input()
public type: 'previous' | 'next';
get positionClasses() {
return (this.type == 'previous')?'uk-position-center-left uk-slider-left':'uk-position-center-right uk-slider-right'
}
get icon() {
return (this.type == 'previous')?'chevron_left':'chevron_right'
}
}

View File

@ -0,0 +1,11 @@
import {NgModule} from "@angular/core";
import {CommonModule} from "@angular/common";
import {SliderArrowComponent} from "./slider-arrow.component";
import {IconsModule} from "../../utils/icons/icons.module";
@NgModule({
imports: [CommonModule, IconsModule],
declarations: [SliderArrowComponent],
exports: [SliderArrowComponent]
})
export class SliderUtilsModule {}

View File

@ -15,4 +15,10 @@ export class SliderTabComponent {
public disabled: boolean = false; public disabled: boolean = false;
@Input() @Input()
public align: 'left' | 'right' = 'left'; public align: 'left' | 'right' = 'left';
@Input()
public routerLink: any[] | string | null | undefined = null;
@Input()
public queryParams: any = null;
@Input()
public customClass: string = '';
} }

View File

@ -20,12 +20,12 @@ declare var UIkit;
template: ` template: `
<div #sliderElement class="uk-position-relative" [class.uk-slider]="position === 'horizontal'" <div #sliderElement class="uk-position-relative" [class.uk-slider]="position === 'horizontal'"
[ngClass]="customClass"> [ngClass]="customClass">
<div [class.uk-slider-container-tabs]="position === 'horizontal'"> <div [class.uk-slider-container-tabs]="position === 'horizontal'" [class.uk-border-bottom]="border && position === 'horizontal'">
<ul #tabsElement class="uk-tab" [class.uk-flex-nowrap]="position === 'horizontal'" <ul #tabsElement [class.uk-flex-nowrap]="position === 'horizontal'"
[class.uk-slider-items]="position === 'horizontal'" [class.uk-slider-items]="position === 'horizontal'"
[class.uk-tab-left]="position === 'left'" [class.uk-tab-right]="position === 'right'" [class.uk-tab-left]="position === 'left'" [class.uk-tab-right]="position === 'right'"
[attr.uk-tab]="type === 'static'?('connect:' + connect):null" [attr.uk-switcher]="type === 'static'?('connect:' + connect):null"
[ngClass]="'uk-flex-' + flexPosition"> [ngClass]="'uk-flex-' + flexPosition + ' ' + tabsClass">
<ng-container *ngIf="type === 'static'"> <ng-container *ngIf="type === 'static'">
<li *ngFor="let tab of leftTabs" class="uk-text-capitalize"> <li *ngFor="let tab of leftTabs" class="uk-text-capitalize">
<a>{{tab.title}}</a> <a>{{tab.title}}</a>
@ -33,32 +33,41 @@ declare var UIkit;
<li *ngFor="let tab of rightTabs; let i=index;" <li *ngFor="let tab of rightTabs; let i=index;"
[ngClass]="i === 0?'uk-flex-1 uk-flex uk-flex-right':''" [ngClass]="i === 0?'uk-flex-1 uk-flex uk-flex-right':''"
class="uk-text-capitalize"> class="uk-text-capitalize">
<a>{{tab.title}}</a> <a [ngClass]="tab.customClass">{{tab.title}}</a>
</li>
</ng-container>
<ng-container *ngIf="type === 'dynamic'">
<li *ngFor="let tab of leftTabs" [class.uk-active]="tab.active" class="uk-text-capitalize">
<a [routerLink]="tab.routerLink" [queryParams]="tab.queryParams" [ngClass]="tab.customClass">{{tab.title}}</a>
</li>
<li *ngFor="let tab of rightTabs; let i=index;" [class.uk-active]="tab.active"
[ngClass]="i === 0?'uk-flex-1 uk-flex uk-flex-right':''"
class="uk-text-capitalize">
<a [routerLink]="tab.routerLink" [queryParams]="tab.queryParams" [ngClass]="tab.customClass">{{tab.title}}</a>
</li> </li>
</ng-container> </ng-container>
<ng-container *ngIf="type === 'scrollable'"> <ng-container *ngIf="type === 'scrollable'">
<li *ngFor="let tab of leftTabs" class="uk-text-capitalize" [class.uk-active]="tab.active"> <li *ngFor="let tab of leftTabs" class="uk-text-capitalize" [class.uk-active]="tab.active">
<a routerLink="./" [fragment]="tab.id" queryParamsHandling="merge">{{tab.title}}</a> <a routerLink="./" [fragment]="tab.id" queryParamsHandling="merge" [ngClass]="tab.customClass">{{tab.title}}</a>
</li> </li>
<li *ngFor="let tab of rightTabs; let i=index;" class="uk-text-capitalize" <li *ngFor="let tab of rightTabs; let i=index;" class="uk-text-capitalize"
[ngClass]="i === 0?'uk-flex-1 uk-flex uk-flex-right':''" [ngClass]="i === 0?'uk-flex-1 uk-flex uk-flex-right':''"
[class.uk-active]="tab.active"> [class.uk-active]="tab.active">
<a routerLink="./" [fragment]="tab.id" queryParamsHandling="merge">{{tab.title}}</a> <a routerLink="./" [fragment]="tab.id" queryParamsHandling="merge" [ngClass]="tab.customClass">{{tab.title}}</a>
</li> </li>
</ng-container> </ng-container>
</ul> </ul>
</div> </div>
<a *ngIf="position === 'horizontal'" class="uk-position-center-left uk-blur-background" uk-slider-item="previous"><span <slider-arrow *ngIf="position === 'horizontal' && arrows" type="previous"></slider-arrow>
uk-icon="chevron-left"></span></a> <slider-arrow *ngIf="position === 'horizontal' && arrows" type="next"></slider-arrow>
<a *ngIf="position === 'horizontal'" class="uk-position-center-right uk-blur-background" uk-slider-item="next"><span
uk-icon="chevron-right"></span></a>
</div> </div>
`, `,
}) })
export class SliderTabsComponent implements AfterViewInit, OnDestroy { export class SliderTabsComponent implements AfterViewInit, OnDestroy {
//TODO now it works only for scrollable and static, to be extended for dynamic
/** /**
* Type of tabs: Static = Uikit tabs with @connect class or selector, Dynamic = Active is defined by tabComponent.active input, * Type of tabs:
* Static = Uikit tabs with @connect class or selector
* Dynamic = Active is defined by tabComponent's active Input
* Scrollable = Active is defined by the active fragment of URL and position of scroll * Scrollable = Active is defined by the active fragment of URL and position of scroll
* */ * */
@Input() @Input()
@ -84,10 +93,19 @@ export class SliderTabsComponent implements AfterViewInit, OnDestroy {
@Input() @Input()
public flexPosition: 'center' | 'left' | 'right' = 'left'; public flexPosition: 'center' | 'left' | 'right' = 'left';
/** /**
* Tabs custom class * Set a class above tabs
* */ * */
@Input() @Input()
public customClass: string; public customClass: string;
/**
* Tabs class
* */
@Input()
public tabsClass: string = 'uk-tab';
@Input()
public border: boolean = true;
@Input()
public arrows: boolean = true;
@ContentChildren(SliderTabComponent) tabs: QueryList<SliderTabComponent>; @ContentChildren(SliderTabComponent) tabs: QueryList<SliderTabComponent>;
@ViewChild('sliderElement') sliderElement: ElementRef; @ViewChild('sliderElement') sliderElement: ElementRef;
@ViewChild('tabsElement') tabsElement: ElementRef; @ViewChild('tabsElement') tabsElement: ElementRef;
@ -112,9 +130,12 @@ export class SliderTabsComponent implements AfterViewInit, OnDestroy {
let slider = UIkit.slider(this.sliderElement.nativeElement, {finite: true}); let slider = UIkit.slider(this.sliderElement.nativeElement, {finite: true});
slider.clsActive = 'uk-slider-active'; slider.clsActive = 'uk-slider-active';
slider.updateActiveClasses(); slider.updateActiveClasses();
slider.slides.forEach(item => { slider.slides.forEach((item, index) => {
if(!this.tabs.get(index).active) {
item.classList.remove('uk-active'); item.classList.remove('uk-active');
}
}); });
console.log(slider);
if (this.type === 'static') { if (this.type === 'static') {
let tabs = UIkit.tab(this.tabsElement.nativeElement, {connect: this.connect}); let tabs = UIkit.tab(this.tabsElement.nativeElement, {connect: this.connect});
tabs.show(this.activeIndex); tabs.show(this.activeIndex);

View File

@ -3,9 +3,10 @@ import {CommonModule} from "@angular/common";
import {SliderTabsComponent} from "./slider-tabs.component"; import {SliderTabsComponent} from "./slider-tabs.component";
import {SliderTabComponent} from "./slider-tab.component"; import {SliderTabComponent} from "./slider-tab.component";
import {RouterModule} from "@angular/router"; import {RouterModule} from "@angular/router";
import {SliderUtilsModule} from "../slider-utils/slider-utils.module";
@NgModule({ @NgModule({
imports: [CommonModule, RouterModule], imports: [CommonModule, RouterModule, SliderUtilsModule],
declarations: [SliderTabsComponent, SliderTabComponent], declarations: [SliderTabsComponent, SliderTabComponent],
exports: [SliderTabsComponent, SliderTabComponent] exports: [SliderTabsComponent, SliderTabComponent]
}) })