ng-zorro-antd
Version:
An enterprise-class UI components based on Ant Design and Angular
297 lines (291 loc) • 10.3 kB
JavaScript
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