@sumaris-net/ngx-components 2.4.111 → 2.4.112
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/doc/changelog.md +3 -0
- package/esm2020/src/app/shared/material/badge/badge.directive.mjs +8 -3
- package/esm2020/src/app/shared/material/badge/badge.test.mjs +1 -1
- package/esm2020/src/app/shared/pipes/colors.pipe.mjs +3 -1
- package/fesm2015/sumaris-net.ngx-components.mjs +9 -3
- package/fesm2015/sumaris-net.ngx-components.mjs.map +1 -1
- package/fesm2020/sumaris-net.ngx-components.mjs +9 -3
- package/fesm2020/sumaris-net.ngx-components.mjs.map +1 -1
- package/package.json +1 -1
- package/src/app/shared/material/badge/badge.directive.d.ts +1 -1
package/doc/changelog.md
CHANGED
|
@@ -659,3 +659,6 @@ This will allow subclasses to override the default selectedTabIndex after an err
|
|
|
659
659
|
# 2.4.95
|
|
660
660
|
[fix] Platform: avoid error at startup, because of StatusBar in web mode
|
|
661
661
|
[enh] MatBooleanField: display value when disabled, instead of 'empty'
|
|
662
|
+
|
|
663
|
+
# 2.4.112
|
|
664
|
+
[enh] AppBadge : allow to set a content
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { ANIMATION_MODULE_TYPE, Directive, HostBinding, Inject, Input, Optional } from '@angular/core';
|
|
2
2
|
import { MatBadge } from '@angular/material/badge';
|
|
3
|
+
import { isNotNilOrBlank } from '../../functions';
|
|
3
4
|
import * as i0 from "@angular/core";
|
|
4
5
|
import * as i1 from "@angular/cdk/a11y";
|
|
5
6
|
export class BadgeDirective extends MatBadge {
|
|
@@ -61,6 +62,9 @@ export class BadgeDirective extends MatBadge {
|
|
|
61
62
|
else if (this.appBadgeIcon) {
|
|
62
63
|
html = `<ion-icon style="font-size: ${size}px; pointer-events: none;" name="${this.appBadgeIcon}"></ion-icon>`;
|
|
63
64
|
}
|
|
65
|
+
else if (isNotNilOrBlank(this.content)) {
|
|
66
|
+
html = '' + this.content;
|
|
67
|
+
}
|
|
64
68
|
else {
|
|
65
69
|
hidden = true;
|
|
66
70
|
}
|
|
@@ -123,13 +127,14 @@ export class BadgeDirective extends MatBadge {
|
|
|
123
127
|
}
|
|
124
128
|
}
|
|
125
129
|
BadgeDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: BadgeDirective, deps: [{ token: i0.NgZone }, { token: i0.ElementRef }, { token: i1.AriaDescriber }, { token: i0.Renderer2 }, { token: ANIMATION_MODULE_TYPE, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
|
|
126
|
-
BadgeDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.3.0", type: BadgeDirective, selector: "[appBadge], [appBadgeIcon], [appBadgeMatIcon]", inputs: { disabled: ["
|
|
130
|
+
BadgeDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.3.0", type: BadgeDirective, selector: "[appBadge], [appBadgeIcon], [appBadgeMatIcon]", inputs: { content: ["appBadge", "content"], disabled: ["appBadgeDisabled", "disabled"], color: ["appBadgeColor", "color"], size: ["appBadgeSize", "size"], fill: ["appBadgeFill", "fill"], hidden: ["appBadgeHidden", "hidden"], overlap: ["appBadgeOverlap", "overlap"], position: ["appBadgePosition", "position"], appBadgeColor: "appBadgeColor", appBadgeFill: "appBadgeFill", appBadgeMatIcon: "appBadgeMatIcon", appBadgeIcon: "appBadgeIcon", appBadgeHidden: "appBadgeHidden", appBadgeOverlap: "appBadgeOverlap", appBadgePosition: "appBadgePosition" }, host: { properties: { "class.mat-badge": "this.true", "class.mat-badge-overlap": "this.isOverlapHost", "class.mat-badge-above": "this.isAboveHost", "class.mat-badge-below": "this.isBelowHost", "class.mat-badge-before": "this.isBeforeHost", "class.mat-badge-after": "this.isAfterHost", "class.mat-badge-small": "this.isSmallHost", "class.mat-badge-medium": "this.isMediumHost", "class.mat-badge-large": "this.isLargeHost", "class.mat-badge-hidden": "this.isHiddenHost", "class.mat-badge-disabled": "this.isDisabledHost" } }, usesInheritance: true, usesOnChanges: true, ngImport: i0 });
|
|
127
131
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: BadgeDirective, decorators: [{
|
|
128
132
|
type: Directive,
|
|
129
133
|
args: [{
|
|
130
134
|
selector: '[appBadge], [appBadgeIcon], [appBadgeMatIcon]',
|
|
131
135
|
inputs: [
|
|
132
|
-
'
|
|
136
|
+
'content: appBadge',
|
|
137
|
+
'disabled: appBadgeDisabled',
|
|
133
138
|
'color: appBadgeColor',
|
|
134
139
|
'size: appBadgeSize',
|
|
135
140
|
'fill: appBadgeFill',
|
|
@@ -191,4 +196,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
|
|
|
191
196
|
}], appBadgePosition: [{
|
|
192
197
|
type: Input
|
|
193
198
|
}] } });
|
|
194
|
-
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYmFkZ2UuZGlyZWN0aXZlLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vLi4vc3JjL2FwcC9zaGFyZWQvbWF0ZXJpYWwvYmFkZ2UvYmFkZ2UuZGlyZWN0aXZlLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBZ0IscUJBQXFCLEVBQUUsU0FBUyxFQUFjLFdBQVcsRUFBRSxNQUFNLEVBQUUsS0FBSyxFQUFnQyxRQUFRLEVBQTJCLE1BQU0sZUFBZSxDQUFDO0FBQ3hMLE9BQU8sRUFBQyxRQUFRLEVBQW1CLE1BQU0seUJBQXlCLENBQUM7OztBQW1CbkUsTUFBTSxPQUFPLGNBQWUsU0FBUSxRQUFRO0lBd0IxQyxZQUFZLE9BQWUsRUFDTCxFQUEyQixFQUNyQyxjQUE2QixFQUM3QixTQUFvQixFQUN1QixjQUFtQztRQUV4RixLQUFLLENBQUMsT0FBTyxFQUFFLEVBQUUsRUFBRSxjQUFjLEVBQUUsU0FBUyxFQUFFLGNBQWMsQ0FBQyxDQUFDO1FBTDFDLE9BQUUsR0FBRixFQUFFLENBQXlCO1FBTS9DLElBQUksQ0FBQyxPQUFPLEdBQUcsTUFBTSxDQUFDLENBQUMsb0JBQW9CO0lBQzdDLENBQUM7SUE3QkQsSUFBNEMsYUFBYSxLQUFLLE9BQU8sSUFBSSxDQUFDLE9BQU8sQ0FBQyxDQUFDLENBQUM7SUFDcEYsSUFBMEMsV0FBVyxLQUFLLE9BQU8sSUFBSSxDQUFDLE9BQU8sRUFBRSxDQUFDLENBQUMsQ0FBQztJQUNsRixJQUEwQyxXQUFXLEtBQUssT0FBTyxDQUFDLElBQUksQ0FBQyxPQUFPLEVBQUUsQ0FBQyxDQUFDLENBQUM7SUFDbkYsSUFBMkMsWUFBWSxLQUFLLE9BQU8sQ0FBQyxJQUFJLENBQUMsT0FBTyxFQUFFLENBQUMsQ0FBQyxDQUFDO0lBQ3JGLElBQTBDLFdBQVcsS0FBSyxPQUFPLElBQUksQ0FBQyxPQUFPLEVBQUUsQ0FBQyxDQUFDLENBQUM7SUFDbEYsSUFBMEMsV0FBVyxLQUFLLE9BQU8s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O3NCQUFwRCxXQUFXO3VCQUFDLHVCQUF1QjtnQkFDTyxZQUFZO3NCQUF0RCxXQUFXO3VCQUFDLHdCQUF3QjtnQkFDSyxXQUFXO3NCQUFwRCxXQUFXO3VCQUFDLHVCQUF1QjtnQkFDTyxZQUFZO3NCQUF0RCxXQUFXO3VCQUFDLHdCQUF3QjtnQkFDUSxjQUFjO3NCQUExRCxXQUFXO3VCQUFDLDBCQUEwQjtnQkFFOUIsYUFBYTtzQkFBckIsS0FBSztnQkFDRyxZQUFZO3NCQUFwQixLQUFLO2dCQUNHLGVBQWU7c0JBQXZCLEtBQUs7Z0JBQ0csWUFBWTtzQkFBcEIsS0FBSztnQkFDRyxjQUFjO3NCQUF0QixLQUFLO2dCQUNHLGVBQWU7c0JBQXZCLEtBQUs7Z0JBQ0csZ0JBQWdCO3NCQUF4QixLQUFLIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtBZnRlclZpZXdJbml0LCBBTklNQVRJT05fTU9EVUxFX1RZUEUsIERpcmVjdGl2ZSwgRWxlbWVudFJlZiwgSG9zdEJpbmRpbmcsIEluamVjdCwgSW5wdXQsIE5nWm9uZSwgT25DaGFuZ2VzLCBPbkRlc3Ryb3ksIE9wdGlvbmFsLCBSZW5kZXJlcjIsIFNpbXBsZUNoYW5nZXN9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHtNYXRCYWRnZSwgTWF0QmFkZ2VQb3NpdGlvbn0gZnJvbSAnQGFuZ3VsYXIvbWF0ZXJpYWwvYmFkZ2UnO1xuaW1wb3J0IHtBcHBDb2xvcnN9IGZyb20gJy4uLy4uL3R5cGVzJztcbmltcG9ydCB7QXJpYURlc2NyaWJlcn0gZnJvbSAnQGFuZ3VsYXIvY2RrL2ExMXknO1xuaW1wb3J0IHtCb29sZWFuSW5wdXR9IGZyb20gJ0Bhbmd1bGFyL2Nkay9jb2VyY2lvbic7XG5cbmV4cG9ydCBkZWNsYXJlIHR5cGUgTWF0QmFkZ2VGaWxsID0gJ2NsZWFyJyB8ICdzb2xpZCc7XG5cbkBEaXJlY3RpdmUoe1xuICBzZWxlY3RvcjogJ1thcHBCYWRnZV0sIFthcHBCYWRnZUljb25dLCBbYXBwQmFkZ2VNYXRJY29uXScsXG4gIGlucHV0czogW1xuICAgICdkaXNhYmxlZDogbWF0QmFkZ2VEaXNhYmxlZCcsXG4gICAgJ2NvbG9yOiBhcHBCYWRnZUNvbG9yJyxcbiAgICAnc2l6ZTogYXBwQmFkZ2VTaXplJyxcbiAgICAnZmlsbDogYXBwQmFkZ2VGaWxsJyxcbiAgICAnaGlkZGVuOiBhcHBCYWRnZUhpZGRlbicsXG4gICAgJ292ZXJsYXA6IGFwcEJhZGdlT3ZlcmxhcCcsXG4gICAgJ3Bvc2l0aW9uOiBhcHBCYWRnZVBvc2l0aW9uJ1xuICBdXG59KVxuZXhwb3J0IGNsYXNzIEJhZGdlRGlyZWN0aXZlIGV4dGVuZHMgTWF0QmFkZ2UgaW1wbGVtZW50cyBBZnRlclZpZXdJbml0LCBPbkNoYW5nZXMsIE9uRGVzdHJveSB7XG5cbiAgQEhvc3RCaW5kaW5nKCdjbGFzcy5tYXQtYmFkZ2UnKSB0cnVlO1xuICBASG9zdEJpbmRpbmcoJ2NsYXNzLm1hdC1iYWRnZS1vdmVybGFwJykgZ2V0IGlzT3ZlcmxhcEhvc3QoKSB7IHJldHVybiB0aGlzLm92ZXJsYXA7IH1cbiAgQEhvc3RCaW5kaW5nKCdjbGFzcy5tYXQtYmFkZ2UtYWJvdmUnKSBnZXQgaXNBYm92ZUhvc3QoKSB7IHJldHVybiB0aGlzLmlzQWJvdmUoKTsgfVxuICBASG9zdEJpbmRpbmcoJ2NsYXNzLm1hdC1iYWRnZS1iZWxvdycpIGdldCBpc0JlbG93SG9zdCgpIHsgcmV0dXJuICF0aGlzLmlzQWJvdmUoKTsgfVxuICBASG9zdEJpbmRpbmcoJ2NsYXNzLm1hdC1iYWRnZS1iZWZvcmUnKSBnZXQgaXNCZWZvcmVIb3N0KCkgeyByZXR1cm4gIXRoaXMuaXNBZnRlcigpOyB9XG4gIEBIb3N0QmluZGluZygnY2xhc3MubWF0LWJhZGdlLWFmdGVyJykgZ2V0IGlzQWZ0ZXJIb3N0KCkgeyByZXR1cm4gdGhpcy5pc0FmdGVyKCk7IH1cbiAgQEhvc3RCaW5kaW5nKCdjbGFzcy5tYXQtYmFkZ2Utc21hbGwnKSBnZXQgaXNTbWFsbEhvc3QoKSB7IHJldHVybiB0aGlzLnNpemUgPT09ICdzbWFsbCc7IH1cbiAgQEhvc3RCaW5kaW5nKCdjbGFzcy5tYXQtYmFkZ2UtbWVkaXVtJykgZ2V0IGlzTWVkaXVtSG9zdCgpIHsgcmV0dXJuIHRoaXMuc2l6ZSA9PT0gJ21lZGl1bSc7IH1cbiAgQEhvc3RCaW5kaW5nKCdjbGFzcy5tYXQtYmFkZ2UtbGFyZ2UnKSBnZXQgaXNMYXJnZUhvc3QoKSB7IHJldHVybiB0aGlzLnNpemUgPT09ICdsYXJnZSc7IH1cbiAgQEhvc3RCaW5kaW5nKCdjbGFzcy5tYXQtYmFkZ2UtaGlkZGVuJykgZ2V0IGlzSGlkZGVuSG9zdCgpIHsgcmV0dXJuIHRoaXMuaGlkZGVuIHx8ICF0aGlzLmNvbnRlbnQ7IH1cbiAgQEhvc3RCaW5kaW5nKCdjbGFzcy5tYXQtYmFkZ2UtZGlzYWJsZWQnKSBnZXQgaXNEaXNhYmxlZEhvc3QoKSB7IHJldHVybiB0aGlzLmRpc2FibGVkOyB9XG5cbiAgQElucHV0KCkgYXBwQmFkZ2VDb2xvcjogQXBwQ29sb3JzO1xuICBASW5wdXQoKSBhcHBCYWRnZUZpbGw6IE1hdEJhZGdlRmlsbDtcbiAgQElucHV0KCkgYXBwQmFkZ2VNYXRJY29uOiBzdHJpbmc7XG4gIEBJbnB1dCgpIGFwcEJhZGdlSWNvbjogc3RyaW5nO1xuICBASW5wdXQoKSBhcHBCYWRnZUhpZGRlbjogQm9vbGVhbklucHV0O1xuICBASW5wdXQoKSBhcHBCYWRnZU92ZXJsYXA6IEJvb2xlYW5JbnB1dDtcbiAgQElucHV0KCkgYXBwQmFkZ2VQb3NpdGlvbjogTWF0QmFkZ2VQb3NpdGlvbjtcblxuICBwcml2YXRlIF9odG1sOiBzdHJpbmc7XG5cbiAgY29uc3RydWN0b3IoX25nWm9uZTogTmdab25lLFxuICAgICAgICAgICAgICBwcm90ZWN0ZWQgZWw6IEVsZW1lbnRSZWY8SFRNTEVsZW1lbnQ+LFxuICAgICAgICAgICAgICBfYXJpYURlc2NyaWJlcjogQXJpYURlc2NyaWJlcixcbiAgICAgICAgICAgICAgX3JlbmRlcmVyOiBSZW5kZXJlcjIsXG4gICAgICAgICAgICAgIEBPcHRpb25hbCgpIEBJbmplY3QoQU5JTUFUSU9OX01PRFVMRV9UWVBFKSBfYW5pbWF0aW9uTW9kZT86IHN0cmluZyB8IHVuZGVmaW5lZFxuICApIHtcbiAgICBzdXBlcihfbmdab25lLCBlbCwgX2FyaWFEZXNjcmliZXIsIF9yZW5kZXJlciwgX2FuaW1hdGlvbk1vZGUpO1xuICAgIHRoaXMuY29udGVudCA9IDB4MDBBMDsgLy8gV2lsbCBiZSBpbnZpc2libGVcbiAgfVxuXG4gIG5nT25Jbml0KCkge1xuICAgIHN1cGVyLm5nT25Jbml0KCk7XG4gIH1cblxuICBuZ0FmdGVyVmlld0luaXQoKSB7XG4gICAgdGhpcy51cGRhdGVWaWV3KCk7XG4gIH1cblxuICBuZ09uQ2hhbmdlcyhjaGFuZ2VzOiBTaW1wbGVDaGFuZ2VzKSB7XG4gICAgaWYgKGNoYW5nZXMuYXBwQmFkZ2VDb2xvciB8fCBjaGFuZ2VzLmFwcEJhZGdlRmlsbCB8fCBjaGFuZ2VzLmFwcEJhZGdlTWF0SWNvbiB8fCBjaGFuZ2VzLmFwcEJhZGdlSWNvbiB8fCBjaGFuZ2VzLmFwcEJhZGdlSGlkZGVuIHx8IGNoYW5nZXMuYXBwQmFkZ2VPdmVybGFwIHx8IGNoYW5nZXMuYXBwQmFkZ2VQb3NpdGlvbikge1xuICAgICAgdGhpcy51cGRhdGVWaWV3KCk7XG4gICAgfVxuICB9XG5cbiAgbmdPbkRlc3Ryb3koKSB7XG4gICAgc3VwZXIubmdPbkRlc3Ryb3koKTtcbiAgfVxuXG4gIHByaXZhdGUgdXBkYXRlVmlldygpIHtcbiAgICBjb25zdCBiYWRnZSA9IHRoaXMuZ2V0QmFkZ2VFbGVtZW50KCk7XG4gICAgaWYgKCFiYWRnZSkgcmV0dXJuO1xuXG4gICAgLy8gRml4IGNvbG9yXG4gICAgaWYgKCF0aGlzLmFwcEJhZGdlQ29sb3IpIHRoaXMuYXBwQmFkZ2VDb2xvciA9ICdwcmltYXJ5JztcbiAgICBpZiAodGhpcy5hcHBCYWRnZUNvbG9yID09PSAnd2FybicpIHRoaXMuYXBwQmFkZ2VDb2xvciA9ICd3YXJuaW5nJztcblxuICAgIGxldCBzaXplOiBudW1iZXI7XG4gICAgc3dpdGNoICh0aGlzLnNpemUpIHtcbiAgICAgIGNhc2UgJ2xhcmdlJzpcbiAgICAgICAgc2l6ZSA9IDI0O1xuICAgICAgICBicmVhaztcbiAgICAgIGNhc2UgJ21lZGl1bSc6XG4gICAgICAgIHNpemUgPSAyMjtcbiAgICAgICAgYnJlYWs7XG4gICAgICBjYXNlICdzbWFsbCc6XG4gICAgICAgIHNpemUgPSAxNjtcbiAgICAgICAgYnJlYWs7XG4gICAgfVxuICAgIGxldCBoaWRkZW4gPSB0aGlzLmFwcEJhZGdlSGlkZGVuO1xuICAgIGxldCBodG1sID0gJyc7XG4gICAgaWYgKHRoaXMuYXBwQmFkZ2VNYXRJY29uKSB7XG4gICAgICBodG1sID0gYDxpIGNsYXNzPVwibWF0ZXJpYWwtaWNvbnNcIiBzdHlsZT1cImZvbnQtc2l6ZTogJHtzaXplfXB4O1wiPiR7dGhpcy5hcHBCYWRnZU1hdEljb259PC9pPmA7XG4gICAgfVxuICAgIGVsc2UgaWYgKHRoaXMuYXBwQmFkZ2VJY29uKSB7XG4gICAgICBodG1sID0gYDxpb24taWNvbiBzdHlsZT1cImZvbnQtc2l6ZTogJHtzaXplfXB4OyBwb2ludGVyLWV2ZW50czogbm9uZTtcIiBuYW1lPVwiJHt0aGlzLmFwcEJhZGdlSWNvbn1cIj48L2lvbi1pY29uPmA7XG4gICAgfVxuICAgIGVsc2Uge1xuICAgICAgaGlkZGVuID0gdHJ1ZTtcbiAgICB9XG4gICAgaWYgKCFoaWRkZW4gJiYgdGhpcy5faHRtbCAhPT0gaHRtbCkge1xuICAgICAgdGhpcy5faHRtbCA9IGh0bWw7XG4gICAgICBiYWRnZS5pbm5lckhUTUwgPSBodG1sO1xuICAgIH1cblxuICAgIC8vIFVwZGF0ZSBzdHlsZVxuICAgIC8vIGZpbGw6ICdjbGVhcidcbiAgICBpZiAodGhpcy5hcHBCYWRnZUZpbGwgPT09ICdjbGVhcicpIHtcbiAgICAgIGJhZGdlLnN0eWxlLmNvbG9yID0gYHZhcigtLWlvbi1jb2xvci0ke3RoaXMuYXBwQmFkZ2VDb2xvcn0pYDtcbiAgICAgIGJhZGdlLnN0eWxlLmJhY2tncm91bmQgPSAndHJhbnNwYXJlbnQnO1xuICAgIH1cbiAgICAvLyBmaWxsOiAnc29saWQnIChkZWZhdWx0IHZhbHVlKVxuICAgIGVsc2Uge1xuICAgICAgYmFkZ2Uuc3R5bGUuYmFja2dyb3VuZCA9IGB2YXIoLS1pb24tY29sb3ItJHt0aGlzLmFwcEJhZGdlQ29sb3J9KWA7XG4gICAgICBiYWRnZS5zdHlsZS5jb2xvciA9IGB2YXIoLS1pb24tY29sb3ItJHt0aGlzLmFwcEJhZGdlQ29sb3J9LWNvbnRyYXN0KWA7XG4gICAgfVxuXG4gICAgaWYgKGhpZGRlbikgYmFkZ2Uuc3R5bGUuZGlzcGxheSA9ICdub25lJztcbiAgICBlbHNlIHtcbiAgICAgIGlmIChiYWRnZS5zdHlsZS5kaXNwbGF5ICE9PSAnaW5saW5lLWJsb2NrJykgYmFkZ2Uuc3R5bGUuZGlzcGxheSA9ICdpbmxpbmUtYmxvY2snO1xuICAgICAgaWYgKGJhZGdlLnN0eWxlLnBvc2l0aW9uICE9PSAnYWJzb2x1dGUnKSBiYWRnZS5zdHlsZS5wb3NpdGlvbiA9ICdhYnNvbHV0ZSc7XG5cblxuXG5cbiAgICAgIC8qXG4gICAgICAvLyBXT0FSS1JPVU5EIHRvIGZvcmNlIHBvc2l0aW9uIG9mIHRoZSBiYWRnZSwgd2hlbiBpbnNpZGUgYSA8bWF0LWJ1dHRvbj4gKGUuZy4gb24gYSA8bWF0LWxhYmVsPilcbiAgICAgIGNvbnN0IG92ZXJsYXAgPSB0aGlzLm92ZXJsYXA7XG5cbiAgICAgIC8vIFJpZ2h0L2xlZnQgcG9zaXRpb25cbiAgICAgIGlmICh0aGlzLmlzQWZ0ZXIoKSApIHtcbiAgICAgICAgY29uc3QgcGFyZW50V2lkdGggPSBiYWRnZS5wYXJlbnRFbGVtZW50LmdldEJvdW5kaW5nQ2xpZW50UmVjdCgpLndpZHRoO1xuICAgICAgICBpZiAocGFyZW50V2lkdGggPiAwKSB7XG4gICAgICAgICAgY29uc3QgbGVmdCA9IGAke3BhcmVudFdpZHRoIC0gKG92ZXJsYXAgPyBzaXplIC8gMiA6IDApfXB4YDtcbiAgICAgICAgICBpZiAoYmFkZ2Uuc3R5bGUubGVmdCAhPT0gbGVmdCkgYmFkZ2Uuc3R5bGUubGVmdCA9IGxlZnQ7XG4gICAgICAgICAgaWYgKGJhZGdlLnN0eWxlLnJpZ2h0ICE9PSAnJykgYmFkZ2Uuc3R5bGUucmlnaHQgPSAnJztcbiAgICAgICAgfVxuICAgICAgICBlbHNlIHtcbiAgICAgICAgICBjb25zdCByaWdodCA9IGAkey0xICogKG92ZXJsYXAgPyBzaXplIC8gMiA6IHNpemUpfXB4YDtcbiAgICAgICAgICBpZiAoYmFkZ2Uuc3R5bGUucmlnaHQgIT09IHJpZ2h0KSBiYWRnZS5zdHlsZS5yaWdodCA9IHJpZ2h0O1xuICAgICAgICAgIGlmIChiYWRnZS5zdHlsZS5sZWZ0ICE9PSAnJykgYmFkZ2Uuc3R5bGUubGVmdCA9ICcnO1xuICAgICAgICB9XG4gICAgICB9XG5cbiAgICAgIC8vIFRvcC9ib3R0b20gcG9zaXRpb25cbiAgICAgIGlmICh0aGlzLmlzQWJvdmUoKSkge1xuICAgICAgICBjb25zdCBwYXJlbnRIZWlnaHQgPSBiYWRnZS5wYXJlbnRFbGVtZW50LmdldEJvdW5kaW5nQ2xpZW50UmVjdCgpLmhlaWdodDtcbiAgICAgICAgaWYgKHBhcmVudEhlaWdodCA+IDApIHtcbiAgICAgICAgICBjb25zdCBib3R0b20gPSBgJHtwYXJlbnRIZWlnaHQgLSAob3ZlcmxhcCA/IChzaXplIC8gMikgOiBzaXplKX1weGA7XG4gICAgICAgICAgaWYgKGJhZGdlLnN0eWxlLmJvdHRvbSAhPT0gYm90dG9tKSBiYWRnZS5zdHlsZS5ib3R0b20gPSBib3R0b207XG4gICAgICAgICAgaWYgKGJhZGdlLnN0eWxlLnRvcCAhPT0gJycpIGJhZGdlLnN0eWxlLnRvcCA9ICcnO1xuICAgICAgICB9XG4gICAgICAgIGVsc2Uge1xuICAgICAgICAgIGNvbnN0IHRvcCA9IGAkey0xICogKG92ZXJsYXAgPyAoc2l6ZSAvIDIpIDogc2l6ZSl9cHhgO1xuICAgICAgICAgIGlmIChiYWRnZS5zdHlsZS50b3AgIT09IHRvcCkgYmFkZ2Uuc3R5bGUudG9wID0gdG9wO1xuICAgICAgICAgIGlmIChiYWRnZS5zdHlsZS5ib3R0b20gIT09ICcnKSBiYWRnZS5zdHlsZS5ib3R0b20gPSAnJztcbiAgICAgICAgfVxuICAgICAgfSovXG4gICAgfVxuICB9XG59XG4iXX0=
|
|
199
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYmFkZ2UuZGlyZWN0aXZlLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vLi4vc3JjL2FwcC9zaGFyZWQvbWF0ZXJpYWwvYmFkZ2UvYmFkZ2UuZGlyZWN0aXZlLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBZ0IscUJBQXFCLEVBQUUsU0FBUyxFQUFjLFdBQVcsRUFBRSxNQUFNLEVBQUUsS0FBSyxFQUFnQyxRQUFRLEVBQTJCLE1BQU0sZUFBZSxDQUFDO0FBQ3hMLE9BQU8sRUFBQyxRQUFRLEVBQW1CLE1BQU0seUJBQXlCLENBQUM7QUFJbkUsT0FBTyxFQUFFLGVBQWUsRUFBRSxNQUFNLGlCQUFpQixDQUFDOzs7QUFpQmxELE1BQU0sT0FBTyxjQUFlLFNBQVEsUUFBUTtJQXdCMUMsWUFBWSxPQUFlLEVBQ0wsRUFBMkIsRUFDckMsY0FBNkIsRUFDN0IsU0FBb0IsRUFDdUIsY0FBbUM7UUFFeEYsS0FBSyxDQUFDLE9BQU8sRUFBRSxFQUFFLEVBQUUsY0FBYyxFQUFFLFNBQVMsRUFBRSxjQUFjLENBQUMsQ0FBQztRQUwxQyxPQUFFLEdBQUYsRUFBRSxDQUF5QjtRQU0vQyxJQUFJLENBQUMsT0FBTyxHQUFHLE1BQU0sQ0FBQyxDQUFDLG9CQUFvQjtJQUM3QyxDQUFDO0lBN0JELElBQTRDLGFBQWEsS0FBSyxPQUFPLElBQUksQ0FBQyxPQUFPLENBQUMsQ0FBQyxDQUFDO0lBQ3BGLElBQTBDLFdBQVcsS0FBSyxPQUFPLElBQUksQ0FBQyxPQUFPLEVBQUUsQ0FBQyxDQUFDLENBQUM7SUFDbEYsSUFBMEMsV0FBVyxLQUFLLE9BQU8sQ0FBQyxJQUFJLENBQUMsT0FBTyxFQUFFLENBQUMsQ0FBQyxDQUFDO0lBQ25GLElBQTJDLFlBQVksS0FBSyxPQUFPLENBQUMsSUFBSSxDQUFDLE9BQU8sRUFBRSxDQUFDLENBQUMsQ0FBQztJQUNyRixJQUEwQyxXQUFXLEtBQUssT0FBTyxJQUFJLENBQUMsT0FBTyxFQUFF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Z0JBQ0ksV0FBVztzQkFBcEQsV0FBVzt1QkFBQyx1QkFBdUI7Z0JBQ00sV0FBVztzQkFBcEQsV0FBVzt1QkFBQyx1QkFBdUI7Z0JBQ08sWUFBWTtzQkFBdEQsV0FBVzt1QkFBQyx3QkFBd0I7Z0JBQ0ssV0FBVztzQkFBcEQsV0FBVzt1QkFBQyx1QkFBdUI7Z0JBQ00sV0FBVztzQkFBcEQsV0FBVzt1QkFBQyx1QkFBdUI7Z0JBQ08sWUFBWTtzQkFBdEQsV0FBVzt1QkFBQyx3QkFBd0I7Z0JBQ0ssV0FBVztzQkFBcEQsV0FBVzt1QkFBQyx1QkFBdUI7Z0JBQ08sWUFBWTtzQkFBdEQsV0FBVzt1QkFBQyx3QkFBd0I7Z0JBQ1EsY0FBYztzQkFBMUQsV0FBVzt1QkFBQywwQkFBMEI7Z0JBRTlCLGFBQWE7c0JBQXJCLEtBQUs7Z0JBQ0csWUFBWTtzQkFBcEIsS0FBSztnQkFDRyxlQUFlO3NCQUF2QixLQUFLO2dCQUNHLFlBQVk7c0JBQXBCLEtBQUs7Z0JBQ0csY0FBYztzQkFBdEIsS0FBSztnQkFDRyxlQUFlO3NCQUF2QixLQUFLO2dCQUNHLGdCQUFnQjtzQkFBeEIsS0FBSyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7QWZ0ZXJWaWV3SW5pdCwgQU5JTUFUSU9OX01PRFVMRV9UWVBFLCBEaXJlY3RpdmUsIEVsZW1lbnRSZWYsIEhvc3RCaW5kaW5nLCBJbmplY3QsIElucHV0LCBOZ1pvbmUsIE9uQ2hhbmdlcywgT25EZXN0cm95LCBPcHRpb25hbCwgUmVuZGVyZXIyLCBTaW1wbGVDaGFuZ2VzfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7TWF0QmFkZ2UsIE1hdEJhZGdlUG9zaXRpb259IGZyb20gJ0Bhbmd1bGFyL21hdGVyaWFsL2JhZGdlJztcbmltcG9ydCB7QXBwQ29sb3JzfSBmcm9tICcuLi8uLi90eXBlcyc7XG5pbXBvcnQge0FyaWFEZXNjcmliZXJ9IGZyb20gJ0Bhbmd1bGFyL2Nkay9hMTF5JztcbmltcG9ydCB7Qm9vbGVhbklucHV0fSBmcm9tICdAYW5ndWxhci9jZGsvY29lcmNpb24nO1xuaW1wb3J0IHsgaXNOb3ROaWxPckJsYW5rIH0gZnJvbSAnLi4vLi4vZnVuY3Rpb25zJztcblxuZXhwb3J0IGRlY2xhcmUgdHlwZSBNYXRCYWRnZUZpbGwgPSAnY2xlYXInIHwgJ3NvbGlkJztcblxuQERpcmVjdGl2ZSh7XG4gIHNlbGVjdG9yOiAnW2FwcEJhZGdlXSwgW2FwcEJhZGdlSWNvbl0sIFthcHBCYWRnZU1hdEljb25dJyxcbiAgaW5wdXRzOiBbXG4gICAgJ2NvbnRlbnQ6IGFwcEJhZGdlJyxcbiAgICAnZGlzYWJsZWQ6IGFwcEJhZGdlRGlzYWJsZWQnLFxuICAgICdjb2xvcjogYXBwQmFkZ2VDb2xvcicsXG4gICAgJ3NpemU6IGFwcEJhZGdlU2l6ZScsXG4gICAgJ2ZpbGw6IGFwcEJhZGdlRmlsbCcsXG4gICAgJ2hpZGRlbjogYXBwQmFkZ2VIaWRkZW4nLFxuICAgICdvdmVybGFwOiBhcHBCYWRnZU92ZXJsYXAnLFxuICAgICdwb3NpdGlvbjogYXBwQmFkZ2VQb3NpdGlvbidcbiAgXVxufSlcbmV4cG9ydCBjbGFzcyBCYWRnZURpcmVjdGl2ZSBleHRlbmRzIE1hdEJhZGdlIGltcGxlbWVudHMgQWZ0ZXJWaWV3SW5pdCwgT25DaGFuZ2VzLCBPbkRlc3Ryb3kge1xuXG4gIEBIb3N0QmluZGluZygnY2xhc3MubWF0LWJhZGdlJykgdHJ1ZTtcbiAgQEhvc3RCaW5kaW5nKCdjbGFzcy5tYXQtYmFkZ2Utb3ZlcmxhcCcpIGdldCBpc092ZXJsYXBIb3N0KCkgeyByZXR1cm4gdGhpcy5vdmVybGFwOyB9XG4gIEBIb3N0QmluZGluZygnY2xhc3MubWF0LWJhZGdlLWFib3ZlJykgZ2V0IGlzQWJvdmVIb3N0KCkgeyByZXR1cm4gdGhpcy5pc0Fib3ZlKCk7IH1cbiAgQEhvc3RCaW5kaW5nKCdjbGFzcy5tYXQtYmFkZ2UtYmVsb3cnKSBnZXQgaXNCZWxvd0hvc3QoKSB7IHJldHVybiAhdGhpcy5pc0Fib3ZlKCk7IH1cbiAgQEhvc3RCaW5kaW5nKCdjbGFzcy5tYXQtYmFkZ2UtYmVmb3JlJykgZ2V0IGlzQmVmb3JlSG9zdCgpIHsgcmV0dXJuICF0aGlzLmlzQWZ0ZXIoKTsgfVxuICBASG9zdEJpbmRpbmcoJ2NsYXNzLm1hdC1iYWRnZS1hZnRlcicpIGdldCBpc0FmdGVySG9zdCgpIHsgcmV0dXJuIHRoaXMuaXNBZnRlcigpOyB9XG4gIEBIb3N0QmluZGluZygnY2xhc3MubWF0LWJhZGdlLXNtYWxsJykgZ2V0IGlzU21hbGxIb3N0KCkgeyByZXR1cm4gdGhpcy5zaXplID09PSAnc21hbGwnOyB9XG4gIEBIb3N0QmluZGluZygnY2xhc3MubWF0LWJhZGdlLW1lZGl1bScpIGdldCBpc01lZGl1bUhvc3QoKSB7IHJldHVybiB0aGlzLnNpemUgPT09ICdtZWRpdW0nOyB9XG4gIEBIb3N0QmluZGluZygnY2xhc3MubWF0LWJhZGdlLWxhcmdlJykgZ2V0IGlzTGFyZ2VIb3N0KCkgeyByZXR1cm4gdGhpcy5zaXplID09PSAnbGFyZ2UnOyB9XG4gIEBIb3N0QmluZGluZygnY2xhc3MubWF0LWJhZGdlLWhpZGRlbicpIGdldCBpc0hpZGRlbkhvc3QoKSB7IHJldHVybiB0aGlzLmhpZGRlbiB8fCAhdGhpcy5jb250ZW50OyB9XG4gIEBIb3N0QmluZGluZygnY2xhc3MubWF0LWJhZGdlLWRpc2FibGVkJykgZ2V0IGlzRGlzYWJsZWRIb3N0KCkgeyByZXR1cm4gdGhpcy5kaXNhYmxlZDsgfVxuXG4gIEBJbnB1dCgpIGFwcEJhZGdlQ29sb3I6IEFwcENvbG9ycztcbiAgQElucHV0KCkgYXBwQmFkZ2VGaWxsOiBNYXRCYWRnZUZpbGw7XG4gIEBJbnB1dCgpIGFwcEJhZGdlTWF0SWNvbjogc3RyaW5nO1xuICBASW5wdXQoKSBhcHBCYWRnZUljb246IHN0cmluZztcbiAgQElucHV0KCkgYXBwQmFkZ2VIaWRkZW46IEJvb2xlYW5JbnB1dDtcbiAgQElucHV0KCkgYXBwQmFkZ2VPdmVybGFwOiBCb29sZWFuSW5wdXQ7XG4gIEBJbnB1dCgpIGFwcEJhZGdlUG9zaXRpb246IE1hdEJhZGdlUG9zaXRpb247XG5cbiAgcHJpdmF0ZSBfaHRtbDogc3RyaW5nO1xuXG4gIGNvbnN0cnVjdG9yKF9uZ1pvbmU6IE5nWm9uZSxcbiAgICAgICAgICAgICAgcHJvdGVjdGVkIGVsOiBFbGVtZW50UmVmPEhUTUxFbGVtZW50PixcbiAgICAgICAgICAgICAgX2FyaWFEZXNjcmliZXI6IEFyaWFEZXNjcmliZXIsXG4gICAgICAgICAgICAgIF9yZW5kZXJlcjogUmVuZGVyZXIyLFxuICAgICAgICAgICAgICBAT3B0aW9uYWwoKSBASW5qZWN0KEFOSU1BVElPTl9NT0RVTEVfVFlQRSkgX2FuaW1hdGlvbk1vZGU/OiBzdHJpbmcgfCB1bmRlZmluZWRcbiAgKSB7XG4gICAgc3VwZXIoX25nWm9uZSwgZWwsIF9hcmlhRGVzY3JpYmVyLCBfcmVuZGVyZXIsIF9hbmltYXRpb25Nb2RlKTtcbiAgICB0aGlzLmNvbnRlbnQgPSAweDAwQTA7IC8vIFdpbGwgYmUgaW52aXNpYmxlXG4gIH1cblxuICBuZ09uSW5pdCgpIHtcbiAgICBzdXBlci5uZ09uSW5pdCgpO1xuICB9XG5cbiAgbmdBZnRlclZpZXdJbml0KCkge1xuICAgIHRoaXMudXBkYXRlVmlldygpO1xuICB9XG5cbiAgbmdPbkNoYW5nZXMoY2hhbmdlczogU2ltcGxlQ2hhbmdlcykge1xuICAgIGlmIChjaGFuZ2VzLmFwcEJhZGdlQ29sb3IgfHwgY2hhbmdlcy5hcHBCYWRnZUZpbGwgfHwgY2hhbmdlcy5hcHBCYWRnZU1hdEljb24gfHwgY2hhbmdlcy5hcHBCYWRnZUljb24gfHwgY2hhbmdlcy5hcHBCYWRnZUhpZGRlbiB8fCBjaGFuZ2VzLmFwcEJhZGdlT3ZlcmxhcCB8fCBjaGFuZ2VzLmFwcEJhZGdlUG9zaXRpb24pIHtcbiAgICAgIHRoaXMudXBkYXRlVmlldygpO1xuICAgIH1cbiAgfVxuXG4gIG5nT25EZXN0cm95KCkge1xuICAgIHN1cGVyLm5nT25EZXN0cm95KCk7XG4gIH1cblxuICBwcml2YXRlIHVwZGF0ZVZpZXcoKSB7XG4gICAgY29uc3QgYmFkZ2UgPSB0aGlzLmdldEJhZGdlRWxlbWVudCgpO1xuICAgIGlmICghYmFkZ2UpIHJldHVybjtcblxuICAgIC8vIEZpeCBjb2xvclxuICAgIGlmICghdGhpcy5hcHBCYWRnZUNvbG9yKSB0aGlzLmFwcEJhZGdlQ29sb3IgPSAncHJpbWFyeSc7XG4gICAgaWYgKHRoaXMuYXBwQmFkZ2VDb2xvciA9PT0gJ3dhcm4nKSB0aGlzLmFwcEJhZGdlQ29sb3IgPSAnd2FybmluZyc7XG5cbiAgICBsZXQgc2l6ZTogbnVtYmVyO1xuICAgIHN3aXRjaCAodGhpcy5zaXplKSB7XG4gICAgICBjYXNlICdsYXJnZSc6XG4gICAgICAgIHNpemUgPSAyNDtcbiAgICAgICAgYnJlYWs7XG4gICAgICBjYXNlICdtZWRpdW0nOlxuICAgICAgICBzaXplID0gMjI7XG4gICAgICAgIGJyZWFrO1xuICAgICAgY2FzZSAnc21hbGwnOlxuICAgICAgICBzaXplID0gMTY7XG4gICAgICAgIGJyZWFrO1xuICAgIH1cbiAgICBsZXQgaGlkZGVuID0gdGhpcy5hcHBCYWRnZUhpZGRlbjtcbiAgICBsZXQgaHRtbCA9ICcnO1xuICAgIGlmICh0aGlzLmFwcEJhZGdlTWF0SWNvbikge1xuICAgICAgaHRtbCA9IGA8aSBjbGFzcz1cIm1hdGVyaWFsLWljb25zXCIgc3R5bGU9XCJmb250LXNpemU6ICR7c2l6ZX1weDtcIj4ke3RoaXMuYXBwQmFkZ2VNYXRJY29ufTwvaT5gO1xuICAgIH1cbiAgICBlbHNlIGlmICh0aGlzLmFwcEJhZGdlSWNvbikge1xuICAgICAgaHRtbCA9IGA8aW9uLWljb24gc3R5bGU9XCJmb250LXNpemU6ICR7c2l6ZX1weDsgcG9pbnRlci1ldmVudHM6IG5vbmU7XCIgbmFtZT1cIiR7dGhpcy5hcHBCYWRnZUljb259XCI+PC9pb24taWNvbj5gO1xuICAgIH1cbiAgICBlbHNlIGlmIChpc05vdE5pbE9yQmxhbmsodGhpcy5jb250ZW50KSkge1xuICAgICAgaHRtbCA9ICcnICsgdGhpcy5jb250ZW50O1xuICAgIH1cbiAgICBlbHNlIHtcbiAgICAgIGhpZGRlbiA9IHRydWU7XG4gICAgfVxuICAgIGlmICghaGlkZGVuICYmIHRoaXMuX2h0bWwgIT09IGh0bWwpIHtcbiAgICAgIHRoaXMuX2h0bWwgPSBodG1sO1xuICAgICAgYmFkZ2UuaW5uZXJIVE1MID0gaHRtbDtcbiAgICB9XG5cbiAgICAvLyBVcGRhdGUgc3R5bGVcbiAgICAvLyBmaWxsOiAnY2xlYXInXG4gICAgaWYgKHRoaXMuYXBwQmFkZ2VGaWxsID09PSAnY2xlYXInKSB7XG4gICAgICBiYWRnZS5zdHlsZS5jb2xvciA9IGB2YXIoLS1pb24tY29sb3ItJHt0aGlzLmFwcEJhZGdlQ29sb3J9KWA7XG4gICAgICBiYWRnZS5zdHlsZS5iYWNrZ3JvdW5kID0gJ3RyYW5zcGFyZW50JztcbiAgICB9XG4gICAgLy8gZmlsbDogJ3NvbGlkJyAoZGVmYXVsdCB2YWx1ZSlcbiAgICBlbHNlIHtcbiAgICAgIGJhZGdlLnN0eWxlLmJhY2tncm91bmQgPSBgdmFyKC0taW9uLWNvbG9yLSR7dGhpcy5hcHBCYWRnZUNvbG9yfSlgO1xuICAgICAgYmFkZ2Uuc3R5bGUuY29sb3IgPSBgdmFyKC0taW9uLWNvbG9yLSR7dGhpcy5hcHBCYWRnZUNvbG9yfS1jb250cmFzdClgO1xuICAgIH1cblxuICAgIGlmIChoaWRkZW4pIGJhZGdlLnN0eWxlLmRpc3BsYXkgPSAnbm9uZSc7XG4gICAgZWxzZSB7XG4gICAgICBpZiAoYmFkZ2Uuc3R5bGUuZGlzcGxheSAhPT0gJ2lubGluZS1ibG9jaycpIGJhZGdlLnN0eWxlLmRpc3BsYXkgPSAnaW5saW5lLWJsb2NrJztcbiAgICAgIGlmIChiYWRnZS5zdHlsZS5wb3NpdGlvbiAhPT0gJ2Fic29sdXRlJykgYmFkZ2Uuc3R5bGUucG9zaXRpb24gPSAnYWJzb2x1dGUnO1xuXG5cblxuXG4gICAgICAvKlxuICAgICAgLy8gV09BUktST1VORCB0byBmb3JjZSBwb3NpdGlvbiBvZiB0aGUgYmFkZ2UsIHdoZW4gaW5zaWRlIGEgPG1hdC1idXR0b24+IChlLmcuIG9uIGEgPG1hdC1sYWJlbD4pXG4gICAgICBjb25zdCBvdmVybGFwID0gdGhpcy5vdmVybGFwO1xuXG4gICAgICAvLyBSaWdodC9sZWZ0IHBvc2l0aW9uXG4gICAgICBpZiAodGhpcy5pc0FmdGVyKCkgKSB7XG4gICAgICAgIGNvbnN0IHBhcmVudFdpZHRoID0gYmFkZ2UucGFyZW50RWxlbWVudC5nZXRCb3VuZGluZ0NsaWVudFJlY3QoKS53aWR0aDtcbiAgICAgICAgaWYgKHBhcmVudFdpZHRoID4gMCkge1xuICAgICAgICAgIGNvbnN0IGxlZnQgPSBgJHtwYXJlbnRXaWR0aCAtIChvdmVybGFwID8gc2l6ZSAvIDIgOiAwKX1weGA7XG4gICAgICAgICAgaWYgKGJhZGdlLnN0eWxlLmxlZnQgIT09IGxlZnQpIGJhZGdlLnN0eWxlLmxlZnQgPSBsZWZ0O1xuICAgICAgICAgIGlmIChiYWRnZS5zdHlsZS5yaWdodCAhPT0gJycpIGJhZGdlLnN0eWxlLnJpZ2h0ID0gJyc7XG4gICAgICAgIH1cbiAgICAgICAgZWxzZSB7XG4gICAgICAgICAgY29uc3QgcmlnaHQgPSBgJHstMSAqIChvdmVybGFwID8gc2l6ZSAvIDIgOiBzaXplKX1weGA7XG4gICAgICAgICAgaWYgKGJhZGdlLnN0eWxlLnJpZ2h0ICE9PSByaWdodCkgYmFkZ2Uuc3R5bGUucmlnaHQgPSByaWdodDtcbiAgICAgICAgICBpZiAoYmFkZ2Uuc3R5bGUubGVmdCAhPT0gJycpIGJhZGdlLnN0eWxlLmxlZnQgPSAnJztcbiAgICAgICAgfVxuICAgICAgfVxuXG4gICAgICAvLyBUb3AvYm90dG9tIHBvc2l0aW9uXG4gICAgICBpZiAodGhpcy5pc0Fib3ZlKCkpIHtcbiAgICAgICAgY29uc3QgcGFyZW50SGVpZ2h0ID0gYmFkZ2UucGFyZW50RWxlbWVudC5nZXRCb3VuZGluZ0NsaWVudFJlY3QoKS5oZWlnaHQ7XG4gICAgICAgIGlmIChwYXJlbnRIZWlnaHQgPiAwKSB7XG4gICAgICAgICAgY29uc3QgYm90dG9tID0gYCR7cGFyZW50SGVpZ2h0IC0gKG92ZXJsYXAgPyAoc2l6ZSAvIDIpIDogc2l6ZSl9cHhgO1xuICAgICAgICAgIGlmIChiYWRnZS5zdHlsZS5ib3R0b20gIT09IGJvdHRvbSkgYmFkZ2Uuc3R5bGUuYm90dG9tID0gYm90dG9tO1xuICAgICAgICAgIGlmIChiYWRnZS5zdHlsZS50b3AgIT09ICcnKSBiYWRnZS5zdHlsZS50b3AgPSAnJztcbiAgICAgICAgfVxuICAgICAgICBlbHNlIHtcbiAgICAgICAgICBjb25zdCB0b3AgPSBgJHstMSAqIChvdmVybGFwID8gKHNpemUgLyAyKSA6IHNpemUpfXB4YDtcbiAgICAgICAgICBpZiAoYmFkZ2Uuc3R5bGUudG9wICE9PSB0b3ApIGJhZGdlLnN0eWxlLnRvcCA9IHRvcDtcbiAgICAgICAgICBpZiAoYmFkZ2Uuc3R5bGUuYm90dG9tICE9PSAnJykgYmFkZ2Uuc3R5bGUuYm90dG9tID0gJyc7XG4gICAgICAgIH1cbiAgICAgIH0qL1xuICAgIH1cbiAgfVxufVxuIl19
|
|
@@ -33,7 +33,7 @@ export class MatBadgeTestPage {
|
|
|
33
33
|
}
|
|
34
34
|
}
|
|
35
35
|
MatBadgeTestPage.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: MatBadgeTestPage, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
36
|
-
MatBadgeTestPage.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: MatBadgeTestPage, selector: "mat-badge-test", ngImport: i0, 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 appBadge\n appBadgeMatIcon=\"check\"\n appBadgeSize=\"small\"\n appBadgeColor=\"accent\"\n appBadgeOverlap=\"false\">Small badge\n <span class=\"mat-badge-content\"></span>\n </span>\n </ion-text>\n </p>\n\n <!-- medium badge -->\n <p>\n <ion-text appBadge appBadgeMatIcon=\"check\"\n appBadgeSize=\"medium\"\n [appBadgeColor]=\"'tertiary'|matColor\"\n appBadgeOverlap=\"false\"\n >Medium badge</ion-text>\n </p>\n\n <!-- small badge -->\n <p>\n <ion-label appBadge appBadgeMatIcon=\"close\" appBadgeSize=\"large\"\n appBadgeOverlap=\"false\">Large badge</ion-label>\n </p>\n\n <!-- default size badge -->\n <p>\n <ion-label appBadge appBadgeMatIcon=\"check\" [appBadgeColor]=\"'success'|matColor\"\n appBadgeOverlap=\"false\">Badge (no size, no color)\n </ion-label>\n </p>\n\n <!-- ion icon -->\n <p>\n <ion-label appBadge\n appBadgeIcon=\"checkmark\"\n [appBadgeColor]=\"'success'|matColor\"\n appBadgeOverlap=\"false\">Badge with ion-icon\n </ion-label>\n </p>\n\n <!-- ion icon clear -->\n <p>\n <ion-label appBadge\n appBadgeIcon=\"checkmark-circle\"\n [appBadgeColor]=\"'tertiary'|matColor\"\n appBadgeFill=\"clear\"\n appBadgeOverlap=\"false\">Badge with clear icon\n </ion-label>\n </p>\n\n <!-- changing text-->\n <ion-row>\n <ion-col>\n <ion-label appBadge\n appBadgeIcon=\"checkmark-circle\"\n [appBadgeColor]=\"'tertiary'|matColor\"\n appBadgeFill=\"clear\"\n appBadgeOverlap=\"false\">{{userText}}\n </ion-label>\n </ion-col>\n <ion-col>\n <input type=\"text\" [value]=\"userText\" (input)=\"onInputChanged($event)\">\n </ion-col>\n </ion-row>\n\n <ion-row>\n <ion-col>Configurable example :</ion-col>\n </ion-row>\n <ion-row class=\"ion-no-padding\">\n <ion-col size=\"auto\">\n <mat-icon [style.color]=\"'var(--ion-color-secondary)'\"\n appBadge\n [appBadgeIcon]=\"$icon|async\"\n [appBadgeColor]=\"$color|async|matColor\"\n [appBadgeHidden]=\"$hidden|async\"\n [appBadgeFill]=\"$fill|async\"\n [appBadgeSize]=\"$size|async\"\n appBadgeOverlap=\"true\"\n appBadgePosition=\"above before\">\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=\"appBadgeColor\"\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=\"appBadgeIcon\"\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=\"appBadgeSize\"\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=\"appBadgeFill\"\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\n <ion-col>\n <mat-form-field>\n <mat-select placeholder=\"appBadgeHidden\"\n [value]=\"$hidden.value\"\n (selectionChange)=\"this.$hidden.next($event.value)\">\n <mat-option [value]=\"true\">true</mat-option>\n <mat-option [value]=\"false\">false</mat-option>\n </mat-select>\n </mat-form-field>\n </ion-col>\n\n </ion-row>\n\n <ion-row>\n <ion-col size=\"auto\">\n <p>mat-raised-button:</p>\n </ion-col>\n <ion-col>\n <button mat-raised-button color=\"primary\"\n [appBadgeIcon]=\"$icon|async\"\n [appBadgeColor]=\"$color|async|matColor\"\n [appBadgeHidden]=\"$hidden|async\"\n [appBadgeFill]=\"$fill|async\"\n [appBadgeSize]=\"$size|async\"\n appBadgeOverlap=\"true\"\n appBadgePosition=\"below after\">\n {{userText}}\n </button>\n </ion-col>\n </ion-row>\n\n <ion-row>\n <ion-col size=\"auto\">\n <p>mat-button with mat-label:</p>\n </ion-col>\n <ion-col>\n <button mat-button color=\"primary\"\n class=\"ion-no-padding\"\n [appBadgeIcon]=\"$icon|async\"\n [appBadgeColor]=\"$color|async|matColor\"\n [appBadgeHidden]=\"$hidden|async\"\n [appBadgeFill]=\"$fill|async\"\n [appBadgeSize]=\"$size|async\"\n matBadgeOverlap=\"true\"\n matBadgePosition=\"above after\">\n {{userText}}\n </button>\n </ion-col>\n </ion-row>\n\n <h4>Angular Material Badge (standard way)</h4>\n\n <ion-row>\n <ion-col size=\"auto\">\n <p>mat-icon:</p>\n </ion-col>\n <ion-col>\n <mat-icon [style.color]=\"'var(--ion-color-secondary)'\"\n [matBadge]=\"'!'\"\n [matBadgeColor]=\"$color|async|matColor\"\n [matBadgeHidden]=\"$hidden|async\"\n [matBadgeSize]=\"$size|async\"\n matBadgeOverlap=\"true\">\n <ion-icon slot=\"icon-only\"\n [color]=\"'secondary'\"\n name=\"navigate\"\n ></ion-icon>\n </mat-icon>\n </ion-col>\n </ion-row>\n\n <ion-row>\n <ion-col size=\"auto\">\n <p>mat-button:</p>\n </ion-col>\n <ion-col>\n <button mat-raised-button color=\"primary\" [matBadge]=\"matBadgeContent\"\n [matBadgeColor]=\"$color|async|matColor\"\n [matBadgeHidden]=\"$hidden|async\"\n [matBadgeSize]=\"$size|async\"\n matBadgeOverlap=\"true\"\n matBadgePosition=\"above after\">\n {{userText}}\n </button>\n </ion-col>\n\n <ion-col>\n <input type=\"text\" [value]=\"matBadgeContent\" (input)=\"onMatBadgeContentChanged($event)\">\n </ion-col>\n </ion-row>\n\n <ion-row>\n <ion-col size=\"auto\">\n <p>mat-button</p>\n </ion-col>\n <ion-col>\n <button mat-button color=\"primary\"\n [matBadge]=\"matBadgeContent\"\n [matBadgeColor]=\"$color|async|matColor\"\n [matBadgeHidden]=\"$hidden|async\"\n [matBadgeSize]=\"$size|async\"\n matBadgeOverlap=\"true\"\n matBadgePosition=\"after\">\n {{userText}}\n </button>\n </ion-col>\n </ion-row>\n</ion-content>\n", dependencies: [{ kind: "component", type: i1.IonBackButton, selector: "ion-back-button", inputs: ["color", "defaultHref", "disabled", "icon", "mode", "routerAnimation", "text", "type"] }, { kind: "component", type: i1.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i1.IonCol, selector: "ion-col", inputs: ["offset", "offsetLg", "offsetMd", "offsetSm", "offsetXl", "offsetXs", "pull", "pullLg", "pullMd", "pullSm", "pullXl", "pullXs", "push", "pushLg", "pushMd", "pushSm", "pushXl", "pushXs", "size", "sizeLg", "sizeMd", "sizeSm", "sizeXl", "sizeXs"] }, { kind: "component", type: i1.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i1.IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i1.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i1.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i1.IonRow, selector: "ion-row" }, { kind: "component", type: i1.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "component", type: i1.IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "component", type: i1.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "directive", type: i1.IonBackButtonDelegate, selector: "ion-back-button", inputs: ["defaultHref", "routerAnimation"] }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i4.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button], button[mat-fab], button[mat-mini-fab], button[mat-stroked-button], button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i5.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "component", type: i6.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "directive", type: i7.MatBadge, selector: "[matBadge]", inputs: ["matBadgeDisabled", "matBadgeColor", "matBadgeOverlap", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "directive", type: i8.BadgeDirective, selector: "[appBadge], [appBadgeIcon], [appBadgeMatIcon]", inputs: ["matBadgeDisabled", "appBadgeColor", "appBadgeSize", "appBadgeFill", "appBadgeHidden", "appBadgeOverlap", "appBadgePosition", "appBadgeMatIcon", "appBadgeIcon"] }, { kind: "pipe", type: i9.AsyncPipe, name: "async" }, { kind: "pipe", type: i10.MatColorPipe, name: "matColor" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
36
|
+
MatBadgeTestPage.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: MatBadgeTestPage, selector: "mat-badge-test", ngImport: i0, 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 appBadge\n appBadgeMatIcon=\"check\"\n appBadgeSize=\"small\"\n appBadgeColor=\"accent\"\n appBadgeOverlap=\"false\">Small badge\n <span class=\"mat-badge-content\"></span>\n </span>\n </ion-text>\n </p>\n\n <!-- medium badge -->\n <p>\n <ion-text appBadge appBadgeMatIcon=\"check\"\n appBadgeSize=\"medium\"\n [appBadgeColor]=\"'tertiary'|matColor\"\n appBadgeOverlap=\"false\"\n >Medium badge</ion-text>\n </p>\n\n <!-- small badge -->\n <p>\n <ion-label appBadge appBadgeMatIcon=\"close\" appBadgeSize=\"large\"\n appBadgeOverlap=\"false\">Large badge</ion-label>\n </p>\n\n <!-- default size badge -->\n <p>\n <ion-label appBadge appBadgeMatIcon=\"check\" [appBadgeColor]=\"'success'|matColor\"\n appBadgeOverlap=\"false\">Badge (no size, no color)\n </ion-label>\n </p>\n\n <!-- ion icon -->\n <p>\n <ion-label appBadge\n appBadgeIcon=\"checkmark\"\n [appBadgeColor]=\"'success'|matColor\"\n appBadgeOverlap=\"false\">Badge with ion-icon\n </ion-label>\n </p>\n\n <!-- ion icon clear -->\n <p>\n <ion-label appBadge\n appBadgeIcon=\"checkmark-circle\"\n [appBadgeColor]=\"'tertiary'|matColor\"\n appBadgeFill=\"clear\"\n appBadgeOverlap=\"false\">Badge with clear icon\n </ion-label>\n </p>\n\n <!-- changing text-->\n <ion-row>\n <ion-col>\n <ion-label appBadge\n appBadgeIcon=\"checkmark-circle\"\n [appBadgeColor]=\"'tertiary'|matColor\"\n appBadgeFill=\"clear\"\n appBadgeOverlap=\"false\">{{userText}}\n </ion-label>\n </ion-col>\n <ion-col>\n <input type=\"text\" [value]=\"userText\" (input)=\"onInputChanged($event)\">\n </ion-col>\n </ion-row>\n\n <ion-row>\n <ion-col>Configurable example :</ion-col>\n </ion-row>\n <ion-row class=\"ion-no-padding\">\n <ion-col size=\"auto\">\n <mat-icon [style.color]=\"'var(--ion-color-secondary)'\"\n appBadge\n [appBadgeIcon]=\"$icon|async\"\n [appBadgeColor]=\"$color|async|matColor\"\n [appBadgeHidden]=\"$hidden|async\"\n [appBadgeFill]=\"$fill|async\"\n [appBadgeSize]=\"$size|async\"\n appBadgeOverlap=\"true\"\n appBadgePosition=\"above before\">\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=\"appBadgeColor\"\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=\"appBadgeIcon\"\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=\"appBadgeSize\"\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=\"appBadgeFill\"\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\n <ion-col>\n <mat-form-field>\n <mat-select placeholder=\"appBadgeHidden\"\n [value]=\"$hidden.value\"\n (selectionChange)=\"this.$hidden.next($event.value)\">\n <mat-option [value]=\"true\">true</mat-option>\n <mat-option [value]=\"false\">false</mat-option>\n </mat-select>\n </mat-form-field>\n </ion-col>\n\n </ion-row>\n\n <ion-row>\n <ion-col size=\"auto\">\n <p>mat-raised-button:</p>\n </ion-col>\n <ion-col>\n <button mat-raised-button color=\"primary\"\n [appBadgeIcon]=\"$icon|async\"\n [appBadgeColor]=\"$color|async|matColor\"\n [appBadgeHidden]=\"$hidden|async\"\n [appBadgeFill]=\"$fill|async\"\n [appBadgeSize]=\"$size|async\"\n appBadgeOverlap=\"true\"\n appBadgePosition=\"below after\">\n {{userText}}\n </button>\n </ion-col>\n </ion-row>\n\n <ion-row>\n <ion-col size=\"auto\">\n <p>mat-button with mat-label:</p>\n </ion-col>\n <ion-col>\n <button mat-button color=\"primary\"\n class=\"ion-no-padding\"\n [appBadgeIcon]=\"$icon|async\"\n [appBadgeColor]=\"$color|async|matColor\"\n [appBadgeHidden]=\"$hidden|async\"\n [appBadgeFill]=\"$fill|async\"\n [appBadgeSize]=\"$size|async\"\n matBadgeOverlap=\"true\"\n matBadgePosition=\"above after\">\n {{userText}}\n </button>\n </ion-col>\n </ion-row>\n\n <h4>Angular Material Badge (standard way)</h4>\n\n <ion-row>\n <ion-col size=\"auto\">\n <p>mat-icon:</p>\n </ion-col>\n <ion-col>\n <mat-icon [style.color]=\"'var(--ion-color-secondary)'\"\n [matBadge]=\"'!'\"\n [matBadgeColor]=\"$color|async|matColor\"\n [matBadgeHidden]=\"$hidden|async\"\n [matBadgeSize]=\"$size|async\"\n matBadgeOverlap=\"true\">\n <ion-icon slot=\"icon-only\"\n [color]=\"'secondary'\"\n name=\"navigate\"\n ></ion-icon>\n </mat-icon>\n </ion-col>\n </ion-row>\n\n <ion-row>\n <ion-col size=\"auto\">\n <p>mat-button:</p>\n </ion-col>\n <ion-col>\n <button mat-raised-button color=\"primary\" [matBadge]=\"matBadgeContent\"\n [matBadgeColor]=\"$color|async|matColor\"\n [matBadgeHidden]=\"$hidden|async\"\n [matBadgeSize]=\"$size|async\"\n matBadgeOverlap=\"true\"\n matBadgePosition=\"above after\">\n {{userText}}\n </button>\n </ion-col>\n\n <ion-col>\n <input type=\"text\" [value]=\"matBadgeContent\" (input)=\"onMatBadgeContentChanged($event)\">\n </ion-col>\n </ion-row>\n\n <ion-row>\n <ion-col size=\"auto\">\n <p>mat-button</p>\n </ion-col>\n <ion-col>\n <button mat-button color=\"primary\"\n [matBadge]=\"matBadgeContent\"\n [matBadgeColor]=\"$color|async|matColor\"\n [matBadgeHidden]=\"$hidden|async\"\n [matBadgeSize]=\"$size|async\"\n matBadgeOverlap=\"true\"\n matBadgePosition=\"after\">\n {{userText}}\n </button>\n </ion-col>\n </ion-row>\n</ion-content>\n", dependencies: [{ kind: "component", type: i1.IonBackButton, selector: "ion-back-button", inputs: ["color", "defaultHref", "disabled", "icon", "mode", "routerAnimation", "text", "type"] }, { kind: "component", type: i1.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i1.IonCol, selector: "ion-col", inputs: ["offset", "offsetLg", "offsetMd", "offsetSm", "offsetXl", "offsetXs", "pull", "pullLg", "pullMd", "pullSm", "pullXl", "pullXs", "push", "pushLg", "pushMd", "pushSm", "pushXl", "pushXs", "size", "sizeLg", "sizeMd", "sizeSm", "sizeXl", "sizeXs"] }, { kind: "component", type: i1.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i1.IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i1.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i1.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i1.IonRow, selector: "ion-row" }, { kind: "component", type: i1.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "component", type: i1.IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "component", type: i1.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "directive", type: i1.IonBackButtonDelegate, selector: "ion-back-button", inputs: ["defaultHref", "routerAnimation"] }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i4.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button], button[mat-fab], button[mat-mini-fab], button[mat-stroked-button], button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i5.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "component", type: i6.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "directive", type: i7.MatBadge, selector: "[matBadge]", inputs: ["matBadgeDisabled", "matBadgeColor", "matBadgeOverlap", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "directive", type: i8.BadgeDirective, selector: "[appBadge], [appBadgeIcon], [appBadgeMatIcon]", inputs: ["appBadge", "appBadgeDisabled", "appBadgeColor", "appBadgeSize", "appBadgeFill", "appBadgeHidden", "appBadgeOverlap", "appBadgePosition", "appBadgeMatIcon", "appBadgeIcon"] }, { kind: "pipe", type: i9.AsyncPipe, name: "async" }, { kind: "pipe", type: i10.MatColorPipe, name: "matColor" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
37
37
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: MatBadgeTestPage, decorators: [{
|
|
38
38
|
type: Component,
|
|
39
39
|
args: [{ selector: 'mat-badge-test', changeDetection: ChangeDetectionStrategy.OnPush, 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 appBadge\n appBadgeMatIcon=\"check\"\n appBadgeSize=\"small\"\n appBadgeColor=\"accent\"\n appBadgeOverlap=\"false\">Small badge\n <span class=\"mat-badge-content\"></span>\n </span>\n </ion-text>\n </p>\n\n <!-- medium badge -->\n <p>\n <ion-text appBadge appBadgeMatIcon=\"check\"\n appBadgeSize=\"medium\"\n [appBadgeColor]=\"'tertiary'|matColor\"\n appBadgeOverlap=\"false\"\n >Medium badge</ion-text>\n </p>\n\n <!-- small badge -->\n <p>\n <ion-label appBadge appBadgeMatIcon=\"close\" appBadgeSize=\"large\"\n appBadgeOverlap=\"false\">Large badge</ion-label>\n </p>\n\n <!-- default size badge -->\n <p>\n <ion-label appBadge appBadgeMatIcon=\"check\" [appBadgeColor]=\"'success'|matColor\"\n appBadgeOverlap=\"false\">Badge (no size, no color)\n </ion-label>\n </p>\n\n <!-- ion icon -->\n <p>\n <ion-label appBadge\n appBadgeIcon=\"checkmark\"\n [appBadgeColor]=\"'success'|matColor\"\n appBadgeOverlap=\"false\">Badge with ion-icon\n </ion-label>\n </p>\n\n <!-- ion icon clear -->\n <p>\n <ion-label appBadge\n appBadgeIcon=\"checkmark-circle\"\n [appBadgeColor]=\"'tertiary'|matColor\"\n appBadgeFill=\"clear\"\n appBadgeOverlap=\"false\">Badge with clear icon\n </ion-label>\n </p>\n\n <!-- changing text-->\n <ion-row>\n <ion-col>\n <ion-label appBadge\n appBadgeIcon=\"checkmark-circle\"\n [appBadgeColor]=\"'tertiary'|matColor\"\n appBadgeFill=\"clear\"\n appBadgeOverlap=\"false\">{{userText}}\n </ion-label>\n </ion-col>\n <ion-col>\n <input type=\"text\" [value]=\"userText\" (input)=\"onInputChanged($event)\">\n </ion-col>\n </ion-row>\n\n <ion-row>\n <ion-col>Configurable example :</ion-col>\n </ion-row>\n <ion-row class=\"ion-no-padding\">\n <ion-col size=\"auto\">\n <mat-icon [style.color]=\"'var(--ion-color-secondary)'\"\n appBadge\n [appBadgeIcon]=\"$icon|async\"\n [appBadgeColor]=\"$color|async|matColor\"\n [appBadgeHidden]=\"$hidden|async\"\n [appBadgeFill]=\"$fill|async\"\n [appBadgeSize]=\"$size|async\"\n appBadgeOverlap=\"true\"\n appBadgePosition=\"above before\">\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=\"appBadgeColor\"\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=\"appBadgeIcon\"\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=\"appBadgeSize\"\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=\"appBadgeFill\"\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\n <ion-col>\n <mat-form-field>\n <mat-select placeholder=\"appBadgeHidden\"\n [value]=\"$hidden.value\"\n (selectionChange)=\"this.$hidden.next($event.value)\">\n <mat-option [value]=\"true\">true</mat-option>\n <mat-option [value]=\"false\">false</mat-option>\n </mat-select>\n </mat-form-field>\n </ion-col>\n\n </ion-row>\n\n <ion-row>\n <ion-col size=\"auto\">\n <p>mat-raised-button:</p>\n </ion-col>\n <ion-col>\n <button mat-raised-button color=\"primary\"\n [appBadgeIcon]=\"$icon|async\"\n [appBadgeColor]=\"$color|async|matColor\"\n [appBadgeHidden]=\"$hidden|async\"\n [appBadgeFill]=\"$fill|async\"\n [appBadgeSize]=\"$size|async\"\n appBadgeOverlap=\"true\"\n appBadgePosition=\"below after\">\n {{userText}}\n </button>\n </ion-col>\n </ion-row>\n\n <ion-row>\n <ion-col size=\"auto\">\n <p>mat-button with mat-label:</p>\n </ion-col>\n <ion-col>\n <button mat-button color=\"primary\"\n class=\"ion-no-padding\"\n [appBadgeIcon]=\"$icon|async\"\n [appBadgeColor]=\"$color|async|matColor\"\n [appBadgeHidden]=\"$hidden|async\"\n [appBadgeFill]=\"$fill|async\"\n [appBadgeSize]=\"$size|async\"\n matBadgeOverlap=\"true\"\n matBadgePosition=\"above after\">\n {{userText}}\n </button>\n </ion-col>\n </ion-row>\n\n <h4>Angular Material Badge (standard way)</h4>\n\n <ion-row>\n <ion-col size=\"auto\">\n <p>mat-icon:</p>\n </ion-col>\n <ion-col>\n <mat-icon [style.color]=\"'var(--ion-color-secondary)'\"\n [matBadge]=\"'!'\"\n [matBadgeColor]=\"$color|async|matColor\"\n [matBadgeHidden]=\"$hidden|async\"\n [matBadgeSize]=\"$size|async\"\n matBadgeOverlap=\"true\">\n <ion-icon slot=\"icon-only\"\n [color]=\"'secondary'\"\n name=\"navigate\"\n ></ion-icon>\n </mat-icon>\n </ion-col>\n </ion-row>\n\n <ion-row>\n <ion-col size=\"auto\">\n <p>mat-button:</p>\n </ion-col>\n <ion-col>\n <button mat-raised-button color=\"primary\" [matBadge]=\"matBadgeContent\"\n [matBadgeColor]=\"$color|async|matColor\"\n [matBadgeHidden]=\"$hidden|async\"\n [matBadgeSize]=\"$size|async\"\n matBadgeOverlap=\"true\"\n matBadgePosition=\"above after\">\n {{userText}}\n </button>\n </ion-col>\n\n <ion-col>\n <input type=\"text\" [value]=\"matBadgeContent\" (input)=\"onMatBadgeContentChanged($event)\">\n </ion-col>\n </ion-row>\n\n <ion-row>\n <ion-col size=\"auto\">\n <p>mat-button</p>\n </ion-col>\n <ion-col>\n <button mat-button color=\"primary\"\n [matBadge]=\"matBadgeContent\"\n [matBadgeColor]=\"$color|async|matColor\"\n [matBadgeHidden]=\"$hidden|async\"\n [matBadgeSize]=\"$size|async\"\n matBadgeOverlap=\"true\"\n matBadgePosition=\"after\">\n {{userText}}\n </button>\n </ion-col>\n </ion-row>\n</ion-content>\n" }]
|
|
@@ -5,6 +5,8 @@ export class MatColorPipe {
|
|
|
5
5
|
if (!color)
|
|
6
6
|
return undefined;
|
|
7
7
|
switch (color) {
|
|
8
|
+
case 'tertiary':
|
|
9
|
+
return 'primary';
|
|
8
10
|
case 'warning':
|
|
9
11
|
return 'warn';
|
|
10
12
|
default:
|
|
@@ -20,4 +22,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
|
|
|
20
22
|
name: 'matColor'
|
|
21
23
|
}]
|
|
22
24
|
}] });
|
|
23
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
25
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY29sb3JzLnBpcGUuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi9zcmMvYXBwL3NoYXJlZC9waXBlcy9jb2xvcnMucGlwZS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUMsSUFBSSxFQUFnQixNQUFNLGVBQWUsQ0FBQzs7QUFPbEQsTUFBTSxPQUFPLFlBQVk7SUFFckIsU0FBUyxDQUFDLEtBQWdCO1FBQ3hCLElBQUksQ0FBQyxLQUFLO1lBQUUsT0FBTyxTQUFTLENBQUE7UUFDNUIsUUFBUSxLQUFLLEVBQUU7WUFDYixLQUFLLFVBQVU7Z0JBQ2IsT0FBTyxTQUFTLENBQUM7WUFDbkIsS0FBSyxTQUFTO2dCQUNaLE9BQU8sTUFBTSxDQUFDO1lBQ2hCO2dCQUNFLE9BQU8sS0FBcUIsQ0FBQTtTQUMvQjtJQUNILENBQUM7O3lHQVpRLFlBQVk7dUdBQVosWUFBWTsyRkFBWixZQUFZO2tCQUh4QixJQUFJO21CQUFDO29CQUNGLElBQUksRUFBRSxVQUFVO2lCQUNuQiIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7UGlwZSwgUGlwZVRyYW5zZm9ybX0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQge0FwcENvbG9yc30gZnJvbSAnLi4vdHlwZXMnO1xuaW1wb3J0IHtUaGVtZVBhbGV0dGV9IGZyb20gJ0Bhbmd1bGFyL21hdGVyaWFsL2NvcmUnO1xuXG5AUGlwZSh7XG4gICAgbmFtZTogJ21hdENvbG9yJ1xufSlcbmV4cG9ydCBjbGFzcyBNYXRDb2xvclBpcGUgaW1wbGVtZW50cyBQaXBlVHJhbnNmb3JtIHtcblxuICAgIHRyYW5zZm9ybShjb2xvcjogQXBwQ29sb3JzKTogVGhlbWVQYWxldHRlIHwgdW5kZWZpbmVkIHtcbiAgICAgIGlmICghY29sb3IpIHJldHVybiB1bmRlZmluZWRcbiAgICAgIHN3aXRjaCAoY29sb3IpIHtcbiAgICAgICAgY2FzZSAndGVydGlhcnknOlxuICAgICAgICAgIHJldHVybiAncHJpbWFyeSc7XG4gICAgICAgIGNhc2UgJ3dhcm5pbmcnOlxuICAgICAgICAgIHJldHVybiAnd2Fybic7XG4gICAgICAgIGRlZmF1bHQ6XG4gICAgICAgICAgcmV0dXJuIGNvbG9yIGFzIFRoZW1lUGFsZXR0ZVxuICAgICAgfVxuICAgIH1cbn1cbiJdfQ==
|
|
@@ -5202,6 +5202,8 @@ class MatColorPipe {
|
|
|
5202
5202
|
if (!color)
|
|
5203
5203
|
return undefined;
|
|
5204
5204
|
switch (color) {
|
|
5205
|
+
case 'tertiary':
|
|
5206
|
+
return 'primary';
|
|
5205
5207
|
case 'warning':
|
|
5206
5208
|
return 'warn';
|
|
5207
5209
|
default:
|
|
@@ -9743,6 +9745,9 @@ class BadgeDirective extends MatBadge {
|
|
|
9743
9745
|
else if (this.appBadgeIcon) {
|
|
9744
9746
|
html = `<ion-icon style="font-size: ${size}px; pointer-events: none;" name="${this.appBadgeIcon}"></ion-icon>`;
|
|
9745
9747
|
}
|
|
9748
|
+
else if (isNotNilOrBlank(this.content)) {
|
|
9749
|
+
html = '' + this.content;
|
|
9750
|
+
}
|
|
9746
9751
|
else {
|
|
9747
9752
|
hidden = true;
|
|
9748
9753
|
}
|
|
@@ -9805,13 +9810,14 @@ class BadgeDirective extends MatBadge {
|
|
|
9805
9810
|
}
|
|
9806
9811
|
}
|
|
9807
9812
|
BadgeDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: BadgeDirective, deps: [{ token: i0.NgZone }, { token: i0.ElementRef }, { token: i1$4.AriaDescriber }, { token: i0.Renderer2 }, { token: ANIMATION_MODULE_TYPE, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
|
|
9808
|
-
BadgeDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.3.0", type: BadgeDirective, selector: "[appBadge], [appBadgeIcon], [appBadgeMatIcon]", inputs: { disabled: ["
|
|
9813
|
+
BadgeDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.3.0", type: BadgeDirective, selector: "[appBadge], [appBadgeIcon], [appBadgeMatIcon]", inputs: { content: ["appBadge", "content"], disabled: ["appBadgeDisabled", "disabled"], color: ["appBadgeColor", "color"], size: ["appBadgeSize", "size"], fill: ["appBadgeFill", "fill"], hidden: ["appBadgeHidden", "hidden"], overlap: ["appBadgeOverlap", "overlap"], position: ["appBadgePosition", "position"], appBadgeColor: "appBadgeColor", appBadgeFill: "appBadgeFill", appBadgeMatIcon: "appBadgeMatIcon", appBadgeIcon: "appBadgeIcon", appBadgeHidden: "appBadgeHidden", appBadgeOverlap: "appBadgeOverlap", appBadgePosition: "appBadgePosition" }, host: { properties: { "class.mat-badge": "this.true", "class.mat-badge-overlap": "this.isOverlapHost", "class.mat-badge-above": "this.isAboveHost", "class.mat-badge-below": "this.isBelowHost", "class.mat-badge-before": "this.isBeforeHost", "class.mat-badge-after": "this.isAfterHost", "class.mat-badge-small": "this.isSmallHost", "class.mat-badge-medium": "this.isMediumHost", "class.mat-badge-large": "this.isLargeHost", "class.mat-badge-hidden": "this.isHiddenHost", "class.mat-badge-disabled": "this.isDisabledHost" } }, usesInheritance: true, usesOnChanges: true, ngImport: i0 });
|
|
9809
9814
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: BadgeDirective, decorators: [{
|
|
9810
9815
|
type: Directive,
|
|
9811
9816
|
args: [{
|
|
9812
9817
|
selector: '[appBadge], [appBadgeIcon], [appBadgeMatIcon]',
|
|
9813
9818
|
inputs: [
|
|
9814
|
-
'
|
|
9819
|
+
'content: appBadge',
|
|
9820
|
+
'disabled: appBadgeDisabled',
|
|
9815
9821
|
'color: appBadgeColor',
|
|
9816
9822
|
'size: appBadgeSize',
|
|
9817
9823
|
'fill: appBadgeFill',
|
|
@@ -35818,7 +35824,7 @@ class MatBadgeTestPage {
|
|
|
35818
35824
|
}
|
|
35819
35825
|
}
|
|
35820
35826
|
MatBadgeTestPage.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: MatBadgeTestPage, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
35821
|
-
MatBadgeTestPage.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: MatBadgeTestPage, selector: "mat-badge-test", ngImport: i0, 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 appBadge\n appBadgeMatIcon=\"check\"\n appBadgeSize=\"small\"\n appBadgeColor=\"accent\"\n appBadgeOverlap=\"false\">Small badge\n <span class=\"mat-badge-content\"></span>\n </span>\n </ion-text>\n </p>\n\n <!-- medium badge -->\n <p>\n <ion-text appBadge appBadgeMatIcon=\"check\"\n appBadgeSize=\"medium\"\n [appBadgeColor]=\"'tertiary'|matColor\"\n appBadgeOverlap=\"false\"\n >Medium badge</ion-text>\n </p>\n\n <!-- small badge -->\n <p>\n <ion-label appBadge appBadgeMatIcon=\"close\" appBadgeSize=\"large\"\n appBadgeOverlap=\"false\">Large badge</ion-label>\n </p>\n\n <!-- default size badge -->\n <p>\n <ion-label appBadge appBadgeMatIcon=\"check\" [appBadgeColor]=\"'success'|matColor\"\n appBadgeOverlap=\"false\">Badge (no size, no color)\n </ion-label>\n </p>\n\n <!-- ion icon -->\n <p>\n <ion-label appBadge\n appBadgeIcon=\"checkmark\"\n [appBadgeColor]=\"'success'|matColor\"\n appBadgeOverlap=\"false\">Badge with ion-icon\n </ion-label>\n </p>\n\n <!-- ion icon clear -->\n <p>\n <ion-label appBadge\n appBadgeIcon=\"checkmark-circle\"\n [appBadgeColor]=\"'tertiary'|matColor\"\n appBadgeFill=\"clear\"\n appBadgeOverlap=\"false\">Badge with clear icon\n </ion-label>\n </p>\n\n <!-- changing text-->\n <ion-row>\n <ion-col>\n <ion-label appBadge\n appBadgeIcon=\"checkmark-circle\"\n [appBadgeColor]=\"'tertiary'|matColor\"\n appBadgeFill=\"clear\"\n appBadgeOverlap=\"false\">{{userText}}\n </ion-label>\n </ion-col>\n <ion-col>\n <input type=\"text\" [value]=\"userText\" (input)=\"onInputChanged($event)\">\n </ion-col>\n </ion-row>\n\n <ion-row>\n <ion-col>Configurable example :</ion-col>\n </ion-row>\n <ion-row class=\"ion-no-padding\">\n <ion-col size=\"auto\">\n <mat-icon [style.color]=\"'var(--ion-color-secondary)'\"\n appBadge\n [appBadgeIcon]=\"$icon|async\"\n [appBadgeColor]=\"$color|async|matColor\"\n [appBadgeHidden]=\"$hidden|async\"\n [appBadgeFill]=\"$fill|async\"\n [appBadgeSize]=\"$size|async\"\n appBadgeOverlap=\"true\"\n appBadgePosition=\"above before\">\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=\"appBadgeColor\"\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=\"appBadgeIcon\"\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=\"appBadgeSize\"\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=\"appBadgeFill\"\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\n <ion-col>\n <mat-form-field>\n <mat-select placeholder=\"appBadgeHidden\"\n [value]=\"$hidden.value\"\n (selectionChange)=\"this.$hidden.next($event.value)\">\n <mat-option [value]=\"true\">true</mat-option>\n <mat-option [value]=\"false\">false</mat-option>\n </mat-select>\n </mat-form-field>\n </ion-col>\n\n </ion-row>\n\n <ion-row>\n <ion-col size=\"auto\">\n <p>mat-raised-button:</p>\n </ion-col>\n <ion-col>\n <button mat-raised-button color=\"primary\"\n [appBadgeIcon]=\"$icon|async\"\n [appBadgeColor]=\"$color|async|matColor\"\n [appBadgeHidden]=\"$hidden|async\"\n [appBadgeFill]=\"$fill|async\"\n [appBadgeSize]=\"$size|async\"\n appBadgeOverlap=\"true\"\n appBadgePosition=\"below after\">\n {{userText}}\n </button>\n </ion-col>\n </ion-row>\n\n <ion-row>\n <ion-col size=\"auto\">\n <p>mat-button with mat-label:</p>\n </ion-col>\n <ion-col>\n <button mat-button color=\"primary\"\n class=\"ion-no-padding\"\n [appBadgeIcon]=\"$icon|async\"\n [appBadgeColor]=\"$color|async|matColor\"\n [appBadgeHidden]=\"$hidden|async\"\n [appBadgeFill]=\"$fill|async\"\n [appBadgeSize]=\"$size|async\"\n matBadgeOverlap=\"true\"\n matBadgePosition=\"above after\">\n {{userText}}\n </button>\n </ion-col>\n </ion-row>\n\n <h4>Angular Material Badge (standard way)</h4>\n\n <ion-row>\n <ion-col size=\"auto\">\n <p>mat-icon:</p>\n </ion-col>\n <ion-col>\n <mat-icon [style.color]=\"'var(--ion-color-secondary)'\"\n [matBadge]=\"'!'\"\n [matBadgeColor]=\"$color|async|matColor\"\n [matBadgeHidden]=\"$hidden|async\"\n [matBadgeSize]=\"$size|async\"\n matBadgeOverlap=\"true\">\n <ion-icon slot=\"icon-only\"\n [color]=\"'secondary'\"\n name=\"navigate\"\n ></ion-icon>\n </mat-icon>\n </ion-col>\n </ion-row>\n\n <ion-row>\n <ion-col size=\"auto\">\n <p>mat-button:</p>\n </ion-col>\n <ion-col>\n <button mat-raised-button color=\"primary\" [matBadge]=\"matBadgeContent\"\n [matBadgeColor]=\"$color|async|matColor\"\n [matBadgeHidden]=\"$hidden|async\"\n [matBadgeSize]=\"$size|async\"\n matBadgeOverlap=\"true\"\n matBadgePosition=\"above after\">\n {{userText}}\n </button>\n </ion-col>\n\n <ion-col>\n <input type=\"text\" [value]=\"matBadgeContent\" (input)=\"onMatBadgeContentChanged($event)\">\n </ion-col>\n </ion-row>\n\n <ion-row>\n <ion-col size=\"auto\">\n <p>mat-button</p>\n </ion-col>\n <ion-col>\n <button mat-button color=\"primary\"\n [matBadge]=\"matBadgeContent\"\n [matBadgeColor]=\"$color|async|matColor\"\n [matBadgeHidden]=\"$hidden|async\"\n [matBadgeSize]=\"$size|async\"\n matBadgeOverlap=\"true\"\n matBadgePosition=\"after\">\n {{userText}}\n </button>\n </ion-col>\n </ion-row>\n</ion-content>\n", dependencies: [{ kind: "component", type: i1.IonBackButton, selector: "ion-back-button", inputs: ["color", "defaultHref", "disabled", "icon", "mode", "routerAnimation", "text", "type"] }, { kind: "component", type: i1.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i1.IonCol, selector: "ion-col", inputs: ["offset", "offsetLg", "offsetMd", "offsetSm", "offsetXl", "offsetXs", "pull", "pullLg", "pullMd", "pullSm", "pullXl", "pullXs", "push", "pushLg", "pushMd", "pushSm", "pushXl", "pushXs", "size", "sizeLg", "sizeMd", "sizeSm", "sizeXl", "sizeXs"] }, { kind: "component", type: i1.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i1.IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i1.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i1.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i1.IonRow, selector: "ion-row" }, { kind: "component", type: i1.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "component", type: i1.IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "component", type: i1.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "directive", type: i1.IonBackButtonDelegate, selector: "ion-back-button", inputs: ["defaultHref", "routerAnimation"] }, { kind: "component", type: i6$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "component", type: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i9.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button], button[mat-fab], button[mat-mini-fab], button[mat-stroked-button], button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i12.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "component", type: i2.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "directive", type: i6$5.MatBadge, selector: "[matBadge]", inputs: ["matBadgeDisabled", "matBadgeColor", "matBadgeOverlap", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "directive", type: BadgeDirective, selector: "[appBadge], [appBadgeIcon], [appBadgeMatIcon]", inputs: ["matBadgeDisabled", "appBadgeColor", "appBadgeSize", "appBadgeFill", "appBadgeHidden", "appBadgeOverlap", "appBadgePosition", "appBadgeMatIcon", "appBadgeIcon"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: MatColorPipe, name: "matColor" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
35827
|
+
MatBadgeTestPage.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: MatBadgeTestPage, selector: "mat-badge-test", ngImport: i0, 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 appBadge\n appBadgeMatIcon=\"check\"\n appBadgeSize=\"small\"\n appBadgeColor=\"accent\"\n appBadgeOverlap=\"false\">Small badge\n <span class=\"mat-badge-content\"></span>\n </span>\n </ion-text>\n </p>\n\n <!-- medium badge -->\n <p>\n <ion-text appBadge appBadgeMatIcon=\"check\"\n appBadgeSize=\"medium\"\n [appBadgeColor]=\"'tertiary'|matColor\"\n appBadgeOverlap=\"false\"\n >Medium badge</ion-text>\n </p>\n\n <!-- small badge -->\n <p>\n <ion-label appBadge appBadgeMatIcon=\"close\" appBadgeSize=\"large\"\n appBadgeOverlap=\"false\">Large badge</ion-label>\n </p>\n\n <!-- default size badge -->\n <p>\n <ion-label appBadge appBadgeMatIcon=\"check\" [appBadgeColor]=\"'success'|matColor\"\n appBadgeOverlap=\"false\">Badge (no size, no color)\n </ion-label>\n </p>\n\n <!-- ion icon -->\n <p>\n <ion-label appBadge\n appBadgeIcon=\"checkmark\"\n [appBadgeColor]=\"'success'|matColor\"\n appBadgeOverlap=\"false\">Badge with ion-icon\n </ion-label>\n </p>\n\n <!-- ion icon clear -->\n <p>\n <ion-label appBadge\n appBadgeIcon=\"checkmark-circle\"\n [appBadgeColor]=\"'tertiary'|matColor\"\n appBadgeFill=\"clear\"\n appBadgeOverlap=\"false\">Badge with clear icon\n </ion-label>\n </p>\n\n <!-- changing text-->\n <ion-row>\n <ion-col>\n <ion-label appBadge\n appBadgeIcon=\"checkmark-circle\"\n [appBadgeColor]=\"'tertiary'|matColor\"\n appBadgeFill=\"clear\"\n appBadgeOverlap=\"false\">{{userText}}\n </ion-label>\n </ion-col>\n <ion-col>\n <input type=\"text\" [value]=\"userText\" (input)=\"onInputChanged($event)\">\n </ion-col>\n </ion-row>\n\n <ion-row>\n <ion-col>Configurable example :</ion-col>\n </ion-row>\n <ion-row class=\"ion-no-padding\">\n <ion-col size=\"auto\">\n <mat-icon [style.color]=\"'var(--ion-color-secondary)'\"\n appBadge\n [appBadgeIcon]=\"$icon|async\"\n [appBadgeColor]=\"$color|async|matColor\"\n [appBadgeHidden]=\"$hidden|async\"\n [appBadgeFill]=\"$fill|async\"\n [appBadgeSize]=\"$size|async\"\n appBadgeOverlap=\"true\"\n appBadgePosition=\"above before\">\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=\"appBadgeColor\"\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=\"appBadgeIcon\"\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=\"appBadgeSize\"\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=\"appBadgeFill\"\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\n <ion-col>\n <mat-form-field>\n <mat-select placeholder=\"appBadgeHidden\"\n [value]=\"$hidden.value\"\n (selectionChange)=\"this.$hidden.next($event.value)\">\n <mat-option [value]=\"true\">true</mat-option>\n <mat-option [value]=\"false\">false</mat-option>\n </mat-select>\n </mat-form-field>\n </ion-col>\n\n </ion-row>\n\n <ion-row>\n <ion-col size=\"auto\">\n <p>mat-raised-button:</p>\n </ion-col>\n <ion-col>\n <button mat-raised-button color=\"primary\"\n [appBadgeIcon]=\"$icon|async\"\n [appBadgeColor]=\"$color|async|matColor\"\n [appBadgeHidden]=\"$hidden|async\"\n [appBadgeFill]=\"$fill|async\"\n [appBadgeSize]=\"$size|async\"\n appBadgeOverlap=\"true\"\n appBadgePosition=\"below after\">\n {{userText}}\n </button>\n </ion-col>\n </ion-row>\n\n <ion-row>\n <ion-col size=\"auto\">\n <p>mat-button with mat-label:</p>\n </ion-col>\n <ion-col>\n <button mat-button color=\"primary\"\n class=\"ion-no-padding\"\n [appBadgeIcon]=\"$icon|async\"\n [appBadgeColor]=\"$color|async|matColor\"\n [appBadgeHidden]=\"$hidden|async\"\n [appBadgeFill]=\"$fill|async\"\n [appBadgeSize]=\"$size|async\"\n matBadgeOverlap=\"true\"\n matBadgePosition=\"above after\">\n {{userText}}\n </button>\n </ion-col>\n </ion-row>\n\n <h4>Angular Material Badge (standard way)</h4>\n\n <ion-row>\n <ion-col size=\"auto\">\n <p>mat-icon:</p>\n </ion-col>\n <ion-col>\n <mat-icon [style.color]=\"'var(--ion-color-secondary)'\"\n [matBadge]=\"'!'\"\n [matBadgeColor]=\"$color|async|matColor\"\n [matBadgeHidden]=\"$hidden|async\"\n [matBadgeSize]=\"$size|async\"\n matBadgeOverlap=\"true\">\n <ion-icon slot=\"icon-only\"\n [color]=\"'secondary'\"\n name=\"navigate\"\n ></ion-icon>\n </mat-icon>\n </ion-col>\n </ion-row>\n\n <ion-row>\n <ion-col size=\"auto\">\n <p>mat-button:</p>\n </ion-col>\n <ion-col>\n <button mat-raised-button color=\"primary\" [matBadge]=\"matBadgeContent\"\n [matBadgeColor]=\"$color|async|matColor\"\n [matBadgeHidden]=\"$hidden|async\"\n [matBadgeSize]=\"$size|async\"\n matBadgeOverlap=\"true\"\n matBadgePosition=\"above after\">\n {{userText}}\n </button>\n </ion-col>\n\n <ion-col>\n <input type=\"text\" [value]=\"matBadgeContent\" (input)=\"onMatBadgeContentChanged($event)\">\n </ion-col>\n </ion-row>\n\n <ion-row>\n <ion-col size=\"auto\">\n <p>mat-button</p>\n </ion-col>\n <ion-col>\n <button mat-button color=\"primary\"\n [matBadge]=\"matBadgeContent\"\n [matBadgeColor]=\"$color|async|matColor\"\n [matBadgeHidden]=\"$hidden|async\"\n [matBadgeSize]=\"$size|async\"\n matBadgeOverlap=\"true\"\n matBadgePosition=\"after\">\n {{userText}}\n </button>\n </ion-col>\n </ion-row>\n</ion-content>\n", dependencies: [{ kind: "component", type: i1.IonBackButton, selector: "ion-back-button", inputs: ["color", "defaultHref", "disabled", "icon", "mode", "routerAnimation", "text", "type"] }, { kind: "component", type: i1.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i1.IonCol, selector: "ion-col", inputs: ["offset", "offsetLg", "offsetMd", "offsetSm", "offsetXl", "offsetXs", "pull", "pullLg", "pullMd", "pullSm", "pullXl", "pullXs", "push", "pushLg", "pushMd", "pushSm", "pushXl", "pushXs", "size", "sizeLg", "sizeMd", "sizeSm", "sizeXl", "sizeXs"] }, { kind: "component", type: i1.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i1.IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i1.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i1.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i1.IonRow, selector: "ion-row" }, { kind: "component", type: i1.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "component", type: i1.IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "component", type: i1.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "directive", type: i1.IonBackButtonDelegate, selector: "ion-back-button", inputs: ["defaultHref", "routerAnimation"] }, { kind: "component", type: i6$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "component", type: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i9.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button], button[mat-fab], button[mat-mini-fab], button[mat-stroked-button], button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i12.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "component", type: i2.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "directive", type: i6$5.MatBadge, selector: "[matBadge]", inputs: ["matBadgeDisabled", "matBadgeColor", "matBadgeOverlap", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "directive", type: BadgeDirective, selector: "[appBadge], [appBadgeIcon], [appBadgeMatIcon]", inputs: ["appBadge", "appBadgeDisabled", "appBadgeColor", "appBadgeSize", "appBadgeFill", "appBadgeHidden", "appBadgeOverlap", "appBadgePosition", "appBadgeMatIcon", "appBadgeIcon"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: MatColorPipe, name: "matColor" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
35822
35828
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: MatBadgeTestPage, decorators: [{
|
|
35823
35829
|
type: Component,
|
|
35824
35830
|
args: [{ selector: 'mat-badge-test', changeDetection: ChangeDetectionStrategy.OnPush, 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 appBadge\n appBadgeMatIcon=\"check\"\n appBadgeSize=\"small\"\n appBadgeColor=\"accent\"\n appBadgeOverlap=\"false\">Small badge\n <span class=\"mat-badge-content\"></span>\n </span>\n </ion-text>\n </p>\n\n <!-- medium badge -->\n <p>\n <ion-text appBadge appBadgeMatIcon=\"check\"\n appBadgeSize=\"medium\"\n [appBadgeColor]=\"'tertiary'|matColor\"\n appBadgeOverlap=\"false\"\n >Medium badge</ion-text>\n </p>\n\n <!-- small badge -->\n <p>\n <ion-label appBadge appBadgeMatIcon=\"close\" appBadgeSize=\"large\"\n appBadgeOverlap=\"false\">Large badge</ion-label>\n </p>\n\n <!-- default size badge -->\n <p>\n <ion-label appBadge appBadgeMatIcon=\"check\" [appBadgeColor]=\"'success'|matColor\"\n appBadgeOverlap=\"false\">Badge (no size, no color)\n </ion-label>\n </p>\n\n <!-- ion icon -->\n <p>\n <ion-label appBadge\n appBadgeIcon=\"checkmark\"\n [appBadgeColor]=\"'success'|matColor\"\n appBadgeOverlap=\"false\">Badge with ion-icon\n </ion-label>\n </p>\n\n <!-- ion icon clear -->\n <p>\n <ion-label appBadge\n appBadgeIcon=\"checkmark-circle\"\n [appBadgeColor]=\"'tertiary'|matColor\"\n appBadgeFill=\"clear\"\n appBadgeOverlap=\"false\">Badge with clear icon\n </ion-label>\n </p>\n\n <!-- changing text-->\n <ion-row>\n <ion-col>\n <ion-label appBadge\n appBadgeIcon=\"checkmark-circle\"\n [appBadgeColor]=\"'tertiary'|matColor\"\n appBadgeFill=\"clear\"\n appBadgeOverlap=\"false\">{{userText}}\n </ion-label>\n </ion-col>\n <ion-col>\n <input type=\"text\" [value]=\"userText\" (input)=\"onInputChanged($event)\">\n </ion-col>\n </ion-row>\n\n <ion-row>\n <ion-col>Configurable example :</ion-col>\n </ion-row>\n <ion-row class=\"ion-no-padding\">\n <ion-col size=\"auto\">\n <mat-icon [style.color]=\"'var(--ion-color-secondary)'\"\n appBadge\n [appBadgeIcon]=\"$icon|async\"\n [appBadgeColor]=\"$color|async|matColor\"\n [appBadgeHidden]=\"$hidden|async\"\n [appBadgeFill]=\"$fill|async\"\n [appBadgeSize]=\"$size|async\"\n appBadgeOverlap=\"true\"\n appBadgePosition=\"above before\">\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=\"appBadgeColor\"\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=\"appBadgeIcon\"\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=\"appBadgeSize\"\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=\"appBadgeFill\"\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\n <ion-col>\n <mat-form-field>\n <mat-select placeholder=\"appBadgeHidden\"\n [value]=\"$hidden.value\"\n (selectionChange)=\"this.$hidden.next($event.value)\">\n <mat-option [value]=\"true\">true</mat-option>\n <mat-option [value]=\"false\">false</mat-option>\n </mat-select>\n </mat-form-field>\n </ion-col>\n\n </ion-row>\n\n <ion-row>\n <ion-col size=\"auto\">\n <p>mat-raised-button:</p>\n </ion-col>\n <ion-col>\n <button mat-raised-button color=\"primary\"\n [appBadgeIcon]=\"$icon|async\"\n [appBadgeColor]=\"$color|async|matColor\"\n [appBadgeHidden]=\"$hidden|async\"\n [appBadgeFill]=\"$fill|async\"\n [appBadgeSize]=\"$size|async\"\n appBadgeOverlap=\"true\"\n appBadgePosition=\"below after\">\n {{userText}}\n </button>\n </ion-col>\n </ion-row>\n\n <ion-row>\n <ion-col size=\"auto\">\n <p>mat-button with mat-label:</p>\n </ion-col>\n <ion-col>\n <button mat-button color=\"primary\"\n class=\"ion-no-padding\"\n [appBadgeIcon]=\"$icon|async\"\n [appBadgeColor]=\"$color|async|matColor\"\n [appBadgeHidden]=\"$hidden|async\"\n [appBadgeFill]=\"$fill|async\"\n [appBadgeSize]=\"$size|async\"\n matBadgeOverlap=\"true\"\n matBadgePosition=\"above after\">\n {{userText}}\n </button>\n </ion-col>\n </ion-row>\n\n <h4>Angular Material Badge (standard way)</h4>\n\n <ion-row>\n <ion-col size=\"auto\">\n <p>mat-icon:</p>\n </ion-col>\n <ion-col>\n <mat-icon [style.color]=\"'var(--ion-color-secondary)'\"\n [matBadge]=\"'!'\"\n [matBadgeColor]=\"$color|async|matColor\"\n [matBadgeHidden]=\"$hidden|async\"\n [matBadgeSize]=\"$size|async\"\n matBadgeOverlap=\"true\">\n <ion-icon slot=\"icon-only\"\n [color]=\"'secondary'\"\n name=\"navigate\"\n ></ion-icon>\n </mat-icon>\n </ion-col>\n </ion-row>\n\n <ion-row>\n <ion-col size=\"auto\">\n <p>mat-button:</p>\n </ion-col>\n <ion-col>\n <button mat-raised-button color=\"primary\" [matBadge]=\"matBadgeContent\"\n [matBadgeColor]=\"$color|async|matColor\"\n [matBadgeHidden]=\"$hidden|async\"\n [matBadgeSize]=\"$size|async\"\n matBadgeOverlap=\"true\"\n matBadgePosition=\"above after\">\n {{userText}}\n </button>\n </ion-col>\n\n <ion-col>\n <input type=\"text\" [value]=\"matBadgeContent\" (input)=\"onMatBadgeContentChanged($event)\">\n </ion-col>\n </ion-row>\n\n <ion-row>\n <ion-col size=\"auto\">\n <p>mat-button</p>\n </ion-col>\n <ion-col>\n <button mat-button color=\"primary\"\n [matBadge]=\"matBadgeContent\"\n [matBadgeColor]=\"$color|async|matColor\"\n [matBadgeHidden]=\"$hidden|async\"\n [matBadgeSize]=\"$size|async\"\n matBadgeOverlap=\"true\"\n matBadgePosition=\"after\">\n {{userText}}\n </button>\n </ion-col>\n </ion-row>\n</ion-content>\n" }]
|