From 6ddc5c86a9cde682cc7dda2290b8861fcbfb5aff Mon Sep 17 00:00:00 2001
From: kolyaevtikhovich <evtkhvch@gmail.com>
Date: Fri, 13 Aug 2021 16:03:37 +0300
Subject: [PATCH 01/25] fix(tabset): lazy load
---
.../theme/components/tabset/tab-content.ts | 14 +++++++++
.../components/tabset/tabset.component.ts | 31 ++++++++++++++-----
.../theme/components/tabset/tabset.module.ts | 5 +++
3 files changed, 42 insertions(+), 8 deletions(-)
create mode 100644 src/framework/theme/components/tabset/tab-content.ts
diff --git a/src/framework/theme/components/tabset/tab-content.ts b/src/framework/theme/components/tabset/tab-content.ts
new file mode 100644
index 0000000000..f35a314cd2
--- /dev/null
+++ b/src/framework/theme/components/tabset/tab-content.ts
@@ -0,0 +1,14 @@
+import { Directive, InjectionToken, TemplateRef } from '@angular/core';
+
+export const NB_TAB_CONTENT = new InjectionToken<NbTabContentDirective>('NbTabContent');
+
+/** Decorates the `ng-template` tags and reads out the template from it. */
+@Directive({
+ selector: '[nbTabContent]',
+ providers: [{ provide: NB_TAB_CONTENT, useExisting: NbTabContentDirective }],
+})
+export class NbTabContentDirective {
+ constructor(
+ /** Content for the tab. */ public template: TemplateRef<any>) {
+ }
+}
diff --git a/src/framework/theme/components/tabset/tabset.component.ts b/src/framework/theme/components/tabset/tabset.component.ts
index cd2e2aedfd..79e46a9404 100644
--- a/src/framework/theme/components/tabset/tabset.component.ts
+++ b/src/framework/theme/components/tabset/tabset.component.ts
@@ -14,14 +14,16 @@ import {
QueryList,
AfterContentInit,
HostBinding,
- ChangeDetectorRef,
+ ChangeDetectorRef, ViewChild, ContentChild, TemplateRef, ViewContainerRef, AfterViewInit,
} from '@angular/core';
import { ActivatedRoute } from '@angular/router';
+import { CdkPortalOutlet, TemplatePortal } from '@angular/cdk/portal';
import { convertToBoolProperty, NbBooleanInput } from '../helpers';
import { NbComponentOrCustomStatus } from '../component-status';
import { NbBadgePosition } from '../badge/badge.component';
import { NbIconConfig } from '../icon/icon.component';
+import { NB_TAB_CONTENT } from './tab-content';
/**
* Specific tab container.
@@ -37,13 +39,15 @@ import { NbIconConfig } from '../icon/icon.component';
@Component({
selector: 'nb-tab',
template: `
- <ng-container *ngIf="init">
+ <ng-template portalHost #container>
<ng-content></ng-content>
- </ng-container>
+ </ng-template>
`,
})
-export class NbTabComponent {
-
+export class NbTabComponent implements AfterViewInit {
+ @ViewChild('container', { read: TemplateRef, static: true }) _implicitContent: TemplateRef<any>;
+ @ContentChild(NB_TAB_CONTENT, { read: TemplateRef, static: true }) _explicitContent: TemplateRef<any>;
+ @ViewChild(CdkPortalOutlet, { static: true }) _portalHost: CdkPortalOutlet;
/**
* Tab title
* @type {string}
@@ -122,7 +126,9 @@ export class NbTabComponent {
set active(val: boolean) {
this.activeValue = convertToBoolProperty(val);
if (this.activeValue) {
- this.init = true;
+ this._contentPortal.attach(this._portalHost);
+ } else if (this._contentPortal.isAttached) {
+ this._contentPortal.detach();
}
}
static ngAcceptInputType_active: NbBooleanInput;
@@ -131,10 +137,10 @@ export class NbTabComponent {
* Lazy load content before tab selection
* TODO: rename, as lazy is by default, and this is more `instant load`
* @param {boolean} val
+ * @deprecated To be turned into a <ng-template nbTabContent>
*/
@Input()
set lazyLoad(val: boolean) {
- this.init = convertToBoolProperty(val);
}
static ngAcceptInputType_lazyLoad: NbBooleanInput;
@@ -160,7 +166,16 @@ export class NbTabComponent {
*/
@Input() badgePosition: NbBadgePosition;
- init: boolean = false;
+ /** Portal that will be the hosted content of the tab */
+ private _contentPortal: TemplatePortal | null = null;
+
+ constructor(private _viewContainerRef: ViewContainerRef) {
+ }
+
+ ngAfterViewInit(): void {
+ this._contentPortal = new TemplatePortal(
+ this._explicitContent || this._implicitContent, this._viewContainerRef);
+ }
}
// TODO: Combine tabset with route-tabset, so that we can:
diff --git a/src/framework/theme/components/tabset/tabset.module.ts b/src/framework/theme/components/tabset/tabset.module.ts
index b79b02382d..f352a3f117 100644
--- a/src/framework/theme/components/tabset/tabset.module.ts
+++ b/src/framework/theme/components/tabset/tabset.module.ts
@@ -5,12 +5,14 @@
*/
import { NgModule } from '@angular/core';
+import { PortalModule } from '@angular/cdk/portal';
import { NbSharedModule } from '../shared/shared.module';
import { NbTabsetComponent, NbTabComponent } from './tabset.component';
import { NbBadgeModule } from '../badge/badge.module';
import { NbIconModule } from '../icon/icon.module';
+import { NbTabContentDirective } from './tab-content';
const NB_TABSET_COMPONENTS = [
NbTabsetComponent,
@@ -22,12 +24,15 @@ const NB_TABSET_COMPONENTS = [
NbSharedModule,
NbBadgeModule,
NbIconModule,
+ PortalModule,
],
declarations: [
...NB_TABSET_COMPONENTS,
+ NbTabContentDirective,
],
exports: [
...NB_TABSET_COMPONENTS,
+ NbTabContentDirective,
],
})
export class NbTabsetModule { }
From 5a99e0a196e93a870f6d8fab9fafd76ea417a666 Mon Sep 17 00:00:00 2001
From: kolyaevtikhovich <evtkhvch@gmail.com>
Date: Mon, 16 Aug 2021 01:17:02 +0300
Subject: [PATCH 02/25] ref(tabset): extract view logic
---
.../theme/components/tabset/tabset.component.ts | 15 ++++++++++-----
1 file changed, 10 insertions(+), 5 deletions(-)
diff --git a/src/framework/theme/components/tabset/tabset.component.ts b/src/framework/theme/components/tabset/tabset.component.ts
index 79e46a9404..305e7bd37f 100644
--- a/src/framework/theme/components/tabset/tabset.component.ts
+++ b/src/framework/theme/components/tabset/tabset.component.ts
@@ -125,11 +125,7 @@ export class NbTabComponent implements AfterViewInit {
}
set active(val: boolean) {
this.activeValue = convertToBoolProperty(val);
- if (this.activeValue) {
- this._contentPortal.attach(this._portalHost);
- } else if (this._contentPortal.isAttached) {
- this._contentPortal.detach();
- }
+ this.initView();
}
static ngAcceptInputType_active: NbBooleanInput;
@@ -172,6 +168,15 @@ export class NbTabComponent implements AfterViewInit {
constructor(private _viewContainerRef: ViewContainerRef) {
}
+ private initView(): void {
+ if (!this._contentPortal.isAttached && this.activeValue) {
+ this._contentPortal.attach(this._portalHost);
+ }
+ if (this._contentPortal.isAttached && !this.activeValue) {
+ this._contentPortal.detach();
+ }
+ }
+
ngAfterViewInit(): void {
this._contentPortal = new TemplatePortal(
this._explicitContent || this._implicitContent, this._viewContainerRef);
From 3eee78f82171fdba1ab469667c124810179fb39b Mon Sep 17 00:00:00 2001
From: kolyaevtikhovich <evtkhvch@gmail.com>
Date: Mon, 16 Aug 2021 09:59:14 +0300
Subject: [PATCH 03/25] ref(tabset): turn activeValue into active
---
src/framework/theme/components/tabset/tabset.component.ts | 8 ++++----
1 file changed, 4 insertions(+), 4 deletions(-)
diff --git a/src/framework/theme/components/tabset/tabset.component.ts b/src/framework/theme/components/tabset/tabset.component.ts
index 305e7bd37f..5734e081d8 100644
--- a/src/framework/theme/components/tabset/tabset.component.ts
+++ b/src/framework/theme/components/tabset/tabset.component.ts
@@ -125,7 +125,7 @@ export class NbTabComponent implements AfterViewInit {
}
set active(val: boolean) {
this.activeValue = convertToBoolProperty(val);
- this.initView();
+ this._initView();
}
static ngAcceptInputType_active: NbBooleanInput;
@@ -168,11 +168,11 @@ export class NbTabComponent implements AfterViewInit {
constructor(private _viewContainerRef: ViewContainerRef) {
}
- private initView(): void {
- if (!this._contentPortal.isAttached && this.activeValue) {
+ private _initView(): void {
+ if (!this._contentPortal.isAttached && this.active) {
this._contentPortal.attach(this._portalHost);
}
- if (this._contentPortal.isAttached && !this.activeValue) {
+ if (this._contentPortal.isAttached && !this.active) {
this._contentPortal.detach();
}
}
From 2a32b465c5c93de569af0afac5b5a73da50c99b2 Mon Sep 17 00:00:00 2001
From: kolyaevtikhovich <evtkhvch@gmail.com>
Date: Mon, 16 Aug 2021 10:36:48 +0300
Subject: [PATCH 04/25] ref(tabset): made init property deprecated
---
.../theme/components/tabset/tabset.component.ts | 9 +++++++++
1 file changed, 9 insertions(+)
diff --git a/src/framework/theme/components/tabset/tabset.component.ts b/src/framework/theme/components/tabset/tabset.component.ts
index 5734e081d8..c75c7b4b4d 100644
--- a/src/framework/theme/components/tabset/tabset.component.ts
+++ b/src/framework/theme/components/tabset/tabset.component.ts
@@ -125,6 +125,9 @@ export class NbTabComponent implements AfterViewInit {
}
set active(val: boolean) {
this.activeValue = convertToBoolProperty(val);
+ if (this.activeValue) {
+ this.init = true;
+ }
this._initView();
}
static ngAcceptInputType_active: NbBooleanInput;
@@ -137,6 +140,7 @@ export class NbTabComponent implements AfterViewInit {
*/
@Input()
set lazyLoad(val: boolean) {
+ this.init = convertToBoolProperty(val);
}
static ngAcceptInputType_lazyLoad: NbBooleanInput;
@@ -162,6 +166,11 @@ export class NbTabComponent implements AfterViewInit {
*/
@Input() badgePosition: NbBadgePosition;
+ /**
+ * @deprecated To be turned into a active property
+ * @type string
+ */
+ init: boolean = false;
/** Portal that will be the hosted content of the tab */
private _contentPortal: TemplatePortal | null = null;
From 9aac9071fcf286075706833c3cb70053403022c6 Mon Sep 17 00:00:00 2001
From: kolyaevtikhovich <evtkhvch@gmail.com>
Date: Mon, 16 Aug 2021 10:39:22 +0300
Subject: [PATCH 05/25] chore(NbTabComponent): init property description
---
src/framework/theme/components/tabset/tabset.component.ts | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/src/framework/theme/components/tabset/tabset.component.ts b/src/framework/theme/components/tabset/tabset.component.ts
index c75c7b4b4d..92ae4eb40b 100644
--- a/src/framework/theme/components/tabset/tabset.component.ts
+++ b/src/framework/theme/components/tabset/tabset.component.ts
@@ -168,7 +168,7 @@ export class NbTabComponent implements AfterViewInit {
/**
* @deprecated To be turned into a active property
- * @type string
+ * @type boolean
*/
init: boolean = false;
/** Portal that will be the hosted content of the tab */
From 6579461cc4adb6532f38f6703a834b44c4b0f4bf Mon Sep 17 00:00:00 2001
From: kolyaevtikhovich <evtkhvch@gmail.com>
Date: Mon, 16 Aug 2021 10:41:08 +0300
Subject: [PATCH 06/25] style(tabset): add new lines
---
src/framework/theme/components/tabset/tabset.component.ts | 7 ++++++-
1 file changed, 6 insertions(+), 1 deletion(-)
diff --git a/src/framework/theme/components/tabset/tabset.component.ts b/src/framework/theme/components/tabset/tabset.component.ts
index 92ae4eb40b..af3410120d 100644
--- a/src/framework/theme/components/tabset/tabset.component.ts
+++ b/src/framework/theme/components/tabset/tabset.component.ts
@@ -14,7 +14,12 @@ import {
QueryList,
AfterContentInit,
HostBinding,
- ChangeDetectorRef, ViewChild, ContentChild, TemplateRef, ViewContainerRef, AfterViewInit,
+ ChangeDetectorRef,
+ ViewChild,
+ ContentChild,
+ TemplateRef,
+ ViewContainerRef,
+ AfterViewInit,
} from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { CdkPortalOutlet, TemplatePortal } from '@angular/cdk/portal';
From 64277e122e9b7aa13b3c30ce9b402a421f2ac50f Mon Sep 17 00:00:00 2001
From: evtkhvch <evtkhvch@gmail.com>
Date: Mon, 20 Sep 2021 14:41:24 +0300
Subject: [PATCH 07/25] fix(tabset): remove portal implementation
---
.../components/tabset/tabset.component.ts | 35 ++++++++-----------
1 file changed, 15 insertions(+), 20 deletions(-)
diff --git a/src/framework/theme/components/tabset/tabset.component.ts b/src/framework/theme/components/tabset/tabset.component.ts
index af3410120d..0cb26326f4 100644
--- a/src/framework/theme/components/tabset/tabset.component.ts
+++ b/src/framework/theme/components/tabset/tabset.component.ts
@@ -19,10 +19,9 @@ import {
ContentChild,
TemplateRef,
ViewContainerRef,
- AfterViewInit,
+ EmbeddedViewRef,
} from '@angular/core';
import { ActivatedRoute } from '@angular/router';
-import { CdkPortalOutlet, TemplatePortal } from '@angular/cdk/portal';
import { convertToBoolProperty, NbBooleanInput } from '../helpers';
import { NbComponentOrCustomStatus } from '../component-status';
@@ -44,15 +43,20 @@ import { NB_TAB_CONTENT } from './tab-content';
@Component({
selector: 'nb-tab',
template: `
- <ng-template portalHost #container>
+ <ng-container #outlet></ng-container>
+
+ <ng-template #container>
<ng-content></ng-content>
</ng-template>
`,
})
-export class NbTabComponent implements AfterViewInit {
- @ViewChild('container', { read: TemplateRef, static: true }) _implicitContent: TemplateRef<any>;
+export class NbTabComponent {
+ @ViewChild('outlet', { read: ViewContainerRef, static: true }) container: ViewContainerRef;
@ContentChild(NB_TAB_CONTENT, { read: TemplateRef, static: true }) _explicitContent: TemplateRef<any>;
- @ViewChild(CdkPortalOutlet, { static: true }) _portalHost: CdkPortalOutlet;
+ @ViewChild('container', { read: TemplateRef, static: true }) _implicitContent: TemplateRef<any>;
+
+ private ref: EmbeddedViewRef<any> | null = null;
+
/**
* Tab title
* @type {string}
@@ -176,25 +180,16 @@ export class NbTabComponent implements AfterViewInit {
* @type boolean
*/
init: boolean = false;
- /** Portal that will be the hosted content of the tab */
- private _contentPortal: TemplatePortal | null = null;
-
- constructor(private _viewContainerRef: ViewContainerRef) {
- }
private _initView(): void {
- if (!this._contentPortal.isAttached && this.active) {
- this._contentPortal.attach(this._portalHost);
+ if (!this.ref && this.active) {
+ this.ref = this.container.createEmbeddedView(this._explicitContent || this._implicitContent);
}
- if (this._contentPortal.isAttached && !this.active) {
- this._contentPortal.detach();
+ if (this.ref && !this.active) {
+ this.ref.destroy();
+ this.ref = null;
}
}
-
- ngAfterViewInit(): void {
- this._contentPortal = new TemplatePortal(
- this._explicitContent || this._implicitContent, this._viewContainerRef);
- }
}
// TODO: Combine tabset with route-tabset, so that we can:
From aa4b80437dcc732b0266119483a893c8fb46e3a9 Mon Sep 17 00:00:00 2001
From: evtkhvch <evtkhvch@gmail.com>
Date: Mon, 20 Sep 2021 14:48:33 +0300
Subject: [PATCH 08/25] fix(tabset): remove portal import
---
src/framework/theme/components/tabset/tabset.module.ts | 2 --
1 file changed, 2 deletions(-)
diff --git a/src/framework/theme/components/tabset/tabset.module.ts b/src/framework/theme/components/tabset/tabset.module.ts
index f352a3f117..3a6737435f 100644
--- a/src/framework/theme/components/tabset/tabset.module.ts
+++ b/src/framework/theme/components/tabset/tabset.module.ts
@@ -5,7 +5,6 @@
*/
import { NgModule } from '@angular/core';
-import { PortalModule } from '@angular/cdk/portal';
import { NbSharedModule } from '../shared/shared.module';
@@ -24,7 +23,6 @@ const NB_TABSET_COMPONENTS = [
NbSharedModule,
NbBadgeModule,
NbIconModule,
- PortalModule,
],
declarations: [
...NB_TABSET_COMPONENTS,
From 183494f477be66158a185a2b7052d439c44d89fa Mon Sep 17 00:00:00 2001
From: evtkhvch <evtkhvch@gmail.com>
Date: Mon, 20 Sep 2021 14:52:28 +0300
Subject: [PATCH 09/25] fix(tabset): module imports
---
src/framework/theme/components/tabset/tabset.module.ts | 8 ++++++--
1 file changed, 6 insertions(+), 2 deletions(-)
diff --git a/src/framework/theme/components/tabset/tabset.module.ts b/src/framework/theme/components/tabset/tabset.module.ts
index 3a6737435f..fdb11ada49 100644
--- a/src/framework/theme/components/tabset/tabset.module.ts
+++ b/src/framework/theme/components/tabset/tabset.module.ts
@@ -18,6 +18,10 @@ const NB_TABSET_COMPONENTS = [
NbTabComponent,
];
+const NB_TABSET_DIRECTIVES = [
+ NbTabContentDirective,
+];
+
@NgModule({
imports: [
NbSharedModule,
@@ -26,11 +30,11 @@ const NB_TABSET_COMPONENTS = [
],
declarations: [
...NB_TABSET_COMPONENTS,
- NbTabContentDirective,
+ ...NB_TABSET_DIRECTIVES,
],
exports: [
...NB_TABSET_COMPONENTS,
- NbTabContentDirective,
+ ...NB_TABSET_DIRECTIVES,
],
})
export class NbTabsetModule { }
From b1b779d4fec4eae78575f4b363363c96c557cfbe Mon Sep 17 00:00:00 2001
From: evtkhvch <evtkhvch@gmail.com>
Date: Mon, 20 Sep 2021 16:41:47 +0300
Subject: [PATCH 10/25] style(tabset): rename variable
---
.../theme/components/tabset/tabset.component.ts | 14 +++++++-------
1 file changed, 7 insertions(+), 7 deletions(-)
diff --git a/src/framework/theme/components/tabset/tabset.component.ts b/src/framework/theme/components/tabset/tabset.component.ts
index 0cb26326f4..c26217340e 100644
--- a/src/framework/theme/components/tabset/tabset.component.ts
+++ b/src/framework/theme/components/tabset/tabset.component.ts
@@ -55,8 +55,6 @@ export class NbTabComponent {
@ContentChild(NB_TAB_CONTENT, { read: TemplateRef, static: true }) _explicitContent: TemplateRef<any>;
@ViewChild('container', { read: TemplateRef, static: true }) _implicitContent: TemplateRef<any>;
- private ref: EmbeddedViewRef<any> | null = null;
-
/**
* Tab title
* @type {string}
@@ -181,13 +179,15 @@ export class NbTabComponent {
*/
init: boolean = false;
+ protected embeddedViewRef: EmbeddedViewRef<any> | null = null;
+
private _initView(): void {
- if (!this.ref && this.active) {
- this.ref = this.container.createEmbeddedView(this._explicitContent || this._implicitContent);
+ if (!this.embeddedViewRef && this.active) {
+ this.embeddedViewRef = this.container.createEmbeddedView(this._explicitContent || this._implicitContent);
}
- if (this.ref && !this.active) {
- this.ref.destroy();
- this.ref = null;
+ if (this.embeddedViewRef && !this.active) {
+ this.embeddedViewRef.destroy();
+ this.embeddedViewRef = null;
}
}
}
From 3e736ceea62b8be7781ca1b18c5a474d0a381506 Mon Sep 17 00:00:00 2001
From: evtkhvch <evtkhvch@gmail.com>
Date: Tue, 21 Sep 2021 10:45:05 +0300
Subject: [PATCH 11/25] fix(tabset): add template outlet
---
.../components/tabset/tabset.component.ts | 29 +++++++++++--------
1 file changed, 17 insertions(+), 12 deletions(-)
diff --git a/src/framework/theme/components/tabset/tabset.component.ts b/src/framework/theme/components/tabset/tabset.component.ts
index c26217340e..9e0b0f78f3 100644
--- a/src/framework/theme/components/tabset/tabset.component.ts
+++ b/src/framework/theme/components/tabset/tabset.component.ts
@@ -18,8 +18,6 @@ import {
ViewChild,
ContentChild,
TemplateRef,
- ViewContainerRef,
- EmbeddedViewRef,
} from '@angular/core';
import { ActivatedRoute } from '@angular/router';
@@ -43,7 +41,7 @@ import { NB_TAB_CONTENT } from './tab-content';
@Component({
selector: 'nb-tab',
template: `
- <ng-container #outlet></ng-container>
+ <ng-container *ngTemplateOutlet="currentTemplate"></ng-container>
<ng-template #container>
<ng-content></ng-content>
@@ -51,7 +49,6 @@ import { NB_TAB_CONTENT } from './tab-content';
`,
})
export class NbTabComponent {
- @ViewChild('outlet', { read: ViewContainerRef, static: true }) container: ViewContainerRef;
@ContentChild(NB_TAB_CONTENT, { read: TemplateRef, static: true }) _explicitContent: TemplateRef<any>;
@ViewChild('container', { read: TemplateRef, static: true }) _implicitContent: TemplateRef<any>;
@@ -179,15 +176,23 @@ export class NbTabComponent {
*/
init: boolean = false;
- protected embeddedViewRef: EmbeddedViewRef<any> | null = null;
+ currentTemplate: TemplateRef<any> | null = null;
- private _initView(): void {
- if (!this.embeddedViewRef && this.active) {
- this.embeddedViewRef = this.container.createEmbeddedView(this._explicitContent || this._implicitContent);
- }
- if (this.embeddedViewRef && !this.active) {
- this.embeddedViewRef.destroy();
- this.embeddedViewRef = null;
+ // private _initView(): void {
+ // if (!this.embeddedViewRef && this.active) {
+ // this.embeddedViewRef = this.container.createEmbeddedView(this._explicitContent || this._implicitContent);
+ // }
+ // if (this.embeddedViewRef && !this.active) {
+ // this.embeddedViewRef.destroy();
+ // this.embeddedViewRef = null;
+ // }
+ // }
+
+ protected _initView(): void {
+ if (this.active) {
+ this.currentTemplate = this._explicitContent || this._implicitContent;
+ } else {
+ this.currentTemplate = null;
}
}
}
From eb1bc779673232183060bc068026f5454f7ec0c9 Mon Sep 17 00:00:00 2001
From: evtkhvch <evtkhvch@gmail.com>
Date: Tue, 21 Sep 2021 10:47:16 +0300
Subject: [PATCH 12/25] style(tabset): remove comments
---
.../theme/components/tabset/tabset.component.ts | 10 ----------
1 file changed, 10 deletions(-)
diff --git a/src/framework/theme/components/tabset/tabset.component.ts b/src/framework/theme/components/tabset/tabset.component.ts
index 9e0b0f78f3..174884191c 100644
--- a/src/framework/theme/components/tabset/tabset.component.ts
+++ b/src/framework/theme/components/tabset/tabset.component.ts
@@ -178,16 +178,6 @@ export class NbTabComponent {
currentTemplate: TemplateRef<any> | null = null;
- // private _initView(): void {
- // if (!this.embeddedViewRef && this.active) {
- // this.embeddedViewRef = this.container.createEmbeddedView(this._explicitContent || this._implicitContent);
- // }
- // if (this.embeddedViewRef && !this.active) {
- // this.embeddedViewRef.destroy();
- // this.embeddedViewRef = null;
- // }
- // }
-
protected _initView(): void {
if (this.active) {
this.currentTemplate = this._explicitContent || this._implicitContent;
From 7621f86dd23a5d420f082dce97f563ad93cbe39f Mon Sep 17 00:00:00 2001
From: evtkhvch <evtkhvch@gmail.com>
Date: Tue, 21 Sep 2021 10:59:13 +0300
Subject: [PATCH 13/25] fix(tabset): add wrap container
---
.../theme/components/tabset/tabset.component.ts | 17 +++++++----------
1 file changed, 7 insertions(+), 10 deletions(-)
diff --git a/src/framework/theme/components/tabset/tabset.component.ts b/src/framework/theme/components/tabset/tabset.component.ts
index 174884191c..d70900c426 100644
--- a/src/framework/theme/components/tabset/tabset.component.ts
+++ b/src/framework/theme/components/tabset/tabset.component.ts
@@ -17,7 +17,7 @@ import {
ChangeDetectorRef,
ViewChild,
ContentChild,
- TemplateRef,
+ TemplateRef, AfterViewInit,
} from '@angular/core';
import { ActivatedRoute } from '@angular/router';
@@ -41,14 +41,16 @@ import { NB_TAB_CONTENT } from './tab-content';
@Component({
selector: 'nb-tab',
template: `
- <ng-container *ngTemplateOutlet="currentTemplate"></ng-container>
+ <ng-container *ngIf="active">
+ <ng-container *ngTemplateOutlet="currentTemplate"></ng-container>
+ </ng-container>
<ng-template #container>
<ng-content></ng-content>
</ng-template>
`,
})
-export class NbTabComponent {
+export class NbTabComponent implements AfterViewInit {
@ContentChild(NB_TAB_CONTENT, { read: TemplateRef, static: true }) _explicitContent: TemplateRef<any>;
@ViewChild('container', { read: TemplateRef, static: true }) _implicitContent: TemplateRef<any>;
@@ -132,7 +134,6 @@ export class NbTabComponent {
if (this.activeValue) {
this.init = true;
}
- this._initView();
}
static ngAcceptInputType_active: NbBooleanInput;
@@ -178,12 +179,8 @@ export class NbTabComponent {
currentTemplate: TemplateRef<any> | null = null;
- protected _initView(): void {
- if (this.active) {
- this.currentTemplate = this._explicitContent || this._implicitContent;
- } else {
- this.currentTemplate = null;
- }
+ ngAfterViewInit() {
+ this.currentTemplate = this._explicitContent || this._implicitContent;
}
}
From 9a0e959111f89a7787baef765051d289c8441be7 Mon Sep 17 00:00:00 2001
From: evtkhvch <evtkhvch@gmail.com>
Date: Tue, 21 Sep 2021 11:02:26 +0300
Subject: [PATCH 14/25] style(tabset): add new line
---
src/framework/theme/components/tabset/tabset.component.ts | 3 ++-
1 file changed, 2 insertions(+), 1 deletion(-)
diff --git a/src/framework/theme/components/tabset/tabset.component.ts b/src/framework/theme/components/tabset/tabset.component.ts
index d70900c426..276ef2fde3 100644
--- a/src/framework/theme/components/tabset/tabset.component.ts
+++ b/src/framework/theme/components/tabset/tabset.component.ts
@@ -17,7 +17,8 @@ import {
ChangeDetectorRef,
ViewChild,
ContentChild,
- TemplateRef, AfterViewInit,
+ TemplateRef,
+ AfterViewInit,
} from '@angular/core';
import { ActivatedRoute } from '@angular/router';
From 87bf2cb68c89df1a19c801071473252a40f98054 Mon Sep 17 00:00:00 2001
From: evtkhvch <evtkhvch@gmail.com>
Date: Tue, 21 Sep 2021 14:17:23 +0300
Subject: [PATCH 15/25] fix(tabset): change lazy directive
---
.../{tab-content.ts => lazy-content.ts} | 8 +++----
.../components/tabset/tabset.component.ts | 23 ++++++++-----------
.../theme/components/tabset/tabset.module.ts | 4 ++--
3 files changed, 15 insertions(+), 20 deletions(-)
rename src/framework/theme/components/tabset/{tab-content.ts => lazy-content.ts} (51%)
diff --git a/src/framework/theme/components/tabset/tab-content.ts b/src/framework/theme/components/tabset/lazy-content.ts
similarity index 51%
rename from src/framework/theme/components/tabset/tab-content.ts
rename to src/framework/theme/components/tabset/lazy-content.ts
index f35a314cd2..009adae7fc 100644
--- a/src/framework/theme/components/tabset/tab-content.ts
+++ b/src/framework/theme/components/tabset/lazy-content.ts
@@ -1,13 +1,13 @@
import { Directive, InjectionToken, TemplateRef } from '@angular/core';
-export const NB_TAB_CONTENT = new InjectionToken<NbTabContentDirective>('NbTabContent');
+export const NB_LAZY_CONTENT = new InjectionToken<NbLazyContentDirective>('NbLazyContent');
/** Decorates the `ng-template` tags and reads out the template from it. */
@Directive({
- selector: '[nbTabContent]',
- providers: [{ provide: NB_TAB_CONTENT, useExisting: NbTabContentDirective }],
+ selector: '[nbLazyContent]',
+ providers: [{ provide: NB_LAZY_CONTENT, useExisting: NbLazyContentDirective }],
})
-export class NbTabContentDirective {
+export class NbLazyContentDirective {
constructor(
/** Content for the tab. */ public template: TemplateRef<any>) {
}
diff --git a/src/framework/theme/components/tabset/tabset.component.ts b/src/framework/theme/components/tabset/tabset.component.ts
index 276ef2fde3..0ea430a468 100644
--- a/src/framework/theme/components/tabset/tabset.component.ts
+++ b/src/framework/theme/components/tabset/tabset.component.ts
@@ -15,10 +15,8 @@ import {
AfterContentInit,
HostBinding,
ChangeDetectorRef,
- ViewChild,
ContentChild,
TemplateRef,
- AfterViewInit,
} from '@angular/core';
import { ActivatedRoute } from '@angular/router';
@@ -26,7 +24,7 @@ import { convertToBoolProperty, NbBooleanInput } from '../helpers';
import { NbComponentOrCustomStatus } from '../component-status';
import { NbBadgePosition } from '../badge/badge.component';
import { NbIconConfig } from '../icon/icon.component';
-import { NB_TAB_CONTENT } from './tab-content';
+import { NB_LAZY_CONTENT } from './lazy-content';
/**
* Specific tab container.
@@ -42,18 +40,17 @@ import { NB_TAB_CONTENT } from './tab-content';
@Component({
selector: 'nb-tab',
template: `
- <ng-container *ngIf="active">
- <ng-container *ngTemplateOutlet="currentTemplate"></ng-container>
+ <ng-container *ngIf="showLazy; else notLazy">
+ <ng-container *ngTemplateOutlet="lazyTemplate"></ng-container>
</ng-container>
- <ng-template #container>
+ <ng-template #notLazy>
<ng-content></ng-content>
</ng-template>
`,
})
-export class NbTabComponent implements AfterViewInit {
- @ContentChild(NB_TAB_CONTENT, { read: TemplateRef, static: true }) _explicitContent: TemplateRef<any>;
- @ViewChild('container', { read: TemplateRef, static: true }) _implicitContent: TemplateRef<any>;
+export class NbTabComponent {
+ @ContentChild(NB_LAZY_CONTENT, { read: TemplateRef, static: true }) lazyTemplate: TemplateRef<any>;
/**
* Tab title
@@ -142,7 +139,7 @@ export class NbTabComponent implements AfterViewInit {
* Lazy load content before tab selection
* TODO: rename, as lazy is by default, and this is more `instant load`
* @param {boolean} val
- * @deprecated To be turned into a <ng-template nbTabContent>
+ * @deprecated To be turned into a <ng-template nbLazyContent>
*/
@Input()
set lazyLoad(val: boolean) {
@@ -178,10 +175,8 @@ export class NbTabComponent implements AfterViewInit {
*/
init: boolean = false;
- currentTemplate: TemplateRef<any> | null = null;
-
- ngAfterViewInit() {
- this.currentTemplate = this._explicitContent || this._implicitContent;
+ get showLazy(): boolean {
+ return !!this.lazyTemplate && this.active;
}
}
diff --git a/src/framework/theme/components/tabset/tabset.module.ts b/src/framework/theme/components/tabset/tabset.module.ts
index fdb11ada49..ca260555ae 100644
--- a/src/framework/theme/components/tabset/tabset.module.ts
+++ b/src/framework/theme/components/tabset/tabset.module.ts
@@ -11,7 +11,7 @@ import { NbSharedModule } from '../shared/shared.module';
import { NbTabsetComponent, NbTabComponent } from './tabset.component';
import { NbBadgeModule } from '../badge/badge.module';
import { NbIconModule } from '../icon/icon.module';
-import { NbTabContentDirective } from './tab-content';
+import { NbLazyContentDirective } from './lazy-content';
const NB_TABSET_COMPONENTS = [
NbTabsetComponent,
@@ -19,7 +19,7 @@ const NB_TABSET_COMPONENTS = [
];
const NB_TABSET_DIRECTIVES = [
- NbTabContentDirective,
+ NbLazyContentDirective,
];
@NgModule({
From 868eb82a951fad0ef189bced3201f2d7d5d049f5 Mon Sep 17 00:00:00 2001
From: evtkhvch <evtkhvch@gmail.com>
Date: Tue, 21 Sep 2021 14:26:20 +0300
Subject: [PATCH 16/25] fix(tabset): add getter for lazy template
---
src/framework/theme/components/tabset/tabset.component.ts | 8 ++++++--
1 file changed, 6 insertions(+), 2 deletions(-)
diff --git a/src/framework/theme/components/tabset/tabset.component.ts b/src/framework/theme/components/tabset/tabset.component.ts
index 0ea430a468..c9b2f50706 100644
--- a/src/framework/theme/components/tabset/tabset.component.ts
+++ b/src/framework/theme/components/tabset/tabset.component.ts
@@ -50,7 +50,11 @@ import { NB_LAZY_CONTENT } from './lazy-content';
`,
})
export class NbTabComponent {
- @ContentChild(NB_LAZY_CONTENT, { read: TemplateRef, static: true }) lazyTemplate: TemplateRef<any>;
+ @ContentChild(NB_LAZY_CONTENT, { read: TemplateRef, static: true })
+ get lazyTemplate(): TemplateRef<any> {
+ return this._lazyTemplate;
+ }
+ protected _lazyTemplate: TemplateRef<any>;
/**
* Tab title
@@ -176,7 +180,7 @@ export class NbTabComponent {
init: boolean = false;
get showLazy(): boolean {
- return !!this.lazyTemplate && this.active;
+ return !!this._lazyTemplate && this.active;
}
}
From 1aa9b6f3b45301956ef03f1ff9ea769e7ab949d2 Mon Sep 17 00:00:00 2001
From: evtkhvch <evtkhvch@gmail.com>
Date: Tue, 21 Sep 2021 14:29:54 +0300
Subject: [PATCH 17/25] fix(tabset): remove getter
---
.../theme/components/tabset/tabset.component.ts | 10 +++++-----
1 file changed, 5 insertions(+), 5 deletions(-)
diff --git a/src/framework/theme/components/tabset/tabset.component.ts b/src/framework/theme/components/tabset/tabset.component.ts
index c9b2f50706..33c6f158c1 100644
--- a/src/framework/theme/components/tabset/tabset.component.ts
+++ b/src/framework/theme/components/tabset/tabset.component.ts
@@ -50,11 +50,7 @@ import { NB_LAZY_CONTENT } from './lazy-content';
`,
})
export class NbTabComponent {
- @ContentChild(NB_LAZY_CONTENT, { read: TemplateRef, static: true })
- get lazyTemplate(): TemplateRef<any> {
- return this._lazyTemplate;
- }
- protected _lazyTemplate: TemplateRef<any>;
+ @ContentChild(NB_LAZY_CONTENT, { read: TemplateRef, static: true }) protected _lazyTemplate: TemplateRef<any>;
/**
* Tab title
@@ -182,6 +178,10 @@ export class NbTabComponent {
get showLazy(): boolean {
return !!this._lazyTemplate && this.active;
}
+
+ get lazyTemplate(): TemplateRef<any> {
+ return this._lazyTemplate;
+ }
}
// TODO: Combine tabset with route-tabset, so that we can:
From 8cbeedac48a17faf9a4f0c8bd81f2729542bae2a Mon Sep 17 00:00:00 2001
From: kolyaevtikhovich <evtkhvch@gmail.com>
Date: Thu, 11 Nov 2021 17:07:12 +0300
Subject: [PATCH 18/25] fix(tabset): add lazy content directive to public api
---
src/framework/theme/public_api.ts | 1 +
1 file changed, 1 insertion(+)
diff --git a/src/framework/theme/public_api.ts b/src/framework/theme/public_api.ts
index fc023790a6..748e7c3cbc 100644
--- a/src/framework/theme/public_api.ts
+++ b/src/framework/theme/public_api.ts
@@ -80,6 +80,7 @@ export * from './components/tabset/tabset.module';
export * from './components/datepicker/date-timepicker.component';
export * from './components/datepicker/calendar-with-time.component';
export * from './components/tabset/tabset.component';
+export * from './components/tabset/lazy-content';
export * from './components/user/user.module';
export * from './components/user/user.component';
export * from './components/actions/actions.module';
From 27f58a00d681171b2fbd5d8b1a23e1993e1e7c00 Mon Sep 17 00:00:00 2001
From: Sergey Andrievskiy <s.andrievskiy@akveo.com>
Date: Fri, 12 Nov 2021 19:12:35 +0300
Subject: [PATCH 19/25] refactor(tabset): rename lazy content directive
---
.../theme/components/tabset/lazy-content.ts | 14 ------
.../tabset/tab-content.directive.ts | 11 +++++
.../components/tabset/tabset.component.ts | 44 +++++++++----------
.../theme/components/tabset/tabset.module.ts | 29 +++---------
src/framework/theme/public_api.ts | 2 +-
5 files changed, 41 insertions(+), 59 deletions(-)
delete mode 100644 src/framework/theme/components/tabset/lazy-content.ts
create mode 100644 src/framework/theme/components/tabset/tab-content.directive.ts
diff --git a/src/framework/theme/components/tabset/lazy-content.ts b/src/framework/theme/components/tabset/lazy-content.ts
deleted file mode 100644
index 009adae7fc..0000000000
--- a/src/framework/theme/components/tabset/lazy-content.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-import { Directive, InjectionToken, TemplateRef } from '@angular/core';
-
-export const NB_LAZY_CONTENT = new InjectionToken<NbLazyContentDirective>('NbLazyContent');
-
-/** Decorates the `ng-template` tags and reads out the template from it. */
-@Directive({
- selector: '[nbLazyContent]',
- providers: [{ provide: NB_LAZY_CONTENT, useExisting: NbLazyContentDirective }],
-})
-export class NbLazyContentDirective {
- constructor(
- /** Content for the tab. */ public template: TemplateRef<any>) {
- }
-}
diff --git a/src/framework/theme/components/tabset/tab-content.directive.ts b/src/framework/theme/components/tabset/tab-content.directive.ts
new file mode 100644
index 0000000000..33c3324b96
--- /dev/null
+++ b/src/framework/theme/components/tabset/tab-content.directive.ts
@@ -0,0 +1,11 @@
+import { Directive, TemplateRef } from '@angular/core';
+
+/**
+ * Directive to wrap tab lazy content.
+ * */
+@Directive({
+ selector: '[nbTabContent]',
+})
+export class NbTabContentDirective {
+ constructor(public template: TemplateRef<any>) {}
+}
diff --git a/src/framework/theme/components/tabset/tabset.component.ts b/src/framework/theme/components/tabset/tabset.component.ts
index 4447fb5ae8..8d8866268e 100644
--- a/src/framework/theme/components/tabset/tabset.component.ts
+++ b/src/framework/theme/components/tabset/tabset.component.ts
@@ -24,7 +24,7 @@ import { convertToBoolProperty, NbBooleanInput } from '../helpers';
import { NbComponentOrCustomStatus } from '../component-status';
import { NbBadgePosition } from '../badge/badge.component';
import { NbIconConfig } from '../icon/icon.component';
-import { NB_LAZY_CONTENT } from './lazy-content';
+import { NbTabContentDirective } from './tab-content.directive';
/**
* Specific tab container.
@@ -50,7 +50,7 @@ import { NB_LAZY_CONTENT } from './lazy-content';
`,
})
export class NbTabComponent {
- @ContentChild(NB_LAZY_CONTENT, { read: TemplateRef, static: true }) protected _lazyTemplate: TemplateRef<any>;
+ @ContentChild(NbTabContentDirective, { read: TemplateRef, static: true }) protected _lazyTemplate: TemplateRef<any>;
/**
* Tab title
@@ -288,25 +288,29 @@ export class NbTabComponent {
styleUrls: ['./tabset.component.scss'],
template: `
<ul class="tabset">
- <li *ngFor="let tab of tabs"
- (click)="selectTab(tab)"
- (keyup.space)="selectTab(tab)"
- (keyup.enter)="selectTab(tab)"
- [class.responsive]="tab.responsive"
- [class.active]="tab.active"
- [class.disabled]="tab.disabled"
- [attr.tabindex]="tab.disabled ? -1 : 0"
- [attr.data-tab-id]="tab.tabId"
- class="tab">
+ <li
+ *ngFor="let tab of tabs"
+ (click)="selectTab(tab)"
+ (keyup.space)="selectTab(tab)"
+ (keyup.enter)="selectTab(tab)"
+ [class.responsive]="tab.responsive"
+ [class.active]="tab.active"
+ [class.disabled]="tab.disabled"
+ [attr.tabindex]="tab.disabled ? -1 : 0"
+ [attr.data-tab-id]="tab.tabId"
+ class="tab"
+ >
<a href (click)="$event.preventDefault()" tabindex="-1" class="tab-link">
<nb-icon *ngIf="tab.tabIcon" [config]="tab.tabIcon"></nb-icon>
<span *ngIf="tab.tabTitle" class="tab-text">{{ tab.tabTitle }}</span>
</a>
- <nb-badge *ngIf="tab.badgeText || tab.badgeDot"
+ <nb-badge
+ *ngIf="tab.badgeText || tab.badgeDot"
[text]="tab.badgeText"
[dotMode]="tab.badgeDot"
[status]="tab.badgeStatus"
- [position]="tab.badgePosition">
+ [position]="tab.badgePosition"
+ >
</nb-badge>
</li>
</ul>
@@ -314,7 +318,6 @@ export class NbTabComponent {
`,
})
export class NbTabsetComponent implements AfterContentInit {
-
@ContentChildren(NbTabComponent) tabs: QueryList<NbTabComponent>;
@HostBinding('class.full-width')
@@ -342,17 +345,14 @@ export class NbTabsetComponent implements AfterContentInit {
*/
@Output() changeTab = new EventEmitter<any>();
- constructor(private route: ActivatedRoute,
- private changeDetectorRef: ChangeDetectorRef) {
- }
+ constructor(private route: ActivatedRoute, private changeDetectorRef: ChangeDetectorRef) {}
// TODO: refactoring this component, avoid change detection loop
ngAfterContentInit() {
this.route.params
.pipe(
- map(
- (params: any) =>
- this.tabs.find((tab) => this.routeParam ? tab.route === params[this.routeParam] : tab.active),
+ map((params: any) =>
+ this.tabs.find((tab) => (this.routeParam ? tab.route === params[this.routeParam] : tab.active)),
),
delay(0),
map((tab: NbTabComponent) => tab || this.tabs.first),
@@ -367,7 +367,7 @@ export class NbTabsetComponent implements AfterContentInit {
// TODO: navigate to routeParam
selectTab(selectedTab: NbTabComponent) {
if (!selectedTab.disabled) {
- this.tabs.forEach(tab => tab.active = tab === selectedTab);
+ this.tabs.forEach((tab) => (tab.active = tab === selectedTab));
this.changeTab.emit(selectedTab);
}
}
diff --git a/src/framework/theme/components/tabset/tabset.module.ts b/src/framework/theme/components/tabset/tabset.module.ts
index ca260555ae..f741380076 100644
--- a/src/framework/theme/components/tabset/tabset.module.ts
+++ b/src/framework/theme/components/tabset/tabset.module.ts
@@ -11,30 +11,15 @@ import { NbSharedModule } from '../shared/shared.module';
import { NbTabsetComponent, NbTabComponent } from './tabset.component';
import { NbBadgeModule } from '../badge/badge.module';
import { NbIconModule } from '../icon/icon.module';
-import { NbLazyContentDirective } from './lazy-content';
+import { NbTabContentDirective } from './tab-content.directive';
-const NB_TABSET_COMPONENTS = [
- NbTabsetComponent,
- NbTabComponent,
-];
+const NB_TABSET_COMPONENTS = [NbTabsetComponent, NbTabComponent];
-const NB_TABSET_DIRECTIVES = [
- NbLazyContentDirective,
-];
+const NB_TABSET_DIRECTIVES = [NbTabContentDirective];
@NgModule({
- imports: [
- NbSharedModule,
- NbBadgeModule,
- NbIconModule,
- ],
- declarations: [
- ...NB_TABSET_COMPONENTS,
- ...NB_TABSET_DIRECTIVES,
- ],
- exports: [
- ...NB_TABSET_COMPONENTS,
- ...NB_TABSET_DIRECTIVES,
- ],
+ imports: [NbSharedModule, NbBadgeModule, NbIconModule],
+ declarations: [...NB_TABSET_COMPONENTS, ...NB_TABSET_DIRECTIVES],
+ exports: [...NB_TABSET_COMPONENTS, ...NB_TABSET_DIRECTIVES],
})
-export class NbTabsetModule { }
+export class NbTabsetModule {}
diff --git a/src/framework/theme/public_api.ts b/src/framework/theme/public_api.ts
index 748e7c3cbc..47b9896bf2 100644
--- a/src/framework/theme/public_api.ts
+++ b/src/framework/theme/public_api.ts
@@ -80,7 +80,7 @@ export * from './components/tabset/tabset.module';
export * from './components/datepicker/date-timepicker.component';
export * from './components/datepicker/calendar-with-time.component';
export * from './components/tabset/tabset.component';
-export * from './components/tabset/lazy-content';
+export * from './components/tabset/tab-content.directive';
export * from './components/user/user.module';
export * from './components/user/user.component';
export * from './components/actions/actions.module';
From feee75aa6d44b498a947bfac1c52d5e9536e9943 Mon Sep 17 00:00:00 2001
From: Sergey Andrievskiy <s.andrievskiy@akveo.com>
Date: Fri, 12 Nov 2021 19:14:17 +0300
Subject: [PATCH 20/25] style(tabset): remove redundant comment
---
src/framework/theme/components/tabset/tabset.component.ts | 1 -
1 file changed, 1 deletion(-)
diff --git a/src/framework/theme/components/tabset/tabset.component.ts b/src/framework/theme/components/tabset/tabset.component.ts
index 8d8866268e..e0dbeb8f20 100644
--- a/src/framework/theme/components/tabset/tabset.component.ts
+++ b/src/framework/theme/components/tabset/tabset.component.ts
@@ -141,7 +141,6 @@ export class NbTabComponent {
/**
* Lazy load content before tab selection
- * TODO: rename, as lazy is by default, and this is more `instant load`
* @param {boolean} val
* @deprecated To be turned into a <ng-template nbLazyContent>
*/
From 4810ac1f070606eb488ebd3695b6e1eb4bf74763 Mon Sep 17 00:00:00 2001
From: Sergey Andrievskiy <s.andrievskiy@akveo.com>
Date: Fri, 12 Nov 2021 19:17:09 +0300
Subject: [PATCH 21/25] style(tabset): update deprecation comments
---
src/framework/theme/components/tabset/tabset.component.ts | 6 ++++--
1 file changed, 4 insertions(+), 2 deletions(-)
diff --git a/src/framework/theme/components/tabset/tabset.component.ts b/src/framework/theme/components/tabset/tabset.component.ts
index e0dbeb8f20..7c7aac899d 100644
--- a/src/framework/theme/components/tabset/tabset.component.ts
+++ b/src/framework/theme/components/tabset/tabset.component.ts
@@ -142,7 +142,8 @@ export class NbTabComponent {
/**
* Lazy load content before tab selection
* @param {boolean} val
- * @deprecated To be turned into a <ng-template nbLazyContent>
+ * @deprecated This setting never worked. Wrap content into a `nbTabContent` to make it lazy.
+ * @breaking-change Remove 10.0.0
*/
@Input()
set lazyLoad(val: boolean) {
@@ -173,7 +174,8 @@ export class NbTabComponent {
@Input() badgePosition: NbBadgePosition;
/**
- * @deprecated To be turned into a active property
+ * @deprecated
+ * @breaking-change Remove 10.0.0
* @type boolean
*/
init: boolean = false;
From 1727213cb1bd609e52a9bbf861c1c582236bf1e3 Mon Sep 17 00:00:00 2001
From: Sergey Andrievskiy <s.andrievskiy@akveo.com>
Date: Fri, 12 Nov 2021 19:27:31 +0300
Subject: [PATCH 22/25] refactor(tabset): remove redundant accessors
---
.../components/tabset/tab-content.directive.ts | 2 +-
.../theme/components/tabset/tabset.component.ts | 17 ++++-------------
2 files changed, 5 insertions(+), 14 deletions(-)
diff --git a/src/framework/theme/components/tabset/tab-content.directive.ts b/src/framework/theme/components/tabset/tab-content.directive.ts
index 33c3324b96..2227d284ae 100644
--- a/src/framework/theme/components/tabset/tab-content.directive.ts
+++ b/src/framework/theme/components/tabset/tab-content.directive.ts
@@ -7,5 +7,5 @@ import { Directive, TemplateRef } from '@angular/core';
selector: '[nbTabContent]',
})
export class NbTabContentDirective {
- constructor(public template: TemplateRef<any>) {}
+ constructor(public templateRef: TemplateRef<any>) {}
}
diff --git a/src/framework/theme/components/tabset/tabset.component.ts b/src/framework/theme/components/tabset/tabset.component.ts
index 7c7aac899d..39b6acaff5 100644
--- a/src/framework/theme/components/tabset/tabset.component.ts
+++ b/src/framework/theme/components/tabset/tabset.component.ts
@@ -16,7 +16,6 @@ import {
HostBinding,
ChangeDetectorRef,
ContentChild,
- TemplateRef,
} from '@angular/core';
import { ActivatedRoute } from '@angular/router';
@@ -40,17 +39,17 @@ import { NbTabContentDirective } from './tab-content.directive';
@Component({
selector: 'nb-tab',
template: `
- <ng-container *ngIf="showLazy; else notLazy">
- <ng-container *ngTemplateOutlet="lazyTemplate"></ng-container>
+ <ng-container *ngIf="tabContentDirective; else projectedContent">
+ <ng-container *ngTemplateOutlet="tabContentDirective.templateRef"></ng-container>
</ng-container>
- <ng-template #notLazy>
+ <ng-template #projectedContent>
<ng-content></ng-content>
</ng-template>
`,
})
export class NbTabComponent {
- @ContentChild(NbTabContentDirective, { read: TemplateRef, static: true }) protected _lazyTemplate: TemplateRef<any>;
+ @ContentChild(NbTabContentDirective) tabContentDirective: NbTabContentDirective;
/**
* Tab title
@@ -179,14 +178,6 @@ export class NbTabComponent {
* @type boolean
*/
init: boolean = false;
-
- get showLazy(): boolean {
- return !!this._lazyTemplate && this.active;
- }
-
- get lazyTemplate(): TemplateRef<any> {
- return this._lazyTemplate;
- }
}
// TODO: Combine tabset with route-tabset, so that we can:
From 90631dcf48687067fc211710465d603a5e798431 Mon Sep 17 00:00:00 2001
From: Sergey Andrievskiy <s.andrievskiy@akveo.com>
Date: Fri, 12 Nov 2021 19:28:10 +0300
Subject: [PATCH 23/25] refactor(tabset): use a single ng-container
---
src/framework/theme/components/tabset/tabset.component.ts | 7 ++++---
1 file changed, 4 insertions(+), 3 deletions(-)
diff --git a/src/framework/theme/components/tabset/tabset.component.ts b/src/framework/theme/components/tabset/tabset.component.ts
index 39b6acaff5..a57e61f558 100644
--- a/src/framework/theme/components/tabset/tabset.component.ts
+++ b/src/framework/theme/components/tabset/tabset.component.ts
@@ -39,9 +39,10 @@ import { NbTabContentDirective } from './tab-content.directive';
@Component({
selector: 'nb-tab',
template: `
- <ng-container *ngIf="tabContentDirective; else projectedContent">
- <ng-container *ngTemplateOutlet="tabContentDirective.templateRef"></ng-container>
- </ng-container>
+ <ng-container
+ *ngIf="tabContentDirective; else projectedContent"
+ [ngTemplateOutlet]="tabContentDirective.templateRef"
+ ></ng-container>
<ng-template #projectedContent>
<ng-content></ng-content>
From 0f4b2d5b3a6df942949d7aa8c1f91e57039b4420 Mon Sep 17 00:00:00 2001
From: Sergey Andrievskiy <s.andrievskiy@akveo.com>
Date: Mon, 15 Nov 2021 12:00:15 +0300
Subject: [PATCH 24/25] docs(tabset): hide deprecated properties
---
src/framework/theme/components/tabset/tabset.component.ts | 6 +++---
1 file changed, 3 insertions(+), 3 deletions(-)
diff --git a/src/framework/theme/components/tabset/tabset.component.ts b/src/framework/theme/components/tabset/tabset.component.ts
index a57e61f558..3f299a11ef 100644
--- a/src/framework/theme/components/tabset/tabset.component.ts
+++ b/src/framework/theme/components/tabset/tabset.component.ts
@@ -34,7 +34,7 @@ import { NbTabContentDirective } from './tab-content.directive';
* badgeStatus="danger">
* <p>List of <strong>users</strong>.</p>
* </nb-tab>
- ```
+ * ```
*/
@Component({
selector: 'nb-tab',
@@ -141,7 +141,7 @@ export class NbTabComponent {
/**
* Lazy load content before tab selection
- * @param {boolean} val
+ * @docs-private
* @deprecated This setting never worked. Wrap content into a `nbTabContent` to make it lazy.
* @breaking-change Remove 10.0.0
*/
@@ -176,7 +176,7 @@ export class NbTabComponent {
/**
* @deprecated
* @breaking-change Remove 10.0.0
- * @type boolean
+ * @docs-private
*/
init: boolean = false;
}
From a24162875482ca363cf1acf2b5d859c6aa741a3a Mon Sep 17 00:00:00 2001
From: Sergey Andrievskiy <s.andrievskiy@akveo.com>
Date: Mon, 15 Nov 2021 12:27:33 +0300
Subject: [PATCH 25/25] docs(tabset): add nbTabContent usage example
---
.../theme/components/tabset/tabset.component.ts | 16 +++++++++++++++-
1 file changed, 15 insertions(+), 1 deletion(-)
diff --git a/src/framework/theme/components/tabset/tabset.component.ts b/src/framework/theme/components/tabset/tabset.component.ts
index 3f299a11ef..b22b9c91a1 100644
--- a/src/framework/theme/components/tabset/tabset.component.ts
+++ b/src/framework/theme/components/tabset/tabset.component.ts
@@ -228,12 +228,26 @@ export class NbTabComponent {
* (`tabset-tab-text-hide-breakpoint` property) for better responsive behaviour.
* You can open the following example and make
* your screen smaller - titles will be hidden in the last tabset in the list:
- *
* @stacked-example(Icon, tabset/tabset-icon.component)
*
* It is also possible to disable a tab using `disabled` property:
* @stacked-example(Disabled Tab, tabset/tabset-disabled.component)
*
+ * By default, the tab contents instantiated straightaway. To make tab contents load lazy,
+ * declare the body of a tab in a template with `nbTabContent` directive.
+ * ```html
+ * <nb-tabset>
+ * <nb-tab>
+ * <some-component *nbTabContent>Lazy content</some-component>
+ * </nb-tab>
+ * <nb-tab>
+ * <ng-template nbTabContent>
+ * Lazy content with template syntax
+ * </ng-template>
+ * </nb-tab>
+ * </nb-tabset>
+ * ```
+ *
* @styles
*
* tabset-background-color: