-
Notifications
You must be signed in to change notification settings - Fork 6.7k
/
cell.ts
196 lines (175 loc) · 5.79 KB
/
cell.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
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
/**
* @license
* Copyright Google LLC All Rights Reserved.
*
* Use of this source code is governed by an MIT-style license that can be
* found in the LICENSE file at https://angular.io/license
*/
import {BooleanInput, coerceBooleanProperty} from '@angular/cdk/coercion';
import {
ContentChild,
Directive,
ElementRef,
Input,
TemplateRef,
Inject,
Optional,
} from '@angular/core';
import {CanStick, CanStickCtor, mixinHasStickyInput} from './can-stick';
import {CDK_TABLE} from './tokens';
/** Base interface for a cell definition. Captures a column's cell template definition. */
export interface CellDef {
template: TemplateRef<any>;
}
/**
* Cell definition for a CDK table.
* Captures the template of a column's data row cell as well as cell-specific properties.
*/
@Directive({selector: '[cdkCellDef]'})
export class CdkCellDef implements CellDef {
constructor(/** @docs-private */ public template: TemplateRef<any>) {}
}
/**
* Header cell definition for a CDK table.
* Captures the template of a column's header cell and as well as cell-specific properties.
*/
@Directive({selector: '[cdkHeaderCellDef]'})
export class CdkHeaderCellDef implements CellDef {
constructor(/** @docs-private */ public template: TemplateRef<any>) {}
}
/**
* Footer cell definition for a CDK table.
* Captures the template of a column's footer cell and as well as cell-specific properties.
*/
@Directive({selector: '[cdkFooterCellDef]'})
export class CdkFooterCellDef implements CellDef {
constructor(/** @docs-private */ public template: TemplateRef<any>) {}
}
// Boilerplate for applying mixins to CdkColumnDef.
/** @docs-private */
class CdkColumnDefBase {}
const _CdkColumnDefBase: CanStickCtor&typeof CdkColumnDefBase =
mixinHasStickyInput(CdkColumnDefBase);
/**
* Column definition for the CDK table.
* Defines a set of cells available for a table column.
*/
@Directive({
selector: '[cdkColumnDef]',
inputs: ['sticky'],
providers: [{provide: 'MAT_SORT_HEADER_COLUMN_DEF', useExisting: CdkColumnDef}],
})
export class CdkColumnDef extends _CdkColumnDefBase implements CanStick {
/** Unique name for this column. */
@Input('cdkColumnDef')
get name(): string {
return this._name;
}
set name(name: string) {
// If the directive is set without a name (updated programatically), then this setter will
// trigger with an empty string and should not overwrite the programatically set value.
if (name) {
this._name = name;
this.cssClassFriendlyName = name.replace(/[^a-z0-9_-]/ig, '-');
this._updateColumnCssClassName();
}
}
_name: string;
/**
* Whether this column should be sticky positioned on the end of the row. Should make sure
* that it mimics the `CanStick` mixin such that `_hasStickyChanged` is set to true if the value
* has been changed.
*/
@Input('stickyEnd')
get stickyEnd(): boolean {
return this._stickyEnd;
}
set stickyEnd(v: boolean) {
const prevValue = this._stickyEnd;
this._stickyEnd = coerceBooleanProperty(v);
this._hasStickyChanged = prevValue !== this._stickyEnd;
}
_stickyEnd: boolean = false;
/** @docs-private */
@ContentChild(CdkCellDef) cell: CdkCellDef;
/** @docs-private */
@ContentChild(CdkHeaderCellDef) headerCell: CdkHeaderCellDef;
/** @docs-private */
@ContentChild(CdkFooterCellDef) footerCell: CdkFooterCellDef;
/**
* Transformed version of the column name that can be used as part of a CSS classname. Excludes
* all non-alphanumeric characters and the special characters '-' and '_'. Any characters that
* do not match are replaced by the '-' character.
*/
cssClassFriendlyName: string;
/**
* Class name for cells in this column.
* @docs-private
*/
_columnCssClassName: string[];
constructor(@Inject(CDK_TABLE) @Optional() public _table?: any) {
super();
}
/**
* Overridable method that sets the css classes that will be added to every cell in this
* column.
* In the future, columnCssClassName will change from type string[] to string and this
* will set a single string value.
* @docs-private
*/
protected _updateColumnCssClassName() {
this._columnCssClassName = [`cdk-column-${this.cssClassFriendlyName}`];
}
static ngAcceptInputType_sticky: BooleanInput;
static ngAcceptInputType_stickyEnd: BooleanInput;
}
/** Base class for the cells. Adds a CSS classname that identifies the column it renders in. */
export class BaseCdkCell {
constructor(columnDef: CdkColumnDef, elementRef: ElementRef) {
// If IE 11 is dropped before we switch to setting a single class name, change to multi param
// with destructuring.
const classList = elementRef.nativeElement.classList;
for (const className of columnDef._columnCssClassName) {
classList.add(className);
}
}
}
/** Header cell template container that adds the right classes and role. */
@Directive({
selector: 'cdk-header-cell, th[cdk-header-cell]',
host: {
'class': 'cdk-header-cell',
'role': 'columnheader',
},
})
export class CdkHeaderCell extends BaseCdkCell {
constructor(columnDef: CdkColumnDef, elementRef: ElementRef) {
super(columnDef, elementRef);
}
}
/** Footer cell template container that adds the right classes and role. */
@Directive({
selector: 'cdk-footer-cell, td[cdk-footer-cell]',
host: {
'class': 'cdk-footer-cell',
'role': 'gridcell',
},
})
export class CdkFooterCell extends BaseCdkCell {
constructor(columnDef: CdkColumnDef, elementRef: ElementRef) {
super(columnDef, elementRef);
}
}
/** Cell template container that adds the right classes and role. */
@Directive({
selector: 'cdk-cell, td[cdk-cell]',
host: {
'class': 'cdk-cell',
'role': 'gridcell',
},
})
export class CdkCell extends BaseCdkCell {
constructor(columnDef: CdkColumnDef, elementRef: ElementRef) {
super(columnDef, elementRef);
}
}