@shival99/z-ui 2.2.6 → 2.3.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shival99/z-ui",
-  "version": "2.2.6",
+  "version": "2.3.1",
   "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,8 +48,17 @@ 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>;

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 };