ng-zorro-antd
Version:
An enterprise-class UI components based on Ant Design and Angular
237 lines (226 loc) • 11 kB
JavaScript
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/cdk/observers'), require('@angular/core'), require('ng-zorro-antd/core'), require('rxjs'), require('rxjs/operators'), require('@angular/common')) :
typeof define === 'function' && define.amd ? define('ng-zorro-antd/badge', ['exports', '@angular/cdk/observers', '@angular/core', 'ng-zorro-antd/core', 'rxjs', 'rxjs/operators', '@angular/common'], factory) :
(global = global || self, factory((global['ng-zorro-antd'] = global['ng-zorro-antd'] || {}, global['ng-zorro-antd'].badge = {}), global.ng.cdk.observers, global.ng.core, global['ng-zorro-antd'].core, global.rxjs, global.rxjs.operators, global.ng.common));
}(this, function (exports, observers, core, core$1, rxjs, operators, common) { 'use strict';
/*! *****************************************************************************
Copyright (c) Microsoft Corporation. All rights reserved.
Licensed under the Apache License, Version 2.0 (the "License"); you may not use
this file except in compliance with the License. You may obtain a copy of the
License at http://www.apache.org/licenses/LICENSE-2.0
THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED
WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE,
MERCHANTABLITY OR NON-INFRINGEMENT.
See the Apache Version 2.0 License for specific language governing permissions
and limitations under the License.
***************************************************************************** */
function __decorate(decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
}
function __metadata(metadataKey, metadataValue) {
if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(metadataKey, metadataValue);
}
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var NzBadgeComponent = /** @class */ (function () {
function NzBadgeComponent(renderer, elementRef, contentObserver) {
this.renderer = renderer;
this.elementRef = elementRef;
this.contentObserver = contentObserver;
this.destroy$ = new rxjs.Subject();
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;
this.nzOverflowCount = 99;
renderer.addClass(elementRef.nativeElement, 'ant-badge');
}
/**
* @return {?}
*/
NzBadgeComponent.prototype.checkContent = /**
* @return {?}
*/
function () {
if (core$1.isEmpty(this.contentElement.nativeElement)) {
this.renderer.addClass(this.elementRef.nativeElement, 'ant-badge-not-a-wrapper');
}
else {
this.renderer.removeClass(this.elementRef.nativeElement, 'ant-badge-not-a-wrapper');
}
};
Object.defineProperty(NzBadgeComponent.prototype, "showSup", {
get: /**
* @return {?}
*/
function () {
return (this.nzShowDot && this.nzDot) || this.count > 0 || (this.count === 0 && this.nzShowZero);
},
enumerable: true,
configurable: true
});
/**
* @return {?}
*/
NzBadgeComponent.prototype.generateMaxNumberArray = /**
* @return {?}
*/
function () {
this.maxNumberArray = this.nzOverflowCount.toString().split('');
};
/**
* @return {?}
*/
NzBadgeComponent.prototype.ngOnInit = /**
* @return {?}
*/
function () {
this.generateMaxNumberArray();
};
/**
* @return {?}
*/
NzBadgeComponent.prototype.ngAfterViewInit = /**
* @return {?}
*/
function () {
var _this = this;
this.contentObserver
.observe(this.contentElement)
.pipe(operators.startWith(true), operators.takeUntil(this.destroy$))
.subscribe((/**
* @return {?}
*/
function () {
_this.checkContent();
}));
};
/**
* @param {?} changes
* @return {?}
*/
NzBadgeComponent.prototype.ngOnChanges = /**
* @param {?} changes
* @return {?}
*/
function (changes) {
var nzOverflowCount = changes.nzOverflowCount, nzCount = changes.nzCount, nzColor = changes.nzColor;
if (nzCount && !(nzCount.currentValue instanceof core.TemplateRef)) {
this.count = Math.max(0, nzCount.currentValue);
this.countArray = this.count
.toString()
.split('')
.map((/**
* @param {?} item
* @return {?}
*/
function (item) { return +item; }));
}
if (nzOverflowCount) {
this.generateMaxNumberArray();
}
if (nzColor) {
this.presetColor = this.colorArray.indexOf(this.nzColor) !== -1 ? this.nzColor : null;
}
};
/**
* @return {?}
*/
NzBadgeComponent.prototype.ngOnDestroy = /**
* @return {?}
*/
function () {
this.destroy$.next();
this.destroy$.complete();
};
NzBadgeComponent.decorators = [
{ type: core.Component, args: [{
selector: 'nz-badge',
exportAs: 'nzBadge',
preserveWhitespaces: false,
encapsulation: core.ViewEncapsulation.None,
changeDetection: core.ChangeDetectionStrategy.OnPush,
animations: [core$1.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\"\n @zoomBadgeMotion\n [ngStyle]=\"nzStyle\"\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 = function () { return [
{ type: core.Renderer2 },
{ type: core.ElementRef },
{ type: observers.ContentObserver }
]; };
NzBadgeComponent.propDecorators = {
contentElement: [{ type: core.ViewChild, args: ['contentElement', { static: false },] }],
nzShowZero: [{ type: core.Input }],
nzShowDot: [{ type: core.Input }],
nzDot: [{ type: core.Input }],
nzOverflowCount: [{ type: core.Input }],
nzText: [{ type: core.Input }],
nzColor: [{ type: core.Input }],
nzStyle: [{ type: core.Input }],
nzStatus: [{ type: core.Input }],
nzCount: [{ type: core.Input }]
};
__decorate([
core$1.InputBoolean(),
__metadata("design:type", Object)
], NzBadgeComponent.prototype, "nzShowZero", void 0);
__decorate([
core$1.InputBoolean(),
__metadata("design:type", Object)
], NzBadgeComponent.prototype, "nzShowDot", void 0);
__decorate([
core$1.InputBoolean(),
__metadata("design:type", Object)
], NzBadgeComponent.prototype, "nzDot", void 0);
return NzBadgeComponent;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var NzBadgeModule = /** @class */ (function () {
function NzBadgeModule() {
}
NzBadgeModule.decorators = [
{ type: core.NgModule, args: [{
declarations: [NzBadgeComponent],
exports: [NzBadgeComponent],
imports: [common.CommonModule, observers.ObserversModule, core$1.NzAddOnModule]
},] }
];
return NzBadgeModule;
}());
exports.NzBadgeComponent = NzBadgeComponent;
exports.NzBadgeModule = NzBadgeModule;
Object.defineProperty(exports, '__esModule', { value: true });
}));
//# sourceMappingURL=ng-zorro-antd-badge.umd.js.map