@ziadshalaby/ngx-zs-component 3.2.22 → 3.2.24
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.
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { Component, signal, Injectable, inject, input, computed, effect, output, viewChild, model, untracked,
|
|
2
|
+
import { Component, signal, Injectable, inject, input, computed, effect, output, ElementRef, HostListener, viewChild, model, untracked, linkedSignal, ChangeDetectionStrategy } from '@angular/core';
|
|
3
3
|
import * as i1 from '@angular/common';
|
|
4
4
|
import { CommonModule } from '@angular/common';
|
|
5
5
|
import * as i1$1 from '@angular/router';
|
|
@@ -369,13 +369,26 @@ class NavItem {
|
|
|
369
369
|
: item.label.length > 40 ? 'zs:text-sm'
|
|
370
370
|
: '';
|
|
371
371
|
}
|
|
372
|
+
host = inject(ElementRef);
|
|
373
|
+
onDocumentPointerDown(event) {
|
|
374
|
+
if (!this.isOpen() || !this.item().closeOnPointerOutside === true)
|
|
375
|
+
return;
|
|
376
|
+
const target = event.target;
|
|
377
|
+
// لو الضغط خارج الـ ZS-nav-item كله
|
|
378
|
+
if (!this.host.nativeElement.contains(target)) {
|
|
379
|
+
this.toggle();
|
|
380
|
+
}
|
|
381
|
+
}
|
|
372
382
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: NavItem, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
373
|
-
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 <ng-container *ngTemplateOutlet=\"item().iconTpl?.()\"></ng-container>\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]=\"
|
|
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'\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"] }] });
|
|
374
384
|
}
|
|
375
385
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: NavItem, decorators: [{
|
|
376
386
|
type: Component,
|
|
377
|
-
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 <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]=\"
|
|
378
|
-
}], 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"] }]
|
|
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'\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
|
+
}], 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
|
+
type: HostListener,
|
|
390
|
+
args: ['document:pointerdown', ['$event']]
|
|
391
|
+
}] } });
|
|
379
392
|
|
|
380
393
|
// Unified palette map with all configurations
|
|
381
394
|
const unifiedPaletteMap = new Map([
|
|
@@ -1702,11 +1715,11 @@ class Page404 {
|
|
|
1702
1715
|
// ========================================================================
|
|
1703
1716
|
onAction = output();
|
|
1704
1717
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: Page404, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1705
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: Page404, isStandalone: true, selector: "ZS-page404", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: false, transformFunction: null }, iconTpl: { classPropertyName: "iconTpl", publicName: "iconTpl", isSignal: true, isRequired: false, transformFunction: null }, pageStyle: { classPropertyName: "pageStyle", publicName: "pageStyle", isSignal: true, isRequired: false, transformFunction: null }, showButton: { classPropertyName: "showButton", publicName: "showButton", isSignal: true, isRequired: false, transformFunction: null }, buttonText: { classPropertyName: "buttonText", publicName: "buttonText", isSignal: true, isRequired: false, transformFunction: null }, routerLink: { classPropertyName: "routerLink", publicName: "routerLink", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onAction: "onAction" }, ngImport: i0, template: "<!-- ========================= Page 404 Container ========================= -->\n<div class=\"zs:flex zs:flex-col zs:items-center zs:justify-center
|
|
1718
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: Page404, isStandalone: true, selector: "ZS-page404", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: false, transformFunction: null }, iconTpl: { classPropertyName: "iconTpl", publicName: "iconTpl", isSignal: true, isRequired: false, transformFunction: null }, pageStyle: { classPropertyName: "pageStyle", publicName: "pageStyle", isSignal: true, isRequired: false, transformFunction: null }, showButton: { classPropertyName: "showButton", publicName: "showButton", isSignal: true, isRequired: false, transformFunction: null }, buttonText: { classPropertyName: "buttonText", publicName: "buttonText", isSignal: true, isRequired: false, transformFunction: null }, routerLink: { classPropertyName: "routerLink", publicName: "routerLink", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onAction: "onAction" }, ngImport: i0, template: "<!-- ========================= Page 404 Container ========================= -->\n<div class=\"zs:flex zs:flex-col zs:items-center zs:justify-center h-full zs:text-center zs:animate-fadeIn\"\n [ngClass]=\"[style().iconText]\"\n >\n\n <!-- ========================= Icon ========================= --> \n <div class=\"zs:text-[136px] zs:mb-8 animate-float zs:opacity-90 zs:leading-none\">\n <ng-template #defaultIcon>\n <i class=\"fas fa-ghost\"></i>\n </ng-template>\n <ng-container *ngTemplateOutlet=\"iconTpl() ?? defaultIcon\"></ng-container>\n </div>\n\n <!-- ========================= Title ========================= -->\n <h1 class=\"zs:text-6xl zs:font-black zs:tracking-widest zs:mb-2 \n zs:text-rose-600 zs:dark:text-rose-500 zs:select-none\n zs:drop-shadow-[0_0_8px_rgba(239,68,68,0.5)]\">\n 404\n </h1>\n\n\n <!-- ========================= Message ========================= -->\n <h2 class=\"zs:text-2xl zs:text-rose-600/80 zs:dark:text-rose-800/80 zs:font-semibold zs:mb-4\">\n {{ title() }}\n </h2>\n <p class=\"zs:text-base zs:max-w-md zs:text-gray-600 zs:dark:text-gray-400 zs:mb-8\">\n {{ message() }}\n </p>\n\n <!-- ========================= Button ========================= -->\n @if (showButton()) {\n <a\n [routerLink]=\"routerLink()\"\n (click)=\"onAction.emit()\"\n class=\"zs:px-6 zs:py-2 zs:rounded-full\n zs:text-white zs:font-medium zs:shadow-md\n zs:hover:shadow-lg zs:flex zs:items-center \n zs:justify-center\n zs:gap-1.5\"\n [ngClass]=\"[style().btnBG, style().btnBGHover]\"\n >\n <i class=\"fa-solid fa-house\"></i>\n {{ buttonText() }}\n </a>\n }\n</div>\n", styles: [":host{height:100%}@keyframes float{0%{transform:translateY(0)}50%{transform:translateY(-10px)}to{transform:translateY(0)}}.animate-float{animation:float 3s ease-in-out infinite}\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: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
|
|
1706
1719
|
}
|
|
1707
1720
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: Page404, decorators: [{
|
|
1708
1721
|
type: Component,
|
|
1709
|
-
args: [{ selector: 'ZS-page404', imports: [RouterModule, CommonModule], template: "<!-- ========================= Page 404 Container ========================= -->\n<div class=\"zs:flex zs:flex-col zs:items-center zs:justify-center
|
|
1722
|
+
args: [{ selector: 'ZS-page404', imports: [RouterModule, CommonModule], template: "<!-- ========================= Page 404 Container ========================= -->\n<div class=\"zs:flex zs:flex-col zs:items-center zs:justify-center h-full zs:text-center zs:animate-fadeIn\"\n [ngClass]=\"[style().iconText]\"\n >\n\n <!-- ========================= Icon ========================= --> \n <div class=\"zs:text-[136px] zs:mb-8 animate-float zs:opacity-90 zs:leading-none\">\n <ng-template #defaultIcon>\n <i class=\"fas fa-ghost\"></i>\n </ng-template>\n <ng-container *ngTemplateOutlet=\"iconTpl() ?? defaultIcon\"></ng-container>\n </div>\n\n <!-- ========================= Title ========================= -->\n <h1 class=\"zs:text-6xl zs:font-black zs:tracking-widest zs:mb-2 \n zs:text-rose-600 zs:dark:text-rose-500 zs:select-none\n zs:drop-shadow-[0_0_8px_rgba(239,68,68,0.5)]\">\n 404\n </h1>\n\n\n <!-- ========================= Message ========================= -->\n <h2 class=\"zs:text-2xl zs:text-rose-600/80 zs:dark:text-rose-800/80 zs:font-semibold zs:mb-4\">\n {{ title() }}\n </h2>\n <p class=\"zs:text-base zs:max-w-md zs:text-gray-600 zs:dark:text-gray-400 zs:mb-8\">\n {{ message() }}\n </p>\n\n <!-- ========================= Button ========================= -->\n @if (showButton()) {\n <a\n [routerLink]=\"routerLink()\"\n (click)=\"onAction.emit()\"\n class=\"zs:px-6 zs:py-2 zs:rounded-full\n zs:text-white zs:font-medium zs:shadow-md\n zs:hover:shadow-lg zs:flex zs:items-center \n zs:justify-center\n zs:gap-1.5\"\n [ngClass]=\"[style().btnBG, style().btnBGHover]\"\n >\n <i class=\"fa-solid fa-house\"></i>\n {{ buttonText() }}\n </a>\n }\n</div>\n", styles: [":host{height:100%}@keyframes float{0%{transform:translateY(0)}50%{transform:translateY(-10px)}to{transform:translateY(0)}}.animate-float{animation:float 3s ease-in-out infinite}\n"] }]
|
|
1710
1723
|
}], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], message: [{ type: i0.Input, args: [{ isSignal: true, alias: "message", required: false }] }], iconTpl: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconTpl", required: false }] }], pageStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageStyle", required: false }] }], showButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showButton", required: false }] }], buttonText: [{ type: i0.Input, args: [{ isSignal: true, alias: "buttonText", required: false }] }], routerLink: [{ type: i0.Input, args: [{ isSignal: true, alias: "routerLink", required: false }] }], onAction: [{ type: i0.Output, args: ["onAction"] }] } });
|
|
1711
1724
|
|
|
1712
1725
|
// ========================================================================
|
|
@@ -3322,11 +3335,11 @@ class Sidebar {
|
|
|
3322
3335
|
}
|
|
3323
3336
|
}
|
|
3324
3337
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: Sidebar, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3325
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: Sidebar, isStandalone: true, selector: "ZS-sidebar", inputs: { header: { classPropertyName: "header", publicName: "header", isSignal: true, isRequired: false, transformFunction: null }, openSide: { classPropertyName: "openSide", publicName: "openSide", isSignal: true, isRequired: false, transformFunction: null }, preventClose: { classPropertyName: "preventClose", publicName: "preventClose", isSignal: true, isRequired: false, transformFunction: null }, floating: { classPropertyName: "floating", publicName: "floating", isSignal: true, isRequired: false, transformFunction: null }, closeOnOverlay: { classPropertyName: "closeOnOverlay", publicName: "closeOnOverlay", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { openSide: "openSideChange" }, host: { listeners: { "document:keydown.escape": "onEsc()" } }, ngImport: i0, template: "<!-- Element For Width -->\n@if(!floating()) {\n <div\n class=\"zs:bg-transparent zs:h-full zs:relative {{ zIndices.sideBarOverlay }}\n zs:w-[80vw] zs:sm:w-[65vw] zs:md:w-[40vw] \n zs:lg:w-[28vw] zs:xl:w-[22vw] zs:2xl:w-[18vw]\n zs:transition-[max-width]\n zs:duration-500\n zs:ease-in-out\n \"\n [ngClass]=\"[\n openSide() ? 'zs:max-w-[75vw]' : 'zs:max-w-0'\n ]\"\n ></div>\n}\n\n<!-- Overlay -->\n@if(floating()) {\n <div\n class=\"zs:h-full zs:w-screen zs:absolute {{ zIndices.sideBarOverlay }}\n zs:bg-black/50 zs:dark:bg-black/70\n zs:duration-500\n zs:ease-in-out\n \"\n [ngClass]=\"[\n openSide() \n ? 'zs:max-w-screen zs:opacity-100 zs:transition-opacity' \n : 'zs:max-w-0 zs:opacity-0 zs:transition-[max-width,opacity] \n zs:duration-[0ms,500ms] zs:delay-[500ms,0ms]'\n ]\"\n\n (click)=\"onOverlayClick($event)\"\n ></div>\n}\n\n<!-- Sidebar -->\n<div\n id=\"sidebar\"\n role=\"complementary\"\n aria-labelledby=\"sidebar-header\"\n class=\"\n zs:absolute zs:top-0 {{ zIndices.sideBar }}\n zs:bg-white zs:dark:bg-slate-800 zs:backdrop-blur-md \n zs:w-[80vw] zs:sm:w-[65vw] zs:md:w-[40vw] \n zs:lg:w-[28vw] zs:xl:w-[22vw] zs:2xl:w-[18vw]\n zs:transition-transform\n zs:duration-600\n zs:ease-in-out\n motion-reduce:zs:transition-none zs:h-full\n
|
|
3338
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: Sidebar, isStandalone: true, selector: "ZS-sidebar", inputs: { header: { classPropertyName: "header", publicName: "header", isSignal: true, isRequired: false, transformFunction: null }, openSide: { classPropertyName: "openSide", publicName: "openSide", isSignal: true, isRequired: false, transformFunction: null }, preventClose: { classPropertyName: "preventClose", publicName: "preventClose", isSignal: true, isRequired: false, transformFunction: null }, floating: { classPropertyName: "floating", publicName: "floating", isSignal: true, isRequired: false, transformFunction: null }, closeOnOverlay: { classPropertyName: "closeOnOverlay", publicName: "closeOnOverlay", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { openSide: "openSideChange" }, host: { listeners: { "document:keydown.escape": "onEsc()" } }, ngImport: i0, template: "<!-- Element For Width -->\n@if(!floating()) {\n <div\n class=\"zs:bg-transparent zs:h-full zs:relative {{ zIndices.sideBarOverlay }}\n zs:w-[80vw] zs:sm:w-[65vw] zs:md:w-[40vw] \n zs:lg:w-[28vw] zs:xl:w-[22vw] zs:2xl:w-[18vw]\n zs:transition-[max-width]\n zs:duration-500\n zs:ease-in-out\n \"\n [ngClass]=\"[\n openSide() ? 'zs:max-w-[75vw]' : 'zs:max-w-0'\n ]\"\n ></div>\n}\n\n<!-- Overlay -->\n@if(floating()) {\n <div\n class=\"zs:h-full zs:w-screen zs:absolute {{ zIndices.sideBarOverlay }}\n zs:bg-black/50 zs:dark:bg-black/70\n zs:duration-500\n zs:ease-in-out\n \"\n [ngClass]=\"[\n openSide() \n ? 'zs:max-w-screen zs:opacity-100 zs:transition-opacity' \n : 'zs:max-w-0 zs:opacity-0 zs:transition-[max-width,opacity] \n zs:duration-[0ms,500ms] zs:delay-[500ms,0ms]'\n ]\"\n\n (click)=\"onOverlayClick($event)\"\n ></div>\n}\n\n<!-- Sidebar -->\n<div\n id=\"sidebar\"\n role=\"complementary\"\n aria-labelledby=\"sidebar-header\"\n class=\"\n zs:absolute zs:top-0 {{ zIndices.sideBar }}\n zs:bg-white zs:dark:bg-slate-800 zs:backdrop-blur-md \n zs:w-[80vw] zs:sm:w-[65vw] zs:md:w-[40vw] \n zs:lg:w-[28vw] zs:xl:w-[22vw] zs:2xl:w-[18vw]\n zs:transition-transform\n zs:duration-600\n zs:ease-in-out\n motion-reduce:zs:transition-none zs:h-full\n sidebar-shadow-right \n \"\n [attr.aria-hidden]=\"!openSide()\"\n [attr.inert]=\"!openSide() ? '' : null\"\n\n [ngClass]=\"[\n openSide() ? 'zs:translate-x-0' : 'zs:-translate-x-full'\n ]\"\n>\n <!-- Close Sidebar Button -->\n <button\n class=\"\n zs:absolute zs:rounded-lg zs:p-1 zs:cursor-pointer\n zs:top-3 zs:right-2\n zs:bg-gray-200 zs:dark:bg-gray-700\n zs:transition-opacity zs:duration-300 zs:ease-in-out\n \"\n aria-label=\"Close sidebar\"\n aria-controls=\"sidebar\"\n [attr.aria-expanded]=\"openSide()\"\n [ngClass]=\"[\n openSide() ? 'zs:opacity-100' : 'zs:opacity-0',\n preventClose() ? '' : 'zs:hover:bg-gray-300 zs:dark:hover:bg-gray-600'\n ]\"\n (click)=\"toggleSide()\"\n >\n <svg\n [attr.aria-hidden]=\"!openSide()\"\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n >\n <path\n d=\"M4 4m0 2a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2z\"\n />\n <path d=\"M9 4l0 16\" />\n </svg>\n </button>\n\n <h2\n id=\"sidebar-header\"\n class=\"zs:font-semibold zs:text-xl\n zs:text-slate-900 zs:dark:text-slate-100 zs:p-2 zs:pt-4\"\n >\n {{ header() }}\n </h2>\n\n <hr class=\"zs:w-full\" />\n\n <div class=\"zs:h-[calc(100%-52px)]\">\n <ng-content select=\"[main]\"></ng-content>\n </div>\n</div>\n\n<!-- Open Sidebar Button -->\n<button\n class=\"\n zs:absolute {{ zIndices.sideBar }} \n zs:rounded-lg zs:p-1 zs:cursor-pointer \n zs:top-3 zs:left-2\n zs:bg-gray-200 zs:dark:bg-gray-700\n zs:hover:opacity-90\n zs:transition-opacity\n zs:duration-300 \n zs:ease-in-out\n \"\n aria-label=\"Open sidebar\"\n aria-controls=\"sidebar\"\n [attr.aria-expanded]=\"openSide()\"\n [ngClass]=\"openSide() \n ? 'zs:opacity-0 zs:pointer-events-none' \n : 'zs:opacity-60 zs:pointer-events-auto'\"\n\n (click)=\"toggleSide()\"\n>\n <svg\n [attr.aria-hidden]=\"openSide()\"\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n >\n <path\n d=\"M4 4m0 2a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2z\"\n />\n <path d=\"M9 4l0 16\" />\n </svg>\n</button>", styles: [":host{display:block;position:relative;width:fit-content}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
|
|
3326
3339
|
}
|
|
3327
3340
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: Sidebar, decorators: [{
|
|
3328
3341
|
type: Component,
|
|
3329
|
-
args: [{ selector: 'ZS-sidebar', standalone: true, imports: [CommonModule], template: "<!-- Element For Width -->\n@if(!floating()) {\n <div\n class=\"zs:bg-transparent zs:h-full zs:relative {{ zIndices.sideBarOverlay }}\n zs:w-[80vw] zs:sm:w-[65vw] zs:md:w-[40vw] \n zs:lg:w-[28vw] zs:xl:w-[22vw] zs:2xl:w-[18vw]\n zs:transition-[max-width]\n zs:duration-500\n zs:ease-in-out\n \"\n [ngClass]=\"[\n openSide() ? 'zs:max-w-[75vw]' : 'zs:max-w-0'\n ]\"\n ></div>\n}\n\n<!-- Overlay -->\n@if(floating()) {\n <div\n class=\"zs:h-full zs:w-screen zs:absolute {{ zIndices.sideBarOverlay }}\n zs:bg-black/50 zs:dark:bg-black/70\n zs:duration-500\n zs:ease-in-out\n \"\n [ngClass]=\"[\n openSide() \n ? 'zs:max-w-screen zs:opacity-100 zs:transition-opacity' \n : 'zs:max-w-0 zs:opacity-0 zs:transition-[max-width,opacity] \n zs:duration-[0ms,500ms] zs:delay-[500ms,0ms]'\n ]\"\n\n (click)=\"onOverlayClick($event)\"\n ></div>\n}\n\n<!-- Sidebar -->\n<div\n id=\"sidebar\"\n role=\"complementary\"\n aria-labelledby=\"sidebar-header\"\n class=\"\n zs:absolute zs:top-0 {{ zIndices.sideBar }}\n zs:bg-white zs:dark:bg-slate-800 zs:backdrop-blur-md \n zs:w-[80vw] zs:sm:w-[65vw] zs:md:w-[40vw] \n zs:lg:w-[28vw] zs:xl:w-[22vw] zs:2xl:w-[18vw]\n zs:transition-transform\n zs:duration-600\n zs:ease-in-out\n motion-reduce:zs:transition-none zs:h-full\n
|
|
3342
|
+
args: [{ selector: 'ZS-sidebar', standalone: true, imports: [CommonModule], template: "<!-- Element For Width -->\n@if(!floating()) {\n <div\n class=\"zs:bg-transparent zs:h-full zs:relative {{ zIndices.sideBarOverlay }}\n zs:w-[80vw] zs:sm:w-[65vw] zs:md:w-[40vw] \n zs:lg:w-[28vw] zs:xl:w-[22vw] zs:2xl:w-[18vw]\n zs:transition-[max-width]\n zs:duration-500\n zs:ease-in-out\n \"\n [ngClass]=\"[\n openSide() ? 'zs:max-w-[75vw]' : 'zs:max-w-0'\n ]\"\n ></div>\n}\n\n<!-- Overlay -->\n@if(floating()) {\n <div\n class=\"zs:h-full zs:w-screen zs:absolute {{ zIndices.sideBarOverlay }}\n zs:bg-black/50 zs:dark:bg-black/70\n zs:duration-500\n zs:ease-in-out\n \"\n [ngClass]=\"[\n openSide() \n ? 'zs:max-w-screen zs:opacity-100 zs:transition-opacity' \n : 'zs:max-w-0 zs:opacity-0 zs:transition-[max-width,opacity] \n zs:duration-[0ms,500ms] zs:delay-[500ms,0ms]'\n ]\"\n\n (click)=\"onOverlayClick($event)\"\n ></div>\n}\n\n<!-- Sidebar -->\n<div\n id=\"sidebar\"\n role=\"complementary\"\n aria-labelledby=\"sidebar-header\"\n class=\"\n zs:absolute zs:top-0 {{ zIndices.sideBar }}\n zs:bg-white zs:dark:bg-slate-800 zs:backdrop-blur-md \n zs:w-[80vw] zs:sm:w-[65vw] zs:md:w-[40vw] \n zs:lg:w-[28vw] zs:xl:w-[22vw] zs:2xl:w-[18vw]\n zs:transition-transform\n zs:duration-600\n zs:ease-in-out\n motion-reduce:zs:transition-none zs:h-full\n sidebar-shadow-right \n \"\n [attr.aria-hidden]=\"!openSide()\"\n [attr.inert]=\"!openSide() ? '' : null\"\n\n [ngClass]=\"[\n openSide() ? 'zs:translate-x-0' : 'zs:-translate-x-full'\n ]\"\n>\n <!-- Close Sidebar Button -->\n <button\n class=\"\n zs:absolute zs:rounded-lg zs:p-1 zs:cursor-pointer\n zs:top-3 zs:right-2\n zs:bg-gray-200 zs:dark:bg-gray-700\n zs:transition-opacity zs:duration-300 zs:ease-in-out\n \"\n aria-label=\"Close sidebar\"\n aria-controls=\"sidebar\"\n [attr.aria-expanded]=\"openSide()\"\n [ngClass]=\"[\n openSide() ? 'zs:opacity-100' : 'zs:opacity-0',\n preventClose() ? '' : 'zs:hover:bg-gray-300 zs:dark:hover:bg-gray-600'\n ]\"\n (click)=\"toggleSide()\"\n >\n <svg\n [attr.aria-hidden]=\"!openSide()\"\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n >\n <path\n d=\"M4 4m0 2a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2z\"\n />\n <path d=\"M9 4l0 16\" />\n </svg>\n </button>\n\n <h2\n id=\"sidebar-header\"\n class=\"zs:font-semibold zs:text-xl\n zs:text-slate-900 zs:dark:text-slate-100 zs:p-2 zs:pt-4\"\n >\n {{ header() }}\n </h2>\n\n <hr class=\"zs:w-full\" />\n\n <div class=\"zs:h-[calc(100%-52px)]\">\n <ng-content select=\"[main]\"></ng-content>\n </div>\n</div>\n\n<!-- Open Sidebar Button -->\n<button\n class=\"\n zs:absolute {{ zIndices.sideBar }} \n zs:rounded-lg zs:p-1 zs:cursor-pointer \n zs:top-3 zs:left-2\n zs:bg-gray-200 zs:dark:bg-gray-700\n zs:hover:opacity-90\n zs:transition-opacity\n zs:duration-300 \n zs:ease-in-out\n \"\n aria-label=\"Open sidebar\"\n aria-controls=\"sidebar\"\n [attr.aria-expanded]=\"openSide()\"\n [ngClass]=\"openSide() \n ? 'zs:opacity-0 zs:pointer-events-none' \n : 'zs:opacity-60 zs:pointer-events-auto'\"\n\n (click)=\"toggleSide()\"\n>\n <svg\n [attr.aria-hidden]=\"openSide()\"\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n >\n <path\n d=\"M4 4m0 2a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2z\"\n />\n <path d=\"M9 4l0 16\" />\n </svg>\n</button>", styles: [":host{display:block;position:relative;width:fit-content}\n"] }]
|
|
3330
3343
|
}], propDecorators: { header: [{ type: i0.Input, args: [{ isSignal: true, alias: "header", required: false }] }], openSide: [{ type: i0.Input, args: [{ isSignal: true, alias: "openSide", required: false }] }, { type: i0.Output, args: ["openSideChange"] }], preventClose: [{ type: i0.Input, args: [{ isSignal: true, alias: "preventClose", required: false }] }], floating: [{ type: i0.Input, args: [{ isSignal: true, alias: "floating", required: false }] }], closeOnOverlay: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnOverlay", required: false }] }], onEsc: [{
|
|
3331
3344
|
type: HostListener,
|
|
3332
3345
|
args: ['document:keydown.escape']
|