@shival99/z-ui 2.1.21 → 2.1.23

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@shival99/z-ui",
-  "version": "2.1.21",
-  "description": "Z-UI: Modern Angular UI Component Library - A comprehensive, high-performance design system built with Angular 20+, featuring 40+ customizable components with dark mode, accessibility, and enterprise-ready features.",
+  "version": "2.1.23",
+  "description": "Z-UI: Modern Angular UI Component Library - A comprehensive, high-performance design system built with Angular 21, featuring 40+ customizable components with dark mode, accessibility, and enterprise-ready features.",
   "keywords": [
     "angular",
     "angular-ui",
@@ -36,13 +36,14 @@
     "url": "https://github.com/vuboi/z-ui/issues"
   },
   "peerDependencies": {
-    "@angular/cdk": ">=20.0.0",
-    "@angular/common": ">=20.0.0",
-    "@angular/core": ">=20.0.0",
-    "@angular/forms": ">=20.0.0",
-    "@angular/platform-browser": "~21.0.6",
-    "@angular/router": ">=20.0.0",
+    "@angular/cdk": ">=21.0.0 <22.0.0",
+    "@angular/common": ">=21.0.0 <22.0.0",
+    "@angular/core": ">=21.0.0 <22.0.0",
+    "@angular/forms": ">=21.0.0 <22.0.0",
+    "@angular/platform-browser": ">=21.0.0 <22.0.0",
+    "@angular/router": ">=21.0.0 <22.0.0",
     "@dayflow/blossom-color-picker-angular": ">=1.0.0",
+    "@hugeicons/core-free-icons": ">=4.0.0",
     "@ng-icons/core": ">=33.0.0",
     "@ng-icons/iconsax": ">=33.0.0",
     "@ng-icons/lucide": ">=33.0.0",
@@ -54,6 +55,7 @@
     "@tiptap/core": ">=3.0.0",
     "@tiptap/extension-code": ">=3.0.0",
     "@tiptap/extension-horizontal-rule": ">=3.0.0",
+    "@tiptap/extension-image": ">=3.0.0",
     "@tiptap/extension-link": ">=3.0.0",
     "@tiptap/extension-mention": ">=3.0.0",
     "@tiptap/extension-placeholder": ">=3.0.0",
@@ -64,14 +66,20 @@
     "boneyard-js": ">=1.7.0",
     "class-variance-authority": ">=0.7.0",
     "clsx": ">=2.0.0",
+    "dompurify": ">=3.0.0",
+    "echarts": ">=5.0.0",
     "exceljs": "^4.4.0",
     "file-saver": "^2.0.5",
+    "mammoth": ">=1.12.0",
     "minisearch": ">=7.0.0",
     "ng-animated-icons": ">=1.9.0",
+    "ng2-pdfjs-viewer": ">=26.0.0",
     "ngx-mask": ">=20.0.0",
     "ngx-scrollbar": ">=19.0.0",
     "ngxtension": ">=7.0.0",
+    "qrcode": ">=1.5.0",
     "rxjs": ">=7.8.0",
+    "shiki": ">=3.0.0",
     "tailwind-merge": ">=3.0.0",
     "xlsx": "^0.18.5",
     "@tiptap/extension-bubble-menu": ">=3.0.0",
@@ -80,41 +88,83 @@
     "tiptap-extension-resize-image": "^1.4.0"
   },
   "peerDependenciesMeta": {
-    "@ngx-translate/core": {
+    "@dayflow/blossom-color-picker-angular": {
       "optional": true
     },
-    "@ngx-translate/http-loader": {
+    "@shival99/angular-virtual": {
       "optional": true
     },
-    "echarts": {
+    "@tanstack/angular-table": {
       "optional": true
     },
-    "ngx-echarts": {
+    "@tiptap/core": {
       "optional": true
     },
-    "shiki": {
+    "@tiptap/extension-bubble-menu": {
+      "optional": true
+    },
+    "@tiptap/extension-code": {
+      "optional": true
+    },
+    "@tiptap/extension-horizontal-rule": {
+      "optional": true
+    },
+    "@tiptap/extension-image": {
       "optional": true
     },
-    "dompurify": {
+    "@tiptap/extension-link": {
+      "optional": true
+    },
+    "@tiptap/extension-mention": {
+      "optional": true
+    },
+    "@tiptap/extension-placeholder": {
+      "optional": true
+    },
+    "@tiptap/extension-text-align": {
+      "optional": true
+    },
+    "@tiptap/extension-text-style": {
+      "optional": true
+    },
+    "@tiptap/extension-underline": {
+      "optional": true
+    },
+    "shiki": {
       "optional": true
     },
     "@tiptap/markdown": {
       "optional": true
+    },
+    "@tiptap/pm": {
+      "optional": true
+    },
+    "@tiptap/starter-kit": {
+      "optional": true
+    },
+    "boneyard-js": {
+      "optional": true
+    },
+    "mammoth": {
+      "optional": true
+    },
+    "ng2-pdfjs-viewer": {
+      "optional": true
+    },
+    "ngx-mask": {
+      "optional": true
+    },
+    "qrcode": {
+      "optional": true
+    },
+    "tiptap-extension-resize-image": {
+      "optional": true
     }
   },
-  "optionalDependencies": {
-    "dompurify": ">=3.0.0",
-    "echarts": ">=5.0.0",
-    "shiki": ">=3.0.0"
-  },
   "sideEffects": false,
   "engines": {
     "node": ">=18.0.0"
   },
-  "dependencies": {
-    "mammoth": "^1.12.0",
-    "tslib": "^2.3.0"
-  },
   "module": "fesm2022/z-ui.mjs",
   "typings": "types/z-ui.d.ts",
   "exports": {
@@ -326,5 +376,8 @@
       "default": "./fesm2022/shival99-z-ui-utils.mjs"
     }
   },
-  "type": "module"
+  "type": "module",
+  "dependencies": {
+    "tslib": "^2.3.0"
+  }
 }

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

@@ -276,7 +276,7 @@ declare class ZAutocompleteComponent<T = unknown> implements OnInit, ControlValu
 
 declare const zAutocompleteInputVariants: (props?: ({
     zSize?: "sm" | "default" | "lg" | null | undefined;
-    zStatus?: "default" | "open" | "error" | "disabled" | "readonly" | null | undefined;
+    zStatus?: "default" | "error" | "disabled" | "readonly" | "open" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 type ZAutocompleteInputVariants = VariantProps<typeof zAutocompleteInputVariants>;
 declare const zAutocompleteOptionVariants: (props?: ({

package/types/shival99-z-ui-components-z-dropdown-menu.d.ts

@@ -33,6 +33,7 @@ declare class ZDropdownMenuComponent implements AfterContentInit {
     readonly zMinWidth: _angular_core.InputSignal<number>;
     readonly zMaxWidth: _angular_core.InputSignal<number>;
     readonly zDisabled: _angular_core.InputSignal<boolean>;
+    readonly zWave: _angular_core.InputSignalWithTransform<boolean, string | boolean>;
     protected readonly hasContent: _angular_core.WritableSignal<boolean>;
     protected readonly popoverControl: _angular_core.WritableSignal<{
         close: () => void;
@@ -46,7 +47,7 @@ declare class ZDropdownMenuComponent implements AfterContentInit {
         closeImmediate: () => void;
     }): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<ZDropdownMenuComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ZDropdownMenuComponent, "z-dropdown-menu", never, { "zItems": { "alias": "zItems"; "required": true; "isSignal": true; }; "zLabel": { "alias": "zLabel"; "required": false; "isSignal": true; }; "zIcon": { "alias": "zIcon"; "required": false; "isSignal": true; }; "zButtonType": { "alias": "zButtonType"; "required": false; "isSignal": true; }; "zPosition": { "alias": "zPosition"; "required": false; "isSignal": true; }; "zButtonSize": { "alias": "zButtonSize"; "required": false; "isSignal": true; }; "zOffset": { "alias": "zOffset"; "required": false; "isSignal": true; }; "zMinWidth": { "alias": "zMinWidth"; "required": false; "isSignal": true; }; "zMaxWidth": { "alias": "zMaxWidth"; "required": false; "isSignal": true; }; "zDisabled": { "alias": "zDisabled"; "required": false; "isSignal": true; }; }, { "zOnItemClick": "zOnItemClick"; }, never, ["*"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ZDropdownMenuComponent, "z-dropdown-menu", never, { "zItems": { "alias": "zItems"; "required": true; "isSignal": true; }; "zLabel": { "alias": "zLabel"; "required": false; "isSignal": true; }; "zIcon": { "alias": "zIcon"; "required": false; "isSignal": true; }; "zButtonType": { "alias": "zButtonType"; "required": false; "isSignal": true; }; "zPosition": { "alias": "zPosition"; "required": false; "isSignal": true; }; "zButtonSize": { "alias": "zButtonSize"; "required": false; "isSignal": true; }; "zOffset": { "alias": "zOffset"; "required": false; "isSignal": true; }; "zMinWidth": { "alias": "zMinWidth"; "required": false; "isSignal": true; }; "zMaxWidth": { "alias": "zMaxWidth"; "required": false; "isSignal": true; }; "zDisabled": { "alias": "zDisabled"; "required": false; "isSignal": true; }; "zWave": { "alias": "zWave"; "required": false; "isSignal": true; }; }, { "zOnItemClick": "zOnItemClick"; }, never, ["*"], true, never>;
 }
 
 export { ZDropdownMenuComponent };

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

@@ -3,14 +3,16 @@ import { ClassValue } from 'clsx';
 import * as class_variance_authority_types from 'class-variance-authority/types';
 import { VariantProps } from 'class-variance-authority';
 
-type ZLoadingSpinner = 'spinner' | 'orbit' | 'matrix' | 'conic' | 'polygon' | 'triple';
+declare const Z_LOADING_SPINNERS: readonly ["spinner", "orbit", "matrix", "conic", "polygon", "triple", "bar", "beat", "bounce", "circle", "climbing-box", "clip", "clock", "dot", "fade", "grid", "hash", "moon", "pacman", "propagate", "puff", "pulse", "ring", "rise", "rotate", "scale", "skew", "square", "sync"];
+
+type ZLoadingSpinner = (typeof Z_LOADING_SPINNERS)[number];
 type ZLoadingSize = '2xs' | 'xs' | 'default' | 'lg' | 'xl';
 type ZLoadingColor = 'primary' | 'secondary' | 'white' | 'current';
 type ZLoadingOverlayType = 'default' | 'dark' | 'blur';
 
 declare class ZLoadingComponent {
     readonly class: _angular_core.InputSignal<ClassValue>;
-    readonly zSpinner: _angular_core.InputSignal<ZLoadingSpinner>;
+    readonly zSpinner: _angular_core.InputSignal<"spinner" | "orbit" | "matrix" | "conic" | "polygon" | "triple" | "bar" | "beat" | "bounce" | "circle" | "climbing-box" | "clip" | "clock" | "dot" | "fade" | "grid" | "hash" | "moon" | "pacman" | "propagate" | "puff" | "pulse" | "ring" | "rise" | "rotate" | "scale" | "skew" | "square" | "sync">;
     readonly zSize: _angular_core.InputSignal<ZLoadingSize>;
     readonly zColor: _angular_core.InputSignal<ZLoadingColor>;
     readonly zText: _angular_core.InputSignal<string>;
@@ -23,7 +25,13 @@ declare class ZLoadingComponent {
     private _leaveTimeout;
     constructor();
     protected readonly spinnerClasses: _angular_core.Signal<string>;
-    protected readonly baseClasses: _angular_core.Signal<string>;
+    protected readonly loaderClasses: _angular_core.Signal<string>;
+    protected readonly circleRings: readonly [0, 1, 2, 3, 4];
+    protected readonly fadeBars: readonly [0, 1, 2, 3, 4, 5, 6, 7];
+    protected readonly gridDots: readonly [0, 1, 2, 3, 4, 5, 6, 7, 8];
+    protected readonly pacmanDots: readonly [0, 1, 2, 3];
+    protected readonly propagateDots: readonly [0, 1, 2, 3, 4, 5];
+    protected readonly scaleBars: readonly [0, 1, 2, 3, 4];
     protected readonly overlayClasses: _angular_core.Signal<string>;
     protected readonly textSizeClasses: _angular_core.Signal<{
         'text-xs': boolean;
@@ -42,5 +50,5 @@ declare const zLoadingVariants: (props?: ({
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 type ZLoadingVariants = VariantProps<typeof zLoadingVariants>;
 
-export { ZLoadingComponent, zLoadingVariants };
-export type { ZLoadingColor, ZLoadingSize, ZLoadingSpinner, ZLoadingVariants };
+export { ZLoadingComponent, Z_LOADING_SPINNERS, zLoadingVariants };
+export type { ZLoadingColor, ZLoadingOverlayType, ZLoadingSize, ZLoadingSpinner, ZLoadingVariants };

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

@@ -1670,11 +1670,11 @@ declare class ZTableFilterComponent<T> {
     protected readonly sortOptions: _angular_core.Signal<ZSelectOption<string>[]>;
     protected readonly draftFilters: _angular_core.WritableSignal<ZTableDraftFilterCondition[]>;
     protected readonly draftLegacyFilterValue: _angular_core.WritableSignal<unknown>;
-    protected readonly draftSortState: _angular_core.WritableSignal<false | "desc" | "asc">;
+    protected readonly draftSortState: _angular_core.WritableSignal<false | "asc" | "desc">;
     protected readonly columnFilterValue: _angular_core.Signal<unknown>;
     protected readonly effectiveFilterValue: _angular_core.Signal<unknown>;
-    protected readonly sortState: _angular_core.Signal<false | "desc" | "asc">;
-    protected readonly effectiveSortState: _angular_core.Signal<false | "desc" | "asc">;
+    protected readonly sortState: _angular_core.Signal<false | "asc" | "desc">;
+    protected readonly effectiveSortState: _angular_core.Signal<false | "asc" | "desc">;
     protected readonly canSort: _angular_core.Signal<boolean>;
     protected readonly canFilter: _angular_core.Signal<boolean>;
     protected readonly filterUi: _angular_core.Signal<ZTableFilterUi>;
@@ -1692,7 +1692,7 @@ declare class ZTableFilterComponent<T> {
     protected readonly filterBadgeCount: _angular_core.Signal<number>;
     protected readonly hasFilterValue: _angular_core.Signal<boolean>;
     protected readonly isActive: _angular_core.Signal<boolean>;
-    protected readonly draftSortValue: _angular_core.Signal<"none" | "desc" | "asc">;
+    protected readonly draftSortValue: _angular_core.Signal<"asc" | "desc" | "none">;
     protected readonly rangeMinValue: _angular_core.Signal<any>;
     protected readonly rangeMaxValue: _angular_core.Signal<any>;
     protected readonly dateValue: _angular_core.Signal<Date | null>;
@@ -1764,7 +1764,7 @@ declare class ZTableActionsComponent<T = unknown> {
     readonly zConfig: _angular_core.InputSignal<ZTableActionColumnConfig<T>>;
     readonly zRow: _angular_core.InputSignal<T>;
     readonly zRowId: _angular_core.InputSignal<string>;
-    readonly zDropdownButtonSize: _angular_core.InputSignal<"sm" | "default" | "lg" | "xs" | "xl" | null | undefined>;
+    readonly zDropdownButtonSize: _angular_core.InputSignal<"default" | "xs" | "sm" | "lg" | "xl" | null | undefined>;
     readonly zActionClick: _angular_core.OutputEmitterRef<ZTableActionClickEvent<T>>;
     protected readonly allActions: _angular_core.Signal<ZTableActionItem<T>[]>;
     protected readonly shouldShowAsButtons: _angular_core.Signal<boolean>;

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

@@ -20,9 +20,10 @@ interface ZTab {
     badge?: string | number;
     template?: TemplateRef<unknown>;
 }
-type ZTabsType = 'line' | 'soft' | 'segment' | 'folder' | 'folder-soft' | 'folder-solid' | 'underline' | 'underlined' | 'badge' | 'sharp' | 'sharp-line' | 'sharp-line-filled' | 'vertical-sharp' | 'code-line';
+type ZTabsType = 'line' | 'soft' | 'segment' | 'segment-solid' | 'folder' | 'folder-soft' | 'folder-solid' | 'underline' | 'underlined' | 'badge' | 'sharp' | 'sharp-line' | 'sharp-line-filled' | 'vertical-sharp' | 'code-line';
 type ZTabsSize = 'xs' | 'sm' | 'default' | 'lg';
 type ZTabsOrientation = 'horizontal' | 'vertical';
+type ZTabsContentFit = 'none' | 'screen';
 
 declare class ZTabsComponent implements OnInit, AfterViewInit, OnDestroy {
     readonly tabPanels: _angular_core.Signal<readonly ZTabPanelDirective[]>;
@@ -33,6 +34,7 @@ declare class ZTabsComponent implements OnInit, AfterViewInit, OnDestroy {
     readonly zType: _angular_core.InputSignal<ZTabsType>;
     readonly zSize: _angular_core.InputSignal<ZTabsSize>;
     readonly zOrientation: _angular_core.InputSignal<ZTabsOrientation>;
+    readonly zContentFit: _angular_core.InputSignal<ZTabsContentFit>;
     readonly zLazy: _angular_core.InputSignal<boolean>;
     readonly zDestroyInactive: _angular_core.InputSignal<boolean>;
     readonly zTabsOnly: _angular_core.InputSignal<boolean>;
@@ -71,15 +73,15 @@ declare class ZTabsComponent implements OnInit, AfterViewInit, OnDestroy {
     private _getCacheKey;
     protected scrollToActiveDropdownItem(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<ZTabsComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ZTabsComponent, "z-tabs", never, { "class": { "alias": "class"; "required": false; "isSignal": true; }; "zTabs": { "alias": "zTabs"; "required": true; "isSignal": true; }; "zType": { "alias": "zType"; "required": false; "isSignal": true; }; "zSize": { "alias": "zSize"; "required": false; "isSignal": true; }; "zOrientation": { "alias": "zOrientation"; "required": false; "isSignal": true; }; "zLazy": { "alias": "zLazy"; "required": false; "isSignal": true; }; "zDestroyInactive": { "alias": "zDestroyInactive"; "required": false; "isSignal": true; }; "zTabsOnly": { "alias": "zTabsOnly"; "required": false; "isSignal": true; }; "zShowContentWrapper": { "alias": "zShowContentWrapper"; "required": false; "isSignal": true; }; "zReloadable": { "alias": "zReloadable"; "required": false; "isSignal": true; }; "zEmitOnActiveClick": { "alias": "zEmitOnActiveClick"; "required": false; "isSignal": true; }; "zCache": { "alias": "zCache"; "required": false; "isSignal": true; }; "zCacheKey": { "alias": "zCacheKey"; "required": false; "isSignal": true; }; "activeTab": { "alias": "activeTab"; "required": false; "isSignal": true; }; }, { "activeTab": "activeTabChange"; "zTabChange": "zTabChange"; }, ["tabPanels"], never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ZTabsComponent, "z-tabs", never, { "class": { "alias": "class"; "required": false; "isSignal": true; }; "zTabs": { "alias": "zTabs"; "required": true; "isSignal": true; }; "zType": { "alias": "zType"; "required": false; "isSignal": true; }; "zSize": { "alias": "zSize"; "required": false; "isSignal": true; }; "zOrientation": { "alias": "zOrientation"; "required": false; "isSignal": true; }; "zContentFit": { "alias": "zContentFit"; "required": false; "isSignal": true; }; "zLazy": { "alias": "zLazy"; "required": false; "isSignal": true; }; "zDestroyInactive": { "alias": "zDestroyInactive"; "required": false; "isSignal": true; }; "zTabsOnly": { "alias": "zTabsOnly"; "required": false; "isSignal": true; }; "zShowContentWrapper": { "alias": "zShowContentWrapper"; "required": false; "isSignal": true; }; "zReloadable": { "alias": "zReloadable"; "required": false; "isSignal": true; }; "zEmitOnActiveClick": { "alias": "zEmitOnActiveClick"; "required": false; "isSignal": true; }; "zCache": { "alias": "zCache"; "required": false; "isSignal": true; }; "zCacheKey": { "alias": "zCacheKey"; "required": false; "isSignal": true; }; "activeTab": { "alias": "activeTab"; "required": false; "isSignal": true; }; }, { "activeTab": "activeTabChange"; "zTabChange": "zTabChange"; }, ["tabPanels"], never, true, never>;
 }
 
 declare const zTabsVariants: (props?: ({
-    zType?: "line" | "soft" | "segment" | "folder" | "folder-soft" | "folder-solid" | "underline" | "underlined" | "badge" | "sharp" | "sharp-line" | "sharp-line-filled" | "vertical-sharp" | "code-line" | null | undefined;
+    zType?: "line" | "soft" | "segment" | "segment-solid" | "folder" | "folder-soft" | "folder-solid" | "underline" | "underlined" | "badge" | "sharp" | "sharp-line" | "sharp-line-filled" | "vertical-sharp" | "code-line" | null | undefined;
     zOrientation?: "horizontal" | "vertical" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare const zTabItemVariants: (props?: ({
-    zType?: "line" | "soft" | "segment" | "folder" | "folder-soft" | "folder-solid" | "underline" | "underlined" | "badge" | "sharp" | "sharp-line" | "sharp-line-filled" | "vertical-sharp" | "code-line" | null | undefined;
+    zType?: "line" | "soft" | "segment" | "segment-solid" | "folder" | "folder-soft" | "folder-solid" | "underline" | "underlined" | "badge" | "sharp" | "sharp-line" | "sharp-line-filled" | "vertical-sharp" | "code-line" | null | undefined;
     zSize?: "xs" | "sm" | "default" | "lg" | null | undefined;
     zOrientation?: "horizontal" | "vertical" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
@@ -87,4 +89,4 @@ type ZTabsVariants = VariantProps<typeof zTabsVariants>;
 type ZTabItemVariants = VariantProps<typeof zTabItemVariants>;
 
 export { ZTabPanelDirective, ZTabsComponent, zTabItemVariants, zTabsVariants };
-export type { ZTab, ZTabItemVariants, ZTabsOrientation, ZTabsSize, ZTabsType, ZTabsVariants };
+export type { ZTab, ZTabItemVariants, ZTabsContentFit, ZTabsOrientation, ZTabsSize, ZTabsType, ZTabsVariants };

package/types/shival99-z-ui-services.d.ts

@@ -558,6 +558,7 @@ interface ZThemePreferences {
     theme: ZThemeName;
     isDark: boolean;
 }
+/** @deprecated Theme CSS is bundled by assets/css/themes.css and no longer loaded at runtime. */
 declare const Z_THEME_CSS_MAP: Record<ZThemeName, string>;
 
 declare class ZThemeService {
@@ -570,7 +571,6 @@ declare class ZThemeService {
     private readonly _preferencesCacheKey;
     private readonly _isDark;
     private readonly _currentTheme;
-    private readonly _loadedThemes;
     readonly isDark: i0.Signal<boolean>;
     readonly currentTheme: i0.Signal<ZThemeName>;
     constructor();
@@ -581,7 +581,6 @@ declare class ZThemeService {
     private _getInitialPreferences;
     private _savePreferences;
     private _isValidTheme;
-    private _loadThemeCSS;
     static ɵfac: i0.ɵɵFactoryDeclaration<ZThemeService, never>;
     static ɵprov: i0.ɵɵInjectableDeclaration<ZThemeService>;
 }