-
`
})
@@ -13,7 +17,7 @@ export class NzDemoCalendarCardComponent {
console.log(`Current value: ${value}`);
}
- onPanelChange(change: {date: Date, mode: string}): void {
+ onPanelChange(change: { date: Date; mode: string }): void {
console.log(`Current value: ${change.date}`);
console.log(`Current mode: ${change.mode}`);
}
diff --git a/components/calendar/demo/notice-calendar.ts b/components/calendar/demo/notice-calendar.ts
index 3c8fc35178..17fd9eff59 100644
--- a/components/calendar/demo/notice-calendar.ts
+++ b/components/calendar/demo/notice-calendar.ts
@@ -31,38 +31,40 @@ import { Component } from '@angular/core';
`,
- styles : [ `
- .events {
- list-style: none;
- margin: 0;
- padding: 0;
- }
+ styles: [
+ `
+ .events {
+ list-style: none;
+ margin: 0;
+ padding: 0;
+ }
- .events .ant-badge-status {
- overflow: hidden;
- white-space: nowrap;
- width: 100%;
- text-overflow: ellipsis;
- font-size: 12px;
- }
+ .events .ant-badge-status {
+ overflow: hidden;
+ white-space: nowrap;
+ width: 100%;
+ text-overflow: ellipsis;
+ font-size: 12px;
+ }
- .notes-month {
- text-align: center;
- font-size: 28px;
- }
+ .notes-month {
+ text-align: center;
+ font-size: 28px;
+ }
- .notes-month section {
- font-size: 28px;
- }
- ` ]
+ .notes-month section {
+ font-size: 28px;
+ }
+ `
+ ]
})
export class NzDemoCalendarNoticeCalendarComponent {
listDataMap = {
- eight : [
+ eight: [
{ type: 'warning', content: 'This is warning event.' },
{ type: 'success', content: 'This is usual event.' }
],
- ten : [
+ ten: [
{ type: 'warning', content: 'This is warning event.' },
{ type: 'success', content: 'This is usual event.' },
{ type: 'error', content: 'This is error event.' }
diff --git a/components/calendar/demo/select.ts b/components/calendar/demo/select.ts
index 8283261fb4..fddf1df4a3 100644
--- a/components/calendar/demo/select.ts
+++ b/components/calendar/demo/select.ts
@@ -3,10 +3,8 @@ import { Component } from '@angular/core';
@Component({
selector: 'nz-demo-calendar-select',
template: `
- 
+
+
Card content
-
+
+
{{index}}
+
+
+ `,
+ styles: [
+ `
+ [nz-carousel-content] {
+ text-align: center;
+ height: 160px;
+ line-height: 160px;
+ background: #364d79;
+ color: #fff;
+ overflow: hidden;
+ }
- h3 {
- color: #fff;
- }
+ h3 {
+ color: #fff;
+ }
`
]
})
export class NzDemoCarouselAutoplayComponent {
- array = [ 1, 2, 3, 4 ];
+ array = [1, 2, 3, 4];
}
diff --git a/components/carousel/demo/basic.ts b/components/carousel/demo/basic.ts
index dab1a7be81..0638c60e2a 100644
--- a/components/carousel/demo/basic.ts
+++ b/components/carousel/demo/basic.ts
@@ -4,25 +4,29 @@ import { Component } from '@angular/core';
selector: 'nz-demo-carousel-basic',
template: `
{{ index }}
+{{index}}
+
+
+ `,
+ styles: [
+ `
+ [nz-carousel-content] {
+ text-align: center;
+ height: 160px;
+ line-height: 160px;
+ background: #364d79;
+ color: #fff;
+ overflow: hidden;
+ }
- h3 {
- color: #fff;
- }
+ h3 {
+ color: #fff;
+ }
`
]
})
export class NzDemoCarouselBasicComponent {
- array = [ 1, 2, 3, 4 ];
+ array = [1, 2, 3, 4];
effect = 'scrollx';
}
diff --git a/components/carousel/demo/fade.ts b/components/carousel/demo/fade.ts
index 6f58f7e845..f631f9e2f8 100644
--- a/components/carousel/demo/fade.ts
+++ b/components/carousel/demo/fade.ts
@@ -4,24 +4,28 @@ import { Component } from '@angular/core';
selector: 'nz-demo-carousel-fade',
template: `
{{ index }}
+{{index}}
+
+
+ `,
+ styles: [
+ `
+ [nz-carousel-content] {
+ text-align: center;
+ height: 160px;
+ line-height: 160px;
+ background: #364d79;
+ color: #fff;
+ overflow: hidden;
+ }
- h3 {
- color: #fff;
- }
+ h3 {
+ color: #fff;
+ }
`
]
})
export class NzDemoCarouselFadeComponent {
- array = [ 1, 2, 3, 4 ];
+ array = [1, 2, 3, 4];
}
diff --git a/components/carousel/demo/vertical.ts b/components/carousel/demo/vertical.ts
index 7e6588a211..3c7788deb7 100644
--- a/components/carousel/demo/vertical.ts
+++ b/components/carousel/demo/vertical.ts
@@ -4,24 +4,28 @@ import { Component } from '@angular/core';
selector: 'nz-demo-carousel-vertical',
template: `
{{ index }}
+{{index}}
+
+
+ `,
+ styles: [
+ `
+ [nz-carousel-content] {
+ text-align: center;
+ height: 160px;
+ line-height: 160px;
+ background: #364d79;
+ color: #fff;
+ overflow: hidden;
+ }
- h3 {
- color: #fff;
- }
+ h3 {
+ color: #fff;
+ }
`
]
})
export class NzDemoCarouselVerticalComponent {
- array = [ 1, 2, 3 ];
+ array = [1, 2, 3];
}
diff --git a/components/carousel/nz-carousel-content.directive.ts b/components/carousel/nz-carousel-content.directive.ts
index 1c99459ba0..9c191c3cd7 100755
--- a/components/carousel/nz-carousel-content.directive.ts
+++ b/components/carousel/nz-carousel-content.directive.ts
@@ -1,9 +1,4 @@
-import {
- Directive,
- ElementRef,
- OnInit,
- Renderer2
-} from '@angular/core';
+import { Directive, ElementRef, OnInit, Renderer2 } from '@angular/core';
import { isNotNil } from '../core/util/check';
diff --git a/components/carousel/nz-carousel.component.ts b/components/carousel/nz-carousel.component.ts
index 28fb16d454..0e358cfb1e 100755
--- a/components/carousel/nz-carousel.component.ts
+++ b/components/carousel/nz-carousel.component.ts
@@ -30,16 +30,16 @@ export type NzCarouselEffects = 'fade' | 'scrollx';
export type SwipeDirection = 'swipeleft' | 'swiperight';
@Component({
- changeDetection : ChangeDetectionStrategy.OnPush,
- encapsulation : ViewEncapsulation.None,
- selector : 'nz-carousel',
+ changeDetection: ChangeDetectionStrategy.OnPush,
+ encapsulation: ViewEncapsulation.None,
+ selector: 'nz-carousel',
preserveWhitespaces: false,
- templateUrl : './nz-carousel.component.html',
- host : {
+ templateUrl: './nz-carousel.component.html',
+ host: {
'[class.ant-carousel-vertical]': 'nzVertical'
},
- styles : [
- `
+ styles: [
+ `
nz-carousel {
display: block;
position: relative;
@@ -88,14 +88,19 @@ export class NzCarouselComponent implements AfterViewInit, AfterContentInit, OnD
private subs_ = new Subscription();
get nextIndex(): number {
- return this.activeIndex < this.slideContents.length - 1 ? (this.activeIndex + 1) : 0;
+ return this.activeIndex < this.slideContents.length - 1 ? this.activeIndex + 1 : 0;
}
get prevIndex(): number {
- return this.activeIndex > 0 ? (this.activeIndex - 1) : (this.slideContents.length - 1);
+ return this.activeIndex > 0 ? this.activeIndex - 1 : this.slideContents.length - 1;
}
- constructor(public elementRef: ElementRef, private renderer: Renderer2, private cdr: ChangeDetectorRef, private ngZone: NgZone) {
+ constructor(
+ public elementRef: ElementRef,
+ private renderer: Renderer2,
+ private cdr: ChangeDetectorRef,
+ private ngZone: NgZone
+ ) {
renderer.addClass(elementRef.nativeElement, 'ant-carousel');
}
@@ -107,15 +112,21 @@ export class NzCarouselComponent implements AfterViewInit, AfterContentInit, OnD
ngAfterViewInit(): void {
// Re-render when content changes.
- this.subs_.add(this.slideContents.changes.subscribe(() => {
- this.renderContent();
- }));
+ this.subs_.add(
+ this.slideContents.changes.subscribe(() => {
+ this.renderContent();
+ })
+ );
this.ngZone.runOutsideAngular(() => {
- this.subs_.add(fromEvent(window, 'resize').pipe(debounceTime(50)).subscribe(() => {
- this.renderContent();
- this.setTransition();
- }));
+ this.subs_.add(
+ fromEvent(window, 'resize')
+ .pipe(debounceTime(50))
+ .subscribe(() => {
+ this.renderContent();
+ this.setTransition();
+ })
+ );
});
// When used in modals (drawers maybe too), it should render itself asynchronously.
@@ -144,7 +155,7 @@ export class NzCarouselComponent implements AfterViewInit, AfterContentInit, OnD
this.nzBeforeChange.emit({ from: this.slideContents.toArray().findIndex(slide => slide.isActive), to: index });
this.activeIndex = index;
this.setTransition();
- this.slideContents.forEach((slide, i) => slide.isActive = index === i);
+ this.slideContents.forEach((slide, i) => (slide.isActive = index === i));
this.setUpNextScroll();
this.cdr.markForCheck();
// Should trigger the following when animation is done. The transition takes 0.5 seconds according to the CSS.
@@ -153,11 +164,12 @@ export class NzCarouselComponent implements AfterViewInit, AfterContentInit, OnD
}
private setTransition(): void {
- this.transform = this.nzEffect === 'fade'
- ? 'translate3d(0px, 0px, 0px)'
- : this.nzVertical
- // `Scrollx` mode.
- ? `translate3d(0px, ${-this.activeIndex * this.el.offsetHeight}px, 0px)`
+ this.transform =
+ this.nzEffect === 'fade'
+ ? 'translate3d(0px, 0px, 0px)'
+ : this.nzVertical
+ ? // `Scrollx` mode.
+ `translate3d(0px, ${-this.activeIndex * this.el.offsetHeight}px, 0px)`
: `translate3d(${-this.activeIndex * this.el.offsetWidth}px, 0px, 0px)`;
if (this.slickTrack) {
this.renderer.setStyle(this.slickTrack.nativeElement, 'transform', this.transform);
@@ -179,10 +191,12 @@ export class NzCarouselComponent implements AfterViewInit, AfterContentInit, OnD
}
onKeyDown(e: KeyboardEvent): void {
- if (e.keyCode === LEFT_ARROW) { // Left
+ if (e.keyCode === LEFT_ARROW) {
+ // Left
this.pre();
e.preventDefault();
- } else if (e.keyCode === RIGHT_ARROW) { // Right
+ } else if (e.keyCode === RIGHT_ARROW) {
+ // Right
this.next();
e.preventDefault();
}
diff --git a/components/carousel/nz-carousel.module.ts b/components/carousel/nz-carousel.module.ts
index bc2e1c019a..d21b8ea736 100644
--- a/components/carousel/nz-carousel.module.ts
+++ b/components/carousel/nz-carousel.module.ts
@@ -5,9 +5,8 @@ import { NzCarouselContentDirective } from './nz-carousel-content.directive';
import { NzCarouselComponent } from './nz-carousel.component';
@NgModule({
- declarations: [ NzCarouselComponent, NzCarouselContentDirective ],
- exports : [ NzCarouselComponent, NzCarouselContentDirective ],
- imports : [ CommonModule ]
+ declarations: [NzCarouselComponent, NzCarouselContentDirective],
+ exports: [NzCarouselComponent, NzCarouselContentDirective],
+ imports: [CommonModule]
})
-export class NzCarouselModule {
-}
+export class NzCarouselModule {}
diff --git a/components/carousel/nz-carousel.spec.ts b/components/carousel/nz-carousel.spec.ts
index 5aec779aeb..e0c522b8f4 100644
--- a/components/carousel/nz-carousel.spec.ts
+++ b/components/carousel/nz-carousel.spec.ts
@@ -12,8 +12,8 @@ import { NzCarouselModule } from './nz-carousel.module';
describe('carousel', () => {
beforeEach(fakeAsync(() => {
TestBed.configureTestingModule({
- imports : [ NzCarouselModule ],
- declarations: [ NzTestCarouselBasicComponent ]
+ imports: [NzCarouselModule],
+ declarations: [NzTestCarouselBasicComponent]
});
TestBed.compileComponents();
}));
@@ -33,7 +33,7 @@ describe('carousel', () => {
fixture.detectChanges();
expect(carouselWrapper.nativeElement.classList).toContain('ant-carousel');
expect(carouselContents.every(content => content.nativeElement.classList.contains('slick-slide'))).toBe(true);
- expect(carouselContents[ 0 ].nativeElement.classList).toContain('slick-active');
+ expect(carouselContents[0].nativeElement.classList).toContain('slick-active');
});
it('should dynamic change content work', fakeAsync(() => {
fixture.detectChanges();
@@ -61,31 +61,33 @@ describe('carousel', () => {
expect(carouselWrapper.nativeElement.querySelector('.slick-dots').children.length).toBe(4);
expect(carouselWrapper.nativeElement.querySelector('.slick-dots').firstElementChild.innerText).toBe('1');
expect(carouselWrapper.nativeElement.querySelector('.slick-dots').lastElementChild.innerText).toBe('4');
- expect(carouselWrapper.nativeElement.querySelector('.slick-dots').firstElementChild.firstElementChild.tagName).toBe('A');
+ expect(
+ carouselWrapper.nativeElement.querySelector('.slick-dots').firstElementChild.firstElementChild.tagName
+ ).toBe('A');
});
it('should click content change', () => {
fixture.detectChanges();
- expect(carouselContents[ 0 ].nativeElement.classList).toContain('slick-active');
+ expect(carouselContents[0].nativeElement.classList).toContain('slick-active');
carouselWrapper.nativeElement.querySelector('.slick-dots').lastElementChild.click();
fixture.detectChanges();
- expect(carouselContents[ 3 ].nativeElement.classList).toContain('slick-active');
+ expect(carouselContents[3].nativeElement.classList).toContain('slick-active');
});
it('should keydown change content work', () => {
fixture.detectChanges();
- expect(carouselContents[ 0 ].nativeElement.classList).toContain('slick-active');
+ expect(carouselContents[0].nativeElement.classList).toContain('slick-active');
const list = carouselWrapper.nativeElement.querySelector('.slick-list');
dispatchKeyboardEvent(list, 'keydown', LEFT_ARROW);
fixture.detectChanges();
- expect(carouselContents[ 3 ].nativeElement.classList).toContain('slick-active');
+ expect(carouselContents[3].nativeElement.classList).toContain('slick-active');
dispatchKeyboardEvent(list, 'keydown', LEFT_ARROW);
fixture.detectChanges();
- expect(carouselContents[ 2 ].nativeElement.classList).toContain('slick-active');
+ expect(carouselContents[2].nativeElement.classList).toContain('slick-active');
dispatchKeyboardEvent(list, 'keydown', RIGHT_ARROW);
fixture.detectChanges();
- expect(carouselContents[ 3 ].nativeElement.classList).toContain('slick-active');
+ expect(carouselContents[3].nativeElement.classList).toContain('slick-active');
dispatchKeyboardEvent(list, 'keydown', RIGHT_ARROW);
fixture.detectChanges();
- expect(carouselContents[ 0 ].nativeElement.classList).toContain('slick-active');
+ expect(carouselContents[0].nativeElement.classList).toContain('slick-active');
});
it('should vertical work', () => {
fixture.detectChanges();
@@ -107,59 +109,63 @@ describe('carousel', () => {
testComponent.effect = 'fade';
testComponent.vertical = true;
fixture.detectChanges();
- expect(carouselContents[ 0 ].nativeElement.classList).toContain('slick-active');
+ expect(carouselContents[0].nativeElement.classList).toContain('slick-active');
carouselWrapper.nativeElement.querySelector('.slick-dots').lastElementChild.click();
fixture.detectChanges();
- expect(carouselWrapper.nativeElement.querySelector('.slick-track').style.transform).toBe('translate3d(0px, 0px, 0px)');
+ expect(carouselWrapper.nativeElement.querySelector('.slick-track').style.transform).toBe(
+ 'translate3d(0px, 0px, 0px)'
+ );
testComponent.effect = 'scrollx';
fixture.detectChanges();
- expect(carouselContents[ 0 ].nativeElement.classList).toContain('slick-active');
+ expect(carouselContents[0].nativeElement.classList).toContain('slick-active');
carouselWrapper.nativeElement.querySelector('.slick-dots').lastElementChild.click();
fixture.detectChanges();
- expect(carouselWrapper.nativeElement.querySelector('.slick-track').style.transform).not.toBe('translate3d(0px, 0px, 0px)');
+ expect(carouselWrapper.nativeElement.querySelector('.slick-track').style.transform).not.toBe(
+ 'translate3d(0px, 0px, 0px)'
+ );
});
it('should autoplay work', fakeAsync(() => {
testComponent.autoPlay = true;
fixture.detectChanges();
- expect(carouselContents[ 0 ].nativeElement.classList).toContain('slick-active');
+ expect(carouselContents[0].nativeElement.classList).toContain('slick-active');
fixture.detectChanges();
tick(5000);
fixture.detectChanges();
- expect(carouselContents[ 1 ].nativeElement.classList).toContain('slick-active');
+ expect(carouselContents[1].nativeElement.classList).toContain('slick-active');
carouselWrapper.nativeElement.querySelector('.slick-dots').lastElementChild.click();
fixture.detectChanges();
tick(5000);
fixture.detectChanges();
testComponent.nzCarouselComponent.clearTimeout(); // Manually stop the auto play to quit this test.
- expect(carouselContents[ 0 ].nativeElement.classList).toContain('slick-active');
+ expect(carouselContents[0].nativeElement.classList).toContain('slick-active');
}));
it('should autoplay speed work', fakeAsync(() => {
testComponent.autoPlay = true;
testComponent.autoPlaySpeed = 1000;
fixture.detectChanges();
- expect(carouselContents[ 0 ].nativeElement.classList).toContain('slick-active');
+ expect(carouselContents[0].nativeElement.classList).toContain('slick-active');
fixture.detectChanges();
tick(1000 + 10);
fixture.detectChanges();
- expect(carouselContents[ 1 ].nativeElement.classList).toContain('slick-active');
+ expect(carouselContents[1].nativeElement.classList).toContain('slick-active');
testComponent.autoPlaySpeed = 0;
fixture.detectChanges();
tick(2000 + 10);
fixture.detectChanges();
- expect(carouselContents[ 1 ].nativeElement.classList).toContain('slick-active');
+ expect(carouselContents[1].nativeElement.classList).toContain('slick-active');
}));
it('should func work', () => {
fixture.detectChanges();
- expect(carouselContents[ 0 ].nativeElement.classList).toContain('slick-active');
+ expect(carouselContents[0].nativeElement.classList).toContain('slick-active');
testComponent.nzCarouselComponent.next();
fixture.detectChanges();
- expect(carouselContents[ 1 ].nativeElement.classList).toContain('slick-active');
+ expect(carouselContents[1].nativeElement.classList).toContain('slick-active');
testComponent.nzCarouselComponent.pre();
fixture.detectChanges();
- expect(carouselContents[ 0 ].nativeElement.classList).toContain('slick-active');
+ expect(carouselContents[0].nativeElement.classList).toContain('slick-active');
testComponent.nzCarouselComponent.goTo(2);
fixture.detectChanges();
- expect(carouselContents[ 2 ].nativeElement.classList).toContain('slick-active');
+ expect(carouselContents[2].nativeElement.classList).toContain('slick-active');
});
it('should resize content after window resized', fakeAsync(() => {
// @ts-ignore
@@ -198,20 +204,25 @@ describe('carousel', () => {
[nzAutoPlay]="autoPlay"
[nzAutoPlaySpeed]="autoPlaySpeed"
(nzAfterChange)="afterChange($event)"
- (nzBeforeChange)="beforeChange($event)">
- {{ index }}
+{{index}}
+
+ {{ index }}
++
`, - styles : [ - ` + styles: [ + ` .ant-cascader-picker { width: 300px; } @@ -68,7 +76,7 @@ export class NzDemoCascaderReactiveFormComponent { private createForm(): void { this.form = this.fb.group({ - name: [ null, Validators.required ] + name: [null, Validators.required] }); } diff --git a/components/cascader/demo/search.ts b/components/cascader/demo/search.ts index df4bdc0f0c..eeab91499c 100644 --- a/components/cascader/demo/search.ts +++ b/components/cascader/demo/search.ts @@ -1,87 +1,106 @@ // tslint:disable:no-any import { Component, OnInit } from '@angular/core'; -const options = [ { - value: 'zhejiang', - label: 'Zhejiang', - children: [ { - value: 'hangzhou', - label: 'Hangzhou', - children: [ { - value: 'xihu', - label: 'West Lake', - isLeaf: true - } ] - }, { - value: 'ningbo', - label: 'Ningbo', - isLeaf: true, - disabled: true - } ] -}, { - value: 'jiangsu', - label: 'Jiangsu', - children: [ { - value: 'nanjing', - label: 'Nanjing', - children: [ { - value: 'zhonghuamen', - label: 'Zhong Hua Men', - isLeaf: true - } ] - } ] -} ]; +const options = [ + { + value: 'zhejiang', + label: 'Zhejiang', + children: [ + { + value: 'hangzhou', + label: 'Hangzhou', + children: [ + { + value: 'xihu', + label: 'West Lake', + isLeaf: true + } + ] + }, + { + value: 'ningbo', + label: 'Ningbo', + isLeaf: true, + disabled: true + } + ] + }, + { + value: 'jiangsu', + label: 'Jiangsu', + children: [ + { + value: 'nanjing', + label: 'Nanjing', + children: [ + { + value: 'zhonghuamen', + label: 'Zhong Hua Men', + isLeaf: true + } + ] + } + ] + } +]; -const otherOptions = [ { - value: 'fujian', - label: 'Fujian', - children: [ { - value: 'xiamen', - label: 'Xiamen', - children: [ { - value: 'Kulangsu', - label: 'Kulangsu', - isLeaf: true - } ] - } ] -}, { - value: 'guangxi', - label: 'Guangxi', - children: [ { - value: 'guilin', - label: 'Guilin', - children: [ { - value: 'Lijiang', - label: 'Li Jiang River', - isLeaf: true - } ] - } ] -} ]; +const otherOptions = [ + { + value: 'fujian', + label: 'Fujian', + children: [ + { + value: 'xiamen', + label: 'Xiamen', + children: [ + { + value: 'Kulangsu', + label: 'Kulangsu', + isLeaf: true + } + ] + } + ] + }, + { + value: 'guangxi', + label: 'Guangxi', + children: [ + { + value: 'guilin', + label: 'Guilin', + children: [ + { + value: 'Lijiang', + label: 'Li Jiang River', + isLeaf: true + } + ] + } + ] + } +]; @Component({ selector: 'nz-demo-cascader-search', template: ` -
-
- +
- ` +
+ + ` }) -export class NzDemoCheckboxDisabledComponent { -} +export class NzDemoCheckboxDisabledComponent {} diff --git a/components/checkbox/demo/group.ts b/components/checkbox/demo/group.ts index e141729634..0579d3eb48 100644 --- a/components/checkbox/demo/group.ts +++ b/components/checkbox/demo/group.ts @@ -4,11 +4,11 @@ import { Component } from '@angular/core'; selector: 'nz-demo-checkbox-group', template: `
-
+
+
-
+
+
{{panel.name}} content
+{{ panel.name }} content
A dog is a type of domesticated animal. Known for its loyalty and faithfulness, it can be found as a welcome guest in many households across the world.
++ A dog is a type of domesticated animal. Known for its loyalty and faithfulness, it can be found as a welcome + guest in many households across the world. +
{{panel.name}} content
+{{ panel.name }} content
{{panel.name}} content
+{{ panel.name }} content
{{panel.name}}
-
+
-
-
+
`,
- styles : []
+ styles: []
})
export class NzDemoCollapseMixComponent {
panels = [
{
- active : true,
- disabled : false,
- name : 'This is panel header 1',
+ active: true,
+ disabled: false,
+ name: 'This is panel header 1',
childPanel: [
{
active: true,
- name : 'This is panel header 1-1'
+ name: 'This is panel header 1-1'
},
{
active: false,
- name : 'This is panel header 1-2'
+ name: 'This is panel header 1-2'
}
]
},
{
- active : false,
+ active: false,
disabled: true,
- name : 'This is panel header 2'
+ name: 'This is panel header 2'
},
{
- active : false,
+ active: false,
disabled: false,
- name : 'This is panel header 3'
+ name: 'This is panel header 3'
}
];
}
diff --git a/components/collapse/demo/noarrow.ts b/components/collapse/demo/noarrow.ts
index c6407dcbe0..d9c9befc2c 100644
--- a/components/collapse/demo/noarrow.ts
+++ b/components/collapse/demo/noarrow.ts
@@ -4,24 +4,33 @@ import { Component } from '@angular/core';
selector: 'nz-demo-collapse-noarrow',
template: `
-
-
+
`,
- styles : []
+ styles: []
})
export class NzDemoCollapseNoarrowComponent {
panels = [
{
active: true,
- name : 'This is panel header 1',
- arrow : true
+ name: 'This is panel header 1',
+ arrow: true
},
{
active: false,
- arrow : false,
- name : 'This is panel header 2'
+ arrow: false,
+ name: 'This is panel header 2'
}
];
}
diff --git a/components/collapse/nz-collapse-panel.component.ts b/components/collapse/nz-collapse-panel.component.ts
index c6d637932a..b18d9bc0de 100644
--- a/components/collapse/nz-collapse-panel.component.ts
+++ b/components/collapse/nz-collapse-panel.component.ts
@@ -1,11 +1,16 @@
import {
ChangeDetectionStrategy,
ChangeDetectorRef,
- Component, ElementRef,
- EventEmitter, Host,
+ Component,
+ ElementRef,
+ EventEmitter,
+ Host,
HostBinding,
- Input, OnDestroy, OnInit,
- Output, Renderer2,
+ Input,
+ OnDestroy,
+ OnInit,
+ Output,
+ Renderer2,
TemplateRef,
ViewEncapsulation
} from '@angular/core';
@@ -15,21 +20,22 @@ import { InputBoolean } from '../core/util/convert';
import { NzCollapseComponent } from './nz-collapse.component';
@Component({
- selector : 'nz-collapse-panel',
- templateUrl : './nz-collapse-panel.component.html',
+ selector: 'nz-collapse-panel',
+ templateUrl: './nz-collapse-panel.component.html',
changeDetection: ChangeDetectionStrategy.OnPush,
- encapsulation : ViewEncapsulation.None,
- animations : [ collapseMotion ],
- styles : [
- ` nz-collapse-panel {
- display: block
- }`
+ encapsulation: ViewEncapsulation.None,
+ animations: [collapseMotion],
+ styles: [
+ `
+ nz-collapse-panel {
+ display: block;
+ }
+ `
],
- host : {
+ host: {
'[class.ant-collapse-no-arrow]': '!nzShowArrow'
}
})
-
export class NzCollapsePanelComponent implements OnInit, OnDestroy {
@Input() @InputBoolean() @HostBinding('class.ant-collapse-item-active') nzActive = false;
@Input() @InputBoolean() @HostBinding('class.ant-collapse-item-disabled') nzDisabled = false;
@@ -48,7 +54,12 @@ export class NzCollapsePanelComponent implements OnInit, OnDestroy {
this.cdr.markForCheck();
}
- constructor(private cdr: ChangeDetectorRef, @Host() private nzCollapseComponent: NzCollapseComponent, elementRef: ElementRef, renderer: Renderer2) {
+ constructor(
+ private cdr: ChangeDetectorRef,
+ @Host() private nzCollapseComponent: NzCollapseComponent,
+ elementRef: ElementRef,
+ renderer: Renderer2
+ ) {
renderer.addClass(elementRef.nativeElement, 'ant-collapse-item');
}
diff --git a/components/collapse/nz-collapse.component.ts b/components/collapse/nz-collapse.component.ts
index f3ceb74659..d032c14217 100644
--- a/components/collapse/nz-collapse.component.ts
+++ b/components/collapse/nz-collapse.component.ts
@@ -1,21 +1,18 @@
-import {
- ChangeDetectionStrategy,
- Component,
- Input,
- ViewEncapsulation
-} from '@angular/core';
+import { ChangeDetectionStrategy, Component, Input, ViewEncapsulation } from '@angular/core';
import { InputBoolean } from '../core/util/convert';
import { NzCollapsePanelComponent } from './nz-collapse-panel.component';
@Component({
- selector : 'nz-collapse',
- templateUrl : './nz-collapse.component.html',
+ selector: 'nz-collapse',
+ templateUrl: './nz-collapse.component.html',
changeDetection: ChangeDetectionStrategy.OnPush,
- encapsulation : ViewEncapsulation.None,
- styles : [
- `nz-collapse {
- display: block;
- }`
+ encapsulation: ViewEncapsulation.None,
+ styles: [
+ `
+ nz-collapse {
+ display: block;
+ }
+ `
]
})
export class NzCollapseComponent {
@@ -33,13 +30,15 @@ export class NzCollapseComponent {
click(collapse: NzCollapsePanelComponent): void {
if (this.nzAccordion && !collapse.nzActive) {
- this.listOfNzCollapsePanelComponent.filter(item => item !== collapse).forEach(item => {
- if (item.nzActive) {
- item.nzActive = false;
- item.nzActiveChange.emit(item.nzActive);
- item.markForCheck();
- }
- });
+ this.listOfNzCollapsePanelComponent
+ .filter(item => item !== collapse)
+ .forEach(item => {
+ if (item.nzActive) {
+ item.nzActive = false;
+ item.nzActiveChange.emit(item.nzActive);
+ item.markForCheck();
+ }
+ });
}
collapse.nzActive = !collapse.nzActive;
collapse.nzActiveChange.emit(collapse.nzActive);
diff --git a/components/collapse/nz-collapse.module.ts b/components/collapse/nz-collapse.module.ts
index e96dc68517..2363082bbf 100644
--- a/components/collapse/nz-collapse.module.ts
+++ b/components/collapse/nz-collapse.module.ts
@@ -7,10 +7,8 @@ import { NzCollapsePanelComponent } from './nz-collapse-panel.component';
import { NzCollapseComponent } from './nz-collapse.component';
@NgModule({
- declarations: [ NzCollapsePanelComponent, NzCollapseComponent ],
- exports : [ NzCollapsePanelComponent, NzCollapseComponent ],
- imports : [ CommonModule, NzIconModule, NzAddOnModule ]
+ declarations: [NzCollapsePanelComponent, NzCollapseComponent],
+ exports: [NzCollapsePanelComponent, NzCollapseComponent],
+ imports: [CommonModule, NzIconModule, NzAddOnModule]
})
-
-export class NzCollapseModule {
-}
+export class NzCollapseModule {}
diff --git a/components/collapse/nz-collapse.spec.ts b/components/collapse/nz-collapse.spec.ts
index 96a075962b..52347a795c 100644
--- a/components/collapse/nz-collapse.spec.ts
+++ b/components/collapse/nz-collapse.spec.ts
@@ -10,8 +10,8 @@ import { NzCollapseModule } from './nz-collapse.module';
describe('collapse', () => {
beforeEach(fakeAsync(() => {
TestBed.configureTestingModule({
- imports : [ NzCollapseModule, NoopAnimationsModule ],
- declarations: [ NzTestCollapseBasicComponent, NzTestCollapseTemplateComponent, NzTestCollapseIconComponent ]
+ imports: [NzCollapseModule, NoopAnimationsModule],
+ declarations: [NzTestCollapseBasicComponent, NzTestCollapseTemplateComponent, NzTestCollapseIconComponent]
});
TestBed.compileComponents();
}));
@@ -42,92 +42,92 @@ describe('collapse', () => {
});
it('should showArrow work', () => {
fixture.detectChanges();
- expect(panels[ 0 ].nativeElement.querySelector('.ant-collapse-arrow').firstElementChild).toBeDefined();
+ expect(panels[0].nativeElement.querySelector('.ant-collapse-arrow').firstElementChild).toBeDefined();
testComponent.showArrow = false;
fixture.detectChanges();
- expect(panels[ 0 ].nativeElement.querySelector('.ant-collapse-arrow')).toBeNull();
+ expect(panels[0].nativeElement.querySelector('.ant-collapse-arrow')).toBeNull();
});
it('should active work', () => {
fixture.detectChanges();
- expect(panels[ 0 ].nativeElement.classList).not.toContain('ant-collapse-item-active');
+ expect(panels[0].nativeElement.classList).not.toContain('ant-collapse-item-active');
testComponent.active01 = true;
fixture.detectChanges();
- expect(panels[ 0 ].nativeElement.classList).toContain('ant-collapse-item-active');
+ expect(panels[0].nativeElement.classList).toContain('ant-collapse-item-active');
expect(testComponent.active01Change).toHaveBeenCalledTimes(0);
});
it('should click work', () => {
fixture.detectChanges();
- expect(panels[ 0 ].nativeElement.classList).not.toContain('ant-collapse-item-active');
+ expect(panels[0].nativeElement.classList).not.toContain('ant-collapse-item-active');
expect(testComponent.active01).toBe(false);
- panels[ 0 ].nativeElement.querySelector('.ant-collapse-header').click();
+ panels[0].nativeElement.querySelector('.ant-collapse-header').click();
fixture.detectChanges();
expect(testComponent.active01).toBe(true);
- expect(panels[ 0 ].nativeElement.classList).toContain('ant-collapse-item-active');
+ expect(panels[0].nativeElement.classList).toContain('ant-collapse-item-active');
expect(testComponent.active01Change).toHaveBeenCalledTimes(1);
});
it('should disabled work', () => {
testComponent.disabled = true;
fixture.detectChanges();
- expect(panels[ 1 ].nativeElement.classList).not.toContain('ant-collapse-item-active');
+ expect(panels[1].nativeElement.classList).not.toContain('ant-collapse-item-active');
expect(testComponent.active02).toBe(false);
- panels[ 1 ].nativeElement.querySelector('.ant-collapse-header').click();
+ panels[1].nativeElement.querySelector('.ant-collapse-header').click();
fixture.detectChanges();
expect(testComponent.active02).toBe(false);
- expect(panels[ 1 ].nativeElement.classList).toContain('ant-collapse-item-disabled');
- expect(panels[ 1 ].nativeElement.classList).not.toContain('ant-collapse-item-active');
+ expect(panels[1].nativeElement.classList).toContain('ant-collapse-item-disabled');
+ expect(panels[1].nativeElement.classList).not.toContain('ant-collapse-item-active');
expect(testComponent.active02Change).toHaveBeenCalledTimes(0);
});
it('should accordion work', () => {
testComponent.accordion = true;
fixture.detectChanges();
- expect(panels[ 0 ].nativeElement.classList).not.toContain('ant-collapse-item-active');
+ expect(panels[0].nativeElement.classList).not.toContain('ant-collapse-item-active');
expect(testComponent.active01).toBe(false);
- panels[ 0 ].nativeElement.querySelector('.ant-collapse-header').click();
+ panels[0].nativeElement.querySelector('.ant-collapse-header').click();
fixture.detectChanges();
expect(testComponent.active01).toBe(true);
expect(testComponent.active02).toBe(false);
- expect(panels[ 0 ].nativeElement.classList).toContain('ant-collapse-item-active');
- expect(panels[ 1 ].nativeElement.classList).not.toContain('ant-collapse-item-active');
+ expect(panels[0].nativeElement.classList).toContain('ant-collapse-item-active');
+ expect(panels[1].nativeElement.classList).not.toContain('ant-collapse-item-active');
expect(testComponent.active01Change).toHaveBeenCalledTimes(1);
expect(testComponent.active02Change).toHaveBeenCalledTimes(0);
- panels[ 1 ].nativeElement.querySelector('.ant-collapse-header').click();
+ panels[1].nativeElement.querySelector('.ant-collapse-header').click();
fixture.detectChanges();
expect(testComponent.active01).toBe(false);
expect(testComponent.active02).toBe(true);
- expect(panels[ 0 ].nativeElement.classList).not.toContain('ant-collapse-item-active');
- expect(panels[ 1 ].nativeElement.classList).toContain('ant-collapse-item-active');
+ expect(panels[0].nativeElement.classList).not.toContain('ant-collapse-item-active');
+ expect(panels[1].nativeElement.classList).toContain('ant-collapse-item-active');
expect(testComponent.active01Change).toHaveBeenCalledTimes(2);
expect(testComponent.active02Change).toHaveBeenCalledTimes(1);
});
it('should click to fold up work with accordion', () => {
testComponent.accordion = true;
fixture.detectChanges();
- expect(panels[ 0 ].nativeElement.classList).not.toContain('ant-collapse-item-active');
+ expect(panels[0].nativeElement.classList).not.toContain('ant-collapse-item-active');
expect(testComponent.active01).toBe(false);
- panels[ 0 ].nativeElement.querySelector('.ant-collapse-header').click();
+ panels[0].nativeElement.querySelector('.ant-collapse-header').click();
fixture.detectChanges();
- panels[ 1 ].nativeElement.querySelector('.ant-collapse-header').click();
+ panels[1].nativeElement.querySelector('.ant-collapse-header').click();
fixture.detectChanges();
- panels[ 0 ].nativeElement.querySelector('.ant-collapse-header').click();
+ panels[0].nativeElement.querySelector('.ant-collapse-header').click();
fixture.detectChanges();
expect(testComponent.active01).toBe(true);
expect(testComponent.active02).toBe(false);
- expect(panels[ 0 ].nativeElement.classList).toContain('ant-collapse-item-active');
- expect(panels[ 1 ].nativeElement.classList).not.toContain('ant-collapse-item-active');
+ expect(panels[0].nativeElement.classList).toContain('ant-collapse-item-active');
+ expect(panels[1].nativeElement.classList).not.toContain('ant-collapse-item-active');
expect(testComponent.active01Change).toHaveBeenCalledTimes(3);
expect(testComponent.active02Change).toHaveBeenCalledTimes(2);
- panels[ 0 ].nativeElement.querySelector('.ant-collapse-header').click();
+ panels[0].nativeElement.querySelector('.ant-collapse-header').click();
fixture.detectChanges();
expect(testComponent.active01).toBe(false);
expect(testComponent.active02).toBe(false);
- expect(panels[ 0 ].nativeElement.classList).not.toContain('ant-collapse-item-active');
- expect(panels[ 1 ].nativeElement.classList).not.toContain('ant-collapse-item-active');
+ expect(panels[0].nativeElement.classList).not.toContain('ant-collapse-item-active');
+ expect(panels[1].nativeElement.classList).not.toContain('ant-collapse-item-active');
expect(testComponent.active01Change).toHaveBeenCalledTimes(4);
expect(testComponent.active02Change).toHaveBeenCalledTimes(2);
});
it('should header work', () => {
fixture.detectChanges();
- expect(panels[ 0 ].nativeElement.querySelector('.ant-collapse-header').innerText).toBe('string');
+ expect(panels[0].nativeElement.querySelector('.ant-collapse-header').innerText).toBe('string');
});
});
describe('collapse template', () => {
@@ -140,7 +140,7 @@ describe('collapse', () => {
});
it('should header work', () => {
fixture.detectChanges();
- expect(panels[ 0 ].nativeElement.querySelector('.ant-collapse-header').innerText).toBe('template');
+ expect(panels[0].nativeElement.querySelector('.ant-collapse-header').innerText).toBe('template');
});
});
@@ -154,9 +154,9 @@ describe('collapse', () => {
});
it('should icon work', () => {
fixture.detectChanges();
- expect(panels[ 0 ].nativeElement.querySelector('.anticon-right')).toBeDefined();
- expect(panels[ 1 ].nativeElement.querySelector('.anticon-double-right')).toBeDefined();
- expect(panels[ 2 ].nativeElement.querySelector('.anticon-caret-right')).toBeDefined();
+ expect(panels[0].nativeElement.querySelector('.anticon-right')).toBeDefined();
+ expect(panels[1].nativeElement.querySelector('.anticon-double-right')).toBeDefined();
+ expect(panels[2].nativeElement.querySelector('.anticon-caret-right')).toBeDefined();
});
});
});
@@ -166,8 +166,12 @@ describe('collapse', () => {
template: `
template
-
+
@@ -201,8 +205,7 @@ export class NzTestCollapseBasicComponent {
`
})
-export class NzTestCollapseTemplateComponent {
-}
+export class NzTestCollapseTemplateComponent {}
@Component({
selector: 'nz-test-collapse-icon',
@@ -223,5 +226,4 @@ export class NzTestCollapseTemplateComponent {
`
})
-export class NzTestCollapseIconComponent {
-}
+export class NzTestCollapseIconComponent {}
diff --git a/components/comment/demo/basic.ts b/components/comment/demo/basic.ts
index ddb8dd854a..8e86c8d988 100644
--- a/components/comment/demo/basic.ts
+++ b/components/comment/demo/basic.ts
@@ -5,29 +5,50 @@ import { distanceInWords } from 'date-fns';
selector: 'nz-demo-comment-basic',
template: `
-
-
-
- {{likes}}
+
+ {{ likes }}
-
- {{dislikes}}
+
+ {{ dislikes }}
Reply to
`,
- styles : [`
- .count {
- padding-left: 8px;
- cursor: auto;
- }
- `]
+ styles: [
+ `
+ .count {
+ padding-left: 8px;
+ cursor: auto;
+ }
+ `
+ ]
})
export class NzDemoCommentBasicComponent {
likes = 0;
diff --git a/components/comment/demo/editor.ts b/components/comment/demo/editor.ts
index 6fe84bd6aa..40520e56ca 100644
--- a/components/comment/demo/editor.ts
+++ b/components/comment/demo/editor.ts
@@ -9,7 +9,7 @@ import { distanceInWords } from 'date-fns';
-
@@ -28,7 +28,7 @@ import { distanceInWords } from 'date-fns';
`,
- styles : []
+ styles: []
})
export class NzDemoCommentEditorComponent {
data: any[] = [];
@@ -45,12 +45,15 @@ export class NzDemoCommentEditorComponent {
this.inputValue = '';
setTimeout(() => {
this.submitting = false;
- this.data = [...this.data, {
- ...this.user,
- content,
- datetime: new Date(),
- displayTime: distanceInWords(new Date(), new Date())
- }].map(e => {
+ this.data = [
+ ...this.data,
+ {
+ ...this.user,
+ content,
+ datetime: new Date(),
+ displayTime: distanceInWords(new Date(), new Date())
+ }
+ ].map(e => {
return {
...e,
displayTime: distanceInWords(new Date(), e.datetime)
@@ -58,5 +61,4 @@ export class NzDemoCommentEditorComponent {
});
}, 800);
}
-
}
diff --git a/components/comment/demo/list.ts b/components/comment/demo/list.ts
index 2e1ed0687b..95606ab7cd 100644
--- a/components/comment/demo/list.ts
+++ b/components/comment/demo/list.ts
@@ -9,28 +9,30 @@ import { addDays, distanceInWords } from 'date-fns';
-
Reply to
`,
- styles : []
+ styles: []
})
export class NzDemoCommentListComponent {
data = [
{
author: 'Han Solo',
avatar: 'https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png',
- content: 'We supply a series of design principles, practical patterns and high quality design resources' +
+ content:
+ 'We supply a series of design principles, practical patterns and high quality design resources' +
'(Sketch and Axure), to help people create their product prototypes beautifully and efficiently.',
datetime: distanceInWords(new Date(), addDays(new Date(), 1))
},
{
author: 'Han Solo',
avatar: 'https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png',
- content: 'We supply a series of design principles, practical patterns and high quality design resources' +
+ content:
+ 'We supply a series of design principles, practical patterns and high quality design resources' +
'(Sketch and Axure), to help people create their product prototypes beautifully and efficiently.',
datetime: distanceInWords(new Date(), addDays(new Date(), 2))
}
diff --git a/components/comment/demo/nested.ts b/components/comment/demo/nested.ts
index 692f0c788a..161164b8ef 100644
--- a/components/comment/demo/nested.ts
+++ b/components/comment/demo/nested.ts
@@ -7,50 +7,49 @@ import { Component } from '@angular/core';
-
Reply to
-
+
-
-
+
`,
- styles : []
+ styles: []
})
export class NzDemoCommentNestedComponent {
data = {
author: 'Han Solo',
avatar: 'https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png',
- content: 'We supply a series of design principles, practical patterns and high quality design resources' +
+ content:
+ 'We supply a series of design principles, practical patterns and high quality design resources' +
'(Sketch and Axure), to help people create their product prototypes beautifully and efficiently.',
children: [
{
author: 'Han Solo',
avatar: 'https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png',
- content: 'We supply a series of design principles, practical patterns and high quality design resources' +
+ content:
+ 'We supply a series of design principles, practical patterns and high quality design resources' +
'(Sketch and Axure), to help people create their product prototypes beautifully and efficiently.',
children: [
{
author: 'Han Solo',
avatar: 'https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png',
- content: 'We supply a series of design principles, practical patterns and high quality design resources' +
+ content:
+ 'We supply a series of design principles, practical patterns and high quality design resources' +
'(Sketch and Axure), to help people create their product prototypes beautifully and efficiently.'
},
{
author: 'Han Solo',
avatar: 'https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png',
- content: 'We supply a series of design principles, practical patterns and high quality design resources' +
+ content:
+ 'We supply a series of design principles, practical patterns and high quality design resources' +
'(Sketch and Axure), to help people create their product prototypes beautifully and efficiently.'
}
]
diff --git a/components/comment/nz-comment-cells.ts b/components/comment/nz-comment-cells.ts
index 7ec788c526..ff2e4e63e2 100644
--- a/components/comment/nz-comment-cells.ts
+++ b/components/comment/nz-comment-cells.ts
@@ -1,36 +1,36 @@
import { CdkPortalOutlet, TemplatePortal } from '@angular/cdk/portal';
import {
ChangeDetectionStrategy,
- Component, ComponentFactoryResolver,
- Directive, Input, OnDestroy,
+ Component,
+ ComponentFactoryResolver,
+ Directive,
+ Input,
+ OnDestroy,
OnInit,
TemplateRef,
ViewChild,
- ViewContainerRef, ViewEncapsulation
+ ViewContainerRef,
+ ViewEncapsulation
} from '@angular/core';
@Directive({
selector: 'nz-avatar[nz-comment-avatar]'
})
-export class NzCommentAvatarDirective {
-}
+export class NzCommentAvatarDirective {}
@Directive({
selector: 'nz-comment-content, [nz-comment-content]',
- host : { 'class': 'ant-comment-content-detail' }
+ host: { class: 'ant-comment-content-detail' }
})
-export class NzCommentContentDirective {
-}
+export class NzCommentContentDirective {}
@Directive({
selector: '[nzCommentActionHost]'
})
export class NzCommentActionHostDirective extends CdkPortalOutlet implements OnInit, OnDestroy {
-
@Input() nzCommentActionHost: TemplatePortal | null;
- constructor(componentFactoryResolver: ComponentFactoryResolver,
- viewContainerRef: ViewContainerRef) {
+ constructor(componentFactoryResolver: ComponentFactoryResolver, viewContainerRef: ViewContainerRef) {
super(componentFactoryResolver, viewContainerRef);
}
@@ -45,10 +45,10 @@ export class NzCommentActionHostDirective extends CdkPortalOutlet implements OnI
}
@Component({
- selector : 'nz-comment-action',
- encapsulation : ViewEncapsulation.None,
+ selector: 'nz-comment-action',
+ encapsulation: ViewEncapsulation.None,
changeDetection: ChangeDetectionStrategy.OnPush,
- template : ';
@@ -58,9 +58,7 @@ export class NzCommentActionComponent implements OnInit {
return this.contentPortal;
}
- constructor(private viewContainerRef: ViewContainerRef) {
-
- }
+ constructor(private viewContainerRef: ViewContainerRef) {}
ngOnInit(): void {
this.contentPortal = new TemplatePortal(this.implicitContent, this.viewContainerRef);
diff --git a/components/comment/nz-comment.component.ts b/components/comment/nz-comment.component.ts
index 549e502a6b..0832f7662f 100644
--- a/components/comment/nz-comment.component.ts
+++ b/components/comment/nz-comment.component.ts
@@ -10,15 +10,15 @@ import {
import { NzCommentActionComponent as CommentAction } from './nz-comment-cells';
@Component({
- selector : 'nz-comment',
- templateUrl : './nz-comment.component.html',
- encapsulation : ViewEncapsulation.None,
+ selector: 'nz-comment',
+ templateUrl: './nz-comment.component.html',
+ encapsulation: ViewEncapsulation.None,
changeDetection: ChangeDetectionStrategy.OnPush,
- host : {
- 'class': 'ant-comment'
+ host: {
+ class: 'ant-comment'
},
- styles : [
- `
+ styles: [
+ `
nz-comment {
display: block;
}
@@ -30,12 +30,9 @@ import { NzCommentActionComponent as CommentAction } from './nz-comment-cells';
]
})
export class NzCommentComponent {
-
@Input() nzAuthor: string | TemplateRef;
@Input() nzDatetime: string | TemplateRef;
@ContentChildren(CommentAction) actions: QueryList;
- constructor() {
- }
-
+ constructor() {}
}
diff --git a/components/comment/nz-comment.module.ts b/components/comment/nz-comment.module.ts
index 5d17d71830..b084b41287 100644
--- a/components/comment/nz-comment.module.ts
+++ b/components/comment/nz-comment.module.ts
@@ -17,12 +17,8 @@ const NZ_COMMENT_CELLS = [
];
@NgModule({
- imports : [
- CommonModule,
- NzAddOnModule
- ],
- exports : [ NzCommentComponent, ...NZ_COMMENT_CELLS ],
- declarations: [ NzCommentComponent, ...NZ_COMMENT_CELLS ]
+ imports: [CommonModule, NzAddOnModule],
+ exports: [NzCommentComponent, ...NZ_COMMENT_CELLS],
+ declarations: [NzCommentComponent, ...NZ_COMMENT_CELLS]
})
-export class NzCommentModule {
-}
+export class NzCommentModule {}
diff --git a/components/comment/nz-comment.spec.ts b/components/comment/nz-comment.spec.ts
index 1a44cace53..3428ce919e 100644
--- a/components/comment/nz-comment.spec.ts
+++ b/components/comment/nz-comment.spec.ts
@@ -11,19 +11,17 @@ import { NzCommentComponent } from './nz-comment.component';
import { NzCommentModule } from './nz-comment.module';
describe('NzCommentComponent', () => {
-
beforeEach(async(() => {
TestBed.configureTestingModule({
- imports : [ NzCommentModule, NzListModule ],
- schemas : [ NO_ERRORS_SCHEMA ],
+ imports: [NzCommentModule, NzListModule],
+ schemas: [NO_ERRORS_SCHEMA],
declarations: [
NzDemoCommentBasicComponent,
NzDemoCommentEditorComponent,
NzDemoCommentListComponent,
NzDemoCommentNestedComponent
]
- })
- .compileComponents();
+ }).compileComponents();
}));
it('should basic work', () => {
@@ -51,24 +49,36 @@ describe('NzCommentComponent', () => {
expect(component.dislikes).toBe(0);
expect(comment.nativeElement.classList).toContain('ant-comment');
expect(comment.nativeElement.querySelectorAll('.ant-comment-actions li>span').length).toBe(3);
- expect(comment.nativeElement.querySelector('.ant-comment-actions li>span .like').innerText).toBe(component.likes.toString());
- expect(comment.nativeElement.querySelector('.ant-comment-actions li>span .dislike').innerText).toBe(component.dislikes.toString());
+ expect(comment.nativeElement.querySelector('.ant-comment-actions li>span .like').innerText).toBe(
+ component.likes.toString()
+ );
+ expect(comment.nativeElement.querySelector('.ant-comment-actions li>span .dislike').innerText).toBe(
+ component.dislikes.toString()
+ );
component.like();
fixture.detectChanges();
expect(component.likes).toBe(1);
expect(component.dislikes).toBe(0);
- expect(comment.nativeElement.querySelector('.ant-comment-actions li>span .like').innerText).toBe(component.likes.toString());
- expect(comment.nativeElement.querySelector('.ant-comment-actions li>span .dislike').innerText).toBe(component.dislikes.toString());
+ expect(comment.nativeElement.querySelector('.ant-comment-actions li>span .like').innerText).toBe(
+ component.likes.toString()
+ );
+ expect(comment.nativeElement.querySelector('.ant-comment-actions li>span .dislike').innerText).toBe(
+ component.dislikes.toString()
+ );
component.dislike();
fixture.detectChanges();
expect(component.likes).toBe(0);
expect(component.dislikes).toBe(1);
- expect(comment.nativeElement.querySelector('.ant-comment-actions li>span .like').innerText).toBe(component.likes.toString());
- expect(comment.nativeElement.querySelector('.ant-comment-actions li>span .dislike').innerText).toBe(component.dislikes.toString());
+ expect(comment.nativeElement.querySelector('.ant-comment-actions li>span .like').innerText).toBe(
+ component.likes.toString()
+ );
+ expect(comment.nativeElement.querySelector('.ant-comment-actions li>span .dislike').innerText).toBe(
+ component.dislikes.toString()
+ );
});
it('should list work', () => {
@@ -80,18 +90,17 @@ describe('NzCommentComponent', () => {
expect(component.data.length === comments.length).toBeTruthy();
component.data.forEach((e, i) => {
- const comment = comments[ i ];
+ const comment = comments[i];
expect(comment.nativeElement.querySelector('nz-avatar[nz-comment-avatar]')).toBeTruthy();
expect(comment.nativeElement.querySelector('.ant-comment-content-author-name').innerText).toBe(e.author);
expect(comment.nativeElement.querySelector('.ant-comment-content-detail p').innerText).toBe(e.content);
expect(comment.nativeElement.querySelector('.ant-comment-content-author-time').innerText).toBe(e.datetime);
});
- component.data = [ { ...component.data[ 0 ] } ];
+ component.data = [{ ...component.data[0] }];
fixture.detectChanges();
comments = fixture.debugElement.queryAll(By.directive(NzCommentComponent));
expect(component.data.length === comments.length).toBeTruthy();
-
});
it('should editor work', fakeAsync(() => {
@@ -116,13 +125,12 @@ describe('NzCommentComponent', () => {
comments = fixture.debugElement.queryAll(By.css('nz-list nz-comment'));
component.data.forEach((e, i) => {
- const comment = comments[ i ];
+ const comment = comments[i];
expect(comment.nativeElement.querySelector('nz-avatar[nz-comment-avatar]')).toBeTruthy();
expect(comment.nativeElement.querySelector('.ant-comment-content-author-name').innerText).toBe(e.author);
expect(comment.nativeElement.querySelector('.ant-comment-content-detail p').innerText).toBe(e.content);
expect(comment.nativeElement.querySelector('.ant-comment-content-author-time').innerText).toBe(e.displayTime);
});
-
}));
it('should nested work', () => {
@@ -137,7 +145,5 @@ describe('NzCommentComponent', () => {
const levelThreeComments = levelTwoComment.queryAll(By.directive(NzCommentComponent));
expect(levelThreeComments.length).toBe(2);
-
});
-
});
diff --git a/components/date-picker/abstract-picker.component.ts b/components/date-picker/abstract-picker.component.ts
index 2cdf68b917..2cb87f20e9 100644
--- a/components/date-picker/abstract-picker.component.ts
+++ b/components/date-picker/abstract-picker.component.ts
@@ -21,7 +21,7 @@ import { NzI18nService } from '../i18n/nz-i18n.service';
import { CandyDate } from './lib/candy-date';
import { NzPickerComponent } from './picker.component';
-const POPUP_STYLE_PATCH = { 'position': 'relative' }; // Aim to override antd's style to support overlay's position strategy (position:absolute will cause it not working beacuse the overlay can't get the height/width of it's content)
+const POPUP_STYLE_PATCH = { position: 'relative' }; // Aim to override antd's style to support overlay's position strategy (position:absolute will cause it not working beacuse the overlay can't get the height/width of it's content)
/**
* The base picker for all common APIs
@@ -60,14 +60,17 @@ export abstract class AbstractPickerComponent implements OnInit, OnChanges, OnDe
protected destroyed$: Subject = new Subject();
protected isCustomPlaceHolder: boolean = false;
- constructor(protected i18n: NzI18nService, protected cdr: ChangeDetectorRef, protected dateHelper: DateHelperService, public noAnimation?: NzNoAnimationDirective) { }
+ constructor(
+ protected i18n: NzI18nService,
+ protected cdr: ChangeDetectorRef,
+ protected dateHelper: DateHelperService,
+ public noAnimation?: NzNoAnimationDirective
+ ) {}
ngOnInit(): void {
// Subscribe the every locale change if the nzLocale is not handled by user
if (!this.nzLocale) {
- this.i18n.localeChange
- .pipe(takeUntil(this.destroyed$))
- .subscribe(() => this.setLocale());
+ this.i18n.localeChange.pipe(takeUntil(this.destroyed$)).subscribe(() => this.setLocale());
}
// Default value
@@ -75,7 +78,8 @@ export abstract class AbstractPickerComponent implements OnInit, OnChanges, OnDe
}
ngOnChanges(changes: SimpleChanges): void {
- if (changes.nzPopupStyle) { // Always assign the popup style patch
+ if (changes.nzPopupStyle) {
+ // Always assign the popup style patch
this.nzPopupStyle = this.nzPopupStyle ? { ...this.nzPopupStyle, ...POPUP_STYLE_PATCH } : POPUP_STYLE_PATCH;
}
@@ -84,7 +88,8 @@ export abstract class AbstractPickerComponent implements OnInit, OnChanges, OnDe
this.isCustomPlaceHolder = true;
}
- if (changes.nzLocale) { // The nzLocale is currently handled by user
+ if (changes.nzLocale) {
+ // The nzLocale is currently handled by user
this.setDefaultPlaceHolder();
}
}
@@ -107,7 +112,7 @@ export abstract class AbstractPickerComponent implements OnInit, OnChanges, OnDe
if (this.isRange) {
const vAsRange = this.nzValue as CandyDate[];
if (vAsRange.length) {
- this.onChangeFn([ vAsRange[ 0 ].nativeDate, vAsRange[ 1 ].nativeDate ]);
+ this.onChangeFn([vAsRange[0].nativeDate, vAsRange[1].nativeDate]);
} else {
this.onChangeFn([]);
}
@@ -142,11 +147,13 @@ export abstract class AbstractPickerComponent implements OnInit, OnChanges, OnDe
this.cdr.markForCheck();
}
- registerOnChange(fn: any): void { // tslint:disable-line:no-any
+ // tslint:disable-next-line:no-any
+ registerOnChange(fn: any): void {
this.onChangeFn = fn;
}
- registerOnTouched(fn: any): void { // tslint:disable-line:no-any
+ // tslint:disable-next-line:no-any
+ registerOnTouched(fn: any): void {
this.onTouchedFn = fn;
}
diff --git a/components/date-picker/date-picker.component.spec.ts b/components/date-picker/date-picker.component.spec.ts
index f542c5771f..8e4e887406 100644
--- a/components/date-picker/date-picker.component.spec.ts
+++ b/components/date-picker/date-picker.component.spec.ts
@@ -28,13 +28,11 @@ describe('NzDatePickerComponent', () => {
beforeEach(fakeAsync(() => {
TestBed.configureTestingModule({
- imports : [ FormsModule, NoopAnimationsModule, NzDatePickerModule, NzI18nModule ],
- providers : [
+ imports: [FormsModule, NoopAnimationsModule, NzDatePickerModule, NzI18nModule],
+ providers: [
// { provide: NZ_DATE_CONFIG, useValue: { firstDayOfWeek: 1 } }
],
- declarations: [
- NzTestDatePickerComponent
- ]
+ declarations: [NzTestDatePickerComponent]
});
TestBed.compileComponents();
@@ -46,7 +44,7 @@ describe('NzDatePickerComponent', () => {
debugElement = fixture.debugElement;
});
- beforeEach(inject([ OverlayContainer, NzI18nService ], (oc: OverlayContainer, i18n: NzI18nService) => {
+ beforeEach(inject([OverlayContainer, NzI18nService], (oc: OverlayContainer, i18n: NzI18nService) => {
overlayContainer = oc;
overlayContainerElement = oc.getContainerElement();
i18nService = i18n;
@@ -57,7 +55,7 @@ describe('NzDatePickerComponent', () => {
});
describe('general api testing', () => {
- beforeEach(() => fixtureInstance.useSuite = 1);
+ beforeEach(() => (fixtureInstance.useSuite = 1));
it('should open by click and close by click at outside', fakeAsync(() => {
fixture.detectChanges();
@@ -86,7 +84,9 @@ describe('NzDatePickerComponent', () => {
fixture.detectChanges();
tick(500);
fixture.detectChanges();
- expect((queryFromOverlay('.ant-calendar-date-input-wrap input.ant-calendar-input') as HTMLInputElement).placeholder).toBe('Select date');
+ expect(
+ (queryFromOverlay('.ant-calendar-date-input-wrap input.ant-calendar-input') as HTMLInputElement).placeholder
+ ).toBe('Select date');
expect(queryFromOverlay('.ant-calendar-table .ant-calendar-column-header-inner').textContent).toContain('Su');
}));
@@ -114,7 +114,7 @@ describe('NzDatePickerComponent', () => {
it('should support nzAllowClear and work properly', fakeAsync(() => {
const clearBtnSelector = By.css('nz-picker i.ant-calendar-picker-clear');
- const initial = fixtureInstance.nzValue = new Date();
+ const initial = (fixtureInstance.nzValue = new Date());
fixtureInstance.nzAllowClear = false;
fixture.detectChanges();
expect(debugElement.query(clearBtnSelector)).toBeFalsy();
@@ -180,7 +180,7 @@ describe('NzDatePickerComponent', () => {
}));
it('should support nzClassName', () => {
- const className = fixtureInstance.nzClassName = 'my-test-class';
+ const className = (fixtureInstance.nzClassName = 'my-test-class');
fixture.detectChanges();
const picker = debugElement.queryAll(By.css('.ant-calendar-picker'))[1].nativeElement as HTMLElement;
expect(picker.classList.contains(className)).toBeTruthy();
@@ -208,7 +208,7 @@ describe('NzDatePickerComponent', () => {
});
it('should support nzPlaceHolder', () => {
- const featureKey = fixtureInstance.nzPlaceHolder = 'TEST_PLACEHOLDER';
+ const featureKey = (fixtureInstance.nzPlaceHolder = 'TEST_PLACEHOLDER');
fixture.detectChanges();
expect(getPickerTrigger().getAttribute('placeholder')).toBe(featureKey);
});
@@ -224,7 +224,7 @@ describe('NzDatePickerComponent', () => {
}));
it('should support nzDropdownClassName', fakeAsync(() => {
- const keyCls = fixtureInstance.nzDropdownClassName = 'my-test-class';
+ const keyCls = (fixtureInstance.nzDropdownClassName = 'my-test-class');
fixture.detectChanges();
dispatchMouseEvent(getPickerTriggerWrapper(), 'click');
fixture.detectChanges();
@@ -312,14 +312,13 @@ describe('NzDatePickerComponent', () => {
tick(500);
fixture.detectChanges();
expect(nzOnChange).toHaveBeenCalled();
- const result = nzOnChange.calls.allArgs()[ 0 ][ 0 ];
+ const result = nzOnChange.calls.allArgs()[0][0];
expect(result.getDate()).toBe(+cellText);
}));
-
});
describe('panel switch and move forward/afterward', () => {
- beforeEach(() => fixtureInstance.useSuite = 1);
+ beforeEach(() => (fixtureInstance.useSuite = 1));
it('should support date panel changes', fakeAsync(() => {
fixtureInstance.nzValue = new Date('2018-11-11');
@@ -373,13 +372,17 @@ describe('NzDatePickerComponent', () => {
tick(500);
fixture.detectChanges();
expect(queryFromOverlay('.ant-calendar-header .ant-calendar-month-panel')).toBeDefined();
- expect(queryFromOverlay('.ant-calendar-month-panel-year-select-content').textContent!.indexOf('2018') > -1).toBeTruthy();
+ expect(
+ queryFromOverlay('.ant-calendar-month-panel-year-select-content').textContent!.indexOf('2018') > -1
+ ).toBeTruthy();
// Goto previous year
dispatchMouseEvent(queryFromOverlay('.ant-calendar-month-panel-prev-year-btn'), 'click');
fixture.detectChanges();
tick(500);
fixture.detectChanges();
- expect(queryFromOverlay('.ant-calendar-month-panel-year-select-content').textContent!.indexOf('2017') > -1).toBeTruthy();
+ expect(
+ queryFromOverlay('.ant-calendar-month-panel-year-select-content').textContent!.indexOf('2017') > -1
+ ).toBeTruthy();
// Goto next year * 2
dispatchMouseEvent(queryFromOverlay('.ant-calendar-month-panel-next-year-btn'), 'click');
fixture.detectChanges();
@@ -389,7 +392,9 @@ describe('NzDatePickerComponent', () => {
fixture.detectChanges();
tick(500);
fixture.detectChanges();
- expect(queryFromOverlay('.ant-calendar-month-panel-year-select-content').textContent!.indexOf('2019') > -1).toBeTruthy();
+ expect(
+ queryFromOverlay('.ant-calendar-month-panel-year-select-content').textContent!.indexOf('2019') > -1
+ ).toBeTruthy();
// Click to choose a year to change panel
dispatchMouseEvent(queryFromOverlay('td.ant-calendar-month-panel-selected-cell'), 'click');
fixture.detectChanges();
@@ -410,8 +415,12 @@ describe('NzDatePickerComponent', () => {
tick(500);
fixture.detectChanges();
expect(queryFromOverlay('.ant-calendar-header .ant-calendar-year-panel')).toBeDefined();
- expect(queryFromOverlay('.ant-calendar-year-panel-decade-select-content').textContent!.indexOf('2010') > -1).toBeTruthy();
- expect(queryFromOverlay('.ant-calendar-year-panel-decade-select-content').textContent!.indexOf('2019') > -1).toBeTruthy();
+ expect(
+ queryFromOverlay('.ant-calendar-year-panel-decade-select-content').textContent!.indexOf('2010') > -1
+ ).toBeTruthy();
+ expect(
+ queryFromOverlay('.ant-calendar-year-panel-decade-select-content').textContent!.indexOf('2019') > -1
+ ).toBeTruthy();
// Coverage for last/next cell
dispatchMouseEvent(queryFromOverlay('.ant-calendar-year-panel-last-decade-cell'), 'click');
fixture.detectChanges();
@@ -426,8 +435,12 @@ describe('NzDatePickerComponent', () => {
fixture.detectChanges();
tick(500);
fixture.detectChanges();
- expect(queryFromOverlay('.ant-calendar-year-panel-decade-select-content').textContent!.indexOf('2000') > -1).toBeTruthy();
- expect(queryFromOverlay('.ant-calendar-year-panel-decade-select-content').textContent!.indexOf('2009') > -1).toBeTruthy();
+ expect(
+ queryFromOverlay('.ant-calendar-year-panel-decade-select-content').textContent!.indexOf('2000') > -1
+ ).toBeTruthy();
+ expect(
+ queryFromOverlay('.ant-calendar-year-panel-decade-select-content').textContent!.indexOf('2009') > -1
+ ).toBeTruthy();
// Goto next decade * 2
dispatchMouseEvent(queryFromOverlay('.ant-calendar-year-panel-next-decade-btn'), 'click');
fixture.detectChanges();
@@ -437,8 +450,12 @@ describe('NzDatePickerComponent', () => {
fixture.detectChanges();
tick(500);
fixture.detectChanges();
- expect(queryFromOverlay('.ant-calendar-year-panel-decade-select-content').textContent!.indexOf('2020') > -1).toBeTruthy();
- expect(queryFromOverlay('.ant-calendar-year-panel-decade-select-content').textContent!.indexOf('2029') > -1).toBeTruthy();
+ expect(
+ queryFromOverlay('.ant-calendar-year-panel-decade-select-content').textContent!.indexOf('2020') > -1
+ ).toBeTruthy();
+ expect(
+ queryFromOverlay('.ant-calendar-year-panel-decade-select-content').textContent!.indexOf('2029') > -1
+ ).toBeTruthy();
// Click to choose a year to change panel
dispatchMouseEvent(queryFromOverlay('td.ant-calendar-year-panel-selected-cell'), 'click');
fixture.detectChanges();
@@ -497,11 +514,10 @@ describe('NzDatePickerComponent', () => {
fixture.detectChanges();
expect(queryFromOverlay('.ant-calendar-header .ant-calendar-year-panel')).toBeDefined();
}));
-
}); // /panel switch and move forward/afterward
describe('specified date picker testing', () => {
- beforeEach(() => fixtureInstance.useSuite = 1);
+ beforeEach(() => (fixtureInstance.useSuite = 1));
it('should support nzDateRender', fakeAsync(() => {
fixtureInstance.nzDateRender = fixtureInstance.tplDateRender;
@@ -515,7 +531,7 @@ describe('NzDatePickerComponent', () => {
it('should support nzDateRender with typeof function', fakeAsync(() => {
const featureKey = 'TEST_FIRST_DAY';
- fixtureInstance.nzDateRender = (d: Date) => d.getDate() === 1 ? featureKey : d.getDate();
+ fixtureInstance.nzDateRender = (d: Date) => (d.getDate() === 1 ? featureKey : d.getDate());
fixture.detectChanges();
dispatchMouseEvent(getPickerTriggerWrapper(), 'click');
fixture.detectChanges();
@@ -540,7 +556,11 @@ describe('NzDatePickerComponent', () => {
tick(500);
fixture.detectChanges();
expect(queryFromOverlay('.ant-calendar-time-picker-inner.ant-calendar-time-picker-column-3')).toBeDefined();
- expect(queryFromOverlay('.ant-calendar-time-picker-select:first-child li.ant-calendar-time-picker-select-option-selected').textContent!.trim()).toBe('11');
+ expect(
+ queryFromOverlay(
+ '.ant-calendar-time-picker-select:first-child li.ant-calendar-time-picker-select-option-selected'
+ ).textContent!.trim()
+ ).toBe('11');
// Click to choose a hour
dispatchMouseEvent(queryFromOverlay('.ant-calendar-time-picker-select:first-child li:first-child'), 'click');
@@ -567,9 +587,9 @@ describe('NzDatePickerComponent', () => {
fixtureInstance.nzShowTime = true;
fixtureInstance.nzDisabledTime = () => {
return {
- nzDisabledHours : () => [ 0, 1, 2 ],
- nzDisabledMinutes: () => [ 0, 1 ],
- nzDisabledSeconds: () => [ 0 ]
+ nzDisabledHours: () => [0, 1, 2],
+ nzDisabledMinutes: () => [0, 1],
+ nzDisabledSeconds: () => [0]
};
};
fixture.detectChanges();
@@ -580,16 +600,34 @@ describe('NzDatePickerComponent', () => {
fixture.detectChanges();
tick(500);
fixture.detectChanges();
- expect(queryFromOverlay('.ant-calendar-time-picker-select:nth-child(1) li:nth-child(3)').classList.contains('ant-calendar-time-picker-select-option-disabled')).toBeTruthy();
- expect(queryFromOverlay('.ant-calendar-time-picker-select:nth-child(2) li:nth-child(2)').classList.contains('ant-calendar-time-picker-select-option-disabled')).toBeTruthy();
- expect(queryFromOverlay('.ant-calendar-time-picker-select:nth-child(3) li:nth-child(1)').classList.contains('ant-calendar-time-picker-select-option-disabled')).toBeTruthy();
+ expect(
+ queryFromOverlay('.ant-calendar-time-picker-select:nth-child(1) li:nth-child(3)').classList.contains(
+ 'ant-calendar-time-picker-select-option-disabled'
+ )
+ ).toBeTruthy();
+ expect(
+ queryFromOverlay('.ant-calendar-time-picker-select:nth-child(2) li:nth-child(2)').classList.contains(
+ 'ant-calendar-time-picker-select-option-disabled'
+ )
+ ).toBeTruthy();
+ expect(
+ queryFromOverlay('.ant-calendar-time-picker-select:nth-child(3) li:nth-child(1)').classList.contains(
+ 'ant-calendar-time-picker-select-option-disabled'
+ )
+ ).toBeTruthy();
// Use nzHideDisabledOptions to hide disabled times
fixtureInstance.nzShowTime = { nzHideDisabledOptions: true };
fixture.detectChanges();
- expect(+queryFromOverlay('.ant-calendar-time-picker-select:nth-child(1) li:first-child').textContent!.trim()).toBe(3);
- expect(+queryFromOverlay('.ant-calendar-time-picker-select:nth-child(2) li:first-child').textContent!.trim()).toBe(2);
- expect(+queryFromOverlay('.ant-calendar-time-picker-select:nth-child(3) li:first-child').textContent!.trim()).toBe(1);
+ expect(
+ +queryFromOverlay('.ant-calendar-time-picker-select:nth-child(1) li:first-child').textContent!.trim()
+ ).toBe(3);
+ expect(
+ +queryFromOverlay('.ant-calendar-time-picker-select:nth-child(2) li:first-child').textContent!.trim()
+ ).toBe(2);
+ expect(
+ +queryFromOverlay('.ant-calendar-time-picker-select:nth-child(3) li:first-child').textContent!.trim()
+ ).toBe(1);
}));
it('should support nzRenderExtraFooter', fakeAsync(() => {
@@ -619,7 +657,7 @@ describe('NzDatePickerComponent', () => {
fixture.detectChanges();
tick(500);
fixture.detectChanges();
- const result = nzOnChange.calls.allArgs()[ 0 ][ 0 ];
+ const result = nzOnChange.calls.allArgs()[0][0];
expect(isSameDay(new Date(), result)).toBeTruthy();
expect(queryFromOverlay('.ant-calendar-picker-container')).toBeFalsy(); // Should closed
}));
@@ -637,7 +675,10 @@ describe('NzDatePickerComponent', () => {
openPickerByClickTrigger();
// Click header to month panel
- dispatchMouseEvent(overlayContainerElement.querySelector('.ant-calendar-header .ant-calendar-month-select')!, 'click');
+ dispatchMouseEvent(
+ overlayContainerElement.querySelector('.ant-calendar-header .ant-calendar-month-select')!,
+ 'click'
+ );
fixture.detectChanges();
tick(500);
fixture.detectChanges();
@@ -683,14 +724,13 @@ describe('NzDatePickerComponent', () => {
flush();
fixture.detectChanges();
expect(nzOnChange).toHaveBeenCalled();
- const result = nzOnChange.calls.allArgs()[ 0 ][ 0 ];
+ const result = nzOnChange.calls.allArgs()[0][0];
expect(result.getDate()).toBe(22);
}));
-
}); // /specified date picker testing
describe('ngModel value accesors', () => {
- beforeEach(() => fixtureInstance.useSuite = 3);
+ beforeEach(() => (fixtureInstance.useSuite = 3));
it('should specified date provide by "modelValue" be choosed', fakeAsync(() => {
fixtureInstance.modelValue = new Date('2018-11-11');
@@ -744,14 +784,14 @@ describe('NzDatePickerComponent', () => {
tick(500);
fixture.detectChanges();
}
-
});
@Component({
template: `
- {
- ();
private _showTime: object | boolean;
- @Input() get nzShowTime(): object | boolean { return this._showTime; }
+ @Input() get nzShowTime(): object | boolean {
+ return this._showTime;
+ }
set nzShowTime(value: object | boolean) {
this._showTime = typeof value === 'object' ? value : toBoolean(value);
}
@Output() readonly nzOnOk = new EventEmitter();
- get realShowToday(): boolean { // Range not support nzShowToday currently
+ get realShowToday(): boolean {
+ // Range not support nzShowToday currently
return !this.isRange && this.nzShowToday;
}
pickerStyle: object; // Final picker style that contains width fix corrections etc.
extraFooter: TemplateRef | string;
- constructor(i18n: NzI18nService, cdr: ChangeDetectorRef, dateHelper: DateHelperService, noAnimation?: NzNoAnimationDirective) {
+ constructor(
+ i18n: NzI18nService,
+ cdr: ChangeDetectorRef,
+ dateHelper: DateHelperService,
+ noAnimation?: NzNoAnimationDirective
+ ) {
super(i18n, cdr, dateHelper, noAnimation);
}
@@ -86,7 +104,7 @@ export class DateRangePickerComponent extends AbstractPickerComponent implements
if (this.isRange) {
const value = this.nzValue as CandyDate[];
if (value.length) {
- this.nzOnOk.emit([ value[ 0 ].nativeDate, value[ 1 ].nativeDate ]);
+ this.nzOnOk.emit([value[0].nativeDate, value[1].nativeDate]);
} else {
this.nzOnOk.emit([]);
}
diff --git a/components/date-picker/demo/basic.ts b/components/date-picker/demo/basic.ts
index a957180ced..dbac78452c 100644
--- a/components/date-picker/demo/basic.ts
+++ b/components/date-picker/demo/basic.ts
@@ -6,24 +6,33 @@ import { en_US, zh_CN, NzI18nService } from 'ng-zorro-antd';
selector: 'nz-demo-date-picker-basic',
template: `
-
+
+
+
+
+
`, - styles : [ ` - nz-date-picker, nz-month-picker, nz-year-picker, nz-range-picker, nz-week-picker { - margin: 0 8px 12px 0; - } - ` ] + styles: [ + ` + nz-date-picker, + nz-month-picker, + nz-year-picker, + nz-range-picker, + nz-week-picker { + margin: 0 8px 12px 0; + } + ` + ] }) - export class NzDemoDatePickerBasicComponent { date = null; // new Date(); dateRange = []; // [ new Date(), addDays(new Date(), 3) ]; diff --git a/components/date-picker/demo/date-render.ts b/components/date-picker/demo/date-render.ts index 23d77b6785..8191138974 100644 --- a/components/date-picker/demo/date-render.ts +++ b/components/date-picker/demo/date-render.ts @@ -12,16 +12,19 @@ import { Component } from '@angular/core';
`,
- styles : [ `
- nz-date-picker, nz-month-picker, nz-range-picker, nz-week-picker {
- margin: 0 8px 12px 0;
- }
- .border{
- border: 1px solid #1890ff;
- border-radius: 50%;
- }
- ` ]
+ styles: [
+ `
+ nz-date-picker,
+ nz-month-picker,
+ nz-range-picker,
+ nz-week-picker {
+ margin: 0 8px 12px 0;
+ }
+ .border {
+ border: 1px solid #1890ff;
+ border-radius: 50%;
+ }
+ `
+ ]
})
-
-export class NzDemoDatePickerDateRenderComponent {
-}
+export class NzDemoDatePickerDateRenderComponent {}
diff --git a/components/date-picker/demo/disabled-date.ts b/components/date-picker/demo/disabled-date.ts
index b95cffd877..e863b9bdb8 100644
--- a/components/date-picker/demo/disabled-date.ts
+++ b/components/date-picker/demo/disabled-date.ts
@@ -9,13 +9,14 @@ import setHours from 'date-fns/set_hours';
nzFormat="yyyy-MM-dd HH:mm:ss"
[nzDisabledDate]="disabledDate"
[nzDisabledTime]="disabledDateTime"
- [nzShowTime]="{ nzDefaultOpenValue: timeDefaultValue }">
+ [nzShowTime]="{ nzDefaultOpenValue: timeDefaultValue }"
+ >
- {{ panel.name }}
+A dog is a type of domesticated animal. Known for its loyalty and faithfulness, it can be found as a welcome guest in many households across the world.
++ A dog is a type of domesticated animal. Known for its loyalty and faithfulness, it can be found as a + welcome guest in many households across the world. +
A dog is a type of domesticated animal. Known for its loyalty and faithfulness, it can be found as a welcome guest in many households across the world.
++ A dog is a type of domesticated animal. Known for its loyalty and faithfulness, it can be found as a welcome + guest in many households across the world. +
Panel01
We supply a series of design principles, practical patterns and high quality design resources - (Sketch and Axure), to help people create their product prototypes beautifully and efficiently. +
+ We supply a series of design principles, practical patterns and high quality design resources (Sketch and + Axure), to help people create their product prototypes beautifully and efficiently.
{{item.content}}
+{{ item.content }}
{{item.content}}
+{{ item.content }}
{{comment.content}}
+{{ comment.content }}
-
+
+
+
+
+
`, - styles : [ ` - nz-date-picker, nz-month-picker, nz-year-picker, nz-range-picker, nz-week-picker { - margin: 0 8px 12px 0; - } - ` ] + styles: [ + ` + nz-date-picker, + nz-month-picker, + nz-year-picker, + nz-range-picker, + nz-week-picker { + margin: 0 8px 12px 0; + } + ` + ] }) - export class NzDemoDatePickerBasicComponent { date = null; // new Date(); dateRange = []; // [ new Date(), addDays(new Date(), 3) ]; diff --git a/components/date-picker/demo/date-render.ts b/components/date-picker/demo/date-render.ts index 23d77b6785..8191138974 100644 --- a/components/date-picker/demo/date-render.ts +++ b/components/date-picker/demo/date-render.ts @@ -12,16 +12,19 @@ import { Component } from '@angular/core';
+
+
+
+
+
+
+
+
+
-
Add
-
`
})
-
-export class NzDemoDividerHorizontalComponent {
-
-}
+export class NzDemoDividerHorizontalComponent {}
diff --git a/components/divider/demo/orientation.ts b/components/divider/demo/orientation.ts
index 7e4d40501f..d2995339d4 100644
--- a/components/divider/demo/orientation.ts
+++ b/components/divider/demo/orientation.ts
@@ -5,13 +5,16 @@ import { Component } from '@angular/core';
template: `
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo.
++ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae + sunt a te dicta? Refert tamen, quo modo. +
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo.
++ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae + sunt a te dicta? Refert tamen, quo modo. +
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo.
++ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae + sunt a te dicta? Refert tamen, quo modo. +
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo.
++ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae + sunt a te dicta? Refert tamen, quo modo. +
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo.
++ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae + sunt a te dicta? Refert tamen, quo modo. +
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo.
++ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae + sunt a te dicta? Refert tamen, quo modo. +
Text
+
`
})
-
-export class NzDemoDividerVerticalComponent {
-
-}
+export class NzDemoDividerVerticalComponent {}
diff --git a/components/divider/divider.spec.ts b/components/divider/divider.spec.ts
index 90d8079d38..5a3ee8f4a9 100644
--- a/components/divider/divider.spec.ts
+++ b/components/divider/divider.spec.ts
@@ -13,8 +13,8 @@ describe('divider', () => {
let dl: DebugElement;
beforeEach(() => {
TestBed.configureTestingModule({
- imports: [ NzDividerModule, NzIconTestModule ],
- declarations: [ TestDividerComponent, TestDividerTextTemplateComponent ]
+ imports: [NzDividerModule, NzIconTestModule],
+ declarations: [TestDividerComponent, TestDividerTextTemplateComponent]
}).compileComponents();
fixture = TestBed.createComponent(TestDividerComponent);
context = fixture.componentInstance;
@@ -23,7 +23,7 @@ describe('divider', () => {
});
describe('#nzDashed', () => {
- for (const value of [ true, false ]) {
+ for (const value of [true, false]) {
it(`[${value}]`, () => {
context.nzDashed = value;
fixture.detectChanges();
@@ -33,7 +33,7 @@ describe('divider', () => {
});
describe('#nzType', () => {
- for (const value of [ 'horizontal', 'vertical' ]) {
+ for (const value of ['horizontal', 'vertical']) {
it(`[${value}]`, () => {
context.nzType = value;
fixture.detectChanges();
@@ -43,7 +43,7 @@ describe('divider', () => {
});
describe('#nzText', () => {
- for (const item of [ { text: 'with text', ret: true }, { text: undefined, ret: false } ]) {
+ for (const item of [{ text: 'with text', ret: true }, { text: undefined, ret: false }]) {
it(`[${item.text}]`, () => {
context.nzText = item.text;
fixture.detectChanges();
@@ -60,7 +60,7 @@ describe('divider', () => {
});
describe('#nzOrientation', () => {
- [ 'left', 'right' ].forEach(type => {
+ ['left', 'right'].forEach(type => {
it(`with ${type}`, () => {
context.nzOrientation = type;
fixture.detectChanges();
@@ -72,11 +72,13 @@ describe('divider', () => {
@Component({
template: `
-
- Add
-
+
+ Add
+
`
})
-class TestDividerTextTemplateComponent {
-}
+class TestDividerTextTemplateComponent {}
diff --git a/components/divider/nz-divider.component.ts b/components/divider/nz-divider.component.ts
index 2c4587ec9b..182ab4c54e 100644
--- a/components/divider/nz-divider.component.ts
+++ b/components/divider/nz-divider.component.ts
@@ -13,12 +13,12 @@ import { NzUpdateHostClassService } from '../core/services/update-host-class.ser
import { InputBoolean } from '../core/util';
@Component({
- selector : 'nz-divider',
- templateUrl : './nz-divider.component.html',
+ selector: 'nz-divider',
+ templateUrl: './nz-divider.component.html',
preserveWhitespaces: false,
- providers : [ NzUpdateHostClassService ],
- encapsulation : ViewEncapsulation.None,
- changeDetection : ChangeDetectionStrategy.OnPush
+ providers: [NzUpdateHostClassService],
+ encapsulation: ViewEncapsulation.None,
+ changeDetection: ChangeDetectionStrategy.OnPush
})
export class NzDividerComponent implements OnChanges, OnInit {
@Input() nzText: string | TemplateRef;
@@ -27,17 +27,16 @@ export class NzDividerComponent implements OnChanges, OnInit {
@Input() @InputBoolean() nzDashed = false;
private setClass(): void {
- const orientationPrefix = (this.nzOrientation.length > 0) ? '-' + this.nzOrientation : this.nzOrientation;
+ const orientationPrefix = this.nzOrientation.length > 0 ? '-' + this.nzOrientation : this.nzOrientation;
this.nzUpdateHostClassService.updateHostClass(this.elementRef.nativeElement, {
- [ 'ant-divider' ] : true,
- [ `ant-divider-${this.nzType}` ] : true,
- [ `ant-divider-with-text${orientationPrefix}` ]: this.nzText,
- [ `ant-divider-dashed` ] : this.nzDashed
+ ['ant-divider']: true,
+ [`ant-divider-${this.nzType}`]: true,
+ [`ant-divider-with-text${orientationPrefix}`]: this.nzText,
+ [`ant-divider-dashed`]: this.nzDashed
});
}
- constructor(private elementRef: ElementRef, private nzUpdateHostClassService: NzUpdateHostClassService) {
- }
+ constructor(private elementRef: ElementRef, private nzUpdateHostClassService: NzUpdateHostClassService) {}
ngOnChanges(): void {
this.setClass();
diff --git a/components/divider/nz-divider.module.ts b/components/divider/nz-divider.module.ts
index d08936d797..4464a9af82 100644
--- a/components/divider/nz-divider.module.ts
+++ b/components/divider/nz-divider.module.ts
@@ -4,9 +4,8 @@ import { NzAddOnModule } from '../core/addon/addon.module';
import { NzDividerComponent } from './nz-divider.component';
@NgModule({
- imports : [ CommonModule, NzAddOnModule ],
- declarations: [ NzDividerComponent ],
- exports : [ NzDividerComponent ]
+ imports: [CommonModule, NzAddOnModule],
+ declarations: [NzDividerComponent],
+ exports: [NzDividerComponent]
})
-export class NzDividerModule {
-}
+export class NzDividerModule {}
diff --git a/components/drawer/demo/basic-right.ts b/components/drawer/demo/basic-right.ts
index 9933143587..84749286cf 100755
--- a/components/drawer/demo/basic-right.ts
+++ b/components/drawer/demo/basic-right.ts
@@ -4,14 +4,19 @@ import { Component } from '@angular/core';
selector: 'nz-demo-drawer-basic-right',
template: `
-
+
`
})
-
export class NzDemoDrawerBasicRightComponent {
visible = false;
diff --git a/components/drawer/demo/from-drawer.ts b/components/drawer/demo/from-drawer.ts
index ebb101f36f..f29d15825f 100755
--- a/components/drawer/demo/from-drawer.ts
+++ b/components/drawer/demo/from-drawer.ts
@@ -4,14 +4,21 @@ import { Component } from '@angular/core';
selector: 'nz-demo-drawer-from-drawer',
template: `
-
+
`,
- styles: [`
- .footer {
- position: absolute;
- bottom: 0px;
- width: 100%;
- border-top: 1px solid rgb(232, 232, 232);
- padding: 10px 16px;
- text-align: right;
- left: 0px;
- background: #fff;
- }
- `]
+ styles: [
+ `
+ .footer {
+ position: absolute;
+ bottom: 0px;
+ width: 100%;
+ border-top: 1px solid rgb(232, 232, 232);
+ padding: 10px 16px;
+ text-align: right;
+ left: 0px;
+ background: #fff;
+ }
+ `
+ ]
})
-
export class NzDemoDrawerFromDrawerComponent {
visible = false;
diff --git a/components/drawer/demo/multi-level-drawer.ts b/components/drawer/demo/multi-level-drawer.ts
index 099e39aca9..d252c2849a 100755
--- a/components/drawer/demo/multi-level-drawer.ts
+++ b/components/drawer/demo/multi-level-drawer.ts
@@ -4,14 +4,21 @@ import { Component } from '@angular/core';
selector: 'nz-demo-drawer-multi-level-drawer',
template: `
- Some contents...
Some contents...
Some contents...
-
+
col-6
col-6
col-6
- `
+
+ `
})
-export class NzDemoGridBasicComponent {
-}
+export class NzDemoGridBasicComponent {}
diff --git a/components/grid/demo/flex-align.ts b/components/grid/demo/flex-align.ts
index 0050676755..770588182b 100755
--- a/components/grid/demo/flex-align.ts
+++ b/components/grid/demo/flex-align.ts
@@ -25,8 +25,8 @@ import { Component } from '@angular/core';
col-4
col-4
-
- `
+
+ `
})
-export class NzDemoGridFlexComponent {
-}
+export class NzDemoGridFlexComponent {}
diff --git a/components/grid/demo/gutter.ts b/components/grid/demo/gutter.ts
index 62b4b30540..e89abcd36d 100755
--- a/components/grid/demo/gutter.ts
+++ b/components/grid/demo/gutter.ts
@@ -36,14 +36,13 @@ import { Component } from '@angular/core';
`,
- styles : [
+ styles: [
`
.gutter-box {
- background: #00A0E9;
+ background: #00a0e9;
padding: 5px 0;
}
`
]
})
-export class NzDemoGridGutterComponent {
-}
+export class NzDemoGridGutterComponent {}
diff --git a/components/grid/demo/offset.ts b/components/grid/demo/offset.ts
index c1cfa0980f..b3b4747396 100755
--- a/components/grid/demo/offset.ts
+++ b/components/grid/demo/offset.ts
@@ -25,7 +25,6 @@ import { Component } from '@angular/core';
`,
- styles : []
+ styles: []
})
-export class NzDemoGridOffsetComponent {
-}
+export class NzDemoGridOffsetComponent {}
diff --git a/components/grid/demo/playground.ts b/components/grid/demo/playground.ts
index 65a0555ea3..374b64fe35 100755
--- a/components/grid/demo/playground.ts
+++ b/components/grid/demo/playground.ts
@@ -6,26 +6,38 @@ import { Component } from '@angular/core';
+
`,
- styles : []
+ styles: []
})
export class NzDemoGridFlexOrderComponent implements OnInit {
- orderList = [ 1, 2, 3, 4 ];
+ orderList = [1, 2, 3, 4];
ngOnInit(): void {
setTimeout(() => {
- this.orderList = [ ...this.orderList.reverse() ];
+ this.orderList = [...this.orderList.reverse()];
}, 10000);
}
}
diff --git a/components/grid/demo/flex.ts b/components/grid/demo/flex.ts
index 675f77a9ff..78648b80fb 100755
--- a/components/grid/demo/flex.ts
+++ b/components/grid/demo/flex.ts
@@ -39,7 +39,7 @@ import { Component } from '@angular/core';
{{ i + 1 }} col-order-{{ order }}
col-4
col-4
Gutter (px):
-
Column Count:
-
-
`,
- styles : [
- `
+ styles: [
+ `
.grid-config {
- background: #00A0E9;
+ background: #00a0e9;
height: 120px;
line-height: 120px;
font-size: 13px;
@@ -37,7 +49,7 @@ export class NzDemoGridPlaygroundComponent {
gutter = 16;
count = 4;
marksGutter = {
- 8 : 8,
+ 8: 8,
16: 16,
24: 24,
32: 32,
@@ -45,11 +57,11 @@ export class NzDemoGridPlaygroundComponent {
48: 48
};
marksCount = {
- 2 : 2,
- 3 : 3,
- 4 : 4,
- 6 : 6,
- 8 : 8,
+ 2: 2,
+ 3: 3,
+ 4: 4,
+ 6: 6,
+ 8: 8,
12: 12
};
diff --git a/components/grid/demo/responsive-more.ts b/components/grid/demo/responsive-more.ts
index 664bfa26f8..a0654c7b74 100755
--- a/components/grid/demo/responsive-more.ts
+++ b/components/grid/demo/responsive-more.ts
@@ -13,8 +13,8 @@ import { Component } from '@angular/core';
+
Column
Col
-
Col
- `,
- styles : []
+
+ `,
+ styles: []
})
-export class NzDemoGridResponsiveComponent {
-}
+export class NzDemoGridResponsiveComponent {}
diff --git a/components/grid/demo/sort.ts b/components/grid/demo/sort.ts
index c9a5d15a70..00686b4575 100755
--- a/components/grid/demo/sort.ts
+++ b/components/grid/demo/sort.ts
@@ -12,7 +12,6 @@ import { Component } from '@angular/core';
`,
- styles : []
+ styles: []
})
-export class NzDemoGridSortComponent {
-}
+export class NzDemoGridSortComponent {}
diff --git a/components/grid/nz-col.directive.ts b/components/grid/nz-col.directive.ts
index 4a35323b88..a85fd08aa3 100644
--- a/components/grid/nz-col.directive.ts
+++ b/components/grid/nz-col.directive.ts
@@ -28,8 +28,8 @@ export interface EmbeddedProperty {
}
@Directive({
- selector : '[nz-col],nz-col',
- providers: [ NzUpdateHostClassService ]
+ selector: '[nz-col],nz-col',
+ providers: [NzUpdateHostClassService]
})
export class NzColDirective implements OnInit, OnChanges, AfterViewInit, OnDestroy {
private el: HTMLElement = this.elementRef.nativeElement;
@@ -48,48 +48,51 @@ export class NzColDirective implements OnInit, OnChanges, AfterViewInit, OnDestr
@Input() nzXl: number | EmbeddedProperty;
@Input() nzXXl: number | EmbeddedProperty;
- [ property: string ]: any // tslint:disable-line:no-any
+ [property: string]: any; // tslint:disable-line:no-any
/** temp solution since no method add classMap to host https://github.com/angular/angular/issues/7289*/
setClassMap(): void {
const classMap = {
- [ `${this.prefixCls}-${this.nzSpan}` ] : isNotNil(this.nzSpan),
- [ `${this.prefixCls}-order-${this.nzOrder}` ] : isNotNil(this.nzOrder),
- [ `${this.prefixCls}-offset-${this.nzOffset}` ]: isNotNil(this.nzOffset),
- [ `${this.prefixCls}-pull-${this.nzPull}` ] : isNotNil(this.nzPull),
- [ `${this.prefixCls}-push-${this.nzPush}` ] : isNotNil(this.nzPush),
+ [`${this.prefixCls}-${this.nzSpan}`]: isNotNil(this.nzSpan),
+ [`${this.prefixCls}-order-${this.nzOrder}`]: isNotNil(this.nzOrder),
+ [`${this.prefixCls}-offset-${this.nzOffset}`]: isNotNil(this.nzOffset),
+ [`${this.prefixCls}-pull-${this.nzPull}`]: isNotNil(this.nzPull),
+ [`${this.prefixCls}-push-${this.nzPush}`]: isNotNil(this.nzPush),
...this.generateClass()
};
this.nzUpdateHostClassService.updateHostClass(this.el, classMap);
}
generateClass(): object {
- const listOfSizeInputName = [ 'nzXs', 'nzSm', 'nzMd', 'nzLg', 'nzXl', 'nzXXl' ];
+ const listOfSizeInputName = ['nzXs', 'nzSm', 'nzMd', 'nzLg', 'nzXl', 'nzXXl'];
const listClassMap: NgClassInterface = {};
listOfSizeInputName.forEach(name => {
const sizeName = name.replace('nz', '').toLowerCase();
- if (isNotNil(this[ name ])) {
- if ((typeof (this[ name ]) === 'number') || (typeof (this[ name ]) === 'string')) {
- listClassMap[ `${this.prefixCls}-${sizeName}-${this[ name ]}` ] = true;
+ if (isNotNil(this[name])) {
+ if (typeof this[name] === 'number' || typeof this[name] === 'string') {
+ listClassMap[`${this.prefixCls}-${sizeName}-${this[name]}`] = true;
} else {
- listClassMap[ `${this.prefixCls}-${sizeName}-${this[ name ].span}` ] = this[ name ] && isNotNil(this[ name ].span);
- listClassMap[ `${this.prefixCls}-${sizeName}-pull-${this[ name ].pull}` ] = this[ name ] && isNotNil(this[ name ].pull);
- listClassMap[ `${this.prefixCls}-${sizeName}-push-${this[ name ].push}` ] = this[ name ] && isNotNil(this[ name ].push);
- listClassMap[ `${this.prefixCls}-${sizeName}-offset-${this[ name ].offset}` ] = this[ name ] && isNotNil(this[ name ].offset);
- listClassMap[ `${this.prefixCls}-${sizeName}-order-${this[ name ].order}` ] = this[ name ] && isNotNil(this[ name ].order);
+ listClassMap[`${this.prefixCls}-${sizeName}-${this[name].span}`] = this[name] && isNotNil(this[name].span);
+ listClassMap[`${this.prefixCls}-${sizeName}-pull-${this[name].pull}`] =
+ this[name] && isNotNil(this[name].pull);
+ listClassMap[`${this.prefixCls}-${sizeName}-push-${this[name].push}`] =
+ this[name] && isNotNil(this[name].push);
+ listClassMap[`${this.prefixCls}-${sizeName}-offset-${this[name].offset}`] =
+ this[name] && isNotNil(this[name].offset);
+ listClassMap[`${this.prefixCls}-${sizeName}-order-${this[name].order}`] =
+ this[name] && isNotNil(this[name].order);
}
}
-
});
return listClassMap;
}
- constructor(private nzUpdateHostClassService: NzUpdateHostClassService,
- private elementRef: ElementRef,
- @Optional() @Host() public nzRowDirective: NzRowDirective,
- public renderer: Renderer2
- ) {
- }
+ constructor(
+ private nzUpdateHostClassService: NzUpdateHostClassService,
+ private elementRef: ElementRef,
+ @Optional() @Host() public nzRowDirective: NzRowDirective,
+ public renderer: Renderer2
+ ) {}
ngOnChanges(): void {
this.setClassMap();
@@ -97,13 +100,15 @@ export class NzColDirective implements OnInit, OnChanges, AfterViewInit, OnDestr
ngAfterViewInit(): void {
if (this.nzRowDirective) {
- this.nzRowDirective.actualGutter$.pipe(
- startWith(this.nzRowDirective.actualGutter),
- takeUntil(this.destroy$)
- ).subscribe((actualGutter) => {
- this.renderer.setStyle(this.el, 'padding-left', `${actualGutter / 2}px`);
- this.renderer.setStyle(this.el, 'padding-right', `${actualGutter / 2}px`);
- });
+ this.nzRowDirective.actualGutter$
+ .pipe(
+ startWith(this.nzRowDirective.actualGutter),
+ takeUntil(this.destroy$)
+ )
+ .subscribe(actualGutter => {
+ this.renderer.setStyle(this.el, 'padding-left', `${actualGutter / 2}px`);
+ this.renderer.setStyle(this.el, 'padding-right', `${actualGutter / 2}px`);
+ });
}
}
diff --git a/components/grid/nz-grid.module.ts b/components/grid/nz-grid.module.ts
index fee889e97e..da77de1a60 100644
--- a/components/grid/nz-grid.module.ts
+++ b/components/grid/nz-grid.module.ts
@@ -7,9 +7,8 @@ import { NzColDirective } from './nz-col.directive';
import { NzRowDirective } from './nz-row.directive';
@NgModule({
- declarations: [ NzColDirective, NzRowDirective ],
- exports : [ NzColDirective, NzRowDirective ],
- imports : [ CommonModule, LayoutModule, PlatformModule ]
+ declarations: [NzColDirective, NzRowDirective],
+ exports: [NzColDirective, NzRowDirective],
+ imports: [CommonModule, LayoutModule, PlatformModule]
})
-export class NzGridModule {
-}
+export class NzGridModule {}
diff --git a/components/grid/nz-grid.spec.ts b/components/grid/nz-grid.spec.ts
index 92f404d7a3..fd46c17d36 100644
--- a/components/grid/nz-grid.spec.ts
+++ b/components/grid/nz-grid.spec.ts
@@ -24,9 +24,9 @@ describe('grid', () => {
beforeEach(async(() => {
TestBed.configureTestingModule({
- imports : [ NzGridModule ],
- declarations: [ NzDemoGridBasicComponent ],
- providers : []
+ imports: [NzGridModule],
+ declarations: [NzDemoGridBasicComponent],
+ providers: []
}).compileComponents();
}));
@@ -39,15 +39,15 @@ describe('grid', () => {
it('should have correct style', () => {
fixture.detectChanges();
expect(rows.every(row => row.nativeElement.classList.contains('ant-row'))).toBe(true);
- expect(cols[ 0 ].nativeElement.classList.contains('ant-col-12')).toBe(true);
- expect(cols[ 1 ].nativeElement.classList.contains('ant-col-12')).toBe(true);
- expect(cols[ 2 ].nativeElement.classList.contains('ant-col-8')).toBe(true);
- expect(cols[ 3 ].nativeElement.classList.contains('ant-col-8')).toBe(true);
- expect(cols[ 4 ].nativeElement.classList.contains('ant-col-8')).toBe(true);
- expect(cols[ 5 ].nativeElement.classList.contains('ant-col-6')).toBe(true);
- expect(cols[ 6 ].nativeElement.classList.contains('ant-col-6')).toBe(true);
- expect(cols[ 7 ].nativeElement.classList.contains('ant-col-6')).toBe(true);
- expect(cols[ 8 ].nativeElement.classList.contains('ant-col-6')).toBe(true);
+ expect(cols[0].nativeElement.classList.contains('ant-col-12')).toBe(true);
+ expect(cols[1].nativeElement.classList.contains('ant-col-12')).toBe(true);
+ expect(cols[2].nativeElement.classList.contains('ant-col-8')).toBe(true);
+ expect(cols[3].nativeElement.classList.contains('ant-col-8')).toBe(true);
+ expect(cols[4].nativeElement.classList.contains('ant-col-8')).toBe(true);
+ expect(cols[5].nativeElement.classList.contains('ant-col-6')).toBe(true);
+ expect(cols[6].nativeElement.classList.contains('ant-col-6')).toBe(true);
+ expect(cols[7].nativeElement.classList.contains('ant-col-6')).toBe(true);
+ expect(cols[8].nativeElement.classList.contains('ant-col-6')).toBe(true);
});
});
describe('flex', () => {
@@ -57,9 +57,9 @@ describe('grid', () => {
beforeEach(async(() => {
TestBed.configureTestingModule({
- imports : [ NzGridModule ],
- declarations: [ NzDemoGridFlexComponent ],
- providers : []
+ imports: [NzGridModule],
+ declarations: [NzDemoGridFlexComponent],
+ providers: []
}).compileComponents();
}));
@@ -71,11 +71,11 @@ describe('grid', () => {
it('should have correct style', () => {
fixture.detectChanges();
- expect(rows[ 0 ].nativeElement.className).toBe('ant-row-flex ant-row-flex-top ant-row-flex-start');
- expect(rows[ 1 ].nativeElement.className).toBe('ant-row-flex ant-row-flex-top ant-row-flex-center');
- expect(rows[ 2 ].nativeElement.className).toBe('ant-row-flex ant-row-flex-top ant-row-flex-end');
- expect(rows[ 3 ].nativeElement.className).toBe('ant-row-flex ant-row-flex-top ant-row-flex-space-between');
- expect(rows[ 4 ].nativeElement.className).toBe('ant-row-flex ant-row-flex-top ant-row-flex-space-around');
+ expect(rows[0].nativeElement.className).toBe('ant-row-flex ant-row-flex-top ant-row-flex-start');
+ expect(rows[1].nativeElement.className).toBe('ant-row-flex ant-row-flex-top ant-row-flex-center');
+ expect(rows[2].nativeElement.className).toBe('ant-row-flex ant-row-flex-top ant-row-flex-end');
+ expect(rows[3].nativeElement.className).toBe('ant-row-flex ant-row-flex-top ant-row-flex-space-between');
+ expect(rows[4].nativeElement.className).toBe('ant-row-flex ant-row-flex-top ant-row-flex-space-around');
expect(cols.every(col => col.nativeElement.classList.contains('ant-col-4'))).toBe(true);
});
});
@@ -87,9 +87,9 @@ describe('grid', () => {
beforeEach(async(() => {
TestBed.configureTestingModule({
- imports : [ NzGridModule ],
- declarations: [ NzDemoGridFlexAlignComponent ],
- providers : []
+ imports: [NzGridModule],
+ declarations: [NzDemoGridFlexAlignComponent],
+ providers: []
}).compileComponents();
}));
@@ -101,9 +101,9 @@ describe('grid', () => {
it('should have correct style', () => {
fixture.detectChanges();
- expect(rows[ 0 ].nativeElement.className).toBe('ant-row-flex ant-row-flex-top ant-row-flex-center');
- expect(rows[ 1 ].nativeElement.className).toBe('ant-row-flex ant-row-flex-middle ant-row-flex-space-around');
- expect(rows[ 2 ].nativeElement.className).toBe('ant-row-flex ant-row-flex-bottom ant-row-flex-space-between');
+ expect(rows[0].nativeElement.className).toBe('ant-row-flex ant-row-flex-top ant-row-flex-center');
+ expect(rows[1].nativeElement.className).toBe('ant-row-flex ant-row-flex-middle ant-row-flex-space-around');
+ expect(rows[2].nativeElement.className).toBe('ant-row-flex ant-row-flex-bottom ant-row-flex-space-between');
expect(cols.every(col => col.nativeElement.classList.contains('ant-col-4'))).toBe(true);
});
});
@@ -114,9 +114,9 @@ describe('grid', () => {
beforeEach(async(() => {
TestBed.configureTestingModule({
- imports : [ NzGridModule ],
- declarations: [ NzDemoGridFlexOrderComponent ],
- providers : []
+ imports: [NzGridModule],
+ declarations: [NzDemoGridFlexOrderComponent],
+ providers: []
}).compileComponents();
}));
@@ -129,18 +129,18 @@ describe('grid', () => {
fixture.detectChanges();
let cols = fixture.debugElement.queryAll(By.directive(NzColDirective));
expect(row.nativeElement.className).toBe('ant-row-flex ant-row-flex-top ant-row-flex-start');
- expect(cols[ 0 ].nativeElement.classList.contains('ant-col-order-1')).toBe(true);
- expect(cols[ 1 ].nativeElement.classList.contains('ant-col-order-2')).toBe(true);
- expect(cols[ 2 ].nativeElement.classList.contains('ant-col-order-3')).toBe(true);
- expect(cols[ 3 ].nativeElement.classList.contains('ant-col-order-4')).toBe(true);
+ expect(cols[0].nativeElement.classList.contains('ant-col-order-1')).toBe(true);
+ expect(cols[1].nativeElement.classList.contains('ant-col-order-2')).toBe(true);
+ expect(cols[2].nativeElement.classList.contains('ant-col-order-3')).toBe(true);
+ expect(cols[3].nativeElement.classList.contains('ant-col-order-4')).toBe(true);
tick(10000);
fixture.detectChanges();
cols = fixture.debugElement.queryAll(By.directive(NzColDirective));
expect(row.nativeElement.className).toBe('ant-row-flex ant-row-flex-top ant-row-flex-start');
- expect(cols[ 0 ].nativeElement.classList.contains('ant-col-order-4')).toBe(true);
- expect(cols[ 1 ].nativeElement.classList.contains('ant-col-order-3')).toBe(true);
- expect(cols[ 2 ].nativeElement.classList.contains('ant-col-order-2')).toBe(true);
- expect(cols[ 3 ].nativeElement.classList.contains('ant-col-order-1')).toBe(true);
+ expect(cols[0].nativeElement.classList.contains('ant-col-order-4')).toBe(true);
+ expect(cols[1].nativeElement.classList.contains('ant-col-order-3')).toBe(true);
+ expect(cols[2].nativeElement.classList.contains('ant-col-order-2')).toBe(true);
+ expect(cols[3].nativeElement.classList.contains('ant-col-order-1')).toBe(true);
}));
});
@@ -151,9 +151,9 @@ describe('grid', () => {
beforeEach(async(() => {
TestBed.configureTestingModule({
- imports : [ NzGridModule ],
- declarations: [ NzDemoGridGutterComponent ],
- providers : []
+ imports: [NzGridModule],
+ declarations: [NzDemoGridGutterComponent],
+ providers: []
}).compileComponents();
}));
@@ -165,21 +165,27 @@ describe('grid', () => {
it('should number work', () => {
fixture.detectChanges();
- expect(rows[ 0 ].nativeElement.style.cssText).toBe('margin-left: -8px; margin-right: -8px;');
- expect(cols.slice(0, 4).every(col => col.nativeElement.style.cssText === 'padding-left: 8px; padding-right: 8px;')).toBe(true);
+ expect(rows[0].nativeElement.style.cssText).toBe('margin-left: -8px; margin-right: -8px;');
+ expect(
+ cols.slice(0, 4).every(col => col.nativeElement.style.cssText === 'padding-left: 8px; padding-right: 8px;')
+ ).toBe(true);
expect(cols.slice(0, 4).every(col => col.nativeElement.classList.contains('gutter-row'))).toBe(true);
});
it('should responsive work', () => {
// TODO: fake media query
fixture.detectChanges();
- expect(rows[ 1 ].nativeElement.style.cssText).toBe('margin-left: -4px; margin-right: -4px;');
- expect(cols.slice(4, 8).every(col => col.nativeElement.style.cssText === 'padding-left: 4px; padding-right: 4px;')).toBe(true);
+ expect(rows[1].nativeElement.style.cssText).toBe('margin-left: -4px; margin-right: -4px;');
+ expect(
+ cols.slice(4, 8).every(col => col.nativeElement.style.cssText === 'padding-left: 4px; padding-right: 4px;')
+ ).toBe(true);
expect(cols.slice(4, 8).every(col => col.nativeElement.classList.contains('gutter-row'))).toBe(true);
window.dispatchEvent(new Event('resize'));
fixture.detectChanges();
- expect(rows[ 1 ].nativeElement.style.cssText).toBe('margin-left: -4px; margin-right: -4px;');
- expect(cols.slice(4, 8).every(col => col.nativeElement.style.cssText === 'padding-left: 4px; padding-right: 4px;')).toBe(true);
+ expect(rows[1].nativeElement.style.cssText).toBe('margin-left: -4px; margin-right: -4px;');
+ expect(
+ cols.slice(4, 8).every(col => col.nativeElement.style.cssText === 'padding-left: 4px; padding-right: 4px;')
+ ).toBe(true);
expect(cols.slice(4, 8).every(col => col.nativeElement.classList.contains('gutter-row'))).toBe(true);
});
});
@@ -190,9 +196,9 @@ describe('grid', () => {
let cols: DebugElement[];
beforeEach(async(() => {
TestBed.configureTestingModule({
- imports : [ NzGridModule ],
- declarations: [ NzDemoGridOffsetComponent ],
- providers : []
+ imports: [NzGridModule],
+ declarations: [NzDemoGridOffsetComponent],
+ providers: []
}).compileComponents();
}));
@@ -204,11 +210,11 @@ describe('grid', () => {
it('should have correct style', () => {
fixture.detectChanges();
expect(rows.every(row => row.nativeElement.classList.contains('ant-row'))).toBe(true);
- expect(cols[ 0 ].nativeElement.className).toBe('ant-col-8');
- expect(cols[ 1 ].nativeElement.className).toBe('ant-col-8 ant-col-offset-8');
- expect(cols[ 2 ].nativeElement.className).toBe('ant-col-6 ant-col-offset-6');
- expect(cols[ 3 ].nativeElement.className).toBe('ant-col-6 ant-col-offset-6');
- expect(cols[ 4 ].nativeElement.className).toBe('ant-col-12 ant-col-offset-6');
+ expect(cols[0].nativeElement.className).toBe('ant-col-8');
+ expect(cols[1].nativeElement.className).toBe('ant-col-8 ant-col-offset-8');
+ expect(cols[2].nativeElement.className).toBe('ant-col-6 ant-col-offset-6');
+ expect(cols[3].nativeElement.className).toBe('ant-col-6 ant-col-offset-6');
+ expect(cols[4].nativeElement.className).toBe('ant-col-12 ant-col-offset-6');
});
});
@@ -218,9 +224,9 @@ describe('grid', () => {
beforeEach(async(() => {
TestBed.configureTestingModule({
- imports : [ NzGridModule ],
- declarations: [ NzDemoGridResponsiveComponent ],
- providers : []
+ imports: [NzGridModule],
+ declarations: [NzDemoGridResponsiveComponent],
+ providers: []
}).compileComponents();
}));
@@ -231,9 +237,11 @@ describe('grid', () => {
it('should have correct style', () => {
fixture.detectChanges();
- expect(cols[ 0 ].nativeElement.className).toBe('ant-col-xs-2 ant-col-sm-4 ant-col-md-6 ant-col-lg-8 ant-col-xl-10');
- expect(cols[ 1 ].nativeElement.className).toBe('ant-col-xs-20 ant-col-sm-16 ant-col-md-12 ant-col-lg-8 ant-col-xl-4');
- expect(cols[ 2 ].nativeElement.className).toBe('ant-col-xs-2 ant-col-sm-4 ant-col-md-6 ant-col-lg-8 ant-col-xl-10');
+ expect(cols[0].nativeElement.className).toBe('ant-col-xs-2 ant-col-sm-4 ant-col-md-6 ant-col-lg-8 ant-col-xl-10');
+ expect(cols[1].nativeElement.className).toBe(
+ 'ant-col-xs-20 ant-col-sm-16 ant-col-md-12 ant-col-lg-8 ant-col-xl-4'
+ );
+ expect(cols[2].nativeElement.className).toBe('ant-col-xs-2 ant-col-sm-4 ant-col-md-6 ant-col-lg-8 ant-col-xl-10');
});
});
@@ -243,9 +251,9 @@ describe('grid', () => {
beforeEach(async(() => {
TestBed.configureTestingModule({
- imports : [ NzGridModule ],
- declarations: [ NzDemoGridResponsiveMoreComponent ],
- providers : []
+ imports: [NzGridModule],
+ declarations: [NzDemoGridResponsiveMoreComponent],
+ providers: []
}).compileComponents();
}));
@@ -255,9 +263,11 @@ describe('grid', () => {
});
it('should have correct style', () => {
fixture.detectChanges();
- expect(cols[ 0 ].nativeElement.className).toBe('ant-col-xs-5 ant-col-xs-offset-1 ant-col-lg-6 ant-col-lg-offset-2');
- expect(cols[ 1 ].nativeElement.className).toBe('ant-col-xs-11 ant-col-xs-offset-1 ant-col-lg-6 ant-col-lg-offset-2');
- expect(cols[ 2 ].nativeElement.className).toBe('ant-col-xs-5 ant-col-xs-offset-1 ant-col-lg-6 ant-col-lg-offset-2');
+ expect(cols[0].nativeElement.className).toBe('ant-col-xs-5 ant-col-xs-offset-1 ant-col-lg-6 ant-col-lg-offset-2');
+ expect(cols[1].nativeElement.className).toBe(
+ 'ant-col-xs-11 ant-col-xs-offset-1 ant-col-lg-6 ant-col-lg-offset-2'
+ );
+ expect(cols[2].nativeElement.className).toBe('ant-col-xs-5 ant-col-xs-offset-1 ant-col-lg-6 ant-col-lg-offset-2');
});
});
@@ -267,9 +277,9 @@ describe('grid', () => {
beforeEach(async(() => {
TestBed.configureTestingModule({
- imports : [ NzGridModule ],
- declarations: [ NzDemoGridSortComponent ],
- providers : []
+ imports: [NzGridModule],
+ declarations: [NzDemoGridSortComponent],
+ providers: []
}).compileComponents();
}));
@@ -280,8 +290,8 @@ describe('grid', () => {
it('should have correct style', () => {
fixture.detectChanges();
- expect(cols[ 0 ].nativeElement.className).toBe('ant-col-18 ant-col-push-6');
- expect(cols[ 1 ].nativeElement.className).toBe('ant-col-6 ant-col-pull-18');
+ expect(cols[0].nativeElement.className).toBe('ant-col-18 ant-col-push-6');
+ expect(cols[1].nativeElement.className).toBe('ant-col-6 ant-col-pull-18');
});
});
@@ -291,10 +301,10 @@ describe('grid', () => {
beforeEach(async(() => {
TestBed.configureTestingModule({
- imports : [ NzGridModule ],
- declarations: [ NzDemoGridPlaygroundComponent ],
- providers : [],
- schemas : [ NO_ERRORS_SCHEMA ]
+ imports: [NzGridModule],
+ declarations: [NzDemoGridPlaygroundComponent],
+ providers: [],
+ schemas: [NO_ERRORS_SCHEMA]
}).compileComponents();
}));
@@ -308,14 +318,18 @@ describe('grid', () => {
const row = fixture.debugElement.query(By.directive(NzRowDirective));
let cols = fixture.debugElement.queryAll(By.directive(NzColDirective));
expect(cols.length).toBe(4);
- expect(cols.every(col => col.nativeElement.style.cssText === 'padding-left: 8px; padding-right: 8px;')).toBe(true);
+ expect(cols.every(col => col.nativeElement.style.cssText === 'padding-left: 8px; padding-right: 8px;')).toBe(
+ true
+ );
expect(row.nativeElement.style.cssText).toBe('margin-left: -8px; margin-right: -8px;');
testComponent.gutter = 24;
testComponent.count = 12;
fixture.detectChanges();
cols = fixture.debugElement.queryAll(By.directive(NzColDirective));
expect(cols.length).toBe(12);
- expect(cols.every(col => col.nativeElement.style.cssText === 'padding-left: 12px; padding-right: 12px;')).toBe(true);
+ expect(cols.every(col => col.nativeElement.style.cssText === 'padding-left: 12px; padding-right: 12px;')).toBe(
+ true
+ );
expect(row.nativeElement.style.cssText).toBe('margin-left: -12px; margin-right: -12px;');
});
});
diff --git a/components/grid/nz-row.directive.ts b/components/grid/nz-row.directive.ts
index f96e39fb5e..da8f3a1392 100644
--- a/components/grid/nz-row.directive.ts
+++ b/components/grid/nz-row.directive.ts
@@ -34,17 +34,17 @@ export enum Breakpoint {
export type BreakpointMap = { [index in keyof typeof Breakpoint]: string };
const responsiveMap: BreakpointMap = {
- xs : '(max-width: 575px)',
- sm : '(min-width: 576px)',
- md : '(min-width: 768px)',
- lg : '(min-width: 992px)',
- xl : '(min-width: 1200px)',
+ xs: '(max-width: 575px)',
+ sm: '(min-width: 576px)',
+ md: '(min-width: 768px)',
+ lg: '(min-width: 992px)',
+ xl: '(min-width: 1200px)',
xxl: '(min-width: 1600px)'
};
@Directive({
- selector : '[nz-row],nz-row',
- providers: [ NzUpdateHostClassService ]
+ selector: '[nz-row],nz-row',
+ providers: [NzUpdateHostClassService]
})
export class NzRowDirective implements OnInit, OnChanges, AfterViewInit, OnDestroy {
@Input() nzType: NzType;
@@ -61,8 +61,8 @@ export class NzRowDirective implements OnInit, OnChanges, AfterViewInit, OnDestr
calculateGutter(): number {
if (typeof this.nzGutter !== 'object') {
return this.nzGutter;
- } else if (this.breakPoint && this.nzGutter[ this.breakPoint ]) {
- return this.nzGutter[ this.breakPoint ];
+ } else if (this.breakPoint && this.nzGutter[this.breakPoint]) {
+ return this.nzGutter[this.breakPoint];
} else {
return 0;
}
@@ -81,7 +81,7 @@ export class NzRowDirective implements OnInit, OnChanges, AfterViewInit, OnDestr
watchMedia(): void {
// @ts-ignore
Object.keys(responsiveMap).map((screen: Breakpoint) => {
- const matchBelow = this.mediaMatcher.matchMedia(responsiveMap[ screen ]).matches;
+ const matchBelow = this.mediaMatcher.matchMedia(responsiveMap[screen]).matches;
if (matchBelow) {
this.breakPoint = screen;
}
@@ -92,16 +92,22 @@ export class NzRowDirective implements OnInit, OnChanges, AfterViewInit, OnDestr
/** temp solution since no method add classMap to host https://github.com/angular/angular/issues/7289*/
setClassMap(): void {
const classMap = {
- [ `${this.prefixCls}` ] : !this.nzType,
- [ `${this.prefixCls}-${this.nzType}` ] : this.nzType,
- [ `${this.prefixCls}-${this.nzType}-${this.nzAlign}` ] : this.nzType && this.nzAlign,
- [ `${this.prefixCls}-${this.nzType}-${this.nzJustify}` ]: this.nzType && this.nzJustify
+ [`${this.prefixCls}`]: !this.nzType,
+ [`${this.prefixCls}-${this.nzType}`]: this.nzType,
+ [`${this.prefixCls}-${this.nzType}-${this.nzAlign}`]: this.nzType && this.nzAlign,
+ [`${this.prefixCls}-${this.nzType}-${this.nzJustify}`]: this.nzType && this.nzJustify
};
this.nzUpdateHostClassService.updateHostClass(this.el, classMap);
}
- constructor(public elementRef: ElementRef, public renderer: Renderer2, public nzUpdateHostClassService: NzUpdateHostClassService, public mediaMatcher: MediaMatcher, public ngZone: NgZone, public platform: Platform) {
- }
+ constructor(
+ public elementRef: ElementRef,
+ public renderer: Renderer2,
+ public nzUpdateHostClassService: NzUpdateHostClassService,
+ public mediaMatcher: MediaMatcher,
+ public ngZone: NgZone,
+ public platform: Platform
+ ) {}
ngOnInit(): void {
this.setClassMap();
@@ -121,8 +127,11 @@ export class NzRowDirective implements OnInit, OnChanges, AfterViewInit, OnDestr
if (this.platform.isBrowser) {
this.ngZone.runOutsideAngular(() => {
fromEvent(window, 'resize')
- .pipe(auditTime(16), takeUntil(this.destroy$))
- .subscribe(() => this.watchMedia());
+ .pipe(
+ auditTime(16),
+ takeUntil(this.destroy$)
+ )
+ .subscribe(() => this.watchMedia());
});
}
}
diff --git a/components/i18n/date-helper.service.spec.ts b/components/i18n/date-helper.service.spec.ts
index 4ba3a9f17c..ceac7e8529 100644
--- a/components/i18n/date-helper.service.spec.ts
+++ b/components/i18n/date-helper.service.spec.ts
@@ -15,10 +15,8 @@ describe('DateHelperService', () => {
describe('Formatting with DatePipe', () => {
beforeEach(() => {
injector = TestBed.configureTestingModule({
- imports: [ NzI18nModule ],
- providers: [
- { provide: NZ_I18N, useValue: en_US }
- ]
+ imports: [NzI18nModule],
+ providers: [{ provide: NZ_I18N, useValue: en_US }]
});
dateHelper = injector.get(DateHelperService);
@@ -42,10 +40,8 @@ describe('DateHelperService', () => {
describe('Formatting with Data-fns', () => {
beforeEach(() => {
injector = TestBed.configureTestingModule({
- imports: [ NzI18nModule ],
- providers: [
- { provide: NZ_DATE_LOCALE, useValue: enDateLocale }
- ]
+ imports: [NzI18nModule],
+ providers: [{ provide: NZ_DATE_LOCALE, useValue: enDateLocale }]
});
dateHelper = injector.get(DateHelperService);
@@ -65,10 +61,8 @@ describe('DateHelperService', () => {
describe('Custom firstDayOfWeek', () => {
beforeEach(() => {
injector = TestBed.configureTestingModule({
- imports: [ NzI18nModule ],
- providers: [
- { provide: NZ_DATE_CONFIG, useValue: { firstDayOfWeek: 4 } }
- ]
+ imports: [NzI18nModule],
+ providers: [{ provide: NZ_DATE_CONFIG, useValue: { firstDayOfWeek: 4 } }]
});
dateHelper = injector.get(DateHelperService);
@@ -78,5 +72,4 @@ describe('DateHelperService', () => {
expect(dateHelper.getFirstDayOfWeek()).toBe(4);
});
});
-
});
diff --git a/components/i18n/date-helper.service.ts b/components/i18n/date-helper.service.ts
index 34921141b9..fd7a87a142 100644
--- a/components/i18n/date-helper.service.ts
+++ b/components/i18n/date-helper.service.ts
@@ -6,9 +6,15 @@ import fnsParse from 'date-fns/parse';
import { mergeDateConfig, NzDateConfig, NZ_DATE_CONFIG } from './date-config';
import { NzI18nService } from './nz-i18n.service';
-export function DATE_HELPER_SERVICE_FACTORY(injector: Injector, config: NzDateConfig, datePipe: DatePipe): DateHelperService {
+export function DATE_HELPER_SERVICE_FACTORY(
+ injector: Injector,
+ config: NzDateConfig,
+ datePipe: DatePipe
+): DateHelperService {
const i18n = injector.get(NzI18nService);
- return i18n.getDateLocale() ? new DateHelperByDateFns(i18n, config) : new DateHelperByDatePipe(i18n, config, datePipe);
+ return i18n.getDateLocale()
+ ? new DateHelperByDateFns(i18n, config)
+ : new DateHelperByDatePipe(i18n, config, datePipe);
}
/**
@@ -18,7 +24,7 @@ export function DATE_HELPER_SERVICE_FACTORY(injector: Injector, config: NzDateCo
@Injectable({
providedIn: 'root',
useFactory: DATE_HELPER_SERVICE_FACTORY,
- deps: [ Injector, [ new Optional(), NZ_DATE_CONFIG ], DatePipe ]
+ deps: [Injector, [new Optional(), NZ_DATE_CONFIG], DatePipe]
})
export abstract class DateHelperService {
relyOnDatePipe: boolean = this instanceof DateHelperByDatePipe; // Indicate whether this service is rely on DatePipe
@@ -78,7 +84,11 @@ export class DateHelperByDateFns extends DateHelperService {
* @deprecated Maybe removed in next major version due to this serious bug
*/
export class DateHelperByDatePipe extends DateHelperService {
- constructor(i18n: NzI18nService, @Optional() @Inject(NZ_DATE_CONFIG) config: NzDateConfig, private datePipe: DatePipe) {
+ constructor(
+ i18n: NzI18nService,
+ @Optional() @Inject(NZ_DATE_CONFIG) config: NzDateConfig,
+ private datePipe: DatePipe
+ ) {
super(i18n, config);
}
@@ -89,15 +99,13 @@ export class DateHelperByDatePipe extends DateHelperService {
getFirstDayOfWeek(): WeekDayIndex {
if (this.config.firstDayOfWeek === undefined) {
const locale = this.i18n.getLocaleId();
- return locale && [ 'zh-cn', 'zh-tw' ].indexOf(locale.toLowerCase()) > -1 ? 1 : 0;
+ return locale && ['zh-cn', 'zh-tw'].indexOf(locale.toLowerCase()) > -1 ? 1 : 0;
}
return this.config.firstDayOfWeek;
}
format(date: Date, formatStr: string): string {
- return date
- ? this.datePipe.transform(date, formatStr, undefined, this.i18n.getLocaleId())!
- : '';
+ return date ? this.datePipe.transform(date, formatStr, undefined, this.i18n.getLocaleId())! : '';
}
/**
@@ -111,9 +119,12 @@ export class DateHelperByDatePipe extends DateHelperService {
* @param format input format pattern
*/
transCompatFormat(format: string): string {
- return format && format
- .replace(/Y/g, 'y') // only support y, yy, yyy, yyyy
- .replace(/D/g, 'd'); // d, dd represent of D, DD for momentjs, others are not support
+ return (
+ format &&
+ format
+ .replace(/Y/g, 'y') // only support y, yy, yyy, yyyy
+ .replace(/D/g, 'd')
+ ); // d, dd represent of D, DD for momentjs, others are not support
}
}
diff --git a/components/i18n/nz-i18n.module.ts b/components/i18n/nz-i18n.module.ts
index f751903ec7..3484256fa4 100644
--- a/components/i18n/nz-i18n.module.ts
+++ b/components/i18n/nz-i18n.module.ts
@@ -7,14 +7,9 @@ import { NzI18nPipe } from './nz-i18n.pipe';
import { NZ_DATE_LOCALE, NZ_I18N } from './nz-i18n.token';
@NgModule({
- imports : [ LoggerModule ],
- declarations: [ NzI18nPipe ],
- exports : [ NzI18nPipe ],
- providers : [
- DatePipe,
- { provide: NZ_I18N, useValue: null },
- { provide: NZ_DATE_LOCALE, useValue: null }
- ]
+ imports: [LoggerModule],
+ declarations: [NzI18nPipe],
+ exports: [NzI18nPipe],
+ providers: [DatePipe, { provide: NZ_I18N, useValue: null }, { provide: NZ_DATE_LOCALE, useValue: null }]
})
-export class NzI18nModule {
-}
+export class NzI18nModule {}
diff --git a/components/i18n/nz-i18n.pipe.ts b/components/i18n/nz-i18n.pipe.ts
index 5bc5cdf978..8a47e1abcd 100644
--- a/components/i18n/nz-i18n.pipe.ts
+++ b/components/i18n/nz-i18n.pipe.ts
@@ -6,8 +6,7 @@ import { NzI18nService } from './nz-i18n.service';
name: 'nzI18n'
})
export class NzI18nPipe implements PipeTransform {
- constructor(private _locale: NzI18nService) {
- }
+ constructor(private _locale: NzI18nService) {}
transform(path: string, keyValue?: object): string {
return this._locale.translate(path, keyValue);
diff --git a/components/i18n/nz-i18n.service.spec.ts b/components/i18n/nz-i18n.service.spec.ts
index f9647dda30..a56eb071f8 100644
--- a/components/i18n/nz-i18n.service.spec.ts
+++ b/components/i18n/nz-i18n.service.spec.ts
@@ -36,5 +36,4 @@ describe('nz-i18n.service', () => {
expect(srv['_change'].next).not.toHaveBeenCalled();
});
});
-
});
diff --git a/components/i18n/nz-i18n.service.ts b/components/i18n/nz-i18n.service.ts
index f6d7ed4193..2f2c795b66 100644
--- a/components/i18n/nz-i18n.service.ts
+++ b/components/i18n/nz-i18n.service.ts
@@ -18,10 +18,7 @@ export class NzI18nService {
return this._change.asObservable();
}
- constructor(
- @Inject(NZ_I18N) locale: NzI18nInterface,
- @Inject(NZ_DATE_LOCALE) dateLocale: DateLocale) {
-
+ constructor(@Inject(NZ_I18N) locale: NzI18nInterface, @Inject(NZ_DATE_LOCALE) dateLocale: DateLocale) {
this.setLocale(locale || zh_CN);
this.setDateLocale(dateLocale || null);
}
@@ -34,7 +31,7 @@ export class NzI18nService {
let content = this._getObjectPath(this._locale, path) as string;
if (typeof content === 'string') {
if (data) {
- Object.keys(data).forEach((key) => content = content.replace(new RegExp(`%${key}%`, 'g'), data[ key ]));
+ Object.keys(data).forEach(key => (content = content.replace(new RegExp(`%${key}%`, 'g'), data[key])));
}
return content;
}
@@ -75,18 +72,20 @@ export class NzI18nService {
* @param path dot paths for finding exist value from locale data, eg. "a.b.c"
* @param defaultValue default value if the result is not "truthy"
*/
- getLocaleData(path?: string, defaultValue?: any): any { // tslint:disable-line:no-any
+ // tslint:disable-next-line:no-any
+ getLocaleData(path?: string, defaultValue?: any): any {
const result = path ? this._getObjectPath(this._locale, path) : this._locale;
return result || defaultValue;
}
- private _getObjectPath(obj: IndexableObject, path: string): string | object | any { // tslint:disable-line:no-any
+ // tslint:disable-next-line:no-any
+ private _getObjectPath(obj: IndexableObject, path: string): string | object | any {
let res = obj;
const paths = path.split('.');
const depth = paths.length;
let index = 0;
while (res && index < depth) {
- res = res[ paths[ index++ ] ];
+ res = res[paths[index++]];
}
return index === depth ? res : null;
}
diff --git a/components/icon/demo/basic.ts b/components/icon/demo/basic.ts
index c95b47330e..777e5c1b87 100644
--- a/components/icon/demo/basic.ts
+++ b/components/icon/demo/basic.ts
@@ -13,12 +13,13 @@ import { Component } from '@angular/core';
`,
- styles: [ `
- [nz-icon] {
- margin-right: 6px;
- font-size: 24px;
- }
- `]
+ styles: [
+ `
+ [nz-icon] {
+ margin-right: 6px;
+ font-size: 24px;
+ }
+ `
+ ]
})
-export class NzDemoIconBasicComponent {
-}
+export class NzDemoIconBasicComponent {}
diff --git a/components/icon/demo/custom.ts b/components/icon/demo/custom.ts
index 38796cf242..9e26c4c2ea 100644
--- a/components/icon/demo/custom.ts
+++ b/components/icon/demo/custom.ts
@@ -6,29 +6,64 @@ import { Component } from '@angular/core';
-
+
`,
- styles : [ `
- [nz-icon] {
- margin-right: 6px;
- font-size: 24px;
- }
- ` ]
+ styles: [
+ `
+ [nz-icon] {
+ margin-right: 6px;
+ font-size: 24px;
+ }
+ `
+ ]
})
export class NzDemoIconIconfontComponent {
constructor(private _iconService: NzIconService) {
diff --git a/components/icon/demo/namespace.ts b/components/icon/demo/namespace.ts
index 2231f537f0..ba209ee72c 100644
--- a/components/icon/demo/namespace.ts
+++ b/components/icon/demo/namespace.ts
@@ -1,7 +1,8 @@
import { Component } from '@angular/core';
import { NzIconService } from 'ng-zorro-antd';
-const ngZorroIconLiteral = '';
+const ngZorroIconLiteral =
+ '';
@Component({
selector: 'nz-demo-icon-namespace',
@@ -10,12 +11,14 @@ const ngZorroIconLiteral = '