@ziadshalaby/ngx-zs-component 3.1.8 → 3.2.0
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.
|
@@ -352,8 +352,9 @@ class NavItem {
|
|
|
352
352
|
// Helper Methods
|
|
353
353
|
// ==============================================
|
|
354
354
|
getItemClasses = (item) => {
|
|
355
|
-
const
|
|
356
|
-
const
|
|
355
|
+
const base = 'zs:text-gray-600 zs:dark:text-gray-300';
|
|
356
|
+
const defaultTextClass = base + ' zs:hover:text-gray-900 zs:dark:hover:text-gray-100';
|
|
357
|
+
const defaultBgClass = base + ' zs:hover:bg-gray-100 zs:dark:hover:bg-gray-700';
|
|
357
358
|
if (item.colorClass) {
|
|
358
359
|
return item.colorClass;
|
|
359
360
|
}
|
|
@@ -3266,11 +3267,11 @@ class Sidebar {
|
|
|
3266
3267
|
this.openSide.update((v) => !v);
|
|
3267
3268
|
}
|
|
3268
3269
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: Sidebar, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3269
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.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 } }, outputs: { openSide: "openSideChange" }, ngImport: i0, template: "<div class=\"zs:relative zs:h-full zs:w-fit {{ zIndices.sideBar }}\">\n <!-- Sidebar -->\n <div\n id=\"sidebar\"\n role=\"complementary\"\n aria-labelledby=\"sidebar-header\"\n class=\"\n zs:h-full \n zs:w-[75vw] zs:sm:w-[55vw] zs:md:w-[40vw] zs:lg:w-[25vw] zs:xl:w-[15vw]\n zs:relative\n zs:bg-white/90 zs:dark:bg-slate-800/90 zs:backdrop-blur-md \n zs:transition-all zs:duration-500 sidebar-shadow-right \n motion-reduce:zs:transition-none\n \"\n [attr.aria-hidden]=\"!openSide()\"\n [ngClass]=\"\n openSide()\n ? 'zs:translate-x-0 zs:opacity-100'\n : 'zs:-translate-x-full zs:opacity-0'\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 zs:hover:bg-gray-300\n zs:dark:hover:bg-gray-600\n zs:transition-all zs:duration-300 zs:ease-in-out\n \"\n aria-label=\"Close sidebar\"\n aria-controls=\"sidebar\"\n [attr.aria-expanded]=\"openSide()\"\n [ngClass]=\"openSide() ? 'zs:opacity-100' : 'zs:opacity-0'\"\n (click)=\"toggleSide()\"\n >\n <svg\n aria-hidden=\"true\"\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 zs:transition-colors zs:duration-300 \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:
|
|
3270
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.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 } }, outputs: { openSide: "openSideChange" }, ngImport: i0, template: "<div class=\"zs:relative zs:h-full zs:w-fit {{ zIndices.sideBar }}\">\n <!-- Sidebar -->\n <div\n id=\"sidebar\"\n role=\"complementary\"\n aria-labelledby=\"sidebar-header\"\n class=\"\n zs:h-full \n zs:w-[75vw] zs:sm:w-[55vw] zs:md:w-[40vw] zs:lg:w-[25vw] zs:xl:w-[15vw]\n zs:relative\n zs:bg-white/90 zs:dark:bg-slate-800/90 zs:backdrop-blur-md \n zs:transition-all zs:duration-500 sidebar-shadow-right \n motion-reduce:zs:transition-none\n \"\n [attr.aria-hidden]=\"!openSide()\"\n [ngClass]=\"\n openSide()\n ? 'zs:translate-x-0 zs:opacity-100'\n : 'zs:-translate-x-full zs:opacity-0'\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 zs:hover:bg-gray-300\n zs:dark:hover:bg-gray-600\n zs:transition-all zs:duration-300 zs:ease-in-out\n \"\n aria-label=\"Close sidebar\"\n aria-controls=\"sidebar\"\n [attr.aria-expanded]=\"openSide()\"\n [ngClass]=\"openSide() ? 'zs:opacity-100' : 'zs:opacity-0'\"\n (click)=\"toggleSide()\"\n >\n <svg\n aria-hidden=\"true\"\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 zs:transition-colors zs:duration-300 \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 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 zs:hover:bg-gray-300\n zs:dark:hover:bg-gray-600\n zs:transition-all zs:duration-300 zs:ease-in-out\n \"\n aria-label=\"Open sidebar\"\n aria-controls=\"sidebar\"\n [attr.aria-expanded]=\"openSide()\"\n [ngClass]=\"openSide() ? 'zs:opacity-0 zs:pointer-events-none' : 'zs:opacity-100 zs:pointer-events-auto'\"\n (click)=\"toggleSide()\"\n >\n <svg\n aria-hidden=\"true\"\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</div>\n", styles: [":host{display:block;width:fit-content}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
|
|
3270
3271
|
}
|
|
3271
3272
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: Sidebar, decorators: [{
|
|
3272
3273
|
type: Component,
|
|
3273
|
-
args: [{ selector: 'ZS-sidebar', standalone: true, imports: [CommonModule], template: "<div class=\"zs:relative zs:h-full zs:w-fit {{ zIndices.sideBar }}\">\n <!-- Sidebar -->\n <div\n id=\"sidebar\"\n role=\"complementary\"\n aria-labelledby=\"sidebar-header\"\n class=\"\n zs:h-full \n zs:w-[75vw] zs:sm:w-[55vw] zs:md:w-[40vw] zs:lg:w-[25vw] zs:xl:w-[15vw]\n zs:relative\n zs:bg-white/90 zs:dark:bg-slate-800/90 zs:backdrop-blur-md \n zs:transition-all zs:duration-500 sidebar-shadow-right \n motion-reduce:zs:transition-none\n \"\n [attr.aria-hidden]=\"!openSide()\"\n [ngClass]=\"\n openSide()\n ? 'zs:translate-x-0 zs:opacity-100'\n : 'zs:-translate-x-full zs:opacity-0'\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 zs:hover:bg-gray-300\n zs:dark:hover:bg-gray-600\n zs:transition-all zs:duration-300 zs:ease-in-out\n \"\n aria-label=\"Close sidebar\"\n aria-controls=\"sidebar\"\n [attr.aria-expanded]=\"openSide()\"\n [ngClass]=\"openSide() ? 'zs:opacity-100' : 'zs:opacity-0'\"\n (click)=\"toggleSide()\"\n >\n <svg\n aria-hidden=\"true\"\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 zs:transition-colors zs:duration-300 \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:
|
|
3274
|
+
args: [{ selector: 'ZS-sidebar', standalone: true, imports: [CommonModule], template: "<div class=\"zs:relative zs:h-full zs:w-fit {{ zIndices.sideBar }}\">\n <!-- Sidebar -->\n <div\n id=\"sidebar\"\n role=\"complementary\"\n aria-labelledby=\"sidebar-header\"\n class=\"\n zs:h-full \n zs:w-[75vw] zs:sm:w-[55vw] zs:md:w-[40vw] zs:lg:w-[25vw] zs:xl:w-[15vw]\n zs:relative\n zs:bg-white/90 zs:dark:bg-slate-800/90 zs:backdrop-blur-md \n zs:transition-all zs:duration-500 sidebar-shadow-right \n motion-reduce:zs:transition-none\n \"\n [attr.aria-hidden]=\"!openSide()\"\n [ngClass]=\"\n openSide()\n ? 'zs:translate-x-0 zs:opacity-100'\n : 'zs:-translate-x-full zs:opacity-0'\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 zs:hover:bg-gray-300\n zs:dark:hover:bg-gray-600\n zs:transition-all zs:duration-300 zs:ease-in-out\n \"\n aria-label=\"Close sidebar\"\n aria-controls=\"sidebar\"\n [attr.aria-expanded]=\"openSide()\"\n [ngClass]=\"openSide() ? 'zs:opacity-100' : 'zs:opacity-0'\"\n (click)=\"toggleSide()\"\n >\n <svg\n aria-hidden=\"true\"\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 zs:transition-colors zs:duration-300 \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 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 zs:hover:bg-gray-300\n zs:dark:hover:bg-gray-600\n zs:transition-all zs:duration-300 zs:ease-in-out\n \"\n aria-label=\"Open sidebar\"\n aria-controls=\"sidebar\"\n [attr.aria-expanded]=\"openSide()\"\n [ngClass]=\"openSide() ? 'zs:opacity-0 zs:pointer-events-none' : 'zs:opacity-100 zs:pointer-events-auto'\"\n (click)=\"toggleSide()\"\n >\n <svg\n aria-hidden=\"true\"\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</div>\n", styles: [":host{display:block;width:fit-content}\n"] }]
|
|
3274
3275
|
}], 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"] }] } });
|
|
3275
3276
|
|
|
3276
3277
|
/*
|