@ziadshalaby/ngx-zs-component 3.2.0 → 3.2.2
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.
|
@@ -68,11 +68,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImpor
|
|
|
68
68
|
}] });
|
|
69
69
|
|
|
70
70
|
const zIndices = {
|
|
71
|
-
alert: 'zs:z-
|
|
72
|
-
spinner: 'zs:z-
|
|
73
|
-
modal: 'zs:z-
|
|
74
|
-
themeToggle: 'zs:z-
|
|
75
|
-
navbar: 'zs:z-
|
|
71
|
+
alert: 'zs:z-2000',
|
|
72
|
+
spinner: 'zs:z-1800',
|
|
73
|
+
modal: 'zs:z-1600',
|
|
74
|
+
themeToggle: 'zs:z-1400',
|
|
75
|
+
navbar: 'zs:z-1200',
|
|
76
|
+
navbarOverlay: 'zs:z-1100',
|
|
76
77
|
sideBar: 'zs:z-800',
|
|
77
78
|
scrollToTop: 'zs:z-600',
|
|
78
79
|
navItemDropdown: 'zs:z-200',
|
|
@@ -204,11 +205,11 @@ class Alert {
|
|
|
204
205
|
this.alertService.onAlertClosed(id);
|
|
205
206
|
}
|
|
206
207
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: Alert, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
207
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: Alert, isStandalone: true, selector: "ZS-alert", inputs: { positionClass: { classPropertyName: "positionClass", publicName: "positionClass", isSignal: true, isRequired: false, transformFunction: null }, direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null }, maxh: { classPropertyName: "maxh", publicName: "maxh", isSignal: true, isRequired: false, transformFunction: null }, defaultShowCloseButton: { classPropertyName: "defaultShowCloseButton", publicName: "defaultShowCloseButton", isSignal: true, isRequired: false, transformFunction: null }, defaultAutoClose: { classPropertyName: "defaultAutoClose", publicName: "defaultAutoClose", isSignal: true, isRequired: false, transformFunction: null }, defaultDuration: { classPropertyName: "defaultDuration", publicName: "defaultDuration", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<!-- ========================= Alert Container ========================= -->\n<div\n class=\"zs:fixed zs:ml-4 zs:break-all {{ zIndices.alert }} zs:flex zs:flex-col \n zs:overflow-y-auto scroll scroll-secondary zs:p-2 zs:gap-3\"\n [ngClass]=\"[positionClass(), maxh()]\"\n role=\"region\"\n aria-label=\"Notification area\"\n aria-live=\"polite\"\n>\n\n @for (alert of alertConfig(); track alert.id) {\n\n <!-- ========================= Alert Card ========================= -->\n <div\n class=\"zs:pointer-events-auto zs:max-w-sm zs:min-h-14 zs:rounded-lg zs:border zs:p-4 zs:shadow-md zs:dark:shadow-gray-400/30\n zs:transition-all zs:duration-300 zs:ease-in-out animate-fade-in zs:relative zs:overflow-hidden\"\n [class]=\"alert.bgColor + ' ' + alert.textColor + ' ' + alert.borderColor\"\n role=\"alert\"\n >\n\n <!-- ========================= Alert Content ========================= -->\n <div class=\"zs:flex zs:items-center\">\n\n <!-- Icon -->\n <i\n [class]=\"alert.icon + ' zs:mt-0.5 zs:me-3'\"\n aria-hidden=\"true\"\n ></i>\n\n <!-- Message -->\n <div class=\"zs:flex-1 zs:text-sm zs:font-medium\">\n {{ alert.message }}\n </div>\n\n <!-- Close Button -->\n @if (alert.showCloseButton ?? defaultShowCloseButton()) {\n <button\n type=\"button\"\n class=\"zs:ms-2 zs:inline-flex zs:h-6 zs:w-6 zs:items-center zs:justify-center zs:rounded-full\n zs:text-gray-500 zs:dark:text-gray-300\n zs:hover:bg-gray-200 zs:dark:hover:bg-gray-700\n zs:hover:text-gray-700 zs:dark:hover:text-gray-100\n zs:focus:outline-hidden zs:focus-visible:ring-2 zs:focus-within:ring-indigo-500\"\n (click)=\"closeAlert(alert.id!)\"\n aria-label=\"Close alert\"\n >\n <i class=\"fas fa-times zs:text-xs\" aria-hidden=\"true\"></i>\n </button>\n }\n\n </div>\n\n <!-- ========================= Auto-Close Progress Bar ========================= -->\n @if (alert.autoClose ?? defaultAutoClose()) {\n <div\n class=\"zs:absolute zs:bottom-0 zs:left-0 zs:h-1 zs:bg-gray-300 zs:dark:bg-gray-700 zs:w-full\"\n role=\"progressbar\"\n [attr.aria-valuenow]=\"alert.progress ?? 100\"\n aria-valuemin=\"0\"\n aria-valuemax=\"100\"\n >\n <div\n class=\"zs:h-1 zs:bg-current zs:transition-[width] zs:duration-100\"\n [style.width.%]=\"alert.progress ?? 100\"\n ></div>\n </div>\n }\n </div>\n }\n</div>", styles: ["@keyframes fade-in{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.animate-fade-in{animation:fade-in .3s ease-out forwards}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
|
|
208
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: Alert, isStandalone: true, selector: "ZS-alert", inputs: { positionClass: { classPropertyName: "positionClass", publicName: "positionClass", isSignal: true, isRequired: false, transformFunction: null }, direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null }, maxh: { classPropertyName: "maxh", publicName: "maxh", isSignal: true, isRequired: false, transformFunction: null }, defaultShowCloseButton: { classPropertyName: "defaultShowCloseButton", publicName: "defaultShowCloseButton", isSignal: true, isRequired: false, transformFunction: null }, defaultAutoClose: { classPropertyName: "defaultAutoClose", publicName: "defaultAutoClose", isSignal: true, isRequired: false, transformFunction: null }, defaultDuration: { classPropertyName: "defaultDuration", publicName: "defaultDuration", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<!-- ========================= Alert Container ========================= -->\n<div\n class=\"zs:fixed zs:ml-4 zs:break-all {{ zIndices.alert }} zs:flex zs:flex-col \n zs:overflow-y-auto scroll scroll-secondary zs:p-2 zs:gap-3\"\n [ngClass]=\"[positionClass(), maxh()]\"\n role=\"region\"\n aria-label=\"Notification area\"\n aria-live=\"polite\"\n>\n\n @for (alert of alertConfig(); track alert.id) {\n\n <!-- ========================= Alert Card ========================= -->\n <div\n class=\"zs:pointer-events-auto zs:max-w-sm zs:min-h-14 zs:rounded-lg zs:border zs:p-4 zs:shadow-md zs:dark:shadow-gray-400/30\n zs:transition-all zs:duration-300 zs:ease-in-out animate-fade-in zs:relative zs:overflow-hidden\"\n [class]=\"alert.bgColor + ' ' + alert.textColor + ' ' + alert.borderColor\"\n role=\"alert\"\n >\n\n <!-- ========================= Alert Content ========================= -->\n <div class=\"zs:flex zs:items-center\">\n\n <!-- Icon -->\n <i\n [class]=\"alert.icon + ' zs:mt-0.5 zs:me-3'\"\n aria-hidden=\"true\"\n ></i>\n\n <!-- Message -->\n <div class=\"zs:flex-1 zs:text-sm zs:font-medium\">\n {{ alert.message }}\n </div>\n\n <!-- Close Button -->\n @if (alert.showCloseButton ?? defaultShowCloseButton()) {\n <button\n type=\"button\"\n class=\"zs:ms-2 zs:inline-flex zs:h-6 zs:w-6 zs:items-center zs:justify-center zs:rounded-full\n zs:text-gray-500 zs:dark:text-gray-300 zs:transition-colors\n zs:hover:bg-gray-200 zs:dark:hover:bg-gray-700\n zs:hover:text-gray-700 zs:dark:hover:text-gray-100\n zs:focus:outline-hidden zs:focus-visible:ring-2 zs:focus-within:ring-indigo-500\"\n (click)=\"closeAlert(alert.id!)\"\n aria-label=\"Close alert\"\n >\n <i class=\"fas fa-times zs:text-xs\" aria-hidden=\"true\"></i>\n </button>\n }\n\n </div>\n\n <!-- ========================= Auto-Close Progress Bar ========================= -->\n @if (alert.autoClose ?? defaultAutoClose()) {\n <div\n class=\"zs:absolute zs:bottom-0 zs:left-0 zs:h-1 zs:bg-gray-300 zs:dark:bg-gray-700 zs:w-full zs:transition-colors\"\n role=\"progressbar\"\n [attr.aria-valuenow]=\"alert.progress ?? 100\"\n aria-valuemin=\"0\"\n aria-valuemax=\"100\"\n >\n <div\n class=\"zs:h-1 zs:bg-current zs:transition-[width] zs:duration-100\"\n [style.width.%]=\"alert.progress ?? 100\"\n ></div>\n </div>\n }\n </div>\n }\n</div>", styles: ["@keyframes fade-in{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.animate-fade-in{animation:fade-in .3s ease-out forwards}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
|
|
208
209
|
}
|
|
209
210
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: Alert, decorators: [{
|
|
210
211
|
type: Component,
|
|
211
|
-
args: [{ selector: 'ZS-alert', imports: [CommonModule], template: "<!-- ========================= Alert Container ========================= -->\n<div\n class=\"zs:fixed zs:ml-4 zs:break-all {{ zIndices.alert }} zs:flex zs:flex-col \n zs:overflow-y-auto scroll scroll-secondary zs:p-2 zs:gap-3\"\n [ngClass]=\"[positionClass(), maxh()]\"\n role=\"region\"\n aria-label=\"Notification area\"\n aria-live=\"polite\"\n>\n\n @for (alert of alertConfig(); track alert.id) {\n\n <!-- ========================= Alert Card ========================= -->\n <div\n class=\"zs:pointer-events-auto zs:max-w-sm zs:min-h-14 zs:rounded-lg zs:border zs:p-4 zs:shadow-md zs:dark:shadow-gray-400/30\n zs:transition-all zs:duration-300 zs:ease-in-out animate-fade-in zs:relative zs:overflow-hidden\"\n [class]=\"alert.bgColor + ' ' + alert.textColor + ' ' + alert.borderColor\"\n role=\"alert\"\n >\n\n <!-- ========================= Alert Content ========================= -->\n <div class=\"zs:flex zs:items-center\">\n\n <!-- Icon -->\n <i\n [class]=\"alert.icon + ' zs:mt-0.5 zs:me-3'\"\n aria-hidden=\"true\"\n ></i>\n\n <!-- Message -->\n <div class=\"zs:flex-1 zs:text-sm zs:font-medium\">\n {{ alert.message }}\n </div>\n\n <!-- Close Button -->\n @if (alert.showCloseButton ?? defaultShowCloseButton()) {\n <button\n type=\"button\"\n class=\"zs:ms-2 zs:inline-flex zs:h-6 zs:w-6 zs:items-center zs:justify-center zs:rounded-full\n zs:text-gray-500 zs:dark:text-gray-300\n zs:hover:bg-gray-200 zs:dark:hover:bg-gray-700\n zs:hover:text-gray-700 zs:dark:hover:text-gray-100\n zs:focus:outline-hidden zs:focus-visible:ring-2 zs:focus-within:ring-indigo-500\"\n (click)=\"closeAlert(alert.id!)\"\n aria-label=\"Close alert\"\n >\n <i class=\"fas fa-times zs:text-xs\" aria-hidden=\"true\"></i>\n </button>\n }\n\n </div>\n\n <!-- ========================= Auto-Close Progress Bar ========================= -->\n @if (alert.autoClose ?? defaultAutoClose()) {\n <div\n class=\"zs:absolute zs:bottom-0 zs:left-0 zs:h-1 zs:bg-gray-300 zs:dark:bg-gray-700 zs:w-full\"\n role=\"progressbar\"\n [attr.aria-valuenow]=\"alert.progress ?? 100\"\n aria-valuemin=\"0\"\n aria-valuemax=\"100\"\n >\n <div\n class=\"zs:h-1 zs:bg-current zs:transition-[width] zs:duration-100\"\n [style.width.%]=\"alert.progress ?? 100\"\n ></div>\n </div>\n }\n </div>\n }\n</div>", styles: ["@keyframes fade-in{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.animate-fade-in{animation:fade-in .3s ease-out forwards}\n"] }]
|
|
212
|
+
args: [{ selector: 'ZS-alert', imports: [CommonModule], template: "<!-- ========================= Alert Container ========================= -->\n<div\n class=\"zs:fixed zs:ml-4 zs:break-all {{ zIndices.alert }} zs:flex zs:flex-col \n zs:overflow-y-auto scroll scroll-secondary zs:p-2 zs:gap-3\"\n [ngClass]=\"[positionClass(), maxh()]\"\n role=\"region\"\n aria-label=\"Notification area\"\n aria-live=\"polite\"\n>\n\n @for (alert of alertConfig(); track alert.id) {\n\n <!-- ========================= Alert Card ========================= -->\n <div\n class=\"zs:pointer-events-auto zs:max-w-sm zs:min-h-14 zs:rounded-lg zs:border zs:p-4 zs:shadow-md zs:dark:shadow-gray-400/30\n zs:transition-all zs:duration-300 zs:ease-in-out animate-fade-in zs:relative zs:overflow-hidden\"\n [class]=\"alert.bgColor + ' ' + alert.textColor + ' ' + alert.borderColor\"\n role=\"alert\"\n >\n\n <!-- ========================= Alert Content ========================= -->\n <div class=\"zs:flex zs:items-center\">\n\n <!-- Icon -->\n <i\n [class]=\"alert.icon + ' zs:mt-0.5 zs:me-3'\"\n aria-hidden=\"true\"\n ></i>\n\n <!-- Message -->\n <div class=\"zs:flex-1 zs:text-sm zs:font-medium\">\n {{ alert.message }}\n </div>\n\n <!-- Close Button -->\n @if (alert.showCloseButton ?? defaultShowCloseButton()) {\n <button\n type=\"button\"\n class=\"zs:ms-2 zs:inline-flex zs:h-6 zs:w-6 zs:items-center zs:justify-center zs:rounded-full\n zs:text-gray-500 zs:dark:text-gray-300 zs:transition-colors\n zs:hover:bg-gray-200 zs:dark:hover:bg-gray-700\n zs:hover:text-gray-700 zs:dark:hover:text-gray-100\n zs:focus:outline-hidden zs:focus-visible:ring-2 zs:focus-within:ring-indigo-500\"\n (click)=\"closeAlert(alert.id!)\"\n aria-label=\"Close alert\"\n >\n <i class=\"fas fa-times zs:text-xs\" aria-hidden=\"true\"></i>\n </button>\n }\n\n </div>\n\n <!-- ========================= Auto-Close Progress Bar ========================= -->\n @if (alert.autoClose ?? defaultAutoClose()) {\n <div\n class=\"zs:absolute zs:bottom-0 zs:left-0 zs:h-1 zs:bg-gray-300 zs:dark:bg-gray-700 zs:w-full zs:transition-colors\"\n role=\"progressbar\"\n [attr.aria-valuenow]=\"alert.progress ?? 100\"\n aria-valuemin=\"0\"\n aria-valuemax=\"100\"\n >\n <div\n class=\"zs:h-1 zs:bg-current zs:transition-[width] zs:duration-100\"\n [style.width.%]=\"alert.progress ?? 100\"\n ></div>\n </div>\n }\n </div>\n }\n</div>", styles: ["@keyframes fade-in{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.animate-fade-in{animation:fade-in .3s ease-out forwards}\n"] }]
|
|
212
213
|
}], ctorParameters: () => [], propDecorators: { positionClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "positionClass", required: false }] }], direction: [{ type: i0.Input, args: [{ isSignal: true, alias: "direction", required: false }] }], maxh: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxh", required: false }] }], defaultShowCloseButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultShowCloseButton", required: false }] }], defaultAutoClose: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultAutoClose", required: false }] }], defaultDuration: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultDuration", required: false }] }] } });
|
|
213
214
|
|
|
214
215
|
// ==============================================
|
|
@@ -352,7 +353,7 @@ class NavItem {
|
|
|
352
353
|
// Helper Methods
|
|
353
354
|
// ==============================================
|
|
354
355
|
getItemClasses = (item) => {
|
|
355
|
-
const base = 'zs:text-gray-600 zs:dark:text-gray-300';
|
|
356
|
+
const base = 'zs:text-gray-600 zs:dark:text-gray-300 zs:transition-colors';
|
|
356
357
|
const defaultTextClass = base + ' zs:hover:text-gray-900 zs:dark:hover:text-gray-100';
|
|
357
358
|
const defaultBgClass = base + ' zs:hover:bg-gray-100 zs:dark:hover:bg-gray-700';
|
|
358
359
|
if (item.colorClass) {
|
|
@@ -368,11 +369,11 @@ class NavItem {
|
|
|
368
369
|
: '';
|
|
369
370
|
}
|
|
370
371
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: NavItem, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
371
|
-
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 @if (item().icon) {\n <i [ngClass]=\"[\n item().icon, \n item().iconClass ?? '',\n (item().icon && item().label) ? 'zs:mr-2' : ''\n ]\" aria-hidden=\"true\"></i>\n }\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]=\"{\n 'zs:block': isOpen(),\n 'zs:hidden': !isOpen(),\n 'zs:absolute zs:left-6 zs:w-50 zs:mt-1 zs:py-1 zs:bg-white zs:dark:bg-gray-800 \n zs:rounded-md shadow-md-all shadow-md-all-night': item().childrenOpenWindow,\n 'zs:px-4 zs:mt-1': !item().childrenOpenWindow\n }\"\n class=\"{{ zIndices.navItemDropdown }}\"\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\n </div>\n\n } @else {\n\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 @if (item().icon) {\n <i [ngClass]=\"[\n item().icon,\n rla.isActive && item().routerLinkActive ? '' : (item().iconClass ?? ''),\n (item().icon && item().label) ? 'zs:mr-2' : ''\n ]\"\n aria-hidden=\"true\"></i>\n }\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: "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"] }] });
|
|
372
|
+
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 @if (item().icon) {\n <i [ngClass]=\"[\n item().icon, \n item().iconClass ?? '',\n (item().icon && item().label) ? 'zs:mr-2' : ''\n ]\" aria-hidden=\"true\"></i>\n }\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]=\"{\n 'zs:block': isOpen(),\n 'zs:hidden': !isOpen(),\n 'zs:absolute zs:left-6 zs:w-50 zs:mt-1 zs:py-1 zs:bg-white zs:dark:bg-gray-800 \n zs:rounded-md shadow-md-all shadow-md-all-night zs:transition-colors': item().childrenOpenWindow,\n 'zs:px-4 zs:mt-1': !item().childrenOpenWindow\n }\"\n class=\"{{ zIndices.navItemDropdown }}\"\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\n </div>\n\n } @else {\n\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 @if (item().icon) {\n <i [ngClass]=\"[\n item().icon,\n rla.isActive && item().routerLinkActive ? '' : (item().iconClass ?? ''),\n (item().icon && item().label) ? 'zs:mr-2' : ''\n ]\"\n aria-hidden=\"true\"></i>\n }\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: "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"] }] });
|
|
372
373
|
}
|
|
373
374
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: NavItem, decorators: [{
|
|
374
375
|
type: Component,
|
|
375
|
-
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 @if (item().icon) {\n <i [ngClass]=\"[\n item().icon, \n item().iconClass ?? '',\n (item().icon && item().label) ? 'zs:mr-2' : ''\n ]\" aria-hidden=\"true\"></i>\n }\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]=\"{\n 'zs:block': isOpen(),\n 'zs:hidden': !isOpen(),\n 'zs:absolute zs:left-6 zs:w-50 zs:mt-1 zs:py-1 zs:bg-white zs:dark:bg-gray-800 \n zs:rounded-md shadow-md-all shadow-md-all-night': item().childrenOpenWindow,\n 'zs:px-4 zs:mt-1': !item().childrenOpenWindow\n }\"\n class=\"{{ zIndices.navItemDropdown }}\"\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\n </div>\n\n } @else {\n\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 @if (item().icon) {\n <i [ngClass]=\"[\n item().icon,\n rla.isActive && item().routerLinkActive ? '' : (item().iconClass ?? ''),\n (item().icon && item().label) ? 'zs:mr-2' : ''\n ]\"\n aria-hidden=\"true\"></i>\n }\n <span class=\"zs:wrap-break-word zs:line-clamp-3\" [ngClass]=\"labelLineClass(item())\">{{ item().label }}</span>\n </a>\n }\n}" }]
|
|
376
|
+
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 @if (item().icon) {\n <i [ngClass]=\"[\n item().icon, \n item().iconClass ?? '',\n (item().icon && item().label) ? 'zs:mr-2' : ''\n ]\" aria-hidden=\"true\"></i>\n }\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]=\"{\n 'zs:block': isOpen(),\n 'zs:hidden': !isOpen(),\n 'zs:absolute zs:left-6 zs:w-50 zs:mt-1 zs:py-1 zs:bg-white zs:dark:bg-gray-800 \n zs:rounded-md shadow-md-all shadow-md-all-night zs:transition-colors': item().childrenOpenWindow,\n 'zs:px-4 zs:mt-1': !item().childrenOpenWindow\n }\"\n class=\"{{ zIndices.navItemDropdown }}\"\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\n </div>\n\n } @else {\n\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 @if (item().icon) {\n <i [ngClass]=\"[\n item().icon,\n rla.isActive && item().routerLinkActive ? '' : (item().iconClass ?? ''),\n (item().icon && item().label) ? 'zs:mr-2' : ''\n ]\"\n aria-hidden=\"true\"></i>\n }\n <span class=\"zs:wrap-break-word zs:line-clamp-3\" [ngClass]=\"labelLineClass(item())\">{{ item().label }}</span>\n </a>\n }\n}" }]
|
|
376
377
|
}], 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"] }] } });
|
|
377
378
|
|
|
378
379
|
// Unified palette map with all configurations
|
|
@@ -1180,11 +1181,11 @@ class Connection {
|
|
|
1180
1181
|
this.offlineListener();
|
|
1181
1182
|
}
|
|
1182
1183
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: Connection, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1183
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: Connection, isStandalone: true, selector: "ZS-connection", outputs: { isOnlineEv: "isOnlineEv" }, ngImport: i0, template: "<div tabindex=\"0\" \n class=\"zs:inline-flex zs:items-center zs:justify-center zs:gap-2 zs:rounded-full \n zs:text-sm zs:font-medium zs:px-3 zs:h-8 zs:w-fit zs:cursor-pointer\"\n [ngClass]=\"[\n isOnline() \n ? 'zs:bg-green-100 zs:text-green-800 zs:dark:bg-green-700 zs:dark:text-green-100'\n : 'zs:bg-red-100 zs:text-red-800 zs:dark:bg-red-700 zs:dark:text-red-100'\n ]\"\n>\n <i\n class=\"fa fa-circle zs:text-xs zs:leading-none\"\n [ngClass]=\"[\n isOnline() ? 'zs:text-green-500' : 'zs:text-red-500'\n ]\"\n aria-hidden=\"true\"\n ></i>\n <span>\n @if (isOnline()) {\n Online\n } @else {\n Offline\n }\n </span>\n</div>", styles: ["div{box-shadow:0 1px 2px #0000000d}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
|
|
1184
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: Connection, isStandalone: true, selector: "ZS-connection", outputs: { isOnlineEv: "isOnlineEv" }, ngImport: i0, template: "<div tabindex=\"0\" \n class=\"zs:inline-flex zs:items-center zs:justify-center zs:gap-2 zs:rounded-full \n zs:text-sm zs:font-medium zs:px-3 zs:h-8 zs:w-fit zs:cursor-pointer zs:transition-colors\"\n [ngClass]=\"[\n isOnline() \n ? 'zs:bg-green-100 zs:text-green-800 zs:dark:bg-green-700 zs:dark:text-green-100'\n : 'zs:bg-red-100 zs:text-red-800 zs:dark:bg-red-700 zs:dark:text-red-100'\n ]\"\n>\n <i\n class=\"fa fa-circle zs:text-xs zs:leading-none\"\n [ngClass]=\"[\n isOnline() ? 'zs:text-green-500' : 'zs:text-red-500'\n ]\"\n aria-hidden=\"true\"\n ></i>\n <span>\n @if (isOnline()) {\n Online\n } @else {\n Offline\n }\n </span>\n</div>", styles: ["div{box-shadow:0 1px 2px #0000000d}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
|
|
1184
1185
|
}
|
|
1185
1186
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: Connection, decorators: [{
|
|
1186
1187
|
type: Component,
|
|
1187
|
-
args: [{ selector: 'ZS-connection', imports: [CommonModule], template: "<div tabindex=\"0\" \n class=\"zs:inline-flex zs:items-center zs:justify-center zs:gap-2 zs:rounded-full \n zs:text-sm zs:font-medium zs:px-3 zs:h-8 zs:w-fit zs:cursor-pointer\"\n [ngClass]=\"[\n isOnline() \n ? 'zs:bg-green-100 zs:text-green-800 zs:dark:bg-green-700 zs:dark:text-green-100'\n : 'zs:bg-red-100 zs:text-red-800 zs:dark:bg-red-700 zs:dark:text-red-100'\n ]\"\n>\n <i\n class=\"fa fa-circle zs:text-xs zs:leading-none\"\n [ngClass]=\"[\n isOnline() ? 'zs:text-green-500' : 'zs:text-red-500'\n ]\"\n aria-hidden=\"true\"\n ></i>\n <span>\n @if (isOnline()) {\n Online\n } @else {\n Offline\n }\n </span>\n</div>", styles: ["div{box-shadow:0 1px 2px #0000000d}\n"] }]
|
|
1188
|
+
args: [{ selector: 'ZS-connection', imports: [CommonModule], template: "<div tabindex=\"0\" \n class=\"zs:inline-flex zs:items-center zs:justify-center zs:gap-2 zs:rounded-full \n zs:text-sm zs:font-medium zs:px-3 zs:h-8 zs:w-fit zs:cursor-pointer zs:transition-colors\"\n [ngClass]=\"[\n isOnline() \n ? 'zs:bg-green-100 zs:text-green-800 zs:dark:bg-green-700 zs:dark:text-green-100'\n : 'zs:bg-red-100 zs:text-red-800 zs:dark:bg-red-700 zs:dark:text-red-100'\n ]\"\n>\n <i\n class=\"fa fa-circle zs:text-xs zs:leading-none\"\n [ngClass]=\"[\n isOnline() ? 'zs:text-green-500' : 'zs:text-red-500'\n ]\"\n aria-hidden=\"true\"\n ></i>\n <span>\n @if (isOnline()) {\n Online\n } @else {\n Offline\n }\n </span>\n</div>", styles: ["div{box-shadow:0 1px 2px #0000000d}\n"] }]
|
|
1188
1189
|
}], ctorParameters: () => [], propDecorators: { isOnlineEv: [{ type: i0.Output, args: ["isOnlineEv"] }] } });
|
|
1189
1190
|
|
|
1190
1191
|
class ExtractorService {
|
|
@@ -1393,11 +1394,11 @@ class Button {
|
|
|
1393
1394
|
}
|
|
1394
1395
|
}
|
|
1395
1396
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: Button, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1396
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: Button, isStandalone: true, selector: "ZS-button", inputs: { Id: { classPropertyName: "Id", publicName: "Id", isSignal: true, isRequired: false, transformFunction: null }, btnStyle: { classPropertyName: "btnStyle", publicName: "btnStyle", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clickedEv: "clickedEv" }, ngImport: i0, template: "<!-- ========================= Button Core Attributes ========================= -->\n<button \n [id]=\"Id()\"\n class=\"zs:w-full\"\n [attr.type]=\"type()\"\n [disabled]=\"disabled()\"\n [ngClass]=\"['zs:flex zs:gap-2', baseClasses()]\"\n\n [attr.aria-disabled]=\"disabled()\"\n [attr.aria-label]=\"icon() ? (icon() + ' button') : undefined\"\n [attr.tabindex]=\"disabled() ? -1 : 0\"\n\n (click)=\"onClick($event)\"\n>\n <!-- ========================= Button Content ========================= -->\n @if (icon()) {\n <i [class]=\"icon()\" aria-hidden=\"true\"></i>\n }\n <ng-content></ng-content>\n</button>", styles: [":host{display:inline-flex}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
|
|
1397
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: Button, isStandalone: true, selector: "ZS-button", inputs: { Id: { classPropertyName: "Id", publicName: "Id", isSignal: true, isRequired: false, transformFunction: null }, btnStyle: { classPropertyName: "btnStyle", publicName: "btnStyle", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clickedEv: "clickedEv" }, ngImport: i0, template: "<!-- ========================= Button Core Attributes ========================= -->\n<button \n [id]=\"Id()\"\n class=\"zs:w-full\"\n [attr.type]=\"type()\"\n [disabled]=\"disabled()\"\n [ngClass]=\"['zs:flex zs:gap-2 zs:transition-colors', baseClasses()]\"\n\n [attr.aria-disabled]=\"disabled()\"\n [attr.aria-label]=\"icon() ? (icon() + ' button') : undefined\"\n [attr.tabindex]=\"disabled() ? -1 : 0\"\n\n (click)=\"onClick($event)\"\n>\n <!-- ========================= Button Content ========================= -->\n @if (icon()) {\n <i [class]=\"icon()\" aria-hidden=\"true\"></i>\n }\n <ng-content></ng-content>\n</button>", styles: [":host{display:inline-flex}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
|
|
1397
1398
|
}
|
|
1398
1399
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: Button, decorators: [{
|
|
1399
1400
|
type: Component,
|
|
1400
|
-
args: [{ selector: 'ZS-button', imports: [CommonModule], template: "<!-- ========================= Button Core Attributes ========================= -->\n<button \n [id]=\"Id()\"\n class=\"zs:w-full\"\n [attr.type]=\"type()\"\n [disabled]=\"disabled()\"\n [ngClass]=\"['zs:flex zs:gap-2', baseClasses()]\"\n\n [attr.aria-disabled]=\"disabled()\"\n [attr.aria-label]=\"icon() ? (icon() + ' button') : undefined\"\n [attr.tabindex]=\"disabled() ? -1 : 0\"\n\n (click)=\"onClick($event)\"\n>\n <!-- ========================= Button Content ========================= -->\n @if (icon()) {\n <i [class]=\"icon()\" aria-hidden=\"true\"></i>\n }\n <ng-content></ng-content>\n</button>", styles: [":host{display:inline-flex}\n"] }]
|
|
1401
|
+
args: [{ selector: 'ZS-button', imports: [CommonModule], template: "<!-- ========================= Button Core Attributes ========================= -->\n<button \n [id]=\"Id()\"\n class=\"zs:w-full\"\n [attr.type]=\"type()\"\n [disabled]=\"disabled()\"\n [ngClass]=\"['zs:flex zs:gap-2 zs:transition-colors', baseClasses()]\"\n\n [attr.aria-disabled]=\"disabled()\"\n [attr.aria-label]=\"icon() ? (icon() + ' button') : undefined\"\n [attr.tabindex]=\"disabled() ? -1 : 0\"\n\n (click)=\"onClick($event)\"\n>\n <!-- ========================= Button Content ========================= -->\n @if (icon()) {\n <i [class]=\"icon()\" aria-hidden=\"true\"></i>\n }\n <ng-content></ng-content>\n</button>", styles: [":host{display:inline-flex}\n"] }]
|
|
1401
1402
|
}], propDecorators: { Id: [{ type: i0.Input, args: [{ isSignal: true, alias: "Id", required: false }] }], btnStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "btnStyle", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], clickedEv: [{ type: i0.Output, args: ["clickedEv"] }] } });
|
|
1402
1403
|
|
|
1403
1404
|
// ==============================================
|
|
@@ -1578,7 +1579,7 @@ class Navbar {
|
|
|
1578
1579
|
colorClass: item.colorClass ?? generalColorClass,
|
|
1579
1580
|
routerLinkActive: item.routerLinkActive ?? generalRouterLinkActive,
|
|
1580
1581
|
childrenOpenWindow,
|
|
1581
|
-
children: item.children?.map(child => this.toNavbarItem(child, childrenOpenWindow)) ?? []
|
|
1582
|
+
children: item.children?.map(child => this.toNavbarItem(child, childrenOpenWindow, generalRouterLinkActive, generalColorClass)) ?? []
|
|
1582
1583
|
};
|
|
1583
1584
|
}
|
|
1584
1585
|
// ==============================================
|
|
@@ -1624,11 +1625,11 @@ class Navbar {
|
|
|
1624
1625
|
this.resizeObserver.disconnect();
|
|
1625
1626
|
}
|
|
1626
1627
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: Navbar, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1627
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: Navbar, isStandalone: true, selector: "ZS-navbar", inputs: { fixed: { classPropertyName: "fixed", publicName: "fixed", isSignal: true, isRequired: false, transformFunction: null }, logoUrl: { classPropertyName: "logoUrl", publicName: "logoUrl", isSignal: true, isRequired: false, transformFunction: null }, siteNameConfig: { classPropertyName: "siteNameConfig", publicName: "siteNameConfig", isSignal: true, isRequired: false, transformFunction: null }, authButtons: { classPropertyName: "authButtons", publicName: "authButtons", isSignal: true, isRequired: false, transformFunction: null }, showUserSection: { classPropertyName: "showUserSection", publicName: "showUserSection", isSignal: true, isRequired: false, transformFunction: null }, showSearchBar: { classPropertyName: "showSearchBar", publicName: "showSearchBar", isSignal: true, isRequired: false, transformFunction: null }, navItems: { classPropertyName: "navItems", publicName: "navItems", isSignal: true, isRequired: false, transformFunction: null }, isLoggedIn: { classPropertyName: "isLoggedIn", publicName: "isLoggedIn", isSignal: true, isRequired: false, transformFunction: null }, userProfile: { classPropertyName: "userProfile", publicName: "userProfile", isSignal: true, isRequired: false, transformFunction: null }, userMenuItems: { classPropertyName: "userMenuItems", publicName: "userMenuItems", isSignal: true, isRequired: false, transformFunction: null }, searchPlaceholder: { classPropertyName: "searchPlaceholder", publicName: "searchPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, searchValue: { classPropertyName: "searchValue", publicName: "searchValue", isSignal: true, isRequired: false, transformFunction: null }, isMobileMenuOpen: { classPropertyName: "isMobileMenuOpen", publicName: "isMobileMenuOpen", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { loginClickedEv: "loginClickedEv", signupClickedEv: "signupClickedEv", searchSubmittedEv: "searchSubmittedEv", anyItemClickedEv: "anyItemClickedEv", searchValue: "searchValueChange", isMobileMenuOpen: "isMobileMenuOpenChange" }, ngImport: i0, template: "<!-- ========================= Fixed Navbar Container ========================= -->\n\n<nav\n class=\"zs:bg-white zs:dark:bg-[#18202F] zs:top-0 zs:left-0 zs:right-0 {{ zIndices.navbar }} zs:shadow-md zs:dark:shadow-gray-400/30\"\n [ngClass]=\"fixed() ? 'zs:fixed' : 'zs:relative'\"\n role=\"navigation\"\n aria-label=\"Main Navigation\"\n>\n <div class=\"zs:max-w-7xl zs:mx-auto zs:px-4 zs:sm:px-6 zs:lg:px-8\">\n <div class=\"zs:flex zs:justify-between zs:h-16 zs:gap-4\">\n\n <!-- ========================= Logo & Site Name ========================= -->\n <div class=\"zs:flex zs:items-center\">\n @if (logoUrl() || siteNameConfig()) {\n <a\n [routerLink]=\"[siteNameConfig()?.routerLink ?? '/']\"\n class=\"zs:shrink-0 zs:flex zs:items-center zs:gap-2 zs:focus:outline-hidden zs:focus-visible:ring-2 zs:focus-visible:ring-blue-500\"\n aria-label=\"Homepage\"\n >\n @if (logoUrl()) {\n <img\n [src]=\"logoUrl()\"\n alt=\"{{ siteNameConfig()?.siteName ?? 'Site Logo' }}\"\n class=\"zs:h-9 zs:w-auto\"\n />\n }\n @if (siteNameConfig()) {\n <span\n [class]=\"siteNameConfig()?.siteNameColorClass ?? 'zs:text-gray-800 zs:dark:text-gray-100'\"\n class=\"zs:font-bold zs:text-xl\"\n >\n {{ siteNameConfig()?.siteName }}\n </span>\n }\n </a>\n }\n </div>\n\n <!-- ========================= Desktop Navigation ========================= -->\n <div class=\"zs:hidden zs:lg:flex zs:items-center zs:gap-4\" role=\"menubar\">\n @for (item of visibleNavItems(); track $index) {\n <ZS-nav-item\n [item]=\"item\"\n [collectionName]=\"'navItems'\"\n (anyItemClickedEv)=\"itemClicked($event)\"\n role=\"menuitem\"\n />\n }\n\n @if (moreNavItems().length > 0) {\n <div class=\"zs:relative\" role=\"none\">\n <button\n (click)=\"isMoreOpen.set(!isMoreOpen())\"\n [attr.aria-expanded]=\"isMoreOpen()\"\n aria-haspopup=\"true\"\n aria-controls=\"more-menu\"\n class=\"zs:px-3 zs:py-2 zs:text-sm zs:font-bold zs:text-blue-600 zs:dark:text-blue-400 zs:hover:text-blue-700 zs:dark:hover:text-blue-300 zs:focus:outline-hidden zs:focus-visible:ring-2 zs:focus-visible:ring-blue-500\"\n >\n More\n <i class=\"fas fa-chevron-down zs:ml-1 zs:text-xs zs:text-gray-500 zs:dark:text-gray-400\"></i>\n </button>\n <div\n id=\"more-menu\"\n [ngClass]=\"{ 'zs:block': isMoreOpen(), 'zs:hidden': !isMoreOpen() }\"\n class=\"zs:absolute zs:bg-white zs:dark:bg-[#18202F] shadow-md-all shadow-md-all-night zs:rounded-md zs:mt-1 zs:py-1 zs:min-w-48 zs:z-200\"\n role=\"menu\"\n >\n @for (item of moreNavItems(); track $index) {\n <ZS-nav-item\n [item]=\"item\"\n [collectionName]=\"'navItems'\"\n (anyItemClickedEv)=\"itemClicked($event)\"\n role=\"menuitem\"\n />\n }\n </div>\n </div>\n }\n </div>\n\n <!-- ========================= Right Controls ========================= -->\n <div class=\"zs:flex zs:items-center zs:gap-3\">\n\n <!-- Search Bar (Desktop) -->\n @if (showSearchBar()) {\n <div class=\"zs:hidden zs:lg:block\" role=\"search\">\n <div class=\"zs:relative\">\n <label for=\"desktop-search\" class=\"sr-only\">Search</label>\n <input\n id=\"desktop-search\"\n type=\"text\"\n [value]=\"searchValue()\"\n (input)=\"searchValue.set($any($event.target).value)\"\n (keyup.enter)=\"onSearchSubmit()\"\n [placeholder]=\"searchPlaceholder()\"\n class=\"zs:bg-gray-100 zs:dark:bg-gray-700 zs:text-gray-800 zs:dark:text-gray-200 zs:rounded-full zs:py-2 zs:px-4 zs:w-64\n zs:transition-all zs:duration-200 zs:focus:outline-hidden zs:focus:ring-2 zs:focus:ring-blue-500\n zs:focus:bg-white zs:dark:focus:bg-gray-600 zs:shadow-sm zs:dark:shadow-gray-500/40\n zs:hover:shadow-md zs:dark:hover:shadow-gray-500/50\"\n />\n <button\n (click)=\"onSearchSubmit()\"\n class=\"zs:absolute zs:py-1 zs:px-2 zs:right-2 zs:top-1/2 zs:-translate-y-1/2 zs:text-gray-500 zs:dark:text-gray-400\n zs:hover:text-gray-700 zs:dark:hover:text-gray-300 zs:transition-colors zs:duration-200\"\n aria-label=\"Submit search\"\n >\n <i class=\"fas fa-search\"></i>\n </button>\n </div>\n </div>\n }\n\n <!-- User Profile Dropdown -->\n @if (isLoggedIn() && userProfile() && showUserSection()) {\n <div class=\"zs:relative\">\n <button\n (click)=\"toggleUserMenu()\"\n class=\"zs:flex zs:items-center zs:gap-2 zs:focus:outline-hidden zs:focus-visible:ring-2 zs:focus-visible:ring-blue-500\"\n aria-haspopup=\"true\"\n [attr.aria-expanded]=\"isUserMenuOpen()\"\n aria-controls=\"user-menu\"\n aria-label=\"User menu\"\n >\n @if (userProfile()?.imageUrl) {\n <img\n [src]=\"userProfile()?.imageUrl\"\n alt=\"{{ userProfile()?.name ?? 'User profile image' }}\"\n class=\"zs:size-9 zs:rounded-full zs:object-cover\"\n />\n } @else {\n <div\n class=\"zs:size-9 zs:rounded-full zs:bg-blue-500 zs:flex zs:items-center zs:justify-center zs:text-white zs:font-semibold\"\n aria-hidden=\"true\"\n >\n {{ userProfile()?.name?.charAt(0)?.toUpperCase() }}\n </div>\n }\n <i class=\"fas fa-chevron-down zs:text-xs zs:text-gray-600 zs:dark:text-gray-400\n zs:hover:text-gray-700 zs:dark:hover:text-gray-300\"></i>\n </button>\n\n @if (isUserMenuOpen() && userMenuItems().length > 0) {\n <div\n id=\"user-menu\"\n class=\"zs:absolute zs:right-0 zs:mt-2.5 zs:min-w-56 zs:bg-white zs:dark:bg-gray-800 zs:rounded-md\n shadow-md-all shadow-md-all-night zs:pt-2 zs:z-400\"\n role=\"menu\"\n >\n <!-- User Info Section -->\n <div class=\"zs:px-4 zs:py-2 zs:border-b zs:border-gray-200 zs:dark:border-gray-700\">\n @if (userProfile()?.name) {\n <div class=\"zs:font-semibold zs:text-gray-900 zs:dark:text-gray-100\">\n {{ userProfile()?.name }}\n </div>\n }\n @if (userProfile()?.username) {\n <div class=\"zs:text-sm zs:text-gray-600 zs:dark:text-gray-400\">\n @{{ userProfile()?.username }}\n </div>\n }\n @if (userProfile()?.email) {\n <div class=\"zs:text-sm zs:text-gray-500 zs:dark:text-gray-400\">\n {{ userProfile()?.email }}\n </div>\n }\n </div>\n\n <!-- Menu Items -->\n @if (userMenuItems().length > 0) {\n <div class=\"zs:py-1\">\n @for (item of getUserMenuItems(); track $index) {\n <ZS-nav-item\n [item]=\"item\"\n [collectionName]=\"'MenuItems'\"\n (anyItemClickedEv)=\"itemClicked($event)\"\n role=\"menuitem\"\n />\n }\n </div>\n }\n </div>\n }\n </div>\n }\n\n <!-- Auth Buttons -->\n @else if (authButtons().showAuthButtons && !isLoggedIn()) {\n <div class=\"zs:hidden zs:lg:flex zs:items-center zs:gap-3\" role=\"group\" aria-label=\"Authentication\">\n <ZS-button\n [btnStyle]=\"authButtons().login?.btnStyle ?? 'secondary'\"\n [variant]=\"authButtons().login?.variant ?? 'outline'\"\n [size]=\"authButtons().login?.size ?? 'md'\"\n [icon]=\"authButtons().login?.icon ?? ''\"\n (clickedEv)=\"onLogin()\"\n >\n Login\n </ZS-button>\n\n <ZS-button\n [btnStyle]=\"authButtons().signup?.btnStyle ?? 'primary'\"\n [variant]=\"authButtons().signup?.variant ?? 'solid'\"\n [size]=\"authButtons().signup?.size ?? 'md'\"\n [icon]=\"authButtons().signup?.icon ?? ''\"\n (clickedEv)=\"onSignup()\"\n >\n Sign Up\n </ZS-button>\n </div>\n }\n\n <!-- Mobile Menu Toggle -->\n @if(mobileNavItems().length || showSearchBar() || (authButtons().showAuthButtons && !isLoggedIn())) {\n <div class=\"zs:lg:hidden\">\n <button\n (click)=\"toggleMobileMenu()\"\n class=\"zs:p-2 zs:rounded-md zs:text-gray-600 zs:dark:text-gray-300\n zs:hover:text-gray-900 zs:dark:hover:text-gray-100\n zs:focus:outline-hidden zs:focus:ring-2 zs:focus:ring-inset\n zs:focus:ring-gray-200 zs:dark:focus:ring-gray-700\"\n aria-controls=\"mobile-menu\"\n aria-expanded=\"{{ isMobileMenuOpen() }}\"\n aria-label=\"Toggle mobile menu\"\n >\n <i class=\"fas fa-bars zs:px-1\"></i>\n </button>\n </div>\n }\n </div>\n </div>\n </div>\n\n <!-- ========================= Mobile Menu ========================= -->\n @if (isMobileMenuOpen()) {\n <div\n id=\"mobile-menu\"\n class=\"zs:lg:hidden zs:bg-white zs:dark:bg-[#18202F] \n zs:[box-shadow:0_8px_0_0_#364153] zs:dark:[box-shadow:0_8px_0_0_black]\"\n role=\"menu\"\n aria-label=\"Mobile navigation\"\n >\n <div class=\"zs:px-2 zs:pt-2 zs:pb-3 zs:flex zs:flex-col zs:gap-1 zs:sm:px-3\">\n\n <!-- Navigation Items -->\n <div class=\"zs:max-h-96 zs:overflow-y-auto\">\n @for (item of mobileNavItems(); track $index) {\n <ZS-nav-item\n [item]=\"item\"\n [collectionName]=\"'navItems'\"\n (anyItemClickedEv)=\"itemClicked($event)\"\n role=\"menuitem\"\n />\n }\n </div>\n\n <!-- Search Bar (Mobile) -->\n @if (showSearchBar()) {\n <div class=\"zs:px-3 zs:py-2\" role=\"search\">\n <label for=\"mobile-search\" class=\"sr-only\">Search</label>\n <div class=\"zs:relative\">\n <input\n id=\"mobile-search\"\n type=\"text\"\n [value]=\"searchValue()\"\n (input)=\"searchValue.set($any($event.target).value)\"\n (keyup.enter)=\"onSearchSubmit()\"\n [placeholder]=\"searchPlaceholder()\"\n class=\"zs:w-full zs:bg-gray-100 zs:dark:bg-gray-700 zs:text-gray-800 zs:dark:text-gray-200\n zs:rounded-full zs:py-2 zs:px-4 zs:transition-all zs:duration-200 zs:focus:outline-hidden\n zs:focus:ring-2 zs:focus:ring-blue-500 zs:focus:bg-white zs:dark:focus:bg-gray-600\n zs:shadow-sm zs:dark:shadow-gray-500/40 zs:hover:shadow-md zs:dark:hover:shadow-gray-500/50\"\n />\n <button\n (click)=\"onSearchSubmit()\"\n class=\"zs:absolute zs:py-1 zs:px-2 zs:right-2 zs:top-1/2 zs:-translate-y-1/2 zs:text-gray-500 zs:dark:text-gray-400\n zs:hover:text-gray-700 zs:dark:hover:text-gray-300 zs:transition-colors zs:duration-200\"\n aria-label=\"Submit search\"\n >\n <i class=\"fas fa-search\"></i>\n </button>\n </div>\n </div>\n }\n\n <!-- Auth Buttons (Mobile) -->\n @if (authButtons().showAuthButtons && !isLoggedIn()) {\n <div\n class=\"zs:pt-3 zs:pb-4 zs:border-t zs:border-gray-300 zs:dark:border-gray-500\n zs:flex zs:flex-wrap zs:justify-start zs:items-center zs:gap-2\"\n role=\"group\"\n aria-label=\"Authentication (mobile)\"\n >\n <ZS-button\n [btnStyle]=\"authButtons().login?.btnStyle ?? 'secondary'\"\n [variant]=\"authButtons().login?.variant ?? 'outline'\"\n [size]=\"authButtons().login?.size ?? 'md'\"\n [icon]=\"authButtons().login?.icon ?? ''\"\n (clickedEv)=\"onLogin(); isMobileMenuOpen.set(false)\"\n >\n Login\n </ZS-button>\n\n <ZS-button\n [btnStyle]=\"authButtons().signup?.btnStyle ?? 'primary'\"\n [variant]=\"authButtons().signup?.variant ?? 'solid'\"\n [size]=\"authButtons().signup?.size ?? 'md'\"\n [icon]=\"authButtons().signup?.icon ?? ''\"\n (clickedEv)=\"onSignup(); isMobileMenuOpen.set(false)\"\n >\n Sign Up\n </ZS-button>\n </div>\n }\n </div>\n </div>\n }\n</nav>\n\n<!-- ========================= Spacer for Fixed Navbar ========================= -->\n@if (fixed()) {\n <div class=\"zs:h-16\" aria-hidden=\"true\"></div>\n}\n\n<!-- ========================= Overlay for Menu Closing ========================= -->\n@if (isMobileMenuOpen()) {\n <div\n class=\"zs:fixed zs:inset-0 zs:bg-gray-700 zs:dark:bg-black zs:z-700\"\n (click)=\"closeAllMenus()\"\n aria-hidden=\"true\"\n ></div>\n}\n", styles: [":host{display:block}body{font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif}a,button{transition:all .2s ease-in-out}img{object-fit:cover}.shadow-lg{box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d}@media (max-width: 768px){.rtl\\:space-x-reverse{margin-right:0;margin-left:.75rem}}\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: "component", type: NavItem, selector: "ZS-nav-item", inputs: ["item", "collectionName"], outputs: ["anyItemClickedEv"] }, { kind: "component", type: Button, selector: "ZS-button", inputs: ["Id", "btnStyle", "variant", "size", "disabled", "icon", "type"], outputs: ["clickedEv"] }] });
|
|
1628
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: Navbar, isStandalone: true, selector: "ZS-navbar", inputs: { fixed: { classPropertyName: "fixed", publicName: "fixed", isSignal: true, isRequired: false, transformFunction: null }, logoUrl: { classPropertyName: "logoUrl", publicName: "logoUrl", isSignal: true, isRequired: false, transformFunction: null }, siteNameConfig: { classPropertyName: "siteNameConfig", publicName: "siteNameConfig", isSignal: true, isRequired: false, transformFunction: null }, authButtons: { classPropertyName: "authButtons", publicName: "authButtons", isSignal: true, isRequired: false, transformFunction: null }, showUserSection: { classPropertyName: "showUserSection", publicName: "showUserSection", isSignal: true, isRequired: false, transformFunction: null }, showSearchBar: { classPropertyName: "showSearchBar", publicName: "showSearchBar", isSignal: true, isRequired: false, transformFunction: null }, navItems: { classPropertyName: "navItems", publicName: "navItems", isSignal: true, isRequired: false, transformFunction: null }, isLoggedIn: { classPropertyName: "isLoggedIn", publicName: "isLoggedIn", isSignal: true, isRequired: false, transformFunction: null }, userProfile: { classPropertyName: "userProfile", publicName: "userProfile", isSignal: true, isRequired: false, transformFunction: null }, userMenuItems: { classPropertyName: "userMenuItems", publicName: "userMenuItems", isSignal: true, isRequired: false, transformFunction: null }, searchPlaceholder: { classPropertyName: "searchPlaceholder", publicName: "searchPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, searchValue: { classPropertyName: "searchValue", publicName: "searchValue", isSignal: true, isRequired: false, transformFunction: null }, isMobileMenuOpen: { classPropertyName: "isMobileMenuOpen", publicName: "isMobileMenuOpen", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { loginClickedEv: "loginClickedEv", signupClickedEv: "signupClickedEv", searchSubmittedEv: "searchSubmittedEv", anyItemClickedEv: "anyItemClickedEv", searchValue: "searchValueChange", isMobileMenuOpen: "isMobileMenuOpenChange" }, ngImport: i0, template: "<!-- ========================= Fixed Navbar Container ========================= -->\n\n<nav\n class=\"zs:bg-white zs:dark:bg-[#18202F] zs:top-0 zs:left-0 zs:right-0 {{ zIndices.navbar }} zs:shadow-md zs:dark:shadow-gray-400/30 zs:transition-colors\"\n [ngClass]=\"fixed() ? 'zs:fixed' : 'zs:relative'\"\n role=\"navigation\"\n aria-label=\"Main Navigation\"\n>\n <div class=\"zs:max-w-7xl zs:mx-auto zs:px-4 zs:sm:px-6 zs:lg:px-8\">\n <div class=\"zs:flex zs:justify-between zs:h-16 zs:gap-4\">\n\n <!-- ========================= Logo & Site Name ========================= -->\n <div class=\"zs:flex zs:items-center\">\n @if (logoUrl() || siteNameConfig()) {\n <a\n [routerLink]=\"[siteNameConfig()?.routerLink ?? '/']\"\n class=\"zs:shrink-0 zs:flex zs:items-center zs:gap-2 zs:focus:outline-hidden zs:focus-visible:ring-2 zs:focus-visible:ring-blue-500\"\n aria-label=\"Homepage\"\n >\n @if (logoUrl()) {\n <img\n [src]=\"logoUrl()\"\n alt=\"{{ siteNameConfig()?.siteName ?? 'Site Logo' }}\"\n class=\"zs:h-9 zs:w-auto\"\n />\n }\n @if (siteNameConfig()) {\n <span\n [class]=\"siteNameConfig()?.siteNameColorClass ?? 'zs:text-gray-800 zs:dark:text-gray-100 zs:transition-colors'\"\n class=\"zs:font-bold zs:text-xl\"\n >\n {{ siteNameConfig()?.siteName }}\n </span>\n }\n </a>\n }\n </div>\n\n <!-- ========================= Desktop Navigation ========================= -->\n <div class=\"zs:hidden zs:lg:flex zs:items-center zs:gap-4\" role=\"menubar\">\n @for (item of visibleNavItems(); track $index) {\n <ZS-nav-item\n [item]=\"item\"\n [collectionName]=\"'navItems'\"\n (anyItemClickedEv)=\"itemClicked($event)\"\n role=\"menuitem\"\n />\n }\n\n @if (moreNavItems().length > 0) {\n <div class=\"zs:relative\" role=\"none\">\n <button\n (click)=\"isMoreOpen.set(!isMoreOpen())\"\n [attr.aria-expanded]=\"isMoreOpen()\"\n aria-haspopup=\"true\"\n aria-controls=\"more-menu\"\n class=\"zs:px-3 zs:py-2 zs:text-sm zs:font-bold zs:text-blue-600 zs:dark:text-blue-400\n zs:hover:text-blue-700 zs:dark:hover:text-blue-300 zs:focus:outline-hidden \n zs:focus-visible:ring-2 zs:focus-visible:ring-blue-500 zs:transition-colors\"\n >\n More\n <i class=\"fas fa-chevron-down zs:ml-1 zs:text-xs zs:text-gray-500 zs:dark:text-gray-400 zs:transition-colors\"></i>\n </button>\n <div\n id=\"more-menu\"\n [ngClass]=\"{ 'zs:block': isMoreOpen(), 'zs:hidden': !isMoreOpen() }\"\n class=\"zs:absolute zs:bg-white zs:dark:bg-[#18202F] shadow-md-all \n shadow-md-all-night zs:rounded-md zs:mt-1 zs:py-1 zs:min-w-48 zs:z-200 \n zs:transition-colors\"\n role=\"menu\"\n >\n @for (item of moreNavItems(); track $index) {\n <ZS-nav-item\n [item]=\"item\"\n [collectionName]=\"'navItems'\"\n (anyItemClickedEv)=\"itemClicked($event)\"\n role=\"menuitem\"\n />\n }\n </div>\n </div>\n }\n </div>\n\n <!-- ========================= Right Controls ========================= -->\n <div class=\"zs:flex zs:items-center zs:gap-3\">\n\n <!-- Search Bar (Desktop) -->\n @if (showSearchBar()) {\n <div class=\"zs:hidden zs:lg:block\" role=\"search\">\n <div class=\"zs:relative\">\n <label for=\"desktop-search\" class=\"sr-only\">Search</label>\n <input\n id=\"desktop-search\"\n type=\"text\"\n [value]=\"searchValue()\"\n (input)=\"searchValue.set($any($event.target).value)\"\n (keyup.enter)=\"onSearchSubmit()\"\n [placeholder]=\"searchPlaceholder()\"\n class=\"zs:bg-gray-100 zs:dark:bg-gray-700 zs:text-gray-800 zs:dark:text-gray-200 zs:rounded-full zs:py-2 zs:px-4 zs:w-64\n zs:transition-all zs:duration-200 zs:focus:outline-hidden zs:focus:ring-2 zs:focus:ring-blue-500\n zs:focus:bg-white zs:dark:focus:bg-gray-600 zs:shadow-sm zs:dark:shadow-gray-500/40\n zs:hover:shadow-md zs:dark:hover:shadow-gray-500/50\"\n />\n <button\n (click)=\"onSearchSubmit()\"\n class=\"zs:absolute zs:py-1 zs:px-2 zs:right-2 zs:top-1/2 zs:-translate-y-1/2 zs:text-gray-500 zs:dark:text-gray-400\n zs:hover:text-gray-700 zs:dark:hover:text-gray-300 zs:transition-colors zs:duration-200\"\n aria-label=\"Submit search\"\n >\n <i class=\"fas fa-search\"></i>\n </button>\n </div>\n </div>\n }\n\n <!-- User Profile Dropdown -->\n @if (isLoggedIn() && userProfile() && showUserSection()) {\n <div class=\"zs:relative\">\n <button\n (click)=\"toggleUserMenu()\"\n class=\"zs:flex zs:items-center zs:gap-2 zs:focus:outline-hidden zs:focus-visible:ring-2 zs:focus-visible:ring-blue-500\"\n aria-haspopup=\"true\"\n [attr.aria-expanded]=\"isUserMenuOpen()\"\n aria-controls=\"user-menu\"\n aria-label=\"User menu\"\n >\n @if (userProfile()?.imageUrl) {\n <img\n [src]=\"userProfile()?.imageUrl\"\n alt=\"{{ userProfile()?.name ?? 'User profile image' }}\"\n class=\"zs:size-9 zs:rounded-full zs:object-cover\"\n />\n } @else {\n <div\n class=\"zs:size-9 zs:rounded-full zs:bg-blue-500 zs:flex zs:items-center zs:justify-center zs:text-white zs:font-semibold\"\n aria-hidden=\"true\"\n >\n {{ userProfile()?.name?.charAt(0)?.toUpperCase() }}\n </div>\n }\n <i class=\"fas fa-chevron-down zs:text-xs zs:text-gray-600 zs:dark:text-gray-400\n zs:hover:text-gray-700 zs:dark:hover:text-gray-300 zs:transition-colors\"></i>\n </button>\n\n @if (isUserMenuOpen() && userMenuItems().length > 0) {\n <div\n id=\"user-menu\"\n class=\"zs:absolute zs:right-0 zs:mt-2.5 zs:min-w-56 zs:bg-white zs:dark:bg-gray-800 zs:rounded-md\n shadow-md-all shadow-md-all-night zs:pt-2 zs:z-400 zs:transition-colors\"\n role=\"menu\"\n >\n <!-- User Info Section -->\n <div class=\"zs:px-4 zs:py-2 zs:border-b zs:border-gray-200 zs:dark:border-gray-700 zs:transition-colors\">\n @if (userProfile()?.name) {\n <div class=\"zs:font-semibold zs:text-gray-900 zs:dark:text-gray-100 zs:transition-colors\">\n {{ userProfile()?.name }}\n </div>\n }\n @if (userProfile()?.username) {\n <div class=\"zs:text-sm zs:text-gray-600 zs:dark:text-gray-400 zs:transition-colors\">\n @{{ userProfile()?.username }}\n </div>\n }\n @if (userProfile()?.email) {\n <div class=\"zs:text-sm zs:text-gray-500 zs:dark:text-gray-400 zs:transition-colors\">\n {{ userProfile()?.email }}\n </div>\n }\n </div>\n\n <!-- Menu Items -->\n @if (userMenuItems().length > 0) {\n <div class=\"zs:py-1\">\n @for (item of getUserMenuItems(); track $index) {\n <ZS-nav-item\n [item]=\"item\"\n [collectionName]=\"'MenuItems'\"\n (anyItemClickedEv)=\"itemClicked($event)\"\n role=\"menuitem\"\n />\n }\n </div>\n }\n </div>\n }\n </div>\n }\n\n <!-- Auth Buttons -->\n @else if (authButtons().showAuthButtons && !isLoggedIn()) {\n <div class=\"zs:hidden zs:lg:flex zs:items-center zs:gap-3\" role=\"group\" aria-label=\"Authentication\">\n <ZS-button\n [btnStyle]=\"authButtons().login?.btnStyle ?? 'secondary'\"\n [variant]=\"authButtons().login?.variant ?? 'outline'\"\n [size]=\"authButtons().login?.size ?? 'md'\"\n [icon]=\"authButtons().login?.icon ?? ''\"\n (clickedEv)=\"onLogin()\"\n >\n Login\n </ZS-button>\n\n <ZS-button\n [btnStyle]=\"authButtons().signup?.btnStyle ?? 'primary'\"\n [variant]=\"authButtons().signup?.variant ?? 'solid'\"\n [size]=\"authButtons().signup?.size ?? 'md'\"\n [icon]=\"authButtons().signup?.icon ?? ''\"\n (clickedEv)=\"onSignup()\"\n >\n Sign Up\n </ZS-button>\n </div>\n }\n\n <!-- Mobile Menu Toggle -->\n @if(mobileNavItems().length || showSearchBar() || (authButtons().showAuthButtons && !isLoggedIn())) {\n <div class=\"zs:lg:hidden\">\n <button\n (click)=\"toggleMobileMenu()\"\n class=\"zs:p-2 zs:rounded-md zs:text-gray-600 zs:dark:text-gray-300\n zs:hover:text-gray-900 zs:dark:hover:text-gray-100\n zs:focus:outline-hidden zs:focus:ring-2 zs:focus:ring-inset\n zs:focus:ring-gray-200 zs:dark:focus:ring-gray-700 zs:transition-colors\"\n aria-controls=\"mobile-menu\"\n aria-expanded=\"{{ isMobileMenuOpen() }}\"\n aria-label=\"Toggle mobile menu\"\n >\n <i class=\"fas fa-bars zs:px-1\"></i>\n </button>\n </div>\n }\n </div>\n </div>\n </div>\n\n <!-- ========================= Mobile Menu ========================= -->\n @if (isMobileMenuOpen()) {\n <div\n id=\"mobile-menu\"\n class=\"zs:lg:hidden zs:bg-white zs:dark:bg-[#18202F] zs:transition-colors\n zs:[box-shadow:0_8px_0_0_#364153] zs:dark:[box-shadow:0_8px_0_0_black]\"\n role=\"menu\"\n aria-label=\"Mobile navigation\"\n >\n <div class=\"zs:px-2 zs:pt-2 zs:pb-3 zs:flex zs:flex-col zs:gap-1 zs:sm:px-3\">\n\n <!-- Navigation Items -->\n <div class=\"zs:max-h-96 zs:overflow-y-auto\">\n @for (item of mobileNavItems(); track $index) {\n <ZS-nav-item\n [item]=\"item\"\n [collectionName]=\"'navItems'\"\n (anyItemClickedEv)=\"itemClicked($event)\"\n role=\"menuitem\"\n />\n }\n </div>\n\n <!-- Search Bar (Mobile) -->\n @if (showSearchBar()) {\n <div class=\"zs:px-3 zs:py-2\" role=\"search\">\n <label for=\"mobile-search\" class=\"sr-only\">Search</label>\n <div class=\"zs:relative\">\n <input\n id=\"mobile-search\"\n type=\"text\"\n [value]=\"searchValue()\"\n (input)=\"searchValue.set($any($event.target).value)\"\n (keyup.enter)=\"onSearchSubmit()\"\n [placeholder]=\"searchPlaceholder()\"\n class=\"zs:w-full zs:bg-gray-100 zs:dark:bg-gray-700 zs:text-gray-800 zs:dark:text-gray-200\n zs:rounded-full zs:py-2 zs:px-4 zs:transition-all zs:duration-200 zs:focus:outline-hidden\n zs:focus:ring-2 zs:focus:ring-blue-500 zs:focus:bg-white zs:dark:focus:bg-gray-600\n zs:shadow-sm zs:dark:shadow-gray-500/40 zs:hover:shadow-md zs:dark:hover:shadow-gray-500/50\"\n />\n <button\n (click)=\"onSearchSubmit()\"\n class=\"zs:absolute zs:py-1 zs:px-2 zs:right-2 zs:top-1/2 zs:-translate-y-1/2 zs:text-gray-500 zs:dark:text-gray-400\n zs:hover:text-gray-700 zs:dark:hover:text-gray-300 zs:transition-colors zs:duration-200\"\n aria-label=\"Submit search\"\n >\n <i class=\"fas fa-search\"></i>\n </button>\n </div>\n </div>\n }\n\n <!-- Auth Buttons (Mobile) -->\n @if (authButtons().showAuthButtons && !isLoggedIn()) {\n <div\n class=\"zs:pt-3 zs:pb-4 zs:border-t zs:border-gray-300 zs:dark:border-gray-500\n zs:flex zs:flex-wrap zs:justify-start zs:items-center zs:gap-2 zs:transition-colors\"\n role=\"group\"\n aria-label=\"Authentication (mobile)\"\n >\n <ZS-button\n [btnStyle]=\"authButtons().login?.btnStyle ?? 'secondary'\"\n [variant]=\"authButtons().login?.variant ?? 'outline'\"\n [size]=\"authButtons().login?.size ?? 'md'\"\n [icon]=\"authButtons().login?.icon ?? ''\"\n (clickedEv)=\"onLogin(); isMobileMenuOpen.set(false)\"\n >\n Login\n </ZS-button>\n\n <ZS-button\n [btnStyle]=\"authButtons().signup?.btnStyle ?? 'primary'\"\n [variant]=\"authButtons().signup?.variant ?? 'solid'\"\n [size]=\"authButtons().signup?.size ?? 'md'\"\n [icon]=\"authButtons().signup?.icon ?? ''\"\n (clickedEv)=\"onSignup(); isMobileMenuOpen.set(false)\"\n >\n Sign Up\n </ZS-button>\n </div>\n }\n </div>\n </div>\n }\n</nav>\n\n<!-- ========================= Spacer for Fixed Navbar ========================= -->\n@if (fixed()) {\n <div class=\"zs:h-16\" aria-hidden=\"true\"></div>\n}\n\n<!-- ========================= Overlay for Menu Closing ========================= -->\n@if (isMobileMenuOpen()) {\n <div\n class=\"zs:fixed zs:inset-0 zs:bg-gray-700 zs:dark:bg-black {{ zIndices.navbarOverlay }} zs:transition-colors\"\n (click)=\"closeAllMenus()\"\n aria-hidden=\"true\"\n ></div>\n}\n", styles: [":host{display:block}body{font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif}a,button{transition:all .2s ease-in-out}img{object-fit:cover}.shadow-lg{box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d}@media (max-width: 768px){.rtl\\:space-x-reverse{margin-right:0;margin-left:.75rem}}\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: "component", type: NavItem, selector: "ZS-nav-item", inputs: ["item", "collectionName"], outputs: ["anyItemClickedEv"] }, { kind: "component", type: Button, selector: "ZS-button", inputs: ["Id", "btnStyle", "variant", "size", "disabled", "icon", "type"], outputs: ["clickedEv"] }] });
|
|
1628
1629
|
}
|
|
1629
1630
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: Navbar, decorators: [{
|
|
1630
1631
|
type: Component,
|
|
1631
|
-
args: [{ selector: 'ZS-navbar', imports: [RouterModule, CommonModule, NavItem, Button], template: "<!-- ========================= Fixed Navbar Container ========================= -->\n\n<nav\n class=\"zs:bg-white zs:dark:bg-[#18202F] zs:top-0 zs:left-0 zs:right-0 {{ zIndices.navbar }} zs:shadow-md zs:dark:shadow-gray-400/30\"\n [ngClass]=\"fixed() ? 'zs:fixed' : 'zs:relative'\"\n role=\"navigation\"\n aria-label=\"Main Navigation\"\n>\n <div class=\"zs:max-w-7xl zs:mx-auto zs:px-4 zs:sm:px-6 zs:lg:px-8\">\n <div class=\"zs:flex zs:justify-between zs:h-16 zs:gap-4\">\n\n <!-- ========================= Logo & Site Name ========================= -->\n <div class=\"zs:flex zs:items-center\">\n @if (logoUrl() || siteNameConfig()) {\n <a\n [routerLink]=\"[siteNameConfig()?.routerLink ?? '/']\"\n class=\"zs:shrink-0 zs:flex zs:items-center zs:gap-2 zs:focus:outline-hidden zs:focus-visible:ring-2 zs:focus-visible:ring-blue-500\"\n aria-label=\"Homepage\"\n >\n @if (logoUrl()) {\n <img\n [src]=\"logoUrl()\"\n alt=\"{{ siteNameConfig()?.siteName ?? 'Site Logo' }}\"\n class=\"zs:h-9 zs:w-auto\"\n />\n }\n @if (siteNameConfig()) {\n <span\n [class]=\"siteNameConfig()?.siteNameColorClass ?? 'zs:text-gray-800 zs:dark:text-gray-100'\"\n class=\"zs:font-bold zs:text-xl\"\n >\n {{ siteNameConfig()?.siteName }}\n </span>\n }\n </a>\n }\n </div>\n\n <!-- ========================= Desktop Navigation ========================= -->\n <div class=\"zs:hidden zs:lg:flex zs:items-center zs:gap-4\" role=\"menubar\">\n @for (item of visibleNavItems(); track $index) {\n <ZS-nav-item\n [item]=\"item\"\n [collectionName]=\"'navItems'\"\n (anyItemClickedEv)=\"itemClicked($event)\"\n role=\"menuitem\"\n />\n }\n\n @if (moreNavItems().length > 0) {\n <div class=\"zs:relative\" role=\"none\">\n <button\n (click)=\"isMoreOpen.set(!isMoreOpen())\"\n [attr.aria-expanded]=\"isMoreOpen()\"\n aria-haspopup=\"true\"\n aria-controls=\"more-menu\"\n class=\"zs:px-3 zs:py-2 zs:text-sm zs:font-bold zs:text-blue-600 zs:dark:text-blue-400 zs:hover:text-blue-700 zs:dark:hover:text-blue-300 zs:focus:outline-hidden zs:focus-visible:ring-2 zs:focus-visible:ring-blue-500\"\n >\n More\n <i class=\"fas fa-chevron-down zs:ml-1 zs:text-xs zs:text-gray-500 zs:dark:text-gray-400\"></i>\n </button>\n <div\n id=\"more-menu\"\n [ngClass]=\"{ 'zs:block': isMoreOpen(), 'zs:hidden': !isMoreOpen() }\"\n class=\"zs:absolute zs:bg-white zs:dark:bg-[#18202F] shadow-md-all shadow-md-all-night zs:rounded-md zs:mt-1 zs:py-1 zs:min-w-48 zs:z-200\"\n role=\"menu\"\n >\n @for (item of moreNavItems(); track $index) {\n <ZS-nav-item\n [item]=\"item\"\n [collectionName]=\"'navItems'\"\n (anyItemClickedEv)=\"itemClicked($event)\"\n role=\"menuitem\"\n />\n }\n </div>\n </div>\n }\n </div>\n\n <!-- ========================= Right Controls ========================= -->\n <div class=\"zs:flex zs:items-center zs:gap-3\">\n\n <!-- Search Bar (Desktop) -->\n @if (showSearchBar()) {\n <div class=\"zs:hidden zs:lg:block\" role=\"search\">\n <div class=\"zs:relative\">\n <label for=\"desktop-search\" class=\"sr-only\">Search</label>\n <input\n id=\"desktop-search\"\n type=\"text\"\n [value]=\"searchValue()\"\n (input)=\"searchValue.set($any($event.target).value)\"\n (keyup.enter)=\"onSearchSubmit()\"\n [placeholder]=\"searchPlaceholder()\"\n class=\"zs:bg-gray-100 zs:dark:bg-gray-700 zs:text-gray-800 zs:dark:text-gray-200 zs:rounded-full zs:py-2 zs:px-4 zs:w-64\n zs:transition-all zs:duration-200 zs:focus:outline-hidden zs:focus:ring-2 zs:focus:ring-blue-500\n zs:focus:bg-white zs:dark:focus:bg-gray-600 zs:shadow-sm zs:dark:shadow-gray-500/40\n zs:hover:shadow-md zs:dark:hover:shadow-gray-500/50\"\n />\n <button\n (click)=\"onSearchSubmit()\"\n class=\"zs:absolute zs:py-1 zs:px-2 zs:right-2 zs:top-1/2 zs:-translate-y-1/2 zs:text-gray-500 zs:dark:text-gray-400\n zs:hover:text-gray-700 zs:dark:hover:text-gray-300 zs:transition-colors zs:duration-200\"\n aria-label=\"Submit search\"\n >\n <i class=\"fas fa-search\"></i>\n </button>\n </div>\n </div>\n }\n\n <!-- User Profile Dropdown -->\n @if (isLoggedIn() && userProfile() && showUserSection()) {\n <div class=\"zs:relative\">\n <button\n (click)=\"toggleUserMenu()\"\n class=\"zs:flex zs:items-center zs:gap-2 zs:focus:outline-hidden zs:focus-visible:ring-2 zs:focus-visible:ring-blue-500\"\n aria-haspopup=\"true\"\n [attr.aria-expanded]=\"isUserMenuOpen()\"\n aria-controls=\"user-menu\"\n aria-label=\"User menu\"\n >\n @if (userProfile()?.imageUrl) {\n <img\n [src]=\"userProfile()?.imageUrl\"\n alt=\"{{ userProfile()?.name ?? 'User profile image' }}\"\n class=\"zs:size-9 zs:rounded-full zs:object-cover\"\n />\n } @else {\n <div\n class=\"zs:size-9 zs:rounded-full zs:bg-blue-500 zs:flex zs:items-center zs:justify-center zs:text-white zs:font-semibold\"\n aria-hidden=\"true\"\n >\n {{ userProfile()?.name?.charAt(0)?.toUpperCase() }}\n </div>\n }\n <i class=\"fas fa-chevron-down zs:text-xs zs:text-gray-600 zs:dark:text-gray-400\n zs:hover:text-gray-700 zs:dark:hover:text-gray-300\"></i>\n </button>\n\n @if (isUserMenuOpen() && userMenuItems().length > 0) {\n <div\n id=\"user-menu\"\n class=\"zs:absolute zs:right-0 zs:mt-2.5 zs:min-w-56 zs:bg-white zs:dark:bg-gray-800 zs:rounded-md\n shadow-md-all shadow-md-all-night zs:pt-2 zs:z-400\"\n role=\"menu\"\n >\n <!-- User Info Section -->\n <div class=\"zs:px-4 zs:py-2 zs:border-b zs:border-gray-200 zs:dark:border-gray-700\">\n @if (userProfile()?.name) {\n <div class=\"zs:font-semibold zs:text-gray-900 zs:dark:text-gray-100\">\n {{ userProfile()?.name }}\n </div>\n }\n @if (userProfile()?.username) {\n <div class=\"zs:text-sm zs:text-gray-600 zs:dark:text-gray-400\">\n @{{ userProfile()?.username }}\n </div>\n }\n @if (userProfile()?.email) {\n <div class=\"zs:text-sm zs:text-gray-500 zs:dark:text-gray-400\">\n {{ userProfile()?.email }}\n </div>\n }\n </div>\n\n <!-- Menu Items -->\n @if (userMenuItems().length > 0) {\n <div class=\"zs:py-1\">\n @for (item of getUserMenuItems(); track $index) {\n <ZS-nav-item\n [item]=\"item\"\n [collectionName]=\"'MenuItems'\"\n (anyItemClickedEv)=\"itemClicked($event)\"\n role=\"menuitem\"\n />\n }\n </div>\n }\n </div>\n }\n </div>\n }\n\n <!-- Auth Buttons -->\n @else if (authButtons().showAuthButtons && !isLoggedIn()) {\n <div class=\"zs:hidden zs:lg:flex zs:items-center zs:gap-3\" role=\"group\" aria-label=\"Authentication\">\n <ZS-button\n [btnStyle]=\"authButtons().login?.btnStyle ?? 'secondary'\"\n [variant]=\"authButtons().login?.variant ?? 'outline'\"\n [size]=\"authButtons().login?.size ?? 'md'\"\n [icon]=\"authButtons().login?.icon ?? ''\"\n (clickedEv)=\"onLogin()\"\n >\n Login\n </ZS-button>\n\n <ZS-button\n [btnStyle]=\"authButtons().signup?.btnStyle ?? 'primary'\"\n [variant]=\"authButtons().signup?.variant ?? 'solid'\"\n [size]=\"authButtons().signup?.size ?? 'md'\"\n [icon]=\"authButtons().signup?.icon ?? ''\"\n (clickedEv)=\"onSignup()\"\n >\n Sign Up\n </ZS-button>\n </div>\n }\n\n <!-- Mobile Menu Toggle -->\n @if(mobileNavItems().length || showSearchBar() || (authButtons().showAuthButtons && !isLoggedIn())) {\n <div class=\"zs:lg:hidden\">\n <button\n (click)=\"toggleMobileMenu()\"\n class=\"zs:p-2 zs:rounded-md zs:text-gray-600 zs:dark:text-gray-300\n zs:hover:text-gray-900 zs:dark:hover:text-gray-100\n zs:focus:outline-hidden zs:focus:ring-2 zs:focus:ring-inset\n zs:focus:ring-gray-200 zs:dark:focus:ring-gray-700\"\n aria-controls=\"mobile-menu\"\n aria-expanded=\"{{ isMobileMenuOpen() }}\"\n aria-label=\"Toggle mobile menu\"\n >\n <i class=\"fas fa-bars zs:px-1\"></i>\n </button>\n </div>\n }\n </div>\n </div>\n </div>\n\n <!-- ========================= Mobile Menu ========================= -->\n @if (isMobileMenuOpen()) {\n <div\n id=\"mobile-menu\"\n class=\"zs:lg:hidden zs:bg-white zs:dark:bg-[#18202F] \n zs:[box-shadow:0_8px_0_0_#364153] zs:dark:[box-shadow:0_8px_0_0_black]\"\n role=\"menu\"\n aria-label=\"Mobile navigation\"\n >\n <div class=\"zs:px-2 zs:pt-2 zs:pb-3 zs:flex zs:flex-col zs:gap-1 zs:sm:px-3\">\n\n <!-- Navigation Items -->\n <div class=\"zs:max-h-96 zs:overflow-y-auto\">\n @for (item of mobileNavItems(); track $index) {\n <ZS-nav-item\n [item]=\"item\"\n [collectionName]=\"'navItems'\"\n (anyItemClickedEv)=\"itemClicked($event)\"\n role=\"menuitem\"\n />\n }\n </div>\n\n <!-- Search Bar (Mobile) -->\n @if (showSearchBar()) {\n <div class=\"zs:px-3 zs:py-2\" role=\"search\">\n <label for=\"mobile-search\" class=\"sr-only\">Search</label>\n <div class=\"zs:relative\">\n <input\n id=\"mobile-search\"\n type=\"text\"\n [value]=\"searchValue()\"\n (input)=\"searchValue.set($any($event.target).value)\"\n (keyup.enter)=\"onSearchSubmit()\"\n [placeholder]=\"searchPlaceholder()\"\n class=\"zs:w-full zs:bg-gray-100 zs:dark:bg-gray-700 zs:text-gray-800 zs:dark:text-gray-200\n zs:rounded-full zs:py-2 zs:px-4 zs:transition-all zs:duration-200 zs:focus:outline-hidden\n zs:focus:ring-2 zs:focus:ring-blue-500 zs:focus:bg-white zs:dark:focus:bg-gray-600\n zs:shadow-sm zs:dark:shadow-gray-500/40 zs:hover:shadow-md zs:dark:hover:shadow-gray-500/50\"\n />\n <button\n (click)=\"onSearchSubmit()\"\n class=\"zs:absolute zs:py-1 zs:px-2 zs:right-2 zs:top-1/2 zs:-translate-y-1/2 zs:text-gray-500 zs:dark:text-gray-400\n zs:hover:text-gray-700 zs:dark:hover:text-gray-300 zs:transition-colors zs:duration-200\"\n aria-label=\"Submit search\"\n >\n <i class=\"fas fa-search\"></i>\n </button>\n </div>\n </div>\n }\n\n <!-- Auth Buttons (Mobile) -->\n @if (authButtons().showAuthButtons && !isLoggedIn()) {\n <div\n class=\"zs:pt-3 zs:pb-4 zs:border-t zs:border-gray-300 zs:dark:border-gray-500\n zs:flex zs:flex-wrap zs:justify-start zs:items-center zs:gap-2\"\n role=\"group\"\n aria-label=\"Authentication (mobile)\"\n >\n <ZS-button\n [btnStyle]=\"authButtons().login?.btnStyle ?? 'secondary'\"\n [variant]=\"authButtons().login?.variant ?? 'outline'\"\n [size]=\"authButtons().login?.size ?? 'md'\"\n [icon]=\"authButtons().login?.icon ?? ''\"\n (clickedEv)=\"onLogin(); isMobileMenuOpen.set(false)\"\n >\n Login\n </ZS-button>\n\n <ZS-button\n [btnStyle]=\"authButtons().signup?.btnStyle ?? 'primary'\"\n [variant]=\"authButtons().signup?.variant ?? 'solid'\"\n [size]=\"authButtons().signup?.size ?? 'md'\"\n [icon]=\"authButtons().signup?.icon ?? ''\"\n (clickedEv)=\"onSignup(); isMobileMenuOpen.set(false)\"\n >\n Sign Up\n </ZS-button>\n </div>\n }\n </div>\n </div>\n }\n</nav>\n\n<!-- ========================= Spacer for Fixed Navbar ========================= -->\n@if (fixed()) {\n <div class=\"zs:h-16\" aria-hidden=\"true\"></div>\n}\n\n<!-- ========================= Overlay for Menu Closing ========================= -->\n@if (isMobileMenuOpen()) {\n <div\n class=\"zs:fixed zs:inset-0 zs:bg-gray-700 zs:dark:bg-black zs:z-700\"\n (click)=\"closeAllMenus()\"\n aria-hidden=\"true\"\n ></div>\n}\n", styles: [":host{display:block}body{font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif}a,button{transition:all .2s ease-in-out}img{object-fit:cover}.shadow-lg{box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d}@media (max-width: 768px){.rtl\\:space-x-reverse{margin-right:0;margin-left:.75rem}}\n"] }]
|
|
1632
|
+
args: [{ selector: 'ZS-navbar', imports: [RouterModule, CommonModule, NavItem, Button], template: "<!-- ========================= Fixed Navbar Container ========================= -->\n\n<nav\n class=\"zs:bg-white zs:dark:bg-[#18202F] zs:top-0 zs:left-0 zs:right-0 {{ zIndices.navbar }} zs:shadow-md zs:dark:shadow-gray-400/30 zs:transition-colors\"\n [ngClass]=\"fixed() ? 'zs:fixed' : 'zs:relative'\"\n role=\"navigation\"\n aria-label=\"Main Navigation\"\n>\n <div class=\"zs:max-w-7xl zs:mx-auto zs:px-4 zs:sm:px-6 zs:lg:px-8\">\n <div class=\"zs:flex zs:justify-between zs:h-16 zs:gap-4\">\n\n <!-- ========================= Logo & Site Name ========================= -->\n <div class=\"zs:flex zs:items-center\">\n @if (logoUrl() || siteNameConfig()) {\n <a\n [routerLink]=\"[siteNameConfig()?.routerLink ?? '/']\"\n class=\"zs:shrink-0 zs:flex zs:items-center zs:gap-2 zs:focus:outline-hidden zs:focus-visible:ring-2 zs:focus-visible:ring-blue-500\"\n aria-label=\"Homepage\"\n >\n @if (logoUrl()) {\n <img\n [src]=\"logoUrl()\"\n alt=\"{{ siteNameConfig()?.siteName ?? 'Site Logo' }}\"\n class=\"zs:h-9 zs:w-auto\"\n />\n }\n @if (siteNameConfig()) {\n <span\n [class]=\"siteNameConfig()?.siteNameColorClass ?? 'zs:text-gray-800 zs:dark:text-gray-100 zs:transition-colors'\"\n class=\"zs:font-bold zs:text-xl\"\n >\n {{ siteNameConfig()?.siteName }}\n </span>\n }\n </a>\n }\n </div>\n\n <!-- ========================= Desktop Navigation ========================= -->\n <div class=\"zs:hidden zs:lg:flex zs:items-center zs:gap-4\" role=\"menubar\">\n @for (item of visibleNavItems(); track $index) {\n <ZS-nav-item\n [item]=\"item\"\n [collectionName]=\"'navItems'\"\n (anyItemClickedEv)=\"itemClicked($event)\"\n role=\"menuitem\"\n />\n }\n\n @if (moreNavItems().length > 0) {\n <div class=\"zs:relative\" role=\"none\">\n <button\n (click)=\"isMoreOpen.set(!isMoreOpen())\"\n [attr.aria-expanded]=\"isMoreOpen()\"\n aria-haspopup=\"true\"\n aria-controls=\"more-menu\"\n class=\"zs:px-3 zs:py-2 zs:text-sm zs:font-bold zs:text-blue-600 zs:dark:text-blue-400\n zs:hover:text-blue-700 zs:dark:hover:text-blue-300 zs:focus:outline-hidden \n zs:focus-visible:ring-2 zs:focus-visible:ring-blue-500 zs:transition-colors\"\n >\n More\n <i class=\"fas fa-chevron-down zs:ml-1 zs:text-xs zs:text-gray-500 zs:dark:text-gray-400 zs:transition-colors\"></i>\n </button>\n <div\n id=\"more-menu\"\n [ngClass]=\"{ 'zs:block': isMoreOpen(), 'zs:hidden': !isMoreOpen() }\"\n class=\"zs:absolute zs:bg-white zs:dark:bg-[#18202F] shadow-md-all \n shadow-md-all-night zs:rounded-md zs:mt-1 zs:py-1 zs:min-w-48 zs:z-200 \n zs:transition-colors\"\n role=\"menu\"\n >\n @for (item of moreNavItems(); track $index) {\n <ZS-nav-item\n [item]=\"item\"\n [collectionName]=\"'navItems'\"\n (anyItemClickedEv)=\"itemClicked($event)\"\n role=\"menuitem\"\n />\n }\n </div>\n </div>\n }\n </div>\n\n <!-- ========================= Right Controls ========================= -->\n <div class=\"zs:flex zs:items-center zs:gap-3\">\n\n <!-- Search Bar (Desktop) -->\n @if (showSearchBar()) {\n <div class=\"zs:hidden zs:lg:block\" role=\"search\">\n <div class=\"zs:relative\">\n <label for=\"desktop-search\" class=\"sr-only\">Search</label>\n <input\n id=\"desktop-search\"\n type=\"text\"\n [value]=\"searchValue()\"\n (input)=\"searchValue.set($any($event.target).value)\"\n (keyup.enter)=\"onSearchSubmit()\"\n [placeholder]=\"searchPlaceholder()\"\n class=\"zs:bg-gray-100 zs:dark:bg-gray-700 zs:text-gray-800 zs:dark:text-gray-200 zs:rounded-full zs:py-2 zs:px-4 zs:w-64\n zs:transition-all zs:duration-200 zs:focus:outline-hidden zs:focus:ring-2 zs:focus:ring-blue-500\n zs:focus:bg-white zs:dark:focus:bg-gray-600 zs:shadow-sm zs:dark:shadow-gray-500/40\n zs:hover:shadow-md zs:dark:hover:shadow-gray-500/50\"\n />\n <button\n (click)=\"onSearchSubmit()\"\n class=\"zs:absolute zs:py-1 zs:px-2 zs:right-2 zs:top-1/2 zs:-translate-y-1/2 zs:text-gray-500 zs:dark:text-gray-400\n zs:hover:text-gray-700 zs:dark:hover:text-gray-300 zs:transition-colors zs:duration-200\"\n aria-label=\"Submit search\"\n >\n <i class=\"fas fa-search\"></i>\n </button>\n </div>\n </div>\n }\n\n <!-- User Profile Dropdown -->\n @if (isLoggedIn() && userProfile() && showUserSection()) {\n <div class=\"zs:relative\">\n <button\n (click)=\"toggleUserMenu()\"\n class=\"zs:flex zs:items-center zs:gap-2 zs:focus:outline-hidden zs:focus-visible:ring-2 zs:focus-visible:ring-blue-500\"\n aria-haspopup=\"true\"\n [attr.aria-expanded]=\"isUserMenuOpen()\"\n aria-controls=\"user-menu\"\n aria-label=\"User menu\"\n >\n @if (userProfile()?.imageUrl) {\n <img\n [src]=\"userProfile()?.imageUrl\"\n alt=\"{{ userProfile()?.name ?? 'User profile image' }}\"\n class=\"zs:size-9 zs:rounded-full zs:object-cover\"\n />\n } @else {\n <div\n class=\"zs:size-9 zs:rounded-full zs:bg-blue-500 zs:flex zs:items-center zs:justify-center zs:text-white zs:font-semibold\"\n aria-hidden=\"true\"\n >\n {{ userProfile()?.name?.charAt(0)?.toUpperCase() }}\n </div>\n }\n <i class=\"fas fa-chevron-down zs:text-xs zs:text-gray-600 zs:dark:text-gray-400\n zs:hover:text-gray-700 zs:dark:hover:text-gray-300 zs:transition-colors\"></i>\n </button>\n\n @if (isUserMenuOpen() && userMenuItems().length > 0) {\n <div\n id=\"user-menu\"\n class=\"zs:absolute zs:right-0 zs:mt-2.5 zs:min-w-56 zs:bg-white zs:dark:bg-gray-800 zs:rounded-md\n shadow-md-all shadow-md-all-night zs:pt-2 zs:z-400 zs:transition-colors\"\n role=\"menu\"\n >\n <!-- User Info Section -->\n <div class=\"zs:px-4 zs:py-2 zs:border-b zs:border-gray-200 zs:dark:border-gray-700 zs:transition-colors\">\n @if (userProfile()?.name) {\n <div class=\"zs:font-semibold zs:text-gray-900 zs:dark:text-gray-100 zs:transition-colors\">\n {{ userProfile()?.name }}\n </div>\n }\n @if (userProfile()?.username) {\n <div class=\"zs:text-sm zs:text-gray-600 zs:dark:text-gray-400 zs:transition-colors\">\n @{{ userProfile()?.username }}\n </div>\n }\n @if (userProfile()?.email) {\n <div class=\"zs:text-sm zs:text-gray-500 zs:dark:text-gray-400 zs:transition-colors\">\n {{ userProfile()?.email }}\n </div>\n }\n </div>\n\n <!-- Menu Items -->\n @if (userMenuItems().length > 0) {\n <div class=\"zs:py-1\">\n @for (item of getUserMenuItems(); track $index) {\n <ZS-nav-item\n [item]=\"item\"\n [collectionName]=\"'MenuItems'\"\n (anyItemClickedEv)=\"itemClicked($event)\"\n role=\"menuitem\"\n />\n }\n </div>\n }\n </div>\n }\n </div>\n }\n\n <!-- Auth Buttons -->\n @else if (authButtons().showAuthButtons && !isLoggedIn()) {\n <div class=\"zs:hidden zs:lg:flex zs:items-center zs:gap-3\" role=\"group\" aria-label=\"Authentication\">\n <ZS-button\n [btnStyle]=\"authButtons().login?.btnStyle ?? 'secondary'\"\n [variant]=\"authButtons().login?.variant ?? 'outline'\"\n [size]=\"authButtons().login?.size ?? 'md'\"\n [icon]=\"authButtons().login?.icon ?? ''\"\n (clickedEv)=\"onLogin()\"\n >\n Login\n </ZS-button>\n\n <ZS-button\n [btnStyle]=\"authButtons().signup?.btnStyle ?? 'primary'\"\n [variant]=\"authButtons().signup?.variant ?? 'solid'\"\n [size]=\"authButtons().signup?.size ?? 'md'\"\n [icon]=\"authButtons().signup?.icon ?? ''\"\n (clickedEv)=\"onSignup()\"\n >\n Sign Up\n </ZS-button>\n </div>\n }\n\n <!-- Mobile Menu Toggle -->\n @if(mobileNavItems().length || showSearchBar() || (authButtons().showAuthButtons && !isLoggedIn())) {\n <div class=\"zs:lg:hidden\">\n <button\n (click)=\"toggleMobileMenu()\"\n class=\"zs:p-2 zs:rounded-md zs:text-gray-600 zs:dark:text-gray-300\n zs:hover:text-gray-900 zs:dark:hover:text-gray-100\n zs:focus:outline-hidden zs:focus:ring-2 zs:focus:ring-inset\n zs:focus:ring-gray-200 zs:dark:focus:ring-gray-700 zs:transition-colors\"\n aria-controls=\"mobile-menu\"\n aria-expanded=\"{{ isMobileMenuOpen() }}\"\n aria-label=\"Toggle mobile menu\"\n >\n <i class=\"fas fa-bars zs:px-1\"></i>\n </button>\n </div>\n }\n </div>\n </div>\n </div>\n\n <!-- ========================= Mobile Menu ========================= -->\n @if (isMobileMenuOpen()) {\n <div\n id=\"mobile-menu\"\n class=\"zs:lg:hidden zs:bg-white zs:dark:bg-[#18202F] zs:transition-colors\n zs:[box-shadow:0_8px_0_0_#364153] zs:dark:[box-shadow:0_8px_0_0_black]\"\n role=\"menu\"\n aria-label=\"Mobile navigation\"\n >\n <div class=\"zs:px-2 zs:pt-2 zs:pb-3 zs:flex zs:flex-col zs:gap-1 zs:sm:px-3\">\n\n <!-- Navigation Items -->\n <div class=\"zs:max-h-96 zs:overflow-y-auto\">\n @for (item of mobileNavItems(); track $index) {\n <ZS-nav-item\n [item]=\"item\"\n [collectionName]=\"'navItems'\"\n (anyItemClickedEv)=\"itemClicked($event)\"\n role=\"menuitem\"\n />\n }\n </div>\n\n <!-- Search Bar (Mobile) -->\n @if (showSearchBar()) {\n <div class=\"zs:px-3 zs:py-2\" role=\"search\">\n <label for=\"mobile-search\" class=\"sr-only\">Search</label>\n <div class=\"zs:relative\">\n <input\n id=\"mobile-search\"\n type=\"text\"\n [value]=\"searchValue()\"\n (input)=\"searchValue.set($any($event.target).value)\"\n (keyup.enter)=\"onSearchSubmit()\"\n [placeholder]=\"searchPlaceholder()\"\n class=\"zs:w-full zs:bg-gray-100 zs:dark:bg-gray-700 zs:text-gray-800 zs:dark:text-gray-200\n zs:rounded-full zs:py-2 zs:px-4 zs:transition-all zs:duration-200 zs:focus:outline-hidden\n zs:focus:ring-2 zs:focus:ring-blue-500 zs:focus:bg-white zs:dark:focus:bg-gray-600\n zs:shadow-sm zs:dark:shadow-gray-500/40 zs:hover:shadow-md zs:dark:hover:shadow-gray-500/50\"\n />\n <button\n (click)=\"onSearchSubmit()\"\n class=\"zs:absolute zs:py-1 zs:px-2 zs:right-2 zs:top-1/2 zs:-translate-y-1/2 zs:text-gray-500 zs:dark:text-gray-400\n zs:hover:text-gray-700 zs:dark:hover:text-gray-300 zs:transition-colors zs:duration-200\"\n aria-label=\"Submit search\"\n >\n <i class=\"fas fa-search\"></i>\n </button>\n </div>\n </div>\n }\n\n <!-- Auth Buttons (Mobile) -->\n @if (authButtons().showAuthButtons && !isLoggedIn()) {\n <div\n class=\"zs:pt-3 zs:pb-4 zs:border-t zs:border-gray-300 zs:dark:border-gray-500\n zs:flex zs:flex-wrap zs:justify-start zs:items-center zs:gap-2 zs:transition-colors\"\n role=\"group\"\n aria-label=\"Authentication (mobile)\"\n >\n <ZS-button\n [btnStyle]=\"authButtons().login?.btnStyle ?? 'secondary'\"\n [variant]=\"authButtons().login?.variant ?? 'outline'\"\n [size]=\"authButtons().login?.size ?? 'md'\"\n [icon]=\"authButtons().login?.icon ?? ''\"\n (clickedEv)=\"onLogin(); isMobileMenuOpen.set(false)\"\n >\n Login\n </ZS-button>\n\n <ZS-button\n [btnStyle]=\"authButtons().signup?.btnStyle ?? 'primary'\"\n [variant]=\"authButtons().signup?.variant ?? 'solid'\"\n [size]=\"authButtons().signup?.size ?? 'md'\"\n [icon]=\"authButtons().signup?.icon ?? ''\"\n (clickedEv)=\"onSignup(); isMobileMenuOpen.set(false)\"\n >\n Sign Up\n </ZS-button>\n </div>\n }\n </div>\n </div>\n }\n</nav>\n\n<!-- ========================= Spacer for Fixed Navbar ========================= -->\n@if (fixed()) {\n <div class=\"zs:h-16\" aria-hidden=\"true\"></div>\n}\n\n<!-- ========================= Overlay for Menu Closing ========================= -->\n@if (isMobileMenuOpen()) {\n <div\n class=\"zs:fixed zs:inset-0 zs:bg-gray-700 zs:dark:bg-black {{ zIndices.navbarOverlay }} zs:transition-colors\"\n (click)=\"closeAllMenus()\"\n aria-hidden=\"true\"\n ></div>\n}\n", styles: [":host{display:block}body{font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif}a,button{transition:all .2s ease-in-out}img{object-fit:cover}.shadow-lg{box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d}@media (max-width: 768px){.rtl\\:space-x-reverse{margin-right:0;margin-left:.75rem}}\n"] }]
|
|
1632
1633
|
}], propDecorators: { fixed: [{ type: i0.Input, args: [{ isSignal: true, alias: "fixed", required: false }] }], logoUrl: [{ type: i0.Input, args: [{ isSignal: true, alias: "logoUrl", required: false }] }], siteNameConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "siteNameConfig", required: false }] }], authButtons: [{ type: i0.Input, args: [{ isSignal: true, alias: "authButtons", required: false }] }], showUserSection: [{ type: i0.Input, args: [{ isSignal: true, alias: "showUserSection", required: false }] }], showSearchBar: [{ type: i0.Input, args: [{ isSignal: true, alias: "showSearchBar", required: false }] }], navItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "navItems", required: false }] }], isLoggedIn: [{ type: i0.Input, args: [{ isSignal: true, alias: "isLoggedIn", required: false }] }], userProfile: [{ type: i0.Input, args: [{ isSignal: true, alias: "userProfile", required: false }] }], userMenuItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "userMenuItems", required: false }] }], searchPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchPlaceholder", required: false }] }], loginClickedEv: [{ type: i0.Output, args: ["loginClickedEv"] }], signupClickedEv: [{ type: i0.Output, args: ["signupClickedEv"] }], searchSubmittedEv: [{ type: i0.Output, args: ["searchSubmittedEv"] }], anyItemClickedEv: [{ type: i0.Output, args: ["anyItemClickedEv"] }], searchValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchValue", required: false }] }, { type: i0.Output, args: ["searchValueChange"] }], isMobileMenuOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "isMobileMenuOpen", required: false }] }, { type: i0.Output, args: ["isMobileMenuOpenChange"] }] } });
|
|
1633
1634
|
|
|
1634
1635
|
class Page404 {
|
|
@@ -1664,11 +1665,11 @@ class Page404 {
|
|
|
1664
1665
|
// ========================================================================
|
|
1665
1666
|
onAction = output();
|
|
1666
1667
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: Page404, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1667
|
-
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 }, icon: { classPropertyName: "icon", publicName: "icon", 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:transition-colors zs:duration-500 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 <i class=\"fa-solid\" [class]=\"icon()\"></i>\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 zs:transition-all zs:duration-300 zs:ease-out \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"] }] });
|
|
1668
|
+
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 }, icon: { classPropertyName: "icon", publicName: "icon", 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:transition-colors zs:duration-500 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 <i class=\"fa-solid\" [class]=\"icon()\"></i>\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 zs:transition-colors\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 zs:transition-colors\">\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 zs:transition-colors\">\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 zs:transition-all zs:duration-300 zs:ease-out \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"] }] });
|
|
1668
1669
|
}
|
|
1669
1670
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: Page404, decorators: [{
|
|
1670
1671
|
type: Component,
|
|
1671
|
-
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:transition-colors zs:duration-500 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 <i class=\"fa-solid\" [class]=\"icon()\"></i>\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 zs:transition-all zs:duration-300 zs:ease-out \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"] }]
|
|
1672
|
+
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:transition-colors zs:duration-500 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 <i class=\"fa-solid\" [class]=\"icon()\"></i>\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 zs:transition-colors\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 zs:transition-colors\">\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 zs:transition-colors\">\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 zs:transition-all zs:duration-300 zs:ease-out \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"] }]
|
|
1672
1673
|
}], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], message: [{ type: i0.Input, args: [{ isSignal: true, alias: "message", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", 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"] }] } });
|
|
1673
1674
|
|
|
1674
1675
|
// ========================================================================
|
|
@@ -1739,11 +1740,11 @@ class Pagination {
|
|
|
1739
1740
|
this.goToPage(this.currentPage() - 1);
|
|
1740
1741
|
}
|
|
1741
1742
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: Pagination, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1742
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: Pagination, isStandalone: true, selector: "ZS-pagination", inputs: { totalPages: { classPropertyName: "totalPages", publicName: "totalPages", isSignal: true, isRequired: true, transformFunction: null }, currentPage: { classPropertyName: "currentPage", publicName: "currentPage", isSignal: true, isRequired: true, transformFunction: null }, showTotalItems: { classPropertyName: "showTotalItems", publicName: "showTotalItems", isSignal: true, isRequired: false, transformFunction: null }, totalItemsMessage: { classPropertyName: "totalItemsMessage", publicName: "totalItemsMessage", isSignal: true, isRequired: false, transformFunction: null }, totalItems: { classPropertyName: "totalItems", publicName: "totalItems", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { pageChangeEv: "pageChangeEv" }, ngImport: i0, template: "<!-- ========================= Top Spacing ========================= -->\n<div class=\"zs:mt-6\"></div>\n\n<!-- ========================= Total Items Count ========================= -->\n@if (showTotalItems()) {\n <div\n class=\"zs:text-center zs:text-sm zs:text-gray-500 zs:dark:text-gray-300 zs:mb-2\"\n role=\"status\"\n aria-live=\"polite\"\n >\n {{ totalItemsMessage() }} {{ totalItems() }}\n </div>\n}\n\n<!-- ========================= Pagination Navigation ========================= -->\n<nav\n class=\"zs:flex zs:flex-wrap zs:justify-center zs:items-center zs:gap-1\"\n role=\"navigation\"\n aria-label=\"Pagination\"\n>\n <!-- ========================= Previous Button ========================= -->\n <button\n type=\"button\"\n class=\"zs:flex zs:items-center zs:justify-center zs:size-9 zs:sm:size-10 \n zs:rounded-lg zs:border zs:border-gray-300 zs:dark:border-gray-600 zs:hover:bg-blue-100 \n zs:dark:hover:bg-blue-700 zs:disabled:opacity-50 zs:disabled:cursor-not-allowed zs:transition-all \n zs:duration-200\"\n (click)=\"prevPage()\"\n [disabled]=\"currentPage() === 1\"\n [attr.aria-disabled]=\"currentPage() === 1\"\n aria-label=\"Go to previous page\"\n >\n <i class=\"fas fa-chevron-left zs:text-gray-600 zs:dark:text-gray-200\" aria-hidden=\"true\"></i>\n <span class=\"sr-only\">Previous</span>\n </button>\n\n <!-- ========================= Page Numbers ========================= -->\n @for (page of pages(); track page) {\n <button\n type=\"button\"\n (click)=\"goToPage(page)\"\n class=\"zs:flex zs:items-center zs:justify-center zs:size-9 zs:sm:size-10 zs:rounded-lg \n zs:border zs:border-gray-300 zs:dark:border-gray-600 zs:hover:bg-blue-100 zs:dark:hover:bg-blue-700 \n zs:transition-all zs:duration-200\"\n [ngClass]=\"{\n 'zs:bg-blue-500 zs:text-white zs:dark:bg-blue-400 zs:dark:text-black': page === currentPage()\n }\"\n [attr.aria-current]=\"page === currentPage() ? 'page' : null\"\n [attr.aria-label]=\"'Go to page ' + page\"\n >\n {{ page }}\n </button>\n }\n\n <!-- ========================= Next Button ========================= -->\n <button\n type=\"button\"\n class=\"zs:flex zs:items-center zs:justify-center zs:size-9 zs:sm:size-10 zs:rounded-lg zs:border \n zs:border-gray-300 zs:dark:border-gray-600 zs:hover:bg-blue-100 zs:dark:hover:bg-blue-700 \n zs:disabled:opacity-50 zs:disabled:cursor-not-allowed zs:transition-all zs:duration-200\"\n (click)=\"nextPage()\"\n [disabled]=\"currentPage() === totalPages()\"\n [attr.aria-disabled]=\"currentPage() === totalPages()\"\n aria-label=\"Go to next page\"\n >\n <i class=\"fas fa-chevron-right zs:text-gray-600 zs:dark:text-gray-200\" aria-hidden=\"true\"></i>\n <span class=\"sr-only\">Next</span>\n </button>\n</nav>", styles: [":host{display:block}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
|
|
1743
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: Pagination, isStandalone: true, selector: "ZS-pagination", inputs: { totalPages: { classPropertyName: "totalPages", publicName: "totalPages", isSignal: true, isRequired: true, transformFunction: null }, currentPage: { classPropertyName: "currentPage", publicName: "currentPage", isSignal: true, isRequired: true, transformFunction: null }, showTotalItems: { classPropertyName: "showTotalItems", publicName: "showTotalItems", isSignal: true, isRequired: false, transformFunction: null }, totalItemsMessage: { classPropertyName: "totalItemsMessage", publicName: "totalItemsMessage", isSignal: true, isRequired: false, transformFunction: null }, totalItems: { classPropertyName: "totalItems", publicName: "totalItems", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { pageChangeEv: "pageChangeEv" }, ngImport: i0, template: "<!-- ========================= Top Spacing ========================= -->\n<div class=\"zs:mt-6\"></div>\n\n<!-- ========================= Total Items Count ========================= -->\n@if (showTotalItems()) {\n <div\n class=\"zs:text-center zs:text-sm zs:text-gray-500 zs:dark:text-gray-300 zs:mb-2 zs:transition-colors\"\n role=\"status\"\n aria-live=\"polite\"\n >\n {{ totalItemsMessage() }} {{ totalItems() }}\n </div>\n}\n\n<!-- ========================= Pagination Navigation ========================= -->\n<nav\n class=\"zs:flex zs:flex-wrap zs:justify-center zs:items-center zs:gap-1\"\n role=\"navigation\"\n aria-label=\"Pagination\"\n>\n <!-- ========================= Previous Button ========================= -->\n <button\n type=\"button\"\n class=\"zs:flex zs:items-center zs:justify-center zs:size-9 zs:sm:size-10 \n zs:rounded-lg zs:border zs:border-gray-300 zs:dark:border-gray-600 zs:hover:bg-blue-100 \n zs:dark:hover:bg-blue-700 zs:disabled:opacity-50 zs:disabled:cursor-not-allowed zs:transition-all \n zs:duration-200\"\n (click)=\"prevPage()\"\n [disabled]=\"currentPage() === 1\"\n [attr.aria-disabled]=\"currentPage() === 1\"\n aria-label=\"Go to previous page\"\n >\n <i class=\"fas fa-chevron-left zs:text-gray-600 zs:dark:text-gray-200 zs:transition-colors\" aria-hidden=\"true\"></i>\n <span class=\"sr-only\">Previous</span>\n </button>\n\n <!-- ========================= Page Numbers ========================= -->\n @for (page of pages(); track page) {\n <button\n type=\"button\"\n (click)=\"goToPage(page)\"\n class=\"zs:flex zs:items-center zs:justify-center zs:size-9 zs:sm:size-10 zs:rounded-lg \n zs:border zs:border-gray-300 zs:dark:border-gray-600 zs:hover:bg-blue-100 zs:dark:hover:bg-blue-700 \n zs:transition-all zs:duration-200\"\n [ngClass]=\"{\n 'zs:bg-blue-500 zs:text-white zs:dark:bg-blue-400 zs:dark:text-black': page === currentPage()\n }\"\n [attr.aria-current]=\"page === currentPage() ? 'page' : null\"\n [attr.aria-label]=\"'Go to page ' + page\"\n >\n {{ page }}\n </button>\n }\n\n <!-- ========================= Next Button ========================= -->\n <button\n type=\"button\"\n class=\"zs:flex zs:items-center zs:justify-center zs:size-9 zs:sm:size-10 zs:rounded-lg zs:border \n zs:border-gray-300 zs:dark:border-gray-600 zs:hover:bg-blue-100 zs:dark:hover:bg-blue-700 \n zs:disabled:opacity-50 zs:disabled:cursor-not-allowed zs:transition-all zs:duration-200\"\n (click)=\"nextPage()\"\n [disabled]=\"currentPage() === totalPages()\"\n [attr.aria-disabled]=\"currentPage() === totalPages()\"\n aria-label=\"Go to next page\"\n >\n <i class=\"fas fa-chevron-right zs:text-gray-600 zs:dark:text-gray-200 zs:transition-colors\" aria-hidden=\"true\"></i>\n <span class=\"sr-only\">Next</span>\n </button>\n</nav>", styles: [":host{display:block}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
|
|
1743
1744
|
}
|
|
1744
1745
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: Pagination, decorators: [{
|
|
1745
1746
|
type: Component,
|
|
1746
|
-
args: [{ selector: 'ZS-pagination', imports: [CommonModule], template: "<!-- ========================= Top Spacing ========================= -->\n<div class=\"zs:mt-6\"></div>\n\n<!-- ========================= Total Items Count ========================= -->\n@if (showTotalItems()) {\n <div\n class=\"zs:text-center zs:text-sm zs:text-gray-500 zs:dark:text-gray-300 zs:mb-2\"\n role=\"status\"\n aria-live=\"polite\"\n >\n {{ totalItemsMessage() }} {{ totalItems() }}\n </div>\n}\n\n<!-- ========================= Pagination Navigation ========================= -->\n<nav\n class=\"zs:flex zs:flex-wrap zs:justify-center zs:items-center zs:gap-1\"\n role=\"navigation\"\n aria-label=\"Pagination\"\n>\n <!-- ========================= Previous Button ========================= -->\n <button\n type=\"button\"\n class=\"zs:flex zs:items-center zs:justify-center zs:size-9 zs:sm:size-10 \n zs:rounded-lg zs:border zs:border-gray-300 zs:dark:border-gray-600 zs:hover:bg-blue-100 \n zs:dark:hover:bg-blue-700 zs:disabled:opacity-50 zs:disabled:cursor-not-allowed zs:transition-all \n zs:duration-200\"\n (click)=\"prevPage()\"\n [disabled]=\"currentPage() === 1\"\n [attr.aria-disabled]=\"currentPage() === 1\"\n aria-label=\"Go to previous page\"\n >\n <i class=\"fas fa-chevron-left zs:text-gray-600 zs:dark:text-gray-200\" aria-hidden=\"true\"></i>\n <span class=\"sr-only\">Previous</span>\n </button>\n\n <!-- ========================= Page Numbers ========================= -->\n @for (page of pages(); track page) {\n <button\n type=\"button\"\n (click)=\"goToPage(page)\"\n class=\"zs:flex zs:items-center zs:justify-center zs:size-9 zs:sm:size-10 zs:rounded-lg \n zs:border zs:border-gray-300 zs:dark:border-gray-600 zs:hover:bg-blue-100 zs:dark:hover:bg-blue-700 \n zs:transition-all zs:duration-200\"\n [ngClass]=\"{\n 'zs:bg-blue-500 zs:text-white zs:dark:bg-blue-400 zs:dark:text-black': page === currentPage()\n }\"\n [attr.aria-current]=\"page === currentPage() ? 'page' : null\"\n [attr.aria-label]=\"'Go to page ' + page\"\n >\n {{ page }}\n </button>\n }\n\n <!-- ========================= Next Button ========================= -->\n <button\n type=\"button\"\n class=\"zs:flex zs:items-center zs:justify-center zs:size-9 zs:sm:size-10 zs:rounded-lg zs:border \n zs:border-gray-300 zs:dark:border-gray-600 zs:hover:bg-blue-100 zs:dark:hover:bg-blue-700 \n zs:disabled:opacity-50 zs:disabled:cursor-not-allowed zs:transition-all zs:duration-200\"\n (click)=\"nextPage()\"\n [disabled]=\"currentPage() === totalPages()\"\n [attr.aria-disabled]=\"currentPage() === totalPages()\"\n aria-label=\"Go to next page\"\n >\n <i class=\"fas fa-chevron-right zs:text-gray-600 zs:dark:text-gray-200\" aria-hidden=\"true\"></i>\n <span class=\"sr-only\">Next</span>\n </button>\n</nav>", styles: [":host{display:block}\n"] }]
|
|
1747
|
+
args: [{ selector: 'ZS-pagination', imports: [CommonModule], template: "<!-- ========================= Top Spacing ========================= -->\n<div class=\"zs:mt-6\"></div>\n\n<!-- ========================= Total Items Count ========================= -->\n@if (showTotalItems()) {\n <div\n class=\"zs:text-center zs:text-sm zs:text-gray-500 zs:dark:text-gray-300 zs:mb-2 zs:transition-colors\"\n role=\"status\"\n aria-live=\"polite\"\n >\n {{ totalItemsMessage() }} {{ totalItems() }}\n </div>\n}\n\n<!-- ========================= Pagination Navigation ========================= -->\n<nav\n class=\"zs:flex zs:flex-wrap zs:justify-center zs:items-center zs:gap-1\"\n role=\"navigation\"\n aria-label=\"Pagination\"\n>\n <!-- ========================= Previous Button ========================= -->\n <button\n type=\"button\"\n class=\"zs:flex zs:items-center zs:justify-center zs:size-9 zs:sm:size-10 \n zs:rounded-lg zs:border zs:border-gray-300 zs:dark:border-gray-600 zs:hover:bg-blue-100 \n zs:dark:hover:bg-blue-700 zs:disabled:opacity-50 zs:disabled:cursor-not-allowed zs:transition-all \n zs:duration-200\"\n (click)=\"prevPage()\"\n [disabled]=\"currentPage() === 1\"\n [attr.aria-disabled]=\"currentPage() === 1\"\n aria-label=\"Go to previous page\"\n >\n <i class=\"fas fa-chevron-left zs:text-gray-600 zs:dark:text-gray-200 zs:transition-colors\" aria-hidden=\"true\"></i>\n <span class=\"sr-only\">Previous</span>\n </button>\n\n <!-- ========================= Page Numbers ========================= -->\n @for (page of pages(); track page) {\n <button\n type=\"button\"\n (click)=\"goToPage(page)\"\n class=\"zs:flex zs:items-center zs:justify-center zs:size-9 zs:sm:size-10 zs:rounded-lg \n zs:border zs:border-gray-300 zs:dark:border-gray-600 zs:hover:bg-blue-100 zs:dark:hover:bg-blue-700 \n zs:transition-all zs:duration-200\"\n [ngClass]=\"{\n 'zs:bg-blue-500 zs:text-white zs:dark:bg-blue-400 zs:dark:text-black': page === currentPage()\n }\"\n [attr.aria-current]=\"page === currentPage() ? 'page' : null\"\n [attr.aria-label]=\"'Go to page ' + page\"\n >\n {{ page }}\n </button>\n }\n\n <!-- ========================= Next Button ========================= -->\n <button\n type=\"button\"\n class=\"zs:flex zs:items-center zs:justify-center zs:size-9 zs:sm:size-10 zs:rounded-lg zs:border \n zs:border-gray-300 zs:dark:border-gray-600 zs:hover:bg-blue-100 zs:dark:hover:bg-blue-700 \n zs:disabled:opacity-50 zs:disabled:cursor-not-allowed zs:transition-all zs:duration-200\"\n (click)=\"nextPage()\"\n [disabled]=\"currentPage() === totalPages()\"\n [attr.aria-disabled]=\"currentPage() === totalPages()\"\n aria-label=\"Go to next page\"\n >\n <i class=\"fas fa-chevron-right zs:text-gray-600 zs:dark:text-gray-200 zs:transition-colors\" aria-hidden=\"true\"></i>\n <span class=\"sr-only\">Next</span>\n </button>\n</nav>", styles: [":host{display:block}\n"] }]
|
|
1747
1748
|
}], propDecorators: { totalPages: [{ type: i0.Input, args: [{ isSignal: true, alias: "totalPages", required: true }] }], currentPage: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentPage", required: true }] }], showTotalItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "showTotalItems", required: false }] }], totalItemsMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "totalItemsMessage", required: false }] }], totalItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "totalItems", required: false }] }], pageChangeEv: [{ type: i0.Output, args: ["pageChangeEv"] }] } });
|
|
1748
1749
|
|
|
1749
1750
|
// ========================================================================
|
|
@@ -1765,7 +1766,7 @@ class ScrollToTop {
|
|
|
1765
1766
|
/**
|
|
1766
1767
|
* Tailwind CSS class for the circle's color (background ring).
|
|
1767
1768
|
*/
|
|
1768
|
-
circleColorClass = input('zs:text-gray-400/60 zs:dark:text-gray-600/70 zs:group-hover:brightness-110', ...(ngDevMode ? [{ debugName: "circleColorClass" }] : []));
|
|
1769
|
+
circleColorClass = input('zs:text-gray-400/60 zs:dark:text-gray-600/70 zs:group-hover:brightness-110 zs:transition-colors', ...(ngDevMode ? [{ debugName: "circleColorClass" }] : []));
|
|
1769
1770
|
/**
|
|
1770
1771
|
* BaseColors class for the arrow and progress indicator color.
|
|
1771
1772
|
*/
|
|
@@ -1902,11 +1903,11 @@ class Spinner {
|
|
|
1902
1903
|
borderColor = computed(() => ColorMapping.get(this.color())?.border, ...(ngDevMode ? [{ debugName: "borderColor" }] : []));
|
|
1903
1904
|
textColor = computed(() => ColorMapping.get(this.color())?.text, ...(ngDevMode ? [{ debugName: "textColor" }] : []));
|
|
1904
1905
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: Spinner, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1905
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: Spinner, isStandalone: true, selector: "ZS-spinner", inputs: { loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, isFloating: { classPropertyName: "isFloating", publicName: "isFloating", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, withBox: { classPropertyName: "withBox", publicName: "withBox", isSignal: true, isRequired: false, transformFunction: null }, boxColorClass: { classPropertyName: "boxColorClass", publicName: "boxColorClass", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<!-- ========================= Loader Wrapper ========================= -->\n@if(loading()) {\n <div \n [
|
|
1906
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: Spinner, isStandalone: true, selector: "ZS-spinner", inputs: { loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, isFloating: { classPropertyName: "isFloating", publicName: "isFloating", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, withBox: { classPropertyName: "withBox", publicName: "withBox", isSignal: true, isRequired: false, transformFunction: null }, boxColorClass: { classPropertyName: "boxColorClass", publicName: "boxColorClass", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<!-- ========================= Loader Wrapper ========================= -->\n@if(loading()) {\n <div \n [ngClass]=\"[wrapperClasses(), 'zs:transition-colors']\" \n role=\"status\" \n aria-live=\"polite\" \n aria-busy=\"true\"\n >\n <div [ngClass]=\"[boxClasses(), 'zs:transition-colors']\">\n \n @switch (type()) {\n \n <!-- ========================= Spinner ========================= -->\n @case ('spinner') {\n <i \n [ngClass]=\"['fas fa-spinner fa-spin', spinnerSizeTextClass(), textColor()]\" \n aria-hidden=\"true\"\n ></i>\n <span class=\"sr-only\">Loading...</span>\n }\n \n <!-- ========================= Pro Spinner ========================= -->\n @case ('pro') {\n <div \n [ngClass]=\"['zs:animate-spin zs:rounded-full zs:border-solid', spinnerSizeProClass(), borderColor()]\" \n aria-hidden=\"true\"\n ></div>\n <span class=\"sr-only\">Loading...</span>\n }\n \n <!-- ========================= Gear ========================= -->\n @case ('gear') {\n <i \n [ngClass]=\"['fas fa-gear fa-spin', spinnerSizeTextClass(), textColor()]\" \n aria-hidden=\"true\"\n ></i>\n <span class=\"sr-only\">Loading...</span>\n }\n \n <!-- ========================= Fan ========================= -->\n @case ('fan') {\n <i \n [ngClass]=\"['fas fa-fan fa-spin', spinnerSizeTextClass(), textColor()]\" \n aria-hidden=\"true\"\n ></i>\n <span class=\"sr-only\">Loading...</span>\n }\n \n <!-- ========================= Pulse ========================= -->\n @case ('pulse') {\n <div \n [ngClass]=\"[\n 'zs:animate-spin zs:rounded-full zs:border-solid',\n spinnerSizePulseClass(),\n borderColor(),\n 'zs:border-t-transparent!'\n ]\" \n aria-hidden=\"true\"\n ></div>\n <span class=\"sr-only\">Loading...</span>\n }\n \n <!-- ========================= Dots ========================= -->\n @case ('dots') {\n <div class=\"zs:flex zs:gap-2 zs:items-center\" aria-hidden=\"true\">\n <span \n class=\"zs:rounded-full zs:animate-bounce\" \n [ngClass]=\"[bgColor(), spinnerSizeDotsClass()]\" \n style=\"animation-delay: 0s\"\n ></span>\n <span \n class=\"zs:rounded-full zs:animate-bounce\" \n [ngClass]=\"[bgColor(), spinnerSizeDotsClass()]\" \n style=\"animation-delay: 0.2s\"\n ></span>\n <span \n class=\"zs:rounded-full zs:animate-bounce\" \n [ngClass]=\"[bgColor(), spinnerSizeDotsClass()]\" \n style=\"animation-delay: 0.4s\"\n ></span>\n </div>\n <span class=\"sr-only\">Loading...</span>\n }\n \n <!-- ========================= Bars ========================= -->\n @case ('bars') {\n <div class=\"zs:flex zs:gap-1 zs:items-center zs:h-6\" aria-hidden=\"true\">\n <span \n class=\"zs:rounded-sm animate-bar-scale\" \n [ngClass]=\"[bgColor(), spinnerSizeBarsClass(1)]\" \n style=\"animation-delay: 0s\"\n ></span>\n <span \n class=\"zs:rounded-sm animate-bar-scale\" \n [ngClass]=\"[bgColor(), spinnerSizeBarsClass(2)]\" \n style=\"animation-delay: 0.2s\"\n ></span>\n <span \n class=\"zs:rounded-sm animate-bar-scale\" \n [ngClass]=\"[bgColor(), spinnerSizeBarsClass(3)]\" \n style=\"animation-delay: 0.4s\"\n ></span>\n </div>\n <span class=\"sr-only\">Loading...</span>\n }\n \n <!-- ========================= Double Spinner ========================= -->\n @case ('double') {\n <div class=\"zs:relative\" aria-hidden=\"true\">\n <!-- Outer ring -->\n <div \n [ngClass]=\"[\n 'zs:animate-spin zs:rounded-full zs:border-solid',\n spinnerSizeDoubleClass(1),\n borderColor(), \n 'zs:border-t-transparent!'\n ]\"\n ></div>\n <!-- Inner ring (reversed animation) -->\n <div \n [ngClass]=\"[\n 'zs:animate-spin zs:opacity-75 zs:rounded-full zs:border-solid zs:absolute \n zs:top-1/2 zs:left-1/2 zs:-translate-x-1/2 zs:-translate-y-1/2',\n spinnerSizeDoubleClass(2),\n borderColor(), \n 'zs:border-b-transparent!'\n ]\"\n style=\"animation-direction: reverse;\"\n ></div>\n </div>\n <span class=\"sr-only\">Loading...</span>\n }\n }\n </div>\n </div>\n}", styles: ["@keyframes bar-scale{0%,to{transform:scaleY(.4)}50%{transform:scaleY(1)}}.animate-bar-scale{animation:bar-scale .9s ease-in-out infinite}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
|
|
1906
1907
|
}
|
|
1907
1908
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: Spinner, decorators: [{
|
|
1908
1909
|
type: Component,
|
|
1909
|
-
args: [{ selector: 'ZS-spinner', imports: [CommonModule], template: "<!-- ========================= Loader Wrapper ========================= -->\n@if(loading()) {\n <div \n [
|
|
1910
|
+
args: [{ selector: 'ZS-spinner', imports: [CommonModule], template: "<!-- ========================= Loader Wrapper ========================= -->\n@if(loading()) {\n <div \n [ngClass]=\"[wrapperClasses(), 'zs:transition-colors']\" \n role=\"status\" \n aria-live=\"polite\" \n aria-busy=\"true\"\n >\n <div [ngClass]=\"[boxClasses(), 'zs:transition-colors']\">\n \n @switch (type()) {\n \n <!-- ========================= Spinner ========================= -->\n @case ('spinner') {\n <i \n [ngClass]=\"['fas fa-spinner fa-spin', spinnerSizeTextClass(), textColor()]\" \n aria-hidden=\"true\"\n ></i>\n <span class=\"sr-only\">Loading...</span>\n }\n \n <!-- ========================= Pro Spinner ========================= -->\n @case ('pro') {\n <div \n [ngClass]=\"['zs:animate-spin zs:rounded-full zs:border-solid', spinnerSizeProClass(), borderColor()]\" \n aria-hidden=\"true\"\n ></div>\n <span class=\"sr-only\">Loading...</span>\n }\n \n <!-- ========================= Gear ========================= -->\n @case ('gear') {\n <i \n [ngClass]=\"['fas fa-gear fa-spin', spinnerSizeTextClass(), textColor()]\" \n aria-hidden=\"true\"\n ></i>\n <span class=\"sr-only\">Loading...</span>\n }\n \n <!-- ========================= Fan ========================= -->\n @case ('fan') {\n <i \n [ngClass]=\"['fas fa-fan fa-spin', spinnerSizeTextClass(), textColor()]\" \n aria-hidden=\"true\"\n ></i>\n <span class=\"sr-only\">Loading...</span>\n }\n \n <!-- ========================= Pulse ========================= -->\n @case ('pulse') {\n <div \n [ngClass]=\"[\n 'zs:animate-spin zs:rounded-full zs:border-solid',\n spinnerSizePulseClass(),\n borderColor(),\n 'zs:border-t-transparent!'\n ]\" \n aria-hidden=\"true\"\n ></div>\n <span class=\"sr-only\">Loading...</span>\n }\n \n <!-- ========================= Dots ========================= -->\n @case ('dots') {\n <div class=\"zs:flex zs:gap-2 zs:items-center\" aria-hidden=\"true\">\n <span \n class=\"zs:rounded-full zs:animate-bounce\" \n [ngClass]=\"[bgColor(), spinnerSizeDotsClass()]\" \n style=\"animation-delay: 0s\"\n ></span>\n <span \n class=\"zs:rounded-full zs:animate-bounce\" \n [ngClass]=\"[bgColor(), spinnerSizeDotsClass()]\" \n style=\"animation-delay: 0.2s\"\n ></span>\n <span \n class=\"zs:rounded-full zs:animate-bounce\" \n [ngClass]=\"[bgColor(), spinnerSizeDotsClass()]\" \n style=\"animation-delay: 0.4s\"\n ></span>\n </div>\n <span class=\"sr-only\">Loading...</span>\n }\n \n <!-- ========================= Bars ========================= -->\n @case ('bars') {\n <div class=\"zs:flex zs:gap-1 zs:items-center zs:h-6\" aria-hidden=\"true\">\n <span \n class=\"zs:rounded-sm animate-bar-scale\" \n [ngClass]=\"[bgColor(), spinnerSizeBarsClass(1)]\" \n style=\"animation-delay: 0s\"\n ></span>\n <span \n class=\"zs:rounded-sm animate-bar-scale\" \n [ngClass]=\"[bgColor(), spinnerSizeBarsClass(2)]\" \n style=\"animation-delay: 0.2s\"\n ></span>\n <span \n class=\"zs:rounded-sm animate-bar-scale\" \n [ngClass]=\"[bgColor(), spinnerSizeBarsClass(3)]\" \n style=\"animation-delay: 0.4s\"\n ></span>\n </div>\n <span class=\"sr-only\">Loading...</span>\n }\n \n <!-- ========================= Double Spinner ========================= -->\n @case ('double') {\n <div class=\"zs:relative\" aria-hidden=\"true\">\n <!-- Outer ring -->\n <div \n [ngClass]=\"[\n 'zs:animate-spin zs:rounded-full zs:border-solid',\n spinnerSizeDoubleClass(1),\n borderColor(), \n 'zs:border-t-transparent!'\n ]\"\n ></div>\n <!-- Inner ring (reversed animation) -->\n <div \n [ngClass]=\"[\n 'zs:animate-spin zs:opacity-75 zs:rounded-full zs:border-solid zs:absolute \n zs:top-1/2 zs:left-1/2 zs:-translate-x-1/2 zs:-translate-y-1/2',\n spinnerSizeDoubleClass(2),\n borderColor(), \n 'zs:border-b-transparent!'\n ]\"\n style=\"animation-direction: reverse;\"\n ></div>\n </div>\n <span class=\"sr-only\">Loading...</span>\n }\n }\n </div>\n </div>\n}", styles: ["@keyframes bar-scale{0%,to{transform:scaleY(.4)}50%{transform:scaleY(1)}}.animate-bar-scale{animation:bar-scale .9s ease-in-out infinite}\n"] }]
|
|
1910
1911
|
}], propDecorators: { loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], isFloating: [{ type: i0.Input, args: [{ isSignal: true, alias: "isFloating", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], withBox: [{ type: i0.Input, args: [{ isSignal: true, alias: "withBox", required: false }] }], boxColorClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "boxColorClass", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }] } });
|
|
1911
1912
|
|
|
1912
1913
|
// ==============================================
|
|
@@ -1925,7 +1926,7 @@ class ThemeToggle {
|
|
|
1925
1926
|
// ==============================================
|
|
1926
1927
|
// Inputs
|
|
1927
1928
|
// ==============================================
|
|
1928
|
-
bodyClass = input('zs:bg-white zs:dark:bg-gray-900 zs:text-gray-900 zs:dark:text-gray-100', ...(ngDevMode ? [{ debugName: "bodyClass" }] : []));
|
|
1929
|
+
bodyClass = input('zs:bg-white zs:dark:bg-gray-900 zs:text-gray-900 zs:dark:text-gray-100 zs:transition-colors', ...(ngDevMode ? [{ debugName: "bodyClass" }] : []));
|
|
1929
1930
|
showDefaultUI = input(true, ...(ngDevMode ? [{ debugName: "showDefaultUI" }] : []));
|
|
1930
1931
|
setManualTheme = input(null, ...(ngDevMode ? [{ debugName: "setManualTheme" }] : []));
|
|
1931
1932
|
fromTop = input(1 / 4, ...(ngDevMode ? [{ debugName: "fromTop" }] : []));
|
|
@@ -2067,11 +2068,11 @@ class ThemeToggle {
|
|
|
2067
2068
|
}
|
|
2068
2069
|
}
|
|
2069
2070
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: ThemeToggle, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2070
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: ThemeToggle, isStandalone: true, selector: "ZS-theme-toggle", inputs: { bodyClass: { classPropertyName: "bodyClass", publicName: "bodyClass", isSignal: true, isRequired: false, transformFunction: null }, showDefaultUI: { classPropertyName: "showDefaultUI", publicName: "showDefaultUI", isSignal: true, isRequired: false, transformFunction: null }, setManualTheme: { classPropertyName: "setManualTheme", publicName: "setManualTheme", isSignal: true, isRequired: false, transformFunction: null }, fromTop: { classPropertyName: "fromTop", publicName: "fromTop", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { themeChangeEv: "themeChangeEv" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, ngImport: i0, template: "<!-- ========================= Theme Switcher Panel ========================= -->\n@if(showDefaultUI()) {\n <div\n class=\"zs:fixed zs:left-0 {{ zIndices.themeToggle }} zs:transform \n zs:-translate-y-1/2\"\n\n [style.top.px]=\"panelTop()\"\n [ngClass]=\"[!isOpen() ? 'zs:-translate-x-24' : '', transition()]\"\n\n (pointerdown)=\"onDragStart($event)\"\n (pointermove)=\"onDragMove($event)\"\n (pointerup)=\"onDragEnd($event)\"\n (pointercancel)=\"onDragEnd($event)\"\n\n style=\"touch-action: none; cursor: grab;\"\n >\n <!-- ========================= Theme Selection Buttons ========================= -->\n <div class=\"zs:flex zs:items-center\">\n <div \n class=\"zs:flex zs:overflow-hidden zs:transition-all zs:duration-300\"\n role=\"group\"\n aria-label=\"Theme selection\"\n >\n <!-- Light Theme Button -->\n <button\n (click)=\"setTheme('light')\"\n type=\"button\"\n class=\"zs:px-3 zs:py-2 zs:rounded-l-none zs:border-l-0 zs:border-y \n zs:transition-colors zs:shrink-0\n zs:bg-white zs:text-gray-900 zs:border-gray-300\n zs:dark:bg-gray-800 zs:dark:text-gray-100 zs:dark:border-gray-600\n zs:hover:bg-gray-100 zs:dark:hover:bg-gray-700 zs:w-12\n zs:focus:outline-hidden zs:focus-visible:ring-2 zs:focus-visible:ring-offset-2 \n zs:focus-visible:ring-blue-500\"\n aria-label=\"Activate light theme\"\n [attr.aria-pressed]=\"currentTheme() === 'light'\"\n >\n <i class=\"fas fa-sun zs:text-yellow-500\" aria-hidden=\"true\"></i>\n </button>\n \n <!-- Dark Theme Button -->\n <button\n (click)=\"setTheme('dark')\"\n type=\"button\"\n class=\"zs:px-3 zs:py-2 zs:rounded-r-lg zs:border-y zs:border-r \n zs:transition-colors zs:shrink-0\n zs:bg-white zs:text-gray-900 zs:border-gray-300\n zs:dark:bg-gray-800 zs:dark:text-gray-100 zs:dark:border-gray-600\n zs:hover:bg-gray-100 zs:dark:hover:bg-gray-700 zs:w-12\n zs:focus:outline-hidden zs:focus-visible:ring-2 zs:focus-visible:ring-offset-2 \n zs:focus-visible:ring-blue-500\"\n aria-label=\"Activate dark theme\"\n [attr.aria-pressed]=\"currentTheme() === 'dark'\"\n >\n <i class=\"fas fa-moon\" aria-hidden=\"true\"></i>\n </button>\n </div>\n \n <!-- ========================= Toggle Button with Connector ========================= -->\n <div \n class=\"zs:relative\"\n [ngClass]=\"isOpen() ? 'zs:hidden' : ''\"\n >\n <!-- Connector Line -->\n <div\n class=\"zs:absolute zs:top-1/2 zs:right-0 zs:h-0.5 zs:w-3 zs:transform zs:-translate-y-1/2\n zs:bg-gray-300 zs:dark:bg-gray-600\"\n aria-hidden=\"true\"\n ></div>\n \n <!-- Toggle Button -->\n <button\n (click)=\"toggleOpen()\"\n type=\"button\"\n class=\"zs:relative zs:z-100 zs:w-12 zs:h-12 zs:rounded-full zs:rounded-l-none zs:border-l-0 \n zs:border-2\n zs:transition-all zs:duration-300 zs:flex zs:items-center zs:justify-center\n zs:bg-white zs:text-gray-900 zs:border-gray-300\n zs:dark:bg-gray-800 zs:dark:text-gray-100 zs:dark:border-gray-600\n zs:hover:bg-gray-100 zs:dark:hover:bg-gray-700\n zs:focus:outline-hidden zs:focus-visible:ring-2 zs:focus-visible:ring-offset-2 \n zs:focus-visible:ring-blue-500\"\n aria-label=\"Toggle theme switcher\"\n [attr.aria-expanded]=\"isOpen()\"\n aria-controls=\"theme-panel\"\n >\n @if (currentTheme() === 'dark') {\n <i class=\"fas fa-moon\" aria-hidden=\"true\"></i>\n } @else {\n <i class=\"fas fa-sun zs:text-yellow-500\" aria-hidden=\"true\"></i>\n }\n </button>\n </div>\n </div>\n </div>\n}", styles: [":host{display:block}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
|
|
2071
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: ThemeToggle, isStandalone: true, selector: "ZS-theme-toggle", inputs: { bodyClass: { classPropertyName: "bodyClass", publicName: "bodyClass", isSignal: true, isRequired: false, transformFunction: null }, showDefaultUI: { classPropertyName: "showDefaultUI", publicName: "showDefaultUI", isSignal: true, isRequired: false, transformFunction: null }, setManualTheme: { classPropertyName: "setManualTheme", publicName: "setManualTheme", isSignal: true, isRequired: false, transformFunction: null }, fromTop: { classPropertyName: "fromTop", publicName: "fromTop", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { themeChangeEv: "themeChangeEv" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, ngImport: i0, template: "<!-- ========================= Theme Switcher Panel ========================= -->\n@if(showDefaultUI()) {\n <div\n class=\"zs:fixed zs:left-0 {{ zIndices.themeToggle }} zs:transform \n zs:-translate-y-1/2\"\n\n [style.top.px]=\"panelTop()\"\n [ngClass]=\"[!isOpen() ? 'zs:-translate-x-24' : '', transition()]\"\n\n (pointerdown)=\"onDragStart($event)\"\n (pointermove)=\"onDragMove($event)\"\n (pointerup)=\"onDragEnd($event)\"\n (pointercancel)=\"onDragEnd($event)\"\n\n style=\"touch-action: none; cursor: grab;\"\n >\n <!-- ========================= Theme Selection Buttons ========================= -->\n <div class=\"zs:flex zs:items-center\">\n <div \n class=\"zs:flex zs:overflow-hidden zs:transition-all zs:duration-300\"\n role=\"group\"\n aria-label=\"Theme selection\"\n >\n <!-- Light Theme Button -->\n <button\n (click)=\"setTheme('light')\"\n type=\"button\"\n class=\"zs:px-3 zs:py-2 zs:rounded-l-none zs:border-l-0 zs:border-y \n zs:transition-colors zs:shrink-0\n zs:bg-white zs:text-gray-900 zs:border-gray-300\n zs:dark:bg-gray-800 zs:dark:text-gray-100 zs:dark:border-gray-600\n zs:hover:bg-gray-100 zs:dark:hover:bg-gray-700 zs:w-12\n zs:focus:outline-hidden zs:focus-visible:ring-2 zs:focus-visible:ring-offset-2 \n zs:focus-visible:ring-blue-500\"\n aria-label=\"Activate light theme\"\n [attr.aria-pressed]=\"currentTheme() === 'light'\"\n >\n <i class=\"fas fa-sun zs:text-yellow-500\" aria-hidden=\"true\"></i>\n </button>\n \n <!-- Dark Theme Button -->\n <button\n (click)=\"setTheme('dark')\"\n type=\"button\"\n class=\"zs:px-3 zs:py-2 zs:rounded-r-lg zs:border-y zs:border-r \n zs:transition-colors zs:shrink-0\n zs:bg-white zs:text-gray-900 zs:border-gray-300\n zs:dark:bg-gray-800 zs:dark:text-gray-100 zs:dark:border-gray-600\n zs:hover:bg-gray-100 zs:dark:hover:bg-gray-700 zs:w-12\n zs:focus:outline-hidden zs:focus-visible:ring-2 zs:focus-visible:ring-offset-2 \n zs:focus-visible:ring-blue-500\"\n aria-label=\"Activate dark theme\"\n [attr.aria-pressed]=\"currentTheme() === 'dark'\"\n >\n <i class=\"fas fa-moon\" aria-hidden=\"true\"></i>\n </button>\n </div>\n \n <!-- ========================= Toggle Button with Connector ========================= -->\n <div \n class=\"zs:relative\"\n [ngClass]=\"isOpen() ? 'zs:hidden' : ''\"\n >\n <!-- Connector Line -->\n <div\n class=\"zs:absolute zs:top-1/2 zs:right-0 zs:h-0.5 zs:w-3 zs:transform zs:-translate-y-1/2\n zs:bg-gray-300 zs:dark:bg-gray-600 zs:transition-colors\"\n aria-hidden=\"true\"\n ></div>\n \n <!-- Toggle Button -->\n <button\n (click)=\"toggleOpen()\"\n type=\"button\"\n class=\"zs:relative zs:z-100 zs:w-12 zs:h-12 zs:rounded-full zs:rounded-l-none zs:border-l-0 \n zs:border-2\n zs:transition-all zs:duration-300 zs:flex zs:items-center zs:justify-center\n zs:bg-white zs:text-gray-900 zs:border-gray-300\n zs:dark:bg-gray-800 zs:dark:text-gray-100 zs:dark:border-gray-600\n zs:hover:bg-gray-100 zs:dark:hover:bg-gray-700\n zs:focus:outline-hidden zs:focus-visible:ring-2 zs:focus-visible:ring-offset-2 \n zs:focus-visible:ring-blue-500\"\n aria-label=\"Toggle theme switcher\"\n [attr.aria-expanded]=\"isOpen()\"\n aria-controls=\"theme-panel\"\n >\n @if (currentTheme() === 'dark') {\n <i class=\"fas fa-moon\" aria-hidden=\"true\"></i>\n } @else {\n <i class=\"fas fa-sun zs:text-yellow-500\" aria-hidden=\"true\"></i>\n }\n </button>\n </div>\n </div>\n </div>\n}", styles: [":host{display:block}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
|
|
2071
2072
|
}
|
|
2072
2073
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: ThemeToggle, decorators: [{
|
|
2073
2074
|
type: Component,
|
|
2074
|
-
args: [{ selector: 'ZS-theme-toggle', imports: [CommonModule], template: "<!-- ========================= Theme Switcher Panel ========================= -->\n@if(showDefaultUI()) {\n <div\n class=\"zs:fixed zs:left-0 {{ zIndices.themeToggle }} zs:transform \n zs:-translate-y-1/2\"\n\n [style.top.px]=\"panelTop()\"\n [ngClass]=\"[!isOpen() ? 'zs:-translate-x-24' : '', transition()]\"\n\n (pointerdown)=\"onDragStart($event)\"\n (pointermove)=\"onDragMove($event)\"\n (pointerup)=\"onDragEnd($event)\"\n (pointercancel)=\"onDragEnd($event)\"\n\n style=\"touch-action: none; cursor: grab;\"\n >\n <!-- ========================= Theme Selection Buttons ========================= -->\n <div class=\"zs:flex zs:items-center\">\n <div \n class=\"zs:flex zs:overflow-hidden zs:transition-all zs:duration-300\"\n role=\"group\"\n aria-label=\"Theme selection\"\n >\n <!-- Light Theme Button -->\n <button\n (click)=\"setTheme('light')\"\n type=\"button\"\n class=\"zs:px-3 zs:py-2 zs:rounded-l-none zs:border-l-0 zs:border-y \n zs:transition-colors zs:shrink-0\n zs:bg-white zs:text-gray-900 zs:border-gray-300\n zs:dark:bg-gray-800 zs:dark:text-gray-100 zs:dark:border-gray-600\n zs:hover:bg-gray-100 zs:dark:hover:bg-gray-700 zs:w-12\n zs:focus:outline-hidden zs:focus-visible:ring-2 zs:focus-visible:ring-offset-2 \n zs:focus-visible:ring-blue-500\"\n aria-label=\"Activate light theme\"\n [attr.aria-pressed]=\"currentTheme() === 'light'\"\n >\n <i class=\"fas fa-sun zs:text-yellow-500\" aria-hidden=\"true\"></i>\n </button>\n \n <!-- Dark Theme Button -->\n <button\n (click)=\"setTheme('dark')\"\n type=\"button\"\n class=\"zs:px-3 zs:py-2 zs:rounded-r-lg zs:border-y zs:border-r \n zs:transition-colors zs:shrink-0\n zs:bg-white zs:text-gray-900 zs:border-gray-300\n zs:dark:bg-gray-800 zs:dark:text-gray-100 zs:dark:border-gray-600\n zs:hover:bg-gray-100 zs:dark:hover:bg-gray-700 zs:w-12\n zs:focus:outline-hidden zs:focus-visible:ring-2 zs:focus-visible:ring-offset-2 \n zs:focus-visible:ring-blue-500\"\n aria-label=\"Activate dark theme\"\n [attr.aria-pressed]=\"currentTheme() === 'dark'\"\n >\n <i class=\"fas fa-moon\" aria-hidden=\"true\"></i>\n </button>\n </div>\n \n <!-- ========================= Toggle Button with Connector ========================= -->\n <div \n class=\"zs:relative\"\n [ngClass]=\"isOpen() ? 'zs:hidden' : ''\"\n >\n <!-- Connector Line -->\n <div\n class=\"zs:absolute zs:top-1/2 zs:right-0 zs:h-0.5 zs:w-3 zs:transform zs:-translate-y-1/2\n zs:bg-gray-300 zs:dark:bg-gray-600\"\n aria-hidden=\"true\"\n ></div>\n \n <!-- Toggle Button -->\n <button\n (click)=\"toggleOpen()\"\n type=\"button\"\n class=\"zs:relative zs:z-100 zs:w-12 zs:h-12 zs:rounded-full zs:rounded-l-none zs:border-l-0 \n zs:border-2\n zs:transition-all zs:duration-300 zs:flex zs:items-center zs:justify-center\n zs:bg-white zs:text-gray-900 zs:border-gray-300\n zs:dark:bg-gray-800 zs:dark:text-gray-100 zs:dark:border-gray-600\n zs:hover:bg-gray-100 zs:dark:hover:bg-gray-700\n zs:focus:outline-hidden zs:focus-visible:ring-2 zs:focus-visible:ring-offset-2 \n zs:focus-visible:ring-blue-500\"\n aria-label=\"Toggle theme switcher\"\n [attr.aria-expanded]=\"isOpen()\"\n aria-controls=\"theme-panel\"\n >\n @if (currentTheme() === 'dark') {\n <i class=\"fas fa-moon\" aria-hidden=\"true\"></i>\n } @else {\n <i class=\"fas fa-sun zs:text-yellow-500\" aria-hidden=\"true\"></i>\n }\n </button>\n </div>\n </div>\n </div>\n}", styles: [":host{display:block}\n"] }]
|
|
2075
|
+
args: [{ selector: 'ZS-theme-toggle', imports: [CommonModule], template: "<!-- ========================= Theme Switcher Panel ========================= -->\n@if(showDefaultUI()) {\n <div\n class=\"zs:fixed zs:left-0 {{ zIndices.themeToggle }} zs:transform \n zs:-translate-y-1/2\"\n\n [style.top.px]=\"panelTop()\"\n [ngClass]=\"[!isOpen() ? 'zs:-translate-x-24' : '', transition()]\"\n\n (pointerdown)=\"onDragStart($event)\"\n (pointermove)=\"onDragMove($event)\"\n (pointerup)=\"onDragEnd($event)\"\n (pointercancel)=\"onDragEnd($event)\"\n\n style=\"touch-action: none; cursor: grab;\"\n >\n <!-- ========================= Theme Selection Buttons ========================= -->\n <div class=\"zs:flex zs:items-center\">\n <div \n class=\"zs:flex zs:overflow-hidden zs:transition-all zs:duration-300\"\n role=\"group\"\n aria-label=\"Theme selection\"\n >\n <!-- Light Theme Button -->\n <button\n (click)=\"setTheme('light')\"\n type=\"button\"\n class=\"zs:px-3 zs:py-2 zs:rounded-l-none zs:border-l-0 zs:border-y \n zs:transition-colors zs:shrink-0\n zs:bg-white zs:text-gray-900 zs:border-gray-300\n zs:dark:bg-gray-800 zs:dark:text-gray-100 zs:dark:border-gray-600\n zs:hover:bg-gray-100 zs:dark:hover:bg-gray-700 zs:w-12\n zs:focus:outline-hidden zs:focus-visible:ring-2 zs:focus-visible:ring-offset-2 \n zs:focus-visible:ring-blue-500\"\n aria-label=\"Activate light theme\"\n [attr.aria-pressed]=\"currentTheme() === 'light'\"\n >\n <i class=\"fas fa-sun zs:text-yellow-500\" aria-hidden=\"true\"></i>\n </button>\n \n <!-- Dark Theme Button -->\n <button\n (click)=\"setTheme('dark')\"\n type=\"button\"\n class=\"zs:px-3 zs:py-2 zs:rounded-r-lg zs:border-y zs:border-r \n zs:transition-colors zs:shrink-0\n zs:bg-white zs:text-gray-900 zs:border-gray-300\n zs:dark:bg-gray-800 zs:dark:text-gray-100 zs:dark:border-gray-600\n zs:hover:bg-gray-100 zs:dark:hover:bg-gray-700 zs:w-12\n zs:focus:outline-hidden zs:focus-visible:ring-2 zs:focus-visible:ring-offset-2 \n zs:focus-visible:ring-blue-500\"\n aria-label=\"Activate dark theme\"\n [attr.aria-pressed]=\"currentTheme() === 'dark'\"\n >\n <i class=\"fas fa-moon\" aria-hidden=\"true\"></i>\n </button>\n </div>\n \n <!-- ========================= Toggle Button with Connector ========================= -->\n <div \n class=\"zs:relative\"\n [ngClass]=\"isOpen() ? 'zs:hidden' : ''\"\n >\n <!-- Connector Line -->\n <div\n class=\"zs:absolute zs:top-1/2 zs:right-0 zs:h-0.5 zs:w-3 zs:transform zs:-translate-y-1/2\n zs:bg-gray-300 zs:dark:bg-gray-600 zs:transition-colors\"\n aria-hidden=\"true\"\n ></div>\n \n <!-- Toggle Button -->\n <button\n (click)=\"toggleOpen()\"\n type=\"button\"\n class=\"zs:relative zs:z-100 zs:w-12 zs:h-12 zs:rounded-full zs:rounded-l-none zs:border-l-0 \n zs:border-2\n zs:transition-all zs:duration-300 zs:flex zs:items-center zs:justify-center\n zs:bg-white zs:text-gray-900 zs:border-gray-300\n zs:dark:bg-gray-800 zs:dark:text-gray-100 zs:dark:border-gray-600\n zs:hover:bg-gray-100 zs:dark:hover:bg-gray-700\n zs:focus:outline-hidden zs:focus-visible:ring-2 zs:focus-visible:ring-offset-2 \n zs:focus-visible:ring-blue-500\"\n aria-label=\"Toggle theme switcher\"\n [attr.aria-expanded]=\"isOpen()\"\n aria-controls=\"theme-panel\"\n >\n @if (currentTheme() === 'dark') {\n <i class=\"fas fa-moon\" aria-hidden=\"true\"></i>\n } @else {\n <i class=\"fas fa-sun zs:text-yellow-500\" aria-hidden=\"true\"></i>\n }\n </button>\n </div>\n </div>\n </div>\n}", styles: [":host{display:block}\n"] }]
|
|
2075
2076
|
}], ctorParameters: () => [], propDecorators: { bodyClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "bodyClass", required: false }] }], showDefaultUI: [{ type: i0.Input, args: [{ isSignal: true, alias: "showDefaultUI", required: false }] }], setManualTheme: [{ type: i0.Input, args: [{ isSignal: true, alias: "setManualTheme", required: false }] }], fromTop: [{ type: i0.Input, args: [{ isSignal: true, alias: "fromTop", required: false }] }], themeChangeEv: [{ type: i0.Output, args: ["themeChangeEv"] }], onDocumentClick: [{
|
|
2076
2077
|
type: HostListener,
|
|
2077
2078
|
args: ['document:click', ['$event']]
|
|
@@ -2105,11 +2106,11 @@ class Label {
|
|
|
2105
2106
|
return sizes[this.size()];
|
|
2106
2107
|
}, ...(ngDevMode ? [{ debugName: "sizeClasses" }] : []));
|
|
2107
2108
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: Label, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2108
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: Label, isStandalone: true, selector: "ZS-label", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, hintId: { classPropertyName: "hintId", publicName: "hintId", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, for: { classPropertyName: "for", publicName: "for", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<!-- ================= Label Wrapper ================= -->\n@if (label() || hint()) {\n <label \n [for]=\"for()\" \n class=\"zs:flex zs:items-center zs:flex-wrap\"\n >\n <!-- ========== Label Text ========== -->\n @if (label()) {\n <span class=\"zs:font-semibold\" \n [ngClass]=\"[\n sizeClasses().label,\n hint() ? 'zs:mr-1.5' : ''\n ]\">\n {{ label() }}\n\n <!-- Required Indicator -->\n @if (true) {\n <span class=\"zs:text-red-500 zs:ml-1\" aria-hidden=\"true\">*</span>\n <span class=\"sr-only\">(required)</span>\n }\n </span>\n }\n\n <!-- ========== Hint Text ========== -->\n @if (hint()) {\n <small\n [id]=\"hintId()\"\n class=\"zs:text-slate-500 zs:dark:text-slate-400\" \n [ngClass]=\"sizeClasses().hint\"\n >\n {{ hint() }}\n </small>\n }\n <!-- ========== End Hint Text ========== -->\n </label>\n}\n<!-- ================= End Label Wrapper ================= -->", styles: [":host{display:block}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
|
|
2109
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: Label, isStandalone: true, selector: "ZS-label", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, hintId: { classPropertyName: "hintId", publicName: "hintId", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, for: { classPropertyName: "for", publicName: "for", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<!-- ================= Label Wrapper ================= -->\n@if (label() || hint()) {\n <label \n [for]=\"for()\" \n class=\"zs:flex zs:items-center zs:flex-wrap\"\n >\n <!-- ========== Label Text ========== -->\n @if (label()) {\n <span class=\"zs:font-semibold\" \n [ngClass]=\"[\n sizeClasses().label,\n hint() ? 'zs:mr-1.5' : ''\n ]\">\n {{ label() }}\n\n <!-- Required Indicator -->\n @if (true) {\n <span class=\"zs:text-red-500 zs:ml-1\" aria-hidden=\"true\">*</span>\n <span class=\"sr-only\">(required)</span>\n }\n </span>\n }\n\n <!-- ========== Hint Text ========== -->\n @if (hint()) {\n <small\n [id]=\"hintId()\"\n class=\"zs:text-slate-500 zs:dark:text-slate-400 zs:transition-colors\" \n [ngClass]=\"sizeClasses().hint\"\n >\n {{ hint() }}\n </small>\n }\n <!-- ========== End Hint Text ========== -->\n </label>\n}\n<!-- ================= End Label Wrapper ================= -->", styles: [":host{display:block}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
|
|
2109
2110
|
}
|
|
2110
2111
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: Label, decorators: [{
|
|
2111
2112
|
type: Component,
|
|
2112
|
-
args: [{ selector: 'ZS-label', imports: [CommonModule], template: "<!-- ================= Label Wrapper ================= -->\n@if (label() || hint()) {\n <label \n [for]=\"for()\" \n class=\"zs:flex zs:items-center zs:flex-wrap\"\n >\n <!-- ========== Label Text ========== -->\n @if (label()) {\n <span class=\"zs:font-semibold\" \n [ngClass]=\"[\n sizeClasses().label,\n hint() ? 'zs:mr-1.5' : ''\n ]\">\n {{ label() }}\n\n <!-- Required Indicator -->\n @if (true) {\n <span class=\"zs:text-red-500 zs:ml-1\" aria-hidden=\"true\">*</span>\n <span class=\"sr-only\">(required)</span>\n }\n </span>\n }\n\n <!-- ========== Hint Text ========== -->\n @if (hint()) {\n <small\n [id]=\"hintId()\"\n class=\"zs:text-slate-500 zs:dark:text-slate-400\" \n [ngClass]=\"sizeClasses().hint\"\n >\n {{ hint() }}\n </small>\n }\n <!-- ========== End Hint Text ========== -->\n </label>\n}\n<!-- ================= End Label Wrapper ================= -->", styles: [":host{display:block}\n"] }]
|
|
2113
|
+
args: [{ selector: 'ZS-label', imports: [CommonModule], template: "<!-- ================= Label Wrapper ================= -->\n@if (label() || hint()) {\n <label \n [for]=\"for()\" \n class=\"zs:flex zs:items-center zs:flex-wrap\"\n >\n <!-- ========== Label Text ========== -->\n @if (label()) {\n <span class=\"zs:font-semibold\" \n [ngClass]=\"[\n sizeClasses().label,\n hint() ? 'zs:mr-1.5' : ''\n ]\">\n {{ label() }}\n\n <!-- Required Indicator -->\n @if (true) {\n <span class=\"zs:text-red-500 zs:ml-1\" aria-hidden=\"true\">*</span>\n <span class=\"sr-only\">(required)</span>\n }\n </span>\n }\n\n <!-- ========== Hint Text ========== -->\n @if (hint()) {\n <small\n [id]=\"hintId()\"\n class=\"zs:text-slate-500 zs:dark:text-slate-400 zs:transition-colors\" \n [ngClass]=\"sizeClasses().hint\"\n >\n {{ hint() }}\n </small>\n }\n <!-- ========== End Hint Text ========== -->\n </label>\n}\n<!-- ================= End Label Wrapper ================= -->", styles: [":host{display:block}\n"] }]
|
|
2113
2114
|
}], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], hintId: [{ type: i0.Input, args: [{ isSignal: true, alias: "hintId", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], for: [{ type: i0.Input, args: [{ isSignal: true, alias: "for", required: false }] }] } });
|
|
2114
2115
|
|
|
2115
2116
|
// ==============================================
|
|
@@ -2198,11 +2199,11 @@ class Checkbox {
|
|
|
2198
2199
|
}
|
|
2199
2200
|
}
|
|
2200
2201
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: Checkbox, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2201
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.9", type: Checkbox, isStandalone: true, selector: "ZS-checkbox", inputs: { Id: { classPropertyName: "Id", publicName: "Id", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, inputStyle: { classPropertyName: "inputStyle", publicName: "inputStyle", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, isReadonly: { classPropertyName: "isReadonly", publicName: "isReadonly", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, shape: { classPropertyName: "shape", publicName: "shape", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, ngImport: i0, template: "<div class=\"zs:flex zs:items-center zs:justify-start zs:w-full zs:select-none\">\n <!-- ===================== Checkbox Wrapper ===================== -->\n <div\n class=\"zs:cursor-pointer group leading-none\"\n >\n <!-- ===================== Hidden Input (Native for screen readers) ===================== -->\n <input\n type=\"checkbox\"\n class=\"zs:hidden\"\n [id]=\"Id()\"\n [checked]=\"isChecked()\"\n [disabled]=\"disabledOrReadonly()\"\n (change)=\"toggleChecked()\"\n />\n\n <!-- ===================== Custom Accessible Checkbox ===================== -->\n <span\n role=\"'checkbox'\"\n tabindex=\"0\"\n [attr.aria-checked]=\"isChecked()\"\n [attr.aria-disabled]=\"disabledOrReadonly()\"\n [attr.aria-labelledby]=\"Id() + '-label'\"\n [ngClass]=\"[\n sizeClass(),\n palette().checkboxTextPalette.checkBoxText,\n palette().checkboxTextPalette.checkBoxTextHover,\n palette().ringPalette.ring,\n 'zs:leading-none zs:inline-flex zs:items-center zs:justify-center zs:focus:outline-hidden zs:focus-visible:ring-2'\n ]\"\n (click)=\"toggleChecked()\"\n (keydown)=\"onKeyDown($event)\"\n >\n <i [class]=\"iconClasses()\"></i>\n </span>\n </div>\n\n <!-- ===================== Label (ZS-label component) ===================== -->\n <ZS-label [class]=\"(label() || hint()) ? 'zs:ml-1.5' : ''\"\n [id]=\"Id() + '-label'\"\n [label]=\"label()\"\n [hint]=\"hint()\"\n [hintId]=\"Id() + '-hint'\"\n [size]=\"size()\"\n [for]=\"Id()\"\n ></ZS-label>\n</div>", styles: [""], dependencies: [{ kind: "component", type: Label, selector: "ZS-label", inputs: ["label", "hint", "hintId", "size", "required", "for"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
|
|
2202
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.9", type: Checkbox, isStandalone: true, selector: "ZS-checkbox", inputs: { Id: { classPropertyName: "Id", publicName: "Id", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, inputStyle: { classPropertyName: "inputStyle", publicName: "inputStyle", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, isReadonly: { classPropertyName: "isReadonly", publicName: "isReadonly", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, shape: { classPropertyName: "shape", publicName: "shape", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, ngImport: i0, template: "<div class=\"zs:flex zs:items-center zs:justify-start zs:w-full zs:select-none\">\n <!-- ===================== Checkbox Wrapper ===================== -->\n <div\n class=\"zs:cursor-pointer group leading-none\"\n >\n <!-- ===================== Hidden Input (Native for screen readers) ===================== -->\n <input\n type=\"checkbox\"\n class=\"zs:hidden\"\n [id]=\"Id()\"\n [checked]=\"isChecked()\"\n [disabled]=\"disabledOrReadonly()\"\n (change)=\"toggleChecked()\"\n />\n\n <!-- ===================== Custom Accessible Checkbox ===================== -->\n <span\n role=\"'checkbox'\"\n tabindex=\"0\"\n [attr.aria-checked]=\"isChecked()\"\n [attr.aria-disabled]=\"disabledOrReadonly()\"\n [attr.aria-labelledby]=\"Id() + '-label'\"\n [ngClass]=\"[\n sizeClass(),\n palette().checkboxTextPalette.checkBoxText,\n palette().checkboxTextPalette.checkBoxTextHover,\n palette().ringPalette.ring,\n 'zs:leading-none zs:inline-flex zs:items-center zs:justify-center zs:focus:outline-hidden zs:focus-visible:ring-2 zs:transition-colors'\n ]\"\n (click)=\"toggleChecked()\"\n (keydown)=\"onKeyDown($event)\"\n >\n <i [class]=\"iconClasses()\"></i>\n </span>\n </div>\n\n <!-- ===================== Label (ZS-label component) ===================== -->\n <ZS-label [class]=\"(label() || hint()) ? 'zs:ml-1.5' : ''\"\n [id]=\"Id() + '-label'\"\n [label]=\"label()\"\n [hint]=\"hint()\"\n [hintId]=\"Id() + '-hint'\"\n [size]=\"size()\"\n [for]=\"Id()\"\n ></ZS-label>\n</div>", styles: [""], dependencies: [{ kind: "component", type: Label, selector: "ZS-label", inputs: ["label", "hint", "hintId", "size", "required", "for"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
|
|
2202
2203
|
}
|
|
2203
2204
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: Checkbox, decorators: [{
|
|
2204
2205
|
type: Component,
|
|
2205
|
-
args: [{ selector: 'ZS-checkbox', imports: [Label, CommonModule], template: "<div class=\"zs:flex zs:items-center zs:justify-start zs:w-full zs:select-none\">\n <!-- ===================== Checkbox Wrapper ===================== -->\n <div\n class=\"zs:cursor-pointer group leading-none\"\n >\n <!-- ===================== Hidden Input (Native for screen readers) ===================== -->\n <input\n type=\"checkbox\"\n class=\"zs:hidden\"\n [id]=\"Id()\"\n [checked]=\"isChecked()\"\n [disabled]=\"disabledOrReadonly()\"\n (change)=\"toggleChecked()\"\n />\n\n <!-- ===================== Custom Accessible Checkbox ===================== -->\n <span\n role=\"'checkbox'\"\n tabindex=\"0\"\n [attr.aria-checked]=\"isChecked()\"\n [attr.aria-disabled]=\"disabledOrReadonly()\"\n [attr.aria-labelledby]=\"Id() + '-label'\"\n [ngClass]=\"[\n sizeClass(),\n palette().checkboxTextPalette.checkBoxText,\n palette().checkboxTextPalette.checkBoxTextHover,\n palette().ringPalette.ring,\n 'zs:leading-none zs:inline-flex zs:items-center zs:justify-center zs:focus:outline-hidden zs:focus-visible:ring-2'\n ]\"\n (click)=\"toggleChecked()\"\n (keydown)=\"onKeyDown($event)\"\n >\n <i [class]=\"iconClasses()\"></i>\n </span>\n </div>\n\n <!-- ===================== Label (ZS-label component) ===================== -->\n <ZS-label [class]=\"(label() || hint()) ? 'zs:ml-1.5' : ''\"\n [id]=\"Id() + '-label'\"\n [label]=\"label()\"\n [hint]=\"hint()\"\n [hintId]=\"Id() + '-hint'\"\n [size]=\"size()\"\n [for]=\"Id()\"\n ></ZS-label>\n</div>" }]
|
|
2206
|
+
args: [{ selector: 'ZS-checkbox', imports: [Label, CommonModule], template: "<div class=\"zs:flex zs:items-center zs:justify-start zs:w-full zs:select-none\">\n <!-- ===================== Checkbox Wrapper ===================== -->\n <div\n class=\"zs:cursor-pointer group leading-none\"\n >\n <!-- ===================== Hidden Input (Native for screen readers) ===================== -->\n <input\n type=\"checkbox\"\n class=\"zs:hidden\"\n [id]=\"Id()\"\n [checked]=\"isChecked()\"\n [disabled]=\"disabledOrReadonly()\"\n (change)=\"toggleChecked()\"\n />\n\n <!-- ===================== Custom Accessible Checkbox ===================== -->\n <span\n role=\"'checkbox'\"\n tabindex=\"0\"\n [attr.aria-checked]=\"isChecked()\"\n [attr.aria-disabled]=\"disabledOrReadonly()\"\n [attr.aria-labelledby]=\"Id() + '-label'\"\n [ngClass]=\"[\n sizeClass(),\n palette().checkboxTextPalette.checkBoxText,\n palette().checkboxTextPalette.checkBoxTextHover,\n palette().ringPalette.ring,\n 'zs:leading-none zs:inline-flex zs:items-center zs:justify-center zs:focus:outline-hidden zs:focus-visible:ring-2 zs:transition-colors'\n ]\"\n (click)=\"toggleChecked()\"\n (keydown)=\"onKeyDown($event)\"\n >\n <i [class]=\"iconClasses()\"></i>\n </span>\n </div>\n\n <!-- ===================== Label (ZS-label component) ===================== -->\n <ZS-label [class]=\"(label() || hint()) ? 'zs:ml-1.5' : ''\"\n [id]=\"Id() + '-label'\"\n [label]=\"label()\"\n [hint]=\"hint()\"\n [hintId]=\"Id() + '-hint'\"\n [size]=\"size()\"\n [for]=\"Id()\"\n ></ZS-label>\n</div>" }]
|
|
2206
2207
|
}], propDecorators: { Id: [{ type: i0.Input, args: [{ isSignal: true, alias: "Id", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], inputStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputStyle", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], isReadonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "isReadonly", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], shape: [{ type: i0.Input, args: [{ isSignal: true, alias: "shape", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }] } });
|
|
2207
2208
|
|
|
2208
2209
|
// ==============================================================================
|
|
@@ -2434,11 +2435,11 @@ class FileInput {
|
|
|
2434
2435
|
});
|
|
2435
2436
|
}
|
|
2436
2437
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: FileInput, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2437
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: FileInput, isStandalone: true, selector: "ZS-file", inputs: { Id: { classPropertyName: "Id", publicName: "Id", isSignal: true, isRequired: false, transformFunction: null }, iName: { classPropertyName: "iName", publicName: "iName", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, inputStyle: { classPropertyName: "inputStyle", publicName: "inputStyle", isSignal: true, isRequired: false, transformFunction: null }, autofocus: { classPropertyName: "autofocus", publicName: "autofocus", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, isReadonly: { classPropertyName: "isReadonly", publicName: "isReadonly", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, validateFns: { classPropertyName: "validateFns", publicName: "validateFns", isSignal: true, isRequired: false, transformFunction: null }, accept: { classPropertyName: "accept", publicName: "accept", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, maxSize: { classPropertyName: "maxSize", publicName: "maxSize", isSignal: true, isRequired: false, transformFunction: null }, allowPreview: { classPropertyName: "allowPreview", publicName: "allowPreview", isSignal: true, isRequired: false, transformFunction: null }, maxFiles: { classPropertyName: "maxFiles", publicName: "maxFiles", isSignal: true, isRequired: false, transformFunction: null }, files: { classPropertyName: "files", publicName: "files", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { changeEv: "changeEv", files: "filesChange", touched: "touchedChange" }, viewQueries: [{ propertyName: "fileInputRef", first: true, predicate: ["fileInput"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\n class=\"zs:flex zs:flex-col zs:gap-2 zs:w-full\"\n [ngClass]=\"disabled() ? 'zs:opacity-60' : ''\"\n role=\"group\"\n [attr.aria-labelledby]=\"Id() + '-label'\"\n [attr.aria-describedby]=\"Id() + '-hint ' + Id() + '-error'\"\n>\n <!-- ========================= Label & Hint ========================= -->\n <ZS-label [class]=\"(label() || hint()) ? 'zs:mb-1' : ''\"\n [label]=\"label()\"\n [hint]=\"hint()\"\n [required]=\"required()\"\n [hintId]=\"Id() + '-hint'\"\n [for]=\"Id()\"\n [id]=\"Id() + '-label'\"\n >\n </ZS-label>\n\n <!-- ================= Input ================= -->\n <div\n [class]=\"[\n 'zs:relative zs:rounded-xl zs:flex zs:flex-col zs:justify-center zs:items-center zs:gap-2 zs:border-2 zs:border-dashed zs:transition-all zs:duration-200',\n palette().inputPalette.border,\n palette().ringPalette.ring,\n palette().inputPalette.borderHover,\n palette().inputPalette.inputBg\n ].join(' ')\"\n [ngClass]=\"disabledOrReadonly() ? 'cursor-not-allowed' : 'cursor-pointer'\"\n tabindex=\"0\"\n role=\"button\"\n [attr.aria-disabled]=\"disabledOrReadonly()\"\n [attr.aria-label]=\"placeholder() || 'Upload file'\"\n (keydown.enter)=\"!disabledOrReadonly() && fileInput.click()\"\n (keydown.space)=\"!disabledOrReadonly() && fileInput.click()\"\n >\n <input\n #fileInput\n type=\"file\"\n [id]=\"Id()\"\n [name]=\"iName()\"\n [attr.accept]=\"accept()\"\n [attr.multiple]=\"multiple() ? '' : null\"\n [attr.autofocus]=\"autofocus() ? true : null\"\n class=\"zs:absolute zs:inset-0 zs:opacity-0 zs:cursor-pointer\"\n [disabled]=\"disabledOrReadonly()\"\n (change)=\"handleFileChange($event)\"\n [attr.aria-required]=\"required()\"\n [attr.aria-invalid]=\"!!error().length\"\n [attr.aria-describedby]=\"Id() + '-hint ' + Id() + '-error'\"\n />\n\n <div class=\"zs:flex zs:flex-col zs:items-center zs:justify-center zs:text-center zs:p-6 zs:pointer-events-none zs:select-none\">\n <i class=\"fa-solid fa-upload text-3xl mb-2\" [ngClass]=\"palette().inputPalette.text\" aria-hidden=\"true\"></i>\n <p class=\"zs:text-sm zs:text-gray-500 zs:dark:text-gray-400\">\n {{ placeholder() }}\n </p>\n </div>\n </div>\n\n <!-- ================= Files Preview ================= -->\n @if (hasFiles()) {\n <div\n class=\"zs:flex zs:flex-col zs:gap-2 zs:mt-3\"\n role=\"list\"\n aria-label=\"Uploaded files\"\n >\n @for (entry of files().entries(); track entry[0]) {\n <div\n class=\"zs:flex zs:flex-col zs:gap-1 zs:p-2 zs:rounded-lg zs:border zs:focus:outline-hidden zs:focus:ring-2 zs:focus:ring-offset-2\"\n [ngClass]=\"[palette().inputPalette.border, palette().inputPalette.inputBg]\"\n role=\"listitem\"\n tabindex=\"0\"\n >\n <span class=\"zs:block zs:text-sm zs:font-medium zs:truncate\">\n {{ entry[1].name }}\n </span>\n\n <div class=\"zs:flex zs:items-center zs:justify-between zs:gap-4\">\n <div class=\"zs:flex zs:items-center zs:gap-1\">\n <i class=\"text-lg fa-solid fa-file\" [ngClass]=\"palette().inputPalette.text\" aria-hidden=\"true\"></i>\n <span class=\"zs:text-xs zs:text-gray-500\">\n {{ formatSize(entry[1].size) }}\n </span>\n </div>\n\n <div class=\"zs:flex zs:gap-2\">\n @if (allowPreview() && entry[1].url?.startsWith('blob:')) {\n <ZS-button\n type=\"button\"\n (clickedEv)=\"preview(entry[1].url)\"\n [btnStyle]=\"inputStyle()\"\n size=\"sm\"\n aria-label=\"Preview {{ entry[1].name }}\"\n >\n Preview\n </ZS-button>\n }\n\n @if (!disabledOrReadonly()) {\n <ZS-button\n type=\"button\"\n variant=\"outline\"\n btnStyle=\"danger\"\n (clickedEv)=\"removeFile(entry[0])\"\n icon=\"fa-solid fa-trash\"\n aria-label=\"Remove {{ entry[1].name }}\"\n >\n </ZS-button>\n }\n </div>\n </div>\n </div>\n }\n </div>\n }\n\n <!-- ========================= Error Messages ========================= -->\n <ZS-input-errors\n [Id]=\"Id() + '-error'\"\n [errors]=\"[error()]\"\n aria-live=\"assertive\"\n role=\"alert\"\n >\n </ZS-input-errors>\n</div>\n", styles: [":host{@apply block w-full;}input[type=file]:disabled{@apply cursor-not-allowed opacity-60;}\n"], dependencies: [{ kind: "component", type: Label, selector: "ZS-label", inputs: ["label", "hint", "hintId", "size", "required", "for"] }, { kind: "component", type: InputErrors, selector: "ZS-input-errors", inputs: ["Id", "errors"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: Button, selector: "ZS-button", inputs: ["Id", "btnStyle", "variant", "size", "disabled", "icon", "type"], outputs: ["clickedEv"] }] });
|
|
2438
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: FileInput, isStandalone: true, selector: "ZS-file", inputs: { Id: { classPropertyName: "Id", publicName: "Id", isSignal: true, isRequired: false, transformFunction: null }, iName: { classPropertyName: "iName", publicName: "iName", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, inputStyle: { classPropertyName: "inputStyle", publicName: "inputStyle", isSignal: true, isRequired: false, transformFunction: null }, autofocus: { classPropertyName: "autofocus", publicName: "autofocus", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, isReadonly: { classPropertyName: "isReadonly", publicName: "isReadonly", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, validateFns: { classPropertyName: "validateFns", publicName: "validateFns", isSignal: true, isRequired: false, transformFunction: null }, accept: { classPropertyName: "accept", publicName: "accept", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, maxSize: { classPropertyName: "maxSize", publicName: "maxSize", isSignal: true, isRequired: false, transformFunction: null }, allowPreview: { classPropertyName: "allowPreview", publicName: "allowPreview", isSignal: true, isRequired: false, transformFunction: null }, maxFiles: { classPropertyName: "maxFiles", publicName: "maxFiles", isSignal: true, isRequired: false, transformFunction: null }, files: { classPropertyName: "files", publicName: "files", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { changeEv: "changeEv", files: "filesChange", touched: "touchedChange" }, viewQueries: [{ propertyName: "fileInputRef", first: true, predicate: ["fileInput"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\n class=\"zs:flex zs:flex-col zs:gap-2 zs:w-full\"\n [ngClass]=\"disabled() ? 'zs:opacity-60' : ''\"\n role=\"group\"\n [attr.aria-labelledby]=\"Id() + '-label'\"\n [attr.aria-describedby]=\"Id() + '-hint ' + Id() + '-error'\"\n>\n <!-- ========================= Label & Hint ========================= -->\n <ZS-label [class]=\"(label() || hint()) ? 'zs:mb-1' : ''\"\n [label]=\"label()\"\n [hint]=\"hint()\"\n [required]=\"required()\"\n [hintId]=\"Id() + '-hint'\"\n [for]=\"Id()\"\n [id]=\"Id() + '-label'\"\n >\n </ZS-label>\n\n <!-- ================= Input ================= -->\n <div\n [class]=\"[\n 'zs:relative zs:rounded-xl zs:flex zs:flex-col zs:justify-center zs:items-center zs:gap-2 zs:border-2 zs:border-dashed zs:transition-all zs:duration-200',\n palette().inputPalette.border,\n palette().ringPalette.ring,\n palette().inputPalette.borderHover,\n palette().inputPalette.inputBg\n ].join(' ')\"\n [ngClass]=\"disabledOrReadonly() ? 'cursor-not-allowed' : 'cursor-pointer'\"\n tabindex=\"0\"\n role=\"button\"\n [attr.aria-disabled]=\"disabledOrReadonly()\"\n [attr.aria-label]=\"placeholder() || 'Upload file'\"\n (keydown.enter)=\"!disabledOrReadonly() && fileInput.click()\"\n (keydown.space)=\"!disabledOrReadonly() && fileInput.click()\"\n >\n <input\n #fileInput\n type=\"file\"\n [id]=\"Id()\"\n [name]=\"iName()\"\n [attr.accept]=\"accept()\"\n [attr.multiple]=\"multiple() ? '' : null\"\n [attr.autofocus]=\"autofocus() ? true : null\"\n class=\"zs:absolute zs:inset-0 zs:opacity-0 zs:cursor-pointer\"\n [disabled]=\"disabledOrReadonly()\"\n (change)=\"handleFileChange($event)\"\n [attr.aria-required]=\"required()\"\n [attr.aria-invalid]=\"!!error().length\"\n [attr.aria-describedby]=\"Id() + '-hint ' + Id() + '-error'\"\n />\n\n <div class=\"zs:flex zs:flex-col zs:items-center zs:justify-center zs:text-center zs:p-6 zs:pointer-events-none zs:select-none\">\n <i class=\"fa-solid fa-upload text-3xl mb-2\" [ngClass]=\"palette().inputPalette.text\" aria-hidden=\"true\"></i>\n <p class=\"zs:text-sm zs:text-gray-500 zs:dark:text-gray-400 zs:transition-colors\">\n {{ placeholder() }}\n </p>\n </div>\n </div>\n\n <!-- ================= Files Preview ================= -->\n @if (hasFiles()) {\n <div\n class=\"zs:flex zs:flex-col zs:gap-2 zs:mt-3\"\n role=\"list\"\n aria-label=\"Uploaded files\"\n >\n @for (entry of files().entries(); track entry[0]) {\n <div\n class=\"zs:flex zs:flex-col zs:gap-1 zs:p-2 zs:rounded-lg zs:border zs:transition-colors zs:focus:outline-hidden zs:focus:ring-2 zs:focus:ring-offset-2\"\n [ngClass]=\"[palette().inputPalette.border, palette().inputPalette.inputBg]\"\n role=\"listitem\"\n tabindex=\"0\"\n >\n <span class=\"zs:block zs:text-sm zs:font-medium zs:truncate\">\n {{ entry[1].name }}\n </span>\n\n <div class=\"zs:flex zs:items-center zs:justify-between zs:gap-4\">\n <div class=\"zs:flex zs:items-center zs:gap-1\">\n <i class=\"text-lg fa-solid fa-file zs:transition-colors\" [ngClass]=\"palette().inputPalette.text\" aria-hidden=\"true\"></i>\n <span class=\"zs:text-xs zs:text-gray-500\">\n {{ formatSize(entry[1].size) }}\n </span>\n </div>\n\n <div class=\"zs:flex zs:gap-2\">\n @if (allowPreview() && entry[1].url?.startsWith('blob:')) {\n <ZS-button\n type=\"button\"\n (clickedEv)=\"preview(entry[1].url)\"\n [btnStyle]=\"inputStyle()\"\n size=\"sm\"\n aria-label=\"Preview {{ entry[1].name }}\"\n >\n Preview\n </ZS-button>\n }\n\n @if (!disabledOrReadonly()) {\n <ZS-button\n type=\"button\"\n variant=\"outline\"\n btnStyle=\"danger\"\n (clickedEv)=\"removeFile(entry[0])\"\n icon=\"fa-solid fa-trash\"\n aria-label=\"Remove {{ entry[1].name }}\"\n >\n </ZS-button>\n }\n </div>\n </div>\n </div>\n }\n </div>\n }\n\n <!-- ========================= Error Messages ========================= -->\n <ZS-input-errors\n [Id]=\"Id() + '-error'\"\n [errors]=\"[error()]\"\n aria-live=\"assertive\"\n role=\"alert\"\n >\n </ZS-input-errors>\n</div>\n", styles: [":host{@apply block w-full;}input[type=file]:disabled{@apply cursor-not-allowed opacity-60;}\n"], dependencies: [{ kind: "component", type: Label, selector: "ZS-label", inputs: ["label", "hint", "hintId", "size", "required", "for"] }, { kind: "component", type: InputErrors, selector: "ZS-input-errors", inputs: ["Id", "errors"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: Button, selector: "ZS-button", inputs: ["Id", "btnStyle", "variant", "size", "disabled", "icon", "type"], outputs: ["clickedEv"] }] });
|
|
2438
2439
|
}
|
|
2439
2440
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: FileInput, decorators: [{
|
|
2440
2441
|
type: Component,
|
|
2441
|
-
args: [{ selector: 'ZS-file', imports: [Label, InputErrors, CommonModule, Button], template: "<div\n class=\"zs:flex zs:flex-col zs:gap-2 zs:w-full\"\n [ngClass]=\"disabled() ? 'zs:opacity-60' : ''\"\n role=\"group\"\n [attr.aria-labelledby]=\"Id() + '-label'\"\n [attr.aria-describedby]=\"Id() + '-hint ' + Id() + '-error'\"\n>\n <!-- ========================= Label & Hint ========================= -->\n <ZS-label [class]=\"(label() || hint()) ? 'zs:mb-1' : ''\"\n [label]=\"label()\"\n [hint]=\"hint()\"\n [required]=\"required()\"\n [hintId]=\"Id() + '-hint'\"\n [for]=\"Id()\"\n [id]=\"Id() + '-label'\"\n >\n </ZS-label>\n\n <!-- ================= Input ================= -->\n <div\n [class]=\"[\n 'zs:relative zs:rounded-xl zs:flex zs:flex-col zs:justify-center zs:items-center zs:gap-2 zs:border-2 zs:border-dashed zs:transition-all zs:duration-200',\n palette().inputPalette.border,\n palette().ringPalette.ring,\n palette().inputPalette.borderHover,\n palette().inputPalette.inputBg\n ].join(' ')\"\n [ngClass]=\"disabledOrReadonly() ? 'cursor-not-allowed' : 'cursor-pointer'\"\n tabindex=\"0\"\n role=\"button\"\n [attr.aria-disabled]=\"disabledOrReadonly()\"\n [attr.aria-label]=\"placeholder() || 'Upload file'\"\n (keydown.enter)=\"!disabledOrReadonly() && fileInput.click()\"\n (keydown.space)=\"!disabledOrReadonly() && fileInput.click()\"\n >\n <input\n #fileInput\n type=\"file\"\n [id]=\"Id()\"\n [name]=\"iName()\"\n [attr.accept]=\"accept()\"\n [attr.multiple]=\"multiple() ? '' : null\"\n [attr.autofocus]=\"autofocus() ? true : null\"\n class=\"zs:absolute zs:inset-0 zs:opacity-0 zs:cursor-pointer\"\n [disabled]=\"disabledOrReadonly()\"\n (change)=\"handleFileChange($event)\"\n [attr.aria-required]=\"required()\"\n [attr.aria-invalid]=\"!!error().length\"\n [attr.aria-describedby]=\"Id() + '-hint ' + Id() + '-error'\"\n />\n\n <div class=\"zs:flex zs:flex-col zs:items-center zs:justify-center zs:text-center zs:p-6 zs:pointer-events-none zs:select-none\">\n <i class=\"fa-solid fa-upload text-3xl mb-2\" [ngClass]=\"palette().inputPalette.text\" aria-hidden=\"true\"></i>\n <p class=\"zs:text-sm zs:text-gray-500 zs:dark:text-gray-400\">\n {{ placeholder() }}\n </p>\n </div>\n </div>\n\n <!-- ================= Files Preview ================= -->\n @if (hasFiles()) {\n <div\n class=\"zs:flex zs:flex-col zs:gap-2 zs:mt-3\"\n role=\"list\"\n aria-label=\"Uploaded files\"\n >\n @for (entry of files().entries(); track entry[0]) {\n <div\n class=\"zs:flex zs:flex-col zs:gap-1 zs:p-2 zs:rounded-lg zs:border zs:focus:outline-hidden zs:focus:ring-2 zs:focus:ring-offset-2\"\n [ngClass]=\"[palette().inputPalette.border, palette().inputPalette.inputBg]\"\n role=\"listitem\"\n tabindex=\"0\"\n >\n <span class=\"zs:block zs:text-sm zs:font-medium zs:truncate\">\n {{ entry[1].name }}\n </span>\n\n <div class=\"zs:flex zs:items-center zs:justify-between zs:gap-4\">\n <div class=\"zs:flex zs:items-center zs:gap-1\">\n <i class=\"text-lg fa-solid fa-file\" [ngClass]=\"palette().inputPalette.text\" aria-hidden=\"true\"></i>\n <span class=\"zs:text-xs zs:text-gray-500\">\n {{ formatSize(entry[1].size) }}\n </span>\n </div>\n\n <div class=\"zs:flex zs:gap-2\">\n @if (allowPreview() && entry[1].url?.startsWith('blob:')) {\n <ZS-button\n type=\"button\"\n (clickedEv)=\"preview(entry[1].url)\"\n [btnStyle]=\"inputStyle()\"\n size=\"sm\"\n aria-label=\"Preview {{ entry[1].name }}\"\n >\n Preview\n </ZS-button>\n }\n\n @if (!disabledOrReadonly()) {\n <ZS-button\n type=\"button\"\n variant=\"outline\"\n btnStyle=\"danger\"\n (clickedEv)=\"removeFile(entry[0])\"\n icon=\"fa-solid fa-trash\"\n aria-label=\"Remove {{ entry[1].name }}\"\n >\n </ZS-button>\n }\n </div>\n </div>\n </div>\n }\n </div>\n }\n\n <!-- ========================= Error Messages ========================= -->\n <ZS-input-errors\n [Id]=\"Id() + '-error'\"\n [errors]=\"[error()]\"\n aria-live=\"assertive\"\n role=\"alert\"\n >\n </ZS-input-errors>\n</div>\n", styles: [":host{@apply block w-full;}input[type=file]:disabled{@apply cursor-not-allowed opacity-60;}\n"] }]
|
|
2442
|
+
args: [{ selector: 'ZS-file', imports: [Label, InputErrors, CommonModule, Button], template: "<div\n class=\"zs:flex zs:flex-col zs:gap-2 zs:w-full\"\n [ngClass]=\"disabled() ? 'zs:opacity-60' : ''\"\n role=\"group\"\n [attr.aria-labelledby]=\"Id() + '-label'\"\n [attr.aria-describedby]=\"Id() + '-hint ' + Id() + '-error'\"\n>\n <!-- ========================= Label & Hint ========================= -->\n <ZS-label [class]=\"(label() || hint()) ? 'zs:mb-1' : ''\"\n [label]=\"label()\"\n [hint]=\"hint()\"\n [required]=\"required()\"\n [hintId]=\"Id() + '-hint'\"\n [for]=\"Id()\"\n [id]=\"Id() + '-label'\"\n >\n </ZS-label>\n\n <!-- ================= Input ================= -->\n <div\n [class]=\"[\n 'zs:relative zs:rounded-xl zs:flex zs:flex-col zs:justify-center zs:items-center zs:gap-2 zs:border-2 zs:border-dashed zs:transition-all zs:duration-200',\n palette().inputPalette.border,\n palette().ringPalette.ring,\n palette().inputPalette.borderHover,\n palette().inputPalette.inputBg\n ].join(' ')\"\n [ngClass]=\"disabledOrReadonly() ? 'cursor-not-allowed' : 'cursor-pointer'\"\n tabindex=\"0\"\n role=\"button\"\n [attr.aria-disabled]=\"disabledOrReadonly()\"\n [attr.aria-label]=\"placeholder() || 'Upload file'\"\n (keydown.enter)=\"!disabledOrReadonly() && fileInput.click()\"\n (keydown.space)=\"!disabledOrReadonly() && fileInput.click()\"\n >\n <input\n #fileInput\n type=\"file\"\n [id]=\"Id()\"\n [name]=\"iName()\"\n [attr.accept]=\"accept()\"\n [attr.multiple]=\"multiple() ? '' : null\"\n [attr.autofocus]=\"autofocus() ? true : null\"\n class=\"zs:absolute zs:inset-0 zs:opacity-0 zs:cursor-pointer\"\n [disabled]=\"disabledOrReadonly()\"\n (change)=\"handleFileChange($event)\"\n [attr.aria-required]=\"required()\"\n [attr.aria-invalid]=\"!!error().length\"\n [attr.aria-describedby]=\"Id() + '-hint ' + Id() + '-error'\"\n />\n\n <div class=\"zs:flex zs:flex-col zs:items-center zs:justify-center zs:text-center zs:p-6 zs:pointer-events-none zs:select-none\">\n <i class=\"fa-solid fa-upload text-3xl mb-2\" [ngClass]=\"palette().inputPalette.text\" aria-hidden=\"true\"></i>\n <p class=\"zs:text-sm zs:text-gray-500 zs:dark:text-gray-400 zs:transition-colors\">\n {{ placeholder() }}\n </p>\n </div>\n </div>\n\n <!-- ================= Files Preview ================= -->\n @if (hasFiles()) {\n <div\n class=\"zs:flex zs:flex-col zs:gap-2 zs:mt-3\"\n role=\"list\"\n aria-label=\"Uploaded files\"\n >\n @for (entry of files().entries(); track entry[0]) {\n <div\n class=\"zs:flex zs:flex-col zs:gap-1 zs:p-2 zs:rounded-lg zs:border zs:transition-colors zs:focus:outline-hidden zs:focus:ring-2 zs:focus:ring-offset-2\"\n [ngClass]=\"[palette().inputPalette.border, palette().inputPalette.inputBg]\"\n role=\"listitem\"\n tabindex=\"0\"\n >\n <span class=\"zs:block zs:text-sm zs:font-medium zs:truncate\">\n {{ entry[1].name }}\n </span>\n\n <div class=\"zs:flex zs:items-center zs:justify-between zs:gap-4\">\n <div class=\"zs:flex zs:items-center zs:gap-1\">\n <i class=\"text-lg fa-solid fa-file zs:transition-colors\" [ngClass]=\"palette().inputPalette.text\" aria-hidden=\"true\"></i>\n <span class=\"zs:text-xs zs:text-gray-500\">\n {{ formatSize(entry[1].size) }}\n </span>\n </div>\n\n <div class=\"zs:flex zs:gap-2\">\n @if (allowPreview() && entry[1].url?.startsWith('blob:')) {\n <ZS-button\n type=\"button\"\n (clickedEv)=\"preview(entry[1].url)\"\n [btnStyle]=\"inputStyle()\"\n size=\"sm\"\n aria-label=\"Preview {{ entry[1].name }}\"\n >\n Preview\n </ZS-button>\n }\n\n @if (!disabledOrReadonly()) {\n <ZS-button\n type=\"button\"\n variant=\"outline\"\n btnStyle=\"danger\"\n (clickedEv)=\"removeFile(entry[0])\"\n icon=\"fa-solid fa-trash\"\n aria-label=\"Remove {{ entry[1].name }}\"\n >\n </ZS-button>\n }\n </div>\n </div>\n </div>\n }\n </div>\n }\n\n <!-- ========================= Error Messages ========================= -->\n <ZS-input-errors\n [Id]=\"Id() + '-error'\"\n [errors]=\"[error()]\"\n aria-live=\"assertive\"\n role=\"alert\"\n >\n </ZS-input-errors>\n</div>\n", styles: [":host{@apply block w-full;}input[type=file]:disabled{@apply cursor-not-allowed opacity-60;}\n"] }]
|
|
2442
2443
|
}], propDecorators: { Id: [{ type: i0.Input, args: [{ isSignal: true, alias: "Id", required: false }] }], iName: [{ type: i0.Input, args: [{ isSignal: true, alias: "iName", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], inputStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputStyle", required: false }] }], autofocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "autofocus", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], isReadonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "isReadonly", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], validateFns: [{ type: i0.Input, args: [{ isSignal: true, alias: "validateFns", required: false }] }], accept: [{ type: i0.Input, args: [{ isSignal: true, alias: "accept", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], maxSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxSize", required: false }] }], allowPreview: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowPreview", required: false }] }], maxFiles: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxFiles", required: false }] }], changeEv: [{ type: i0.Output, args: ["changeEv"] }], files: [{ type: i0.Input, args: [{ isSignal: true, alias: "files", required: false }] }, { type: i0.Output, args: ["filesChange"] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }, { type: i0.Output, args: ["touchedChange"] }], fileInputRef: [{ type: i0.ViewChild, args: ['fileInput', { isSignal: true }] }] } });
|
|
2443
2444
|
|
|
2444
2445
|
// ==============================================================================
|
|
@@ -2774,11 +2775,11 @@ class Input {
|
|
|
2774
2775
|
this.changedEv.emit({ value, valid, fromForce });
|
|
2775
2776
|
}
|
|
2776
2777
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: Input, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2777
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: Input, isStandalone: true, selector: "ZS-input", inputs: { Id: { classPropertyName: "Id", publicName: "Id", isSignal: true, isRequired: false, transformFunction: null }, iName: { classPropertyName: "iName", publicName: "iName", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, inputStyle: { classPropertyName: "inputStyle", publicName: "inputStyle", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, isReadonly: { classPropertyName: "isReadonly", publicName: "isReadonly", isSignal: true, isRequired: false, transformFunction: null }, autocomplete: { classPropertyName: "autocomplete", publicName: "autocomplete", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, inputmode: { classPropertyName: "inputmode", publicName: "inputmode", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, showSearchIcon: { classPropertyName: "showSearchIcon", publicName: "showSearchIcon", isSignal: true, isRequired: false, transformFunction: null }, showLoaderIconOnSearchInput: { classPropertyName: "showLoaderIconOnSearchInput", publicName: "showLoaderIconOnSearchInput", isSignal: true, isRequired: false, transformFunction: null }, maxlength: { classPropertyName: "maxlength", publicName: "maxlength", isSignal: true, isRequired: false, transformFunction: null }, minlength: { classPropertyName: "minlength", publicName: "minlength", isSignal: true, isRequired: false, transformFunction: null }, spellcheck: { classPropertyName: "spellcheck", publicName: "spellcheck", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, validateFns: { classPropertyName: "validateFns", publicName: "validateFns", isSignal: true, isRequired: false, transformFunction: null }, formatFn: { classPropertyName: "formatFn", publicName: "formatFn", isSignal: true, isRequired: false, transformFunction: null }, autofocus: { classPropertyName: "autofocus", publicName: "autofocus", isSignal: true, isRequired: false, transformFunction: null }, searchDebounceDelay: { classPropertyName: "searchDebounceDelay", publicName: "searchDebounceDelay", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", touched: "touchedChange", enterEv: "enterEv", focusEv: "focusEv", blurEv: "blurEv", changedEv: "changedEv", searchEv: "searchEv", clearedEv: "clearedEv", keydownEv: "keydownEv" }, viewQueries: [{ propertyName: "inputEl", first: true, predicate: ["inputEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<!-- ==============================================\n Input Field Component (ZS-Input)\n ============================================== -->\n\n<div class=\"zs:w-full\">\n\n <!-- ========================= Label & Hint ========================= -->\n <ZS-label [class]=\"(label() || hint()) ? 'zs:mb-1' : ''\"\n [label]=\"label()\"\n [hint]=\"hint()\"\n [required]=\"required()\"\n [hintId]=\"Id() + '-hint'\"\n [size]=\"size()\"\n [for]=\"Id()\"\n >\n </ZS-label>\n\n <!-- ========================= Input Container ========================= -->\n <div\n class=\"zs:relative zs:flex zs:items-center zs:w-full\"\n [class]=\"containerClasses() + ' ' + getSize('container')\"\n (click)=\"focusInput($event)\"\n >\n\n <!-- ========================= Left Icon ========================= -->\n @if (icon() || loaderIconOnSearchInput() || isDate()) {\n <i\n [ngClass]=\"(\n loaderIconOnSearchInput()\n ? loaderIconOnSearchInput()\n : \n icon() ? icon() : dateIcon()\n ) + ' ' + getSize('leftIcon')\"\n aria-hidden=\"true\"\n ></i>\n }\n\n <!-- ========================= Input Field ========================= -->\n <input\n #inputEl\n [id]=\"Id()\"\n [name]=\"iName()\"\n [type]=\"actualType\"\n [attr.placeholder]=\"placeholder()\"\n [value]=\"value()\"\n [disabled]=\"disabled() ? true : null\"\n [attr.min]=\"supportsMinMaxStep() ? min() : null\"\n [attr.max]=\"supportsMinMaxStep() ? max() : null\"\n [attr.step]=\"supportsMinMaxStep() ? step() : null\"\n [attr.required]=\"required() ? true : null\"\n (input)=\"onInput($event)\"\n (keydown.enter)=\"onEnter()\"\n (focus)=\"onFocus()\"\n (blur)=\"onBlur()\"\n (change)=\"onChange()\"\n [attr.autocomplete]=\"autocomplete()\"\n [attr.maxlength]=\"maxlength()\"\n [attr.minlength]=\"minlength()\"\n [attr.autofocus]=\"autofocus() ? true : null\"\n [attr.readonly]=\"isReadonly() ? true : null\"\n [attr.aria-invalid]=\"!!error()\"\n [attr.inputmode]=\"inputmode()\"\n [spellcheck]=\"spellcheck()\"\n class=\"zs:flex-1 zs:bg-transparent zs:outline-hidden zs:caret-current zs:w-full\"\n [class]=\"getSize('field')\"\n [attr.aria-describedby]=\"\n (hint() ? Id() + '-hint' : '') +\n (hint() && error() ? ' ' : '') +\n (error() ? Id() + '-error' : '')\n \"\n />\n\n <!-- ========================= Spacer (Maintains Height) ========================= -->\n <div class=\"zs:h-6\"></div>\n\n <!-- ========================= Password Toggle ========================= -->\n @if (type() === 'password') {\n <button\n type=\"button\"\n (click)=\"togglePassword()\"\n [attr.aria-pressed]=\"showPassword()\"\n class=\"zs:ml-1 zs:px-1 zs:text-slate-500 zs:hover:text-slate-700 \n zs:dark:text-slate-400 zs:dark:hover:text-slate-200\"\n [attr.aria-label]=\"showPassword() ? 'Hide password' : 'Show password'\"\n >\n <i\n class=\"fa\"\n [class]=\"(showPassword() ? 'fa-eye-slash' : 'fa-eye') + ' ' + getSize('rightIcon')\"\n aria-hidden=\"true\"\n ></i>\n </button>\n }\n\n <!-- ========================= Clear Button ========================= -->\n @if (showClear() && !disabledOrReadonly()) {\n <button\n type=\"button\"\n (click)=\"clear()\"\n class=\"zs:ml-1 zs:px-1 zs:text-slate-500 zs:hover:text-slate-700 \n zs:dark:text-slate-400 zs:dark:hover:text-slate-200\"\n [attr.aria-label]=\"'Clear ' + (label() || 'input')\"\n >\n <i\n class=\"fa fa-times\"\n [class]=\"getSize('rightIcon')\"\n aria-hidden=\"true\"\n ></i>\n </button>\n }\n\n <!-- ========================= Search Icon ========================= -->\n @if (type() === 'search' || showSearchIcon()) {\n <button\n type=\"button\"\n (click)=\"onSearch()\"\n class=\"zs:ml-1 zs:px-1 zs:text-slate-500 zs:hover:text-slate-700 \n zs:dark:text-slate-400 zs:dark:hover:text-slate-200\"\n aria-label=\"Search\"\n >\n <i\n class=\"fa fa-search\"\n [class]=\"getSize('rightIcon')\"\n aria-hidden=\"true\"\n ></i>\n </button>\n }\n\n </div>\n\n <!-- ========================= Error Messages ========================= -->\n <ZS-input-errors\n [Id]=\"Id()\"\n [errors]=\"[error()]\"\n >\n </ZS-input-errors>\n\n</div>", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: Label, selector: "ZS-label", inputs: ["label", "hint", "hintId", "size", "required", "for"] }, { kind: "component", type: InputErrors, selector: "ZS-input-errors", inputs: ["Id", "errors"] }] });
|
|
2778
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: Input, isStandalone: true, selector: "ZS-input", inputs: { Id: { classPropertyName: "Id", publicName: "Id", isSignal: true, isRequired: false, transformFunction: null }, iName: { classPropertyName: "iName", publicName: "iName", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, inputStyle: { classPropertyName: "inputStyle", publicName: "inputStyle", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, isReadonly: { classPropertyName: "isReadonly", publicName: "isReadonly", isSignal: true, isRequired: false, transformFunction: null }, autocomplete: { classPropertyName: "autocomplete", publicName: "autocomplete", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, inputmode: { classPropertyName: "inputmode", publicName: "inputmode", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, showSearchIcon: { classPropertyName: "showSearchIcon", publicName: "showSearchIcon", isSignal: true, isRequired: false, transformFunction: null }, showLoaderIconOnSearchInput: { classPropertyName: "showLoaderIconOnSearchInput", publicName: "showLoaderIconOnSearchInput", isSignal: true, isRequired: false, transformFunction: null }, maxlength: { classPropertyName: "maxlength", publicName: "maxlength", isSignal: true, isRequired: false, transformFunction: null }, minlength: { classPropertyName: "minlength", publicName: "minlength", isSignal: true, isRequired: false, transformFunction: null }, spellcheck: { classPropertyName: "spellcheck", publicName: "spellcheck", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, validateFns: { classPropertyName: "validateFns", publicName: "validateFns", isSignal: true, isRequired: false, transformFunction: null }, formatFn: { classPropertyName: "formatFn", publicName: "formatFn", isSignal: true, isRequired: false, transformFunction: null }, autofocus: { classPropertyName: "autofocus", publicName: "autofocus", isSignal: true, isRequired: false, transformFunction: null }, searchDebounceDelay: { classPropertyName: "searchDebounceDelay", publicName: "searchDebounceDelay", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", touched: "touchedChange", enterEv: "enterEv", focusEv: "focusEv", blurEv: "blurEv", changedEv: "changedEv", searchEv: "searchEv", clearedEv: "clearedEv", keydownEv: "keydownEv" }, viewQueries: [{ propertyName: "inputEl", first: true, predicate: ["inputEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<!-- ==============================================\n Input Field Component (ZS-Input)\n ============================================== -->\n\n<div class=\"zs:w-full\">\n\n <!-- ========================= Label & Hint ========================= -->\n <ZS-label [class]=\"(label() || hint()) ? 'zs:mb-1' : ''\"\n [label]=\"label()\"\n [hint]=\"hint()\"\n [required]=\"required()\"\n [hintId]=\"Id() + '-hint'\"\n [size]=\"size()\"\n [for]=\"Id()\"\n >\n </ZS-label>\n\n <!-- ========================= Input Container ========================= -->\n <div\n class=\"zs:relative zs:flex zs:items-center zs:w-full zs:transition-colors\"\n [class]=\"containerClasses() + ' ' + getSize('container')\"\n (click)=\"focusInput($event)\"\n >\n\n <!-- ========================= Left Icon ========================= -->\n @if (icon() || loaderIconOnSearchInput() || isDate()) {\n <i\n [ngClass]=\"(\n loaderIconOnSearchInput()\n ? loaderIconOnSearchInput()\n : \n icon() ? icon() : dateIcon()\n ) + ' ' + getSize('leftIcon')\"\n aria-hidden=\"true\"\n ></i>\n }\n\n <!-- ========================= Input Field ========================= -->\n <input\n #inputEl\n [id]=\"Id()\"\n [name]=\"iName()\"\n [type]=\"actualType\"\n [attr.placeholder]=\"placeholder()\"\n [value]=\"value()\"\n [disabled]=\"disabled() ? true : null\"\n [attr.min]=\"supportsMinMaxStep() ? min() : null\"\n [attr.max]=\"supportsMinMaxStep() ? max() : null\"\n [attr.step]=\"supportsMinMaxStep() ? step() : null\"\n [attr.required]=\"required() ? true : null\"\n (input)=\"onInput($event)\"\n (keydown.enter)=\"onEnter()\"\n (focus)=\"onFocus()\"\n (blur)=\"onBlur()\"\n (change)=\"onChange()\"\n [attr.autocomplete]=\"autocomplete()\"\n [attr.maxlength]=\"maxlength()\"\n [attr.minlength]=\"minlength()\"\n [attr.autofocus]=\"autofocus() ? true : null\"\n [attr.readonly]=\"isReadonly() ? true : null\"\n [attr.aria-invalid]=\"!!error()\"\n [attr.inputmode]=\"inputmode()\"\n [spellcheck]=\"spellcheck()\"\n class=\"zs:flex-1 zs:bg-transparent zs:outline-hidden zs:caret-current zs:w-full\"\n [class]=\"getSize('field')\"\n [attr.aria-describedby]=\"\n (hint() ? Id() + '-hint' : '') +\n (hint() && error() ? ' ' : '') +\n (error() ? Id() + '-error' : '')\n \"\n />\n\n <!-- ========================= Spacer (Maintains Height) ========================= -->\n <div class=\"zs:h-6\"></div>\n\n <!-- ========================= Password Toggle ========================= -->\n @if (type() === 'password') {\n <button\n type=\"button\"\n (click)=\"togglePassword()\"\n [attr.aria-pressed]=\"showPassword()\"\n class=\"zs:ml-1 zs:px-1 zs:text-slate-500 zs:hover:text-slate-700 \n zs:dark:text-slate-400 zs:dark:hover:text-slate-200 zs:transition-colors\"\n [attr.aria-label]=\"showPassword() ? 'Hide password' : 'Show password'\"\n >\n <i\n class=\"fa\"\n [class]=\"(showPassword() ? 'fa-eye-slash' : 'fa-eye') + ' ' + getSize('rightIcon')\"\n aria-hidden=\"true\"\n ></i>\n </button>\n }\n\n <!-- ========================= Clear Button ========================= -->\n @if (showClear() && !disabledOrReadonly()) {\n <button\n type=\"button\"\n (click)=\"clear()\"\n class=\"zs:ml-1 zs:px-1 zs:text-slate-500 zs:hover:text-slate-700 \n zs:dark:text-slate-400 zs:dark:hover:text-slate-200 zs:transition-colors\"\n [attr.aria-label]=\"'Clear ' + (label() || 'input')\"\n >\n <i\n class=\"fa fa-times\"\n [class]=\"getSize('rightIcon')\"\n aria-hidden=\"true\"\n ></i>\n </button>\n }\n\n <!-- ========================= Search Icon ========================= -->\n @if (type() === 'search' || showSearchIcon()) {\n <button\n type=\"button\"\n (click)=\"onSearch()\"\n class=\"zs:ml-1 zs:px-1 zs:text-slate-500 zs:hover:text-slate-700 \n zs:dark:text-slate-400 zs:dark:hover:text-slate-200 zs:transition-colors\"\n aria-label=\"Search\"\n >\n <i\n class=\"fa fa-search\"\n [class]=\"getSize('rightIcon')\"\n aria-hidden=\"true\"\n ></i>\n </button>\n }\n\n </div>\n\n <!-- ========================= Error Messages ========================= -->\n <ZS-input-errors\n [Id]=\"Id()\"\n [errors]=\"[error()]\"\n >\n </ZS-input-errors>\n\n</div>", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: Label, selector: "ZS-label", inputs: ["label", "hint", "hintId", "size", "required", "for"] }, { kind: "component", type: InputErrors, selector: "ZS-input-errors", inputs: ["Id", "errors"] }] });
|
|
2778
2779
|
}
|
|
2779
2780
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: Input, decorators: [{
|
|
2780
2781
|
type: Component,
|
|
2781
|
-
args: [{ selector: 'ZS-input', imports: [CommonModule, Label, InputErrors], template: "<!-- ==============================================\n Input Field Component (ZS-Input)\n ============================================== -->\n\n<div class=\"zs:w-full\">\n\n <!-- ========================= Label & Hint ========================= -->\n <ZS-label [class]=\"(label() || hint()) ? 'zs:mb-1' : ''\"\n [label]=\"label()\"\n [hint]=\"hint()\"\n [required]=\"required()\"\n [hintId]=\"Id() + '-hint'\"\n [size]=\"size()\"\n [for]=\"Id()\"\n >\n </ZS-label>\n\n <!-- ========================= Input Container ========================= -->\n <div\n class=\"zs:relative zs:flex zs:items-center zs:w-full\"\n [class]=\"containerClasses() + ' ' + getSize('container')\"\n (click)=\"focusInput($event)\"\n >\n\n <!-- ========================= Left Icon ========================= -->\n @if (icon() || loaderIconOnSearchInput() || isDate()) {\n <i\n [ngClass]=\"(\n loaderIconOnSearchInput()\n ? loaderIconOnSearchInput()\n : \n icon() ? icon() : dateIcon()\n ) + ' ' + getSize('leftIcon')\"\n aria-hidden=\"true\"\n ></i>\n }\n\n <!-- ========================= Input Field ========================= -->\n <input\n #inputEl\n [id]=\"Id()\"\n [name]=\"iName()\"\n [type]=\"actualType\"\n [attr.placeholder]=\"placeholder()\"\n [value]=\"value()\"\n [disabled]=\"disabled() ? true : null\"\n [attr.min]=\"supportsMinMaxStep() ? min() : null\"\n [attr.max]=\"supportsMinMaxStep() ? max() : null\"\n [attr.step]=\"supportsMinMaxStep() ? step() : null\"\n [attr.required]=\"required() ? true : null\"\n (input)=\"onInput($event)\"\n (keydown.enter)=\"onEnter()\"\n (focus)=\"onFocus()\"\n (blur)=\"onBlur()\"\n (change)=\"onChange()\"\n [attr.autocomplete]=\"autocomplete()\"\n [attr.maxlength]=\"maxlength()\"\n [attr.minlength]=\"minlength()\"\n [attr.autofocus]=\"autofocus() ? true : null\"\n [attr.readonly]=\"isReadonly() ? true : null\"\n [attr.aria-invalid]=\"!!error()\"\n [attr.inputmode]=\"inputmode()\"\n [spellcheck]=\"spellcheck()\"\n class=\"zs:flex-1 zs:bg-transparent zs:outline-hidden zs:caret-current zs:w-full\"\n [class]=\"getSize('field')\"\n [attr.aria-describedby]=\"\n (hint() ? Id() + '-hint' : '') +\n (hint() && error() ? ' ' : '') +\n (error() ? Id() + '-error' : '')\n \"\n />\n\n <!-- ========================= Spacer (Maintains Height) ========================= -->\n <div class=\"zs:h-6\"></div>\n\n <!-- ========================= Password Toggle ========================= -->\n @if (type() === 'password') {\n <button\n type=\"button\"\n (click)=\"togglePassword()\"\n [attr.aria-pressed]=\"showPassword()\"\n class=\"zs:ml-1 zs:px-1 zs:text-slate-500 zs:hover:text-slate-700 \n zs:dark:text-slate-400 zs:dark:hover:text-slate-200\"\n [attr.aria-label]=\"showPassword() ? 'Hide password' : 'Show password'\"\n >\n <i\n class=\"fa\"\n [class]=\"(showPassword() ? 'fa-eye-slash' : 'fa-eye') + ' ' + getSize('rightIcon')\"\n aria-hidden=\"true\"\n ></i>\n </button>\n }\n\n <!-- ========================= Clear Button ========================= -->\n @if (showClear() && !disabledOrReadonly()) {\n <button\n type=\"button\"\n (click)=\"clear()\"\n class=\"zs:ml-1 zs:px-1 zs:text-slate-500 zs:hover:text-slate-700 \n zs:dark:text-slate-400 zs:dark:hover:text-slate-200\"\n [attr.aria-label]=\"'Clear ' + (label() || 'input')\"\n >\n <i\n class=\"fa fa-times\"\n [class]=\"getSize('rightIcon')\"\n aria-hidden=\"true\"\n ></i>\n </button>\n }\n\n <!-- ========================= Search Icon ========================= -->\n @if (type() === 'search' || showSearchIcon()) {\n <button\n type=\"button\"\n (click)=\"onSearch()\"\n class=\"zs:ml-1 zs:px-1 zs:text-slate-500 zs:hover:text-slate-700 \n zs:dark:text-slate-400 zs:dark:hover:text-slate-200\"\n aria-label=\"Search\"\n >\n <i\n class=\"fa fa-search\"\n [class]=\"getSize('rightIcon')\"\n aria-hidden=\"true\"\n ></i>\n </button>\n }\n\n </div>\n\n <!-- ========================= Error Messages ========================= -->\n <ZS-input-errors\n [Id]=\"Id()\"\n [errors]=\"[error()]\"\n >\n </ZS-input-errors>\n\n</div>" }]
|
|
2782
|
+
args: [{ selector: 'ZS-input', imports: [CommonModule, Label, InputErrors], template: "<!-- ==============================================\n Input Field Component (ZS-Input)\n ============================================== -->\n\n<div class=\"zs:w-full\">\n\n <!-- ========================= Label & Hint ========================= -->\n <ZS-label [class]=\"(label() || hint()) ? 'zs:mb-1' : ''\"\n [label]=\"label()\"\n [hint]=\"hint()\"\n [required]=\"required()\"\n [hintId]=\"Id() + '-hint'\"\n [size]=\"size()\"\n [for]=\"Id()\"\n >\n </ZS-label>\n\n <!-- ========================= Input Container ========================= -->\n <div\n class=\"zs:relative zs:flex zs:items-center zs:w-full zs:transition-colors\"\n [class]=\"containerClasses() + ' ' + getSize('container')\"\n (click)=\"focusInput($event)\"\n >\n\n <!-- ========================= Left Icon ========================= -->\n @if (icon() || loaderIconOnSearchInput() || isDate()) {\n <i\n [ngClass]=\"(\n loaderIconOnSearchInput()\n ? loaderIconOnSearchInput()\n : \n icon() ? icon() : dateIcon()\n ) + ' ' + getSize('leftIcon')\"\n aria-hidden=\"true\"\n ></i>\n }\n\n <!-- ========================= Input Field ========================= -->\n <input\n #inputEl\n [id]=\"Id()\"\n [name]=\"iName()\"\n [type]=\"actualType\"\n [attr.placeholder]=\"placeholder()\"\n [value]=\"value()\"\n [disabled]=\"disabled() ? true : null\"\n [attr.min]=\"supportsMinMaxStep() ? min() : null\"\n [attr.max]=\"supportsMinMaxStep() ? max() : null\"\n [attr.step]=\"supportsMinMaxStep() ? step() : null\"\n [attr.required]=\"required() ? true : null\"\n (input)=\"onInput($event)\"\n (keydown.enter)=\"onEnter()\"\n (focus)=\"onFocus()\"\n (blur)=\"onBlur()\"\n (change)=\"onChange()\"\n [attr.autocomplete]=\"autocomplete()\"\n [attr.maxlength]=\"maxlength()\"\n [attr.minlength]=\"minlength()\"\n [attr.autofocus]=\"autofocus() ? true : null\"\n [attr.readonly]=\"isReadonly() ? true : null\"\n [attr.aria-invalid]=\"!!error()\"\n [attr.inputmode]=\"inputmode()\"\n [spellcheck]=\"spellcheck()\"\n class=\"zs:flex-1 zs:bg-transparent zs:outline-hidden zs:caret-current zs:w-full\"\n [class]=\"getSize('field')\"\n [attr.aria-describedby]=\"\n (hint() ? Id() + '-hint' : '') +\n (hint() && error() ? ' ' : '') +\n (error() ? Id() + '-error' : '')\n \"\n />\n\n <!-- ========================= Spacer (Maintains Height) ========================= -->\n <div class=\"zs:h-6\"></div>\n\n <!-- ========================= Password Toggle ========================= -->\n @if (type() === 'password') {\n <button\n type=\"button\"\n (click)=\"togglePassword()\"\n [attr.aria-pressed]=\"showPassword()\"\n class=\"zs:ml-1 zs:px-1 zs:text-slate-500 zs:hover:text-slate-700 \n zs:dark:text-slate-400 zs:dark:hover:text-slate-200 zs:transition-colors\"\n [attr.aria-label]=\"showPassword() ? 'Hide password' : 'Show password'\"\n >\n <i\n class=\"fa\"\n [class]=\"(showPassword() ? 'fa-eye-slash' : 'fa-eye') + ' ' + getSize('rightIcon')\"\n aria-hidden=\"true\"\n ></i>\n </button>\n }\n\n <!-- ========================= Clear Button ========================= -->\n @if (showClear() && !disabledOrReadonly()) {\n <button\n type=\"button\"\n (click)=\"clear()\"\n class=\"zs:ml-1 zs:px-1 zs:text-slate-500 zs:hover:text-slate-700 \n zs:dark:text-slate-400 zs:dark:hover:text-slate-200 zs:transition-colors\"\n [attr.aria-label]=\"'Clear ' + (label() || 'input')\"\n >\n <i\n class=\"fa fa-times\"\n [class]=\"getSize('rightIcon')\"\n aria-hidden=\"true\"\n ></i>\n </button>\n }\n\n <!-- ========================= Search Icon ========================= -->\n @if (type() === 'search' || showSearchIcon()) {\n <button\n type=\"button\"\n (click)=\"onSearch()\"\n class=\"zs:ml-1 zs:px-1 zs:text-slate-500 zs:hover:text-slate-700 \n zs:dark:text-slate-400 zs:dark:hover:text-slate-200 zs:transition-colors\"\n aria-label=\"Search\"\n >\n <i\n class=\"fa fa-search\"\n [class]=\"getSize('rightIcon')\"\n aria-hidden=\"true\"\n ></i>\n </button>\n }\n\n </div>\n\n <!-- ========================= Error Messages ========================= -->\n <ZS-input-errors\n [Id]=\"Id()\"\n [errors]=\"[error()]\"\n >\n </ZS-input-errors>\n\n</div>" }]
|
|
2782
2783
|
}], propDecorators: { Id: [{ type: i0.Input, args: [{ isSignal: true, alias: "Id", required: false }] }], iName: [{ type: i0.Input, args: [{ isSignal: true, alias: "iName", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], inputStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputStyle", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], isReadonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "isReadonly", required: false }] }], autocomplete: [{ type: i0.Input, args: [{ isSignal: true, alias: "autocomplete", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], inputmode: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputmode", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], showSearchIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "showSearchIcon", required: false }] }], showLoaderIconOnSearchInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "showLoaderIconOnSearchInput", required: false }] }], maxlength: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxlength", required: false }] }], minlength: [{ type: i0.Input, args: [{ isSignal: true, alias: "minlength", required: false }] }], spellcheck: [{ type: i0.Input, args: [{ isSignal: true, alias: "spellcheck", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }], validateFns: [{ type: i0.Input, args: [{ isSignal: true, alias: "validateFns", required: false }] }], formatFn: [{ type: i0.Input, args: [{ isSignal: true, alias: "formatFn", required: false }] }], autofocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "autofocus", required: false }] }], searchDebounceDelay: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchDebounceDelay", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], inputEl: [{ type: i0.ViewChild, args: ['inputEl', { isSignal: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }, { type: i0.Output, args: ["touchedChange"] }], enterEv: [{ type: i0.Output, args: ["enterEv"] }], focusEv: [{ type: i0.Output, args: ["focusEv"] }], blurEv: [{ type: i0.Output, args: ["blurEv"] }], changedEv: [{ type: i0.Output, args: ["changedEv"] }], searchEv: [{ type: i0.Output, args: ["searchEv"] }], clearedEv: [{ type: i0.Output, args: ["clearedEv"] }], keydownEv: [{ type: i0.Output, args: ["keydownEv"] }] } });
|
|
2783
2784
|
|
|
2784
2785
|
// ==============================================
|
|
@@ -2947,11 +2948,11 @@ class Range {
|
|
|
2947
2948
|
});
|
|
2948
2949
|
}
|
|
2949
2950
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: Range, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2950
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: Range, isStandalone: true, selector: "ZS-range", inputs: { Id: { classPropertyName: "Id", publicName: "Id", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, inputStyle: { classPropertyName: "inputStyle", publicName: "inputStyle", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, isReadonly: { classPropertyName: "isReadonly", publicName: "isReadonly", isSignal: true, isRequired: false, transformFunction: null }, showValue: { classPropertyName: "showValue", publicName: "showValue", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, viewQueries: [{ propertyName: "trackRef", first: true, predicate: ["track"], descendants: true, isSignal: true }], ngImport: i0, template: "<!-- ========================= Label ========================= -->\n<div class=\"zs:flex zs:flex-col zs:w-full zs:select-none\">\n <ZS-label [class]=\"(label() || hint()) ? 'zs:mb-1' : ''\"\n [label]=\"label()\"\n [hint]=\"hint()\"\n [hintId]=\"Id() + '-hint'\"\n [size]=\"size()\"\n [for]=\"Id()\"\n ></ZS-label>\n\n <!-- ========================= Slider Container ========================= -->\n <div class=\"zs:flex zs:items-center\"\n [class]=\"gapCLasses()\">\n \n <!-- ========================= Track ========================= -->\n <div\n #track\n [class]=\"rangeClasses()\"\n (mousedown)=\"onMouseDown($event)\"\n >\n \n <!-- ========================= Track Background ========================= -->\n <div\n class=\"zs:absolute zs:inset-0 zs:rounded-full zs:bg-linear-to-r zs:from-gray-200 zs:to-gray-300 zs:transition-all zs:duration-300 zs:group-hover:brightness-110\"\n [ngClass]=\"[\n ['secondary', 'dark'].includes(inputStyle()) ? 'zs:dark:from-gray-500 zs:dark:to-gray-600' : 'zs:dark:from-gray-700 zs:dark:to-gray-800',\n disabledOrReadonly() ? 'zs:cursor-not-allowed' : ''\n ]\"\n ></div>\n\n <!-- ========================= Fill (Progress) ========================= -->\n <div\n class=\"zs:absolute zs:left-0 zs:rounded-full zs:top-0 zs:h-full zs:transition-all zs:duration-200 zs:ease-out zs:shadow-sm\"\n [style.width.%]=\"percent()\"\n [ngClass]=\"[\n disabledOrReadonly() ? 'zs:cursor-not-allowed' : '',\n palette().buttonSolidPalette.btnBG,\n palette().buttonSolidPalette.btnBGHover\n ]\"\n ></div>\n\n <!-- ========================= Thumb (Handle) ========================= -->\n <div\n class=\"zs:absolute zs:top-1/2 zs:rounded-full zs:flex zs:items-center zs:justify-center \n zs:-translate-y-1/2 zs:transition-all zs:duration-200 zs:ease-out zs:shadow-md \n zs:group-hover:scale-110\"\n [style.left]=\"calcThumbPosition()\"\n [ngClass]=\"[ThumbClasses(), disabledOrReadonly() ? 'zs:cursor-not-allowed' : '']\"\n role=\"slider\"\n tabindex=\"0\"\n [attr.id]=\"Id()\"\n [attr.aria-valuemin]=\"min()\"\n [attr.aria-valuemax]=\"max()\"\n [attr.aria-valuenow]=\"value()\"\n [attr.aria-disabled]=\"disabledOrReadonly() || null\"\n [attr.aria-readonly]=\"isReadonly() || null\"\n [attr.aria-labelledby]=\"Id() + '-label'\"\n [attr.aria-describedby]=\"hint() ? Id() + '-hint' : null\"\n aria-orientation=\"horizontal\"\n >\n <i class=\"fa-solid fa-circle zs:text-white\" [ngClass]=\"dotCLasses()\"></i>\n </div>\n </div>\n\n <!-- ========================= Value Display ========================= -->\n @if (showValue()) {\n <div class=\"zs:text-sm zs:text-gray-600 zs:dark:text-gray-300 zs:font-medium\">\n {{ value() }}\n </div>\n }\n </div>\n</div>", styles: [".thumb-active{transition:transform .1s ease-in-out}\n"], dependencies: [{ kind: "component", type: Label, selector: "ZS-label", inputs: ["label", "hint", "hintId", "size", "required", "for"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2951
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: Range, isStandalone: true, selector: "ZS-range", inputs: { Id: { classPropertyName: "Id", publicName: "Id", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, inputStyle: { classPropertyName: "inputStyle", publicName: "inputStyle", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, isReadonly: { classPropertyName: "isReadonly", publicName: "isReadonly", isSignal: true, isRequired: false, transformFunction: null }, showValue: { classPropertyName: "showValue", publicName: "showValue", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, viewQueries: [{ propertyName: "trackRef", first: true, predicate: ["track"], descendants: true, isSignal: true }], ngImport: i0, template: "<!-- ========================= Label ========================= -->\n<div class=\"zs:flex zs:flex-col zs:w-full zs:select-none\">\n <ZS-label [class]=\"(label() || hint()) ? 'zs:mb-1' : ''\"\n [label]=\"label()\"\n [hint]=\"hint()\"\n [hintId]=\"Id() + '-hint'\"\n [size]=\"size()\"\n [for]=\"Id()\"\n ></ZS-label>\n\n <!-- ========================= Slider Container ========================= -->\n <div class=\"zs:flex zs:items-center\"\n [class]=\"gapCLasses()\">\n \n <!-- ========================= Track ========================= -->\n <div\n #track\n [class]=\"rangeClasses()\"\n (mousedown)=\"onMouseDown($event)\"\n >\n \n <!-- ========================= Track Background ========================= -->\n <div\n class=\"zs:absolute zs:inset-0 zs:rounded-full zs:bg-linear-to-r zs:from-gray-200 zs:to-gray-300 zs:transition-all zs:duration-300 zs:group-hover:brightness-110\"\n [ngClass]=\"[\n ['secondary', 'dark'].includes(inputStyle()) ? 'zs:dark:from-gray-500 zs:dark:to-gray-600' : 'zs:dark:from-gray-700 zs:dark:to-gray-800',\n disabledOrReadonly() ? 'zs:cursor-not-allowed' : ''\n ]\"\n ></div>\n\n <!-- ========================= Fill (Progress) ========================= -->\n <div\n class=\"zs:absolute zs:left-0 zs:rounded-full zs:top-0 zs:h-full zs:transition-all zs:duration-200 zs:ease-out zs:shadow-sm\"\n [style.width.%]=\"percent()\"\n [ngClass]=\"[\n disabledOrReadonly() ? 'zs:cursor-not-allowed' : '',\n palette().buttonSolidPalette.btnBG,\n palette().buttonSolidPalette.btnBGHover\n ]\"\n ></div>\n\n <!-- ========================= Thumb (Handle) ========================= -->\n <div\n class=\"zs:absolute zs:top-1/2 zs:rounded-full zs:flex zs:items-center zs:justify-center \n zs:-translate-y-1/2 zs:transition-all zs:duration-200 zs:ease-out zs:shadow-md \n zs:group-hover:scale-110\"\n [style.left]=\"calcThumbPosition()\"\n [ngClass]=\"[ThumbClasses(), disabledOrReadonly() ? 'zs:cursor-not-allowed' : '']\"\n role=\"slider\"\n tabindex=\"0\"\n [attr.id]=\"Id()\"\n [attr.aria-valuemin]=\"min()\"\n [attr.aria-valuemax]=\"max()\"\n [attr.aria-valuenow]=\"value()\"\n [attr.aria-disabled]=\"disabledOrReadonly() || null\"\n [attr.aria-readonly]=\"isReadonly() || null\"\n [attr.aria-labelledby]=\"Id() + '-label'\"\n [attr.aria-describedby]=\"hint() ? Id() + '-hint' : null\"\n aria-orientation=\"horizontal\"\n >\n <i class=\"fa-solid fa-circle zs:text-white\" [ngClass]=\"dotCLasses()\"></i>\n </div>\n </div>\n\n <!-- ========================= Value Display ========================= -->\n @if (showValue()) {\n <div class=\"zs:text-sm zs:text-gray-600 zs:dark:text-gray-300 zs:font-medium zs:transition-colors\">\n {{ value() }}\n </div>\n }\n </div>\n</div>", styles: [".thumb-active{transition:transform .1s ease-in-out}\n"], dependencies: [{ kind: "component", type: Label, selector: "ZS-label", inputs: ["label", "hint", "hintId", "size", "required", "for"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2951
2952
|
}
|
|
2952
2953
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: Range, decorators: [{
|
|
2953
2954
|
type: Component,
|
|
2954
|
-
args: [{ selector: 'ZS-range', imports: [Label, CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- ========================= Label ========================= -->\n<div class=\"zs:flex zs:flex-col zs:w-full zs:select-none\">\n <ZS-label [class]=\"(label() || hint()) ? 'zs:mb-1' : ''\"\n [label]=\"label()\"\n [hint]=\"hint()\"\n [hintId]=\"Id() + '-hint'\"\n [size]=\"size()\"\n [for]=\"Id()\"\n ></ZS-label>\n\n <!-- ========================= Slider Container ========================= -->\n <div class=\"zs:flex zs:items-center\"\n [class]=\"gapCLasses()\">\n \n <!-- ========================= Track ========================= -->\n <div\n #track\n [class]=\"rangeClasses()\"\n (mousedown)=\"onMouseDown($event)\"\n >\n \n <!-- ========================= Track Background ========================= -->\n <div\n class=\"zs:absolute zs:inset-0 zs:rounded-full zs:bg-linear-to-r zs:from-gray-200 zs:to-gray-300 zs:transition-all zs:duration-300 zs:group-hover:brightness-110\"\n [ngClass]=\"[\n ['secondary', 'dark'].includes(inputStyle()) ? 'zs:dark:from-gray-500 zs:dark:to-gray-600' : 'zs:dark:from-gray-700 zs:dark:to-gray-800',\n disabledOrReadonly() ? 'zs:cursor-not-allowed' : ''\n ]\"\n ></div>\n\n <!-- ========================= Fill (Progress) ========================= -->\n <div\n class=\"zs:absolute zs:left-0 zs:rounded-full zs:top-0 zs:h-full zs:transition-all zs:duration-200 zs:ease-out zs:shadow-sm\"\n [style.width.%]=\"percent()\"\n [ngClass]=\"[\n disabledOrReadonly() ? 'zs:cursor-not-allowed' : '',\n palette().buttonSolidPalette.btnBG,\n palette().buttonSolidPalette.btnBGHover\n ]\"\n ></div>\n\n <!-- ========================= Thumb (Handle) ========================= -->\n <div\n class=\"zs:absolute zs:top-1/2 zs:rounded-full zs:flex zs:items-center zs:justify-center \n zs:-translate-y-1/2 zs:transition-all zs:duration-200 zs:ease-out zs:shadow-md \n zs:group-hover:scale-110\"\n [style.left]=\"calcThumbPosition()\"\n [ngClass]=\"[ThumbClasses(), disabledOrReadonly() ? 'zs:cursor-not-allowed' : '']\"\n role=\"slider\"\n tabindex=\"0\"\n [attr.id]=\"Id()\"\n [attr.aria-valuemin]=\"min()\"\n [attr.aria-valuemax]=\"max()\"\n [attr.aria-valuenow]=\"value()\"\n [attr.aria-disabled]=\"disabledOrReadonly() || null\"\n [attr.aria-readonly]=\"isReadonly() || null\"\n [attr.aria-labelledby]=\"Id() + '-label'\"\n [attr.aria-describedby]=\"hint() ? Id() + '-hint' : null\"\n aria-orientation=\"horizontal\"\n >\n <i class=\"fa-solid fa-circle zs:text-white\" [ngClass]=\"dotCLasses()\"></i>\n </div>\n </div>\n\n <!-- ========================= Value Display ========================= -->\n @if (showValue()) {\n <div class=\"zs:text-sm zs:text-gray-600 zs:dark:text-gray-300 zs:font-medium\">\n {{ value() }}\n </div>\n }\n </div>\n</div>", styles: [".thumb-active{transition:transform .1s ease-in-out}\n"] }]
|
|
2955
|
+
args: [{ selector: 'ZS-range', imports: [Label, CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- ========================= Label ========================= -->\n<div class=\"zs:flex zs:flex-col zs:w-full zs:select-none\">\n <ZS-label [class]=\"(label() || hint()) ? 'zs:mb-1' : ''\"\n [label]=\"label()\"\n [hint]=\"hint()\"\n [hintId]=\"Id() + '-hint'\"\n [size]=\"size()\"\n [for]=\"Id()\"\n ></ZS-label>\n\n <!-- ========================= Slider Container ========================= -->\n <div class=\"zs:flex zs:items-center\"\n [class]=\"gapCLasses()\">\n \n <!-- ========================= Track ========================= -->\n <div\n #track\n [class]=\"rangeClasses()\"\n (mousedown)=\"onMouseDown($event)\"\n >\n \n <!-- ========================= Track Background ========================= -->\n <div\n class=\"zs:absolute zs:inset-0 zs:rounded-full zs:bg-linear-to-r zs:from-gray-200 zs:to-gray-300 zs:transition-all zs:duration-300 zs:group-hover:brightness-110\"\n [ngClass]=\"[\n ['secondary', 'dark'].includes(inputStyle()) ? 'zs:dark:from-gray-500 zs:dark:to-gray-600' : 'zs:dark:from-gray-700 zs:dark:to-gray-800',\n disabledOrReadonly() ? 'zs:cursor-not-allowed' : ''\n ]\"\n ></div>\n\n <!-- ========================= Fill (Progress) ========================= -->\n <div\n class=\"zs:absolute zs:left-0 zs:rounded-full zs:top-0 zs:h-full zs:transition-all zs:duration-200 zs:ease-out zs:shadow-sm\"\n [style.width.%]=\"percent()\"\n [ngClass]=\"[\n disabledOrReadonly() ? 'zs:cursor-not-allowed' : '',\n palette().buttonSolidPalette.btnBG,\n palette().buttonSolidPalette.btnBGHover\n ]\"\n ></div>\n\n <!-- ========================= Thumb (Handle) ========================= -->\n <div\n class=\"zs:absolute zs:top-1/2 zs:rounded-full zs:flex zs:items-center zs:justify-center \n zs:-translate-y-1/2 zs:transition-all zs:duration-200 zs:ease-out zs:shadow-md \n zs:group-hover:scale-110\"\n [style.left]=\"calcThumbPosition()\"\n [ngClass]=\"[ThumbClasses(), disabledOrReadonly() ? 'zs:cursor-not-allowed' : '']\"\n role=\"slider\"\n tabindex=\"0\"\n [attr.id]=\"Id()\"\n [attr.aria-valuemin]=\"min()\"\n [attr.aria-valuemax]=\"max()\"\n [attr.aria-valuenow]=\"value()\"\n [attr.aria-disabled]=\"disabledOrReadonly() || null\"\n [attr.aria-readonly]=\"isReadonly() || null\"\n [attr.aria-labelledby]=\"Id() + '-label'\"\n [attr.aria-describedby]=\"hint() ? Id() + '-hint' : null\"\n aria-orientation=\"horizontal\"\n >\n <i class=\"fa-solid fa-circle zs:text-white\" [ngClass]=\"dotCLasses()\"></i>\n </div>\n </div>\n\n <!-- ========================= Value Display ========================= -->\n @if (showValue()) {\n <div class=\"zs:text-sm zs:text-gray-600 zs:dark:text-gray-300 zs:font-medium zs:transition-colors\">\n {{ value() }}\n </div>\n }\n </div>\n</div>", styles: [".thumb-active{transition:transform .1s ease-in-out}\n"] }]
|
|
2955
2956
|
}], ctorParameters: () => [], propDecorators: { Id: [{ type: i0.Input, args: [{ isSignal: true, alias: "Id", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }], inputStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputStyle", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], isReadonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "isReadonly", required: false }] }], showValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "showValue", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], trackRef: [{ type: i0.ViewChild, args: ['track', { isSignal: true }] }] } });
|
|
2956
2957
|
|
|
2957
2958
|
// =================================================================================================
|
|
@@ -3160,11 +3161,11 @@ class Select {
|
|
|
3160
3161
|
this.selectedItemsEv.emit({ value, valid, fromForce });
|
|
3161
3162
|
}
|
|
3162
3163
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: Select, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3163
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: Select, isStandalone: true, selector: "ZS-select", inputs: { Id: { classPropertyName: "Id", publicName: "Id", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, isReadonly: { classPropertyName: "isReadonly", publicName: "isReadonly", isSignal: true, isRequired: false, transformFunction: null }, inputStyle: { classPropertyName: "inputStyle", publicName: "inputStyle", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, showSearch: { classPropertyName: "showSearch", publicName: "showSearch", isSignal: true, isRequired: false, transformFunction: null }, searchPlaceholder: { classPropertyName: "searchPlaceholder", publicName: "searchPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, noResultsText: { classPropertyName: "noResultsText", publicName: "noResultsText", isSignal: true, isRequired: false, transformFunction: null }, showClearButton: { classPropertyName: "showClearButton", publicName: "showClearButton", isSignal: true, isRequired: false, transformFunction: null }, searchDebounceDelay: { classPropertyName: "searchDebounceDelay", publicName: "searchDebounceDelay", isSignal: true, isRequired: false, transformFunction: null }, showLoaderIconOnSearchInput: { classPropertyName: "showLoaderIconOnSearchInput", publicName: "showLoaderIconOnSearchInput", isSignal: true, isRequired: false, transformFunction: null }, preselectedIds: { classPropertyName: "preselectedIds", publicName: "preselectedIds", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, validateFns: { classPropertyName: "validateFns", publicName: "validateFns", isSignal: true, isRequired: false, transformFunction: null }, selectedItems: { classPropertyName: "selectedItems", publicName: "selectedItems", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedItems: "selectedItemsChange", touched: "touchedChange", selectedItemsEv: "selectedItemsEv", selectionClearedEv: "selectionClearedEv" }, ngImport: i0, template: "<!-- ========================= Label & Hint ========================= -->\n<div class=\"zs:relative zs:w-full\">\n <ZS-label [class]=\"(label() || hint()) ? 'zs:mb-1' : ''\"\n [label]=\"label()\"\n [hint]=\"hint()\"\n [required]=\"required()\"\n [hintId]=\"Id() + '-hint'\"\n [for]=\"Id() + '-trigger'\">\n </ZS-label>\n\n <!-- ========================= Trigger Button (Combobox) ========================= -->\n <button\n id=\"{{ Id() + '-trigger' }}\"\n type=\"button\"\n role=\"combobox\"\n aria-haspopup=\"listbox\"\n [attr.aria-expanded]=\"isOpen()\"\n [attr.aria-controls]=\"Id() + '-options'\"\n [attr.aria-describedby]=\"hint() ? Id() + '-hint' : null\"\n [disabled]=\"disabledOrReadonly()\"\n [
|
|
3164
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: Select, isStandalone: true, selector: "ZS-select", inputs: { Id: { classPropertyName: "Id", publicName: "Id", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, isReadonly: { classPropertyName: "isReadonly", publicName: "isReadonly", isSignal: true, isRequired: false, transformFunction: null }, inputStyle: { classPropertyName: "inputStyle", publicName: "inputStyle", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, showSearch: { classPropertyName: "showSearch", publicName: "showSearch", isSignal: true, isRequired: false, transformFunction: null }, searchPlaceholder: { classPropertyName: "searchPlaceholder", publicName: "searchPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, noResultsText: { classPropertyName: "noResultsText", publicName: "noResultsText", isSignal: true, isRequired: false, transformFunction: null }, showClearButton: { classPropertyName: "showClearButton", publicName: "showClearButton", isSignal: true, isRequired: false, transformFunction: null }, searchDebounceDelay: { classPropertyName: "searchDebounceDelay", publicName: "searchDebounceDelay", isSignal: true, isRequired: false, transformFunction: null }, showLoaderIconOnSearchInput: { classPropertyName: "showLoaderIconOnSearchInput", publicName: "showLoaderIconOnSearchInput", isSignal: true, isRequired: false, transformFunction: null }, preselectedIds: { classPropertyName: "preselectedIds", publicName: "preselectedIds", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, validateFns: { classPropertyName: "validateFns", publicName: "validateFns", isSignal: true, isRequired: false, transformFunction: null }, selectedItems: { classPropertyName: "selectedItems", publicName: "selectedItems", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedItems: "selectedItemsChange", touched: "touchedChange", selectedItemsEv: "selectedItemsEv", selectionClearedEv: "selectionClearedEv" }, ngImport: i0, template: "<!-- ========================= Label & Hint ========================= -->\n<div class=\"zs:relative zs:w-full\">\n <ZS-label [class]=\"(label() || hint()) ? 'zs:mb-1' : ''\"\n [label]=\"label()\"\n [hint]=\"hint()\"\n [required]=\"required()\"\n [hintId]=\"Id() + '-hint'\"\n [for]=\"Id() + '-trigger'\">\n </ZS-label>\n\n <!-- ========================= Trigger Button (Combobox) ========================= -->\n <button\n id=\"{{ Id() + '-trigger' }}\"\n type=\"button\"\n role=\"combobox\"\n aria-haspopup=\"listbox\"\n [attr.aria-expanded]=\"isOpen()\"\n [attr.aria-controls]=\"Id() + '-options'\"\n [attr.aria-describedby]=\"hint() ? Id() + '-hint' : null\"\n [disabled]=\"disabledOrReadonly()\"\n class=\"zs:transition-colors\"\n [ngClass]=\"containerClasses()\"\n (click)=\"toggleDropdown()\">\n\n @if (selectedItems().length) {\n @if (!multiple()) {\n <!-- Single Selection -->\n <span class=\"zs:truncate\">{{ selectedItems()[0].name }}</span>\n } @else {\n <!-- Multiple Selection -->\n <div class=\"zs:flex zs:flex-wrap zs:gap-2 zs:items-center zs:max-w-full\">\n @for (item of selectedItems().slice(0, 6); track item.id) {\n <span\n [ngClass]=\"showItemsClass()\"\n class=\"zs:flex zs:gap-1 zs:justify-center zs:items-center zs:text-gray-900 \n zs:dark:text-gray-100 zs:pl-3 zs:pr-2 zs:py-1.5 zs:rounded-full zs:text-sm \n zs:max-w-[140px] zs:transition-colors\">\n <span class=\"zs:truncate\">{{ item.name }}</span>\n <button\n type=\"button\"\n [attr.aria-label]=\"'Remove ' + item.name\"\n class=\"zs:px-1 zs:text-gray-950 zs:hover:text-gray-600 zs:transition-colors zs:dark:text-gray-50 zs:dark:hover:text-gray-300\"\n (click)=\"selectItem([item]); $event.stopPropagation()\">\n <i class=\"fas fa-times text-xs\"></i>\n </button>\n </span>\n }\n\n @if (selectedItems().length > 6) {\n <!-- +More Indicator -->\n <span class=\"zs:text-gray-500 zs:text-sm\">\n +{{ selectedItems().length - 6 }} more\n </span>\n }\n </div>\n }\n } @else {\n <!-- Placeholder -->\n <span>{{ placeholder() }}</span>\n }\n\n @if (!disabledOrReadonly()) {\n <!-- Dropdown Toggle Icon -->\n <i class=\"fas zs:ml-2\"\n [ngClass]=\"[isOpen() ? 'fa-chevron-up' : 'fa-chevron-down']\"\n >\n </i>\n }\n </button>\n\n <!-- ========================= Dropdown Menu ========================= -->\n @if (isOpen()) {\n <div\n id=\"{{ Id() + '-options' }}\"\n role=\"listbox\"\n [attr.aria-multiselectable]=\"multiple() ? 'true' : null\"\n class=\"zs:absolute {{ zIndices.selectDropdown }} zs:w-full zs:mt-1 zs:rounded-lg \n zs:shadow-lg zs:dark:shadow-gray-400/30 zs:overflow-hidden zs:bg-white zs:border zs:transition-colors\n zs:border-gray-300 zs:dark:bg-gray-900 zs:dark:border-gray-600 zs:dark:text-gray-100\">\n\n @if (showSearch()) {\n <!-- Search Input -->\n <div class=\"zs:relative zs:p-2 zs:border-b zs:border-gray-200 zs:dark:border-gray-700 zs:transition-colors\">\n <ZS-input\n role=\"searchbox\"\n aria-label=\"Search options\"\n [iName]=\"'ZS-select-[' + Id() + ']'\"\n type=\"search\"\n [placeholder]=\"searchPlaceholder()\"\n [value]=\"searchQuery()\"\n (searchEv)=\"searchQuery.set($event)\"\n (click)=\"$event.stopPropagation()\"\n [autofocus]=\"true\"\n [inputStyle]=\"this.error().length ? 'danger' : inputStyle()\"\n [searchDebounceDelay]=\"searchDebounceDelay()\"\n [showLoaderIconOnSearchInput]=\"showLoaderIconOnSearchInput()\">\n </ZS-input>\n </div>\n }\n\n <!-- Options List -->\n <div class=\"zs:max-h-60 zs:overflow-y-auto\">\n @for (item of filteredItems(); track trackByFn($index, item)) {\n <div\n role=\"option\"\n [attr.aria-selected]=\"inSelectItems(item)\"\n class=\"zs:px-4 zs:py-2 zs:cursor-pointer zs:flex zs:items-center zs:justify-between zs:transition-colors zs:text-gray-900 zs:dark:text-gray-100\"\n [ngClass]=\"getBgSelectClasses(inSelectItems(item))\"\n (click)=\"selectItem([item]); $event.stopPropagation()\">\n <span class=\"zs:truncate\">{{ item.name }}</span>\n @if (inSelectItems(item)) {\n <i class=\"fas fa-check zs:text-gray-950 zs:dark:text-gray-50 zs:ml-2 zs:transition-colors\"></i>\n }\n </div>\n }\n\n @if (filteredItems().length === 0) {\n <!-- No Results Message -->\n <div class=\"zs:px-4 zs:py-3 zs:text-center zs:text-gray-500 zs:dark:text-gray-400 zs:transition-colors\">\n {{ noResultsText() }}\n </div>\n }\n </div>\n </div>\n }\n\n <!-- ========================= Clear Selection Button ========================= -->\n @if (selectedItems().length && showClearButton() && !disabledOrReadonly()) {\n <button\n type=\"button\"\n aria-label=\"Clear all selections\"\n [class]=\"clearClass()\"\n (click)=\"clearSelection()\">\n <i class=\"fas fa-times zs:mr-1\"></i> Clear selection\n </button>\n }\n\n <!-- ========================= Error Messages ========================= -->\n <ZS-input-errors\n [Id]=\"Id()\"\n [errors]=\"[error()]\"\n >\n </ZS-input-errors>\n</div>", styles: [":host{display:block}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: Input, selector: "ZS-input", inputs: ["Id", "iName", "label", "hint", "placeholder", "type", "inputStyle", "disabled", "isReadonly", "autocomplete", "required", "inputmode", "icon", "showSearchIcon", "showLoaderIconOnSearchInput", "maxlength", "minlength", "spellcheck", "min", "max", "step", "validateFns", "formatFn", "autofocus", "searchDebounceDelay", "size", "value", "touched"], outputs: ["valueChange", "touchedChange", "enterEv", "focusEv", "blurEv", "changedEv", "searchEv", "clearedEv", "keydownEv"] }, { kind: "component", type: Label, selector: "ZS-label", inputs: ["label", "hint", "hintId", "size", "required", "for"] }, { kind: "component", type: InputErrors, selector: "ZS-input-errors", inputs: ["Id", "errors"] }] });
|
|
3164
3165
|
}
|
|
3165
3166
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: Select, decorators: [{
|
|
3166
3167
|
type: Component,
|
|
3167
|
-
args: [{ selector: 'ZS-select', imports: [CommonModule, FormsModule, Input, Label, InputErrors], template: "<!-- ========================= Label & Hint ========================= -->\n<div class=\"zs:relative zs:w-full\">\n <ZS-label [class]=\"(label() || hint()) ? 'zs:mb-1' : ''\"\n [label]=\"label()\"\n [hint]=\"hint()\"\n [required]=\"required()\"\n [hintId]=\"Id() + '-hint'\"\n [for]=\"Id() + '-trigger'\">\n </ZS-label>\n\n <!-- ========================= Trigger Button (Combobox) ========================= -->\n <button\n id=\"{{ Id() + '-trigger' }}\"\n type=\"button\"\n role=\"combobox\"\n aria-haspopup=\"listbox\"\n [attr.aria-expanded]=\"isOpen()\"\n [attr.aria-controls]=\"Id() + '-options'\"\n [attr.aria-describedby]=\"hint() ? Id() + '-hint' : null\"\n [disabled]=\"disabledOrReadonly()\"\n [
|
|
3168
|
+
args: [{ selector: 'ZS-select', imports: [CommonModule, FormsModule, Input, Label, InputErrors], template: "<!-- ========================= Label & Hint ========================= -->\n<div class=\"zs:relative zs:w-full\">\n <ZS-label [class]=\"(label() || hint()) ? 'zs:mb-1' : ''\"\n [label]=\"label()\"\n [hint]=\"hint()\"\n [required]=\"required()\"\n [hintId]=\"Id() + '-hint'\"\n [for]=\"Id() + '-trigger'\">\n </ZS-label>\n\n <!-- ========================= Trigger Button (Combobox) ========================= -->\n <button\n id=\"{{ Id() + '-trigger' }}\"\n type=\"button\"\n role=\"combobox\"\n aria-haspopup=\"listbox\"\n [attr.aria-expanded]=\"isOpen()\"\n [attr.aria-controls]=\"Id() + '-options'\"\n [attr.aria-describedby]=\"hint() ? Id() + '-hint' : null\"\n [disabled]=\"disabledOrReadonly()\"\n class=\"zs:transition-colors\"\n [ngClass]=\"containerClasses()\"\n (click)=\"toggleDropdown()\">\n\n @if (selectedItems().length) {\n @if (!multiple()) {\n <!-- Single Selection -->\n <span class=\"zs:truncate\">{{ selectedItems()[0].name }}</span>\n } @else {\n <!-- Multiple Selection -->\n <div class=\"zs:flex zs:flex-wrap zs:gap-2 zs:items-center zs:max-w-full\">\n @for (item of selectedItems().slice(0, 6); track item.id) {\n <span\n [ngClass]=\"showItemsClass()\"\n class=\"zs:flex zs:gap-1 zs:justify-center zs:items-center zs:text-gray-900 \n zs:dark:text-gray-100 zs:pl-3 zs:pr-2 zs:py-1.5 zs:rounded-full zs:text-sm \n zs:max-w-[140px] zs:transition-colors\">\n <span class=\"zs:truncate\">{{ item.name }}</span>\n <button\n type=\"button\"\n [attr.aria-label]=\"'Remove ' + item.name\"\n class=\"zs:px-1 zs:text-gray-950 zs:hover:text-gray-600 zs:transition-colors zs:dark:text-gray-50 zs:dark:hover:text-gray-300\"\n (click)=\"selectItem([item]); $event.stopPropagation()\">\n <i class=\"fas fa-times text-xs\"></i>\n </button>\n </span>\n }\n\n @if (selectedItems().length > 6) {\n <!-- +More Indicator -->\n <span class=\"zs:text-gray-500 zs:text-sm\">\n +{{ selectedItems().length - 6 }} more\n </span>\n }\n </div>\n }\n } @else {\n <!-- Placeholder -->\n <span>{{ placeholder() }}</span>\n }\n\n @if (!disabledOrReadonly()) {\n <!-- Dropdown Toggle Icon -->\n <i class=\"fas zs:ml-2\"\n [ngClass]=\"[isOpen() ? 'fa-chevron-up' : 'fa-chevron-down']\"\n >\n </i>\n }\n </button>\n\n <!-- ========================= Dropdown Menu ========================= -->\n @if (isOpen()) {\n <div\n id=\"{{ Id() + '-options' }}\"\n role=\"listbox\"\n [attr.aria-multiselectable]=\"multiple() ? 'true' : null\"\n class=\"zs:absolute {{ zIndices.selectDropdown }} zs:w-full zs:mt-1 zs:rounded-lg \n zs:shadow-lg zs:dark:shadow-gray-400/30 zs:overflow-hidden zs:bg-white zs:border zs:transition-colors\n zs:border-gray-300 zs:dark:bg-gray-900 zs:dark:border-gray-600 zs:dark:text-gray-100\">\n\n @if (showSearch()) {\n <!-- Search Input -->\n <div class=\"zs:relative zs:p-2 zs:border-b zs:border-gray-200 zs:dark:border-gray-700 zs:transition-colors\">\n <ZS-input\n role=\"searchbox\"\n aria-label=\"Search options\"\n [iName]=\"'ZS-select-[' + Id() + ']'\"\n type=\"search\"\n [placeholder]=\"searchPlaceholder()\"\n [value]=\"searchQuery()\"\n (searchEv)=\"searchQuery.set($event)\"\n (click)=\"$event.stopPropagation()\"\n [autofocus]=\"true\"\n [inputStyle]=\"this.error().length ? 'danger' : inputStyle()\"\n [searchDebounceDelay]=\"searchDebounceDelay()\"\n [showLoaderIconOnSearchInput]=\"showLoaderIconOnSearchInput()\">\n </ZS-input>\n </div>\n }\n\n <!-- Options List -->\n <div class=\"zs:max-h-60 zs:overflow-y-auto\">\n @for (item of filteredItems(); track trackByFn($index, item)) {\n <div\n role=\"option\"\n [attr.aria-selected]=\"inSelectItems(item)\"\n class=\"zs:px-4 zs:py-2 zs:cursor-pointer zs:flex zs:items-center zs:justify-between zs:transition-colors zs:text-gray-900 zs:dark:text-gray-100\"\n [ngClass]=\"getBgSelectClasses(inSelectItems(item))\"\n (click)=\"selectItem([item]); $event.stopPropagation()\">\n <span class=\"zs:truncate\">{{ item.name }}</span>\n @if (inSelectItems(item)) {\n <i class=\"fas fa-check zs:text-gray-950 zs:dark:text-gray-50 zs:ml-2 zs:transition-colors\"></i>\n }\n </div>\n }\n\n @if (filteredItems().length === 0) {\n <!-- No Results Message -->\n <div class=\"zs:px-4 zs:py-3 zs:text-center zs:text-gray-500 zs:dark:text-gray-400 zs:transition-colors\">\n {{ noResultsText() }}\n </div>\n }\n </div>\n </div>\n }\n\n <!-- ========================= Clear Selection Button ========================= -->\n @if (selectedItems().length && showClearButton() && !disabledOrReadonly()) {\n <button\n type=\"button\"\n aria-label=\"Clear all selections\"\n [class]=\"clearClass()\"\n (click)=\"clearSelection()\">\n <i class=\"fas fa-times zs:mr-1\"></i> Clear selection\n </button>\n }\n\n <!-- ========================= Error Messages ========================= -->\n <ZS-input-errors\n [Id]=\"Id()\"\n [errors]=\"[error()]\"\n >\n </ZS-input-errors>\n</div>", styles: [":host{display:block}\n"] }]
|
|
3168
3169
|
}], ctorParameters: () => [], propDecorators: { Id: [{ type: i0.Input, args: [{ isSignal: true, alias: "Id", required: false }] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], isReadonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "isReadonly", required: false }] }], inputStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputStyle", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], showSearch: [{ type: i0.Input, args: [{ isSignal: true, alias: "showSearch", required: false }] }], searchPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchPlaceholder", required: false }] }], noResultsText: [{ type: i0.Input, args: [{ isSignal: true, alias: "noResultsText", required: false }] }], showClearButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showClearButton", required: false }] }], searchDebounceDelay: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchDebounceDelay", required: false }] }], showLoaderIconOnSearchInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "showLoaderIconOnSearchInput", required: false }] }], preselectedIds: [{ type: i0.Input, args: [{ isSignal: true, alias: "preselectedIds", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], validateFns: [{ type: i0.Input, args: [{ isSignal: true, alias: "validateFns", required: false }] }], selectedItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedItems", required: false }] }, { type: i0.Output, args: ["selectedItemsChange"] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }, { type: i0.Output, args: ["touchedChange"] }], selectedItemsEv: [{ type: i0.Output, args: ["selectedItemsEv"] }], selectionClearedEv: [{ type: i0.Output, args: ["selectionClearedEv"] }] } });
|
|
3169
3170
|
|
|
3170
3171
|
class Toggle {
|
|
@@ -3252,27 +3253,28 @@ class Footer {
|
|
|
3252
3253
|
showDefultContent = input(true, ...(ngDevMode ? [{ debugName: "showDefultContent" }] : []));
|
|
3253
3254
|
pages = input([], ...(ngDevMode ? [{ debugName: "pages" }] : []));
|
|
3254
3255
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: Footer, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3255
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: Footer, isStandalone: true, selector: "ZS-footer", inputs: { showDefultContent: { classPropertyName: "showDefultContent", publicName: "showDefultContent", isSignal: true, isRequired: false, transformFunction: null }, pages: { classPropertyName: "pages", publicName: "pages", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<footer class=\"zs:bg-gray-700 zs:dark:bg-gray-950 \nzs:dark:text-gray-300 zs:text-white zs:py-6\">\n <div class=\"zs:text-center zs:flex zs:flex-col zs:gap-8\">\n <p class=\"zs:text-xs zs:sm:text-sm zs:px-6\">\n <ng-content select=\"[rights]\"></ng-content>\n\n @if(showDefultContent()) {\n ©\n <span class=\"zs:font-semibold\">2026 Ziad Ahmed Shalaby</span>.\n All rights reserved.\n }\n </p>\n\n @if(pages().length) {\n <nav class=\"zs:flex zs:flex-wrap zs:justify-center zs:items-center\n zs:gap-y-6 zs:gap-x-4 zs:sm:gap-x-6 zs:md:gap-x-8 zs:lg:gap-x-10 zs:w-full\">\n @for (page of pages(); track $index) {\n <a class=\"zs:text-[10px] zs:sm:text-xs \n zs:hover:underline zs:text-center zs:min-w-30\" \n [routerLink]=\"page.routerLink\">\n {{ page.label }}\n </a>\n }\n </nav>\n }\n </div>\n</footer>\n", styles: [""], 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"] }] });
|
|
3256
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: Footer, isStandalone: true, selector: "ZS-footer", inputs: { showDefultContent: { classPropertyName: "showDefultContent", publicName: "showDefultContent", isSignal: true, isRequired: false, transformFunction: null }, pages: { classPropertyName: "pages", publicName: "pages", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<footer class=\"zs:bg-gray-700 zs:dark:bg-gray-950 \nzs:dark:text-gray-300 zs:text-white zs:py-6 zs:transition-colors\">\n <div class=\"zs:text-center zs:flex zs:flex-col zs:gap-8\">\n <p class=\"zs:text-xs zs:sm:text-sm zs:px-6\">\n <ng-content select=\"[rights]\"></ng-content>\n\n @if(showDefultContent()) {\n ©\n <span class=\"zs:font-semibold\">2026 Ziad Ahmed Shalaby</span>.\n All rights reserved.\n }\n </p>\n\n @if(pages().length) {\n <nav class=\"zs:flex zs:flex-wrap zs:justify-center zs:items-center\n zs:gap-y-6 zs:gap-x-4 zs:sm:gap-x-6 zs:md:gap-x-8 zs:lg:gap-x-10 zs:w-full\">\n @for (page of pages(); track $index) {\n <a class=\"zs:text-[10px] zs:sm:text-xs \n zs:hover:underline zs:text-center zs:min-w-30\" \n [routerLink]=\"page.routerLink\">\n {{ page.label }}\n </a>\n }\n </nav>\n }\n </div>\n</footer>\n", styles: [""], 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"] }] });
|
|
3256
3257
|
}
|
|
3257
3258
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: Footer, decorators: [{
|
|
3258
3259
|
type: Component,
|
|
3259
|
-
args: [{ selector: 'ZS-footer', imports: [RouterModule], template: "<footer class=\"zs:bg-gray-700 zs:dark:bg-gray-950 \nzs:dark:text-gray-300 zs:text-white zs:py-6\">\n <div class=\"zs:text-center zs:flex zs:flex-col zs:gap-8\">\n <p class=\"zs:text-xs zs:sm:text-sm zs:px-6\">\n <ng-content select=\"[rights]\"></ng-content>\n\n @if(showDefultContent()) {\n ©\n <span class=\"zs:font-semibold\">2026 Ziad Ahmed Shalaby</span>.\n All rights reserved.\n }\n </p>\n\n @if(pages().length) {\n <nav class=\"zs:flex zs:flex-wrap zs:justify-center zs:items-center\n zs:gap-y-6 zs:gap-x-4 zs:sm:gap-x-6 zs:md:gap-x-8 zs:lg:gap-x-10 zs:w-full\">\n @for (page of pages(); track $index) {\n <a class=\"zs:text-[10px] zs:sm:text-xs \n zs:hover:underline zs:text-center zs:min-w-30\" \n [routerLink]=\"page.routerLink\">\n {{ page.label }}\n </a>\n }\n </nav>\n }\n </div>\n</footer>\n" }]
|
|
3260
|
+
args: [{ selector: 'ZS-footer', imports: [RouterModule], template: "<footer class=\"zs:bg-gray-700 zs:dark:bg-gray-950 \nzs:dark:text-gray-300 zs:text-white zs:py-6 zs:transition-colors\">\n <div class=\"zs:text-center zs:flex zs:flex-col zs:gap-8\">\n <p class=\"zs:text-xs zs:sm:text-sm zs:px-6\">\n <ng-content select=\"[rights]\"></ng-content>\n\n @if(showDefultContent()) {\n ©\n <span class=\"zs:font-semibold\">2026 Ziad Ahmed Shalaby</span>.\n All rights reserved.\n }\n </p>\n\n @if(pages().length) {\n <nav class=\"zs:flex zs:flex-wrap zs:justify-center zs:items-center\n zs:gap-y-6 zs:gap-x-4 zs:sm:gap-x-6 zs:md:gap-x-8 zs:lg:gap-x-10 zs:w-full\">\n @for (page of pages(); track $index) {\n <a class=\"zs:text-[10px] zs:sm:text-xs \n zs:hover:underline zs:text-center zs:min-w-30\" \n [routerLink]=\"page.routerLink\">\n {{ page.label }}\n </a>\n }\n </nav>\n }\n </div>\n</footer>\n" }]
|
|
3260
3261
|
}], propDecorators: { showDefultContent: [{ type: i0.Input, args: [{ isSignal: true, alias: "showDefultContent", required: false }] }], pages: [{ type: i0.Input, args: [{ isSignal: true, alias: "pages", required: false }] }] } });
|
|
3261
3262
|
|
|
3262
3263
|
class Sidebar {
|
|
3263
3264
|
zIndices = zIndices;
|
|
3264
3265
|
header = input('Side Bar', ...(ngDevMode ? [{ debugName: "header" }] : []));
|
|
3265
3266
|
openSide = model(false, ...(ngDevMode ? [{ debugName: "openSide" }] : []));
|
|
3267
|
+
floating = input(false, ...(ngDevMode ? [{ debugName: "floating" }] : []));
|
|
3266
3268
|
toggleSide() {
|
|
3267
3269
|
this.openSide.update((v) => !v);
|
|
3268
3270
|
}
|
|
3269
3271
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: Sidebar, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
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
|
|
3272
|
+
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 }, floating: { classPropertyName: "floating", publicName: "floating", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { openSide: "openSideChange" }, ngImport: i0, template: "<div \nclass=\"zs:h-full {{ zIndices.sideBar }} zs:transition-[max-width]\"\n[ngClass]=\"[\n floating() ? 'zs:absolute' : 'zs:md:relative zs:absolute',\n openSide() ? 'zs:max-w-[75vw]' : 'zs:max-w-0'\n]\"\n>\n <!-- Sidebar -->\n <div\n id=\"sidebar\"\n role=\"complementary\"\n aria-labelledby=\"sidebar-header\"\n class=\"\n zs:h-full \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-[translate]\n zs:duration-600 sidebar-shadow-right \n motion-reduce:zs:transition-none zs:overflow-hidden\n \"\n\n [attr.aria-hidden]=\"!openSide()\"\n [attr.inert]=\"!openSide() ? '' : null\"\n\n [ngClass]=\"\n openSide()\n ? 'zs:translate-x-0'\n : '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 zs:hover:bg-gray-300\n zs:dark:hover:bg-gray-600\n zs:transition-[width,opacity,color,background-color] 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-[width,opacity,color,background-color] 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:delay-0 zs:opacity-0 zs:pointer-events-none' : 'zs:delay-300 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;position:relative;width:fit-content}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
|
|
3271
3273
|
}
|
|
3272
3274
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: Sidebar, decorators: [{
|
|
3273
3275
|
type: Component,
|
|
3274
|
-
args: [{ selector: 'ZS-sidebar', standalone: true, imports: [CommonModule], template: "<div
|
|
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"] }] } });
|
|
3276
|
+
args: [{ selector: 'ZS-sidebar', standalone: true, imports: [CommonModule], template: "<div \nclass=\"zs:h-full {{ zIndices.sideBar }} zs:transition-[max-width]\"\n[ngClass]=\"[\n floating() ? 'zs:absolute' : 'zs:md:relative zs:absolute',\n openSide() ? 'zs:max-w-[75vw]' : 'zs:max-w-0'\n]\"\n>\n <!-- Sidebar -->\n <div\n id=\"sidebar\"\n role=\"complementary\"\n aria-labelledby=\"sidebar-header\"\n class=\"\n zs:h-full \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-[translate]\n zs:duration-600 sidebar-shadow-right \n motion-reduce:zs:transition-none zs:overflow-hidden\n \"\n\n [attr.aria-hidden]=\"!openSide()\"\n [attr.inert]=\"!openSide() ? '' : null\"\n\n [ngClass]=\"\n openSide()\n ? 'zs:translate-x-0'\n : '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 zs:hover:bg-gray-300\n zs:dark:hover:bg-gray-600\n zs:transition-[width,opacity,color,background-color] 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-[width,opacity,color,background-color] 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:delay-0 zs:opacity-0 zs:pointer-events-none' : 'zs:delay-300 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;position:relative;width:fit-content}\n"] }]
|
|
3277
|
+
}], 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"] }], floating: [{ type: i0.Input, args: [{ isSignal: true, alias: "floating", required: false }] }] } });
|
|
3276
3278
|
|
|
3277
3279
|
/*
|
|
3278
3280
|
* Public API Surface of ngx-zs-component
|