-
Notifications
You must be signed in to change notification settings - Fork 3.8k
/
cascader-li.component.ts
87 lines (80 loc) · 2.79 KB
/
cascader-li.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
/**
* 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 { Direction } from '@angular/cdk/bidi';
import {
ChangeDetectionStrategy,
ChangeDetectorRef,
Component,
ElementRef,
Input,
OnInit,
Renderer2,
TemplateRef,
ViewEncapsulation
} from '@angular/core';
import { NzCascaderOption } from './typings';
@Component({
changeDetection: ChangeDetectionStrategy.OnPush,
encapsulation: ViewEncapsulation.None,
selector: '[nz-cascader-option]',
exportAs: 'nzCascaderOption',
template: `
<ng-container *ngIf="optionTemplate; else defaultOptionTemplate">
<ng-template
[ngTemplateOutlet]="optionTemplate"
[ngTemplateOutletContext]="{ $implicit: option, index: columnIndex }"
></ng-template>
</ng-container>
<ng-template #defaultOptionTemplate>
<div
class="ant-cascader-menu-item-content"
[innerHTML]="optionLabel | nzHighlight: highlightText:'g':'ant-cascader-menu-item-keyword'"
></div>
</ng-template>
<div *ngIf="!option.isLeaf || option.children?.length || option.loading" class="ant-cascader-menu-item-expand-icon">
<span *ngIf="option.loading; else icon" nz-icon nzType="loading"></span>
<ng-template #icon>
<ng-container *nzStringTemplateOutlet="expandIcon">
<span nz-icon [nzType]="$any(expandIcon)"></span>
</ng-container>
</ng-template>
</div>
`,
host: {
'[attr.title]': 'option.title || optionLabel',
'[class.ant-cascader-menu-item-active]': 'activated',
'[class.ant-cascader-menu-item-expand]': '!option.isLeaf',
'[class.ant-cascader-menu-item-disabled]': 'option.disabled'
}
})
export class NzCascaderOptionComponent implements OnInit {
@Input() optionTemplate: TemplateRef<NzCascaderOption> | null = null;
@Input() option!: NzCascaderOption;
@Input() activated = false;
@Input() highlightText!: string;
@Input() nzLabelProperty = 'label';
@Input() columnIndex!: number;
@Input() expandIcon: string | TemplateRef<void> = '';
@Input() dir: Direction = 'ltr';
readonly nativeElement: HTMLElement;
constructor(private cdr: ChangeDetectorRef, elementRef: ElementRef, renderer: Renderer2) {
renderer.addClass(elementRef.nativeElement, 'ant-cascader-menu-item');
renderer.addClass(elementRef.nativeElement, 'ant-cascader-menu-item-expanded');
this.nativeElement = elementRef.nativeElement;
}
ngOnInit(): void {
if (this.expandIcon === '' && this.dir === 'rtl') {
this.expandIcon = 'left';
} else if (this.expandIcon === '') {
this.expandIcon = 'right';
}
}
get optionLabel(): string {
return this.option[this.nzLabelProperty];
}
markForCheck(): void {
this.cdr.markForCheck();
}
}