@@ -17,7 +17,7 @@ import {
17
17
import { FormsModule } from '@angular/forms' ;
18
18
19
19
import { NzButtonModule } from 'ng-zorro-antd/button' ;
20
- import { NzCheckboxModule } from 'ng-zorro-antd/checkbox' ;
20
+ import { NzCheckboxComponent } from 'ng-zorro-antd/checkbox' ;
21
21
import { NzOutletModule } from 'ng-zorro-antd/core/outlet' ;
22
22
import { NzCheckListI18nInterface } from 'ng-zorro-antd/i18n' ;
23
23
import { NzIconModule } from 'ng-zorro-antd/icon' ;
@@ -29,89 +29,97 @@ import { NzItemProps } from './typings';
29
29
selector : 'nz-check-list-content' ,
30
30
changeDetection : ChangeDetectionStrategy . OnPush ,
31
31
encapsulation : ViewEncapsulation . None ,
32
- imports : [ NzIconModule , NzProgressModule , NzOutletModule , NzButtonModule , NzCheckboxModule , FormsModule , DecimalPipe ] ,
32
+ imports : [
33
+ NzIconModule ,
34
+ NzProgressModule ,
35
+ NzOutletModule ,
36
+ NzButtonModule ,
37
+ FormsModule ,
38
+ DecimalPipe ,
39
+ NzCheckboxComponent
40
+ ] ,
33
41
template : `
34
42
@if (isVisible) {
35
43
@if (getPercent() === 100) {
36
- <div class="ant-checklist -header-finish">
37
- <span nz-icon nzType="check-circle" nzTheme="outline" class="ant-checklist -header-finish-icon"></span>
38
- <h3 class="ant-checklist -header-finish-title">{{ locale.checkListFinish }}</h3>
44
+ <div class="ant-check-list -header-finish">
45
+ <span nz-icon nzType="check-circle" nzTheme="outline" class="ant-check-list -header-finish-icon"></span>
46
+ <h3 class="ant-check-list -header-finish-title">{{ locale.checkListFinish }}</h3>
39
47
<button nz-button nzType="primary" style="margin: 24px" (click)="closePopover.emit(false)">{{
40
48
locale.checkListClose
41
49
}}</button>
42
50
</div>
43
51
} @else {
44
- <div class="ant-checklist -header">
45
- <div class="ant-checklist -header-title">
52
+ <div class="ant-check-list -header">
53
+ <div class="ant-check-list -header-title">
46
54
@if (!!title) {
47
55
<ng-container *nzStringTemplateOutlet="title">{{ title }}</ng-container>
48
56
} @else {
49
57
{{ locale.checkList }}
50
58
}
51
59
</div>
52
- <div class="ant-checklist -header-extra">
60
+ <div class="ant-check-list -header-extra">
53
61
<span nz-icon nzType="down" nzTheme="outline" (click)="closePopover.emit(false)"></span>
54
62
</div>
55
63
</div>
56
64
@if (progress) {
57
- <div class="ant-checklist -progressBar">
58
- <div class="ant-checklist -progressBar-progress">
65
+ <div class="ant-check-list -progressBar">
66
+ <div class="ant-check-list -progressBar-progress">
59
67
<nz-progress [nzPercent]="getPercent() | number: '1.0-0'"></nz-progress>
60
68
</div>
61
69
</div>
62
70
}
63
71
}
64
- <div class="ant-checklist -steps-content">
72
+ <div class="ant-check-list -steps-content">
65
73
@for (item of items; track item.key || item.description; let i = $index) {
66
74
<div
67
- class="ant-checklist -steps"
68
- [class.ant-checklist -highlight]="index === i + 1"
69
- [class.ant-checklist -checked]="index > i + 1"
75
+ class="ant-check-list -steps"
76
+ [class.ant-check-list -highlight]="index === i + 1"
77
+ [class.ant-check-list -checked]="index > i + 1"
70
78
>
71
- <div class="ant-checklist -steps-item">
72
- <div class="ant-checklist -steps-item-circle">
79
+ <div class="ant-check-list -steps-item">
80
+ <div class="ant-check-list -steps-item-circle">
73
81
@if (index > i + 1) {
74
- <span nz-icon nzType="check" nzTheme="outline" class="ant-checklist -steps-checkoutlined"></span>
82
+ <span nz-icon nzType="check" nzTheme="outline" class="ant-check-list -steps-checkoutlined"></span>
75
83
} @else {
76
- <div class="ant-checklist -steps-number">{{ i + 1 }}</div>
84
+ <div class="ant-check-list -steps-number">{{ i + 1 }}</div>
77
85
}
78
86
</div>
79
- <div class="ant-checklist -steps-item-description">{{ item.description }}</div>
87
+ <div class="ant-check-list -steps-item-description">{{ item.description }}</div>
80
88
</div>
81
89
@if (index === i + 1 && !!item.onClick) {
82
90
<span
83
91
nz-icon
84
92
nzType="arrow-right"
85
93
nzTheme="outline"
86
- class="ant-checklist -steps-item-arrows"
94
+ class="ant-check-list -steps-item-arrows"
87
95
(click)="item.onClick()"
88
96
></span>
89
97
}
90
98
</div>
91
99
}
92
100
</div>
93
- <div class="ant-checklist -footer" (click)="cancel(false)">
101
+ <div class="ant-check-list -footer" (click)="cancel(false)">
94
102
@if (!!footer) {
95
103
<ng-container *nzStringTemplateOutlet="footer">{{ footer }}</ng-container>
96
104
} @else {
97
105
{{ locale.checkListFooter }}
98
106
}
99
107
</div>
100
108
} @else {
101
- <div class="ant-checklist -close-check">
102
- <div class="ant-checklist -close-check-title">{{ locale.checkListCheck }}</div>
103
- <div class="ant-checklist -close-check-action">
109
+ <div class="ant-check-list -close-check">
110
+ <div class="ant-check-list -close-check-title">{{ locale.checkListCheck }}</div>
111
+ <div class="ant-check-list -close-check-action">
104
112
<button nz-button nzType="primary" (click)="clearModel()">{{ locale.ok }}</button>
105
113
<button nz-button (click)="cancel(true)">{{ locale.cancel }}</button>
106
114
</div>
107
- <div class="ant-checklist -close-check-other">
115
+ <div class="ant-check-list -close-check-other">
108
116
<label nz-checkbox [(ngModel)]="checked">{{ locale.checkListCheckOther }}</label>
109
117
</div>
110
118
</div>
111
119
}
112
120
` ,
113
121
host : {
114
- class : 'ant-checklist -content'
122
+ class : 'ant-check-list -content'
115
123
}
116
124
} )
117
125
export class NzCheckListContentComponent {
@@ -128,13 +136,9 @@ export class NzCheckListContentComponent {
128
136
isVisible : boolean = true ;
129
137
130
138
getPercent ( ) : number {
131
- if ( this . index <= 1 ) {
132
- return 0 ;
133
- } else if ( this . index > this . items . length ) {
134
- return 100 ;
135
- } else {
136
- return ( ( this . index - 1 ) / this . items . length ) * 100 ;
137
- }
139
+ if ( this . index <= 1 ) return 0 ;
140
+ if ( this . index > this . items . length ) return 100 ;
141
+ return ( ( this . index - 1 ) / this . items . length ) * 100 ;
138
142
}
139
143
140
144
constructor ( private cdr : ChangeDetectorRef ) { }
0 commit comments