diff --git a/components/collapse/nz-collapse-panel.component.ts b/components/collapse/collapse-panel.component.ts similarity index 56% rename from components/collapse/nz-collapse-panel.component.ts rename to components/collapse/collapse-panel.component.ts index dc4473b3c4f..3e5c212f0f5 100644 --- a/components/collapse/nz-collapse-panel.component.ts +++ b/components/collapse/collapse-panel.component.ts @@ -10,39 +10,51 @@ import { ChangeDetectionStrategy, ChangeDetectorRef, Component, - ElementRef, EventEmitter, Host, Input, OnDestroy, OnInit, Output, - Renderer2, TemplateRef, ViewEncapsulation } from '@angular/core'; import { collapseMotion, InputBoolean, NzConfigService, WithConfig } from 'ng-zorro-antd/core'; +import { Subject } from 'rxjs'; +import { takeUntil } from 'rxjs/operators'; -import { NzCollapseComponent } from './nz-collapse.component'; +import { NzCollapseComponent } from './collapse.component'; const NZ_CONFIG_COMPONENT_NAME = 'collapsePanel'; @Component({ selector: 'nz-collapse-panel', exportAs: 'nzCollapsePanel', - templateUrl: './nz-collapse-panel.component.html', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, animations: [collapseMotion], - styles: [ - ` - nz-collapse-panel { - display: block; - } - ` - ], + template: ` + +
+
+ +
+
+ `, + host: { + '[class.ant-collapse-item]': 'true', '[class.ant-collapse-no-arrow]': '!nzShowArrow', '[class.ant-collapse-item-active]': 'nzActive', '[class.ant-collapse-item-disabled]': 'nzDisabled' @@ -56,7 +68,7 @@ export class NzCollapsePanelComponent implements OnInit, OnDestroy { @Input() nzHeader: string | TemplateRef; @Input() nzExpandedIcon: string | TemplateRef; @Output() readonly nzActiveChange = new EventEmitter(); - + private destroy$ = new Subject(); clickHeader(): void { if (!this.nzDisabled) { this.nzCollapseComponent.click(this); @@ -70,11 +82,14 @@ export class NzCollapsePanelComponent implements OnInit, OnDestroy { constructor( public nzConfigService: NzConfigService, private cdr: ChangeDetectorRef, - @Host() private nzCollapseComponent: NzCollapseComponent, - elementRef: ElementRef, - renderer: Renderer2 + @Host() private nzCollapseComponent: NzCollapseComponent ) { - renderer.addClass(elementRef.nativeElement, 'ant-collapse-item'); + this.nzConfigService + .getConfigChangeEventForComponent(NZ_CONFIG_COMPONENT_NAME) + .pipe(takeUntil(this.destroy$)) + .subscribe(() => { + this.cdr.markForCheck(); + }); } ngOnInit(): void { @@ -82,6 +97,8 @@ export class NzCollapsePanelComponent implements OnInit, OnDestroy { } ngOnDestroy(): void { + this.destroy$.next(); + this.destroy$.complete(); this.nzCollapseComponent.removePanel(this); } } diff --git a/components/collapse/nz-collapse.component.ts b/components/collapse/collapse.component.ts similarity index 58% rename from components/collapse/nz-collapse.component.ts rename to components/collapse/collapse.component.ts index cbbee93fd1d..055ad16dd43 100644 --- a/components/collapse/nz-collapse.component.ts +++ b/components/collapse/collapse.component.ts @@ -6,34 +6,45 @@ * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE */ -import { ChangeDetectionStrategy, Component, Input, ViewEncapsulation } from '@angular/core'; +import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, OnDestroy, ViewEncapsulation } from '@angular/core'; import { InputBoolean, NzConfigService, WithConfig } from 'ng-zorro-antd/core'; +import { Subject } from 'rxjs'; +import { takeUntil } from 'rxjs/operators'; -import { NzCollapsePanelComponent } from './nz-collapse-panel.component'; +import { NzCollapsePanelComponent } from './collapse-panel.component'; const NZ_CONFIG_COMPONENT_NAME = 'collapse'; @Component({ selector: 'nz-collapse', exportAs: 'nzCollapse', - templateUrl: './nz-collapse.component.html', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, - styles: [ - ` - nz-collapse { - display: block; - } - ` - ] + template: ` + + `, + host: { + '[class.ant-collapse]': 'true', + '[class.ant-collapse-icon-position-left]': `nzExpandIconPosition === 'left'`, + '[class.ant-collapse-icon-position-right]': `nzExpandIconPosition === 'right'`, + '[class.ant-collapse-borderless]': '!nzBordered' + } }) -export class NzCollapseComponent { - private listOfNzCollapsePanelComponent: NzCollapsePanelComponent[] = []; +export class NzCollapseComponent implements OnDestroy { @Input() @WithConfig(NZ_CONFIG_COMPONENT_NAME, false) @InputBoolean() nzAccordion: boolean; @Input() @WithConfig(NZ_CONFIG_COMPONENT_NAME, true) @InputBoolean() nzBordered: boolean; - - constructor(public nzConfigService: NzConfigService) {} + @Input() nzExpandIconPosition: 'left' | 'right' = 'left'; + private listOfNzCollapsePanelComponent: NzCollapsePanelComponent[] = []; + private destroy$ = new Subject(); + constructor(public nzConfigService: NzConfigService, private cdr: ChangeDetectorRef) { + this.nzConfigService + .getConfigChangeEventForComponent(NZ_CONFIG_COMPONENT_NAME) + .pipe(takeUntil(this.destroy$)) + .subscribe(() => { + this.cdr.markForCheck(); + }); + } addPanel(value: NzCollapsePanelComponent): void { this.listOfNzCollapsePanelComponent.push(value); @@ -58,4 +69,8 @@ export class NzCollapseComponent { collapse.nzActive = !collapse.nzActive; collapse.nzActiveChange.emit(collapse.nzActive); } + ngOnDestroy(): void { + this.destroy$.next(); + this.destroy$.complete(); + } } diff --git a/components/collapse/nz-collapse.module.ts b/components/collapse/collapse.module.ts similarity index 82% rename from components/collapse/nz-collapse.module.ts rename to components/collapse/collapse.module.ts index 8ff4a8c6411..dc24fffae14 100644 --- a/components/collapse/nz-collapse.module.ts +++ b/components/collapse/collapse.module.ts @@ -11,8 +11,8 @@ import { NgModule } from '@angular/core'; import { NzOutletModule } from 'ng-zorro-antd/core'; import { NzIconModule } from 'ng-zorro-antd/icon'; -import { NzCollapsePanelComponent } from './nz-collapse-panel.component'; -import { NzCollapseComponent } from './nz-collapse.component'; +import { NzCollapsePanelComponent } from './collapse-panel.component'; +import { NzCollapseComponent } from './collapse.component'; @NgModule({ declarations: [NzCollapsePanelComponent, NzCollapseComponent], diff --git a/components/collapse/nz-collapse.spec.ts b/components/collapse/collapse.spec.ts similarity index 95% rename from components/collapse/nz-collapse.spec.ts rename to components/collapse/collapse.spec.ts index 0fa72119534..8c86b72b7e2 100644 --- a/components/collapse/nz-collapse.spec.ts +++ b/components/collapse/collapse.spec.ts @@ -3,9 +3,9 @@ import { ComponentFixture, fakeAsync, TestBed } from '@angular/core/testing'; import { By } from '@angular/platform-browser'; import { NoopAnimationsModule } from '@angular/platform-browser/animations'; -import { NzCollapsePanelComponent } from './nz-collapse-panel.component'; -import { NzCollapseComponent } from './nz-collapse.component'; -import { NzCollapseModule } from './nz-collapse.module'; +import { NzCollapsePanelComponent } from './collapse-panel.component'; +import { NzCollapseComponent } from './collapse.component'; +import { NzCollapseModule } from './collapse.module'; describe('collapse', () => { beforeEach(fakeAsync(() => { @@ -30,15 +30,15 @@ describe('collapse', () => { }); it('should className correct', () => { fixture.detectChanges(); - expect(collapse.nativeElement.firstElementChild!.classList).toContain('ant-collapse'); + expect(collapse.nativeElement!.classList).toContain('ant-collapse'); expect(panels.every(panel => panel.nativeElement.classList.contains('ant-collapse-item'))).toBe(true); }); it('should border work', () => { fixture.detectChanges(); - expect(collapse.nativeElement.firstElementChild!.classList).not.toContain('ant-collapse-borderless'); + expect(collapse.nativeElement!.classList).not.toContain('ant-collapse-borderless'); testComponent.bordered = false; fixture.detectChanges(); - expect(collapse.nativeElement.firstElementChild!.classList).toContain('ant-collapse-borderless'); + expect(collapse.nativeElement!.classList).toContain('ant-collapse-borderless'); }); it('should showArrow work', () => { fixture.detectChanges(); diff --git a/components/collapse/doc/index.en-US.md b/components/collapse/doc/index.en-US.md index 0483e6514f1..594c1c73faf 100755 --- a/components/collapse/doc/index.en-US.md +++ b/components/collapse/doc/index.en-US.md @@ -24,6 +24,7 @@ import { NzCollapseModule } from 'ng-zorro-antd/collapse'; | -------- | ----------- | ---- | ------- | ------------- | | `[nzAccordion]` | Accordion mode | `boolean` | `false`| ✅ | | `[nzBordered]` | Set border style | `boolean` | `true` | ✅ | +| `[nzExpandIconPosition]` | Set expand icon position | `'left' \| 'right'` | `left` | - | ### nz-collapse-panel diff --git a/components/collapse/doc/index.zh-CN.md b/components/collapse/doc/index.zh-CN.md index defd041f4fd..8aa3ccd7d8b 100755 --- a/components/collapse/doc/index.zh-CN.md +++ b/components/collapse/doc/index.zh-CN.md @@ -25,6 +25,7 @@ import { NzCollapseModule } from 'ng-zorro-antd/collapse'; | --- | --- | --- | --- | --- | | `[nzAccordion]` | 是否每次只打开一个tab | `boolean` | `false` | ✅ | | `[nzBordered]` | 是否有边框 | `boolean` | `true` | ✅ | +| `[nzExpandIconPosition]` | 设置图标位置 | `'left' \| 'right'` | `left` | - | ### nz-collapse-panel diff --git a/components/collapse/nz-collapse-panel.component.html b/components/collapse/nz-collapse-panel.component.html deleted file mode 100644 index 9b17d8e33a5..00000000000 --- a/components/collapse/nz-collapse-panel.component.html +++ /dev/null @@ -1,25 +0,0 @@ - -
-
- -
-
diff --git a/components/collapse/nz-collapse.component.html b/components/collapse/nz-collapse.component.html deleted file mode 100644 index a0a0d99ea94..00000000000 --- a/components/collapse/nz-collapse.component.html +++ /dev/null @@ -1,3 +0,0 @@ -
- -
diff --git a/components/collapse/public-api.ts b/components/collapse/public-api.ts index 518faea2c5b..705887f3425 100644 --- a/components/collapse/public-api.ts +++ b/components/collapse/public-api.ts @@ -6,6 +6,6 @@ * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE */ -export * from './nz-collapse-panel.component'; -export * from './nz-collapse.component'; -export * from './nz-collapse.module'; +export * from './collapse-panel.component'; +export * from './collapse.component'; +export * from './collapse.module'; diff --git a/components/collapse/style/entry.less b/components/collapse/style/entry.less index 06547c43acd..96cebe33bff 100644 --- a/components/collapse/style/entry.less +++ b/components/collapse/style/entry.less @@ -1 +1,2 @@ @import './index.less'; +@import './patch.less'; diff --git a/components/collapse/style/patch.less b/components/collapse/style/patch.less new file mode 100644 index 00000000000..1798a5aecac --- /dev/null +++ b/components/collapse/style/patch.less @@ -0,0 +1,6 @@ +nz-collapse { + display: block; +} +nz-collapse-panel { + display: block; +}