| /** |
| * @license |
| * Copyright Google LLC All Rights Reserved. |
| * |
| * Use of this source code is governed by an MIT-style license that can be |
| * found in the LICENSE file at https://angular.io/license |
| */ |
| import { AriaDescriber, A11yModule } from '@angular/cdk/a11y'; |
| import { coerceBooleanProperty } from '@angular/cdk/coercion'; |
| import { Directive, ElementRef, Inject, Input, NgZone, Optional, Renderer2, isDevMode, NgModule } from '@angular/core'; |
| import { mixinDisabled, MatCommonModule } from '@angular/material/core'; |
| import { ANIMATION_MODULE_TYPE } from '@angular/platform-browser/animations'; |
| |
| /** |
| * @fileoverview added by tsickle |
| * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc |
| */ |
| /** @type {?} */ |
| let nextId = 0; |
| // Boilerplate for applying mixins to MatBadge. |
| /** |
| * \@docs-private |
| */ |
| class MatBadgeBase { |
| } |
| /** @type {?} */ |
| const _MatBadgeMixinBase = mixinDisabled(MatBadgeBase); |
| /** |
| * Directive to display a text badge. |
| */ |
| class MatBadge extends _MatBadgeMixinBase { |
| /** |
| * @param {?} _ngZone |
| * @param {?} _elementRef |
| * @param {?} _ariaDescriber |
| * @param {?} _renderer |
| * @param {?=} _animationMode |
| */ |
| constructor(_ngZone, _elementRef, _ariaDescriber, _renderer, _animationMode) { |
| super(); |
| this._ngZone = _ngZone; |
| this._elementRef = _elementRef; |
| this._ariaDescriber = _ariaDescriber; |
| this._renderer = _renderer; |
| this._animationMode = _animationMode; |
| /** |
| * Whether the badge has any content. |
| */ |
| this._hasContent = false; |
| this._color = 'primary'; |
| this._overlap = true; |
| /** |
| * Position the badge should reside. |
| * Accepts any combination of 'above'|'below' and 'before'|'after' |
| */ |
| this.position = 'above after'; |
| /** |
| * Size of the badge. Can be 'small', 'medium', or 'large'. |
| */ |
| this.size = 'medium'; |
| /** |
| * Unique id for the badge |
| */ |
| this._id = nextId++; |
| if (isDevMode()) { |
| /** @type {?} */ |
| const nativeElement = _elementRef.nativeElement; |
| if (nativeElement.nodeType !== nativeElement.ELEMENT_NODE) { |
| throw Error('matBadge must be attached to an element node.'); |
| } |
| } |
| } |
| /** |
| * The color of the badge. Can be `primary`, `accent`, or `warn`. |
| * @return {?} |
| */ |
| get color() { return this._color; } |
| /** |
| * @param {?} value |
| * @return {?} |
| */ |
| set color(value) { |
| this._setColor(value); |
| this._color = value; |
| } |
| /** |
| * Whether the badge should overlap its contents or not |
| * @return {?} |
| */ |
| get overlap() { return this._overlap; } |
| /** |
| * @param {?} val |
| * @return {?} |
| */ |
| set overlap(val) { |
| this._overlap = coerceBooleanProperty(val); |
| } |
| /** |
| * Message used to describe the decorated element via aria-describedby |
| * @return {?} |
| */ |
| get description() { return this._description; } |
| /** |
| * @param {?} newDescription |
| * @return {?} |
| */ |
| set description(newDescription) { |
| if (newDescription !== this._description) { |
| /** @type {?} */ |
| const badgeElement = this._badgeElement; |
| this._updateHostAriaDescription(newDescription, this._description); |
| this._description = newDescription; |
| if (badgeElement) { |
| newDescription ? badgeElement.setAttribute('aria-label', newDescription) : |
| badgeElement.removeAttribute('aria-label'); |
| } |
| } |
| } |
| /** |
| * Whether the badge is hidden. |
| * @return {?} |
| */ |
| get hidden() { return this._hidden; } |
| /** |
| * @param {?} val |
| * @return {?} |
| */ |
| set hidden(val) { |
| this._hidden = coerceBooleanProperty(val); |
| } |
| /** |
| * Whether the badge is above the host or not |
| * @return {?} |
| */ |
| isAbove() { |
| return this.position.indexOf('below') === -1; |
| } |
| /** |
| * Whether the badge is after the host or not |
| * @return {?} |
| */ |
| isAfter() { |
| return this.position.indexOf('before') === -1; |
| } |
| /** |
| * @param {?} changes |
| * @return {?} |
| */ |
| ngOnChanges(changes) { |
| /** @type {?} */ |
| const contentChange = changes['content']; |
| if (contentChange) { |
| /** @type {?} */ |
| const value = contentChange.currentValue; |
| this._hasContent = value != null && `${value}`.trim().length > 0; |
| this._updateTextContent(); |
| } |
| } |
| /** |
| * @return {?} |
| */ |
| ngOnDestroy() { |
| /** @type {?} */ |
| const badgeElement = this._badgeElement; |
| if (badgeElement) { |
| if (this.description) { |
| this._ariaDescriber.removeDescription(badgeElement, this.description); |
| } |
| // When creating a badge through the Renderer, Angular will keep it in an index. |
| // We have to destroy it ourselves, otherwise it'll be retained in memory. |
| if (this._renderer.destroyNode) { |
| this._renderer.destroyNode(badgeElement); |
| } |
| } |
| } |
| /** |
| * Gets the element into which the badge's content is being rendered. |
| * Undefined if the element hasn't been created (e.g. if the badge doesn't have content). |
| * @return {?} |
| */ |
| getBadgeElement() { |
| return this._badgeElement; |
| } |
| /** |
| * Injects a span element into the DOM with the content. |
| * @private |
| * @return {?} |
| */ |
| _updateTextContent() { |
| if (!this._badgeElement) { |
| this._badgeElement = this._createBadgeElement(); |
| } |
| else { |
| this._badgeElement.textContent = this.content; |
| } |
| return this._badgeElement; |
| } |
| /** |
| * Creates the badge element |
| * @private |
| * @return {?} |
| */ |
| _createBadgeElement() { |
| /** @type {?} */ |
| const badgeElement = this._renderer.createElement('span'); |
| /** @type {?} */ |
| const activeClass = 'mat-badge-active'; |
| /** @type {?} */ |
| const contentClass = 'mat-badge-content'; |
| // Clear any existing badges which may have persisted from a server-side render. |
| this._clearExistingBadges(contentClass); |
| badgeElement.setAttribute('id', `mat-badge-content-${this._id}`); |
| badgeElement.classList.add(contentClass); |
| badgeElement.textContent = this.content; |
| if (this._animationMode === 'NoopAnimations') { |
| badgeElement.classList.add('_mat-animation-noopable'); |
| } |
| if (this.description) { |
| badgeElement.setAttribute('aria-label', this.description); |
| } |
| this._elementRef.nativeElement.appendChild(badgeElement); |
| // animate in after insertion |
| if (typeof requestAnimationFrame === 'function' && this._animationMode !== 'NoopAnimations') { |
| this._ngZone.runOutsideAngular((/** |
| * @return {?} |
| */ |
| () => { |
| requestAnimationFrame((/** |
| * @return {?} |
| */ |
| () => { |
| badgeElement.classList.add(activeClass); |
| })); |
| })); |
| } |
| else { |
| badgeElement.classList.add(activeClass); |
| } |
| return badgeElement; |
| } |
| /** |
| * Sets the aria-label property on the element |
| * @private |
| * @param {?} newDescription |
| * @param {?} oldDescription |
| * @return {?} |
| */ |
| _updateHostAriaDescription(newDescription, oldDescription) { |
| // ensure content available before setting label |
| /** @type {?} */ |
| const content = this._updateTextContent(); |
| if (oldDescription) { |
| this._ariaDescriber.removeDescription(content, oldDescription); |
| } |
| if (newDescription) { |
| this._ariaDescriber.describe(content, newDescription); |
| } |
| } |
| /** |
| * Adds css theme class given the color to the component host |
| * @private |
| * @param {?} colorPalette |
| * @return {?} |
| */ |
| _setColor(colorPalette) { |
| if (colorPalette !== this._color) { |
| if (this._color) { |
| this._elementRef.nativeElement.classList.remove(`mat-badge-${this._color}`); |
| } |
| if (colorPalette) { |
| this._elementRef.nativeElement.classList.add(`mat-badge-${colorPalette}`); |
| } |
| } |
| } |
| /** |
| * Clears any existing badges that might be left over from server-side rendering. |
| * @private |
| * @param {?} cssClass |
| * @return {?} |
| */ |
| _clearExistingBadges(cssClass) { |
| /** @type {?} */ |
| const element = this._elementRef.nativeElement; |
| /** @type {?} */ |
| let childCount = element.children.length; |
| // Use a reverse while, because we'll be removing elements from the list as we're iterating. |
| while (childCount--) { |
| /** @type {?} */ |
| const currentChild = element.children[childCount]; |
| if (currentChild.classList.contains(cssClass)) { |
| element.removeChild(currentChild); |
| } |
| } |
| } |
| } |
| MatBadge.decorators = [ |
| { type: Directive, args: [{ |
| selector: '[matBadge]', |
| inputs: ['disabled: matBadgeDisabled'], |
| host: { |
| 'class': 'mat-badge', |
| '[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 || !_hasContent', |
| '[class.mat-badge-disabled]': 'disabled', |
| }, |
| },] }, |
| ]; |
| /** @nocollapse */ |
| MatBadge.ctorParameters = () => [ |
| { type: NgZone }, |
| { type: ElementRef }, |
| { type: AriaDescriber }, |
| { type: Renderer2 }, |
| { type: String, decorators: [{ type: Optional }, { type: Inject, args: [ANIMATION_MODULE_TYPE,] }] } |
| ]; |
| MatBadge.propDecorators = { |
| color: [{ type: Input, args: ['matBadgeColor',] }], |
| overlap: [{ type: Input, args: ['matBadgeOverlap',] }], |
| position: [{ type: Input, args: ['matBadgePosition',] }], |
| content: [{ type: Input, args: ['matBadge',] }], |
| description: [{ type: Input, args: ['matBadgeDescription',] }], |
| size: [{ type: Input, args: ['matBadgeSize',] }], |
| hidden: [{ type: Input, args: ['matBadgeHidden',] }] |
| }; |
| |
| /** |
| * @fileoverview added by tsickle |
| * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc |
| */ |
| class MatBadgeModule { |
| } |
| MatBadgeModule.decorators = [ |
| { type: NgModule, args: [{ |
| imports: [ |
| A11yModule, |
| MatCommonModule |
| ], |
| exports: [MatBadge], |
| declarations: [MatBadge], |
| },] }, |
| ]; |
| |
| /** |
| * @fileoverview added by tsickle |
| * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc |
| */ |
| |
| /** |
| * @fileoverview added by tsickle |
| * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc |
| */ |
| |
| export { MatBadgeModule, MatBadge }; |
| //# sourceMappingURL=badge.js.map |
