ngx-tethys 19.0.16 → 19.1.0-next.1

package/fesm2022/ngx-tethys-grid.mjs

@@ -1,7 +1,7 @@
 import * as i0 from '@angular/core';
-import { Input, Directive, inject, InjectionToken, ElementRef, DestroyRef, ChangeDetectionStrategy, Component, NgZone, ContentChildren, NgModule } from '@angular/core';
+import { input, effect, Directive, inject, computed, afterNextRender, InjectionToken, ElementRef, DestroyRef, ChangeDetectionStrategy, Component, NgZone, contentChildren, NgModule } from '@angular/core';
 import { ReplaySubject, Subject, Observable } from 'rxjs';
-import { isString, hasLaterChange } from 'ngx-tethys/util';
+import { isString } from 'ngx-tethys/util';
 import { useHostRenderer } from '@tethys/cdk/dom';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { ViewportRuler } from '@angular/cdk/scrolling';
@@ -15,16 +15,16 @@ import { isUndefinedOrNull } from '@tethys/cdk/is';
  */
 class ThyRowDirective {
     constructor() {
+        /**
+         * 栅格的间距
+         */
+        this.thyGutter = input();
         this.actualGutter$ = new ReplaySubject(1);
         this.hostRenderer = useHostRenderer();
+        effect(() => {
+            this.setGutterStyle();
+        });
     }
-    ngOnInit() {
-        this.setGutterStyle();
-    }
-    ngOnChanges() {
-        this.setGutterStyle();
-    }
-    ngAfterViewInit() { }
     setGutterStyle() {
         const [horizontalGutter, verticalGutter] = this.getGutter();
         this.actualGutter$.next([horizontalGutter, verticalGutter]);
@@ -41,13 +41,14 @@ class ThyRowDirective {
         }
     }
     getGutter() {
-        if (isString(this.thyGutter)) {
+        const thyGutter = this.thyGutter();
+        if (isString(thyGutter)) {
             throw Error(`thyGutter value can not be string type`);
         }
-        return [this.thyGutter, 0];
+        return [thyGutter, 0];
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ThyRowDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.8", type: ThyRowDirective, isStandalone: true, selector: "[thyRow]", inputs: { thyGutter: "thyGutter" }, host: { classAttribute: "thy-row" }, usesOnChanges: true, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.8", type: ThyRowDirective, isStandalone: true, selector: "[thyRow]", inputs: { thyGutter: { classPropertyName: "thyGutter", publicName: "thyGutter", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "thy-row" }, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ThyRowDirective, decorators: [{
             type: Directive,
@@ -57,9 +58,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImpor
                         class: 'thy-row'
                     }
                 }]
-        }], ctorParameters: () => [], propDecorators: { thyGutter: [{
-                type: Input
-            }] } });
+        }], ctorParameters: () => [] });
 
 /**
  * 栅格列指令
@@ -69,43 +68,49 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImpor
 class ThyColDirective {
     constructor() {
         this.thyRowDirective = inject(ThyRowDirective, { optional: true, host: true });
+        /**
+         * 栅格项的占位列数，thySpan 如果传递了值，以 thySpan 为准
+         */
+        this.thyCol = input();
+        /**
+         * 栅格项的占位列数
+         */
+        this.thySpan = input();
+        this.span = computed(() => {
+            const span = this.thySpan() ?? this.thyCol();
+            return span || 24;
+        });
         this.hostRenderer = useHostRenderer();
         this.takeUntilDestroyed = takeUntilDestroyed();
-    }
-    get span() {
-        const span = this.thySpan ?? this.thyCol;
-        return span || 24;
-    }
-    ngOnInit() {
-        this.updateHostClass();
-    }
-    ngOnChanges(changes) {
-        this.updateHostClass();
-    }
-    ngAfterViewInit() {
-        if (this.thyRowDirective) {
-            this.thyRowDirective.actualGutter$.pipe(this.takeUntilDestroyed).subscribe(([horizontalGutter, verticalGutter]) => {
-                const renderGutter = (name, gutter) => {
-                    this.hostRenderer.setStyle(name, `${gutter / 2}px`);
-                };
-                if (horizontalGutter > 0) {
-                    renderGutter('padding-left', horizontalGutter);
-                    renderGutter('padding-right', horizontalGutter);
-                }
-                if (verticalGutter > 0) {
-                    renderGutter('padding-top', verticalGutter);
-                    renderGutter('padding-bottom', verticalGutter);
-                }
-            });
-        }
+        effect(() => {
+            this.updateHostClass();
+        });
+        afterNextRender(() => {
+            if (this.thyRowDirective) {
+                this.thyRowDirective.actualGutter$.pipe(this.takeUntilDestroyed).subscribe(([horizontalGutter, verticalGutter]) => {
+                    const renderGutter = (name, gutter) => {
+                        this.hostRenderer.setStyle(name, `${gutter / 2}px`);
+                    };
+                    if (horizontalGutter > 0) {
+                        renderGutter('padding-left', horizontalGutter);
+                        renderGutter('padding-right', horizontalGutter);
+                    }
+                    if (verticalGutter > 0) {
+                        renderGutter('padding-top', verticalGutter);
+                        renderGutter('padding-bottom', verticalGutter);
+                    }
+                });
+            }
+        });
     }
     updateHostClass() {
+        const span = this.span();
         this.hostRenderer.updateClassByMap({
-            [`thy-col-${this.span}`]: true
+            [`thy-col-${span}`]: true
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ThyColDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.8", type: ThyColDirective, isStandalone: true, selector: "[thyCol]", inputs: { thyCol: "thyCol", thySpan: "thySpan" }, host: { classAttribute: "thy-col" }, usesOnChanges: true, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.8", type: ThyColDirective, isStandalone: true, selector: "[thyCol]", inputs: { thyCol: { classPropertyName: "thyCol", publicName: "thyCol", isSignal: true, isRequired: false, transformFunction: null }, thySpan: { classPropertyName: "thySpan", publicName: "thySpan", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "thy-col" }, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ThyColDirective, decorators: [{
             type: Directive,
@@ -115,11 +120,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImpor
                         class: 'thy-col'
                     }
                 }]
-        }], propDecorators: { thyCol: [{
-                type: Input
-            }], thySpan: [{
-                type: Input
-            }] } });
+        }], ctorParameters: () => [] });
 
 class ThyGridToken {
 }
@@ -148,11 +149,11 @@ class ThyGridItem {
          * 栅格项的占位列数，为 0 时会隐藏该栅格项
          * @default 1
          */
-        this.thySpan = THY_GRID_ITEM_DEFAULT_SPAN;
+        this.thySpan = input(THY_GRID_ITEM_DEFAULT_SPAN);
         /**
          * 栅格项左侧的偏移列数
          */
-        this.thyOffset = 0;
+        this.thyOffset = input(0);
         this.destroyRef = inject(DestroyRef);
         this.hostRenderer = useHostRenderer();
         this.span = THY_GRID_ITEM_DEFAULT_SPAN;
@@ -170,7 +171,7 @@ class ThyGridItem {
         this.hostRenderer.setStyle('margin-left', this.offset ? `calc(((100% - ${(this.span - 1) * xGap}px) / ${this.span} + ${xGap}px) * ${this.offset})` : '');
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ThyGridItem, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.8", type: ThyGridItem, isStandalone: true, selector: "thy-grid-item,[thyGridItem]", inputs: { thySpan: "thySpan", thyOffset: "thyOffset" }, host: { classAttribute: "thy-grid-item" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.8", type: ThyGridItem, isStandalone: true, selector: "thy-grid-item,[thyGridItem]", inputs: { thySpan: { classPropertyName: "thySpan", publicName: "thySpan", isSignal: true, isRequired: false, transformFunction: null }, thyOffset: { classPropertyName: "thyOffset", publicName: "thyOffset", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "thy-grid-item" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ThyGridItem, decorators: [{
             type: Component,
@@ -182,11 +183,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImpor
                         class: 'thy-grid-item'
                     }
                 }]
-        }], propDecorators: { thySpan: [{
-                type: Input
-            }], thyOffset: [{
-                type: Input
-            }] } });
+        }] });
 
 /**
  * 栅格组件
@@ -199,66 +196,67 @@ class ThyGrid {
         this.elementRef = inject(ElementRef);
         this.viewportRuler = inject(ViewportRuler);
         this.ngZone = inject(NgZone);
+        /**
+         * @internal
+         */
+        this.gridItems = contentChildren(ThyGridItem);
         /**
          * 栅格的列数
          * @default 24
          */
-        this.thyCols = THY_GRID_DEFAULT_COLUMNS;
+        this.thyCols = input(THY_GRID_DEFAULT_COLUMNS);
         /**
          * 栅格的水平间隔
          */
-        this.thyXGap = 0;
+        this.thyXGap = input(0);
         /**
          * 栅格的垂直间隔
          */
-        this.thyYGap = 0;
+        this.thyYGap = input(0);
         /**
          * 栅格的水平和垂直间隔
          */
-        this.thyGap = 0;
+        this.thyGap = input(0);
         /**
          * 响应式栅格列数<br/>
          * none: 不进行响应式布局。<br/>
          * self：根据grid的自身宽度进行响应式布局。<br/>
          * screen：根据屏幕断点进行响应式布局，目前预设了5种响应式尺寸：`xs: 0, sm: 576, md: 768, lg: 992, xl: 1200`。
          */
-        this.thyResponsive = 'none';
+        this.thyResponsive = input('none');
         this.hostRenderer = useHostRenderer();
         this.numRegex = /^\d+$/;
         this.gridItemPropValueChange$ = new Subject();
         this.takeUntilDestroyed = takeUntilDestroyed();
+        effect(() => {
+            this.handleGridItems();
+        });
     }
     ngOnInit() {
         this.setGridStyle();
-        if (this.thyResponsive !== 'none') {
+        if (this.thyResponsive() !== 'none') {
             this.listenResizeEvent();
         }
     }
-    ngOnChanges(changes) { }
-    ngAfterContentInit() {
-        this.handleGridItems();
-        this.gridItems.changes.pipe(this.takeUntilDestroyed).subscribe(() => {
-            Promise.resolve().then(() => {
-                this.handleGridItems();
-            });
-        });
-    }
     setGridStyle() {
-        this.cols = this.calculateActualValue(this.thyCols || THY_GRID_DEFAULT_COLUMNS, THY_GRID_DEFAULT_COLUMNS);
-        if (!this.thyXGap && !this.thyYGap) {
-            this.xGap = this.calculateActualValue(this.thyGap || 0);
+        this.cols = this.calculateActualValue(this.thyCols() || THY_GRID_DEFAULT_COLUMNS, THY_GRID_DEFAULT_COLUMNS);
+        const xGap = this.thyXGap();
+        const yGap = this.thyYGap();
+        const gap = this.thyGap();
+        if (!xGap && !yGap) {
+            this.xGap = this.calculateActualValue(gap || 0);
             this.yGap = this.xGap;
         }
         else {
-            this.xGap = this.calculateActualValue(this.thyXGap || this.thyGap);
-            this.yGap = this.calculateActualValue(this.thyYGap || this.thyGap);
+            this.xGap = this.calculateActualValue(xGap || gap);
+            this.yGap = this.calculateActualValue(yGap || gap);
         }
         this.hostRenderer.setStyle('display', 'grid');
         this.hostRenderer.setStyle('grid-template-columns', `repeat(${this.cols}, minmax(0, 1fr))`);
         this.hostRenderer.setStyle('gap', `${this.yGap}px ${this.xGap}px`);
     }
     listenResizeEvent() {
-        if (this.thyResponsive === 'screen') {
+        if (this.thyResponsive() === 'screen') {
             this.viewportRuler
                 .change(100)
                 .pipe(this.takeUntilDestroyed)
@@ -281,10 +279,10 @@ class ThyGrid {
         }
     }
     handleGridItems() {
-        this.gridItems.forEach((gridItem) => {
-            const rawSpan = getRawSpan(gridItem.thySpan);
+        this.gridItems().forEach((gridItem) => {
+            const rawSpan = getRawSpan(gridItem.thySpan());
             const span = this.calculateActualValue(rawSpan, THY_GRID_ITEM_DEFAULT_SPAN);
-            const offset = this.calculateActualValue(gridItem.thyOffset || 0);
+            const offset = this.calculateActualValue(gridItem.thyOffset() || 0);
             gridItem.span = Math.min(span + offset, this.cols);
             gridItem.offset = offset;
         });
@@ -298,7 +296,7 @@ class ThyGrid {
             const responsiveValueMap = this.getResponsiveValueMap(rawValue);
             const breakpointKeys = Object.keys(responsiveValueMap);
             const breakpoint = this.calculateBreakPoint(breakpointKeys);
-            if (this.thyResponsive !== 'none' && breakpoint) {
+            if (this.thyResponsive() !== 'none' && breakpoint) {
                 return responsiveValueMap[breakpoint];
             }
             else if (breakpointKeys.includes('0')) {
@@ -320,7 +318,7 @@ class ThyGrid {
         }, {});
     }
     calculateBreakPoint(breakpointKeys) {
-        if (this.thyResponsive === 'screen') {
+        if (this.thyResponsive() === 'screen') {
             const width = this.responsiveContainerWidth || this.viewportRuler.getViewportSize().width;
             return breakpointKeys.find((key, index) => {
                 return index < breakpointKeys.length - 1
@@ -349,12 +347,12 @@ class ThyGrid {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ThyGrid, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.8", type: ThyGrid, isStandalone: true, selector: "[thyGrid]", inputs: { thyCols: "thyCols", thyXGap: "thyXGap", thyYGap: "thyYGap", thyGap: "thyGap", thyResponsive: "thyResponsive" }, host: { classAttribute: "thy-grid" }, providers: [
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "19.2.8", type: ThyGrid, isStandalone: true, selector: "[thyGrid]", inputs: { thyCols: { classPropertyName: "thyCols", publicName: "thyCols", isSignal: true, isRequired: false, transformFunction: null }, thyXGap: { classPropertyName: "thyXGap", publicName: "thyXGap", isSignal: true, isRequired: false, transformFunction: null }, thyYGap: { classPropertyName: "thyYGap", publicName: "thyYGap", isSignal: true, isRequired: false, transformFunction: null }, thyGap: { classPropertyName: "thyGap", publicName: "thyGap", isSignal: true, isRequired: false, transformFunction: null }, thyResponsive: { classPropertyName: "thyResponsive", publicName: "thyResponsive", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "thy-grid" }, providers: [
             {
                 provide: THY_GRID_COMPONENT,
                 useExisting: ThyGrid
             }
-        ], queries: [{ propertyName: "gridItems", predicate: ThyGridItem }], usesOnChanges: true, ngImport: i0 }); }
+        ], queries: [{ propertyName: "gridItems", predicate: ThyGridItem, isSignal: true }], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ThyGrid, decorators: [{
             type: Directive,
@@ -370,20 +368,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImpor
                         class: 'thy-grid'
                     }
                 }]
-        }], propDecorators: { gridItems: [{
-                type: ContentChildren,
-                args: [ThyGridItem]
-            }], thyCols: [{
-                type: Input
-            }], thyXGap: [{
-                type: Input
-            }], thyYGap: [{
-                type: Input
-            }], thyGap: [{
-                type: Input
-            }], thyResponsive: [{
-                type: Input
-            }] } });
+        }], ctorParameters: () => [] });
 /**
  * @internal
  */
@@ -431,40 +416,59 @@ function getRawSpan(span) {
  */
 // eslint-disable-next-line @angular-eslint/directive-class-suffix
 class ThyFlex {
-    get direction() {
-        const direction = this.thyDirection ?? this.thyDirection;
-        return direction || 'row';
-    }
     constructor() {
         this.hostRenderer = useHostRenderer();
-    }
-    ngOnInit() {
-        this.updateClasses();
-    }
-    ngOnChanges(changes) {
-        if (hasLaterChange(changes)) {
+        /**
+         * Flex 方向，为 row 或者 column
+         */
+        this.thyDirection = input('row', {
+            transform: (value) => value || 'row'
+        });
+        /**
+         * Flex Wrap
+         * @default nowrap
+         */
+        this.thyWrap = input();
+        /**
+         * Justify Content
+         */
+        this.thyJustifyContent = input();
+        /**
+         * Align Items
+         */
+        this.thyAlignItems = input();
+        /**
+         * Flex Item 之间的间隙 Gap
+         * @default 0
+         */
+        this.thyGap = input();
+        effect(() => {
             this.updateClasses();
-        }
+        });
     }
     updateClasses() {
         const classes = [];
-        if (!isUndefinedOrNull(this.thyJustifyContent)) {
-            classes.push(`justify-content-${normalizeStartEnd(this.thyJustifyContent)}`);
+        const justifyContent = this.thyJustifyContent();
+        if (!isUndefinedOrNull(justifyContent)) {
+            classes.push(`justify-content-${normalizeStartEnd(justifyContent)}`);
         }
-        if (!isUndefinedOrNull(this.thyAlignItems)) {
-            classes.push(`align-items-${normalizeStartEnd(this.thyAlignItems)}`);
+        const alignItems = this.thyAlignItems();
+        if (!isUndefinedOrNull(alignItems)) {
+            classes.push(`align-items-${normalizeStartEnd(alignItems)}`);
         }
-        if (!isUndefinedOrNull(this.thyWrap)) {
-            classes.push(`flex-${this.thyWrap}`);
+        const wrap = this.thyWrap();
+        if (!isUndefinedOrNull(wrap)) {
+            classes.push(`flex-${wrap}`);
         }
-        if (!isUndefinedOrNull(this.direction)) {
-            classes.push(`flex-${this.direction}`);
+        const direction = this.thyDirection();
+        if (!isUndefinedOrNull(direction)) {
+            classes.push(`flex-${direction}`);
         }
         this.hostRenderer.updateClass(classes);
-        this.hostRenderer.setStyle('gap', `${this.thyGap ?? '0'}px`);
+        this.hostRenderer.setStyle('gap', `${this.thyGap() ?? '0'}px`);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ThyFlex, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.8", type: ThyFlex, isStandalone: true, selector: "[thyFlex]", inputs: { thyDirection: "thyDirection", thyWrap: "thyWrap", thyJustifyContent: "thyJustifyContent", thyAlignItems: "thyAlignItems", thyGap: "thyGap" }, host: { classAttribute: "thy-flex d-flex" }, usesOnChanges: true, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.8", type: ThyFlex, isStandalone: true, selector: "[thyFlex]", inputs: { thyDirection: { classPropertyName: "thyDirection", publicName: "thyDirection", isSignal: true, isRequired: false, transformFunction: null }, thyWrap: { classPropertyName: "thyWrap", publicName: "thyWrap", isSignal: true, isRequired: false, transformFunction: null }, thyJustifyContent: { classPropertyName: "thyJustifyContent", publicName: "thyJustifyContent", isSignal: true, isRequired: false, transformFunction: null }, thyAlignItems: { classPropertyName: "thyAlignItems", publicName: "thyAlignItems", isSignal: true, isRequired: false, transformFunction: null }, thyGap: { classPropertyName: "thyGap", publicName: "thyGap", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "thy-flex d-flex" }, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ThyFlex, decorators: [{
             type: Directive,
@@ -474,17 +478,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImpor
                         class: 'thy-flex d-flex'
                     }
                 }]
-        }], ctorParameters: () => [], propDecorators: { thyDirection: [{
-                type: Input
-            }], thyWrap: [{
-                type: Input
-            }], thyJustifyContent: [{
-                type: Input
-            }], thyAlignItems: [{
-                type: Input
-            }], thyGap: [{
-                type: Input
-            }] } });
+        }], ctorParameters: () => [] });
 /**
  * @internal
  */
@@ -516,40 +510,57 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImpor
 class ThyFlexItem {
     constructor() {
         this.hostRenderer = useHostRenderer();
-    }
-    ngOnInit() {
-        this.updateClasses();
-    }
-    ngOnChanges(changes) {
-        if (hasLaterChange(changes)) {
+        /**
+         * Flex Item 属性，表示 grow 、shrink 、basis
+         */
+        this.thyFlexItem = input();
+        /**
+         * Flew Grow，设置或检索弹性盒子的扩展比率，设置 1 为填充剩余区域
+         */
+        this.thyGrow = input();
+        /**
+         * Flex Shrink，设置或检索弹性盒收缩比例
+         * @default 1
+         */
+        this.thyShrink = input();
+        /**
+         * Flex Basis，设置或检索弹性盒伸缩基准值
+         * @default 1
+         */
+        this.thyBasis = input();
+        effect(() => {
             this.updateClasses();
-        }
+        });
     }
     updateClasses() {
+        const flexItem = this.thyFlexItem();
         const classes = [];
         this.hostRenderer.setStyle('flex', '');
         this.hostRenderer.setStyle('basis', '');
-        if (this.thyFlexItem) {
-            if (this.thyFlexItem === 'fill') {
-                classes.push(`flex-${this.thyFlexItem}`);
+        if (flexItem) {
+            if (flexItem === 'fill') {
+                classes.push(`flex-${flexItem}`);
             }
             else {
-                this.hostRenderer.setStyle('flex', this.thyFlexItem);
+                this.hostRenderer.setStyle('flex', flexItem);
             }
         }
-        if (!isUndefinedOrNull(this.thyGrow)) {
-            classes.push(`flex-grow-${this.thyGrow}`);
+        const grow = this.thyGrow();
+        if (!isUndefinedOrNull(grow)) {
+            classes.push(`flex-grow-${grow}`);
         }
-        if (!isUndefinedOrNull(this.thyShrink)) {
-            classes.push(`flex-shrink-${this.thyShrink}`);
+        const shrink = this.thyShrink();
+        if (!isUndefinedOrNull(shrink)) {
+            classes.push(`flex-shrink-${shrink}`);
         }
-        if (!isUndefinedOrNull(this.thyBasis)) {
-            this.hostRenderer.setStyle('flex-basis', this.thyBasis);
+        const basis = this.thyBasis();
+        if (!isUndefinedOrNull(basis)) {
+            this.hostRenderer.setStyle('flex-basis', basis);
         }
         this.hostRenderer.updateClass(classes);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ThyFlexItem, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.8", type: ThyFlexItem, isStandalone: true, selector: "[thyFlexItem]", inputs: { thyFlexItem: "thyFlexItem", thyGrow: "thyGrow", thyShrink: "thyShrink", thyBasis: "thyBasis" }, host: { classAttribute: "thy-flex-item" }, usesOnChanges: true, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.8", type: ThyFlexItem, isStandalone: true, selector: "[thyFlexItem]", inputs: { thyFlexItem: { classPropertyName: "thyFlexItem", publicName: "thyFlexItem", isSignal: true, isRequired: false, transformFunction: null }, thyGrow: { classPropertyName: "thyGrow", publicName: "thyGrow", isSignal: true, isRequired: false, transformFunction: null }, thyShrink: { classPropertyName: "thyShrink", publicName: "thyShrink", isSignal: true, isRequired: false, transformFunction: null }, thyBasis: { classPropertyName: "thyBasis", publicName: "thyBasis", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "thy-flex-item" }, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ThyFlexItem, decorators: [{
             type: Directive,
@@ -559,15 +570,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImpor
                         class: 'thy-flex-item'
                     }
                 }]
-        }], ctorParameters: () => [], propDecorators: { thyFlexItem: [{
-                type: Input
-            }], thyGrow: [{
-                type: Input
-            }], thyShrink: [{
-                type: Input
-            }], thyBasis: [{
-                type: Input
-            }] } });
+        }], ctorParameters: () => [] });
 /**
  * @internal
  */