@ziadshalaby/ngx-zs-component 3.2.0 → 3.2.2

package/index.d.ts

@@ -19,7 +19,7 @@ declare class AlertService {
     static ɵprov: _angular_core.ɵɵInjectableDeclaration<AlertService>;
 }
 
-type KeyType = 'alert' | 'spinner' | 'modal' | 'themeToggle' | 'navbar' | 'sideBar' | 'scrollToTop' | 'navItemDropdown' | 'selectDropdown';
+type KeyType = 'alert' | 'spinner' | 'modal' | 'themeToggle' | 'navbar' | 'navbarOverlay' | 'sideBar' | 'scrollToTop' | 'navItemDropdown' | 'selectDropdown';
 type ZIndicesType = Record<KeyType, `zs:z-${number}`>;
 
 interface AlertType {
@@ -978,9 +978,10 @@ declare class Sidebar {
     readonly zIndices: ZIndicesType;
     readonly header: _angular_core.InputSignal<string>;
     readonly openSide: _angular_core.ModelSignal<boolean>;
+    readonly floating: _angular_core.InputSignal<boolean>;
     toggleSide(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<Sidebar, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<Sidebar, "ZS-sidebar", never, { "header": { "alias": "header"; "required": false; "isSignal": true; }; "openSide": { "alias": "openSide"; "required": false; "isSignal": true; }; }, { "openSide": "openSideChange"; }, never, ["[main]"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<Sidebar, "ZS-sidebar", never, { "header": { "alias": "header"; "required": false; "isSignal": true; }; "openSide": { "alias": "openSide"; "required": false; "isSignal": true; }; "floating": { "alias": "floating"; "required": false; "isSignal": true; }; }, { "openSide": "openSideChange"; }, never, ["[main]"], true, never>;
 }
 
 export { ALERT_CONFIG, Alert, AlertService, Button, Card, Carousel, Checkbox, ColorMapping, Connection, ExtractorService, FileInput, Footer, Form, Input, InputErrors, Label, Modal, NavItem, NavItemService, Navbar, NgxZsComponent, Page404, Pagination, Range, ScrollToTop, Select, Sidebar, Spinner, ThemeToggle, Toggle, buttonOutlinePaletteMap, buttonSolidPaletteMap, cardPaletteMap, checkboxTextPaletteMap, inputPaletteMap, modalPaletteMap, page404PaletteMap, ringPaletteMap, selectPaletteMap, unifiedPaletteMap };

package/output.css

@@ -16,6 +16,7 @@
     --zs-color-red-700: oklch(50.5% 0.213 27.518);
     --zs-color-red-800: oklch(44.4% 0.177 26.899);
     --zs-color-orange-400: oklch(75% 0.183 55.934);
+    --zs-color-orange-500: oklch(70.5% 0.213 47.604);
     --zs-color-orange-600: oklch(64.6% 0.222 41.116);
     --zs-color-amber-200: oklch(92.4% 0.12 95.746);
     --zs-color-amber-300: oklch(87.9% 0.169 91.605);
@@ -43,6 +44,7 @@
     --zs-color-green-700: oklch(52.7% 0.154 150.069);
     --zs-color-green-800: oklch(44.8% 0.119 151.328);
     --zs-color-emerald-400: oklch(76.5% 0.177 163.223);
+    --zs-color-emerald-500: oklch(69.6% 0.17 162.48);
     --zs-color-emerald-600: oklch(59.6% 0.145 163.225);
     --zs-color-teal-200: oklch(91% 0.096 180.426);
     --zs-color-teal-300: oklch(85.5% 0.138 181.071);
@@ -58,9 +60,11 @@
     --zs-color-cyan-600: oklch(60.9% 0.126 221.723);
     --zs-color-cyan-700: oklch(52% 0.105 223.128);
     --zs-color-cyan-800: oklch(45% 0.085 224.283);
+    --zs-color-sky-100: oklch(95.1% 0.026 236.824);
     --zs-color-sky-400: oklch(74.6% 0.16 232.661);
     --zs-color-sky-500: oklch(68.5% 0.169 237.323);
     --zs-color-sky-600: oklch(58.8% 0.158 241.966);
+    --zs-color-sky-700: oklch(50% 0.134 242.749);
     --zs-color-blue-100: oklch(93.2% 0.032 255.585);
     --zs-color-blue-200: oklch(88.2% 0.059 254.128);
     --zs-color-blue-300: oklch(80.9% 0.105 251.813);
@@ -81,6 +85,7 @@
     --zs-color-violet-700: oklch(49.1% 0.27 292.581);
     --zs-color-violet-800: oklch(43.2% 0.232 292.759);
     --zs-color-purple-400: oklch(71.4% 0.203 305.504);
+    --zs-color-purple-500: oklch(62.7% 0.265 303.9);
     --zs-color-purple-600: oklch(55.8% 0.288 302.321);
     --zs-color-fuchsia-400: oklch(74% 0.238 322.16);
     --zs-color-fuchsia-600: oklch(59.1% 0.293 322.896);
@@ -395,14 +400,11 @@
   .zs\:z-600 {
     z-index: 600;
   }
-  .zs\:z-700 {
-    z-index: 700;
-  }
   .zs\:z-800 {
     z-index: 800;
   }
-  .zs\:z-1000 {
-    z-index: 1000;
+  .zs\:z-1100 {
+    z-index: 1100;
   }
   .zs\:z-1200 {
     z-index: 1200;
@@ -416,6 +418,9 @@
   .zs\:z-1800 {
     z-index: 1800;
   }
+  .zs\:z-2000 {
+    z-index: 2000;
+  }
   .zs\:m-4 {
     margin: calc(var(--zs-spacing) * 4);
   }
@@ -600,15 +605,15 @@
   .zs\:h-16 {
     height: calc(var(--zs-spacing) * 16);
   }
+  .zs\:h-\[85vh\] {
+    height: 85vh;
+  }
   .zs\:h-\[calc\(100\%-52px\)\] {
     height: calc(100% - 52px);
   }
   .zs\:h-full {
     height: 100%;
   }
-  .zs\:h-screen {
-    height: 100vh;
-  }
   .zs\:max-h-60 {
     max-height: calc(var(--zs-spacing) * 60);
   }
@@ -666,9 +671,6 @@
   .zs\:w-\[75vw\] {
     width: 75vw;
   }
-  .zs\:w-\[360px\] {
-    width: 360px;
-  }
   .zs\:w-auto {
     width: auto;
   }
@@ -678,9 +680,15 @@
   .zs\:w-full {
     width: 100%;
   }
+  .zs\:max-w-0 {
+    max-width: calc(var(--zs-spacing) * 0);
+  }
   .zs\:max-w-7xl {
     max-width: var(--zs-container-7xl);
   }
+  .zs\:max-w-\[75vw\] {
+    max-width: 75vw;
+  }
   .zs\:max-w-\[140px\] {
     max-width: 140px;
   }
@@ -1191,6 +1199,9 @@
   .zs\:bg-green-200 {
     background-color: var(--zs-color-green-200);
   }
+  .zs\:bg-green-300 {
+    background-color: var(--zs-color-green-300);
+  }
   .zs\:bg-green-500 {
     background-color: var(--zs-color-green-500);
   }
@@ -1284,12 +1295,6 @@
   .zs\:bg-white {
     background-color: var(--zs-color-white);
   }
-  .zs\:bg-white\/90 {
-    background-color: var(--zs-color-white);
-    @supports (color: color-mix(in lab, red, red)) {
-      background-color: color-mix(in oklab, var(--zs-color-white) 90%, transparent);
-    }
-  }
   .zs\:bg-yellow-100 {
     background-color: var(--zs-color-yellow-100);
   }
@@ -1434,12 +1439,18 @@
   .zs\:pr-2 {
     padding-right: calc(var(--zs-spacing) * 2);
   }
+  .zs\:pr-3 {
+    padding-right: calc(var(--zs-spacing) * 3);
+  }
   .zs\:pb-3 {
     padding-bottom: calc(var(--zs-spacing) * 3);
   }
   .zs\:pb-4 {
     padding-bottom: calc(var(--zs-spacing) * 4);
   }
+  .zs\:pb-5 {
+    padding-bottom: calc(var(--zs-spacing) * 5);
+  }
   .zs\:pl-3 {
     padding-left: calc(var(--zs-spacing) * 3);
   }
@@ -1573,6 +1584,9 @@
   .zs\:text-cyan-800 {
     color: var(--zs-color-cyan-800);
   }
+  .zs\:text-emerald-500 {
+    color: var(--zs-color-emerald-500);
+  }
   .zs\:text-emerald-600 {
     color: var(--zs-color-emerald-600);
   }
@@ -1627,12 +1641,18 @@
   .zs\:text-neutral-600 {
     color: var(--zs-color-neutral-600);
   }
+  .zs\:text-orange-500 {
+    color: var(--zs-color-orange-500);
+  }
   .zs\:text-orange-600 {
     color: var(--zs-color-orange-600);
   }
   .zs\:text-pink-600 {
     color: var(--zs-color-pink-600);
   }
+  .zs\:text-purple-500 {
+    color: var(--zs-color-purple-500);
+  }
   .zs\:text-purple-600 {
     color: var(--zs-color-purple-600);
   }
@@ -1657,6 +1677,9 @@
       color: color-mix(in oklab, var(--zs-color-rose-600) 80%, transparent);
     }
   }
+  .zs\:text-sky-500 {
+    color: var(--zs-color-sky-500);
+  }
   .zs\:text-sky-600 {
     color: var(--zs-color-sky-600);
   }
@@ -1779,6 +1802,21 @@
     transition-timing-function: var(--tw-ease, var(--zs-default-transition-timing-function));
     transition-duration: var(--tw-duration, var(--zs-default-transition-duration));
   }
+  .zs\:transition-\[max-width\] {
+    transition-property: max-width;
+    transition-timing-function: var(--tw-ease, var(--zs-default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--zs-default-transition-duration));
+  }
+  .zs\:transition-\[translate\] {
+    transition-property: translate;
+    transition-timing-function: var(--tw-ease, var(--zs-default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--zs-default-transition-duration));
+  }
+  .zs\:transition-\[width\,opacity\,color\,background-color\] {
+    transition-property: width,opacity,color,background-color;
+    transition-timing-function: var(--tw-ease, var(--zs-default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--zs-default-transition-duration));
+  }
   .zs\:transition-\[width\] {
     transition-property: width;
     transition-timing-function: var(--tw-ease, var(--zs-default-transition-timing-function));
@@ -1804,6 +1842,12 @@
     transition-timing-function: var(--tw-ease, var(--zs-default-transition-timing-function));
     transition-duration: var(--tw-duration, var(--zs-default-transition-duration));
   }
+  .zs\:delay-0 {
+    transition-delay: 0ms;
+  }
+  .zs\:delay-300 {
+    transition-delay: 300ms;
+  }
   .zs\:duration-100 {
     --tw-duration: 100ms;
     transition-duration: 100ms;
@@ -1824,6 +1868,10 @@
     --tw-duration: 500ms;
     transition-duration: 500ms;
   }
+  .zs\:duration-600 {
+    --tw-duration: 600ms;
+    transition-duration: 600ms;
+  }
   .zs\:ease-in-out {
     --tw-ease: var(--zs-ease-in-out);
     transition-timing-function: var(--zs-ease-in-out);
@@ -2146,6 +2194,13 @@
       }
     }
   }
+  .zs\:hover\:bg-sky-100 {
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--zs-color-sky-100);
+      }
+    }
+  }
   .zs\:hover\:bg-sky-600 {
     &:hover {
       @media (hover: hover) {
@@ -2244,13 +2299,6 @@
       }
     }
   }
-  .zs\:hover\:text-green-700 {
-    &:hover {
-      @media (hover: hover) {
-        color: var(--zs-color-green-700);
-      }
-    }
-  }
   .zs\:hover\:text-red-600 {
     &:hover {
       @media (hover: hover) {
@@ -2480,6 +2528,11 @@
       line-height: var(--tw-leading, var(--zs-text-xs--line-height));
     }
   }
+  .zs\:md\:relative {
+    @media (width >= 48rem) {
+      position: relative;
+    }
+  }
   .zs\:md\:w-\[40vw\] {
     @media (width >= 48rem) {
       width: 40vw;
@@ -2970,6 +3023,11 @@
       background-color: var(--zs-color-sky-600);
     }
   }
+  .zs\:dark\:bg-sky-700 {
+    &:where(.dark, .dark *) {
+      background-color: var(--zs-color-sky-700);
+    }
+  }
   .zs\:dark\:bg-slate-400 {
     &:where(.dark, .dark *) {
       background-color: var(--zs-color-slate-400);
@@ -2985,14 +3043,6 @@
       background-color: var(--zs-color-slate-800);
     }
   }
-  .zs\:dark\:bg-slate-800\/90 {
-    &:where(.dark, .dark *) {
-      background-color: var(--zs-color-slate-800);
-      @supports (color: color-mix(in lab, red, red)) {
-        background-color: color-mix(in oklab, var(--zs-color-slate-800) 90%, transparent);
-      }
-    }
-  }
   .zs\:dark\:bg-slate-900 {
     &:where(.dark, .dark *) {
       background-color: var(--zs-color-slate-900);
@@ -3308,6 +3358,11 @@
       color: var(--zs-color-sky-500);
     }
   }
+  .zs\:dark\:text-sky-600 {
+    &:where(.dark, .dark *) {
+      color: var(--zs-color-sky-600);
+    }
+  }
   .zs\:dark\:text-slate-100 {
     &:where(.dark, .dark *) {
       color: var(--zs-color-slate-100);
@@ -3692,6 +3747,18 @@
       }
     }
   }
+  .zs\:dark\:hover\:bg-sky-700\/50 {
+    &:where(.dark, .dark *) {
+      &:hover {
+        @media (hover: hover) {
+          background-color: var(--zs-color-sky-700);
+          @supports (color: color-mix(in lab, red, red)) {
+            background-color: color-mix(in oklab, var(--zs-color-sky-700) 50%, transparent);
+          }
+        }
+      }
+    }
+  }
   .zs\:dark\:hover\:bg-slate-600 {
     &:where(.dark, .dark *) {
       &:hover {
@@ -3767,15 +3834,6 @@
       }
     }
   }
-  .zs\:dark\:hover\:text-green-500 {
-    &:where(.dark, .dark *) {
-      &:hover {
-        @media (hover: hover) {
-          color: var(--zs-color-green-500);
-        }
-      }
-    }
-  }
   .zs\:dark\:hover\:text-red-300 {
     &:where(.dark, .dark *) {
       &:hover {

package/package.json

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