-
Notifications
You must be signed in to change notification settings - Fork 6.7k
/
chips-a11y.ts
85 lines (70 loc) · 1.87 KB
/
chips-a11y.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
/**
* @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 {MatChipInputEvent} from '@angular/material/chips';
import {MatSnackBar} from '@angular/material/snack-bar';
import {ThemePalette} from '@angular/material/core';
export interface Person {
name: string;
}
@Component({
moduleId: module.id,
selector: 'chips-a11y',
templateUrl: 'chips-a11y.html',
styleUrls: ['chips-a11y.css'],
})
export class ChipsAccessibilityDemo {
visible: boolean = true;
color: ThemePalette;
selectable: boolean = true;
removable: boolean = true;
addOnBlur: boolean = true;
message: string = '';
people: Person[] = [
{name: 'Kara'},
{name: 'Jeremy'},
{name: 'Topher'},
{name: 'Elad'},
{name: 'Kristiyan'},
{name: 'Paul'}
];
availableColors = [
{name: 'none', color: ''},
{name: 'Primary', color: 'primary'},
{name: 'Accent', color: 'accent'},
{name: 'Warn', color: 'warn'}
];
constructor(public snackBar: MatSnackBar) {}
displayMessage(message: string): void {
this.message = message;
}
add(event: MatChipInputEvent): void {
const input = event.input;
const value = event.value;
// Add our person
if ((value || '').trim()) {
const name = value.trim();
this.people.push({ name: name });
this.snackBar.open(`${name} added`, '', {duration: 2000});
}
// Reset the input value
if (input) {
input.value = '';
}
}
remove(person: Person): void {
const index = this.people.indexOf(person);
if (index >= 0) {
this.people.splice(index, 1);
this.snackBar.open(`${person.name} deleted`, '', {duration: 2000});
}
}
toggleVisible(): void {
this.visible = false;
}
}