ngx-tethys 17.0.0-next.1 → 17.0.0-next.3

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

@@ -9,8 +9,8 @@ import { __decorate, __metadata } from 'tslib';
 import { MiniStore, MiniAction, reqAnimFrame, InputBoolean, getFlexiblePositions, scaleXMotion, scaleYMotion, scaleMotion } from 'ngx-tethys/core';
 import { CdkConnectedOverlay, CdkOverlayOrigin, OverlayModule } from '@angular/cdk/overlay';
 import { isValid } from 'date-fns';
-import { ThyButtonComponent, ThyButtonModule } from 'ngx-tethys/button';
-import { ThyIconComponent, ThyIconModule } from 'ngx-tethys/icon';
+import { ThyButton, ThyButtonModule } from 'ngx-tethys/button';
+import { ThyIcon, ThyIconModule } from 'ngx-tethys/icon';
 import { ThyInputDirective, ThyInputModule } from 'ngx-tethys/input';
 import { ThyPopoverModule } from 'ngx-tethys/popover';
 import { ThySharedModule } from 'ngx-tethys/shared';
@@ -425,13 +425,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.2", ngImpor
 
 const TIMEPICKER_CONTROL_VALUE_ACCESSOR = {
     provide: NG_VALUE_ACCESSOR,
-    useExisting: forwardRef(() => ThyInnerTimePickerComponent),
+    useExisting: forwardRef(() => ThyInnerTimePicker),
     multi: true
 };
 /**
  * @internal
  */
-class ThyInnerTimePickerComponent {
+class ThyInnerTimePicker {
     get isEditable() {
         return !(this.readonlyInput || this.disabled);
     }
@@ -607,10 +607,10 @@ class ThyInnerTimePickerComponent {
         this.minutes = padNumber(_value.getMinutes());
         this.seconds = padNumber(_value.getUTCSeconds());
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.2", ngImport: i0, type: ThyInnerTimePickerComponent, deps: [{ token: TimePickerConfig }, { token: i0.ChangeDetectorRef }, { token: ThyTimePickerStore }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.2", type: ThyInnerTimePickerComponent, isStandalone: true, selector: "thy-inner-time-picker", inputs: { hourStep: "hourStep", minuteStep: "minuteStep", secondsStep: "secondsStep", readonlyInput: "readonlyInput", disabled: "disabled", mousewheel: "mousewheel", arrowKeys: "arrowKeys", showSpinners: "showSpinners", showMeridian: "showMeridian", showMinutes: "showMinutes", showSeconds: "showSeconds", meridians: "meridians", min: "min", max: "max", hoursPlaceholder: "hoursPlaceholder", minutesPlaceholder: "minutesPlaceholder", secondsPlaceholder: "secondsPlaceholder" }, outputs: { isValid: "isValid" }, providers: [TIMEPICKER_CONTROL_VALUE_ACCESSOR, ThyTimePickerStore], usesOnChanges: true, ngImport: i0, template: "<table>\n  <tbody>\n    <tr class=\"text-center\" [hidden]=\"!showSpinners\">\n      <!-- increment hours button-->\n      <td>\n        <a class=\"btn btn-link\" [class.disabled]=\"!canIncrementHours || !isEditable\" (click)=\"changeHours(hourStep)\"\n          ><span class=\"thy-chevron thy-chevron-up\"></span\n        ></a>\n      </td>\n      <!-- divider -->\n      <td *ngIf=\"showMinutes\">&nbsp;&nbsp;&nbsp;</td>\n      <!-- increment minutes button -->\n      <td *ngIf=\"showMinutes\">\n        <a class=\"btn btn-link\" [class.disabled]=\"!canIncrementMinutes || !isEditable\" (click)=\"changeMinutes(minuteStep)\"\n          ><span class=\"thy-chevron thy-chevron-up\"></span\n        ></a>\n      </td>\n      <!-- divider -->\n      <td *ngIf=\"showSeconds\">&nbsp;</td>\n      <!-- increment seconds button -->\n      <td *ngIf=\"showSeconds\">\n        <a class=\"btn btn-link\" [class.disabled]=\"!canIncrementSeconds || !isEditable\" (click)=\"changeSeconds(secondsStep)\">\n          <span class=\"thy-chevron thy-chevron-up\"></span>\n        </a>\n      </td>\n      <!-- space between -->\n      <td *ngIf=\"showMeridian\">&nbsp;&nbsp;&nbsp;</td>\n      <!-- meridian placeholder-->\n      <td *ngIf=\"showMeridian\"></td>\n    </tr>\n    <tr>\n      <!-- hours -->\n      <td class=\"form-group\" [class.has-error]=\"invalidHours\">\n        <input\n          type=\"text\"\n          [class.is-invalid]=\"invalidHours\"\n          class=\"form-control text-center thy-time-picker-field\"\n          [placeholder]=\"hoursPlaceholder\"\n          maxlength=\"2\"\n          [readonly]=\"readonlyInput\"\n          [disabled]=\"disabled\"\n          [value]=\"hours\"\n          (wheel)=\"prevDef($event); changeHours(hourStep * wheelSign($event), 'wheel')\"\n          (keydown.ArrowUp)=\"changeHours(hourStep, 'key')\"\n          (keydown.ArrowDown)=\"changeHours(-hourStep, 'key')\"\n          (change)=\"updateHours($event.target.value)\"\n        />\n      </td>\n\n      <!-- divider -->\n      <td *ngIf=\"showMinutes\">&nbsp;:&nbsp;</td>\n      <!-- minutes -->\n      <td class=\"form-group\" *ngIf=\"showMinutes\" [class.has-error]=\"invalidMinutes\">\n        <input\n          type=\"text\"\n          [class.is-invalid]=\"invalidMinutes\"\n          class=\"form-control text-center thy-time-picker-field\"\n          [placeholder]=\"minutesPlaceholder\"\n          maxlength=\"2\"\n          [readonly]=\"readonlyInput\"\n          [disabled]=\"disabled\"\n          [value]=\"minutes\"\n          (wheel)=\"prevDef($event); changeMinutes(minuteStep * wheelSign($event), 'wheel')\"\n          (keydown.ArrowUp)=\"changeMinutes(minuteStep, 'key')\"\n          (keydown.ArrowDown)=\"changeMinutes(-minuteStep, 'key')\"\n          (change)=\"updateMinutes($event.target.value)\"\n        />\n      </td>\n      <!-- divider -->\n      <td *ngIf=\"showSeconds\">&nbsp;:&nbsp;</td>\n      <!-- seconds -->\n      <td class=\"form-group\" *ngIf=\"showSeconds\" [class.has-error]=\"invalidSeconds\">\n        <input\n          type=\"text\"\n          [class.is-invalid]=\"invalidSeconds\"\n          class=\"form-control text-center thy-time-picker-field\"\n          [placeholder]=\"secondsPlaceholder\"\n          maxlength=\"2\"\n          [readonly]=\"readonlyInput\"\n          [disabled]=\"disabled\"\n          [value]=\"seconds\"\n          (wheel)=\"prevDef($event); changeSeconds(secondsStep * wheelSign($event), 'wheel')\"\n          (keydown.ArrowUp)=\"changeSeconds(secondsStep, 'key')\"\n          (keydown.ArrowDown)=\"changeSeconds(-secondsStep, 'key')\"\n          (change)=\"updateSeconds($event.target.value)\"\n        />\n      </td>\n      <!-- space between -->\n      <td *ngIf=\"showMeridian\">&nbsp;&nbsp;&nbsp;</td>\n      <!-- meridian -->\n      <td *ngIf=\"showMeridian\">\n        <button\n          type=\"button\"\n          class=\"btn btn-default text-center\"\n          [disabled]=\"!isEditable || !canToggleMeridian\"\n          [class.disabled]=\"!isEditable || !canToggleMeridian\"\n          (click)=\"toggleMeridian()\"\n        >\n          {{ meridian }}\n        </button>\n      </td>\n    </tr>\n    <tr class=\"text-center\" [hidden]=\"!showSpinners\">\n      <!-- decrement hours button-->\n      <td>\n        <a class=\"btn btn-link\" [class.disabled]=\"!canDecrementHours || !isEditable\" (click)=\"changeHours(-hourStep)\">\n          <span class=\"thy-chevron thy-chevron-down\"></span>\n        </a>\n      </td>\n      <!-- divider -->\n      <td *ngIf=\"showMinutes\">&nbsp;&nbsp;&nbsp;</td>\n      <!-- decrement minutes button-->\n      <td *ngIf=\"showMinutes\">\n        <a class=\"btn btn-link\" [class.disabled]=\"!canDecrementMinutes || !isEditable\" (click)=\"changeMinutes(-minuteStep)\">\n          <span class=\"thy-chevron thy-chevron-down\"></span>\n        </a>\n      </td>\n      <!-- divider -->\n      <td *ngIf=\"showSeconds\">&nbsp;</td>\n      <!-- decrement seconds button-->\n      <td *ngIf=\"showSeconds\">\n        <a class=\"btn btn-link\" [class.disabled]=\"!canDecrementSeconds || !isEditable\" (click)=\"changeSeconds(-secondsStep)\">\n          <span class=\"thy-chevron thy-chevron-down\"></span>\n        </a>\n      </td>\n      <!-- space between -->\n      <td *ngIf=\"showMeridian\">&nbsp;&nbsp;&nbsp;</td>\n      <!-- meridian placeholder-->\n      <td *ngIf=\"showMeridian\"></td>\n    </tr>\n  </tbody>\n</table>\n", dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.2", ngImport: i0, type: ThyInnerTimePicker, deps: [{ token: TimePickerConfig }, { token: i0.ChangeDetectorRef }, { token: ThyTimePickerStore }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.2", type: ThyInnerTimePicker, isStandalone: true, selector: "thy-inner-time-picker", inputs: { hourStep: "hourStep", minuteStep: "minuteStep", secondsStep: "secondsStep", readonlyInput: "readonlyInput", disabled: "disabled", mousewheel: "mousewheel", arrowKeys: "arrowKeys", showSpinners: "showSpinners", showMeridian: "showMeridian", showMinutes: "showMinutes", showSeconds: "showSeconds", meridians: "meridians", min: "min", max: "max", hoursPlaceholder: "hoursPlaceholder", minutesPlaceholder: "minutesPlaceholder", secondsPlaceholder: "secondsPlaceholder" }, outputs: { isValid: "isValid" }, providers: [TIMEPICKER_CONTROL_VALUE_ACCESSOR, ThyTimePickerStore], usesOnChanges: true, ngImport: i0, template: "<table>\n  <tbody>\n    <tr class=\"text-center\" [hidden]=\"!showSpinners\">\n      <!-- increment hours button-->\n      <td>\n        <a class=\"btn btn-link\" [class.disabled]=\"!canIncrementHours || !isEditable\" (click)=\"changeHours(hourStep)\"\n          ><span class=\"thy-chevron thy-chevron-up\"></span\n        ></a>\n      </td>\n      <!-- divider -->\n      <td *ngIf=\"showMinutes\">&nbsp;&nbsp;&nbsp;</td>\n      <!-- increment minutes button -->\n      <td *ngIf=\"showMinutes\">\n        <a class=\"btn btn-link\" [class.disabled]=\"!canIncrementMinutes || !isEditable\" (click)=\"changeMinutes(minuteStep)\"\n          ><span class=\"thy-chevron thy-chevron-up\"></span\n        ></a>\n      </td>\n      <!-- divider -->\n      <td *ngIf=\"showSeconds\">&nbsp;</td>\n      <!-- increment seconds button -->\n      <td *ngIf=\"showSeconds\">\n        <a class=\"btn btn-link\" [class.disabled]=\"!canIncrementSeconds || !isEditable\" (click)=\"changeSeconds(secondsStep)\">\n          <span class=\"thy-chevron thy-chevron-up\"></span>\n        </a>\n      </td>\n      <!-- space between -->\n      <td *ngIf=\"showMeridian\">&nbsp;&nbsp;&nbsp;</td>\n      <!-- meridian placeholder-->\n      <td *ngIf=\"showMeridian\"></td>\n    </tr>\n    <tr>\n      <!-- hours -->\n      <td class=\"form-group\" [class.has-error]=\"invalidHours\">\n        <input\n          type=\"text\"\n          [class.is-invalid]=\"invalidHours\"\n          class=\"form-control text-center thy-time-picker-field\"\n          [placeholder]=\"hoursPlaceholder\"\n          maxlength=\"2\"\n          [readonly]=\"readonlyInput\"\n          [disabled]=\"disabled\"\n          [value]=\"hours\"\n          (wheel)=\"prevDef($event); changeHours(hourStep * wheelSign($event), 'wheel')\"\n          (keydown.ArrowUp)=\"changeHours(hourStep, 'key')\"\n          (keydown.ArrowDown)=\"changeHours(-hourStep, 'key')\"\n          (change)=\"updateHours($event.target.value)\"\n        />\n      </td>\n\n      <!-- divider -->\n      <td *ngIf=\"showMinutes\">&nbsp;:&nbsp;</td>\n      <!-- minutes -->\n      <td class=\"form-group\" *ngIf=\"showMinutes\" [class.has-error]=\"invalidMinutes\">\n        <input\n          type=\"text\"\n          [class.is-invalid]=\"invalidMinutes\"\n          class=\"form-control text-center thy-time-picker-field\"\n          [placeholder]=\"minutesPlaceholder\"\n          maxlength=\"2\"\n          [readonly]=\"readonlyInput\"\n          [disabled]=\"disabled\"\n          [value]=\"minutes\"\n          (wheel)=\"prevDef($event); changeMinutes(minuteStep * wheelSign($event), 'wheel')\"\n          (keydown.ArrowUp)=\"changeMinutes(minuteStep, 'key')\"\n          (keydown.ArrowDown)=\"changeMinutes(-minuteStep, 'key')\"\n          (change)=\"updateMinutes($event.target.value)\"\n        />\n      </td>\n      <!-- divider -->\n      <td *ngIf=\"showSeconds\">&nbsp;:&nbsp;</td>\n      <!-- seconds -->\n      <td class=\"form-group\" *ngIf=\"showSeconds\" [class.has-error]=\"invalidSeconds\">\n        <input\n          type=\"text\"\n          [class.is-invalid]=\"invalidSeconds\"\n          class=\"form-control text-center thy-time-picker-field\"\n          [placeholder]=\"secondsPlaceholder\"\n          maxlength=\"2\"\n          [readonly]=\"readonlyInput\"\n          [disabled]=\"disabled\"\n          [value]=\"seconds\"\n          (wheel)=\"prevDef($event); changeSeconds(secondsStep * wheelSign($event), 'wheel')\"\n          (keydown.ArrowUp)=\"changeSeconds(secondsStep, 'key')\"\n          (keydown.ArrowDown)=\"changeSeconds(-secondsStep, 'key')\"\n          (change)=\"updateSeconds($event.target.value)\"\n        />\n      </td>\n      <!-- space between -->\n      <td *ngIf=\"showMeridian\">&nbsp;&nbsp;&nbsp;</td>\n      <!-- meridian -->\n      <td *ngIf=\"showMeridian\">\n        <button\n          type=\"button\"\n          class=\"btn btn-default text-center\"\n          [disabled]=\"!isEditable || !canToggleMeridian\"\n          [class.disabled]=\"!isEditable || !canToggleMeridian\"\n          (click)=\"toggleMeridian()\"\n        >\n          {{ meridian }}\n        </button>\n      </td>\n    </tr>\n    <tr class=\"text-center\" [hidden]=\"!showSpinners\">\n      <!-- decrement hours button-->\n      <td>\n        <a class=\"btn btn-link\" [class.disabled]=\"!canDecrementHours || !isEditable\" (click)=\"changeHours(-hourStep)\">\n          <span class=\"thy-chevron thy-chevron-down\"></span>\n        </a>\n      </td>\n      <!-- divider -->\n      <td *ngIf=\"showMinutes\">&nbsp;&nbsp;&nbsp;</td>\n      <!-- decrement minutes button-->\n      <td *ngIf=\"showMinutes\">\n        <a class=\"btn btn-link\" [class.disabled]=\"!canDecrementMinutes || !isEditable\" (click)=\"changeMinutes(-minuteStep)\">\n          <span class=\"thy-chevron thy-chevron-down\"></span>\n        </a>\n      </td>\n      <!-- divider -->\n      <td *ngIf=\"showSeconds\">&nbsp;</td>\n      <!-- decrement seconds button-->\n      <td *ngIf=\"showSeconds\">\n        <a class=\"btn btn-link\" [class.disabled]=\"!canDecrementSeconds || !isEditable\" (click)=\"changeSeconds(-secondsStep)\">\n          <span class=\"thy-chevron thy-chevron-down\"></span>\n        </a>\n      </td>\n      <!-- space between -->\n      <td *ngIf=\"showMeridian\">&nbsp;&nbsp;&nbsp;</td>\n      <!-- meridian placeholder-->\n      <td *ngIf=\"showMeridian\"></td>\n    </tr>\n  </tbody>\n</table>\n", dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.2", ngImport: i0, type: ThyInnerTimePickerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.2", ngImport: i0, type: ThyInnerTimePicker, decorators: [{
             type: Component,
             args: [{ selector: 'thy-inner-time-picker', changeDetection: ChangeDetectionStrategy.OnPush, providers: [TIMEPICKER_CONTROL_VALUE_ACCESSOR, ThyTimePickerStore], standalone: true, imports: [NgIf], template: "<table>\n  <tbody>\n    <tr class=\"text-center\" [hidden]=\"!showSpinners\">\n      <!-- increment hours button-->\n      <td>\n        <a class=\"btn btn-link\" [class.disabled]=\"!canIncrementHours || !isEditable\" (click)=\"changeHours(hourStep)\"\n          ><span class=\"thy-chevron thy-chevron-up\"></span\n        ></a>\n      </td>\n      <!-- divider -->\n      <td *ngIf=\"showMinutes\">&nbsp;&nbsp;&nbsp;</td>\n      <!-- increment minutes button -->\n      <td *ngIf=\"showMinutes\">\n        <a class=\"btn btn-link\" [class.disabled]=\"!canIncrementMinutes || !isEditable\" (click)=\"changeMinutes(minuteStep)\"\n          ><span class=\"thy-chevron thy-chevron-up\"></span\n        ></a>\n      </td>\n      <!-- divider -->\n      <td *ngIf=\"showSeconds\">&nbsp;</td>\n      <!-- increment seconds button -->\n      <td *ngIf=\"showSeconds\">\n        <a class=\"btn btn-link\" [class.disabled]=\"!canIncrementSeconds || !isEditable\" (click)=\"changeSeconds(secondsStep)\">\n          <span class=\"thy-chevron thy-chevron-up\"></span>\n        </a>\n      </td>\n      <!-- space between -->\n      <td *ngIf=\"showMeridian\">&nbsp;&nbsp;&nbsp;</td>\n      <!-- meridian placeholder-->\n      <td *ngIf=\"showMeridian\"></td>\n    </tr>\n    <tr>\n      <!-- hours -->\n      <td class=\"form-group\" [class.has-error]=\"invalidHours\">\n        <input\n          type=\"text\"\n          [class.is-invalid]=\"invalidHours\"\n          class=\"form-control text-center thy-time-picker-field\"\n          [placeholder]=\"hoursPlaceholder\"\n          maxlength=\"2\"\n          [readonly]=\"readonlyInput\"\n          [disabled]=\"disabled\"\n          [value]=\"hours\"\n          (wheel)=\"prevDef($event); changeHours(hourStep * wheelSign($event), 'wheel')\"\n          (keydown.ArrowUp)=\"changeHours(hourStep, 'key')\"\n          (keydown.ArrowDown)=\"changeHours(-hourStep, 'key')\"\n          (change)=\"updateHours($event.target.value)\"\n        />\n      </td>\n\n      <!-- divider -->\n      <td *ngIf=\"showMinutes\">&nbsp;:&nbsp;</td>\n      <!-- minutes -->\n      <td class=\"form-group\" *ngIf=\"showMinutes\" [class.has-error]=\"invalidMinutes\">\n        <input\n          type=\"text\"\n          [class.is-invalid]=\"invalidMinutes\"\n          class=\"form-control text-center thy-time-picker-field\"\n          [placeholder]=\"minutesPlaceholder\"\n          maxlength=\"2\"\n          [readonly]=\"readonlyInput\"\n          [disabled]=\"disabled\"\n          [value]=\"minutes\"\n          (wheel)=\"prevDef($event); changeMinutes(minuteStep * wheelSign($event), 'wheel')\"\n          (keydown.ArrowUp)=\"changeMinutes(minuteStep, 'key')\"\n          (keydown.ArrowDown)=\"changeMinutes(-minuteStep, 'key')\"\n          (change)=\"updateMinutes($event.target.value)\"\n        />\n      </td>\n      <!-- divider -->\n      <td *ngIf=\"showSeconds\">&nbsp;:&nbsp;</td>\n      <!-- seconds -->\n      <td class=\"form-group\" *ngIf=\"showSeconds\" [class.has-error]=\"invalidSeconds\">\n        <input\n          type=\"text\"\n          [class.is-invalid]=\"invalidSeconds\"\n          class=\"form-control text-center thy-time-picker-field\"\n          [placeholder]=\"secondsPlaceholder\"\n          maxlength=\"2\"\n          [readonly]=\"readonlyInput\"\n          [disabled]=\"disabled\"\n          [value]=\"seconds\"\n          (wheel)=\"prevDef($event); changeSeconds(secondsStep * wheelSign($event), 'wheel')\"\n          (keydown.ArrowUp)=\"changeSeconds(secondsStep, 'key')\"\n          (keydown.ArrowDown)=\"changeSeconds(-secondsStep, 'key')\"\n          (change)=\"updateSeconds($event.target.value)\"\n        />\n      </td>\n      <!-- space between -->\n      <td *ngIf=\"showMeridian\">&nbsp;&nbsp;&nbsp;</td>\n      <!-- meridian -->\n      <td *ngIf=\"showMeridian\">\n        <button\n          type=\"button\"\n          class=\"btn btn-default text-center\"\n          [disabled]=\"!isEditable || !canToggleMeridian\"\n          [class.disabled]=\"!isEditable || !canToggleMeridian\"\n          (click)=\"toggleMeridian()\"\n        >\n          {{ meridian }}\n        </button>\n      </td>\n    </tr>\n    <tr class=\"text-center\" [hidden]=\"!showSpinners\">\n      <!-- decrement hours button-->\n      <td>\n        <a class=\"btn btn-link\" [class.disabled]=\"!canDecrementHours || !isEditable\" (click)=\"changeHours(-hourStep)\">\n          <span class=\"thy-chevron thy-chevron-down\"></span>\n        </a>\n      </td>\n      <!-- divider -->\n      <td *ngIf=\"showMinutes\">&nbsp;&nbsp;&nbsp;</td>\n      <!-- decrement minutes button-->\n      <td *ngIf=\"showMinutes\">\n        <a class=\"btn btn-link\" [class.disabled]=\"!canDecrementMinutes || !isEditable\" (click)=\"changeMinutes(-minuteStep)\">\n          <span class=\"thy-chevron thy-chevron-down\"></span>\n        </a>\n      </td>\n      <!-- divider -->\n      <td *ngIf=\"showSeconds\">&nbsp;</td>\n      <!-- decrement seconds button-->\n      <td *ngIf=\"showSeconds\">\n        <a class=\"btn btn-link\" [class.disabled]=\"!canDecrementSeconds || !isEditable\" (click)=\"changeSeconds(-secondsStep)\">\n          <span class=\"thy-chevron thy-chevron-down\"></span>\n        </a>\n      </td>\n      <!-- space between -->\n      <td *ngIf=\"showMeridian\">&nbsp;&nbsp;&nbsp;</td>\n      <!-- meridian placeholder-->\n      <td *ngIf=\"showMeridian\"></td>\n    </tr>\n  </tbody>\n</table>\n" }]
         }], ctorParameters: () => [{ type: TimePickerConfig }, { type: i0.ChangeDetectorRef }, { type: ThyTimePickerStore }], propDecorators: { hourStep: [{
@@ -655,7 +655,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.2", ngImpor
  * 时间选择面板组件
  * @name thy-time-picker-panel
  */
-class ThyTimePanelComponent {
+class ThyTimePanel {
     /**
      * 展示的日期格式，支持 'HH:mm:ss' | 'HH:mm' | 'mm:ss'
      * @type string
@@ -858,37 +858,37 @@ class ThyTimePanelComponent {
             this.resetScrollPosition();
         }, 200);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.2", ngImport: i0, type: ThyTimePanelComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.2", type: ThyTimePanelComponent, isStandalone: true, selector: "thy-time-picker-panel", inputs: { thyFormat: "thyFormat", thyHourStep: "thyHourStep", thyMinuteStep: "thyMinuteStep", thySecondStep: "thySecondStep", thyShowSelectNow: "thyShowSelectNow", thyShowOperations: "thyShowOperations" }, outputs: { thyPickChange: "thyPickChange", thyClosePanel: "thyClosePanel" }, host: { properties: { "class.thy-time-picker-panel-has-bottom-operation": "thyShowOperations", "class.thy-time-picker-panel-columns-2": "showColumnCount === 2", "class.thy-time-picker-panel-columns-3": "showColumnCount === 3" }, classAttribute: "thy-time-picker-panel" }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.2", ngImport: i0, type: ThyTimePanel, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.2", type: ThyTimePanel, isStandalone: true, selector: "thy-time-picker-panel", inputs: { thyFormat: "thyFormat", thyHourStep: "thyHourStep", thyMinuteStep: "thyMinuteStep", thySecondStep: "thySecondStep", thyShowSelectNow: "thyShowSelectNow", thyShowOperations: "thyShowOperations" }, outputs: { thyPickChange: "thyPickChange", thyClosePanel: "thyClosePanel" }, host: { properties: { "class.thy-time-picker-panel-has-bottom-operation": "thyShowOperations", "class.thy-time-picker-panel-columns-2": "showColumnCount === 2", "class.thy-time-picker-panel-columns-3": "showColumnCount === 3" }, classAttribute: "thy-time-picker-panel" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 multi: true,
-                useExisting: forwardRef(() => ThyTimePanelComponent)
+                useExisting: forwardRef(() => ThyTimePanel)
             }
-        ], viewQueries: [{ propertyName: "hourListRef", first: true, predicate: ["hourListElement"], descendants: true }, { propertyName: "minuteListRef", first: true, predicate: ["minuteListElement"], descendants: true }, { propertyName: "secondListRef", first: true, predicate: ["secondListElement"], descendants: true }], ngImport: i0, template: "<div class=\"{{ prefixCls }}-content\">\n  <ul #hourListElement *ngIf=\"showHourColumn\" class=\"{{ prefixCls }}-time-column {{ prefixCls }}-hour-column\">\n    <ng-container *ngFor=\"let time of hourRange; let i = index; trackBy: trackByFn\">\n      <li\n        class=\"{{ prefixCls }}-time-column-cell\"\n        [class.thy-time-picker-panel-time-column-cell-selected]=\"hour === time.value\"\n        (click)=\"pickHours(time, i)\"\n      >\n        <span class=\"{{ prefixCls }}-time-column-cell-inner\">{{ time.value | number: '2.0-0' }}</span>\n      </li>\n    </ng-container>\n  </ul>\n  <ul #minuteListElement *ngIf=\"showMinuteColumn\" class=\"{{ prefixCls }}-time-column {{ prefixCls }}-minute-column\">\n    <ng-container *ngFor=\"let time of minuteRange; let i = index; trackBy: trackByFn\">\n      <li\n        class=\"{{ prefixCls }}-time-column-cell\"\n        [class.thy-time-picker-panel-time-column-cell-selected]=\"minute === time.value\"\n        (click)=\"pickMinutes(time, i)\"\n      >\n        <span class=\"{{ prefixCls }}-time-column-cell-inner\">{{ time.value | number: '2.0-0' }}</span>\n      </li>\n    </ng-container>\n  </ul>\n  <ul #secondListElement *ngIf=\"showSecondColumn\" class=\"{{ prefixCls }}-time-column {{ prefixCls }}-second-column\">\n    <ng-container *ngFor=\"let time of secondRange; let i = index; trackBy: trackByFn\">\n      <li\n        class=\"{{ prefixCls }}-time-column-cell\"\n        [class.thy-time-picker-panel-time-column-cell-selected]=\"second === time.value\"\n        (click)=\"pickSeconds(time, i)\"\n      >\n        <span class=\"{{ prefixCls }}-time-column-cell-inner\">{{ time.value | number: '2.0-0' }}</span>\n      </li>\n    </ng-container>\n  </ul>\n</div>\n\n<div *ngIf=\"thyShowOperations\" class=\"{{ prefixCls }}-bottom-operation\">\n  <a *ngIf=\"thyShowSelectNow\" href=\"javascript:;\" class=\"{{ prefixCls }}-time-now\" (click)=\"selectNow()\">\u6B64\u523B</a>\n  <button class=\"{{ prefixCls }}-time-confirm\" thyButton=\"primary\" thySize=\"xs\" class=\"confirm\" (click)=\"confirmPickTime()\">\u786E\u5B9A</button>\n</div>\n", dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: ThyButtonComponent, selector: "thy-button,[thy-button],[thyButton]", inputs: ["thyButton", "thyType", "thyLoading", "thyLoadingText", "thySize", "thyIcon", "thyBlock"] }, { kind: "pipe", type: DecimalPipe, name: "number" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], viewQueries: [{ propertyName: "hourListRef", first: true, predicate: ["hourListElement"], descendants: true }, { propertyName: "minuteListRef", first: true, predicate: ["minuteListElement"], descendants: true }, { propertyName: "secondListRef", first: true, predicate: ["secondListElement"], descendants: true }], ngImport: i0, template: "<div class=\"{{ prefixCls }}-content\">\n  <ul #hourListElement *ngIf=\"showHourColumn\" class=\"{{ prefixCls }}-time-column {{ prefixCls }}-hour-column\">\n    <ng-container *ngFor=\"let time of hourRange; let i = index; trackBy: trackByFn\">\n      <li\n        class=\"{{ prefixCls }}-time-column-cell\"\n        [class.thy-time-picker-panel-time-column-cell-selected]=\"hour === time.value\"\n        (click)=\"pickHours(time, i)\"\n      >\n        <span class=\"{{ prefixCls }}-time-column-cell-inner\">{{ time.value | number: '2.0-0' }}</span>\n      </li>\n    </ng-container>\n  </ul>\n  <ul #minuteListElement *ngIf=\"showMinuteColumn\" class=\"{{ prefixCls }}-time-column {{ prefixCls }}-minute-column\">\n    <ng-container *ngFor=\"let time of minuteRange; let i = index; trackBy: trackByFn\">\n      <li\n        class=\"{{ prefixCls }}-time-column-cell\"\n        [class.thy-time-picker-panel-time-column-cell-selected]=\"minute === time.value\"\n        (click)=\"pickMinutes(time, i)\"\n      >\n        <span class=\"{{ prefixCls }}-time-column-cell-inner\">{{ time.value | number: '2.0-0' }}</span>\n      </li>\n    </ng-container>\n  </ul>\n  <ul #secondListElement *ngIf=\"showSecondColumn\" class=\"{{ prefixCls }}-time-column {{ prefixCls }}-second-column\">\n    <ng-container *ngFor=\"let time of secondRange; let i = index; trackBy: trackByFn\">\n      <li\n        class=\"{{ prefixCls }}-time-column-cell\"\n        [class.thy-time-picker-panel-time-column-cell-selected]=\"second === time.value\"\n        (click)=\"pickSeconds(time, i)\"\n      >\n        <span class=\"{{ prefixCls }}-time-column-cell-inner\">{{ time.value | number: '2.0-0' }}</span>\n      </li>\n    </ng-container>\n  </ul>\n</div>\n\n<div *ngIf=\"thyShowOperations\" class=\"{{ prefixCls }}-bottom-operation\">\n  <a *ngIf=\"thyShowSelectNow\" href=\"javascript:;\" class=\"{{ prefixCls }}-time-now\" (click)=\"selectNow()\">\u6B64\u523B</a>\n  <button class=\"{{ prefixCls }}-time-confirm\" thyButton=\"primary\" thySize=\"xs\" class=\"confirm\" (click)=\"confirmPickTime()\">\u786E\u5B9A</button>\n</div>\n", dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: ThyButton, selector: "thy-button,[thy-button],[thyButton]", inputs: ["thyButton", "thyType", "thyLoading", "thyLoadingText", "thySize", "thyIcon", "thyBlock"] }, { kind: "pipe", type: DecimalPipe, name: "number" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 __decorate([
     InputBoolean(),
     __metadata("design:type", Object)
-], ThyTimePanelComponent.prototype, "thyShowSelectNow", void 0);
+], ThyTimePanel.prototype, "thyShowSelectNow", void 0);
 __decorate([
     InputBoolean(),
     __metadata("design:type", Object)
-], ThyTimePanelComponent.prototype, "thyShowOperations", void 0);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.2", ngImport: i0, type: ThyTimePanelComponent, decorators: [{
+], ThyTimePanel.prototype, "thyShowOperations", void 0);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.2", ngImport: i0, type: ThyTimePanel, decorators: [{
             type: Component,
             args: [{ selector: 'thy-time-picker-panel', changeDetection: ChangeDetectionStrategy.OnPush, providers: [
                         {
                             provide: NG_VALUE_ACCESSOR,
                             multi: true,
-                            useExisting: forwardRef(() => ThyTimePanelComponent)
+                            useExisting: forwardRef(() => ThyTimePanel)
                         }
                     ], host: {
                         class: 'thy-time-picker-panel',
                         '[class.thy-time-picker-panel-has-bottom-operation]': `thyShowOperations`,
                         '[class.thy-time-picker-panel-columns-2]': `showColumnCount === 2`,
                         '[class.thy-time-picker-panel-columns-3]': `showColumnCount === 3`
-                    }, standalone: true, imports: [NgIf, NgFor, ThyButtonComponent, DecimalPipe], template: "<div class=\"{{ prefixCls }}-content\">\n  <ul #hourListElement *ngIf=\"showHourColumn\" class=\"{{ prefixCls }}-time-column {{ prefixCls }}-hour-column\">\n    <ng-container *ngFor=\"let time of hourRange; let i = index; trackBy: trackByFn\">\n      <li\n        class=\"{{ prefixCls }}-time-column-cell\"\n        [class.thy-time-picker-panel-time-column-cell-selected]=\"hour === time.value\"\n        (click)=\"pickHours(time, i)\"\n      >\n        <span class=\"{{ prefixCls }}-time-column-cell-inner\">{{ time.value | number: '2.0-0' }}</span>\n      </li>\n    </ng-container>\n  </ul>\n  <ul #minuteListElement *ngIf=\"showMinuteColumn\" class=\"{{ prefixCls }}-time-column {{ prefixCls }}-minute-column\">\n    <ng-container *ngFor=\"let time of minuteRange; let i = index; trackBy: trackByFn\">\n      <li\n        class=\"{{ prefixCls }}-time-column-cell\"\n        [class.thy-time-picker-panel-time-column-cell-selected]=\"minute === time.value\"\n        (click)=\"pickMinutes(time, i)\"\n      >\n        <span class=\"{{ prefixCls }}-time-column-cell-inner\">{{ time.value | number: '2.0-0' }}</span>\n      </li>\n    </ng-container>\n  </ul>\n  <ul #secondListElement *ngIf=\"showSecondColumn\" class=\"{{ prefixCls }}-time-column {{ prefixCls }}-second-column\">\n    <ng-container *ngFor=\"let time of secondRange; let i = index; trackBy: trackByFn\">\n      <li\n        class=\"{{ prefixCls }}-time-column-cell\"\n        [class.thy-time-picker-panel-time-column-cell-selected]=\"second === time.value\"\n        (click)=\"pickSeconds(time, i)\"\n      >\n        <span class=\"{{ prefixCls }}-time-column-cell-inner\">{{ time.value | number: '2.0-0' }}</span>\n      </li>\n    </ng-container>\n  </ul>\n</div>\n\n<div *ngIf=\"thyShowOperations\" class=\"{{ prefixCls }}-bottom-operation\">\n  <a *ngIf=\"thyShowSelectNow\" href=\"javascript:;\" class=\"{{ prefixCls }}-time-now\" (click)=\"selectNow()\">\u6B64\u523B</a>\n  <button class=\"{{ prefixCls }}-time-confirm\" thyButton=\"primary\" thySize=\"xs\" class=\"confirm\" (click)=\"confirmPickTime()\">\u786E\u5B9A</button>\n</div>\n" }]
+                    }, standalone: true, imports: [NgIf, NgFor, ThyButton, DecimalPipe], template: "<div class=\"{{ prefixCls }}-content\">\n  <ul #hourListElement *ngIf=\"showHourColumn\" class=\"{{ prefixCls }}-time-column {{ prefixCls }}-hour-column\">\n    <ng-container *ngFor=\"let time of hourRange; let i = index; trackBy: trackByFn\">\n      <li\n        class=\"{{ prefixCls }}-time-column-cell\"\n        [class.thy-time-picker-panel-time-column-cell-selected]=\"hour === time.value\"\n        (click)=\"pickHours(time, i)\"\n      >\n        <span class=\"{{ prefixCls }}-time-column-cell-inner\">{{ time.value | number: '2.0-0' }}</span>\n      </li>\n    </ng-container>\n  </ul>\n  <ul #minuteListElement *ngIf=\"showMinuteColumn\" class=\"{{ prefixCls }}-time-column {{ prefixCls }}-minute-column\">\n    <ng-container *ngFor=\"let time of minuteRange; let i = index; trackBy: trackByFn\">\n      <li\n        class=\"{{ prefixCls }}-time-column-cell\"\n        [class.thy-time-picker-panel-time-column-cell-selected]=\"minute === time.value\"\n        (click)=\"pickMinutes(time, i)\"\n      >\n        <span class=\"{{ prefixCls }}-time-column-cell-inner\">{{ time.value | number: '2.0-0' }}</span>\n      </li>\n    </ng-container>\n  </ul>\n  <ul #secondListElement *ngIf=\"showSecondColumn\" class=\"{{ prefixCls }}-time-column {{ prefixCls }}-second-column\">\n    <ng-container *ngFor=\"let time of secondRange; let i = index; trackBy: trackByFn\">\n      <li\n        class=\"{{ prefixCls }}-time-column-cell\"\n        [class.thy-time-picker-panel-time-column-cell-selected]=\"second === time.value\"\n        (click)=\"pickSeconds(time, i)\"\n      >\n        <span class=\"{{ prefixCls }}-time-column-cell-inner\">{{ time.value | number: '2.0-0' }}</span>\n      </li>\n    </ng-container>\n  </ul>\n</div>\n\n<div *ngIf=\"thyShowOperations\" class=\"{{ prefixCls }}-bottom-operation\">\n  <a *ngIf=\"thyShowSelectNow\" href=\"javascript:;\" class=\"{{ prefixCls }}-time-now\" (click)=\"selectNow()\">\u6B64\u523B</a>\n  <button class=\"{{ prefixCls }}-time-confirm\" thyButton=\"primary\" thySize=\"xs\" class=\"confirm\" (click)=\"confirmPickTime()\">\u786E\u5B9A</button>\n</div>\n" }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.NgZone }], propDecorators: { hourListRef: [{
                 type: ViewChild,
                 args: ['hourListElement', { static: false }]
@@ -920,7 +920,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.2", ngImpor
  * 时间选择组件
  * @name thy-time-picker
  */
-class ThyTimePickerComponent {
+class ThyTimePicker {
     /**
      * 展示的日期格式，支持 'HH:mm:ss' | 'HH:mm' | 'mm:ss'
      * @type string
@@ -1205,44 +1205,44 @@ class ThyTimePickerComponent {
     disabledUserOperation() {
         return this.disabled || this.readonly;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.2", ngImport: i0, type: ThyTimePickerComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.2", type: ThyTimePickerComponent, isStandalone: true, selector: "thy-time-picker", inputs: { thySize: "thySize", thyPlaceholder: "thyPlaceholder", thyPlacement: "thyPlacement", thyFormat: "thyFormat", thyHourStep: "thyHourStep", thyMinuteStep: "thyMinuteStep", thySecondStep: "thySecondStep", thyPopupClass: "thyPopupClass", thyBackdrop: "thyBackdrop", thyDisabled: "thyDisabled", thyReadonly: "thyReadonly", thyShowSelectNow: "thyShowSelectNow", thyAllowClear: "thyAllowClear" }, outputs: { thyOpenChange: "thyOpenChange" }, host: { properties: { "class.thy-time-picker-disabled": "disabled", "class.thy-time-picker-readonly": "readonly" }, classAttribute: "thy-time-picker" }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.2", ngImport: i0, type: ThyTimePicker, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.2", type: ThyTimePicker, isStandalone: true, selector: "thy-time-picker", inputs: { thySize: "thySize", thyPlaceholder: "thyPlaceholder", thyPlacement: "thyPlacement", thyFormat: "thyFormat", thyHourStep: "thyHourStep", thyMinuteStep: "thyMinuteStep", thySecondStep: "thySecondStep", thyPopupClass: "thyPopupClass", thyBackdrop: "thyBackdrop", thyDisabled: "thyDisabled", thyReadonly: "thyReadonly", thyShowSelectNow: "thyShowSelectNow", thyAllowClear: "thyAllowClear" }, outputs: { thyOpenChange: "thyOpenChange" }, host: { properties: { "class.thy-time-picker-disabled": "disabled", "class.thy-time-picker-readonly": "readonly" }, classAttribute: "thy-time-picker" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 multi: true,
-                useExisting: forwardRef(() => ThyTimePickerComponent)
+                useExisting: forwardRef(() => ThyTimePicker)
             }
-        ], viewQueries: [{ propertyName: "cdkConnectedOverlay", first: true, predicate: CdkConnectedOverlay, descendants: true, static: true }, { propertyName: "origin", first: true, predicate: ["origin"], descendants: true, static: true }, { propertyName: "inputRef", first: true, predicate: ["pickerInput"], descendants: true, static: true }, { propertyName: "overlayContainer", first: true, predicate: ["overlayContainer"], descendants: true }], ngImport: i0, template: "<span cdkOverlayOrigin #origin=\"cdkOverlayOrigin\" (click)=\"onInputPickerClick()\" class=\"{{ prefixCls }}-wrapper\">\n  <ng-container>\n    <input\n      #pickerInput\n      thyInput\n      class=\"form-control {{ prefixCls }}-input\"\n      [class.thy-input-disabled]=\"disabled\"\n      [class.thy-input-readonly]=\"readonly\"\n      [class.thy-time-picker-panel-opened]=\"openState\"\n      [(ngModel)]=\"showText\"\n      [thySize]=\"thySize\"\n      [disabled]=\"disabled\"\n      [readonly]=\"readonly\"\n      [placeholder]=\"thyPlaceholder\"\n      (blur)=\"onInputPickerBlur()\"\n      (keyup.enter)=\"onKeyupEnter()\"\n      (keyup.escape)=\"onKeyupEsc()\"\n      (ngModelChange)=\"onCustomizeInput($event)\" />\n    <ng-container *ngTemplateOutlet=\"rightIcon\"></ng-container>\n  </ng-container>\n</span>\n\n<ng-template #rightIcon>\n  <span class=\"{{ prefixCls }}-clear\" *ngIf=\"!disabled && thyAllowClear && !thyReadonly && showText\">\n    <thy-icon thyIconName=\"close-circle-bold-fill\" (click)=\"onClearTime($event)\" ngClass=\"remove-link remove-link-{{ thySize }}\"></thy-icon>\n  </span>\n  <span class=\"{{ prefixCls }}-icon\">\n    <thy-icon [thyIconName]=\"'clock-circle-moment'\" ngClass=\"remove-link-{{ thySize }}\"></thy-icon>\n  </span>\n</ng-template>\n\n<!-- Overlay -->\n<ng-template\n  cdkConnectedOverlay\n  [cdkConnectedOverlayOrigin]=\"origin\"\n  [cdkConnectedOverlayOpen]=\"openState\"\n  [cdkConnectedOverlayHasBackdrop]=\"thyBackdrop\"\n  [cdkConnectedOverlayPositions]=\"overlayPositions\"\n  cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n  cdkConnectedOverlayTransformOriginOn=\".thy-time-picker-container\"\n  (positionChange)=\"onPositionChange($event)\"\n  (backdropClick)=\"onClickBackdrop()\"\n  (overlayOutsideClick)=\"onOutsideClick($event)\"\n  (detach)=\"onOverlayDetach()\"\n  (attach)=\"onOverlayAttach()\">\n  <div\n    #overlayContainer\n    style=\"position: relative\"\n    [@scaleXMotion]=\"thyPlacement === 'left' || thyPlacement === 'right' ? 'enter' : 'void'\"\n    [@scaleYMotion]=\"thyPlacement === 'top' || thyPlacement === 'bottom' ? 'enter' : 'void'\"\n    [@scaleMotion]=\"\n      thyPlacement !== 'left' && thyPlacement !== 'right' && thyPlacement !== 'top' && thyPlacement !== 'bottom' ? 'enter' : 'void'\n    \"\n    class=\"thy-time-picker-container\">\n    <!-- Compatible for overlay that not support offset dynamically and immediately -->\n    <thy-time-picker-panel\n      [ngClass]=\"thyPopupClass\"\n      [(ngModel)]=\"value\"\n      [thyFormat]=\"format\"\n      [thyHourStep]=\"thyHourStep\"\n      [thyMinuteStep]=\"thyMinuteStep\"\n      [thySecondStep]=\"thySecondStep\"\n      [thyShowSelectNow]=\"thyShowSelectNow\"\n      (ngModelChange)=\"onPickTimeConfirm($event)\"\n      (thyPickChange)=\"onPickTime($event)\"\n      (thyClosePanel)=\"closeOverlay()\"></thy-time-picker-panel>\n  </div>\n</ng-template>\n", dependencies: [{ kind: "directive", type: CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "directive", type: ThyInputDirective, selector: "input[thyInput], select[thyInput], textarea[thyInput]", inputs: ["thySize"], exportAs: ["thyInput"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ThyIconComponent, selector: "thy-icon, [thy-icon]", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "component", type: ThyTimePanelComponent, selector: "thy-time-picker-panel", inputs: ["thyFormat", "thyHourStep", "thyMinuteStep", "thySecondStep", "thyShowSelectNow", "thyShowOperations"], outputs: ["thyPickChange", "thyClosePanel"] }], animations: [scaleXMotion, scaleYMotion, scaleMotion], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], viewQueries: [{ propertyName: "cdkConnectedOverlay", first: true, predicate: CdkConnectedOverlay, descendants: true, static: true }, { propertyName: "origin", first: true, predicate: ["origin"], descendants: true, static: true }, { propertyName: "inputRef", first: true, predicate: ["pickerInput"], descendants: true, static: true }, { propertyName: "overlayContainer", first: true, predicate: ["overlayContainer"], descendants: true }], ngImport: i0, template: "<span cdkOverlayOrigin #origin=\"cdkOverlayOrigin\" (click)=\"onInputPickerClick()\" class=\"{{ prefixCls }}-wrapper\">\n  <ng-container>\n    <input\n      #pickerInput\n      thyInput\n      class=\"form-control {{ prefixCls }}-input\"\n      [class.thy-input-disabled]=\"disabled\"\n      [class.thy-input-readonly]=\"readonly\"\n      [class.thy-time-picker-panel-opened]=\"openState\"\n      [(ngModel)]=\"showText\"\n      [thySize]=\"thySize\"\n      [disabled]=\"disabled\"\n      [readonly]=\"readonly\"\n      [placeholder]=\"thyPlaceholder\"\n      (blur)=\"onInputPickerBlur()\"\n      (keyup.enter)=\"onKeyupEnter()\"\n      (keyup.escape)=\"onKeyupEsc()\"\n      (ngModelChange)=\"onCustomizeInput($event)\" />\n    <ng-container *ngTemplateOutlet=\"rightIcon\"></ng-container>\n  </ng-container>\n</span>\n\n<ng-template #rightIcon>\n  <span class=\"{{ prefixCls }}-clear\" *ngIf=\"!disabled && thyAllowClear && !thyReadonly && showText\">\n    <thy-icon thyIconName=\"close-circle-bold-fill\" (click)=\"onClearTime($event)\" ngClass=\"remove-link remove-link-{{ thySize }}\"></thy-icon>\n  </span>\n  <span class=\"{{ prefixCls }}-icon\">\n    <thy-icon [thyIconName]=\"'clock-circle-moment'\" ngClass=\"remove-link-{{ thySize }}\"></thy-icon>\n  </span>\n</ng-template>\n\n<!-- Overlay -->\n<ng-template\n  cdkConnectedOverlay\n  [cdkConnectedOverlayOrigin]=\"origin\"\n  [cdkConnectedOverlayOpen]=\"openState\"\n  [cdkConnectedOverlayHasBackdrop]=\"thyBackdrop\"\n  [cdkConnectedOverlayPositions]=\"overlayPositions\"\n  cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n  cdkConnectedOverlayTransformOriginOn=\".thy-time-picker-container\"\n  (positionChange)=\"onPositionChange($event)\"\n  (backdropClick)=\"onClickBackdrop()\"\n  (overlayOutsideClick)=\"onOutsideClick($event)\"\n  (detach)=\"onOverlayDetach()\"\n  (attach)=\"onOverlayAttach()\">\n  <div\n    #overlayContainer\n    style=\"position: relative\"\n    [@scaleXMotion]=\"thyPlacement === 'left' || thyPlacement === 'right' ? 'enter' : 'void'\"\n    [@scaleYMotion]=\"thyPlacement === 'top' || thyPlacement === 'bottom' ? 'enter' : 'void'\"\n    [@scaleMotion]=\"\n      thyPlacement !== 'left' && thyPlacement !== 'right' && thyPlacement !== 'top' && thyPlacement !== 'bottom' ? 'enter' : 'void'\n    \"\n    class=\"thy-time-picker-container\">\n    <!-- Compatible for overlay that not support offset dynamically and immediately -->\n    <thy-time-picker-panel\n      [ngClass]=\"thyPopupClass\"\n      [(ngModel)]=\"value\"\n      [thyFormat]=\"format\"\n      [thyHourStep]=\"thyHourStep\"\n      [thyMinuteStep]=\"thyMinuteStep\"\n      [thySecondStep]=\"thySecondStep\"\n      [thyShowSelectNow]=\"thyShowSelectNow\"\n      (ngModelChange)=\"onPickTimeConfirm($event)\"\n      (thyPickChange)=\"onPickTime($event)\"\n      (thyClosePanel)=\"closeOverlay()\"></thy-time-picker-panel>\n  </div>\n</ng-template>\n", dependencies: [{ kind: "directive", type: CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "directive", type: ThyInputDirective, selector: "input[thyInput], select[thyInput], textarea[thyInput]", inputs: ["thySize"], exportAs: ["thyInput"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ThyIcon, selector: "thy-icon, [thy-icon]", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "component", type: ThyTimePanel, selector: "thy-time-picker-panel", inputs: ["thyFormat", "thyHourStep", "thyMinuteStep", "thySecondStep", "thyShowSelectNow", "thyShowOperations"], outputs: ["thyPickChange", "thyClosePanel"] }], animations: [scaleXMotion, scaleYMotion, scaleMotion], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 __decorate([
     InputBoolean(),
     __metadata("design:type", Boolean)
-], ThyTimePickerComponent.prototype, "thyBackdrop", void 0);
+], ThyTimePicker.prototype, "thyBackdrop", void 0);
 __decorate([
     InputBoolean(),
     __metadata("design:type", Boolean),
     __metadata("design:paramtypes", [Boolean])
-], ThyTimePickerComponent.prototype, "thyDisabled", null);
+], ThyTimePicker.prototype, "thyDisabled", null);
 __decorate([
     InputBoolean(),
     __metadata("design:type", Boolean),
     __metadata("design:paramtypes", [Boolean])
-], ThyTimePickerComponent.prototype, "thyReadonly", null);
+], ThyTimePicker.prototype, "thyReadonly", null);
 __decorate([
     InputBoolean(),
     __metadata("design:type", Object)
-], ThyTimePickerComponent.prototype, "thyShowSelectNow", void 0);
+], ThyTimePicker.prototype, "thyShowSelectNow", void 0);
 __decorate([
     InputBoolean(),
     __metadata("design:type", Object)
-], ThyTimePickerComponent.prototype, "thyAllowClear", void 0);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.2", ngImport: i0, type: ThyTimePickerComponent, decorators: [{
+], ThyTimePicker.prototype, "thyAllowClear", void 0);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.2", ngImport: i0, type: ThyTimePicker, decorators: [{
             type: Component,
             args: [{ selector: 'thy-time-picker', changeDetection: ChangeDetectionStrategy.OnPush, providers: [
                         {
                             provide: NG_VALUE_ACCESSOR,
                             multi: true,
-                            useExisting: forwardRef(() => ThyTimePickerComponent)
+                            useExisting: forwardRef(() => ThyTimePicker)
                         }
                     ], host: {
                         class: 'thy-time-picker',
@@ -1254,10 +1254,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.2", ngImpor
                         FormsModule,
                         NgTemplateOutlet,
                         NgIf,
-                        ThyIconComponent,
+                        ThyIcon,
                         NgClass,
                         CdkConnectedOverlay,
-                        ThyTimePanelComponent
+                        ThyTimePanel
                     ], animations: [scaleXMotion, scaleYMotion, scaleMotion], template: "<span cdkOverlayOrigin #origin=\"cdkOverlayOrigin\" (click)=\"onInputPickerClick()\" class=\"{{ prefixCls }}-wrapper\">\n  <ng-container>\n    <input\n      #pickerInput\n      thyInput\n      class=\"form-control {{ prefixCls }}-input\"\n      [class.thy-input-disabled]=\"disabled\"\n      [class.thy-input-readonly]=\"readonly\"\n      [class.thy-time-picker-panel-opened]=\"openState\"\n      [(ngModel)]=\"showText\"\n      [thySize]=\"thySize\"\n      [disabled]=\"disabled\"\n      [readonly]=\"readonly\"\n      [placeholder]=\"thyPlaceholder\"\n      (blur)=\"onInputPickerBlur()\"\n      (keyup.enter)=\"onKeyupEnter()\"\n      (keyup.escape)=\"onKeyupEsc()\"\n      (ngModelChange)=\"onCustomizeInput($event)\" />\n    <ng-container *ngTemplateOutlet=\"rightIcon\"></ng-container>\n  </ng-container>\n</span>\n\n<ng-template #rightIcon>\n  <span class=\"{{ prefixCls }}-clear\" *ngIf=\"!disabled && thyAllowClear && !thyReadonly && showText\">\n    <thy-icon thyIconName=\"close-circle-bold-fill\" (click)=\"onClearTime($event)\" ngClass=\"remove-link remove-link-{{ thySize }}\"></thy-icon>\n  </span>\n  <span class=\"{{ prefixCls }}-icon\">\n    <thy-icon [thyIconName]=\"'clock-circle-moment'\" ngClass=\"remove-link-{{ thySize }}\"></thy-icon>\n  </span>\n</ng-template>\n\n<!-- Overlay -->\n<ng-template\n  cdkConnectedOverlay\n  [cdkConnectedOverlayOrigin]=\"origin\"\n  [cdkConnectedOverlayOpen]=\"openState\"\n  [cdkConnectedOverlayHasBackdrop]=\"thyBackdrop\"\n  [cdkConnectedOverlayPositions]=\"overlayPositions\"\n  cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n  cdkConnectedOverlayTransformOriginOn=\".thy-time-picker-container\"\n  (positionChange)=\"onPositionChange($event)\"\n  (backdropClick)=\"onClickBackdrop()\"\n  (overlayOutsideClick)=\"onOutsideClick($event)\"\n  (detach)=\"onOverlayDetach()\"\n  (attach)=\"onOverlayAttach()\">\n  <div\n    #overlayContainer\n    style=\"position: relative\"\n    [@scaleXMotion]=\"thyPlacement === 'left' || thyPlacement === 'right' ? 'enter' : 'void'\"\n    [@scaleYMotion]=\"thyPlacement === 'top' || thyPlacement === 'bottom' ? 'enter' : 'void'\"\n    [@scaleMotion]=\"\n      thyPlacement !== 'left' && thyPlacement !== 'right' && thyPlacement !== 'top' && thyPlacement !== 'bottom' ? 'enter' : 'void'\n    \"\n    class=\"thy-time-picker-container\">\n    <!-- Compatible for overlay that not support offset dynamically and immediately -->\n    <thy-time-picker-panel\n      [ngClass]=\"thyPopupClass\"\n      [(ngModel)]=\"value\"\n      [thyFormat]=\"format\"\n      [thyHourStep]=\"thyHourStep\"\n      [thyMinuteStep]=\"thyMinuteStep\"\n      [thySecondStep]=\"thySecondStep\"\n      [thyShowSelectNow]=\"thyShowSelectNow\"\n      (ngModelChange)=\"onPickTimeConfirm($event)\"\n      (thyPickChange)=\"onPickTime($event)\"\n      (thyClosePanel)=\"closeOverlay()\"></thy-time-picker-panel>\n  </div>\n</ng-template>\n" }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }], propDecorators: { cdkConnectedOverlay: [{
                 type: ViewChild,
@@ -1301,7 +1301,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.2", ngImpor
                 type: Output
             }] } });
 
-const COMPONENTS = [ThyInnerTimePickerComponent, ThyTimePickerComponent, ThyTimePanelComponent];
+const COMPONENTS = [ThyInnerTimePicker, ThyTimePicker, ThyTimePanel];
 class ThyTimePickerModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.2", ngImport: i0, type: ThyTimePickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
     static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.2.2", ngImport: i0, type: ThyTimePickerModule, imports: [CommonModule,
@@ -1311,7 +1311,7 @@ class ThyTimePickerModule {
             ThyInputModule,
             OverlayModule,
             ThyPopoverModule,
-            ThyButtonModule, ThyInnerTimePickerComponent, ThyTimePickerComponent, ThyTimePanelComponent], exports: [ThyInnerTimePickerComponent, ThyTimePickerComponent, ThyTimePanelComponent] }); }
+            ThyButtonModule, ThyInnerTimePicker, ThyTimePicker, ThyTimePanel], exports: [ThyInnerTimePicker, ThyTimePicker, ThyTimePanel] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.2.2", ngImport: i0, type: ThyTimePickerModule, providers: [TimePickerConfig, ThyTimePickerStore], imports: [CommonModule,
             FormsModule,
             ThySharedModule,
@@ -1319,7 +1319,7 @@ class ThyTimePickerModule {
             ThyInputModule,
             OverlayModule,
             ThyPopoverModule,
-            ThyButtonModule, ThyTimePickerComponent, ThyTimePanelComponent] }); }
+            ThyButtonModule, ThyTimePicker, ThyTimePanel] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.2", ngImport: i0, type: ThyTimePickerModule, decorators: [{
             type: NgModule,
@@ -1344,5 +1344,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.2", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { TIMEPICKER_CONTROL_VALUE_ACCESSOR, ThyInnerTimePickerComponent, ThyTimePanelComponent, ThyTimePickerComponent, ThyTimePickerModule, ThyTimePickerStore, TimePickerConfig, changeTime, createDate, initialState, isHourInputValid, isInputLimitValid, isInputValid, isMinuteInputValid, isSecondInputValid, isValidDate, isValidLimit, padNumber, parseHours, parseMinutes, parseSeconds, parseTime, setTime };
+export { TIMEPICKER_CONTROL_VALUE_ACCESSOR, ThyInnerTimePicker, ThyTimePanel, ThyTimePicker, ThyTimePickerModule, ThyTimePickerStore, TimePickerConfig, changeTime, createDate, initialState, isHourInputValid, isInputLimitValid, isInputValid, isMinuteInputValid, isSecondInputValid, isValidDate, isValidLimit, padNumber, parseHours, parseMinutes, parseSeconds, parseTime, setTime };
 //# sourceMappingURL=ngx-tethys-time-picker.mjs.map