@ziadshalaby/ngx-zs-component 3.2.21 → 3.2.23

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.
@@ -1702,11 +1702,11 @@ class Page404 {
1702
1702
  // ========================================================================
1703
1703
  onAction = output();
1704
1704
  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 zs:min-h-[90vh]\n 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: ["@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"] }] });
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 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
1706
  }
1707
1707
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: Page404, decorators: [{
1708
1708
  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 zs:min-h-[90vh]\n 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: ["@keyframes float{0%{transform:translateY(0)}50%{transform:translateY(-10px)}to{transform:translateY(0)}}.animate-float{animation:float 3s ease-in-out infinite}\n"] }]
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 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
1710
  }], 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
1711
 
1712
1712
  // ========================================================================
@@ -3322,11 +3322,11 @@ class Sidebar {
3322
3322
  }
3323
3323
  }
3324
3324
  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-[75vw] zs:sm:w-[55vw] zs:md:w-[40vw] zs:lg:w-[25vw] zs:xl:w-[15vw]\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-[75vw] zs:sm:w-[55vw] zs:md:w-[40vw] zs:lg:w-[25vw] zs:xl:w-[15vw]\n zs:transition-transform\n zs:duration-600 \n zs:ease-in-out\n motion-reduce:zs:transition-none zs:h-full\n zs:overflow-hidden 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"] }] });
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 zs:overflow-hidden 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
3326
  }
3327
3327
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: Sidebar, decorators: [{
3328
3328
  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-[75vw] zs:sm:w-[55vw] zs:md:w-[40vw] zs:lg:w-[25vw] zs:xl:w-[15vw]\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-[75vw] zs:sm:w-[55vw] zs:md:w-[40vw] zs:lg:w-[25vw] zs:xl:w-[15vw]\n zs:transition-transform\n zs:duration-600 \n zs:ease-in-out\n motion-reduce:zs:transition-none zs:h-full\n zs:overflow-hidden 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"] }]
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 zs:overflow-hidden 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
3330
  }], 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
3331
  type: HostListener,
3332
3332
  args: ['document:keydown.escape']