@ziadshalaby/ngx-zs-component 3.2.26 → 3.2.27
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.
|
@@ -337,7 +337,7 @@ class NavItem {
|
|
|
337
337
|
onItemClick() {
|
|
338
338
|
const item = this.item();
|
|
339
339
|
item.action?.();
|
|
340
|
-
if (this.item().
|
|
340
|
+
if (this.item().closeParentMenuAfterClick) {
|
|
341
341
|
this.toggle();
|
|
342
342
|
}
|
|
343
343
|
this.anyItemClickedEv.emit(this.item());
|
|
@@ -346,7 +346,7 @@ class NavItem {
|
|
|
346
346
|
// أعد إرسال الحدث لأعلى (لو فيه levels أكثر)
|
|
347
347
|
this.anyItemClickedEv.emit(child);
|
|
348
348
|
// إن كان الطفل يريد غلق القائمة، أغلق نفسي
|
|
349
|
-
if (child.
|
|
349
|
+
if (child.closeParentMenuAfterClick) {
|
|
350
350
|
this.toggle();
|
|
351
351
|
}
|
|
352
352
|
}
|
|
@@ -371,7 +371,7 @@ class NavItem {
|
|
|
371
371
|
}
|
|
372
372
|
host = inject(ElementRef);
|
|
373
373
|
onDocumentPointerDown(event) {
|
|
374
|
-
if (!this.isOpen() || !this.item().
|
|
374
|
+
if (!this.isOpen() || !this.item().childrenConfig?.closeMenuOnPointerOutside === true)
|
|
375
375
|
return;
|
|
376
376
|
const target = event.target;
|
|
377
377
|
// لو الضغط خارج الـ ZS-nav-item كله
|
|
@@ -380,11 +380,11 @@ class NavItem {
|
|
|
380
380
|
}
|
|
381
381
|
}
|
|
382
382
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: NavItem, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
383
|
-
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" }, host: { listeners: { "document:pointerdown": "onDocumentPointerDown($event)" } }, 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 <ng-container *ngTemplateOutlet=\"item().iconTpl?.()\"></ng-container>\n <span class=\"zs:wrap-break-word\" [ngClass]=\"labelLineClass(item())\">{{ item().label }}</span>\n </div>\n @if(item().showChevronDownIcon !== false) {\n <i class=\"fas fa-chevron-down zs:ml-auto zs:p-0.5 zs:text-xs\" aria-hidden=\"true\"></i>\n }\n </button>\n\n <!-- ========================= Dropdown Menu ========================= -->\n <div\n [id]=\"'submenu-' + index()\"\n [ngClass]=\"[\n isOpen() ? 'zs:block' : 'zs:hidden',\n item().childrenOpenWindow \n ? 'zs:absolute zs:w-54 zs:mt-1 zs:p-2 zs:bg-white zs:dark:bg-gray-800 zs:rounded-md shadow-md-all shadow-md-all-night'\n : 'zs:px-4 zs:mt-1.5',\n item().childrenWindowDir === 'left' ? 'zs:right-4' : 'zs:left-4'
|
|
383
|
+
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" }, host: { listeners: { "document:pointerdown": "onDocumentPointerDown($event)" } }, 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 <ng-container *ngTemplateOutlet=\"item().iconTpl?.()\"></ng-container>\n <span class=\"zs:wrap-break-word\" [ngClass]=\"labelLineClass(item())\">{{ item().label }}</span>\n </div>\n @if(item().childrenConfig?.showChevronDownIcon !== false) {\n <i class=\"fas fa-chevron-down zs:ml-auto zs:p-0.5 zs:text-xs\" aria-hidden=\"true\"></i>\n }\n </button>\n\n <!-- ========================= Dropdown Menu ========================= -->\n <div\n [id]=\"'submenu-' + index()\"\n [ngClass]=\"[\n isOpen() ? 'zs:block' : 'zs:hidden',\n item().childrenConfig?.childrenOpenWindow \n ? 'zs:absolute zs:w-54 zs:mt-1 zs:p-2 zs:bg-white zs:dark:bg-gray-800 zs:rounded-md shadow-md-all shadow-md-all-night'\n : 'zs:px-4 zs:mt-1.5',\n item().childrenConfig?.childrenWindowDir === 'bottom-left' ? 'zs:top-full zs:right-4' : '',\n item().childrenConfig?.childrenWindowDir === 'bottom-right' ? 'zs:top-full zs:left-4' : '',\n item().childrenConfig?.childrenWindowDir === 'top-left' ? 'zs:bottom-full zs:right-4' : '',\n item().childrenConfig?.childrenWindowDir === 'top-right' ? 'zs:bottom-full zs:left-4' : '',\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 </div>\n\n } @else {\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 <span [ngClass]=\"[!rla.isActive && item().iconClasses ? item().iconClasses : '']\">\n <ng-container *ngTemplateOutlet=\"item().iconTpl?.()\"></ng-container>\n </span>\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: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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"] }] });
|
|
384
384
|
}
|
|
385
385
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: NavItem, decorators: [{
|
|
386
386
|
type: Component,
|
|
387
|
-
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 <ng-container *ngTemplateOutlet=\"item().iconTpl?.()\"></ng-container>\n <span class=\"zs:wrap-break-word\" [ngClass]=\"labelLineClass(item())\">{{ item().label }}</span>\n </div>\n @if(item().showChevronDownIcon !== false) {\n <i class=\"fas fa-chevron-down zs:ml-auto zs:p-0.5 zs:text-xs\" aria-hidden=\"true\"></i>\n }\n </button>\n\n <!-- ========================= Dropdown Menu ========================= -->\n <div\n [id]=\"'submenu-' + index()\"\n [ngClass]=\"[\n isOpen() ? 'zs:block' : 'zs:hidden',\n item().childrenOpenWindow \n ? 'zs:absolute zs:w-54 zs:mt-1 zs:p-2 zs:bg-white zs:dark:bg-gray-800 zs:rounded-md shadow-md-all shadow-md-all-night'\n : 'zs:px-4 zs:mt-1.5',\n item().childrenWindowDir === 'left' ? 'zs:right-4' : 'zs:left-4'
|
|
387
|
+
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 <ng-container *ngTemplateOutlet=\"item().iconTpl?.()\"></ng-container>\n <span class=\"zs:wrap-break-word\" [ngClass]=\"labelLineClass(item())\">{{ item().label }}</span>\n </div>\n @if(item().childrenConfig?.showChevronDownIcon !== false) {\n <i class=\"fas fa-chevron-down zs:ml-auto zs:p-0.5 zs:text-xs\" aria-hidden=\"true\"></i>\n }\n </button>\n\n <!-- ========================= Dropdown Menu ========================= -->\n <div\n [id]=\"'submenu-' + index()\"\n [ngClass]=\"[\n isOpen() ? 'zs:block' : 'zs:hidden',\n item().childrenConfig?.childrenOpenWindow \n ? 'zs:absolute zs:w-54 zs:mt-1 zs:p-2 zs:bg-white zs:dark:bg-gray-800 zs:rounded-md shadow-md-all shadow-md-all-night'\n : 'zs:px-4 zs:mt-1.5',\n item().childrenConfig?.childrenWindowDir === 'bottom-left' ? 'zs:top-full zs:right-4' : '',\n item().childrenConfig?.childrenWindowDir === 'bottom-right' ? 'zs:top-full zs:left-4' : '',\n item().childrenConfig?.childrenWindowDir === 'top-left' ? 'zs:bottom-full zs:right-4' : '',\n item().childrenConfig?.childrenWindowDir === 'top-right' ? 'zs:bottom-full zs:left-4' : '',\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 </div>\n\n } @else {\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 <span [ngClass]=\"[!rla.isActive && item().iconClasses ? item().iconClasses : '']\">\n <ng-container *ngTemplateOutlet=\"item().iconTpl?.()\"></ng-container>\n </span>\n <span class=\"zs:wrap-break-word zs:line-clamp-3\" [ngClass]=\"labelLineClass(item())\">{{ item().label }}</span>\n </a>\n }\n}" }]
|
|
388
388
|
}], 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"] }], onDocumentPointerDown: [{
|
|
389
389
|
type: HostListener,
|
|
390
390
|
args: ['document:pointerdown', ['$event']]
|
|
@@ -1641,7 +1641,9 @@ class Navbar {
|
|
|
1641
1641
|
...item,
|
|
1642
1642
|
colorClass: item.colorClass ?? generalColorClass,
|
|
1643
1643
|
routerLinkActive: item.routerLinkActive ?? generalRouterLinkActive,
|
|
1644
|
-
|
|
1644
|
+
childrenConfig: {
|
|
1645
|
+
childrenOpenWindow
|
|
1646
|
+
},
|
|
1645
1647
|
children: item.children?.map(child => this.toNavbarItem(child, childrenOpenWindow, generalRouterLinkActive, generalColorClass)) ?? []
|
|
1646
1648
|
};
|
|
1647
1649
|
}
|