import * as i0 from '@angular/core';
import { booleanAttribute, Input, Directive, ChangeDetectionStrategy, Component, 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: "19.2.2", ngImport: i0, type: NzSkeletonElementDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "19.2.2", 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: "19.2.2", 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: "19.2.2", ngImport: i0, type: NzSkeletonElementButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.2", type: NzSkeletonElementButtonComponent, isStandalone: true, selector: "nz-skeleton-element[nzType=\"button\"]", inputs: { nzShape: "nzShape", nzSize: "nzSize" }, ngImport: i0, template: `
`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: NzSkeletonElementButtonComponent, decorators: [{
type: Component,
args: [{
changeDetection: ChangeDetectionStrategy.OnPush,
selector: 'nz-skeleton-element[nzType="button"]',
template: `
`
}]
}], 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: "19.2.2", ngImport: i0, type: NzSkeletonElementAvatarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.2", type: NzSkeletonElementAvatarComponent, isStandalone: true, selector: "nz-skeleton-element[nzType=\"avatar\"]", inputs: { nzShape: "nzShape", nzSize: "nzSize" }, usesOnChanges: true, ngImport: i0, template: `
`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: NzSkeletonElementAvatarComponent, decorators: [{
type: Component,
args: [{
changeDetection: ChangeDetectionStrategy.OnPush,
selector: 'nz-skeleton-element[nzType="avatar"]',
template: `
`
}]
}], propDecorators: { nzShape: [{
type: Input
}], nzSize: [{
type: Input
}] } });
class NzSkeletonElementInputComponent {
nzSize = 'default';
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: NzSkeletonElementInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.2", type: NzSkeletonElementInputComponent, isStandalone: true, selector: "nz-skeleton-element[nzType=\"input\"]", inputs: { nzSize: "nzSize" }, ngImport: i0, template: `
`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: NzSkeletonElementInputComponent, decorators: [{
type: Component,
args: [{
changeDetection: ChangeDetectionStrategy.OnPush,
selector: 'nz-skeleton-element[nzType="input"]',
template: `
`
}]
}], propDecorators: { nzSize: [{
type: Input
}] } });
class NzSkeletonElementImageComponent {
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: NzSkeletonElementImageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.2", type: NzSkeletonElementImageComponent, isStandalone: true, selector: "nz-skeleton-element[nzType=\"image\"]", ngImport: i0, template: `
`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: NzSkeletonElementImageComponent, decorators: [{
type: Component,
args: [{
changeDetection: ChangeDetectionStrategy.OnPush,
selector: 'nz-skeleton-element[nzType="image"]',
template: `
`
}]
}] });
/**
* 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;
nzActive = false;
nzLoading = true;
nzRound = false;
nzTitle = true;
nzAvatar = false;
nzParagraph = true;
title;
avatar;
paragraph;
rowsList = [];
widthList = [];
constructor(cdr) {
this.cdr = cdr;
}
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: "19.2.2", ngImport: i0, type: NzSkeletonComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.2", type: NzSkeletonComponent, isStandalone: true, selector: "nz-skeleton", inputs: { nzActive: "nzActive", nzLoading: "nzLoading", nzRound: "nzRound", 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) {
}
@if (!!nzTitle) {
}
@if (!!nzParagraph) {
@for (row of rowsList; track row; let i = $index) {
}
}
@if (!!nzTitle) {
}
@if (!!nzParagraph) {
@for (row of rowsList; track row; let i = $index) {
}
}