@sumaris-net/ngx-components 1.6.15 → 1.6.16
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/bundles/sumaris-net.ngx-components.umd.js +81 -24
- package/bundles/sumaris-net.ngx-components.umd.js.map +1 -1
- package/bundles/sumaris-net.ngx-components.umd.min.js +2 -2
- package/bundles/sumaris-net.ngx-components.umd.min.js.map +1 -1
- package/esm2015/src/app/shared/material/badge/badge-icon.directive.js +65 -19
- package/esm2015/src/app/shared/material/badge/badge-icon.test.js +6 -7
- package/fesm2015/sumaris-net.ngx-components.js +68 -24
- package/fesm2015/sumaris-net.ngx-components.js.map +1 -1
- package/package.json +1 -1
- package/src/app/shared/material/badge/badge-icon.directive.d.ts +15 -5
- package/src/app/shared/material/badge/badge-icon.test.d.ts +6 -3
- package/sumaris-net.ngx-components.metadata.json +1 -1
|
@@ -1,7 +1,37 @@
|
|
|
1
1
|
import { Directive, ElementRef, Input } from '@angular/core';
|
|
2
|
+
import { Subject } from 'rxjs';
|
|
2
3
|
export class MatBadgeIconDirective {
|
|
3
4
|
constructor(el) {
|
|
4
5
|
this.el = el;
|
|
6
|
+
this._subscription = null;
|
|
7
|
+
this._$update = new Subject();
|
|
8
|
+
}
|
|
9
|
+
set size(value) {
|
|
10
|
+
if (this._size !== value) {
|
|
11
|
+
this._size = value;
|
|
12
|
+
this.updateView();
|
|
13
|
+
}
|
|
14
|
+
}
|
|
15
|
+
get size() {
|
|
16
|
+
return this._size;
|
|
17
|
+
}
|
|
18
|
+
set color(value) {
|
|
19
|
+
if (this._color !== value) {
|
|
20
|
+
this._color = value;
|
|
21
|
+
this.updateView();
|
|
22
|
+
}
|
|
23
|
+
}
|
|
24
|
+
get color() {
|
|
25
|
+
return this._color;
|
|
26
|
+
}
|
|
27
|
+
set fill(value) {
|
|
28
|
+
if (this._fill !== value) {
|
|
29
|
+
this._fill = value;
|
|
30
|
+
this.updateView();
|
|
31
|
+
}
|
|
32
|
+
}
|
|
33
|
+
get fill() {
|
|
34
|
+
return this._fill;
|
|
5
35
|
}
|
|
6
36
|
set matIcon(icon) {
|
|
7
37
|
if (this._matIcon !== icon) {
|
|
@@ -16,18 +46,25 @@ export class MatBadgeIconDirective {
|
|
|
16
46
|
}
|
|
17
47
|
}
|
|
18
48
|
ngOnInit() {
|
|
49
|
+
this._size = this._size || 'medium';
|
|
50
|
+
this._color = this._color || 'primary';
|
|
51
|
+
if (this._color === 'warn')
|
|
52
|
+
this._color = 'warning';
|
|
19
53
|
this.updateView();
|
|
54
|
+
this._subscription = this._$update
|
|
55
|
+
//.pipe(debounceTime(10000))
|
|
56
|
+
.subscribe(() => this.updateView());
|
|
57
|
+
}
|
|
58
|
+
ngOnDestroy() {
|
|
59
|
+
var _a;
|
|
60
|
+
(_a = this._subscription) === null || _a === void 0 ? void 0 : _a.unsubscribe();
|
|
20
61
|
}
|
|
21
62
|
updateView() {
|
|
22
|
-
this.size = this.size || 'medium';
|
|
23
|
-
this.color = this.color || 'primary';
|
|
24
|
-
if (this.color === 'warn')
|
|
25
|
-
this.color = 'warning';
|
|
26
63
|
const badge = this.el.nativeElement.querySelector('.mat-badge-content');
|
|
27
64
|
if (!badge)
|
|
28
65
|
return;
|
|
29
66
|
let fontSize;
|
|
30
|
-
switch (this.
|
|
67
|
+
switch (this._size) {
|
|
31
68
|
case 'large':
|
|
32
69
|
fontSize = '24px';
|
|
33
70
|
break;
|
|
@@ -38,25 +75,31 @@ export class MatBadgeIconDirective {
|
|
|
38
75
|
fontSize = '16px';
|
|
39
76
|
break;
|
|
40
77
|
}
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
78
|
+
let html = '';
|
|
79
|
+
if (this._matIcon) {
|
|
80
|
+
html = `<i class="material-icons" style="font-size: ${fontSize};">${this._matIcon}</i>`;
|
|
81
|
+
}
|
|
82
|
+
else if (this._ionIcon) {
|
|
83
|
+
html = `<ion-icon style="font-size: ${fontSize}; pointer-events: none;" name="${this._ionIcon}"></ion-icon>`;
|
|
84
|
+
}
|
|
85
|
+
if (this._html !== html) {
|
|
86
|
+
this._html = html;
|
|
87
|
+
badge.innerHTML = html;
|
|
88
|
+
}
|
|
89
|
+
// Update style
|
|
44
90
|
// fill: 'clear'
|
|
45
|
-
if (this.
|
|
46
|
-
badge.style.color = `var(--ion-color-${this.
|
|
91
|
+
if (this._fill === 'clear') {
|
|
92
|
+
badge.style.color = `var(--ion-color-${this._color})`;
|
|
47
93
|
badge.style.background = 'transparent';
|
|
48
94
|
}
|
|
49
95
|
// fill: 'solid' (default value)
|
|
50
96
|
else {
|
|
51
|
-
badge.style.background = `var(--ion-color-${this.
|
|
52
|
-
badge.style.color = `var(--ion-color-${this.
|
|
53
|
-
}
|
|
54
|
-
if (this._matIcon) {
|
|
55
|
-
badge.innerHTML = `<i class="material-icons" style="font-size: ${fontSize};">${this._matIcon}</i>`;
|
|
56
|
-
}
|
|
57
|
-
else if (this._ionIcon) {
|
|
58
|
-
badge.innerHTML = `<ion-icon style="font-size: ${fontSize}; pointer-events: none;" name="${this._ionIcon}"></ion-icon>`;
|
|
97
|
+
badge.style.background = `var(--ion-color-${this._color})`;
|
|
98
|
+
badge.style.color = `var(--ion-color-${this._color}-contrast)`;
|
|
59
99
|
}
|
|
100
|
+
badge.style.alignItems = 'center';
|
|
101
|
+
badge.style.justifyContent = 'center';
|
|
102
|
+
badge.style.display = 'flex';
|
|
60
103
|
}
|
|
61
104
|
}
|
|
62
105
|
MatBadgeIconDirective.decorators = [
|
|
@@ -73,7 +116,10 @@ MatBadgeIconDirective.ctorParameters = () => [
|
|
|
73
116
|
{ type: ElementRef }
|
|
74
117
|
];
|
|
75
118
|
MatBadgeIconDirective.propDecorators = {
|
|
119
|
+
size: [{ type: Input, args: ['matBadgeSize',] }],
|
|
120
|
+
color: [{ type: Input, args: ['matBadgeColor',] }],
|
|
121
|
+
fill: [{ type: Input, args: ['matBadgeFill',] }],
|
|
76
122
|
matIcon: [{ type: Input, args: ['matBadgeIcon',] }],
|
|
77
123
|
ionIcon: [{ type: Input, args: ['ionBadgeIcon',] }]
|
|
78
124
|
};
|
|
79
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
125
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYmFkZ2UtaWNvbi5kaXJlY3RpdmUuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi8uLi9zcmMvYXBwL3NoYXJlZC9tYXRlcmlhbC9iYWRnZS9iYWRnZS1pY29uLmRpcmVjdGl2ZS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUMsU0FBUyxFQUFFLFVBQVUsRUFBZSxLQUFLLEVBQXdELE1BQU0sZUFBZSxDQUFDO0FBSS9ILE9BQU8sRUFBQyxPQUFPLEVBQWUsTUFBTSxNQUFNLENBQUM7QUFhM0MsTUFBTSxPQUFPLHFCQUFxQjtJQTBEaEMsWUFBb0IsRUFBYztRQUFkLE9BQUUsR0FBRixFQUFFLENBQVk7UUFIMUIsa0JBQWEsR0FBaUIsSUFBSSxDQUFDO1FBQ25DLGFBQVEsR0FBRyxJQUFJLE9BQU8sRUFBRSxDQUFDO0lBRUksQ0FBQztJQXhEdEMsSUFBMkIsSUFBSSxDQUFDLEtBQW1CO1FBQ2pELElBQUksSUFBSSxDQUFDLEtBQUssS0FBSyxLQUFLLEVBQUU7WUFDeEIsSUFBSSxDQUFDLEtBQUssR0FBRyxLQUFLLENBQUM7WUFDbkIsSUFBSSxDQUFDLFVBQVUsRUFBRSxDQUFDO1NBQ25CO0lBQ0gsQ0FBQztJQUVELElBQUksSUFBSTtRQUNOLE9BQU8sSUFBSSxDQUFDLEtBQUssQ0FBQztJQUNwQixDQUFDO0lBRUQsSUFBNEIsS0FBSyxDQUFDLEtBQXNDO1FBQ3RFLElBQUksSUFBSSxDQUFDLE1BQU0sS0FBSyxLQUFLLEVBQUU7WUFDekIsSUFBSSxDQUFDLE1BQU0sR0FBRyxLQUFLLENBQUM7WUFDcEIsSUFBSSxDQUFDLFVBQVUsRUFBRSxDQUFDO1NBQ25CO0lBQ0gsQ0FBQztJQUVELElBQUksS0FBSztRQUNQLE9BQU8sSUFBSSxDQUFDLE1BQU0sQ0FBQztJQUNyQixDQUFDO0lBRUQsSUFBMkIsSUFBSSxDQUFDLEtBQW1CO1FBQ2pELElBQUksSUFBSSxDQUFDLEtBQUssS0FBSyxLQUFLLEVBQUU7WUFDeEIsSUFBSSxDQUFDLEtBQUssR0FBRyxLQUFLLENBQUM7WUFDbkIsSUFBSSxDQUFDLFVBQVUsRUFBRSxDQUFDO1NBQ25CO0lBQ0gsQ0FBQztJQUVELElBQUksSUFBSTtRQUNOLE9BQU8sSUFBSSxDQUFDLEtBQUssQ0FBQztJQUNwQixDQUFDO0lBRUQsSUFBMkIsT0FBTyxDQUFDLElBQVk7UUFDN0MsSUFBSSxJQUFJLENBQUMsUUFBUSxLQUFLLElBQUksRUFBRTtZQUMxQixJQUFJLENBQUMsUUFBUSxHQUFHLElBQUksQ0FBQztZQUNyQixJQUFJLENBQUMsVUFBVSxFQUFFLENBQUM7U0FDbkI7SUFDSCxDQUFDO0lBQ0QsSUFBMkIsT0FBTyxDQUFDLElBQVk7UUFDN0MsSUFBSSxJQUFJLENBQUMsUUFBUSxLQUFLLElBQUksRUFBRTtZQUMxQixJQUFJLENBQUMsUUFBUSxHQUFHLElBQUksQ0FBQztZQUNyQixJQUFJLENBQUMsVUFBVSxFQUFFLENBQUM7U0FDbkI7SUFDSCxDQUFDO0lBY0QsUUFBUTtRQUNOLElBQUksQ0FBQyxLQUFLLEdBQUcsSUFBSSxDQUFDLEtBQUssSUFBSSxRQUFRLENBQUM7UUFDcEMsSUFBSSxDQUFDLE1BQU0sR0FBRyxJQUFJLENBQUMsTUFBTSxJQUFJLFNBQVMsQ0FBQztRQUN2QyxJQUFJLElBQUksQ0FBQyxNQUFNLEtBQUssTUFBTTtZQUFFLElBQUksQ0FBQyxNQUFNLEdBQUcsU0FBUyxDQUFDO1FBRXBELElBQUksQ0FBQyxVQUFVLEVBQUUsQ0FBQztRQUVsQixJQUFJLENBQUMsYUFBYSxHQUFHLElBQUksQ0FBQyxRQUFRO1lBQ2hDLDRCQUE0QjthQUMzQixTQUFTLENBQUMsR0FBRyxFQUFFLENBQUMsSUFBSSxDQUFDLFVBQVUsRUFBRSxDQUFDLENBQUM7SUFDeEMsQ0FBQztJQUVELFdBQVc7O1FBQ1QsTUFBQSxJQUFJLENBQUMsYUFBYSwwQ0FBRSxXQUFXLEdBQUc7SUFDcEMsQ0FBQztJQUVPLFVBQVU7UUFFaEIsTUFBTSxLQUFLLEdBQW9CLElBQUksQ0FBQyxFQUFFLENBQUMsYUFBYSxDQUFDLGFBQWEsQ0FBQyxvQkFBb0IsQ0FBQyxDQUFDO1FBQ3pGLElBQUksQ0FBQyxLQUFLO1lBQUUsT0FBTztRQUVuQixJQUFJLFFBQVEsQ0FBQztRQUNiLFFBQVEsSUFBSSxDQUFDLEtBQUssRUFBRTtZQUNsQixLQUFLLE9BQU87Z0JBQ1YsUUFBUSxHQUFHLE1BQU0sQ0FBQztnQkFDbEIsTUFBTTtZQUNSLEtBQUssUUFBUTtnQkFDWCxRQUFRLEdBQUcsTUFBTSxDQUFDO2dCQUNsQixNQUFNO1lBQ1IsS0FBSyxPQUFPO2dCQUNWLFFBQVEsR0FBRyxNQUFNLENBQUM7Z0JBQ2xCLE1BQU07U0FDVDtRQUNELElBQUksSUFBSSxHQUFHLEVBQUUsQ0FBQztRQUNkLElBQUksSUFBSSxDQUFDLFFBQVEsRUFBRTtZQUNqQixJQUFJLEdBQUcsK0NBQStDLFFBQVEsTUFBTSxJQUFJLENBQUMsUUFBUSxNQUFNLENBQUM7U0FDekY7YUFDSSxJQUFJLElBQUksQ0FBQyxRQUFRLEVBQUU7WUFDdEIsSUFBSSxHQUFHLCtCQUErQixRQUFRLGtDQUFrQyxJQUFJLENBQUMsUUFBUSxlQUFlLENBQUM7U0FDOUc7UUFDRCxJQUFJLElBQUksQ0FBQyxLQUFLLEtBQUssSUFBSSxFQUFFO1lBQ3ZCLElBQUksQ0FBQyxLQUFLLEdBQUcsSUFBSSxDQUFDO1lBQ2xCLEtBQUssQ0FBQyxTQUFTLEdBQUcsSUFBSSxDQUFDO1NBQ3hCO1FBRUQsZUFBZTtRQUNmLGdCQUFnQjtRQUNoQixJQUFJLElBQUksQ0FBQyxLQUFLLEtBQUssT0FBTyxFQUFFO1lBQzFCLEtBQUssQ0FBQyxLQUFLLENBQUMsS0FBSyxHQUFHLG1CQUFtQixJQUFJLENBQUMsTUFBTSxHQUFHLENBQUM7WUFDdEQsS0FBSyxDQUFDLEtBQUssQ0FBQyxVQUFVLEdBQUcsYUFBYSxDQUFDO1NBQ3hDO1FBQ0QsZ0NBQWdDO2FBQzNCO1lBQ0gsS0FBSyxDQUFDLEtBQUssQ0FBQyxVQUFVLEdBQUcsbUJBQW1CLElBQUksQ0FBQyxNQUFNLEdBQUcsQ0FBQztZQUMzRCxLQUFLLENBQUMsS0FBSyxDQUFDLEtBQUssR0FBRyxtQkFBbUIsSUFBSSxDQUFDLE1BQU0sWUFBWSxDQUFDO1NBQ2hFO1FBRUQsS0FBSyxDQUFDLEtBQUssQ0FBQyxVQUFVLEdBQUcsUUFBUSxDQUFDO1FBQ2xDLEtBQUssQ0FBQyxLQUFLLENBQUMsY0FBYyxHQUFHLFFBQVEsQ0FBQztRQUN0QyxLQUFLLENBQUMsS0FBSyxDQUFDLE9BQU8sR0FBRyxNQUFNLENBQUM7SUFDL0IsQ0FBQzs7O1lBaElGLFNBQVMsU0FBQztnQkFDVCxRQUFRLEVBQUUsZ0NBQWdDO2dCQUMxQyxNQUFNLEVBQUU7b0JBQ04sb0JBQW9CO29CQUNwQixzQkFBc0I7b0JBQ3RCLG9CQUFvQjtpQkFDckI7YUFDRjs7O1lBaEJrQixVQUFVOzs7bUJBbUIxQixLQUFLLFNBQUMsY0FBYztvQkFXcEIsS0FBSyxTQUFDLGVBQWU7bUJBV3JCLEtBQUssU0FBQyxjQUFjO3NCQVdwQixLQUFLLFNBQUMsY0FBYztzQkFNcEIsS0FBSyxTQUFDLGNBQWMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQge0RpcmVjdGl2ZSwgRWxlbWVudFJlZiwgSG9zdEJpbmRpbmcsIElucHV0LCBPbkRlc3Ryb3ksIE9uSW5pdCwgUXVlcnlMaXN0LCBWaWV3Q2hpbGQsIFZpZXdDaGlsZHJlbn0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQge01hdEJhZGdlU2l6ZX0gZnJvbSAnQGFuZ3VsYXIvbWF0ZXJpYWwvYmFkZ2UnO1xuaW1wb3J0IHtQcmVkZWZpbmVkQ29sb3JzfSBmcm9tICdAaW9uaWMvY29yZSc7XG5pbXBvcnQge1RoZW1lUGFsZXR0ZX0gZnJvbSAnQGFuZ3VsYXIvbWF0ZXJpYWwvY29yZSc7XG5pbXBvcnQge1N1YmplY3QsIFN1YnNjcmlwdGlvbn0gZnJvbSAncnhqcyc7XG5pbXBvcnQge2RlYm91bmNlVGltZX0gZnJvbSAncnhqcy9vcGVyYXRvcnMnO1xuXG5leHBvcnQgZGVjbGFyZSB0eXBlIE1hdEJhZGdlRmlsbCA9ICdjbGVhcicgfCAnc29saWQnO1xuXG5ARGlyZWN0aXZlKHtcbiAgc2VsZWN0b3I6ICdbbWF0QmFkZ2VJY29uXSwgW2lvbkJhZGdlSWNvbl0nLFxuICBpbnB1dHM6IFtcbiAgICAnc2l6ZTogbWF0QmFkZ2VTaXplJyxcbiAgICAnY29sb3I6IG1hdEJhZGdlQ29sb3InLFxuICAgICdmaWxsOiBtYXRCYWRnZUZpbGwnLFxuICBdXG59KVxuZXhwb3J0IGNsYXNzIE1hdEJhZGdlSWNvbkRpcmVjdGl2ZSBpbXBsZW1lbnRzIE9uSW5pdCwgT25EZXN0cm95IHtcblxuICBASW5wdXQoJ21hdEJhZGdlU2l6ZScpIHNldCBzaXplKHZhbHVlOiBNYXRCYWRnZVNpemUpIHtcbiAgICBpZiAodGhpcy5fc2l6ZSAhPT0gdmFsdWUpIHtcbiAgICAgIHRoaXMuX3NpemUgPSB2YWx1ZTtcbiAgICAgIHRoaXMudXBkYXRlVmlldygpO1xuICAgIH1cbiAgfVxuXG4gIGdldCBzaXplKCk6IE1hdEJhZGdlU2l6ZSB7XG4gICAgcmV0dXJuIHRoaXMuX3NpemU7XG4gIH1cblxuICBASW5wdXQoJ21hdEJhZGdlQ29sb3InKSBzZXQgY29sb3IodmFsdWU6IFByZWRlZmluZWRDb2xvcnMgfCBUaGVtZVBhbGV0dGUpIHtcbiAgICBpZiAodGhpcy5fY29sb3IgIT09IHZhbHVlKSB7XG4gICAgICB0aGlzLl9jb2xvciA9IHZhbHVlO1xuICAgICAgdGhpcy51cGRhdGVWaWV3KCk7XG4gICAgfVxuICB9XG5cbiAgZ2V0IGNvbG9yKCk6IFByZWRlZmluZWRDb2xvcnMgfCBUaGVtZVBhbGV0dGUge1xuICAgIHJldHVybiB0aGlzLl9jb2xvcjtcbiAgfVxuXG4gIEBJbnB1dCgnbWF0QmFkZ2VGaWxsJykgc2V0IGZpbGwodmFsdWU6IE1hdEJhZGdlRmlsbCkge1xuICAgIGlmICh0aGlzLl9maWxsICE9PSB2YWx1ZSkge1xuICAgICAgdGhpcy5fZmlsbCA9IHZhbHVlO1xuICAgICAgdGhpcy51cGRhdGVWaWV3KCk7XG4gICAgfVxuICB9XG5cbiAgZ2V0IGZpbGwoKTogTWF0QmFkZ2VGaWxsIHtcbiAgICByZXR1cm4gdGhpcy5fZmlsbDtcbiAgfVxuXG4gIEBJbnB1dCgnbWF0QmFkZ2VJY29uJykgc2V0IG1hdEljb24oaWNvbjogc3RyaW5nKSB7XG4gICAgaWYgKHRoaXMuX21hdEljb24gIT09IGljb24pIHtcbiAgICAgIHRoaXMuX21hdEljb24gPSBpY29uO1xuICAgICAgdGhpcy51cGRhdGVWaWV3KCk7XG4gICAgfVxuICB9XG4gIEBJbnB1dCgnaW9uQmFkZ2VJY29uJykgc2V0IGlvbkljb24oaWNvbjogc3RyaW5nKXtcbiAgICBpZiAodGhpcy5faW9uSWNvbiAhPT0gaWNvbikge1xuICAgICAgdGhpcy5faW9uSWNvbiA9IGljb247XG4gICAgICB0aGlzLnVwZGF0ZVZpZXcoKTtcbiAgICB9XG4gIH1cblxuICBwcml2YXRlIF9zaXplOiBNYXRCYWRnZVNpemU7XG4gIHByaXZhdGUgX2NvbG9yOiBQcmVkZWZpbmVkQ29sb3JzIHwgVGhlbWVQYWxldHRlO1xuICBwcml2YXRlIF9maWxsOiBNYXRCYWRnZUZpbGw7XG4gIHByaXZhdGUgX21hdEljb246IHN0cmluZztcbiAgcHJpdmF0ZSBfaW9uSWNvbjogc3RyaW5nO1xuXG4gIHByaXZhdGUgX2h0bWw6IHN0cmluZztcbiAgcHJpdmF0ZSBfc3Vic2NyaXB0aW9uOiBTdWJzY3JpcHRpb24gPSBudWxsO1xuICBwcml2YXRlIF8kdXBkYXRlID0gbmV3IFN1YmplY3QoKTtcblxuICBjb25zdHJ1Y3Rvcihwcml2YXRlIGVsOiBFbGVtZW50UmVmKSB7fVxuXG4gIG5nT25Jbml0KCkge1xuICAgIHRoaXMuX3NpemUgPSB0aGlzLl9zaXplIHx8ICdtZWRpdW0nO1xuICAgIHRoaXMuX2NvbG9yID0gdGhpcy5fY29sb3IgfHwgJ3ByaW1hcnknO1xuICAgIGlmICh0aGlzLl9jb2xvciA9PT0gJ3dhcm4nKSB0aGlzLl9jb2xvciA9ICd3YXJuaW5nJztcblxuICAgIHRoaXMudXBkYXRlVmlldygpO1xuXG4gICAgdGhpcy5fc3Vic2NyaXB0aW9uID0gdGhpcy5fJHVwZGF0ZVxuICAgICAgLy8ucGlwZShkZWJvdW5jZVRpbWUoMTAwMDApKVxuICAgICAgLnN1YnNjcmliZSgoKSA9PiB0aGlzLnVwZGF0ZVZpZXcoKSk7XG4gIH1cblxuICBuZ09uRGVzdHJveSgpIHtcbiAgICB0aGlzLl9zdWJzY3JpcHRpb24/LnVuc3Vic2NyaWJlKCk7XG4gIH1cblxuICBwcml2YXRlIHVwZGF0ZVZpZXcoKSB7XG5cbiAgICBjb25zdCBiYWRnZTogSFRNTFNwYW5FbGVtZW50ID0gdGhpcy5lbC5uYXRpdmVFbGVtZW50LnF1ZXJ5U2VsZWN0b3IoJy5tYXQtYmFkZ2UtY29udGVudCcpO1xuICAgIGlmICghYmFkZ2UpIHJldHVybjtcblxuICAgIGxldCBmb250U2l6ZTtcbiAgICBzd2l0Y2ggKHRoaXMuX3NpemUpIHtcbiAgICAgIGNhc2UgJ2xhcmdlJzpcbiAgICAgICAgZm9udFNpemUgPSAnMjRweCc7XG4gICAgICAgIGJyZWFrO1xuICAgICAgY2FzZSAnbWVkaXVtJzpcbiAgICAgICAgZm9udFNpemUgPSAnMjJweCc7XG4gICAgICAgIGJyZWFrO1xuICAgICAgY2FzZSAnc21hbGwnOlxuICAgICAgICBmb250U2l6ZSA9ICcxNnB4JztcbiAgICAgICAgYnJlYWs7XG4gICAgfVxuICAgIGxldCBodG1sID0gJyc7XG4gICAgaWYgKHRoaXMuX21hdEljb24pIHtcbiAgICAgIGh0bWwgPSBgPGkgY2xhc3M9XCJtYXRlcmlhbC1pY29uc1wiIHN0eWxlPVwiZm9udC1zaXplOiAke2ZvbnRTaXplfTtcIj4ke3RoaXMuX21hdEljb259PC9pPmA7XG4gICAgfVxuICAgIGVsc2UgaWYgKHRoaXMuX2lvbkljb24pIHtcbiAgICAgIGh0bWwgPSBgPGlvbi1pY29uIHN0eWxlPVwiZm9udC1zaXplOiAke2ZvbnRTaXplfTsgcG9pbnRlci1ldmVudHM6IG5vbmU7XCIgbmFtZT1cIiR7dGhpcy5faW9uSWNvbn1cIj48L2lvbi1pY29uPmA7XG4gICAgfVxuICAgIGlmICh0aGlzLl9odG1sICE9PSBodG1sKSB7XG4gICAgICB0aGlzLl9odG1sID0gaHRtbDtcbiAgICAgIGJhZGdlLmlubmVySFRNTCA9IGh0bWw7XG4gICAgfVxuXG4gICAgLy8gVXBkYXRlIHN0eWxlXG4gICAgLy8gZmlsbDogJ2NsZWFyJ1xuICAgIGlmICh0aGlzLl9maWxsID09PSAnY2xlYXInKSB7XG4gICAgICBiYWRnZS5zdHlsZS5jb2xvciA9IGB2YXIoLS1pb24tY29sb3ItJHt0aGlzLl9jb2xvcn0pYDtcbiAgICAgIGJhZGdlLnN0eWxlLmJhY2tncm91bmQgPSAndHJhbnNwYXJlbnQnO1xuICAgIH1cbiAgICAvLyBmaWxsOiAnc29saWQnIChkZWZhdWx0IHZhbHVlKVxuICAgIGVsc2Uge1xuICAgICAgYmFkZ2Uuc3R5bGUuYmFja2dyb3VuZCA9IGB2YXIoLS1pb24tY29sb3ItJHt0aGlzLl9jb2xvcn0pYDtcbiAgICAgIGJhZGdlLnN0eWxlLmNvbG9yID0gYHZhcigtLWlvbi1jb2xvci0ke3RoaXMuX2NvbG9yfS1jb250cmFzdClgO1xuICAgIH1cblxuICAgIGJhZGdlLnN0eWxlLmFsaWduSXRlbXMgPSAnY2VudGVyJztcbiAgICBiYWRnZS5zdHlsZS5qdXN0aWZ5Q29udGVudCA9ICdjZW50ZXInO1xuICAgIGJhZGdlLnN0eWxlLmRpc3BsYXkgPSAnZmxleCc7XG4gIH1cbn1cbiJdfQ==
|
|
@@ -2,17 +2,16 @@ import { Component } from '@angular/core';
|
|
|
2
2
|
import { BehaviorSubject } from 'rxjs';
|
|
3
3
|
export class MatBadgeIconTestPage {
|
|
4
4
|
constructor() {
|
|
5
|
-
this.$
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
this.$dynamicIcon.next(event.value);
|
|
5
|
+
this.$icon = new BehaviorSubject('alert');
|
|
6
|
+
this.$size = new BehaviorSubject('small');
|
|
7
|
+
this.$fill = new BehaviorSubject('solid');
|
|
8
|
+
this.$color = new BehaviorSubject('danger');
|
|
10
9
|
}
|
|
11
10
|
}
|
|
12
11
|
MatBadgeIconTestPage.decorators = [
|
|
13
12
|
{ type: Component, args: [{
|
|
14
13
|
selector: 'mat-badge-icon-test',
|
|
15
|
-
template: "\n<ion-header>\n <ion-toolbar color=\"primary\">\n\n <ion-buttons slot=\"start\">\n <ion-back-button></ion-back-button>\n </ion-buttons>\n\n <ion-title>matBadgeIcon directive</ion-title>\n </ion-toolbar>\n</ion-header>\n\n<ion-content class=\"ion-padding\">\n\n <!-- small badge -->\n <p>\n <ion-text color=\"tertiary\">\n <span matBadge matIcon=\"check\"\n matBadgeSize=\"small\"\n matBadgeColor=\"accent\"\n matBadgeOverlap=\"false\">Small badge</span>\n </ion-text>\n </p>\n\n <!-- medium badge -->\n <p>\n <ion-text matBadge matBadgeIcon=\"check\"\n matBadgeSize=\"medium\"\n matBadgeColor=\"tertiary\"\n matBadgeOverlap=\"false\"\n >Medium badge</ion-text>\n </p>\n\n <!-- small badge -->\n <p>\n <ion-label matBadge matBadgeIcon=\"close\" matBadgeSize=\"large\"\n matBadgeOverlap=\"false\">Large badge</ion-label>\n </p>\n\n <!-- default size badge -->\n <p>\n <ion-label matBadge matBadgeIcon=\"check\" matBadgeColor=\"success\"\n matBadgeOverlap=\"false\">Badge (no size, no color)\n </ion-label>\n </p>\n\n <!-- ion icon -->\n <p>\n <ion-label matBadge\n ionBadgeIcon=\"checkmark\"\n matBadgeColor=\"success\"\n matBadgeOverlap=\"false\">Badge with ion-icon\n </ion-label>\n </p>\n\n <!-- ion icon clear -->\n <p>\n <ion-label matBadge\n ionBadgeIcon=\"checkmark-circle\"\n matBadgeColor=\"tertiary\"\n matBadgeFill=\"clear\"\n matBadgeOverlap=\"false\">Badge with clear icon\n </ion-label>\n </p>\n\n <ion-row class=\"ion-no-padding\">\n <ion-col>\n <ion-
|
|
14
|
+
template: "\n<ion-header>\n <ion-toolbar color=\"primary\">\n\n <ion-buttons slot=\"start\">\n <ion-back-button></ion-back-button>\n </ion-buttons>\n\n <ion-title>matBadgeIcon directive</ion-title>\n </ion-toolbar>\n</ion-header>\n\n<ion-content class=\"ion-padding\">\n\n <!-- small badge -->\n <p>\n <ion-text color=\"tertiary\">\n <span matBadge matIcon=\"check\"\n matBadgeSize=\"small\"\n matBadgeColor=\"accent\"\n matBadgeOverlap=\"false\">Small badge</span>\n </ion-text>\n </p>\n\n <!-- medium badge -->\n <p>\n <ion-text matBadge matBadgeIcon=\"check\"\n matBadgeSize=\"medium\"\n matBadgeColor=\"tertiary\"\n matBadgeOverlap=\"false\"\n >Medium badge</ion-text>\n </p>\n\n <!-- small badge -->\n <p>\n <ion-label matBadge matBadgeIcon=\"close\" matBadgeSize=\"large\"\n matBadgeOverlap=\"false\">Large badge</ion-label>\n </p>\n\n <!-- default size badge -->\n <p>\n <ion-label matBadge matBadgeIcon=\"check\" matBadgeColor=\"success\"\n matBadgeOverlap=\"false\">Badge (no size, no color)\n </ion-label>\n </p>\n\n <!-- ion icon -->\n <p>\n <ion-label matBadge\n ionBadgeIcon=\"checkmark\"\n matBadgeColor=\"success\"\n matBadgeOverlap=\"false\">Badge with ion-icon\n </ion-label>\n </p>\n\n <!-- ion icon clear -->\n <p>\n <ion-label matBadge\n ionBadgeIcon=\"checkmark-circle\"\n matBadgeColor=\"tertiary\"\n matBadgeFill=\"clear\"\n matBadgeOverlap=\"false\">Badge with clear icon\n </ion-label>\n </p>\n\n <ion-row class=\"ion-no-padding\">\n <ion-col>\n <mat-icon [style.color]=\"'var(--ion-color-secondary)'\"\n matBadge\n [ionBadgeIcon]=\"$icon|async\"\n [matBadgeColor]=\"$color|async\"\n [matBadgeFill]=\"$fill|async\"\n [matBadgeSize]=\"$size|async\"\n matBadgeOverlap=\"false\">\n <ion-icon slot=\"icon-only\"\n [color]=\"'secondary'\"\n name=\"navigate\"\n ></ion-icon>\n </mat-icon>\n </ion-col>\n\n <ion-col>\n <mat-form-field>\n <mat-select placeholder=\"matBadgeColor\"\n [value]=\"$color.value\"\n (selectionChange)=\"this.$color.next($event.value)\">\n <mat-option [value]=\"'primary'\">primary</mat-option>\n <mat-option [value]=\"'secondary'\">secondary</mat-option>\n <mat-option [value]=\"'tertiary'\">tertiary</mat-option>\n <mat-option [value]=\"'danger'\">danger</mat-option>\n </mat-select>\n </mat-form-field>\n </ion-col>\n\n <ion-col>\n <mat-form-field>\n <mat-select placeholder=\"ionBadgeIcon\"\n [value]=\"$icon.value\"\n (selectionChange)=\"this.$icon.next($event.value)\">\n <mat-option [value]=\"'checkmark-circle'\">checkmark-circle</mat-option>\n <mat-option [value]=\"'alert-circle'\">alert-circle</mat-option>\n <mat-option [value]=\"'alert'\">alert</mat-option>\n <mat-option [value]=\"'flag'\">flag</mat-option>\n </mat-select>\n </mat-form-field>\n </ion-col>\n\n <ion-col>\n <mat-form-field>\n <mat-select placeholder=\"matBadgeSize\"\n [value]=\"$size.value\"\n (selectionChange)=\"this.$size.next($event.value)\">\n <mat-option [value]=\"'large'\">large</mat-option>\n <mat-option [value]=\"'medium'\">medium</mat-option>\n <mat-option [value]=\"'small'\">small</mat-option>\n </mat-select>\n </mat-form-field>\n </ion-col>\n\n <ion-col>\n <mat-form-field>\n <mat-select placeholder=\"matBadgeFill\"\n [value]=\"$fill.value\"\n (selectionChange)=\"this.$fill.next($event.value)\">\n <mat-option [value]=\"'clear'\">clear</mat-option>\n <mat-option [value]=\"'solid'\">solid</mat-option>\n </mat-select>\n </mat-form-field>\n </ion-col>\n </ion-row>\n\n</ion-content>\n"
|
|
16
15
|
},] }
|
|
17
16
|
];
|
|
18
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
17
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYmFkZ2UtaWNvbi50ZXN0LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vLi4vc3JjL2FwcC9zaGFyZWQvbWF0ZXJpYWwvYmFkZ2UvYmFkZ2UtaWNvbi50ZXN0LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBQyxTQUFTLEVBQUMsTUFBTSxlQUFlLENBQUM7QUFDeEMsT0FBTyxFQUFDLGVBQWUsRUFBQyxNQUFNLE1BQU0sQ0FBQztBQVVyQyxNQUFNLE9BQU8sb0JBQW9CO0lBSmpDO1FBTUUsVUFBSyxHQUFHLElBQUksZUFBZSxDQUFTLE9BQU8sQ0FBQyxDQUFDO1FBQzdDLFVBQUssR0FBRyxJQUFJLGVBQWUsQ0FBZSxPQUFPLENBQUMsQ0FBQztRQUNuRCxVQUFLLEdBQUcsSUFBSSxlQUFlLENBQWUsT0FBTyxDQUFDLENBQUM7UUFDbkQsV0FBTSxHQUFHLElBQUksZUFBZSxDQUFrQyxRQUFRLENBQUMsQ0FBQztJQUMxRSxDQUFDOzs7WUFWQSxTQUFTLFNBQUM7Z0JBQ1QsUUFBUSxFQUFFLHFCQUFxQjtnQkFDL0Isc29JQUFxQzthQUN0QyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7Q29tcG9uZW50fSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7QmVoYXZpb3JTdWJqZWN0fSBmcm9tICdyeGpzJztcbmltcG9ydCB7TWF0QmFkZ2VGaWxsfSBmcm9tICcuL2JhZGdlLWljb24uZGlyZWN0aXZlJztcbmltcG9ydCB7VGhlbWVQYWxldHRlfSBmcm9tICdAYW5ndWxhci9tYXRlcmlhbC9jb3JlJztcbmltcG9ydCB7UHJlZGVmaW5lZENvbG9yc30gZnJvbSAnQGlvbmljL2NvcmUnO1xuaW1wb3J0IHtNYXRCYWRnZVNpemV9IGZyb20gJ0Bhbmd1bGFyL21hdGVyaWFsL2JhZGdlJztcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAnbWF0LWJhZGdlLWljb24tdGVzdCcsXG4gIHRlbXBsYXRlVXJsOiAnLi9iYWRnZS1pY29uLnRlc3QuaHRtbCdcbn0pXG5leHBvcnQgY2xhc3MgTWF0QmFkZ2VJY29uVGVzdFBhZ2Uge1xuXG4gICRpY29uID0gbmV3IEJlaGF2aW9yU3ViamVjdDxzdHJpbmc+KCdhbGVydCcpO1xuICAkc2l6ZSA9IG5ldyBCZWhhdmlvclN1YmplY3Q8TWF0QmFkZ2VTaXplPignc21hbGwnKTtcbiAgJGZpbGwgPSBuZXcgQmVoYXZpb3JTdWJqZWN0PE1hdEJhZGdlRmlsbD4oJ3NvbGlkJyk7XG4gICRjb2xvciA9IG5ldyBCZWhhdmlvclN1YmplY3Q8UHJlZGVmaW5lZENvbG9ycyB8IFRoZW1lUGFsZXR0ZT4oJ2RhbmdlcicpO1xufVxuIl19
|
|
@@ -7473,6 +7473,35 @@ MaterialChipsModule.decorators = [
|
|
|
7473
7473
|
class MatBadgeIconDirective {
|
|
7474
7474
|
constructor(el) {
|
|
7475
7475
|
this.el = el;
|
|
7476
|
+
this._subscription = null;
|
|
7477
|
+
this._$update = new Subject();
|
|
7478
|
+
}
|
|
7479
|
+
set size(value) {
|
|
7480
|
+
if (this._size !== value) {
|
|
7481
|
+
this._size = value;
|
|
7482
|
+
this.updateView();
|
|
7483
|
+
}
|
|
7484
|
+
}
|
|
7485
|
+
get size() {
|
|
7486
|
+
return this._size;
|
|
7487
|
+
}
|
|
7488
|
+
set color(value) {
|
|
7489
|
+
if (this._color !== value) {
|
|
7490
|
+
this._color = value;
|
|
7491
|
+
this.updateView();
|
|
7492
|
+
}
|
|
7493
|
+
}
|
|
7494
|
+
get color() {
|
|
7495
|
+
return this._color;
|
|
7496
|
+
}
|
|
7497
|
+
set fill(value) {
|
|
7498
|
+
if (this._fill !== value) {
|
|
7499
|
+
this._fill = value;
|
|
7500
|
+
this.updateView();
|
|
7501
|
+
}
|
|
7502
|
+
}
|
|
7503
|
+
get fill() {
|
|
7504
|
+
return this._fill;
|
|
7476
7505
|
}
|
|
7477
7506
|
set matIcon(icon) {
|
|
7478
7507
|
if (this._matIcon !== icon) {
|
|
@@ -7487,18 +7516,25 @@ class MatBadgeIconDirective {
|
|
|
7487
7516
|
}
|
|
7488
7517
|
}
|
|
7489
7518
|
ngOnInit() {
|
|
7519
|
+
this._size = this._size || 'medium';
|
|
7520
|
+
this._color = this._color || 'primary';
|
|
7521
|
+
if (this._color === 'warn')
|
|
7522
|
+
this._color = 'warning';
|
|
7490
7523
|
this.updateView();
|
|
7524
|
+
this._subscription = this._$update
|
|
7525
|
+
//.pipe(debounceTime(10000))
|
|
7526
|
+
.subscribe(() => this.updateView());
|
|
7527
|
+
}
|
|
7528
|
+
ngOnDestroy() {
|
|
7529
|
+
var _a;
|
|
7530
|
+
(_a = this._subscription) === null || _a === void 0 ? void 0 : _a.unsubscribe();
|
|
7491
7531
|
}
|
|
7492
7532
|
updateView() {
|
|
7493
|
-
this.size = this.size || 'medium';
|
|
7494
|
-
this.color = this.color || 'primary';
|
|
7495
|
-
if (this.color === 'warn')
|
|
7496
|
-
this.color = 'warning';
|
|
7497
7533
|
const badge = this.el.nativeElement.querySelector('.mat-badge-content');
|
|
7498
7534
|
if (!badge)
|
|
7499
7535
|
return;
|
|
7500
7536
|
let fontSize;
|
|
7501
|
-
switch (this.
|
|
7537
|
+
switch (this._size) {
|
|
7502
7538
|
case 'large':
|
|
7503
7539
|
fontSize = '24px';
|
|
7504
7540
|
break;
|
|
@@ -7509,25 +7545,31 @@ class MatBadgeIconDirective {
|
|
|
7509
7545
|
fontSize = '16px';
|
|
7510
7546
|
break;
|
|
7511
7547
|
}
|
|
7512
|
-
|
|
7513
|
-
|
|
7514
|
-
|
|
7548
|
+
let html = '';
|
|
7549
|
+
if (this._matIcon) {
|
|
7550
|
+
html = `<i class="material-icons" style="font-size: ${fontSize};">${this._matIcon}</i>`;
|
|
7551
|
+
}
|
|
7552
|
+
else if (this._ionIcon) {
|
|
7553
|
+
html = `<ion-icon style="font-size: ${fontSize}; pointer-events: none;" name="${this._ionIcon}"></ion-icon>`;
|
|
7554
|
+
}
|
|
7555
|
+
if (this._html !== html) {
|
|
7556
|
+
this._html = html;
|
|
7557
|
+
badge.innerHTML = html;
|
|
7558
|
+
}
|
|
7559
|
+
// Update style
|
|
7515
7560
|
// fill: 'clear'
|
|
7516
|
-
if (this.
|
|
7517
|
-
badge.style.color = `var(--ion-color-${this.
|
|
7561
|
+
if (this._fill === 'clear') {
|
|
7562
|
+
badge.style.color = `var(--ion-color-${this._color})`;
|
|
7518
7563
|
badge.style.background = 'transparent';
|
|
7519
7564
|
}
|
|
7520
7565
|
// fill: 'solid' (default value)
|
|
7521
7566
|
else {
|
|
7522
|
-
badge.style.background = `var(--ion-color-${this.
|
|
7523
|
-
badge.style.color = `var(--ion-color-${this.
|
|
7524
|
-
}
|
|
7525
|
-
if (this._matIcon) {
|
|
7526
|
-
badge.innerHTML = `<i class="material-icons" style="font-size: ${fontSize};">${this._matIcon}</i>`;
|
|
7527
|
-
}
|
|
7528
|
-
else if (this._ionIcon) {
|
|
7529
|
-
badge.innerHTML = `<ion-icon style="font-size: ${fontSize}; pointer-events: none;" name="${this._ionIcon}"></ion-icon>`;
|
|
7567
|
+
badge.style.background = `var(--ion-color-${this._color})`;
|
|
7568
|
+
badge.style.color = `var(--ion-color-${this._color}-contrast)`;
|
|
7530
7569
|
}
|
|
7570
|
+
badge.style.alignItems = 'center';
|
|
7571
|
+
badge.style.justifyContent = 'center';
|
|
7572
|
+
badge.style.display = 'flex';
|
|
7531
7573
|
}
|
|
7532
7574
|
}
|
|
7533
7575
|
MatBadgeIconDirective.decorators = [
|
|
@@ -7544,6 +7586,9 @@ MatBadgeIconDirective.ctorParameters = () => [
|
|
|
7544
7586
|
{ type: ElementRef }
|
|
7545
7587
|
];
|
|
7546
7588
|
MatBadgeIconDirective.propDecorators = {
|
|
7589
|
+
size: [{ type: Input, args: ['matBadgeSize',] }],
|
|
7590
|
+
color: [{ type: Input, args: ['matBadgeColor',] }],
|
|
7591
|
+
fill: [{ type: Input, args: ['matBadgeFill',] }],
|
|
7547
7592
|
matIcon: [{ type: Input, args: ['matBadgeIcon',] }],
|
|
7548
7593
|
ionIcon: [{ type: Input, args: ['ionBadgeIcon',] }]
|
|
7549
7594
|
};
|
|
@@ -17079,17 +17124,16 @@ ChipsTestPage.ctorParameters = () => [
|
|
|
17079
17124
|
|
|
17080
17125
|
class MatBadgeIconTestPage {
|
|
17081
17126
|
constructor() {
|
|
17082
|
-
this.$
|
|
17083
|
-
|
|
17084
|
-
|
|
17085
|
-
|
|
17086
|
-
this.$dynamicIcon.next(event.value);
|
|
17127
|
+
this.$icon = new BehaviorSubject('alert');
|
|
17128
|
+
this.$size = new BehaviorSubject('small');
|
|
17129
|
+
this.$fill = new BehaviorSubject('solid');
|
|
17130
|
+
this.$color = new BehaviorSubject('danger');
|
|
17087
17131
|
}
|
|
17088
17132
|
}
|
|
17089
17133
|
MatBadgeIconTestPage.decorators = [
|
|
17090
17134
|
{ type: Component, args: [{
|
|
17091
17135
|
selector: 'mat-badge-icon-test',
|
|
17092
|
-
template: "\n<ion-header>\n <ion-toolbar color=\"primary\">\n\n <ion-buttons slot=\"start\">\n <ion-back-button></ion-back-button>\n </ion-buttons>\n\n <ion-title>matBadgeIcon directive</ion-title>\n </ion-toolbar>\n</ion-header>\n\n<ion-content class=\"ion-padding\">\n\n <!-- small badge -->\n <p>\n <ion-text color=\"tertiary\">\n <span matBadge matIcon=\"check\"\n matBadgeSize=\"small\"\n matBadgeColor=\"accent\"\n matBadgeOverlap=\"false\">Small badge</span>\n </ion-text>\n </p>\n\n <!-- medium badge -->\n <p>\n <ion-text matBadge matBadgeIcon=\"check\"\n matBadgeSize=\"medium\"\n matBadgeColor=\"tertiary\"\n matBadgeOverlap=\"false\"\n >Medium badge</ion-text>\n </p>\n\n <!-- small badge -->\n <p>\n <ion-label matBadge matBadgeIcon=\"close\" matBadgeSize=\"large\"\n matBadgeOverlap=\"false\">Large badge</ion-label>\n </p>\n\n <!-- default size badge -->\n <p>\n <ion-label matBadge matBadgeIcon=\"check\" matBadgeColor=\"success\"\n matBadgeOverlap=\"false\">Badge (no size, no color)\n </ion-label>\n </p>\n\n <!-- ion icon -->\n <p>\n <ion-label matBadge\n ionBadgeIcon=\"checkmark\"\n matBadgeColor=\"success\"\n matBadgeOverlap=\"false\">Badge with ion-icon\n </ion-label>\n </p>\n\n <!-- ion icon clear -->\n <p>\n <ion-label matBadge\n ionBadgeIcon=\"checkmark-circle\"\n matBadgeColor=\"tertiary\"\n matBadgeFill=\"clear\"\n matBadgeOverlap=\"false\">Badge with clear icon\n </ion-label>\n </p>\n\n <ion-row class=\"ion-no-padding\">\n <ion-col>\n <ion-
|
|
17136
|
+
template: "\n<ion-header>\n <ion-toolbar color=\"primary\">\n\n <ion-buttons slot=\"start\">\n <ion-back-button></ion-back-button>\n </ion-buttons>\n\n <ion-title>matBadgeIcon directive</ion-title>\n </ion-toolbar>\n</ion-header>\n\n<ion-content class=\"ion-padding\">\n\n <!-- small badge -->\n <p>\n <ion-text color=\"tertiary\">\n <span matBadge matIcon=\"check\"\n matBadgeSize=\"small\"\n matBadgeColor=\"accent\"\n matBadgeOverlap=\"false\">Small badge</span>\n </ion-text>\n </p>\n\n <!-- medium badge -->\n <p>\n <ion-text matBadge matBadgeIcon=\"check\"\n matBadgeSize=\"medium\"\n matBadgeColor=\"tertiary\"\n matBadgeOverlap=\"false\"\n >Medium badge</ion-text>\n </p>\n\n <!-- small badge -->\n <p>\n <ion-label matBadge matBadgeIcon=\"close\" matBadgeSize=\"large\"\n matBadgeOverlap=\"false\">Large badge</ion-label>\n </p>\n\n <!-- default size badge -->\n <p>\n <ion-label matBadge matBadgeIcon=\"check\" matBadgeColor=\"success\"\n matBadgeOverlap=\"false\">Badge (no size, no color)\n </ion-label>\n </p>\n\n <!-- ion icon -->\n <p>\n <ion-label matBadge\n ionBadgeIcon=\"checkmark\"\n matBadgeColor=\"success\"\n matBadgeOverlap=\"false\">Badge with ion-icon\n </ion-label>\n </p>\n\n <!-- ion icon clear -->\n <p>\n <ion-label matBadge\n ionBadgeIcon=\"checkmark-circle\"\n matBadgeColor=\"tertiary\"\n matBadgeFill=\"clear\"\n matBadgeOverlap=\"false\">Badge with clear icon\n </ion-label>\n </p>\n\n <ion-row class=\"ion-no-padding\">\n <ion-col>\n <mat-icon [style.color]=\"'var(--ion-color-secondary)'\"\n matBadge\n [ionBadgeIcon]=\"$icon|async\"\n [matBadgeColor]=\"$color|async\"\n [matBadgeFill]=\"$fill|async\"\n [matBadgeSize]=\"$size|async\"\n matBadgeOverlap=\"false\">\n <ion-icon slot=\"icon-only\"\n [color]=\"'secondary'\"\n name=\"navigate\"\n ></ion-icon>\n </mat-icon>\n </ion-col>\n\n <ion-col>\n <mat-form-field>\n <mat-select placeholder=\"matBadgeColor\"\n [value]=\"$color.value\"\n (selectionChange)=\"this.$color.next($event.value)\">\n <mat-option [value]=\"'primary'\">primary</mat-option>\n <mat-option [value]=\"'secondary'\">secondary</mat-option>\n <mat-option [value]=\"'tertiary'\">tertiary</mat-option>\n <mat-option [value]=\"'danger'\">danger</mat-option>\n </mat-select>\n </mat-form-field>\n </ion-col>\n\n <ion-col>\n <mat-form-field>\n <mat-select placeholder=\"ionBadgeIcon\"\n [value]=\"$icon.value\"\n (selectionChange)=\"this.$icon.next($event.value)\">\n <mat-option [value]=\"'checkmark-circle'\">checkmark-circle</mat-option>\n <mat-option [value]=\"'alert-circle'\">alert-circle</mat-option>\n <mat-option [value]=\"'alert'\">alert</mat-option>\n <mat-option [value]=\"'flag'\">flag</mat-option>\n </mat-select>\n </mat-form-field>\n </ion-col>\n\n <ion-col>\n <mat-form-field>\n <mat-select placeholder=\"matBadgeSize\"\n [value]=\"$size.value\"\n (selectionChange)=\"this.$size.next($event.value)\">\n <mat-option [value]=\"'large'\">large</mat-option>\n <mat-option [value]=\"'medium'\">medium</mat-option>\n <mat-option [value]=\"'small'\">small</mat-option>\n </mat-select>\n </mat-form-field>\n </ion-col>\n\n <ion-col>\n <mat-form-field>\n <mat-select placeholder=\"matBadgeFill\"\n [value]=\"$fill.value\"\n (selectionChange)=\"this.$fill.next($event.value)\">\n <mat-option [value]=\"'clear'\">clear</mat-option>\n <mat-option [value]=\"'solid'\">solid</mat-option>\n </mat-select>\n </mat-form-field>\n </ion-col>\n </ion-row>\n\n</ion-content>\n"
|
|
17093
17137
|
},] }
|
|
17094
17138
|
];
|
|
17095
17139
|
|