ngx-tethys 19.0.13 → 19.1.0-next.0

package/fesm2022/ngx-tethys-breadcrumb.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { inject, Renderer2, ElementRef, ChangeDetectionStrategy, Component, ChangeDetectorRef, numberAttribute, ContentChild, Input, NgModule } from '@angular/core';
+import { inject, Renderer2, ElementRef, ChangeDetectionStrategy, Component, input, computed, numberAttribute, contentChild, NgModule } from '@angular/core';
 import { NgClass, NgTemplateOutlet, CommonModule } from '@angular/common';
 import { ThyIcon, ThyIconModule } from 'ngx-tethys/icon';
 import { ThyDropdownDirective, ThyDropdownMenuItemDirective, ThyDropdownMenuComponent, ThyDropdownModule } from 'ngx-tethys/dropdown';
@@ -60,74 +60,86 @@ const ELLIPSIS_ITEM = { _id: THY_BREADCRUMB_ITEM_ELLIPSIS_ID };
  */
 class ThyBreadcrumb {
     constructor() {
-        this.cdr = inject(ChangeDetectorRef);
+        /**
+         * 面包屑的前缀 展示图标，如 folder-fill
+         */
+        this.thyIcon = input();
+        this.iconClasses = computed(() => {
+            const icon = this.thyIcon();
+            if (icon && icon.includes('wtf')) {
+                const classes = icon.split(' ');
+                if (classes.length === 1) {
+                    classes.unshift('wtf');
+                }
+                return classes;
+            }
+            else {
+                return null;
+            }
+        });
+        this.svgIconName = computed(() => {
+            const icon = this.thyIcon();
+            if (icon && !icon.includes('wtf')) {
+                return icon;
+            }
+            else {
+                return null;
+            }
+        });
+        /**
+         * 面包屑的分隔符，不传值默认为 ">"
+         * @type slash | backslash | vertical-line
+         */
+        this.thySeparator = input();
+        /**
+         * 面包屑的每一项数据
+         */
+        this.items = input(undefined, { alias: 'thyItems' });
         /**
          * 最大显示数量，超出此数量后，面包屑会被省略, 0 表示不省略（仅当传入 thyItems 时有效）
          */
-        this.thyMaxCount = 4;
+        this.thyMaxCount = input(4, { transform: numberAttribute });
         /**
          * 是否可点击弹出已被省略的面包屑项（仅当传入 thyItems 时有效）
          */
-        this.thyExpandable = true;
+        this.thyExpandable = input(true, { transform: coerceBooleanProperty });
+        /**
+         * 面包屑的每一项模板（仅当传入 thyItems 时有效）
+         */
+        this.itemTemplate = contentChild('item');
         this.ellipsisItemId = THY_BREADCRUMB_ITEM_ELLIPSIS_ID;
-    }
-    /**
-     * 面包屑的前缀 展示图标，如 folder-fill
-     */
-    set thyIcon(icon) {
-        this.setIcon(icon);
-    }
-    ngOnInit() {
-        this.resetItems();
-    }
-    ngOnChanges(changes) {
-        if ((changes.items && !changes.items.firstChange) || (changes.thyMaxCount && !changes.thyMaxCount.firstChange)) {
-            this.resetItems();
-        }
-    }
-    setIcon(icon) {
-        if (icon) {
-            if (icon.includes('wtf')) {
-                const classes = icon.split(' ');
-                if (classes.length === 1) {
-                    classes.unshift('wtf');
-                }
-                this.iconClasses = classes;
+        this.processedItems = computed(() => {
+            const items = this.items();
+            if (!items?.length) {
+                return;
+            }
+            const thyMaxCount = this.thyMaxCount();
+            if (thyMaxCount && items.length > thyMaxCount) {
+                const ellipsisIndex = items.length - thyMaxCount + 2;
+                return {
+                    ellipsisItems: items.slice(1, ellipsisIndex),
+                    showItems: [items[0], ELLIPSIS_ITEM, ...items.slice(ellipsisIndex)]
+                };
             }
             else {
-                this.svgIconName = icon;
+                return {
+                    ellipsisItems: [],
+                    showItems: [...items]
+                };
             }
-        }
-        else {
-            this.iconClasses = null;
-            this.svgIconName = null;
-        }
-    }
-    resetItems() {
-        if (!this.items?.length) {
-            return;
-        }
-        if (this.thyMaxCount && this.items.length > this.thyMaxCount) {
-            const ellipsisIndex = this.items.length - this.thyMaxCount + 2;
-            this.ellipsisItems = this.items.slice(1, ellipsisIndex);
-            this.showItems = [this.items[0], ELLIPSIS_ITEM, ...this.items.slice(ellipsisIndex)];
-        }
-        else {
-            this.showItems = [...this.items];
-            this.ellipsisItems = [];
-        }
+        });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ThyBreadcrumb, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.8", type: ThyBreadcrumb, isStandalone: true, selector: "thy-breadcrumb", inputs: { thyIcon: "thyIcon", thySeparator: "thySeparator", items: ["thyItems", "items"], thyMaxCount: ["thyMaxCount", "thyMaxCount", numberAttribute], thyExpandable: ["thyExpandable", "thyExpandable", coerceBooleanProperty] }, host: { properties: { "class.thy-breadcrumb-separator": "!!thySeparator", "class.thy-breadcrumb-separator-slash": "thySeparator === \"slash\"", "class.thy-breadcrumb-separator-backslash": "thySeparator === \"backslash\"", "class.thy-breadcrumb-separator-vertical-line": "thySeparator === \"vertical-line\"" }, classAttribute: "thy-breadcrumb" }, queries: [{ propertyName: "itemTemplate", first: true, predicate: ["item"], descendants: true }], exportAs: ["ThyBreadcrumb"], usesOnChanges: true, ngImport: i0, template: "@if (svgIconName || iconClasses) {\n  <div class=\"thy-breadcrumb-icon\">\n    @if (svgIconName) {\n      <thy-icon [thyIconName]=\"svgIconName\"></thy-icon>\n    } @else {\n      <i [ngClass]=\"iconClasses\"></i>\n    }\n  </div>\n}\n\n@for (item of showItems; track $index) {\n  <thy-breadcrumb-item class=\"thy-breadcrumb-item-ellipsis\">\n    @if (item?._id !== ellipsisItemId) {\n      <ng-container *ngTemplateOutlet=\"itemContentTpl; context: { $implicit: item }\"></ng-container>\n    } @else {\n      <a\n        thyAction\n        href=\"javascript:;\"\n        thyActionIcon=\"more\"\n        thyActiveClass=\"active\"\n        [class.disabled]=\"!thyExpandable\"\n        class=\"ellipsis-action ml-n1 mr-n1\"\n        [thyDropdown]=\"ellipsisList\"></a>\n    }\n  </thy-breadcrumb-item>\n}\n\n<ng-template #ellipsisList>\n  <thy-dropdown-menu thyImmediateRender>\n    @for (item of ellipsisItems; track $index) {\n      <a thyDropdownMenuItem href=\"javascript:;\">\n        <ng-template *ngTemplateOutlet=\"itemContentTpl; context: { $implicit: item }\"></ng-template>\n      </a>\n    }\n  </thy-dropdown-menu>\n</ng-template>\n\n<ng-template #itemContentTpl let-item>\n  @if (itemTemplate) {\n    <ng-template *ngTemplateOutlet=\"itemTemplate; context: { $implicit: item }\"></ng-template>\n  } @else {\n    @if (item?.icon) {\n      <thy-icon [thyIconName]=\"item.icon\" class=\"mr-2\"></thy-icon>\n    }\n    @if (item?.name) {\n      <span>{{ item.name }}</span>\n    }\n  }\n</ng-template>\n\n<ng-content></ng-content>\n", dependencies: [{ 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"] }, { kind: "component", type: ThyBreadcrumbItem, selector: "thy-breadcrumb-item,[thyBreadcrumbItem]", exportAs: ["ThyBreadcrumbItem"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ThyAction, selector: "thy-action, [thyAction]", inputs: ["thyType", "thyIcon", "thyActionIcon", "thyActive", "thyActionActive", "thyTheme", "thyHoverIcon", "thyDisabled"] }, { kind: "directive", type: ThyDropdownDirective, selector: "[thyDropdown]", inputs: ["thyDropdownMenu", "thyDropdown", "thyTrigger", "thyShowDelay", "thyHideDelay", "thyActiveClass", "thyPopoverOptions", "thyPlacement", "thyMenuInsideClosable", "thyPanelClass"], outputs: ["thyActiveChange"] }, { kind: "directive", type: ThyDropdownMenuItemDirective, selector: "[thyDropdownMenuItem]", inputs: ["thyType", "thyDisabled"] }, { kind: "component", type: ThyDropdownMenuComponent, selector: "thy-dropdown-menu", inputs: ["thyWidth", "thyImmediateRender"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.8", type: ThyBreadcrumb, isStandalone: true, selector: "thy-breadcrumb", inputs: { thyIcon: { classPropertyName: "thyIcon", publicName: "thyIcon", isSignal: true, isRequired: false, transformFunction: null }, thySeparator: { classPropertyName: "thySeparator", publicName: "thySeparator", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "thyItems", isSignal: true, isRequired: false, transformFunction: null }, thyMaxCount: { classPropertyName: "thyMaxCount", publicName: "thyMaxCount", isSignal: true, isRequired: false, transformFunction: null }, thyExpandable: { classPropertyName: "thyExpandable", publicName: "thyExpandable", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.thy-breadcrumb-separator": "!!thySeparator()", "class.thy-breadcrumb-separator-slash": "thySeparator() === \"slash\"", "class.thy-breadcrumb-separator-backslash": "thySeparator() === \"backslash\"", "class.thy-breadcrumb-separator-vertical-line": "thySeparator() === \"vertical-line\"" }, classAttribute: "thy-breadcrumb" }, queries: [{ propertyName: "itemTemplate", first: true, predicate: ["item"], descendants: true, isSignal: true }], exportAs: ["ThyBreadcrumb"], ngImport: i0, template: "@if (svgIconName() || iconClasses()) {\n  <div class=\"thy-breadcrumb-icon\">\n    @if (svgIconName()) {\n      <thy-icon [thyIconName]=\"svgIconName()\"></thy-icon>\n    } @else {\n      <i [ngClass]=\"iconClasses()\"></i>\n    }\n  </div>\n}\n\n@for (item of processedItems()?.showItems; track $index) {\n  <thy-breadcrumb-item class=\"thy-breadcrumb-item-ellipsis\">\n    @if (item?._id !== ellipsisItemId) {\n      <ng-container *ngTemplateOutlet=\"itemContentTpl; context: { $implicit: item }\"></ng-container>\n    } @else {\n      <a\n        thyAction\n        href=\"javascript:;\"\n        thyActionIcon=\"more\"\n        thyActiveClass=\"active\"\n        [class.disabled]=\"!thyExpandable()\"\n        class=\"ellipsis-action ml-n1 mr-n1\"\n        [thyDropdown]=\"ellipsisList\"></a>\n    }\n  </thy-breadcrumb-item>\n}\n\n<ng-template #ellipsisList>\n  <thy-dropdown-menu thyImmediateRender>\n    @for (item of processedItems()?.ellipsisItems; track $index) {\n      <a thyDropdownMenuItem href=\"javascript:;\">\n        <ng-template *ngTemplateOutlet=\"itemContentTpl; context: { $implicit: item }\"></ng-template>\n      </a>\n    }\n  </thy-dropdown-menu>\n</ng-template>\n\n<ng-template #itemContentTpl let-item>\n  @if (itemTemplate()) {\n    <ng-template *ngTemplateOutlet=\"itemTemplate(); context: { $implicit: item }\"></ng-template>\n  } @else {\n    @if (item?.icon) {\n      <thy-icon [thyIconName]=\"item.icon\" class=\"mr-2\"></thy-icon>\n    }\n    @if (item?.name) {\n      <span>{{ item.name }}</span>\n    }\n  }\n</ng-template>\n\n<ng-content></ng-content>\n", dependencies: [{ 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"] }, { kind: "component", type: ThyBreadcrumbItem, selector: "thy-breadcrumb-item,[thyBreadcrumbItem]", exportAs: ["ThyBreadcrumbItem"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ThyAction, selector: "thy-action, [thyAction]", inputs: ["thyType", "thyIcon", "thyActionIcon", "thyActive", "thyActionActive", "thyTheme", "thyHoverIcon", "thyDisabled"] }, { kind: "directive", type: ThyDropdownDirective, selector: "[thyDropdown]", inputs: ["thyDropdownMenu", "thyDropdown", "thyTrigger", "thyShowDelay", "thyHideDelay", "thyActiveClass", "thyPopoverOptions", "thyPlacement", "thyMenuInsideClosable", "thyPanelClass"], outputs: ["thyActiveChange"] }, { kind: "directive", type: ThyDropdownMenuItemDirective, selector: "[thyDropdownMenuItem]", inputs: ["thyType", "thyDisabled"] }, { kind: "component", type: ThyDropdownMenuComponent, selector: "thy-dropdown-menu", inputs: ["thyWidth", "thyImmediateRender"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ThyBreadcrumb, decorators: [{
             type: Component,
             args: [{ selector: 'thy-breadcrumb', exportAs: 'ThyBreadcrumb', changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         class: 'thy-breadcrumb',
-                        '[class.thy-breadcrumb-separator]': '!!thySeparator',
-                        '[class.thy-breadcrumb-separator-slash]': 'thySeparator === "slash"',
-                        '[class.thy-breadcrumb-separator-backslash]': 'thySeparator === "backslash"',
-                        '[class.thy-breadcrumb-separator-vertical-line]': 'thySeparator === "vertical-line"'
+                        '[class.thy-breadcrumb-separator]': '!!thySeparator()',
+                        '[class.thy-breadcrumb-separator-slash]': 'thySeparator() === "slash"',
+                        '[class.thy-breadcrumb-separator-backslash]': 'thySeparator() === "backslash"',
+                        '[class.thy-breadcrumb-separator-vertical-line]': 'thySeparator() === "vertical-line"'
                     }, imports: [
                         ThyIcon,
                         NgClass,
@@ -138,24 +150,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImpor
                         ThyDropdownMenuItemDirective,
                         ThyDropdownMenuComponent,
                         ThyIcon
-                    ], template: "@if (svgIconName || iconClasses) {\n  <div class=\"thy-breadcrumb-icon\">\n    @if (svgIconName) {\n      <thy-icon [thyIconName]=\"svgIconName\"></thy-icon>\n    } @else {\n      <i [ngClass]=\"iconClasses\"></i>\n    }\n  </div>\n}\n\n@for (item of showItems; track $index) {\n  <thy-breadcrumb-item class=\"thy-breadcrumb-item-ellipsis\">\n    @if (item?._id !== ellipsisItemId) {\n      <ng-container *ngTemplateOutlet=\"itemContentTpl; context: { $implicit: item }\"></ng-container>\n    } @else {\n      <a\n        thyAction\n        href=\"javascript:;\"\n        thyActionIcon=\"more\"\n        thyActiveClass=\"active\"\n        [class.disabled]=\"!thyExpandable\"\n        class=\"ellipsis-action ml-n1 mr-n1\"\n        [thyDropdown]=\"ellipsisList\"></a>\n    }\n  </thy-breadcrumb-item>\n}\n\n<ng-template #ellipsisList>\n  <thy-dropdown-menu thyImmediateRender>\n    @for (item of ellipsisItems; track $index) {\n      <a thyDropdownMenuItem href=\"javascript:;\">\n        <ng-template *ngTemplateOutlet=\"itemContentTpl; context: { $implicit: item }\"></ng-template>\n      </a>\n    }\n  </thy-dropdown-menu>\n</ng-template>\n\n<ng-template #itemContentTpl let-item>\n  @if (itemTemplate) {\n    <ng-template *ngTemplateOutlet=\"itemTemplate; context: { $implicit: item }\"></ng-template>\n  } @else {\n    @if (item?.icon) {\n      <thy-icon [thyIconName]=\"item.icon\" class=\"mr-2\"></thy-icon>\n    }\n    @if (item?.name) {\n      <span>{{ item.name }}</span>\n    }\n  }\n</ng-template>\n\n<ng-content></ng-content>\n" }]
-        }], propDecorators: { thyIcon: [{
-                type: Input
-            }], thySeparator: [{
-                type: Input
-            }], items: [{
-                type: Input,
-                args: [{ alias: 'thyItems' }]
-            }], thyMaxCount: [{
-                type: Input,
-                args: [{ transform: numberAttribute }]
-            }], thyExpandable: [{
-                type: Input,
-                args: [{ transform: coerceBooleanProperty }]
-            }], itemTemplate: [{
-                type: ContentChild,
-                args: ['item']
-            }] } });
+                    ], template: "@if (svgIconName() || iconClasses()) {\n  <div class=\"thy-breadcrumb-icon\">\n    @if (svgIconName()) {\n      <thy-icon [thyIconName]=\"svgIconName()\"></thy-icon>\n    } @else {\n      <i [ngClass]=\"iconClasses()\"></i>\n    }\n  </div>\n}\n\n@for (item of processedItems()?.showItems; track $index) {\n  <thy-breadcrumb-item class=\"thy-breadcrumb-item-ellipsis\">\n    @if (item?._id !== ellipsisItemId) {\n      <ng-container *ngTemplateOutlet=\"itemContentTpl; context: { $implicit: item }\"></ng-container>\n    } @else {\n      <a\n        thyAction\n        href=\"javascript:;\"\n        thyActionIcon=\"more\"\n        thyActiveClass=\"active\"\n        [class.disabled]=\"!thyExpandable()\"\n        class=\"ellipsis-action ml-n1 mr-n1\"\n        [thyDropdown]=\"ellipsisList\"></a>\n    }\n  </thy-breadcrumb-item>\n}\n\n<ng-template #ellipsisList>\n  <thy-dropdown-menu thyImmediateRender>\n    @for (item of processedItems()?.ellipsisItems; track $index) {\n      <a thyDropdownMenuItem href=\"javascript:;\">\n        <ng-template *ngTemplateOutlet=\"itemContentTpl; context: { $implicit: item }\"></ng-template>\n      </a>\n    }\n  </thy-dropdown-menu>\n</ng-template>\n\n<ng-template #itemContentTpl let-item>\n  @if (itemTemplate()) {\n    <ng-template *ngTemplateOutlet=\"itemTemplate(); context: { $implicit: item }\"></ng-template>\n  } @else {\n    @if (item?.icon) {\n      <thy-icon [thyIconName]=\"item.icon\" class=\"mr-2\"></thy-icon>\n    }\n    @if (item?.name) {\n      <span>{{ item.name }}</span>\n    }\n  }\n</ng-template>\n\n<ng-content></ng-content>\n" }]
+        }] });
 
 class ThyBreadcrumbModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ThyBreadcrumbModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }

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

@@ -1 +1 @@
-{"version":3,"file":"ngx-tethys-breadcrumb.mjs","sources":["../../../src/breadcrumb/breadcrumb-item.component.ts","../../../src/breadcrumb/breadcrumb.component.ts","../../../src/breadcrumb/breadcrumb.component.html","../../../src/breadcrumb/module.ts","../../../src/breadcrumb/ngx-tethys-breadcrumb.ts"],"sourcesContent":["import { Component, ChangeDetectionStrategy, AfterViewInit, ElementRef, Renderer2, inject } from '@angular/core';\nimport { ThyIcon } from 'ngx-tethys/icon';\n\n/**\n * 面包屑 Item 组件\n * @name thy-breadcrumb-item,[thyBreadcrumbItem]\n * @order 20\n */\n@Component({\n    selector: 'thy-breadcrumb-item,[thyBreadcrumbItem]',\n    template: '<ng-content></ng-content><thy-icon class=\"separator-icon\" thyIconName=\"angle-right\"></thy-icon>',\n    exportAs: 'ThyBreadcrumbItem',\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    host: {\n        class: 'thy-breadcrumb-item'\n    },\n    imports: [ThyIcon]\n})\nexport class ThyBreadcrumbItem implements AfterViewInit {\n    private renderer = inject(Renderer2);\n    private elementRef = inject(ElementRef);\n\n    ngAfterViewInit() {\n        this.wrapSpanForText(this.elementRef.nativeElement.childNodes);\n        const link: HTMLElement = this.elementRef.nativeElement.querySelector('a');\n        if (link && link.childNodes) {\n            this.wrapSpanForText(link.childNodes);\n        }\n    }\n\n    private wrapSpanForText(nodes: NodeList): void {\n        nodes.forEach(node => {\n            if (node.nodeName === '#text') {\n                const span = this.renderer.createElement('span');\n                const parent = this.renderer.parentNode(node);\n                this.renderer.addClass(span, 'thy-wrap-span');\n                this.renderer.insertBefore(parent, span, node);\n                this.renderer.appendChild(span, node);\n            }\n        });\n    }\n}\n","import {\n    Component,\n    ChangeDetectionStrategy,\n    Input,\n    ContentChild,\n    TemplateRef,\n    numberAttribute,\n    OnChanges,\n    SimpleChanges,\n    OnInit,\n    ChangeDetectorRef,\n    inject\n} from '@angular/core';\nimport { ThyIcon } from 'ngx-tethys/icon';\nimport { NgClass, NgTemplateOutlet } from '@angular/common';\nimport { ThyBreadcrumbItem } from './breadcrumb-item.component';\nimport { SafeAny } from 'ngx-tethys/types';\nimport {\n    ThyDropdownDirective,\n    ThyDropdownMenuComponent,\n    ThyDropdownMenuItemDirective,\n    ThyDropdownMenuItemNameDirective\n} from 'ngx-tethys/dropdown';\nimport { ThyAction } from 'ngx-tethys/action';\nimport { coerceBooleanProperty } from 'ngx-tethys/util';\n\nconst THY_BREADCRUMB_ITEM_ELLIPSIS_ID = 'THY_BREADCRUMB_ITEM_ELLIPSIS_ID';\n\nconst ELLIPSIS_ITEM = { _id: THY_BREADCRUMB_ITEM_ELLIPSIS_ID };\n\n/**\n * 面包屑组件\n * @name thy-breadcrumb\n * @order 10\n */\n@Component({\n    selector: 'thy-breadcrumb',\n    templateUrl: './breadcrumb.component.html',\n    exportAs: 'ThyBreadcrumb',\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    host: {\n        class: 'thy-breadcrumb',\n        '[class.thy-breadcrumb-separator]': '!!thySeparator',\n        '[class.thy-breadcrumb-separator-slash]': 'thySeparator === \"slash\"',\n        '[class.thy-breadcrumb-separator-backslash]': 'thySeparator === \"backslash\"',\n        '[class.thy-breadcrumb-separator-vertical-line]': 'thySeparator === \"vertical-line\"'\n    },\n    imports: [\n        ThyIcon,\n        NgClass,\n        ThyBreadcrumbItem,\n        NgTemplateOutlet,\n        ThyAction,\n        ThyDropdownDirective,\n        ThyDropdownMenuItemDirective,\n        ThyDropdownMenuComponent,\n        ThyIcon\n    ]\n})\nexport class ThyBreadcrumb implements OnInit, OnChanges {\n    private cdr = inject(ChangeDetectorRef);\n\n    iconClasses: string[];\n    svgIconName: string;\n\n    /**\n     * 面包屑的前缀 展示图标，如 folder-fill\n     */\n    @Input()\n    set thyIcon(icon: string) {\n        this.setIcon(icon);\n    }\n\n    /**\n     * 面包屑的分隔符，不传值默认为 \">\"\n     * @type slash | backslash | vertical-line\n     */\n    @Input() thySeparator: 'slash' | 'backslash' | 'vertical-line';\n\n    /**\n     * 面包屑的每一项数据\n     */\n    @Input({ alias: 'thyItems' }) items: SafeAny[];\n\n    /**\n     * 最大显示数量，超出此数量后，面包屑会被省略, 0 表示不省略（仅当传入 thyItems 时有效）\n     */\n    @Input({ transform: numberAttribute }) thyMaxCount = 4;\n\n    /**\n     * 是否可点击弹出已被省略的面包屑项（仅当传入 thyItems 时有效）\n     */\n    @Input({ transform: coerceBooleanProperty }) thyExpandable = true;\n\n    /**\n     * 面包屑的每一项模板（仅当传入 thyItems 时有效）\n     */\n    @ContentChild('item') itemTemplate: TemplateRef<SafeAny>;\n\n    public ellipsisItemId = THY_BREADCRUMB_ITEM_ELLIPSIS_ID;\n\n    public ellipsisItems: SafeAny[];\n\n    public showItems: SafeAny[];\n\n    ngOnInit() {\n        this.resetItems();\n    }\n\n    ngOnChanges(changes: SimpleChanges) {\n        if ((changes.items && !changes.items.firstChange) || (changes.thyMaxCount && !changes.thyMaxCount.firstChange)) {\n            this.resetItems();\n        }\n    }\n\n    private setIcon(icon: string) {\n        if (icon) {\n            if (icon.includes('wtf')) {\n                const classes = icon.split(' ');\n                if (classes.length === 1) {\n                    classes.unshift('wtf');\n                }\n                this.iconClasses = classes;\n            } else {\n                this.svgIconName = icon;\n            }\n        } else {\n            this.iconClasses = null;\n            this.svgIconName = null;\n        }\n    }\n\n    private resetItems() {\n        if (!this.items?.length) {\n            return;\n        }\n        if (this.thyMaxCount && this.items.length > this.thyMaxCount) {\n            const ellipsisIndex = this.items.length - this.thyMaxCount + 2;\n            this.ellipsisItems = this.items.slice(1, ellipsisIndex);\n            this.showItems = [this.items[0], ELLIPSIS_ITEM, ...this.items.slice(ellipsisIndex)];\n        } else {\n            this.showItems = [...this.items];\n            this.ellipsisItems = [];\n        }\n    }\n}\n","@if (svgIconName || iconClasses) {\n  <div class=\"thy-breadcrumb-icon\">\n    @if (svgIconName) {\n      <thy-icon [thyIconName]=\"svgIconName\"></thy-icon>\n    } @else {\n      <i [ngClass]=\"iconClasses\"></i>\n    }\n  </div>\n}\n\n@for (item of showItems; track $index) {\n  <thy-breadcrumb-item class=\"thy-breadcrumb-item-ellipsis\">\n    @if (item?._id !== ellipsisItemId) {\n      <ng-container *ngTemplateOutlet=\"itemContentTpl; context: { $implicit: item }\"></ng-container>\n    } @else {\n      <a\n        thyAction\n        href=\"javascript:;\"\n        thyActionIcon=\"more\"\n        thyActiveClass=\"active\"\n        [class.disabled]=\"!thyExpandable\"\n        class=\"ellipsis-action ml-n1 mr-n1\"\n        [thyDropdown]=\"ellipsisList\"></a>\n    }\n  </thy-breadcrumb-item>\n}\n\n<ng-template #ellipsisList>\n  <thy-dropdown-menu thyImmediateRender>\n    @for (item of ellipsisItems; track $index) {\n      <a thyDropdownMenuItem href=\"javascript:;\">\n        <ng-template *ngTemplateOutlet=\"itemContentTpl; context: { $implicit: item }\"></ng-template>\n      </a>\n    }\n  </thy-dropdown-menu>\n</ng-template>\n\n<ng-template #itemContentTpl let-item>\n  @if (itemTemplate) {\n    <ng-template *ngTemplateOutlet=\"itemTemplate; context: { $implicit: item }\"></ng-template>\n  } @else {\n    @if (item?.icon) {\n      <thy-icon [thyIconName]=\"item.icon\" class=\"mr-2\"></thy-icon>\n    }\n    @if (item?.name) {\n      <span>{{ item.name }}</span>\n    }\n  }\n</ng-template>\n\n<ng-content></ng-content>\n","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { ThyBreadcrumb } from './breadcrumb.component';\nimport { ThyBreadcrumbItem } from './breadcrumb-item.component';\nimport { ThyIconModule } from 'ngx-tethys/icon';\nimport { ThyActionModule } from 'ngx-tethys/action';\nimport { ThyDropdownModule } from 'ngx-tethys/dropdown';\n\n@NgModule({\n    imports: [CommonModule, ThyIconModule, ThyBreadcrumb, ThyBreadcrumbItem, ThyActionModule, ThyDropdownModule],\n    exports: [ThyBreadcrumb, ThyBreadcrumbItem]\n})\nexport class ThyBreadcrumbModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"ngx-tethys-breadcrumb.mjs","sources":["../../../src/breadcrumb/breadcrumb-item.component.ts","../../../src/breadcrumb/breadcrumb.component.ts","../../../src/breadcrumb/breadcrumb.component.html","../../../src/breadcrumb/module.ts","../../../src/breadcrumb/ngx-tethys-breadcrumb.ts"],"sourcesContent":["import { Component, ChangeDetectionStrategy, AfterViewInit, ElementRef, Renderer2, inject } from '@angular/core';\nimport { ThyIcon } from 'ngx-tethys/icon';\n\n/**\n * 面包屑 Item 组件\n * @name thy-breadcrumb-item,[thyBreadcrumbItem]\n * @order 20\n */\n@Component({\n    selector: 'thy-breadcrumb-item,[thyBreadcrumbItem]',\n    template: '<ng-content></ng-content><thy-icon class=\"separator-icon\" thyIconName=\"angle-right\"></thy-icon>',\n    exportAs: 'ThyBreadcrumbItem',\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    host: {\n        class: 'thy-breadcrumb-item'\n    },\n    imports: [ThyIcon]\n})\nexport class ThyBreadcrumbItem implements AfterViewInit {\n    private renderer = inject(Renderer2);\n    private elementRef = inject(ElementRef);\n\n    ngAfterViewInit() {\n        this.wrapSpanForText(this.elementRef.nativeElement.childNodes);\n        const link: HTMLElement = this.elementRef.nativeElement.querySelector('a');\n        if (link && link.childNodes) {\n            this.wrapSpanForText(link.childNodes);\n        }\n    }\n\n    private wrapSpanForText(nodes: NodeList): void {\n        nodes.forEach(node => {\n            if (node.nodeName === '#text') {\n                const span = this.renderer.createElement('span');\n                const parent = this.renderer.parentNode(node);\n                this.renderer.addClass(span, 'thy-wrap-span');\n                this.renderer.insertBefore(parent, span, node);\n                this.renderer.appendChild(span, node);\n            }\n        });\n    }\n}\n","import { Component, ChangeDetectionStrategy, TemplateRef, numberAttribute, input, contentChild, Signal, computed } from '@angular/core';\nimport { ThyIcon } from 'ngx-tethys/icon';\nimport { NgClass, NgTemplateOutlet } from '@angular/common';\nimport { ThyBreadcrumbItem } from './breadcrumb-item.component';\nimport { SafeAny } from 'ngx-tethys/types';\nimport { ThyDropdownDirective, ThyDropdownMenuComponent, ThyDropdownMenuItemDirective } from 'ngx-tethys/dropdown';\nimport { ThyAction } from 'ngx-tethys/action';\nimport { coerceBooleanProperty } from 'ngx-tethys/util';\n\nconst THY_BREADCRUMB_ITEM_ELLIPSIS_ID = 'THY_BREADCRUMB_ITEM_ELLIPSIS_ID';\n\nconst ELLIPSIS_ITEM = { _id: THY_BREADCRUMB_ITEM_ELLIPSIS_ID };\n\n/**\n * 面包屑组件\n * @name thy-breadcrumb\n * @order 10\n */\n@Component({\n    selector: 'thy-breadcrumb',\n    templateUrl: './breadcrumb.component.html',\n    exportAs: 'ThyBreadcrumb',\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    host: {\n        class: 'thy-breadcrumb',\n        '[class.thy-breadcrumb-separator]': '!!thySeparator()',\n        '[class.thy-breadcrumb-separator-slash]': 'thySeparator() === \"slash\"',\n        '[class.thy-breadcrumb-separator-backslash]': 'thySeparator() === \"backslash\"',\n        '[class.thy-breadcrumb-separator-vertical-line]': 'thySeparator() === \"vertical-line\"'\n    },\n    imports: [\n        ThyIcon,\n        NgClass,\n        ThyBreadcrumbItem,\n        NgTemplateOutlet,\n        ThyAction,\n        ThyDropdownDirective,\n        ThyDropdownMenuItemDirective,\n        ThyDropdownMenuComponent,\n        ThyIcon\n    ]\n})\nexport class ThyBreadcrumb {\n    /**\n     * 面包屑的前缀 展示图标，如 folder-fill\n     */\n    readonly thyIcon = input<string>();\n\n    iconClasses: Signal<string[]> = computed(() => {\n        const icon = this.thyIcon();\n        if (icon && icon.includes('wtf')) {\n            const classes = icon.split(' ');\n            if (classes.length === 1) {\n                classes.unshift('wtf');\n            }\n            return classes;\n        } else {\n            return null;\n        }\n    });\n\n    svgIconName: Signal<string> = computed(() => {\n        const icon = this.thyIcon();\n        if (icon && !icon.includes('wtf')) {\n            return icon;\n        } else {\n            return null;\n        }\n    });\n\n    /**\n     * 面包屑的分隔符，不传值默认为 \">\"\n     * @type slash | backslash | vertical-line\n     */\n    readonly thySeparator = input<'slash' | 'backslash' | 'vertical-line'>();\n\n    /**\n     * 面包屑的每一项数据\n     */\n    readonly items = input<SafeAny[]>(undefined, { alias: 'thyItems' });\n\n    /**\n     * 最大显示数量，超出此数量后，面包屑会被省略, 0 表示不省略（仅当传入 thyItems 时有效）\n     */\n    readonly thyMaxCount = input(4, { transform: numberAttribute });\n\n    /**\n     * 是否可点击弹出已被省略的面包屑项（仅当传入 thyItems 时有效）\n     */\n    readonly thyExpandable = input(true, { transform: coerceBooleanProperty });\n\n    /**\n     * 面包屑的每一项模板（仅当传入 thyItems 时有效）\n     */\n    readonly itemTemplate = contentChild<TemplateRef<SafeAny>>('item');\n\n    public ellipsisItemId = THY_BREADCRUMB_ITEM_ELLIPSIS_ID;\n\n    public readonly processedItems: Signal<{\n        ellipsisItems: SafeAny[];\n        showItems: SafeAny[];\n    }> = computed(() => {\n        const items = this.items();\n        if (!items?.length) {\n            return;\n        }\n        const thyMaxCount = this.thyMaxCount();\n        if (thyMaxCount && items.length > thyMaxCount) {\n            const ellipsisIndex = items.length - thyMaxCount + 2;\n            return {\n                ellipsisItems: items.slice(1, ellipsisIndex),\n                showItems: [items[0], ELLIPSIS_ITEM, ...items.slice(ellipsisIndex)]\n            };\n        } else {\n            return {\n                ellipsisItems: [],\n                showItems: [...items]\n            };\n        }\n    });\n}\n","@if (svgIconName() || iconClasses()) {\n  <div class=\"thy-breadcrumb-icon\">\n    @if (svgIconName()) {\n      <thy-icon [thyIconName]=\"svgIconName()\"></thy-icon>\n    } @else {\n      <i [ngClass]=\"iconClasses()\"></i>\n    }\n  </div>\n}\n\n@for (item of processedItems()?.showItems; track $index) {\n  <thy-breadcrumb-item class=\"thy-breadcrumb-item-ellipsis\">\n    @if (item?._id !== ellipsisItemId) {\n      <ng-container *ngTemplateOutlet=\"itemContentTpl; context: { $implicit: item }\"></ng-container>\n    } @else {\n      <a\n        thyAction\n        href=\"javascript:;\"\n        thyActionIcon=\"more\"\n        thyActiveClass=\"active\"\n        [class.disabled]=\"!thyExpandable()\"\n        class=\"ellipsis-action ml-n1 mr-n1\"\n        [thyDropdown]=\"ellipsisList\"></a>\n    }\n  </thy-breadcrumb-item>\n}\n\n<ng-template #ellipsisList>\n  <thy-dropdown-menu thyImmediateRender>\n    @for (item of processedItems()?.ellipsisItems; track $index) {\n      <a thyDropdownMenuItem href=\"javascript:;\">\n        <ng-template *ngTemplateOutlet=\"itemContentTpl; context: { $implicit: item }\"></ng-template>\n      </a>\n    }\n  </thy-dropdown-menu>\n</ng-template>\n\n<ng-template #itemContentTpl let-item>\n  @if (itemTemplate()) {\n    <ng-template *ngTemplateOutlet=\"itemTemplate(); context: { $implicit: item }\"></ng-template>\n  } @else {\n    @if (item?.icon) {\n      <thy-icon [thyIconName]=\"item.icon\" class=\"mr-2\"></thy-icon>\n    }\n    @if (item?.name) {\n      <span>{{ item.name }}</span>\n    }\n  }\n</ng-template>\n\n<ng-content></ng-content>\n","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { ThyBreadcrumb } from './breadcrumb.component';\nimport { ThyBreadcrumbItem } from './breadcrumb-item.component';\nimport { ThyIconModule } from 'ngx-tethys/icon';\nimport { ThyActionModule } from 'ngx-tethys/action';\nimport { ThyDropdownModule } from 'ngx-tethys/dropdown';\n\n@NgModule({\n    imports: [CommonModule, ThyIconModule, ThyBreadcrumb, ThyBreadcrumbItem, ThyActionModule, ThyDropdownModule],\n    exports: [ThyBreadcrumb, ThyBreadcrumbItem]\n})\nexport class ThyBreadcrumbModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/ngx-tethys-calendar.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { inject, ChangeDetectorRef, EventEmitter, Output, Input, HostBinding, Component, Directive, TemplateRef, forwardRef, ContentChild, ChangeDetectionStrategy, ViewEncapsulation, NgModule } from '@angular/core';
+import { inject, ChangeDetectorRef, input, output, effect, HostBinding, Component, Directive, contentChild, TemplateRef, computed, forwardRef, ChangeDetectionStrategy, ViewEncapsulation, NgModule } from '@angular/core';
 import { NgTemplateOutlet, JsonPipe, CommonModule } from '@angular/common';
 import * as i1 from '@angular/forms';
 import { FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
@@ -24,18 +24,26 @@ class ThyCalendarHeader {
         this.dateHelper = inject(DateHelperService);
         this.locale = injectLocale('calendar');
         this.className = true;
+        /**
+         * 当前选中日期
+         */
+        this.currentDate = input();
+        /**
+         * 	自定义渲染右侧操作项
+         */
+        this.operationRender = input();
         /**
          * 日期选择范围（年）发生变化的回调
          */
-        this.yearChange = new EventEmitter();
+        this.yearChange = output();
         /**
          * 日期选择范围（月）发生变化的回调
          */
-        this.monthChange = new EventEmitter();
+        this.monthChange = output();
         /**
          * 日期选择范围（日期）发生变化的回调
          */
-        this.dateRangeChange = new EventEmitter();
+        this.dateRangeChange = output();
         this.pickerFormat = this.locale().yearMonthFormat;
         this.dateRanges = [
             {
@@ -49,12 +57,9 @@ class ThyCalendarHeader {
                 }
             }
         ];
-    }
-    /**
-     * 当前选中日期
-     */
-    set currentDate(value) {
-        this.setDate(value);
+        effect(() => {
+            this.setDate();
+        });
     }
     ngOnInit() { }
     onChangeMonth(month) {
@@ -77,10 +82,11 @@ class ThyCalendarHeader {
         this.onChangeRange(this.date);
         this.cdr.detectChanges();
     }
-    setDate(value) {
-        this.isCurrentDate(value);
+    setDate() {
+        const currentDate = this.currentDate();
+        this.isCurrentDate(currentDate);
         if (this.isCurrent) {
-            this._currentDate = value;
+            this._currentDate = currentDate;
             const dateRange = {
                 ...this.dateRanges[0],
                 key: 'exception',
@@ -100,24 +106,14 @@ class ThyCalendarHeader {
             currentDate.getMonth() !== getMonth(new TinyDate().getTime()) || currentDate.getYear() !== getYear(new TinyDate().getTime());
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ThyCalendarHeader, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.8", type: ThyCalendarHeader, isStandalone: true, selector: "thy-calendar-header", inputs: { currentDate: "currentDate", operationRender: "operationRender" }, outputs: { yearChange: "yearChange", monthChange: "monthChange", dateRangeChange: "dateRangeChange" }, host: { properties: { "class.thy-calendar-full-header-container": "this.className" } }, ngImport: i0, template: "<div class=\"thy-calendar-full-header-left\">\n  <thy-date-range\n    class=\"select-date-range\"\n    [ngModel]=\"date\"\n    [thyHiddenMenu]=\"true\"\n    [thyCustomKey]=\"'exception'\"\n    [thyPickerFormat]=\"pickerFormat\"\n    (ngModelChange)=\"onChangeRange($event)\"></thy-date-range>\n  @if (isCurrent) {\n    <button thyButton=\"outline-default-square\" thySize=\"md\" (click)=\"backToday()\">{{ locale().today }}</button>\n  }\n</div>\n<div class=\"thy-calendar-full-header-right\">\n  <ng-container *ngTemplateOutlet=\"$any(operationRender); context: { $implicit: operationRender }\">\n    <span>{{ operationRender | json }}</span>\n  </ng-container>\n</div>\n", dependencies: [{ kind: "component", type: ThyDateRange, selector: "thy-date-range", inputs: ["thyOptionalDateRanges", "thyHiddenMenu", "thyDisabledSwitch", "thyCustomTextValue", "thyMinDate", "thyMaxDate", "thyCustomKey", "thyPickerFormat", "thyDisabledDate", "thySeparator"], outputs: ["thyOnCalendarChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: ThyButton, selector: "thy-button,[thy-button],[thyButton]", inputs: ["thyButton", "thyType", "thyLoading", "thyLoadingText", "thySize", "thyIcon", "thyBlock"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: JsonPipe, name: "json" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.8", type: ThyCalendarHeader, isStandalone: true, selector: "thy-calendar-header", inputs: { currentDate: { classPropertyName: "currentDate", publicName: "currentDate", isSignal: true, isRequired: false, transformFunction: null }, operationRender: { classPropertyName: "operationRender", publicName: "operationRender", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { yearChange: "yearChange", monthChange: "monthChange", dateRangeChange: "dateRangeChange" }, host: { properties: { "class.thy-calendar-full-header-container": "this.className" } }, ngImport: i0, template: "<div class=\"thy-calendar-full-header-left\">\n  <thy-date-range\n    class=\"select-date-range\"\n    [ngModel]=\"date\"\n    [thyHiddenMenu]=\"true\"\n    [thyCustomKey]=\"'exception'\"\n    [thyPickerFormat]=\"pickerFormat\"\n    (ngModelChange)=\"onChangeRange($event)\"></thy-date-range>\n  @if (isCurrent) {\n    <button thyButton=\"outline-default-square\" thySize=\"md\" (click)=\"backToday()\">{{ locale().today }}</button>\n  }\n</div>\n<div class=\"thy-calendar-full-header-right\">\n  <ng-container *ngTemplateOutlet=\"$any(operationRender()); context: { $implicit: operationRender() }\">\n    <span>{{ operationRender() | json }}</span>\n  </ng-container>\n</div>\n", dependencies: [{ kind: "component", type: ThyDateRange, selector: "thy-date-range", inputs: ["thyOptionalDateRanges", "thyHiddenMenu", "thyDisabledSwitch", "thyCustomTextValue", "thyMinDate", "thyMaxDate", "thyCustomKey", "thyPickerFormat", "thyDisabledDate", "thySeparator"], outputs: ["thyOnCalendarChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: ThyButton, selector: "thy-button,[thy-button],[thyButton]", inputs: ["thyButton", "thyType", "thyLoading", "thyLoadingText", "thySize", "thyIcon", "thyBlock"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: JsonPipe, name: "json" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ThyCalendarHeader, decorators: [{
             type: Component,
-            args: [{ selector: 'thy-calendar-header', imports: [ThyDateRange, FormsModule, ThyButton, NgTemplateOutlet, JsonPipe], template: "<div class=\"thy-calendar-full-header-left\">\n  <thy-date-range\n    class=\"select-date-range\"\n    [ngModel]=\"date\"\n    [thyHiddenMenu]=\"true\"\n    [thyCustomKey]=\"'exception'\"\n    [thyPickerFormat]=\"pickerFormat\"\n    (ngModelChange)=\"onChangeRange($event)\"></thy-date-range>\n  @if (isCurrent) {\n    <button thyButton=\"outline-default-square\" thySize=\"md\" (click)=\"backToday()\">{{ locale().today }}</button>\n  }\n</div>\n<div class=\"thy-calendar-full-header-right\">\n  <ng-container *ngTemplateOutlet=\"$any(operationRender); context: { $implicit: operationRender }\">\n    <span>{{ operationRender | json }}</span>\n  </ng-container>\n</div>\n" }]
-        }], propDecorators: { className: [{
+            args: [{ selector: 'thy-calendar-header', imports: [ThyDateRange, FormsModule, ThyButton, NgTemplateOutlet, JsonPipe], template: "<div class=\"thy-calendar-full-header-left\">\n  <thy-date-range\n    class=\"select-date-range\"\n    [ngModel]=\"date\"\n    [thyHiddenMenu]=\"true\"\n    [thyCustomKey]=\"'exception'\"\n    [thyPickerFormat]=\"pickerFormat\"\n    (ngModelChange)=\"onChangeRange($event)\"></thy-date-range>\n  @if (isCurrent) {\n    <button thyButton=\"outline-default-square\" thySize=\"md\" (click)=\"backToday()\">{{ locale().today }}</button>\n  }\n</div>\n<div class=\"thy-calendar-full-header-right\">\n  <ng-container *ngTemplateOutlet=\"$any(operationRender()); context: { $implicit: operationRender() }\">\n    <span>{{ operationRender() | json }}</span>\n  </ng-container>\n</div>\n" }]
+        }], ctorParameters: () => [], propDecorators: { className: [{
                 type: HostBinding,
                 args: ['class.thy-calendar-full-header-container']
-            }], currentDate: [{
-                type: Input
-            }], operationRender: [{
-                type: Input
-            }], yearChange: [{
-                type: Output
-            }], monthChange: [{
-                type: Output
-            }], dateRangeChange: [{
-                type: Output
             }] } });
 
 /**
@@ -157,38 +153,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImpor
  * @order 10
  */
 class ThyCalendar {
-    constructor() {
-        this.cdr = inject(ChangeDetectorRef);
-        this.className = true;
-        this.className1 = true;
-        /**
-         * 展示模式
-         * @type month | year
-         */
-        this.thyMode = 'month';
-        /**
-         * 日期选择变化的回调
-         */
-        this.thySelectChange = new EventEmitter();
-        /**
-         * 日期选择变化的回调
-         */
-        this.thyValueChange = new EventEmitter();
-        /**
-         * 日期选择范围变化的回调
-         */
-        this.thyDateRangeChange = new EventEmitter();
-        this.currentDate = new TinyDate();
-        this.prefixCls = 'thy-calendar-full';
-        this.onChangeFn = () => { };
-        this.onTouchFn = () => { };
-    }
-    get dateCell() {
-        return (this.thyDateCell || this.thyDateCellChild);
-    }
-    get headerOperation() {
-        return (this.thyCalendarHeaderOperation || this.thyCalendarHeaderOperationChild);
-    }
     ngOnInit() { }
     onYearSelect(year) {
         const date = this.currentDate.setYear(year);
@@ -225,45 +189,79 @@ class ThyCalendar {
             this.thyValueChange.emit(date.nativeDate);
         }
     }
-    ngOnChanges(changes) {
-        if (changes.thyValue) {
-            this.updateDate(new TinyDate(this.thyValue), false);
-        }
+    constructor() {
+        this.cdr = inject(ChangeDetectorRef);
+        this.className = true;
+        this.className1 = true;
+        /**
+         * 展示模式
+         * @type month | year
+         */
+        this.thyMode = input('month');
+        /**
+         * （可双向绑定）展示日期，默认为当前日期
+         */
+        this.thyValue = input();
+        /**
+         * 不可选择的日期
+         */
+        this.thyDisabledDate = input();
+        /**
+         * 日期选择变化的回调
+         */
+        this.thySelectChange = output();
+        /**
+         * 日期选择变化的回调
+         */
+        this.thyValueChange = output();
+        /**
+         * 日期选择范围变化的回调
+         */
+        this.thyDateRangeChange = output();
+        /**
+         * （可作为内容）自定义渲染日期单元格，模板内容会被追加到单元格
+         */
+        this.thyDateCell = input();
+        /**
+         *  追加到单元格的自定义模板
+         */
+        this.thyDateCellChild = contentChild(ThyDateCellDirective, { read: TemplateRef });
+        this.dateCell = computed(() => {
+            return (this.thyDateCell() || this.thyDateCellChild());
+        });
+        /**
+         * （可作为内容）自定义渲染右上角操作项
+         */
+        this.thyCalendarHeaderOperation = input();
+        /**
+         * 右上角操作项的自定义模板
+         */
+        this.thyCalendarHeaderOperationChild = contentChild(ThyCalendarHeaderOperationDirective, { read: TemplateRef });
+        this.headerOperation = computed(() => {
+            return (this.thyCalendarHeaderOperation() || this.thyCalendarHeaderOperationChild());
+        });
+        this.currentDate = new TinyDate();
+        this.prefixCls = 'thy-calendar-full';
+        this.onChangeFn = () => { };
+        this.onTouchFn = () => { };
+        effect(() => {
+            if (this.thyValue()) {
+                this.updateDate(new TinyDate(this.thyValue()), false);
+            }
+        });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ThyCalendar, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.8", type: ThyCalendar, isStandalone: true, selector: "thy-calendar", inputs: { thyMode: "thyMode", thyValue: "thyValue", thyDisabledDate: "thyDisabledDate", thyDateCell: "thyDateCell", thyCalendarHeaderOperation: "thyCalendarHeaderOperation" }, outputs: { thySelectChange: "thySelectChange", thyValueChange: "thyValueChange", thyDateRangeChange: "thyDateRangeChange" }, host: { properties: { "class.thy-calendar-container": "this.className", "class.thy-calendar-full": "this.className1" } }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => ThyCalendar), multi: true }], queries: [{ propertyName: "thyDateCellChild", first: true, predicate: ThyDateCellDirective, descendants: true, read: TemplateRef }, { propertyName: "thyCalendarHeaderOperationChild", first: true, predicate: ThyCalendarHeaderOperationDirective, descendants: true, read: TemplateRef }], usesOnChanges: true, ngImport: i0, template: "<thy-calendar-header\n  [operationRender]=\"headerOperation\"\n  (monthChange)=\"onMonthSelect($event)\"\n  (yearChange)=\"onYearSelect($event)\"\n  (dateRangeChange)=\"onDateRangeSelect($event)\"\n  [currentDate]=\"currentDate\"\n></thy-calendar-header>\n\n<div class=\"thy-calendar-panel\">\n  <div class=\"thy-calendar-{{ thyMode === 'month' ? 'date' : 'month' }}-panel\">\n    <div class=\"thy-calendar-body\">\n      @if (thyMode === 'month') {\n        <date-table\n          [prefixCls]=\"prefixCls\"\n          [value]=\"currentDate\"\n          [activeDate]=\"currentDate\"\n          [selectedValue]=\"currentDate\"\n          [cellRender]=\"dateCell\"\n          [disabledDate]=\"thyDisabledDate\"\n          (valueChange)=\"onDateSelect($event)\"\n        ></date-table>\n      } @else {\n        <month-table [value]=\"currentDate\" [disabledDate]=\"thyDisabledDate\" (valueChange)=\"onDateSelect($event)\"></month-table>\n      }\n    </div>\n  </div>\n</div>\n\n", dependencies: [{ kind: "component", type: ThyCalendarHeader, selector: "thy-calendar-header", inputs: ["currentDate", "operationRender"], outputs: ["yearChange", "monthChange", "dateRangeChange"] }, { kind: "component", type: DateTable, selector: "date-table", outputs: ["dayHover"], exportAs: ["dateTable"] }, { kind: "component", type: MonthTable, selector: "month-table", exportAs: ["monthTable"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.8", type: ThyCalendar, isStandalone: true, selector: "thy-calendar", inputs: { thyMode: { classPropertyName: "thyMode", publicName: "thyMode", isSignal: true, isRequired: false, transformFunction: null }, thyValue: { classPropertyName: "thyValue", publicName: "thyValue", isSignal: true, isRequired: false, transformFunction: null }, thyDisabledDate: { classPropertyName: "thyDisabledDate", publicName: "thyDisabledDate", isSignal: true, isRequired: false, transformFunction: null }, thyDateCell: { classPropertyName: "thyDateCell", publicName: "thyDateCell", isSignal: true, isRequired: false, transformFunction: null }, thyCalendarHeaderOperation: { classPropertyName: "thyCalendarHeaderOperation", publicName: "thyCalendarHeaderOperation", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { thySelectChange: "thySelectChange", thyValueChange: "thyValueChange", thyDateRangeChange: "thyDateRangeChange" }, host: { properties: { "class.thy-calendar-container": "this.className", "class.thy-calendar-full": "this.className1" } }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => ThyCalendar), multi: true }], queries: [{ propertyName: "thyDateCellChild", first: true, predicate: ThyDateCellDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "thyCalendarHeaderOperationChild", first: true, predicate: ThyCalendarHeaderOperationDirective, descendants: true, read: TemplateRef, isSignal: true }], ngImport: i0, template: "<thy-calendar-header\n  [operationRender]=\"headerOperation()\"\n  (monthChange)=\"onMonthSelect($event)\"\n  (yearChange)=\"onYearSelect($event)\"\n  (dateRangeChange)=\"onDateRangeSelect($event)\"\n  [currentDate]=\"currentDate\"></thy-calendar-header>\n\n<div class=\"thy-calendar-panel\">\n  <div class=\"thy-calendar-{{ thyMode() === 'month' ? 'date' : 'month' }}-panel\">\n    <div class=\"thy-calendar-body\">\n      @if (thyMode() === 'month') {\n        <date-table\n          [prefixCls]=\"prefixCls\"\n          [value]=\"currentDate\"\n          [activeDate]=\"currentDate\"\n          [selectedValue]=\"currentDate\"\n          [cellRender]=\"dateCell()\"\n          [disabledDate]=\"thyDisabledDate()\"\n          (valueChange)=\"onDateSelect($event)\"></date-table>\n      } @else {\n        <month-table [value]=\"currentDate\" [disabledDate]=\"thyDisabledDate()\" (valueChange)=\"onDateSelect($event)\"></month-table>\n      }\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "component", type: ThyCalendarHeader, selector: "thy-calendar-header", inputs: ["currentDate", "operationRender"], outputs: ["yearChange", "monthChange", "dateRangeChange"] }, { kind: "component", type: DateTable, selector: "date-table", outputs: ["dayHover"], exportAs: ["dateTable"] }, { kind: "component", type: MonthTable, selector: "month-table", exportAs: ["monthTable"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ThyCalendar, decorators: [{
             type: Component,
-            args: [{ selector: 'thy-calendar', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => ThyCalendar), multi: true }], imports: [ThyCalendarHeader, DateTable, MonthTable], template: "<thy-calendar-header\n  [operationRender]=\"headerOperation\"\n  (monthChange)=\"onMonthSelect($event)\"\n  (yearChange)=\"onYearSelect($event)\"\n  (dateRangeChange)=\"onDateRangeSelect($event)\"\n  [currentDate]=\"currentDate\"\n></thy-calendar-header>\n\n<div class=\"thy-calendar-panel\">\n  <div class=\"thy-calendar-{{ thyMode === 'month' ? 'date' : 'month' }}-panel\">\n    <div class=\"thy-calendar-body\">\n      @if (thyMode === 'month') {\n        <date-table\n          [prefixCls]=\"prefixCls\"\n          [value]=\"currentDate\"\n          [activeDate]=\"currentDate\"\n          [selectedValue]=\"currentDate\"\n          [cellRender]=\"dateCell\"\n          [disabledDate]=\"thyDisabledDate\"\n          (valueChange)=\"onDateSelect($event)\"\n        ></date-table>\n      } @else {\n        <month-table [value]=\"currentDate\" [disabledDate]=\"thyDisabledDate\" (valueChange)=\"onDateSelect($event)\"></month-table>\n      }\n    </div>\n  </div>\n</div>\n\n" }]
-        }], propDecorators: { className: [{
+            args: [{ selector: 'thy-calendar', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => ThyCalendar), multi: true }], imports: [ThyCalendarHeader, DateTable, MonthTable], template: "<thy-calendar-header\n  [operationRender]=\"headerOperation()\"\n  (monthChange)=\"onMonthSelect($event)\"\n  (yearChange)=\"onYearSelect($event)\"\n  (dateRangeChange)=\"onDateRangeSelect($event)\"\n  [currentDate]=\"currentDate\"></thy-calendar-header>\n\n<div class=\"thy-calendar-panel\">\n  <div class=\"thy-calendar-{{ thyMode() === 'month' ? 'date' : 'month' }}-panel\">\n    <div class=\"thy-calendar-body\">\n      @if (thyMode() === 'month') {\n        <date-table\n          [prefixCls]=\"prefixCls\"\n          [value]=\"currentDate\"\n          [activeDate]=\"currentDate\"\n          [selectedValue]=\"currentDate\"\n          [cellRender]=\"dateCell()\"\n          [disabledDate]=\"thyDisabledDate()\"\n          (valueChange)=\"onDateSelect($event)\"></date-table>\n      } @else {\n        <month-table [value]=\"currentDate\" [disabledDate]=\"thyDisabledDate()\" (valueChange)=\"onDateSelect($event)\"></month-table>\n      }\n    </div>\n  </div>\n</div>\n" }]
+        }], ctorParameters: () => [], propDecorators: { className: [{
                 type: HostBinding,
                 args: ['class.thy-calendar-container']
             }], className1: [{
                 type: HostBinding,
                 args: ['class.thy-calendar-full']
-            }], thyMode: [{
-                type: Input
-            }], thyValue: [{
-                type: Input
-            }], thyDisabledDate: [{
-                type: Input
-            }], thySelectChange: [{
-                type: Output
-            }], thyValueChange: [{
-                type: Output
-            }], thyDateRangeChange: [{
-                type: Output
-            }], thyDateCell: [{
-                type: Input
-            }], thyDateCellChild: [{
-                type: ContentChild,
-                args: [ThyDateCellDirective, { read: TemplateRef }]
-            }], thyCalendarHeaderOperation: [{
-                type: Input
-            }], thyCalendarHeaderOperationChild: [{
-                type: ContentChild,
-                args: [ThyCalendarHeaderOperationDirective, { read: TemplateRef }]
             }] } });
 
 class ThyCalendarModule {