ngx-tethys 19.1.0-next.0 → 19.1.0-next.10

package/fesm2022/ngx-tethys-dropdown.mjs

@@ -1,16 +1,15 @@
 import * as i0 from '@angular/core';
-import { HostBinding, Directive, Input, ViewChild, ChangeDetectionStrategy, ViewEncapsulation, Component, inject, ElementRef, NgZone, ChangeDetectorRef, ViewContainerRef, EventEmitter, numberAttribute, Output, HostListener, DestroyRef, ContentChildren, NgModule } from '@angular/core';
+import { HostBinding, Directive, viewChild, input, ChangeDetectionStrategy, ViewEncapsulation, Component, inject, ElementRef, NgZone, ChangeDetectorRef, ViewContainerRef, computed, numberAttribute, output, effect, HostListener, DestroyRef, ContentChildren, NgModule } from '@angular/core';
 import { NgTemplateOutlet, CommonModule } from '@angular/common';
 import { ThyPopover, ThyPopoverModule } from 'ngx-tethys/popover';
 import { FocusMonitor } from '@angular/cdk/a11y';
 import { Platform } from '@angular/cdk/platform';
-import { InputCssPixel, ThyOverlayDirectiveBase } from 'ngx-tethys/core';
-import { coerceBooleanProperty, coerceArray, isFunction, isTemplateRef, helpers, getElementOffset } from 'ngx-tethys/util';
-import { __decorate, __metadata } from 'tslib';
-import { fromEvent } from 'rxjs';
-import { debounceTime, shareReplay, startWith, mergeMap } from 'rxjs/operators';
+import { ThyOverlayDirectiveBase } from 'ngx-tethys/core';
+import { coerceCssPixelValue, coerceBooleanProperty, isUndefinedOrNull, coerceArray, isFunction, isTemplateRef, helpers, getElementOffset } from 'ngx-tethys/util';
 import { useHostRenderer } from '@tethys/cdk/dom';
-import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { fromEvent, startWith, mergeMap } from 'rxjs';
+import { debounceTime, shareReplay } from 'rxjs/operators';
+import { takeUntilDestroyed, outputToObservable } from '@angular/core/rxjs-interop';
 
 const THY_DROPDOWN_DEFAULT_WIDTH = '240px';
 /**
@@ -35,28 +34,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImpor
  * @order 20
  */
 class ThyDropdownMenuComponent {
-    get template() {
-        return this.templateRef;
-    }
     constructor() {
+        this.templateRef = viewChild.required('dropdownMenu');
         /**
          * 设置菜单宽度
-         * @default 240px
          */
-        this.thyWidth = THY_DROPDOWN_DEFAULT_WIDTH;
+        this.thyWidth = input(THY_DROPDOWN_DEFAULT_WIDTH, { transform: coerceCssPixelValue });
         /**
          * 是否直接渲染 dropdown-menu 中的元素
-         * @default false
          */
-        this.thyImmediateRender = false;
+        this.thyImmediateRender = input(false, { transform: coerceBooleanProperty });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ThyDropdownMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.8", type: ThyDropdownMenuComponent, isStandalone: true, selector: "thy-dropdown-menu", inputs: { thyWidth: "thyWidth", thyImmediateRender: ["thyImmediateRender", "thyImmediateRender", coerceBooleanProperty] }, host: { properties: { "class.thy-dropdown-menu": "thyImmediateRender", "style.width": "thyImmediateRender ? thyWidth : ''" } }, viewQueries: [{ propertyName: "templateRef", first: true, predicate: ["dropdownMenu"], descendants: true, static: true }], ngImport: i0, template: `
-        @if (thyImmediateRender) {
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.8", type: ThyDropdownMenuComponent, isStandalone: true, selector: "thy-dropdown-menu", inputs: { thyWidth: { classPropertyName: "thyWidth", publicName: "thyWidth", isSignal: true, isRequired: false, transformFunction: null }, thyImmediateRender: { classPropertyName: "thyImmediateRender", publicName: "thyImmediateRender", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.thy-dropdown-menu": "thyImmediateRender()", "style.width": "thyImmediateRender() ? thyWidth() : ''" } }, viewQueries: [{ propertyName: "templateRef", first: true, predicate: ["dropdownMenu"], descendants: true, isSignal: true }], ngImport: i0, template: `
+        @if (thyImmediateRender()) {
             <ng-container *ngTemplateOutlet="content"></ng-container>
         }
         <ng-template #dropdownMenu>
-            <div class="thy-dropdown-menu" [style.width]="thyWidth">
+            <div class="thy-dropdown-menu" [style.width]="thyWidth()">
                 <ng-container *ngTemplateOutlet="content"></ng-container>
             </div>
         </ng-template>
@@ -65,20 +60,16 @@ class ThyDropdownMenuComponent {
         </ng-template>
     `, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-__decorate([
-    InputCssPixel(),
-    __metadata("design:type", Object)
-], ThyDropdownMenuComponent.prototype, "thyWidth", void 0);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ThyDropdownMenuComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'thy-dropdown-menu',
                     template: `
-        @if (thyImmediateRender) {
+        @if (thyImmediateRender()) {
             <ng-container *ngTemplateOutlet="content"></ng-container>
         }
         <ng-template #dropdownMenu>
-            <div class="thy-dropdown-menu" [style.width]="thyWidth">
+            <div class="thy-dropdown-menu" [style.width]="thyWidth()">
                 <ng-container *ngTemplateOutlet="content"></ng-container>
             </div>
         </ng-template>
@@ -89,36 +80,27 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImpor
                     encapsulation: ViewEncapsulation.None,
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     host: {
-                        '[class.thy-dropdown-menu]': 'thyImmediateRender',
-                        '[style.width]': "thyImmediateRender ? thyWidth : ''"
+                        '[class.thy-dropdown-menu]': 'thyImmediateRender()',
+                        '[style.width]': "thyImmediateRender() ? thyWidth() : ''"
                     },
                     imports: [NgTemplateOutlet]
                 }]
-        }], ctorParameters: () => [], propDecorators: { templateRef: [{
-                type: ViewChild,
-                args: ['dropdownMenu', { static: true }]
-            }], thyWidth: [{
-                type: Input
-            }], thyImmediateRender: [{
-                type: Input,
-                args: [{ transform: coerceBooleanProperty }]
-            }] } });
+        }], ctorParameters: () => [] });
 /**
  * 下拉菜单分组
  * @name thy-dropdown-menu-group
  * @order 50
  */
 class ThyDropdownMenuGroup {
-    /**
-     * 分组标题
-     */
-    set thyTitle(value) {
-        this.title = value;
+    constructor() {
+        /**
+         * 分组标题
+         */
+        this.thyTitle = input();
     }
-    constructor() { }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ThyDropdownMenuGroup, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.8", type: ThyDropdownMenuGroup, isStandalone: true, selector: "thy-dropdown-menu-group", inputs: { thyTitle: "thyTitle" }, host: { classAttribute: "dropdown-menu-group" }, ngImport: i0, template: `
-        <div class="dropdown-menu-group-title">{{ title }}</div>
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.8", type: ThyDropdownMenuGroup, isStandalone: true, selector: "thy-dropdown-menu-group", inputs: { thyTitle: { classPropertyName: "thyTitle", publicName: "thyTitle", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "dropdown-menu-group" }, ngImport: i0, template: `
+        <div class="dropdown-menu-group-title">{{ thyTitle() }}</div>
         <ng-content></ng-content>
     `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
@@ -127,7 +109,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImpor
             args: [{
                     selector: 'thy-dropdown-menu-group',
                     template: `
-        <div class="dropdown-menu-group-title">{{ title }}</div>
+        <div class="dropdown-menu-group-title">{{ thyTitle() }}</div>
         <ng-content></ng-content>
     `,
                     changeDetection: ChangeDetectionStrategy.OnPush,
@@ -135,9 +117,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImpor
                         class: 'dropdown-menu-group'
                     }
                 }]
-        }], ctorParameters: () => [], propDecorators: { thyTitle: [{
-                type: Input
-            }] } });
+        }], ctorParameters: () => [] });
 /**
  * 下拉菜单分割线
  * @name thy-dropdown-menu-divider
@@ -165,50 +145,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImpor
  * @order 10
  */
 class ThyDropdownDirective extends ThyOverlayDirectiveBase {
-    /**
-     * Dropdown 下拉菜单，支持 thy-dropdown-menu 组件、TemplateRef 和自定义菜单组件
-     */
-    set thyDropdownMenu(menu) {
-        this.menu = menu;
-    }
-    /**
-     * Dropdown 下拉菜单组件，和 thyDropdownMenu 参与相同，快捷传下拉菜单组件参数
-     */
-    set thyDropdown(menu) {
-        this.menu = menu;
-    }
-    /**
-     * 下拉菜单触发方式
-     * @type 'hover' | 'focus' | 'click' | string
-     * @default click
-     */
-    set thyTrigger(value) {
-        this.trigger = value;
-    }
-    /**
-     * 打开延迟毫秒
-     * @default 100
-     */
-    set thyShowDelay(value) {
-        this.showDelay = value;
-    }
-    /**
-     * 关闭延迟毫秒
-     * @default 100
-     */
-    set thyHideDelay(value) {
-        this.hideDelay = value;
-    }
-    /**
-     * 弹出框 overlay panel 的类名
-     * @type string | string[]
-     */
-    set thyPanelClass(value) {
-        this.innerPanelClassList = this.innerPanelClassList.concat(coerceArray(value));
-    }
-    get thyPanelClass() {
-        return this.innerPanelClassList;
-    }
     constructor() {
         const elementRef = inject(ElementRef);
         const platform = inject(Platform);
@@ -218,46 +154,105 @@ class ThyDropdownDirective extends ThyOverlayDirectiveBase {
         super(elementRef, platform, focusMonitor, ngZone, true, changeDetectorRef);
         this.viewContainerRef = inject(ViewContainerRef);
         this.popover = inject(ThyPopover);
-        this.innerPanelClassList = ['thy-dropdown-pane'];
+        this.menu = computed(() => {
+            return (this.thyDropdownMenu() || this.thyDropdown());
+        });
         this.popoverOpened = false;
+        /**
+         * Dropdown 下拉菜单，支持 thy-dropdown-menu 组件、TemplateRef 和自定义菜单组件
+         */
+        this.thyDropdownMenu = input();
+        /**
+         * Dropdown 下拉菜单组件，和 thyDropdownMenu 参与相同，快捷传下拉菜单组件参数
+         */
+        this.thyDropdown = input();
+        /**
+         * 下拉菜单触发方式
+         * @type 'hover' | 'focus' | 'click' | string
+         * @default click
+         */
+        this.thyTrigger = input('click');
+        /**
+         * 打开延迟毫秒
+         */
+        this.thyShowDelay = input(100, { transform: numberAttribute });
+        /**
+         * 关闭延迟毫秒
+         */
+        this.thyHideDelay = input(100, { transform: numberAttribute });
         /**
          * 弹出菜单后的当前触发元素的激活样式类
          */
-        this.thyActiveClass = 'thy-dropdown-origin-active';
+        this.thyActiveClass = input('thy-dropdown-origin-active', {
+            transform: (value) => value || 'thy-dropdown-origin-active'
+        });
+        /**
+         * 弹出框的参数，底层使用 Popover 组件, 默认为`{ placement: "bottomLeft", insideClosable: true, minWidth: "240px", outsideClosable: true }`
+         */
+        this.thyPopoverOptions = input();
+        /**
+         * 弹出框的显示位置，会覆盖 thyPopoverOptions 中的 placement，`top` | `topLeft` | `topRight` | `bottom` | `bottomLeft` | `bottomRight` | `left` | `leftTop` | `leftBottom` | `right` | `rightTop` | `rightBottom`
+         * @default bottomLeft
+         */
+        this.thyPlacement = input();
+        /**
+         * 点击 dropdown-menu 内部是否关闭弹出框，会覆盖 thyPopoverOptions 中的 insideClosable
+         */
+        this.thyMenuInsideClosable = input(true, { transform: coerceBooleanProperty });
+        /**
+         * 弹出框 overlay panel 的类名
+         * @type string | string[]
+         */
+        this.thyPanelClass = input(['thy-dropdown-pane'], {
+            transform: (value) => (!isUndefinedOrNull(value) && ['thy-dropdown-pane'].concat(coerceArray(value))) || ['thy-dropdown-pane']
+        });
         /**
          * 菜单 Active 事件，打开菜单返回 true，关闭返回 false
          */
-        this.thyActiveChange = new EventEmitter();
+        this.thyActiveChange = output();
+        // TODO: 以下为 overlay 基类中参数，之后需统一修改
+        effect(() => {
+            this.trigger = (this.thyTrigger() || 'click');
+        });
+        effect(() => {
+            this.hideDelay = this.thyHideDelay() ?? 100;
+        });
+        effect(() => {
+            this.showDelay = this.thyShowDelay() ?? 100;
+        });
     }
     ngOnInit() {
         this.initialize();
     }
     createOverlay() {
         let componentTypeOrTemplateRef;
-        if (this.menu && this.menu instanceof ThyDropdownMenuComponent) {
-            componentTypeOrTemplateRef = this.menu.templateRef;
+        const menu = this.menu();
+        if (menu && menu instanceof ThyDropdownMenuComponent) {
+            componentTypeOrTemplateRef = menu?.templateRef();
         }
-        else if (isFunction(this.menu) || isTemplateRef(this.menu)) {
-            componentTypeOrTemplateRef = this.menu;
+        else if (isFunction(menu) || isTemplateRef(menu)) {
+            componentTypeOrTemplateRef = menu;
         }
         if (typeof ngDevMode === 'undefined' || ngDevMode) {
             if (!componentTypeOrTemplateRef) {
                 throw new Error(`thyDropdownMenu is required`);
             }
         }
-        const { placement, height, insideClosable, outsideClosable, minWidth } = Object.assign({ placement: 'bottomLeft', insideClosable: true, outsideClosable: true }, this.thyPopoverOptions);
+        const { placement, height, insideClosable, outsideClosable, minWidth } = Object.assign({ placement: 'bottomLeft', insideClosable: true, outsideClosable: true }, this.thyPopoverOptions());
+        const thyPlacement = this.thyPlacement();
+        const thyMenuInsideClosable = this.thyMenuInsideClosable();
         const config = {
             origin: this.elementRef.nativeElement,
             hasBackdrop: false,
             viewContainerRef: this.viewContainerRef,
             offset: 0,
-            panelClass: this.thyPanelClass,
-            placement: this.thyPlacement ? this.thyPlacement : placement,
+            panelClass: this.thyPanelClass(),
+            placement: thyPlacement ? thyPlacement : placement,
             height,
             outsideClosable,
-            insideClosable: helpers.isUndefined(this.thyMenuInsideClosable) ? insideClosable : this.thyMenuInsideClosable,
+            insideClosable: helpers.isUndefined(thyMenuInsideClosable) ? insideClosable : thyMenuInsideClosable,
             minWidth,
-            originActiveClass: this.thyActiveClass
+            originActiveClass: this.thyActiveClass()
         };
         this.popoverRef = this.popover.open(componentTypeOrTemplateRef, config);
         this.popoverRef.afterOpened().subscribe(() => {
@@ -302,7 +297,7 @@ class ThyDropdownDirective extends ThyOverlayDirectiveBase {
         }, delay);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ThyDropdownDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "19.2.8", type: ThyDropdownDirective, isStandalone: true, selector: "[thyDropdown]", inputs: { thyDropdownMenu: "thyDropdownMenu", thyDropdown: "thyDropdown", thyTrigger: "thyTrigger", thyShowDelay: ["thyShowDelay", "thyShowDelay", numberAttribute], thyHideDelay: ["thyHideDelay", "thyHideDelay", numberAttribute], thyActiveClass: "thyActiveClass", thyPopoverOptions: "thyPopoverOptions", thyPlacement: "thyPlacement", thyMenuInsideClosable: ["thyMenuInsideClosable", "thyMenuInsideClosable", coerceBooleanProperty], thyPanelClass: "thyPanelClass" }, outputs: { thyActiveChange: "thyActiveChange" }, host: { classAttribute: "thy-dropdown" }, usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.8", type: ThyDropdownDirective, isStandalone: true, selector: "[thyDropdown]", inputs: { thyDropdownMenu: { classPropertyName: "thyDropdownMenu", publicName: "thyDropdownMenu", isSignal: true, isRequired: false, transformFunction: null }, thyDropdown: { classPropertyName: "thyDropdown", publicName: "thyDropdown", isSignal: true, isRequired: false, transformFunction: null }, thyTrigger: { classPropertyName: "thyTrigger", publicName: "thyTrigger", isSignal: true, isRequired: false, transformFunction: null }, thyShowDelay: { classPropertyName: "thyShowDelay", publicName: "thyShowDelay", isSignal: true, isRequired: false, transformFunction: null }, thyHideDelay: { classPropertyName: "thyHideDelay", publicName: "thyHideDelay", isSignal: true, isRequired: false, transformFunction: null }, thyActiveClass: { classPropertyName: "thyActiveClass", publicName: "thyActiveClass", isSignal: true, isRequired: false, transformFunction: null }, thyPopoverOptions: { classPropertyName: "thyPopoverOptions", publicName: "thyPopoverOptions", isSignal: true, isRequired: false, transformFunction: null }, thyPlacement: { classPropertyName: "thyPlacement", publicName: "thyPlacement", isSignal: true, isRequired: false, transformFunction: null }, thyMenuInsideClosable: { classPropertyName: "thyMenuInsideClosable", publicName: "thyMenuInsideClosable", isSignal: true, isRequired: false, transformFunction: null }, thyPanelClass: { classPropertyName: "thyPanelClass", publicName: "thyPanelClass", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { thyActiveChange: "thyActiveChange" }, host: { classAttribute: "thy-dropdown" }, usesInheritance: true, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ThyDropdownDirective, decorators: [{
             type: Directive,
@@ -312,32 +307,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImpor
                         class: 'thy-dropdown'
                     }
                 }]
-        }], ctorParameters: () => [], propDecorators: { thyDropdownMenu: [{
-                type: Input
-            }], thyDropdown: [{
-                type: Input
-            }], thyTrigger: [{
-                type: Input
-            }], thyShowDelay: [{
-                type: Input,
-                args: [{ transform: numberAttribute }]
-            }], thyHideDelay: [{
-                type: Input,
-                args: [{ transform: numberAttribute }]
-            }], thyActiveClass: [{
-                type: Input
-            }], thyPopoverOptions: [{
-                type: Input
-            }], thyPlacement: [{
-                type: Input
-            }], thyMenuInsideClosable: [{
-                type: Input,
-                args: [{ transform: coerceBooleanProperty }]
-            }], thyPanelClass: [{
-                type: Input
-            }], thyActiveChange: [{
-                type: Output
-            }] } });
+        }], ctorParameters: () => [] });
 
 /**
  * 菜单项
@@ -347,29 +317,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImpor
 class ThyDropdownMenuItemDirective {
     constructor() {
         this.elementRef = inject(ElementRef);
-        this.className = true;
-        this.disabled = false;
-        this.danger = false;
-        this.success = false;
+        this.danger = computed(() => this.thyType() === 'danger' || false);
+        this.success = computed(() => this.thyType() === 'success' || false);
+        /**
+         * 菜单项类型
+         * @type 'default' | 'danger' | 'success' | ''
+         */
+        this.thyType = input('default');
+        /**
+         * 菜单项是否处于禁用状态
+         */
+        this.thyDisabled = input(false, { transform: coerceBooleanProperty });
         this.hostRenderer = useHostRenderer();
     }
-    /**
-     * 菜单项类型
-     * @type 'default' | 'danger' | 'success' | ''
-     * @default default
-     */
-    set thyType(value) {
-        this[value] = true;
-    }
-    /**
-     * 菜单项是否处于禁用状态
-     * @default false
-     */
-    set thyDisabled(value) {
-        this.disabled = value;
-    }
     onClick(event) {
-        if (this.disabled) {
+        if (this.thyDisabled()) {
             event.stopPropagation();
             event.preventDefault();
         }
@@ -385,31 +347,20 @@ class ThyDropdownMenuItemDirective {
         return fromEvent(this.elementRef.nativeElement, 'mouseenter').pipe(debounceTime(100), shareReplay());
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ThyDropdownMenuItemDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "19.2.8", type: ThyDropdownMenuItemDirective, isStandalone: true, selector: "[thyDropdownMenuItem]", inputs: { thyType: "thyType", thyDisabled: ["thyDisabled", "thyDisabled", coerceBooleanProperty] }, host: { listeners: { "click": "onClick($event)" }, properties: { "class.dropdown-menu-item": "this.className", "class.dropdown-menu-item--disabled": "this.disabled", "class.dropdown-menu-item--danger": "this.danger", "class.dropdown-menu-item--success": "this.success" } }, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.8", type: ThyDropdownMenuItemDirective, isStandalone: true, selector: "[thyDropdownMenuItem]", inputs: { thyType: { classPropertyName: "thyType", publicName: "thyType", isSignal: true, isRequired: false, transformFunction: null }, thyDisabled: { classPropertyName: "thyDisabled", publicName: "thyDisabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "onClick($event)" }, properties: { "class.dropdown-menu-item--disabled": "thyDisabled()", "class.dropdown-menu-item--danger": "danger()", "class.dropdown-menu-item--success": "success()" }, classAttribute: "dropdown-menu-item" }, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ThyDropdownMenuItemDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[thyDropdownMenuItem]'
+                    selector: '[thyDropdownMenuItem]',
+                    host: {
+                        class: 'dropdown-menu-item',
+                        '[class.dropdown-menu-item--disabled]': `thyDisabled()`,
+                        '[class.dropdown-menu-item--danger]': 'danger()',
+                        '[class.dropdown-menu-item--success]': 'success()'
+                    }
                 }]
-        }], propDecorators: { className: [{
-                type: HostBinding,
-                args: ['class.dropdown-menu-item']
-            }], disabled: [{
-                type: HostBinding,
-                args: ['class.dropdown-menu-item--disabled']
-            }], danger: [{
-                type: HostBinding,
-                args: ['class.dropdown-menu-item--danger']
-            }], success: [{
-                type: HostBinding,
-                args: ['class.dropdown-menu-item--success']
-            }], thyType: [{
-                type: Input
-            }], thyDisabled: [{
-                type: Input,
-                args: [{ transform: coerceBooleanProperty }]
-            }], onClick: [{
+        }], propDecorators: { onClick: [{
                 type: HostListener,
                 args: ['click', ['$event']]
             }] } });
@@ -519,22 +470,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImpor
  * @order 70
  */
 class ThyDropdownMenuItemActiveDirective {
-    constructor() { }
+    constructor() {
+        /**
+         * 是否激活
+         * @type boolean | string
+         */
+        this.thyDropdownMenuItemActive = input(false, { transform: coerceBooleanProperty });
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ThyDropdownMenuItemActiveDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "19.2.8", type: ThyDropdownMenuItemActiveDirective, isStandalone: true, selector: "[thyDropdownMenuItemActive]", inputs: { thyDropdownMenuItemActive: ["thyDropdownMenuItemActive", "thyDropdownMenuItemActive", coerceBooleanProperty] }, host: { properties: { "class.active": "this.thyDropdownMenuItemActive" } }, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.8", type: ThyDropdownMenuItemActiveDirective, isStandalone: true, selector: "[thyDropdownMenuItemActive]", inputs: { thyDropdownMenuItemActive: { classPropertyName: "thyDropdownMenuItemActive", publicName: "thyDropdownMenuItemActive", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.active": "thyDropdownMenuItemActive()" } }, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ThyDropdownMenuItemActiveDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[thyDropdownMenuItemActive]'
+                    selector: '[thyDropdownMenuItemActive]',
+                    host: {
+                        '[class.active]': `thyDropdownMenuItemActive()`
+                    }
                 }]
-        }], ctorParameters: () => [], propDecorators: { thyDropdownMenuItemActive: [{
-                type: HostBinding,
-                args: ['class.active']
-            }, {
-                type: Input,
-                args: [{ transform: coerceBooleanProperty }]
-            }] } });
+        }], ctorParameters: () => [] });
 
 const SUBMENU_CLASS_PREFIX = 'dropdown-submenu';
 /**
@@ -547,24 +501,24 @@ class ThyDropdownSubmenu {
         this.dropdownMenuItem = inject(ThyDropdownMenuItemDirective);
         this.elementRef = inject(ElementRef);
         this.destroyRef = inject(DestroyRef);
-        this.direction = 'right';
-    }
-    /**
-     * 菜单方向
-     * @type left | right | auto
-     * @default right
-     */
-    set thyDirection(value) {
-        this.direction = value;
+        /**
+         * 菜单方向
+         * @type left | right | auto
+         */
+        this.thyDirection = input('right', {
+            transform: (value) => {
+                return value || 'right';
+            }
+        });
     }
     ngOnInit() {
-        let direction = this.direction || 'right';
+        let direction = this.thyDirection();
         this.updateClassByDirection(direction);
         this.dropdownMenuItem
             .bindMouseenterEvent()
             .pipe(takeUntilDestroyed(this.destroyRef))
             .subscribe(() => {
-            if (this.direction === 'auto') {
+            if (this.thyDirection() === 'auto') {
                 const element = this.dropdownMenuItem.getElement();
                 const offset = getElementOffset(element);
                 if (document.documentElement.clientWidth < offset.left + offset.width + offset.width) {
@@ -597,7 +551,7 @@ class ThyDropdownSubmenu {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ThyDropdownSubmenu, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.8", type: ThyDropdownSubmenu, isStandalone: true, selector: "[thyDropdownSubmenu],thy-dropdown-submenu", inputs: { thyDirection: "thyDirection" }, host: { classAttribute: "dropdown-submenu" }, 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: ThyDropdownSubmenu, isStandalone: true, selector: "[thyDropdownSubmenu],thy-dropdown-submenu", inputs: { thyDirection: { classPropertyName: "thyDirection", publicName: "thyDirection", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "dropdown-submenu" }, 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: ThyDropdownSubmenu, decorators: [{
             type: Component,
@@ -609,9 +563,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImpor
                     },
                     changeDetection: ChangeDetectionStrategy.OnPush
                 }]
-        }], propDecorators: { thyDirection: [{
-                type: Input
-            }] } });
+        }] });
 
 /**
  * 跟踪 Dropdown 菜单是否被打开处于激活状态，允许指定一个或多个CSS类，以便在菜单打开状态时添加到元素中
@@ -620,25 +572,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImpor
  */
 class ThyDropdownActiveDirective {
     constructor() {
-        this.elementRef = inject(ElementRef);
         this.trigger = inject(ThyDropdownDirective, { optional: true });
+        this.classes = computed(() => {
+            return coerceArray(this.thyDropdownActive()).filter(c => !!c);
+        });
         this.hostRenderer = useHostRenderer();
-    }
-    /**
-     * 设置 Active 样式类，可以是一个或多个CSS类
-     * @type string[] | string
-     */
-    set thyDropdownActive(data) {
-        this.classes = coerceArray(data).filter(c => !!c);
+        /**
+         * 设置 Active 样式类，可以是一个或多个CSS类
+         * @type string[] | string
+         */
+        this.thyDropdownActive = input();
     }
     ngOnInit() { }
     ngAfterContentInit() {
         this.triggers.changes
             .pipe(startWith(this.triggers.toArray()), mergeMap((triggers) => {
             const result = triggers.map(item => {
-                return item.thyActiveChange;
+                return outputToObservable(item.thyActiveChange);
             });
-            this.trigger && result.push(this.trigger.thyActiveChange);
+            this.trigger && result.push(outputToObservable(this.trigger.thyActiveChange));
             return result;
         }), mergeMap(result => {
             return result;
@@ -648,7 +600,7 @@ class ThyDropdownActiveDirective {
         });
     }
     update(active) {
-        this.classes.forEach(className => {
+        this.classes().forEach(className => {
             if (active) {
                 this.hostRenderer.addClass(className);
             }
@@ -658,16 +610,14 @@ class ThyDropdownActiveDirective {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ThyDropdownActiveDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.8", type: ThyDropdownActiveDirective, isStandalone: true, selector: "[thyDropdownActive]", inputs: { thyDropdownActive: "thyDropdownActive" }, queries: [{ propertyName: "triggers", predicate: ThyDropdownDirective, descendants: true }], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.8", type: ThyDropdownActiveDirective, isStandalone: true, selector: "[thyDropdownActive]", inputs: { thyDropdownActive: { classPropertyName: "thyDropdownActive", publicName: "thyDropdownActive", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "triggers", predicate: ThyDropdownDirective, descendants: true }], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ThyDropdownActiveDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[thyDropdownActive]'
                 }]
-        }], propDecorators: { thyDropdownActive: [{
-                type: Input
-            }], triggers: [{
+        }], propDecorators: { triggers: [{
                 type: ContentChildren,
                 args: [ThyDropdownDirective, { descendants: true }]
             }] } });