@ziadshalaby/ngx-zs-component 3.0.7 → 3.0.8

package/fesm2022/ziadshalaby-ngx-zs-component.mjs

@@ -367,11 +367,11 @@ class NavItem {
                 : '';
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: NavItem, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    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-6 zs:w-50 zs:mt-1 zs:py-1 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 }}\"\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 ? '' : 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().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"] }] });
+    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-6 zs:w-50 zs:mt-1 zs:py-1 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 }}\"\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"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: NavItem, decorators: [{
             type: Component,
-            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-6 zs:w-50 zs:mt-1 zs:py-1 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 }}\"\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 ? '' : 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().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}" }]
+            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-6 zs:w-50 zs:mt-1 zs:py-1 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 }}\"\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}" }]
         }], 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"] }] } });
 
 // Unified palette map with all configurations
@@ -1539,35 +1539,23 @@ class Navbar {
     visibleNavItems = computed(() => {
         const items = this.navItems()?.navItems ?? [];
         const limit = this.showSearchBar() ? 2 : 5;
-        return items.slice(0, limit).map(item => this.toNavbarItem(item, true));
+        return items.slice(0, limit).map(item => this.toNavbarItem(item, true, this.navItems()?.routerLinkActive, this.navItems()?.colorClass));
     }, ...(ngDevMode ? [{ debugName: "visibleNavItems" }] : []));
     moreNavItems = computed(() => {
         const items = this.navItems()?.navItems ?? [];
         const start = this.showSearchBar() ? 2 : 5;
-        return items.slice(start).map(item => this.toNavbarItem(item, true));
+        return items.slice(start).map(item => this.toNavbarItem(item, true, this.navItems()?.routerLinkActive, this.navItems()?.colorClass));
     }, ...(ngDevMode ? [{ debugName: "moreNavItems" }] : []));
-    mobileNavItems = computed(() => {
-        const items = this.navItems()?.navItems ?? [];
-        // عدل البيانات الأصلية بأمان
-        items.forEach(item => {
-            if (!item.routerLinkActive) {
-                item.routerLinkActive = item.colorClass;
-            }
-        });
-        // رجّع الشكل النهائي
-        return items.map(item => this.toNavbarItem(item, false));
-    }, ...(ngDevMode ? [{ debugName: "mobileNavItems" }] : []));
+    mobileNavItems = computed(() => (this.navItems()?.navItems ?? []).map(item => this.toNavbarItem(item, false, this.navItems()?.routerLinkActive, this.navItems()?.colorClass)), ...(ngDevMode ? [{ debugName: "mobileNavItems" }] : []));
     getUserMenuItems = computed(() => this.userMenuItems().map(item => this.toNavbarItem(item, false)), ...(ngDevMode ? [{ debugName: "getUserMenuItems" }] : []));
     // ==============================================
     // Private Helper Methods
     // ==============================================
-    toNavbarItem(item, childrenOpenWindow = false) {
-        const routerLinkActive = this.navItems()?.routerLinkActive;
-        const colorClass = this.navItems()?.colorClass;
+    toNavbarItem(item, childrenOpenWindow = false, generalRouterLinkActive, generalColorClass) {
         return {
             ...item,
-            colorClass: item.colorClass ?? colorClass,
-            routerLinkActive: item.routerLinkActive ?? routerLinkActive,
+            colorClass: item.colorClass ?? generalColorClass,
+            routerLinkActive: item.routerLinkActive ?? generalRouterLinkActive,
             childrenOpenWindow,
             children: item.children?.map(child => this.toNavbarItem(child, childrenOpenWindow)) ?? []
         };