ngx-tethys 19.1.0-next.4 → 19.1.0-next.6

package/fesm2022/ngx-tethys-layout.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { Directive, ChangeDetectionStrategy, Component, Input, ContentChild, inject, HostBinding, ElementRef, EventEmitter, numberAttribute, Output, HostListener, NgModule } from '@angular/core';
+import { signal, computed, Directive, ChangeDetectionStrategy, Component, input, contentChild, inject, linkedSignal, ElementRef, numberAttribute, output, effect, HostListener, NgModule } from '@angular/core';
 import { NgTemplateOutlet, NgClass, CommonModule } from '@angular/common';
 import { ThyIcon, ThyIconModule } from 'ngx-tethys/icon';
 import { coerceBooleanProperty } from 'ngx-tethys/util';
@@ -17,11 +17,13 @@ import { DragDropModule } from '@angular/cdk/drag-drop';
  */
 class ThyLayoutDirective {
     constructor() {
-        this.hasSidebar = false;
-        this.isSidebarRight = false;
+        this.sidebarDirection = signal(null);
+        this.isSidebarRight = computed(() => {
+            return this.sidebarDirection() === 'right';
+        });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ThyLayoutDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.8", type: ThyLayoutDirective, isStandalone: true, selector: "[thyLayout]:not([thyForm]):not(thy-form):not(thy-radio-group):not(thy-properties):not(thy-selection-list):not(thy-vote):not([thyVote])", host: { properties: { "class.thy-layout--has-sidebar": "hasSidebar", "class.thy-layout--is-sidebar-right": "isSidebarRight" }, classAttribute: "thy-layout" }, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.8", type: ThyLayoutDirective, isStandalone: true, selector: "[thyLayout]:not([thyForm]):not(thy-form):not(thy-radio-group):not(thy-properties):not(thy-selection-list):not(thy-vote):not([thyVote])", host: { properties: { "class.thy-layout--has-sidebar": "sidebarDirection()", "class.thy-layout--is-sidebar-right": "isSidebarRight()" }, classAttribute: "thy-layout" }, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ThyLayoutDirective, decorators: [{
             type: Directive,
@@ -29,8 +31,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImpor
                     selector: '[thyLayout]:not([thyForm]):not(thy-form):not(thy-radio-group):not(thy-properties):not(thy-selection-list):not(thy-vote):not([thyVote])',
                     host: {
                         class: 'thy-layout',
-                        '[class.thy-layout--has-sidebar]': 'hasSidebar',
-                        '[class.thy-layout--is-sidebar-right]': 'isSidebarRight'
+                        '[class.thy-layout--has-sidebar]': 'sidebarDirection()',
+                        '[class.thy-layout--is-sidebar-right]': 'isSidebarRight()'
                     }
                 }]
         }] });
@@ -64,29 +66,31 @@ class ThyHeaderDirective {
          * 头部大小
          * @type sm | md  | lg | xlg
          */
-        this.thySize = 'md';
+        this.thySize = input('md');
         /**
          * 底部是否有阴影
          * @default false
          */
-        this.thyShadow = false;
-        this.divided = false;
-    }
-    /**
-     * 底部是否有分割线
-     */
-    set thyDivided(value) {
-        this.divided = value;
-    }
-    /**
-     * 底部是否有分割线，已废弃，请使用 thyDivided
-     * @deprecated please use thyDivided
-     */
-    set thyHasBorder(value) {
-        this.divided = value;
+        this.thyShadow = input(false, { transform: coerceBooleanProperty });
+        /**
+         * 底部是否有分割线
+         */
+        this.thyDivided = input(false, { transform: coerceBooleanProperty });
+        /**
+         * 底部是否有分割线，已废弃，请使用 thyDivided
+         * @deprecated please use thyDivided
+         */
+        this.thyHasBorder = input(false, { transform: coerceBooleanProperty });
+        this.divided = computed(() => {
+            const value = this.thyDivided();
+            if (value !== undefined) {
+                return value;
+            }
+            return this.thyHasBorder();
+        });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ThyHeaderDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "19.2.8", type: ThyHeaderDirective, isStandalone: true, selector: "[thyHeader]", inputs: { thySize: "thySize", thyShadow: ["thyShadow", "thyShadow", coerceBooleanProperty], thyDivided: ["thyDivided", "thyDivided", coerceBooleanProperty], thyHasBorder: ["thyHasBorder", "thyHasBorder", coerceBooleanProperty] }, host: { properties: { "class.thy-layout-header-sm": "thySize === 'sm'", "class.thy-layout-header-lg": "thySize === 'lg'", "class.thy-layout-header-xlg": "thySize === 'xlg'", "class.thy-layout-header-shadow": "thyShadow", "class.thy-layout-header-divided": "divided" }, classAttribute: "thy-layout-header" }, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.8", type: ThyHeaderDirective, isStandalone: true, selector: "[thyHeader]", inputs: { thySize: { classPropertyName: "thySize", publicName: "thySize", isSignal: true, isRequired: false, transformFunction: null }, thyShadow: { classPropertyName: "thyShadow", publicName: "thyShadow", isSignal: true, isRequired: false, transformFunction: null }, thyDivided: { classPropertyName: "thyDivided", publicName: "thyDivided", isSignal: true, isRequired: false, transformFunction: null }, thyHasBorder: { classPropertyName: "thyHasBorder", publicName: "thyHasBorder", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.thy-layout-header-sm": "thySize() === 'sm'", "class.thy-layout-header-lg": "thySize() === 'lg'", "class.thy-layout-header-xlg": "thySize() === 'xlg'", "class.thy-layout-header-shadow": "thyShadow()", "class.thy-layout-header-divided": "divided()" }, classAttribute: "thy-layout-header" }, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ThyHeaderDirective, decorators: [{
             type: Directive,
@@ -94,26 +98,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImpor
                     selector: '[thyHeader]',
                     host: {
                         class: `thy-layout-header`,
-                        '[class.thy-layout-header-sm]': `thySize === 'sm'`,
-                        '[class.thy-layout-header-lg]': `thySize === 'lg'`,
-                        '[class.thy-layout-header-xlg]': `thySize === 'xlg'`,
-                        '[class.thy-layout-header-shadow]': `thyShadow`,
-                        '[class.thy-layout-header-divided]': `divided`
+                        '[class.thy-layout-header-sm]': `thySize() === 'sm'`,
+                        '[class.thy-layout-header-lg]': `thySize() === 'lg'`,
+                        '[class.thy-layout-header-xlg]': `thySize() === 'xlg'`,
+                        '[class.thy-layout-header-shadow]': `thyShadow()`,
+                        '[class.thy-layout-header-divided]': `divided()`
                     }
                 }]
-        }], propDecorators: { thySize: [{
-                type: Input,
-                args: ['thySize']
-            }], thyShadow: [{
-                type: Input,
-                args: [{ transform: coerceBooleanProperty }]
-            }], thyDivided: [{
-                type: Input,
-                args: [{ transform: coerceBooleanProperty }]
-            }], thyHasBorder: [{
-                type: Input,
-                args: [{ transform: coerceBooleanProperty }]
-            }] } });
+        }] });
 /**
  * 头部布局组件
  * @name thy-header
@@ -121,30 +113,56 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImpor
  */
 class ThyHeader {
     constructor() {
+        /**
+         * 头部标题
+         */
+        this.thyTitle = input(undefined);
         /**
          * 图标前缀，被弃用，图标使用 SVG 图标
          */
-        this.thyIconPrefix = 'wtf';
-    }
-    /**
-     * 图标，SVG 图标名称
-     */
-    set thyIcon(value) {
-        if (value) {
-            if (value.includes('wtf')) {
-                this.iconClass = `${this.thyIconPrefix} ${value}`;
+        this.thyIconPrefix = input('wtf');
+        /**
+         * 图标，SVG 图标名称
+         */
+        this.thyIcon = input(undefined);
+        this.svgIconName = computed(() => {
+            const icon = this.thyIcon();
+            if (icon && !icon.includes('wtf')) {
+                return icon;
+            }
+            return null;
+        });
+        this.iconClass = computed(() => {
+            const icon = this.svgIconName();
+            if (icon) {
+                return null;
             }
             else {
-                this.svgIconName = value;
+                const icon = this.thyIcon();
+                if (icon && icon.includes('wtf')) {
+                    return `${this.thyIconPrefix()} ${icon}`;
+                }
             }
-        }
-        else {
-            this.iconClass = null;
-            this.svgIconName = null;
-        }
+            return null;
+        });
+        /**
+         * 头部自定义标题模板，`<ng-template #headerTitle></ng-template>`
+         * @type TemplateRef
+         */
+        this.titleTemplateRef = contentChild('headerTitle');
+        /**
+         * 头部自定义内容模板，`<ng-template #headerContent></ng-template>`
+         * @type TemplateRef
+         */
+        this.contentTemplateRef = contentChild('headerContent');
+        /**
+         * 头部自定义操作模板，`<ng-template #headerOperation></ng-template>`
+         * @type TemplateRef
+         */
+        this.operationTemplateRef = contentChild('headerOperation');
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ThyHeader, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.8", type: ThyHeader, isStandalone: true, selector: "thy-header", inputs: { thyTitle: "thyTitle", thyIconPrefix: "thyIconPrefix", thyIcon: "thyIcon" }, queries: [{ propertyName: "titleTemplateRef", first: true, predicate: ["headerTitle"], descendants: true }, { propertyName: "contentTemplateRef", first: true, predicate: ["headerContent"], descendants: true }, { propertyName: "operationTemplateRef", first: true, predicate: ["headerOperation"], descendants: true }], hostDirectives: [{ directive: ThyHeaderDirective, inputs: ["thySize", "thySize", "thyShadow", "thyShadow", "thyHasBorder", "thyHasBorder", "thyDivided", "thyDivided"] }], ngImport: i0, template: "<div class=\"layout-header-title\">\n  <ng-template [ngTemplateOutlet]=\"titleTemplateRef\"></ng-template>\n  @if (!titleTemplateRef) {\n    @if (svgIconName) {\n      <thy-icon class=\"prefix-icon\" [thyIconName]=\"svgIconName\"></thy-icon>\n    } @else {\n      @if (iconClass) {\n        <i class=\"prefix-icon\" [ngClass]=\"iconClass\"></i>\n      }\n    }\n    <span class=\"title-name\">{{ thyTitle }}</span>\n  }\n</div>\n<div class=\"layout-header-content\">\n  <ng-template [ngTemplateOutlet]=\"contentTemplateRef\"></ng-template>\n</div>\n<div class=\"layout-header-operation\">\n  <ng-template [ngTemplateOutlet]=\"operationTemplateRef\"></ng-template>\n</div>\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ThyIcon, selector: "thy-icon, [thy-icon]", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.8", type: ThyHeader, isStandalone: true, selector: "thy-header", inputs: { thyTitle: { classPropertyName: "thyTitle", publicName: "thyTitle", isSignal: true, isRequired: false, transformFunction: null }, thyIconPrefix: { classPropertyName: "thyIconPrefix", publicName: "thyIconPrefix", isSignal: true, isRequired: false, transformFunction: null }, thyIcon: { classPropertyName: "thyIcon", publicName: "thyIcon", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "titleTemplateRef", first: true, predicate: ["headerTitle"], descendants: true, isSignal: true }, { propertyName: "contentTemplateRef", first: true, predicate: ["headerContent"], descendants: true, isSignal: true }, { propertyName: "operationTemplateRef", first: true, predicate: ["headerOperation"], descendants: true, isSignal: true }], hostDirectives: [{ directive: ThyHeaderDirective, inputs: ["thySize", "thySize", "thyShadow", "thyShadow", "thyHasBorder", "thyHasBorder", "thyDivided", "thyDivided"] }], ngImport: i0, template: "<div class=\"layout-header-title\">\n  @if (titleTemplateRef()) {\n    <ng-template [ngTemplateOutlet]=\"titleTemplateRef()\"></ng-template>\n  } @else {\n    @if (svgIconName()) {\n      <thy-icon class=\"prefix-icon\" [thyIconName]=\"svgIconName()\"></thy-icon>\n    } @else {\n      @if (iconClass()) {\n        <i class=\"prefix-icon\" [ngClass]=\"iconClass()\"></i>\n      }\n    }\n    <span class=\"title-name\">{{ thyTitle() }}</span>\n  }\n</div>\n<div class=\"layout-header-content\">\n  <ng-template [ngTemplateOutlet]=\"contentTemplateRef()\"></ng-template>\n</div>\n<div class=\"layout-header-operation\">\n  <ng-template [ngTemplateOutlet]=\"operationTemplateRef()\"></ng-template>\n</div>\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ThyIcon, selector: "thy-icon, [thy-icon]", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ThyHeader, decorators: [{
             type: Component,
@@ -153,24 +171,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImpor
                             directive: ThyHeaderDirective,
                             inputs: ['thySize', 'thyShadow', 'thyHasBorder', 'thyDivided']
                         }
-                    ], imports: [NgTemplateOutlet, ThyIcon, NgClass], template: "<div class=\"layout-header-title\">\n  <ng-template [ngTemplateOutlet]=\"titleTemplateRef\"></ng-template>\n  @if (!titleTemplateRef) {\n    @if (svgIconName) {\n      <thy-icon class=\"prefix-icon\" [thyIconName]=\"svgIconName\"></thy-icon>\n    } @else {\n      @if (iconClass) {\n        <i class=\"prefix-icon\" [ngClass]=\"iconClass\"></i>\n      }\n    }\n    <span class=\"title-name\">{{ thyTitle }}</span>\n  }\n</div>\n<div class=\"layout-header-content\">\n  <ng-template [ngTemplateOutlet]=\"contentTemplateRef\"></ng-template>\n</div>\n<div class=\"layout-header-operation\">\n  <ng-template [ngTemplateOutlet]=\"operationTemplateRef\"></ng-template>\n</div>\n" }]
-        }], propDecorators: { thyTitle: [{
-                type: Input
-            }], thyIconPrefix: [{
-                type: Input
-            }], thyIcon: [{
-                type: Input,
-                args: ['thyIcon']
-            }], titleTemplateRef: [{
-                type: ContentChild,
-                args: ['headerTitle']
-            }], contentTemplateRef: [{
-                type: ContentChild,
-                args: ['headerContent']
-            }], operationTemplateRef: [{
-                type: ContentChild,
-                args: ['headerOperation']
-            }] } });
+                    ], imports: [NgTemplateOutlet, ThyIcon, NgClass], template: "<div class=\"layout-header-title\">\n  @if (titleTemplateRef()) {\n    <ng-template [ngTemplateOutlet]=\"titleTemplateRef()\"></ng-template>\n  } @else {\n    @if (svgIconName()) {\n      <thy-icon class=\"prefix-icon\" [thyIconName]=\"svgIconName()\"></thy-icon>\n    } @else {\n      @if (iconClass()) {\n        <i class=\"prefix-icon\" [ngClass]=\"iconClass()\"></i>\n      }\n    }\n    <span class=\"title-name\">{{ thyTitle() }}</span>\n  }\n</div>\n<div class=\"layout-header-content\">\n  <ng-template [ngTemplateOutlet]=\"contentTemplateRef()\"></ng-template>\n</div>\n<div class=\"layout-header-operation\">\n  <ng-template [ngTemplateOutlet]=\"operationTemplateRef()\"></ng-template>\n</div>\n" }]
+        }] });
 
 /**
  * 内容布局指令
@@ -221,63 +223,49 @@ const SIDEBAR_COLLAPSED_WIDTH = 20;
 class ThySidebarDirective {
     constructor() {
         this.thyLayoutDirective = inject(ThyLayoutDirective, { optional: true, host: true });
-        this.sidebarIsolated = false;
-        this.isDivided = true;
         /**
          * sidebar 位置，默认在左侧
          */
-        this.thyDirection = 'left';
-    }
-    /**
-     * 宽度，默认是 240px，传入 `lg` 大小时宽度是300px
-     * @default 240px
-     */
-    set thyWidth(value) {
-        if (value === 'lg') {
-            value = LG_WIDTH;
-        }
-        this.thyLayoutSidebarWidth = value || SIDEBAR_DEFAULT_WIDTH;
-    }
-    /**
-     * 是否和右侧 /左侧隔离，当为 true 时距右侧 /左侧会有 margin，同时边框会去掉
-     * @default false
-     */
-    set thyIsolated(value) {
-        this.sidebarIsolated = value;
-    }
-    /**
-     * sidebar 是否有分割线。当`thyDirection`值为`left`时，控制右侧是否有分割线；当`thyDirection`值为`right`时，控制左侧是否有分割线。
-     * @default true
-     */
-    set thyDivided(value) {
-        this.isDivided = value;
-    }
-    /**
-     * 右侧是否有边框，已废弃，请使用 thyDivided
-     * @deprecated please use thyDivided
-     * @default true
-     */
-    set thyHasBorderRight(value) {
-        this.thyDivided = value;
-    }
-    /**
-     * 左侧是否有边框，已废弃，请使用 thyDivided
-     * @deprecated please use thyDivided
-     * @default true
-     */
-    set thyHasBorderLeft(value) {
-        this.thyDivided = value;
+        this.thyDirection = input('left');
+        /**
+         * 主题
+         * @type white | light | dark
+         * @default white
+         */
+        this.thyTheme = input(undefined);
+        /**
+         * 宽度，默认是 240px，传入 `lg` 大小时宽度是300px
+         * @default 240px
+         */
+        this.thyWidth = input(SIDEBAR_DEFAULT_WIDTH, {
+            transform: (value) => {
+                if (value === 'lg') {
+                    return LG_WIDTH;
+                }
+                return value || SIDEBAR_DEFAULT_WIDTH;
+            }
+        });
+        this.sidebarWidth = linkedSignal(() => {
+            return this.thyWidth();
+        });
+        /**
+         * 是否和右侧 /左侧隔离，当为 true 时距右侧 /左侧会有 margin，同时边框会去掉
+         * @default false
+         */
+        this.thyIsolated = input(false, { transform: coerceBooleanProperty });
+        /**
+         * sidebar 是否有分割线。当`thyDirection`值为`left`时，控制右侧是否有分割线；当`thyDirection`值为`right`时，控制左侧是否有分割线。
+         * @default true
+         */
+        this.thyDivided = input(true, { transform: coerceBooleanProperty });
     }
     ngOnInit() {
         if (this.thyLayoutDirective) {
-            this.thyLayoutDirective.hasSidebar = true;
-        }
-        if (this.thyDirection === 'right') {
-            this.thyLayoutDirective.isSidebarRight = true;
+            this.thyLayoutDirective.sidebarDirection.set(this.thyDirection());
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ThySidebarDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "19.2.8", type: ThySidebarDirective, isStandalone: true, selector: "[thySidebar]", inputs: { thyDirection: "thyDirection", thyTheme: "thyTheme", thyWidth: "thyWidth", thyIsolated: ["thyIsolated", "thyIsolated", coerceBooleanProperty], thyDivided: ["thyDivided", "thyDivided", coerceBooleanProperty], thyHasBorderRight: ["thyHasBorderRight", "thyHasBorderRight", coerceBooleanProperty], thyHasBorderLeft: ["thyHasBorderLeft", "thyHasBorderLeft", coerceBooleanProperty] }, host: { properties: { "class.thy-layout-sidebar-right": "thyDirection === \"right\"", "class.thy-layout-sidebar--clear-border-right": "thyDirection === \"left\" && !isDivided", "class.thy-layout-sidebar--clear-border-left": "thyDirection === \"right\" && !isDivided", "class.sidebar-theme-light": "thyTheme === \"light\"", "class.sidebar-theme-dark": "thyTheme === \"dark\"", "class.thy-layout-sidebar-isolated": "sidebarIsolated", "style.width.px": "this.thyLayoutSidebarWidth" }, classAttribute: "thy-layout-sidebar" }, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.8", type: ThySidebarDirective, isStandalone: true, selector: "[thySidebar]", inputs: { thyDirection: { classPropertyName: "thyDirection", publicName: "thyDirection", isSignal: true, isRequired: false, transformFunction: null }, thyTheme: { classPropertyName: "thyTheme", publicName: "thyTheme", isSignal: true, isRequired: false, transformFunction: null }, thyWidth: { classPropertyName: "thyWidth", publicName: "thyWidth", isSignal: true, isRequired: false, transformFunction: null }, thyIsolated: { classPropertyName: "thyIsolated", publicName: "thyIsolated", isSignal: true, isRequired: false, transformFunction: null }, thyDivided: { classPropertyName: "thyDivided", publicName: "thyDivided", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.thy-layout-sidebar-right": "thyDirection() === \"right\"", "class.thy-layout-sidebar--clear-border-right": "thyDirection() === \"left\" && !thyDivided()", "class.thy-layout-sidebar--clear-border-left": "thyDirection() === \"right\" && !thyDivided()", "class.sidebar-theme-light": "thyTheme() === \"light\"", "class.sidebar-theme-dark": "thyTheme() === \"dark\"", "class.thy-layout-sidebar-isolated": "thyIsolated()", "style.width.px": "sidebarWidth()" }, classAttribute: "thy-layout-sidebar" }, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ThySidebarDirective, decorators: [{
             type: Directive,
@@ -285,200 +273,185 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImpor
                     selector: '[thySidebar]',
                     host: {
                         class: 'thy-layout-sidebar',
-                        '[class.thy-layout-sidebar-right]': 'thyDirection === "right"',
-                        '[class.thy-layout-sidebar--clear-border-right]': 'thyDirection === "left" && !isDivided',
-                        '[class.thy-layout-sidebar--clear-border-left]': 'thyDirection === "right" && !isDivided',
-                        '[class.sidebar-theme-light]': 'thyTheme === "light"',
-                        '[class.sidebar-theme-dark]': 'thyTheme === "dark"',
-                        '[class.thy-layout-sidebar-isolated]': 'sidebarIsolated'
+                        '[class.thy-layout-sidebar-right]': 'thyDirection() === "right"',
+                        '[class.thy-layout-sidebar--clear-border-right]': 'thyDirection() === "left" && !thyDivided()',
+                        '[class.thy-layout-sidebar--clear-border-left]': 'thyDirection() === "right" && !thyDivided()',
+                        '[class.sidebar-theme-light]': 'thyTheme() === "light"',
+                        '[class.sidebar-theme-dark]': 'thyTheme() === "dark"',
+                        '[class.thy-layout-sidebar-isolated]': 'thyIsolated()',
+                        '[style.width.px]': 'sidebarWidth()'
                     }
                 }]
-        }], propDecorators: { thyLayoutSidebarWidth: [{
-                type: HostBinding,
-                args: ['style.width.px']
-            }], thyDirection: [{
-                type: Input
-            }], thyTheme: [{
-                type: Input
-            }], thyWidth: [{
-                type: Input,
-                args: ['thyWidth']
-            }], thyIsolated: [{
-                type: Input,
-                args: [{ transform: coerceBooleanProperty }]
-            }], thyDivided: [{
-                type: Input,
-                args: [{ transform: coerceBooleanProperty }]
-            }], thyHasBorderRight: [{
-                type: Input,
-                args: [{ transform: coerceBooleanProperty }]
-            }], thyHasBorderLeft: [{
-                type: Input,
-                args: [{ transform: coerceBooleanProperty }]
-            }] } });
+        }] });
 /**
  * 侧边栏布局组件
  * @name thy-sidebar
  * @order 21
  */
 class ThySidebar {
+    mouseenter($event) {
+        this.isMouseEnter.set(true);
+    }
+    mouseleave($event) {
+        this.isMouseEnter.set(false);
+    }
     constructor() {
         this.locale = injectLocale('layout');
         this.elementRef = inject(ElementRef);
         this.hotkeyDispatcher = inject(ThyHotkeyDispatcher);
         this.sidebarDirective = inject(ThySidebarDirective);
+        this.isMouseEnter = signal(false);
+        this.sidebarWidth = computed(() => {
+            if (this.thyCollapsible() && this.collapsed()) {
+                return this.thyCollapsedWidth();
+            }
+            else {
+                return this.sidebarDirective.sidebarWidth();
+            }
+        });
         /**
          * 宽度是否可以拖拽
          * @default false
          */
-        this.thyDraggable = false;
+        this.thyDraggable = input(false, { transform: coerceBooleanProperty });
+        /**
+         * 拖拽的最大宽度
+         */
+        this.thyDragMaxWidth = input(undefined, { transform: numberAttribute });
+        /**
+         * 拖拽的最小宽度
+         */
+        this.thyDragMinWidth = input(undefined, { transform: numberAttribute });
         /**
          * 展示收起的触发器自定义模板，默认显示展开收起的圆形图标，设置为 null 表示不展示触发元素，手动控制展开收起状态
          * @type null | undefined | TemplateRef<any>
          * @default undefined
          */
-        this.thyTrigger = undefined;
+        this.thyTrigger = input(undefined);
         /**
          * 收起状态改变后的事件
          */
-        this.thyCollapsedChange = new EventEmitter();
+        this.thyCollapsedChange = output();
         /**
          * 拖拽宽度的修改事件
          */
-        this.thyDragWidthChange = new EventEmitter();
+        this.thyDragWidthChange = output();
+        /**
+         * 开启收起/展开功能
+         * @default false
+         */
+        this.thyCollapsible = input(false, { transform: coerceBooleanProperty });
+        /**
+         * 是否是收起
+         * @default false
+         */
+        this.thyCollapsed = input(false, { transform: coerceBooleanProperty });
+        this.collapsed = linkedSignal(() => this.thyCollapsed());
+        this.collapseVisible = computed(() => {
+            return this.isMouseEnter() && !this.collapsed() ? true : false;
+        });
         /**
          * 收起后的宽度
          */
-        this.thyCollapsedWidth = SIDEBAR_COLLAPSED_WIDTH;
-        this.isCollapsed = false;
+        this.thyCollapsedWidth = input(SIDEBAR_COLLAPSED_WIDTH, { transform: numberAttribute });
+        /**
+         * 默认宽度，双击后可恢复到此宽度，默认是 240px，传入 lg 大小时宽度是300px
+         */
+        this.thyDefaultWidth = input(undefined, {
+            transform: (value) => {
+                if (value === 'lg') {
+                    return LG_WIDTH;
+                }
+                return value;
+            }
+        });
+        this.collapseTip = computed(() => {
+            const collapseTip = this.collapsed() ? this.locale().expand : this.locale().collapse;
+            return collapseTip + (isMacPlatform() ? `（⌘ + /)` : `（Ctrl + /)`);
+        });
         this.originWidth = SIDEBAR_DEFAULT_WIDTH;
+        this.collapseHidden = signal(false);
+        this.isRemoveTransition = signal(false);
+        this.isResizable = signal(false);
+        this.dragMinWidth = computed(() => {
+            return this.thyDragMinWidth() || this.thyCollapsedWidth();
+        });
+        effect(() => {
+            const collapsible = this.thyCollapsible();
+            if (collapsible) {
+                this.subscribeHotkeyEvent();
+            }
+            else {
+                this.hotkeySubscription?.unsubscribe();
+            }
+        });
     }
-    get sidebarWidth() {
-        if (this.thyCollapsible && this.thyCollapsed) {
-            return this.thyCollapsedWidth;
-        }
-        else {
-            return this.sidebarDirective.thyLayoutSidebarWidth;
-        }
-    }
-    mouseenter($event) {
-        this.resizeHandleHover($event, 'enter');
-    }
-    mouseleave($event) {
-        this.resizeHandleHover($event, 'leave');
-    }
-    /**
-     * 开启收起/展开功能
-     * @default false
-     */
-    set thyCollapsible(collapsible) {
-        this.collapsible = collapsible;
-        if (this.collapsible) {
-            this.subscribeHotkeyEvent();
-        }
-        else {
-            this.hotkeySubscription?.unsubscribe();
-        }
-    }
-    get thyCollapsible() {
-        return this.collapsible;
-    }
-    /**
-     * 是否是收起
-     * @default false
-     */
-    set thyCollapsed(value) {
-        this.isCollapsed = value;
-    }
-    get thyCollapsed() {
-        return this.isCollapsed;
-    }
-    get collapseVisibility() {
-        return this.thyCollapsed;
-    }
-    get removeTransition() {
-        return this.isRemoveTransition;
-    }
-    get dragMinWidth() {
-        return this.thyDragMinWidth || this.thyCollapsedWidth;
-    }
-    ngOnInit() {
-        this.updateCollapseTip();
-    }
+    ngOnInit() { }
     subscribeHotkeyEvent() {
         this.hotkeySubscription = this.hotkeyDispatcher.keydown(['Control+/', 'Meta+/']).subscribe(() => {
             this.toggleCollapse();
         });
     }
-    updateCollapseTip() {
-        this.collapseTip = this.thyCollapsed ? this.locale().expand : this.locale().collapse;
-        this.collapseTip = this.collapseTip + (isMacPlatform() ? `（⌘ + /)` : `（Ctrl + /)`);
-    }
     resizeHandler({ width }) {
-        if (width === this.sidebarDirective.thyLayoutSidebarWidth) {
+        if (width === this.sidebarDirective.sidebarWidth()) {
             return;
         }
-        if (this.thyCollapsible && width < this.thyCollapsedWidth) {
+        if (this.thyCollapsible() && width < this.thyCollapsedWidth()) {
             return;
         }
-        if (this.thyCollapsible && width === this.thyCollapsedWidth) {
-            this.thyCollapsed = true;
-            setTimeout(() => this.updateCollapseTip(), 200);
-            this.thyCollapsedChange.emit(this.isCollapsed);
-            this.sidebarDirective.thyLayoutSidebarWidth = this.originWidth;
-            this.collapseVisible = false;
+        if (this.thyCollapsible() && width === this.thyCollapsedWidth()) {
+            this.collapsed.set(true);
+            this.thyCollapsedChange.emit(this.collapsed());
+            this.sidebarDirective.sidebarWidth.set(this.originWidth);
+            this.isMouseEnter.set(false);
             return;
         }
-        this.sidebarDirective.thyLayoutSidebarWidth = width;
+        this.sidebarDirective.sidebarWidth.set(width);
         this.thyDragWidthChange.emit(width);
     }
     resizeStart() {
-        this.originWidth = this.sidebarDirective.thyLayoutSidebarWidth;
-        this.collapseHidden = true;
-        this.isRemoveTransition = true;
+        this.originWidth = this.sidebarDirective.sidebarWidth();
+        this.collapseHidden.set(true);
+        this.isRemoveTransition.set(true);
     }
     resizeEnd() {
-        this.collapseHidden = false;
-        this.isRemoveTransition = false;
-    }
-    resizeHandleHover(event, type) {
-        this.collapseVisible = type === 'enter' && !this.thyCollapsed ? true : false;
+        this.collapseHidden.set(false);
+        this.isRemoveTransition.set(false);
     }
     toggleCollapse(event) {
-        this.thyCollapsed = !this.thyCollapsed;
-        setTimeout(() => this.updateCollapseTip(), 200);
-        this.thyCollapsedChange.emit(this.isCollapsed);
+        this.collapsed.update((value) => {
+            return !value;
+        });
+        this.thyCollapsedChange.emit(this.collapsed());
     }
     toggleResizable(event, type) {
-        this.isResizable = type === 'enter' ? true : false;
+        this.isResizable.set(type === 'enter' ? true : false);
     }
     restoreToDefaultWidth() {
-        if (this.thyDefaultWidth === 'lg') {
-            this.thyDefaultWidth = LG_WIDTH;
-        }
-        this.sidebarDirective.thyLayoutSidebarWidth = this.thyDefaultWidth || SIDEBAR_DEFAULT_WIDTH;
-        this.thyDragWidthChange.emit(this.sidebarDirective.thyLayoutSidebarWidth);
+        const thyDefaultWidth = this.thyDefaultWidth();
+        this.sidebarDirective.sidebarWidth.set(thyDefaultWidth || SIDEBAR_DEFAULT_WIDTH);
+        this.thyDragWidthChange.emit(this.sidebarDirective.sidebarWidth());
     }
     ngOnDestroy() {
         this.hotkeySubscription?.unsubscribe();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ThySidebar, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.8", type: ThySidebar, isStandalone: true, selector: "thy-sidebar", inputs: { thyDraggable: ["thyDraggable", "thyDraggable", coerceBooleanProperty], thyDragMaxWidth: ["thyDragMaxWidth", "thyDragMaxWidth", numberAttribute], thyDragMinWidth: ["thyDragMinWidth", "thyDragMinWidth", numberAttribute], thyTrigger: "thyTrigger", thyCollapsible: ["thyCollapsible", "thyCollapsible", coerceBooleanProperty], thyCollapsed: ["thyCollapsed", "thyCollapsed", coerceBooleanProperty], thyCollapsedWidth: ["thyCollapsedWidth", "thyCollapsedWidth", numberAttribute], thyDefaultWidth: "thyDefaultWidth" }, outputs: { thyCollapsedChange: "thyCollapsedChange", thyDragWidthChange: "thyDragWidthChange" }, host: { listeners: { "mouseenter": "mouseenter($event)", "mouseleave": "mouseleave($event)" }, properties: { "style.width.px": "this.sidebarWidth", "class.sidebar-collapse-show": "this.collapseVisibility", "class.remove-transition": "this.removeTransition" } }, hostDirectives: [{ directive: ThySidebarDirective, inputs: ["thyTheme", "thyTheme", "thyDirection", "thyDirection", "thyWidth", "thyWidth", "thyIsolated", "thyIsolated", "thyDivided", "thyDivided", "thyHasBorderLeft", "thyHasBorderLeft", "thyHasBorderRight", "thyHasBorderRight"] }], ngImport: i0, template: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.8", type: ThySidebar, isStandalone: true, selector: "thy-sidebar", inputs: { thyDraggable: { classPropertyName: "thyDraggable", publicName: "thyDraggable", isSignal: true, isRequired: false, transformFunction: null }, thyDragMaxWidth: { classPropertyName: "thyDragMaxWidth", publicName: "thyDragMaxWidth", isSignal: true, isRequired: false, transformFunction: null }, thyDragMinWidth: { classPropertyName: "thyDragMinWidth", publicName: "thyDragMinWidth", isSignal: true, isRequired: false, transformFunction: null }, thyTrigger: { classPropertyName: "thyTrigger", publicName: "thyTrigger", isSignal: true, isRequired: false, transformFunction: null }, thyCollapsible: { classPropertyName: "thyCollapsible", publicName: "thyCollapsible", isSignal: true, isRequired: false, transformFunction: null }, thyCollapsed: { classPropertyName: "thyCollapsed", publicName: "thyCollapsed", isSignal: true, isRequired: false, transformFunction: null }, thyCollapsedWidth: { classPropertyName: "thyCollapsedWidth", publicName: "thyCollapsedWidth", isSignal: true, isRequired: false, transformFunction: null }, thyDefaultWidth: { classPropertyName: "thyDefaultWidth", publicName: "thyDefaultWidth", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { thyCollapsedChange: "thyCollapsedChange", thyDragWidthChange: "thyDragWidthChange" }, host: { listeners: { "mouseenter": "mouseenter($event)", "mouseleave": "mouseleave($event)" }, properties: { "class.sidebar-collapse-show": "collapsed()", "class.remove-transition": "isRemoveTransition()", "style.width.px": "sidebarWidth()" } }, hostDirectives: [{ directive: ThySidebarDirective, inputs: ["thyTheme", "thyTheme", "thyDirection", "thyDirection", "thyWidth", "thyWidth", "thyIsolated", "thyIsolated", "thyDivided", "thyDivided"] }], ngImport: i0, template: `
         <ng-content></ng-content>
-        @if (thyDraggable) {
+        @if (thyDraggable()) {
             <div
                 thyResizable
                 class="sidebar-drag"
                 thyBounds="window"
-                [thyMaxWidth]="thyDragMaxWidth"
-                [thyMinWidth]="dragMinWidth"
+                [thyMaxWidth]="thyDragMaxWidth()"
+                [thyMinWidth]="dragMinWidth()"
                 (thyResize)="resizeHandler($event)"
                 (thyResizeStart)="resizeStart()"
                 (thyResizeEnd)="resizeEnd()"
-                [style.display]="!isResizable ? 'contents' : null">
-                @if (!thyCollapsed) {
+                [style.display]="!isResizable() ? 'contents' : null">
+                @if (!collapsed()) {
                     <thy-resize-handle
-                        [thyDirection]="sidebarDirective.thyDirection === 'right' ? 'left' : 'right'"
+                        [thyDirection]="sidebarDirective.thyDirection() === 'right' ? 'left' : 'right'"
                         class="sidebar-resize-handle"
                         thyLine="true"
                         (mouseenter)="toggleResizable($event, 'enter')"
@@ -488,20 +461,21 @@ class ThySidebar {
                 }
             </div>
         }
-        @if (thyCollapsible) {
+        @if (thyCollapsible()) {
             <div class="sidebar-collapse-line"></div>
-        }
-        @if (thyCollapsible && thyTrigger !== null) {
-            <div
-                class="sidebar-collapse"
-                [ngClass]="{ 'collapse-visible': collapseVisible, 'collapse-hidden': collapseHidden }"
-                (click)="toggleCollapse($event)"
-                [thyTooltip]="!thyTrigger && collapseTip">
-                <ng-template [ngTemplateOutlet]="thyTrigger || defaultTrigger"></ng-template>
-                <ng-template #defaultTrigger>
-                    <thy-icon class="sidebar-collapse-icon" [thyIconName]="this.thyCollapsed ? 'indent' : 'outdent'"></thy-icon>
-                </ng-template>
-            </div>
+
+            @if (thyTrigger() !== null) {
+                <div
+                    class="sidebar-collapse"
+                    [ngClass]="{ 'collapse-visible': collapseVisible(), 'collapse-hidden': collapseHidden() }"
+                    (click)="toggleCollapse($event)"
+                    [thyTooltip]="!thyTrigger() && collapseTip()">
+                    <ng-template [ngTemplateOutlet]="thyTrigger() || defaultTrigger"></ng-template>
+                    <ng-template #defaultTrigger>
+                        <thy-icon class="sidebar-collapse-icon" [thyIconName]="this.collapsed ? 'indent' : 'outdent'"></thy-icon>
+                    </ng-template>
+                </div>
+            }
         }
     `, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ThyResizeHandle, selector: "thy-resize-handle, [thy-resize-handle]", inputs: ["thyDirection", "thyLine"], outputs: ["thyMouseDown"], exportAs: ["thyResizeHandle"] }, { kind: "directive", type: ThyResizableDirective, selector: "[thyResizable]", inputs: ["thyBounds", "thyMaxHeight", "thyMaxWidth", "thyMinHeight", "thyMinWidth", "thyGridColumnCount", "thyMaxColumn", "thyMinColumn", "thyLockAspectRatio", "thyPreview", "thyDisabled"], outputs: ["thyResize", "thyResizeStart", "thyResizeEnd"] }, { kind: "component", type: ThyIcon, selector: "thy-icon, [thy-icon]", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }, { kind: "directive", type: ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
 }
@@ -512,20 +486,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImpor
                     preserveWhitespaces: false,
                     template: `
         <ng-content></ng-content>
-        @if (thyDraggable) {
+        @if (thyDraggable()) {
             <div
                 thyResizable
                 class="sidebar-drag"
                 thyBounds="window"
-                [thyMaxWidth]="thyDragMaxWidth"
-                [thyMinWidth]="dragMinWidth"
+                [thyMaxWidth]="thyDragMaxWidth()"
+                [thyMinWidth]="dragMinWidth()"
                 (thyResize)="resizeHandler($event)"
                 (thyResizeStart)="resizeStart()"
                 (thyResizeEnd)="resizeEnd()"
-                [style.display]="!isResizable ? 'contents' : null">
-                @if (!thyCollapsed) {
+                [style.display]="!isResizable() ? 'contents' : null">
+                @if (!collapsed()) {
                     <thy-resize-handle
-                        [thyDirection]="sidebarDirective.thyDirection === 'right' ? 'left' : 'right'"
+                        [thyDirection]="sidebarDirective.thyDirection() === 'right' ? 'left' : 'right'"
                         class="sidebar-resize-handle"
                         thyLine="true"
                         (mouseenter)="toggleResizable($event, 'enter')"
@@ -535,71 +509,42 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImpor
                 }
             </div>
         }
-        @if (thyCollapsible) {
+        @if (thyCollapsible()) {
             <div class="sidebar-collapse-line"></div>
-        }
-        @if (thyCollapsible && thyTrigger !== null) {
-            <div
-                class="sidebar-collapse"
-                [ngClass]="{ 'collapse-visible': collapseVisible, 'collapse-hidden': collapseHidden }"
-                (click)="toggleCollapse($event)"
-                [thyTooltip]="!thyTrigger && collapseTip">
-                <ng-template [ngTemplateOutlet]="thyTrigger || defaultTrigger"></ng-template>
-                <ng-template #defaultTrigger>
-                    <thy-icon class="sidebar-collapse-icon" [thyIconName]="this.thyCollapsed ? 'indent' : 'outdent'"></thy-icon>
-                </ng-template>
-            </div>
+
+            @if (thyTrigger() !== null) {
+                <div
+                    class="sidebar-collapse"
+                    [ngClass]="{ 'collapse-visible': collapseVisible(), 'collapse-hidden': collapseHidden() }"
+                    (click)="toggleCollapse($event)"
+                    [thyTooltip]="!thyTrigger() && collapseTip()">
+                    <ng-template [ngTemplateOutlet]="thyTrigger() || defaultTrigger"></ng-template>
+                    <ng-template #defaultTrigger>
+                        <thy-icon class="sidebar-collapse-icon" [thyIconName]="this.collapsed ? 'indent' : 'outdent'"></thy-icon>
+                    </ng-template>
+                </div>
+            }
         }
     `,
                     hostDirectives: [
                         {
                             directive: ThySidebarDirective,
-                            inputs: ['thyTheme', 'thyDirection', 'thyWidth', 'thyIsolated', 'thyDivided', 'thyHasBorderLeft', 'thyHasBorderRight']
+                            inputs: ['thyTheme', 'thyDirection', 'thyWidth', 'thyIsolated', 'thyDivided']
                         }
                     ],
-                    imports: [NgTemplateOutlet, ThyResizeHandle, ThyResizableDirective, ThyIcon, ThyTooltipDirective, NgClass]
+                    imports: [NgTemplateOutlet, ThyResizeHandle, ThyResizableDirective, ThyIcon, ThyTooltipDirective, NgClass],
+                    host: {
+                        '[class.sidebar-collapse-show]': 'collapsed()',
+                        '[class.remove-transition]': 'isRemoveTransition()',
+                        '[style.width.px]': 'sidebarWidth()'
+                    }
                 }]
-        }], propDecorators: { sidebarWidth: [{
-                type: HostBinding,
-                args: ['style.width.px']
-            }], mouseenter: [{
+        }], ctorParameters: () => [], propDecorators: { mouseenter: [{
                 type: HostListener,
                 args: ['mouseenter', ['$event']]
             }], mouseleave: [{
                 type: HostListener,
                 args: ['mouseleave', ['$event']]
-            }], thyDraggable: [{
-                type: Input,
-                args: [{ transform: coerceBooleanProperty }]
-            }], thyDragMaxWidth: [{
-                type: Input,
-                args: [{ transform: numberAttribute }]
-            }], thyDragMinWidth: [{
-                type: Input,
-                args: [{ transform: numberAttribute }]
-            }], thyTrigger: [{
-                type: Input
-            }], thyCollapsedChange: [{
-                type: Output
-            }], thyDragWidthChange: [{
-                type: Output
-            }], thyCollapsible: [{
-                type: Input,
-                args: [{ transform: coerceBooleanProperty }]
-            }], thyCollapsed: [{
-                type: Input,
-                args: [{ transform: coerceBooleanProperty }]
-            }], thyCollapsedWidth: [{
-                type: Input,
-                args: [{ transform: numberAttribute }]
-            }], thyDefaultWidth: [{
-                type: Input
-            }], collapseVisibility: [{
-                type: HostBinding,
-                args: ['class.sidebar-collapse-show']
-            }], removeTransition: [{
-                type: HostBinding,
-                args: ['class.remove-transition']
             }] } });
 
 /**
@@ -684,8 +629,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImpor
  * @order 25
  */
 class ThySidebarHeaderDirective {
+    constructor() {
+        /**
+         * 是否有分割线
+         * @default false
+         */
+        this.thyDivided = input(false, { transform: coerceBooleanProperty });
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ThySidebarHeaderDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "19.2.8", type: ThySidebarHeaderDirective, isStandalone: true, selector: "[thySidebarHeader]", inputs: { thyDivided: ["thyDivided", "thyDivided", coerceBooleanProperty] }, host: { properties: { "class.sidebar-header-divided": "thyDivided" }, classAttribute: "sidebar-header" }, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.8", type: ThySidebarHeaderDirective, isStandalone: true, selector: "[thySidebarHeader]", inputs: { thyDivided: { classPropertyName: "thyDivided", publicName: "thyDivided", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.sidebar-header-divided": "thyDivided()" }, classAttribute: "sidebar-header" }, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ThySidebarHeaderDirective, decorators: [{
             type: Directive,
@@ -693,21 +645,34 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImpor
                     selector: '[thySidebarHeader]',
                     host: {
                         class: 'sidebar-header',
-                        '[class.sidebar-header-divided]': 'thyDivided'
+                        '[class.sidebar-header-divided]': 'thyDivided()'
                     }
                 }]
-        }], propDecorators: { thyDivided: [{
-                type: Input,
-                args: [{ transform: coerceBooleanProperty }]
-            }] } });
+        }], ctorParameters: () => [] });
 /**
  * 侧边栏头部布局组件
  * @name thy-sidebar-header
  * @order 26
  */
 class ThySidebarHeader {
+    constructor() {
+        /**
+         * 头部标题
+         */
+        this.thyTitle = input(undefined);
+        /**
+         * 头部自定义操作模板，`<ng-template #headerOperation></ng-template>`
+         * @type TemplateRef
+         */
+        this.operationTemplateRef = contentChild('headerOperation');
+        /**
+         * 头部自定义标题模板，`<ng-template #headerTitle></ng-template>`
+         * @type TemplateRef
+         */
+        this.titleTemplateRef = contentChild('headerTitle');
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ThySidebarHeader, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.8", type: ThySidebarHeader, isStandalone: true, selector: "thy-sidebar-header", inputs: { thyTitle: "thyTitle" }, queries: [{ propertyName: "operationTemplateRef", first: true, predicate: ["headerOperation"], descendants: true }, { propertyName: "titleTemplateRef", first: true, predicate: ["headerTitle"], descendants: true }], hostDirectives: [{ directive: ThySidebarHeaderDirective, inputs: ["thyDivided", "thyDivided"] }], ngImport: i0, template: "@if (thyTitle || titleTemplateRef) {\n  <span class=\"title\">\n    @if (titleTemplateRef) {\n      <ng-template [ngTemplateOutlet]=\"titleTemplateRef\"></ng-template>\n    } @else {\n      {{ thyTitle }}\n    }\n  </span>\n}\n<ng-content></ng-content>\n<div class=\"operation\">\n  <ng-template [ngTemplateOutlet]=\"operationTemplateRef\"></ng-template>\n</div>\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: ThySidebarHeader, isStandalone: true, selector: "thy-sidebar-header", inputs: { thyTitle: { classPropertyName: "thyTitle", publicName: "thyTitle", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "operationTemplateRef", first: true, predicate: ["headerOperation"], descendants: true, isSignal: true }, { propertyName: "titleTemplateRef", first: true, predicate: ["headerTitle"], descendants: true, isSignal: true }], hostDirectives: [{ directive: ThySidebarHeaderDirective, inputs: ["thyDivided", "thyDivided"] }], ngImport: i0, template: "@if (thyTitle() || titleTemplateRef()) {\n  <span class=\"title\">\n    @if (titleTemplateRef()) {\n      <ng-template [ngTemplateOutlet]=\"titleTemplateRef()\"></ng-template>\n    } @else {\n      {{ thyTitle() }}\n    }\n  </span>\n}\n<ng-content></ng-content>\n<div class=\"operation\">\n  <ng-template [ngTemplateOutlet]=\"operationTemplateRef()\"></ng-template>\n</div>\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: ThySidebarHeader, decorators: [{
             type: Component,
@@ -716,16 +681,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImpor
                             directive: ThySidebarHeaderDirective,
                             inputs: ['thyDivided']
                         }
-                    ], imports: [NgTemplateOutlet], template: "@if (thyTitle || titleTemplateRef) {\n  <span class=\"title\">\n    @if (titleTemplateRef) {\n      <ng-template [ngTemplateOutlet]=\"titleTemplateRef\"></ng-template>\n    } @else {\n      {{ thyTitle }}\n    }\n  </span>\n}\n<ng-content></ng-content>\n<div class=\"operation\">\n  <ng-template [ngTemplateOutlet]=\"operationTemplateRef\"></ng-template>\n</div>\n" }]
-        }], propDecorators: { thyTitle: [{
-                type: Input
-            }], operationTemplateRef: [{
-                type: ContentChild,
-                args: ['headerOperation']
-            }], titleTemplateRef: [{
-                type: ContentChild,
-                args: ['headerTitle']
-            }] } });
+                    ], imports: [NgTemplateOutlet], template: "@if (thyTitle() || titleTemplateRef()) {\n  <span class=\"title\">\n    @if (titleTemplateRef()) {\n      <ng-template [ngTemplateOutlet]=\"titleTemplateRef()\"></ng-template>\n    } @else {\n      {{ thyTitle() }}\n    }\n  </span>\n}\n<ng-content></ng-content>\n<div class=\"operation\">\n  <ng-template [ngTemplateOutlet]=\"operationTemplateRef()\"></ng-template>\n</div>\n" }]
+        }] });
 
 /**
  * 侧边栏底部布局指令