MaDgIK
/
openaire-library
13
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

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
parent 5c9470a959 c53806f5b3
commit 88a35d4814
15 changed files with 158 additions and 58 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
dashboard/sharedComponents/page-content/page-content.component.ts
View File

@ -22,24 +22,24 @@ declare var ResizeObserver;
<div [class.uk-hidden]="!isBrowser" id="page_content_sticky_footer" #sticky_footer
class="uk-tile-default uk-blur-background">
<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>
</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')">
<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">
<ng-content select="[header]"></ng-content>
</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-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">
<ng-content select="[actions]"></ng-content>
</div>
@ -47,13 +47,13 @@ declare var ResizeObserver;
</div>
</div>
<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>
</div>
</div>
<div id="page_content_footer" #footer>
<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>
</div>
</div>
@ -64,8 +64,11 @@ declare var ResizeObserver;
export class PageContentComponent implements OnInit, AfterViewInit, OnDestroy {
@Input()
public headerSticky: boolean = false;
@Input()
public border: boolean = true;
public offset: number;
public shouldSticky: boolean = true;
public isMobile: boolean = false;
@ViewChild('header') header: ElementRef;
@ViewChild('actions') actions: ElementRef;
public footer_height: number = 0;
@ -74,6 +77,7 @@ export class PageContentComponent implements OnInit, AfterViewInit, OnDestroy {
header: null,
footer: null
}
public isStickyActive: boolean = false;
subscriptions = [];
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.stickyBugWorkaround();
}
this.subscriptions.push(this.layoutService.isMobile.subscribe(isMobile => {
this.isMobile = isMobile;
this.cdr.detectChanges();
}));
}
get isBrowser() {
return this.platformId === 'browser';
}
get isStickyActive() {
return this.sticky.header?.isActive;
}
ngAfterViewInit() {
if (typeof document !== "undefined") {
this.observeStickyFooter();
@ -103,6 +107,14 @@ export class PageContentComponent implements OnInit, AfterViewInit, OnDestroy {
media: '@m',
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) {
let footer_offset = this.calcStickyFooterOffset(this.sticky_footer.nativeElement);

7
dashboard/sharedComponents/sidebar/layout.service.ts
View File

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

8
dashboard/users/role-users/role-users.component.html
View File

@ -67,9 +67,11 @@
<div class="uk-card-body">
<span class="uk-text-bold uk-text-large">{{(showCurrent) ? item.email : item}}</span>
</div>
<div *ngIf="isCurator || !showCurrent" 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"
[attr.uk-tooltip]="(role === 'member' && item.isManager)?'This user is a manager and cannot be removed.':null">
<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) || 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>
<span class="uk-margin-small-left uk-text-bold uk-text-uppercase">{{showCurrent ? 'Delete' : 'Cancel invitation'}}</span>
</button>

18
dashboard/users/role-users/role-users.component.ts
View File

@ -11,6 +11,7 @@ import {StringUtils} from "../../../utils/string-utils.class";
import {NotificationService} from "../../../notifications/notification.service";
import {Subscription} from "rxjs";
import {NotificationHandler} from "../../../utils/notification-handler";
import {ClearCacheService} from "../../../services/clear-cache.service";
@Component({
selector: 'role-users',
@ -29,6 +30,8 @@ export class RoleUsersComponent implements OnInit, OnDestroy, OnChanges {
@Input()
public role: "member" | "manager" = "manager";
@Input()
public deleteAuthorizationLevel: 'curator' | 'manager' = 'curator';
@Input()
public message: string = null;
@Input()
public emailComposer: Function;
@ -63,6 +66,7 @@ export class RoleUsersComponent implements OnInit, OnDestroy, OnChanges {
constructor(private userRegistryService: UserRegistryService,
private userManagementService: UserManagementService,
private clearCacheService: ClearCacheService,
private notificationService: NotificationService,
private router: Router,
private fb: UntypedFormBuilder) {
@ -73,6 +77,7 @@ export class RoleUsersComponent implements OnInit, OnDestroy, OnChanges {
this.updateLists();
this.userManagementService.getUserInfo().subscribe(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.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');
this.loadActive = false;
}, 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 {
return this.isPortalAdmin || !!Session.isCurator(this.type, this.user);
}

3
login/userMini.component.ts
View File

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

2
monitor/methodology/terminology.component.ts
View File

@ -94,7 +94,7 @@ declare var ResizeObserver;
</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-tab tabId="entities_m" tabTitle="1. Entities"></slider-tab>
<slider-tab tabId="inherited-and-inferred-attributes_m"

6
role-verification/role-verification.component.ts
View File

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

1
services/user-management.service.ts
View File

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

27
services/user-registry.service.ts
View File

@ -14,50 +14,52 @@ export class UserRegistryService {
}
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));
}
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> {
return this.http.post(properties.registryUrl + 'subscribe/' + encodeURIComponent(type) + '/' + encodeURIComponent(id),
return this.http.post(properties.registryUrl + 'subscribe/' + type + '/' + id,
null, CustomOptions.registryOptions());
}
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());
}
public remove(type: string, id: string, email: string, role: "member" | "manager" = "manager"): Observable<any> {
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[]> {
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));
}
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> {
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));
}
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[]> {
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 => {
if(users.length > 0 && !users[0].email) {
return [];
@ -68,13 +70,14 @@ export class UserRegistryService {
}
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));
}
public cancelInvitation(type: string, id: string, email: string, role: "member" | "manager" = "manager"): Observable<any> {
return this.http.delete<any>(properties.registryUrl + 'invite/' +
encodeURIComponent(type) + '/' + encodeURIComponent(id) + '/' + role + '/' + encodeURIComponent(email),
type + '/' + id + '/' + role + '/' + encodeURIComponent(email),
CustomOptions.registryOptions());
}
}

12
sharedComponents/navigationBar.component.html
View File

@ -1,12 +1,6 @@
<div *ngIf="showMenu && activeHeader">
<div id="main-menu-small" class="uk-hidden@m">
<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'>
<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>
@ -177,7 +171,7 @@
<user-mini *ngIf="userMenu" [user]="user"
[userMenuItems]=userMenuItems [logInUrl]=properties.loginUrl [logOutUrl]=properties.logoutUrl
[cookieDomain]=properties.cookieDomain></user-mini>
<div class="uk-visible@l">
<div class="uk-visible@m">
<ng-content select="[extra-m]"></ng-content>
</div>
</div>
@ -320,7 +314,7 @@
<img *ngIf="(mobile && activeHeader.logoSmallUrl) || (!mobile && activeHeader.logoUrl)"
[src]="!mobile?activeHeader.logoUrl:activeHeader.logoSmallUrl"
[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)">
<div class="multi-line-ellipsis lines-2" [style.max-width]="(!mobile)?'25vw':null" [title]="activeHeader.title">
<p class="uk-margin-remove">{{activeHeader.title}}</p>
@ -332,7 +326,7 @@
<img *ngIf="(mobile && activeHeader.logoSmallUrl) || (!mobile && activeHeader.logoUrl)"
[src]="!mobile?activeHeader.logoUrl:activeHeader.logoSmallUrl"
[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)">
<div class="multi-line-ellipsis lines-2" [style.max-width]="(!mobile)?'25vw':null" [title]="activeHeader.title">
<p class="uk-margin-remove">{{activeHeader.title}}</p>

25
sharedComponents/slider-utils/slider-arrow.component.ts Normal file
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'
}
}

11
sharedComponents/slider-utils/slider-utils.module.ts Normal file
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 {}

6
sharedComponents/tabs/slider-tab.component.ts
View File

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

53
sharedComponents/tabs/slider-tabs.component.ts
View File

@ -20,12 +20,12 @@ declare var UIkit;
template: `
<div #sliderElement class="uk-position-relative" [class.uk-slider]="position === 'horizontal'"
[ngClass]="customClass">
<div [class.uk-slider-container-tabs]="position === 'horizontal'">
<ul #tabsElement class="uk-tab" [class.uk-flex-nowrap]="position === 'horizontal'"
<div [class.uk-slider-container-tabs]="position === 'horizontal'" [class.uk-border-bottom]="border && position === 'horizontal'">
<ul #tabsElement [class.uk-flex-nowrap]="position === 'horizontal'"
[class.uk-slider-items]="position === 'horizontal'"
[class.uk-tab-left]="position === 'left'" [class.uk-tab-right]="position === 'right'"
[attr.uk-tab]="type === 'static'?('connect:' + connect):null"
[ngClass]="'uk-flex-' + flexPosition">
[attr.uk-switcher]="type === 'static'?('connect:' + connect):null"
[ngClass]="'uk-flex-' + flexPosition + ' ' + tabsClass">
<ng-container *ngIf="type === 'static'">
<li *ngFor="let tab of leftTabs" class="uk-text-capitalize">
<a>{{tab.title}}</a>
@ -33,32 +33,41 @@ declare var UIkit;
<li *ngFor="let tab of rightTabs; let i=index;"
[ngClass]="i === 0?'uk-flex-1 uk-flex uk-flex-right':''"
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>
</ng-container>
<ng-container *ngIf="type === 'scrollable'">
<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 *ngFor="let tab of rightTabs; let i=index;" class="uk-text-capitalize"
[ngClass]="i === 0?'uk-flex-1 uk-flex uk-flex-right':''"
[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>
</ng-container>
</ul>
</div>
<a *ngIf="position === 'horizontal'" class="uk-position-center-left uk-blur-background" uk-slider-item="previous"><span
uk-icon="chevron-left"></span></a>
<a *ngIf="position === 'horizontal'" class="uk-position-center-right uk-blur-background" uk-slider-item="next"><span
uk-icon="chevron-right"></span></a>
<slider-arrow *ngIf="position === 'horizontal' && arrows" type="previous"></slider-arrow>
<slider-arrow *ngIf="position === 'horizontal' && arrows" type="next"></slider-arrow>
</div>
`,
})
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
* */
@Input()
@ -84,10 +93,19 @@ export class SliderTabsComponent implements AfterViewInit, OnDestroy {
@Input()
public flexPosition: 'center' | 'left' | 'right' = 'left';
/**
* Tabs custom class
* Set a class above tabs
* */
@Input()
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>;
@ViewChild('sliderElement') sliderElement: ElementRef;
@ViewChild('tabsElement') tabsElement: ElementRef;
@ -112,9 +130,12 @@ export class SliderTabsComponent implements AfterViewInit, OnDestroy {
let slider = UIkit.slider(this.sliderElement.nativeElement, {finite: true});
slider.clsActive = 'uk-slider-active';
slider.updateActiveClasses();
slider.slides.forEach(item => {
item.classList.remove('uk-active');
slider.slides.forEach((item, index) => {
if(!this.tabs.get(index).active) {
item.classList.remove('uk-active');
}
});
console.log(slider);
if (this.type === 'static') {
let tabs = UIkit.tab(this.tabsElement.nativeElement, {connect: this.connect});
tabs.show(this.activeIndex);

3
sharedComponents/tabs/slider-tabs.module.ts
View File

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