/
collapse-panel.component.ts
129 lines (116 loc) · 4.11 KB
/
collapse-panel.component.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
/**
* Use of this source code is governed by an MIT-style license that can be
* found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
*/
import {
ChangeDetectionStrategy,
ChangeDetectorRef,
Component,
ElementRef,
EventEmitter,
Host,
Input,
NgZone,
OnDestroy,
OnInit,
Optional,
Output,
TemplateRef,
ViewChild,
ViewEncapsulation
} from '@angular/core';
import { fromEvent } from 'rxjs';
import { filter, takeUntil } from 'rxjs/operators';
import { collapseMotion } from 'ng-zorro-antd/core/animation';
import { NzConfigKey, NzConfigService, WithConfig } from 'ng-zorro-antd/core/config';
import { NzNoAnimationDirective } from 'ng-zorro-antd/core/no-animation';
import { NzDestroyService } from 'ng-zorro-antd/core/services';
import { BooleanInput } from 'ng-zorro-antd/core/types';
import { InputBoolean } from 'ng-zorro-antd/core/util';
import { NzCollapseComponent } from './collapse.component';
const NZ_CONFIG_MODULE_NAME: NzConfigKey = 'collapsePanel';
@Component({
selector: 'nz-collapse-panel',
exportAs: 'nzCollapsePanel',
changeDetection: ChangeDetectionStrategy.OnPush,
encapsulation: ViewEncapsulation.None,
animations: [collapseMotion],
template: `
<div #collapseHeader role="button" [attr.aria-expanded]="nzActive" class="ant-collapse-header">
<div *ngIf="nzShowArrow">
<ng-container *nzStringTemplateOutlet="nzExpandedIcon; let expandedIcon">
<i nz-icon [nzType]="expandedIcon || 'right'" class="ant-collapse-arrow" [nzRotate]="nzActive ? 90 : 0"></i>
</ng-container>
</div>
<ng-container *nzStringTemplateOutlet="nzHeader">{{ nzHeader }}</ng-container>
<div class="ant-collapse-extra" *ngIf="nzExtra">
<ng-container *nzStringTemplateOutlet="nzExtra">{{ nzExtra }}</ng-container>
</div>
</div>
<div
class="ant-collapse-content"
[class.ant-collapse-content-active]="nzActive"
[@.disabled]="noAnimation?.nzNoAnimation"
[@collapseMotion]="nzActive ? 'expanded' : 'hidden'"
>
<div class="ant-collapse-content-box">
<ng-content></ng-content>
</div>
</div>
`,
host: {
class: 'ant-collapse-item',
'[class.ant-collapse-no-arrow]': '!nzShowArrow',
'[class.ant-collapse-item-active]': 'nzActive',
'[class.ant-collapse-item-disabled]': 'nzDisabled'
},
providers: [NzDestroyService]
})
export class NzCollapsePanelComponent implements OnInit, OnDestroy {
readonly _nzModuleName: NzConfigKey = NZ_CONFIG_MODULE_NAME;
static ngAcceptInputType_nzActive: BooleanInput;
static ngAcceptInputType_nzDisabled: BooleanInput;
static ngAcceptInputType_nzShowArrow: BooleanInput;
@Input() @InputBoolean() nzActive = false;
@Input() @InputBoolean() nzDisabled = false;
@Input() @WithConfig() @InputBoolean() nzShowArrow: boolean = true;
@Input() nzExtra?: string | TemplateRef<void>;
@Input() nzHeader?: string | TemplateRef<void>;
@Input() nzExpandedIcon?: string | TemplateRef<void>;
@Output() readonly nzActiveChange = new EventEmitter<boolean>();
@ViewChild('collapseHeader', { static: true }) collapseHeader!: ElementRef<HTMLElement>;
markForCheck(): void {
this.cdr.markForCheck();
}
constructor(
public nzConfigService: NzConfigService,
private ngZone: NgZone,
private cdr: ChangeDetectorRef,
private destroy$: NzDestroyService,
@Host() private nzCollapseComponent: NzCollapseComponent,
@Optional() public noAnimation?: NzNoAnimationDirective
) {
this.nzConfigService
.getConfigChangeEventForComponent(NZ_CONFIG_MODULE_NAME)
.pipe(takeUntil(this.destroy$))
.subscribe(() => {
this.cdr.markForCheck();
});
}
ngOnInit(): void {
this.nzCollapseComponent.addPanel(this);
this.ngZone.runOutsideAngular(() =>
fromEvent(this.collapseHeader.nativeElement, 'click')
.pipe(
filter(() => !this.nzDisabled),
takeUntil(this.destroy$)
)
.subscribe(() => {
this.ngZone.run(() => this.nzCollapseComponent.click(this));
})
);
}
ngOnDestroy(): void {
this.nzCollapseComponent.removePanel(this);
}
}