ngx-tethys 19.0.13 → 19.1.0-next.0

package/fesm2022/ngx-tethys-skeleton.mjs

@@ -1,12 +1,11 @@
 import * as i0 from '@angular/core';
-import { Input, ViewEncapsulation, ChangeDetectionStrategy, Component, InjectionToken, inject, NgModule } from '@angular/core';
+import { input, ViewEncapsulation, ChangeDetectionStrategy, Component, InjectionToken, inject, computed, NgModule } from '@angular/core';
 import { NgStyle, CommonModule } from '@angular/common';
 import { PortalModule } from '@angular/cdk/portal';
 import { ThyGridModule } from 'ngx-tethys/grid';
 import { ThyListModule } from 'ngx-tethys/list';
 import { coerceBooleanProperty, isUndefinedOrNull, helpers } from 'ngx-tethys/util';
-import { __decorate, __metadata } from 'tslib';
-import { InputCssPixel } from 'ngx-tethys/core';
+import { coerceCssPixelValue } from '@angular/cdk/coercion';
 
 /**
  * 骨架屏组件
@@ -14,8 +13,27 @@ import { InputCssPixel } from 'ngx-tethys/core';
  * @order 10
  */
 class ThySkeleton {
+    constructor() {
+        /**
+         * 是否开启动画
+         * @default false
+         */
+        this.thyAnimated = input(undefined, { transform: coerceBooleanProperty });
+        /**
+         * 动画速度
+         */
+        this.thyAnimatedInterval = input();
+        /**
+         * 骨架主色调
+         */
+        this.thyPrimaryColor = input();
+        /**
+         * 骨架次色调
+         */
+        this.thySecondaryColor = input();
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ThySkeleton, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "19.2.8", type: ThySkeleton, isStandalone: true, selector: "thy-skeleton", inputs: { thyAnimated: ["thyAnimated", "thyAnimated", coerceBooleanProperty], thyAnimatedInterval: "thyAnimatedInterval", thyPrimaryColor: "thyPrimaryColor", thySecondaryColor: "thySecondaryColor" }, ngImport: i0, template: ` <ng-content></ng-content> `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.8", type: ThySkeleton, isStandalone: true, selector: "thy-skeleton", inputs: { thyAnimated: { classPropertyName: "thyAnimated", publicName: "thyAnimated", isSignal: true, isRequired: false, transformFunction: null }, thyAnimatedInterval: { classPropertyName: "thyAnimatedInterval", publicName: "thyAnimatedInterval", isSignal: true, isRequired: false, transformFunction: null }, thyPrimaryColor: { classPropertyName: "thyPrimaryColor", publicName: "thyPrimaryColor", isSignal: true, isRequired: false, transformFunction: null }, thySecondaryColor: { classPropertyName: "thySecondaryColor", publicName: "thySecondaryColor", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: ` <ng-content></ng-content> `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ThySkeleton, decorators: [{
             type: Component,
@@ -25,16 +43,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImpor
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     encapsulation: ViewEncapsulation.None
                 }]
-        }], propDecorators: { thyAnimated: [{
-                type: Input,
-                args: [{ transform: coerceBooleanProperty }]
-            }], thyAnimatedInterval: [{
-                type: Input
-            }], thyPrimaryColor: [{
-                type: Input
-            }], thySecondaryColor: [{
-                type: Input
-            }] } });
+        }] });
 
 const THY_SKELETON_CONFIG = new InjectionToken('THY_SKELETON_CONFIG', {
     providedIn: 'root',
@@ -51,54 +60,72 @@ const THY_SKELETON_CONFIG = new InjectionToken('THY_SKELETON_CONFIG', {
 class ThySkeletonRectangle {
     constructor() {
         this.skeletonConfigModel = inject(THY_SKELETON_CONFIG, { optional: true });
-        this._parent = inject(ThySkeleton, { optional: true });
-        this.afterStyles = {};
-    }
-    ngOnInit() {
-        const config = {
-            ...this.skeletonConfigModel,
-            ...(this._parent || {}),
-            ...(!isUndefinedOrNull(this._parent?.thyAnimated) && { thyAnimated: this._parent.thyAnimated })
-        };
-        const { thyAnimatedInterval, thyPrimaryColor, thySecondaryColor, thyAnimated } = config;
-        for (let key in { thyAnimatedInterval, thyPrimaryColor, thySecondaryColor, thyAnimated }) {
-            this[key] = !isUndefinedOrNull(this[key]) ? this[key] : config[key];
-        }
-        this.crateAfterStyles();
-    }
-    crateAfterStyles() {
-        this.afterStyles = {
-            ...(this.thySecondaryColor && {
-                background: `linear-gradient(90deg, ${helpers.hexToRgb(this.thySecondaryColor, 0)}, ${helpers.hexToRgb(this.thySecondaryColor, 0.15)}, ${helpers.hexToRgb(this.thySecondaryColor, 0)}`
-            }),
-            animation: ![false, 'false'].includes(this.thyAnimated)
-                ? `thy-skeleton-animation ${this.thyAnimatedInterval}s infinite`
-                : 'none'
-        };
-    }
-    ngOnChanges(changes) {
-        const { thySecondaryColor, thyAnimated, thyAnimatedInterval } = changes;
-        if ((thySecondaryColor && !thySecondaryColor?.firstChange) ||
-            (thyAnimated && !thyAnimated?.firstChange) ||
-            (thyAnimatedInterval && !thyAnimatedInterval?.firstChange)) {
-            this.crateAfterStyles();
-        }
+        this.parent = inject(ThySkeleton, { optional: true });
+        /**
+         * 是否展示动画
+         * @default true
+         */
+        this.thyAnimated = input(undefined, { transform: coerceBooleanProperty });
+        /**
+         * 动画速度
+         * @default 1.5s
+         */
+        this.thyAnimatedInterval = input();
+        /**
+         * 骨架边框圆角
+         * @default 4px
+         */
+        this.thyBorderRadius = input(undefined, { transform: coerceCssPixelValue });
+        /**
+         * 骨架宽度
+         * @default 100%
+         */
+        this.thyRowWidth = input(undefined, { transform: coerceCssPixelValue });
+        /**
+         * 骨架高度
+         * @default 20px
+         */
+        this.thyRowHeight = input(undefined, { transform: coerceCssPixelValue });
+        /**
+         * 骨架主色
+         * @default #F7F7F7
+         */
+        this.thyPrimaryColor = input();
+        /**
+         * 骨架次色
+         * @default #aaaaaa
+         */
+        this.thySecondaryColor = input();
+        this.animatedInterval = computed(() => {
+            return this.thyAnimatedInterval() || this.parent?.thyAnimatedInterval() || this.skeletonConfigModel.thyAnimatedInterval;
+        });
+        this.primaryColor = computed(() => {
+            return this.thyPrimaryColor() || this.parent?.thyPrimaryColor() || this.skeletonConfigModel.thyPrimaryColor;
+        });
+        this.secondaryColor = computed(() => {
+            return this.thySecondaryColor() || this.parent?.thySecondaryColor() || this.skeletonConfigModel.thySecondaryColor;
+        });
+        this.animated = computed(() => {
+            if (!isUndefinedOrNull(this.thyAnimated())) {
+                return this.thyAnimated();
+            }
+            if (!isUndefinedOrNull(this.parent?.thyAnimated())) {
+                return this.parent.thyAnimated();
+            }
+            return this.skeletonConfigModel.thyAnimated;
+        });
+        this.afterStyles = computed(() => {
+            return {
+                ...(this.secondaryColor() && {
+                    background: `linear-gradient(90deg, ${helpers.hexToRgb(this.secondaryColor(), 0)}, ${helpers.hexToRgb(this.secondaryColor(), 0.15)}, ${helpers.hexToRgb(this.secondaryColor(), 0)}`
+                }),
+                animation: ![false, 'false'].includes(this.animated()) ? `thy-skeleton-animation ${this.animatedInterval()}s infinite` : 'none'
+            };
+        });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ThySkeletonRectangle, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "19.2.8", type: ThySkeletonRectangle, isStandalone: true, selector: "thy-skeleton-rectangle", inputs: { thyAnimated: ["thyAnimated", "thyAnimated", coerceBooleanProperty], thyAnimatedInterval: "thyAnimatedInterval", thyBorderRadius: "thyBorderRadius", thyRowWidth: "thyRowWidth", thyRowHeight: "thyRowHeight", thyPrimaryColor: "thyPrimaryColor", thySecondaryColor: "thySecondaryColor" }, host: { properties: { "class.thy-skeleton": "true", "class.thy-skeleton-rectangle": "true", "style.background": "thyPrimaryColor", "style.width": "thyRowWidth", "style.height": "thyRowHeight", "style.borderRadius": "thyBorderRadius" } }, usesOnChanges: true, ngImport: i0, template: ` <div class="thy-skeleton-after" [ngStyle]="afterStyles"></div> `, isInline: true, dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.8", type: ThySkeletonRectangle, isStandalone: true, selector: "thy-skeleton-rectangle", inputs: { thyAnimated: { classPropertyName: "thyAnimated", publicName: "thyAnimated", isSignal: true, isRequired: false, transformFunction: null }, thyAnimatedInterval: { classPropertyName: "thyAnimatedInterval", publicName: "thyAnimatedInterval", isSignal: true, isRequired: false, transformFunction: null }, thyBorderRadius: { classPropertyName: "thyBorderRadius", publicName: "thyBorderRadius", isSignal: true, isRequired: false, transformFunction: null }, thyRowWidth: { classPropertyName: "thyRowWidth", publicName: "thyRowWidth", isSignal: true, isRequired: false, transformFunction: null }, thyRowHeight: { classPropertyName: "thyRowHeight", publicName: "thyRowHeight", isSignal: true, isRequired: false, transformFunction: null }, thyPrimaryColor: { classPropertyName: "thyPrimaryColor", publicName: "thyPrimaryColor", isSignal: true, isRequired: false, transformFunction: null }, thySecondaryColor: { classPropertyName: "thySecondaryColor", publicName: "thySecondaryColor", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.thy-skeleton": "true", "class.thy-skeleton-rectangle": "true", "style.background": "primaryColor()", "style.width": "thyRowWidth()", "style.height": "thyRowHeight()", "style.borderRadius": "thyBorderRadius()" } }, ngImport: i0, template: ` <div class="thy-skeleton-after" [ngStyle]="afterStyles()"></div> `, isInline: true, dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-__decorate([
-    InputCssPixel(),
-    __metadata("design:type", Object)
-], ThySkeletonRectangle.prototype, "thyBorderRadius", void 0);
-__decorate([
-    InputCssPixel(),
-    __metadata("design:type", Object)
-], ThySkeletonRectangle.prototype, "thyRowWidth", void 0);
-__decorate([
-    InputCssPixel(),
-    __metadata("design:type", Object)
-], ThySkeletonRectangle.prototype, "thyRowHeight", void 0);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ThySkeletonRectangle, decorators: [{
             type: Component,
             args: [{
@@ -106,32 +133,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImpor
                     host: {
                         '[class.thy-skeleton]': 'true',
                         '[class.thy-skeleton-rectangle]': 'true',
-                        '[style.background]': 'thyPrimaryColor',
-                        '[style.width]': 'thyRowWidth',
-                        '[style.height]': 'thyRowHeight',
-                        '[style.borderRadius]': 'thyBorderRadius'
+                        '[style.background]': 'primaryColor()',
+                        '[style.width]': 'thyRowWidth()',
+                        '[style.height]': 'thyRowHeight()',
+                        '[style.borderRadius]': 'thyBorderRadius()'
                     },
-                    template: ` <div class="thy-skeleton-after" [ngStyle]="afterStyles"></div> `,
+                    template: ` <div class="thy-skeleton-after" [ngStyle]="afterStyles()"></div> `,
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     encapsulation: ViewEncapsulation.None,
                     imports: [NgStyle]
                 }]
-        }], propDecorators: { thyAnimated: [{
-                type: Input,
-                args: [{ transform: coerceBooleanProperty }]
-            }], thyAnimatedInterval: [{
-                type: Input
-            }], thyBorderRadius: [{
-                type: Input
-            }], thyRowWidth: [{
-                type: Input
-            }], thyRowHeight: [{
-                type: Input
-            }], thyPrimaryColor: [{
-                type: Input
-            }], thySecondaryColor: [{
-                type: Input
-            }] } });
+        }] });
 
 /**
  * 骨架屏圆形组件
@@ -141,51 +153,62 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImpor
 class ThySkeletonCircle {
     constructor() {
         this.skeletonConfigModel = inject(THY_SKELETON_CONFIG, { optional: true });
-        this._parent = inject(ThySkeleton, { optional: true });
+        this.parent = inject(ThySkeleton, { optional: true });
+        /**
+         * 动画速度
+         * @default 1.5s
+         */
+        this.thyAnimatedInterval = input();
         /**
          * 骨架尺寸
          * @default 20px
          */
-        this.thySize = 20;
-        this.afterStyles = {};
-    }
-    ngOnInit() {
-        const config = {
-            ...this.skeletonConfigModel,
-            ...(this._parent || {}),
-            ...(!isUndefinedOrNull(this._parent?.thyAnimated) && { thyAnimated: this._parent.thyAnimated }) // do it because @InputBoolean() lead to cannot get thyAnimated from _parent inject
-        };
-        const { thyAnimatedInterval, thyPrimaryColor, thySecondaryColor, thyAnimated } = config;
-        for (let key in { thyAnimatedInterval, thyPrimaryColor, thySecondaryColor, thyAnimated }) {
-            this[key] = !isUndefinedOrNull(this[key]) ? this[key] : config[key];
-        }
-        this.crateAfterStyles();
-    }
-    crateAfterStyles() {
-        this.afterStyles = {
-            ...(this.thySecondaryColor && {
-                background: `linear-gradient(90deg, ${helpers.hexToRgb(this.thySecondaryColor, 0)}, ${helpers.hexToRgb(this.thySecondaryColor, 0.15)}, ${helpers.hexToRgb(this.thySecondaryColor, 0)}`
-            }),
-            animation: ![false, 'false'].includes(this.thyAnimated)
-                ? `thy-skeleton-animation ${this.thyAnimatedInterval}s infinite`
-                : 'none'
-        };
-    }
-    ngOnChanges(changes) {
-        const { thySecondaryColor, thyAnimated, thyAnimatedInterval } = changes;
-        if ((thySecondaryColor && !thySecondaryColor?.firstChange) ||
-            (thyAnimated && !thyAnimated?.firstChange) ||
-            (thyAnimatedInterval && !thyAnimatedInterval?.firstChange)) {
-            this.crateAfterStyles();
-        }
+        this.thySize = input(`20px`, { transform: coerceCssPixelValue });
+        /**
+         * 骨架主色
+         * @default #F7F7F7
+         */
+        this.thyPrimaryColor = input();
+        /**
+         * 骨架次色
+         * @default #aaaaaa
+         */
+        this.thySecondaryColor = input();
+        /**
+         * 是否展示动画
+         * @default true
+         */
+        this.thyAnimated = input(undefined, { transform: coerceBooleanProperty });
+        this.animatedInterval = computed(() => {
+            return this.thyAnimatedInterval() || this.parent?.thyAnimatedInterval() || this.skeletonConfigModel.thyAnimatedInterval;
+        });
+        this.primaryColor = computed(() => {
+            return this.thyPrimaryColor() || this.parent?.thyPrimaryColor() || this.skeletonConfigModel.thyPrimaryColor;
+        });
+        this.secondaryColor = computed(() => {
+            return this.thySecondaryColor() || this.parent?.thySecondaryColor() || this.skeletonConfigModel.thySecondaryColor;
+        });
+        this.animated = computed(() => {
+            if (!isUndefinedOrNull(this.thyAnimated())) {
+                return this.thyAnimated();
+            }
+            if (!isUndefinedOrNull(this.parent?.thyAnimated())) {
+                return this.parent.thyAnimated();
+            }
+            return this.skeletonConfigModel.thyAnimated;
+        });
+        this.afterStyles = computed(() => {
+            return {
+                ...(this.secondaryColor() && {
+                    background: `linear-gradient(90deg, ${helpers.hexToRgb(this.secondaryColor(), 0)}, ${helpers.hexToRgb(this.secondaryColor(), 0.15)}, ${helpers.hexToRgb(this.secondaryColor(), 0)}`
+                }),
+                animation: ![false, 'false'].includes(this.animated()) ? `thy-skeleton-animation ${this.animatedInterval()}s infinite` : 'none'
+            };
+        });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ThySkeletonCircle, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "19.2.8", type: ThySkeletonCircle, isStandalone: true, selector: "thy-skeleton-circle", inputs: { thyAnimatedInterval: "thyAnimatedInterval", thySize: "thySize", thyPrimaryColor: "thyPrimaryColor", thySecondaryColor: "thySecondaryColor", thyAnimated: ["thyAnimated", "thyAnimated", coerceBooleanProperty] }, host: { properties: { "class.thy-skeleton": "true", "class.thy-skeleton-circle": "true", "style.background": "thyPrimaryColor", "style.width": "thySize", "style.height": "thySize" } }, usesOnChanges: true, ngImport: i0, template: ` <div class="thy-skeleton-after" [ngStyle]="afterStyles"></div> `, isInline: true, dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.8", type: ThySkeletonCircle, isStandalone: true, selector: "thy-skeleton-circle", inputs: { thyAnimatedInterval: { classPropertyName: "thyAnimatedInterval", publicName: "thyAnimatedInterval", isSignal: true, isRequired: false, transformFunction: null }, thySize: { classPropertyName: "thySize", publicName: "thySize", isSignal: true, isRequired: false, transformFunction: null }, thyPrimaryColor: { classPropertyName: "thyPrimaryColor", publicName: "thyPrimaryColor", isSignal: true, isRequired: false, transformFunction: null }, thySecondaryColor: { classPropertyName: "thySecondaryColor", publicName: "thySecondaryColor", isSignal: true, isRequired: false, transformFunction: null }, thyAnimated: { classPropertyName: "thyAnimated", publicName: "thyAnimated", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.thy-skeleton": "true", "class.thy-skeleton-circle": "true", "style.background": "primaryColor()", "style.width": "thySize()", "style.height": "thySize()" } }, ngImport: i0, template: ` <div class="thy-skeleton-after" [ngStyle]="afterStyles()"></div> `, isInline: true, dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-__decorate([
-    InputCssPixel(),
-    __metadata("design:type", Object)
-], ThySkeletonCircle.prototype, "thySize", void 0);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ThySkeletonCircle, decorators: [{
             type: Component,
             args: [{
@@ -193,27 +216,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImpor
                     host: {
                         '[class.thy-skeleton]': 'true',
                         '[class.thy-skeleton-circle]': 'true',
-                        '[style.background]': 'thyPrimaryColor',
-                        '[style.width]': 'thySize',
-                        '[style.height]': 'thySize'
+                        '[style.background]': 'primaryColor()',
+                        '[style.width]': 'thySize()',
+                        '[style.height]': 'thySize()'
                     },
-                    template: ` <div class="thy-skeleton-after" [ngStyle]="afterStyles"></div> `,
+                    template: ` <div class="thy-skeleton-after" [ngStyle]="afterStyles()"></div> `,
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     encapsulation: ViewEncapsulation.None,
                     imports: [NgStyle]
                 }]
-        }], propDecorators: { thyAnimatedInterval: [{
-                type: Input
-            }], thySize: [{
-                type: Input
-            }], thyPrimaryColor: [{
-                type: Input
-            }], thySecondaryColor: [{
-                type: Input
-            }], thyAnimated: [{
-                type: Input,
-                args: [{ transform: coerceBooleanProperty }]
-            }] } });
+        }] });
 
 /**
  * 骨架屏列表组件
@@ -222,86 +234,81 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImpor
  */
 class ThySkeletonList {
     constructor() {
-        this.rowCount = [];
-    }
-    /**
-     * 行数
-     */
-    set thyRowCount(value) {
-        this.rowCount = Array.from({ length: +value });
-    }
-    get thyRowCount() {
-        return this.rowCount.length;
+        /**
+         * 骨架宽度
+         */
+        this.thyRowWidth = input(undefined, { transform: coerceCssPixelValue });
+        /**
+         * 骨架高度
+         */
+        this.thyRowHeight = input(undefined, { transform: coerceCssPixelValue });
+        /**
+         * 骨架边框圆角
+         */
+        this.thyBorderRadius = input(undefined, { transform: coerceCssPixelValue });
+        /**
+         * 是否开启动画
+         * @default false
+         */
+        this.thyAnimated = input(undefined, { transform: coerceBooleanProperty });
+        /**
+         * 动画速度
+         */
+        this.thyAnimatedInterval = input();
+        /**
+         * 骨架主色
+         */
+        this.thyPrimaryColor = input();
+        /**
+         * 骨架次色
+         */
+        this.thySecondaryColor = input();
+        /**
+         * 行数
+         */
+        this.thyRowCount = input();
+        this.rows = computed(() => {
+            return Array.from({ length: +this.thyRowCount() });
+        });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ThySkeletonList, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.8", type: ThySkeletonList, isStandalone: true, selector: "thy-skeleton-list", inputs: { thyRowWidth: "thyRowWidth", thyRowHeight: "thyRowHeight", thyBorderRadius: "thyBorderRadius", thyAnimated: ["thyAnimated", "thyAnimated", coerceBooleanProperty], thyAnimatedInterval: "thyAnimatedInterval", thyPrimaryColor: "thyPrimaryColor", thySecondaryColor: "thySecondaryColor", thyRowCount: "thyRowCount" }, host: { properties: { "class.thy-skeleton-list": "true" } }, ngImport: i0, template: `
-        @for (k of rowCount; track $index; let i = $index) {
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.8", type: ThySkeletonList, isStandalone: true, selector: "thy-skeleton-list", inputs: { thyRowWidth: { classPropertyName: "thyRowWidth", publicName: "thyRowWidth", isSignal: true, isRequired: false, transformFunction: null }, thyRowHeight: { classPropertyName: "thyRowHeight", publicName: "thyRowHeight", isSignal: true, isRequired: false, transformFunction: null }, thyBorderRadius: { classPropertyName: "thyBorderRadius", publicName: "thyBorderRadius", isSignal: true, isRequired: false, transformFunction: null }, thyAnimated: { classPropertyName: "thyAnimated", publicName: "thyAnimated", isSignal: true, isRequired: false, transformFunction: null }, thyAnimatedInterval: { classPropertyName: "thyAnimatedInterval", publicName: "thyAnimatedInterval", isSignal: true, isRequired: false, transformFunction: null }, thyPrimaryColor: { classPropertyName: "thyPrimaryColor", publicName: "thyPrimaryColor", isSignal: true, isRequired: false, transformFunction: null }, thySecondaryColor: { classPropertyName: "thySecondaryColor", publicName: "thySecondaryColor", isSignal: true, isRequired: false, transformFunction: null }, thyRowCount: { classPropertyName: "thyRowCount", publicName: "thyRowCount", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.thy-skeleton-list": "true" } }, ngImport: i0, template: `
+        @for (k of rows(); track $index; let i = $index) {
             <thy-skeleton-rectangle
                 class="vertical-gap"
-                [thyRowWidth]="thyRowWidth"
-                [thyRowHeight]="thyRowHeight"
-                [thyAnimated]="thyAnimated"
-                [thyPrimaryColor]="thyPrimaryColor"
-                [thySecondaryColor]="thySecondaryColor"
-                [thyBorderRadius]="thyBorderRadius"
-                [thyAnimatedInterval]="thyAnimatedInterval"></thy-skeleton-rectangle>
+                [thyRowWidth]="thyRowWidth()"
+                [thyRowHeight]="thyRowHeight()"
+                [thyAnimated]="thyAnimated()"
+                [thyPrimaryColor]="thyPrimaryColor()"
+                [thySecondaryColor]="thySecondaryColor()"
+                [thyBorderRadius]="thyBorderRadius()"
+                [thyAnimatedInterval]="thyAnimatedInterval()"></thy-skeleton-rectangle>
         }
     `, isInline: true, dependencies: [{ kind: "component", type: ThySkeletonRectangle, selector: "thy-skeleton-rectangle", inputs: ["thyAnimated", "thyAnimatedInterval", "thyBorderRadius", "thyRowWidth", "thyRowHeight", "thyPrimaryColor", "thySecondaryColor"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-__decorate([
-    InputCssPixel(),
-    __metadata("design:type", Object)
-], ThySkeletonList.prototype, "thyRowWidth", void 0);
-__decorate([
-    InputCssPixel(),
-    __metadata("design:type", Object)
-], ThySkeletonList.prototype, "thyRowHeight", void 0);
-__decorate([
-    InputCssPixel(),
-    __metadata("design:type", Object)
-], ThySkeletonList.prototype, "thyBorderRadius", void 0);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ThySkeletonList, decorators: [{
             type: Component,
             args: [{
                     selector: 'thy-skeleton-list',
                     template: `
-        @for (k of rowCount; track $index; let i = $index) {
+        @for (k of rows(); track $index; let i = $index) {
             <thy-skeleton-rectangle
                 class="vertical-gap"
-                [thyRowWidth]="thyRowWidth"
-                [thyRowHeight]="thyRowHeight"
-                [thyAnimated]="thyAnimated"
-                [thyPrimaryColor]="thyPrimaryColor"
-                [thySecondaryColor]="thySecondaryColor"
-                [thyBorderRadius]="thyBorderRadius"
-                [thyAnimatedInterval]="thyAnimatedInterval"></thy-skeleton-rectangle>
+                [thyRowWidth]="thyRowWidth()"
+                [thyRowHeight]="thyRowHeight()"
+                [thyAnimated]="thyAnimated()"
+                [thyPrimaryColor]="thyPrimaryColor()"
+                [thySecondaryColor]="thySecondaryColor()"
+                [thyBorderRadius]="thyBorderRadius()"
+                [thyAnimatedInterval]="thyAnimatedInterval()"></thy-skeleton-rectangle>
         }
     `,
-                    host: {
-                        '[class.thy-skeleton-list]': 'true'
-                    },
+                    host: { '[class.thy-skeleton-list]': 'true' },
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     encapsulation: ViewEncapsulation.None,
                     imports: [ThySkeletonRectangle]
                 }]
-        }], propDecorators: { thyRowWidth: [{
-                type: Input
-            }], thyRowHeight: [{
-                type: Input
-            }], thyBorderRadius: [{
-                type: Input
-            }], thyAnimated: [{
-                type: Input,
-                args: [{ transform: coerceBooleanProperty }]
-            }], thyAnimatedInterval: [{
-                type: Input
-            }], thyPrimaryColor: [{
-                type: Input
-            }], thySecondaryColor: [{
-                type: Input
-            }], thyRowCount: [{
-                type: Input
-            }] } });
+        }] });
 
 /**
  * 骨架屏段落组件
@@ -310,98 +317,89 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImpor
  */
 class ThySkeletonParagraph {
     constructor() {
-        this.rowCount = [];
-    }
-    /**
-     * 行数
-     */
-    set thyRowCount(value) {
-        this.rowCount = Array.from({ length: +value });
-    }
-    get thyRowCount() {
-        return this.rowCount.length;
+        /**
+         * 首行宽度
+         */
+        this.thyFirstWidth = input(undefined, { transform: coerceCssPixelValue });
+        /**
+         * 尾行宽度
+         */
+        this.thyLastWidth = input(undefined, { transform: coerceCssPixelValue });
+        /**
+         * 骨架宽度
+         */
+        this.thyRowWidth = input(undefined, { transform: coerceCssPixelValue });
+        /**
+         * 骨架高度
+         */
+        this.thyRowHeight = input(undefined, { transform: coerceCssPixelValue });
+        /**
+         * 骨架边框圆角
+         */
+        this.thyBorderRadius = input(undefined, { transform: coerceCssPixelValue });
+        /**
+         * 是否开启动画
+         * @default false
+         */
+        this.thyAnimated = input(undefined, { transform: coerceBooleanProperty });
+        /**
+         * 动画速度
+         */
+        this.thyAnimatedInterval = input();
+        /**
+         * 骨架主色
+         */
+        this.thyPrimaryColor = input();
+        /**
+         * 骨架次色
+         */
+        this.thySecondaryColor = input();
+        /**
+         * 行数
+         */
+        this.thyRowCount = input();
+        this.rows = computed(() => {
+            return Array.from({ length: +this.thyRowCount() });
+        });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ThySkeletonParagraph, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.8", type: ThySkeletonParagraph, isStandalone: true, selector: "thy-skeleton-paragraph", inputs: { thyFirstWidth: "thyFirstWidth", thyLastWidth: "thyLastWidth", thyRowWidth: "thyRowWidth", thyRowHeight: "thyRowHeight", thyBorderRadius: "thyBorderRadius", thyAnimated: ["thyAnimated", "thyAnimated", coerceBooleanProperty], thyAnimatedInterval: "thyAnimatedInterval", thyPrimaryColor: "thyPrimaryColor", thySecondaryColor: "thySecondaryColor", thyRowCount: "thyRowCount" }, host: { properties: { "class.thy-skeleton-paragraph": "true" } }, ngImport: i0, template: `
-        @for (k of rowCount; track $index; let i = $index) {
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.8", type: ThySkeletonParagraph, isStandalone: true, selector: "thy-skeleton-paragraph", inputs: { thyFirstWidth: { classPropertyName: "thyFirstWidth", publicName: "thyFirstWidth", isSignal: true, isRequired: false, transformFunction: null }, thyLastWidth: { classPropertyName: "thyLastWidth", publicName: "thyLastWidth", isSignal: true, isRequired: false, transformFunction: null }, thyRowWidth: { classPropertyName: "thyRowWidth", publicName: "thyRowWidth", isSignal: true, isRequired: false, transformFunction: null }, thyRowHeight: { classPropertyName: "thyRowHeight", publicName: "thyRowHeight", isSignal: true, isRequired: false, transformFunction: null }, thyBorderRadius: { classPropertyName: "thyBorderRadius", publicName: "thyBorderRadius", isSignal: true, isRequired: false, transformFunction: null }, thyAnimated: { classPropertyName: "thyAnimated", publicName: "thyAnimated", isSignal: true, isRequired: false, transformFunction: null }, thyAnimatedInterval: { classPropertyName: "thyAnimatedInterval", publicName: "thyAnimatedInterval", isSignal: true, isRequired: false, transformFunction: null }, thyPrimaryColor: { classPropertyName: "thyPrimaryColor", publicName: "thyPrimaryColor", isSignal: true, isRequired: false, transformFunction: null }, thySecondaryColor: { classPropertyName: "thySecondaryColor", publicName: "thySecondaryColor", isSignal: true, isRequired: false, transformFunction: null }, thyRowCount: { classPropertyName: "thyRowCount", publicName: "thyRowCount", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.thy-skeleton-paragraph": "true" } }, ngImport: i0, template: `
+        @for (k of rows(); track $index; let i = $index) {
             <thy-skeleton-rectangle
                 class="vertical-gap"
-                [thyRowWidth]="i === 0 ? thyFirstWidth : i === rowCount.length - 1 ? thyLastWidth : thyRowWidth"
-                [thyRowHeight]="thyRowHeight"
-                [thyAnimated]="thyAnimated"
-                [thyPrimaryColor]="thyPrimaryColor"
-                [thySecondaryColor]="thySecondaryColor"
-                [thyBorderRadius]="thyBorderRadius"
-                [thyAnimatedInterval]="thyAnimatedInterval"></thy-skeleton-rectangle>
+                [thyRowWidth]="i === 0 ? thyFirstWidth() : i === rows().length - 1 ? thyLastWidth() : thyRowWidth()"
+                [thyRowHeight]="thyRowHeight()"
+                [thyAnimated]="thyAnimated()"
+                [thyPrimaryColor]="thyPrimaryColor()"
+                [thySecondaryColor]="thySecondaryColor()"
+                [thyBorderRadius]="thyBorderRadius()"
+                [thyAnimatedInterval]="thyAnimatedInterval()"></thy-skeleton-rectangle>
         }
     `, isInline: true, dependencies: [{ kind: "component", type: ThySkeletonRectangle, selector: "thy-skeleton-rectangle", inputs: ["thyAnimated", "thyAnimatedInterval", "thyBorderRadius", "thyRowWidth", "thyRowHeight", "thyPrimaryColor", "thySecondaryColor"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-__decorate([
-    InputCssPixel(),
-    __metadata("design:type", Object)
-], ThySkeletonParagraph.prototype, "thyFirstWidth", void 0);
-__decorate([
-    InputCssPixel(),
-    __metadata("design:type", Object)
-], ThySkeletonParagraph.prototype, "thyLastWidth", void 0);
-__decorate([
-    InputCssPixel(),
-    __metadata("design:type", Object)
-], ThySkeletonParagraph.prototype, "thyRowWidth", void 0);
-__decorate([
-    InputCssPixel(),
-    __metadata("design:type", Object)
-], ThySkeletonParagraph.prototype, "thyRowHeight", void 0);
-__decorate([
-    InputCssPixel(),
-    __metadata("design:type", Object)
-], ThySkeletonParagraph.prototype, "thyBorderRadius", void 0);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ThySkeletonParagraph, decorators: [{
             type: Component,
             args: [{
                     selector: 'thy-skeleton-paragraph',
                     template: `
-        @for (k of rowCount; track $index; let i = $index) {
+        @for (k of rows(); track $index; let i = $index) {
             <thy-skeleton-rectangle
                 class="vertical-gap"
-                [thyRowWidth]="i === 0 ? thyFirstWidth : i === rowCount.length - 1 ? thyLastWidth : thyRowWidth"
-                [thyRowHeight]="thyRowHeight"
-                [thyAnimated]="thyAnimated"
-                [thyPrimaryColor]="thyPrimaryColor"
-                [thySecondaryColor]="thySecondaryColor"
-                [thyBorderRadius]="thyBorderRadius"
-                [thyAnimatedInterval]="thyAnimatedInterval"></thy-skeleton-rectangle>
+                [thyRowWidth]="i === 0 ? thyFirstWidth() : i === rows().length - 1 ? thyLastWidth() : thyRowWidth()"
+                [thyRowHeight]="thyRowHeight()"
+                [thyAnimated]="thyAnimated()"
+                [thyPrimaryColor]="thyPrimaryColor()"
+                [thySecondaryColor]="thySecondaryColor()"
+                [thyBorderRadius]="thyBorderRadius()"
+                [thyAnimatedInterval]="thyAnimatedInterval()"></thy-skeleton-rectangle>
         }
     `,
-                    host: {
-                        '[class.thy-skeleton-paragraph]': 'true'
-                    },
+                    host: { '[class.thy-skeleton-paragraph]': 'true' },
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     encapsulation: ViewEncapsulation.None,
                     imports: [ThySkeletonRectangle]
                 }]
-        }], propDecorators: { thyFirstWidth: [{
-                type: Input
-            }], thyLastWidth: [{
-                type: Input
-            }], thyRowWidth: [{
-                type: Input
-            }], thyRowHeight: [{
-                type: Input
-            }], thyBorderRadius: [{
-                type: Input
-            }], thyAnimated: [{
-                type: Input,
-                args: [{ transform: coerceBooleanProperty }]
-            }], thyAnimatedInterval: [{
-                type: Input
-            }], thyPrimaryColor: [{
-                type: Input
-            }], thySecondaryColor: [{
-                type: Input
-            }], thyRowCount: [{
-                type: Input
-            }] } });
+        }] });
 
 /**
  * 骨架屏无序列表组件
@@ -409,115 +407,114 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImpor
  * @order 50
  */
 class ThySkeletonBulletList {
-    /**
-     * 行数
-     */
-    set thyRowCount(value) {
-        this.rowCount = Array.from({ length: +value });
-    }
-    get thyRowCount() {
-        return this.rowCount.length;
-    }
     constructor() {
-        this.rowCount = [];
+        /**
+         * 骨架宽度
+         * @default 100%
+         */
+        this.thyRowWidth = input(undefined, { transform: coerceCssPixelValue });
+        /**
+         * 骨架高度
+         * @default 20px
+         */
+        this.thyRowHeight = input(undefined, { transform: coerceCssPixelValue });
+        /**
+         * 骨架边框圆角
+         * @default 4px
+         */
+        this.thyBorderRadius = input(undefined, { transform: coerceCssPixelValue });
+        /**
+         * 是否开启动画
+         * @default true
+         */
+        this.thyAnimated = input(undefined, { transform: coerceBooleanProperty });
+        /**
+         * 动画速度
+         * @default 1.5s
+         */
+        this.thyAnimatedInterval = input();
+        /**
+         * 骨架主色
+         * @default #f7f7f7
+         */
+        this.thyPrimaryColor = input();
+        /**
+         * 骨架次色
+         * @default #aaaaaa
+         */
+        this.thySecondaryColor = input();
+        /**
+         * circle类型骨架尺寸
+         */
+        this.thySize = input(undefined, { transform: coerceCssPixelValue });
+        /**
+         * 行数
+         */
+        this.thyRowCount = input();
+        this.rows = computed(() => {
+            return Array.from({ length: +this.thyRowCount() });
+        });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ThySkeletonBulletList, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.8", type: ThySkeletonBulletList, isStandalone: true, selector: "thy-skeleton-bullet-list", inputs: { thyRowWidth: "thyRowWidth", thyRowHeight: "thyRowHeight", thyBorderRadius: "thyBorderRadius", thyAnimated: ["thyAnimated", "thyAnimated", coerceBooleanProperty], thyAnimatedInterval: "thyAnimatedInterval", thyPrimaryColor: "thyPrimaryColor", thySecondaryColor: "thySecondaryColor", thySize: "thySize", thyRowCount: "thyRowCount" }, host: { properties: { "class.thy-skeleton-bullet-list": "true" } }, ngImport: i0, template: `
-        @for (item of rowCount; track $index; let i = $index) {
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.8", type: ThySkeletonBulletList, isStandalone: true, selector: "thy-skeleton-bullet-list", inputs: { thyRowWidth: { classPropertyName: "thyRowWidth", publicName: "thyRowWidth", isSignal: true, isRequired: false, transformFunction: null }, thyRowHeight: { classPropertyName: "thyRowHeight", publicName: "thyRowHeight", isSignal: true, isRequired: false, transformFunction: null }, thyBorderRadius: { classPropertyName: "thyBorderRadius", publicName: "thyBorderRadius", isSignal: true, isRequired: false, transformFunction: null }, thyAnimated: { classPropertyName: "thyAnimated", publicName: "thyAnimated", isSignal: true, isRequired: false, transformFunction: null }, thyAnimatedInterval: { classPropertyName: "thyAnimatedInterval", publicName: "thyAnimatedInterval", isSignal: true, isRequired: false, transformFunction: null }, thyPrimaryColor: { classPropertyName: "thyPrimaryColor", publicName: "thyPrimaryColor", isSignal: true, isRequired: false, transformFunction: null }, thySecondaryColor: { classPropertyName: "thySecondaryColor", publicName: "thySecondaryColor", isSignal: true, isRequired: false, transformFunction: null }, thySize: { classPropertyName: "thySize", publicName: "thySize", isSignal: true, isRequired: false, transformFunction: null }, thyRowCount: { classPropertyName: "thyRowCount", publicName: "thyRowCount", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.thy-skeleton-bullet-list": "true" } }, ngImport: i0, template: `
+        @for (item of rows(); track $index; let i = $index) {
             <div class="d-flex vertical-gap">
                 <thy-skeleton-circle
-                    [thyAnimated]="thyAnimated"
-                    [thyAnimatedInterval]="thyAnimatedInterval"
-                    [thySize]="thySize"
-                    [thyPrimaryColor]="thyPrimaryColor"
-                    [thySecondaryColor]="thySecondaryColor">
+                    [thyAnimated]="thyAnimated()"
+                    [thyAnimatedInterval]="thyAnimatedInterval()"
+                    [thySize]="thySize()"
+                    [thyPrimaryColor]="thyPrimaryColor()"
+                    [thySecondaryColor]="thySecondaryColor()">
                 </thy-skeleton-circle>
                 <div class="horizontal-gap"></div>
                 <div style="flex: 1">
                     <thy-skeleton-rectangle
-                        [thyRowWidth]="thyRowWidth"
-                        [thyRowHeight]="thyRowHeight"
-                        [thyAnimated]="thyAnimated"
-                        [thyPrimaryColor]="thyPrimaryColor"
-                        [thySecondaryColor]="thySecondaryColor"
-                        [thyBorderRadius]="thyBorderRadius"
-                        [thyAnimatedInterval]="thyAnimatedInterval"></thy-skeleton-rectangle>
+                        [thyRowWidth]="thyRowWidth()"
+                        [thyRowHeight]="thyRowHeight()"
+                        [thyAnimated]="thyAnimated()"
+                        [thyPrimaryColor]="thyPrimaryColor()"
+                        [thySecondaryColor]="thySecondaryColor()"
+                        [thyBorderRadius]="thyBorderRadius()"
+                        [thyAnimatedInterval]="thyAnimatedInterval()"></thy-skeleton-rectangle>
                 </div>
             </div>
         }
     `, isInline: true, dependencies: [{ kind: "component", type: ThySkeletonCircle, selector: "thy-skeleton-circle", inputs: ["thyAnimatedInterval", "thySize", "thyPrimaryColor", "thySecondaryColor", "thyAnimated"] }, { kind: "component", type: ThySkeletonRectangle, selector: "thy-skeleton-rectangle", inputs: ["thyAnimated", "thyAnimatedInterval", "thyBorderRadius", "thyRowWidth", "thyRowHeight", "thyPrimaryColor", "thySecondaryColor"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-__decorate([
-    InputCssPixel(),
-    __metadata("design:type", Object)
-], ThySkeletonBulletList.prototype, "thyRowWidth", void 0);
-__decorate([
-    InputCssPixel(),
-    __metadata("design:type", Object)
-], ThySkeletonBulletList.prototype, "thyRowHeight", void 0);
-__decorate([
-    InputCssPixel(),
-    __metadata("design:type", Object)
-], ThySkeletonBulletList.prototype, "thyBorderRadius", void 0);
-__decorate([
-    InputCssPixel(),
-    __metadata("design:type", Object)
-], ThySkeletonBulletList.prototype, "thySize", void 0);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ThySkeletonBulletList, decorators: [{
             type: Component,
             args: [{
                     selector: 'thy-skeleton-bullet-list',
                     template: `
-        @for (item of rowCount; track $index; let i = $index) {
+        @for (item of rows(); track $index; let i = $index) {
             <div class="d-flex vertical-gap">
                 <thy-skeleton-circle
-                    [thyAnimated]="thyAnimated"
-                    [thyAnimatedInterval]="thyAnimatedInterval"
-                    [thySize]="thySize"
-                    [thyPrimaryColor]="thyPrimaryColor"
-                    [thySecondaryColor]="thySecondaryColor">
+                    [thyAnimated]="thyAnimated()"
+                    [thyAnimatedInterval]="thyAnimatedInterval()"
+                    [thySize]="thySize()"
+                    [thyPrimaryColor]="thyPrimaryColor()"
+                    [thySecondaryColor]="thySecondaryColor()">
                 </thy-skeleton-circle>
                 <div class="horizontal-gap"></div>
                 <div style="flex: 1">
                     <thy-skeleton-rectangle
-                        [thyRowWidth]="thyRowWidth"
-                        [thyRowHeight]="thyRowHeight"
-                        [thyAnimated]="thyAnimated"
-                        [thyPrimaryColor]="thyPrimaryColor"
-                        [thySecondaryColor]="thySecondaryColor"
-                        [thyBorderRadius]="thyBorderRadius"
-                        [thyAnimatedInterval]="thyAnimatedInterval"></thy-skeleton-rectangle>
+                        [thyRowWidth]="thyRowWidth()"
+                        [thyRowHeight]="thyRowHeight()"
+                        [thyAnimated]="thyAnimated()"
+                        [thyPrimaryColor]="thyPrimaryColor()"
+                        [thySecondaryColor]="thySecondaryColor()"
+                        [thyBorderRadius]="thyBorderRadius()"
+                        [thyAnimatedInterval]="thyAnimatedInterval()"></thy-skeleton-rectangle>
                 </div>
             </div>
         }
     `,
-                    host: {
-                        '[class.thy-skeleton-bullet-list]': 'true'
-                    },
+                    host: { '[class.thy-skeleton-bullet-list]': 'true' },
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     encapsulation: ViewEncapsulation.None,
                     imports: [ThySkeletonCircle, ThySkeletonRectangle]
                 }]
-        }], ctorParameters: () => [], propDecorators: { thyRowWidth: [{
-                type: Input
-            }], thyRowHeight: [{
-                type: Input
-            }], thyBorderRadius: [{
-                type: Input
-            }], thyAnimated: [{
-                type: Input,
-                args: [{ transform: coerceBooleanProperty }]
-            }], thyAnimatedInterval: [{
-                type: Input
-            }], thyPrimaryColor: [{
-                type: Input
-            }], thySecondaryColor: [{
-                type: Input
-            }], thySize: [{
-                type: Input
-            }], thyRowCount: [{
-                type: Input
-            }] } });
+        }], ctorParameters: () => [] });
 
 const components = [ThySkeleton, ThySkeletonRectangle, ThySkeletonCircle, ThySkeletonList, ThySkeletonParagraph, ThySkeletonBulletList];
 class ThySkeletonModule {