@ziadshalaby/ngx-zs-component 3.0.5 → 3.0.6
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.
|
@@ -107,12 +107,6 @@ const ALERT_CONFIG = {
|
|
|
107
107
|
borderColor: 'zs:border-blue-500 zs:dark:border-blue-300'
|
|
108
108
|
}
|
|
109
109
|
};
|
|
110
|
-
const PositionClasses = {
|
|
111
|
-
'top-left': 'zs:top-4 zs:left-4',
|
|
112
|
-
'top-right': 'zs:top-4 zs:right-4',
|
|
113
|
-
'bottom-left': 'zs:bottom-4 zs:left-4',
|
|
114
|
-
'bottom-right': 'zs:bottom-4 zs:right-4',
|
|
115
|
-
};
|
|
116
110
|
// ==============================================
|
|
117
111
|
// Component Decorator
|
|
118
112
|
// ==============================================
|
|
@@ -125,7 +119,9 @@ class Alert {
|
|
|
125
119
|
// ==============================================
|
|
126
120
|
// Inputs
|
|
127
121
|
// ==============================================
|
|
128
|
-
positionClass = input('top-right', ...(ngDevMode ? [{ debugName: "positionClass" }] : []));
|
|
122
|
+
positionClass = input('zs:top-4 zs:right-4', ...(ngDevMode ? [{ debugName: "positionClass" }] : []));
|
|
123
|
+
direction = input('top', ...(ngDevMode ? [{ debugName: "direction" }] : []));
|
|
124
|
+
maxh = input('zs:max-h-[calc(100vh-1.2rem)]', ...(ngDevMode ? [{ debugName: "maxh" }] : []));
|
|
129
125
|
defaultShowCloseButton = input(true, ...(ngDevMode ? [{ debugName: "defaultShowCloseButton" }] : []));
|
|
130
126
|
defaultAutoClose = input(true, ...(ngDevMode ? [{ debugName: "defaultAutoClose" }] : []));
|
|
131
127
|
defaultDuration = input(5000, ...(ngDevMode ? [{ debugName: "defaultDuration" }] : []));
|
|
@@ -133,8 +129,6 @@ class Alert {
|
|
|
133
129
|
// Signals & Computed Properties
|
|
134
130
|
// ==============================================
|
|
135
131
|
oldAlerts = signal(new Set(), ...(ngDevMode ? [{ debugName: "oldAlerts" }] : []));
|
|
136
|
-
direction = computed(() => this.positionClass().startsWith('top') ? 'top' : 'bottom', ...(ngDevMode ? [{ debugName: "direction" }] : []));
|
|
137
|
-
positionClasses = computed(() => PositionClasses[this.positionClass()], ...(ngDevMode ? [{ debugName: "positionClasses" }] : []));
|
|
138
132
|
alerts = computed(() => {
|
|
139
133
|
const list = this.alertService.alerts();
|
|
140
134
|
return this.direction() === 'bottom' ? [...list].reverse() : list;
|
|
@@ -209,12 +203,12 @@ class Alert {
|
|
|
209
203
|
this.alertService.onAlertClosed(id);
|
|
210
204
|
}
|
|
211
205
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: Alert, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
212
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: Alert, isStandalone: true, selector: "ZS-alert", inputs: { positionClass: { classPropertyName: "positionClass", publicName: "positionClass", isSignal: true, isRequired: false, transformFunction: null }, defaultShowCloseButton: { classPropertyName: "defaultShowCloseButton", publicName: "defaultShowCloseButton", isSignal: true, isRequired: false, transformFunction: null }, defaultAutoClose: { classPropertyName: "defaultAutoClose", publicName: "defaultAutoClose", isSignal: true, isRequired: false, transformFunction: null }, defaultDuration: { classPropertyName: "defaultDuration", publicName: "defaultDuration", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<!-- ========================= Alert Container ========================= -->\n<div\n class=\"zs:fixed zs:ml-4 zs:break-all {{ zIndices.alert }} zs:flex zs:flex-col \n zs:overflow-y-auto
|
|
206
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: Alert, isStandalone: true, selector: "ZS-alert", inputs: { positionClass: { classPropertyName: "positionClass", publicName: "positionClass", isSignal: true, isRequired: false, transformFunction: null }, direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null }, maxh: { classPropertyName: "maxh", publicName: "maxh", isSignal: true, isRequired: false, transformFunction: null }, defaultShowCloseButton: { classPropertyName: "defaultShowCloseButton", publicName: "defaultShowCloseButton", isSignal: true, isRequired: false, transformFunction: null }, defaultAutoClose: { classPropertyName: "defaultAutoClose", publicName: "defaultAutoClose", isSignal: true, isRequired: false, transformFunction: null }, defaultDuration: { classPropertyName: "defaultDuration", publicName: "defaultDuration", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<!-- ========================= Alert Container ========================= -->\n<div\n class=\"zs:fixed zs:ml-4 zs:break-all {{ zIndices.alert }} zs:flex zs:flex-col \n zs:overflow-y-auto scroll scroll-secondary zs:p-2 zs:gap-3 zs:max-h-[80vh]\"\n [ngClass]=\"[positionClass(), maxh()]\"\n role=\"region\"\n aria-label=\"Notification area\"\n aria-live=\"polite\"\n>\n\n @for (alert of alertConfig(); track alert.id) {\n\n <!-- ========================= Alert Card ========================= -->\n <div\n class=\"zs:pointer-events-auto zs:max-w-sm zs:min-h-14 zs:rounded-lg zs:border zs:p-4 zs:shadow-md zs:dark:shadow-gray-400/30\n zs:transition-all zs:duration-300 zs:ease-in-out animate-fade-in zs:relative zs:overflow-hidden\"\n [class]=\"alert.bgColor + ' ' + alert.textColor + ' ' + alert.borderColor\"\n role=\"alert\"\n >\n\n <!-- ========================= Alert Content ========================= -->\n <div class=\"zs:flex zs:items-center\">\n\n <!-- Icon -->\n <i\n [class]=\"alert.icon + ' zs:mt-0.5 zs:me-3'\"\n aria-hidden=\"true\"\n ></i>\n\n <!-- Message -->\n <div class=\"zs:flex-1 zs:text-sm zs:font-medium\">\n {{ alert.message }}\n </div>\n\n <!-- Close Button -->\n @if (alert.showCloseButton ?? defaultShowCloseButton()) {\n <button\n type=\"button\"\n class=\"zs:ms-2 zs:inline-flex zs:h-6 zs:w-6 zs:items-center zs:justify-center zs:rounded-full\n zs:text-gray-500 zs:dark:text-gray-300\n zs:hover:bg-gray-200 zs:dark:hover:bg-gray-700\n zs:hover:text-gray-700 zs:dark:hover:text-gray-100\n zs:focus:outline-hidden zs:focus-visible:ring-2 zs:focus-within:ring-indigo-500\"\n (click)=\"closeAlert(alert.id!)\"\n aria-label=\"Close alert\"\n >\n <i class=\"fas fa-times zs:text-xs\" aria-hidden=\"true\"></i>\n </button>\n }\n\n </div>\n\n <!-- ========================= Auto-Close Progress Bar ========================= -->\n @if (alert.autoClose ?? defaultAutoClose()) {\n <div\n class=\"zs:absolute zs:bottom-0 zs:left-0 zs:h-1 zs:bg-gray-300 zs:dark:bg-gray-700 zs:w-full\"\n role=\"progressbar\"\n [attr.aria-valuenow]=\"alert.progress ?? 100\"\n aria-valuemin=\"0\"\n aria-valuemax=\"100\"\n >\n <div\n class=\"zs:h-1 zs:bg-current zs:transition-[width] zs:duration-100\"\n [style.width.%]=\"alert.progress ?? 100\"\n ></div>\n </div>\n }\n\n </div>\n\n }\n\n</div>", styles: ["@keyframes fade-in{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.animate-fade-in{animation:fade-in .3s ease-out forwards}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
|
|
213
207
|
}
|
|
214
208
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: Alert, decorators: [{
|
|
215
209
|
type: Component,
|
|
216
|
-
args: [{ selector: 'ZS-alert', imports: [CommonModule], template: "<!-- ========================= Alert Container ========================= -->\n<div\n class=\"zs:fixed zs:ml-4 zs:break-all {{ zIndices.alert }} zs:flex zs:flex-col \n zs:overflow-y-auto
|
|
217
|
-
}], ctorParameters: () => [], propDecorators: { positionClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "positionClass", required: false }] }], defaultShowCloseButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultShowCloseButton", required: false }] }], defaultAutoClose: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultAutoClose", required: false }] }], defaultDuration: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultDuration", required: false }] }] } });
|
|
210
|
+
args: [{ selector: 'ZS-alert', imports: [CommonModule], template: "<!-- ========================= Alert Container ========================= -->\n<div\n class=\"zs:fixed zs:ml-4 zs:break-all {{ zIndices.alert }} zs:flex zs:flex-col \n zs:overflow-y-auto scroll scroll-secondary zs:p-2 zs:gap-3 zs:max-h-[80vh]\"\n [ngClass]=\"[positionClass(), maxh()]\"\n role=\"region\"\n aria-label=\"Notification area\"\n aria-live=\"polite\"\n>\n\n @for (alert of alertConfig(); track alert.id) {\n\n <!-- ========================= Alert Card ========================= -->\n <div\n class=\"zs:pointer-events-auto zs:max-w-sm zs:min-h-14 zs:rounded-lg zs:border zs:p-4 zs:shadow-md zs:dark:shadow-gray-400/30\n zs:transition-all zs:duration-300 zs:ease-in-out animate-fade-in zs:relative zs:overflow-hidden\"\n [class]=\"alert.bgColor + ' ' + alert.textColor + ' ' + alert.borderColor\"\n role=\"alert\"\n >\n\n <!-- ========================= Alert Content ========================= -->\n <div class=\"zs:flex zs:items-center\">\n\n <!-- Icon -->\n <i\n [class]=\"alert.icon + ' zs:mt-0.5 zs:me-3'\"\n aria-hidden=\"true\"\n ></i>\n\n <!-- Message -->\n <div class=\"zs:flex-1 zs:text-sm zs:font-medium\">\n {{ alert.message }}\n </div>\n\n <!-- Close Button -->\n @if (alert.showCloseButton ?? defaultShowCloseButton()) {\n <button\n type=\"button\"\n class=\"zs:ms-2 zs:inline-flex zs:h-6 zs:w-6 zs:items-center zs:justify-center zs:rounded-full\n zs:text-gray-500 zs:dark:text-gray-300\n zs:hover:bg-gray-200 zs:dark:hover:bg-gray-700\n zs:hover:text-gray-700 zs:dark:hover:text-gray-100\n zs:focus:outline-hidden zs:focus-visible:ring-2 zs:focus-within:ring-indigo-500\"\n (click)=\"closeAlert(alert.id!)\"\n aria-label=\"Close alert\"\n >\n <i class=\"fas fa-times zs:text-xs\" aria-hidden=\"true\"></i>\n </button>\n }\n\n </div>\n\n <!-- ========================= Auto-Close Progress Bar ========================= -->\n @if (alert.autoClose ?? defaultAutoClose()) {\n <div\n class=\"zs:absolute zs:bottom-0 zs:left-0 zs:h-1 zs:bg-gray-300 zs:dark:bg-gray-700 zs:w-full\"\n role=\"progressbar\"\n [attr.aria-valuenow]=\"alert.progress ?? 100\"\n aria-valuemin=\"0\"\n aria-valuemax=\"100\"\n >\n <div\n class=\"zs:h-1 zs:bg-current zs:transition-[width] zs:duration-100\"\n [style.width.%]=\"alert.progress ?? 100\"\n ></div>\n </div>\n }\n\n </div>\n\n }\n\n</div>", styles: ["@keyframes fade-in{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.animate-fade-in{animation:fade-in .3s ease-out forwards}\n"] }]
|
|
211
|
+
}], ctorParameters: () => [], propDecorators: { positionClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "positionClass", required: false }] }], direction: [{ type: i0.Input, args: [{ isSignal: true, alias: "direction", required: false }] }], maxh: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxh", required: false }] }], defaultShowCloseButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultShowCloseButton", required: false }] }], defaultAutoClose: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultAutoClose", required: false }] }], defaultDuration: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultDuration", required: false }] }] } });
|
|
218
212
|
|
|
219
213
|
// ==============================================
|
|
220
214
|
// Imports
|
|
@@ -1610,11 +1604,11 @@ class Navbar {
|
|
|
1610
1604
|
this.resizeObserver.disconnect();
|
|
1611
1605
|
}
|
|
1612
1606
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: Navbar, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1613
|
-
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-4\" 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 zs:hover:text-blue-700 zs:dark:hover:text-blue-300 zs:focus:outline-hidden 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 shadow-md-all-night zs:rounded-md zs:mt-1 zs:py-1 zs:min-w-48 zs:z-200\"\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-all 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 zs:transition-colors zs:duration-200\"\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) || 'U' }}\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 <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 </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: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:py-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-all 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 zs:transition-colors zs:duration-200\"\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 zs:z-700\"\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"] }] });
|
|
1607
|
+
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-4\" 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 zs:hover:text-blue-700 zs:dark:hover:text-blue-300 zs:focus:outline-hidden 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 shadow-md-all-night zs:rounded-md zs:mt-1 zs:py-1 zs:min-w-48 zs:z-200\"\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-all 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 zs:transition-colors zs:duration-200\"\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) || 'U' }}\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: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:py-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-all 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 zs:transition-colors zs:duration-200\"\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 zs:z-700\"\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"] }] });
|
|
1614
1608
|
}
|
|
1615
1609
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: Navbar, decorators: [{
|
|
1616
1610
|
type: Component,
|
|
1617
|
-
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-4\" 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 zs:hover:text-blue-700 zs:dark:hover:text-blue-300 zs:focus:outline-hidden 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 shadow-md-all-night zs:rounded-md zs:mt-1 zs:py-1 zs:min-w-48 zs:z-200\"\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-all 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 zs:transition-colors zs:duration-200\"\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) || 'U' }}\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 <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 </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: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:py-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-all 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 zs:transition-colors zs:duration-200\"\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 zs:z-700\"\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"] }]
|
|
1611
|
+
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-4\" 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 zs:hover:text-blue-700 zs:dark:hover:text-blue-300 zs:focus:outline-hidden 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 shadow-md-all-night zs:rounded-md zs:mt-1 zs:py-1 zs:min-w-48 zs:z-200\"\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-all 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 zs:transition-colors zs:duration-200\"\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) || 'U' }}\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: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:py-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-all 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 zs:transition-colors zs:duration-200\"\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 zs:z-700\"\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"] }]
|
|
1618
1612
|
}], 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"] }] } });
|
|
1619
1613
|
|
|
1620
1614
|
class Page404 {
|