ngx-tethys 18.0.7 → 18.1.0-next.0

package/fesm2022/ngx-tethys-tabs.mjs

@@ -1,6 +1,6 @@
 import * as i0 from '@angular/core';
 import { Component, ChangeDetectionStrategy, ContentChild, ViewChild, Input, ViewEncapsulation, QueryList, inject, DestroyRef, EventEmitter, ContentChildren, Output, NgModule } from '@angular/core';
-import { NgIf, NgTemplateOutlet, NgFor, CommonModule } from '@angular/common';
+import { NgTemplateOutlet, CommonModule } from '@angular/common';
 import { coerceBooleanProperty, isString } from 'ngx-tethys/util';
 import { fromEvent } from 'rxjs';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
@@ -50,11 +50,11 @@ class ThyTabContent {
         this.tabPaneAnimated = true;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: ThyTabContent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.0", type: ThyTabContent, isStandalone: true, selector: "thy-tab-content, [thyTabContent]", inputs: { content: "content", active: "active", tabPaneAnimated: "tabPaneAnimated" }, host: { properties: { "attr.aria-hidden": "!active", "attr.tabindex": "active ? 0 : -1", "style.visibility": "tabPaneAnimated ? active ? null : \"hidden\" : null", "style.height": "tabPaneAnimated ? active ? null : 0 : null", "style.overflow-y": "tabPaneAnimated ? active ? null : \"none\" : null", "style.display": "!tabPaneAnimated ? active ? null : \"none\" : null" }, classAttribute: "thy-tab-content" }, exportAs: ["thyTabContent"], ngImport: i0, template: `
-        <ng-container *ngIf="active">
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", type: ThyTabContent, isStandalone: true, selector: "thy-tab-content, [thyTabContent]", inputs: { content: "content", active: "active", tabPaneAnimated: "tabPaneAnimated" }, host: { properties: { "attr.aria-hidden": "!active", "attr.tabindex": "active ? 0 : -1", "style.visibility": "tabPaneAnimated ? active ? null : \"hidden\" : null", "style.height": "tabPaneAnimated ? active ? null : 0 : null", "style.overflow-y": "tabPaneAnimated ? active ? null : \"none\" : null", "style.display": "!tabPaneAnimated ? active ? null : \"none\" : null" }, classAttribute: "thy-tab-content" }, exportAs: ["thyTabContent"], ngImport: i0, template: `
+        @if (active) {
             <ng-template [ngTemplateOutlet]="content"></ng-template>
-        </ng-container>
-    `, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+        }
+    `, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: ThyTabContent, decorators: [{
             type: Component,
@@ -65,9 +65,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
                     encapsulation: ViewEncapsulation.None,
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     template: `
-        <ng-container *ngIf="active">
+        @if (active) {
             <ng-template [ngTemplateOutlet]="content"></ng-template>
-        </ng-container>
+        }
     `,
                     host: {
                         class: 'thy-tab-content',
@@ -79,7 +79,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
                         '[style.display]': '!tabPaneAnimated ? active ? null : "none" : null'
                     },
                     standalone: true,
-                    imports: [NgIf, NgTemplateOutlet]
+                    imports: [NgTemplateOutlet]
                 }]
         }], propDecorators: { content: [{
                 type: Input
@@ -185,11 +185,8 @@ class ThyTabs {
         const activeTab = tab.id ? tab.id : index;
         this.thyActiveTabChange.emit(activeTab);
     }
-    tabTrackBy(index, item) {
-        return index;
-    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: ThyTabs, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.2.0", type: ThyTabs, isStandalone: true, selector: "thy-tabs", inputs: { thyType: "thyType", thySize: "thySize", thyActiveTab: "thyActiveTab", thyExtra: "thyExtra", thyPosition: "thyPosition", thyAnimated: ["thyAnimated", "thyAnimated", coerceBooleanProperty], thyResponsive: ["thyResponsive", "thyResponsive", coerceBooleanProperty] }, outputs: { thyActiveTabChange: "thyActiveTabChange" }, host: { properties: { "class.thy-tabs-top": "thyPosition === 'top'", "class.thy-tabs-left": "thyPosition === 'left'", "style.overflow": "transitionStarted ? \"hidden\" : null" }, classAttribute: "thy-tabs" }, queries: [{ propertyName: "tabs", predicate: ThyTab, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<!-- tabs nav -->\n<thy-nav\n  class=\"thy-tabs-nav\"\n  [thyType]=\"thyType\"\n  [thySize]=\"thySize\"\n  [thyExtra]=\"thyExtra\"\n  [thyVertical]=\"thyPosition === 'left'\"\n  [thyResponsive]=\"thyResponsive\"\n>\n  <a\n    href=\"javascript:;\"\n    thyNavItem\n    [id]=\"tab.id\"\n    [thyNavItemDisabled]=\"tab.thyDisabled\"\n    [thyNavItemActive]=\"(tab.id && activeTabId && tab.id === activeTabId) ?? i === activeTabIndex\"\n    *ngFor=\"let tab of tabs; let i = index; trackBy: tabTrackBy\"\n    (click)=\"activeTab(tab, i)\"\n  >\n    <ng-container *ngIf=\"tab.titleTemplateRef; else titleName\">\n      <ng-template [ngTemplateOutlet]=\"tab.titleTemplateRef\"></ng-template>\n    </ng-container>\n    <ng-template #titleName>\n      {{ tab.thyTitle }}\n    </ng-template>\n  </a>\n</thy-nav>\n<!-- tabs content -->\n<div class=\"thy-tabs-content\" [class.thy-tabs-content-animated]=\"tabPaneAnimated\" [style.margin-left]=\"getTabContentMarginLeft()\">\n  <div\n    thyTabContent\n    *ngFor=\"let tab of tabs; let i = index; trackBy: tabTrackBy\"\n    [active]=\"(tab.id && activeTabId && tab.id === activeTabId) ?? i === activeTabIndex\"\n    [content]=\"tab.content\"\n    [tabPaneAnimated]=\"tabPaneAnimated\"\n  ></div>\n</div>\n", dependencies: [{ kind: "component", type: ThyNav, selector: "thy-nav", inputs: ["thyType", "thySize", "thyHorizontal", "thyVertical", "thyFill", "thyResponsive", "thyInsideClosable", "thyExtra"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: ThyNavItemDirective, selector: "[thyNavLink],[thyNavItem]", inputs: ["thyNavItemActive", "thyNavLinkActive", "thyNavItemDisabled"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ThyTabContent, selector: "thy-tab-content, [thyTabContent]", inputs: ["content", "active", "tabPaneAnimated"], exportAs: ["thyTabContent"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", type: ThyTabs, isStandalone: true, selector: "thy-tabs", inputs: { thyType: "thyType", thySize: "thySize", thyActiveTab: "thyActiveTab", thyExtra: "thyExtra", thyPosition: "thyPosition", thyAnimated: ["thyAnimated", "thyAnimated", coerceBooleanProperty], thyResponsive: ["thyResponsive", "thyResponsive", coerceBooleanProperty] }, outputs: { thyActiveTabChange: "thyActiveTabChange" }, host: { properties: { "class.thy-tabs-top": "thyPosition === 'top'", "class.thy-tabs-left": "thyPosition === 'left'", "style.overflow": "transitionStarted ? \"hidden\" : null" }, classAttribute: "thy-tabs" }, queries: [{ propertyName: "tabs", predicate: ThyTab, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<!-- tabs nav -->\n<thy-nav\n  class=\"thy-tabs-nav\"\n  [thyType]=\"thyType\"\n  [thySize]=\"thySize\"\n  [thyExtra]=\"thyExtra\"\n  [thyVertical]=\"thyPosition === 'left'\"\n  [thyResponsive]=\"thyResponsive\">\n  @for (tab of tabs; track $index; let i = $index) {\n    <a\n      href=\"javascript:;\"\n      thyNavItem\n      [id]=\"tab.id\"\n      [thyNavItemDisabled]=\"tab.thyDisabled\"\n      [thyNavItemActive]=\"(tab.id && activeTabId && tab.id === activeTabId) ?? i === activeTabIndex\"\n      (click)=\"activeTab(tab, i)\">\n      @if (tab.titleTemplateRef) {\n        <ng-template [ngTemplateOutlet]=\"tab.titleTemplateRef\"></ng-template>\n      } @else {\n        {{ tab.thyTitle }}\n      }\n    </a>\n  }\n</thy-nav>\n<!-- tabs content -->\n<div class=\"thy-tabs-content\" [class.thy-tabs-content-animated]=\"tabPaneAnimated\" [style.margin-left]=\"getTabContentMarginLeft()\">\n  @for (tab of tabs; track $index; let i = $index) {\n    <div\n      thyTabContent\n      [active]=\"(tab.id && activeTabId && tab.id === activeTabId) ?? i === activeTabIndex\"\n      [content]=\"tab.content\"\n      [tabPaneAnimated]=\"tabPaneAnimated\"></div>\n  }\n</div>\n", dependencies: [{ kind: "component", type: ThyNav, selector: "thy-nav", inputs: ["thyType", "thySize", "thyHorizontal", "thyVertical", "thyFill", "thyResponsive", "thyInsideClosable", "thyExtra"] }, { kind: "directive", type: ThyNavItemDirective, selector: "[thyNavLink],[thyNavItem]", inputs: ["thyNavItemActive", "thyNavLinkActive", "thyNavItemDisabled"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ThyTabContent, selector: "thy-tab-content, [thyTabContent]", inputs: ["content", "active", "tabPaneAnimated"], exportAs: ["thyTabContent"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: ThyTabs, decorators: [{
             type: Component,
@@ -198,7 +195,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
                         '[class.thy-tabs-top]': `thyPosition === 'top'`,
                         '[class.thy-tabs-left]': `thyPosition === 'left'`,
                         '[style.overflow]': `transitionStarted ? "hidden" : null`
-                    }, standalone: true, imports: [ThyNav, NgFor, ThyNavItemDirective, NgIf, NgTemplateOutlet, ThyTabContent], template: "<!-- tabs nav -->\n<thy-nav\n  class=\"thy-tabs-nav\"\n  [thyType]=\"thyType\"\n  [thySize]=\"thySize\"\n  [thyExtra]=\"thyExtra\"\n  [thyVertical]=\"thyPosition === 'left'\"\n  [thyResponsive]=\"thyResponsive\"\n>\n  <a\n    href=\"javascript:;\"\n    thyNavItem\n    [id]=\"tab.id\"\n    [thyNavItemDisabled]=\"tab.thyDisabled\"\n    [thyNavItemActive]=\"(tab.id && activeTabId && tab.id === activeTabId) ?? i === activeTabIndex\"\n    *ngFor=\"let tab of tabs; let i = index; trackBy: tabTrackBy\"\n    (click)=\"activeTab(tab, i)\"\n  >\n    <ng-container *ngIf=\"tab.titleTemplateRef; else titleName\">\n      <ng-template [ngTemplateOutlet]=\"tab.titleTemplateRef\"></ng-template>\n    </ng-container>\n    <ng-template #titleName>\n      {{ tab.thyTitle }}\n    </ng-template>\n  </a>\n</thy-nav>\n<!-- tabs content -->\n<div class=\"thy-tabs-content\" [class.thy-tabs-content-animated]=\"tabPaneAnimated\" [style.margin-left]=\"getTabContentMarginLeft()\">\n  <div\n    thyTabContent\n    *ngFor=\"let tab of tabs; let i = index; trackBy: tabTrackBy\"\n    [active]=\"(tab.id && activeTabId && tab.id === activeTabId) ?? i === activeTabIndex\"\n    [content]=\"tab.content\"\n    [tabPaneAnimated]=\"tabPaneAnimated\"\n  ></div>\n</div>\n" }]
+                    }, standalone: true, imports: [ThyNav, ThyNavItemDirective, NgTemplateOutlet, ThyTabContent], template: "<!-- tabs nav -->\n<thy-nav\n  class=\"thy-tabs-nav\"\n  [thyType]=\"thyType\"\n  [thySize]=\"thySize\"\n  [thyExtra]=\"thyExtra\"\n  [thyVertical]=\"thyPosition === 'left'\"\n  [thyResponsive]=\"thyResponsive\">\n  @for (tab of tabs; track $index; let i = $index) {\n    <a\n      href=\"javascript:;\"\n      thyNavItem\n      [id]=\"tab.id\"\n      [thyNavItemDisabled]=\"tab.thyDisabled\"\n      [thyNavItemActive]=\"(tab.id && activeTabId && tab.id === activeTabId) ?? i === activeTabIndex\"\n      (click)=\"activeTab(tab, i)\">\n      @if (tab.titleTemplateRef) {\n        <ng-template [ngTemplateOutlet]=\"tab.titleTemplateRef\"></ng-template>\n      } @else {\n        {{ tab.thyTitle }}\n      }\n    </a>\n  }\n</thy-nav>\n<!-- tabs content -->\n<div class=\"thy-tabs-content\" [class.thy-tabs-content-animated]=\"tabPaneAnimated\" [style.margin-left]=\"getTabContentMarginLeft()\">\n  @for (tab of tabs; track $index; let i = $index) {\n    <div\n      thyTabContent\n      [active]=\"(tab.id && activeTabId && tab.id === activeTabId) ?? i === activeTabIndex\"\n      [content]=\"tab.content\"\n      [tabPaneAnimated]=\"tabPaneAnimated\"></div>\n  }\n</div>\n" }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }], propDecorators: { tabs: [{
                 type: ContentChildren,
                 args: [ThyTab, { descendants: true }]

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

@@ -1 +1 @@
-{"version":3,"file":"ngx-tethys-tabs.mjs","sources":["../../../src/tabs/tab.component.ts","../../../src/tabs/tab-content.component.ts","../../../src/tabs/tabs.component.ts","../../../src/tabs/tabs.component.html","../../../src/tabs/tabs.module.ts","../../../src/tabs/ngx-tethys-tabs.ts"],"sourcesContent":["import { Component, OnInit, ChangeDetectionStrategy, Input, ViewChild, TemplateRef, ContentChild } from '@angular/core';\nimport { coerceBooleanProperty } from 'ngx-tethys/util';\n\n/**\n * 选项卡的选项组件\n * @name thy-tab\n */\n@Component({\n    selector: 'thy-tab',\n    template: ` <ng-template #content><ng-content></ng-content></ng-template> `,\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    standalone: true\n})\nexport class ThyTab implements OnInit {\n    /**\n     * 自定义选项标题的模板\n     * @type TemplateRef\n     */\n    @ContentChild('title') titleTemplateRef: TemplateRef<unknown>;\n\n    @ViewChild('content', { static: true }) content: TemplateRef<HTMLElement>;\n\n    /**\n     * 选项标题\n     */\n    @Input() thyTitle: string;\n\n    /**\n     * 选项的唯一标识\n     */\n    @Input() id: string;\n\n    /**\n     * 是否禁用选项\n     * @default false\n     */\n    @Input({ transform: coerceBooleanProperty }) thyDisabled: boolean;\n\n    constructor() {}\n\n    ngOnInit(): void {}\n}\n","import { ChangeDetectionStrategy, Component, Input, TemplateRef, ViewEncapsulation } from '@angular/core';\nimport { NgIf, NgTemplateOutlet } from '@angular/common';\n\n/**\n * @private\n */\n@Component({\n    selector: 'thy-tab-content, [thyTabContent]',\n    exportAs: 'thyTabContent',\n    preserveWhitespaces: false,\n    encapsulation: ViewEncapsulation.None,\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    template: `\n        <ng-container *ngIf=\"active\">\n            <ng-template [ngTemplateOutlet]=\"content\"></ng-template>\n        </ng-container>\n    `,\n    host: {\n        class: 'thy-tab-content',\n        '[attr.aria-hidden]': '!active',\n        '[attr.tabindex]': 'active ? 0 : -1',\n        '[style.visibility]': 'tabPaneAnimated ? active ? null : \"hidden\" : null',\n        '[style.height]': 'tabPaneAnimated ? active ? null : 0 : null',\n        '[style.overflow-y]': 'tabPaneAnimated ? active ? null : \"none\" : null',\n        '[style.display]': '!tabPaneAnimated ? active ? null : \"none\" : null'\n    },\n    standalone: true,\n    imports: [NgIf, NgTemplateOutlet]\n})\nexport class ThyTabContent {\n    @Input() content: TemplateRef<void> | null = null;\n\n    @Input() active = false;\n\n    @Input() tabPaneAnimated = true;\n}\n","import {\n    AfterContentInit,\n    ChangeDetectionStrategy,\n    ChangeDetectorRef,\n    Component,\n    ContentChildren,\n    DestroyRef,\n    ElementRef,\n    EventEmitter,\n    Input,\n    OnChanges,\n    OnInit,\n    Output,\n    QueryList,\n    SimpleChanges,\n    TemplateRef,\n    inject\n} from '@angular/core';\nimport { coerceBooleanProperty, isString } from 'ngx-tethys/util';\nimport { fromEvent } from 'rxjs';\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\nimport { ThyTab } from './tab.component';\nimport { ThyActiveTabInfo, ThyTabActiveEvent } from './types';\nimport { ThyTabContent } from './tab-content.component';\nimport { NgFor, NgIf, NgTemplateOutlet } from '@angular/common';\nimport { ThyNav, ThyNavItemDirective } from 'ngx-tethys/nav';\n\nexport type ThyTabsSize = 'lg' | 'md' | 'sm';\n\nexport type ThyTabsType = 'pulled' | 'tabs' | 'pills' | 'lite';\n\nexport type ThyTabsPosition = 'top' | 'left';\n\n/**\n * 选项卡切换组件\n * @name thy-tabs\n */\n@Component({\n    selector: 'thy-tabs',\n    templateUrl: './tabs.component.html',\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    host: {\n        class: 'thy-tabs',\n        '[class.thy-tabs-top]': `thyPosition === 'top'`,\n        '[class.thy-tabs-left]': `thyPosition === 'left'`,\n        '[style.overflow]': `transitionStarted ? \"hidden\" : null`\n    },\n    standalone: true,\n    imports: [ThyNav, NgFor, ThyNavItemDirective, NgIf, NgTemplateOutlet, ThyTabContent]\n})\nexport class ThyTabs implements OnInit, OnChanges, AfterContentInit {\n    @ContentChildren(ThyTab, { descendants: true }) tabs = new QueryList<ThyTab>();\n\n    private readonly destroyRef = inject(DestroyRef);\n\n    /**\n     * 标签类型\n     * @type 'pulled' | 'tabs' | 'pills' | 'lite'\n     */\n    @Input() thyType: ThyTabsType = 'tabs';\n\n    /**\n     * 选项卡的大小\n     * @type 'lg' | 'md' | 'sm'\n     */\n    @Input() thySize: ThyTabsSize = 'md';\n\n    /**\n     * 激活的项\n     */\n    @Input()\n    set thyActiveTab(value: ThyActiveTabInfo) {\n        if (isString(value)) {\n            this.activeTabId = value;\n            this.activeTabIndex = undefined;\n        } else {\n            this.activeTabIndex = value;\n            this.activeTabId = undefined;\n        }\n    }\n\n    /**\n     * 附加操作\n     */\n    @Input() thyExtra: TemplateRef<unknown>;\n\n    /**\n     * 选项卡的位置\n     * @type 'top' | 'left'\n     */\n    @Input() thyPosition: ThyTabsPosition = 'top';\n\n    /**\n     * 是否使用动画切换 Tabs\n     */\n    @Input({ transform: coerceBooleanProperty }) thyAnimated: boolean = false;\n\n    /**\n     * 响应式，自动计算宽度存放 thyNavItem，并添加更多弹框\n     */\n    @Input({ transform: coerceBooleanProperty }) thyResponsive: boolean = false;\n\n    /**\n     * 激活的项发生改变时的回调\n     */\n    @Output() thyActiveTabChange: EventEmitter<ThyTabActiveEvent> = new EventEmitter<ThyTabActiveEvent>();\n\n    activeTabIndex: number = 0;\n\n    activeTabId: string;\n\n    transitionStarted: boolean = false;\n\n    constructor(\n        private cd: ChangeDetectorRef,\n        private el: ElementRef\n    ) {}\n\n    ngOnInit(): void {\n        const tabsContent = this.el.nativeElement.querySelector('.thy-tabs-content');\n        fromEvent(tabsContent, 'transitionend')\n            .pipe(takeUntilDestroyed(this.destroyRef))\n            .subscribe(() => {\n                this.transitionStarted = false;\n                this.cd.markForCheck();\n            });\n    }\n\n    ngOnChanges(changes: SimpleChanges): void {\n        const { thyActiveTab } = changes;\n        if (thyActiveTab && !thyActiveTab.firstChange && this.thyAnimated) {\n            const index = thyActiveTab?.currentValue?.index || Array.from(this.tabs).findIndex(k => k.id === thyActiveTab?.currentValue.id);\n            this.transitionStarted = this.activeTabIndex !== index;\n            this.activeTabIndex = index;\n        }\n    }\n\n    ngAfterContentInit() {\n        this.tabs.changes.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(data => {\n            this.thyAnimated && (this.transitionStarted = true);\n            this.activeTabIndex = data.length - 1;\n            this.cd.markForCheck();\n        });\n    }\n\n    get tabPaneAnimated(): boolean {\n        return this.thyPosition === 'top' && this.thyAnimated;\n    }\n\n    getTabContentMarginLeft(): string {\n        if (this.tabPaneAnimated) {\n            return `${-(this.activeTabIndex || 0) * 100}%`;\n        }\n        return '';\n    }\n\n    activeTab(tab: ThyTab, index: number) {\n        if (tab.thyDisabled) {\n            return;\n        }\n        this.activeTabId = tab.id || null;\n        this.thyAnimated && (this.transitionStarted = this.activeTabIndex !== index);\n        this.activeTabIndex = index;\n        const activeTab = tab.id ? tab.id : index;\n        this.thyActiveTabChange.emit(activeTab);\n    }\n\n    tabTrackBy(index: number, item: ThyTab) {\n        return index;\n    }\n}\n","<!-- tabs nav -->\n<thy-nav\n  class=\"thy-tabs-nav\"\n  [thyType]=\"thyType\"\n  [thySize]=\"thySize\"\n  [thyExtra]=\"thyExtra\"\n  [thyVertical]=\"thyPosition === 'left'\"\n  [thyResponsive]=\"thyResponsive\"\n>\n  <a\n    href=\"javascript:;\"\n    thyNavItem\n    [id]=\"tab.id\"\n    [thyNavItemDisabled]=\"tab.thyDisabled\"\n    [thyNavItemActive]=\"(tab.id && activeTabId && tab.id === activeTabId) ?? i === activeTabIndex\"\n    *ngFor=\"let tab of tabs; let i = index; trackBy: tabTrackBy\"\n    (click)=\"activeTab(tab, i)\"\n  >\n    <ng-container *ngIf=\"tab.titleTemplateRef; else titleName\">\n      <ng-template [ngTemplateOutlet]=\"tab.titleTemplateRef\"></ng-template>\n    </ng-container>\n    <ng-template #titleName>\n      {{ tab.thyTitle }}\n    </ng-template>\n  </a>\n</thy-nav>\n<!-- tabs content -->\n<div class=\"thy-tabs-content\" [class.thy-tabs-content-animated]=\"tabPaneAnimated\" [style.margin-left]=\"getTabContentMarginLeft()\">\n  <div\n    thyTabContent\n    *ngFor=\"let tab of tabs; let i = index; trackBy: tabTrackBy\"\n    [active]=\"(tab.id && activeTabId && tab.id === activeTabId) ?? i === activeTabIndex\"\n    [content]=\"tab.content\"\n    [tabPaneAnimated]=\"tabPaneAnimated\"\n  ></div>\n</div>\n","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { ThyTabs } from './tabs.component';\nimport { ThyTab } from './tab.component';\nimport { ThyIconModule } from 'ngx-tethys/icon';\nimport { ThyNavModule } from 'ngx-tethys/nav';\nimport { ThyTabContent } from './tab-content.component';\n\n@NgModule({\n    imports: [CommonModule, ThyIconModule, ThyNavModule, ThyTabs, ThyTab, ThyTabContent],\n    exports: [ThyTabs, ThyTab]\n})\nexport class ThyTabsModule {}\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-tabs.mjs","sources":["../../../src/tabs/tab.component.ts","../../../src/tabs/tab-content.component.ts","../../../src/tabs/tabs.component.ts","../../../src/tabs/tabs.component.html","../../../src/tabs/tabs.module.ts","../../../src/tabs/ngx-tethys-tabs.ts"],"sourcesContent":["import { Component, OnInit, ChangeDetectionStrategy, Input, ViewChild, TemplateRef, ContentChild } from '@angular/core';\nimport { coerceBooleanProperty } from 'ngx-tethys/util';\n\n/**\n * 选项卡的选项组件\n * @name thy-tab\n */\n@Component({\n    selector: 'thy-tab',\n    template: ` <ng-template #content><ng-content></ng-content></ng-template> `,\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    standalone: true\n})\nexport class ThyTab implements OnInit {\n    /**\n     * 自定义选项标题的模板\n     * @type TemplateRef\n     */\n    @ContentChild('title') titleTemplateRef: TemplateRef<unknown>;\n\n    @ViewChild('content', { static: true }) content: TemplateRef<HTMLElement>;\n\n    /**\n     * 选项标题\n     */\n    @Input() thyTitle: string;\n\n    /**\n     * 选项的唯一标识\n     */\n    @Input() id: string;\n\n    /**\n     * 是否禁用选项\n     * @default false\n     */\n    @Input({ transform: coerceBooleanProperty }) thyDisabled: boolean;\n\n    constructor() {}\n\n    ngOnInit(): void {}\n}\n","import { ChangeDetectionStrategy, Component, Input, TemplateRef, ViewEncapsulation } from '@angular/core';\nimport { NgTemplateOutlet } from '@angular/common';\n\n/**\n * @private\n */\n@Component({\n    selector: 'thy-tab-content, [thyTabContent]',\n    exportAs: 'thyTabContent',\n    preserveWhitespaces: false,\n    encapsulation: ViewEncapsulation.None,\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    template: `\n        @if (active) {\n            <ng-template [ngTemplateOutlet]=\"content\"></ng-template>\n        }\n    `,\n    host: {\n        class: 'thy-tab-content',\n        '[attr.aria-hidden]': '!active',\n        '[attr.tabindex]': 'active ? 0 : -1',\n        '[style.visibility]': 'tabPaneAnimated ? active ? null : \"hidden\" : null',\n        '[style.height]': 'tabPaneAnimated ? active ? null : 0 : null',\n        '[style.overflow-y]': 'tabPaneAnimated ? active ? null : \"none\" : null',\n        '[style.display]': '!tabPaneAnimated ? active ? null : \"none\" : null'\n    },\n    standalone: true,\n    imports: [NgTemplateOutlet]\n})\nexport class ThyTabContent {\n    @Input() content: TemplateRef<void> | null = null;\n\n    @Input() active = false;\n\n    @Input() tabPaneAnimated = true;\n}\n","import {\n    AfterContentInit,\n    ChangeDetectionStrategy,\n    ChangeDetectorRef,\n    Component,\n    ContentChildren,\n    DestroyRef,\n    ElementRef,\n    EventEmitter,\n    Input,\n    OnChanges,\n    OnInit,\n    Output,\n    QueryList,\n    SimpleChanges,\n    TemplateRef,\n    inject\n} from '@angular/core';\nimport { coerceBooleanProperty, isString } from 'ngx-tethys/util';\nimport { fromEvent } from 'rxjs';\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\nimport { ThyTab } from './tab.component';\nimport { ThyActiveTabInfo, ThyTabActiveEvent } from './types';\nimport { ThyTabContent } from './tab-content.component';\nimport { NgTemplateOutlet } from '@angular/common';\nimport { ThyNav, ThyNavItemDirective } from 'ngx-tethys/nav';\n\nexport type ThyTabsSize = 'lg' | 'md' | 'sm';\n\nexport type ThyTabsType = 'pulled' | 'tabs' | 'pills' | 'lite';\n\nexport type ThyTabsPosition = 'top' | 'left';\n\n/**\n * 选项卡切换组件\n * @name thy-tabs\n */\n@Component({\n    selector: 'thy-tabs',\n    templateUrl: './tabs.component.html',\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    host: {\n        class: 'thy-tabs',\n        '[class.thy-tabs-top]': `thyPosition === 'top'`,\n        '[class.thy-tabs-left]': `thyPosition === 'left'`,\n        '[style.overflow]': `transitionStarted ? \"hidden\" : null`\n    },\n    standalone: true,\n    imports: [ThyNav, ThyNavItemDirective, NgTemplateOutlet, ThyTabContent]\n})\nexport class ThyTabs implements OnInit, OnChanges, AfterContentInit {\n    @ContentChildren(ThyTab, { descendants: true }) tabs = new QueryList<ThyTab>();\n\n    private readonly destroyRef = inject(DestroyRef);\n\n    /**\n     * 标签类型\n     * @type 'pulled' | 'tabs' | 'pills' | 'lite'\n     */\n    @Input() thyType: ThyTabsType = 'tabs';\n\n    /**\n     * 选项卡的大小\n     * @type 'lg' | 'md' | 'sm'\n     */\n    @Input() thySize: ThyTabsSize = 'md';\n\n    /**\n     * 激活的项\n     */\n    @Input()\n    set thyActiveTab(value: ThyActiveTabInfo) {\n        if (isString(value)) {\n            this.activeTabId = value;\n            this.activeTabIndex = undefined;\n        } else {\n            this.activeTabIndex = value;\n            this.activeTabId = undefined;\n        }\n    }\n\n    /**\n     * 附加操作\n     */\n    @Input() thyExtra: TemplateRef<unknown>;\n\n    /**\n     * 选项卡的位置\n     * @type 'top' | 'left'\n     */\n    @Input() thyPosition: ThyTabsPosition = 'top';\n\n    /**\n     * 是否使用动画切换 Tabs\n     */\n    @Input({ transform: coerceBooleanProperty }) thyAnimated: boolean = false;\n\n    /**\n     * 响应式，自动计算宽度存放 thyNavItem，并添加更多弹框\n     */\n    @Input({ transform: coerceBooleanProperty }) thyResponsive: boolean = false;\n\n    /**\n     * 激活的项发生改变时的回调\n     */\n    @Output() thyActiveTabChange: EventEmitter<ThyTabActiveEvent> = new EventEmitter<ThyTabActiveEvent>();\n\n    activeTabIndex: number = 0;\n\n    activeTabId: string;\n\n    transitionStarted: boolean = false;\n\n    constructor(\n        private cd: ChangeDetectorRef,\n        private el: ElementRef\n    ) {}\n\n    ngOnInit(): void {\n        const tabsContent = this.el.nativeElement.querySelector('.thy-tabs-content');\n        fromEvent(tabsContent, 'transitionend')\n            .pipe(takeUntilDestroyed(this.destroyRef))\n            .subscribe(() => {\n                this.transitionStarted = false;\n                this.cd.markForCheck();\n            });\n    }\n\n    ngOnChanges(changes: SimpleChanges): void {\n        const { thyActiveTab } = changes;\n        if (thyActiveTab && !thyActiveTab.firstChange && this.thyAnimated) {\n            const index = thyActiveTab?.currentValue?.index || Array.from(this.tabs).findIndex(k => k.id === thyActiveTab?.currentValue.id);\n            this.transitionStarted = this.activeTabIndex !== index;\n            this.activeTabIndex = index;\n        }\n    }\n\n    ngAfterContentInit() {\n        this.tabs.changes.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(data => {\n            this.thyAnimated && (this.transitionStarted = true);\n            this.activeTabIndex = data.length - 1;\n            this.cd.markForCheck();\n        });\n    }\n\n    get tabPaneAnimated(): boolean {\n        return this.thyPosition === 'top' && this.thyAnimated;\n    }\n\n    getTabContentMarginLeft(): string {\n        if (this.tabPaneAnimated) {\n            return `${-(this.activeTabIndex || 0) * 100}%`;\n        }\n        return '';\n    }\n\n    activeTab(tab: ThyTab, index: number) {\n        if (tab.thyDisabled) {\n            return;\n        }\n        this.activeTabId = tab.id || null;\n        this.thyAnimated && (this.transitionStarted = this.activeTabIndex !== index);\n        this.activeTabIndex = index;\n        const activeTab = tab.id ? tab.id : index;\n        this.thyActiveTabChange.emit(activeTab);\n    }\n}\n","<!-- tabs nav -->\n<thy-nav\n  class=\"thy-tabs-nav\"\n  [thyType]=\"thyType\"\n  [thySize]=\"thySize\"\n  [thyExtra]=\"thyExtra\"\n  [thyVertical]=\"thyPosition === 'left'\"\n  [thyResponsive]=\"thyResponsive\">\n  @for (tab of tabs; track $index; let i = $index) {\n    <a\n      href=\"javascript:;\"\n      thyNavItem\n      [id]=\"tab.id\"\n      [thyNavItemDisabled]=\"tab.thyDisabled\"\n      [thyNavItemActive]=\"(tab.id && activeTabId && tab.id === activeTabId) ?? i === activeTabIndex\"\n      (click)=\"activeTab(tab, i)\">\n      @if (tab.titleTemplateRef) {\n        <ng-template [ngTemplateOutlet]=\"tab.titleTemplateRef\"></ng-template>\n      } @else {\n        {{ tab.thyTitle }}\n      }\n    </a>\n  }\n</thy-nav>\n<!-- tabs content -->\n<div class=\"thy-tabs-content\" [class.thy-tabs-content-animated]=\"tabPaneAnimated\" [style.margin-left]=\"getTabContentMarginLeft()\">\n  @for (tab of tabs; track $index; let i = $index) {\n    <div\n      thyTabContent\n      [active]=\"(tab.id && activeTabId && tab.id === activeTabId) ?? i === activeTabIndex\"\n      [content]=\"tab.content\"\n      [tabPaneAnimated]=\"tabPaneAnimated\"></div>\n  }\n</div>\n","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { ThyTabs } from './tabs.component';\nimport { ThyTab } from './tab.component';\nimport { ThyIconModule } from 'ngx-tethys/icon';\nimport { ThyNavModule } from 'ngx-tethys/nav';\nimport { ThyTabContent } from './tab-content.component';\n\n@NgModule({\n    imports: [CommonModule, ThyIconModule, ThyNavModule, ThyTabs, ThyTab, ThyTabContent],\n    exports: [ThyTabs, ThyTab]\n})\nexport class ThyTabsModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/ngx-tethys-time-picker.mjs

@@ -4,9 +4,9 @@ import * as i1 from '@angular/forms';
 import { NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
 import { coerceNumberProperty } from '@angular/cdk/coercion';
 import { Subscription } from 'rxjs';
-import { NgIf, NgFor, DecimalPipe, NgTemplateOutlet, NgClass, CommonModule } from '@angular/common';
 import { __decorate, __metadata } from 'tslib';
 import { MiniStore, MiniAction, reqAnimFrame, getFlexiblePositions, scaleXMotion, scaleYMotion, scaleMotion } from 'ngx-tethys/core';
+import { DecimalPipe, NgTemplateOutlet, NgClass, CommonModule } from '@angular/common';
 import { CdkConnectedOverlay, CdkOverlayOrigin, OverlayModule } from '@angular/cdk/overlay';
 import { isValid } from 'date-fns';
 import { TinyDate, coerceBooleanProperty } from 'ngx-tethys/util';
@@ -609,11 +609,11 @@ class ThyInnerTimePicker {
         this.seconds = padNumber(_value.getUTCSeconds());
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: ThyInnerTimePicker, deps: [{ token: TimePickerConfig }, { token: i0.ChangeDetectorRef }, { token: ThyTimePickerStore }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.0", type: ThyInnerTimePicker, isStandalone: true, selector: "thy-inner-time-picker", inputs: { hourStep: "hourStep", minuteStep: "minuteStep", secondsStep: "secondsStep", readonlyInput: "readonlyInput", disabled: "disabled", mousewheel: "mousewheel", arrowKeys: "arrowKeys", showSpinners: "showSpinners", showMeridian: "showMeridian", showMinutes: "showMinutes", showSeconds: "showSeconds", meridians: "meridians", min: "min", max: "max", hoursPlaceholder: "hoursPlaceholder", minutesPlaceholder: "minutesPlaceholder", secondsPlaceholder: "secondsPlaceholder" }, outputs: { isValid: "isValid" }, providers: [TIMEPICKER_CONTROL_VALUE_ACCESSOR, ThyTimePickerStore], usesOnChanges: true, ngImport: i0, template: "<table>\n  <tbody>\n    <tr class=\"text-center\" [hidden]=\"!showSpinners\">\n      <!-- increment hours button-->\n      <td>\n        <a class=\"btn btn-link\" [class.disabled]=\"!canIncrementHours || !isEditable\" (click)=\"changeHours(hourStep)\"\n          ><span class=\"thy-chevron thy-chevron-up\"></span\n        ></a>\n      </td>\n      <!-- divider -->\n      <td *ngIf=\"showMinutes\">&nbsp;&nbsp;&nbsp;</td>\n      <!-- increment minutes button -->\n      <td *ngIf=\"showMinutes\">\n        <a class=\"btn btn-link\" [class.disabled]=\"!canIncrementMinutes || !isEditable\" (click)=\"changeMinutes(minuteStep)\"\n          ><span class=\"thy-chevron thy-chevron-up\"></span\n        ></a>\n      </td>\n      <!-- divider -->\n      <td *ngIf=\"showSeconds\">&nbsp;</td>\n      <!-- increment seconds button -->\n      <td *ngIf=\"showSeconds\">\n        <a class=\"btn btn-link\" [class.disabled]=\"!canIncrementSeconds || !isEditable\" (click)=\"changeSeconds(secondsStep)\">\n          <span class=\"thy-chevron thy-chevron-up\"></span>\n        </a>\n      </td>\n      <!-- space between -->\n      <td *ngIf=\"showMeridian\">&nbsp;&nbsp;&nbsp;</td>\n      <!-- meridian placeholder-->\n      <td *ngIf=\"showMeridian\"></td>\n    </tr>\n    <tr>\n      <!-- hours -->\n      <td class=\"form-group\" [class.has-error]=\"invalidHours\">\n        <input\n          type=\"text\"\n          [class.is-invalid]=\"invalidHours\"\n          class=\"form-control text-center thy-time-picker-field\"\n          [placeholder]=\"hoursPlaceholder\"\n          maxlength=\"2\"\n          [readonly]=\"readonlyInput\"\n          [disabled]=\"disabled\"\n          [value]=\"hours\"\n          (wheel)=\"prevDef($event); changeHours(hourStep * wheelSign($event), 'wheel')\"\n          (keydown.ArrowUp)=\"changeHours(hourStep, 'key')\"\n          (keydown.ArrowDown)=\"changeHours(-hourStep, 'key')\"\n          (change)=\"updateHours($event.target.value)\"\n        />\n      </td>\n\n      <!-- divider -->\n      <td *ngIf=\"showMinutes\">&nbsp;:&nbsp;</td>\n      <!-- minutes -->\n      <td class=\"form-group\" *ngIf=\"showMinutes\" [class.has-error]=\"invalidMinutes\">\n        <input\n          type=\"text\"\n          [class.is-invalid]=\"invalidMinutes\"\n          class=\"form-control text-center thy-time-picker-field\"\n          [placeholder]=\"minutesPlaceholder\"\n          maxlength=\"2\"\n          [readonly]=\"readonlyInput\"\n          [disabled]=\"disabled\"\n          [value]=\"minutes\"\n          (wheel)=\"prevDef($event); changeMinutes(minuteStep * wheelSign($event), 'wheel')\"\n          (keydown.ArrowUp)=\"changeMinutes(minuteStep, 'key')\"\n          (keydown.ArrowDown)=\"changeMinutes(-minuteStep, 'key')\"\n          (change)=\"updateMinutes($event.target.value)\"\n        />\n      </td>\n      <!-- divider -->\n      <td *ngIf=\"showSeconds\">&nbsp;:&nbsp;</td>\n      <!-- seconds -->\n      <td class=\"form-group\" *ngIf=\"showSeconds\" [class.has-error]=\"invalidSeconds\">\n        <input\n          type=\"text\"\n          [class.is-invalid]=\"invalidSeconds\"\n          class=\"form-control text-center thy-time-picker-field\"\n          [placeholder]=\"secondsPlaceholder\"\n          maxlength=\"2\"\n          [readonly]=\"readonlyInput\"\n          [disabled]=\"disabled\"\n          [value]=\"seconds\"\n          (wheel)=\"prevDef($event); changeSeconds(secondsStep * wheelSign($event), 'wheel')\"\n          (keydown.ArrowUp)=\"changeSeconds(secondsStep, 'key')\"\n          (keydown.ArrowDown)=\"changeSeconds(-secondsStep, 'key')\"\n          (change)=\"updateSeconds($event.target.value)\"\n        />\n      </td>\n      <!-- space between -->\n      <td *ngIf=\"showMeridian\">&nbsp;&nbsp;&nbsp;</td>\n      <!-- meridian -->\n      <td *ngIf=\"showMeridian\">\n        <button\n          type=\"button\"\n          class=\"btn btn-default text-center\"\n          [disabled]=\"!isEditable || !canToggleMeridian\"\n          [class.disabled]=\"!isEditable || !canToggleMeridian\"\n          (click)=\"toggleMeridian()\"\n        >\n          {{ meridian }}\n        </button>\n      </td>\n    </tr>\n    <tr class=\"text-center\" [hidden]=\"!showSpinners\">\n      <!-- decrement hours button-->\n      <td>\n        <a class=\"btn btn-link\" [class.disabled]=\"!canDecrementHours || !isEditable\" (click)=\"changeHours(-hourStep)\">\n          <span class=\"thy-chevron thy-chevron-down\"></span>\n        </a>\n      </td>\n      <!-- divider -->\n      <td *ngIf=\"showMinutes\">&nbsp;&nbsp;&nbsp;</td>\n      <!-- decrement minutes button-->\n      <td *ngIf=\"showMinutes\">\n        <a class=\"btn btn-link\" [class.disabled]=\"!canDecrementMinutes || !isEditable\" (click)=\"changeMinutes(-minuteStep)\">\n          <span class=\"thy-chevron thy-chevron-down\"></span>\n        </a>\n      </td>\n      <!-- divider -->\n      <td *ngIf=\"showSeconds\">&nbsp;</td>\n      <!-- decrement seconds button-->\n      <td *ngIf=\"showSeconds\">\n        <a class=\"btn btn-link\" [class.disabled]=\"!canDecrementSeconds || !isEditable\" (click)=\"changeSeconds(-secondsStep)\">\n          <span class=\"thy-chevron thy-chevron-down\"></span>\n        </a>\n      </td>\n      <!-- space between -->\n      <td *ngIf=\"showMeridian\">&nbsp;&nbsp;&nbsp;</td>\n      <!-- meridian placeholder-->\n      <td *ngIf=\"showMeridian\"></td>\n    </tr>\n  </tbody>\n</table>\n", dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", type: ThyInnerTimePicker, isStandalone: true, selector: "thy-inner-time-picker", inputs: { hourStep: "hourStep", minuteStep: "minuteStep", secondsStep: "secondsStep", readonlyInput: "readonlyInput", disabled: "disabled", mousewheel: "mousewheel", arrowKeys: "arrowKeys", showSpinners: "showSpinners", showMeridian: "showMeridian", showMinutes: "showMinutes", showSeconds: "showSeconds", meridians: "meridians", min: "min", max: "max", hoursPlaceholder: "hoursPlaceholder", minutesPlaceholder: "minutesPlaceholder", secondsPlaceholder: "secondsPlaceholder" }, outputs: { isValid: "isValid" }, providers: [TIMEPICKER_CONTROL_VALUE_ACCESSOR, ThyTimePickerStore], usesOnChanges: true, ngImport: i0, template: "<table>\n  <tbody>\n    <tr class=\"text-center\" [hidden]=\"!showSpinners\">\n      <!-- increment hours button-->\n      <td>\n        <a class=\"btn btn-link\" [class.disabled]=\"!canIncrementHours || !isEditable\" (click)=\"changeHours(hourStep)\"\n          ><span class=\"thy-chevron thy-chevron-up\"></span\n        ></a>\n      </td>\n      <!-- divider -->\n      @if (showMinutes) {\n        <td>&nbsp;&nbsp;&nbsp;</td>\n      }\n      <!-- increment minutes button -->\n      @if (showMinutes) {\n        <td>\n          <a class=\"btn btn-link\" [class.disabled]=\"!canIncrementMinutes || !isEditable\" (click)=\"changeMinutes(minuteStep)\"\n            ><span class=\"thy-chevron thy-chevron-up\"></span\n          ></a>\n        </td>\n      }\n      <!-- divider -->\n      @if (showSeconds) {\n        <td>&nbsp;</td>\n      }\n      <!-- increment seconds button -->\n      @if (showSeconds) {\n        <td>\n          <a class=\"btn btn-link\" [class.disabled]=\"!canIncrementSeconds || !isEditable\" (click)=\"changeSeconds(secondsStep)\">\n            <span class=\"thy-chevron thy-chevron-up\"></span>\n          </a>\n        </td>\n      }\n      <!-- space between -->\n      @if (showMeridian) {\n        <td>&nbsp;&nbsp;&nbsp;</td>\n      }\n      <!-- meridian placeholder-->\n      @if (showMeridian) {\n        <td></td>\n      }\n    </tr>\n    <tr>\n      <!-- hours -->\n      <td class=\"form-group\" [class.has-error]=\"invalidHours\">\n        <input\n          type=\"text\"\n          [class.is-invalid]=\"invalidHours\"\n          class=\"form-control text-center thy-time-picker-field\"\n          [placeholder]=\"hoursPlaceholder\"\n          maxlength=\"2\"\n          [readonly]=\"readonlyInput\"\n          [disabled]=\"disabled\"\n          [value]=\"hours\"\n          (wheel)=\"prevDef($event); changeHours(hourStep * wheelSign($event), 'wheel')\"\n          (keydown.ArrowUp)=\"changeHours(hourStep, 'key')\"\n          (keydown.ArrowDown)=\"changeHours(-hourStep, 'key')\"\n          (change)=\"updateHours($event.target.value)\"\n          />\n      </td>\n\n      <!-- divider -->\n      @if (showMinutes) {\n        <td>&nbsp;:&nbsp;</td>\n      }\n      <!-- minutes -->\n      @if (showMinutes) {\n        <td class=\"form-group\" [class.has-error]=\"invalidMinutes\">\n          <input\n            type=\"text\"\n            [class.is-invalid]=\"invalidMinutes\"\n            class=\"form-control text-center thy-time-picker-field\"\n            [placeholder]=\"minutesPlaceholder\"\n            maxlength=\"2\"\n            [readonly]=\"readonlyInput\"\n            [disabled]=\"disabled\"\n            [value]=\"minutes\"\n            (wheel)=\"prevDef($event); changeMinutes(minuteStep * wheelSign($event), 'wheel')\"\n            (keydown.ArrowUp)=\"changeMinutes(minuteStep, 'key')\"\n            (keydown.ArrowDown)=\"changeMinutes(-minuteStep, 'key')\"\n            (change)=\"updateMinutes($event.target.value)\"\n            />\n        </td>\n      }\n      <!-- divider -->\n      @if (showSeconds) {\n        <td>&nbsp;:&nbsp;</td>\n      }\n      <!-- seconds -->\n      @if (showSeconds) {\n        <td class=\"form-group\" [class.has-error]=\"invalidSeconds\">\n          <input\n            type=\"text\"\n            [class.is-invalid]=\"invalidSeconds\"\n            class=\"form-control text-center thy-time-picker-field\"\n            [placeholder]=\"secondsPlaceholder\"\n            maxlength=\"2\"\n            [readonly]=\"readonlyInput\"\n            [disabled]=\"disabled\"\n            [value]=\"seconds\"\n            (wheel)=\"prevDef($event); changeSeconds(secondsStep * wheelSign($event), 'wheel')\"\n            (keydown.ArrowUp)=\"changeSeconds(secondsStep, 'key')\"\n            (keydown.ArrowDown)=\"changeSeconds(-secondsStep, 'key')\"\n            (change)=\"updateSeconds($event.target.value)\"\n            />\n        </td>\n      }\n      <!-- space between -->\n      @if (showMeridian) {\n        <td>&nbsp;&nbsp;&nbsp;</td>\n      }\n      <!-- meridian -->\n      @if (showMeridian) {\n        <td>\n          <button\n            type=\"button\"\n            class=\"btn btn-default text-center\"\n            [disabled]=\"!isEditable || !canToggleMeridian\"\n            [class.disabled]=\"!isEditable || !canToggleMeridian\"\n            (click)=\"toggleMeridian()\"\n            >\n            {{ meridian }}\n          </button>\n        </td>\n      }\n    </tr>\n    <tr class=\"text-center\" [hidden]=\"!showSpinners\">\n      <!-- decrement hours button-->\n      <td>\n        <a class=\"btn btn-link\" [class.disabled]=\"!canDecrementHours || !isEditable\" (click)=\"changeHours(-hourStep)\">\n          <span class=\"thy-chevron thy-chevron-down\"></span>\n        </a>\n      </td>\n      <!-- divider -->\n      @if (showMinutes) {\n        <td>&nbsp;&nbsp;&nbsp;</td>\n      }\n      <!-- decrement minutes button-->\n      @if (showMinutes) {\n        <td>\n          <a class=\"btn btn-link\" [class.disabled]=\"!canDecrementMinutes || !isEditable\" (click)=\"changeMinutes(-minuteStep)\">\n            <span class=\"thy-chevron thy-chevron-down\"></span>\n          </a>\n        </td>\n      }\n      <!-- divider -->\n      @if (showSeconds) {\n        <td>&nbsp;</td>\n      }\n      <!-- decrement seconds button-->\n      @if (showSeconds) {\n        <td>\n          <a class=\"btn btn-link\" [class.disabled]=\"!canDecrementSeconds || !isEditable\" (click)=\"changeSeconds(-secondsStep)\">\n            <span class=\"thy-chevron thy-chevron-down\"></span>\n          </a>\n        </td>\n      }\n      <!-- space between -->\n      @if (showMeridian) {\n        <td>&nbsp;&nbsp;&nbsp;</td>\n      }\n      <!-- meridian placeholder-->\n      @if (showMeridian) {\n        <td></td>\n      }\n    </tr>\n  </tbody>\n</table>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: ThyInnerTimePicker, decorators: [{
             type: Component,
-            args: [{ selector: 'thy-inner-time-picker', changeDetection: ChangeDetectionStrategy.OnPush, providers: [TIMEPICKER_CONTROL_VALUE_ACCESSOR, ThyTimePickerStore], standalone: true, imports: [NgIf], template: "<table>\n  <tbody>\n    <tr class=\"text-center\" [hidden]=\"!showSpinners\">\n      <!-- increment hours button-->\n      <td>\n        <a class=\"btn btn-link\" [class.disabled]=\"!canIncrementHours || !isEditable\" (click)=\"changeHours(hourStep)\"\n          ><span class=\"thy-chevron thy-chevron-up\"></span\n        ></a>\n      </td>\n      <!-- divider -->\n      <td *ngIf=\"showMinutes\">&nbsp;&nbsp;&nbsp;</td>\n      <!-- increment minutes button -->\n      <td *ngIf=\"showMinutes\">\n        <a class=\"btn btn-link\" [class.disabled]=\"!canIncrementMinutes || !isEditable\" (click)=\"changeMinutes(minuteStep)\"\n          ><span class=\"thy-chevron thy-chevron-up\"></span\n        ></a>\n      </td>\n      <!-- divider -->\n      <td *ngIf=\"showSeconds\">&nbsp;</td>\n      <!-- increment seconds button -->\n      <td *ngIf=\"showSeconds\">\n        <a class=\"btn btn-link\" [class.disabled]=\"!canIncrementSeconds || !isEditable\" (click)=\"changeSeconds(secondsStep)\">\n          <span class=\"thy-chevron thy-chevron-up\"></span>\n        </a>\n      </td>\n      <!-- space between -->\n      <td *ngIf=\"showMeridian\">&nbsp;&nbsp;&nbsp;</td>\n      <!-- meridian placeholder-->\n      <td *ngIf=\"showMeridian\"></td>\n    </tr>\n    <tr>\n      <!-- hours -->\n      <td class=\"form-group\" [class.has-error]=\"invalidHours\">\n        <input\n          type=\"text\"\n          [class.is-invalid]=\"invalidHours\"\n          class=\"form-control text-center thy-time-picker-field\"\n          [placeholder]=\"hoursPlaceholder\"\n          maxlength=\"2\"\n          [readonly]=\"readonlyInput\"\n          [disabled]=\"disabled\"\n          [value]=\"hours\"\n          (wheel)=\"prevDef($event); changeHours(hourStep * wheelSign($event), 'wheel')\"\n          (keydown.ArrowUp)=\"changeHours(hourStep, 'key')\"\n          (keydown.ArrowDown)=\"changeHours(-hourStep, 'key')\"\n          (change)=\"updateHours($event.target.value)\"\n        />\n      </td>\n\n      <!-- divider -->\n      <td *ngIf=\"showMinutes\">&nbsp;:&nbsp;</td>\n      <!-- minutes -->\n      <td class=\"form-group\" *ngIf=\"showMinutes\" [class.has-error]=\"invalidMinutes\">\n        <input\n          type=\"text\"\n          [class.is-invalid]=\"invalidMinutes\"\n          class=\"form-control text-center thy-time-picker-field\"\n          [placeholder]=\"minutesPlaceholder\"\n          maxlength=\"2\"\n          [readonly]=\"readonlyInput\"\n          [disabled]=\"disabled\"\n          [value]=\"minutes\"\n          (wheel)=\"prevDef($event); changeMinutes(minuteStep * wheelSign($event), 'wheel')\"\n          (keydown.ArrowUp)=\"changeMinutes(minuteStep, 'key')\"\n          (keydown.ArrowDown)=\"changeMinutes(-minuteStep, 'key')\"\n          (change)=\"updateMinutes($event.target.value)\"\n        />\n      </td>\n      <!-- divider -->\n      <td *ngIf=\"showSeconds\">&nbsp;:&nbsp;</td>\n      <!-- seconds -->\n      <td class=\"form-group\" *ngIf=\"showSeconds\" [class.has-error]=\"invalidSeconds\">\n        <input\n          type=\"text\"\n          [class.is-invalid]=\"invalidSeconds\"\n          class=\"form-control text-center thy-time-picker-field\"\n          [placeholder]=\"secondsPlaceholder\"\n          maxlength=\"2\"\n          [readonly]=\"readonlyInput\"\n          [disabled]=\"disabled\"\n          [value]=\"seconds\"\n          (wheel)=\"prevDef($event); changeSeconds(secondsStep * wheelSign($event), 'wheel')\"\n          (keydown.ArrowUp)=\"changeSeconds(secondsStep, 'key')\"\n          (keydown.ArrowDown)=\"changeSeconds(-secondsStep, 'key')\"\n          (change)=\"updateSeconds($event.target.value)\"\n        />\n      </td>\n      <!-- space between -->\n      <td *ngIf=\"showMeridian\">&nbsp;&nbsp;&nbsp;</td>\n      <!-- meridian -->\n      <td *ngIf=\"showMeridian\">\n        <button\n          type=\"button\"\n          class=\"btn btn-default text-center\"\n          [disabled]=\"!isEditable || !canToggleMeridian\"\n          [class.disabled]=\"!isEditable || !canToggleMeridian\"\n          (click)=\"toggleMeridian()\"\n        >\n          {{ meridian }}\n        </button>\n      </td>\n    </tr>\n    <tr class=\"text-center\" [hidden]=\"!showSpinners\">\n      <!-- decrement hours button-->\n      <td>\n        <a class=\"btn btn-link\" [class.disabled]=\"!canDecrementHours || !isEditable\" (click)=\"changeHours(-hourStep)\">\n          <span class=\"thy-chevron thy-chevron-down\"></span>\n        </a>\n      </td>\n      <!-- divider -->\n      <td *ngIf=\"showMinutes\">&nbsp;&nbsp;&nbsp;</td>\n      <!-- decrement minutes button-->\n      <td *ngIf=\"showMinutes\">\n        <a class=\"btn btn-link\" [class.disabled]=\"!canDecrementMinutes || !isEditable\" (click)=\"changeMinutes(-minuteStep)\">\n          <span class=\"thy-chevron thy-chevron-down\"></span>\n        </a>\n      </td>\n      <!-- divider -->\n      <td *ngIf=\"showSeconds\">&nbsp;</td>\n      <!-- decrement seconds button-->\n      <td *ngIf=\"showSeconds\">\n        <a class=\"btn btn-link\" [class.disabled]=\"!canDecrementSeconds || !isEditable\" (click)=\"changeSeconds(-secondsStep)\">\n          <span class=\"thy-chevron thy-chevron-down\"></span>\n        </a>\n      </td>\n      <!-- space between -->\n      <td *ngIf=\"showMeridian\">&nbsp;&nbsp;&nbsp;</td>\n      <!-- meridian placeholder-->\n      <td *ngIf=\"showMeridian\"></td>\n    </tr>\n  </tbody>\n</table>\n" }]
+            args: [{ selector: 'thy-inner-time-picker', changeDetection: ChangeDetectionStrategy.OnPush, providers: [TIMEPICKER_CONTROL_VALUE_ACCESSOR, ThyTimePickerStore], standalone: true, imports: [], template: "<table>\n  <tbody>\n    <tr class=\"text-center\" [hidden]=\"!showSpinners\">\n      <!-- increment hours button-->\n      <td>\n        <a class=\"btn btn-link\" [class.disabled]=\"!canIncrementHours || !isEditable\" (click)=\"changeHours(hourStep)\"\n          ><span class=\"thy-chevron thy-chevron-up\"></span\n        ></a>\n      </td>\n      <!-- divider -->\n      @if (showMinutes) {\n        <td>&nbsp;&nbsp;&nbsp;</td>\n      }\n      <!-- increment minutes button -->\n      @if (showMinutes) {\n        <td>\n          <a class=\"btn btn-link\" [class.disabled]=\"!canIncrementMinutes || !isEditable\" (click)=\"changeMinutes(minuteStep)\"\n            ><span class=\"thy-chevron thy-chevron-up\"></span\n          ></a>\n        </td>\n      }\n      <!-- divider -->\n      @if (showSeconds) {\n        <td>&nbsp;</td>\n      }\n      <!-- increment seconds button -->\n      @if (showSeconds) {\n        <td>\n          <a class=\"btn btn-link\" [class.disabled]=\"!canIncrementSeconds || !isEditable\" (click)=\"changeSeconds(secondsStep)\">\n            <span class=\"thy-chevron thy-chevron-up\"></span>\n          </a>\n        </td>\n      }\n      <!-- space between -->\n      @if (showMeridian) {\n        <td>&nbsp;&nbsp;&nbsp;</td>\n      }\n      <!-- meridian placeholder-->\n      @if (showMeridian) {\n        <td></td>\n      }\n    </tr>\n    <tr>\n      <!-- hours -->\n      <td class=\"form-group\" [class.has-error]=\"invalidHours\">\n        <input\n          type=\"text\"\n          [class.is-invalid]=\"invalidHours\"\n          class=\"form-control text-center thy-time-picker-field\"\n          [placeholder]=\"hoursPlaceholder\"\n          maxlength=\"2\"\n          [readonly]=\"readonlyInput\"\n          [disabled]=\"disabled\"\n          [value]=\"hours\"\n          (wheel)=\"prevDef($event); changeHours(hourStep * wheelSign($event), 'wheel')\"\n          (keydown.ArrowUp)=\"changeHours(hourStep, 'key')\"\n          (keydown.ArrowDown)=\"changeHours(-hourStep, 'key')\"\n          (change)=\"updateHours($event.target.value)\"\n          />\n      </td>\n\n      <!-- divider -->\n      @if (showMinutes) {\n        <td>&nbsp;:&nbsp;</td>\n      }\n      <!-- minutes -->\n      @if (showMinutes) {\n        <td class=\"form-group\" [class.has-error]=\"invalidMinutes\">\n          <input\n            type=\"text\"\n            [class.is-invalid]=\"invalidMinutes\"\n            class=\"form-control text-center thy-time-picker-field\"\n            [placeholder]=\"minutesPlaceholder\"\n            maxlength=\"2\"\n            [readonly]=\"readonlyInput\"\n            [disabled]=\"disabled\"\n            [value]=\"minutes\"\n            (wheel)=\"prevDef($event); changeMinutes(minuteStep * wheelSign($event), 'wheel')\"\n            (keydown.ArrowUp)=\"changeMinutes(minuteStep, 'key')\"\n            (keydown.ArrowDown)=\"changeMinutes(-minuteStep, 'key')\"\n            (change)=\"updateMinutes($event.target.value)\"\n            />\n        </td>\n      }\n      <!-- divider -->\n      @if (showSeconds) {\n        <td>&nbsp;:&nbsp;</td>\n      }\n      <!-- seconds -->\n      @if (showSeconds) {\n        <td class=\"form-group\" [class.has-error]=\"invalidSeconds\">\n          <input\n            type=\"text\"\n            [class.is-invalid]=\"invalidSeconds\"\n            class=\"form-control text-center thy-time-picker-field\"\n            [placeholder]=\"secondsPlaceholder\"\n            maxlength=\"2\"\n            [readonly]=\"readonlyInput\"\n            [disabled]=\"disabled\"\n            [value]=\"seconds\"\n            (wheel)=\"prevDef($event); changeSeconds(secondsStep * wheelSign($event), 'wheel')\"\n            (keydown.ArrowUp)=\"changeSeconds(secondsStep, 'key')\"\n            (keydown.ArrowDown)=\"changeSeconds(-secondsStep, 'key')\"\n            (change)=\"updateSeconds($event.target.value)\"\n            />\n        </td>\n      }\n      <!-- space between -->\n      @if (showMeridian) {\n        <td>&nbsp;&nbsp;&nbsp;</td>\n      }\n      <!-- meridian -->\n      @if (showMeridian) {\n        <td>\n          <button\n            type=\"button\"\n            class=\"btn btn-default text-center\"\n            [disabled]=\"!isEditable || !canToggleMeridian\"\n            [class.disabled]=\"!isEditable || !canToggleMeridian\"\n            (click)=\"toggleMeridian()\"\n            >\n            {{ meridian }}\n          </button>\n        </td>\n      }\n    </tr>\n    <tr class=\"text-center\" [hidden]=\"!showSpinners\">\n      <!-- decrement hours button-->\n      <td>\n        <a class=\"btn btn-link\" [class.disabled]=\"!canDecrementHours || !isEditable\" (click)=\"changeHours(-hourStep)\">\n          <span class=\"thy-chevron thy-chevron-down\"></span>\n        </a>\n      </td>\n      <!-- divider -->\n      @if (showMinutes) {\n        <td>&nbsp;&nbsp;&nbsp;</td>\n      }\n      <!-- decrement minutes button-->\n      @if (showMinutes) {\n        <td>\n          <a class=\"btn btn-link\" [class.disabled]=\"!canDecrementMinutes || !isEditable\" (click)=\"changeMinutes(-minuteStep)\">\n            <span class=\"thy-chevron thy-chevron-down\"></span>\n          </a>\n        </td>\n      }\n      <!-- divider -->\n      @if (showSeconds) {\n        <td>&nbsp;</td>\n      }\n      <!-- decrement seconds button-->\n      @if (showSeconds) {\n        <td>\n          <a class=\"btn btn-link\" [class.disabled]=\"!canDecrementSeconds || !isEditable\" (click)=\"changeSeconds(-secondsStep)\">\n            <span class=\"thy-chevron thy-chevron-down\"></span>\n          </a>\n        </td>\n      }\n      <!-- space between -->\n      @if (showMeridian) {\n        <td>&nbsp;&nbsp;&nbsp;</td>\n      }\n      <!-- meridian placeholder-->\n      @if (showMeridian) {\n        <td></td>\n      }\n    </tr>\n  </tbody>\n</table>\n" }]
         }], ctorParameters: () => [{ type: TimePickerConfig }, { type: i0.ChangeDetectorRef }, { type: ThyTimePickerStore }], propDecorators: { hourStep: [{
                 type: Input
             }], minuteStep: [{
@@ -790,9 +790,6 @@ class ThyTimePanel {
     registerOnTouched(fn) {
         this.onTouchedFn = fn;
     }
-    trackByFn(index) {
-        return index;
-    }
     initialValue() {
         this.hour = 0;
         this.minute = 0;
@@ -860,13 +857,13 @@ class ThyTimePanel {
         }, 200);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: ThyTimePanel, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.2.0", type: ThyTimePanel, isStandalone: true, selector: "thy-time-picker-panel", inputs: { thyFormat: "thyFormat", thyHourStep: "thyHourStep", thyMinuteStep: "thyMinuteStep", thySecondStep: "thySecondStep", thyShowSelectNow: ["thyShowSelectNow", "thyShowSelectNow", coerceBooleanProperty], thyShowOperations: ["thyShowOperations", "thyShowOperations", coerceBooleanProperty] }, outputs: { thyPickChange: "thyPickChange", thyClosePanel: "thyClosePanel" }, host: { properties: { "class.thy-time-picker-panel-has-bottom-operation": "thyShowOperations", "class.thy-time-picker-panel-columns-2": "showColumnCount === 2", "class.thy-time-picker-panel-columns-3": "showColumnCount === 3" }, classAttribute: "thy-time-picker-panel" }, providers: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", type: ThyTimePanel, isStandalone: true, selector: "thy-time-picker-panel", inputs: { thyFormat: "thyFormat", thyHourStep: "thyHourStep", thyMinuteStep: "thyMinuteStep", thySecondStep: "thySecondStep", thyShowSelectNow: ["thyShowSelectNow", "thyShowSelectNow", coerceBooleanProperty], thyShowOperations: ["thyShowOperations", "thyShowOperations", coerceBooleanProperty] }, outputs: { thyPickChange: "thyPickChange", thyClosePanel: "thyClosePanel" }, host: { properties: { "class.thy-time-picker-panel-has-bottom-operation": "thyShowOperations", "class.thy-time-picker-panel-columns-2": "showColumnCount === 2", "class.thy-time-picker-panel-columns-3": "showColumnCount === 3" }, classAttribute: "thy-time-picker-panel" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 multi: true,
                 useExisting: forwardRef(() => ThyTimePanel)
             }
-        ], viewQueries: [{ propertyName: "hourListRef", first: true, predicate: ["hourListElement"], descendants: true }, { propertyName: "minuteListRef", first: true, predicate: ["minuteListElement"], descendants: true }, { propertyName: "secondListRef", first: true, predicate: ["secondListElement"], descendants: true }], ngImport: i0, template: "<div class=\"{{ prefixCls }}-content\">\n  <ul #hourListElement *ngIf=\"showHourColumn\" class=\"{{ prefixCls }}-time-column {{ prefixCls }}-hour-column\">\n    <ng-container *ngFor=\"let time of hourRange; let i = index; trackBy: trackByFn\">\n      <li\n        class=\"{{ prefixCls }}-time-column-cell\"\n        [class.thy-time-picker-panel-time-column-cell-selected]=\"hour === time.value\"\n        (click)=\"pickHours(time, i)\"\n      >\n        <span class=\"{{ prefixCls }}-time-column-cell-inner\">{{ time.value | number: '2.0-0' }}</span>\n      </li>\n    </ng-container>\n  </ul>\n  <ul #minuteListElement *ngIf=\"showMinuteColumn\" class=\"{{ prefixCls }}-time-column {{ prefixCls }}-minute-column\">\n    <ng-container *ngFor=\"let time of minuteRange; let i = index; trackBy: trackByFn\">\n      <li\n        class=\"{{ prefixCls }}-time-column-cell\"\n        [class.thy-time-picker-panel-time-column-cell-selected]=\"minute === time.value\"\n        (click)=\"pickMinutes(time, i)\"\n      >\n        <span class=\"{{ prefixCls }}-time-column-cell-inner\">{{ time.value | number: '2.0-0' }}</span>\n      </li>\n    </ng-container>\n  </ul>\n  <ul #secondListElement *ngIf=\"showSecondColumn\" class=\"{{ prefixCls }}-time-column {{ prefixCls }}-second-column\">\n    <ng-container *ngFor=\"let time of secondRange; let i = index; trackBy: trackByFn\">\n      <li\n        class=\"{{ prefixCls }}-time-column-cell\"\n        [class.thy-time-picker-panel-time-column-cell-selected]=\"second === time.value\"\n        (click)=\"pickSeconds(time, i)\"\n      >\n        <span class=\"{{ prefixCls }}-time-column-cell-inner\">{{ time.value | number: '2.0-0' }}</span>\n      </li>\n    </ng-container>\n  </ul>\n</div>\n\n<div *ngIf=\"thyShowOperations\" class=\"{{ prefixCls }}-bottom-operation\">\n  <a *ngIf=\"thyShowSelectNow\" href=\"javascript:;\" class=\"{{ prefixCls }}-time-now\" (click)=\"selectNow()\">\u6B64\u523B</a>\n  <button class=\"{{ prefixCls }}-time-confirm\" thyButton=\"primary\" thySize=\"xs\" class=\"confirm\" (click)=\"confirmPickTime()\">\u786E\u5B9A</button>\n</div>\n", dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: ThyButton, selector: "thy-button,[thy-button],[thyButton]", inputs: ["thyButton", "thyType", "thyLoading", "thyLoadingText", "thySize", "thyIcon", "thyBlock"] }, { kind: "pipe", type: DecimalPipe, name: "number" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], viewQueries: [{ propertyName: "hourListRef", first: true, predicate: ["hourListElement"], descendants: true }, { propertyName: "minuteListRef", first: true, predicate: ["minuteListElement"], descendants: true }, { propertyName: "secondListRef", first: true, predicate: ["secondListElement"], descendants: true }], ngImport: i0, template: "<div class=\"{{ prefixCls }}-content\">\n  @if (showHourColumn) {\n    <ul #hourListElement class=\"{{ prefixCls }}-time-column {{ prefixCls }}-hour-column\">\n      @for (time of hourRange; track $index; let i = $index) {\n        <li\n          class=\"{{ prefixCls }}-time-column-cell\"\n          [class.thy-time-picker-panel-time-column-cell-selected]=\"hour === time.value\"\n          (click)=\"pickHours(time, i)\">\n          <span class=\"{{ prefixCls }}-time-column-cell-inner\">{{ time.value | number: '2.0-0' }}</span>\n        </li>\n      }\n    </ul>\n  }\n  @if (showMinuteColumn) {\n    <ul #minuteListElement class=\"{{ prefixCls }}-time-column {{ prefixCls }}-minute-column\">\n      @for (time of minuteRange; track $index; let i = $index) {\n        <li\n          class=\"{{ prefixCls }}-time-column-cell\"\n          [class.thy-time-picker-panel-time-column-cell-selected]=\"minute === time.value\"\n          (click)=\"pickMinutes(time, i)\">\n          <span class=\"{{ prefixCls }}-time-column-cell-inner\">{{ time.value | number: '2.0-0' }}</span>\n        </li>\n      }\n    </ul>\n  }\n  @if (showSecondColumn) {\n    <ul #secondListElement class=\"{{ prefixCls }}-time-column {{ prefixCls }}-second-column\">\n      @for (time of secondRange; track $index; let i = $index) {\n        <li\n          class=\"{{ prefixCls }}-time-column-cell\"\n          [class.thy-time-picker-panel-time-column-cell-selected]=\"second === time.value\"\n          (click)=\"pickSeconds(time, i)\">\n          <span class=\"{{ prefixCls }}-time-column-cell-inner\">{{ time.value | number: '2.0-0' }}</span>\n        </li>\n      }\n    </ul>\n  }\n</div>\n\n@if (thyShowOperations) {\n  <div class=\"{{ prefixCls }}-bottom-operation\">\n    @if (thyShowSelectNow) {\n      <a href=\"javascript:;\" class=\"{{ prefixCls }}-time-now\" (click)=\"selectNow()\">\u6B64\u523B</a>\n    }\n    <button class=\"{{ prefixCls }}-time-confirm\" thyButton=\"primary\" thySize=\"xs\" class=\"confirm\" (click)=\"confirmPickTime()\">\u786E\u5B9A</button>\n  </div>\n}\n", dependencies: [{ kind: "component", type: ThyButton, selector: "thy-button,[thy-button],[thyButton]", inputs: ["thyButton", "thyType", "thyLoading", "thyLoadingText", "thySize", "thyIcon", "thyBlock"] }, { kind: "pipe", type: DecimalPipe, name: "number" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: ThyTimePanel, decorators: [{
             type: Component,
@@ -881,7 +878,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
                         '[class.thy-time-picker-panel-has-bottom-operation]': `thyShowOperations`,
                         '[class.thy-time-picker-panel-columns-2]': `showColumnCount === 2`,
                         '[class.thy-time-picker-panel-columns-3]': `showColumnCount === 3`
-                    }, standalone: true, imports: [NgIf, NgFor, ThyButton, DecimalPipe], template: "<div class=\"{{ prefixCls }}-content\">\n  <ul #hourListElement *ngIf=\"showHourColumn\" class=\"{{ prefixCls }}-time-column {{ prefixCls }}-hour-column\">\n    <ng-container *ngFor=\"let time of hourRange; let i = index; trackBy: trackByFn\">\n      <li\n        class=\"{{ prefixCls }}-time-column-cell\"\n        [class.thy-time-picker-panel-time-column-cell-selected]=\"hour === time.value\"\n        (click)=\"pickHours(time, i)\"\n      >\n        <span class=\"{{ prefixCls }}-time-column-cell-inner\">{{ time.value | number: '2.0-0' }}</span>\n      </li>\n    </ng-container>\n  </ul>\n  <ul #minuteListElement *ngIf=\"showMinuteColumn\" class=\"{{ prefixCls }}-time-column {{ prefixCls }}-minute-column\">\n    <ng-container *ngFor=\"let time of minuteRange; let i = index; trackBy: trackByFn\">\n      <li\n        class=\"{{ prefixCls }}-time-column-cell\"\n        [class.thy-time-picker-panel-time-column-cell-selected]=\"minute === time.value\"\n        (click)=\"pickMinutes(time, i)\"\n      >\n        <span class=\"{{ prefixCls }}-time-column-cell-inner\">{{ time.value | number: '2.0-0' }}</span>\n      </li>\n    </ng-container>\n  </ul>\n  <ul #secondListElement *ngIf=\"showSecondColumn\" class=\"{{ prefixCls }}-time-column {{ prefixCls }}-second-column\">\n    <ng-container *ngFor=\"let time of secondRange; let i = index; trackBy: trackByFn\">\n      <li\n        class=\"{{ prefixCls }}-time-column-cell\"\n        [class.thy-time-picker-panel-time-column-cell-selected]=\"second === time.value\"\n        (click)=\"pickSeconds(time, i)\"\n      >\n        <span class=\"{{ prefixCls }}-time-column-cell-inner\">{{ time.value | number: '2.0-0' }}</span>\n      </li>\n    </ng-container>\n  </ul>\n</div>\n\n<div *ngIf=\"thyShowOperations\" class=\"{{ prefixCls }}-bottom-operation\">\n  <a *ngIf=\"thyShowSelectNow\" href=\"javascript:;\" class=\"{{ prefixCls }}-time-now\" (click)=\"selectNow()\">\u6B64\u523B</a>\n  <button class=\"{{ prefixCls }}-time-confirm\" thyButton=\"primary\" thySize=\"xs\" class=\"confirm\" (click)=\"confirmPickTime()\">\u786E\u5B9A</button>\n</div>\n" }]
+                    }, standalone: true, imports: [ThyButton, DecimalPipe], template: "<div class=\"{{ prefixCls }}-content\">\n  @if (showHourColumn) {\n    <ul #hourListElement class=\"{{ prefixCls }}-time-column {{ prefixCls }}-hour-column\">\n      @for (time of hourRange; track $index; let i = $index) {\n        <li\n          class=\"{{ prefixCls }}-time-column-cell\"\n          [class.thy-time-picker-panel-time-column-cell-selected]=\"hour === time.value\"\n          (click)=\"pickHours(time, i)\">\n          <span class=\"{{ prefixCls }}-time-column-cell-inner\">{{ time.value | number: '2.0-0' }}</span>\n        </li>\n      }\n    </ul>\n  }\n  @if (showMinuteColumn) {\n    <ul #minuteListElement class=\"{{ prefixCls }}-time-column {{ prefixCls }}-minute-column\">\n      @for (time of minuteRange; track $index; let i = $index) {\n        <li\n          class=\"{{ prefixCls }}-time-column-cell\"\n          [class.thy-time-picker-panel-time-column-cell-selected]=\"minute === time.value\"\n          (click)=\"pickMinutes(time, i)\">\n          <span class=\"{{ prefixCls }}-time-column-cell-inner\">{{ time.value | number: '2.0-0' }}</span>\n        </li>\n      }\n    </ul>\n  }\n  @if (showSecondColumn) {\n    <ul #secondListElement class=\"{{ prefixCls }}-time-column {{ prefixCls }}-second-column\">\n      @for (time of secondRange; track $index; let i = $index) {\n        <li\n          class=\"{{ prefixCls }}-time-column-cell\"\n          [class.thy-time-picker-panel-time-column-cell-selected]=\"second === time.value\"\n          (click)=\"pickSeconds(time, i)\">\n          <span class=\"{{ prefixCls }}-time-column-cell-inner\">{{ time.value | number: '2.0-0' }}</span>\n        </li>\n      }\n    </ul>\n  }\n</div>\n\n@if (thyShowOperations) {\n  <div class=\"{{ prefixCls }}-bottom-operation\">\n    @if (thyShowSelectNow) {\n      <a href=\"javascript:;\" class=\"{{ prefixCls }}-time-now\" (click)=\"selectNow()\">\u6B64\u523B</a>\n    }\n    <button class=\"{{ prefixCls }}-time-confirm\" thyButton=\"primary\" thySize=\"xs\" class=\"confirm\" (click)=\"confirmPickTime()\">\u786E\u5B9A</button>\n  </div>\n}\n" }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.NgZone }], propDecorators: { hourListRef: [{
                 type: ViewChild,
                 args: ['hourListElement', { static: false }]
@@ -1193,13 +1190,13 @@ class ThyTimePicker {
         return this.disabled || this.thyReadonly;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: ThyTimePicker, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.2.0", type: ThyTimePicker, isStandalone: true, selector: "thy-time-picker", inputs: { thySize: "thySize", thyPlaceholder: "thyPlaceholder", thyPlacement: "thyPlacement", thyFormat: "thyFormat", thyHourStep: "thyHourStep", thyMinuteStep: "thyMinuteStep", thySecondStep: "thySecondStep", thyPopupClass: "thyPopupClass", thyBackdrop: ["thyBackdrop", "thyBackdrop", coerceBooleanProperty], thyDisabled: ["thyDisabled", "thyDisabled", coerceBooleanProperty], thyReadonly: ["thyReadonly", "thyReadonly", coerceBooleanProperty], thyShowSelectNow: ["thyShowSelectNow", "thyShowSelectNow", coerceBooleanProperty], thyAllowClear: ["thyAllowClear", "thyAllowClear", coerceBooleanProperty] }, outputs: { thyOpenChange: "thyOpenChange" }, host: { properties: { "class.thy-time-picker-disabled": "disabled", "class.thy-time-picker-readonly": "thyReadonly" }, classAttribute: "thy-time-picker" }, providers: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", type: ThyTimePicker, isStandalone: true, selector: "thy-time-picker", inputs: { thySize: "thySize", thyPlaceholder: "thyPlaceholder", thyPlacement: "thyPlacement", thyFormat: "thyFormat", thyHourStep: "thyHourStep", thyMinuteStep: "thyMinuteStep", thySecondStep: "thySecondStep", thyPopupClass: "thyPopupClass", thyBackdrop: ["thyBackdrop", "thyBackdrop", coerceBooleanProperty], thyDisabled: ["thyDisabled", "thyDisabled", coerceBooleanProperty], thyReadonly: ["thyReadonly", "thyReadonly", coerceBooleanProperty], thyShowSelectNow: ["thyShowSelectNow", "thyShowSelectNow", coerceBooleanProperty], thyAllowClear: ["thyAllowClear", "thyAllowClear", coerceBooleanProperty] }, outputs: { thyOpenChange: "thyOpenChange" }, host: { properties: { "class.thy-time-picker-disabled": "disabled", "class.thy-time-picker-readonly": "thyReadonly" }, classAttribute: "thy-time-picker" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 multi: true,
                 useExisting: forwardRef(() => ThyTimePicker)
             }
-        ], viewQueries: [{ propertyName: "cdkConnectedOverlay", first: true, predicate: CdkConnectedOverlay, descendants: true, static: true }, { propertyName: "origin", first: true, predicate: ["origin"], descendants: true, static: true }, { propertyName: "inputRef", first: true, predicate: ["pickerInput"], descendants: true, static: true }, { propertyName: "overlayContainer", first: true, predicate: ["overlayContainer"], descendants: true }], ngImport: i0, template: "<span cdkOverlayOrigin #origin=\"cdkOverlayOrigin\" (click)=\"onInputPickerClick()\" class=\"{{ prefixCls }}-wrapper\">\n  <ng-container>\n    <input\n      #pickerInput\n      thyInput\n      class=\"form-control {{ prefixCls }}-input\"\n      [class.thy-input-disabled]=\"disabled\"\n      [class.thy-input-readonly]=\"thyReadonly\"\n      [class.thy-time-picker-panel-opened]=\"openState\"\n      [(ngModel)]=\"showText\"\n      [thySize]=\"thySize\"\n      [disabled]=\"disabled\"\n      [readonly]=\"thyReadonly\"\n      [placeholder]=\"thyPlaceholder\"\n      (blur)=\"onInputPickerBlur()\"\n      (keyup.enter)=\"onKeyupEnter()\"\n      (keyup.escape)=\"onKeyupEsc()\"\n      (ngModelChange)=\"onCustomizeInput($event)\" />\n    <ng-container *ngTemplateOutlet=\"rightIcon\"></ng-container>\n  </ng-container>\n</span>\n\n<ng-template #rightIcon>\n  <span class=\"{{ prefixCls }}-clear\" *ngIf=\"!disabled && thyAllowClear && !thyReadonly && showText\">\n    <thy-icon thyIconName=\"close-circle-bold-fill\" (click)=\"onClearTime($event)\" ngClass=\"remove-link remove-link-{{ thySize }}\"></thy-icon>\n  </span>\n  <span class=\"{{ prefixCls }}-icon\">\n    <thy-icon [thyIconName]=\"'clock-circle-moment'\" ngClass=\"remove-link-{{ thySize }}\"></thy-icon>\n  </span>\n</ng-template>\n\n<!-- Overlay -->\n<ng-template\n  cdkConnectedOverlay\n  [cdkConnectedOverlayOrigin]=\"origin\"\n  [cdkConnectedOverlayOpen]=\"openState\"\n  [cdkConnectedOverlayHasBackdrop]=\"thyBackdrop\"\n  [cdkConnectedOverlayPositions]=\"overlayPositions\"\n  cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n  cdkConnectedOverlayTransformOriginOn=\".thy-time-picker-container\"\n  (positionChange)=\"onPositionChange($event)\"\n  (backdropClick)=\"onClickBackdrop()\"\n  (overlayOutsideClick)=\"onOutsideClick($event)\"\n  (detach)=\"onOverlayDetach()\"\n  (attach)=\"onOverlayAttach()\">\n  <div\n    #overlayContainer\n    style=\"position: relative\"\n    [@scaleXMotion]=\"thyPlacement === 'left' || thyPlacement === 'right' ? 'enter' : 'void'\"\n    [@scaleYMotion]=\"thyPlacement === 'top' || thyPlacement === 'bottom' ? 'enter' : 'void'\"\n    [@scaleMotion]=\"\n      thyPlacement !== 'left' && thyPlacement !== 'right' && thyPlacement !== 'top' && thyPlacement !== 'bottom' ? 'enter' : 'void'\n    \"\n    class=\"thy-time-picker-container\">\n    <!-- Compatible for overlay that not support offset dynamically and immediately -->\n    <thy-time-picker-panel\n      [ngClass]=\"thyPopupClass\"\n      [(ngModel)]=\"value\"\n      [thyFormat]=\"format\"\n      [thyHourStep]=\"thyHourStep\"\n      [thyMinuteStep]=\"thyMinuteStep\"\n      [thySecondStep]=\"thySecondStep\"\n      [thyShowSelectNow]=\"thyShowSelectNow\"\n      (ngModelChange)=\"onPickTimeConfirm($event)\"\n      (thyPickChange)=\"onPickTime($event)\"\n      (thyClosePanel)=\"closeOverlay()\"></thy-time-picker-panel>\n  </div>\n</ng-template>\n", dependencies: [{ kind: "directive", type: CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "directive", type: ThyInputDirective, selector: "input[thyInput], select[thyInput], textarea[thyInput]", inputs: ["thySize"], exportAs: ["thyInput"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { 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: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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: "directive", type: CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "component", type: ThyTimePanel, selector: "thy-time-picker-panel", inputs: ["thyFormat", "thyHourStep", "thyMinuteStep", "thySecondStep", "thyShowSelectNow", "thyShowOperations"], outputs: ["thyPickChange", "thyClosePanel"] }], animations: [scaleXMotion, scaleYMotion, scaleMotion], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], viewQueries: [{ propertyName: "cdkConnectedOverlay", first: true, predicate: CdkConnectedOverlay, descendants: true, static: true }, { propertyName: "origin", first: true, predicate: ["origin"], descendants: true, static: true }, { propertyName: "inputRef", first: true, predicate: ["pickerInput"], descendants: true, static: true }, { propertyName: "overlayContainer", first: true, predicate: ["overlayContainer"], descendants: true }], ngImport: i0, template: "<span cdkOverlayOrigin #origin=\"cdkOverlayOrigin\" (click)=\"onInputPickerClick()\" class=\"{{ prefixCls }}-wrapper\">\n  <ng-container>\n    <input\n      #pickerInput\n      thyInput\n      class=\"form-control {{ prefixCls }}-input\"\n      [class.thy-input-disabled]=\"disabled\"\n      [class.thy-input-readonly]=\"thyReadonly\"\n      [class.thy-time-picker-panel-opened]=\"openState\"\n      [(ngModel)]=\"showText\"\n      [thySize]=\"thySize\"\n      [disabled]=\"disabled\"\n      [readonly]=\"thyReadonly\"\n      [placeholder]=\"thyPlaceholder\"\n      (blur)=\"onInputPickerBlur()\"\n      (keyup.enter)=\"onKeyupEnter()\"\n      (keyup.escape)=\"onKeyupEsc()\"\n      (ngModelChange)=\"onCustomizeInput($event)\" />\n    <ng-container *ngTemplateOutlet=\"rightIcon\"></ng-container>\n  </ng-container>\n</span>\n\n<ng-template #rightIcon>\n  @if (!disabled && thyAllowClear && !thyReadonly && showText) {\n    <span class=\"{{ prefixCls }}-clear\">\n      <thy-icon thyIconName=\"close-circle-bold-fill\" (click)=\"onClearTime($event)\" ngClass=\"remove-link remove-link-{{ thySize }}\"></thy-icon>\n    </span>\n  }\n  <span class=\"{{ prefixCls }}-icon\">\n    <thy-icon [thyIconName]=\"'clock-circle-moment'\" ngClass=\"remove-link-{{ thySize }}\"></thy-icon>\n  </span>\n</ng-template>\n\n<!-- Overlay -->\n<ng-template\n  cdkConnectedOverlay\n  [cdkConnectedOverlayOrigin]=\"origin\"\n  [cdkConnectedOverlayOpen]=\"openState\"\n  [cdkConnectedOverlayHasBackdrop]=\"thyBackdrop\"\n  [cdkConnectedOverlayPositions]=\"overlayPositions\"\n  cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n  cdkConnectedOverlayTransformOriginOn=\".thy-time-picker-container\"\n  (positionChange)=\"onPositionChange($event)\"\n  (backdropClick)=\"onClickBackdrop()\"\n  (overlayOutsideClick)=\"onOutsideClick($event)\"\n  (detach)=\"onOverlayDetach()\"\n  (attach)=\"onOverlayAttach()\">\n  <div\n    #overlayContainer\n    style=\"position: relative\"\n    [@scaleXMotion]=\"thyPlacement === 'left' || thyPlacement === 'right' ? 'enter' : 'void'\"\n    [@scaleYMotion]=\"thyPlacement === 'top' || thyPlacement === 'bottom' ? 'enter' : 'void'\"\n    [@scaleMotion]=\"\n      thyPlacement !== 'left' && thyPlacement !== 'right' && thyPlacement !== 'top' && thyPlacement !== 'bottom' ? 'enter' : 'void'\n    \"\n    class=\"thy-time-picker-container\">\n    <!-- Compatible for overlay that not support offset dynamically and immediately -->\n    <thy-time-picker-panel\n      [ngClass]=\"thyPopupClass\"\n      [(ngModel)]=\"value\"\n      [thyFormat]=\"format\"\n      [thyHourStep]=\"thyHourStep\"\n      [thyMinuteStep]=\"thyMinuteStep\"\n      [thySecondStep]=\"thySecondStep\"\n      [thyShowSelectNow]=\"thyShowSelectNow\"\n      (ngModelChange)=\"onPickTimeConfirm($event)\"\n      (thyPickChange)=\"onPickTime($event)\"\n    (thyClosePanel)=\"closeOverlay()\"></thy-time-picker-panel>\n  </div>\n</ng-template>\n", dependencies: [{ kind: "directive", type: CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "directive", type: ThyInputDirective, selector: "input[thyInput], select[thyInput], textarea[thyInput]", inputs: ["thySize"], exportAs: ["thyInput"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { 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: "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"] }, { kind: "directive", type: CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "component", type: ThyTimePanel, selector: "thy-time-picker-panel", inputs: ["thyFormat", "thyHourStep", "thyMinuteStep", "thySecondStep", "thyShowSelectNow", "thyShowOperations"], outputs: ["thyPickChange", "thyClosePanel"] }], animations: [scaleXMotion, scaleYMotion, scaleMotion], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: ThyTimePicker, decorators: [{
             type: Component,
@@ -1213,17 +1210,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
                         class: 'thy-time-picker',
                         '[class.thy-time-picker-disabled]': `disabled`,
                         '[class.thy-time-picker-readonly]': `thyReadonly`
-                    }, standalone: true, imports: [
-                        CdkOverlayOrigin,
-                        ThyInputDirective,
-                        FormsModule,
-                        NgTemplateOutlet,
-                        NgIf,
-                        ThyIcon,
-                        NgClass,
-                        CdkConnectedOverlay,
-                        ThyTimePanel
-                    ], animations: [scaleXMotion, scaleYMotion, scaleMotion], template: "<span cdkOverlayOrigin #origin=\"cdkOverlayOrigin\" (click)=\"onInputPickerClick()\" class=\"{{ prefixCls }}-wrapper\">\n  <ng-container>\n    <input\n      #pickerInput\n      thyInput\n      class=\"form-control {{ prefixCls }}-input\"\n      [class.thy-input-disabled]=\"disabled\"\n      [class.thy-input-readonly]=\"thyReadonly\"\n      [class.thy-time-picker-panel-opened]=\"openState\"\n      [(ngModel)]=\"showText\"\n      [thySize]=\"thySize\"\n      [disabled]=\"disabled\"\n      [readonly]=\"thyReadonly\"\n      [placeholder]=\"thyPlaceholder\"\n      (blur)=\"onInputPickerBlur()\"\n      (keyup.enter)=\"onKeyupEnter()\"\n      (keyup.escape)=\"onKeyupEsc()\"\n      (ngModelChange)=\"onCustomizeInput($event)\" />\n    <ng-container *ngTemplateOutlet=\"rightIcon\"></ng-container>\n  </ng-container>\n</span>\n\n<ng-template #rightIcon>\n  <span class=\"{{ prefixCls }}-clear\" *ngIf=\"!disabled && thyAllowClear && !thyReadonly && showText\">\n    <thy-icon thyIconName=\"close-circle-bold-fill\" (click)=\"onClearTime($event)\" ngClass=\"remove-link remove-link-{{ thySize }}\"></thy-icon>\n  </span>\n  <span class=\"{{ prefixCls }}-icon\">\n    <thy-icon [thyIconName]=\"'clock-circle-moment'\" ngClass=\"remove-link-{{ thySize }}\"></thy-icon>\n  </span>\n</ng-template>\n\n<!-- Overlay -->\n<ng-template\n  cdkConnectedOverlay\n  [cdkConnectedOverlayOrigin]=\"origin\"\n  [cdkConnectedOverlayOpen]=\"openState\"\n  [cdkConnectedOverlayHasBackdrop]=\"thyBackdrop\"\n  [cdkConnectedOverlayPositions]=\"overlayPositions\"\n  cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n  cdkConnectedOverlayTransformOriginOn=\".thy-time-picker-container\"\n  (positionChange)=\"onPositionChange($event)\"\n  (backdropClick)=\"onClickBackdrop()\"\n  (overlayOutsideClick)=\"onOutsideClick($event)\"\n  (detach)=\"onOverlayDetach()\"\n  (attach)=\"onOverlayAttach()\">\n  <div\n    #overlayContainer\n    style=\"position: relative\"\n    [@scaleXMotion]=\"thyPlacement === 'left' || thyPlacement === 'right' ? 'enter' : 'void'\"\n    [@scaleYMotion]=\"thyPlacement === 'top' || thyPlacement === 'bottom' ? 'enter' : 'void'\"\n    [@scaleMotion]=\"\n      thyPlacement !== 'left' && thyPlacement !== 'right' && thyPlacement !== 'top' && thyPlacement !== 'bottom' ? 'enter' : 'void'\n    \"\n    class=\"thy-time-picker-container\">\n    <!-- Compatible for overlay that not support offset dynamically and immediately -->\n    <thy-time-picker-panel\n      [ngClass]=\"thyPopupClass\"\n      [(ngModel)]=\"value\"\n      [thyFormat]=\"format\"\n      [thyHourStep]=\"thyHourStep\"\n      [thyMinuteStep]=\"thyMinuteStep\"\n      [thySecondStep]=\"thySecondStep\"\n      [thyShowSelectNow]=\"thyShowSelectNow\"\n      (ngModelChange)=\"onPickTimeConfirm($event)\"\n      (thyPickChange)=\"onPickTime($event)\"\n      (thyClosePanel)=\"closeOverlay()\"></thy-time-picker-panel>\n  </div>\n</ng-template>\n" }]
+                    }, standalone: true, imports: [CdkOverlayOrigin, ThyInputDirective, FormsModule, NgTemplateOutlet, ThyIcon, NgClass, CdkConnectedOverlay, ThyTimePanel], animations: [scaleXMotion, scaleYMotion, scaleMotion], template: "<span cdkOverlayOrigin #origin=\"cdkOverlayOrigin\" (click)=\"onInputPickerClick()\" class=\"{{ prefixCls }}-wrapper\">\n  <ng-container>\n    <input\n      #pickerInput\n      thyInput\n      class=\"form-control {{ prefixCls }}-input\"\n      [class.thy-input-disabled]=\"disabled\"\n      [class.thy-input-readonly]=\"thyReadonly\"\n      [class.thy-time-picker-panel-opened]=\"openState\"\n      [(ngModel)]=\"showText\"\n      [thySize]=\"thySize\"\n      [disabled]=\"disabled\"\n      [readonly]=\"thyReadonly\"\n      [placeholder]=\"thyPlaceholder\"\n      (blur)=\"onInputPickerBlur()\"\n      (keyup.enter)=\"onKeyupEnter()\"\n      (keyup.escape)=\"onKeyupEsc()\"\n      (ngModelChange)=\"onCustomizeInput($event)\" />\n    <ng-container *ngTemplateOutlet=\"rightIcon\"></ng-container>\n  </ng-container>\n</span>\n\n<ng-template #rightIcon>\n  @if (!disabled && thyAllowClear && !thyReadonly && showText) {\n    <span class=\"{{ prefixCls }}-clear\">\n      <thy-icon thyIconName=\"close-circle-bold-fill\" (click)=\"onClearTime($event)\" ngClass=\"remove-link remove-link-{{ thySize }}\"></thy-icon>\n    </span>\n  }\n  <span class=\"{{ prefixCls }}-icon\">\n    <thy-icon [thyIconName]=\"'clock-circle-moment'\" ngClass=\"remove-link-{{ thySize }}\"></thy-icon>\n  </span>\n</ng-template>\n\n<!-- Overlay -->\n<ng-template\n  cdkConnectedOverlay\n  [cdkConnectedOverlayOrigin]=\"origin\"\n  [cdkConnectedOverlayOpen]=\"openState\"\n  [cdkConnectedOverlayHasBackdrop]=\"thyBackdrop\"\n  [cdkConnectedOverlayPositions]=\"overlayPositions\"\n  cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n  cdkConnectedOverlayTransformOriginOn=\".thy-time-picker-container\"\n  (positionChange)=\"onPositionChange($event)\"\n  (backdropClick)=\"onClickBackdrop()\"\n  (overlayOutsideClick)=\"onOutsideClick($event)\"\n  (detach)=\"onOverlayDetach()\"\n  (attach)=\"onOverlayAttach()\">\n  <div\n    #overlayContainer\n    style=\"position: relative\"\n    [@scaleXMotion]=\"thyPlacement === 'left' || thyPlacement === 'right' ? 'enter' : 'void'\"\n    [@scaleYMotion]=\"thyPlacement === 'top' || thyPlacement === 'bottom' ? 'enter' : 'void'\"\n    [@scaleMotion]=\"\n      thyPlacement !== 'left' && thyPlacement !== 'right' && thyPlacement !== 'top' && thyPlacement !== 'bottom' ? 'enter' : 'void'\n    \"\n    class=\"thy-time-picker-container\">\n    <!-- Compatible for overlay that not support offset dynamically and immediately -->\n    <thy-time-picker-panel\n      [ngClass]=\"thyPopupClass\"\n      [(ngModel)]=\"value\"\n      [thyFormat]=\"format\"\n      [thyHourStep]=\"thyHourStep\"\n      [thyMinuteStep]=\"thyMinuteStep\"\n      [thySecondStep]=\"thySecondStep\"\n      [thyShowSelectNow]=\"thyShowSelectNow\"\n      (ngModelChange)=\"onPickTimeConfirm($event)\"\n      (thyPickChange)=\"onPickTime($event)\"\n    (thyClosePanel)=\"closeOverlay()\"></thy-time-picker-panel>\n  </div>\n</ng-template>\n" }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }], propDecorators: { cdkConnectedOverlay: [{
                 type: ViewChild,
                 args: [CdkConnectedOverlay, { static: true }]