badge.es5.js 15 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449
  1. /**
  2. * @license
  3. * Copyright Google LLC All Rights Reserved.
  4. *
  5. * Use of this source code is governed by an MIT-style license that can be
  6. * found in the LICENSE file at https://angular.io/license
  7. */
  8. import { __extends } from 'tslib';
  9. import { AriaDescriber, A11yModule } from '@angular/cdk/a11y';
  10. import { coerceBooleanProperty } from '@angular/cdk/coercion';
  11. import { Directive, ElementRef, Inject, Input, NgZone, Optional, Renderer2, isDevMode, NgModule } from '@angular/core';
  12. import { mixinDisabled, MatCommonModule } from '@angular/material/core';
  13. import { ANIMATION_MODULE_TYPE } from '@angular/platform-browser/animations';
  14. /**
  15. * @fileoverview added by tsickle
  16. * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  17. */
  18. /** @type {?} */
  19. var nextId = 0;
  20. // Boilerplate for applying mixins to MatBadge.
  21. /**
  22. * \@docs-private
  23. */
  24. var
  25. // Boilerplate for applying mixins to MatBadge.
  26. /**
  27. * \@docs-private
  28. */
  29. MatBadgeBase = /** @class */ (function () {
  30. function MatBadgeBase() {
  31. }
  32. return MatBadgeBase;
  33. }());
  34. /** @type {?} */
  35. var _MatBadgeMixinBase = mixinDisabled(MatBadgeBase);
  36. /**
  37. * Directive to display a text badge.
  38. */
  39. var MatBadge = /** @class */ (function (_super) {
  40. __extends(MatBadge, _super);
  41. function MatBadge(_ngZone, _elementRef, _ariaDescriber, _renderer, _animationMode) {
  42. var _this = _super.call(this) || this;
  43. _this._ngZone = _ngZone;
  44. _this._elementRef = _elementRef;
  45. _this._ariaDescriber = _ariaDescriber;
  46. _this._renderer = _renderer;
  47. _this._animationMode = _animationMode;
  48. /**
  49. * Whether the badge has any content.
  50. */
  51. _this._hasContent = false;
  52. _this._color = 'primary';
  53. _this._overlap = true;
  54. /**
  55. * Position the badge should reside.
  56. * Accepts any combination of 'above'|'below' and 'before'|'after'
  57. */
  58. _this.position = 'above after';
  59. /**
  60. * Size of the badge. Can be 'small', 'medium', or 'large'.
  61. */
  62. _this.size = 'medium';
  63. /**
  64. * Unique id for the badge
  65. */
  66. _this._id = nextId++;
  67. if (isDevMode()) {
  68. /** @type {?} */
  69. var nativeElement = _elementRef.nativeElement;
  70. if (nativeElement.nodeType !== nativeElement.ELEMENT_NODE) {
  71. throw Error('matBadge must be attached to an element node.');
  72. }
  73. }
  74. return _this;
  75. }
  76. Object.defineProperty(MatBadge.prototype, "color", {
  77. /** The color of the badge. Can be `primary`, `accent`, or `warn`. */
  78. get: /**
  79. * The color of the badge. Can be `primary`, `accent`, or `warn`.
  80. * @return {?}
  81. */
  82. function () { return this._color; },
  83. set: /**
  84. * @param {?} value
  85. * @return {?}
  86. */
  87. function (value) {
  88. this._setColor(value);
  89. this._color = value;
  90. },
  91. enumerable: true,
  92. configurable: true
  93. });
  94. Object.defineProperty(MatBadge.prototype, "overlap", {
  95. /** Whether the badge should overlap its contents or not */
  96. get: /**
  97. * Whether the badge should overlap its contents or not
  98. * @return {?}
  99. */
  100. function () { return this._overlap; },
  101. set: /**
  102. * @param {?} val
  103. * @return {?}
  104. */
  105. function (val) {
  106. this._overlap = coerceBooleanProperty(val);
  107. },
  108. enumerable: true,
  109. configurable: true
  110. });
  111. Object.defineProperty(MatBadge.prototype, "description", {
  112. /** Message used to describe the decorated element via aria-describedby */
  113. get: /**
  114. * Message used to describe the decorated element via aria-describedby
  115. * @return {?}
  116. */
  117. function () { return this._description; },
  118. set: /**
  119. * @param {?} newDescription
  120. * @return {?}
  121. */
  122. function (newDescription) {
  123. if (newDescription !== this._description) {
  124. /** @type {?} */
  125. var badgeElement = this._badgeElement;
  126. this._updateHostAriaDescription(newDescription, this._description);
  127. this._description = newDescription;
  128. if (badgeElement) {
  129. newDescription ? badgeElement.setAttribute('aria-label', newDescription) :
  130. badgeElement.removeAttribute('aria-label');
  131. }
  132. }
  133. },
  134. enumerable: true,
  135. configurable: true
  136. });
  137. Object.defineProperty(MatBadge.prototype, "hidden", {
  138. /** Whether the badge is hidden. */
  139. get: /**
  140. * Whether the badge is hidden.
  141. * @return {?}
  142. */
  143. function () { return this._hidden; },
  144. set: /**
  145. * @param {?} val
  146. * @return {?}
  147. */
  148. function (val) {
  149. this._hidden = coerceBooleanProperty(val);
  150. },
  151. enumerable: true,
  152. configurable: true
  153. });
  154. /** Whether the badge is above the host or not */
  155. /**
  156. * Whether the badge is above the host or not
  157. * @return {?}
  158. */
  159. MatBadge.prototype.isAbove = /**
  160. * Whether the badge is above the host or not
  161. * @return {?}
  162. */
  163. function () {
  164. return this.position.indexOf('below') === -1;
  165. };
  166. /** Whether the badge is after the host or not */
  167. /**
  168. * Whether the badge is after the host or not
  169. * @return {?}
  170. */
  171. MatBadge.prototype.isAfter = /**
  172. * Whether the badge is after the host or not
  173. * @return {?}
  174. */
  175. function () {
  176. return this.position.indexOf('before') === -1;
  177. };
  178. /**
  179. * @param {?} changes
  180. * @return {?}
  181. */
  182. MatBadge.prototype.ngOnChanges = /**
  183. * @param {?} changes
  184. * @return {?}
  185. */
  186. function (changes) {
  187. /** @type {?} */
  188. var contentChange = changes['content'];
  189. if (contentChange) {
  190. /** @type {?} */
  191. var value = contentChange.currentValue;
  192. this._hasContent = value != null && ("" + value).trim().length > 0;
  193. this._updateTextContent();
  194. }
  195. };
  196. /**
  197. * @return {?}
  198. */
  199. MatBadge.prototype.ngOnDestroy = /**
  200. * @return {?}
  201. */
  202. function () {
  203. /** @type {?} */
  204. var badgeElement = this._badgeElement;
  205. if (badgeElement) {
  206. if (this.description) {
  207. this._ariaDescriber.removeDescription(badgeElement, this.description);
  208. }
  209. // When creating a badge through the Renderer, Angular will keep it in an index.
  210. // We have to destroy it ourselves, otherwise it'll be retained in memory.
  211. if (this._renderer.destroyNode) {
  212. this._renderer.destroyNode(badgeElement);
  213. }
  214. }
  215. };
  216. /**
  217. * Gets the element into which the badge's content is being rendered.
  218. * Undefined if the element hasn't been created (e.g. if the badge doesn't have content).
  219. */
  220. /**
  221. * Gets the element into which the badge's content is being rendered.
  222. * Undefined if the element hasn't been created (e.g. if the badge doesn't have content).
  223. * @return {?}
  224. */
  225. MatBadge.prototype.getBadgeElement = /**
  226. * Gets the element into which the badge's content is being rendered.
  227. * Undefined if the element hasn't been created (e.g. if the badge doesn't have content).
  228. * @return {?}
  229. */
  230. function () {
  231. return this._badgeElement;
  232. };
  233. /** Injects a span element into the DOM with the content. */
  234. /**
  235. * Injects a span element into the DOM with the content.
  236. * @private
  237. * @return {?}
  238. */
  239. MatBadge.prototype._updateTextContent = /**
  240. * Injects a span element into the DOM with the content.
  241. * @private
  242. * @return {?}
  243. */
  244. function () {
  245. if (!this._badgeElement) {
  246. this._badgeElement = this._createBadgeElement();
  247. }
  248. else {
  249. this._badgeElement.textContent = this.content;
  250. }
  251. return this._badgeElement;
  252. };
  253. /** Creates the badge element */
  254. /**
  255. * Creates the badge element
  256. * @private
  257. * @return {?}
  258. */
  259. MatBadge.prototype._createBadgeElement = /**
  260. * Creates the badge element
  261. * @private
  262. * @return {?}
  263. */
  264. function () {
  265. /** @type {?} */
  266. var badgeElement = this._renderer.createElement('span');
  267. /** @type {?} */
  268. var activeClass = 'mat-badge-active';
  269. /** @type {?} */
  270. var contentClass = 'mat-badge-content';
  271. // Clear any existing badges which may have persisted from a server-side render.
  272. this._clearExistingBadges(contentClass);
  273. badgeElement.setAttribute('id', "mat-badge-content-" + this._id);
  274. badgeElement.classList.add(contentClass);
  275. badgeElement.textContent = this.content;
  276. if (this._animationMode === 'NoopAnimations') {
  277. badgeElement.classList.add('_mat-animation-noopable');
  278. }
  279. if (this.description) {
  280. badgeElement.setAttribute('aria-label', this.description);
  281. }
  282. this._elementRef.nativeElement.appendChild(badgeElement);
  283. // animate in after insertion
  284. if (typeof requestAnimationFrame === 'function' && this._animationMode !== 'NoopAnimations') {
  285. this._ngZone.runOutsideAngular((/**
  286. * @return {?}
  287. */
  288. function () {
  289. requestAnimationFrame((/**
  290. * @return {?}
  291. */
  292. function () {
  293. badgeElement.classList.add(activeClass);
  294. }));
  295. }));
  296. }
  297. else {
  298. badgeElement.classList.add(activeClass);
  299. }
  300. return badgeElement;
  301. };
  302. /** Sets the aria-label property on the element */
  303. /**
  304. * Sets the aria-label property on the element
  305. * @private
  306. * @param {?} newDescription
  307. * @param {?} oldDescription
  308. * @return {?}
  309. */
  310. MatBadge.prototype._updateHostAriaDescription = /**
  311. * Sets the aria-label property on the element
  312. * @private
  313. * @param {?} newDescription
  314. * @param {?} oldDescription
  315. * @return {?}
  316. */
  317. function (newDescription, oldDescription) {
  318. // ensure content available before setting label
  319. /** @type {?} */
  320. var content = this._updateTextContent();
  321. if (oldDescription) {
  322. this._ariaDescriber.removeDescription(content, oldDescription);
  323. }
  324. if (newDescription) {
  325. this._ariaDescriber.describe(content, newDescription);
  326. }
  327. };
  328. /** Adds css theme class given the color to the component host */
  329. /**
  330. * Adds css theme class given the color to the component host
  331. * @private
  332. * @param {?} colorPalette
  333. * @return {?}
  334. */
  335. MatBadge.prototype._setColor = /**
  336. * Adds css theme class given the color to the component host
  337. * @private
  338. * @param {?} colorPalette
  339. * @return {?}
  340. */
  341. function (colorPalette) {
  342. if (colorPalette !== this._color) {
  343. if (this._color) {
  344. this._elementRef.nativeElement.classList.remove("mat-badge-" + this._color);
  345. }
  346. if (colorPalette) {
  347. this._elementRef.nativeElement.classList.add("mat-badge-" + colorPalette);
  348. }
  349. }
  350. };
  351. /** Clears any existing badges that might be left over from server-side rendering. */
  352. /**
  353. * Clears any existing badges that might be left over from server-side rendering.
  354. * @private
  355. * @param {?} cssClass
  356. * @return {?}
  357. */
  358. MatBadge.prototype._clearExistingBadges = /**
  359. * Clears any existing badges that might be left over from server-side rendering.
  360. * @private
  361. * @param {?} cssClass
  362. * @return {?}
  363. */
  364. function (cssClass) {
  365. /** @type {?} */
  366. var element = this._elementRef.nativeElement;
  367. /** @type {?} */
  368. var childCount = element.children.length;
  369. // Use a reverse while, because we'll be removing elements from the list as we're iterating.
  370. while (childCount--) {
  371. /** @type {?} */
  372. var currentChild = element.children[childCount];
  373. if (currentChild.classList.contains(cssClass)) {
  374. element.removeChild(currentChild);
  375. }
  376. }
  377. };
  378. MatBadge.decorators = [
  379. { type: Directive, args: [{
  380. selector: '[matBadge]',
  381. inputs: ['disabled: matBadgeDisabled'],
  382. host: {
  383. 'class': 'mat-badge',
  384. '[class.mat-badge-overlap]': 'overlap',
  385. '[class.mat-badge-above]': 'isAbove()',
  386. '[class.mat-badge-below]': '!isAbove()',
  387. '[class.mat-badge-before]': '!isAfter()',
  388. '[class.mat-badge-after]': 'isAfter()',
  389. '[class.mat-badge-small]': 'size === "small"',
  390. '[class.mat-badge-medium]': 'size === "medium"',
  391. '[class.mat-badge-large]': 'size === "large"',
  392. '[class.mat-badge-hidden]': 'hidden || !_hasContent',
  393. '[class.mat-badge-disabled]': 'disabled',
  394. },
  395. },] },
  396. ];
  397. /** @nocollapse */
  398. MatBadge.ctorParameters = function () { return [
  399. { type: NgZone },
  400. { type: ElementRef },
  401. { type: AriaDescriber },
  402. { type: Renderer2 },
  403. { type: String, decorators: [{ type: Optional }, { type: Inject, args: [ANIMATION_MODULE_TYPE,] }] }
  404. ]; };
  405. MatBadge.propDecorators = {
  406. color: [{ type: Input, args: ['matBadgeColor',] }],
  407. overlap: [{ type: Input, args: ['matBadgeOverlap',] }],
  408. position: [{ type: Input, args: ['matBadgePosition',] }],
  409. content: [{ type: Input, args: ['matBadge',] }],
  410. description: [{ type: Input, args: ['matBadgeDescription',] }],
  411. size: [{ type: Input, args: ['matBadgeSize',] }],
  412. hidden: [{ type: Input, args: ['matBadgeHidden',] }]
  413. };
  414. return MatBadge;
  415. }(_MatBadgeMixinBase));
  416. /**
  417. * @fileoverview added by tsickle
  418. * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  419. */
  420. var MatBadgeModule = /** @class */ (function () {
  421. function MatBadgeModule() {
  422. }
  423. MatBadgeModule.decorators = [
  424. { type: NgModule, args: [{
  425. imports: [
  426. A11yModule,
  427. MatCommonModule
  428. ],
  429. exports: [MatBadge],
  430. declarations: [MatBadge],
  431. },] },
  432. ];
  433. return MatBadgeModule;
  434. }());
  435. /**
  436. * @fileoverview added by tsickle
  437. * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  438. */
  439. /**
  440. * @fileoverview added by tsickle
  441. * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  442. */
  443. export { MatBadgeModule, MatBadge };
  444. //# sourceMappingURL=badge.es5.js.map