@ziadshalaby/ngx-zs-component 3.2.21 → 3.2.22
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.
|
@@ -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-[
|
|
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-[
|
|
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']
|