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

dashboard/sharedComponents/page-content/page-content.component.ts

@@ -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);

dashboard/sharedComponents/sidebar/layout.service.ts

@@ -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);
   }

dashboard/users/role-users/role-users.component.html

@@ -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">
+								<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>
 										<span class="uk-margin-small-left uk-text-bold uk-text-uppercase">{{showCurrent ? 'Delete' : 'Cancel invitation'}}</span>
 									</button>

dashboard/users/role-users/role-users.component.ts

@@ -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);
   }

login/userMini.component.ts

@@ -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() {

monitor/methodology/terminology.component.ts

@@ -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"

role-verification/role-verification.component.ts

@@ -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(() => {

services/user-management.service.ts

@@ -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;
   }
 }

services/user-registry.service.ts

@@ -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());
   }
 }

sharedComponents/navigationBar.component.html

@@ -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>

sharedComponents/slider-utils/slider-arrow.component.ts

@@ -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'
+  }
+}

sharedComponents/slider-utils/slider-utils.module.ts

@@ -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 {}

sharedComponents/tabs/slider-tab.component.ts

@@ -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 = '';
 }

sharedComponents/tabs/slider-tabs.component.ts

@@ -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'">
+      <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-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'">
             <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
+      <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>
   `,
 })
 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 => {
+          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);

sharedComponents/tabs/slider-tabs.module.ts

@@ -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]
 })