@sumaris-net/ngx-components 1.6.14 → 1.6.15
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 +36 -6
- package/bundles/sumaris-net.ngx-components.umd.js.map +1 -1
- package/bundles/sumaris-net.ngx-components.umd.min.js +1 -1
- package/bundles/sumaris-net.ngx-components.umd.min.js.map +1 -1
- package/esm2015/src/app/shared/material/badge/badge-icon.directive.js +23 -6
- package/esm2015/src/app/shared/material/badge/badge-icon.test.js +10 -2
- package/fesm2015/sumaris-net.ngx-components.js +30 -6
- 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 +5 -2
- package/src/app/shared/material/badge/badge-icon.test.d.ts +4 -0
- package/sumaris-net.ngx-components.metadata.json +1 -1
|
@@ -3,11 +3,29 @@ export class MatBadgeIconDirective {
|
|
|
3
3
|
constructor(el) {
|
|
4
4
|
this.el = el;
|
|
5
5
|
}
|
|
6
|
+
set matIcon(icon) {
|
|
7
|
+
if (this._matIcon !== icon) {
|
|
8
|
+
this._matIcon = icon;
|
|
9
|
+
this.updateView();
|
|
10
|
+
}
|
|
11
|
+
}
|
|
12
|
+
set ionIcon(icon) {
|
|
13
|
+
if (this._ionIcon !== icon) {
|
|
14
|
+
this._ionIcon = icon;
|
|
15
|
+
this.updateView();
|
|
16
|
+
}
|
|
17
|
+
}
|
|
6
18
|
ngOnInit() {
|
|
19
|
+
this.updateView();
|
|
20
|
+
}
|
|
21
|
+
updateView() {
|
|
7
22
|
this.size = this.size || 'medium';
|
|
8
23
|
this.color = this.color || 'primary';
|
|
9
24
|
if (this.color === 'warn')
|
|
10
25
|
this.color = 'warning';
|
|
26
|
+
const badge = this.el.nativeElement.querySelector('.mat-badge-content');
|
|
27
|
+
if (!badge)
|
|
28
|
+
return;
|
|
11
29
|
let fontSize;
|
|
12
30
|
switch (this.size) {
|
|
13
31
|
case 'large':
|
|
@@ -20,7 +38,6 @@ export class MatBadgeIconDirective {
|
|
|
20
38
|
fontSize = '16px';
|
|
21
39
|
break;
|
|
22
40
|
}
|
|
23
|
-
const badge = this.el.nativeElement.querySelector('.mat-badge-content');
|
|
24
41
|
badge.style.display = 'flex';
|
|
25
42
|
badge.style.alignItems = 'center';
|
|
26
43
|
badge.style.justifyContent = 'center';
|
|
@@ -34,11 +51,11 @@ export class MatBadgeIconDirective {
|
|
|
34
51
|
badge.style.background = `var(--ion-color-${this.color})`;
|
|
35
52
|
badge.style.color = `var(--ion-color-${this.color}-contrast)`;
|
|
36
53
|
}
|
|
37
|
-
if (this.
|
|
38
|
-
badge.innerHTML = `<i class="material-icons" style="font-size: ${fontSize};">${this.
|
|
54
|
+
if (this._matIcon) {
|
|
55
|
+
badge.innerHTML = `<i class="material-icons" style="font-size: ${fontSize};">${this._matIcon}</i>`;
|
|
39
56
|
}
|
|
40
|
-
else if (this.
|
|
41
|
-
badge.innerHTML = `<ion-icon style="font-size: ${fontSize}; pointer-events: none;" name="${this.
|
|
57
|
+
else if (this._ionIcon) {
|
|
58
|
+
badge.innerHTML = `<ion-icon style="font-size: ${fontSize}; pointer-events: none;" name="${this._ionIcon}"></ion-icon>`;
|
|
42
59
|
}
|
|
43
60
|
}
|
|
44
61
|
}
|
|
@@ -59,4 +76,4 @@ MatBadgeIconDirective.propDecorators = {
|
|
|
59
76
|
matIcon: [{ type: Input, args: ['matBadgeIcon',] }],
|
|
60
77
|
ionIcon: [{ type: Input, args: ['ionBadgeIcon',] }]
|
|
61
78
|
};
|
|
62
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
79
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYmFkZ2UtaWNvbi5kaXJlY3RpdmUuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi8uLi9zcmMvYXBwL3NoYXJlZC9tYXRlcmlhbC9iYWRnZS9iYWRnZS1pY29uLmRpcmVjdGl2ZS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUMsU0FBUyxFQUFFLFVBQVUsRUFBZSxLQUFLLEVBQVMsTUFBTSxlQUFlLENBQUM7QUFlaEYsTUFBTSxPQUFPLHFCQUFxQjtJQXNCaEMsWUFBb0IsRUFBYztRQUFkLE9BQUUsR0FBRixFQUFFLENBQVk7SUFBRyxDQUFDO0lBaEJ0QyxJQUEyQixPQUFPLENBQUMsSUFBWTtRQUM3QyxJQUFJLElBQUksQ0FBQyxRQUFRLEtBQUssSUFBSSxFQUFFO1lBQzFCLElBQUksQ0FBQyxRQUFRLEdBQUcsSUFBSSxDQUFDO1lBQ3JCLElBQUksQ0FBQyxVQUFVLEVBQUUsQ0FBQztTQUNuQjtJQUNILENBQUM7SUFDRCxJQUEyQixPQUFPLENBQUMsSUFBWTtRQUM3QyxJQUFJLElBQUksQ0FBQyxRQUFRLEtBQUssSUFBSSxFQUFFO1lBQzFCLElBQUksQ0FBQyxRQUFRLEdBQUcsSUFBSSxDQUFDO1lBQ3JCLElBQUksQ0FBQyxVQUFVLEVBQUUsQ0FBQztTQUNuQjtJQUNILENBQUM7SUFPRCxRQUFRO1FBQ04sSUFBSSxDQUFDLFVBQVUsRUFBRSxDQUFDO0lBQ3BCLENBQUM7SUFFTyxVQUFVO1FBQ2hCLElBQUksQ0FBQyxJQUFJLEdBQUcsSUFBSSxDQUFDLElBQUksSUFBSSxRQUFRLENBQUM7UUFDbEMsSUFBSSxDQUFDLEtBQUssR0FBRyxJQUFJLENBQUMsS0FBSyxJQUFJLFNBQVMsQ0FBQztRQUNyQyxJQUFJLElBQUksQ0FBQyxLQUFLLEtBQUssTUFBTTtZQUFFLElBQUksQ0FBQyxLQUFLLEdBQUcsU0FBUyxDQUFDO1FBRWxELE1BQU0sS0FBSyxHQUFHLElBQUksQ0FBQyxFQUFFLENBQUMsYUFBYSxDQUFDLGFBQWEsQ0FBQyxvQkFBb0IsQ0FBQyxDQUFDO1FBQ3hFLElBQUksQ0FBQyxLQUFLO1lBQUUsT0FBTztRQUVuQixJQUFJLFFBQVEsQ0FBQztRQUNiLFFBQVEsSUFBSSxDQUFDLElBQUksRUFBRTtZQUNqQixLQUFLLE9BQU87Z0JBQ1YsUUFBUSxHQUFHLE1BQU0sQ0FBQztnQkFDbEIsTUFBTTtZQUNSLEtBQUssUUFBUTtnQkFDWCxRQUFRLEdBQUcsTUFBTSxDQUFDO2dCQUNsQixNQUFNO1lBQ1IsS0FBSyxPQUFPO2dCQUNWLFFBQVEsR0FBRyxNQUFNLENBQUM7Z0JBQ2xCLE1BQU07U0FDVDtRQUdELEtBQUssQ0FBQyxLQUFLLENBQUMsT0FBTyxHQUFHLE1BQU0sQ0FBQztRQUM3QixLQUFLLENBQUMsS0FBSyxDQUFDLFVBQVUsR0FBRyxRQUFRLENBQUM7UUFDbEMsS0FBSyxDQUFDLEtBQUssQ0FBQyxjQUFjLEdBQUcsUUFBUSxDQUFDO1FBQ3RDLGdCQUFnQjtRQUNoQixJQUFJLElBQUksQ0FBQyxJQUFJLEtBQUssT0FBTyxFQUFFO1lBQ3pCLEtBQUssQ0FBQyxLQUFLLENBQUMsS0FBSyxHQUFHLG1CQUFtQixJQUFJLENBQUMsS0FBSyxHQUFHLENBQUM7WUFDckQsS0FBSyxDQUFDLEtBQUssQ0FBQyxVQUFVLEdBQUcsYUFBYSxDQUFDO1NBQ3hDO1FBQ0QsZ0NBQWdDO2FBQzNCO1lBQ0gsS0FBSyxDQUFDLEtBQUssQ0FBQyxVQUFVLEdBQUcsbUJBQW1CLElBQUksQ0FBQyxLQUFLLEdBQUcsQ0FBQztZQUMxRCxLQUFLLENBQUMsS0FBSyxDQUFDLEtBQUssR0FBRyxtQkFBbUIsSUFBSSxDQUFDLEtBQUssWUFBWSxDQUFDO1NBQy9EO1FBQ0QsSUFBSSxJQUFJLENBQUMsUUFBUSxFQUFFO1lBQ2pCLEtBQUssQ0FBQyxTQUFTLEdBQUcsK0NBQStDLFFBQVEsTUFBTSxJQUFJLENBQUMsUUFBUSxNQUFNLENBQUM7U0FDcEc7YUFDSSxJQUFJLElBQUksQ0FBQyxRQUFRLEVBQUU7WUFDdEIsS0FBSyxDQUFDLFNBQVMsR0FBRywrQkFBK0IsUUFBUSxrQ0FBa0MsSUFBSSxDQUFDLFFBQVEsZUFBZSxDQUFDO1NBQ3pIO0lBQ0gsQ0FBQzs7O1lBN0VGLFNBQVMsU0FBQztnQkFDVCxRQUFRLEVBQUUsZ0NBQWdDO2dCQUMxQyxNQUFNLEVBQUU7b0JBQ04sb0JBQW9CO29CQUNwQixzQkFBc0I7b0JBQ3RCLG9CQUFvQjtpQkFDckI7YUFDRjs7O1lBZGtCLFVBQVU7OztzQkFxQjFCLEtBQUssU0FBQyxjQUFjO3NCQU1wQixLQUFLLFNBQUMsY0FBYyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7RGlyZWN0aXZlLCBFbGVtZW50UmVmLCBIb3N0QmluZGluZywgSW5wdXQsIE9uSW5pdH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQge01hdEJhZGdlU2l6ZX0gZnJvbSAnQGFuZ3VsYXIvbWF0ZXJpYWwvYmFkZ2UnO1xuaW1wb3J0IHtQcmVkZWZpbmVkQ29sb3JzfSBmcm9tICdAaW9uaWMvY29yZSc7XG5pbXBvcnQge1RoZW1lUGFsZXR0ZX0gZnJvbSAnQGFuZ3VsYXIvbWF0ZXJpYWwvY29yZSc7XG5cbmV4cG9ydCBkZWNsYXJlIHR5cGUgTWF0QmFkZ2VGaWxsID0gJ2NsZWFyJyB8ICdzb2xpZCc7XG5cbkBEaXJlY3RpdmUoe1xuICBzZWxlY3RvcjogJ1ttYXRCYWRnZUljb25dLCBbaW9uQmFkZ2VJY29uXScsXG4gIGlucHV0czogW1xuICAgICdzaXplOiBtYXRCYWRnZVNpemUnLFxuICAgICdjb2xvcjogbWF0QmFkZ2VDb2xvcicsXG4gICAgJ2ZpbGw6IG1hdEJhZGdlRmlsbCcsXG4gIF1cbn0pXG5leHBvcnQgY2xhc3MgTWF0QmFkZ2VJY29uRGlyZWN0aXZlIGltcGxlbWVudHMgT25Jbml0IHtcblxuICBzaXplOiBNYXRCYWRnZVNpemU7XG4gIGNvbG9yOiBQcmVkZWZpbmVkQ29sb3JzIHwgVGhlbWVQYWxldHRlO1xuICBmaWxsOiBNYXRCYWRnZUZpbGw7XG5cbiAgQElucHV0KCdtYXRCYWRnZUljb24nKSBzZXQgbWF0SWNvbihpY29uOiBzdHJpbmcpIHtcbiAgICBpZiAodGhpcy5fbWF0SWNvbiAhPT0gaWNvbikge1xuICAgICAgdGhpcy5fbWF0SWNvbiA9IGljb247XG4gICAgICB0aGlzLnVwZGF0ZVZpZXcoKTtcbiAgICB9XG4gIH1cbiAgQElucHV0KCdpb25CYWRnZUljb24nKSBzZXQgaW9uSWNvbihpY29uOiBzdHJpbmcpe1xuICAgIGlmICh0aGlzLl9pb25JY29uICE9PSBpY29uKSB7XG4gICAgICB0aGlzLl9pb25JY29uID0gaWNvbjtcbiAgICAgIHRoaXMudXBkYXRlVmlldygpO1xuICAgIH1cbiAgfVxuXG4gIHByaXZhdGUgX21hdEljb246IHN0cmluZztcbiAgcHJpdmF0ZSBfaW9uSWNvbjogc3RyaW5nO1xuXG4gIGNvbnN0cnVjdG9yKHByaXZhdGUgZWw6IEVsZW1lbnRSZWYpIHt9XG5cbiAgbmdPbkluaXQoKSB7XG4gICAgdGhpcy51cGRhdGVWaWV3KCk7XG4gIH1cblxuICBwcml2YXRlIHVwZGF0ZVZpZXcoKSB7XG4gICAgdGhpcy5zaXplID0gdGhpcy5zaXplIHx8ICdtZWRpdW0nO1xuICAgIHRoaXMuY29sb3IgPSB0aGlzLmNvbG9yIHx8ICdwcmltYXJ5JztcbiAgICBpZiAodGhpcy5jb2xvciA9PT0gJ3dhcm4nKSB0aGlzLmNvbG9yID0gJ3dhcm5pbmcnO1xuXG4gICAgY29uc3QgYmFkZ2UgPSB0aGlzLmVsLm5hdGl2ZUVsZW1lbnQucXVlcnlTZWxlY3RvcignLm1hdC1iYWRnZS1jb250ZW50Jyk7XG4gICAgaWYgKCFiYWRnZSkgcmV0dXJuO1xuXG4gICAgbGV0IGZvbnRTaXplO1xuICAgIHN3aXRjaCAodGhpcy5zaXplKSB7XG4gICAgICBjYXNlICdsYXJnZSc6XG4gICAgICAgIGZvbnRTaXplID0gJzI0cHgnO1xuICAgICAgICBicmVhaztcbiAgICAgIGNhc2UgJ21lZGl1bSc6XG4gICAgICAgIGZvbnRTaXplID0gJzIycHgnO1xuICAgICAgICBicmVhaztcbiAgICAgIGNhc2UgJ3NtYWxsJzpcbiAgICAgICAgZm9udFNpemUgPSAnMTZweCc7XG4gICAgICAgIGJyZWFrO1xuICAgIH1cblxuXG4gICAgYmFkZ2Uuc3R5bGUuZGlzcGxheSA9ICdmbGV4JztcbiAgICBiYWRnZS5zdHlsZS5hbGlnbkl0ZW1zID0gJ2NlbnRlcic7XG4gICAgYmFkZ2Uuc3R5bGUuanVzdGlmeUNvbnRlbnQgPSAnY2VudGVyJztcbiAgICAvLyBmaWxsOiAnY2xlYXInXG4gICAgaWYgKHRoaXMuZmlsbCA9PT0gJ2NsZWFyJykge1xuICAgICAgYmFkZ2Uuc3R5bGUuY29sb3IgPSBgdmFyKC0taW9uLWNvbG9yLSR7dGhpcy5jb2xvcn0pYDtcbiAgICAgIGJhZGdlLnN0eWxlLmJhY2tncm91bmQgPSAndHJhbnNwYXJlbnQnO1xuICAgIH1cbiAgICAvLyBmaWxsOiAnc29saWQnIChkZWZhdWx0IHZhbHVlKVxuICAgIGVsc2Uge1xuICAgICAgYmFkZ2Uuc3R5bGUuYmFja2dyb3VuZCA9IGB2YXIoLS1pb24tY29sb3ItJHt0aGlzLmNvbG9yfSlgO1xuICAgICAgYmFkZ2Uuc3R5bGUuY29sb3IgPSBgdmFyKC0taW9uLWNvbG9yLSR7dGhpcy5jb2xvcn0tY29udHJhc3QpYDtcbiAgICB9XG4gICAgaWYgKHRoaXMuX21hdEljb24pIHtcbiAgICAgIGJhZGdlLmlubmVySFRNTCA9IGA8aSBjbGFzcz1cIm1hdGVyaWFsLWljb25zXCIgc3R5bGU9XCJmb250LXNpemU6ICR7Zm9udFNpemV9O1wiPiR7dGhpcy5fbWF0SWNvbn08L2k+YDtcbiAgICB9XG4gICAgZWxzZSBpZiAodGhpcy5faW9uSWNvbikge1xuICAgICAgYmFkZ2UuaW5uZXJIVE1MID0gYDxpb24taWNvbiBzdHlsZT1cImZvbnQtc2l6ZTogJHtmb250U2l6ZX07IHBvaW50ZXItZXZlbnRzOiBub25lO1wiIG5hbWU9XCIke3RoaXMuX2lvbkljb259XCI+PC9pb24taWNvbj5gO1xuICAgIH1cbiAgfVxufVxuIl19
|
|
@@ -1,10 +1,18 @@
|
|
|
1
1
|
import { Component } from '@angular/core';
|
|
2
|
+
import { BehaviorSubject } from 'rxjs';
|
|
2
3
|
export class MatBadgeIconTestPage {
|
|
4
|
+
constructor() {
|
|
5
|
+
this.$dynamicIcon = new BehaviorSubject('alert');
|
|
6
|
+
}
|
|
7
|
+
changeIcon(event) {
|
|
8
|
+
console.info(event);
|
|
9
|
+
this.$dynamicIcon.next(event.value);
|
|
10
|
+
}
|
|
3
11
|
}
|
|
4
12
|
MatBadgeIconTestPage.decorators = [
|
|
5
13
|
{ type: Component, args: [{
|
|
6
14
|
selector: 'mat-badge-icon-test',
|
|
7
|
-
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\n</ion-content>\n"
|
|
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-label matBadge\n [ionBadgeIcon]=\"$dynamicIcon|async\"\n matBadgeColor=\"tertiary\"\n matBadgeFill=\"clear\"\n matBadgeOverlap=\"false\">Badge with dynamic icon\n </ion-label>\n </ion-col>\n\n <ion-col>\n <mat-form-field>\n <mat-select\n placeholder=\"Select icon\" (selectionChange)=\"changeIcon($event)\"\n [value]=\"$dynamicIcon.value\">\n <mat-option [value]=\"'checkmark-circle'\">checkmark-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\n </ion-col>\n </ion-row>\n\n</ion-content>\n"
|
|
8
16
|
},] }
|
|
9
17
|
];
|
|
10
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
18
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYmFkZ2UtaWNvbi50ZXN0LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vLi4vc3JjL2FwcC9zaGFyZWQvbWF0ZXJpYWwvYmFkZ2UvYmFkZ2UtaWNvbi50ZXN0LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBQyxTQUFTLEVBQVMsTUFBTSxlQUFlLENBQUM7QUFDaEQsT0FBTyxFQUFDLGVBQWUsRUFBQyxNQUFNLE1BQU0sQ0FBQztBQU9yQyxNQUFNLE9BQU8sb0JBQW9CO0lBSmpDO1FBTUUsaUJBQVksR0FBRyxJQUFJLGVBQWUsQ0FBUyxPQUFPLENBQUMsQ0FBQztJQU10RCxDQUFDO0lBSkMsVUFBVSxDQUFDLEtBQXNCO1FBQy9CLE9BQU8sQ0FBQyxJQUFJLENBQUMsS0FBSyxDQUFDLENBQUM7UUFDcEIsSUFBSSxDQUFDLFlBQVksQ0FBQyxJQUFJLENBQUMsS0FBSyxDQUFDLEtBQUssQ0FBQyxDQUFDO0lBQ3RDLENBQUM7OztZQVhGLFNBQVMsU0FBQztnQkFDVCxRQUFRLEVBQUUscUJBQXFCO2dCQUMvQixrOEVBQXFDO2FBQ3RDIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtDb21wb25lbnQsIE9uSW5pdH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQge0JlaGF2aW9yU3ViamVjdH0gZnJvbSAncnhqcyc7XG5pbXBvcnQge01hdFNlbGVjdENoYW5nZX0gZnJvbSAnQGFuZ3VsYXIvbWF0ZXJpYWwvc2VsZWN0JztcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAnbWF0LWJhZGdlLWljb24tdGVzdCcsXG4gIHRlbXBsYXRlVXJsOiAnLi9iYWRnZS1pY29uLnRlc3QuaHRtbCdcbn0pXG5leHBvcnQgY2xhc3MgTWF0QmFkZ2VJY29uVGVzdFBhZ2Uge1xuXG4gICRkeW5hbWljSWNvbiA9IG5ldyBCZWhhdmlvclN1YmplY3Q8c3RyaW5nPignYWxlcnQnKTtcblxuICBjaGFuZ2VJY29uKGV2ZW50OiBNYXRTZWxlY3RDaGFuZ2UpIHtcbiAgICBjb25zb2xlLmluZm8oZXZlbnQpO1xuICAgIHRoaXMuJGR5bmFtaWNJY29uLm5leHQoZXZlbnQudmFsdWUpO1xuICB9XG59XG4iXX0=
|
|
@@ -7474,11 +7474,29 @@ class MatBadgeIconDirective {
|
|
|
7474
7474
|
constructor(el) {
|
|
7475
7475
|
this.el = el;
|
|
7476
7476
|
}
|
|
7477
|
+
set matIcon(icon) {
|
|
7478
|
+
if (this._matIcon !== icon) {
|
|
7479
|
+
this._matIcon = icon;
|
|
7480
|
+
this.updateView();
|
|
7481
|
+
}
|
|
7482
|
+
}
|
|
7483
|
+
set ionIcon(icon) {
|
|
7484
|
+
if (this._ionIcon !== icon) {
|
|
7485
|
+
this._ionIcon = icon;
|
|
7486
|
+
this.updateView();
|
|
7487
|
+
}
|
|
7488
|
+
}
|
|
7477
7489
|
ngOnInit() {
|
|
7490
|
+
this.updateView();
|
|
7491
|
+
}
|
|
7492
|
+
updateView() {
|
|
7478
7493
|
this.size = this.size || 'medium';
|
|
7479
7494
|
this.color = this.color || 'primary';
|
|
7480
7495
|
if (this.color === 'warn')
|
|
7481
7496
|
this.color = 'warning';
|
|
7497
|
+
const badge = this.el.nativeElement.querySelector('.mat-badge-content');
|
|
7498
|
+
if (!badge)
|
|
7499
|
+
return;
|
|
7482
7500
|
let fontSize;
|
|
7483
7501
|
switch (this.size) {
|
|
7484
7502
|
case 'large':
|
|
@@ -7491,7 +7509,6 @@ class MatBadgeIconDirective {
|
|
|
7491
7509
|
fontSize = '16px';
|
|
7492
7510
|
break;
|
|
7493
7511
|
}
|
|
7494
|
-
const badge = this.el.nativeElement.querySelector('.mat-badge-content');
|
|
7495
7512
|
badge.style.display = 'flex';
|
|
7496
7513
|
badge.style.alignItems = 'center';
|
|
7497
7514
|
badge.style.justifyContent = 'center';
|
|
@@ -7505,11 +7522,11 @@ class MatBadgeIconDirective {
|
|
|
7505
7522
|
badge.style.background = `var(--ion-color-${this.color})`;
|
|
7506
7523
|
badge.style.color = `var(--ion-color-${this.color}-contrast)`;
|
|
7507
7524
|
}
|
|
7508
|
-
if (this.
|
|
7509
|
-
badge.innerHTML = `<i class="material-icons" style="font-size: ${fontSize};">${this.
|
|
7525
|
+
if (this._matIcon) {
|
|
7526
|
+
badge.innerHTML = `<i class="material-icons" style="font-size: ${fontSize};">${this._matIcon}</i>`;
|
|
7510
7527
|
}
|
|
7511
|
-
else if (this.
|
|
7512
|
-
badge.innerHTML = `<ion-icon style="font-size: ${fontSize}; pointer-events: none;" name="${this.
|
|
7528
|
+
else if (this._ionIcon) {
|
|
7529
|
+
badge.innerHTML = `<ion-icon style="font-size: ${fontSize}; pointer-events: none;" name="${this._ionIcon}"></ion-icon>`;
|
|
7513
7530
|
}
|
|
7514
7531
|
}
|
|
7515
7532
|
}
|
|
@@ -17061,11 +17078,18 @@ ChipsTestPage.ctorParameters = () => [
|
|
|
17061
17078
|
];
|
|
17062
17079
|
|
|
17063
17080
|
class MatBadgeIconTestPage {
|
|
17081
|
+
constructor() {
|
|
17082
|
+
this.$dynamicIcon = new BehaviorSubject('alert');
|
|
17083
|
+
}
|
|
17084
|
+
changeIcon(event) {
|
|
17085
|
+
console.info(event);
|
|
17086
|
+
this.$dynamicIcon.next(event.value);
|
|
17087
|
+
}
|
|
17064
17088
|
}
|
|
17065
17089
|
MatBadgeIconTestPage.decorators = [
|
|
17066
17090
|
{ type: Component, args: [{
|
|
17067
17091
|
selector: 'mat-badge-icon-test',
|
|
17068
|
-
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\n</ion-content>\n"
|
|
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-label matBadge\n [ionBadgeIcon]=\"$dynamicIcon|async\"\n matBadgeColor=\"tertiary\"\n matBadgeFill=\"clear\"\n matBadgeOverlap=\"false\">Badge with dynamic icon\n </ion-label>\n </ion-col>\n\n <ion-col>\n <mat-form-field>\n <mat-select\n placeholder=\"Select icon\" (selectionChange)=\"changeIcon($event)\"\n [value]=\"$dynamicIcon.value\">\n <mat-option [value]=\"'checkmark-circle'\">checkmark-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\n </ion-col>\n </ion-row>\n\n</ion-content>\n"
|
|
17069
17093
|
},] }
|
|
17070
17094
|
];
|
|
17071
17095
|
|