UNPKG

ng-zorro-antd

Version:

An enterprise-class UI components based on Ant Design and Angular

297 lines (291 loc) 10.3 kB
import { __decorate, __metadata } from 'tslib'; import { ContentObserver, ObserversModule } from '@angular/cdk/observers'; import { TemplateRef, Component, ViewEncapsulation, ChangeDetectionStrategy, Renderer2, ElementRef, ChangeDetectorRef, NgZone, ViewChild, Input, NgModule } from '@angular/core'; import { isEmpty, zoomBadgeMotion, NzConfigService, InputBoolean, WithConfig, NzAddOnModule } from 'ng-zorro-antd/core'; import { Subject } from 'rxjs'; import { take, startWith, takeUntil } from 'rxjs/operators'; import { CommonModule } from '@angular/common'; /** * @fileoverview added by tsickle * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc */ class NzBadgeComponent { /** * @param {?} nzConfigService * @param {?} renderer * @param {?} elementRef * @param {?} contentObserver * @param {?} cdr * @param {?} ngZone */ constructor(nzConfigService, renderer, elementRef, contentObserver, cdr, ngZone) { this.nzConfigService = nzConfigService; this.renderer = renderer; this.elementRef = elementRef; this.contentObserver = contentObserver; this.cdr = cdr; this.ngZone = ngZone; this.destroy$ = new Subject(); this.notWrapper = true; this.viewInit = false; this.maxNumberArray = []; this.countArray = []; this.countSingleArray = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]; this.colorArray = [ 'pink', 'red', 'yellow', 'orange', 'cyan', 'green', 'blue', 'purple', 'geekblue', 'magenta', 'volcano', 'gold', 'lime' ]; this.presetColor = null; this.nzShowZero = false; this.nzShowDot = true; this.nzDot = false; renderer.addClass(elementRef.nativeElement, 'ant-badge'); } /** * @return {?} */ checkContent() { this.notWrapper = isEmpty(this.contentElement.nativeElement); if (this.notWrapper) { this.renderer.addClass(this.elementRef.nativeElement, 'ant-badge-not-a-wrapper'); } else { this.renderer.removeClass(this.elementRef.nativeElement, 'ant-badge-not-a-wrapper'); } } /** * @return {?} */ get showSup() { return (this.nzShowDot && this.nzDot) || this.count > 0 || (this.count === 0 && this.nzShowZero); } /** * @return {?} */ generateMaxNumberArray() { this.maxNumberArray = this.nzOverflowCount.toString().split(''); } /** * @return {?} */ ngOnInit() { this.generateMaxNumberArray(); } /** * @return {?} */ ngAfterViewInit() { this.ngZone.onStable.pipe(take(1)).subscribe((/** * @return {?} */ () => { this.viewInit = true; this.cdr.markForCheck(); })); this.contentObserver .observe(this.contentElement) .pipe(startWith(true), takeUntil(this.destroy$)) .subscribe((/** * @return {?} */ () => { this.checkContent(); })); } /** * @param {?} changes * @return {?} */ ngOnChanges(changes) { const { nzOverflowCount, nzCount, nzColor } = changes; if (nzCount && !(nzCount.currentValue instanceof TemplateRef)) { this.count = Math.max(0, nzCount.currentValue); this.countArray = this.count .toString() .split('') .map((/** * @param {?} item * @return {?} */ item => +item)); } if (nzOverflowCount) { this.generateMaxNumberArray(); } if (nzColor) { this.presetColor = this.colorArray.indexOf(this.nzColor) !== -1 ? this.nzColor : null; } } /** * @return {?} */ ngOnDestroy() { this.destroy$.next(); this.destroy$.complete(); } } NzBadgeComponent.decorators = [ { type: Component, args: [{ selector: 'nz-badge', exportAs: 'nzBadge', preserveWhitespaces: false, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, animations: [zoomBadgeMotion], template: "<span #contentElement><ng-content></ng-content></span>\n<span class=\"ant-badge-status-dot ant-badge-status-{{nzStatus || presetColor}}\"\n [style.background]=\"!presetColor && nzColor\"\n *ngIf=\"nzStatus || nzColor\"\n [ngStyle]=\"nzStyle\"></span>\n<span class=\"ant-badge-status-text\" *ngIf=\"nzStatus || nzColor\">{{ nzText }}</span>\n<ng-container *nzStringTemplateOutlet=\"nzCount\">\n <sup class=\"ant-scroll-number\"\n *ngIf=\"showSup && viewInit\"\n [@.disabled]=\"notWrapper\"\n [@zoomBadgeMotion]\n [ngStyle]=\"nzStyle\"\n [attr.title]=\"nzTitle || nzCount\"\n [style.right.px]=\"nzOffset && nzOffset[0] ? -nzOffset[0] : null\"\n [style.marginTop.px]=\"nzOffset && nzOffset[1] ? nzOffset[1] : null\"\n [class.ant-badge-count]=\"!nzDot\"\n [class.ant-badge-dot]=\"nzDot\"\n [class.ant-badge-multiple-words]=\"countArray.length>=2\">\n <ng-container *ngFor=\"let n of maxNumberArray;let i = index;\">\n <span class=\"ant-scroll-number-only\"\n *ngIf=\"count <= nzOverflowCount\"\n [style.transform]=\"'translateY(' + (-countArray[i] * 100) + '%)'\">\n <ng-container *ngIf=\"!nzDot && countArray[i] !== undefined\">\n <p *ngFor=\"let p of countSingleArray\" [class.current]=\"p === countArray[i]\">{{ p }}</p>\n </ng-container>\n </span>\n </ng-container>\n <ng-container *ngIf=\"count > nzOverflowCount\">{{ nzOverflowCount }}+</ng-container>\n </sup>\n</ng-container>", host: { '[class.ant-badge-status]': 'nzStatus' } }] } ]; /** @nocollapse */ NzBadgeComponent.ctorParameters = () => [ { type: NzConfigService }, { type: Renderer2 }, { type: ElementRef }, { type: ContentObserver }, { type: ChangeDetectorRef }, { type: NgZone } ]; NzBadgeComponent.propDecorators = { contentElement: [{ type: ViewChild, args: ['contentElement', { static: false },] }], nzShowZero: [{ type: Input }], nzShowDot: [{ type: Input }], nzDot: [{ type: Input }], nzOverflowCount: [{ type: Input }], nzText: [{ type: Input }], nzColor: [{ type: Input }], nzTitle: [{ type: Input }], nzStyle: [{ type: Input }], nzStatus: [{ type: Input }], nzCount: [{ type: Input }], nzOffset: [{ type: Input }] }; __decorate([ InputBoolean(), __metadata("design:type", Boolean) ], NzBadgeComponent.prototype, "nzShowZero", void 0); __decorate([ InputBoolean(), __metadata("design:type", Object) ], NzBadgeComponent.prototype, "nzShowDot", void 0); __decorate([ InputBoolean(), __metadata("design:type", Object) ], NzBadgeComponent.prototype, "nzDot", void 0); __decorate([ WithConfig(99), __metadata("design:type", Number) ], NzBadgeComponent.prototype, "nzOverflowCount", void 0); __decorate([ WithConfig(), __metadata("design:type", String) ], NzBadgeComponent.prototype, "nzColor", void 0); if (false) { /** * @type {?} * @private */ NzBadgeComponent.prototype.destroy$; /** @type {?} */ NzBadgeComponent.prototype.notWrapper; /** @type {?} */ NzBadgeComponent.prototype.viewInit; /** @type {?} */ NzBadgeComponent.prototype.maxNumberArray; /** @type {?} */ NzBadgeComponent.prototype.countArray; /** @type {?} */ NzBadgeComponent.prototype.countSingleArray; /** @type {?} */ NzBadgeComponent.prototype.colorArray; /** @type {?} */ NzBadgeComponent.prototype.presetColor; /** @type {?} */ NzBadgeComponent.prototype.count; /** @type {?} */ NzBadgeComponent.prototype.contentElement; /** @type {?} */ NzBadgeComponent.prototype.nzShowZero; /** @type {?} */ NzBadgeComponent.prototype.nzShowDot; /** @type {?} */ NzBadgeComponent.prototype.nzDot; /** @type {?} */ NzBadgeComponent.prototype.nzOverflowCount; /** @type {?} */ NzBadgeComponent.prototype.nzText; /** @type {?} */ NzBadgeComponent.prototype.nzColor; /** @type {?} */ NzBadgeComponent.prototype.nzTitle; /** @type {?} */ NzBadgeComponent.prototype.nzStyle; /** @type {?} */ NzBadgeComponent.prototype.nzStatus; /** @type {?} */ NzBadgeComponent.prototype.nzCount; /** @type {?} */ NzBadgeComponent.prototype.nzOffset; /** @type {?} */ NzBadgeComponent.prototype.nzConfigService; /** * @type {?} * @private */ NzBadgeComponent.prototype.renderer; /** * @type {?} * @private */ NzBadgeComponent.prototype.elementRef; /** * @type {?} * @private */ NzBadgeComponent.prototype.contentObserver; /** * @type {?} * @private */ NzBadgeComponent.prototype.cdr; /** * @type {?} * @private */ NzBadgeComponent.prototype.ngZone; } /** * @fileoverview added by tsickle * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc */ class NzBadgeModule { } NzBadgeModule.decorators = [ { type: NgModule, args: [{ declarations: [NzBadgeComponent], exports: [NzBadgeComponent], imports: [CommonModule, ObserversModule, NzAddOnModule] },] } ]; /** * @fileoverview added by tsickle * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc */ /** * @fileoverview added by tsickle * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc */ export { NzBadgeComponent, NzBadgeModule }; //# sourceMappingURL=ng-zorro-antd-badge.js.map