@ziadshalaby/ngx-zs-component 2.0.0 → 2.0.2

package/index.d.ts

@@ -123,14 +123,22 @@ interface FormPaletteEntry {
     btnBGHover: string;
     text: string;
     textHover: string;
-    checkBoxText?: string;
-    checkBoxTextHover?: string;
+    checkBoxText: string;
+    checkBoxTextHover: string;
 }
 declare const FormPaletteMap: Map<FormStyle, FormPaletteEntry>;
 type BaseColors = 'slate' | 'gray' | 'zinc' | 'neutral' | 'stone' | 'red' | 'orange' | 'amber' | 'yellow' | 'rose' | 'lime' | 'green' | 'emerald' | 'teal' | 'cyan' | 'sky' | 'blue' | 'indigo' | 'violet' | 'purple' | 'fuchsia' | 'pink';
 type BaseColorPrefixes = 'text' | 'bg' | 'border';
 declare const ColorMapping: Map<BaseColors, Record<BaseColorPrefixes, string>>;
 
+declare class VisibilityObserverService {
+    private observer;
+    constructor();
+    observe(el: HTMLElement, visibleSignal: any): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<VisibilityObserverService, never>;
+    static ɵprov: _angular_core.ɵɵInjectableDeclaration<VisibilityObserverService>;
+}
+
 interface VariantType {
     border?: boolean;
     border_hover?: boolean;
@@ -138,6 +146,7 @@ interface VariantType {
 }
 type AnimationType = 'top' | 'bottom' | 'left' | 'right' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | 'none';
 declare class Card {
+    readonly visibility: VisibilityObserverService;
     readonly cardStyle: _angular_core.InputSignal<FormStyle>;
     readonly variant: _angular_core.InputSignal<VariantType | undefined>;
     readonly clickable: _angular_core.InputSignal<boolean>;
@@ -405,12 +414,18 @@ declare class Page404 {
     readonly title: _angular_core.InputSignal<string>;
     readonly message: _angular_core.InputSignal<string>;
     readonly icon: _angular_core.InputSignal<string>;
+    readonly pageStyle: _angular_core.InputSignal<FormStyle | "normal">;
     readonly showButton: _angular_core.InputSignal<boolean>;
     readonly buttonText: _angular_core.InputSignal<string>;
     readonly routerLink: _angular_core.InputSignal<string>;
+    readonly style: _angular_core.Signal<{
+        btnBG: string;
+        btnBgHover: string;
+        iconText: string;
+    }>;
     readonly onAction: _angular_core.OutputEmitterRef<void>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<Page404, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<Page404, "ZS-page404", never, { "title": { "alias": "title"; "required": false; "isSignal": true; }; "message": { "alias": "message"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "showButton": { "alias": "showButton"; "required": false; "isSignal": true; }; "buttonText": { "alias": "buttonText"; "required": false; "isSignal": true; }; "routerLink": { "alias": "routerLink"; "required": false; "isSignal": true; }; }, { "onAction": "onAction"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<Page404, "ZS-page404", never, { "title": { "alias": "title"; "required": false; "isSignal": true; }; "message": { "alias": "message"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "pageStyle": { "alias": "pageStyle"; "required": false; "isSignal": true; }; "showButton": { "alias": "showButton"; "required": false; "isSignal": true; }; "buttonText": { "alias": "buttonText"; "required": false; "isSignal": true; }; "routerLink": { "alias": "routerLink"; "required": false; "isSignal": true; }; }, { "onAction": "onAction"; }, never, never, true, never>;
 }
 
 declare class Pagination {

package/output.css

@@ -31,6 +31,7 @@
     --zs-color-yellow-600: oklch(68.1% 0.162 75.834);
     --zs-color-yellow-800: oklch(47.6% 0.114 61.907);
     --zs-color-lime-400: oklch(84.1% 0.238 128.85);
+    --zs-color-lime-500: oklch(76.8% 0.233 130.85);
     --zs-color-lime-600: oklch(64.8% 0.2 131.684);
     --zs-color-green-100: oklch(96.2% 0.044 156.743);
     --zs-color-green-200: oklch(92.5% 0.084 155.995);
@@ -383,9 +384,15 @@
   .zs\:z-200 {
     z-index: 200;
   }
+  .zs\:z-400 {
+    z-index: 400;
+  }
   .zs\:z-600 {
     z-index: 600;
   }
+  .zs\:z-700 {
+    z-index: 700;
+  }
   .zs\:z-800 {
     z-index: 800;
   }
@@ -404,12 +411,18 @@
   .zs\:m-4 {
     margin: calc(var(--zs-spacing) * 4);
   }
+  .zs\:m-auto {
+    margin: auto;
+  }
   .zs\:mx-4 {
     margin-inline: calc(var(--zs-spacing) * 4);
   }
   .zs\:mx-auto {
     margin-inline: auto;
   }
+  .zs\:my-8 {
+    margin-block: calc(var(--zs-spacing) * 8);
+  }
   .zs\:ms-2 {
     margin-inline-start: calc(var(--zs-spacing) * 2);
   }
@@ -636,6 +649,9 @@
   .zs\:w-50 {
     width: calc(var(--zs-spacing) * 50);
   }
+  .zs\:w-56 {
+    width: calc(var(--zs-spacing) * 56);
+  }
   .zs\:w-64 {
     width: calc(var(--zs-spacing) * 64);
   }
@@ -1416,6 +1432,9 @@
   .zs\:text-blue-600 {
     color: var(--zs-color-blue-600);
   }
+  .zs\:text-blue-700 {
+    color: var(--zs-color-blue-700);
+  }
   .zs\:text-blue-800 {
     color: var(--zs-color-blue-800);
   }
@@ -1470,9 +1489,15 @@
   .zs\:text-green-800 {
     color: var(--zs-color-green-800);
   }
+  .zs\:text-indigo-500 {
+    color: var(--zs-color-indigo-500);
+  }
   .zs\:text-indigo-600 {
     color: var(--zs-color-indigo-600);
   }
+  .zs\:text-lime-500 {
+    color: var(--zs-color-lime-500);
+  }
   .zs\:text-lime-600 {
     color: var(--zs-color-lime-600);
   }
@@ -1494,6 +1519,9 @@
   .zs\:text-red-600 {
     color: var(--zs-color-red-600);
   }
+  .zs\:text-red-700 {
+    color: var(--zs-color-red-700);
+  }
   .zs\:text-red-800 {
     color: var(--zs-color-red-800);
   }
@@ -2037,6 +2065,13 @@
       }
     }
   }
+  .zs\:hover\:text-red-800 {
+    &:hover {
+      @media (hover: hover) {
+        color: var(--zs-color-red-800);
+      }
+    }
+  }
   .zs\:hover\:text-slate-600 {
     &:hover {
       @media (hover: hover) {
@@ -2759,6 +2794,11 @@
       color: var(--zs-color-blue-400);
     }
   }
+  .zs\:dark\:text-blue-500 {
+    &:where(.dark, .dark *) {
+      color: var(--zs-color-blue-500);
+    }
+  }
   .zs\:dark\:text-blue-700 {
     &:where(.dark, .dark *) {
       color: var(--zs-color-blue-700);
@@ -3270,6 +3310,15 @@
       }
     }
   }
+  .zs\:dark\:hover\:text-green-500 {
+    &:where(.dark, .dark *) {
+      &:hover {
+        @media (hover: hover) {
+          color: var(--zs-color-green-500);
+        }
+      }
+    }
+  }
   .zs\:dark\:hover\:text-red-400 {
     &:where(.dark, .dark *) {
       &:hover {
@@ -3279,6 +3328,15 @@
       }
     }
   }
+  .zs\:dark\:hover\:text-red-600 {
+    &:where(.dark, .dark *) {
+      &:hover {
+        @media (hover: hover) {
+          color: var(--zs-color-red-600);
+        }
+      }
+    }
+  }
   .zs\:dark\:hover\:text-slate-200 {
     &:where(.dark, .dark *) {
       &:hover {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ziadshalaby/ngx-zs-component",
-  "version": "2.0.0",
+  "version": "2.0.2",
   "peerDependencies": {
     "@angular/common": "^20.3.0",
     "@angular/core": "^20.3.0"