@shival99/z-ui 2.2.6 → 2.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shival99/z-ui",
-  "version": "2.2.6",
+  "version": "2.3.0",
   "description": "Z-UI: Modern Angular UI Component Library - A comprehensive, high-performance design system built with Angular 22, featuring 40+ customizable components with dark mode, accessibility, and enterprise-ready features.",
   "keywords": [
     "angular",
@@ -43,11 +43,15 @@
     "@angular/platform-browser": ">=22.0.0 <23.0.0",
     "@angular/router": ">=22.0.0 <23.0.0",
     "@dayflow/blossom-color-picker-angular": ">=1.0.0",
+    "@floating-ui/dom": ">=1.0.0",
     "@hugeicons/core-free-icons": ">=4.0.0",
     "@ng-icons/core": ">=33.0.0",
+    "@ng-icons/heroicons": ">=33.0.0",
+    "@ng-icons/iconoir": ">=33.0.0",
     "@ng-icons/iconsax": ">=33.0.0",
     "@ng-icons/lucide": ">=33.0.0",
     "@ng-icons/phosphor-icons": ">=33.0.0",
+    "@ng-icons/tabler-icons": ">=33.0.0",
     "@ngx-translate/core": ">=17.0.0",
     "@tanstack/angular-virtual": ">=6.0.2",
     "@shival99/ngx-sonner": ">=3.0.0",
@@ -283,6 +287,10 @@
       "types": "./types/shival99-z-ui-components-z-modal.d.ts",
       "default": "./fesm2022/shival99-z-ui-components-z-modal.mjs"
     },
+    "./components/z-overlay": {
+      "types": "./types/shival99-z-ui-components-z-overlay.d.ts",
+      "default": "./fesm2022/shival99-z-ui-components-z-overlay.mjs"
+    },
     "./components/z-pagination": {
       "types": "./types/shival99-z-ui-components-z-pagination.d.ts",
       "default": "./fesm2022/shival99-z-ui-components-z-pagination.mjs"

package/types/shival99-z-ui-components-z-button-group.d.ts

@@ -1,15 +1,23 @@
 import * as _angular_core from '@angular/core';
 import { InjectionToken } from '@angular/core';
-import { ClassValue } from 'clsx';
-import * as class_variance_authority_types from 'class-variance-authority/types';
 import { VariantProps } from 'class-variance-authority';
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import { ClassValue } from 'clsx';
+
+declare const zButtonGroupVariants: (props?: ({
+    zOrientation?: "horizontal" | "vertical" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+declare const zButtonGroupSeparatorVariants: (props?: ({
+    zOrientation?: "horizontal" | "vertical" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
 
 type ZButtonGroupValue = string | number;
+type ZButtonGroupVariants = VariantProps<typeof zButtonGroupVariants>;
+type ZButtonGroupSeparatorVariants = VariantProps<typeof zButtonGroupSeparatorVariants>;
 interface ZButtonGroupHost {
     _selectItem(value: ZButtonGroupValue, index: number): void;
     _isItemActive(value: ZButtonGroupValue): boolean;
 }
-declare const Z_BUTTON_GROUP: InjectionToken<ZButtonGroupHost>;
 
 declare class ZButtonGroupItemDirective {
     private readonly _group;
@@ -48,14 +56,7 @@ declare class ZButtonGroupComponent implements ZButtonGroupHost {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<ZButtonGroupComponent, "z-button-group", ["zButtonGroup"], { "zClass": { "alias": "zClass"; "required": false; "isSignal": true; }; "zOrientation": { "alias": "zOrientation"; "required": false; "isSignal": true; }; "zActive": { "alias": "zActive"; "required": false; "isSignal": true; }; }, { "zActive": "zActiveChange"; "zActiveIndexChange": "zActiveIndexChange"; "zActiveValueChange": "zActiveValueChange"; }, ["_items"], ["*"], true, never>;
 }
 
-declare const zButtonGroupVariants: (props?: ({
-    zOrientation?: "horizontal" | "vertical" | null | undefined;
-} & class_variance_authority_types.ClassProp) | undefined) => string;
-declare const zButtonGroupSeparatorVariants: (props?: ({
-    zOrientation?: "horizontal" | "vertical" | null | undefined;
-} & class_variance_authority_types.ClassProp) | undefined) => string;
-type ZButtonGroupVariants = VariantProps<typeof zButtonGroupVariants>;
-type ZButtonGroupSeparatorVariants = VariantProps<typeof zButtonGroupSeparatorVariants>;
+declare const Z_BUTTON_GROUP: InjectionToken<ZButtonGroupHost>;
 
 export { ZButtonGroupComponent, ZButtonGroupItemDirective, ZButtonGroupSeparatorComponent, Z_BUTTON_GROUP, zButtonGroupSeparatorVariants, zButtonGroupVariants };
 export type { ZButtonGroupHost, ZButtonGroupSeparatorVariants, ZButtonGroupValue, ZButtonGroupVariants };

package/types/shival99-z-ui-components-z-button.d.ts

@@ -2,8 +2,8 @@ import * as _angular_core from '@angular/core';
 import { OnDestroy } from '@angular/core';
 import { ZIcon, ZIconAnimationTrigger } from '@shival99/z-ui/components/z-icon';
 import { ClassValue } from 'clsx';
-import * as class_variance_authority_types from 'class-variance-authority/types';
 import { VariantProps } from 'class-variance-authority';
+import * as class_variance_authority_types from 'class-variance-authority/types';
 
 declare class ZButtonComponent implements OnDestroy {
     private readonly _elementRef;
@@ -39,6 +39,7 @@ declare const zButtonVariants: (props?: ({
     zLoading?: boolean | null | undefined;
     zDisabled?: boolean | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
+
 type ZButtonVariants = VariantProps<typeof zButtonVariants>;
 
 export { ZButtonComponent, zButtonVariants };

package/types/shival99-z-ui-components-z-command.d.ts

@@ -1,7 +1,7 @@
 import * as _shival99_z_ui_components_z_icon from '@shival99/z-ui/components/z-icon';
 import { ZIcon } from '@shival99/z-ui/components/z-icon';
 import * as _angular_core from '@angular/core';
-import { OnDestroy, TemplateRef, ElementRef } from '@angular/core';
+import { OnDestroy, ElementRef } from '@angular/core';
 import { ClassValue } from 'clsx';
 
 interface ZCommandItem<T = any> {
@@ -26,12 +26,10 @@ declare class ZCommandComponent implements OnDestroy {
     readonly zPlaceholder: _angular_core.InputSignal<string>;
     readonly zGroups: _angular_core.InputSignal<ZCommandGroup[]>;
     readonly zOverlay: _angular_core.InputSignal<"dark" | "blur">;
-    protected readonly dummyTemplateRef: _angular_core.Signal<TemplateRef<unknown> | undefined>;
     protected readonly searchInputRef: _angular_core.Signal<ElementRef<HTMLInputElement> | undefined>;
     private readonly _platformId;
     private readonly _host;
-    private readonly _overlay;
-    private readonly _viewContainerRef;
+    private readonly _overlayService;
     private readonly _cdr;
     private readonly _destroyRef;
     private readonly _zTranslate;

package/types/shival99-z-ui-components-z-drawer.d.ts

@@ -1,11 +1,10 @@
 import * as _angular_core from '@angular/core';
-import { TemplateRef, Type, WritableSignal, EventEmitter, ViewContainerRef, OnDestroy, AfterViewChecked, ComponentRef, EmbeddedViewRef, InjectionToken } from '@angular/core';
-import { BasePortalOutlet, CdkPortalOutlet, ComponentPortal, TemplatePortal } from '@angular/cdk/portal';
+import { TemplateRef, Type, WritableSignal, EventEmitter, ViewContainerRef, OnDestroy, AfterViewChecked, Injector, ComponentRef, EmbeddedViewRef, InjectionToken } from '@angular/core';
 import { ClassValue } from 'clsx';
 import { NgScrollbar } from 'ngx-scrollbar';
 import { ZIcon } from '@shival99/z-ui/components/z-icon';
 import { Observable } from 'rxjs';
-import { ComponentType, OverlayRef } from '@angular/cdk/overlay';
+import { ZOverlayRef } from '@shival99/z-ui/components/z-overlay';
 import * as class_variance_authority_types from 'class-variance-authority/types';
 
 declare class ZDrawerContentDirective {
@@ -26,7 +25,7 @@ declare class ZDrawerHeaderDirective {
     static ɵdir: _angular_core.ɵɵDirectiveDeclaration<ZDrawerHeaderDirective, "[z-drawer-header], [zDrawerHeader]", never, {}, {}, never, never, true, never>;
 }
 
-type ZDrawerContentType<T> = ComponentType<T> | TemplateRef<T> | string;
+type ZDrawerContentType<T> = Type<T> | TemplateRef<T> | string;
 type ZDrawerPlacement = 'left' | 'right' | 'top' | 'bottom';
 type ZDrawerScrollMode = 'drawer' | 'inner';
 type ZDrawerOnClickCallBack<T> = (instance: T, drawerRef?: unknown) => false | void | object;
@@ -126,7 +125,7 @@ declare class ZDrawerRef<T = any, R = any, U = any> {
     componentInstance: T | null;
     readonly loading: _angular_core.WritableSignal<boolean>;
     readonly zAfterClose: EventEmitter<R | undefined>;
-    constructor(_overlayRef: OverlayRef, _config: ZDrawerOptions<T, U>, _containerInstance: ZDrawerComponent<T, U>, _platformId: object);
+    constructor(_overlayRef: ZOverlayRef, _config: ZDrawerOptions<T, U>, _containerInstance: ZDrawerComponent<T, U>, _platformId: object);
     setLoading(value: boolean): void;
     close(result?: R): void;
     private _trigger;
@@ -140,7 +139,7 @@ declare const zDrawerVariants: (props?: ({
     shape?: "rounded" | "square" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 
-declare class ZDrawerComponent<T, U> extends BasePortalOutlet implements OnDestroy, AfterViewChecked {
+declare class ZDrawerComponent<T, U> implements OnDestroy, AfterViewChecked {
     readonly zOnOk: _angular_core.OutputEmitterRef<void>;
     readonly zOnCancel: _angular_core.OutputEmitterRef<void>;
     readonly zAfterClose: _angular_core.OutputEmitterRef<void>;
@@ -178,14 +177,12 @@ declare class ZDrawerComponent<T, U> extends BasePortalOutlet implements OnDestr
     private readonly _drawerRef;
     get drawerRef(): ZDrawerRef<T> | undefined;
     set drawerRef(value: ZDrawerRef<T> | undefined);
-    readonly portalOutlet: _angular_core.Signal<CdkPortalOutlet | undefined>;
-    protected readonly dummyTemplateRef: _angular_core.Signal<TemplateRef<unknown> | undefined>;
+    protected readonly contentOutlet: _angular_core.Signal<ViewContainerRef | undefined>;
     protected readonly mainContentRef: _angular_core.Signal<NgScrollbar | undefined>;
     protected readonly config: ZDrawerOptions<T, U>;
     private readonly _platformId;
     private readonly _host;
-    private readonly _overlay;
-    private readonly _viewContainerRef;
+    private readonly _overlayService;
     private readonly _cdr;
     private readonly _destroyRef;
     private readonly _zTranslate;
@@ -213,6 +210,7 @@ declare class ZDrawerComponent<T, U> extends BasePortalOutlet implements OnDestr
     private readonly _resizedHeight;
     ngAfterViewChecked(): void;
     private _checkScrollState;
+    onContentWheel(event: WheelEvent): void;
     onContentScroll(event: Event): void;
     protected readonly effectiveTitle: _angular_core.Signal<string | TemplateRef<unknown> | undefined>;
     protected readonly effectiveDescription: _angular_core.Signal<string | TemplateRef<unknown> | undefined>;
@@ -252,8 +250,8 @@ declare class ZDrawerComponent<T, U> extends BasePortalOutlet implements OnDestr
     onHostPointerDown(event: PointerEvent): void;
     isDestroyed(): boolean;
     getNativeElement(): HTMLElement;
-    attachComponentPortal<T>(portal: ComponentPortal<T>): ComponentRef<T>;
-    attachTemplatePortal<C>(portal: TemplatePortal<C>): EmbeddedViewRef<C>;
+    attachComponentPortal<C>(component: Type<C>, injector?: Injector): ComponentRef<C>;
+    attachTemplatePortal<C>(templateRef: TemplateRef<C>, context: C): EmbeddedViewRef<C>;
     onOkClick(): void;
     onCloseClick(): void;
     onBackdropClick(): void;
@@ -272,7 +270,7 @@ declare class ZDrawerComponent<T, U> extends BasePortalOutlet implements OnDestr
 }
 
 declare class ZDrawerService {
-    private readonly _overlay;
+    private readonly _overlayService;
     private readonly _injector;
     private readonly _platformId;
     private readonly _zIndexService;

package/types/shival99-z-ui-components-z-gallery.d.ts

@@ -5,7 +5,7 @@ import { ClassValue } from 'clsx';
 import { LayoutConfig, ThemeConfig, ControlVisibilityConfig, GroupVisibilityConfig, AutoActionConfig, ViewerConfig, PdfJsViewerComponent } from 'ng2-pdfjs-viewer';
 import * as _shival99_z_ui_components_z_gallery from '@shival99/z-ui/components/z-gallery';
 import { SafeHtml } from '@angular/platform-browser';
-import { OverlayRef } from '@angular/cdk/overlay';
+import { ZOverlayRef } from '@shival99/z-ui/components/z-overlay';
 import * as class_variance_authority_types from 'class-variance-authority/types';
 import { VariantProps } from 'class-variance-authority';
 
@@ -187,7 +187,7 @@ declare class ZGalleryComponent implements AfterViewInit {
     protected readonly headerControlHeight: _angular_core.Signal<"1.75rem" | "2rem" | "2.5rem" | "2.25rem">;
     protected readonly skeletonMediaHeight: _angular_core.Signal<"9rem" | "14rem" | "11rem">;
     protected readonly toggleIconSize: _angular_core.Signal<"14" | "16" | "20" | "18">;
-    protected readonly searchInputSize: _angular_core.Signal<"default" | "sm" | "lg">;
+    protected readonly searchInputSize: _angular_core.Signal<"sm" | "default" | "lg">;
     protected readonly filteredFiles: _angular_core.Signal<ZGalleryFile[]>;
     protected readonly selectedIds: _angular_core.Signal<Set<string>>;
     protected readonly isAllSelected: _angular_core.Signal<boolean>;
@@ -358,14 +358,14 @@ declare class ZGalleryPreviewRef {
     private _closed;
     componentInstance: ZGalleryPreviewComponent | null;
     readonly zAfterClose: EventEmitter<void>;
-    constructor(_overlayRef: OverlayRef | null);
+    constructor(_overlayRef: ZOverlayRef | null);
     close(): void;
 }
 
 declare class ZGalleryPreviewService {
     private readonly _document;
     private readonly _injector;
-    private readonly _overlay;
+    private readonly _overlayService;
     private readonly _platformId;
     private readonly _zIndexService;
     open(file: ZGalleryFile, options?: Omit<ZGalleryPreviewOptions, 'file'>): ZGalleryPreviewRef;
@@ -383,16 +383,16 @@ declare const isPreviewable: (file: ZGalleryFile) => boolean;
 declare const isImage: (file: ZGalleryFile) => boolean;
 
 declare const zGalleryVariants: (props?: ({
-    zSize?: "default" | "sm" | "lg" | null | undefined;
+    zSize?: "sm" | "default" | "lg" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 type ZGalleryVariants = VariantProps<typeof zGalleryVariants>;
 declare const zGalleryItemVariants: (props?: ({
     zMode?: "grid" | "list" | null | undefined;
-    zSize?: "default" | "sm" | "lg" | null | undefined;
+    zSize?: "sm" | "default" | "lg" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 type ZGalleryItemVariants = VariantProps<typeof zGalleryItemVariants>;
 declare const zGalleryFileIconVariants: (props?: ({
-    zSize?: "default" | "sm" | "lg" | null | undefined;
+    zSize?: "sm" | "default" | "lg" | null | undefined;
     zMode?: "grid" | "list" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 type ZGalleryFileIconVariants = VariantProps<typeof zGalleryFileIconVariants>;

package/types/shival99-z-ui-components-z-icon.d.ts

@@ -2,6 +2,12 @@ import * as _angular_core from '@angular/core';
 import { OnDestroy, ViewContainerRef, Type, EnvironmentProviders } from '@angular/core';
 import { ClassValue } from 'clsx';
 import * as hugeIcons from '@hugeicons/core-free-icons';
+import * as heroMicroIcons from '@ng-icons/heroicons/micro';
+import * as heroMiniIcons from '@ng-icons/heroicons/mini';
+import * as heroOutlineIcons from '@ng-icons/heroicons/outline';
+import * as heroSolidIcons from '@ng-icons/heroicons/solid';
+import * as iconoirRegularIcons from '@ng-icons/iconoir/regular';
+import * as iconoirSolidIcons from '@ng-icons/iconoir/solid';
 import * as saxBoldIcons from '@ng-icons/iconsax/bold';
 import * as saxOutlineIcons from '@ng-icons/iconsax/outline';
 import * as lucideIcons from '@ng-icons/lucide';
@@ -11,6 +17,8 @@ import * as phosphorFillIcons from '@ng-icons/phosphor-icons/fill';
 import * as phosphorLightIcons from '@ng-icons/phosphor-icons/light';
 import * as phosphorRegularIcons from '@ng-icons/phosphor-icons/regular';
 import * as phosphorThinIcons from '@ng-icons/phosphor-icons/thin';
+import * as tablerIcons from '@ng-icons/tabler-icons';
+import * as tablerFillIcons from '@ng-icons/tabler-icons/fill';
 import * as animatedIcons from 'ng-animated-icons';
 import * as class_variance_authority_types from 'class-variance-authority/types';
 import { VariantProps } from 'class-variance-authority';
@@ -20,6 +28,9 @@ type ZIconAnimationTrigger = 'manual' | 'hover' | 'focus' | 'interaction' | 'alw
 type ZLucideIcon = Extract<keyof typeof lucideIcons, `lucide${string}`>;
 type ZSaxIcon = Extract<keyof typeof saxBoldIcons | keyof typeof saxOutlineIcons, `sax${string}`>;
 type ZPhosphorIcon = Extract<keyof typeof phosphorRegularIcons | keyof typeof phosphorBoldIcons | keyof typeof phosphorFillIcons | keyof typeof phosphorLightIcons | keyof typeof phosphorThinIcons | keyof typeof phosphorDuotoneIcons, `phosphor${string}`>;
+type ZTablerIcon = Extract<keyof typeof tablerIcons | keyof typeof tablerFillIcons, `tabler${string}`>;
+type ZHeroIcon = Extract<keyof typeof heroMicroIcons | keyof typeof heroMiniIcons | keyof typeof heroOutlineIcons | keyof typeof heroSolidIcons, `hero${string}`>;
+type ZIconoirIcon = Extract<keyof typeof iconoirRegularIcons | keyof typeof iconoirSolidIcons, `iconoir${string}`>;
 /**
  * HugeIcons exports are PascalCase with an `Icon` suffix (e.g. `HeartIcon`,
  * `Home01Icon`). We re-expose them with a `huge` prefix to stay consistent
@@ -37,13 +48,22 @@ type ZHugeIcon = {
  * Examples: `brandGithub`, `brandSlackWordmark`, `brandFigmaColor`.
  */
 type ZBrandIcon = `brand${string}`;
+/**
+ * Optional bundled icon overrides used before the CDN loader fallback.
+ *
+ * The default registry is intentionally empty so icon families remain lazy.
+ */
 declare const Z_ICONS: {};
-type ZIcon = ZLucideIcon | ZSaxIcon | ZPhosphorIcon | ZHugeIcon | ZBrandIcon;
+/**
+ * Names accepted by `z-icon`, covering every icon family configured by the
+ * default loader and preserving each family's style suffix conventions.
+ */
+type ZIcon = ZLucideIcon | ZSaxIcon | ZPhosphorIcon | ZTablerIcon | ZHeroIcon | ZIconoirIcon | ZHugeIcon | ZBrandIcon;
 
 declare class ZIconComponent implements OnDestroy {
     readonly class: _angular_core.InputSignal<ClassValue>;
     readonly zType: _angular_core.InputSignal<ZIcon | undefined>;
-    readonly zAnimatedType: _angular_core.InputSignal<("accessibility" | "activity" | "play" | "airplay" | "check" | "alarm-clock-check" | "clock" | "alarm-clock" | "alarm-clock-off" | "align-horizontal-space-around" | "align-vertical-space-around" | "anvil" | "archive" | "arrow-big-down-dash" | "arrow-big-down" | "arrow-big-left-dash" | "arrow-big-left" | "arrow-big-right-dash" | "arrow-big-right" | "arrow-big-up-dash" | "arrow-big-up" | "arrow-down-01" | "arrow-down-10" | "arrow-down-a-z" | "arrow-down" | "arrow-down-left" | "arrow-down-right" | "arrow-down-z-a" | "arrow-left" | "arrow-left-right" | "arrow-right" | "arrow-right-left" | "arrow-up-01" | "arrow-up-10" | "arrow-up-a-z" | "arrow-up" | "arrow-up-left" | "arrow-up-right" | "arrow-up-z-a" | "award" | "x" | "axe" | "axis-3d" | "badge-alert" | "badge-check" | "badge-question-mark" | "battery-charging" | "battery-full" | "battery" | "battery-low" | "battery-medium" | "battery-warning" | "bean-off" | "beer-off" | "bell" | "bell-off" | "bell-ring" | "between-horizontal-end" | "between-horizontal-start" | "between-vertical-end" | "between-vertical-start" | "binary" | "blend" | "blocks" | "bluetooth-off" | "bold" | "bolt" | "bone" | "book-a" | "book-audio" | "book-check" | "book-dashed" | "book-down" | "book-headphones" | "heart" | "book-heart" | "book" | "book-image" | "key" | "book-key" | "book-lock" | "book-marked" | "minus" | "book-minus" | "book-open-check" | "book-open-text" | "plus" | "book-plus" | "book-text" | "book-type" | "book-up-2" | "book-up" | "user" | "book-user" | "book-x" | "bookmark-check" | "bookmark" | "bookmark-minus" | "bookmark-plus" | "bookmark-x" | "bot" | "bot-off" | "boxes" | "cog" | "brain-cog" | "briefcase-business" | "briefcase-conveyor-belt" | "briefcase" | "briefcase-medical" | "brush-cleaning" | "brush" | "bug-off" | "calendar-check-2" | "calendar-check" | "calendar-cog" | "calendar-days" | "calendar-off" | "calendar-sync" | "camera-off" | "candy-off" | "captions-off" | "cast" | "cctv" | "chart-bar-decreasing" | "chart-bar" | "chart-bar-increasing" | "chart-column-decreasing" | "chart-column" | "chart-column-increasing" | "chart-gantt" | "chart-line" | "chart-no-axes-column-decreasing" | "chart-no-axes-column" | "chart-no-axes-column-increasing" | "chart-no-axes-combined" | "chart-no-axes-gantt" | "chart-pie" | "chart-scatter" | "chart-spline" | "check-check" | "cherry" | "chevron-down" | "chevron-left" | "chevron-right" | "chevron-up" | "chevrons-down" | "chevrons-down-up" | "chevrons-left" | "chevrons-left-right" | "chevrons-right" | "chevrons-right-left" | "chevrons-up-down" | "chevrons-up" | "cigarette-off" | "circle-alert" | "circle-arrow-down" | "circle-arrow-left" | "circle-arrow-out-down-left" | "circle-arrow-out-down-right" | "circle-arrow-out-up-left" | "circle-arrow-out-up-right" | "circle-arrow-right" | "circle-arrow-up" | "circle-check-big" | "circle-check" | "circle-chevron-down" | "circle-chevron-left" | "circle-chevron-right" | "circle-chevron-up" | "circle-off" | "circle-parking-off" | "circle-plus" | "circle-question-mark" | "clapperboard" | "clipboard-check" | "clipboard" | "clipboard-list" | "pen" | "clipboard-pen" | "pen-line" | "clipboard-pen-line" | "clipboard-x" | "clock-10" | "clock-11" | "clock-12" | "clock-1" | "clock-2" | "clock-3" | "clock-4" | "clock-5" | "clock-6" | "clock-7" | "clock-8" | "clock-9" | "cloud-cog" | "download" | "cloud-download" | "cloud-moon" | "cloud-off" | "upload" | "cloud-upload" | "compass" | "contrast" | "copy-check" | "copy" | "cpu" | "crop" | "diamond-plus" | "dice-1" | "dice-2" | "dice-3" | "dice-4" | "dice-5" | "dice-6" | "diff" | "dna-off" | "droplet-off" | "drum" | "ear-off" | "eclipse" | "egg-off" | "expand" | "eye-off" | "file-chart-column" | "file-chart-column-increasing" | "file-chart-line" | "file-check-corner" | "file-check" | "file-cog" | "file-down" | "file-exclamation-point" | "file-minus" | "file-pen" | "file-pen-line" | "file-plus" | "file-question-mark" | "file-sliders" | "file-stack" | "terminal" | "file-terminal" | "file-up" | "fish-off" | "flag-off" | "flashlight-off" | "flask-conical-off" | "folder-check" | "folder-cog" | "folder-down" | "kanban" | "folder-kanban" | "folder-pen" | "folder-plus" | "folder-sync" | "folder-up" | "folder-x" | "frame" | "funnel-x" | "gallery-horizontal-end" | "gallery-horizontal" | "gallery-thumbnails" | "gallery-vertical-end" | "gallery-vertical" | "gauge" | "gavel" | "grid-2x2-check" | "grip-horizontal" | "grip" | "grip-vertical" | "hammer" | "hand-coins" | "hand-heart" | "hard-drive-download" | "hard-drive-upload" | "phone-off" | "headphone-off" | "heart-off" | "history" | "hop-off" | "house" | "wifi" | "house-wifi" | "image-down" | "image-off" | "image-up" | "images" | "infinity" | "key-round" | "key-square" | "keyboard" | "keyboard-off" | "landmark" | "layers" | "layout-dashboard" | "layout-grid" | "layout-panel-left" | "layout-panel-top" | "layout-template" | "lightbulb" | "lightbulb-off" | "link2-off" | "list-check" | "list-checks" | "list-restart" | "list-todo" | "loader-pinwheel" | "locate-off" | "log-out" | "mail-check" | "map-pin-check" | "map-pin-check-inside" | "pin-off" | "map-pin-off" | "maximize-2" | "maximize" | "megaphone-off" | "message-circle" | "message-circle-more" | "message-circle-off" | "message-circle-question-mark" | "message-circle-warning" | "message-square" | "message-square-more" | "message-square-off" | "mic-off" | "milk-off" | "minimize-2" | "minimize" | "monitor-check" | "monitor-cog" | "monitor-down" | "monitor-off" | "monitor-up" | "mouse-off" | "mouse-pointer-2" | "mouse-pointer" | "move-diagonal-2" | "move-diagonal" | "move-down" | "move-down-left" | "move-down-right" | "move-horizontal" | "move-left" | "move-right" | "move-up" | "move-up-left" | "move-up-right" | "move-vertical" | "navigation2-off" | "navigation-off" | "nfc" | "notebook-pen" | "nut-off" | "octagon-alert" | "orbit" | "package-check" | "paintbrush" | "panel-bottom-close" | "panel-bottom-open" | "panel-left-close" | "panel-left-open" | "panel-right-close" | "panel-right-open" | "panel-top-close" | "panel-top-open" | "paperclip" | "pen-off" | "pencil" | "pencil-line" | "pencil-off" | "pickaxe" | "plane" | "pointer-off" | "power-off" | "printer-check" | "rabbit" | "radar" | "radio" | "radio-tower" | "rainbow" | "redo-dot" | "redo" | "refresh-ccw-dot" | "refresh-ccw" | "refresh-cw" | "refresh-cw-off" | "rocket" | "rocking-chair" | "rotate-ccw" | "rotate-ccw-key" | "rotate-cw" | "route" | "route-off" | "rss" | "save-off" | "scan-text" | "scissors" | "search-check" | "search" | "send-horizontal" | "send" | "server-cog" | "server-off" | "settings" | "shield-alert" | "shield-check" | "shield-off" | "shield-plus" | "shield-question-mark" | "ship" | "ship-wheel" | "shopping-cart" | "shovel" | "shower-head" | "shrink" | "signal-high" | "signal" | "signal-low" | "signal-medium" | "signal-zero" | "signature" | "sliders-horizontal" | "sliders-vertical" | "smartphone-nfc" | "snowflake" | "sparkle" | "sparkles" | "speech" | "spell-check" | "square-arrow-down" | "square-arrow-down-left" | "square-arrow-down-right" | "square-arrow-left" | "square-arrow-out-down-left" | "square-arrow-out-down-right" | "square-arrow-out-up-left" | "square-arrow-out-up-right" | "square-arrow-right" | "square-arrow-up" | "square-arrow-up-left" | "square-arrow-up-right" | "square-chart-gantt" | "square-check-big" | "square-check" | "square-chevron-down" | "square-chevron-left" | "square-chevron-right" | "square-chevron-up" | "square-dashed-kanban" | "square-kanban" | "square-parking-off" | "square-pen" | "square-plus" | "square-scissors" | "square-stack" | "square-terminal" | "star" | "star-off" | "sun" | "sword" | "tag" | "telescope" | "text-align-center" | "text-cursor" | "text-cursor-input" | "text-search" | "thermometer" | "thumbs-down" | "thumbs-up" | "ticket-check" | "timer" | "timer-off" | "toggle-left" | "toggle-right" | "tornado" | "touchpad-off" | "trash-2" | "trash" | "triangle-alert" | "umbrella-off" | "undo-dot" | "undo" | "unfold-horizontal" | "unfold-vertical" | "unplug" | "user-check" | "user-cog" | "user-pen" | "user-round-check" | "user-round-cog" | "user-round" | "user-round-pen" | "vibrate" | "vibrate-off" | "video-off" | "volume-off" | "vote" | "waves" | "webhook-off" | "wheat-off" | "wifi-high" | "wifi-low" | "wifi-off" | "wifi-pen" | "wifi-zero" | "wine-off" | "zap-off") | undefined>;
+    readonly zAnimatedType: _angular_core.InputSignal<("key" | "bold" | "accessibility" | "activity" | "play" | "airplay" | "clock" | "alarm-clock" | "check" | "alarm-clock-check" | "alarm-clock-off" | "align-horizontal-space-around" | "align-vertical-space-around" | "anvil" | "archive" | "arrow-big-down" | "arrow-big-down-dash" | "arrow-big-left" | "arrow-big-left-dash" | "arrow-big-right" | "arrow-big-right-dash" | "arrow-big-up" | "arrow-big-up-dash" | "arrow-down" | "arrow-down-01" | "arrow-down-10" | "arrow-down-a-z" | "arrow-down-left" | "arrow-down-right" | "arrow-down-z-a" | "arrow-left" | "arrow-left-right" | "arrow-right" | "arrow-right-left" | "arrow-up" | "arrow-up-01" | "arrow-up-10" | "arrow-up-a-z" | "arrow-up-left" | "arrow-up-right" | "arrow-up-z-a" | "award" | "x" | "axe" | "axis-3d" | "badge-alert" | "badge-check" | "badge-question-mark" | "battery" | "battery-charging" | "battery-full" | "battery-low" | "battery-medium" | "battery-warning" | "bean-off" | "beer-off" | "bell" | "bell-off" | "bell-ring" | "between-horizontal-end" | "between-horizontal-start" | "between-vertical-end" | "between-vertical-start" | "binary" | "blend" | "blocks" | "bluetooth-off" | "bolt" | "bone" | "book" | "book-a" | "book-audio" | "book-check" | "book-dashed" | "book-down" | "book-headphones" | "heart" | "book-heart" | "book-image" | "book-key" | "book-lock" | "bookmark" | "bookmark-check" | "book-marked" | "minus" | "bookmark-minus" | "plus" | "bookmark-plus" | "bookmark-x" | "book-minus" | "book-open-check" | "book-open-text" | "book-plus" | "book-text" | "book-type" | "book-up" | "book-up-2" | "user" | "book-user" | "book-x" | "bot" | "bot-off" | "boxes" | "cog" | "brain-cog" | "briefcase" | "briefcase-business" | "briefcase-conveyor-belt" | "briefcase-medical" | "brush" | "brush-cleaning" | "bug-off" | "calendar-check" | "calendar-check-2" | "calendar-cog" | "calendar-days" | "calendar-off" | "calendar-sync" | "camera-off" | "candy-off" | "captions-off" | "cast" | "cctv" | "chart-bar" | "chart-bar-decreasing" | "chart-bar-increasing" | "chart-column" | "chart-column-decreasing" | "chart-column-increasing" | "chart-gantt" | "chart-line" | "chart-no-axes-column" | "chart-no-axes-column-decreasing" | "chart-no-axes-column-increasing" | "chart-no-axes-combined" | "chart-no-axes-gantt" | "chart-pie" | "chart-scatter" | "chart-spline" | "check-check" | "cherry" | "chevron-down" | "chevron-left" | "chevron-right" | "chevrons-down" | "chevrons-down-up" | "chevrons-left" | "chevrons-left-right" | "chevrons-right" | "chevrons-right-left" | "chevrons-up" | "chevrons-up-down" | "chevron-up" | "cigarette-off" | "circle-alert" | "circle-arrow-down" | "circle-arrow-left" | "circle-arrow-out-down-left" | "circle-arrow-out-down-right" | "circle-arrow-out-up-left" | "circle-arrow-out-up-right" | "circle-arrow-right" | "circle-arrow-up" | "circle-check" | "circle-check-big" | "circle-chevron-down" | "circle-chevron-left" | "circle-chevron-right" | "circle-chevron-up" | "circle-off" | "circle-parking-off" | "circle-plus" | "circle-question-mark" | "clapperboard" | "clipboard" | "clipboard-check" | "clipboard-list" | "pen" | "clipboard-pen" | "pen-line" | "clipboard-pen-line" | "clipboard-x" | "clock-1" | "clock-10" | "clock-11" | "clock-12" | "clock-2" | "clock-3" | "clock-4" | "clock-5" | "clock-6" | "clock-7" | "clock-8" | "clock-9" | "cloud-cog" | "download" | "cloud-download" | "cloud-moon" | "cloud-off" | "upload" | "cloud-upload" | "compass" | "contrast" | "copy" | "copy-check" | "cpu" | "crop" | "diamond-plus" | "dice-1" | "dice-2" | "dice-3" | "dice-4" | "dice-5" | "dice-6" | "diff" | "dna-off" | "droplet-off" | "drum" | "ear-off" | "eclipse" | "egg-off" | "expand" | "eye-off" | "file-chart-column" | "file-chart-column-increasing" | "file-chart-line" | "file-check" | "file-check-corner" | "file-cog" | "file-down" | "file-exclamation-point" | "file-minus" | "file-pen" | "file-pen-line" | "file-plus" | "file-question-mark" | "file-sliders" | "file-stack" | "terminal" | "file-terminal" | "file-up" | "fish-off" | "flag-off" | "flashlight-off" | "flask-conical-off" | "folder-check" | "folder-cog" | "folder-down" | "kanban" | "folder-kanban" | "folder-pen" | "folder-plus" | "folder-sync" | "folder-up" | "folder-x" | "frame" | "funnel-x" | "gallery-horizontal" | "gallery-horizontal-end" | "gallery-thumbnails" | "gallery-vertical" | "gallery-vertical-end" | "gauge" | "gavel" | "grid-2x2-check" | "grip" | "grip-horizontal" | "grip-vertical" | "hammer" | "hand-coins" | "hand-heart" | "hard-drive-download" | "hard-drive-upload" | "phone-off" | "headphone-off" | "heart-off" | "history" | "hop-off" | "house" | "wifi" | "house-wifi" | "image-down" | "image-off" | "images" | "image-up" | "infinity" | "keyboard" | "keyboard-off" | "key-round" | "key-square" | "landmark" | "layers" | "layout-dashboard" | "layout-grid" | "layout-panel-left" | "layout-panel-top" | "layout-template" | "lightbulb" | "lightbulb-off" | "link2-off" | "list-check" | "list-checks" | "list-restart" | "list-todo" | "loader-pinwheel" | "locate-off" | "log-out" | "mail-check" | "map-pin-check" | "map-pin-check-inside" | "pin-off" | "map-pin-off" | "maximize" | "maximize-2" | "megaphone-off" | "message-circle" | "message-circle-more" | "message-circle-off" | "message-circle-question-mark" | "message-circle-warning" | "message-square" | "message-square-more" | "message-square-off" | "mic-off" | "milk-off" | "minimize" | "minimize-2" | "monitor-check" | "monitor-cog" | "monitor-down" | "monitor-off" | "monitor-up" | "mouse-off" | "mouse-pointer" | "mouse-pointer-2" | "move-diagonal" | "move-diagonal-2" | "move-down" | "move-down-left" | "move-down-right" | "move-horizontal" | "move-left" | "move-right" | "move-up" | "move-up-left" | "move-up-right" | "move-vertical" | "navigation2-off" | "navigation-off" | "nfc" | "notebook-pen" | "nut-off" | "octagon-alert" | "orbit" | "package-check" | "paintbrush" | "panel-bottom-close" | "panel-bottom-open" | "panel-left-close" | "panel-left-open" | "panel-right-close" | "panel-right-open" | "panel-top-close" | "panel-top-open" | "paperclip" | "pencil" | "pencil-line" | "pencil-off" | "pen-off" | "pickaxe" | "plane" | "pointer-off" | "power-off" | "printer-check" | "rabbit" | "radar" | "radio" | "radio-tower" | "rainbow" | "redo" | "redo-dot" | "refresh-ccw" | "refresh-ccw-dot" | "refresh-cw" | "refresh-cw-off" | "rocket" | "rocking-chair" | "rotate-ccw" | "rotate-ccw-key" | "rotate-cw" | "route" | "route-off" | "rss" | "save-off" | "scan-text" | "scissors" | "search" | "search-check" | "send" | "send-horizontal" | "server-cog" | "server-off" | "settings" | "shield-alert" | "shield-check" | "shield-off" | "shield-plus" | "shield-question-mark" | "ship" | "ship-wheel" | "shopping-cart" | "shovel" | "shower-head" | "shrink" | "signal" | "signal-high" | "signal-low" | "signal-medium" | "signal-zero" | "signature" | "sliders-horizontal" | "sliders-vertical" | "smartphone-nfc" | "snowflake" | "sparkle" | "sparkles" | "speech" | "spell-check" | "square-arrow-down" | "square-arrow-down-left" | "square-arrow-down-right" | "square-arrow-left" | "square-arrow-out-down-left" | "square-arrow-out-down-right" | "square-arrow-out-up-left" | "square-arrow-out-up-right" | "square-arrow-right" | "square-arrow-up" | "square-arrow-up-left" | "square-arrow-up-right" | "square-chart-gantt" | "square-check" | "square-check-big" | "square-chevron-down" | "square-chevron-left" | "square-chevron-right" | "square-chevron-up" | "square-dashed-kanban" | "square-kanban" | "square-parking-off" | "square-pen" | "square-plus" | "square-scissors" | "square-stack" | "square-terminal" | "star" | "star-off" | "sun" | "sword" | "tag" | "telescope" | "text-align-center" | "text-cursor" | "text-cursor-input" | "text-search" | "thermometer" | "thumbs-down" | "thumbs-up" | "ticket-check" | "timer" | "timer-off" | "toggle-left" | "toggle-right" | "tornado" | "touchpad-off" | "trash" | "trash-2" | "triangle-alert" | "umbrella-off" | "undo" | "undo-dot" | "unfold-horizontal" | "unfold-vertical" | "unplug" | "user-check" | "user-cog" | "user-pen" | "user-round" | "user-round-check" | "user-round-cog" | "user-round-pen" | "vibrate" | "vibrate-off" | "video-off" | "volume-off" | "vote" | "waves" | "webhook-off" | "wheat-off" | "wifi-high" | "wifi-low" | "wifi-off" | "wifi-pen" | "wifi-zero" | "wine-off" | "zap-off") | undefined>;
     readonly zAnimate: _angular_core.InputSignal<boolean>;
     readonly zAnimationTrigger: _angular_core.InputSignal<ZIconAnimationTrigger>;
     readonly zSize: _angular_core.InputSignal<string | number | null | undefined>;

package/types/shival99-z-ui-components-z-marquee.d.ts

@@ -13,6 +13,12 @@ declare class ZMarqueeComponent {
     readonly zDuration: _angular_core.InputSignal<number>;
     readonly zGap: _angular_core.InputSignal<string>;
     readonly zFade: _angular_core.InputSignal<ZMarqueeFade>;
+    readonly zFadeColor: _angular_core.InputSignal<string>;
+    protected readonly fadeGradient: _angular_core.Signal<(direction: string) => string>;
+    protected readonly leftFadeStyle: _angular_core.Signal<string>;
+    protected readonly rightFadeStyle: _angular_core.Signal<string>;
+    protected readonly topFadeStyle: _angular_core.Signal<string>;
+    protected readonly bottomFadeStyle: _angular_core.Signal<string>;
     protected readonly contentTemplate: _angular_core.Signal<TemplateRef<unknown> | undefined>;
     protected readonly isVertical: _angular_core.Signal<boolean>;
     protected readonly isReverse: _angular_core.Signal<boolean>;
@@ -28,7 +34,7 @@ declare class ZMarqueeComponent {
     protected readonly trackClasses: _angular_core.Signal<string>;
     protected readonly contentClasses: _angular_core.Signal<string>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<ZMarqueeComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ZMarqueeComponent, "z-marquee", never, { "class": { "alias": "class"; "required": false; "isSignal": true; }; "zDirection": { "alias": "zDirection"; "required": false; "isSignal": true; }; "zPauseOnHover": { "alias": "zPauseOnHover"; "required": false; "isSignal": true; }; "zRepeat": { "alias": "zRepeat"; "required": false; "isSignal": true; }; "zDuration": { "alias": "zDuration"; "required": false; "isSignal": true; }; "zGap": { "alias": "zGap"; "required": false; "isSignal": true; }; "zFade": { "alias": "zFade"; "required": false; "isSignal": true; }; }, {}, ["contentTemplate"], never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ZMarqueeComponent, "z-marquee", never, { "class": { "alias": "class"; "required": false; "isSignal": true; }; "zDirection": { "alias": "zDirection"; "required": false; "isSignal": true; }; "zPauseOnHover": { "alias": "zPauseOnHover"; "required": false; "isSignal": true; }; "zRepeat": { "alias": "zRepeat"; "required": false; "isSignal": true; }; "zDuration": { "alias": "zDuration"; "required": false; "isSignal": true; }; "zGap": { "alias": "zGap"; "required": false; "isSignal": true; }; "zFade": { "alias": "zFade"; "required": false; "isSignal": true; }; "zFadeColor": { "alias": "zFadeColor"; "required": false; "isSignal": true; }; }, {}, ["contentTemplate"], never, true, never>;
 }
 
 export { ZMarqueeComponent };

package/types/shival99-z-ui-components-z-modal.d.ts

@@ -1,17 +1,53 @@
-import { ComponentType, OverlayRef } from '@angular/cdk/overlay';
 import * as _angular_core from '@angular/core';
-import { TemplateRef, Type, WritableSignal, EventEmitter, ViewContainerRef, InjectionToken, OnDestroy, AfterViewChecked, ComponentRef, EmbeddedViewRef } from '@angular/core';
+import { Type, TemplateRef, WritableSignal, EventEmitter, ViewContainerRef, OnDestroy, AfterViewChecked, Injector, ComponentRef, EmbeddedViewRef, InjectionToken } from '@angular/core';
 import { ZIcon } from '@shival99/z-ui/components/z-icon';
 import { ClassValue } from 'clsx';
-import { Observable } from 'rxjs';
-import { BasePortalOutlet, CdkPortalOutlet, ComponentPortal, TemplatePortal } from '@angular/cdk/portal';
 import { NgScrollbar } from 'ngx-scrollbar';
+import { Observable } from 'rxjs';
+import { ZOverlayRef } from '@shival99/z-ui/components/z-overlay';
 import * as class_variance_authority_types from 'class-variance-authority/types';
 
-type ZModalContentType<T> = ComponentType<T> | TemplateRef<T> | string;
-declare const Z_MODAL_DATA: InjectionToken<any>;
+type ZModalContentType<T> = Type<T> | TemplateRef<T> | string;
 type ZModalOnClickCallBack<T> = (instance: T, modalRef?: unknown) => false | void | object;
 type ZModalConfirmType = 'show' | 'info' | 'warning' | 'danger';
+interface ZModalConfirmOptions<U = unknown> {
+    zTitle: string;
+    zContent?: string;
+    zIcon?: ZIcon;
+    zOkText?: string;
+    zCancelText?: string | null;
+    /** Callback when OK is clicked. Return false to prevent auto-close */
+    zOnOk?: () => void | false | Promise<void>;
+    zOnCancel?: () => void;
+    zMaskClosable?: boolean;
+    /** Modal width. In service mode this is applied as the minimum width to allow content to expand naturally. */
+    zWidth?: string;
+    zData?: U;
+}
+interface ZModalConfirmIconColors {
+    ring: string;
+    bg: string;
+    icon: string;
+}
+
+declare class ZModalContentDirective {
+    readonly templateRef: TemplateRef<any>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ZModalContentDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<ZModalContentDirective, "[z-modal-content], [zModalContent]", never, {}, {}, never, never, true, never>;
+}
+
+declare class ZModalFooterDirective {
+    readonly templateRef: TemplateRef<any>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ZModalFooterDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<ZModalFooterDirective, "[z-modal-footer], [zModalFooter]", never, {}, {}, never, never, true, never>;
+}
+
+declare class ZModalHeaderDirective {
+    readonly templateRef: TemplateRef<any>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ZModalHeaderDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<ZModalHeaderDirective, "[z-modal-header], [zModalHeader]", never, {}, {}, never, never, true, never>;
+}
+
 /**
  * Configuration options for z-modal component.
  *
@@ -115,43 +151,6 @@ declare class ZModalOptions<T, U> {
     /** Number of skeleton rows to show when content is loading */
     zSkeletonRows?: number;
 }
-interface ZModalConfirmOptions<U = unknown> {
-    zTitle: string;
-    zContent?: string;
-    zIcon?: ZIcon;
-    zOkText?: string;
-    zCancelText?: string | null;
-    /** Callback when OK is clicked. Return false to prevent auto-close */
-    zOnOk?: () => void | false | Promise<void>;
-    zOnCancel?: () => void;
-    zMaskClosable?: boolean;
-    /** Modal width. In service mode this is applied as the minimum width to allow content to expand naturally. */
-    zWidth?: string;
-    zData?: U;
-}
-interface ZModalConfirmIconColors {
-    ring: string;
-    bg: string;
-    icon: string;
-}
-
-declare class ZModalContentDirective {
-    readonly templateRef: TemplateRef<any>;
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ZModalContentDirective, never>;
-    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<ZModalContentDirective, "[z-modal-content], [zModalContent]", never, {}, {}, never, never, true, never>;
-}
-
-declare class ZModalFooterDirective {
-    readonly templateRef: TemplateRef<any>;
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ZModalFooterDirective, never>;
-    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<ZModalFooterDirective, "[z-modal-footer], [zModalFooter]", never, {}, {}, never, never, true, never>;
-}
-
-declare class ZModalHeaderDirective {
-    readonly templateRef: TemplateRef<any>;
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ZModalHeaderDirective, never>;
-    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<ZModalHeaderDirective, "[z-modal-header], [zModalHeader]", never, {}, {}, never, never, true, never>;
-}
 
 declare class ZModalRef<T = any, R = any, U = any> {
     private readonly _overlayRef;
@@ -164,7 +163,7 @@ declare class ZModalRef<T = any, R = any, U = any> {
     componentInstance: T | null;
     readonly loading: _angular_core.WritableSignal<boolean>;
     readonly zAfterClose: EventEmitter<R | undefined>;
-    constructor(_overlayRef: OverlayRef, _config: ZModalOptions<T, U>, _containerInstance: ZModalComponent<T, U>, _platformId: object);
+    constructor(_overlayRef: ZOverlayRef, _config: ZModalOptions<T, U>, _containerInstance: ZModalComponent<T, U>, _platformId: object);
     setLoading(value: boolean): void;
     close(result?: R): void;
     private _trigger;
@@ -172,7 +171,7 @@ declare class ZModalRef<T = any, R = any, U = any> {
     private _closeWithResult;
 }
 
-declare class ZModalComponent<T, U> extends BasePortalOutlet implements OnDestroy, AfterViewChecked {
+declare class ZModalComponent<T, U> implements OnDestroy, AfterViewChecked {
     zOk: _angular_core.OutputEmitterRef<void>;
     zCancel: _angular_core.OutputEmitterRef<void>;
     zAfterClose: _angular_core.OutputEmitterRef<void>;
@@ -202,14 +201,12 @@ declare class ZModalComponent<T, U> extends BasePortalOutlet implements OnDestro
     protected readonly customContent: _angular_core.Signal<ZModalContentDirective | undefined>;
     protected readonly customFooter: _angular_core.Signal<ZModalFooterDirective | undefined>;
     modalRef?: ZModalRef<T>;
-    readonly portalOutlet: _angular_core.Signal<CdkPortalOutlet | undefined>;
-    protected readonly dummyTemplateRef: _angular_core.Signal<TemplateRef<unknown> | undefined>;
+    protected readonly contentOutlet: _angular_core.Signal<ViewContainerRef | undefined>;
     protected readonly mainContentRef: _angular_core.Signal<NgScrollbar | undefined>;
     protected readonly config: ZModalOptions<T, U>;
     private readonly _platformId;
     private readonly _host;
-    private readonly _overlay;
-    private readonly _viewContainerRef;
+    private readonly _overlayService;
     private readonly _cdr;
     private readonly _destroyRef;
     private readonly _zTranslate;
@@ -232,6 +229,7 @@ declare class ZModalComponent<T, U> extends BasePortalOutlet implements OnDestro
     private _lastScrollHeight;
     ngAfterViewChecked(): void;
     private _checkScrollState;
+    onContentWheel(event: WheelEvent): void;
     onContentScroll(event: Event): void;
     protected readonly confirmIconColors: _angular_core.Signal<ZModalConfirmIconColors>;
     protected readonly effectiveTitle: _angular_core.Signal<string | TemplateRef<unknown> | undefined>;
@@ -264,8 +262,8 @@ declare class ZModalComponent<T, U> extends BasePortalOutlet implements OnDestro
     ngOnDestroy(): void;
     isDestroyed(): boolean;
     getNativeElement(): HTMLElement;
-    attachComponentPortal<T>(portal: ComponentPortal<T>): ComponentRef<T>;
-    attachTemplatePortal<C>(portal: TemplatePortal<C>): EmbeddedViewRef<C>;
+    attachComponentPortal<C>(component: Type<C>, injector?: Injector): ComponentRef<C>;
+    attachTemplatePortal<C>(templateRef: TemplateRef<C>, context: C): EmbeddedViewRef<C>;
     onOkClick(): void;
     onCloseClick(): void;
     onBackdropClick(): void;
@@ -281,7 +279,7 @@ declare class ZModalComponent<T, U> extends BasePortalOutlet implements OnDestro
 }
 
 declare class ZModalService {
-    private readonly _overlay;
+    private readonly _overlayService;
     private readonly _injector;
     private readonly _platformId;
     private readonly _zTranslate;
@@ -301,6 +299,8 @@ declare class ZModalService {
     static ɵprov: _angular_core.ɵɵInjectableDeclaration<ZModalService>;
 }
 
+declare const Z_MODAL_DATA: InjectionToken<any>;
+
 declare const zModalVariants: (props?: class_variance_authority_types.ClassProp | undefined) => string;
 
 export { ZModalComponent, ZModalContentDirective, ZModalFooterDirective, ZModalHeaderDirective, ZModalOptions, ZModalRef, ZModalService, Z_MODAL_DATA, zModalVariants };