source: trip-planner-front/node_modules/@angular/material/fesm2015/badge.js@ 76712b2

Last change on this file since 76712b2 was fa375fe, checked in by Ema <ema_spirova@…>, 3 years ago

adding new components

  • Property mode set to 100644
File size: 10.1 KB
RevLine 
[6a3a178]1import { Directive, NgZone, ElementRef, Renderer2, Optional, Inject, Input, NgModule } from '@angular/core';
2import { mixinDisabled, MatCommonModule } from '@angular/material/core';
3import { AriaDescriber, A11yModule } from '@angular/cdk/a11y';
4import { coerceBooleanProperty } from '@angular/cdk/coercion';
5import { ANIMATION_MODULE_TYPE } from '@angular/platform-browser/animations';
6
7/**
8 * @license
9 * Copyright Google LLC All Rights Reserved.
10 *
11 * Use of this source code is governed by an MIT-style license that can be
12 * found in the LICENSE file at https://angular.io/license
13 */
14let nextId = 0;
15// Boilerplate for applying mixins to MatBadge.
16/** @docs-private */
17const _MatBadgeBase = mixinDisabled(class {
18});
19/** Directive to display a text badge. */
20class MatBadge extends _MatBadgeBase {
21 constructor(_ngZone, _elementRef, _ariaDescriber, _renderer, _animationMode) {
22 super();
23 this._ngZone = _ngZone;
24 this._elementRef = _elementRef;
25 this._ariaDescriber = _ariaDescriber;
26 this._renderer = _renderer;
27 this._animationMode = _animationMode;
[fa375fe]28 /** Whether the badge has any content. */
29 this._hasContent = false;
[6a3a178]30 this._color = 'primary';
31 this._overlap = true;
32 /**
33 * Position the badge should reside.
34 * Accepts any combination of 'above'|'below' and 'before'|'after'
35 */
36 this.position = 'above after';
37 /** Size of the badge. Can be 'small', 'medium', or 'large'. */
38 this.size = 'medium';
39 /** Unique id for the badge */
40 this._id = nextId++;
41 if (typeof ngDevMode === 'undefined' || ngDevMode) {
42 const nativeElement = _elementRef.nativeElement;
43 if (nativeElement.nodeType !== nativeElement.ELEMENT_NODE) {
44 throw Error('matBadge must be attached to an element node.');
45 }
46 }
47 }
48 /** The color of the badge. Can be `primary`, `accent`, or `warn`. */
49 get color() { return this._color; }
50 set color(value) {
51 this._setColor(value);
52 this._color = value;
53 }
54 /** Whether the badge should overlap its contents or not */
55 get overlap() { return this._overlap; }
56 set overlap(val) {
57 this._overlap = coerceBooleanProperty(val);
58 }
59 /** Message used to describe the decorated element via aria-describedby */
60 get description() { return this._description; }
61 set description(newDescription) {
[fa375fe]62 if (newDescription !== this._description) {
63 const badgeElement = this._badgeElement;
64 this._updateHostAriaDescription(newDescription, this._description);
65 this._description = newDescription;
66 if (badgeElement) {
67 newDescription ? badgeElement.setAttribute('aria-label', newDescription) :
68 badgeElement.removeAttribute('aria-label');
69 }
70 }
[6a3a178]71 }
72 /** Whether the badge is hidden. */
73 get hidden() { return this._hidden; }
74 set hidden(val) {
75 this._hidden = coerceBooleanProperty(val);
76 }
77 /** Whether the badge is above the host or not */
78 isAbove() {
79 return this.position.indexOf('below') === -1;
80 }
81 /** Whether the badge is after the host or not */
82 isAfter() {
83 return this.position.indexOf('before') === -1;
84 }
[fa375fe]85 ngOnChanges(changes) {
86 const contentChange = changes['content'];
87 if (contentChange) {
88 const value = contentChange.currentValue;
89 this._hasContent = value != null && `${value}`.trim().length > 0;
90 this._updateTextContent();
91 }
92 }
93 ngOnDestroy() {
94 const badgeElement = this._badgeElement;
95 if (badgeElement) {
96 if (this.description) {
97 this._ariaDescriber.removeDescription(badgeElement, this.description);
98 }
99 // When creating a badge through the Renderer, Angular will keep it in an index.
100 // We have to destroy it ourselves, otherwise it'll be retained in memory.
101 if (this._renderer.destroyNode) {
102 this._renderer.destroyNode(badgeElement);
103 }
104 }
105 }
[6a3a178]106 /**
[fa375fe]107 * Gets the element into which the badge's content is being rendered.
108 * Undefined if the element hasn't been created (e.g. if the badge doesn't have content).
[6a3a178]109 */
110 getBadgeElement() {
111 return this._badgeElement;
112 }
[fa375fe]113 /** Injects a span element into the DOM with the content. */
114 _updateTextContent() {
115 if (!this._badgeElement) {
[6a3a178]116 this._badgeElement = this._createBadgeElement();
117 }
[fa375fe]118 else {
119 this._badgeElement.textContent = this._stringifyContent();
[6a3a178]120 }
[fa375fe]121 return this._badgeElement;
[6a3a178]122 }
123 /** Creates the badge element */
124 _createBadgeElement() {
125 const badgeElement = this._renderer.createElement('span');
126 const activeClass = 'mat-badge-active';
[fa375fe]127 const contentClass = 'mat-badge-content';
128 // Clear any existing badges which may have persisted from a server-side render.
129 this._clearExistingBadges(contentClass);
[6a3a178]130 badgeElement.setAttribute('id', `mat-badge-content-${this._id}`);
[fa375fe]131 badgeElement.classList.add(contentClass);
132 badgeElement.textContent = this._stringifyContent();
[6a3a178]133 if (this._animationMode === 'NoopAnimations') {
134 badgeElement.classList.add('_mat-animation-noopable');
135 }
[fa375fe]136 if (this.description) {
137 badgeElement.setAttribute('aria-label', this.description);
138 }
[6a3a178]139 this._elementRef.nativeElement.appendChild(badgeElement);
140 // animate in after insertion
141 if (typeof requestAnimationFrame === 'function' && this._animationMode !== 'NoopAnimations') {
142 this._ngZone.runOutsideAngular(() => {
143 requestAnimationFrame(() => {
144 badgeElement.classList.add(activeClass);
145 });
146 });
147 }
148 else {
149 badgeElement.classList.add(activeClass);
150 }
151 return badgeElement;
152 }
[fa375fe]153 /** Sets the aria-label property on the element */
154 _updateHostAriaDescription(newDescription, oldDescription) {
155 // ensure content available before setting label
156 const content = this._updateTextContent();
157 if (oldDescription) {
158 this._ariaDescriber.removeDescription(content, oldDescription);
[6a3a178]159 }
160 if (newDescription) {
[fa375fe]161 this._ariaDescriber.describe(content, newDescription);
[6a3a178]162 }
163 }
164 /** Adds css theme class given the color to the component host */
165 _setColor(colorPalette) {
[fa375fe]166 if (colorPalette !== this._color) {
167 const classList = this._elementRef.nativeElement.classList;
168 if (this._color) {
169 classList.remove(`mat-badge-${this._color}`);
170 }
171 if (colorPalette) {
172 classList.add(`mat-badge-${colorPalette}`);
173 }
[6a3a178]174 }
175 }
176 /** Clears any existing badges that might be left over from server-side rendering. */
[fa375fe]177 _clearExistingBadges(cssClass) {
178 const element = this._elementRef.nativeElement;
179 let childCount = element.children.length;
180 // Use a reverse while, because we'll be removing elements from the list as we're iterating.
181 while (childCount--) {
182 const currentChild = element.children[childCount];
183 if (currentChild.classList.contains(cssClass)) {
184 element.removeChild(currentChild);
[6a3a178]185 }
186 }
187 }
[fa375fe]188 /** Gets the string representation of the badge content. */
189 _stringifyContent() {
190 // Convert null and undefined to an empty string which is consistent
191 // with how Angular handles them in inside template interpolations.
192 const content = this.content;
193 return content == null ? '' : `${content}`;
194 }
[6a3a178]195}
196MatBadge.decorators = [
197 { type: Directive, args: [{
198 selector: '[matBadge]',
199 inputs: ['disabled: matBadgeDisabled'],
200 host: {
201 'class': 'mat-badge',
202 '[class.mat-badge-overlap]': 'overlap',
203 '[class.mat-badge-above]': 'isAbove()',
204 '[class.mat-badge-below]': '!isAbove()',
205 '[class.mat-badge-before]': '!isAfter()',
206 '[class.mat-badge-after]': 'isAfter()',
207 '[class.mat-badge-small]': 'size === "small"',
208 '[class.mat-badge-medium]': 'size === "medium"',
209 '[class.mat-badge-large]': 'size === "large"',
[fa375fe]210 '[class.mat-badge-hidden]': 'hidden || !_hasContent',
[6a3a178]211 '[class.mat-badge-disabled]': 'disabled',
212 },
213 },] }
214];
215MatBadge.ctorParameters = () => [
216 { type: NgZone },
217 { type: ElementRef },
218 { type: AriaDescriber },
219 { type: Renderer2 },
220 { type: String, decorators: [{ type: Optional }, { type: Inject, args: [ANIMATION_MODULE_TYPE,] }] }
221];
222MatBadge.propDecorators = {
223 color: [{ type: Input, args: ['matBadgeColor',] }],
224 overlap: [{ type: Input, args: ['matBadgeOverlap',] }],
225 position: [{ type: Input, args: ['matBadgePosition',] }],
226 content: [{ type: Input, args: ['matBadge',] }],
227 description: [{ type: Input, args: ['matBadgeDescription',] }],
228 size: [{ type: Input, args: ['matBadgeSize',] }],
229 hidden: [{ type: Input, args: ['matBadgeHidden',] }]
230};
231
232/**
233 * @license
234 * Copyright Google LLC All Rights Reserved.
235 *
236 * Use of this source code is governed by an MIT-style license that can be
237 * found in the LICENSE file at https://angular.io/license
238 */
239class MatBadgeModule {
240}
241MatBadgeModule.decorators = [
242 { type: NgModule, args: [{
243 imports: [
244 A11yModule,
245 MatCommonModule
246 ],
247 exports: [MatBadge, MatCommonModule],
248 declarations: [MatBadge],
249 },] }
250];
251
252/**
253 * @license
254 * Copyright Google LLC All Rights Reserved.
255 *
256 * Use of this source code is governed by an MIT-style license that can be
257 * found in the LICENSE file at https://angular.io/license
258 */
259
260/**
261 * Generated bundle index. Do not edit.
262 */
263
264export { MatBadge, MatBadgeModule };
265//# sourceMappingURL=badge.js.map
Note: See TracBrowser for help on using the repository browser.