UNPKG

ng-zorro-antd

Version:

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

432 lines (424 loc) 14.8 kB
import { __assign, __spread } from 'tslib'; import { Component, ChangeDetectionStrategy, ViewEncapsulation, ChangeDetectorRef, Renderer2, ElementRef, Input, Directive, NgModule } from '@angular/core'; import { toCssPixel } from 'ng-zorro-antd/core/util'; import { CommonModule } from '@angular/common'; /** * @fileoverview added by tsickle * Generated from: skeleton.component.ts * @suppress {checkTypes,constantProperty,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 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(__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: Component, args: [{ changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, selector: 'nz-skeleton', exportAs: 'nzSkeleton', host: { '[class.ant-skeleton-with-avatar]': '!!nzAvatar', '[class.ant-skeleton-active]': 'nzActive' }, template: "\n <ng-container *ngIf=\"nzLoading\">\n <div class=\"ant-skeleton-header\" *ngIf=\"!!nzAvatar\">\n <nz-skeleton-element nzType=\"avatar\" [nzSize]=\"avatar.size\" [nzShape]=\"avatar.shape\"></nz-skeleton-element>\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])\"></li>\n </ul>\n </div>\n </ng-container>\n <ng-container *ngIf=\"!nzLoading\">\n <ng-content></ng-content>\n </ng-container>\n " }] } ]; /** @nocollapse */ NzSkeletonComponent.ctorParameters = function () { return [ { type: ChangeDetectorRef }, { type: Renderer2 }, { type: ElementRef } ]; }; NzSkeletonComponent.propDecorators = { nzActive: [{ type: Input }], nzLoading: [{ type: Input }], nzTitle: [{ type: Input }], nzAvatar: [{ type: Input }], nzParagraph: [{ type: Input }] }; return NzSkeletonComponent; }()); if (false) { /** @type {?} */ NzSkeletonComponent.prototype.nzActive; /** @type {?} */ NzSkeletonComponent.prototype.nzLoading; /** @type {?} */ NzSkeletonComponent.prototype.nzTitle; /** @type {?} */ NzSkeletonComponent.prototype.nzAvatar; /** @type {?} */ NzSkeletonComponent.prototype.nzParagraph; /** @type {?} */ NzSkeletonComponent.prototype.title; /** @type {?} */ NzSkeletonComponent.prototype.avatar; /** @type {?} */ NzSkeletonComponent.prototype.paragraph; /** @type {?} */ NzSkeletonComponent.prototype.rowsList; /** @type {?} */ NzSkeletonComponent.prototype.widthList; /** * @type {?} * @private */ NzSkeletonComponent.prototype.cdr; } /** * @fileoverview added by tsickle * Generated from: skeleton-element.component.ts * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc */ var NzSkeletonElementDirective = /** @class */ (function () { function NzSkeletonElementDirective() { this.nzActive = false; } NzSkeletonElementDirective.decorators = [ { type: Directive, args: [{ selector: 'nz-skeleton-element', host: { '[class.ant-skeleton]': 'true', '[class.ant-skeleton-element]': 'true', '[class.ant-skeleton-active]': 'nzActive' } },] } ]; NzSkeletonElementDirective.propDecorators = { nzActive: [{ type: Input }], nzType: [{ type: Input }] }; return NzSkeletonElementDirective; }()); if (false) { /** @type {?} */ NzSkeletonElementDirective.prototype.nzActive; /** @type {?} */ NzSkeletonElementDirective.prototype.nzType; } var NzSkeletonElementButtonComponent = /** @class */ (function () { function NzSkeletonElementButtonComponent() { } NzSkeletonElementButtonComponent.decorators = [ { type: Component, args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'nz-skeleton-element[nzType="button"]', template: "\n <span\n [class.ant-skeleton-button]=\"true\"\n [class.ant-skeleton-button-round]=\"nzShape === 'round'\"\n [class.ant-skeleton-button-circle]=\"nzShape === 'circle'\"\n [class.ant-skeleton-button-lg]=\"nzSize === 'large'\"\n [class.ant-skeleton-button-sm]=\"nzSize === 'small'\"\n >\n </span>\n " }] } ]; NzSkeletonElementButtonComponent.propDecorators = { nzShape: [{ type: Input }], nzSize: [{ type: Input }] }; return NzSkeletonElementButtonComponent; }()); if (false) { /** @type {?} */ NzSkeletonElementButtonComponent.prototype.nzShape; /** @type {?} */ NzSkeletonElementButtonComponent.prototype.nzSize; } var NzSkeletonElementAvatarComponent = /** @class */ (function () { function NzSkeletonElementAvatarComponent() { this.styleMap = {}; } /** * @param {?} changes * @return {?} */ NzSkeletonElementAvatarComponent.prototype.ngOnChanges = /** * @param {?} changes * @return {?} */ function (changes) { if (changes.nzSize && typeof this.nzSize === 'number') { /** @type {?} */ var sideLength = this.nzSize + "px"; this.styleMap = { width: sideLength, height: sideLength, 'line-height': sideLength }; } else { this.styleMap = {}; } }; NzSkeletonElementAvatarComponent.decorators = [ { type: Component, args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'nz-skeleton-element[nzType="avatar"]', template: "\n <span\n [class.ant-skeleton-avatar]=\"true\"\n [class.ant-skeleton-avatar-square]=\"nzShape === 'square'\"\n [class.ant-skeleton-avatar-circle]=\"nzShape === 'circle'\"\n [class.ant-skeleton-avatar-lg]=\"nzSize === 'large'\"\n [class.ant-skeleton-avatar-sm]=\"nzSize === 'small'\"\n [ngStyle]=\"styleMap\"\n >\n </span>\n " }] } ]; NzSkeletonElementAvatarComponent.propDecorators = { nzShape: [{ type: Input }], nzSize: [{ type: Input }] }; return NzSkeletonElementAvatarComponent; }()); if (false) { /** @type {?} */ NzSkeletonElementAvatarComponent.prototype.styleMap; /** @type {?} */ NzSkeletonElementAvatarComponent.prototype.nzShape; /** @type {?} */ NzSkeletonElementAvatarComponent.prototype.nzSize; } var NzSkeletonElementInputComponent = /** @class */ (function () { function NzSkeletonElementInputComponent() { } NzSkeletonElementInputComponent.decorators = [ { type: Component, args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'nz-skeleton-element[nzType="input"]', template: "\n <span\n [class.ant-skeleton-input]=\"true\"\n [class.ant-skeleton-input-lg]=\"nzSize === 'large'\"\n [class.ant-skeleton-input-sm]=\"nzSize === 'small'\"\n >\n </span>\n " }] } ]; NzSkeletonElementInputComponent.propDecorators = { nzSize: [{ type: Input }] }; return NzSkeletonElementInputComponent; }()); if (false) { /** @type {?} */ NzSkeletonElementInputComponent.prototype.nzSize; } /** * @fileoverview added by tsickle * Generated from: skeleton.module.ts * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc */ var NzSkeletonModule = /** @class */ (function () { function NzSkeletonModule() { } NzSkeletonModule.decorators = [ { type: NgModule, args: [{ declarations: [ NzSkeletonComponent, NzSkeletonElementDirective, NzSkeletonElementButtonComponent, NzSkeletonElementAvatarComponent, NzSkeletonElementInputComponent ], imports: [CommonModule], exports: [ NzSkeletonComponent, NzSkeletonElementDirective, NzSkeletonElementButtonComponent, NzSkeletonElementAvatarComponent, NzSkeletonElementInputComponent ] },] } ]; return NzSkeletonModule; }()); /** * @fileoverview added by tsickle * Generated from: skeleton.type.ts * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc */ /** * @license * Copyright Alibaba.com 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://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE */ /** * @record */ function NzSkeletonAvatar() { } if (false) { /** @type {?|undefined} */ NzSkeletonAvatar.prototype.size; /** @type {?|undefined} */ NzSkeletonAvatar.prototype.shape; } /** * @record */ function NzSkeletonTitle() { } if (false) { /** @type {?|undefined} */ NzSkeletonTitle.prototype.width; } /** * @record */ function NzSkeletonParagraph() { } if (false) { /** @type {?|undefined} */ NzSkeletonParagraph.prototype.rows; /** @type {?|undefined} */ NzSkeletonParagraph.prototype.width; } /** * @fileoverview added by tsickle * Generated from: public-api.ts * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc */ /** * @fileoverview added by tsickle * Generated from: ng-zorro-antd-skeleton.ts * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc */ export { NzSkeletonComponent, NzSkeletonElementAvatarComponent, NzSkeletonElementButtonComponent, NzSkeletonElementDirective, NzSkeletonElementInputComponent, NzSkeletonModule }; //# sourceMappingURL=ng-zorro-antd-skeleton.js.map