@ziadshalaby/ngx-zs-component 3.2.25 → 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']]
|
|
@@ -1328,8 +1328,7 @@ class Form {
|
|
|
1328
1328
|
}
|
|
1329
1329
|
return result;
|
|
1330
1330
|
}
|
|
1331
|
-
|
|
1332
|
-
this.markAllTouched();
|
|
1331
|
+
canSubmit(allowEmptyFields = [], allowInvalidFields = []) {
|
|
1333
1332
|
const filled = this.allFilled();
|
|
1334
1333
|
const validations = this.getValidations();
|
|
1335
1334
|
const allFilled = Object.keys(filled).every((key) => {
|
|
@@ -1342,7 +1341,11 @@ class Form {
|
|
|
1342
1341
|
return true;
|
|
1343
1342
|
return validations[key];
|
|
1344
1343
|
});
|
|
1345
|
-
|
|
1344
|
+
return allFilled && allValid;
|
|
1345
|
+
}
|
|
1346
|
+
submit(callback, allowEmptyFields = [], allowInvalidFields = []) {
|
|
1347
|
+
this.markAllTouched();
|
|
1348
|
+
if (!this.canSubmit(allowEmptyFields, allowInvalidFields))
|
|
1346
1349
|
return;
|
|
1347
1350
|
callback(this.getValues());
|
|
1348
1351
|
}
|
|
@@ -1638,7 +1641,9 @@ class Navbar {
|
|
|
1638
1641
|
...item,
|
|
1639
1642
|
colorClass: item.colorClass ?? generalColorClass,
|
|
1640
1643
|
routerLinkActive: item.routerLinkActive ?? generalRouterLinkActive,
|
|
1641
|
-
|
|
1644
|
+
childrenConfig: {
|
|
1645
|
+
childrenOpenWindow
|
|
1646
|
+
},
|
|
1642
1647
|
children: item.children?.map(child => this.toNavbarItem(child, childrenOpenWindow, generalRouterLinkActive, generalColorClass)) ?? []
|
|
1643
1648
|
};
|
|
1644
1649
|
}
|