1 | import * as i0 from '@angular/core';
|
2 | import { Directive, Optional, Inject, Input, NgModule } from '@angular/core';
|
3 | import { mixinDisabled, MatCommonModule } from '@angular/material/core';
|
4 | import * as i1 from '@angular/cdk/a11y';
|
5 | import { A11yModule } from '@angular/cdk/a11y';
|
6 | import { coerceBooleanProperty } from '@angular/cdk/coercion';
|
7 | import { ANIMATION_MODULE_TYPE } from '@angular/platform-browser/animations';
|
8 |
|
9 |
|
10 |
|
11 |
|
12 |
|
13 |
|
14 |
|
15 |
|
16 | let nextId = 0;
|
17 |
|
18 |
|
19 | const _MatBadgeBase = mixinDisabled(class {
|
20 | });
|
21 | const BADGE_CONTENT_CLASS = 'mat-badge-content';
|
22 |
|
23 | class MatBadge extends _MatBadgeBase {
|
24 | constructor(_ngZone, _elementRef, _ariaDescriber, _renderer, _animationMode) {
|
25 | super();
|
26 | this._ngZone = _ngZone;
|
27 | this._elementRef = _elementRef;
|
28 | this._ariaDescriber = _ariaDescriber;
|
29 | this._renderer = _renderer;
|
30 | this._animationMode = _animationMode;
|
31 | this._color = 'primary';
|
32 | this._overlap = true;
|
33 | |
34 |
|
35 |
|
36 |
|
37 | this.position = 'above after';
|
38 |
|
39 | this.size = 'medium';
|
40 |
|
41 | this._id = nextId++;
|
42 |
|
43 | this._isInitialized = false;
|
44 | if (typeof ngDevMode === 'undefined' || ngDevMode) {
|
45 | const nativeElement = _elementRef.nativeElement;
|
46 | if (nativeElement.nodeType !== nativeElement.ELEMENT_NODE) {
|
47 | throw Error('matBadge must be attached to an element node.');
|
48 | }
|
49 | }
|
50 | }
|
51 |
|
52 | get color() {
|
53 | return this._color;
|
54 | }
|
55 | set color(value) {
|
56 | this._setColor(value);
|
57 | this._color = value;
|
58 | }
|
59 |
|
60 | get overlap() {
|
61 | return this._overlap;
|
62 | }
|
63 | set overlap(val) {
|
64 | this._overlap = coerceBooleanProperty(val);
|
65 | }
|
66 |
|
67 | get content() {
|
68 | return this._content;
|
69 | }
|
70 | set content(newContent) {
|
71 | this._updateRenderedContent(newContent);
|
72 | }
|
73 |
|
74 | get description() {
|
75 | return this._description;
|
76 | }
|
77 | set description(newDescription) {
|
78 | this._updateHostAriaDescription(newDescription);
|
79 | }
|
80 |
|
81 | get hidden() {
|
82 | return this._hidden;
|
83 | }
|
84 | set hidden(val) {
|
85 | this._hidden = coerceBooleanProperty(val);
|
86 | }
|
87 |
|
88 | isAbove() {
|
89 | return this.position.indexOf('below') === -1;
|
90 | }
|
91 |
|
92 | isAfter() {
|
93 | return this.position.indexOf('before') === -1;
|
94 | }
|
95 | |
96 |
|
97 |
|
98 |
|
99 | getBadgeElement() {
|
100 | return this._badgeElement;
|
101 | }
|
102 | ngOnInit() {
|
103 |
|
104 |
|
105 |
|
106 | this._clearExistingBadges();
|
107 | if (this.content && !this._badgeElement) {
|
108 | this._badgeElement = this._createBadgeElement();
|
109 | this._updateRenderedContent(this.content);
|
110 | }
|
111 | this._isInitialized = true;
|
112 | }
|
113 | ngOnDestroy() {
|
114 |
|
115 |
|
116 | if (this._renderer.destroyNode) {
|
117 | this._renderer.destroyNode(this._badgeElement);
|
118 | }
|
119 | this._ariaDescriber.removeDescription(this._elementRef.nativeElement, this.description);
|
120 | }
|
121 |
|
122 | _createBadgeElement() {
|
123 | const badgeElement = this._renderer.createElement('span');
|
124 | const activeClass = 'mat-badge-active';
|
125 | badgeElement.setAttribute('id', `mat-badge-content-${this._id}`);
|
126 |
|
127 |
|
128 | badgeElement.setAttribute('aria-hidden', 'true');
|
129 | badgeElement.classList.add(BADGE_CONTENT_CLASS);
|
130 | if (this._animationMode === 'NoopAnimations') {
|
131 | badgeElement.classList.add('_mat-animation-noopable');
|
132 | }
|
133 | this._elementRef.nativeElement.appendChild(badgeElement);
|
134 |
|
135 | if (typeof requestAnimationFrame === 'function' && this._animationMode !== 'NoopAnimations') {
|
136 | this._ngZone.runOutsideAngular(() => {
|
137 | requestAnimationFrame(() => {
|
138 | badgeElement.classList.add(activeClass);
|
139 | });
|
140 | });
|
141 | }
|
142 | else {
|
143 | badgeElement.classList.add(activeClass);
|
144 | }
|
145 | return badgeElement;
|
146 | }
|
147 |
|
148 | _updateRenderedContent(newContent) {
|
149 | const newContentNormalized = `${newContent ?? ''}`.trim();
|
150 |
|
151 |
|
152 |
|
153 | if (this._isInitialized && newContentNormalized && !this._badgeElement) {
|
154 | this._badgeElement = this._createBadgeElement();
|
155 | }
|
156 | if (this._badgeElement) {
|
157 | this._badgeElement.textContent = newContentNormalized;
|
158 | }
|
159 | this._content = newContentNormalized;
|
160 | }
|
161 |
|
162 | _updateHostAriaDescription(newDescription) {
|
163 | this._ariaDescriber.removeDescription(this._elementRef.nativeElement, this.description);
|
164 | if (newDescription) {
|
165 | this._ariaDescriber.describe(this._elementRef.nativeElement, newDescription);
|
166 | }
|
167 | this._description = newDescription;
|
168 | }
|
169 |
|
170 | _setColor(colorPalette) {
|
171 | const classList = this._elementRef.nativeElement.classList;
|
172 | classList.remove(`mat-badge-${this._color}`);
|
173 | if (colorPalette) {
|
174 | classList.add(`mat-badge-${colorPalette}`);
|
175 | }
|
176 | }
|
177 |
|
178 | _clearExistingBadges() {
|
179 |
|
180 |
|
181 | const badges = this._elementRef.nativeElement.querySelectorAll(`:scope > .${BADGE_CONTENT_CLASS}`);
|
182 | for (const badgeElement of Array.from(badges)) {
|
183 | if (badgeElement !== this._badgeElement) {
|
184 | badgeElement.remove();
|
185 | }
|
186 | }
|
187 | }
|
188 | }
|
189 | MatBadge.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: MatBadge, deps: [{ token: i0.NgZone }, { token: i0.ElementRef }, { token: i1.AriaDescriber }, { token: i0.Renderer2 }, { token: ANIMATION_MODULE_TYPE, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
|
190 | MatBadge.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.0.1", type: MatBadge, selector: "[matBadge]", inputs: { disabled: ["matBadgeDisabled", "disabled"], color: ["matBadgeColor", "color"], overlap: ["matBadgeOverlap", "overlap"], position: ["matBadgePosition", "position"], content: ["matBadge", "content"], description: ["matBadgeDescription", "description"], size: ["matBadgeSize", "size"], hidden: ["matBadgeHidden", "hidden"] }, host: { properties: { "class.mat-badge-overlap": "overlap", "class.mat-badge-above": "isAbove()", "class.mat-badge-below": "!isAbove()", "class.mat-badge-before": "!isAfter()", "class.mat-badge-after": "isAfter()", "class.mat-badge-small": "size === \"small\"", "class.mat-badge-medium": "size === \"medium\"", "class.mat-badge-large": "size === \"large\"", "class.mat-badge-hidden": "hidden || !content", "class.mat-badge-disabled": "disabled" }, classAttribute: "mat-badge" }, usesInheritance: true, ngImport: i0 });
|
191 | i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: MatBadge, decorators: [{
|
192 | type: Directive,
|
193 | args: [{
|
194 | selector: '[matBadge]',
|
195 | inputs: ['disabled: matBadgeDisabled'],
|
196 | host: {
|
197 | 'class': 'mat-badge',
|
198 | '[class.mat-badge-overlap]': 'overlap',
|
199 | '[class.mat-badge-above]': 'isAbove()',
|
200 | '[class.mat-badge-below]': '!isAbove()',
|
201 | '[class.mat-badge-before]': '!isAfter()',
|
202 | '[class.mat-badge-after]': 'isAfter()',
|
203 | '[class.mat-badge-small]': 'size === "small"',
|
204 | '[class.mat-badge-medium]': 'size === "medium"',
|
205 | '[class.mat-badge-large]': 'size === "large"',
|
206 | '[class.mat-badge-hidden]': 'hidden || !content',
|
207 | '[class.mat-badge-disabled]': 'disabled',
|
208 | },
|
209 | }]
|
210 | }], ctorParameters: function () { return [{ type: i0.NgZone }, { type: i0.ElementRef }, { type: i1.AriaDescriber }, { type: i0.Renderer2 }, { type: undefined, decorators: [{
|
211 | type: Optional
|
212 | }, {
|
213 | type: Inject,
|
214 | args: [ANIMATION_MODULE_TYPE]
|
215 | }] }]; }, propDecorators: { color: [{
|
216 | type: Input,
|
217 | args: ['matBadgeColor']
|
218 | }], overlap: [{
|
219 | type: Input,
|
220 | args: ['matBadgeOverlap']
|
221 | }], position: [{
|
222 | type: Input,
|
223 | args: ['matBadgePosition']
|
224 | }], content: [{
|
225 | type: Input,
|
226 | args: ['matBadge']
|
227 | }], description: [{
|
228 | type: Input,
|
229 | args: ['matBadgeDescription']
|
230 | }], size: [{
|
231 | type: Input,
|
232 | args: ['matBadgeSize']
|
233 | }], hidden: [{
|
234 | type: Input,
|
235 | args: ['matBadgeHidden']
|
236 | }] } });
|
237 |
|
238 |
|
239 |
|
240 |
|
241 |
|
242 |
|
243 |
|
244 |
|
245 | class MatBadgeModule {
|
246 | }
|
247 | MatBadgeModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: MatBadgeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
248 | MatBadgeModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.0.1", ngImport: i0, type: MatBadgeModule, declarations: [MatBadge], imports: [A11yModule, MatCommonModule], exports: [MatBadge, MatCommonModule] });
|
249 | MatBadgeModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: MatBadgeModule, imports: [A11yModule, MatCommonModule, MatCommonModule] });
|
250 | i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: MatBadgeModule, decorators: [{
|
251 | type: NgModule,
|
252 | args: [{
|
253 | imports: [A11yModule, MatCommonModule],
|
254 | exports: [MatBadge, MatCommonModule],
|
255 | declarations: [MatBadge],
|
256 | }]
|
257 | }] });
|
258 |
|
259 |
|
260 |
|
261 |
|
262 |
|
263 |
|
264 |
|
265 |
|
266 |
|
267 |
|
268 |
|
269 |
|
270 |
|
271 |
|
272 |
|
273 |
|
274 |
|
275 |
|
276 |
|
277 |
|
278 |
|
279 | export { MatBadge, MatBadgeModule };
|
280 |
|