feat(router tabset): ability to configure routerLinkActiveOptions per…

… tab (#2907) BREAKING CHANGE: `NbRouteTabsetComponent.tabs` property type changed from `any` to `NbRouteTab`. `NbRouteTabsetComponent.changeTab` property type changed from `EventEmitter<any>` to `EventEmitter<NbRouteTab>`. `tab` parameter type of the `NbRouteTabsetComponent.selectTab` method changed from `any` to `NbRouteTab`.
akveo · Dec 1, 2021 · 276d610 · 276d610
1 parent 718dd0a
commit 276d610
Show file tree

Hide file tree

Showing 4 changed files with 41 additions and 21 deletions.
diff --git a/src/framework/theme/components/route-tabset/merge-configs.pipe.ts b/src/framework/theme/components/route-tabset/merge-configs.pipe.ts
@@ -0,0 +1,10 @@
+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({
+  name: 'nbMergeConfigs',
+})
+export class NbMergeConfigsPipe implements PipeTransform {
+  transform<Config>(...configs: Config[]): Config {
+    return Object.assign({}, ...configs);
+  }
+}
diff --git a/src/framework/theme/components/route-tabset/route-tabset.component.ts b/src/framework/theme/components/route-tabset/route-tabset.component.ts
@@ -5,9 +5,26 @@
  */
 
 import { Component, Input, Output, EventEmitter, HostBinding } from '@angular/core';
-import { RouterLinkActive } from '@angular/router';
+import { RouterLink, RouterLinkActive } from '@angular/router';
 
 import { convertToBoolProperty, NbBooleanInput } from '../helpers';
+import { NbIconConfig } from '../icon/icon.component';
+
+export interface NbRouteTab {
+  route?: RouterLink['routerLink'] | undefined;
+  title?: string | undefined;
+  icon?: string | NbIconConfig | undefined;
+  disabled?: boolean | undefined;
+  responsive?: boolean | undefined;
+  queryParams?: RouterLink['queryParams'] | undefined;
+  queryParamsHandling?: RouterLink['queryParamsHandling'] | undefined;
+  fragment?: RouterLink['fragment'] | undefined;
+  preserveFragment?: RouterLink['preserveFragment'] | undefined;
+  skipLocationChange?: RouterLink['skipLocationChange'] | undefined;
+  replaceUrl?: RouterLink['replaceUrl'] | undefined;
+  state?: RouterLink['state'] | undefined;
+  activeLinkOptions?: RouterLinkActive['routerLinkActiveOptions'] | undefined;
+}
 
 /**
  * Route tabset components.
@@ -101,7 +118,7 @@ import { convertToBoolProperty, NbBooleanInput } from '../helpers';
             (click)="$event.preventDefault(); selectTab(tab)"
             [routerLink]="tab.route"
             routerLinkActive="active"
-            [routerLinkActiveOptions]="activeLinkOptions"
+            [routerLinkActiveOptions]="activeLinkOptions | nbMergeConfigs: tab.activeLinkOptions"
             [class.responsive]="tab.responsive"
             [queryParams]="tab.queryParams"
             [queryParamsHandling]="tab.queryParamsHandling"
@@ -129,9 +146,8 @@ export class NbRouteTabsetComponent {
 
   /**
    * Tabs configuration
-   * @param Object{route: string, title: string, tag?: string, responsive?: boolean, disabled?: boolean}
    */
-  @Input() tabs: any[];
+  @Input() tabs: NbRouteTab[];
 
   /**
    * Options passed to `routerLinkActiveOptions` directive which set on tab links.
@@ -151,11 +167,11 @@ export class NbRouteTabsetComponent {
 
   /**
    * Emits when tab is selected
-   * @type {EventEmitter<any>}
+   * @type {EventEmitter<NbRouteTab>}
    */
-  @Output() changeTab = new EventEmitter<any>();
+  @Output() changeTab = new EventEmitter<NbRouteTab>();
 
-  selectTab(tab: any) {
+  selectTab(tab: NbRouteTab) {
     this.changeTab.emit(tab);
   }
 }
diff --git a/src/framework/theme/components/route-tabset/route-tabset.module.ts b/src/framework/theme/components/route-tabset/route-tabset.module.ts
@@ -9,18 +9,12 @@ import { NgModule } from '@angular/core';
 import { NbSharedModule } from '../shared/shared.module';
 
 import { NbRouteTabsetComponent } from './route-tabset.component';
+import { NbMergeConfigsPipe } from './merge-configs.pipe';
 import { NbIconModule } from '../icon/icon.module';
 
 @NgModule({
-  imports: [
-    NbSharedModule,
-    NbIconModule,
-  ],
-  declarations: [
-    NbRouteTabsetComponent,
-  ],
-  exports: [
-    NbRouteTabsetComponent,
-  ],
+  imports: [NbSharedModule, NbIconModule],
+  declarations: [NbRouteTabsetComponent, NbMergeConfigsPipe],
+  exports: [NbRouteTabsetComponent],
 })
-export class NbRouteTabsetModule { }
+export class NbRouteTabsetModule {}
diff --git a/src/playground/with-layout/tabset/route-tabset-showcase.component.ts b/src/playground/with-layout/tabset/route-tabset-showcase.component.ts
@@ -5,9 +5,9 @@
  */
 
 import { Component } from '@angular/core';
+import { NbRouteTab } from '@nebular/theme';
 
 @Component({
-  selector: 'nb-route-tabset-showcase',
   template: `
     <nb-card>
       <nb-card-body>
@@ -17,7 +17,7 @@ import { Component } from '@angular/core';
   `,
 })
 export class RouteTabsetShowcaseComponent {
-  tabs: any[] = [
+  tabs: NbRouteTab[] = [
     {
       title: 'Users',
       icon: 'person',
@@ -27,7 +27,7 @@ export class RouteTabsetShowcaseComponent {
       title: 'Orders',
       icon: 'paper-plane-outline',
       responsive: true,
-      route: [ './tab2' ],
+      route: ['./tab2'],
     },
     {
       title: 'Query params',