ng-zorro-antd
Version:
An enterprise-class UI components based on Ant Design and Angular
298 lines (287 loc) • 11.4 kB
JavaScript
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('ng-zorro-antd/core'), require('@angular/common'), require('@angular/core')) :
typeof define === 'function' && define.amd ? define('ng-zorro-antd/skeleton', ['exports', 'ng-zorro-antd/core', '@angular/common', '@angular/core'], factory) :
(factory((global['ng-zorro-antd'] = global['ng-zorro-antd'] || {}, global['ng-zorro-antd'].skeleton = {}),global['ng-zorro-antd'].core,global.ng.common,global.ng.core));
}(this, (function (exports,core,common,core$1) { '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.
***************************************************************************** */
var __assign = function () {
__assign = Object.assign || function __assign(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s)
if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
function __read(o, n) {
var m = typeof Symbol === "function" && o[Symbol.iterator];
if (!m)
return o;
var i = m.call(o), r, ar = [], e;
try {
while ((n === void 0 || n-- > 0) && !(r = i.next()).done)
ar.push(r.value);
}
catch (error) {
e = { error: error };
}
finally {
try {
if (r && !r.done && (m = i["return"]))
m.call(i);
}
finally {
if (e)
throw e.error;
}
}
return ar;
}
function __spread() {
for (var ar = [], i = 0; i < arguments.length; i++)
ar = ar.concat(__read(arguments[i]));
return ar;
}
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var NzSkeletonComponent = /** @class */ (function () {
function NzSkeletonComponent(cdr, renderer, elementRef) {
this.cdr = cdr;
this.nzActive = false;
this.nzLoading = true;
this.nzTitle = true;
this.nzAvatar = false;
this.nzParagraph = true;
this.rowsList = [];
this.widthList = [];
renderer.addClass(elementRef.nativeElement, 'ant-skeleton');
}
/**
* @param {?=} value
* @return {?}
*/
NzSkeletonComponent.prototype.toCSSUnit = /**
* @param {?=} value
* @return {?}
*/
function (value) {
if (value === void 0) {
value = '';
}
return core.toCssPixel(value);
};
/**
* @private
* @return {?}
*/
NzSkeletonComponent.prototype.getTitleProps = /**
* @private
* @return {?}
*/
function () {
/** @type {?} */
var hasAvatar = !!this.nzAvatar;
/** @type {?} */
var hasParagraph = !!this.nzParagraph;
/** @type {?} */
var width = '';
if (!hasAvatar && hasParagraph) {
width = '38%';
}
else if (hasAvatar && hasParagraph) {
width = '50%';
}
return __assign({ width: width }, this.getProps(this.nzTitle));
};
/**
* @private
* @return {?}
*/
NzSkeletonComponent.prototype.getAvatarProps = /**
* @private
* @return {?}
*/
function () {
/** @type {?} */
var shape = !!this.nzTitle && !this.nzParagraph ? 'square' : 'circle';
/** @type {?} */
var size = 'large';
return __assign({ shape: shape, size: size }, this.getProps(this.nzAvatar));
};
/**
* @private
* @return {?}
*/
NzSkeletonComponent.prototype.getParagraphProps = /**
* @private
* @return {?}
*/
function () {
/** @type {?} */
var hasAvatar = !!this.nzAvatar;
/** @type {?} */
var hasTitle = !!this.nzTitle;
/** @type {?} */
var basicProps = {};
// Width
if (!hasAvatar || !hasTitle) {
basicProps.width = '61%';
}
// Rows
if (!hasAvatar && hasTitle) {
basicProps.rows = 3;
}
else {
basicProps.rows = 2;
}
return __assign({}, basicProps, this.getProps(this.nzParagraph));
};
/**
* @private
* @template T
* @param {?} prop
* @return {?}
*/
NzSkeletonComponent.prototype.getProps = /**
* @private
* @template T
* @param {?} prop
* @return {?}
*/
function (prop) {
return prop && typeof prop === 'object' ? prop : {};
};
/**
* @private
* @return {?}
*/
NzSkeletonComponent.prototype.getWidthList = /**
* @private
* @return {?}
*/
function () {
var _a = this.paragraph, width = _a.width, rows = _a.rows;
/** @type {?} */
var widthList = [];
if (width && Array.isArray(width)) {
widthList = width;
}
else if (width && !Array.isArray(width)) {
widthList = [];
widthList[( /** @type {?} */(rows)) - 1] = width;
}
return widthList;
};
/**
* @private
* @return {?}
*/
NzSkeletonComponent.prototype.updateProps = /**
* @private
* @return {?}
*/
function () {
this.title = this.getTitleProps();
this.avatar = this.getAvatarProps();
this.paragraph = this.getParagraphProps();
this.rowsList = __spread(Array(this.paragraph.rows));
this.widthList = this.getWidthList();
this.cdr.markForCheck();
};
/**
* @return {?}
*/
NzSkeletonComponent.prototype.ngOnInit = /**
* @return {?}
*/
function () {
this.updateProps();
};
/**
* @param {?} changes
* @return {?}
*/
NzSkeletonComponent.prototype.ngOnChanges = /**
* @param {?} changes
* @return {?}
*/
function (changes) {
if (changes.nzTitle || changes.nzAvatar || changes.nzParagraph) {
this.updateProps();
}
};
NzSkeletonComponent.decorators = [
{ type: core$1.Component, args: [{
changeDetection: core$1.ChangeDetectionStrategy.OnPush,
encapsulation: core$1.ViewEncapsulation.None,
selector: 'nz-skeleton',
exportAs: 'nzSkeleton',
template: "<ng-container *ngIf=\"nzLoading\">\n <div class=\"ant-skeleton-header\">\n <span\n *ngIf=\"!!nzAvatar\"\n class=\"ant-skeleton-avatar\"\n [class.ant-skeleton-avatar-lg]=\"avatar.size === 'large'\"\n [class.ant-skeleton-avatar-sm]=\"avatar.size === 'small'\"\n [class.ant-skeleton-avatar-circle]=\"avatar.shape === 'circle'\"\n [class.ant-skeleton-avatar-square]=\"avatar.shape === 'square'\">\n </span>\n </div>\n <div class=\"ant-skeleton-content\">\n <h3 *ngIf=\"!!nzTitle\" class=\"ant-skeleton-title\" [style.width]=\"toCSSUnit(title.width)\"></h3>\n <ul *ngIf=\"!!nzParagraph\" class=\"ant-skeleton-paragraph\">\n <li *ngFor=\"let row of rowsList; let i=index\" [style.width]=\"toCSSUnit(widthList[i])\">\n </li>\n </ul>\n </div>\n</ng-container>\n<ng-container *ngIf=\"!nzLoading\">\n <ng-content></ng-content>\n</ng-container>",
host: {
'[class.ant-skeleton-with-avatar]': '!!nzAvatar',
'[class.ant-skeleton-active]': 'nzActive'
}
}] }
];
/** @nocollapse */
NzSkeletonComponent.ctorParameters = function () {
return [
{ type: core$1.ChangeDetectorRef },
{ type: core$1.Renderer2 },
{ type: core$1.ElementRef }
];
};
NzSkeletonComponent.propDecorators = {
nzActive: [{ type: core$1.Input }],
nzLoading: [{ type: core$1.Input }],
nzTitle: [{ type: core$1.Input }],
nzAvatar: [{ type: core$1.Input }],
nzParagraph: [{ type: core$1.Input }]
};
return NzSkeletonComponent;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var NzSkeletonModule = /** @class */ (function () {
function NzSkeletonModule() {
}
NzSkeletonModule.decorators = [
{ type: core$1.NgModule, args: [{
declarations: [NzSkeletonComponent],
imports: [common.CommonModule],
exports: [NzSkeletonComponent]
},] }
];
return NzSkeletonModule;
}());
/**
* @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
*/
exports.NzSkeletonComponent = NzSkeletonComponent;
exports.NzSkeletonModule = NzSkeletonModule;
Object.defineProperty(exports, '__esModule', { value: true });
})));
//# sourceMappingURL=ng-zorro-antd-skeleton.umd.js.map