@ziadshalaby/ngx-zs-component 3.2.7 → 3.2.8
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -369,11 +369,11 @@ class NavItem {
|
|
|
369
369
|
: '';
|
|
370
370
|
}
|
|
371
371
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: NavItem, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
372
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: NavItem, isStandalone: true, selector: "ZS-nav-item", inputs: { item: { classPropertyName: "item", publicName: "item", isSignal: true, isRequired: true, transformFunction: null }, collectionName: { classPropertyName: "collectionName", publicName: "collectionName", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { anyItemClickedEv: "anyItemClickedEv" }, ngImport: i0, template: "<!-- ========================= Conditional Rendering ========================= -->\n@if (item()) {\n @if (item().children?.length) {\n\n <!-- ========================= Parent Item with Dropdown ========================= -->\n <div class=\"zs:relative zs:w-full\">\n\n <!-- ========================= Main Toggle Button ========================= -->\n <button\n type=\"button\"\n (click)=\"toggle()\"\n [ngClass]=\"getItemClasses(item())\"\n class=\"zs:flex zs:w-full zs:items-center zs:gap-2 zs:rounded-md zs:px-3 zs:py-2 zs:text-left \n zs:text-sm zs:font-medium zs:md:text-base\"\n aria-haspopup=\"true\"\n [attr.aria-expanded]=\"isOpen()\"\n [attr.aria-controls]=\"'submenu-' + index()\"\n >\n <div class=\"zs:flex zs:items-center\">\n @if (item().icon) {\n <i [ngClass]=\"[\n item().icon, \n item().iconClass ?? '',\n (item().icon && item().label) ? 'zs:mr-2' : ''\n ]\" aria-hidden=\"true\"></i>\n }\n <span class=\"zs:wrap-break-word\" [ngClass]=\"labelLineClass(item())\">{{ item().label }}</span>\n </div>\n <i class=\"fas fa-chevron-down zs:ml-auto zs:p-0.5 zs:text-xs\" aria-hidden=\"true\"></i>\n </button>\n\n <!-- ========================= Dropdown Menu ========================= -->\n <div\n [id]=\"'submenu-' + index()\"\n [ngClass]=\"{\n 'zs:block': isOpen(),\n 'zs:hidden': !isOpen(),\n 'zs:absolute zs:left-4 zs:w-54 zs:mt-1 zs:p-2 zs:bg-white zs:dark:bg-gray-800 \n zs:rounded-md shadow-md-all shadow-md-all-night': item().childrenOpenWindow,\n 'zs:px-4 zs:mt-1': !item().childrenOpenWindow\n }\"\n class=\"{{ zIndices.navItemDropdown }} zs:flex zs:flex-col zs:gap-
|
|
372
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: NavItem, isStandalone: true, selector: "ZS-nav-item", inputs: { item: { classPropertyName: "item", publicName: "item", isSignal: true, isRequired: true, transformFunction: null }, collectionName: { classPropertyName: "collectionName", publicName: "collectionName", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { anyItemClickedEv: "anyItemClickedEv" }, ngImport: i0, template: "<!-- ========================= Conditional Rendering ========================= -->\n@if (item()) {\n @if (item().children?.length) {\n\n <!-- ========================= Parent Item with Dropdown ========================= -->\n <div class=\"zs:relative zs:w-full\">\n\n <!-- ========================= Main Toggle Button ========================= -->\n <button\n type=\"button\"\n (click)=\"toggle()\"\n [ngClass]=\"getItemClasses(item())\"\n class=\"zs:flex zs:w-full zs:items-center zs:gap-2 zs:rounded-md zs:px-3 zs:py-2 zs:text-left \n zs:text-sm zs:font-medium zs:md:text-base\"\n aria-haspopup=\"true\"\n [attr.aria-expanded]=\"isOpen()\"\n [attr.aria-controls]=\"'submenu-' + index()\"\n >\n <div class=\"zs:flex zs:items-center\">\n @if (item().icon) {\n <i [ngClass]=\"[\n item().icon, \n item().iconClass ?? '',\n (item().icon && item().label) ? 'zs:mr-2' : ''\n ]\" aria-hidden=\"true\"></i>\n }\n <span class=\"zs:wrap-break-word\" [ngClass]=\"labelLineClass(item())\">{{ item().label }}</span>\n </div>\n <i class=\"fas fa-chevron-down zs:ml-auto zs:p-0.5 zs:text-xs\" aria-hidden=\"true\"></i>\n </button>\n\n <!-- ========================= Dropdown Menu ========================= -->\n <div\n [id]=\"'submenu-' + index()\"\n [ngClass]=\"{\n 'zs:block': isOpen(),\n 'zs:hidden': !isOpen(),\n 'zs:absolute zs:left-4 zs:w-54 zs:mt-1 zs:p-2 zs:bg-white zs:dark:bg-gray-800 \n zs:rounded-md shadow-md-all shadow-md-all-night': item().childrenOpenWindow,\n 'zs:px-4 zs:mt-1.5': !item().childrenOpenWindow\n }\"\n class=\"{{ zIndices.navItemDropdown }} zs:flex zs:flex-col zs:gap-1.5\"\n role=\"menu\"\n [attr.aria-label]=\"item().label + ' submenu'\"\n >\n @for (child of item().children; track $index) {\n <ZS-nav-item\n [item]=\"child\"\n [collectionName]=\"collectionName() + '-' + index()\"\n (anyItemClickedEv)=\"handleChildClick($event)\"\n role=\"menuitem\"\n ></ZS-nav-item>\n }\n </div>\n\n </div>\n\n } @else {\n\n <!-- ========================= Leaf Item (No Children) ========================= -->\n <a\n [routerLink]=\"item().routerLink\"\n [routerLinkActive]=\"item().routerLinkActive ?? ''\"\n #rla=\"routerLinkActive\"\n [ngClass]=\"rla.isActive && item().routerLinkActive ? '' : getItemClasses(item())\"\n class=\"zs:flex zs:items-center zs:rounded-md zs:px-3 zs:py-2 \n zs:text-sm zs:font-medium zs:md:text-base\"\n (click)=\"onItemClick()\"\n role=\"menuitem\"\n >\n @if (item().icon) {\n <i [ngClass]=\"[\n item().icon,\n rla.isActive && item().routerLinkActive ? '' : (item().iconClass ?? ''),\n (item().icon && item().label) ? 'zs:mr-2' : ''\n ]\"\n aria-hidden=\"true\"></i>\n }\n <span class=\"zs:wrap-break-word zs:line-clamp-3\" [ngClass]=\"labelLineClass(item())\">{{ item().label }}</span>\n </a>\n }\n}", styles: [""], dependencies: [{ kind: "component", type: NavItem, selector: "ZS-nav-item", inputs: ["item", "collectionName"], outputs: ["anyItemClickedEv"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i1$1.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }] });
|
|
373
373
|
}
|
|
374
374
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: NavItem, decorators: [{
|
|
375
375
|
type: Component,
|
|
376
|
-
args: [{ selector: 'ZS-nav-item', imports: [CommonModule, RouterModule], template: "<!-- ========================= Conditional Rendering ========================= -->\n@if (item()) {\n @if (item().children?.length) {\n\n <!-- ========================= Parent Item with Dropdown ========================= -->\n <div class=\"zs:relative zs:w-full\">\n\n <!-- ========================= Main Toggle Button ========================= -->\n <button\n type=\"button\"\n (click)=\"toggle()\"\n [ngClass]=\"getItemClasses(item())\"\n class=\"zs:flex zs:w-full zs:items-center zs:gap-2 zs:rounded-md zs:px-3 zs:py-2 zs:text-left \n zs:text-sm zs:font-medium zs:md:text-base\"\n aria-haspopup=\"true\"\n [attr.aria-expanded]=\"isOpen()\"\n [attr.aria-controls]=\"'submenu-' + index()\"\n >\n <div class=\"zs:flex zs:items-center\">\n @if (item().icon) {\n <i [ngClass]=\"[\n item().icon, \n item().iconClass ?? '',\n (item().icon && item().label) ? 'zs:mr-2' : ''\n ]\" aria-hidden=\"true\"></i>\n }\n <span class=\"zs:wrap-break-word\" [ngClass]=\"labelLineClass(item())\">{{ item().label }}</span>\n </div>\n <i class=\"fas fa-chevron-down zs:ml-auto zs:p-0.5 zs:text-xs\" aria-hidden=\"true\"></i>\n </button>\n\n <!-- ========================= Dropdown Menu ========================= -->\n <div\n [id]=\"'submenu-' + index()\"\n [ngClass]=\"{\n 'zs:block': isOpen(),\n 'zs:hidden': !isOpen(),\n 'zs:absolute zs:left-4 zs:w-54 zs:mt-1 zs:p-2 zs:bg-white zs:dark:bg-gray-800 \n zs:rounded-md shadow-md-all shadow-md-all-night': item().childrenOpenWindow,\n 'zs:px-4 zs:mt-1': !item().childrenOpenWindow\n }\"\n class=\"{{ zIndices.navItemDropdown }} zs:flex zs:flex-col zs:gap-
|
|
376
|
+
args: [{ selector: 'ZS-nav-item', imports: [CommonModule, RouterModule], template: "<!-- ========================= Conditional Rendering ========================= -->\n@if (item()) {\n @if (item().children?.length) {\n\n <!-- ========================= Parent Item with Dropdown ========================= -->\n <div class=\"zs:relative zs:w-full\">\n\n <!-- ========================= Main Toggle Button ========================= -->\n <button\n type=\"button\"\n (click)=\"toggle()\"\n [ngClass]=\"getItemClasses(item())\"\n class=\"zs:flex zs:w-full zs:items-center zs:gap-2 zs:rounded-md zs:px-3 zs:py-2 zs:text-left \n zs:text-sm zs:font-medium zs:md:text-base\"\n aria-haspopup=\"true\"\n [attr.aria-expanded]=\"isOpen()\"\n [attr.aria-controls]=\"'submenu-' + index()\"\n >\n <div class=\"zs:flex zs:items-center\">\n @if (item().icon) {\n <i [ngClass]=\"[\n item().icon, \n item().iconClass ?? '',\n (item().icon && item().label) ? 'zs:mr-2' : ''\n ]\" aria-hidden=\"true\"></i>\n }\n <span class=\"zs:wrap-break-word\" [ngClass]=\"labelLineClass(item())\">{{ item().label }}</span>\n </div>\n <i class=\"fas fa-chevron-down zs:ml-auto zs:p-0.5 zs:text-xs\" aria-hidden=\"true\"></i>\n </button>\n\n <!-- ========================= Dropdown Menu ========================= -->\n <div\n [id]=\"'submenu-' + index()\"\n [ngClass]=\"{\n 'zs:block': isOpen(),\n 'zs:hidden': !isOpen(),\n 'zs:absolute zs:left-4 zs:w-54 zs:mt-1 zs:p-2 zs:bg-white zs:dark:bg-gray-800 \n zs:rounded-md shadow-md-all shadow-md-all-night': item().childrenOpenWindow,\n 'zs:px-4 zs:mt-1.5': !item().childrenOpenWindow\n }\"\n class=\"{{ zIndices.navItemDropdown }} zs:flex zs:flex-col zs:gap-1.5\"\n role=\"menu\"\n [attr.aria-label]=\"item().label + ' submenu'\"\n >\n @for (child of item().children; track $index) {\n <ZS-nav-item\n [item]=\"child\"\n [collectionName]=\"collectionName() + '-' + index()\"\n (anyItemClickedEv)=\"handleChildClick($event)\"\n role=\"menuitem\"\n ></ZS-nav-item>\n }\n </div>\n\n </div>\n\n } @else {\n\n <!-- ========================= Leaf Item (No Children) ========================= -->\n <a\n [routerLink]=\"item().routerLink\"\n [routerLinkActive]=\"item().routerLinkActive ?? ''\"\n #rla=\"routerLinkActive\"\n [ngClass]=\"rla.isActive && item().routerLinkActive ? '' : getItemClasses(item())\"\n class=\"zs:flex zs:items-center zs:rounded-md zs:px-3 zs:py-2 \n zs:text-sm zs:font-medium zs:md:text-base\"\n (click)=\"onItemClick()\"\n role=\"menuitem\"\n >\n @if (item().icon) {\n <i [ngClass]=\"[\n item().icon,\n rla.isActive && item().routerLinkActive ? '' : (item().iconClass ?? ''),\n (item().icon && item().label) ? 'zs:mr-2' : ''\n ]\"\n aria-hidden=\"true\"></i>\n }\n <span class=\"zs:wrap-break-word zs:line-clamp-3\" [ngClass]=\"labelLineClass(item())\">{{ item().label }}</span>\n </a>\n }\n}" }]
|
|
377
377
|
}], ctorParameters: () => [], propDecorators: { item: [{ type: i0.Input, args: [{ isSignal: true, alias: "item", required: true }] }], collectionName: [{ type: i0.Input, args: [{ isSignal: true, alias: "collectionName", required: true }] }], anyItemClickedEv: [{ type: i0.Output, args: ["anyItemClickedEv"] }] } });
|
|
378
378
|
|
|
379
379
|
// Unified palette map with all configurations
|
|
@@ -1636,11 +1636,11 @@ class Navbar {
|
|
|
1636
1636
|
this.resizeObserver.disconnect();
|
|
1637
1637
|
}
|
|
1638
1638
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: Navbar, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1639
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: Navbar, isStandalone: true, selector: "ZS-navbar", inputs: { fixed: { classPropertyName: "fixed", publicName: "fixed", isSignal: true, isRequired: false, transformFunction: null }, logoUrl: { classPropertyName: "logoUrl", publicName: "logoUrl", isSignal: true, isRequired: false, transformFunction: null }, siteNameConfig: { classPropertyName: "siteNameConfig", publicName: "siteNameConfig", isSignal: true, isRequired: false, transformFunction: null }, authButtons: { classPropertyName: "authButtons", publicName: "authButtons", isSignal: true, isRequired: false, transformFunction: null }, showUserSection: { classPropertyName: "showUserSection", publicName: "showUserSection", isSignal: true, isRequired: false, transformFunction: null }, showSearchBar: { classPropertyName: "showSearchBar", publicName: "showSearchBar", isSignal: true, isRequired: false, transformFunction: null }, navItems: { classPropertyName: "navItems", publicName: "navItems", isSignal: true, isRequired: false, transformFunction: null }, isLoggedIn: { classPropertyName: "isLoggedIn", publicName: "isLoggedIn", isSignal: true, isRequired: false, transformFunction: null }, userProfile: { classPropertyName: "userProfile", publicName: "userProfile", isSignal: true, isRequired: false, transformFunction: null }, userMenuItems: { classPropertyName: "userMenuItems", publicName: "userMenuItems", isSignal: true, isRequired: false, transformFunction: null }, searchPlaceholder: { classPropertyName: "searchPlaceholder", publicName: "searchPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, searchValue: { classPropertyName: "searchValue", publicName: "searchValue", isSignal: true, isRequired: false, transformFunction: null }, isMobileMenuOpen: { classPropertyName: "isMobileMenuOpen", publicName: "isMobileMenuOpen", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { loginClickedEv: "loginClickedEv", signupClickedEv: "signupClickedEv", searchSubmittedEv: "searchSubmittedEv", anyItemClickedEv: "anyItemClickedEv", searchValue: "searchValueChange", isMobileMenuOpen: "isMobileMenuOpenChange" }, ngImport: i0, template: "<!-- ========================= Fixed Navbar Container ========================= -->\n\n<nav\n class=\"zs:bg-white zs:dark:bg-[#18202F] zs:top-0 zs:left-0 zs:right-0 {{ zIndices.navbar }} zs:shadow-md zs:dark:shadow-gray-400/30\"\n [ngClass]=\"fixed() ? 'zs:fixed' : 'zs:relative'\"\n role=\"navigation\"\n aria-label=\"Main Navigation\"\n>\n <div class=\"zs:max-w-7xl zs:mx-auto zs:px-4 zs:sm:px-6 zs:lg:px-8\">\n <div class=\"zs:flex zs:justify-between zs:h-16 zs:gap-4\">\n\n <!-- ========================= Logo & Site Name ========================= -->\n <div class=\"zs:flex zs:items-center\">\n @if (logoUrl() || siteNameConfig()) {\n <a\n [routerLink]=\"[siteNameConfig()?.routerLink ?? '/']\"\n class=\"zs:shrink-0 zs:flex zs:items-center zs:gap-2 zs:focus:outline-hidden zs:focus-visible:ring-2 zs:focus-visible:ring-blue-500\"\n aria-label=\"Homepage\"\n >\n @if (logoUrl()) {\n <img\n [src]=\"logoUrl()\"\n alt=\"{{ siteNameConfig()?.siteName ?? 'Site Logo' }}\"\n class=\"zs:h-9 zs:w-auto\"\n />\n }\n @if (siteNameConfig()) {\n <span\n [class]=\"siteNameConfig()?.siteNameColorClass ?? 'zs:text-gray-800 zs:dark:text-gray-100'\"\n class=\"zs:font-bold zs:text-xl\"\n >\n {{ siteNameConfig()?.siteName }}\n </span>\n }\n </a>\n }\n </div>\n\n <!-- ========================= Desktop Navigation ========================= -->\n <div class=\"zs:hidden zs:lg:flex zs:items-center zs:gap-3\" role=\"menubar\">\n @for (item of visibleNavItems(); track $index) {\n <ZS-nav-item\n [item]=\"item\"\n [collectionName]=\"'navItems'\"\n (anyItemClickedEv)=\"itemClicked($event)\"\n role=\"menuitem\"\n />\n }\n\n @if (moreNavItems().length > 0) {\n <div class=\"zs:relative\" role=\"none\">\n <button\n (click)=\"isMoreOpen.set(!isMoreOpen())\"\n [attr.aria-expanded]=\"isMoreOpen()\"\n aria-haspopup=\"true\"\n aria-controls=\"more-menu\"\n class=\"zs:px-3 zs:py-2 zs:text-sm zs:font-bold zs:text-blue-600 zs:dark:text-blue-400\n zs:hover:text-blue-700 zs:dark:hover:text-blue-300 zs:focus:outline-hidden \n zs:focus-visible:ring-2 zs:focus-visible:ring-blue-500\"\n >\n More\n <i class=\"fas fa-chevron-down zs:ml-1 zs:text-xs zs:text-gray-500 zs:dark:text-gray-400\"></i>\n </button>\n <div\n id=\"more-menu\"\n [ngClass]=\"{ 'zs:block': isMoreOpen(), 'zs:hidden': !isMoreOpen() }\"\n class=\"zs:absolute zs:bg-white zs:dark:bg-[#18202F] shadow-md-all \n shadow-md-all-night zs:rounded-md zs:mt-1 zs:p-2 zs:min-w-50 zs:z-200 \n zs:flex zs:flex-col zs:gap-2\"\n role=\"menu\"\n >\n @for (item of moreNavItems(); track $index) {\n <ZS-nav-item\n [item]=\"item\"\n [collectionName]=\"'navItems'\"\n (anyItemClickedEv)=\"itemClicked($event)\"\n role=\"menuitem\"\n />\n }\n </div>\n </div>\n }\n </div>\n\n <!-- ========================= Right Controls ========================= -->\n <div class=\"zs:flex zs:items-center zs:gap-3\">\n\n <!-- Search Bar (Desktop) -->\n @if (showSearchBar()) {\n <div class=\"zs:hidden zs:lg:block\" role=\"search\">\n <div class=\"zs:relative\">\n <label for=\"desktop-search\" class=\"sr-only\">Search</label>\n <input\n id=\"desktop-search\"\n type=\"text\"\n [value]=\"searchValue()\"\n (input)=\"searchValue.set($any($event.target).value)\"\n (keyup.enter)=\"onSearchSubmit()\"\n [placeholder]=\"searchPlaceholder()\"\n class=\"zs:bg-gray-100 zs:dark:bg-gray-700 zs:text-gray-800 zs:dark:text-gray-200 zs:rounded-full zs:py-2 zs:px-4 zs:w-64\n zs:transition-shadow zs:duration-200 zs:focus:outline-hidden zs:focus:ring-2 zs:focus:ring-blue-500\n zs:focus:bg-white zs:dark:focus:bg-gray-600 zs:shadow-sm zs:dark:shadow-gray-500/40\n zs:hover:shadow-md zs:dark:hover:shadow-gray-500/50\"\n />\n <button\n (click)=\"onSearchSubmit()\"\n class=\"zs:absolute zs:py-1 zs:px-2 zs:right-2 zs:top-1/2 zs:-translate-y-1/2 zs:text-gray-500 zs:dark:text-gray-400\n zs:hover:text-gray-700 zs:dark:hover:text-gray-300\"\n aria-label=\"Submit search\"\n >\n <i class=\"fas fa-search\"></i>\n </button>\n </div>\n </div>\n }\n\n <!-- User Profile Dropdown -->\n @if (isLoggedIn() && userProfile() && showUserSection()) {\n <div class=\"zs:relative\">\n <button\n (click)=\"toggleUserMenu()\"\n class=\"zs:flex zs:items-center zs:gap-2 zs:focus:outline-hidden zs:focus-visible:ring-2 zs:focus-visible:ring-blue-500\"\n aria-haspopup=\"true\"\n [attr.aria-expanded]=\"isUserMenuOpen()\"\n aria-controls=\"user-menu\"\n aria-label=\"User menu\"\n >\n @if (userProfile()?.imageUrl) {\n <img\n [src]=\"userProfile()?.imageUrl\"\n alt=\"{{ userProfile()?.name ?? 'User profile image' }}\"\n class=\"zs:size-9 zs:rounded-full zs:object-cover\"\n />\n } @else {\n <div\n class=\"zs:size-9 zs:rounded-full zs:bg-blue-500 zs:flex zs:items-center zs:justify-center zs:text-white zs:font-semibold\"\n aria-hidden=\"true\"\n >\n {{ userProfile()?.name?.charAt(0)?.toUpperCase() }}\n </div>\n }\n <i class=\"fas fa-chevron-down zs:text-xs zs:text-gray-600 zs:dark:text-gray-400\n zs:hover:text-gray-700 zs:dark:hover:text-gray-300\"></i>\n </button>\n\n @if (isUserMenuOpen() && userMenuItems().length > 0) {\n <div\n id=\"user-menu\"\n class=\"zs:absolute zs:right-0 zs:mt-2.5 zs:min-w-56 zs:bg-white zs:dark:bg-gray-800 zs:rounded-md\n shadow-md-all shadow-md-all-night zs:pt-2 zs:z-400\"\n role=\"menu\"\n >\n <!-- User Info Section -->\n <div class=\"zs:px-4 zs:py-2 zs:border-b zs:border-gray-200 zs:dark:border-gray-700\">\n @if (userProfile()?.name) {\n <div class=\"zs:font-semibold zs:text-gray-900 zs:dark:text-gray-100\">\n {{ userProfile()?.name }}\n </div>\n }\n @if (userProfile()?.username) {\n <div class=\"zs:text-sm zs:text-gray-600 zs:dark:text-gray-400\">\n @{{ userProfile()?.username }}\n </div>\n }\n @if (userProfile()?.email) {\n <div class=\"zs:text-sm zs:text-gray-500 zs:dark:text-gray-400\">\n {{ userProfile()?.email }}\n </div>\n }\n </div>\n\n <!-- Menu Items -->\n @if (userMenuItems().length > 0) {\n <div class=\"zs:py-1\">\n @for (item of getUserMenuItems(); track $index) {\n <ZS-nav-item\n [item]=\"item\"\n [collectionName]=\"'MenuItems'\"\n (anyItemClickedEv)=\"itemClicked($event)\"\n role=\"menuitem\"\n />\n }\n </div>\n }\n </div>\n }\n </div>\n }\n\n <!-- Auth Buttons -->\n @else if (authButtons().showAuthButtons && !isLoggedIn()) {\n <div class=\"zs:hidden zs:lg:flex zs:items-center zs:gap-3\" role=\"group\" aria-label=\"Authentication\">\n <ZS-button\n [btnStyle]=\"authButtons().login?.btnStyle ?? 'secondary'\"\n [variant]=\"authButtons().login?.variant ?? 'outline'\"\n [size]=\"authButtons().login?.size ?? 'md'\"\n [icon]=\"authButtons().login?.icon ?? ''\"\n (clickedEv)=\"onLogin()\"\n >\n Login\n </ZS-button>\n\n <ZS-button\n [btnStyle]=\"authButtons().signup?.btnStyle ?? 'primary'\"\n [variant]=\"authButtons().signup?.variant ?? 'solid'\"\n [size]=\"authButtons().signup?.size ?? 'md'\"\n [icon]=\"authButtons().signup?.icon ?? ''\"\n (clickedEv)=\"onSignup()\"\n >\n Sign Up\n </ZS-button>\n </div>\n }\n\n <!-- Mobile Menu Toggle -->\n @if(mobileNavItems().length || showSearchBar() || (authButtons().showAuthButtons && !isLoggedIn())) {\n <div class=\"zs:lg:hidden\">\n <button\n (click)=\"toggleMobileMenu()\"\n class=\"zs:p-2 zs:rounded-md zs:text-gray-600 zs:dark:text-gray-300\n zs:hover:text-gray-900 zs:dark:hover:text-gray-100\n zs:focus:outline-hidden zs:focus:ring-2 zs:focus:ring-inset\n zs:focus:ring-gray-200 zs:dark:focus:ring-gray-700\"\n aria-controls=\"mobile-menu\"\n aria-expanded=\"{{ isMobileMenuOpen() }}\"\n aria-label=\"Toggle mobile menu\"\n >\n <i class=\"fas fa-bars zs:px-1\"></i>\n </button>\n </div>\n }\n </div>\n </div>\n </div>\n\n <!-- ========================= Mobile Menu ========================= -->\n @if (isMobileMenuOpen()) {\n <div\n id=\"mobile-menu\"\n class=\"zs:lg:hidden zs:bg-white zs:dark:bg-[#18202F]\n zs:[box-shadow:0_8px_0_0_#364153] zs:dark:[box-shadow:0_8px_0_0_black]\"\n role=\"menu\"\n aria-label=\"Mobile navigation\"\n >\n <div class=\"zs:px-2 zs:pt-2 zs:pb-3 zs:flex zs:flex-col zs:gap-1 zs:sm:px-3\">\n\n <!-- Navigation Items -->\n <div class=\"zs:max-h-96 zs:flex zs:flex-col zs:gap-2 zs:pb-2 zs:overflow-y-auto\">\n @for (item of mobileNavItems(); track $index) {\n <ZS-nav-item\n [item]=\"item\"\n [collectionName]=\"'navItems'\"\n (anyItemClickedEv)=\"itemClicked($event)\"\n role=\"menuitem\"\n />\n }\n </div>\n\n <!-- Search Bar (Mobile) -->\n @if (showSearchBar()) {\n <div class=\"zs:px-3 zs:pb-2\" role=\"search\">\n <label for=\"mobile-search\" class=\"sr-only\">Search</label>\n <div class=\"zs:relative\">\n <input\n id=\"mobile-search\"\n type=\"text\"\n [value]=\"searchValue()\"\n (input)=\"searchValue.set($any($event.target).value)\"\n (keyup.enter)=\"onSearchSubmit()\"\n [placeholder]=\"searchPlaceholder()\"\n class=\"zs:w-full zs:bg-gray-100 zs:dark:bg-gray-700 zs:text-gray-800 zs:dark:text-gray-200\n zs:rounded-full zs:py-2 zs:px-4 zs:transition-shadow zs:duration-200 zs:focus:outline-hidden\n zs:focus:ring-2 zs:focus:ring-blue-500 zs:focus:bg-white zs:dark:focus:bg-gray-600\n zs:shadow-sm zs:dark:shadow-gray-500/40 zs:hover:shadow-md zs:dark:hover:shadow-gray-500/50\"\n />\n <button\n (click)=\"onSearchSubmit()\"\n class=\"zs:absolute zs:py-1 zs:px-2 zs:right-2 zs:top-1/2 zs:-translate-y-1/2 zs:text-gray-500 zs:dark:text-gray-400\n zs:hover:text-gray-700 zs:dark:hover:text-gray-300\"\n aria-label=\"Submit search\"\n >\n <i class=\"fas fa-search\"></i>\n </button>\n </div>\n </div>\n }\n\n <!-- Auth Buttons (Mobile) -->\n @if (authButtons().showAuthButtons && !isLoggedIn()) {\n <div\n class=\"zs:pt-3 zs:pb-4 zs:border-t zs:border-gray-300 zs:dark:border-gray-500\n zs:flex zs:flex-wrap zs:justify-start zs:items-center zs:gap-2\"\n role=\"group\"\n aria-label=\"Authentication (mobile)\"\n >\n <ZS-button\n [btnStyle]=\"authButtons().login?.btnStyle ?? 'secondary'\"\n [variant]=\"authButtons().login?.variant ?? 'outline'\"\n [size]=\"authButtons().login?.size ?? 'md'\"\n [icon]=\"authButtons().login?.icon ?? ''\"\n (clickedEv)=\"onLogin(); isMobileMenuOpen.set(false)\"\n >\n Login\n </ZS-button>\n\n <ZS-button\n [btnStyle]=\"authButtons().signup?.btnStyle ?? 'primary'\"\n [variant]=\"authButtons().signup?.variant ?? 'solid'\"\n [size]=\"authButtons().signup?.size ?? 'md'\"\n [icon]=\"authButtons().signup?.icon ?? ''\"\n (clickedEv)=\"onSignup(); isMobileMenuOpen.set(false)\"\n >\n Sign Up\n </ZS-button>\n </div>\n }\n </div>\n </div>\n }\n</nav>\n\n<!-- ========================= Spacer for Fixed Navbar ========================= -->\n@if (fixed()) {\n <div class=\"zs:h-16\" aria-hidden=\"true\"></div>\n}\n\n<!-- ========================= Overlay for Menu Closing ========================= -->\n@if (isMobileMenuOpen()) {\n <div\n class=\"zs:fixed zs:inset-0 zs:bg-gray-700 zs:dark:bg-black {{ zIndices.navbarOverlay }}\"\n (click)=\"closeAllMenus()\"\n aria-hidden=\"true\"\n ></div>\n}\n", styles: [":host{display:block}body{font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif}a,button{transition:all .2s ease-in-out}img{object-fit:cover}.shadow-lg{box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d}@media (max-width: 768px){.rtl\\:space-x-reverse{margin-right:0;margin-left:.75rem}}\n"], dependencies: [{ kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: NavItem, selector: "ZS-nav-item", inputs: ["item", "collectionName"], outputs: ["anyItemClickedEv"] }, { kind: "component", type: Button, selector: "ZS-button", inputs: ["Id", "btnStyle", "variant", "size", "disabled", "icon", "type"], outputs: ["clickedEv"] }] });
|
|
1639
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: Navbar, isStandalone: true, selector: "ZS-navbar", inputs: { fixed: { classPropertyName: "fixed", publicName: "fixed", isSignal: true, isRequired: false, transformFunction: null }, logoUrl: { classPropertyName: "logoUrl", publicName: "logoUrl", isSignal: true, isRequired: false, transformFunction: null }, siteNameConfig: { classPropertyName: "siteNameConfig", publicName: "siteNameConfig", isSignal: true, isRequired: false, transformFunction: null }, authButtons: { classPropertyName: "authButtons", publicName: "authButtons", isSignal: true, isRequired: false, transformFunction: null }, showUserSection: { classPropertyName: "showUserSection", publicName: "showUserSection", isSignal: true, isRequired: false, transformFunction: null }, showSearchBar: { classPropertyName: "showSearchBar", publicName: "showSearchBar", isSignal: true, isRequired: false, transformFunction: null }, navItems: { classPropertyName: "navItems", publicName: "navItems", isSignal: true, isRequired: false, transformFunction: null }, isLoggedIn: { classPropertyName: "isLoggedIn", publicName: "isLoggedIn", isSignal: true, isRequired: false, transformFunction: null }, userProfile: { classPropertyName: "userProfile", publicName: "userProfile", isSignal: true, isRequired: false, transformFunction: null }, userMenuItems: { classPropertyName: "userMenuItems", publicName: "userMenuItems", isSignal: true, isRequired: false, transformFunction: null }, searchPlaceholder: { classPropertyName: "searchPlaceholder", publicName: "searchPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, searchValue: { classPropertyName: "searchValue", publicName: "searchValue", isSignal: true, isRequired: false, transformFunction: null }, isMobileMenuOpen: { classPropertyName: "isMobileMenuOpen", publicName: "isMobileMenuOpen", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { loginClickedEv: "loginClickedEv", signupClickedEv: "signupClickedEv", searchSubmittedEv: "searchSubmittedEv", anyItemClickedEv: "anyItemClickedEv", searchValue: "searchValueChange", isMobileMenuOpen: "isMobileMenuOpenChange" }, ngImport: i0, template: "<!-- ========================= Fixed Navbar Container ========================= -->\n\n<nav\n class=\"zs:bg-white zs:dark:bg-[#18202F] zs:top-0 zs:left-0 zs:right-0 {{ zIndices.navbar }} zs:shadow-md zs:dark:shadow-gray-400/30\"\n [ngClass]=\"fixed() ? 'zs:fixed' : 'zs:relative'\"\n role=\"navigation\"\n aria-label=\"Main Navigation\"\n>\n <div class=\"zs:max-w-7xl zs:mx-auto zs:px-4 zs:sm:px-6 zs:lg:px-8\">\n <div class=\"zs:flex zs:justify-between zs:h-16 zs:gap-4\">\n\n <!-- ========================= Logo & Site Name ========================= -->\n <div class=\"zs:flex zs:items-center\">\n @if (logoUrl() || siteNameConfig()) {\n <a\n [routerLink]=\"[siteNameConfig()?.routerLink ?? '/']\"\n class=\"zs:shrink-0 zs:flex zs:items-center zs:gap-2 zs:focus:outline-hidden zs:focus-visible:ring-2 zs:focus-visible:ring-blue-500\"\n aria-label=\"Homepage\"\n >\n @if (logoUrl()) {\n <img\n [src]=\"logoUrl()\"\n alt=\"{{ siteNameConfig()?.siteName ?? 'Site Logo' }}\"\n class=\"zs:h-9 zs:w-auto\"\n />\n }\n @if (siteNameConfig()) {\n <span\n [class]=\"siteNameConfig()?.siteNameColorClass ?? 'zs:text-gray-800 zs:dark:text-gray-100'\"\n class=\"zs:font-bold zs:text-xl\"\n >\n {{ siteNameConfig()?.siteName }}\n </span>\n }\n </a>\n }\n </div>\n\n <!-- ========================= Desktop Navigation ========================= -->\n <div class=\"zs:hidden zs:lg:flex zs:items-center zs:gap-2\" role=\"menubar\">\n @for (item of visibleNavItems(); track $index) {\n <ZS-nav-item\n [item]=\"item\"\n [collectionName]=\"'navItems'\"\n (anyItemClickedEv)=\"itemClicked($event)\"\n role=\"menuitem\"\n />\n }\n\n @if (moreNavItems().length > 0) {\n <div class=\"zs:relative\" role=\"none\">\n <button\n (click)=\"isMoreOpen.set(!isMoreOpen())\"\n [attr.aria-expanded]=\"isMoreOpen()\"\n aria-haspopup=\"true\"\n aria-controls=\"more-menu\"\n class=\"zs:px-3 zs:py-2 zs:text-sm zs:font-bold \n zs:text-blue-600 zs:dark:text-blue-400\n zs:focus:outline-hidden zs:focus-visible:ring-2 \n zs:focus-visible:ring-blue-500 zs:group\n zs:flex zs:items-center zs:justify-center zs:gap-1.5\"\n >\n More\n <i class=\"fas fa-chevron-down zs:text-xs \n zs:text-gray-500 zs:dark:text-gray-400\n zs:group-hover:text-blue-600 zs:group-hover:scale-110\n zs:group-hover:dark:text-blue-400\n \"></i>\n </button>\n <div\n id=\"more-menu\"\n [ngClass]=\"{ 'zs:block': isMoreOpen(), 'zs:hidden': !isMoreOpen() }\"\n class=\"zs:absolute zs:bg-white zs:dark:bg-[#18202F] shadow-md-all \n shadow-md-all-night zs:rounded-md zs:mt-1 zs:p-2 zs:min-w-50 zs:z-200 \n zs:flex zs:flex-col zs:gap-1.5\"\n role=\"menu\"\n >\n @for (item of moreNavItems(); track $index) {\n <ZS-nav-item\n [item]=\"item\"\n [collectionName]=\"'navItems'\"\n (anyItemClickedEv)=\"itemClicked($event)\"\n role=\"menuitem\"\n />\n }\n </div>\n </div>\n }\n </div>\n\n <!-- ========================= Right Controls ========================= -->\n <div class=\"zs:flex zs:items-center zs:gap-3\">\n\n <!-- Search Bar (Desktop) -->\n @if (showSearchBar()) {\n <div class=\"zs:hidden zs:lg:block\" role=\"search\">\n <div class=\"zs:relative\">\n <label for=\"desktop-search\" class=\"sr-only\">Search</label>\n <input\n id=\"desktop-search\"\n type=\"text\"\n [value]=\"searchValue()\"\n (input)=\"searchValue.set($any($event.target).value)\"\n (keyup.enter)=\"onSearchSubmit()\"\n [placeholder]=\"searchPlaceholder()\"\n class=\"zs:bg-gray-100 zs:dark:bg-gray-700 zs:text-gray-800 zs:dark:text-gray-200 zs:rounded-full zs:py-2 zs:px-4 zs:w-64\n zs:transition-shadow zs:duration-200 zs:focus:outline-hidden zs:focus:ring-2 zs:focus:ring-blue-500\n zs:focus:bg-white zs:dark:focus:bg-gray-600 zs:shadow-sm zs:dark:shadow-gray-500/40\n zs:hover:shadow-md zs:dark:hover:shadow-gray-500/50\"\n />\n <button\n (click)=\"onSearchSubmit()\"\n class=\"zs:absolute zs:py-1 zs:px-2 zs:right-2 zs:top-1/2 zs:-translate-y-1/2 zs:text-gray-500 zs:dark:text-gray-400\n zs:hover:text-gray-700 zs:dark:hover:text-gray-300\"\n aria-label=\"Submit search\"\n >\n <i class=\"fas fa-search\"></i>\n </button>\n </div>\n </div>\n }\n\n <!-- User Profile Dropdown -->\n @if (isLoggedIn() && userProfile() && showUserSection()) {\n <div class=\"zs:relative\">\n <button\n (click)=\"toggleUserMenu()\"\n class=\"zs:flex zs:items-center zs:gap-2 zs:focus:outline-hidden zs:focus-visible:ring-2 zs:focus-visible:ring-blue-500\"\n aria-haspopup=\"true\"\n [attr.aria-expanded]=\"isUserMenuOpen()\"\n aria-controls=\"user-menu\"\n aria-label=\"User menu\"\n >\n @if (userProfile()?.imageUrl) {\n <img\n [src]=\"userProfile()?.imageUrl\"\n alt=\"{{ userProfile()?.name ?? 'User profile image' }}\"\n class=\"zs:size-9 zs:rounded-full zs:object-cover\"\n />\n } @else {\n <div\n class=\"zs:size-9 zs:rounded-full zs:bg-blue-500 zs:flex zs:items-center zs:justify-center zs:text-white zs:font-semibold\"\n aria-hidden=\"true\"\n >\n {{ userProfile()?.name?.charAt(0)?.toUpperCase() }}\n </div>\n }\n <i class=\"fas fa-chevron-down zs:text-xs zs:text-gray-600 zs:dark:text-gray-400\n zs:hover:text-gray-700 zs:dark:hover:text-gray-300\"></i>\n </button>\n\n @if (isUserMenuOpen() && userMenuItems().length > 0) {\n <div\n id=\"user-menu\"\n class=\"zs:absolute zs:right-0 zs:mt-2.5 zs:min-w-56 zs:bg-white zs:dark:bg-gray-800 zs:rounded-md\n shadow-md-all shadow-md-all-night zs:pt-2 zs:z-400\"\n role=\"menu\"\n >\n <!-- User Info Section -->\n <div class=\"zs:px-4 zs:py-2 zs:border-b zs:border-gray-200 zs:dark:border-gray-700\">\n @if (userProfile()?.name) {\n <div class=\"zs:font-semibold zs:text-gray-900 zs:dark:text-gray-100\">\n {{ userProfile()?.name }}\n </div>\n }\n @if (userProfile()?.username) {\n <div class=\"zs:text-sm zs:text-gray-600 zs:dark:text-gray-400\">\n @{{ userProfile()?.username }}\n </div>\n }\n @if (userProfile()?.email) {\n <div class=\"zs:text-sm zs:text-gray-500 zs:dark:text-gray-400\">\n {{ userProfile()?.email }}\n </div>\n }\n </div>\n\n <!-- Menu Items -->\n @if (userMenuItems().length > 0) {\n <div class=\"zs:py-1\">\n @for (item of getUserMenuItems(); track $index) {\n <ZS-nav-item\n [item]=\"item\"\n [collectionName]=\"'MenuItems'\"\n (anyItemClickedEv)=\"itemClicked($event)\"\n role=\"menuitem\"\n />\n }\n </div>\n }\n </div>\n }\n </div>\n }\n\n <!-- Auth Buttons -->\n @else if (authButtons().showAuthButtons && !isLoggedIn()) {\n <div class=\"zs:hidden zs:lg:flex zs:items-center zs:gap-3\" role=\"group\" aria-label=\"Authentication\">\n <ZS-button\n [btnStyle]=\"authButtons().login?.btnStyle ?? 'secondary'\"\n [variant]=\"authButtons().login?.variant ?? 'outline'\"\n [size]=\"authButtons().login?.size ?? 'md'\"\n [icon]=\"authButtons().login?.icon ?? ''\"\n (clickedEv)=\"onLogin()\"\n >\n Login\n </ZS-button>\n\n <ZS-button\n [btnStyle]=\"authButtons().signup?.btnStyle ?? 'primary'\"\n [variant]=\"authButtons().signup?.variant ?? 'solid'\"\n [size]=\"authButtons().signup?.size ?? 'md'\"\n [icon]=\"authButtons().signup?.icon ?? ''\"\n class=\"zs:truncate\"\n (clickedEv)=\"onSignup()\"\n >\n Sign Up\n </ZS-button>\n </div>\n }\n\n <!-- Mobile Menu Toggle -->\n @if(mobileNavItems().length || showSearchBar() || (authButtons().showAuthButtons && !isLoggedIn())) {\n <div class=\"zs:lg:hidden\">\n <button\n (click)=\"toggleMobileMenu()\"\n class=\"zs:p-2 zs:rounded-md zs:text-gray-600 zs:dark:text-gray-300\n zs:hover:text-gray-900 zs:dark:hover:text-gray-100\n zs:focus:outline-hidden zs:focus:ring-2 zs:focus:ring-inset\n zs:focus:ring-gray-200 zs:dark:focus:ring-gray-700\"\n aria-controls=\"mobile-menu\"\n aria-expanded=\"{{ isMobileMenuOpen() }}\"\n aria-label=\"Toggle mobile menu\"\n >\n <i class=\"fas fa-bars zs:px-1\"></i>\n </button>\n </div>\n }\n </div>\n </div>\n </div>\n\n <!-- ========================= Mobile Menu ========================= -->\n @if (isMobileMenuOpen()) {\n <div\n id=\"mobile-menu\"\n class=\"zs:lg:hidden zs:bg-white zs:dark:bg-[#18202F]\n zs:[box-shadow:0_8px_0_0_#364153] zs:dark:[box-shadow:0_8px_0_0_black]\"\n role=\"menu\"\n aria-label=\"Mobile navigation\"\n >\n <div class=\"zs:pl-3 zs:pr-2 zs:pb-3 zs:flex zs:flex-col zs:gap-1\">\n\n <!-- Navigation Items -->\n <div class=\"zs:max-h-96 zs:flex zs:flex-col zs:gap-1.5 zs:pr-1 zs:pb-2 zs:pt-2 zs:overflow-y-auto\">\n @for (item of mobileNavItems(); track $index) {\n <ZS-nav-item\n [item]=\"item\"\n [collectionName]=\"'navItems'\"\n (anyItemClickedEv)=\"itemClicked($event)\"\n role=\"menuitem\"\n />\n }\n </div>\n\n <!-- Search Bar (Mobile) -->\n @if (showSearchBar()) {\n <div class=\"zs:px-3 zs:pb-2\" role=\"search\">\n <label for=\"mobile-search\" class=\"sr-only\">Search</label>\n <div class=\"zs:relative\">\n <input\n id=\"mobile-search\"\n type=\"text\"\n [value]=\"searchValue()\"\n (input)=\"searchValue.set($any($event.target).value)\"\n (keyup.enter)=\"onSearchSubmit()\"\n [placeholder]=\"searchPlaceholder()\"\n class=\"zs:w-full zs:bg-gray-100 zs:dark:bg-gray-700 zs:text-gray-800 zs:dark:text-gray-200\n zs:rounded-full zs:py-2 zs:px-4 zs:transition-shadow zs:duration-200 zs:focus:outline-hidden\n zs:focus:ring-2 zs:focus:ring-blue-500 zs:focus:bg-white zs:dark:focus:bg-gray-600\n zs:shadow-sm zs:dark:shadow-gray-500/40 zs:hover:shadow-md zs:dark:hover:shadow-gray-500/50\"\n />\n <button\n (click)=\"onSearchSubmit()\"\n class=\"zs:absolute zs:py-1 zs:px-2 zs:right-2 zs:top-1/2 zs:-translate-y-1/2 zs:text-gray-500 zs:dark:text-gray-400\n zs:hover:text-gray-700 zs:dark:hover:text-gray-300\"\n aria-label=\"Submit search\"\n >\n <i class=\"fas fa-search\"></i>\n </button>\n </div>\n </div>\n }\n\n <!-- Auth Buttons (Mobile) -->\n @if (authButtons().showAuthButtons && !isLoggedIn()) {\n <div\n class=\"zs:pt-3 zs:pb-4 zs:border-t zs:border-gray-300 zs:dark:border-gray-500\n zs:flex zs:flex-wrap zs:justify-start zs:items-center zs:gap-2\"\n role=\"group\"\n aria-label=\"Authentication (mobile)\"\n >\n <ZS-button\n [btnStyle]=\"authButtons().login?.btnStyle ?? 'secondary'\"\n [variant]=\"authButtons().login?.variant ?? 'outline'\"\n [size]=\"authButtons().login?.size ?? 'md'\"\n [icon]=\"authButtons().login?.icon ?? ''\"\n (clickedEv)=\"onLogin(); isMobileMenuOpen.set(false)\"\n >\n Login\n </ZS-button>\n\n <ZS-button\n [btnStyle]=\"authButtons().signup?.btnStyle ?? 'primary'\"\n [variant]=\"authButtons().signup?.variant ?? 'solid'\"\n [size]=\"authButtons().signup?.size ?? 'md'\"\n [icon]=\"authButtons().signup?.icon ?? ''\"\n (clickedEv)=\"onSignup(); isMobileMenuOpen.set(false)\"\n >\n Sign Up\n </ZS-button>\n </div>\n }\n </div>\n </div>\n }\n</nav>\n\n<!-- ========================= Spacer for Fixed Navbar ========================= -->\n@if (fixed()) {\n <div class=\"zs:h-16\" aria-hidden=\"true\"></div>\n}\n\n<!-- ========================= Overlay for Menu Closing ========================= -->\n@if (isMobileMenuOpen()) {\n <div\n class=\"zs:fixed zs:inset-0 zs:bg-gray-700 zs:dark:bg-black {{ zIndices.navbarOverlay }}\"\n (click)=\"closeAllMenus()\"\n aria-hidden=\"true\"\n ></div>\n}\n", styles: [":host{display:block}body{font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif}a,button{transition:all .2s ease-in-out}img{object-fit:cover}.shadow-lg{box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d}@media (max-width: 768px){.rtl\\:space-x-reverse{margin-right:0;margin-left:.75rem}}\n"], dependencies: [{ kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: NavItem, selector: "ZS-nav-item", inputs: ["item", "collectionName"], outputs: ["anyItemClickedEv"] }, { kind: "component", type: Button, selector: "ZS-button", inputs: ["Id", "btnStyle", "variant", "size", "disabled", "icon", "type"], outputs: ["clickedEv"] }] });
|
|
1640
1640
|
}
|
|
1641
1641
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: Navbar, decorators: [{
|
|
1642
1642
|
type: Component,
|
|
1643
|
-
args: [{ selector: 'ZS-navbar', imports: [RouterModule, CommonModule, NavItem, Button], template: "<!-- ========================= Fixed Navbar Container ========================= -->\n\n<nav\n class=\"zs:bg-white zs:dark:bg-[#18202F] zs:top-0 zs:left-0 zs:right-0 {{ zIndices.navbar }} zs:shadow-md zs:dark:shadow-gray-400/30\"\n [ngClass]=\"fixed() ? 'zs:fixed' : 'zs:relative'\"\n role=\"navigation\"\n aria-label=\"Main Navigation\"\n>\n <div class=\"zs:max-w-7xl zs:mx-auto zs:px-4 zs:sm:px-6 zs:lg:px-8\">\n <div class=\"zs:flex zs:justify-between zs:h-16 zs:gap-4\">\n\n <!-- ========================= Logo & Site Name ========================= -->\n <div class=\"zs:flex zs:items-center\">\n @if (logoUrl() || siteNameConfig()) {\n <a\n [routerLink]=\"[siteNameConfig()?.routerLink ?? '/']\"\n class=\"zs:shrink-0 zs:flex zs:items-center zs:gap-2 zs:focus:outline-hidden zs:focus-visible:ring-2 zs:focus-visible:ring-blue-500\"\n aria-label=\"Homepage\"\n >\n @if (logoUrl()) {\n <img\n [src]=\"logoUrl()\"\n alt=\"{{ siteNameConfig()?.siteName ?? 'Site Logo' }}\"\n class=\"zs:h-9 zs:w-auto\"\n />\n }\n @if (siteNameConfig()) {\n <span\n [class]=\"siteNameConfig()?.siteNameColorClass ?? 'zs:text-gray-800 zs:dark:text-gray-100'\"\n class=\"zs:font-bold zs:text-xl\"\n >\n {{ siteNameConfig()?.siteName }}\n </span>\n }\n </a>\n }\n </div>\n\n <!-- ========================= Desktop Navigation ========================= -->\n <div class=\"zs:hidden zs:lg:flex zs:items-center zs:gap-3\" role=\"menubar\">\n @for (item of visibleNavItems(); track $index) {\n <ZS-nav-item\n [item]=\"item\"\n [collectionName]=\"'navItems'\"\n (anyItemClickedEv)=\"itemClicked($event)\"\n role=\"menuitem\"\n />\n }\n\n @if (moreNavItems().length > 0) {\n <div class=\"zs:relative\" role=\"none\">\n <button\n (click)=\"isMoreOpen.set(!isMoreOpen())\"\n [attr.aria-expanded]=\"isMoreOpen()\"\n aria-haspopup=\"true\"\n aria-controls=\"more-menu\"\n class=\"zs:px-3 zs:py-2 zs:text-sm zs:font-bold zs:text-blue-600 zs:dark:text-blue-400\n zs:hover:text-blue-700 zs:dark:hover:text-blue-300 zs:focus:outline-hidden \n zs:focus-visible:ring-2 zs:focus-visible:ring-blue-500\"\n >\n More\n <i class=\"fas fa-chevron-down zs:ml-1 zs:text-xs zs:text-gray-500 zs:dark:text-gray-400\"></i>\n </button>\n <div\n id=\"more-menu\"\n [ngClass]=\"{ 'zs:block': isMoreOpen(), 'zs:hidden': !isMoreOpen() }\"\n class=\"zs:absolute zs:bg-white zs:dark:bg-[#18202F] shadow-md-all \n shadow-md-all-night zs:rounded-md zs:mt-1 zs:p-2 zs:min-w-50 zs:z-200 \n zs:flex zs:flex-col zs:gap-2\"\n role=\"menu\"\n >\n @for (item of moreNavItems(); track $index) {\n <ZS-nav-item\n [item]=\"item\"\n [collectionName]=\"'navItems'\"\n (anyItemClickedEv)=\"itemClicked($event)\"\n role=\"menuitem\"\n />\n }\n </div>\n </div>\n }\n </div>\n\n <!-- ========================= Right Controls ========================= -->\n <div class=\"zs:flex zs:items-center zs:gap-3\">\n\n <!-- Search Bar (Desktop) -->\n @if (showSearchBar()) {\n <div class=\"zs:hidden zs:lg:block\" role=\"search\">\n <div class=\"zs:relative\">\n <label for=\"desktop-search\" class=\"sr-only\">Search</label>\n <input\n id=\"desktop-search\"\n type=\"text\"\n [value]=\"searchValue()\"\n (input)=\"searchValue.set($any($event.target).value)\"\n (keyup.enter)=\"onSearchSubmit()\"\n [placeholder]=\"searchPlaceholder()\"\n class=\"zs:bg-gray-100 zs:dark:bg-gray-700 zs:text-gray-800 zs:dark:text-gray-200 zs:rounded-full zs:py-2 zs:px-4 zs:w-64\n zs:transition-shadow zs:duration-200 zs:focus:outline-hidden zs:focus:ring-2 zs:focus:ring-blue-500\n zs:focus:bg-white zs:dark:focus:bg-gray-600 zs:shadow-sm zs:dark:shadow-gray-500/40\n zs:hover:shadow-md zs:dark:hover:shadow-gray-500/50\"\n />\n <button\n (click)=\"onSearchSubmit()\"\n class=\"zs:absolute zs:py-1 zs:px-2 zs:right-2 zs:top-1/2 zs:-translate-y-1/2 zs:text-gray-500 zs:dark:text-gray-400\n zs:hover:text-gray-700 zs:dark:hover:text-gray-300\"\n aria-label=\"Submit search\"\n >\n <i class=\"fas fa-search\"></i>\n </button>\n </div>\n </div>\n }\n\n <!-- User Profile Dropdown -->\n @if (isLoggedIn() && userProfile() && showUserSection()) {\n <div class=\"zs:relative\">\n <button\n (click)=\"toggleUserMenu()\"\n class=\"zs:flex zs:items-center zs:gap-2 zs:focus:outline-hidden zs:focus-visible:ring-2 zs:focus-visible:ring-blue-500\"\n aria-haspopup=\"true\"\n [attr.aria-expanded]=\"isUserMenuOpen()\"\n aria-controls=\"user-menu\"\n aria-label=\"User menu\"\n >\n @if (userProfile()?.imageUrl) {\n <img\n [src]=\"userProfile()?.imageUrl\"\n alt=\"{{ userProfile()?.name ?? 'User profile image' }}\"\n class=\"zs:size-9 zs:rounded-full zs:object-cover\"\n />\n } @else {\n <div\n class=\"zs:size-9 zs:rounded-full zs:bg-blue-500 zs:flex zs:items-center zs:justify-center zs:text-white zs:font-semibold\"\n aria-hidden=\"true\"\n >\n {{ userProfile()?.name?.charAt(0)?.toUpperCase() }}\n </div>\n }\n <i class=\"fas fa-chevron-down zs:text-xs zs:text-gray-600 zs:dark:text-gray-400\n zs:hover:text-gray-700 zs:dark:hover:text-gray-300\"></i>\n </button>\n\n @if (isUserMenuOpen() && userMenuItems().length > 0) {\n <div\n id=\"user-menu\"\n class=\"zs:absolute zs:right-0 zs:mt-2.5 zs:min-w-56 zs:bg-white zs:dark:bg-gray-800 zs:rounded-md\n shadow-md-all shadow-md-all-night zs:pt-2 zs:z-400\"\n role=\"menu\"\n >\n <!-- User Info Section -->\n <div class=\"zs:px-4 zs:py-2 zs:border-b zs:border-gray-200 zs:dark:border-gray-700\">\n @if (userProfile()?.name) {\n <div class=\"zs:font-semibold zs:text-gray-900 zs:dark:text-gray-100\">\n {{ userProfile()?.name }}\n </div>\n }\n @if (userProfile()?.username) {\n <div class=\"zs:text-sm zs:text-gray-600 zs:dark:text-gray-400\">\n @{{ userProfile()?.username }}\n </div>\n }\n @if (userProfile()?.email) {\n <div class=\"zs:text-sm zs:text-gray-500 zs:dark:text-gray-400\">\n {{ userProfile()?.email }}\n </div>\n }\n </div>\n\n <!-- Menu Items -->\n @if (userMenuItems().length > 0) {\n <div class=\"zs:py-1\">\n @for (item of getUserMenuItems(); track $index) {\n <ZS-nav-item\n [item]=\"item\"\n [collectionName]=\"'MenuItems'\"\n (anyItemClickedEv)=\"itemClicked($event)\"\n role=\"menuitem\"\n />\n }\n </div>\n }\n </div>\n }\n </div>\n }\n\n <!-- Auth Buttons -->\n @else if (authButtons().showAuthButtons && !isLoggedIn()) {\n <div class=\"zs:hidden zs:lg:flex zs:items-center zs:gap-3\" role=\"group\" aria-label=\"Authentication\">\n <ZS-button\n [btnStyle]=\"authButtons().login?.btnStyle ?? 'secondary'\"\n [variant]=\"authButtons().login?.variant ?? 'outline'\"\n [size]=\"authButtons().login?.size ?? 'md'\"\n [icon]=\"authButtons().login?.icon ?? ''\"\n (clickedEv)=\"onLogin()\"\n >\n Login\n </ZS-button>\n\n <ZS-button\n [btnStyle]=\"authButtons().signup?.btnStyle ?? 'primary'\"\n [variant]=\"authButtons().signup?.variant ?? 'solid'\"\n [size]=\"authButtons().signup?.size ?? 'md'\"\n [icon]=\"authButtons().signup?.icon ?? ''\"\n (clickedEv)=\"onSignup()\"\n >\n Sign Up\n </ZS-button>\n </div>\n }\n\n <!-- Mobile Menu Toggle -->\n @if(mobileNavItems().length || showSearchBar() || (authButtons().showAuthButtons && !isLoggedIn())) {\n <div class=\"zs:lg:hidden\">\n <button\n (click)=\"toggleMobileMenu()\"\n class=\"zs:p-2 zs:rounded-md zs:text-gray-600 zs:dark:text-gray-300\n zs:hover:text-gray-900 zs:dark:hover:text-gray-100\n zs:focus:outline-hidden zs:focus:ring-2 zs:focus:ring-inset\n zs:focus:ring-gray-200 zs:dark:focus:ring-gray-700\"\n aria-controls=\"mobile-menu\"\n aria-expanded=\"{{ isMobileMenuOpen() }}\"\n aria-label=\"Toggle mobile menu\"\n >\n <i class=\"fas fa-bars zs:px-1\"></i>\n </button>\n </div>\n }\n </div>\n </div>\n </div>\n\n <!-- ========================= Mobile Menu ========================= -->\n @if (isMobileMenuOpen()) {\n <div\n id=\"mobile-menu\"\n class=\"zs:lg:hidden zs:bg-white zs:dark:bg-[#18202F]\n zs:[box-shadow:0_8px_0_0_#364153] zs:dark:[box-shadow:0_8px_0_0_black]\"\n role=\"menu\"\n aria-label=\"Mobile navigation\"\n >\n <div class=\"zs:px-2 zs:pt-2 zs:pb-3 zs:flex zs:flex-col zs:gap-1 zs:sm:px-3\">\n\n <!-- Navigation Items -->\n <div class=\"zs:max-h-96 zs:flex zs:flex-col zs:gap-2 zs:pb-2 zs:overflow-y-auto\">\n @for (item of mobileNavItems(); track $index) {\n <ZS-nav-item\n [item]=\"item\"\n [collectionName]=\"'navItems'\"\n (anyItemClickedEv)=\"itemClicked($event)\"\n role=\"menuitem\"\n />\n }\n </div>\n\n <!-- Search Bar (Mobile) -->\n @if (showSearchBar()) {\n <div class=\"zs:px-3 zs:pb-2\" role=\"search\">\n <label for=\"mobile-search\" class=\"sr-only\">Search</label>\n <div class=\"zs:relative\">\n <input\n id=\"mobile-search\"\n type=\"text\"\n [value]=\"searchValue()\"\n (input)=\"searchValue.set($any($event.target).value)\"\n (keyup.enter)=\"onSearchSubmit()\"\n [placeholder]=\"searchPlaceholder()\"\n class=\"zs:w-full zs:bg-gray-100 zs:dark:bg-gray-700 zs:text-gray-800 zs:dark:text-gray-200\n zs:rounded-full zs:py-2 zs:px-4 zs:transition-shadow zs:duration-200 zs:focus:outline-hidden\n zs:focus:ring-2 zs:focus:ring-blue-500 zs:focus:bg-white zs:dark:focus:bg-gray-600\n zs:shadow-sm zs:dark:shadow-gray-500/40 zs:hover:shadow-md zs:dark:hover:shadow-gray-500/50\"\n />\n <button\n (click)=\"onSearchSubmit()\"\n class=\"zs:absolute zs:py-1 zs:px-2 zs:right-2 zs:top-1/2 zs:-translate-y-1/2 zs:text-gray-500 zs:dark:text-gray-400\n zs:hover:text-gray-700 zs:dark:hover:text-gray-300\"\n aria-label=\"Submit search\"\n >\n <i class=\"fas fa-search\"></i>\n </button>\n </div>\n </div>\n }\n\n <!-- Auth Buttons (Mobile) -->\n @if (authButtons().showAuthButtons && !isLoggedIn()) {\n <div\n class=\"zs:pt-3 zs:pb-4 zs:border-t zs:border-gray-300 zs:dark:border-gray-500\n zs:flex zs:flex-wrap zs:justify-start zs:items-center zs:gap-2\"\n role=\"group\"\n aria-label=\"Authentication (mobile)\"\n >\n <ZS-button\n [btnStyle]=\"authButtons().login?.btnStyle ?? 'secondary'\"\n [variant]=\"authButtons().login?.variant ?? 'outline'\"\n [size]=\"authButtons().login?.size ?? 'md'\"\n [icon]=\"authButtons().login?.icon ?? ''\"\n (clickedEv)=\"onLogin(); isMobileMenuOpen.set(false)\"\n >\n Login\n </ZS-button>\n\n <ZS-button\n [btnStyle]=\"authButtons().signup?.btnStyle ?? 'primary'\"\n [variant]=\"authButtons().signup?.variant ?? 'solid'\"\n [size]=\"authButtons().signup?.size ?? 'md'\"\n [icon]=\"authButtons().signup?.icon ?? ''\"\n (clickedEv)=\"onSignup(); isMobileMenuOpen.set(false)\"\n >\n Sign Up\n </ZS-button>\n </div>\n }\n </div>\n </div>\n }\n</nav>\n\n<!-- ========================= Spacer for Fixed Navbar ========================= -->\n@if (fixed()) {\n <div class=\"zs:h-16\" aria-hidden=\"true\"></div>\n}\n\n<!-- ========================= Overlay for Menu Closing ========================= -->\n@if (isMobileMenuOpen()) {\n <div\n class=\"zs:fixed zs:inset-0 zs:bg-gray-700 zs:dark:bg-black {{ zIndices.navbarOverlay }}\"\n (click)=\"closeAllMenus()\"\n aria-hidden=\"true\"\n ></div>\n}\n", styles: [":host{display:block}body{font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif}a,button{transition:all .2s ease-in-out}img{object-fit:cover}.shadow-lg{box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d}@media (max-width: 768px){.rtl\\:space-x-reverse{margin-right:0;margin-left:.75rem}}\n"] }]
|
|
1643
|
+
args: [{ selector: 'ZS-navbar', imports: [RouterModule, CommonModule, NavItem, Button], template: "<!-- ========================= Fixed Navbar Container ========================= -->\n\n<nav\n class=\"zs:bg-white zs:dark:bg-[#18202F] zs:top-0 zs:left-0 zs:right-0 {{ zIndices.navbar }} zs:shadow-md zs:dark:shadow-gray-400/30\"\n [ngClass]=\"fixed() ? 'zs:fixed' : 'zs:relative'\"\n role=\"navigation\"\n aria-label=\"Main Navigation\"\n>\n <div class=\"zs:max-w-7xl zs:mx-auto zs:px-4 zs:sm:px-6 zs:lg:px-8\">\n <div class=\"zs:flex zs:justify-between zs:h-16 zs:gap-4\">\n\n <!-- ========================= Logo & Site Name ========================= -->\n <div class=\"zs:flex zs:items-center\">\n @if (logoUrl() || siteNameConfig()) {\n <a\n [routerLink]=\"[siteNameConfig()?.routerLink ?? '/']\"\n class=\"zs:shrink-0 zs:flex zs:items-center zs:gap-2 zs:focus:outline-hidden zs:focus-visible:ring-2 zs:focus-visible:ring-blue-500\"\n aria-label=\"Homepage\"\n >\n @if (logoUrl()) {\n <img\n [src]=\"logoUrl()\"\n alt=\"{{ siteNameConfig()?.siteName ?? 'Site Logo' }}\"\n class=\"zs:h-9 zs:w-auto\"\n />\n }\n @if (siteNameConfig()) {\n <span\n [class]=\"siteNameConfig()?.siteNameColorClass ?? 'zs:text-gray-800 zs:dark:text-gray-100'\"\n class=\"zs:font-bold zs:text-xl\"\n >\n {{ siteNameConfig()?.siteName }}\n </span>\n }\n </a>\n }\n </div>\n\n <!-- ========================= Desktop Navigation ========================= -->\n <div class=\"zs:hidden zs:lg:flex zs:items-center zs:gap-2\" role=\"menubar\">\n @for (item of visibleNavItems(); track $index) {\n <ZS-nav-item\n [item]=\"item\"\n [collectionName]=\"'navItems'\"\n (anyItemClickedEv)=\"itemClicked($event)\"\n role=\"menuitem\"\n />\n }\n\n @if (moreNavItems().length > 0) {\n <div class=\"zs:relative\" role=\"none\">\n <button\n (click)=\"isMoreOpen.set(!isMoreOpen())\"\n [attr.aria-expanded]=\"isMoreOpen()\"\n aria-haspopup=\"true\"\n aria-controls=\"more-menu\"\n class=\"zs:px-3 zs:py-2 zs:text-sm zs:font-bold \n zs:text-blue-600 zs:dark:text-blue-400\n zs:focus:outline-hidden zs:focus-visible:ring-2 \n zs:focus-visible:ring-blue-500 zs:group\n zs:flex zs:items-center zs:justify-center zs:gap-1.5\"\n >\n More\n <i class=\"fas fa-chevron-down zs:text-xs \n zs:text-gray-500 zs:dark:text-gray-400\n zs:group-hover:text-blue-600 zs:group-hover:scale-110\n zs:group-hover:dark:text-blue-400\n \"></i>\n </button>\n <div\n id=\"more-menu\"\n [ngClass]=\"{ 'zs:block': isMoreOpen(), 'zs:hidden': !isMoreOpen() }\"\n class=\"zs:absolute zs:bg-white zs:dark:bg-[#18202F] shadow-md-all \n shadow-md-all-night zs:rounded-md zs:mt-1 zs:p-2 zs:min-w-50 zs:z-200 \n zs:flex zs:flex-col zs:gap-1.5\"\n role=\"menu\"\n >\n @for (item of moreNavItems(); track $index) {\n <ZS-nav-item\n [item]=\"item\"\n [collectionName]=\"'navItems'\"\n (anyItemClickedEv)=\"itemClicked($event)\"\n role=\"menuitem\"\n />\n }\n </div>\n </div>\n }\n </div>\n\n <!-- ========================= Right Controls ========================= -->\n <div class=\"zs:flex zs:items-center zs:gap-3\">\n\n <!-- Search Bar (Desktop) -->\n @if (showSearchBar()) {\n <div class=\"zs:hidden zs:lg:block\" role=\"search\">\n <div class=\"zs:relative\">\n <label for=\"desktop-search\" class=\"sr-only\">Search</label>\n <input\n id=\"desktop-search\"\n type=\"text\"\n [value]=\"searchValue()\"\n (input)=\"searchValue.set($any($event.target).value)\"\n (keyup.enter)=\"onSearchSubmit()\"\n [placeholder]=\"searchPlaceholder()\"\n class=\"zs:bg-gray-100 zs:dark:bg-gray-700 zs:text-gray-800 zs:dark:text-gray-200 zs:rounded-full zs:py-2 zs:px-4 zs:w-64\n zs:transition-shadow zs:duration-200 zs:focus:outline-hidden zs:focus:ring-2 zs:focus:ring-blue-500\n zs:focus:bg-white zs:dark:focus:bg-gray-600 zs:shadow-sm zs:dark:shadow-gray-500/40\n zs:hover:shadow-md zs:dark:hover:shadow-gray-500/50\"\n />\n <button\n (click)=\"onSearchSubmit()\"\n class=\"zs:absolute zs:py-1 zs:px-2 zs:right-2 zs:top-1/2 zs:-translate-y-1/2 zs:text-gray-500 zs:dark:text-gray-400\n zs:hover:text-gray-700 zs:dark:hover:text-gray-300\"\n aria-label=\"Submit search\"\n >\n <i class=\"fas fa-search\"></i>\n </button>\n </div>\n </div>\n }\n\n <!-- User Profile Dropdown -->\n @if (isLoggedIn() && userProfile() && showUserSection()) {\n <div class=\"zs:relative\">\n <button\n (click)=\"toggleUserMenu()\"\n class=\"zs:flex zs:items-center zs:gap-2 zs:focus:outline-hidden zs:focus-visible:ring-2 zs:focus-visible:ring-blue-500\"\n aria-haspopup=\"true\"\n [attr.aria-expanded]=\"isUserMenuOpen()\"\n aria-controls=\"user-menu\"\n aria-label=\"User menu\"\n >\n @if (userProfile()?.imageUrl) {\n <img\n [src]=\"userProfile()?.imageUrl\"\n alt=\"{{ userProfile()?.name ?? 'User profile image' }}\"\n class=\"zs:size-9 zs:rounded-full zs:object-cover\"\n />\n } @else {\n <div\n class=\"zs:size-9 zs:rounded-full zs:bg-blue-500 zs:flex zs:items-center zs:justify-center zs:text-white zs:font-semibold\"\n aria-hidden=\"true\"\n >\n {{ userProfile()?.name?.charAt(0)?.toUpperCase() }}\n </div>\n }\n <i class=\"fas fa-chevron-down zs:text-xs zs:text-gray-600 zs:dark:text-gray-400\n zs:hover:text-gray-700 zs:dark:hover:text-gray-300\"></i>\n </button>\n\n @if (isUserMenuOpen() && userMenuItems().length > 0) {\n <div\n id=\"user-menu\"\n class=\"zs:absolute zs:right-0 zs:mt-2.5 zs:min-w-56 zs:bg-white zs:dark:bg-gray-800 zs:rounded-md\n shadow-md-all shadow-md-all-night zs:pt-2 zs:z-400\"\n role=\"menu\"\n >\n <!-- User Info Section -->\n <div class=\"zs:px-4 zs:py-2 zs:border-b zs:border-gray-200 zs:dark:border-gray-700\">\n @if (userProfile()?.name) {\n <div class=\"zs:font-semibold zs:text-gray-900 zs:dark:text-gray-100\">\n {{ userProfile()?.name }}\n </div>\n }\n @if (userProfile()?.username) {\n <div class=\"zs:text-sm zs:text-gray-600 zs:dark:text-gray-400\">\n @{{ userProfile()?.username }}\n </div>\n }\n @if (userProfile()?.email) {\n <div class=\"zs:text-sm zs:text-gray-500 zs:dark:text-gray-400\">\n {{ userProfile()?.email }}\n </div>\n }\n </div>\n\n <!-- Menu Items -->\n @if (userMenuItems().length > 0) {\n <div class=\"zs:py-1\">\n @for (item of getUserMenuItems(); track $index) {\n <ZS-nav-item\n [item]=\"item\"\n [collectionName]=\"'MenuItems'\"\n (anyItemClickedEv)=\"itemClicked($event)\"\n role=\"menuitem\"\n />\n }\n </div>\n }\n </div>\n }\n </div>\n }\n\n <!-- Auth Buttons -->\n @else if (authButtons().showAuthButtons && !isLoggedIn()) {\n <div class=\"zs:hidden zs:lg:flex zs:items-center zs:gap-3\" role=\"group\" aria-label=\"Authentication\">\n <ZS-button\n [btnStyle]=\"authButtons().login?.btnStyle ?? 'secondary'\"\n [variant]=\"authButtons().login?.variant ?? 'outline'\"\n [size]=\"authButtons().login?.size ?? 'md'\"\n [icon]=\"authButtons().login?.icon ?? ''\"\n (clickedEv)=\"onLogin()\"\n >\n Login\n </ZS-button>\n\n <ZS-button\n [btnStyle]=\"authButtons().signup?.btnStyle ?? 'primary'\"\n [variant]=\"authButtons().signup?.variant ?? 'solid'\"\n [size]=\"authButtons().signup?.size ?? 'md'\"\n [icon]=\"authButtons().signup?.icon ?? ''\"\n class=\"zs:truncate\"\n (clickedEv)=\"onSignup()\"\n >\n Sign Up\n </ZS-button>\n </div>\n }\n\n <!-- Mobile Menu Toggle -->\n @if(mobileNavItems().length || showSearchBar() || (authButtons().showAuthButtons && !isLoggedIn())) {\n <div class=\"zs:lg:hidden\">\n <button\n (click)=\"toggleMobileMenu()\"\n class=\"zs:p-2 zs:rounded-md zs:text-gray-600 zs:dark:text-gray-300\n zs:hover:text-gray-900 zs:dark:hover:text-gray-100\n zs:focus:outline-hidden zs:focus:ring-2 zs:focus:ring-inset\n zs:focus:ring-gray-200 zs:dark:focus:ring-gray-700\"\n aria-controls=\"mobile-menu\"\n aria-expanded=\"{{ isMobileMenuOpen() }}\"\n aria-label=\"Toggle mobile menu\"\n >\n <i class=\"fas fa-bars zs:px-1\"></i>\n </button>\n </div>\n }\n </div>\n </div>\n </div>\n\n <!-- ========================= Mobile Menu ========================= -->\n @if (isMobileMenuOpen()) {\n <div\n id=\"mobile-menu\"\n class=\"zs:lg:hidden zs:bg-white zs:dark:bg-[#18202F]\n zs:[box-shadow:0_8px_0_0_#364153] zs:dark:[box-shadow:0_8px_0_0_black]\"\n role=\"menu\"\n aria-label=\"Mobile navigation\"\n >\n <div class=\"zs:pl-3 zs:pr-2 zs:pb-3 zs:flex zs:flex-col zs:gap-1\">\n\n <!-- Navigation Items -->\n <div class=\"zs:max-h-96 zs:flex zs:flex-col zs:gap-1.5 zs:pr-1 zs:pb-2 zs:pt-2 zs:overflow-y-auto\">\n @for (item of mobileNavItems(); track $index) {\n <ZS-nav-item\n [item]=\"item\"\n [collectionName]=\"'navItems'\"\n (anyItemClickedEv)=\"itemClicked($event)\"\n role=\"menuitem\"\n />\n }\n </div>\n\n <!-- Search Bar (Mobile) -->\n @if (showSearchBar()) {\n <div class=\"zs:px-3 zs:pb-2\" role=\"search\">\n <label for=\"mobile-search\" class=\"sr-only\">Search</label>\n <div class=\"zs:relative\">\n <input\n id=\"mobile-search\"\n type=\"text\"\n [value]=\"searchValue()\"\n (input)=\"searchValue.set($any($event.target).value)\"\n (keyup.enter)=\"onSearchSubmit()\"\n [placeholder]=\"searchPlaceholder()\"\n class=\"zs:w-full zs:bg-gray-100 zs:dark:bg-gray-700 zs:text-gray-800 zs:dark:text-gray-200\n zs:rounded-full zs:py-2 zs:px-4 zs:transition-shadow zs:duration-200 zs:focus:outline-hidden\n zs:focus:ring-2 zs:focus:ring-blue-500 zs:focus:bg-white zs:dark:focus:bg-gray-600\n zs:shadow-sm zs:dark:shadow-gray-500/40 zs:hover:shadow-md zs:dark:hover:shadow-gray-500/50\"\n />\n <button\n (click)=\"onSearchSubmit()\"\n class=\"zs:absolute zs:py-1 zs:px-2 zs:right-2 zs:top-1/2 zs:-translate-y-1/2 zs:text-gray-500 zs:dark:text-gray-400\n zs:hover:text-gray-700 zs:dark:hover:text-gray-300\"\n aria-label=\"Submit search\"\n >\n <i class=\"fas fa-search\"></i>\n </button>\n </div>\n </div>\n }\n\n <!-- Auth Buttons (Mobile) -->\n @if (authButtons().showAuthButtons && !isLoggedIn()) {\n <div\n class=\"zs:pt-3 zs:pb-4 zs:border-t zs:border-gray-300 zs:dark:border-gray-500\n zs:flex zs:flex-wrap zs:justify-start zs:items-center zs:gap-2\"\n role=\"group\"\n aria-label=\"Authentication (mobile)\"\n >\n <ZS-button\n [btnStyle]=\"authButtons().login?.btnStyle ?? 'secondary'\"\n [variant]=\"authButtons().login?.variant ?? 'outline'\"\n [size]=\"authButtons().login?.size ?? 'md'\"\n [icon]=\"authButtons().login?.icon ?? ''\"\n (clickedEv)=\"onLogin(); isMobileMenuOpen.set(false)\"\n >\n Login\n </ZS-button>\n\n <ZS-button\n [btnStyle]=\"authButtons().signup?.btnStyle ?? 'primary'\"\n [variant]=\"authButtons().signup?.variant ?? 'solid'\"\n [size]=\"authButtons().signup?.size ?? 'md'\"\n [icon]=\"authButtons().signup?.icon ?? ''\"\n (clickedEv)=\"onSignup(); isMobileMenuOpen.set(false)\"\n >\n Sign Up\n </ZS-button>\n </div>\n }\n </div>\n </div>\n }\n</nav>\n\n<!-- ========================= Spacer for Fixed Navbar ========================= -->\n@if (fixed()) {\n <div class=\"zs:h-16\" aria-hidden=\"true\"></div>\n}\n\n<!-- ========================= Overlay for Menu Closing ========================= -->\n@if (isMobileMenuOpen()) {\n <div\n class=\"zs:fixed zs:inset-0 zs:bg-gray-700 zs:dark:bg-black {{ zIndices.navbarOverlay }}\"\n (click)=\"closeAllMenus()\"\n aria-hidden=\"true\"\n ></div>\n}\n", styles: [":host{display:block}body{font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif}a,button{transition:all .2s ease-in-out}img{object-fit:cover}.shadow-lg{box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d}@media (max-width: 768px){.rtl\\:space-x-reverse{margin-right:0;margin-left:.75rem}}\n"] }]
|
|
1644
1644
|
}], propDecorators: { fixed: [{ type: i0.Input, args: [{ isSignal: true, alias: "fixed", required: false }] }], logoUrl: [{ type: i0.Input, args: [{ isSignal: true, alias: "logoUrl", required: false }] }], siteNameConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "siteNameConfig", required: false }] }], authButtons: [{ type: i0.Input, args: [{ isSignal: true, alias: "authButtons", required: false }] }], showUserSection: [{ type: i0.Input, args: [{ isSignal: true, alias: "showUserSection", required: false }] }], showSearchBar: [{ type: i0.Input, args: [{ isSignal: true, alias: "showSearchBar", required: false }] }], navItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "navItems", required: false }] }], isLoggedIn: [{ type: i0.Input, args: [{ isSignal: true, alias: "isLoggedIn", required: false }] }], userProfile: [{ type: i0.Input, args: [{ isSignal: true, alias: "userProfile", required: false }] }], userMenuItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "userMenuItems", required: false }] }], searchPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchPlaceholder", required: false }] }], loginClickedEv: [{ type: i0.Output, args: ["loginClickedEv"] }], signupClickedEv: [{ type: i0.Output, args: ["signupClickedEv"] }], searchSubmittedEv: [{ type: i0.Output, args: ["searchSubmittedEv"] }], anyItemClickedEv: [{ type: i0.Output, args: ["anyItemClickedEv"] }], searchValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchValue", required: false }] }, { type: i0.Output, args: ["searchValueChange"] }], isMobileMenuOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "isMobileMenuOpen", required: false }] }, { type: i0.Output, args: ["isMobileMenuOpenChange"] }] } });
|
|
1645
1645
|
|
|
1646
1646
|
class Page404 {
|