-
Notifications
You must be signed in to change notification settings - Fork 6.7k
/
mdc-chips-demo.ts
122 lines (104 loc) · 2.92 KB
/
mdc-chips-demo.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
/**
* @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 {Component} from '@angular/core';
import {COMMA, ENTER} from '@angular/cdk/keycodes';
import {CommonModule} from '@angular/common';
import {ThemePalette} from '@angular/material/core';
import {MatChipInputEvent, MatChipEditedEvent, MatChipsModule} from '@angular/material/chips';
import {FormsModule, ReactiveFormsModule} from '@angular/forms';
import {MatButtonModule} from '@angular/material-experimental/mdc-button';
import {MatCardModule} from '@angular/material/card';
import {MatCheckboxModule} from '@angular/material/checkbox';
import {MatFormFieldModule} from '@angular/material/form-field';
import {MatToolbarModule} from '@angular/material/toolbar';
import {MatIconModule} from '@angular/material/icon';
export interface Person {
name: string;
}
export interface DemoColor {
name: string;
color: ThemePalette;
}
@Component({
selector: 'mdc-chips-demo',
templateUrl: 'mdc-chips-demo.html',
styleUrls: ['mdc-chips-demo.css'],
standalone: true,
imports: [
CommonModule,
FormsModule,
MatButtonModule,
MatCardModule,
MatCheckboxModule,
MatChipsModule,
MatFormFieldModule,
MatIconModule,
MatToolbarModule,
ReactiveFormsModule,
],
})
export class MdcChipsDemo {
visible = true;
selectable = true;
removable = true;
addOnBlur = true;
disabledListboxes = false;
disableInputs = false;
editable = false;
message = '';
// Enter, comma, semi-colon
separatorKeysCodes = [ENTER, COMMA, 186];
selectedPeople = null;
people: Person[] = [
{name: 'Kara'},
{name: 'Jeremy'},
{name: 'Topher'},
{name: 'Elad'},
{name: 'Kristiyan'},
{name: 'Paul'},
];
availableColors: DemoColor[] = [
{name: 'none', color: undefined},
{name: 'Primary', color: 'primary'},
{name: 'Accent', color: 'accent'},
{name: 'Warn', color: 'warn'},
];
displayMessage(message: string): void {
this.message = message;
}
add(event: MatChipInputEvent): void {
const value = (event.value || '').trim();
// Add our person
if (value) {
this.people.push({name: value});
}
// Clear the input value
event.chipInput!.clear();
}
remove(person: Person): void {
const index = this.people.indexOf(person);
if (index >= 0) {
this.people.splice(index, 1);
}
}
edit(person: Person, event: MatChipEditedEvent): void {
if (!event.value.trim().length) {
this.remove(person);
return;
}
const index = this.people.indexOf(person);
const newPeople = this.people.slice();
newPeople[index] = {...newPeople[index], name: event.value};
this.people = newPeople;
}
toggleVisible(): void {
this.visible = false;
}
selectedColors: string[] = ['Primary', 'Warn'];
selectedColor = 'Accent';
}