Skip to content

Commit 4cd298b

Browse files
OriginRingLafferyHyperLife1119
authored
feat(module:check-list): add check-list component (#8969)
Co-authored-by: Laffery <laffery86@gmail.com> Co-authored-by: HyperLife1119 <1838491745@qq.com>
1 parent 5157470 commit 4cd298b

23 files changed

Lines changed: 1081 additions & 0 deletions

‎.github/CODEOWNERS‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -74,6 +74,7 @@ components/color-picker/** @OriginRing
7474
components/hash-code/** @OriginRing
7575
components/flex/** @ParsaArvanehPA
7676
components/float-button/** @OriginRing
77+
components/check-list/** @OriginRing
7778

7879
# The `components/core/*` owners
7980
components/core/config/** @simplejason

‎components/check-list/check-list-button.component.ts‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
/**
2+
* Use of this source code is governed by an MIT-style license that can be
3+
* found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
4+
*/
5+
6+
import { ChangeDetectionStrategy, Component, ViewEncapsulation } from '@angular/core';
7+
8+
@Component({
9+
selector: 'nz-check-list-button',
10+
changeDetection: ChangeDetectionStrategy.OnPush,
11+
encapsulation: ViewEncapsulation.None,
12+
template: `<ng-content></ng-content>`,
13+
host: {
14+
class: 'ant-btn ant-btn-primary ant-check-list-button'
15+
}
16+
})
17+
export class NzCheckListButtonComponent {}

‎components/check-list/check-list-content.component.ts‎

Lines changed: 135 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,135 @@
1+
/**
2+
* Use of this source code is governed by an MIT-style license that can be
3+
* found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
4+
*/
5+
6+
import { DecimalPipe } from '@angular/common';
7+
import {
8+
ChangeDetectionStrategy,
9+
Component,
10+
computed,
11+
input,
12+
output,
13+
signal,
14+
TemplateRef,
15+
ViewEncapsulation
16+
} from '@angular/core';
17+
import { FormsModule } from '@angular/forms';
18+
19+
import { NzButtonModule } from 'ng-zorro-antd/button';
20+
import { NzCheckboxModule } from 'ng-zorro-antd/checkbox';
21+
import { NzOutletModule } from 'ng-zorro-antd/core/outlet';
22+
import { NzCheckListI18nInterface } from 'ng-zorro-antd/i18n';
23+
import { NzIconModule } from 'ng-zorro-antd/icon';
24+
import { NzProgressModule } from 'ng-zorro-antd/progress';
25+
26+
import { NzItemProps } from './typings';
27+
28+
@Component({
29+
selector: 'nz-check-list-content',
30+
changeDetection: ChangeDetectionStrategy.OnPush,
31+
encapsulation: ViewEncapsulation.None,
32+
imports: [NzIconModule, NzProgressModule, NzOutletModule, NzCheckboxModule, NzButtonModule, FormsModule, DecimalPipe],
33+
template: `
34+
@let i18n = locale();
35+
@if (visible()) {
36+
@if (progressPercent() === 100) {
37+
<div class="ant-check-list-header-finish">
38+
<nz-icon nzType="check-circle" nzTheme="outline" class="ant-check-list-header-finish-icon" />
39+
<h3 class="ant-check-list-header-finish-title">{{ i18n.checkListFinish }}</h3>
40+
<button nz-button nzType="primary" [style.margin.px]="24" (click)="closePopover.emit(false)">
41+
{{ i18n.checkListClose }}
42+
</button>
43+
</div>
44+
} @else {
45+
<div class="ant-check-list-header">
46+
<div class="ant-check-list-header-title">
47+
@if (!!title()) {
48+
<ng-container *nzStringTemplateOutlet="title()">{{ title() }}</ng-container>
49+
} @else {
50+
{{ i18n.checkList }}
51+
}
52+
</div>
53+
<div class="ant-check-list-header-extra">
54+
<nz-icon nzType="down" nzTheme="outline" (click)="closePopover.emit(false)" />
55+
</div>
56+
</div>
57+
@if (progress()) {
58+
<div class="ant-check-list-progressBar">
59+
<div class="ant-check-list-progressBar-progress">
60+
<nz-progress [nzPercent]="progressPercent() | number: '1.0-0'"></nz-progress>
61+
</div>
62+
</div>
63+
}
64+
}
65+
<div class="ant-check-list-steps-content">
66+
@for (item of items(); track item.key || item.description; let i = $index) {
67+
@let itemHighlight = index() === i + 1;
68+
@let itemChecked = index() > i + 1;
69+
<div
70+
class="ant-check-list-steps"
71+
[class.ant-check-list-highlight]="itemHighlight"
72+
[class.ant-check-list-checked]="itemChecked"
73+
>
74+
<div class="ant-check-list-steps-item">
75+
<div class="ant-check-list-steps-item-circle">
76+
@if (itemChecked) {
77+
<nz-icon nzType="check" nzTheme="outline" class="ant-check-list-steps-checkoutlined" />
78+
} @else {
79+
<div class="ant-check-list-steps-number">{{ i + 1 }}</div>
80+
}
81+
</div>
82+
<div class="ant-check-list-steps-item-description">{{ item.description }}</div>
83+
</div>
84+
@if (itemHighlight && !!item.onClick) {
85+
<nz-icon
86+
nzType="arrow-right"
87+
nzTheme="outline"
88+
class="ant-check-list-steps-item-arrows"
89+
(click)="item.onClick()"
90+
/>
91+
}
92+
</div>
93+
}
94+
</div>
95+
<div class="ant-check-list-footer" (click)="visible.set(false)">
96+
@if (!!footer()) {
97+
<ng-container *nzStringTemplateOutlet="footer()">{{ footer() }}</ng-container>
98+
} @else {
99+
{{ i18n.checkListFooter }}
100+
}
101+
</div>
102+
} @else {
103+
<div class="ant-check-list-close-check">
104+
<div class="ant-check-list-close-check-title">{{ i18n.checkListCheck }}</div>
105+
<div class="ant-check-list-close-check-action">
106+
<button nz-button nzType="primary" (click)="visible.set(false); hide.emit(checked)">{{ i18n.ok }}</button>
107+
<button nz-button (click)="visible.set(true)">{{ i18n.cancel }}</button>
108+
</div>
109+
<div class="ant-check-list-close-check-other">
110+
<label nz-checkbox [(ngModel)]="checked">{{ i18n.checkListCheckOther }}</label>
111+
</div>
112+
</div>
113+
}
114+
`,
115+
host: {
116+
class: 'ant-check-list-content'
117+
}
118+
})
119+
export class NzCheckListContentComponent {
120+
locale = input.required<NzCheckListI18nInterface>();
121+
items = input<NzItemProps[]>([]);
122+
index = input(0);
123+
progress = input(true);
124+
title = input<TemplateRef<void> | string | null>(null);
125+
footer = input<TemplateRef<void> | string | null>(null);
126+
readonly closePopover = output<boolean>();
127+
readonly hide = output<boolean>();
128+
129+
protected checked = false;
130+
protected visible = signal(true);
131+
protected progressPercent = computed(() => {
132+
const index = Math.min(Math.max(this.index() - 1, 0), this.items().length);
133+
return (index / this.items().length) * 100;
134+
});
135+
}

0 commit comments

Comments
 (0)