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

package/fesm2022/ngx-tethys-copy.mjs

@@ -44,8 +44,8 @@ class ThyCopyDirective {
     }
     ngOnInit() {
         const thyCopyTips = this.thyCopyTips();
-        this.tooltipDirective.content = thyCopyTips ? thyCopyTips : this.locale().tips;
-        this.tooltipDirective.tooltipOffset = this.thyCopyTipsOffset();
+        this.tooltipDirective.setContent(thyCopyTips ? thyCopyTips : this.locale().tips);
+        this.tooltipDirective.setOffset(this.thyCopyTipsOffset());
     }
     getContent(event) {
         const thyCopyContent = this.thyCopyContent();

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

@@ -1 +1 @@
-{"version":3,"file":"ngx-tethys-copy.mjs","sources":["../../../src/copy/copy.directive.ts","../../../src/copy/module.ts","../../../src/copy/ngx-tethys-copy.ts"],"sourcesContent":["import { Directive, ElementRef, HostListener, OnDestroy, OnInit, Signal, inject, input, output } from '@angular/core';\nimport { DOCUMENT } from '@angular/common';\nimport { coerceElement } from '@angular/cdk/coercion';\nimport { ThyNotifyService } from 'ngx-tethys/notify';\nimport { ThyTooltipDirective } from 'ngx-tethys/tooltip';\nimport { coerceBooleanProperty } from 'ngx-tethys/util';\nimport { injectLocale, ThyCopyLocale } from 'ngx-tethys/i18n';\n\nexport interface ThyCopyEvent {\n    isSuccess: boolean;\n    event: Event;\n}\n\n/**\n * @name thyCopy\n */\n@Directive({\n    selector: '[thyCopy]',\n    hostDirectives: [ThyTooltipDirective]\n})\nexport class ThyCopyDirective implements OnInit, OnDestroy {\n    private document = inject(DOCUMENT);\n    tooltipDirective = inject(ThyTooltipDirective);\n    private notifyService = inject(ThyNotifyService);\n    private locale: Signal<ThyCopyLocale> = injectLocale('copy');\n\n    /**\n     * 默认为点击标签，可传复制目标标签\n     */\n    readonly thyCopy = output<ThyCopyEvent>();\n\n    /**\n     * 复制成功时的文案\n     */\n    readonly thyCopySuccessText = input<string>(this.locale().success);\n\n    /**\n     * 提示文案\n     */\n    readonly thyCopyTips = input<string>(this.locale().tips);\n\n    /**\n     * 偏移量\n     */\n    readonly thyCopyTipsOffset = input<number>(undefined);\n\n    /**\n     * 当为 string 时，复制的是传入的内容；当为 ElementRef | HTMLElement 时，复制的是 dom 节点的 value 或者 textContent\n     */\n    readonly thyCopyContent = input<string | ElementRef | HTMLElement>(undefined);\n\n    /**\n     * 是否展示通知\n     */\n    readonly thyShowNotify = input(true, { transform: coerceBooleanProperty });\n\n    ngOnInit() {\n        const thyCopyTips = this.thyCopyTips();\n        this.tooltipDirective.content = thyCopyTips ? thyCopyTips : this.locale().tips;\n        this.tooltipDirective.tooltipOffset = this.thyCopyTipsOffset();\n    }\n\n    private getContent(event: Event) {\n        const thyCopyContent = this.thyCopyContent();\n        if (typeof thyCopyContent === 'string') {\n            return thyCopyContent;\n        } else {\n            const target = thyCopyContent ? coerceElement(thyCopyContent) : event.target;\n            return target.value || target.textContent;\n        }\n    }\n\n    @HostListener('click', ['$event'])\n    public onClick(event: Event) {\n        const textarea = this.document.createElement('textarea');\n        this.document.body.appendChild(textarea);\n        textarea.value = this.getContent(event);\n        textarea.select();\n        try {\n            document.execCommand('copy', false, null);\n            this.thyCopy.emit({ isSuccess: true, event });\n            if (this.thyShowNotify()) {\n                this.notifyService.success(this.thyCopySuccessText());\n            }\n        } catch (err) {\n            this.thyCopy.emit({ isSuccess: false, event });\n            if (this.thyShowNotify()) {\n                this.notifyService.error(this.locale().error);\n            }\n        } finally {\n            textarea.remove();\n        }\n    }\n\n    ngOnDestroy() {\n        this.tooltipDirective.hide();\n    }\n}\n","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { ThyCopyDirective } from './copy.directive';\nimport { ThyNotifyModule } from 'ngx-tethys/notify';\n\n@NgModule({\n    imports: [CommonModule, ThyNotifyModule, ThyCopyDirective],\n    exports: [ThyCopyDirective]\n})\nexport class ThyCopyModule {}\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-copy.mjs","sources":["../../../src/copy/copy.directive.ts","../../../src/copy/module.ts","../../../src/copy/ngx-tethys-copy.ts"],"sourcesContent":["import { Directive, ElementRef, HostListener, OnDestroy, OnInit, Signal, inject, input, output } from '@angular/core';\nimport { DOCUMENT } from '@angular/common';\nimport { coerceElement } from '@angular/cdk/coercion';\nimport { ThyNotifyService } from 'ngx-tethys/notify';\nimport { ThyTooltipDirective } from 'ngx-tethys/tooltip';\nimport { coerceBooleanProperty } from 'ngx-tethys/util';\nimport { injectLocale, ThyCopyLocale } from 'ngx-tethys/i18n';\n\nexport interface ThyCopyEvent {\n    isSuccess: boolean;\n    event: Event;\n}\n\n/**\n * @name thyCopy\n */\n@Directive({\n    selector: '[thyCopy]',\n    hostDirectives: [ThyTooltipDirective]\n})\nexport class ThyCopyDirective implements OnInit, OnDestroy {\n    private document = inject(DOCUMENT);\n    tooltipDirective = inject(ThyTooltipDirective);\n    private notifyService = inject(ThyNotifyService);\n    private locale: Signal<ThyCopyLocale> = injectLocale('copy');\n\n    /**\n     * 默认为点击标签，可传复制目标标签\n     */\n    readonly thyCopy = output<ThyCopyEvent>();\n\n    /**\n     * 复制成功时的文案\n     */\n    readonly thyCopySuccessText = input<string>(this.locale().success);\n\n    /**\n     * 提示文案\n     */\n    readonly thyCopyTips = input<string>(this.locale().tips);\n\n    /**\n     * 偏移量\n     */\n    readonly thyCopyTipsOffset = input<number>(undefined);\n\n    /**\n     * 当为 string 时，复制的是传入的内容；当为 ElementRef | HTMLElement 时，复制的是 dom 节点的 value 或者 textContent\n     */\n    readonly thyCopyContent = input<string | ElementRef | HTMLElement>(undefined);\n\n    /**\n     * 是否展示通知\n     */\n    readonly thyShowNotify = input(true, { transform: coerceBooleanProperty });\n\n    ngOnInit() {\n        const thyCopyTips = this.thyCopyTips();\n        this.tooltipDirective.setContent(thyCopyTips ? thyCopyTips : this.locale().tips);\n        this.tooltipDirective.setOffset(this.thyCopyTipsOffset());\n    }\n\n    private getContent(event: Event) {\n        const thyCopyContent = this.thyCopyContent();\n        if (typeof thyCopyContent === 'string') {\n            return thyCopyContent;\n        } else {\n            const target = thyCopyContent ? coerceElement(thyCopyContent) : event.target;\n            return target.value || target.textContent;\n        }\n    }\n\n    @HostListener('click', ['$event'])\n    public onClick(event: Event) {\n        const textarea = this.document.createElement('textarea');\n        this.document.body.appendChild(textarea);\n        textarea.value = this.getContent(event);\n        textarea.select();\n        try {\n            document.execCommand('copy', false, null);\n            this.thyCopy.emit({ isSuccess: true, event });\n            if (this.thyShowNotify()) {\n                this.notifyService.success(this.thyCopySuccessText());\n            }\n        } catch (err) {\n            this.thyCopy.emit({ isSuccess: false, event });\n            if (this.thyShowNotify()) {\n                this.notifyService.error(this.locale().error);\n            }\n        } finally {\n            textarea.remove();\n        }\n    }\n\n    ngOnDestroy() {\n        this.tooltipDirective.hide();\n    }\n}\n","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { ThyCopyDirective } from './copy.directive';\nimport { ThyNotifyModule } from 'ngx-tethys/notify';\n\n@NgModule({\n    imports: [CommonModule, ThyNotifyModule, ThyCopyDirective],\n    exports: [ThyCopyDirective]\n})\nexport class ThyCopyModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

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

@@ -1,7 +1,7 @@
 import { CdkConnectedOverlay, CdkOverlayOrigin, OverlayModule } from '@angular/cdk/overlay';
 import { formatDate, NgClass, NgTemplateOutlet, CommonModule, isPlatformBrowser, registerLocaleData } from '@angular/common';
 import * as i0 from '@angular/core';
-import { Injectable, inject, input, model, output, effect, Directive, ChangeDetectionStrategy, Component, signal, InjectionToken, Pipe, ChangeDetectorRef, forwardRef, computed, NgModule, viewChild, DestroyRef, Input, ElementRef, PLATFORM_ID, NgZone, numberAttribute } from '@angular/core';
+import { Injectable, inject, input, model, output, effect, Directive, ChangeDetectionStrategy, Component, signal, InjectionToken, Pipe, ChangeDetectorRef, forwardRef, computed, NgModule, viewChild, DestroyRef, linkedSignal, Input, ElementRef, PLATFORM_ID, NgZone, numberAttribute } from '@angular/core';
 import localeZhHans from '@angular/common/locales/zh-Hans';
 import { coerceBooleanProperty, TinyDate, subDays, startOfDay, startOfWeek, addDays, addWeeks, helpers, coerceArray, isTemplateRef, isEmpty, isString, isFunction, isUndefinedOrNull, valueFunctionProp, endOfDay, sortRangeValue, elementMatchClosest, warnDeprecation } from 'ngx-tethys/util';
 import { injectLocale, ThyI18nService } from 'ngx-tethys/i18n';
@@ -2563,7 +2563,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImpor
 class ThyPicker {
     get realOpenState() {
         // The value that really decide the open state of overlay
-        return this.isOpenHandledByUser() ? !!this.open() : this.overlayOpen;
+        return this.isOpenHandledByUser() ? !!this.opened() : this.overlayOpen;
     }
     get readonlyState() {
         return this.isRange() || this.readonly() || this.mode() !== 'date';
@@ -2573,7 +2573,7 @@ class ThyPicker {
         this.dateHelper = inject(DateHelperService);
         this.i18n = inject(ThyI18nService);
         this.isRange = input(false, { transform: coerceBooleanProperty });
-        this.open = input(undefined);
+        this.opened = input(undefined);
         this.disabled = input(false, { transform: coerceBooleanProperty });
         this.placeholder = input();
         this.readonly = input(false, { transform: coerceBooleanProperty });
@@ -2629,17 +2629,17 @@ class ThyPicker {
                 this.formatDate(this.innerValue);
             }
         });
-    }
-    ngOnChanges(changes) {
-        // open by user
-        if (changes.open && changes.open.currentValue !== undefined) {
-            if (changes.open.currentValue) {
-                this.showDatePopup();
-            }
-            else {
-                this.closeDatePopup();
+        effect(() => {
+            const openedState = this.opened();
+            if (openedState != undefined) {
+                if (openedState) {
+                    this.showDatePopup();
+                }
+                else {
+                    this.closeDatePopup();
+                }
             }
-        }
+        });
     }
     ngAfterViewInit() {
         this.overlayPositions = getFlexiblePositions(this.placement(), 4);
@@ -2736,7 +2736,7 @@ class ThyPicker {
     }
     // Whether open state is permanently controlled by user himself
     isOpenHandledByUser() {
-        return this.open() !== undefined;
+        return this.opened() !== undefined;
     }
     getReadableValue(tinyDate) {
         let value;
@@ -2778,7 +2778,7 @@ class ThyPicker {
         this.pickerInput().nativeElement.value = readableValue;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ThyPicker, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.8", type: ThyPicker, isStandalone: true, selector: "thy-picker", inputs: { isRange: { classPropertyName: "isRange", publicName: "isRange", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, allowClear: { classPropertyName: "allowClear", publicName: "allowClear", isSignal: true, isRequired: false, transformFunction: null }, autoFocus: { classPropertyName: "autoFocus", publicName: "autoFocus", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, suffixIcon: { classPropertyName: "suffixIcon", publicName: "suffixIcon", isSignal: true, isRequired: false, transformFunction: null }, placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null }, flexible: { classPropertyName: "flexible", publicName: "flexible", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, hasBackdrop: { classPropertyName: "hasBackdrop", publicName: "hasBackdrop", isSignal: true, isRequired: false, transformFunction: null }, separator: { classPropertyName: "separator", publicName: "separator", isSignal: true, isRequired: false, transformFunction: null }, timeZone: { classPropertyName: "timeZone", publicName: "timeZone", isSignal: true, isRequired: false, transformFunction: null }, format: { classPropertyName: "format", publicName: "format", isSignal: true, isRequired: false, transformFunction: null }, flexibleDateGranularity: { classPropertyName: "flexibleDateGranularity", publicName: "flexibleDateGranularity", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { blur: "blur", valueChange: "valueChange", openChange: "openChange", inputChange: "inputChange" }, viewQueries: [{ propertyName: "origin", first: true, predicate: ["origin"], descendants: true, isSignal: true }, { propertyName: "cdkConnectedOverlay", first: true, predicate: CdkConnectedOverlay, descendants: true, isSignal: true }, { propertyName: "pickerInput", first: true, predicate: ["pickerInput"], descendants: true, isSignal: true }, { propertyName: "overlayContainer", first: true, predicate: ["overlayContainer"], descendants: true, isSignal: true }], exportAs: ["thyPicker"], usesOnChanges: true, ngImport: i0, template: "<span\n  cdkOverlayOrigin\n  #origin=\"cdkOverlayOrigin\"\n  class=\"{{ prefixCls }}-picker {{ size() ? prefixCls + '-picker-' + size() : '' }} {{ className() }}\"\n  (click)=\"onClickInputBox()\">\n  <ng-container>\n    <input\n      #pickerInput\n      thyInput\n      class=\"form-control-{{ size() }} form-control {{ prefixCls }}-picker-input\"\n      [ngClass]=\"{ 'panel-is-opened': realOpenState }\"\n      [thySize]=\"size()\"\n      [tabindex]=\"-1\"\n      [class.thy-input-disabled]=\"disabled()\"\n      [class.thy-input-readonly]=\"readonly()\"\n      [disabled]=\"disabled()\"\n      [readonly]=\"readonlyState\"\n      (blur)=\"onBlur($event)\"\n      (input)=\"onInput($event)\"\n      placeholder=\"{{ getPlaceholder() }}\"\n      thyEnter\n      (thyEnter)=\"onEnter()\" />\n    <ng-container *ngTemplateOutlet=\"tplRightRest\"></ng-container>\n  </ng-container>\n</span>\n\n<!-- Right operator icons -->\n<ng-template #tplRightRest>\n  <span class=\"{{ prefixCls }}-picker-clear\">\n    @if (!disabled() && !isEmptyValue(value()) && allowClear() && !readonly()) {\n      <thy-icon\n        thyIconName=\"close-circle-bold-fill\"\n        (click)=\"onClickClear($event)\"\n        ngClass=\"remove-link remove-link-{{ size() }}\"></thy-icon>\n    }\n  </span>\n  <span class=\"{{ prefixCls }}-picker-icon\">\n    <thy-icon [thyIconName]=\"suffixIcon()\" ngClass=\"remove-link-{{ size() ? size() : 'default' }}\"></thy-icon>\n  </span>\n</ng-template>\n\n<!-- Overlay -->\n<ng-template\n  cdkConnectedOverlay\n  [cdkConnectedOverlayOrigin]=\"origin\"\n  [cdkConnectedOverlayOpen]=\"realOpenState\"\n  [cdkConnectedOverlayHasBackdrop]=\"hasBackdrop()\"\n  [cdkConnectedOverlayPositions]=\"overlayPositions\"\n  cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n  cdkConnectedOverlayTransformOriginOn=\".thy-picker-container\"\n  (positionChange)=\"onPositionChange($event)\"\n  (backdropClick)=\"onClickBackdrop()\"\n  (detach)=\"onOverlayDetach()\">\n  <div\n    #overlayContainer\n    style=\"position: relative\"\n    class=\"thy-picker-container\"\n    [@scaleXMotion]=\"placement() === 'left' || placement() === 'right' ? 'enter' : 'void'\"\n    [@scaleYMotion]=\"placement() === 'top' || placement() === 'bottom' ? 'enter' : 'void'\"\n    [@scaleMotion]=\"\n      placement() !== 'left' && placement() !== 'right' && placement() !== 'top' && placement() !== 'bottom' ? 'enter' : 'void'\n    \">\n    <!-- Compatible for overlay that not support offset dynamically and immediately -->\n    <ng-content></ng-content>\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: "directive", type: ThyEnterDirective, selector: "[thyEnter]", outputs: ["thyEnter"] }, { 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"] }], animations: [scaleXMotion, scaleYMotion, scaleMotion], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.8", type: ThyPicker, isStandalone: true, selector: "thy-picker", inputs: { isRange: { classPropertyName: "isRange", publicName: "isRange", isSignal: true, isRequired: false, transformFunction: null }, opened: { classPropertyName: "opened", publicName: "opened", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, allowClear: { classPropertyName: "allowClear", publicName: "allowClear", isSignal: true, isRequired: false, transformFunction: null }, autoFocus: { classPropertyName: "autoFocus", publicName: "autoFocus", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, suffixIcon: { classPropertyName: "suffixIcon", publicName: "suffixIcon", isSignal: true, isRequired: false, transformFunction: null }, placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null }, flexible: { classPropertyName: "flexible", publicName: "flexible", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, hasBackdrop: { classPropertyName: "hasBackdrop", publicName: "hasBackdrop", isSignal: true, isRequired: false, transformFunction: null }, separator: { classPropertyName: "separator", publicName: "separator", isSignal: true, isRequired: false, transformFunction: null }, timeZone: { classPropertyName: "timeZone", publicName: "timeZone", isSignal: true, isRequired: false, transformFunction: null }, format: { classPropertyName: "format", publicName: "format", isSignal: true, isRequired: false, transformFunction: null }, flexibleDateGranularity: { classPropertyName: "flexibleDateGranularity", publicName: "flexibleDateGranularity", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { blur: "blur", valueChange: "valueChange", openChange: "openChange", inputChange: "inputChange" }, viewQueries: [{ propertyName: "origin", first: true, predicate: ["origin"], descendants: true, isSignal: true }, { propertyName: "cdkConnectedOverlay", first: true, predicate: CdkConnectedOverlay, descendants: true, isSignal: true }, { propertyName: "pickerInput", first: true, predicate: ["pickerInput"], descendants: true, isSignal: true }, { propertyName: "overlayContainer", first: true, predicate: ["overlayContainer"], descendants: true, isSignal: true }], exportAs: ["thyPicker"], ngImport: i0, template: "<span\n  cdkOverlayOrigin\n  #origin=\"cdkOverlayOrigin\"\n  class=\"{{ prefixCls }}-picker {{ size() ? prefixCls + '-picker-' + size() : '' }} {{ className() }}\"\n  (click)=\"onClickInputBox()\">\n  <ng-container>\n    <input\n      #pickerInput\n      thyInput\n      class=\"form-control-{{ size() }} form-control {{ prefixCls }}-picker-input\"\n      [ngClass]=\"{ 'panel-is-opened': realOpenState }\"\n      [thySize]=\"size()\"\n      [tabindex]=\"-1\"\n      [class.thy-input-disabled]=\"disabled()\"\n      [class.thy-input-readonly]=\"readonly()\"\n      [disabled]=\"disabled()\"\n      [readonly]=\"readonlyState\"\n      (blur)=\"onBlur($event)\"\n      (input)=\"onInput($event)\"\n      placeholder=\"{{ getPlaceholder() }}\"\n      thyEnter\n      (thyEnter)=\"onEnter()\" />\n    <ng-container *ngTemplateOutlet=\"tplRightRest\"></ng-container>\n  </ng-container>\n</span>\n\n<!-- Right operator icons -->\n<ng-template #tplRightRest>\n  <span class=\"{{ prefixCls }}-picker-clear\">\n    @if (!disabled() && !isEmptyValue(value()) && allowClear() && !readonly()) {\n      <thy-icon\n        thyIconName=\"close-circle-bold-fill\"\n        (click)=\"onClickClear($event)\"\n        ngClass=\"remove-link remove-link-{{ size() }}\"></thy-icon>\n    }\n  </span>\n  <span class=\"{{ prefixCls }}-picker-icon\">\n    <thy-icon [thyIconName]=\"suffixIcon()\" ngClass=\"remove-link-{{ size() ? size() : 'default' }}\"></thy-icon>\n  </span>\n</ng-template>\n\n<!-- Overlay -->\n<ng-template\n  cdkConnectedOverlay\n  [cdkConnectedOverlayOrigin]=\"origin\"\n  [cdkConnectedOverlayOpen]=\"realOpenState\"\n  [cdkConnectedOverlayHasBackdrop]=\"hasBackdrop()\"\n  [cdkConnectedOverlayPositions]=\"overlayPositions\"\n  cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n  cdkConnectedOverlayTransformOriginOn=\".thy-picker-container\"\n  (positionChange)=\"onPositionChange($event)\"\n  (backdropClick)=\"onClickBackdrop()\"\n  (detach)=\"onOverlayDetach()\">\n  <div\n    #overlayContainer\n    style=\"position: relative\"\n    class=\"thy-picker-container\"\n    [@scaleXMotion]=\"placement() === 'left' || placement() === 'right' ? 'enter' : 'void'\"\n    [@scaleYMotion]=\"placement() === 'top' || placement() === 'bottom' ? 'enter' : 'void'\"\n    [@scaleMotion]=\"\n      placement() !== 'left' && placement() !== 'right' && placement() !== 'top' && placement() !== 'bottom' ? 'enter' : 'void'\n    \">\n    <!-- Compatible for overlay that not support offset dynamically and immediately -->\n    <ng-content></ng-content>\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: "directive", type: ThyEnterDirective, selector: "[thyEnter]", outputs: ["thyEnter"] }, { 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"] }], animations: [scaleXMotion, scaleYMotion, scaleMotion], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ThyPicker, decorators: [{
             type: Component,
@@ -2833,8 +2833,8 @@ class AbstractPickerComponent extends TabIndexDisabledControlValueAccessorMixin
          * 是否自动获取焦点
          */
         this.thyAutoFocus = input(false, { transform: coerceBooleanProperty });
-        this.open = signal(undefined);
         this.thyOpen = input(undefined, { transform: coerceBooleanProperty });
+        this.opened = linkedSignal(this.thyOpen);
         this.thyDisabledDate = input();
         /**
          * 最小值
@@ -2938,9 +2938,6 @@ class AbstractPickerComponent extends TabIndexDisabledControlValueAccessorMixin
         this.isCustomPlaceHolder = false;
         this.onlyEmitDate = false;
         this.onChangeFn = () => void 0;
-        effect(() => {
-            this.open.set(this.thyOpen());
-        });
         effect(() => {
             if (this.isCustomPlaceHolder) {
                 this.placeholder.set(this.thyPlaceHolder());
@@ -3035,7 +3032,7 @@ class AbstractPickerComponent extends TabIndexDisabledControlValueAccessorMixin
         }
     }
     onOpenChange(open) {
-        this.open.set(open);
+        this.opened.set(open);
         this.thyOpenChange.emit(open);
     }
     writeValue(originalValue) {
@@ -3139,6 +3136,9 @@ class BasePicker extends AbstractPickerComponent {
     get thyMode() {
         return this._panelMode;
     }
+    open() {
+        this.opened.set(true);
+    }
     ngOnInit() {
         super.ngOnInit();
         this.setPanelMode();
@@ -3308,7 +3308,7 @@ class ThyDatePicker extends BasePicker {
                 multi: true,
                 useExisting: forwardRef(() => ThyDatePicker)
             }
-        ], exportAs: ["thyDatePicker"], usesInheritance: true, ngImport: i0, template: "<thy-picker\n  #thyPicker\n  [isRange]=\"isRange\"\n  [value]=\"thyValue\"\n  [flexible]=\"flexible()\"\n  [flexibleDateGranularity]=\"flexibleDateGranularity\"\n  (valueChange)=\"onInputValueChange($event)\"\n  [open]=\"open()\"\n  [disabled]=\"thyDisabled\"\n  [format]=\"thyFormat()\"\n  [separator]=\"separator()\"\n  [mode]=\"thyMode\"\n  [allowClear]=\"thyAllowClear()\"\n  [className]=\"thyOriginClassName()\"\n  [autoFocus]=\"thyAutoFocus()\"\n  [placeholder]=\"placeholder()\"\n  [readonly]=\"thyReadonly()\"\n  [size]=\"thySize()\"\n  [timeZone]=\"thyTimeZone()\"\n  [suffixIcon]=\"thySuffixIcon()\"\n  [placement]=\"thyPlacement()\"\n  [hasBackdrop]=\"thyHasBackdrop()\"\n  (openChange)=\"onOpenChange($event)\"\n  (blur)=\"onBlur($event)\"\n  (inputChange)=\"onInputDate($event)\">\n  @if (isShowDatePopup) {\n    <date-popup\n      [attr.tabindex]=\"-1\"\n      [isRange]=\"isRange\"\n      [showWeek]=\"showWeek()\"\n      [panelMode]=\"panelMode\"\n      [flexible]=\"flexible()\"\n      [flexibleDateGranularity]=\"flexibleDateGranularity\"\n      [defaultPickerValue]=\"thyDefaultPickerValue()\"\n      (panelModeChange)=\"thyOnPanelChange.emit($event)\"\n      (showTimePickerChange)=\"onShowTimePickerChange($event)\"\n      [value]=\"thyValue\"\n      (valueChange)=\"onValueChange($event)\"\n      (calendarChange)=\"onCalendarChange($event)\"\n      [showTime]=\"thyShowTime()\"\n      [mustShowTime]=\"withTime\"\n      [format]=\"thyFormat()\"\n      [dateRender]=\"thyDateRender()\"\n      [disabledDate]=\"thyDisabledDate()\"\n      [minDate]=\"thyMinDate()\"\n      [maxDate]=\"thyMaxDate()\"\n      [showShortcut]=\"thyShowShortcut()\"\n      [shortcutPresets]=\"thyShortcutPresets()\"\n      [shortcutPosition]=\"thyShortcutPosition()\"\n      [timestampPrecision]=\"thyTimestampPrecision()\"\n      (dateValueChange)=\"onDateValueChange($event)\"\n      [className]=\"thyPanelClassName()\"\n      (resultOk)=\"onResultOk()\"\n      [timeZone]=\"thyTimeZone()\"></date-popup>\n  }\n</thy-picker>\n", dependencies: [{ kind: "component", type: ThyPicker, selector: "thy-picker", inputs: ["isRange", "open", "disabled", "placeholder", "readonly", "allowClear", "autoFocus", "className", "size", "suffixIcon", "placement", "flexible", "mode", "hasBackdrop", "separator", "timeZone", "format", "flexibleDateGranularity", "value"], outputs: ["blur", "valueChange", "openChange", "inputChange"], exportAs: ["thyPicker"] }, { kind: "component", type: DatePopup, selector: "date-popup", inputs: ["isRange", "showWeek", "format", "disabledDate", "minDate", "maxDate", "showToday", "showTime", "mustShowTime", "dateRender", "className", "panelMode", "value", "defaultPickerValue", "showShortcut", "shortcutPresets", "shortcutPosition", "flexible", "flexibleDateGranularity", "timestampPrecision", "timeZone"], outputs: ["disabledDateChange", "panelModeChange", "valueChange", "showShortcutChange", "shortcutPresetsChange", "flexibleDateGranularityChange", "calendarChange", "resultOk", "showTimePickerChange", "dateValueChange"], exportAs: ["datePopup"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], exportAs: ["thyDatePicker"], usesInheritance: true, ngImport: i0, template: "<thy-picker\n  #thyPicker\n  [isRange]=\"isRange\"\n  [value]=\"thyValue\"\n  [flexible]=\"flexible()\"\n  [flexibleDateGranularity]=\"flexibleDateGranularity\"\n  (valueChange)=\"onInputValueChange($event)\"\n  [opened]=\"opened()\"\n  [disabled]=\"thyDisabled\"\n  [format]=\"thyFormat()\"\n  [separator]=\"separator()\"\n  [mode]=\"thyMode\"\n  [allowClear]=\"thyAllowClear()\"\n  [className]=\"thyOriginClassName()\"\n  [autoFocus]=\"thyAutoFocus()\"\n  [placeholder]=\"placeholder()\"\n  [readonly]=\"thyReadonly()\"\n  [size]=\"thySize()\"\n  [timeZone]=\"thyTimeZone()\"\n  [suffixIcon]=\"thySuffixIcon()\"\n  [placement]=\"thyPlacement()\"\n  [hasBackdrop]=\"thyHasBackdrop()\"\n  (openChange)=\"onOpenChange($event)\"\n  (blur)=\"onBlur($event)\"\n  (inputChange)=\"onInputDate($event)\">\n  @if (isShowDatePopup) {\n    <date-popup\n      [attr.tabindex]=\"-1\"\n      [isRange]=\"isRange\"\n      [showWeek]=\"showWeek()\"\n      [panelMode]=\"panelMode\"\n      [flexible]=\"flexible()\"\n      [flexibleDateGranularity]=\"flexibleDateGranularity\"\n      [defaultPickerValue]=\"thyDefaultPickerValue()\"\n      (panelModeChange)=\"thyOnPanelChange.emit($event)\"\n      (showTimePickerChange)=\"onShowTimePickerChange($event)\"\n      [value]=\"thyValue\"\n      (valueChange)=\"onValueChange($event)\"\n      (calendarChange)=\"onCalendarChange($event)\"\n      [showTime]=\"thyShowTime()\"\n      [mustShowTime]=\"withTime\"\n      [format]=\"thyFormat()\"\n      [dateRender]=\"thyDateRender()\"\n      [disabledDate]=\"thyDisabledDate()\"\n      [minDate]=\"thyMinDate()\"\n      [maxDate]=\"thyMaxDate()\"\n      [showShortcut]=\"thyShowShortcut()\"\n      [shortcutPresets]=\"thyShortcutPresets()\"\n      [shortcutPosition]=\"thyShortcutPosition()\"\n      [timestampPrecision]=\"thyTimestampPrecision()\"\n      (dateValueChange)=\"onDateValueChange($event)\"\n      [className]=\"thyPanelClassName()\"\n      (resultOk)=\"onResultOk()\"\n      [timeZone]=\"thyTimeZone()\"></date-popup>\n  }\n</thy-picker>\n", dependencies: [{ kind: "component", type: ThyPicker, selector: "thy-picker", inputs: ["isRange", "opened", "disabled", "placeholder", "readonly", "allowClear", "autoFocus", "className", "size", "suffixIcon", "placement", "flexible", "mode", "hasBackdrop", "separator", "timeZone", "format", "flexibleDateGranularity", "value"], outputs: ["blur", "valueChange", "openChange", "inputChange"], exportAs: ["thyPicker"] }, { kind: "component", type: DatePopup, selector: "date-popup", inputs: ["isRange", "showWeek", "format", "disabledDate", "minDate", "maxDate", "showToday", "showTime", "mustShowTime", "dateRender", "className", "panelMode", "value", "defaultPickerValue", "showShortcut", "shortcutPresets", "shortcutPosition", "flexible", "flexibleDateGranularity", "timestampPrecision", "timeZone"], outputs: ["disabledDateChange", "panelModeChange", "valueChange", "showShortcutChange", "shortcutPresetsChange", "flexibleDateGranularityChange", "calendarChange", "resultOk", "showTimePickerChange", "dateValueChange"], exportAs: ["datePopup"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ThyDatePicker, decorators: [{
             type: Component,
@@ -3320,7 +3320,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImpor
                         }
                     ], imports: [ThyPicker, DatePopup], host: {
                         '[attr.tabindex]': 'tabIndex'
-                    }, template: "<thy-picker\n  #thyPicker\n  [isRange]=\"isRange\"\n  [value]=\"thyValue\"\n  [flexible]=\"flexible()\"\n  [flexibleDateGranularity]=\"flexibleDateGranularity\"\n  (valueChange)=\"onInputValueChange($event)\"\n  [open]=\"open()\"\n  [disabled]=\"thyDisabled\"\n  [format]=\"thyFormat()\"\n  [separator]=\"separator()\"\n  [mode]=\"thyMode\"\n  [allowClear]=\"thyAllowClear()\"\n  [className]=\"thyOriginClassName()\"\n  [autoFocus]=\"thyAutoFocus()\"\n  [placeholder]=\"placeholder()\"\n  [readonly]=\"thyReadonly()\"\n  [size]=\"thySize()\"\n  [timeZone]=\"thyTimeZone()\"\n  [suffixIcon]=\"thySuffixIcon()\"\n  [placement]=\"thyPlacement()\"\n  [hasBackdrop]=\"thyHasBackdrop()\"\n  (openChange)=\"onOpenChange($event)\"\n  (blur)=\"onBlur($event)\"\n  (inputChange)=\"onInputDate($event)\">\n  @if (isShowDatePopup) {\n    <date-popup\n      [attr.tabindex]=\"-1\"\n      [isRange]=\"isRange\"\n      [showWeek]=\"showWeek()\"\n      [panelMode]=\"panelMode\"\n      [flexible]=\"flexible()\"\n      [flexibleDateGranularity]=\"flexibleDateGranularity\"\n      [defaultPickerValue]=\"thyDefaultPickerValue()\"\n      (panelModeChange)=\"thyOnPanelChange.emit($event)\"\n      (showTimePickerChange)=\"onShowTimePickerChange($event)\"\n      [value]=\"thyValue\"\n      (valueChange)=\"onValueChange($event)\"\n      (calendarChange)=\"onCalendarChange($event)\"\n      [showTime]=\"thyShowTime()\"\n      [mustShowTime]=\"withTime\"\n      [format]=\"thyFormat()\"\n      [dateRender]=\"thyDateRender()\"\n      [disabledDate]=\"thyDisabledDate()\"\n      [minDate]=\"thyMinDate()\"\n      [maxDate]=\"thyMaxDate()\"\n      [showShortcut]=\"thyShowShortcut()\"\n      [shortcutPresets]=\"thyShortcutPresets()\"\n      [shortcutPosition]=\"thyShortcutPosition()\"\n      [timestampPrecision]=\"thyTimestampPrecision()\"\n      (dateValueChange)=\"onDateValueChange($event)\"\n      [className]=\"thyPanelClassName()\"\n      (resultOk)=\"onResultOk()\"\n      [timeZone]=\"thyTimeZone()\"></date-popup>\n  }\n</thy-picker>\n" }]
+                    }, template: "<thy-picker\n  #thyPicker\n  [isRange]=\"isRange\"\n  [value]=\"thyValue\"\n  [flexible]=\"flexible()\"\n  [flexibleDateGranularity]=\"flexibleDateGranularity\"\n  (valueChange)=\"onInputValueChange($event)\"\n  [opened]=\"opened()\"\n  [disabled]=\"thyDisabled\"\n  [format]=\"thyFormat()\"\n  [separator]=\"separator()\"\n  [mode]=\"thyMode\"\n  [allowClear]=\"thyAllowClear()\"\n  [className]=\"thyOriginClassName()\"\n  [autoFocus]=\"thyAutoFocus()\"\n  [placeholder]=\"placeholder()\"\n  [readonly]=\"thyReadonly()\"\n  [size]=\"thySize()\"\n  [timeZone]=\"thyTimeZone()\"\n  [suffixIcon]=\"thySuffixIcon()\"\n  [placement]=\"thyPlacement()\"\n  [hasBackdrop]=\"thyHasBackdrop()\"\n  (openChange)=\"onOpenChange($event)\"\n  (blur)=\"onBlur($event)\"\n  (inputChange)=\"onInputDate($event)\">\n  @if (isShowDatePopup) {\n    <date-popup\n      [attr.tabindex]=\"-1\"\n      [isRange]=\"isRange\"\n      [showWeek]=\"showWeek()\"\n      [panelMode]=\"panelMode\"\n      [flexible]=\"flexible()\"\n      [flexibleDateGranularity]=\"flexibleDateGranularity\"\n      [defaultPickerValue]=\"thyDefaultPickerValue()\"\n      (panelModeChange)=\"thyOnPanelChange.emit($event)\"\n      (showTimePickerChange)=\"onShowTimePickerChange($event)\"\n      [value]=\"thyValue\"\n      (valueChange)=\"onValueChange($event)\"\n      (calendarChange)=\"onCalendarChange($event)\"\n      [showTime]=\"thyShowTime()\"\n      [mustShowTime]=\"withTime\"\n      [format]=\"thyFormat()\"\n      [dateRender]=\"thyDateRender()\"\n      [disabledDate]=\"thyDisabledDate()\"\n      [minDate]=\"thyMinDate()\"\n      [maxDate]=\"thyMaxDate()\"\n      [showShortcut]=\"thyShowShortcut()\"\n      [shortcutPresets]=\"thyShortcutPresets()\"\n      [shortcutPosition]=\"thyShortcutPosition()\"\n      [timestampPrecision]=\"thyTimestampPrecision()\"\n      (dateValueChange)=\"onDateValueChange($event)\"\n      [className]=\"thyPanelClassName()\"\n      (resultOk)=\"onResultOk()\"\n      [timeZone]=\"thyTimeZone()\"></date-popup>\n  }\n</thy-picker>\n" }]
         }], ctorParameters: () => [] });
 
 /**
@@ -3346,7 +3346,7 @@ class ThyMonthPicker extends BasePicker {
                 multi: true,
                 useExisting: forwardRef(() => ThyMonthPicker)
             }
-        ], exportAs: ["thyMonthPicker"], usesInheritance: true, ngImport: i0, template: "<thy-picker\n  #thyPicker\n  [isRange]=\"isRange\"\n  [value]=\"thyValue\"\n  [flexible]=\"flexible()\"\n  [flexibleDateGranularity]=\"flexibleDateGranularity\"\n  (valueChange)=\"onInputValueChange($event)\"\n  [open]=\"open()\"\n  [disabled]=\"thyDisabled\"\n  [format]=\"thyFormat()\"\n  [separator]=\"separator()\"\n  [mode]=\"thyMode\"\n  [allowClear]=\"thyAllowClear()\"\n  [className]=\"thyOriginClassName()\"\n  [autoFocus]=\"thyAutoFocus()\"\n  [placeholder]=\"placeholder()\"\n  [readonly]=\"thyReadonly()\"\n  [size]=\"thySize()\"\n  [timeZone]=\"thyTimeZone()\"\n  [suffixIcon]=\"thySuffixIcon()\"\n  [placement]=\"thyPlacement()\"\n  [hasBackdrop]=\"thyHasBackdrop()\"\n  (openChange)=\"onOpenChange($event)\"\n  (blur)=\"onBlur($event)\"\n  (inputChange)=\"onInputDate($event)\">\n  @if (isShowDatePopup) {\n    <date-popup\n      [attr.tabindex]=\"-1\"\n      [isRange]=\"isRange\"\n      [showWeek]=\"showWeek()\"\n      [panelMode]=\"panelMode\"\n      [flexible]=\"flexible()\"\n      [flexibleDateGranularity]=\"flexibleDateGranularity\"\n      [defaultPickerValue]=\"thyDefaultPickerValue()\"\n      (panelModeChange)=\"thyOnPanelChange.emit($event)\"\n      (showTimePickerChange)=\"onShowTimePickerChange($event)\"\n      [value]=\"thyValue\"\n      (valueChange)=\"onValueChange($event)\"\n      (calendarChange)=\"onCalendarChange($event)\"\n      [showTime]=\"thyShowTime()\"\n      [mustShowTime]=\"withTime\"\n      [format]=\"thyFormat()\"\n      [dateRender]=\"thyDateRender()\"\n      [disabledDate]=\"thyDisabledDate()\"\n      [minDate]=\"thyMinDate()\"\n      [maxDate]=\"thyMaxDate()\"\n      [showShortcut]=\"thyShowShortcut()\"\n      [shortcutPresets]=\"thyShortcutPresets()\"\n      [shortcutPosition]=\"thyShortcutPosition()\"\n      [timestampPrecision]=\"thyTimestampPrecision()\"\n      (dateValueChange)=\"onDateValueChange($event)\"\n      [className]=\"thyPanelClassName()\"\n      (resultOk)=\"onResultOk()\"\n      [timeZone]=\"thyTimeZone()\"></date-popup>\n  }\n</thy-picker>\n", dependencies: [{ kind: "component", type: ThyPicker, selector: "thy-picker", inputs: ["isRange", "open", "disabled", "placeholder", "readonly", "allowClear", "autoFocus", "className", "size", "suffixIcon", "placement", "flexible", "mode", "hasBackdrop", "separator", "timeZone", "format", "flexibleDateGranularity", "value"], outputs: ["blur", "valueChange", "openChange", "inputChange"], exportAs: ["thyPicker"] }, { kind: "component", type: DatePopup, selector: "date-popup", inputs: ["isRange", "showWeek", "format", "disabledDate", "minDate", "maxDate", "showToday", "showTime", "mustShowTime", "dateRender", "className", "panelMode", "value", "defaultPickerValue", "showShortcut", "shortcutPresets", "shortcutPosition", "flexible", "flexibleDateGranularity", "timestampPrecision", "timeZone"], outputs: ["disabledDateChange", "panelModeChange", "valueChange", "showShortcutChange", "shortcutPresetsChange", "flexibleDateGranularityChange", "calendarChange", "resultOk", "showTimePickerChange", "dateValueChange"], exportAs: ["datePopup"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], exportAs: ["thyMonthPicker"], usesInheritance: true, ngImport: i0, template: "<thy-picker\n  #thyPicker\n  [isRange]=\"isRange\"\n  [value]=\"thyValue\"\n  [flexible]=\"flexible()\"\n  [flexibleDateGranularity]=\"flexibleDateGranularity\"\n  (valueChange)=\"onInputValueChange($event)\"\n  [opened]=\"opened()\"\n  [disabled]=\"thyDisabled\"\n  [format]=\"thyFormat()\"\n  [separator]=\"separator()\"\n  [mode]=\"thyMode\"\n  [allowClear]=\"thyAllowClear()\"\n  [className]=\"thyOriginClassName()\"\n  [autoFocus]=\"thyAutoFocus()\"\n  [placeholder]=\"placeholder()\"\n  [readonly]=\"thyReadonly()\"\n  [size]=\"thySize()\"\n  [timeZone]=\"thyTimeZone()\"\n  [suffixIcon]=\"thySuffixIcon()\"\n  [placement]=\"thyPlacement()\"\n  [hasBackdrop]=\"thyHasBackdrop()\"\n  (openChange)=\"onOpenChange($event)\"\n  (blur)=\"onBlur($event)\"\n  (inputChange)=\"onInputDate($event)\">\n  @if (isShowDatePopup) {\n    <date-popup\n      [attr.tabindex]=\"-1\"\n      [isRange]=\"isRange\"\n      [showWeek]=\"showWeek()\"\n      [panelMode]=\"panelMode\"\n      [flexible]=\"flexible()\"\n      [flexibleDateGranularity]=\"flexibleDateGranularity\"\n      [defaultPickerValue]=\"thyDefaultPickerValue()\"\n      (panelModeChange)=\"thyOnPanelChange.emit($event)\"\n      (showTimePickerChange)=\"onShowTimePickerChange($event)\"\n      [value]=\"thyValue\"\n      (valueChange)=\"onValueChange($event)\"\n      (calendarChange)=\"onCalendarChange($event)\"\n      [showTime]=\"thyShowTime()\"\n      [mustShowTime]=\"withTime\"\n      [format]=\"thyFormat()\"\n      [dateRender]=\"thyDateRender()\"\n      [disabledDate]=\"thyDisabledDate()\"\n      [minDate]=\"thyMinDate()\"\n      [maxDate]=\"thyMaxDate()\"\n      [showShortcut]=\"thyShowShortcut()\"\n      [shortcutPresets]=\"thyShortcutPresets()\"\n      [shortcutPosition]=\"thyShortcutPosition()\"\n      [timestampPrecision]=\"thyTimestampPrecision()\"\n      (dateValueChange)=\"onDateValueChange($event)\"\n      [className]=\"thyPanelClassName()\"\n      (resultOk)=\"onResultOk()\"\n      [timeZone]=\"thyTimeZone()\"></date-popup>\n  }\n</thy-picker>\n", dependencies: [{ kind: "component", type: ThyPicker, selector: "thy-picker", inputs: ["isRange", "opened", "disabled", "placeholder", "readonly", "allowClear", "autoFocus", "className", "size", "suffixIcon", "placement", "flexible", "mode", "hasBackdrop", "separator", "timeZone", "format", "flexibleDateGranularity", "value"], outputs: ["blur", "valueChange", "openChange", "inputChange"], exportAs: ["thyPicker"] }, { kind: "component", type: DatePopup, selector: "date-popup", inputs: ["isRange", "showWeek", "format", "disabledDate", "minDate", "maxDate", "showToday", "showTime", "mustShowTime", "dateRender", "className", "panelMode", "value", "defaultPickerValue", "showShortcut", "shortcutPresets", "shortcutPosition", "flexible", "flexibleDateGranularity", "timestampPrecision", "timeZone"], outputs: ["disabledDateChange", "panelModeChange", "valueChange", "showShortcutChange", "shortcutPresetsChange", "flexibleDateGranularityChange", "calendarChange", "resultOk", "showTimePickerChange", "dateValueChange"], exportAs: ["datePopup"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ThyMonthPicker, decorators: [{
             type: Component,
@@ -3356,7 +3356,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImpor
                             multi: true,
                             useExisting: forwardRef(() => ThyMonthPicker)
                         }
-                    ], imports: [ThyPicker, DatePopup], template: "<thy-picker\n  #thyPicker\n  [isRange]=\"isRange\"\n  [value]=\"thyValue\"\n  [flexible]=\"flexible()\"\n  [flexibleDateGranularity]=\"flexibleDateGranularity\"\n  (valueChange)=\"onInputValueChange($event)\"\n  [open]=\"open()\"\n  [disabled]=\"thyDisabled\"\n  [format]=\"thyFormat()\"\n  [separator]=\"separator()\"\n  [mode]=\"thyMode\"\n  [allowClear]=\"thyAllowClear()\"\n  [className]=\"thyOriginClassName()\"\n  [autoFocus]=\"thyAutoFocus()\"\n  [placeholder]=\"placeholder()\"\n  [readonly]=\"thyReadonly()\"\n  [size]=\"thySize()\"\n  [timeZone]=\"thyTimeZone()\"\n  [suffixIcon]=\"thySuffixIcon()\"\n  [placement]=\"thyPlacement()\"\n  [hasBackdrop]=\"thyHasBackdrop()\"\n  (openChange)=\"onOpenChange($event)\"\n  (blur)=\"onBlur($event)\"\n  (inputChange)=\"onInputDate($event)\">\n  @if (isShowDatePopup) {\n    <date-popup\n      [attr.tabindex]=\"-1\"\n      [isRange]=\"isRange\"\n      [showWeek]=\"showWeek()\"\n      [panelMode]=\"panelMode\"\n      [flexible]=\"flexible()\"\n      [flexibleDateGranularity]=\"flexibleDateGranularity\"\n      [defaultPickerValue]=\"thyDefaultPickerValue()\"\n      (panelModeChange)=\"thyOnPanelChange.emit($event)\"\n      (showTimePickerChange)=\"onShowTimePickerChange($event)\"\n      [value]=\"thyValue\"\n      (valueChange)=\"onValueChange($event)\"\n      (calendarChange)=\"onCalendarChange($event)\"\n      [showTime]=\"thyShowTime()\"\n      [mustShowTime]=\"withTime\"\n      [format]=\"thyFormat()\"\n      [dateRender]=\"thyDateRender()\"\n      [disabledDate]=\"thyDisabledDate()\"\n      [minDate]=\"thyMinDate()\"\n      [maxDate]=\"thyMaxDate()\"\n      [showShortcut]=\"thyShowShortcut()\"\n      [shortcutPresets]=\"thyShortcutPresets()\"\n      [shortcutPosition]=\"thyShortcutPosition()\"\n      [timestampPrecision]=\"thyTimestampPrecision()\"\n      (dateValueChange)=\"onDateValueChange($event)\"\n      [className]=\"thyPanelClassName()\"\n      (resultOk)=\"onResultOk()\"\n      [timeZone]=\"thyTimeZone()\"></date-popup>\n  }\n</thy-picker>\n" }]
+                    ], imports: [ThyPicker, DatePopup], template: "<thy-picker\n  #thyPicker\n  [isRange]=\"isRange\"\n  [value]=\"thyValue\"\n  [flexible]=\"flexible()\"\n  [flexibleDateGranularity]=\"flexibleDateGranularity\"\n  (valueChange)=\"onInputValueChange($event)\"\n  [opened]=\"opened()\"\n  [disabled]=\"thyDisabled\"\n  [format]=\"thyFormat()\"\n  [separator]=\"separator()\"\n  [mode]=\"thyMode\"\n  [allowClear]=\"thyAllowClear()\"\n  [className]=\"thyOriginClassName()\"\n  [autoFocus]=\"thyAutoFocus()\"\n  [placeholder]=\"placeholder()\"\n  [readonly]=\"thyReadonly()\"\n  [size]=\"thySize()\"\n  [timeZone]=\"thyTimeZone()\"\n  [suffixIcon]=\"thySuffixIcon()\"\n  [placement]=\"thyPlacement()\"\n  [hasBackdrop]=\"thyHasBackdrop()\"\n  (openChange)=\"onOpenChange($event)\"\n  (blur)=\"onBlur($event)\"\n  (inputChange)=\"onInputDate($event)\">\n  @if (isShowDatePopup) {\n    <date-popup\n      [attr.tabindex]=\"-1\"\n      [isRange]=\"isRange\"\n      [showWeek]=\"showWeek()\"\n      [panelMode]=\"panelMode\"\n      [flexible]=\"flexible()\"\n      [flexibleDateGranularity]=\"flexibleDateGranularity\"\n      [defaultPickerValue]=\"thyDefaultPickerValue()\"\n      (panelModeChange)=\"thyOnPanelChange.emit($event)\"\n      (showTimePickerChange)=\"onShowTimePickerChange($event)\"\n      [value]=\"thyValue\"\n      (valueChange)=\"onValueChange($event)\"\n      (calendarChange)=\"onCalendarChange($event)\"\n      [showTime]=\"thyShowTime()\"\n      [mustShowTime]=\"withTime\"\n      [format]=\"thyFormat()\"\n      [dateRender]=\"thyDateRender()\"\n      [disabledDate]=\"thyDisabledDate()\"\n      [minDate]=\"thyMinDate()\"\n      [maxDate]=\"thyMaxDate()\"\n      [showShortcut]=\"thyShowShortcut()\"\n      [shortcutPresets]=\"thyShortcutPresets()\"\n      [shortcutPosition]=\"thyShortcutPosition()\"\n      [timestampPrecision]=\"thyTimestampPrecision()\"\n      (dateValueChange)=\"onDateValueChange($event)\"\n      [className]=\"thyPanelClassName()\"\n      (resultOk)=\"onResultOk()\"\n      [timeZone]=\"thyTimeZone()\"></date-popup>\n  }\n</thy-picker>\n" }]
         }], ctorParameters: () => [] });
 
 /**
@@ -3378,7 +3378,7 @@ class ThyRangePicker extends BasePicker {
                 multi: true,
                 useExisting: forwardRef(() => ThyRangePicker)
             }
-        ], exportAs: ["thyRangePicker"], usesInheritance: true, ngImport: i0, template: "<thy-picker\n  #thyPicker\n  [isRange]=\"isRange\"\n  [value]=\"thyValue\"\n  [flexible]=\"flexible()\"\n  [flexibleDateGranularity]=\"flexibleDateGranularity\"\n  (valueChange)=\"onInputValueChange($event)\"\n  [open]=\"open()\"\n  [disabled]=\"thyDisabled\"\n  [format]=\"thyFormat()\"\n  [separator]=\"separator()\"\n  [mode]=\"thyMode\"\n  [allowClear]=\"thyAllowClear()\"\n  [className]=\"thyOriginClassName()\"\n  [autoFocus]=\"thyAutoFocus()\"\n  [placeholder]=\"placeholder()\"\n  [readonly]=\"thyReadonly()\"\n  [size]=\"thySize()\"\n  [timeZone]=\"thyTimeZone()\"\n  [suffixIcon]=\"thySuffixIcon()\"\n  [placement]=\"thyPlacement()\"\n  [hasBackdrop]=\"thyHasBackdrop()\"\n  (openChange)=\"onOpenChange($event)\"\n  (blur)=\"onBlur($event)\"\n  (inputChange)=\"onInputDate($event)\">\n  @if (isShowDatePopup) {\n    <date-popup\n      [attr.tabindex]=\"-1\"\n      [isRange]=\"isRange\"\n      [showWeek]=\"showWeek()\"\n      [panelMode]=\"panelMode\"\n      [flexible]=\"flexible()\"\n      [flexibleDateGranularity]=\"flexibleDateGranularity\"\n      [defaultPickerValue]=\"thyDefaultPickerValue()\"\n      (panelModeChange)=\"thyOnPanelChange.emit($event)\"\n      (showTimePickerChange)=\"onShowTimePickerChange($event)\"\n      [value]=\"thyValue\"\n      (valueChange)=\"onValueChange($event)\"\n      (calendarChange)=\"onCalendarChange($event)\"\n      [showTime]=\"thyShowTime()\"\n      [mustShowTime]=\"withTime\"\n      [format]=\"thyFormat()\"\n      [dateRender]=\"thyDateRender()\"\n      [disabledDate]=\"thyDisabledDate()\"\n      [minDate]=\"thyMinDate()\"\n      [maxDate]=\"thyMaxDate()\"\n      [showShortcut]=\"thyShowShortcut()\"\n      [shortcutPresets]=\"thyShortcutPresets()\"\n      [shortcutPosition]=\"thyShortcutPosition()\"\n      [timestampPrecision]=\"thyTimestampPrecision()\"\n      (dateValueChange)=\"onDateValueChange($event)\"\n      [className]=\"thyPanelClassName()\"\n      (resultOk)=\"onResultOk()\"\n      [timeZone]=\"thyTimeZone()\"></date-popup>\n  }\n</thy-picker>\n", dependencies: [{ kind: "component", type: ThyPicker, selector: "thy-picker", inputs: ["isRange", "open", "disabled", "placeholder", "readonly", "allowClear", "autoFocus", "className", "size", "suffixIcon", "placement", "flexible", "mode", "hasBackdrop", "separator", "timeZone", "format", "flexibleDateGranularity", "value"], outputs: ["blur", "valueChange", "openChange", "inputChange"], exportAs: ["thyPicker"] }, { kind: "component", type: DatePopup, selector: "date-popup", inputs: ["isRange", "showWeek", "format", "disabledDate", "minDate", "maxDate", "showToday", "showTime", "mustShowTime", "dateRender", "className", "panelMode", "value", "defaultPickerValue", "showShortcut", "shortcutPresets", "shortcutPosition", "flexible", "flexibleDateGranularity", "timestampPrecision", "timeZone"], outputs: ["disabledDateChange", "panelModeChange", "valueChange", "showShortcutChange", "shortcutPresetsChange", "flexibleDateGranularityChange", "calendarChange", "resultOk", "showTimePickerChange", "dateValueChange"], exportAs: ["datePopup"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], exportAs: ["thyRangePicker"], usesInheritance: true, ngImport: i0, template: "<thy-picker\n  #thyPicker\n  [isRange]=\"isRange\"\n  [value]=\"thyValue\"\n  [flexible]=\"flexible()\"\n  [flexibleDateGranularity]=\"flexibleDateGranularity\"\n  (valueChange)=\"onInputValueChange($event)\"\n  [opened]=\"opened()\"\n  [disabled]=\"thyDisabled\"\n  [format]=\"thyFormat()\"\n  [separator]=\"separator()\"\n  [mode]=\"thyMode\"\n  [allowClear]=\"thyAllowClear()\"\n  [className]=\"thyOriginClassName()\"\n  [autoFocus]=\"thyAutoFocus()\"\n  [placeholder]=\"placeholder()\"\n  [readonly]=\"thyReadonly()\"\n  [size]=\"thySize()\"\n  [timeZone]=\"thyTimeZone()\"\n  [suffixIcon]=\"thySuffixIcon()\"\n  [placement]=\"thyPlacement()\"\n  [hasBackdrop]=\"thyHasBackdrop()\"\n  (openChange)=\"onOpenChange($event)\"\n  (blur)=\"onBlur($event)\"\n  (inputChange)=\"onInputDate($event)\">\n  @if (isShowDatePopup) {\n    <date-popup\n      [attr.tabindex]=\"-1\"\n      [isRange]=\"isRange\"\n      [showWeek]=\"showWeek()\"\n      [panelMode]=\"panelMode\"\n      [flexible]=\"flexible()\"\n      [flexibleDateGranularity]=\"flexibleDateGranularity\"\n      [defaultPickerValue]=\"thyDefaultPickerValue()\"\n      (panelModeChange)=\"thyOnPanelChange.emit($event)\"\n      (showTimePickerChange)=\"onShowTimePickerChange($event)\"\n      [value]=\"thyValue\"\n      (valueChange)=\"onValueChange($event)\"\n      (calendarChange)=\"onCalendarChange($event)\"\n      [showTime]=\"thyShowTime()\"\n      [mustShowTime]=\"withTime\"\n      [format]=\"thyFormat()\"\n      [dateRender]=\"thyDateRender()\"\n      [disabledDate]=\"thyDisabledDate()\"\n      [minDate]=\"thyMinDate()\"\n      [maxDate]=\"thyMaxDate()\"\n      [showShortcut]=\"thyShowShortcut()\"\n      [shortcutPresets]=\"thyShortcutPresets()\"\n      [shortcutPosition]=\"thyShortcutPosition()\"\n      [timestampPrecision]=\"thyTimestampPrecision()\"\n      (dateValueChange)=\"onDateValueChange($event)\"\n      [className]=\"thyPanelClassName()\"\n      (resultOk)=\"onResultOk()\"\n      [timeZone]=\"thyTimeZone()\"></date-popup>\n  }\n</thy-picker>\n", dependencies: [{ kind: "component", type: ThyPicker, selector: "thy-picker", inputs: ["isRange", "opened", "disabled", "placeholder", "readonly", "allowClear", "autoFocus", "className", "size", "suffixIcon", "placement", "flexible", "mode", "hasBackdrop", "separator", "timeZone", "format", "flexibleDateGranularity", "value"], outputs: ["blur", "valueChange", "openChange", "inputChange"], exportAs: ["thyPicker"] }, { kind: "component", type: DatePopup, selector: "date-popup", inputs: ["isRange", "showWeek", "format", "disabledDate", "minDate", "maxDate", "showToday", "showTime", "mustShowTime", "dateRender", "className", "panelMode", "value", "defaultPickerValue", "showShortcut", "shortcutPresets", "shortcutPosition", "flexible", "flexibleDateGranularity", "timestampPrecision", "timeZone"], outputs: ["disabledDateChange", "panelModeChange", "valueChange", "showShortcutChange", "shortcutPresetsChange", "flexibleDateGranularityChange", "calendarChange", "resultOk", "showTimePickerChange", "dateValueChange"], exportAs: ["datePopup"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ThyRangePicker, decorators: [{
             type: Component,
@@ -3388,7 +3388,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImpor
                             multi: true,
                             useExisting: forwardRef(() => ThyRangePicker)
                         }
-                    ], imports: [ThyPicker, DatePopup], template: "<thy-picker\n  #thyPicker\n  [isRange]=\"isRange\"\n  [value]=\"thyValue\"\n  [flexible]=\"flexible()\"\n  [flexibleDateGranularity]=\"flexibleDateGranularity\"\n  (valueChange)=\"onInputValueChange($event)\"\n  [open]=\"open()\"\n  [disabled]=\"thyDisabled\"\n  [format]=\"thyFormat()\"\n  [separator]=\"separator()\"\n  [mode]=\"thyMode\"\n  [allowClear]=\"thyAllowClear()\"\n  [className]=\"thyOriginClassName()\"\n  [autoFocus]=\"thyAutoFocus()\"\n  [placeholder]=\"placeholder()\"\n  [readonly]=\"thyReadonly()\"\n  [size]=\"thySize()\"\n  [timeZone]=\"thyTimeZone()\"\n  [suffixIcon]=\"thySuffixIcon()\"\n  [placement]=\"thyPlacement()\"\n  [hasBackdrop]=\"thyHasBackdrop()\"\n  (openChange)=\"onOpenChange($event)\"\n  (blur)=\"onBlur($event)\"\n  (inputChange)=\"onInputDate($event)\">\n  @if (isShowDatePopup) {\n    <date-popup\n      [attr.tabindex]=\"-1\"\n      [isRange]=\"isRange\"\n      [showWeek]=\"showWeek()\"\n      [panelMode]=\"panelMode\"\n      [flexible]=\"flexible()\"\n      [flexibleDateGranularity]=\"flexibleDateGranularity\"\n      [defaultPickerValue]=\"thyDefaultPickerValue()\"\n      (panelModeChange)=\"thyOnPanelChange.emit($event)\"\n      (showTimePickerChange)=\"onShowTimePickerChange($event)\"\n      [value]=\"thyValue\"\n      (valueChange)=\"onValueChange($event)\"\n      (calendarChange)=\"onCalendarChange($event)\"\n      [showTime]=\"thyShowTime()\"\n      [mustShowTime]=\"withTime\"\n      [format]=\"thyFormat()\"\n      [dateRender]=\"thyDateRender()\"\n      [disabledDate]=\"thyDisabledDate()\"\n      [minDate]=\"thyMinDate()\"\n      [maxDate]=\"thyMaxDate()\"\n      [showShortcut]=\"thyShowShortcut()\"\n      [shortcutPresets]=\"thyShortcutPresets()\"\n      [shortcutPosition]=\"thyShortcutPosition()\"\n      [timestampPrecision]=\"thyTimestampPrecision()\"\n      (dateValueChange)=\"onDateValueChange($event)\"\n      [className]=\"thyPanelClassName()\"\n      (resultOk)=\"onResultOk()\"\n      [timeZone]=\"thyTimeZone()\"></date-popup>\n  }\n</thy-picker>\n" }]
+                    ], imports: [ThyPicker, DatePopup], template: "<thy-picker\n  #thyPicker\n  [isRange]=\"isRange\"\n  [value]=\"thyValue\"\n  [flexible]=\"flexible()\"\n  [flexibleDateGranularity]=\"flexibleDateGranularity\"\n  (valueChange)=\"onInputValueChange($event)\"\n  [opened]=\"opened()\"\n  [disabled]=\"thyDisabled\"\n  [format]=\"thyFormat()\"\n  [separator]=\"separator()\"\n  [mode]=\"thyMode\"\n  [allowClear]=\"thyAllowClear()\"\n  [className]=\"thyOriginClassName()\"\n  [autoFocus]=\"thyAutoFocus()\"\n  [placeholder]=\"placeholder()\"\n  [readonly]=\"thyReadonly()\"\n  [size]=\"thySize()\"\n  [timeZone]=\"thyTimeZone()\"\n  [suffixIcon]=\"thySuffixIcon()\"\n  [placement]=\"thyPlacement()\"\n  [hasBackdrop]=\"thyHasBackdrop()\"\n  (openChange)=\"onOpenChange($event)\"\n  (blur)=\"onBlur($event)\"\n  (inputChange)=\"onInputDate($event)\">\n  @if (isShowDatePopup) {\n    <date-popup\n      [attr.tabindex]=\"-1\"\n      [isRange]=\"isRange\"\n      [showWeek]=\"showWeek()\"\n      [panelMode]=\"panelMode\"\n      [flexible]=\"flexible()\"\n      [flexibleDateGranularity]=\"flexibleDateGranularity\"\n      [defaultPickerValue]=\"thyDefaultPickerValue()\"\n      (panelModeChange)=\"thyOnPanelChange.emit($event)\"\n      (showTimePickerChange)=\"onShowTimePickerChange($event)\"\n      [value]=\"thyValue\"\n      (valueChange)=\"onValueChange($event)\"\n      (calendarChange)=\"onCalendarChange($event)\"\n      [showTime]=\"thyShowTime()\"\n      [mustShowTime]=\"withTime\"\n      [format]=\"thyFormat()\"\n      [dateRender]=\"thyDateRender()\"\n      [disabledDate]=\"thyDisabledDate()\"\n      [minDate]=\"thyMinDate()\"\n      [maxDate]=\"thyMaxDate()\"\n      [showShortcut]=\"thyShowShortcut()\"\n      [shortcutPresets]=\"thyShortcutPresets()\"\n      [shortcutPosition]=\"thyShortcutPosition()\"\n      [timestampPrecision]=\"thyTimestampPrecision()\"\n      (dateValueChange)=\"onDateValueChange($event)\"\n      [className]=\"thyPanelClassName()\"\n      (resultOk)=\"onResultOk()\"\n      [timeZone]=\"thyTimeZone()\"></date-popup>\n  }\n</thy-picker>\n" }]
         }], ctorParameters: () => [] });
 
 /**
@@ -3410,7 +3410,7 @@ class ThyWeekPicker extends BasePicker {
                 multi: true,
                 useExisting: forwardRef(() => ThyWeekPicker)
             }
-        ], exportAs: ["thyWeekPicker"], usesInheritance: true, ngImport: i0, template: "<thy-picker\n  #thyPicker\n  [isRange]=\"isRange\"\n  [value]=\"thyValue\"\n  [flexible]=\"flexible()\"\n  [flexibleDateGranularity]=\"flexibleDateGranularity\"\n  (valueChange)=\"onInputValueChange($event)\"\n  [open]=\"open()\"\n  [disabled]=\"thyDisabled\"\n  [format]=\"thyFormat()\"\n  [separator]=\"separator()\"\n  [mode]=\"thyMode\"\n  [allowClear]=\"thyAllowClear()\"\n  [className]=\"thyOriginClassName()\"\n  [autoFocus]=\"thyAutoFocus()\"\n  [placeholder]=\"placeholder()\"\n  [readonly]=\"thyReadonly()\"\n  [size]=\"thySize()\"\n  [timeZone]=\"thyTimeZone()\"\n  [suffixIcon]=\"thySuffixIcon()\"\n  [placement]=\"thyPlacement()\"\n  [hasBackdrop]=\"thyHasBackdrop()\"\n  (openChange)=\"onOpenChange($event)\"\n  (blur)=\"onBlur($event)\"\n  (inputChange)=\"onInputDate($event)\">\n  @if (isShowDatePopup) {\n    <date-popup\n      [attr.tabindex]=\"-1\"\n      [isRange]=\"isRange\"\n      [showWeek]=\"showWeek()\"\n      [panelMode]=\"panelMode\"\n      [flexible]=\"flexible()\"\n      [flexibleDateGranularity]=\"flexibleDateGranularity\"\n      [defaultPickerValue]=\"thyDefaultPickerValue()\"\n      (panelModeChange)=\"thyOnPanelChange.emit($event)\"\n      (showTimePickerChange)=\"onShowTimePickerChange($event)\"\n      [value]=\"thyValue\"\n      (valueChange)=\"onValueChange($event)\"\n      (calendarChange)=\"onCalendarChange($event)\"\n      [showTime]=\"thyShowTime()\"\n      [mustShowTime]=\"withTime\"\n      [format]=\"thyFormat()\"\n      [dateRender]=\"thyDateRender()\"\n      [disabledDate]=\"thyDisabledDate()\"\n      [minDate]=\"thyMinDate()\"\n      [maxDate]=\"thyMaxDate()\"\n      [showShortcut]=\"thyShowShortcut()\"\n      [shortcutPresets]=\"thyShortcutPresets()\"\n      [shortcutPosition]=\"thyShortcutPosition()\"\n      [timestampPrecision]=\"thyTimestampPrecision()\"\n      (dateValueChange)=\"onDateValueChange($event)\"\n      [className]=\"thyPanelClassName()\"\n      (resultOk)=\"onResultOk()\"\n      [timeZone]=\"thyTimeZone()\"></date-popup>\n  }\n</thy-picker>\n", dependencies: [{ kind: "component", type: ThyPicker, selector: "thy-picker", inputs: ["isRange", "open", "disabled", "placeholder", "readonly", "allowClear", "autoFocus", "className", "size", "suffixIcon", "placement", "flexible", "mode", "hasBackdrop", "separator", "timeZone", "format", "flexibleDateGranularity", "value"], outputs: ["blur", "valueChange", "openChange", "inputChange"], exportAs: ["thyPicker"] }, { kind: "component", type: DatePopup, selector: "date-popup", inputs: ["isRange", "showWeek", "format", "disabledDate", "minDate", "maxDate", "showToday", "showTime", "mustShowTime", "dateRender", "className", "panelMode", "value", "defaultPickerValue", "showShortcut", "shortcutPresets", "shortcutPosition", "flexible", "flexibleDateGranularity", "timestampPrecision", "timeZone"], outputs: ["disabledDateChange", "panelModeChange", "valueChange", "showShortcutChange", "shortcutPresetsChange", "flexibleDateGranularityChange", "calendarChange", "resultOk", "showTimePickerChange", "dateValueChange"], exportAs: ["datePopup"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], exportAs: ["thyWeekPicker"], usesInheritance: true, ngImport: i0, template: "<thy-picker\n  #thyPicker\n  [isRange]=\"isRange\"\n  [value]=\"thyValue\"\n  [flexible]=\"flexible()\"\n  [flexibleDateGranularity]=\"flexibleDateGranularity\"\n  (valueChange)=\"onInputValueChange($event)\"\n  [opened]=\"opened()\"\n  [disabled]=\"thyDisabled\"\n  [format]=\"thyFormat()\"\n  [separator]=\"separator()\"\n  [mode]=\"thyMode\"\n  [allowClear]=\"thyAllowClear()\"\n  [className]=\"thyOriginClassName()\"\n  [autoFocus]=\"thyAutoFocus()\"\n  [placeholder]=\"placeholder()\"\n  [readonly]=\"thyReadonly()\"\n  [size]=\"thySize()\"\n  [timeZone]=\"thyTimeZone()\"\n  [suffixIcon]=\"thySuffixIcon()\"\n  [placement]=\"thyPlacement()\"\n  [hasBackdrop]=\"thyHasBackdrop()\"\n  (openChange)=\"onOpenChange($event)\"\n  (blur)=\"onBlur($event)\"\n  (inputChange)=\"onInputDate($event)\">\n  @if (isShowDatePopup) {\n    <date-popup\n      [attr.tabindex]=\"-1\"\n      [isRange]=\"isRange\"\n      [showWeek]=\"showWeek()\"\n      [panelMode]=\"panelMode\"\n      [flexible]=\"flexible()\"\n      [flexibleDateGranularity]=\"flexibleDateGranularity\"\n      [defaultPickerValue]=\"thyDefaultPickerValue()\"\n      (panelModeChange)=\"thyOnPanelChange.emit($event)\"\n      (showTimePickerChange)=\"onShowTimePickerChange($event)\"\n      [value]=\"thyValue\"\n      (valueChange)=\"onValueChange($event)\"\n      (calendarChange)=\"onCalendarChange($event)\"\n      [showTime]=\"thyShowTime()\"\n      [mustShowTime]=\"withTime\"\n      [format]=\"thyFormat()\"\n      [dateRender]=\"thyDateRender()\"\n      [disabledDate]=\"thyDisabledDate()\"\n      [minDate]=\"thyMinDate()\"\n      [maxDate]=\"thyMaxDate()\"\n      [showShortcut]=\"thyShowShortcut()\"\n      [shortcutPresets]=\"thyShortcutPresets()\"\n      [shortcutPosition]=\"thyShortcutPosition()\"\n      [timestampPrecision]=\"thyTimestampPrecision()\"\n      (dateValueChange)=\"onDateValueChange($event)\"\n      [className]=\"thyPanelClassName()\"\n      (resultOk)=\"onResultOk()\"\n      [timeZone]=\"thyTimeZone()\"></date-popup>\n  }\n</thy-picker>\n", dependencies: [{ kind: "component", type: ThyPicker, selector: "thy-picker", inputs: ["isRange", "opened", "disabled", "placeholder", "readonly", "allowClear", "autoFocus", "className", "size", "suffixIcon", "placement", "flexible", "mode", "hasBackdrop", "separator", "timeZone", "format", "flexibleDateGranularity", "value"], outputs: ["blur", "valueChange", "openChange", "inputChange"], exportAs: ["thyPicker"] }, { kind: "component", type: DatePopup, selector: "date-popup", inputs: ["isRange", "showWeek", "format", "disabledDate", "minDate", "maxDate", "showToday", "showTime", "mustShowTime", "dateRender", "className", "panelMode", "value", "defaultPickerValue", "showShortcut", "shortcutPresets", "shortcutPosition", "flexible", "flexibleDateGranularity", "timestampPrecision", "timeZone"], outputs: ["disabledDateChange", "panelModeChange", "valueChange", "showShortcutChange", "shortcutPresetsChange", "flexibleDateGranularityChange", "calendarChange", "resultOk", "showTimePickerChange", "dateValueChange"], exportAs: ["datePopup"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ThyWeekPicker, decorators: [{
             type: Component,
@@ -3420,7 +3420,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImpor
                             multi: true,
                             useExisting: forwardRef(() => ThyWeekPicker)
                         }
-                    ], imports: [ThyPicker, DatePopup], template: "<thy-picker\n  #thyPicker\n  [isRange]=\"isRange\"\n  [value]=\"thyValue\"\n  [flexible]=\"flexible()\"\n  [flexibleDateGranularity]=\"flexibleDateGranularity\"\n  (valueChange)=\"onInputValueChange($event)\"\n  [open]=\"open()\"\n  [disabled]=\"thyDisabled\"\n  [format]=\"thyFormat()\"\n  [separator]=\"separator()\"\n  [mode]=\"thyMode\"\n  [allowClear]=\"thyAllowClear()\"\n  [className]=\"thyOriginClassName()\"\n  [autoFocus]=\"thyAutoFocus()\"\n  [placeholder]=\"placeholder()\"\n  [readonly]=\"thyReadonly()\"\n  [size]=\"thySize()\"\n  [timeZone]=\"thyTimeZone()\"\n  [suffixIcon]=\"thySuffixIcon()\"\n  [placement]=\"thyPlacement()\"\n  [hasBackdrop]=\"thyHasBackdrop()\"\n  (openChange)=\"onOpenChange($event)\"\n  (blur)=\"onBlur($event)\"\n  (inputChange)=\"onInputDate($event)\">\n  @if (isShowDatePopup) {\n    <date-popup\n      [attr.tabindex]=\"-1\"\n      [isRange]=\"isRange\"\n      [showWeek]=\"showWeek()\"\n      [panelMode]=\"panelMode\"\n      [flexible]=\"flexible()\"\n      [flexibleDateGranularity]=\"flexibleDateGranularity\"\n      [defaultPickerValue]=\"thyDefaultPickerValue()\"\n      (panelModeChange)=\"thyOnPanelChange.emit($event)\"\n      (showTimePickerChange)=\"onShowTimePickerChange($event)\"\n      [value]=\"thyValue\"\n      (valueChange)=\"onValueChange($event)\"\n      (calendarChange)=\"onCalendarChange($event)\"\n      [showTime]=\"thyShowTime()\"\n      [mustShowTime]=\"withTime\"\n      [format]=\"thyFormat()\"\n      [dateRender]=\"thyDateRender()\"\n      [disabledDate]=\"thyDisabledDate()\"\n      [minDate]=\"thyMinDate()\"\n      [maxDate]=\"thyMaxDate()\"\n      [showShortcut]=\"thyShowShortcut()\"\n      [shortcutPresets]=\"thyShortcutPresets()\"\n      [shortcutPosition]=\"thyShortcutPosition()\"\n      [timestampPrecision]=\"thyTimestampPrecision()\"\n      (dateValueChange)=\"onDateValueChange($event)\"\n      [className]=\"thyPanelClassName()\"\n      (resultOk)=\"onResultOk()\"\n      [timeZone]=\"thyTimeZone()\"></date-popup>\n  }\n</thy-picker>\n" }]
+                    ], imports: [ThyPicker, DatePopup], template: "<thy-picker\n  #thyPicker\n  [isRange]=\"isRange\"\n  [value]=\"thyValue\"\n  [flexible]=\"flexible()\"\n  [flexibleDateGranularity]=\"flexibleDateGranularity\"\n  (valueChange)=\"onInputValueChange($event)\"\n  [opened]=\"opened()\"\n  [disabled]=\"thyDisabled\"\n  [format]=\"thyFormat()\"\n  [separator]=\"separator()\"\n  [mode]=\"thyMode\"\n  [allowClear]=\"thyAllowClear()\"\n  [className]=\"thyOriginClassName()\"\n  [autoFocus]=\"thyAutoFocus()\"\n  [placeholder]=\"placeholder()\"\n  [readonly]=\"thyReadonly()\"\n  [size]=\"thySize()\"\n  [timeZone]=\"thyTimeZone()\"\n  [suffixIcon]=\"thySuffixIcon()\"\n  [placement]=\"thyPlacement()\"\n  [hasBackdrop]=\"thyHasBackdrop()\"\n  (openChange)=\"onOpenChange($event)\"\n  (blur)=\"onBlur($event)\"\n  (inputChange)=\"onInputDate($event)\">\n  @if (isShowDatePopup) {\n    <date-popup\n      [attr.tabindex]=\"-1\"\n      [isRange]=\"isRange\"\n      [showWeek]=\"showWeek()\"\n      [panelMode]=\"panelMode\"\n      [flexible]=\"flexible()\"\n      [flexibleDateGranularity]=\"flexibleDateGranularity\"\n      [defaultPickerValue]=\"thyDefaultPickerValue()\"\n      (panelModeChange)=\"thyOnPanelChange.emit($event)\"\n      (showTimePickerChange)=\"onShowTimePickerChange($event)\"\n      [value]=\"thyValue\"\n      (valueChange)=\"onValueChange($event)\"\n      (calendarChange)=\"onCalendarChange($event)\"\n      [showTime]=\"thyShowTime()\"\n      [mustShowTime]=\"withTime\"\n      [format]=\"thyFormat()\"\n      [dateRender]=\"thyDateRender()\"\n      [disabledDate]=\"thyDisabledDate()\"\n      [minDate]=\"thyMinDate()\"\n      [maxDate]=\"thyMaxDate()\"\n      [showShortcut]=\"thyShowShortcut()\"\n      [shortcutPresets]=\"thyShortcutPresets()\"\n      [shortcutPosition]=\"thyShortcutPosition()\"\n      [timestampPrecision]=\"thyTimestampPrecision()\"\n      (dateValueChange)=\"onDateValueChange($event)\"\n      [className]=\"thyPanelClassName()\"\n      (resultOk)=\"onResultOk()\"\n      [timeZone]=\"thyTimeZone()\"></date-popup>\n  }\n</thy-picker>\n" }]
         }], ctorParameters: () => [] });
 
 /**
@@ -3448,7 +3448,7 @@ class ThyYearPicker extends BasePicker {
                 multi: true,
                 useExisting: forwardRef(() => ThyYearPicker)
             }
-        ], exportAs: ["thyYearPicker"], usesInheritance: true, ngImport: i0, template: "<thy-picker\n  #thyPicker\n  [isRange]=\"isRange\"\n  [value]=\"thyValue\"\n  [flexible]=\"flexible()\"\n  [flexibleDateGranularity]=\"flexibleDateGranularity\"\n  (valueChange)=\"onInputValueChange($event)\"\n  [open]=\"open()\"\n  [disabled]=\"thyDisabled\"\n  [format]=\"thyFormat()\"\n  [separator]=\"separator()\"\n  [mode]=\"thyMode\"\n  [allowClear]=\"thyAllowClear()\"\n  [className]=\"thyOriginClassName()\"\n  [autoFocus]=\"thyAutoFocus()\"\n  [placeholder]=\"placeholder()\"\n  [readonly]=\"thyReadonly()\"\n  [size]=\"thySize()\"\n  [timeZone]=\"thyTimeZone()\"\n  [suffixIcon]=\"thySuffixIcon()\"\n  [placement]=\"thyPlacement()\"\n  [hasBackdrop]=\"thyHasBackdrop()\"\n  (openChange)=\"onOpenChange($event)\"\n  (blur)=\"onBlur($event)\"\n  (inputChange)=\"onInputDate($event)\">\n  @if (isShowDatePopup) {\n    <date-popup\n      [attr.tabindex]=\"-1\"\n      [isRange]=\"isRange\"\n      [showWeek]=\"showWeek()\"\n      [panelMode]=\"panelMode\"\n      [flexible]=\"flexible()\"\n      [flexibleDateGranularity]=\"flexibleDateGranularity\"\n      [defaultPickerValue]=\"thyDefaultPickerValue()\"\n      (panelModeChange)=\"thyOnPanelChange.emit($event)\"\n      (showTimePickerChange)=\"onShowTimePickerChange($event)\"\n      [value]=\"thyValue\"\n      (valueChange)=\"onValueChange($event)\"\n      (calendarChange)=\"onCalendarChange($event)\"\n      [showTime]=\"thyShowTime()\"\n      [mustShowTime]=\"withTime\"\n      [format]=\"thyFormat()\"\n      [dateRender]=\"thyDateRender()\"\n      [disabledDate]=\"thyDisabledDate()\"\n      [minDate]=\"thyMinDate()\"\n      [maxDate]=\"thyMaxDate()\"\n      [showShortcut]=\"thyShowShortcut()\"\n      [shortcutPresets]=\"thyShortcutPresets()\"\n      [shortcutPosition]=\"thyShortcutPosition()\"\n      [timestampPrecision]=\"thyTimestampPrecision()\"\n      (dateValueChange)=\"onDateValueChange($event)\"\n      [className]=\"thyPanelClassName()\"\n      (resultOk)=\"onResultOk()\"\n      [timeZone]=\"thyTimeZone()\"></date-popup>\n  }\n</thy-picker>\n", dependencies: [{ kind: "component", type: ThyPicker, selector: "thy-picker", inputs: ["isRange", "open", "disabled", "placeholder", "readonly", "allowClear", "autoFocus", "className", "size", "suffixIcon", "placement", "flexible", "mode", "hasBackdrop", "separator", "timeZone", "format", "flexibleDateGranularity", "value"], outputs: ["blur", "valueChange", "openChange", "inputChange"], exportAs: ["thyPicker"] }, { kind: "component", type: DatePopup, selector: "date-popup", inputs: ["isRange", "showWeek", "format", "disabledDate", "minDate", "maxDate", "showToday", "showTime", "mustShowTime", "dateRender", "className", "panelMode", "value", "defaultPickerValue", "showShortcut", "shortcutPresets", "shortcutPosition", "flexible", "flexibleDateGranularity", "timestampPrecision", "timeZone"], outputs: ["disabledDateChange", "panelModeChange", "valueChange", "showShortcutChange", "shortcutPresetsChange", "flexibleDateGranularityChange", "calendarChange", "resultOk", "showTimePickerChange", "dateValueChange"], exportAs: ["datePopup"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], exportAs: ["thyYearPicker"], usesInheritance: true, ngImport: i0, template: "<thy-picker\n  #thyPicker\n  [isRange]=\"isRange\"\n  [value]=\"thyValue\"\n  [flexible]=\"flexible()\"\n  [flexibleDateGranularity]=\"flexibleDateGranularity\"\n  (valueChange)=\"onInputValueChange($event)\"\n  [opened]=\"opened()\"\n  [disabled]=\"thyDisabled\"\n  [format]=\"thyFormat()\"\n  [separator]=\"separator()\"\n  [mode]=\"thyMode\"\n  [allowClear]=\"thyAllowClear()\"\n  [className]=\"thyOriginClassName()\"\n  [autoFocus]=\"thyAutoFocus()\"\n  [placeholder]=\"placeholder()\"\n  [readonly]=\"thyReadonly()\"\n  [size]=\"thySize()\"\n  [timeZone]=\"thyTimeZone()\"\n  [suffixIcon]=\"thySuffixIcon()\"\n  [placement]=\"thyPlacement()\"\n  [hasBackdrop]=\"thyHasBackdrop()\"\n  (openChange)=\"onOpenChange($event)\"\n  (blur)=\"onBlur($event)\"\n  (inputChange)=\"onInputDate($event)\">\n  @if (isShowDatePopup) {\n    <date-popup\n      [attr.tabindex]=\"-1\"\n      [isRange]=\"isRange\"\n      [showWeek]=\"showWeek()\"\n      [panelMode]=\"panelMode\"\n      [flexible]=\"flexible()\"\n      [flexibleDateGranularity]=\"flexibleDateGranularity\"\n      [defaultPickerValue]=\"thyDefaultPickerValue()\"\n      (panelModeChange)=\"thyOnPanelChange.emit($event)\"\n      (showTimePickerChange)=\"onShowTimePickerChange($event)\"\n      [value]=\"thyValue\"\n      (valueChange)=\"onValueChange($event)\"\n      (calendarChange)=\"onCalendarChange($event)\"\n      [showTime]=\"thyShowTime()\"\n      [mustShowTime]=\"withTime\"\n      [format]=\"thyFormat()\"\n      [dateRender]=\"thyDateRender()\"\n      [disabledDate]=\"thyDisabledDate()\"\n      [minDate]=\"thyMinDate()\"\n      [maxDate]=\"thyMaxDate()\"\n      [showShortcut]=\"thyShowShortcut()\"\n      [shortcutPresets]=\"thyShortcutPresets()\"\n      [shortcutPosition]=\"thyShortcutPosition()\"\n      [timestampPrecision]=\"thyTimestampPrecision()\"\n      (dateValueChange)=\"onDateValueChange($event)\"\n      [className]=\"thyPanelClassName()\"\n      (resultOk)=\"onResultOk()\"\n      [timeZone]=\"thyTimeZone()\"></date-popup>\n  }\n</thy-picker>\n", dependencies: [{ kind: "component", type: ThyPicker, selector: "thy-picker", inputs: ["isRange", "opened", "disabled", "placeholder", "readonly", "allowClear", "autoFocus", "className", "size", "suffixIcon", "placement", "flexible", "mode", "hasBackdrop", "separator", "timeZone", "format", "flexibleDateGranularity", "value"], outputs: ["blur", "valueChange", "openChange", "inputChange"], exportAs: ["thyPicker"] }, { kind: "component", type: DatePopup, selector: "date-popup", inputs: ["isRange", "showWeek", "format", "disabledDate", "minDate", "maxDate", "showToday", "showTime", "mustShowTime", "dateRender", "className", "panelMode", "value", "defaultPickerValue", "showShortcut", "shortcutPresets", "shortcutPosition", "flexible", "flexibleDateGranularity", "timestampPrecision", "timeZone"], outputs: ["disabledDateChange", "panelModeChange", "valueChange", "showShortcutChange", "shortcutPresetsChange", "flexibleDateGranularityChange", "calendarChange", "resultOk", "showTimePickerChange", "dateValueChange"], exportAs: ["datePopup"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ThyYearPicker, decorators: [{
             type: Component,
@@ -3458,7 +3458,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImpor
                             multi: true,
                             useExisting: forwardRef(() => ThyYearPicker)
                         }
-                    ], imports: [ThyPicker, DatePopup], template: "<thy-picker\n  #thyPicker\n  [isRange]=\"isRange\"\n  [value]=\"thyValue\"\n  [flexible]=\"flexible()\"\n  [flexibleDateGranularity]=\"flexibleDateGranularity\"\n  (valueChange)=\"onInputValueChange($event)\"\n  [open]=\"open()\"\n  [disabled]=\"thyDisabled\"\n  [format]=\"thyFormat()\"\n  [separator]=\"separator()\"\n  [mode]=\"thyMode\"\n  [allowClear]=\"thyAllowClear()\"\n  [className]=\"thyOriginClassName()\"\n  [autoFocus]=\"thyAutoFocus()\"\n  [placeholder]=\"placeholder()\"\n  [readonly]=\"thyReadonly()\"\n  [size]=\"thySize()\"\n  [timeZone]=\"thyTimeZone()\"\n  [suffixIcon]=\"thySuffixIcon()\"\n  [placement]=\"thyPlacement()\"\n  [hasBackdrop]=\"thyHasBackdrop()\"\n  (openChange)=\"onOpenChange($event)\"\n  (blur)=\"onBlur($event)\"\n  (inputChange)=\"onInputDate($event)\">\n  @if (isShowDatePopup) {\n    <date-popup\n      [attr.tabindex]=\"-1\"\n      [isRange]=\"isRange\"\n      [showWeek]=\"showWeek()\"\n      [panelMode]=\"panelMode\"\n      [flexible]=\"flexible()\"\n      [flexibleDateGranularity]=\"flexibleDateGranularity\"\n      [defaultPickerValue]=\"thyDefaultPickerValue()\"\n      (panelModeChange)=\"thyOnPanelChange.emit($event)\"\n      (showTimePickerChange)=\"onShowTimePickerChange($event)\"\n      [value]=\"thyValue\"\n      (valueChange)=\"onValueChange($event)\"\n      (calendarChange)=\"onCalendarChange($event)\"\n      [showTime]=\"thyShowTime()\"\n      [mustShowTime]=\"withTime\"\n      [format]=\"thyFormat()\"\n      [dateRender]=\"thyDateRender()\"\n      [disabledDate]=\"thyDisabledDate()\"\n      [minDate]=\"thyMinDate()\"\n      [maxDate]=\"thyMaxDate()\"\n      [showShortcut]=\"thyShowShortcut()\"\n      [shortcutPresets]=\"thyShortcutPresets()\"\n      [shortcutPosition]=\"thyShortcutPosition()\"\n      [timestampPrecision]=\"thyTimestampPrecision()\"\n      (dateValueChange)=\"onDateValueChange($event)\"\n      [className]=\"thyPanelClassName()\"\n      (resultOk)=\"onResultOk()\"\n      [timeZone]=\"thyTimeZone()\"></date-popup>\n  }\n</thy-picker>\n" }]
+                    ], imports: [ThyPicker, DatePopup], template: "<thy-picker\n  #thyPicker\n  [isRange]=\"isRange\"\n  [value]=\"thyValue\"\n  [flexible]=\"flexible()\"\n  [flexibleDateGranularity]=\"flexibleDateGranularity\"\n  (valueChange)=\"onInputValueChange($event)\"\n  [opened]=\"opened()\"\n  [disabled]=\"thyDisabled\"\n  [format]=\"thyFormat()\"\n  [separator]=\"separator()\"\n  [mode]=\"thyMode\"\n  [allowClear]=\"thyAllowClear()\"\n  [className]=\"thyOriginClassName()\"\n  [autoFocus]=\"thyAutoFocus()\"\n  [placeholder]=\"placeholder()\"\n  [readonly]=\"thyReadonly()\"\n  [size]=\"thySize()\"\n  [timeZone]=\"thyTimeZone()\"\n  [suffixIcon]=\"thySuffixIcon()\"\n  [placement]=\"thyPlacement()\"\n  [hasBackdrop]=\"thyHasBackdrop()\"\n  (openChange)=\"onOpenChange($event)\"\n  (blur)=\"onBlur($event)\"\n  (inputChange)=\"onInputDate($event)\">\n  @if (isShowDatePopup) {\n    <date-popup\n      [attr.tabindex]=\"-1\"\n      [isRange]=\"isRange\"\n      [showWeek]=\"showWeek()\"\n      [panelMode]=\"panelMode\"\n      [flexible]=\"flexible()\"\n      [flexibleDateGranularity]=\"flexibleDateGranularity\"\n      [defaultPickerValue]=\"thyDefaultPickerValue()\"\n      (panelModeChange)=\"thyOnPanelChange.emit($event)\"\n      (showTimePickerChange)=\"onShowTimePickerChange($event)\"\n      [value]=\"thyValue\"\n      (valueChange)=\"onValueChange($event)\"\n      (calendarChange)=\"onCalendarChange($event)\"\n      [showTime]=\"thyShowTime()\"\n      [mustShowTime]=\"withTime\"\n      [format]=\"thyFormat()\"\n      [dateRender]=\"thyDateRender()\"\n      [disabledDate]=\"thyDisabledDate()\"\n      [minDate]=\"thyMinDate()\"\n      [maxDate]=\"thyMaxDate()\"\n      [showShortcut]=\"thyShowShortcut()\"\n      [shortcutPresets]=\"thyShortcutPresets()\"\n      [shortcutPosition]=\"thyShortcutPosition()\"\n      [timestampPrecision]=\"thyTimestampPrecision()\"\n      (dateValueChange)=\"onDateValueChange($event)\"\n      [className]=\"thyPanelClassName()\"\n      (resultOk)=\"onResultOk()\"\n      [timeZone]=\"thyTimeZone()\"></date-popup>\n  }\n</thy-picker>\n" }]
         }], ctorParameters: () => [] });
 
 const DATE_PICKER_REQUIRED_VALIDATOR = {
@@ -3793,7 +3793,7 @@ class ThyQuarterPicker extends BasePicker {
                 multi: true,
                 useExisting: forwardRef(() => ThyQuarterPicker)
             }
-        ], exportAs: ["thyQuarterPicker"], usesInheritance: true, ngImport: i0, template: "<thy-picker\n  #thyPicker\n  [isRange]=\"isRange\"\n  [value]=\"thyValue\"\n  [flexible]=\"flexible()\"\n  [flexibleDateGranularity]=\"flexibleDateGranularity\"\n  (valueChange)=\"onInputValueChange($event)\"\n  [open]=\"open()\"\n  [disabled]=\"thyDisabled\"\n  [format]=\"thyFormat()\"\n  [separator]=\"separator()\"\n  [mode]=\"thyMode\"\n  [allowClear]=\"thyAllowClear()\"\n  [className]=\"thyOriginClassName()\"\n  [autoFocus]=\"thyAutoFocus()\"\n  [placeholder]=\"placeholder()\"\n  [readonly]=\"thyReadonly()\"\n  [size]=\"thySize()\"\n  [timeZone]=\"thyTimeZone()\"\n  [suffixIcon]=\"thySuffixIcon()\"\n  [placement]=\"thyPlacement()\"\n  [hasBackdrop]=\"thyHasBackdrop()\"\n  (openChange)=\"onOpenChange($event)\"\n  (blur)=\"onBlur($event)\"\n  (inputChange)=\"onInputDate($event)\">\n  @if (isShowDatePopup) {\n    <date-popup\n      [attr.tabindex]=\"-1\"\n      [isRange]=\"isRange\"\n      [showWeek]=\"showWeek()\"\n      [panelMode]=\"panelMode\"\n      [flexible]=\"flexible()\"\n      [flexibleDateGranularity]=\"flexibleDateGranularity\"\n      [defaultPickerValue]=\"thyDefaultPickerValue()\"\n      (panelModeChange)=\"thyOnPanelChange.emit($event)\"\n      (showTimePickerChange)=\"onShowTimePickerChange($event)\"\n      [value]=\"thyValue\"\n      (valueChange)=\"onValueChange($event)\"\n      (calendarChange)=\"onCalendarChange($event)\"\n      [showTime]=\"thyShowTime()\"\n      [mustShowTime]=\"withTime\"\n      [format]=\"thyFormat()\"\n      [dateRender]=\"thyDateRender()\"\n      [disabledDate]=\"thyDisabledDate()\"\n      [minDate]=\"thyMinDate()\"\n      [maxDate]=\"thyMaxDate()\"\n      [showShortcut]=\"thyShowShortcut()\"\n      [shortcutPresets]=\"thyShortcutPresets()\"\n      [shortcutPosition]=\"thyShortcutPosition()\"\n      [timestampPrecision]=\"thyTimestampPrecision()\"\n      (dateValueChange)=\"onDateValueChange($event)\"\n      [className]=\"thyPanelClassName()\"\n      (resultOk)=\"onResultOk()\"\n      [timeZone]=\"thyTimeZone()\"></date-popup>\n  }\n</thy-picker>\n", dependencies: [{ kind: "component", type: ThyPicker, selector: "thy-picker", inputs: ["isRange", "open", "disabled", "placeholder", "readonly", "allowClear", "autoFocus", "className", "size", "suffixIcon", "placement", "flexible", "mode", "hasBackdrop", "separator", "timeZone", "format", "flexibleDateGranularity", "value"], outputs: ["blur", "valueChange", "openChange", "inputChange"], exportAs: ["thyPicker"] }, { kind: "component", type: DatePopup, selector: "date-popup", inputs: ["isRange", "showWeek", "format", "disabledDate", "minDate", "maxDate", "showToday", "showTime", "mustShowTime", "dateRender", "className", "panelMode", "value", "defaultPickerValue", "showShortcut", "shortcutPresets", "shortcutPosition", "flexible", "flexibleDateGranularity", "timestampPrecision", "timeZone"], outputs: ["disabledDateChange", "panelModeChange", "valueChange", "showShortcutChange", "shortcutPresetsChange", "flexibleDateGranularityChange", "calendarChange", "resultOk", "showTimePickerChange", "dateValueChange"], exportAs: ["datePopup"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], exportAs: ["thyQuarterPicker"], usesInheritance: true, ngImport: i0, template: "<thy-picker\n  #thyPicker\n  [isRange]=\"isRange\"\n  [value]=\"thyValue\"\n  [flexible]=\"flexible()\"\n  [flexibleDateGranularity]=\"flexibleDateGranularity\"\n  (valueChange)=\"onInputValueChange($event)\"\n  [opened]=\"opened()\"\n  [disabled]=\"thyDisabled\"\n  [format]=\"thyFormat()\"\n  [separator]=\"separator()\"\n  [mode]=\"thyMode\"\n  [allowClear]=\"thyAllowClear()\"\n  [className]=\"thyOriginClassName()\"\n  [autoFocus]=\"thyAutoFocus()\"\n  [placeholder]=\"placeholder()\"\n  [readonly]=\"thyReadonly()\"\n  [size]=\"thySize()\"\n  [timeZone]=\"thyTimeZone()\"\n  [suffixIcon]=\"thySuffixIcon()\"\n  [placement]=\"thyPlacement()\"\n  [hasBackdrop]=\"thyHasBackdrop()\"\n  (openChange)=\"onOpenChange($event)\"\n  (blur)=\"onBlur($event)\"\n  (inputChange)=\"onInputDate($event)\">\n  @if (isShowDatePopup) {\n    <date-popup\n      [attr.tabindex]=\"-1\"\n      [isRange]=\"isRange\"\n      [showWeek]=\"showWeek()\"\n      [panelMode]=\"panelMode\"\n      [flexible]=\"flexible()\"\n      [flexibleDateGranularity]=\"flexibleDateGranularity\"\n      [defaultPickerValue]=\"thyDefaultPickerValue()\"\n      (panelModeChange)=\"thyOnPanelChange.emit($event)\"\n      (showTimePickerChange)=\"onShowTimePickerChange($event)\"\n      [value]=\"thyValue\"\n      (valueChange)=\"onValueChange($event)\"\n      (calendarChange)=\"onCalendarChange($event)\"\n      [showTime]=\"thyShowTime()\"\n      [mustShowTime]=\"withTime\"\n      [format]=\"thyFormat()\"\n      [dateRender]=\"thyDateRender()\"\n      [disabledDate]=\"thyDisabledDate()\"\n      [minDate]=\"thyMinDate()\"\n      [maxDate]=\"thyMaxDate()\"\n      [showShortcut]=\"thyShowShortcut()\"\n      [shortcutPresets]=\"thyShortcutPresets()\"\n      [shortcutPosition]=\"thyShortcutPosition()\"\n      [timestampPrecision]=\"thyTimestampPrecision()\"\n      (dateValueChange)=\"onDateValueChange($event)\"\n      [className]=\"thyPanelClassName()\"\n      (resultOk)=\"onResultOk()\"\n      [timeZone]=\"thyTimeZone()\"></date-popup>\n  }\n</thy-picker>\n", dependencies: [{ kind: "component", type: ThyPicker, selector: "thy-picker", inputs: ["isRange", "opened", "disabled", "placeholder", "readonly", "allowClear", "autoFocus", "className", "size", "suffixIcon", "placement", "flexible", "mode", "hasBackdrop", "separator", "timeZone", "format", "flexibleDateGranularity", "value"], outputs: ["blur", "valueChange", "openChange", "inputChange"], exportAs: ["thyPicker"] }, { kind: "component", type: DatePopup, selector: "date-popup", inputs: ["isRange", "showWeek", "format", "disabledDate", "minDate", "maxDate", "showToday", "showTime", "mustShowTime", "dateRender", "className", "panelMode", "value", "defaultPickerValue", "showShortcut", "shortcutPresets", "shortcutPosition", "flexible", "flexibleDateGranularity", "timestampPrecision", "timeZone"], outputs: ["disabledDateChange", "panelModeChange", "valueChange", "showShortcutChange", "shortcutPresetsChange", "flexibleDateGranularityChange", "calendarChange", "resultOk", "showTimePickerChange", "dateValueChange"], exportAs: ["datePopup"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ThyQuarterPicker, decorators: [{
             type: Component,
@@ -3803,7 +3803,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImpor
                             multi: true,
                             useExisting: forwardRef(() => ThyQuarterPicker)
                         }
-                    ], imports: [ThyPicker, DatePopup], template: "<thy-picker\n  #thyPicker\n  [isRange]=\"isRange\"\n  [value]=\"thyValue\"\n  [flexible]=\"flexible()\"\n  [flexibleDateGranularity]=\"flexibleDateGranularity\"\n  (valueChange)=\"onInputValueChange($event)\"\n  [open]=\"open()\"\n  [disabled]=\"thyDisabled\"\n  [format]=\"thyFormat()\"\n  [separator]=\"separator()\"\n  [mode]=\"thyMode\"\n  [allowClear]=\"thyAllowClear()\"\n  [className]=\"thyOriginClassName()\"\n  [autoFocus]=\"thyAutoFocus()\"\n  [placeholder]=\"placeholder()\"\n  [readonly]=\"thyReadonly()\"\n  [size]=\"thySize()\"\n  [timeZone]=\"thyTimeZone()\"\n  [suffixIcon]=\"thySuffixIcon()\"\n  [placement]=\"thyPlacement()\"\n  [hasBackdrop]=\"thyHasBackdrop()\"\n  (openChange)=\"onOpenChange($event)\"\n  (blur)=\"onBlur($event)\"\n  (inputChange)=\"onInputDate($event)\">\n  @if (isShowDatePopup) {\n    <date-popup\n      [attr.tabindex]=\"-1\"\n      [isRange]=\"isRange\"\n      [showWeek]=\"showWeek()\"\n      [panelMode]=\"panelMode\"\n      [flexible]=\"flexible()\"\n      [flexibleDateGranularity]=\"flexibleDateGranularity\"\n      [defaultPickerValue]=\"thyDefaultPickerValue()\"\n      (panelModeChange)=\"thyOnPanelChange.emit($event)\"\n      (showTimePickerChange)=\"onShowTimePickerChange($event)\"\n      [value]=\"thyValue\"\n      (valueChange)=\"onValueChange($event)\"\n      (calendarChange)=\"onCalendarChange($event)\"\n      [showTime]=\"thyShowTime()\"\n      [mustShowTime]=\"withTime\"\n      [format]=\"thyFormat()\"\n      [dateRender]=\"thyDateRender()\"\n      [disabledDate]=\"thyDisabledDate()\"\n      [minDate]=\"thyMinDate()\"\n      [maxDate]=\"thyMaxDate()\"\n      [showShortcut]=\"thyShowShortcut()\"\n      [shortcutPresets]=\"thyShortcutPresets()\"\n      [shortcutPosition]=\"thyShortcutPosition()\"\n      [timestampPrecision]=\"thyTimestampPrecision()\"\n      (dateValueChange)=\"onDateValueChange($event)\"\n      [className]=\"thyPanelClassName()\"\n      (resultOk)=\"onResultOk()\"\n      [timeZone]=\"thyTimeZone()\"></date-popup>\n  }\n</thy-picker>\n" }]
+                    ], imports: [ThyPicker, DatePopup], template: "<thy-picker\n  #thyPicker\n  [isRange]=\"isRange\"\n  [value]=\"thyValue\"\n  [flexible]=\"flexible()\"\n  [flexibleDateGranularity]=\"flexibleDateGranularity\"\n  (valueChange)=\"onInputValueChange($event)\"\n  [opened]=\"opened()\"\n  [disabled]=\"thyDisabled\"\n  [format]=\"thyFormat()\"\n  [separator]=\"separator()\"\n  [mode]=\"thyMode\"\n  [allowClear]=\"thyAllowClear()\"\n  [className]=\"thyOriginClassName()\"\n  [autoFocus]=\"thyAutoFocus()\"\n  [placeholder]=\"placeholder()\"\n  [readonly]=\"thyReadonly()\"\n  [size]=\"thySize()\"\n  [timeZone]=\"thyTimeZone()\"\n  [suffixIcon]=\"thySuffixIcon()\"\n  [placement]=\"thyPlacement()\"\n  [hasBackdrop]=\"thyHasBackdrop()\"\n  (openChange)=\"onOpenChange($event)\"\n  (blur)=\"onBlur($event)\"\n  (inputChange)=\"onInputDate($event)\">\n  @if (isShowDatePopup) {\n    <date-popup\n      [attr.tabindex]=\"-1\"\n      [isRange]=\"isRange\"\n      [showWeek]=\"showWeek()\"\n      [panelMode]=\"panelMode\"\n      [flexible]=\"flexible()\"\n      [flexibleDateGranularity]=\"flexibleDateGranularity\"\n      [defaultPickerValue]=\"thyDefaultPickerValue()\"\n      (panelModeChange)=\"thyOnPanelChange.emit($event)\"\n      (showTimePickerChange)=\"onShowTimePickerChange($event)\"\n      [value]=\"thyValue\"\n      (valueChange)=\"onValueChange($event)\"\n      (calendarChange)=\"onCalendarChange($event)\"\n      [showTime]=\"thyShowTime()\"\n      [mustShowTime]=\"withTime\"\n      [format]=\"thyFormat()\"\n      [dateRender]=\"thyDateRender()\"\n      [disabledDate]=\"thyDisabledDate()\"\n      [minDate]=\"thyMinDate()\"\n      [maxDate]=\"thyMaxDate()\"\n      [showShortcut]=\"thyShowShortcut()\"\n      [shortcutPresets]=\"thyShortcutPresets()\"\n      [shortcutPosition]=\"thyShortcutPosition()\"\n      [timestampPrecision]=\"thyTimestampPrecision()\"\n      (dateValueChange)=\"onDateValueChange($event)\"\n      [className]=\"thyPanelClassName()\"\n      (resultOk)=\"onResultOk()\"\n      [timeZone]=\"thyTimeZone()\"></date-popup>\n  }\n</thy-picker>\n" }]
         }], ctorParameters: () => [] });
 
 registerLocaleData(localeZhHans, 'zh-Hans');