ngx-tethys 19.0.13 → 19.1.0-next.0

package/fesm2022/ngx-tethys-space.mjs

@@ -1,8 +1,7 @@
 import { NgTemplateOutlet, CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
-import { Directive, inject, ChangeDetectorRef, DestroyRef, TemplateRef, ContentChildren, Input, HostBinding, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
+import { Directive, inject, ChangeDetectorRef, DestroyRef, input, computed, contentChildren, TemplateRef, effect, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
 import { useHostRenderer } from '@tethys/cdk/dom';
-import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { getNumericSize } from 'ngx-tethys/core';
 import { coerceBooleanProperty } from 'ngx-tethys/util';
 
@@ -19,12 +18,7 @@ class ThySpaceItemDirective {
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ThySpaceItemDirective, decorators: [{
             type: Directive,
-            args: [{
-                    selector: '[thySpaceItem]',
-                    host: {
-                        class: 'thy-space-item'
-                    }
-                }]
+            args: [{ selector: '[thySpaceItem]', host: { class: 'thy-space-item' } }]
         }], ctorParameters: () => [] });
 const DEFAULT_SIZE = 'md';
 /**
@@ -36,55 +30,41 @@ class ThySpace {
     constructor() {
         this.cdr = inject(ChangeDetectorRef);
         this.destroyRef = inject(DestroyRef);
-        this.space = getNumericSize(DEFAULT_SIZE);
         this.hostRenderer = useHostRenderer();
+        /**
+         * 大小，支持 `zero` | `xxs` | `xs` | `sm` | `md` | `lg` | `xlg` 和自定义数字大小
+         * @type string | number
+         */
+        this.thySize = input(DEFAULT_SIZE);
+        this.space = computed(() => {
+            return getNumericSize(this.thySize(), DEFAULT_SIZE);
+        });
         /**
          * 间距垂直方向，默认是水平方向
          */
-        this.thyVertical = false;
-    }
-    /**
-     * 大小，支持 `zero` | `xxs` | `xs` | `sm` | `md` | `lg` | `xlg` 和自定义数字大小
-     * @type string | number
-     */
-    set thySize(size) {
-        this.space = getNumericSize(size, DEFAULT_SIZE);
-    }
-    // @ClassBinding(`align-items-{{value}}`)
-    /**
-     * 对齐方式，可选择 `start` | `end` | `baseline` | `center`
-     */
-    set thyAlign(align) {
-        this.hostRenderer.updateClass(align ? [`align-items-${align}`] : []);
-    }
-    ngOnInit() { }
-    ngAfterContentInit() {
-        this.items.changes.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(() => {
-            this.cdr.markForCheck();
+        this.thyVertical = input(false, { transform: coerceBooleanProperty });
+        // @ClassBinding(`align-items-{{value}}`)
+        /**
+         * 对齐方式，可选择 `start` | `end` | `baseline` | `center`
+         */
+        this.thyAlign = input();
+        this.items = contentChildren(ThySpaceItemDirective, { read: (TemplateRef) });
+        effect(() => {
+            this.hostRenderer.updateClass(this.thyAlign() ? [`align-items-${this.thyAlign()}`] : []);
         });
     }
+    ngOnInit() { }
+    ngAfterContentInit() { }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ThySpace, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.8", type: ThySpace, isStandalone: true, selector: "thy-space", inputs: { thySize: "thySize", thyVertical: ["thyVertical", "thyVertical", coerceBooleanProperty], thyAlign: "thyAlign" }, host: { properties: { "class.thy-space-vertical": "this.thyVertical" }, classAttribute: "thy-space" }, queries: [{ propertyName: "items", predicate: ThySpaceItemDirective, read: TemplateRef }], ngImport: i0, template: "<ng-content></ng-content>\n\n@for (item of items; track $index; let last = $last; let index = $index) {\n  <div class=\"thy-space-item\" [style.margin-right.px]=\"last ? null : space\">\n    <ng-container [ngTemplateOutlet]=\"item\"></ng-container>\n  </div>\n}\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.8", type: ThySpace, isStandalone: true, selector: "thy-space", inputs: { thySize: { classPropertyName: "thySize", publicName: "thySize", isSignal: true, isRequired: false, transformFunction: null }, thyVertical: { classPropertyName: "thyVertical", publicName: "thyVertical", isSignal: true, isRequired: false, transformFunction: null }, thyAlign: { classPropertyName: "thyAlign", publicName: "thyAlign", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.thy-space": "true", "class.thy-space-vertical": "thyVertical()" } }, queries: [{ propertyName: "items", predicate: ThySpaceItemDirective, read: TemplateRef, isSignal: true }], ngImport: i0, template: "<ng-content></ng-content>\n\n@for (item of items(); track $index; let last = $last; let index = $index) {\n  <div class=\"thy-space-item\" [style.margin-right.px]=\"last ? null : space()\">\n    <ng-container [ngTemplateOutlet]=\"item\"></ng-container>\n  </div>\n}\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ThySpace, decorators: [{
             type: Component,
             args: [{ selector: 'thy-space', changeDetection: ChangeDetectionStrategy.OnPush, host: {
-                        class: 'thy-space'
-                    }, imports: [NgTemplateOutlet], template: "<ng-content></ng-content>\n\n@for (item of items; track $index; let last = $last; let index = $index) {\n  <div class=\"thy-space-item\" [style.margin-right.px]=\"last ? null : space\">\n    <ng-container [ngTemplateOutlet]=\"item\"></ng-container>\n  </div>\n}\n" }]
-        }], propDecorators: { thySize: [{
-                type: Input
-            }], thyVertical: [{
-                type: HostBinding,
-                args: [`class.thy-space-vertical`]
-            }, {
-                type: Input,
-                args: [{ transform: coerceBooleanProperty }]
-            }], thyAlign: [{
-                type: Input
-            }], items: [{
-                type: ContentChildren,
-                args: [ThySpaceItemDirective, { read: TemplateRef }]
-            }] } });
+                        '[class.thy-space]': 'true',
+                        '[class.thy-space-vertical]': 'thyVertical()'
+                    }, imports: [NgTemplateOutlet], template: "<ng-content></ng-content>\n\n@for (item of items(); track $index; let last = $last; let index = $index) {\n  <div class=\"thy-space-item\" [style.margin-right.px]=\"last ? null : space()\">\n    <ng-container [ngTemplateOutlet]=\"item\"></ng-container>\n  </div>\n}\n" }]
+        }], ctorParameters: () => [] });
 
 class ThySpaceModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ThySpaceModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }

package/fesm2022/ngx-tethys-space.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ngx-tethys-space.mjs","sources":["../../../src/space/space.component.ts","../../../src/space/space.component.html","../../../src/space/space.module.ts","../../../src/space/ngx-tethys-space.ts"],"sourcesContent":["import { useHostRenderer } from '@tethys/cdk/dom';\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\n\nimport {\n    AfterContentInit,\n    ChangeDetectionStrategy,\n    ChangeDetectorRef,\n    Component,\n    ContentChildren,\n    DestroyRef,\n    Directive,\n    HostBinding,\n    inject,\n    Input,\n    OnInit,\n    QueryList,\n    TemplateRef\n} from '@angular/core';\nimport { ThySpacingSize, getNumericSize } from 'ngx-tethys/core';\nimport { NgTemplateOutlet } from '@angular/common';\nimport { coerceBooleanProperty } from 'ngx-tethys/util';\n\n/**\n * 间距组件项，使用结构性指令 *thySpaceItem 传入模板\n * @name thySpaceItem\n * @order 20\n */\n@Directive({\n    selector: '[thySpaceItem]',\n    host: {\n        class: 'thy-space-item'\n    }\n})\nexport class ThySpaceItemDirective implements OnInit {\n    constructor() {}\n\n    ngOnInit(): void {}\n}\n\nconst DEFAULT_SIZE: ThySpacingSize = 'md';\n\n/**\n * 间距组件\n * @name thy-space\n * @order 10\n */\n@Component({\n    selector: 'thy-space',\n    templateUrl: './space.component.html',\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    host: {\n        class: 'thy-space'\n    },\n    imports: [NgTemplateOutlet]\n})\nexport class ThySpace implements OnInit, AfterContentInit {\n    private cdr = inject(ChangeDetectorRef);\n\n    private readonly destroyRef = inject(DestroyRef);\n\n    public space: number = getNumericSize(DEFAULT_SIZE);\n\n    private hostRenderer = useHostRenderer();\n\n    /**\n     * 大小，支持 `zero` | `xxs` | `xs` | `sm` | `md` | `lg` | `xlg` 和自定义数字大小\n     * @type string | number\n     */\n    @Input() set thySize(size: ThySpacingSize) {\n        this.space = getNumericSize(size, DEFAULT_SIZE);\n    }\n\n    /**\n     * 间距垂直方向，默认是水平方向\n     */\n    @HostBinding(`class.thy-space-vertical`)\n    @Input({ transform: coerceBooleanProperty })\n    thyVertical: boolean = false;\n\n    // @ClassBinding(`align-items-{{value}}`)\n    /**\n     * 对齐方式，可选择 `start` | `end` | `baseline` | `center`\n     */\n    @Input()\n    set thyAlign(align: string) {\n        this.hostRenderer.updateClass(align ? [`align-items-${align}`] : []);\n    }\n\n    @ContentChildren(ThySpaceItemDirective, { read: TemplateRef }) items!: QueryList<TemplateRef<HTMLElement>>;\n\n    ngOnInit(): void {}\n\n    ngAfterContentInit(): void {\n        this.items.changes.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(() => {\n            this.cdr.markForCheck();\n        });\n    }\n}\n","<ng-content></ng-content>\n\n@for (item of items; track $index; let last = $last; let index = $index) {\n  <div class=\"thy-space-item\" [style.margin-right.px]=\"last ? null : space\">\n    <ng-container [ngTemplateOutlet]=\"item\"></ng-container>\n  </div>\n}\n","import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\n\nimport { ThySpace, ThySpaceItemDirective } from './space.component';\n\n@NgModule({\n    imports: [CommonModule, ThySpace, ThySpaceItemDirective],\n    exports: [ThySpace, ThySpaceItemDirective]\n})\nexport class ThySpaceModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"ngx-tethys-space.mjs","sources":["../../../src/space/space.component.ts","../../../src/space/space.component.html","../../../src/space/space.module.ts","../../../src/space/ngx-tethys-space.ts"],"sourcesContent":["import { useHostRenderer } from '@tethys/cdk/dom';\n\nimport {\n    AfterContentInit,\n    ChangeDetectionStrategy,\n    ChangeDetectorRef,\n    Component,\n    DestroyRef,\n    Directive,\n    inject,\n    input,\n    OnInit,\n    TemplateRef,\n    computed,\n    effect,\n    contentChildren\n} from '@angular/core';\nimport { ThySpacingSize, getNumericSize } from 'ngx-tethys/core';\nimport { NgTemplateOutlet } from '@angular/common';\nimport { coerceBooleanProperty } from 'ngx-tethys/util';\n\n/**\n * 间距组件项，使用结构性指令 *thySpaceItem 传入模板\n * @name thySpaceItem\n * @order 20\n */\n@Directive({ selector: '[thySpaceItem]', host: { class: 'thy-space-item' } })\nexport class ThySpaceItemDirective implements OnInit {\n    constructor() {}\n\n    ngOnInit(): void {}\n}\n\nconst DEFAULT_SIZE: ThySpacingSize = 'md';\n\n/**\n * 间距组件\n * @name thy-space\n * @order 10\n */\n@Component({\n    selector: 'thy-space',\n    templateUrl: './space.component.html',\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    host: {\n        '[class.thy-space]': 'true',\n        '[class.thy-space-vertical]': 'thyVertical()'\n    },\n    imports: [NgTemplateOutlet]\n})\nexport class ThySpace implements OnInit, AfterContentInit {\n    private cdr = inject(ChangeDetectorRef);\n\n    private readonly destroyRef = inject(DestroyRef);\n\n    private hostRenderer = useHostRenderer();\n\n    /**\n     * 大小，支持 `zero` | `xxs` | `xs` | `sm` | `md` | `lg` | `xlg` 和自定义数字大小\n     * @type string | number\n     */\n    readonly thySize = input<ThySpacingSize>(DEFAULT_SIZE);\n\n    space = computed(() => {\n        return getNumericSize(this.thySize(), DEFAULT_SIZE);\n    });\n\n    /**\n     * 间距垂直方向，默认是水平方向\n     */\n    readonly thyVertical = input<string | boolean, boolean>(false, { transform: coerceBooleanProperty });\n\n    // @ClassBinding(`align-items-{{value}}`)\n    /**\n     * 对齐方式，可选择 `start` | `end` | `baseline` | `center`\n     */\n    readonly thyAlign = input<string>();\n\n    items = contentChildren(ThySpaceItemDirective, { read: TemplateRef<HTMLElement> });\n\n    constructor() {\n        effect(() => {\n            this.hostRenderer.updateClass(this.thyAlign() ? [`align-items-${this.thyAlign()}`] : []);\n        });\n    }\n\n    ngOnInit(): void {}\n\n    ngAfterContentInit(): void {}\n}\n","<ng-content></ng-content>\n\n@for (item of items(); track $index; let last = $last; let index = $index) {\n  <div class=\"thy-space-item\" [style.margin-right.px]=\"last ? null : space()\">\n    <ng-container [ngTemplateOutlet]=\"item\"></ng-container>\n  </div>\n}\n","import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\n\nimport { ThySpace, ThySpaceItemDirective } from './space.component';\n\n@NgModule({\n    imports: [CommonModule, ThySpace, ThySpaceItemDirective],\n    exports: [ThySpace, ThySpaceItemDirective]\n})\nexport class ThySpaceModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/ngx-tethys-statistic.mjs

@@ -1,6 +1,6 @@
 import { NgTemplateOutlet, NgStyle, CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
-import { inject, ElementRef, ContentChild, Input, HostBinding, Component, NgModule } from '@angular/core';
+import { input, contentChild, computed, effect, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
 import { ThySharedModule } from 'ngx-tethys/shared';
 import { hexToRgb } from 'ngx-tethys/util';
 import { useHostRenderer } from '@tethys/cdk/dom';
@@ -12,178 +12,141 @@ import { ThyIconModule } from 'ngx-tethys/icon';
  */
 class ThyStatistic {
     constructor() {
-        this.elementRef = inject(ElementRef);
-        this._initialized = false;
-        this.hostRenderer = useHostRenderer();
-        this.class = true;
+        /**
+         * @description 展示数据
+         * @type number | string
+         */
+        this.thyValue = input();
         /**
          * @description 展示数据的 css 样式
          * @type { [key: string]: string; }
          */
-        this.thyValueStyle = {};
+        this.thyValueStyle = input({});
+        /**
+         * @description 展示数据的前缀
+         * @type string
+         */
+        this.thyPrefix = input();
+        /**
+         * @description 展示数据的后缀
+         * @type string
+         */
+        this.thySuffix = input();
+        /**
+         * @description 展示数据的标题
+         * @type string
+         */
+        this.thyTitle = input();
         /**
          * @description 展示数据标题的位置，可设置 `top`｜`bottom`
          * @type ThyStatisticTitlePosition
          */
-        this.thyTitlePosition = 'bottom';
+        this.thyTitlePosition = input('bottom');
+        /**
+         * @description 展示形状
+         * @type ThyStatisticShape
+         * @default card
+         */
+        this.thyShape = input();
+        /**
+         * @description 主题颜色，可以使用提供的主题色，也可以自定义颜色。 `ThyStatisticColorType` 中包含 `primary` | `success` | `warning` | `danger` | `info`
+         * @type ThyStatisticColorType ｜ string
+         */
+        this.thyColor = input();
+        /**
+         * @description 前缀和展示数据字体大小
+         * @type ThyStatisticSizes
+         * @default default
+         */
+        this.thySize = input('default');
+        /**
+         * @description 自定义展示数据模板
+         * @type TemplateRef<void>
+         */
+        this.thyValueTemplate = input();
+        /**
+         * @description 自定义标题模板
+         * @type TemplateRef<void>
+         */
+        this.thyTitleTemplate = input();
+        /**
+         * @description 自定义前缀模板
+         * @type TemplateRef<void>
+         */
+        this.thyPrefixTemplate = input();
+        /**
+         * @description 自定义后缀模板
+         * @type TemplateRef<void>
+         */
+        this.thySuffixTemplate = input();
+        /**
+         * @description 自定义展示数据模板
+         * @type TemplateRef<void>
+         */
+        this.contentValueTemplate = contentChild('value');
+        /**
+         * @description 自定义标题模板
+         * @type TemplateRef<void>
+         */
+        this.contentTitleTemplate = contentChild('title');
+        /**
+         * @description 自定义前缀模板
+         * @type TemplateRef<void>
+         */
+        this.contentPrefixTemplate = contentChild('prefix');
+        /**
+         * @description 自定义后缀模板
+         * @type TemplateRef<void>
+         */
+        this.contentSuffixTemplate = contentChild('suffix');
+        this.valueTemplate = computed(() => {
+            return this.thyValueTemplate() || this.contentValueTemplate();
+        });
+        this.titleTemplate = computed(() => {
+            return this.thyTitleTemplate() || this.contentTitleTemplate();
+        });
+        this.prefixTemplate = computed(() => {
+            return this.thyPrefixTemplate() || this.contentPrefixTemplate();
+        });
+        this.suffixTemplate = computed(() => {
+            return this.thySuffixTemplate() || this.contentSuffixTemplate();
+        });
+        this.hostRenderer = useHostRenderer();
+        effect(() => {
+            this.setClassesByType();
+        });
     }
-    /**
-     * @description 展示形状
-     * @type ThyStatisticShape
-     * @default card
-     */
-    set thyShape(value) {
-        this._shape = value;
-        if (this._initialized) {
-            this._setClassesByType();
+    setClassesByType() {
+        const classNames = [];
+        if (this.thyColor()) {
+            if (RegExp(/^#([0-9a-fA-F]{6}|[0-9a-fA-F]{3})$/).test(this.thyColor())) {
+                this.setColor(this.thyColor());
+            }
+            else {
+                classNames.push(`thy-statistic-${this.thyColor()}`);
+            }
         }
-    }
-    /**
-     * @description 前缀和展示数据字体大小
-     * @type ThyStatisticSizes
-     * @default default
-     */
-    set thySize(value) {
-        this._size = value;
-        if (this._initialized) {
-            this._setClassesByType();
+        if (this.thyShape()) {
+            classNames.push(`thy-statistic-${this.thyShape()}`);
         }
-    }
-    /**
-     * @description 自定义展示数据模板
-     * @type TemplateRef<void>
-     */
-    set thyValueTemplate(value) {
-        this.valueTemplate = value;
-    }
-    /**
-     * @description 自定义展示数据模板
-     * @type TemplateRef<void>
-     */
-    set value(value) {
-        this.valueTemplate = value;
-    }
-    /**
-     * @description 自定义标题模板
-     * @type TemplateRef<void>
-     */
-    set thyTitleTemplate(value) {
-        this.titleTemplate = value;
-    }
-    /**
-     * @description 自定义标题模板
-     * @type TemplateRef<void>
-     */
-    set title(value) {
-        this.titleTemplate = value;
-    }
-    /**
-     * @description 自定义前缀模板
-     * @type TemplateRef<void>
-     */
-    set thyPrefixTemplate(value) {
-        this.prefixTemplate = value;
-    }
-    /**
-     * @description 自定义前缀模板
-     * @type TemplateRef<void>
-     */
-    set prefix(value) {
-        this.prefixTemplate = value;
-    }
-    /**
-     * @description 自定义后缀模板
-     * @type TemplateRef<void>
-     */
-    set thySuffixTemplate(value) {
-        this.suffixTemplate = value;
-    }
-    /**
-     * @description 自定义后缀模板
-     * @type TemplateRef<void>
-     */
-    set suffix(value) {
-        this.suffixTemplate = value;
-    }
-    ngOnInit() {
-        this._setClassesByType();
-        this._initialized = true;
+        classNames.push(`thy-statistic-${this.thySize()}`);
+        this.hostRenderer.setStyle('font-size', this.thySize());
+        this.hostRenderer.updateClass(classNames);
     }
     setColor(color) {
         this.hostRenderer.setStyle('color', color);
-        if (this._shape === 'card') {
+        if (this.thyShape() === 'card') {
             this.hostRenderer.setStyle('border-color', color);
             this.hostRenderer.setStyle('background-color', hexToRgb(color, 0.05));
         }
     }
-    _setClassesByType() {
-        const classNames = [];
-        if (this.thyColor) {
-            if (RegExp(/^#([0-9a-fA-F]{6}|[0-9a-fA-F]{3})$/).test(this.thyColor)) {
-                this.setColor(this.thyColor);
-            }
-            else {
-                classNames.push(`thy-statistic-${this.thyColor}`);
-            }
-        }
-        if (this._shape) {
-            classNames.push(`thy-statistic-${this._shape}`);
-        }
-        if (!this._size) {
-            this._size = 'default';
-        }
-        classNames.push(`thy-statistic-${this._size}`);
-        this.hostRenderer.setStyle('font-size', this.thySize);
-        this.hostRenderer.updateClass(classNames);
-    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ThyStatistic, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.8", type: ThyStatistic, isStandalone: true, selector: "thy-statistic", inputs: { thyValue: "thyValue", thyValueStyle: "thyValueStyle", thyPrefix: "thyPrefix", thySuffix: "thySuffix", thyTitle: "thyTitle", thyTitlePosition: "thyTitlePosition", thyShape: "thyShape", thyColor: "thyColor", thySize: "thySize", thyValueTemplate: "thyValueTemplate", thyTitleTemplate: "thyTitleTemplate", thyPrefixTemplate: "thyPrefixTemplate", thySuffixTemplate: "thySuffixTemplate" }, host: { properties: { "class.thy-statistic": "this.class" } }, queries: [{ propertyName: "value", first: true, predicate: ["value"], descendants: true, static: true }, { propertyName: "title", first: true, predicate: ["title"], descendants: true, static: true }, { propertyName: "prefix", first: true, predicate: ["prefix"], descendants: true, static: true }, { propertyName: "suffix", first: true, predicate: ["suffix"], descendants: true, static: true }], ngImport: i0, template: "@if ((thyTitle || titleTemplate) && thyTitlePosition === 'top') {\n  <ng-container [ngTemplateOutlet]=\"title\"></ng-container>\n}\n<div class=\"thy-statistic-content\" [ngStyle]=\"thyValueStyle\">\n  @if (thyPrefix || prefixTemplate) {\n    <span class=\"thy-statistic-content-prefix\">\n      @if (thyPrefix) {\n        <span>{{ thyPrefix }}</span>\n      }\n      @if (prefixTemplate) {\n        <ng-container [ngTemplateOutlet]=\"prefixTemplate\"></ng-container>\n      }\n    </span>\n  }\n\n  <span class=\"thy-statistic-content-value\">\n    @if (!valueTemplate) {\n      <span>{{ thyValue }}</span>\n    }\n    @if (valueTemplate) {\n      <ng-container [ngTemplateOutlet]=\"valueTemplate\"></ng-container>\n    }\n  </span>\n\n  @if (thySuffix || suffixTemplate) {\n    <span class=\"thy-statistic-content-suffix\">\n      @if (thySuffix) {\n        <span>{{ thySuffix }}</span>\n      }\n      @if (suffixTemplate) {\n        <ng-container [ngTemplateOutlet]=\"suffixTemplate\"></ng-container>\n      }\n    </span>\n  }\n</div>\n@if ((thyTitle || titleTemplate) && thyTitlePosition === 'bottom') {\n  <ng-container [ngTemplateOutlet]=\"title\"></ng-container>\n}\n\n<ng-template #title>\n  <div class=\"thy-statistic-title\">\n    @if (thyTitle) {\n      <span>{{ thyTitle }}</span>\n    }\n    <ng-container [ngTemplateOutlet]=\"titleTemplate\"></ng-container>\n  </div>\n</ng-template>\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.8", type: ThyStatistic, isStandalone: true, selector: "thy-statistic", inputs: { thyValue: { classPropertyName: "thyValue", publicName: "thyValue", isSignal: true, isRequired: false, transformFunction: null }, thyValueStyle: { classPropertyName: "thyValueStyle", publicName: "thyValueStyle", isSignal: true, isRequired: false, transformFunction: null }, thyPrefix: { classPropertyName: "thyPrefix", publicName: "thyPrefix", isSignal: true, isRequired: false, transformFunction: null }, thySuffix: { classPropertyName: "thySuffix", publicName: "thySuffix", isSignal: true, isRequired: false, transformFunction: null }, thyTitle: { classPropertyName: "thyTitle", publicName: "thyTitle", isSignal: true, isRequired: false, transformFunction: null }, thyTitlePosition: { classPropertyName: "thyTitlePosition", publicName: "thyTitlePosition", isSignal: true, isRequired: false, transformFunction: null }, thyShape: { classPropertyName: "thyShape", publicName: "thyShape", isSignal: true, isRequired: false, transformFunction: null }, thyColor: { classPropertyName: "thyColor", publicName: "thyColor", isSignal: true, isRequired: false, transformFunction: null }, thySize: { classPropertyName: "thySize", publicName: "thySize", isSignal: true, isRequired: false, transformFunction: null }, thyValueTemplate: { classPropertyName: "thyValueTemplate", publicName: "thyValueTemplate", isSignal: true, isRequired: false, transformFunction: null }, thyTitleTemplate: { classPropertyName: "thyTitleTemplate", publicName: "thyTitleTemplate", isSignal: true, isRequired: false, transformFunction: null }, thyPrefixTemplate: { classPropertyName: "thyPrefixTemplate", publicName: "thyPrefixTemplate", isSignal: true, isRequired: false, transformFunction: null }, thySuffixTemplate: { classPropertyName: "thySuffixTemplate", publicName: "thySuffixTemplate", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.thy-statistic": "true" } }, queries: [{ propertyName: "contentValueTemplate", first: true, predicate: ["value"], descendants: true, isSignal: true }, { propertyName: "contentTitleTemplate", first: true, predicate: ["title"], descendants: true, isSignal: true }, { propertyName: "contentPrefixTemplate", first: true, predicate: ["prefix"], descendants: true, isSignal: true }, { propertyName: "contentSuffixTemplate", first: true, predicate: ["suffix"], descendants: true, isSignal: true }], ngImport: i0, template: "@if ((thyTitle() || titleTemplate()) && thyTitlePosition() === 'top') {\n  <ng-container [ngTemplateOutlet]=\"title\"></ng-container>\n}\n<div class=\"thy-statistic-content\" [ngStyle]=\"thyValueStyle()\">\n  @if (thyPrefix() || prefixTemplate()) {\n    <span class=\"thy-statistic-content-prefix\">\n      @if (thyPrefix()) {\n        <span>{{ thyPrefix() }}</span>\n      }\n      @if (prefixTemplate()) {\n        <ng-container [ngTemplateOutlet]=\"prefixTemplate()\"></ng-container>\n      }\n    </span>\n  }\n\n  <span class=\"thy-statistic-content-value\">\n    @if (!valueTemplate()) {\n      <span>{{ thyValue() }}</span>\n    }\n    @if (valueTemplate()) {\n      <ng-container [ngTemplateOutlet]=\"valueTemplate()\"></ng-container>\n    }\n  </span>\n\n  @if (thySuffix() || suffixTemplate()) {\n    <span class=\"thy-statistic-content-suffix\">\n      @if (thySuffix()) {\n        <span>{{ thySuffix() }}</span>\n      }\n      @if (suffixTemplate()) {\n        <ng-container [ngTemplateOutlet]=\"suffixTemplate()\"></ng-container>\n      }\n    </span>\n  }\n</div>\n@if ((thyTitle() || titleTemplate()) && thyTitlePosition() === 'bottom') {\n  <ng-container [ngTemplateOutlet]=\"title\"></ng-container>\n}\n\n<ng-template #title>\n  <div class=\"thy-statistic-title\">\n    @if (thyTitle()) {\n      <span>{{ thyTitle() }}</span>\n    }\n    <ng-container [ngTemplateOutlet]=\"titleTemplate()\"></ng-container>\n  </div>\n</ng-template>\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ThyStatistic, decorators: [{
             type: Component,
-            args: [{ selector: 'thy-statistic', imports: [NgTemplateOutlet, NgStyle], template: "@if ((thyTitle || titleTemplate) && thyTitlePosition === 'top') {\n  <ng-container [ngTemplateOutlet]=\"title\"></ng-container>\n}\n<div class=\"thy-statistic-content\" [ngStyle]=\"thyValueStyle\">\n  @if (thyPrefix || prefixTemplate) {\n    <span class=\"thy-statistic-content-prefix\">\n      @if (thyPrefix) {\n        <span>{{ thyPrefix }}</span>\n      }\n      @if (prefixTemplate) {\n        <ng-container [ngTemplateOutlet]=\"prefixTemplate\"></ng-container>\n      }\n    </span>\n  }\n\n  <span class=\"thy-statistic-content-value\">\n    @if (!valueTemplate) {\n      <span>{{ thyValue }}</span>\n    }\n    @if (valueTemplate) {\n      <ng-container [ngTemplateOutlet]=\"valueTemplate\"></ng-container>\n    }\n  </span>\n\n  @if (thySuffix || suffixTemplate) {\n    <span class=\"thy-statistic-content-suffix\">\n      @if (thySuffix) {\n        <span>{{ thySuffix }}</span>\n      }\n      @if (suffixTemplate) {\n        <ng-container [ngTemplateOutlet]=\"suffixTemplate\"></ng-container>\n      }\n    </span>\n  }\n</div>\n@if ((thyTitle || titleTemplate) && thyTitlePosition === 'bottom') {\n  <ng-container [ngTemplateOutlet]=\"title\"></ng-container>\n}\n\n<ng-template #title>\n  <div class=\"thy-statistic-title\">\n    @if (thyTitle) {\n      <span>{{ thyTitle }}</span>\n    }\n    <ng-container [ngTemplateOutlet]=\"titleTemplate\"></ng-container>\n  </div>\n</ng-template>\n" }]
-        }], propDecorators: { class: [{
-                type: HostBinding,
-                args: [`class.thy-statistic`]
-            }], thyValue: [{
-                type: Input
-            }], thyValueStyle: [{
-                type: Input
-            }], thyPrefix: [{
-                type: Input
-            }], thySuffix: [{
-                type: Input
-            }], thyTitle: [{
-                type: Input
-            }], thyTitlePosition: [{
-                type: Input
-            }], thyShape: [{
-                type: Input
-            }], thyColor: [{
-                type: Input
-            }], thySize: [{
-                type: Input
-            }], thyValueTemplate: [{
-                type: Input
-            }], value: [{
-                type: ContentChild,
-                args: ['value', { static: true }]
-            }], thyTitleTemplate: [{
-                type: Input
-            }], title: [{
-                type: ContentChild,
-                args: ['title', { static: true }]
-            }], thyPrefixTemplate: [{
-                type: Input
-            }], prefix: [{
-                type: ContentChild,
-                args: ['prefix', { static: true }]
-            }], thySuffixTemplate: [{
-                type: Input
-            }], suffix: [{
-                type: ContentChild,
-                args: ['suffix', { static: true }]
-            }] } });
+            args: [{ selector: 'thy-statistic', imports: [NgTemplateOutlet, NgStyle], changeDetection: ChangeDetectionStrategy.OnPush, host: { '[class.thy-statistic]': 'true' }, template: "@if ((thyTitle() || titleTemplate()) && thyTitlePosition() === 'top') {\n  <ng-container [ngTemplateOutlet]=\"title\"></ng-container>\n}\n<div class=\"thy-statistic-content\" [ngStyle]=\"thyValueStyle()\">\n  @if (thyPrefix() || prefixTemplate()) {\n    <span class=\"thy-statistic-content-prefix\">\n      @if (thyPrefix()) {\n        <span>{{ thyPrefix() }}</span>\n      }\n      @if (prefixTemplate()) {\n        <ng-container [ngTemplateOutlet]=\"prefixTemplate()\"></ng-container>\n      }\n    </span>\n  }\n\n  <span class=\"thy-statistic-content-value\">\n    @if (!valueTemplate()) {\n      <span>{{ thyValue() }}</span>\n    }\n    @if (valueTemplate()) {\n      <ng-container [ngTemplateOutlet]=\"valueTemplate()\"></ng-container>\n    }\n  </span>\n\n  @if (thySuffix() || suffixTemplate()) {\n    <span class=\"thy-statistic-content-suffix\">\n      @if (thySuffix()) {\n        <span>{{ thySuffix() }}</span>\n      }\n      @if (suffixTemplate()) {\n        <ng-container [ngTemplateOutlet]=\"suffixTemplate()\"></ng-container>\n      }\n    </span>\n  }\n</div>\n@if ((thyTitle() || titleTemplate()) && thyTitlePosition() === 'bottom') {\n  <ng-container [ngTemplateOutlet]=\"title\"></ng-container>\n}\n\n<ng-template #title>\n  <div class=\"thy-statistic-title\">\n    @if (thyTitle()) {\n      <span>{{ thyTitle() }}</span>\n    }\n    <ng-container [ngTemplateOutlet]=\"titleTemplate()\"></ng-container>\n  </div>\n</ng-template>\n" }]
+        }], ctorParameters: () => [] });
 
 class ThyStatisticModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ThyStatisticModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }

package/fesm2022/ngx-tethys-statistic.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ngx-tethys-statistic.mjs","sources":["../../../src/statistic/statistic.component.ts","../../../src/statistic/statistic.component.html","../../../src/statistic/statistic.module.ts","../../../src/statistic/ngx-tethys-statistic.ts"],"sourcesContent":["import { OnInit, Component, Input, HostBinding, ElementRef, TemplateRef, ContentChild, inject } from '@angular/core';\nimport { hexToRgb } from 'ngx-tethys/util';\nimport { useHostRenderer } from '@tethys/cdk/dom';\nimport { NgTemplateOutlet, NgStyle } from '@angular/common';\n\nexport type ThyStatisticColorType = 'primary' | 'success' | 'warning' | 'danger' | 'info';\n\nexport type ThyStatisticShape = 'card';\n\nexport type ThyStatisticSizes = 'default';\n\nexport type ThyStatisticTitlePosition = 'top' | 'bottom';\n\n/**\n * 用于展示数据统计\n * @name thy-statistic\n */\n@Component({\n    selector: 'thy-statistic',\n    templateUrl: './statistic.component.html',\n    imports: [NgTemplateOutlet, NgStyle]\n})\nexport class ThyStatistic implements OnInit {\n    private elementRef = inject(ElementRef);\n\n    _shape: ThyStatisticShape;\n\n    _initialized = false;\n\n    _size: ThyStatisticSizes;\n\n    prefixTemplate: TemplateRef<void>;\n\n    suffixTemplate: TemplateRef<void>;\n\n    valueTemplate: TemplateRef<void>;\n\n    titleTemplate: TemplateRef<void>;\n\n    private hostRenderer = useHostRenderer();\n\n    @HostBinding(`class.thy-statistic`) class = true;\n\n    /**\n     * @description 展示数据\n     * @type number | string\n     */\n    @Input() thyValue: number | string;\n\n    /**\n     * @description 展示数据的 css 样式\n     * @type { [key: string]: string; }\n     */\n    @Input() thyValueStyle: { [key: string]: string } = {};\n\n    /**\n     * @description 展示数据的前缀\n     * @type string\n     */\n    @Input() thyPrefix: string;\n\n    /**\n     * @description 展示数据的后缀\n     * @type string\n     */\n    @Input() thySuffix: string;\n\n    /**\n     * @description 展示数据的标题\n     * @type string\n     */\n    @Input() thyTitle: string;\n\n    /**\n     * @description 展示数据标题的位置，可设置 `top`｜`bottom`\n     * @type ThyStatisticTitlePosition\n     */\n    @Input() thyTitlePosition: ThyStatisticTitlePosition = 'bottom';\n\n    /**\n     * @description 展示形状\n     * @type ThyStatisticShape\n     * @default card\n     */\n    @Input()\n    set thyShape(value: ThyStatisticShape) {\n        this._shape = value;\n        if (this._initialized) {\n            this._setClassesByType();\n        }\n    }\n\n    /**\n     * @description 主题颜色，可以使用提供的主题色，也可以自定义颜色。 `ThyStatisticColorType` 中包含 `primary` | `success` | `warning` | `danger` | `info`\n     * @type ThyStatisticColorType ｜ string\n     */\n    @Input() thyColor: string | ThyStatisticColorType;\n\n    /**\n     * @description 前缀和展示数据字体大小\n     * @type ThyStatisticSizes\n     * @default default\n     */\n    @Input()\n    set thySize(value: ThyStatisticSizes) {\n        this._size = value;\n        if (this._initialized) {\n            this._setClassesByType();\n        }\n    }\n\n    /**\n     * @description 自定义展示数据模板\n     * @type TemplateRef<void>\n     */\n    @Input() set thyValueTemplate(value: TemplateRef<void>) {\n        this.valueTemplate = value;\n    }\n\n    /**\n     * @description 自定义展示数据模板\n     * @type TemplateRef<void>\n     */\n    @ContentChild('value', { static: true }) set value(value: TemplateRef<void>) {\n        this.valueTemplate = value;\n    }\n\n    /**\n     * @description 自定义标题模板\n     * @type TemplateRef<void>\n     */\n    @Input() set thyTitleTemplate(value: TemplateRef<void>) {\n        this.titleTemplate = value;\n    }\n\n    /**\n     * @description 自定义标题模板\n     * @type TemplateRef<void>\n     */\n    @ContentChild('title', { static: true }) set title(value: TemplateRef<void>) {\n        this.titleTemplate = value;\n    }\n\n    /**\n     * @description 自定义前缀模板\n     * @type TemplateRef<void>\n     */\n    @Input() set thyPrefixTemplate(value: TemplateRef<void>) {\n        this.prefixTemplate = value;\n    }\n\n    /**\n     * @description 自定义前缀模板\n     * @type TemplateRef<void>\n     */\n    @ContentChild('prefix', { static: true }) set prefix(value: TemplateRef<void>) {\n        this.prefixTemplate = value;\n    }\n\n    /**\n     * @description 自定义后缀模板\n     * @type TemplateRef<void>\n     */\n    @Input() set thySuffixTemplate(value: TemplateRef<void>) {\n        this.suffixTemplate = value;\n    }\n    /**\n     * @description 自定义后缀模板\n     * @type TemplateRef<void>\n     */\n    @ContentChild('suffix', { static: true }) set suffix(value: TemplateRef<void>) {\n        this.suffixTemplate = value;\n    }\n\n    ngOnInit() {\n        this._setClassesByType();\n        this._initialized = true;\n    }\n\n    setColor(color: string) {\n        this.hostRenderer.setStyle('color', color);\n        if (this._shape === 'card') {\n            this.hostRenderer.setStyle('border-color', color);\n            this.hostRenderer.setStyle('background-color', hexToRgb(color, 0.05));\n        }\n    }\n\n    _setClassesByType() {\n        const classNames = [];\n        if (this.thyColor) {\n            if (RegExp(/^#([0-9a-fA-F]{6}|[0-9a-fA-F]{3})$/).test(this.thyColor)) {\n                this.setColor(this.thyColor);\n            } else {\n                classNames.push(`thy-statistic-${this.thyColor}`);\n            }\n        }\n        if (this._shape) {\n            classNames.push(`thy-statistic-${this._shape}`);\n        }\n        if (!this._size) {\n            this._size = 'default';\n        }\n        classNames.push(`thy-statistic-${this._size}`);\n\n        this.hostRenderer.setStyle('font-size', this.thySize);\n        this.hostRenderer.updateClass(classNames);\n    }\n}\n","@if ((thyTitle || titleTemplate) && thyTitlePosition === 'top') {\n  <ng-container [ngTemplateOutlet]=\"title\"></ng-container>\n}\n<div class=\"thy-statistic-content\" [ngStyle]=\"thyValueStyle\">\n  @if (thyPrefix || prefixTemplate) {\n    <span class=\"thy-statistic-content-prefix\">\n      @if (thyPrefix) {\n        <span>{{ thyPrefix }}</span>\n      }\n      @if (prefixTemplate) {\n        <ng-container [ngTemplateOutlet]=\"prefixTemplate\"></ng-container>\n      }\n    </span>\n  }\n\n  <span class=\"thy-statistic-content-value\">\n    @if (!valueTemplate) {\n      <span>{{ thyValue }}</span>\n    }\n    @if (valueTemplate) {\n      <ng-container [ngTemplateOutlet]=\"valueTemplate\"></ng-container>\n    }\n  </span>\n\n  @if (thySuffix || suffixTemplate) {\n    <span class=\"thy-statistic-content-suffix\">\n      @if (thySuffix) {\n        <span>{{ thySuffix }}</span>\n      }\n      @if (suffixTemplate) {\n        <ng-container [ngTemplateOutlet]=\"suffixTemplate\"></ng-container>\n      }\n    </span>\n  }\n</div>\n@if ((thyTitle || titleTemplate) && thyTitlePosition === 'bottom') {\n  <ng-container [ngTemplateOutlet]=\"title\"></ng-container>\n}\n\n<ng-template #title>\n  <div class=\"thy-statistic-title\">\n    @if (thyTitle) {\n      <span>{{ thyTitle }}</span>\n    }\n    <ng-container [ngTemplateOutlet]=\"titleTemplate\"></ng-container>\n  </div>\n</ng-template>\n","import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { ThySharedModule } from 'ngx-tethys/shared';\nimport { ThyStatistic } from './statistic.component';\nimport { ThyIconModule } from 'ngx-tethys/icon';\n\n@NgModule({\n    imports: [CommonModule, ThySharedModule, ThyIconModule, ThyStatistic],\n    exports: [ThyStatistic],\n    providers: []\n})\nexport class ThyStatisticModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"ngx-tethys-statistic.mjs","sources":["../../../src/statistic/statistic.component.ts","../../../src/statistic/statistic.component.html","../../../src/statistic/statistic.module.ts","../../../src/statistic/ngx-tethys-statistic.ts"],"sourcesContent":["import { Component, TemplateRef, ChangeDetectionStrategy, input, contentChild, effect, computed } from '@angular/core';\nimport { hexToRgb } from 'ngx-tethys/util';\nimport { useHostRenderer } from '@tethys/cdk/dom';\nimport { NgTemplateOutlet, NgStyle } from '@angular/common';\n\nexport type ThyStatisticColorType = 'primary' | 'success' | 'warning' | 'danger' | 'info';\n\nexport type ThyStatisticShape = 'card';\n\nexport type ThyStatisticSizes = 'default';\n\nexport type ThyStatisticTitlePosition = 'top' | 'bottom';\n\n/**\n * 用于展示数据统计\n * @name thy-statistic\n */\n@Component({\n    selector: 'thy-statistic',\n    templateUrl: './statistic.component.html',\n    imports: [NgTemplateOutlet, NgStyle],\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    host: { '[class.thy-statistic]': 'true' }\n})\nexport class ThyStatistic {\n    /**\n     * @description 展示数据\n     * @type number | string\n     */\n    readonly thyValue = input<number | string>();\n\n    /**\n     * @description 展示数据的 css 样式\n     * @type { [key: string]: string; }\n     */\n    readonly thyValueStyle = input<{ [key: string]: string }>({});\n\n    /**\n     * @description 展示数据的前缀\n     * @type string\n     */\n    readonly thyPrefix = input<string>();\n\n    /**\n     * @description 展示数据的后缀\n     * @type string\n     */\n    readonly thySuffix = input<string>();\n\n    /**\n     * @description 展示数据的标题\n     * @type string\n     */\n    readonly thyTitle = input<string>();\n\n    /**\n     * @description 展示数据标题的位置，可设置 `top`｜`bottom`\n     * @type ThyStatisticTitlePosition\n     */\n    readonly thyTitlePosition = input<ThyStatisticTitlePosition>('bottom');\n\n    /**\n     * @description 展示形状\n     * @type ThyStatisticShape\n     * @default card\n     */\n    readonly thyShape = input<ThyStatisticShape>();\n\n    /**\n     * @description 主题颜色，可以使用提供的主题色，也可以自定义颜色。 `ThyStatisticColorType` 中包含 `primary` | `success` | `warning` | `danger` | `info`\n     * @type ThyStatisticColorType ｜ string\n     */\n    readonly thyColor = input<string | ThyStatisticColorType>();\n\n    /**\n     * @description 前缀和展示数据字体大小\n     * @type ThyStatisticSizes\n     * @default default\n     */\n    readonly thySize = input<ThyStatisticSizes>('default');\n\n    /**\n     * @description 自定义展示数据模板\n     * @type TemplateRef<void>\n     */\n    readonly thyValueTemplate = input<TemplateRef<void>>();\n\n    /**\n     * @description 自定义标题模板\n     * @type TemplateRef<void>\n     */\n    readonly thyTitleTemplate = input<TemplateRef<void>>();\n\n    /**\n     * @description 自定义前缀模板\n     * @type TemplateRef<void>\n     */\n    readonly thyPrefixTemplate = input<TemplateRef<void>>();\n\n    /**\n     * @description 自定义后缀模板\n     * @type TemplateRef<void>\n     */\n    readonly thySuffixTemplate = input<TemplateRef<void>>();\n\n    /**\n     * @description 自定义展示数据模板\n     * @type TemplateRef<void>\n     */\n    readonly contentValueTemplate = contentChild<TemplateRef<void>>('value');\n\n    /**\n     * @description 自定义标题模板\n     * @type TemplateRef<void>\n     */\n    readonly contentTitleTemplate = contentChild<TemplateRef<void>>('title');\n\n    /**\n     * @description 自定义前缀模板\n     * @type TemplateRef<void>\n     */\n    readonly contentPrefixTemplate = contentChild<TemplateRef<void>>('prefix');\n\n    /**\n     * @description 自定义后缀模板\n     * @type TemplateRef<void>\n     */\n    readonly contentSuffixTemplate = contentChild<TemplateRef<void>>('suffix');\n\n    readonly valueTemplate = computed(() => {\n        return this.thyValueTemplate() || this.contentValueTemplate();\n    });\n\n    readonly titleTemplate = computed(() => {\n        return this.thyTitleTemplate() || this.contentTitleTemplate();\n    });\n\n    readonly prefixTemplate = computed(() => {\n        return this.thyPrefixTemplate() || this.contentPrefixTemplate();\n    });\n\n    readonly suffixTemplate = computed(() => {\n        return this.thySuffixTemplate() || this.contentSuffixTemplate();\n    });\n\n    private hostRenderer = useHostRenderer();\n\n    constructor() {\n        effect(() => {\n            this.setClassesByType();\n        });\n    }\n\n    private setClassesByType() {\n        const classNames = [];\n        if (this.thyColor()) {\n            if (RegExp(/^#([0-9a-fA-F]{6}|[0-9a-fA-F]{3})$/).test(this.thyColor())) {\n                this.setColor(this.thyColor());\n            } else {\n                classNames.push(`thy-statistic-${this.thyColor()}`);\n            }\n        }\n        if (this.thyShape()) {\n            classNames.push(`thy-statistic-${this.thyShape()}`);\n        }\n        classNames.push(`thy-statistic-${this.thySize()}`);\n\n        this.hostRenderer.setStyle('font-size', this.thySize());\n        this.hostRenderer.updateClass(classNames);\n    }\n\n    private setColor(color: string) {\n        this.hostRenderer.setStyle('color', color);\n        if (this.thyShape() === 'card') {\n            this.hostRenderer.setStyle('border-color', color);\n            this.hostRenderer.setStyle('background-color', hexToRgb(color, 0.05));\n        }\n    }\n}\n","@if ((thyTitle() || titleTemplate()) && thyTitlePosition() === 'top') {\n  <ng-container [ngTemplateOutlet]=\"title\"></ng-container>\n}\n<div class=\"thy-statistic-content\" [ngStyle]=\"thyValueStyle()\">\n  @if (thyPrefix() || prefixTemplate()) {\n    <span class=\"thy-statistic-content-prefix\">\n      @if (thyPrefix()) {\n        <span>{{ thyPrefix() }}</span>\n      }\n      @if (prefixTemplate()) {\n        <ng-container [ngTemplateOutlet]=\"prefixTemplate()\"></ng-container>\n      }\n    </span>\n  }\n\n  <span class=\"thy-statistic-content-value\">\n    @if (!valueTemplate()) {\n      <span>{{ thyValue() }}</span>\n    }\n    @if (valueTemplate()) {\n      <ng-container [ngTemplateOutlet]=\"valueTemplate()\"></ng-container>\n    }\n  </span>\n\n  @if (thySuffix() || suffixTemplate()) {\n    <span class=\"thy-statistic-content-suffix\">\n      @if (thySuffix()) {\n        <span>{{ thySuffix() }}</span>\n      }\n      @if (suffixTemplate()) {\n        <ng-container [ngTemplateOutlet]=\"suffixTemplate()\"></ng-container>\n      }\n    </span>\n  }\n</div>\n@if ((thyTitle() || titleTemplate()) && thyTitlePosition() === 'bottom') {\n  <ng-container [ngTemplateOutlet]=\"title\"></ng-container>\n}\n\n<ng-template #title>\n  <div class=\"thy-statistic-title\">\n    @if (thyTitle()) {\n      <span>{{ thyTitle() }}</span>\n    }\n    <ng-container [ngTemplateOutlet]=\"titleTemplate()\"></ng-container>\n  </div>\n</ng-template>\n","import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { ThySharedModule } from 'ngx-tethys/shared';\nimport { ThyStatistic } from './statistic.component';\nimport { ThyIconModule } from 'ngx-tethys/icon';\n\n@NgModule({\n    imports: [CommonModule, ThySharedModule, ThyIconModule, ThyStatistic],\n    exports: [ThyStatistic],\n    providers: []\n})\nexport class ThyStatisticModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}