405 lines
20 KiB
JavaScript
405 lines
20 KiB
JavaScript
import * as i0 from '@angular/core';
|
|
import { booleanAttribute, Input, Directive, ChangeDetectionStrategy, Component, inject, ChangeDetectorRef, ViewEncapsulation, NgModule } from '@angular/core';
|
|
import { toCssPixel } from 'ng-zorro-antd/core/util';
|
|
|
|
/**
|
|
* 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
|
|
*/
|
|
class NzSkeletonElementDirective {
|
|
nzActive = false;
|
|
nzType;
|
|
nzBlock = false;
|
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: NzSkeletonElementDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "20.3.0", type: NzSkeletonElementDirective, isStandalone: true, selector: "nz-skeleton-element", inputs: { nzActive: ["nzActive", "nzActive", booleanAttribute], nzType: "nzType", nzBlock: ["nzBlock", "nzBlock", booleanAttribute] }, host: { properties: { "class.ant-skeleton-active": "nzActive", "class.ant-skeleton-block": "nzBlock" }, classAttribute: "ant-skeleton ant-skeleton-element" }, ngImport: i0 });
|
|
}
|
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: NzSkeletonElementDirective, decorators: [{
|
|
type: Directive,
|
|
args: [{
|
|
selector: 'nz-skeleton-element',
|
|
host: {
|
|
class: 'ant-skeleton ant-skeleton-element',
|
|
'[class.ant-skeleton-active]': 'nzActive',
|
|
'[class.ant-skeleton-block]': 'nzBlock'
|
|
}
|
|
}]
|
|
}], propDecorators: { nzActive: [{
|
|
type: Input,
|
|
args: [{ transform: booleanAttribute }]
|
|
}], nzType: [{
|
|
type: Input
|
|
}], nzBlock: [{
|
|
type: Input,
|
|
args: [{ transform: booleanAttribute }]
|
|
}] } });
|
|
class NzSkeletonElementButtonComponent {
|
|
nzShape = 'default';
|
|
nzSize = 'default';
|
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: NzSkeletonElementButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: NzSkeletonElementButtonComponent, isStandalone: true, selector: "nz-skeleton-element[nzType=\"button\"]", inputs: { nzShape: "nzShape", nzSize: "nzSize" }, ngImport: i0, template: `
|
|
<span
|
|
class="ant-skeleton-button"
|
|
[class.ant-skeleton-button-square]="nzShape === 'square'"
|
|
[class.ant-skeleton-button-round]="nzShape === 'round'"
|
|
[class.ant-skeleton-button-circle]="nzShape === 'circle'"
|
|
[class.ant-skeleton-button-lg]="nzSize === 'large'"
|
|
[class.ant-skeleton-button-sm]="nzSize === 'small'"
|
|
></span>
|
|
`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
}
|
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: NzSkeletonElementButtonComponent, decorators: [{
|
|
type: Component,
|
|
args: [{
|
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
selector: 'nz-skeleton-element[nzType="button"]',
|
|
template: `
|
|
<span
|
|
class="ant-skeleton-button"
|
|
[class.ant-skeleton-button-square]="nzShape === 'square'"
|
|
[class.ant-skeleton-button-round]="nzShape === 'round'"
|
|
[class.ant-skeleton-button-circle]="nzShape === 'circle'"
|
|
[class.ant-skeleton-button-lg]="nzSize === 'large'"
|
|
[class.ant-skeleton-button-sm]="nzSize === 'small'"
|
|
></span>
|
|
`
|
|
}]
|
|
}], propDecorators: { nzShape: [{
|
|
type: Input
|
|
}], nzSize: [{
|
|
type: Input
|
|
}] } });
|
|
class NzSkeletonElementAvatarComponent {
|
|
nzShape = 'circle';
|
|
nzSize = 'default';
|
|
styleMap = {};
|
|
ngOnChanges(changes) {
|
|
if (changes.nzSize && typeof this.nzSize === 'number') {
|
|
const sideLength = `${this.nzSize}px`;
|
|
this.styleMap = { width: sideLength, height: sideLength, 'line-height': sideLength };
|
|
}
|
|
else {
|
|
this.styleMap = {};
|
|
}
|
|
}
|
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: NzSkeletonElementAvatarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: NzSkeletonElementAvatarComponent, isStandalone: true, selector: "nz-skeleton-element[nzType=\"avatar\"]", inputs: { nzShape: "nzShape", nzSize: "nzSize" }, usesOnChanges: true, ngImport: i0, template: `
|
|
<span
|
|
class="ant-skeleton-avatar"
|
|
[class.ant-skeleton-avatar-square]="nzShape === 'square'"
|
|
[class.ant-skeleton-avatar-circle]="nzShape === 'circle'"
|
|
[class.ant-skeleton-avatar-lg]="nzSize === 'large'"
|
|
[class.ant-skeleton-avatar-sm]="nzSize === 'small'"
|
|
[style]="styleMap"
|
|
></span>
|
|
`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
}
|
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: NzSkeletonElementAvatarComponent, decorators: [{
|
|
type: Component,
|
|
args: [{
|
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
selector: 'nz-skeleton-element[nzType="avatar"]',
|
|
template: `
|
|
<span
|
|
class="ant-skeleton-avatar"
|
|
[class.ant-skeleton-avatar-square]="nzShape === 'square'"
|
|
[class.ant-skeleton-avatar-circle]="nzShape === 'circle'"
|
|
[class.ant-skeleton-avatar-lg]="nzSize === 'large'"
|
|
[class.ant-skeleton-avatar-sm]="nzSize === 'small'"
|
|
[style]="styleMap"
|
|
></span>
|
|
`
|
|
}]
|
|
}], propDecorators: { nzShape: [{
|
|
type: Input
|
|
}], nzSize: [{
|
|
type: Input
|
|
}] } });
|
|
class NzSkeletonElementInputComponent {
|
|
nzSize = 'default';
|
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: NzSkeletonElementInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: NzSkeletonElementInputComponent, isStandalone: true, selector: "nz-skeleton-element[nzType=\"input\"]", inputs: { nzSize: "nzSize" }, ngImport: i0, template: `
|
|
<span
|
|
class="ant-skeleton-input"
|
|
[class.ant-skeleton-input-lg]="nzSize === 'large'"
|
|
[class.ant-skeleton-input-sm]="nzSize === 'small'"
|
|
></span>
|
|
`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
}
|
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: NzSkeletonElementInputComponent, decorators: [{
|
|
type: Component,
|
|
args: [{
|
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
selector: 'nz-skeleton-element[nzType="input"]',
|
|
template: `
|
|
<span
|
|
class="ant-skeleton-input"
|
|
[class.ant-skeleton-input-lg]="nzSize === 'large'"
|
|
[class.ant-skeleton-input-sm]="nzSize === 'small'"
|
|
></span>
|
|
`
|
|
}]
|
|
}], propDecorators: { nzSize: [{
|
|
type: Input
|
|
}] } });
|
|
class NzSkeletonElementImageComponent {
|
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: NzSkeletonElementImageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: NzSkeletonElementImageComponent, isStandalone: true, selector: "nz-skeleton-element[nzType=\"image\"]", ngImport: i0, template: `
|
|
<span class="ant-skeleton-image">
|
|
<svg class="ant-skeleton-image-svg" viewBox="0 0 1098 1024" xmlns="http://www.w3.org/2000/svg">
|
|
<path
|
|
d="M365.714286 329.142857q0 45.714286-32.036571 77.677714t-77.677714 32.036571-77.677714-32.036571-32.036571-77.677714 32.036571-77.677714 77.677714-32.036571 77.677714 32.036571 32.036571 77.677714zM950.857143 548.571429l0 256-804.571429 0 0-109.714286 182.857143-182.857143 91.428571 91.428571 292.571429-292.571429zM1005.714286 146.285714l-914.285714 0q-7.460571 0-12.873143 5.412571t-5.412571 12.873143l0 694.857143q0 7.460571 5.412571 12.873143t12.873143 5.412571l914.285714 0q7.460571 0 12.873143-5.412571t5.412571-12.873143l0-694.857143q0-7.460571-5.412571-12.873143t-12.873143-5.412571zM1097.142857 164.571429l0 694.857143q0 37.741714-26.843429 64.585143t-64.585143 26.843429l-914.285714 0q-37.741714 0-64.585143-26.843429t-26.843429-64.585143l0-694.857143q0-37.741714 26.843429-64.585143t64.585143-26.843429l914.285714 0q37.741714 0 64.585143 26.843429t26.843429 64.585143z"
|
|
class="ant-skeleton-image-path"
|
|
/>
|
|
</svg>
|
|
</span>
|
|
`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
}
|
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: NzSkeletonElementImageComponent, decorators: [{
|
|
type: Component,
|
|
args: [{
|
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
selector: 'nz-skeleton-element[nzType="image"]',
|
|
template: `
|
|
<span class="ant-skeleton-image">
|
|
<svg class="ant-skeleton-image-svg" viewBox="0 0 1098 1024" xmlns="http://www.w3.org/2000/svg">
|
|
<path
|
|
d="M365.714286 329.142857q0 45.714286-32.036571 77.677714t-77.677714 32.036571-77.677714-32.036571-32.036571-77.677714 32.036571-77.677714 77.677714-32.036571 77.677714 32.036571 32.036571 77.677714zM950.857143 548.571429l0 256-804.571429 0 0-109.714286 182.857143-182.857143 91.428571 91.428571 292.571429-292.571429zM1005.714286 146.285714l-914.285714 0q-7.460571 0-12.873143 5.412571t-5.412571 12.873143l0 694.857143q0 7.460571 5.412571 12.873143t12.873143 5.412571l914.285714 0q7.460571 0 12.873143-5.412571t5.412571-12.873143l0-694.857143q0-7.460571-5.412571-12.873143t-12.873143-5.412571zM1097.142857 164.571429l0 694.857143q0 37.741714-26.843429 64.585143t-64.585143 26.843429l-914.285714 0q-37.741714 0-64.585143-26.843429t-26.843429-64.585143l0-694.857143q0-37.741714 26.843429-64.585143t64.585143-26.843429l914.285714 0q37.741714 0 64.585143 26.843429t26.843429 64.585143z"
|
|
class="ant-skeleton-image-path"
|
|
/>
|
|
</svg>
|
|
</span>
|
|
`
|
|
}]
|
|
}] });
|
|
|
|
/**
|
|
* 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
|
|
*/
|
|
class NzSkeletonComponent {
|
|
cdr = inject(ChangeDetectorRef);
|
|
nzActive = false;
|
|
nzLoading = true;
|
|
nzRound = false;
|
|
nzTitle = true;
|
|
nzAvatar = false;
|
|
nzParagraph = true;
|
|
title;
|
|
avatar;
|
|
paragraph;
|
|
rowsList = [];
|
|
widthList = [];
|
|
toCSSUnit(value = '') {
|
|
return toCssPixel(value);
|
|
}
|
|
getTitleProps() {
|
|
const hasAvatar = !!this.nzAvatar;
|
|
const hasParagraph = !!this.nzParagraph;
|
|
let width = '';
|
|
if (!hasAvatar && hasParagraph) {
|
|
width = '38%';
|
|
}
|
|
else if (hasAvatar && hasParagraph) {
|
|
width = '50%';
|
|
}
|
|
return { width, ...this.getProps(this.nzTitle) };
|
|
}
|
|
getAvatarProps() {
|
|
const shape = !!this.nzTitle && !this.nzParagraph ? 'square' : 'circle';
|
|
const size = 'large';
|
|
return { shape, size, ...this.getProps(this.nzAvatar) };
|
|
}
|
|
getParagraphProps() {
|
|
const hasAvatar = !!this.nzAvatar;
|
|
const hasTitle = !!this.nzTitle;
|
|
const basicProps = {};
|
|
// Width
|
|
if (!hasAvatar || !hasTitle) {
|
|
basicProps.width = '61%';
|
|
}
|
|
// Rows
|
|
if (!hasAvatar && hasTitle) {
|
|
basicProps.rows = 3;
|
|
}
|
|
else {
|
|
basicProps.rows = 2;
|
|
}
|
|
return { ...basicProps, ...this.getProps(this.nzParagraph) };
|
|
}
|
|
getProps(prop) {
|
|
return prop && typeof prop === 'object' ? prop : {};
|
|
}
|
|
getWidthList() {
|
|
const { width, rows } = this.paragraph;
|
|
let widthList = [];
|
|
if (width && Array.isArray(width)) {
|
|
widthList = width;
|
|
}
|
|
else if (width && !Array.isArray(width)) {
|
|
widthList = [];
|
|
widthList[rows - 1] = width;
|
|
}
|
|
return widthList;
|
|
}
|
|
updateProps() {
|
|
this.title = this.getTitleProps();
|
|
this.avatar = this.getAvatarProps();
|
|
this.paragraph = this.getParagraphProps();
|
|
this.rowsList = [...Array(this.paragraph.rows)];
|
|
this.widthList = this.getWidthList();
|
|
this.cdr.markForCheck();
|
|
}
|
|
ngOnInit() {
|
|
this.updateProps();
|
|
}
|
|
ngOnChanges(changes) {
|
|
if (changes.nzTitle || changes.nzAvatar || changes.nzParagraph) {
|
|
this.updateProps();
|
|
}
|
|
}
|
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: NzSkeletonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.0", type: NzSkeletonComponent, isStandalone: true, selector: "nz-skeleton", inputs: { nzActive: ["nzActive", "nzActive", booleanAttribute], nzLoading: ["nzLoading", "nzLoading", booleanAttribute], nzRound: ["nzRound", "nzRound", booleanAttribute], nzTitle: "nzTitle", nzAvatar: "nzAvatar", nzParagraph: "nzParagraph" }, host: { properties: { "class.ant-skeleton-with-avatar": "!!nzAvatar", "class.ant-skeleton-active": "nzActive", "class.ant-skeleton-round": "nzRound" }, classAttribute: "ant-skeleton" }, exportAs: ["nzSkeleton"], usesOnChanges: true, ngImport: i0, template: `
|
|
@if (nzLoading) {
|
|
@if (!!nzAvatar) {
|
|
<div class="ant-skeleton-header">
|
|
<nz-skeleton-element
|
|
nzType="avatar"
|
|
[nzSize]="avatar.size || 'default'"
|
|
[nzShape]="avatar.shape || 'circle'"
|
|
></nz-skeleton-element>
|
|
</div>
|
|
}
|
|
<div class="ant-skeleton-content">
|
|
@if (!!nzTitle) {
|
|
<h3 class="ant-skeleton-title" [style.width]="toCSSUnit(title.width)"></h3>
|
|
}
|
|
@if (!!nzParagraph) {
|
|
<ul class="ant-skeleton-paragraph">
|
|
@for (row of rowsList; track row; let i = $index) {
|
|
<li [style.width]="toCSSUnit(widthList[i])"></li>
|
|
}
|
|
</ul>
|
|
}
|
|
</div>
|
|
} @else {
|
|
<ng-content></ng-content>
|
|
}
|
|
`, isInline: true, dependencies: [{ kind: "directive", type: NzSkeletonElementDirective, selector: "nz-skeleton-element", inputs: ["nzActive", "nzType", "nzBlock"] }, { kind: "component", type: NzSkeletonElementAvatarComponent, selector: "nz-skeleton-element[nzType=\"avatar\"]", inputs: ["nzShape", "nzSize"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
}
|
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: NzSkeletonComponent, decorators: [{
|
|
type: Component,
|
|
args: [{
|
|
selector: 'nz-skeleton',
|
|
exportAs: 'nzSkeleton',
|
|
host: {
|
|
class: 'ant-skeleton',
|
|
'[class.ant-skeleton-with-avatar]': '!!nzAvatar',
|
|
'[class.ant-skeleton-active]': 'nzActive',
|
|
'[class.ant-skeleton-round]': 'nzRound'
|
|
},
|
|
template: `
|
|
@if (nzLoading) {
|
|
@if (!!nzAvatar) {
|
|
<div class="ant-skeleton-header">
|
|
<nz-skeleton-element
|
|
nzType="avatar"
|
|
[nzSize]="avatar.size || 'default'"
|
|
[nzShape]="avatar.shape || 'circle'"
|
|
></nz-skeleton-element>
|
|
</div>
|
|
}
|
|
<div class="ant-skeleton-content">
|
|
@if (!!nzTitle) {
|
|
<h3 class="ant-skeleton-title" [style.width]="toCSSUnit(title.width)"></h3>
|
|
}
|
|
@if (!!nzParagraph) {
|
|
<ul class="ant-skeleton-paragraph">
|
|
@for (row of rowsList; track row; let i = $index) {
|
|
<li [style.width]="toCSSUnit(widthList[i])"></li>
|
|
}
|
|
</ul>
|
|
}
|
|
</div>
|
|
} @else {
|
|
<ng-content></ng-content>
|
|
}
|
|
`,
|
|
imports: [NzSkeletonElementDirective, NzSkeletonElementAvatarComponent],
|
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
encapsulation: ViewEncapsulation.None
|
|
}]
|
|
}], propDecorators: { nzActive: [{
|
|
type: Input,
|
|
args: [{ transform: booleanAttribute }]
|
|
}], nzLoading: [{
|
|
type: Input,
|
|
args: [{ transform: booleanAttribute }]
|
|
}], nzRound: [{
|
|
type: Input,
|
|
args: [{ transform: booleanAttribute }]
|
|
}], nzTitle: [{
|
|
type: Input
|
|
}], nzAvatar: [{
|
|
type: Input
|
|
}], nzParagraph: [{
|
|
type: Input
|
|
}] } });
|
|
|
|
/**
|
|
* 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
|
|
*/
|
|
class NzSkeletonModule {
|
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: NzSkeletonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.0", ngImport: i0, type: NzSkeletonModule, imports: [NzSkeletonElementDirective,
|
|
NzSkeletonComponent,
|
|
NzSkeletonElementButtonComponent,
|
|
NzSkeletonElementAvatarComponent,
|
|
NzSkeletonElementImageComponent,
|
|
NzSkeletonElementInputComponent], exports: [NzSkeletonElementDirective,
|
|
NzSkeletonComponent,
|
|
NzSkeletonElementButtonComponent,
|
|
NzSkeletonElementAvatarComponent,
|
|
NzSkeletonElementImageComponent,
|
|
NzSkeletonElementInputComponent] });
|
|
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: NzSkeletonModule });
|
|
}
|
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: NzSkeletonModule, decorators: [{
|
|
type: NgModule,
|
|
args: [{
|
|
imports: [
|
|
NzSkeletonElementDirective,
|
|
NzSkeletonComponent,
|
|
NzSkeletonElementButtonComponent,
|
|
NzSkeletonElementAvatarComponent,
|
|
NzSkeletonElementImageComponent,
|
|
NzSkeletonElementInputComponent
|
|
],
|
|
exports: [
|
|
NzSkeletonElementDirective,
|
|
NzSkeletonComponent,
|
|
NzSkeletonElementButtonComponent,
|
|
NzSkeletonElementAvatarComponent,
|
|
NzSkeletonElementImageComponent,
|
|
NzSkeletonElementInputComponent
|
|
]
|
|
}]
|
|
}] });
|
|
|
|
/**
|
|
* 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
|
|
*/
|
|
|
|
/**
|
|
* 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
|
|
*/
|
|
|
|
/**
|
|
* Generated bundle index. Do not edit.
|
|
*/
|
|
|
|
export { NzSkeletonComponent, NzSkeletonElementAvatarComponent, NzSkeletonElementButtonComponent, NzSkeletonElementDirective, NzSkeletonElementImageComponent, NzSkeletonElementInputComponent, NzSkeletonModule };
|
|
//# sourceMappingURL=ng-zorro-antd-skeleton.mjs.map
|