ngx-kit 8.0.2 → 8.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ngx-kit",
-  "version": "8.0.2",
+  "version": "8.2.0",
   "description": "Angular input components",
   "author": "Mohammadreza Samani <mr.samani1368@gmail.com>",
   "license": "MIT",
@@ -117,6 +117,10 @@
       "types": "./types/ngx-kit-time-picker.d.ts",
       "default": "./fesm2022/ngx-kit-time-picker.mjs"
     },
+    "./tooltip": {
+      "types": "./types/ngx-kit-tooltip.d.ts",
+      "default": "./fesm2022/ngx-kit-tooltip.mjs"
+    },
     "./virtual-scroll": {
       "types": "./types/ngx-kit-virtual-scroll.d.ts",
       "default": "./fesm2022/ngx-kit-virtual-scroll.mjs"

package/styles/all.css

@@ -12,41 +12,6 @@
   color-scheme: only dark;
 }
 
-dialog.ngx-ui-overlay::backdrop {
-  background: transparent;
-}
-
-@keyframes menu-enter {
-  from {
-    opacity: 0;
-    transform: scale(0.8);
-  }
-  to {
-    opacity: 1;
-    transform: none;
-  }
-}
-@keyframes menu-exit {
-  from {
-    opacity: 1;
-  }
-  to {
-    opacity: 0;
-  }
-}
-dialog.ngx-image-viewer-dialog {
-  border: none;
-  padding: 1rem;
-  max-inline-size: 96vw;
-  max-block-size: 96vh;
-  inline-size: min(900px, 96vw);
-  background: light-dark(#ffffff, #1c1c20);
-  border-radius: 12px;
-}
-dialog.ngx-image-viewer-dialog::backdrop {
-  background: rgba(0, 0, 0, 0.75);
-}
-
 /* ---------- confetti (success only) ---------- */
 .confetti {
   position: absolute;
@@ -75,3 +40,128 @@ dialog.ngx-image-viewer-dialog::backdrop {
     transform: translateY(340px) rotate(340deg);
   }
 }
+.ngx-tooltip {
+  --ngx-tooltip-bg: light-dark(#f4f4f5, #18181b);
+  --ngx-tooltip-fg: light-dark(#18181b, #f4f4f5);
+  --ngx-tooltip-border: light-dark(#63636336, #ffffff1a);
+  --ngx-tooltip-shadow: 0 10px 30px rgb(0 0 0 / 0.25), 0 2px 8px rgb(0 0 0 / 0.18);
+  --ngx-tooltip-font-size: 12px;
+  --ngx-tooltip-radius: 7px;
+  --ngx-tooltip-arrow-size: 6px;
+  --ngx-tooltip-max-height: 200px;
+  position: fixed;
+  inset: auto;
+  margin: 0;
+  z-index: 2147483000;
+  display: block;
+  max-width: min(360px, 100vw - 16px);
+  padding: 8px 10px;
+  box-sizing: border-box;
+  background: var(--ngx-tooltip-bg);
+  color: var(--ngx-tooltip-fg);
+  border: 1px solid var(--ngx-tooltip-border);
+  border-radius: var(--ngx-tooltip-radius);
+  box-shadow: var(--ngx-tooltip-shadow);
+  font-size: var(--ngx-tooltip-font-size);
+  font-weight: 450;
+  line-height: 1.45;
+  text-align: start;
+  user-select: none;
+  opacity: 0;
+  visibility: hidden;
+  transform: scale(0.96);
+  transition: opacity 120ms ease, transform 120ms cubic-bezier(0.2, 0.8, 0.2, 1), visibility 120ms linear;
+  overflow-wrap: anywhere;
+  overflow: visible;
+}
+.ngx-tooltip[data-placement^=top] {
+  transform-origin: bottom center;
+}
+.ngx-tooltip[data-placement^=bottom] {
+  transform-origin: top center;
+}
+.ngx-tooltip[data-placement^=left] {
+  transform-origin: right center;
+}
+.ngx-tooltip[data-placement^=right] {
+  transform-origin: left center;
+}
+.ngx-tooltip.ngx-tooltip-visible {
+  opacity: 1;
+  visibility: visible;
+  transform: scale(1);
+}
+.ngx-tooltip .ngx-tooltip-content {
+  position: relative;
+  white-space: pre;
+  max-height: var(--ngx-tooltip-max-height);
+  overflow: auto;
+  padding: 1px;
+}
+.ngx-tooltip .ngx-tooltip-content p {
+  margin: 0 0 6px;
+}
+.ngx-tooltip .ngx-tooltip-content p:last-child {
+  margin-bottom: 0;
+}
+.ngx-tooltip .ngx-tooltip-content code {
+  padding: 1px 4px;
+  border-radius: 4px;
+  background: rgba(255, 255, 255, 0.08);
+  font-family: "Cascadia Code", "SFMono-Regular", Consolas, monospace;
+  font-size: 0.9em;
+}
+.ngx-tooltip .ngx-tooltip-content strong {
+  font-weight: 650;
+}
+.ngx-tooltip .ngx-tooltip-content a {
+  color: inherit;
+  text-decoration: underline;
+  text-underline-offset: 2px;
+}
+.ngx-tooltip::before {
+  content: " ";
+  position: absolute;
+  width: calc(var(--ngx-tooltip-arrow-size) * 2);
+  height: calc(var(--ngx-tooltip-arrow-size) * 2);
+  background: var(--ngx-tooltip-bg);
+  border: 1px solid var(--ngx-tooltip-border);
+  transform: rotate(45deg);
+  pointer-events: none;
+}
+.ngx-tooltip[data-placement^=top]:before {
+  left: var(--ngx-tooltip-arrow-offset, 50%);
+  bottom: calc(var(--ngx-tooltip-arrow-size) * -1);
+  transform: translateX(-50%) rotate(45deg);
+  border-left: 0;
+  border-top: 0;
+}
+.ngx-tooltip[data-placement^=bottom]:before {
+  left: var(--ngx-tooltip-arrow-offset, 50%);
+  top: calc(var(--ngx-tooltip-arrow-size) * -1);
+  transform: translateX(-50%) rotate(45deg);
+  border-right: 0;
+  border-bottom: 0;
+}
+.ngx-tooltip[data-placement^=left]:before {
+  right: calc(var(--ngx-tooltip-arrow-size) * -1);
+  top: var(--ngx-tooltip-arrow-offset, 50%);
+  transform: translateY(-50%) rotate(45deg);
+  border-left: 0;
+  border-bottom: 0;
+}
+.ngx-tooltip[data-placement^=right]:before {
+  left: calc(var(--ngx-tooltip-arrow-size) * -1);
+  top: var(--ngx-tooltip-arrow-offset, 50%);
+  transform: translateY(-50%) rotate(45deg);
+  border-right: 0;
+  border-top: 0;
+}
+@media (prefers-reduced-motion: reduce) {
+  .ngx-tooltip {
+    transition: none;
+  }
+  .ngx-tooltip.ngx-tooltip-visible {
+    transform: none;
+  }
+}

package/styles/tootip.css

@@ -0,0 +1,120 @@
+.ngx-tooltip {
+  --ngx-tooltip-bg: light-dark(#f4f4f5, #18181b);
+  --ngx-tooltip-fg: light-dark(#18181b, #f4f4f5);
+  --ngx-tooltip-border: #ffffff1a;
+  --ngx-tooltip-shadow: 0 10px 30px rgb(0 0 0 / 0.25), 0 2px 8px rgb(0 0 0 / 0.18);
+  --ngx-tooltip-radius: 7px;
+  --ngx-tooltip-arrow-size: 6px;
+  position: fixed;
+  inset: auto;
+  margin: 0;
+  z-index: 2147483000;
+  display: block;
+  max-width: min(360px, 100vw - 16px);
+  padding: 8px 10px;
+  box-sizing: border-box;
+  background: var(--ngx-tooltip-bg);
+  color: var(--ngx-tooltip-fg);
+  border: 1px solid var(--ngx-tooltip-border);
+  border-radius: var(--ngx-tooltip-radius);
+  box-shadow: var(--ngx-tooltip-shadow);
+  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+  font-size: 12px;
+  font-weight: 450;
+  line-height: 1.45;
+  text-align: start;
+  pointer-events: none;
+  user-select: none;
+  opacity: 0;
+  visibility: hidden;
+  transform: scale(0.96);
+  transition: opacity 120ms ease, transform 120ms cubic-bezier(0.2, 0.8, 0.2, 1), visibility 120ms linear;
+  overflow-wrap: anywhere;
+}
+.ngx-tooltip[data-placement^=top] {
+  transform-origin: bottom center;
+}
+.ngx-tooltip[data-placement^=bottom] {
+  transform-origin: top center;
+}
+.ngx-tooltip[data-placement^=left] {
+  transform-origin: right center;
+}
+.ngx-tooltip[data-placement^=right] {
+  transform-origin: left center;
+}
+.ngx-tooltip.ngx-tooltip-visible {
+  opacity: 1;
+  visibility: visible;
+  transform: scale(1);
+}
+.ngx-tooltip .ngx-tooltip-content {
+  position: relative;
+  max-width: inherit;
+}
+.ngx-tooltip .ngx-tooltip-content p {
+  margin: 0 0 6px;
+}
+.ngx-tooltip .ngx-tooltip-content p:last-child {
+  margin-bottom: 0;
+}
+.ngx-tooltip .ngx-tooltip-content code {
+  padding: 1px 4px;
+  border-radius: 4px;
+  background: rgba(255, 255, 255, 0.08);
+  font-family: "Cascadia Code", "SFMono-Regular", Consolas, monospace;
+  font-size: 0.9em;
+}
+.ngx-tooltip .ngx-tooltip-content strong {
+  font-weight: 650;
+}
+.ngx-tooltip .ngx-tooltip-content a {
+  color: inherit;
+  text-decoration: underline;
+  text-underline-offset: 2px;
+}
+.ngx-tooltip .ngx-tooltip-arrow {
+  position: absolute;
+  width: calc(var(--ngx-tooltip-arrow-size) * 2);
+  height: calc(var(--ngx-tooltip-arrow-size) * 2);
+  background: var(--ngx-tooltip-bg);
+  border: 1px solid var(--ngx-tooltip-border);
+  transform: rotate(45deg);
+  pointer-events: none;
+}
+.ngx-tooltip[data-placement^=top] .ngx-tooltip-arrow {
+  left: var(--ngx-tooltip-arrow-offset, 50%);
+  bottom: calc(var(--ngx-tooltip-arrow-size) * -1);
+  transform: translateX(-50%) rotate(45deg);
+  border-left: 0;
+  border-top: 0;
+}
+.ngx-tooltip[data-placement^=bottom] .ngx-tooltip-arrow {
+  left: var(--ngx-tooltip-arrow-offset, 50%);
+  top: calc(var(--ngx-tooltip-arrow-size) * -1);
+  transform: translateX(-50%) rotate(45deg);
+  border-right: 0;
+  border-bottom: 0;
+}
+.ngx-tooltip[data-placement^=left] .ngx-tooltip-arrow {
+  right: calc(var(--ngx-tooltip-arrow-size) * -1);
+  top: var(--ngx-tooltip-arrow-offset, 50%);
+  transform: translateY(-50%) rotate(45deg);
+  border-left: 0;
+  border-bottom: 0;
+}
+.ngx-tooltip[data-placement^=right] .ngx-tooltip-arrow {
+  left: calc(var(--ngx-tooltip-arrow-size) * -1);
+  top: var(--ngx-tooltip-arrow-offset, 50%);
+  transform: translateY(-50%) rotate(45deg);
+  border-right: 0;
+  border-top: 0;
+}
+@media (prefers-reduced-motion: reduce) {
+  .ngx-tooltip {
+    transition: none;
+  }
+  .ngx-tooltip.ngx-tooltip-visible {
+    transform: none;
+  }
+}

package/tooltip/README.md

@@ -0,0 +1 @@
+# @ngx-kit/tooltip

package/types/ngx-kit-drag-resize.d.ts

@@ -1,5 +1,5 @@
 import * as _angular_core from '@angular/core';
-import { TemplateRef, ApplicationRef, EventEmitter, InjectionToken, OnInit, OnDestroy, Renderer2, ElementRef, AfterContentInit } from '@angular/core';
+import { TemplateRef, ApplicationRef, EventEmitter, InjectionToken, OnInit, OnDestroy, AfterContentInit, Renderer2, ElementRef } from '@angular/core';
 
 interface IPosition {
     x: number;
@@ -19,17 +19,6 @@ declare class DropListGroupRef {
 }
 
 declare class PlaceHolderRef {
-    /**
-     * Custom placeholder content, from `*ngxPlaceholder` inside the `ngxDropList`. When unset,
-     * `attach()` falls back to a shallow clone of the dragged element (previous behaviour).
-     *
-     * Example:
-     *
-     *   <div ngxDropList>
-     *     <span class="my-placeholder" *ngxPlaceholder></span>
-     *     ...
-     *   </div>
-     */
     tpl?: TemplateRef<unknown>;
     /** Set by `NgxPlaceholder` so the embedded view can join Angular's change-detection tree. */
     appRef?: ApplicationRef;
@@ -200,19 +189,6 @@ declare class DragDropService {
     readonly drags: _angular_core.WritableSignal<readonly DragRef<unknown>[]>;
     readonly dropLists: _angular_core.WritableSignal<readonly DropListRef<any>[]>;
     readonly activeDrag: _angular_core.WritableSignal<DragRef<unknown> | null>;
-    /**
-     * DOM-position registries, used to find the nearest enclosing list/group by walking real
-     * ancestor elements instead of Angular's element-injector tree.
-     *
-     * This matters for `ngTemplateOutlet`-based recursive trees (a list of items whose own
-     * children are rendered by re-invoking the SAME `<ng-template>`, as in a tree/outliner UI):
-     * each invocation gets a FRESH embedded view whose injector context is wherever the outlet
-     * was written in the template, not wherever its content ends up in the DOM. So `inject(TOKEN,
-     * {skipSelf})` from one recursion level can never see a provider from another level — the
-     * only fix within Angular's own DI is to manually thread `ngTemplateOutletInjector` through
-     * every recursive call, which isn't reasonable to require of every consumer of this library.
-     * A plain DOM walk has no such limitation: it only cares where elements actually ended up.
-     */
     private readonly listsByEl;
     private readonly groupsByEl;
     registerDragItem(ref: DragRef<any>): void;
@@ -224,7 +200,7 @@ declare class DragDropService {
     /** Nearest registered drop list starting at (and including) `start`, walking up the DOM. */
     findAncestorDropList(start: HTMLElement | ParentNode | null): DropListRef | null;
     /** Nearest registered drop-list group starting at (and including) `start`, walking up the DOM. */
-    findAncestorGroup(start: HTMLElement | ParentNode | null): DropListGroupRef | null;
+    findAncestorGroup(start: Node | null): DropListGroupRef | null;
     begin(ref: DragRef<any>): void;
     end(ref: DragRef<any>): void;
     cancelActive(): void;
@@ -247,6 +223,17 @@ declare class DragDropService {
     static ɵprov: _angular_core.ɵɵInjectableDeclaration<DragDropService>;
 }
 
+declare class DragPreviewRef {
+    tpl?: TemplateRef<unknown>;
+    /** Set by `ngxDragPreview` so the embedded view can join Angular's change-detection tree. */
+    appRef?: ApplicationRef;
+    element?: HTMLElement;
+    isCustom: boolean;
+    private _view?;
+    attach(dragEl: HTMLElement, rect: DOMRect): HTMLElement;
+    detach(): void;
+}
+
 type DragAxis = 'x' | 'y' | undefined;
 declare class DragRef<T = unknown> {
     data?: T;
@@ -266,6 +253,7 @@ declare class DragRef<T = unknown> {
     placeholder?: PlaceHolderRef;
     originDropList: DropListRef<T> | null;
     originIndex: number;
+    preview?: DragPreviewRef;
     readonly isDragging: _angular_core.WritableSignal<boolean>;
     readonly position: _angular_core.WritableSignal<IPosition>;
     private startPointer;
@@ -276,9 +264,6 @@ declare class DragRef<T = unknown> {
     private moveDx;
     private moveDy;
     private scrollCompensation;
-    private preview?;
-    private previewOffsetX;
-    private previewOffsetY;
     private sourceVisibility;
     private sourceDisplay;
     private sourcePointerEvents;
@@ -391,7 +376,7 @@ interface IResizableOutput {
 }
 
 declare const NGX_DRAGGABLE: InjectionToken<NgxDraggable<unknown>>;
-declare class NgxDraggable<T = unknown> implements OnInit, OnDestroy {
+declare class NgxDraggable<T = unknown> implements OnInit, OnDestroy, AfterContentInit {
     private readonly host;
     readonly disabled: _angular_core.ModelSignal<boolean>;
     /** Element whose rect constrains the drag. Now actually enforced. */
@@ -408,6 +393,7 @@ declare class NgxDraggable<T = unknown> implements OnInit, OnDestroy {
     /** Auto-scroll the nearest scrollable ancestor while dragging near its edge. */
     readonly autoScroll: _angular_core.InputSignal<boolean>;
     set data(v: T);
+    private readonly customPreview?;
     readonly dragStart: _angular_core.OutputEmitterRef<IPosition>;
     readonly dragMove: _angular_core.OutputEmitterRef<IPosition>;
     readonly dragEnd: _angular_core.OutputEmitterRef<IPosition>;
@@ -435,6 +421,7 @@ declare class NgxDraggable<T = unknown> implements OnInit, OnDestroy {
     protected readonly renderer: Renderer2;
     constructor(host: ElementRef<HTMLElement>);
     ngOnInit(): void;
+    ngAfterContentInit(): void;
     ngOnDestroy(): void;
     private pointerDown;
     private applyDragUpdate;
@@ -454,7 +441,7 @@ declare class NgxDraggable<T = unknown> implements OnInit, OnDestroy {
     private isOnHandle;
     private isInteractive;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgxDraggable<any>, never>;
-    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<NgxDraggable<any>, "[NgxDraggable],[ngxDraggable]", never, { "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "boundary": { "alias": "boundary"; "required": false; "isSignal": true; }; "dragRootElement": { "alias": "dragRootElement"; "required": false; "isSignal": true; }; "dragHandle": { "alias": "dragHandle"; "required": false; "isSignal": true; }; "lockAxis": { "alias": "lockAxis"; "required": false; "isSignal": true; }; "dragThreshold": { "alias": "dragThreshold"; "required": false; "isSignal": true; }; "keyboardStep": { "alias": "keyboardStep"; "required": false; "isSignal": true; }; "autoScroll": { "alias": "autoScroll"; "required": false; "isSignal": true; }; "data": { "alias": "data"; "required": false; }; }, { "disabled": "disabledChange"; "dragRootElement": "dragRootElementChange"; "dragHandle": "dragHandleChange"; "dragStart": "dragStart"; "dragMove": "dragMove"; "dragEnd": "dragEnd"; }, never, never, true, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<NgxDraggable<any>, "[NgxDraggable],[ngxDraggable]", never, { "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "boundary": { "alias": "boundary"; "required": false; "isSignal": true; }; "dragRootElement": { "alias": "dragRootElement"; "required": false; "isSignal": true; }; "dragHandle": { "alias": "dragHandle"; "required": false; "isSignal": true; }; "lockAxis": { "alias": "lockAxis"; "required": false; "isSignal": true; }; "dragThreshold": { "alias": "dragThreshold"; "required": false; "isSignal": true; }; "keyboardStep": { "alias": "keyboardStep"; "required": false; "isSignal": true; }; "autoScroll": { "alias": "autoScroll"; "required": false; "isSignal": true; }; "data": { "alias": "data"; "required": false; }; }, { "disabled": "disabledChange"; "dragRootElement": "dragRootElementChange"; "dragHandle": "dragHandleChange"; "dragStart": "dragStart"; "dragMove": "dragMove"; "dragEnd": "dragEnd"; }, ["customPreview"], never, true, never>;
 }
 
 declare class NgxResizable {
@@ -533,6 +520,17 @@ declare class NgxDropListGroup implements OnInit, OnDestroy {
 }
 
 declare const NGX_PLACEHOLDER: InjectionToken<PlaceHolderRef>;
+/**
+ * Custom placeholder content, from `*ngxPlaceholder` inside the `ngxDropList`.
+ *
+ * @example
+ *   ```html
+ *   <div ngxDropList>
+ *     <span class="my-placeholder" *ngxPlaceholder></span>
+ *     ...
+ *   </div>
+ *  ```
+ */
 declare class NgxPlaceholder {
     readonly tpl: TemplateRef<unknown>;
     readonly _ref: PlaceHolderRef;
@@ -542,6 +540,28 @@ declare class NgxPlaceholder {
     static ɵdir: _angular_core.ɵɵDirectiveDeclaration<NgxPlaceholder, "[NgxPlaceholder],[ngxPlaceholder]", never, {}, {}, never, never, true, never>;
 }
 
+declare const NGX_DRAG_PREVIEW: InjectionToken<DragPreviewRef>;
+/**
+ * Custom preview content, from `*ngxDragPreview` inside the `ngxDraggable`.
+ *
+ * @example
+ *  ```html
+ *  <div ngxDropList>
+ *   <div ngxDraggable>
+ *     <span class="my-preview" *ngxDragPreview></span>
+ *     ...
+ *   </div>
+ * </div>
+ *  ```
+ */
+declare class NgxDragPreview {
+    readonly tpl: TemplateRef<unknown>;
+    readonly _ref: DragPreviewRef;
+    constructor(tpl: TemplateRef<unknown>);
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgxDragPreview, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<NgxDragPreview, "[ngxDragPreview]", never, {}, {}, never, never, true, never>;
+}
+
 /**
  * True when `element` sits inside a right-to-left context.
  *
@@ -621,5 +641,5 @@ declare function transferArrayItem<T>(src: T[], dst: T[], from: number, to: numb
  */
 declare function copyArrayItem<T = any>(currentArray: T[], targetArray: T[], currentIndex: number, targetIndex: number): void;
 
-export { AutoScroller, DragDropService, DragRef, DropListGroupRef, DropListRef, NGX_DRAGGABLE, NGX_DROPLIST, NGX_DROPLIST_GROUP, NGX_PLACEHOLDER, NgxDraggable, NgxDropList, NgxDropListGroup, NgxPlaceholder, NgxResizable, PlaceHolderRef, adjustForZoom, checkBoundX, checkBoundY, clampResizeWithinBoundary, copyArrayItem, findScrollableAncestor, getPageZoom, getScrollPosition, isRtl, moveItemInArray, resolveLogicalDirection, transferArrayItem };
+export { AutoScroller, DragDropService, DragRef, DropListGroupRef, DropListRef, NGX_DRAGGABLE, NGX_DRAG_PREVIEW, NGX_DROPLIST, NGX_DROPLIST_GROUP, NGX_PLACEHOLDER, NgxDragPreview, NgxDraggable, NgxDropList, NgxDropListGroup, NgxPlaceholder, NgxResizable, PlaceHolderRef, adjustForZoom, checkBoundX, checkBoundY, clampResizeWithinBoundary, copyArrayItem, findScrollableAncestor, getPageZoom, getScrollPosition, isRtl, moveItemInArray, resolveLogicalDirection, transferArrayItem };
 export type { DragAxis, IDropEvent, IPosition, IResizableOutput, LogicalResizeDirection, ResizeDirection };

package/types/ngx-kit-message.d.ts

@@ -1,8 +1,9 @@
 import * as i0 from '@angular/core';
-import { EnvironmentProviders, Injector, EventEmitter, OnInit, AfterViewInit, ElementRef, ComponentRef, ApplicationRef, EnvironmentInjector, InjectionToken } from '@angular/core';
+import { EnvironmentProviders, Injector, EventEmitter, OnInit, AfterViewInit, ElementRef, InjectionToken } from '@angular/core';
 import * as ngx_kit_message from 'ngx-kit/message';
 import * as rxjs from 'rxjs';
 import { SafeHtml, DomSanitizer } from '@angular/platform-browser';
+import { OverlayRef, OverlayService } from 'ngx-kit/core';
 
 type MessageIcon = 'None' | 'success' | 'error' | 'warning' | 'info' | 'question' | 'loading';
 
@@ -34,13 +35,6 @@ interface IMessageOptions {
      * @default ''
      */
     html?: string | HTMLElement;
-    /**
-     * Whether or not  should show a full screen click-to-dismiss backdrop.
-     * Either a boolean value or a css background value (hex, rgb, rgba, url, etc.)
-     *
-     * @default true
-     */
-    backdrop?: boolean;
     icon?: MessageIcon;
     /**
      * Popup width, including paddings (`box-sizing: border-box`).
@@ -157,6 +151,9 @@ interface IMessageOptions {
      */
     showCloseButton?: boolean;
     containerClass?: string;
+    ariaLabel?: string;
+    ariaLabelledby?: string;
+    ariaDescribedby?: string;
 }
 
 declare function provideMessage(options?: IMessageOptions): EnvironmentProviders;
@@ -227,37 +224,24 @@ declare class NgxMessageComponent implements OnInit, AfterViewInit {
     }>;
     ngOnInit(): void;
     ngAfterViewInit(): void;
-    /**
-     * وقتی چند تا پیام هم‌زمان باز باشن، هرکدوم listener خودشو روی document
-     * داشت — پس یه فشردن Escape/Enter، رویداد رو به *همه‌شون* هم‌زمان می‌فرستاد،
-     * نه فقط آخرین پیامی که باز شده (رفتار طبیعیِ یه استکِ مودال باید این باشه
-     * که فقط بالاترین لایه به کیبورد واکنش نشون بده). این چک همون چیزیه که
-     * OverlayService با getLastDialog() برای اورلی‌ها انجام می‌ده.
-     */
     private isTopmost;
-    onScapeKey(event: Event): void;
     onEnterKey(event: Event): void;
     onConfirm(): void;
     onCancel(): void;
     onDeny(): void;
     close(): void;
-    onOutSideClick(): void;
-    innerOnClick(ev: Event): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<NgxMessageComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<NgxMessageComponent, "ngx-message", never, {}, {}, never, never, true, never>;
 }
 
 declare class NgxMessageService {
-    private appRef;
     private injector;
-    private envInjector;
-    private _doc;
-    alerts: Map<number, ComponentRef<NgxMessageComponent>>;
+    alerts: Map<number, OverlayRef<NgxMessageComponent>>;
+    protected readonly overlay: OverlayService;
     insertedId: number;
-    constructor(appRef: ApplicationRef, injector: Injector, envInjector: EnvironmentInjector, _doc: Document);
+    constructor(injector: Injector);
     show<T = any>(c?: IMessageOptions): MessageOutput<T>;
-    private removeDialogComponentFromBody;
-    private appendDialogComponentToBody;
+    private remove;
     closeAll(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<NgxMessageService, never>;
     static ɵprov: i0.ɵɵInjectableDeclaration<NgxMessageService>;

package/types/ngx-kit-tooltip.d.ts

@@ -0,0 +1,88 @@
+import * as _angular_core from '@angular/core';
+import { OnDestroy, InjectionToken, EnvironmentProviders } from '@angular/core';
+
+type NgxTooltipPlacement = 'top' | 'bottom' | 'left' | 'right';
+
+type NgxTooltipTrigger = 'hover' | 'focus' | 'hover-focus';
+
+declare class NgxTooltip implements OnDestroy {
+    private readonly configs;
+    private readonly elementRef;
+    private readonly renderer;
+    private readonly sanitizer;
+    private readonly doc;
+    private readonly element;
+    private tooltip?;
+    private showTimer?;
+    private hideTimer?;
+    private rafId;
+    private visible;
+    private destroyed;
+    private removeMouseEnter?;
+    private removeMouseLeave?;
+    private removeFocusIn?;
+    private removeFocusOut?;
+    private removeScroll?;
+    private removeResize?;
+    readonly tooltipText: _angular_core.InputSignal<string>;
+    readonly ngxTooltipUseOverlay: _angular_core.InputSignal<boolean>;
+    readonly ngxTooltipPlacement: _angular_core.InputSignal<NgxTooltipPlacement>;
+    readonly ngxTooltipOffset: _angular_core.InputSignal<number>;
+    readonly ngxTooltipDelay: _angular_core.InputSignal<number>;
+    readonly ngxTooltipHideDelay: _angular_core.InputSignal<number>;
+    readonly ngxTooltipAllowHtml: _angular_core.InputSignal<boolean>;
+    readonly ngxTooltipTrigger: _angular_core.InputSignal<NgxTooltipTrigger>;
+    /**
+     * If true, the tooltip automatically changes placement
+     * when there is not enough room.
+     */
+    readonly ngxTooltipFlip: _angular_core.InputSignal<boolean>;
+    /**
+     * Keeps the tooltip inside the viewport.
+     */
+    readonly ngxTooltipShift: _angular_core.InputSignal<boolean>;
+    constructor();
+    ngOnDestroy(): void;
+    private bindEvents;
+    private scheduleShow;
+    private scheduleHide;
+    private show;
+    private hide;
+    private getOrCreateTooltip;
+    private updateContent;
+    private applyDirection;
+    private schedulePositionUpdate;
+    private positionTooltip;
+    private calculatePosition;
+    private findBestPlacement;
+    private getPlacementCandidates;
+    private shiftIntoViewport;
+    private fitsViewport;
+    private intersectsViewport;
+    private parsePlacement;
+    private addViewportListeners;
+    private removeViewportListeners;
+    private removeListeners;
+    private hasContent;
+    private clearTimers;
+    private clearShowTimer;
+    private clearHideTimer;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgxTooltip, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<NgxTooltip, "[ngxTooltip]", never, { "tooltipText": { "alias": "ngxTooltip"; "required": true; "isSignal": true; }; "ngxTooltipUseOverlay": { "alias": "ngxTooltipUseOverlay"; "required": false; "isSignal": true; }; "ngxTooltipPlacement": { "alias": "ngxTooltipPlacement"; "required": false; "isSignal": true; }; "ngxTooltipOffset": { "alias": "ngxTooltipOffset"; "required": false; "isSignal": true; }; "ngxTooltipDelay": { "alias": "ngxTooltipDelay"; "required": false; "isSignal": true; }; "ngxTooltipHideDelay": { "alias": "ngxTooltipHideDelay"; "required": false; "isSignal": true; }; "ngxTooltipAllowHtml": { "alias": "ngxTooltipAllowHtml"; "required": false; "isSignal": true; }; "ngxTooltipTrigger": { "alias": "ngxTooltipTrigger"; "required": false; "isSignal": true; }; "ngxTooltipFlip": { "alias": "ngxTooltipFlip"; "required": false; "isSignal": true; }; "ngxTooltipShift": { "alias": "ngxTooltipShift"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+declare class NgxTooltipConfig {
+    placement: NgxTooltipPlacement;
+    offset: number;
+    delay: number;
+    hideDelay: number;
+    useHtml: boolean;
+    usePopOver: boolean;
+    trigger: NgxTooltipTrigger;
+}
+
+declare const NGX_TOOLTIP_CONFIG: InjectionToken<NgxTooltipConfig>;
+declare function provideTooltip(configs?: NgxTooltipConfig): EnvironmentProviders;
+
+export { NGX_TOOLTIP_CONFIG, NgxTooltip, provideTooltip };
+export type { NgxTooltipPlacement, NgxTooltipTrigger };