chore: tooltip add animation

src/autocomplete/autocomplete.directive.ts

@@ -82,11 +82,8 @@ export class AutoCompleteDirective
 
   declare innerSelector: string;
 
-  @Output('auiAutocompleteShow')
-  override show = new EventEmitter<void>();
-
-  @Output('auiAutocompleteHide')
-  override hide = new EventEmitter<void>();
+  @Output('auiAutocompleteVisibleChange')
+  override visibleChange = new EventEmitter<boolean>();
 
   @Output('auiAutocompleteSelected')
   selected = new EventEmitter<string>();
@@ -135,11 +132,8 @@ export class AutoCompleteDirective
   }
 
   ngOnInit() {
-    this.show.subscribe(() => {
-      this.updateSuggestionsContext();
-    });
-    this.hide.subscribe(() => {
-      this.resetFocusedSuggestion();
+    this.visibleChange.pipe(takeUntil(this.destroy$)).subscribe(visible => {
+      this[visible ? 'updateSuggestionsContext' : 'resetFocusedSuggestion']();
     });
 
     if (this.ngControl) {
@@ -196,7 +190,7 @@ export class AutoCompleteDirective
   onInput(event: Event) {
     const value = (event.target as HTMLInputElement).value;
     this.inputValue$$.next(value);
-    this.createTooltip();
+    this.show();
   }
 
   onKeyDown(event: KeyboardEvent) {
@@ -219,7 +213,7 @@ export class AutoCompleteDirective
         }
         break;
       case 'Escape':
-        this.disposeTooltip();
+        this.hide();
         event.stopPropagation();
         event.preventDefault();
         break;
@@ -249,11 +243,11 @@ export class AutoCompleteDirective
     this.inputValue$$.next(isArrCtrl ? '' : value);
 
     this.selected.emit(value);
-    this.disposeTooltip();
+    this.hide();
   }
 
-  override createTooltip() {
-    super.createTooltip();
+  override show() {
+    super.show();
     this.autoFocusFirstSuggestion();
   }
 
@@ -281,7 +275,7 @@ export class AutoCompleteDirective
 
   private focusSuggestionDir(dir: 'down' | 'up') {
     if (!this.isCreated) {
-      this.createTooltip();
+      this.show();
       return;
     }
     const visibleSuggestions = this.autocomplete.suggestions.filter(

src/date-picker/date-picker/date-picker.component.ts

@@ -117,4 +117,11 @@ export class DatePickerComponent
     this.value = null;
     this.emitValue(null);
   }
+
+  visibleChange(visible: boolean) {
+    this.openChange.next(visible);
+    if (!visible) {
+      this.emitValue(this.value);
+    }
+  }
 }

src/date-picker/date-picker/date-picker.template.html

@@ -4,6 +4,7 @@
   [format]="format"
   style="display: flex"
   [auiTooltip]="template"
+  [auiDisableAnimation]="true"
   auiTooltipType="info"
   auiTooltipClass="date-picker-wrapper"
   [disabled]="!!disabled"
@@ -12,8 +13,7 @@
   [auiTooltipDisabled]="!!disabled"
   [auiTooltipHideOnClick]="true"
   [placeholder]="placeholder"
-  (auiTooltipHide)="openChange.next(false); emitValue(value)"
-  (auiTooltipShow)="openChange.next(true)"
+  (auiTooltipVisibleChange)="visibleChange($event)"
   (clear)="clearValue()"
   #tooltip="auiTooltip"
 ></aui-date-picker-trigger>
@@ -36,6 +36,6 @@
     [maxDate]="maxDate"
     (click)="$event.stopImmediatePropagation()"
     (clear)="clearValue()"
-    (confirm)="tooltip.disposeTooltip(); emitValue(value)"
+    (confirm)="tooltip.hide(); emitValue(value)"
   ></aui-date-picker-panel>
 </ng-template>

src/date-picker/range-picker/range-picker.component.ts

@@ -87,4 +87,11 @@ export class RangePickerComponent extends CommonFormControl<
     this.value = null;
     this.emitValue(null);
   }
+
+  visibleChange(visible: boolean) {
+    this.openChange.next(visible);
+    if (!visible) {
+      this.emitValue(this.value);
+    }
+  }
 }

src/date-picker/range-picker/range-picker.template.html

@@ -4,6 +4,7 @@
   [size]="size"
   [value]="value"
   [auiTooltip]="template"
+  [auiDisableAnimation]="true"
   [disabled]="!!disabled"
   style="display: flex"
   auiTooltipType="info"
@@ -12,8 +13,7 @@
   auiTooltipTrigger="click"
   [auiTooltipHideOnClick]="true"
   [auiTooltipDisabled]="!!disabled"
-  (auiTooltipHide)="openChange.next(false); emitValue(value)"
-  (auiTooltipShow)="openChange.next(true)"
+  (auiTooltipVisibleChange)="visibleChange($event)"
   (clear)="clearValue()"
   #tooltip="auiTooltip"
 ></aui-date-picker-trigger>
@@ -33,6 +33,6 @@
     [maxDate]="maxDate"
     (click)="$event.stopImmediatePropagation()"
     (clear)="clearValue()"
-    (confirm)="tooltip.disposeTooltip(); emitValue(value)"
+    (confirm)="tooltip.hide(); emitValue(value)"
   ></aui-date-range-picker-panel>
 </ng-template>

src/dropdown/dropdown.directive.ts

@@ -11,7 +11,7 @@ import {
   Renderer2,
   ViewContainerRef,
 } from '@angular/core';
-import { debounceTime } from 'rxjs';
+import { takeUntil } from 'rxjs';
 
 import { BaseTooltip, TooltipTrigger, TooltipType } from '../tooltip';
 
@@ -54,11 +54,8 @@ export class DropdownDirective extends BaseTooltip implements OnInit {
   @Input('auiDropdownHideOnClick')
   override hideOnClick = true;
 
-  @Output('auiDropdownShow')
-  override show = new EventEmitter<void>();
-
-  @Output('auiDropdownHide')
-  override hide = new EventEmitter<void>();
+  @Output('auiDropdownVisibleChange')
+  override visibleChange = new EventEmitter<boolean>();
 
   private _menu: MenuComponent;
 
@@ -78,16 +75,16 @@ export class DropdownDirective extends BaseTooltip implements OnInit {
   }
 
   ngOnInit() {
-    this.show.pipe(debounceTime(0)).subscribe(() => {
-      if (this.menu.lazyContent) {
-        this.menu.lazyContent.attach(this.lazyContentContext);
-        this.updatePosition();
-      }
-    });
-
-    this.hide.subscribe(() => {
+    this.visibleChange.pipe(takeUntil(this.destroy$)).subscribe(visible => {
       if (this.menu.lazyContent) {
-        this.menu.lazyContent.detach();
+        if (visible) {
+          setTimeout(() => {
+            this.menu.lazyContent.attach(this.lazyContentContext);
+            this.updatePosition();
+          });
+        } else {
+          this.menu.lazyContent.detach();
+        }
       }
     });
   }

src/dropdown/submenu/submenu.component.html

@@ -1,6 +1,7 @@
 <button
   [class]="className"
   [auiTooltip]="menu.template"
+  [auiDisableAnimation]="true"
   [auiTooltipDisabled]="disabled"
   [auiTooltipTrigger]="trigger"
   [auiTooltipHideOnClick]="true"

src/select/base-select.ts

@@ -294,11 +294,11 @@ export abstract class BaseSelect<T, V = T>
   }
 
   openOption() {
-    this.tooltipRef.createTooltip();
+    this.tooltipRef.show();
   }
 
   closeOption() {
-    this.tooltipRef.disposeTooltip();
+    this.tooltipRef.hide();
   }
 
   onShowOptions() {

src/select/multi-select/multi-select.component.html

@@ -3,12 +3,12 @@
   #selectRef
   #tooltipRef="auiTooltip"
   [auiTooltip]="templateRef"
+  [auiDisableAnimation]="true"
   [auiTooltipDisabled]="disabled"
   auiTooltipTrigger="click"
   auiTooltipPosition="bottom start"
   auiTooltipType="plain"
-  (auiTooltipShow)="onShowOptions()"
-  (auiTooltipHide)="onHideOptions()"
+  (auiTooltipVisibleChange)="onVisibleOptions($event)"
   (mousedown)="$event.preventDefault()"
   [style.max-height]="maxHeight"
 >

src/select/multi-select/multi-select.component.ts

@@ -265,15 +265,15 @@ export class MultiSelectComponent<T = unknown>
     );
   }
 
-  override onShowOptions() {
-    super.onShowOptions();
-    this.inputRef.nativeElement.focus();
-  }
-
-  override onHideOptions() {
-    super.onHideOptions();
-    this.inputRef.nativeElement.value = '';
-    this.renderer.removeStyle(this.inputRef.nativeElement, 'width');
+  onVisibleOptions(visible: boolean) {
+    if (visible) {
+      super.onShowOptions();
+      this.inputRef.nativeElement.focus();
+    } else {
+      super.onHideOptions();
+      this.inputRef.nativeElement.value = '';
+      this.renderer.removeStyle(this.inputRef.nativeElement, 'width');
+    }
   }
 
   override onInput(event: Event) {

src/select/select.component.html

@@ -7,12 +7,12 @@
   #selectRef
   #tooltipRef="auiTooltip"
   [auiTooltip]="templateRef"
+  [auiDisableAnimation]="true"
   [auiTooltipDisabled]="disabled"
   auiTooltipTrigger="click"
   auiTooltipPosition="bottom start"
   auiTooltipType="plain"
-  (auiTooltipShow)="onShowOptions()"
-  (auiTooltipHide)="onHideOptions()"
+  (auiTooltipVisibleChange)="onVisibleOptions($event)"
 >
   <aui-input-group>
     <input

src/select/select.component.ts

@@ -126,13 +126,13 @@ export class SelectComponent<T = unknown>
     );
   }
 
-  override onShowOptions() {
-    super.onShowOptions();
-  }
-
-  override onHideOptions() {
-    super.onHideOptions();
-    this.inputRef.elementRef.nativeElement.value = '';
+  onVisibleOptions(visible: boolean) {
+    if (visible) {
+      super.onShowOptions();
+    } else {
+      super.onHideOptions();
+      this.inputRef.elementRef.nativeElement.value = '';
+    }
   }
 
   protected override valueIn(v: T): T {

src/time-picker/component.ts

@@ -143,33 +143,33 @@ export class TimePickerComponent extends CommonFormControl<
     }
   }
 
-  handleTooltipOpen() {
-    this.open.emit();
-  }
+  handleTooltipVisible(visible: boolean) {
+    if (visible) {
+      this.open.emit();
+    } else {
+      if (this.onTouched) {
+        this.onTouched();
+      }
+      this.setValue(this.timeValue);
+      this.submit();
 
-  handleTooltipHide() {
-    if (this.onTouched) {
-      this.onTouched();
+      this.close.emit();
     }
-    this.setValue(this.timeValue);
-    this.submit();
-
-    this.close.emit();
   }
 
   openPanel() {
     if (this.tooltipRef.isCreated) {
       return;
     }
-    this.tooltipRef.createTooltip();
+    this.tooltipRef.show();
     this.open.next();
   }
 
   closePanel() {
     if (!this.tooltipRef.isCreated) {
       return;
     }
-    this.tooltipRef.disposeTooltip();
+    this.tooltipRef.hide();
     this.close.next();
   }
 

src/time-picker/template.html

@@ -4,12 +4,12 @@
   [class.isClearable]="clearable && timeFormatValue"
   #tooltipRef="auiTooltip"
   [auiTooltip]="template"
+  [auiDisableAnimation]="true"
   auiTooltipType="plain"
   auiTooltipTrigger="click"
   auiTooltipPosition="bottom start"
   [auiTooltipDisabled]="disabled"
-  (auiTooltipShow)="handleTooltipOpen()"
-  (auiTooltipHide)="handleTooltipHide()"
+  (auiTooltipVisibleChange)="handleTooltipVisible($event)"
 >
   <aui-input-group>
     <input