@ziadshalaby/ngx-zs-component 3.2.20 → 3.2.21

package/index.d.ts

@@ -88,7 +88,7 @@ declare class NavItem {
     onItemClick(): void;
     handleChildClick(child: NavbarItem): void;
     getItemClasses: (item: NavbarItem) => string;
-    labelLineClass(item: NavbarItem): "zs:text-xs" | "zs:text-sm" | "";
+    labelLineClass(item: NavbarItem): "" | "zs:text-xs" | "zs:text-sm";
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<NavItem, never>;
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<NavItem, "ZS-nav-item", never, { "item": { "alias": "item"; "required": true; "isSignal": true; }; "collectionName": { "alias": "collectionName"; "required": true; "isSignal": true; }; }, { "anyItemClickedEv": "anyItemClickedEv"; }, never, never, true, never>;
 }
@@ -451,9 +451,11 @@ interface AuthButtonsType {
         iconTpl?: Signal<TemplateRef<any> | undefined>;
     };
 }
+type MobileModeType = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 declare class Navbar {
     readonly zIndices: ZIndicesType;
     readonly fixed: _angular_core.InputSignal<boolean>;
+    readonly mobileMode: _angular_core.InputSignal<MobileModeType>;
     readonly logoUrl: _angular_core.InputSignal<string | undefined>;
     readonly siteNameConfig: _angular_core.InputSignal<SiteNameConfigType | undefined>;
     readonly authButtons: _angular_core.InputSignal<AuthButtonsType>;
@@ -476,6 +478,9 @@ declare class Navbar {
     readonly moreNavItems: Signal<NavbarItem[]>;
     readonly mobileNavItems: Signal<NavbarItem[]>;
     readonly getUserMenuItems: Signal<NavbarItem[]>;
+    readonly desktopVisibilityClass: Signal<"zs:xs:flex" | "zs:sm:flex" | "zs:md:flex" | "zs:lg:flex" | "zs:xl:flex" | "">;
+    readonly desktopVisibilityClassBlock: Signal<"" | "zs:xs:block" | "zs:sm:block" | "zs:md:block" | "zs:lg:block" | "zs:xl:block">;
+    readonly desktopHiddenClass: Signal<"" | "zs:xs:hidden" | "zs:sm:hidden" | "zs:md:hidden" | "zs:lg:hidden" | "zs:xl:hidden">;
     private toNavbarItem;
     onSearchSubmit(): void;
     onLogin(): void;
@@ -488,7 +493,7 @@ declare class Navbar {
     ngOnInit(): void;
     ngOnDestroy(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<Navbar, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<Navbar, "ZS-navbar", never, { "fixed": { "alias": "fixed"; "required": false; "isSignal": true; }; "logoUrl": { "alias": "logoUrl"; "required": false; "isSignal": true; }; "siteNameConfig": { "alias": "siteNameConfig"; "required": false; "isSignal": true; }; "authButtons": { "alias": "authButtons"; "required": false; "isSignal": true; }; "showUserSection": { "alias": "showUserSection"; "required": false; "isSignal": true; }; "showSearchBar": { "alias": "showSearchBar"; "required": false; "isSignal": true; }; "navItems": { "alias": "navItems"; "required": false; "isSignal": true; }; "isLoggedIn": { "alias": "isLoggedIn"; "required": false; "isSignal": true; }; "userProfile": { "alias": "userProfile"; "required": false; "isSignal": true; }; "userMenuItems": { "alias": "userMenuItems"; "required": false; "isSignal": true; }; "searchPlaceholder": { "alias": "searchPlaceholder"; "required": false; "isSignal": true; }; "searchValue": { "alias": "searchValue"; "required": false; "isSignal": true; }; "isMobileMenuOpen": { "alias": "isMobileMenuOpen"; "required": false; "isSignal": true; }; "isUserMenuOpen": { "alias": "isUserMenuOpen"; "required": false; "isSignal": true; }; "isMoreOpen": { "alias": "isMoreOpen"; "required": false; "isSignal": true; }; }, { "loginClickedEv": "loginClickedEv"; "signupClickedEv": "signupClickedEv"; "searchSubmittedEv": "searchSubmittedEv"; "anyItemClickedEv": "anyItemClickedEv"; "searchValue": "searchValueChange"; "isMobileMenuOpen": "isMobileMenuOpenChange"; "isUserMenuOpen": "isUserMenuOpenChange"; "isMoreOpen": "isMoreOpenChange"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<Navbar, "ZS-navbar", never, { "fixed": { "alias": "fixed"; "required": false; "isSignal": true; }; "mobileMode": { "alias": "mobileMode"; "required": false; "isSignal": true; }; "logoUrl": { "alias": "logoUrl"; "required": false; "isSignal": true; }; "siteNameConfig": { "alias": "siteNameConfig"; "required": false; "isSignal": true; }; "authButtons": { "alias": "authButtons"; "required": false; "isSignal": true; }; "showUserSection": { "alias": "showUserSection"; "required": false; "isSignal": true; }; "showSearchBar": { "alias": "showSearchBar"; "required": false; "isSignal": true; }; "navItems": { "alias": "navItems"; "required": false; "isSignal": true; }; "isLoggedIn": { "alias": "isLoggedIn"; "required": false; "isSignal": true; }; "userProfile": { "alias": "userProfile"; "required": false; "isSignal": true; }; "userMenuItems": { "alias": "userMenuItems"; "required": false; "isSignal": true; }; "searchPlaceholder": { "alias": "searchPlaceholder"; "required": false; "isSignal": true; }; "searchValue": { "alias": "searchValue"; "required": false; "isSignal": true; }; "isMobileMenuOpen": { "alias": "isMobileMenuOpen"; "required": false; "isSignal": true; }; "isUserMenuOpen": { "alias": "isUserMenuOpen"; "required": false; "isSignal": true; }; "isMoreOpen": { "alias": "isMoreOpen"; "required": false; "isSignal": true; }; }, { "loginClickedEv": "loginClickedEv"; "signupClickedEv": "signupClickedEv"; "searchSubmittedEv": "searchSubmittedEv"; "anyItemClickedEv": "anyItemClickedEv"; "searchValue": "searchValueChange"; "isMobileMenuOpen": "isMobileMenuOpenChange"; "isUserMenuOpen": "isUserMenuOpenChange"; "isMoreOpen": "isMoreOpenChange"; }, never, never, true, never>;
 }
 
 interface Page404StyleType {
@@ -998,4 +1003,4 @@ declare class Sidebar {
 }
 
 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 };
-export type { AlertFullType, AlertType, AnimationType, AuthButtonsType, BaseColorPrefixes, BaseColors, BaseSize, BtnSizeType, BtnType, BtnTypeDefault, BulkAlert, ButtonVariant, CarouselItem, ChVariantType, ChangeEventType, DateType, DirectionType, DropdownItem, FileData, FilesType, FormStyle, FormatterFn, InputType, ItemShapeType, LoaderType, NavItemsType, NavbarItem, NavbarItemExport, NewAlert, OldAlertsType, PagesType, Position, PositionType, ShapeType, SiteNameConfigType, UserItemsType, UserProfile, ValidatorFn, VariantType, ZFormField, ZFormFieldMap, themeTypes };
+export type { AlertFullType, AlertType, AnimationType, AuthButtonsType, BaseColorPrefixes, BaseColors, BaseSize, BtnSizeType, BtnType, BtnTypeDefault, BulkAlert, ButtonVariant, CarouselItem, ChVariantType, ChangeEventType, DateType, DirectionType, DropdownItem, FileData, FilesType, FormStyle, FormatterFn, InputType, ItemShapeType, LoaderType, MobileModeType, NavItemsType, NavbarItem, NavbarItemExport, NewAlert, OldAlertsType, PagesType, Position, PositionType, ShapeType, SiteNameConfigType, UserItemsType, UserProfile, ValidatorFn, VariantType, ZFormField, ZFormFieldMap, themeTypes };

package/output.css

@@ -32,7 +32,6 @@
     --zs-color-yellow-700: oklch(55.4% 0.135 66.442);
     --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);
@@ -2567,6 +2566,36 @@
       transition-property: none;
     }
   }
+  .zs\:xs\:block {
+    @media (width >= 30rem) {
+      display: block;
+    }
+  }
+  .zs\:xs\:flex {
+    @media (width >= 30rem) {
+      display: flex;
+    }
+  }
+  .zs\:xs\:hidden {
+    @media (width >= 30rem) {
+      display: none;
+    }
+  }
+  .zs\:sm\:block {
+    @media (width >= 40rem) {
+      display: block;
+    }
+  }
+  .zs\:sm\:flex {
+    @media (width >= 40rem) {
+      display: flex;
+    }
+  }
+  .zs\:sm\:hidden {
+    @media (width >= 40rem) {
+      display: none;
+    }
+  }
   .zs\:sm\:size-10 {
     @media (width >= 40rem) {
       width: calc(var(--zs-spacing) * 10);
@@ -2600,6 +2629,21 @@
       line-height: var(--tw-leading, var(--zs-text-xs--line-height));
     }
   }
+  .zs\:md\:block {
+    @media (width >= 48rem) {
+      display: block;
+    }
+  }
+  .zs\:md\:flex {
+    @media (width >= 48rem) {
+      display: flex;
+    }
+  }
+  .zs\:md\:hidden {
+    @media (width >= 48rem) {
+      display: none;
+    }
+  }
   .zs\:md\:w-\[40vw\] {
     @media (width >= 48rem) {
       width: 40vw;
@@ -2646,6 +2690,21 @@
       padding-inline: calc(var(--zs-spacing) * 8);
     }
   }
+  .zs\:xl\:block {
+    @media (width >= 80rem) {
+      display: block;
+    }
+  }
+  .zs\:xl\:flex {
+    @media (width >= 80rem) {
+      display: flex;
+    }
+  }
+  .zs\:xl\:hidden {
+    @media (width >= 80rem) {
+      display: none;
+    }
+  }
   .zs\:xl\:w-\[15vw\] {
     @media (width >= 80rem) {
       width: 15vw;

package/package.json

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