@ziadshalaby/ngx-zs-component 3.1.9 → 3.2.1
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.
|
@@ -204,11 +204,11 @@ class Alert {
|
|
|
204
204
|
this.alertService.onAlertClosed(id);
|
|
205
205
|
}
|
|
206
206
|
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"] }] });
|
|
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 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
208
|
}
|
|
209
209
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: Alert, decorators: [{
|
|
210
210
|
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"] }]
|
|
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 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
212
|
}], 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
213
|
|
|
214
214
|
// ==============================================
|
|
@@ -352,7 +352,7 @@ class NavItem {
|
|
|
352
352
|
// Helper Methods
|
|
353
353
|
// ==============================================
|
|
354
354
|
getItemClasses = (item) => {
|
|
355
|
-
const base = 'zs:text-gray-600 zs:dark:text-gray-300';
|
|
355
|
+
const base = 'zs:text-gray-600 zs:dark:text-gray-300 zs:transition-colors';
|
|
356
356
|
const defaultTextClass = base + ' zs:hover:text-gray-900 zs:dark:hover:text-gray-100';
|
|
357
357
|
const defaultBgClass = base + ' zs:hover:bg-gray-100 zs:dark:hover:bg-gray-700';
|
|
358
358
|
if (item.colorClass) {
|
|
@@ -368,11 +368,11 @@ class NavItem {
|
|
|
368
368
|
: '';
|
|
369
369
|
}
|
|
370
370
|
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"] }] });
|
|
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 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
372
|
}
|
|
373
373
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: NavItem, decorators: [{
|
|
374
374
|
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}" }]
|
|
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 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
376
|
}], 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
377
|
|
|
378
378
|
// Unified palette map with all configurations
|
|
@@ -1180,11 +1180,11 @@ class Connection {
|
|
|
1180
1180
|
this.offlineListener();
|
|
1181
1181
|
}
|
|
1182
1182
|
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"] }] });
|
|
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 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
1184
|
}
|
|
1185
1185
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: Connection, decorators: [{
|
|
1186
1186
|
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"] }]
|
|
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 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
1188
|
}], ctorParameters: () => [], propDecorators: { isOnlineEv: [{ type: i0.Output, args: ["isOnlineEv"] }] } });
|
|
1189
1189
|
|
|
1190
1190
|
class ExtractorService {
|
|
@@ -1393,11 +1393,11 @@ class Button {
|
|
|
1393
1393
|
}
|
|
1394
1394
|
}
|
|
1395
1395
|
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"] }] });
|
|
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 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
1397
|
}
|
|
1398
1398
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: Button, decorators: [{
|
|
1399
1399
|
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"] }]
|
|
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 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
1401
|
}], 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
1402
|
|
|
1403
1403
|
// ==============================================
|
|
@@ -1624,11 +1624,11 @@ class Navbar {
|
|
|
1624
1624
|
this.resizeObserver.disconnect();
|
|
1625
1625
|
}
|
|
1626
1626
|
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"] }] });
|
|
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 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 zs:z-700 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
1628
|
}
|
|
1629
1629
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: Navbar, decorators: [{
|
|
1630
1630
|
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"] }]
|
|
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 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 zs:z-700 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
1632
|
}], 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
1633
|
|
|
1634
1634
|
class Page404 {
|
|
@@ -1664,11 +1664,11 @@ class Page404 {
|
|
|
1664
1664
|
// ========================================================================
|
|
1665
1665
|
onAction = output();
|
|
1666
1666
|
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"] }] });
|
|
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 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
1668
|
}
|
|
1669
1669
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: Page404, decorators: [{
|
|
1670
1670
|
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"] }]
|
|
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 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
1672
|
}], 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
1673
|
|
|
1674
1674
|
// ========================================================================
|
|
@@ -1739,11 +1739,11 @@ class Pagination {
|
|
|
1739
1739
|
this.goToPage(this.currentPage() - 1);
|
|
1740
1740
|
}
|
|
1741
1741
|
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"] }] });
|
|
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 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
1743
|
}
|
|
1744
1744
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: Pagination, decorators: [{
|
|
1745
1745
|
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"] }]
|
|
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 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
1747
|
}], 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
1748
|
|
|
1749
1749
|
// ========================================================================
|
|
@@ -1765,7 +1765,7 @@ class ScrollToTop {
|
|
|
1765
1765
|
/**
|
|
1766
1766
|
* Tailwind CSS class for the circle's color (background ring).
|
|
1767
1767
|
*/
|
|
1768
|
-
circleColorClass = input('zs:text-gray-400/60 zs:dark:text-gray-600/70 zs:group-hover:brightness-110', ...(ngDevMode ? [{ debugName: "circleColorClass" }] : []));
|
|
1768
|
+
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
1769
|
/**
|
|
1770
1770
|
* BaseColors class for the arrow and progress indicator color.
|
|
1771
1771
|
*/
|
|
@@ -1902,11 +1902,11 @@ class Spinner {
|
|
|
1902
1902
|
borderColor = computed(() => ColorMapping.get(this.color())?.border, ...(ngDevMode ? [{ debugName: "borderColor" }] : []));
|
|
1903
1903
|
textColor = computed(() => ColorMapping.get(this.color())?.text, ...(ngDevMode ? [{ debugName: "textColor" }] : []));
|
|
1904
1904
|
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 [
|
|
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 [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
1906
|
}
|
|
1907
1907
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: Spinner, decorators: [{
|
|
1908
1908
|
type: Component,
|
|
1909
|
-
args: [{ selector: 'ZS-spinner', imports: [CommonModule], template: "<!-- ========================= Loader Wrapper ========================= -->\n@if(loading()) {\n <div \n [
|
|
1909
|
+
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
1910
|
}], 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
1911
|
|
|
1912
1912
|
// ==============================================
|
|
@@ -1925,7 +1925,7 @@ class ThemeToggle {
|
|
|
1925
1925
|
// ==============================================
|
|
1926
1926
|
// Inputs
|
|
1927
1927
|
// ==============================================
|
|
1928
|
-
bodyClass = input('zs:bg-white zs:dark:bg-gray-900 zs:text-gray-900 zs:dark:text-gray-100', ...(ngDevMode ? [{ debugName: "bodyClass" }] : []));
|
|
1928
|
+
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
1929
|
showDefaultUI = input(true, ...(ngDevMode ? [{ debugName: "showDefaultUI" }] : []));
|
|
1930
1930
|
setManualTheme = input(null, ...(ngDevMode ? [{ debugName: "setManualTheme" }] : []));
|
|
1931
1931
|
fromTop = input(1 / 4, ...(ngDevMode ? [{ debugName: "fromTop" }] : []));
|
|
@@ -2067,11 +2067,11 @@ class ThemeToggle {
|
|
|
2067
2067
|
}
|
|
2068
2068
|
}
|
|
2069
2069
|
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"] }] });
|
|
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 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
2071
|
}
|
|
2072
2072
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: ThemeToggle, decorators: [{
|
|
2073
2073
|
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"] }]
|
|
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 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
2075
|
}], 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
2076
|
type: HostListener,
|
|
2077
2077
|
args: ['document:click', ['$event']]
|
|
@@ -2105,11 +2105,11 @@ class Label {
|
|
|
2105
2105
|
return sizes[this.size()];
|
|
2106
2106
|
}, ...(ngDevMode ? [{ debugName: "sizeClasses" }] : []));
|
|
2107
2107
|
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"] }] });
|
|
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 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
2109
|
}
|
|
2110
2110
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: Label, decorators: [{
|
|
2111
2111
|
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"] }]
|
|
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 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
2113
|
}], 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
2114
|
|
|
2115
2115
|
// ==============================================
|
|
@@ -2198,11 +2198,11 @@ class Checkbox {
|
|
|
2198
2198
|
}
|
|
2199
2199
|
}
|
|
2200
2200
|
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"] }] });
|
|
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 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
2202
|
}
|
|
2203
2203
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: Checkbox, decorators: [{
|
|
2204
2204
|
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>" }]
|
|
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 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
2206
|
}], 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
2207
|
|
|
2208
2208
|
// ==============================================================================
|
|
@@ -2434,11 +2434,11 @@ class FileInput {
|
|
|
2434
2434
|
});
|
|
2435
2435
|
}
|
|
2436
2436
|
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"] }] });
|
|
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 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
2438
|
}
|
|
2439
2439
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: FileInput, decorators: [{
|
|
2440
2440
|
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"] }]
|
|
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 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
2442
|
}], 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
2443
|
|
|
2444
2444
|
// ==============================================================================
|
|
@@ -2774,11 +2774,11 @@ class Input {
|
|
|
2774
2774
|
this.changedEv.emit({ value, valid, fromForce });
|
|
2775
2775
|
}
|
|
2776
2776
|
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"] }] });
|
|
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 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
2778
|
}
|
|
2779
2779
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: Input, decorators: [{
|
|
2780
2780
|
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>" }]
|
|
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 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
2782
|
}], 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
2783
|
|
|
2784
2784
|
// ==============================================
|
|
@@ -2947,11 +2947,11 @@ class Range {
|
|
|
2947
2947
|
});
|
|
2948
2948
|
}
|
|
2949
2949
|
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 });
|
|
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 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
2951
|
}
|
|
2952
2952
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: Range, decorators: [{
|
|
2953
2953
|
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"] }]
|
|
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 zs:transition-colors\">\n {{ value() }}\n </div>\n }\n </div>\n</div>", styles: [".thumb-active{transition:transform .1s ease-in-out}\n"] }]
|
|
2955
2955
|
}], 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
2956
|
|
|
2957
2957
|
// =================================================================================================
|
|
@@ -3160,11 +3160,11 @@ class Select {
|
|
|
3160
3160
|
this.selectedItemsEv.emit({ value, valid, fromForce });
|
|
3161
3161
|
}
|
|
3162
3162
|
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 [
|
|
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 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
3164
|
}
|
|
3165
3165
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: Select, decorators: [{
|
|
3166
3166
|
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 [
|
|
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 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
3168
|
}], 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
3169
|
|
|
3170
3170
|
class Toggle {
|
|
@@ -3252,11 +3252,11 @@ class Footer {
|
|
|
3252
3252
|
showDefultContent = input(true, ...(ngDevMode ? [{ debugName: "showDefultContent" }] : []));
|
|
3253
3253
|
pages = input([], ...(ngDevMode ? [{ debugName: "pages" }] : []));
|
|
3254
3254
|
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"] }] });
|
|
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 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
3256
|
}
|
|
3257
3257
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: Footer, decorators: [{
|
|
3258
3258
|
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" }]
|
|
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 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
3260
|
}], propDecorators: { showDefultContent: [{ type: i0.Input, args: [{ isSignal: true, alias: "showDefultContent", required: false }] }], pages: [{ type: i0.Input, args: [{ isSignal: true, alias: "pages", required: false }] }] } });
|
|
3261
3261
|
|
|
3262
3262
|
class Sidebar {
|
|
@@ -3267,11 +3267,11 @@ class Sidebar {
|
|
|
3267
3267
|
this.openSide.update((v) => !v);
|
|
3268
3268
|
}
|
|
3269
3269
|
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 class=\"zs:relative zs:h-full zs:w-fit {{ zIndices.sideBar }}\">\n <!-- Sidebar -->\n <div\n id=\"sidebar\"\n role=\"complementary\"\n aria-labelledby=\"sidebar-header\"\n class=\"\n zs:h-full \n zs:
|
|
3270
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.9", type: Sidebar, isStandalone: true, selector: "ZS-sidebar", inputs: { header: { classPropertyName: "header", publicName: "header", isSignal: true, isRequired: false, transformFunction: null }, openSide: { classPropertyName: "openSide", publicName: "openSide", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { openSide: "openSideChange" }, ngImport: i0, template: "<div class=\"zs:relative zs:h-full zs:w-fit {{ zIndices.sideBar }}\">\n <!-- Sidebar -->\n <div\n id=\"sidebar\"\n role=\"complementary\"\n aria-labelledby=\"sidebar-header\"\n class=\"\n zs:h-full \n zs:relative\n zs:bg-white/90 zs:dark:bg-slate-800/90 zs:backdrop-blur-md \n zs:transition-[width,opacity,color,background-color]\n zs:duration-500 sidebar-shadow-right \n motion-reduce:zs:transition-none\n \"\n\n [attr.aria-hidden]=\"!openSide()\"\n [attr.inert]=\"!openSide() ? '' : null\"\n\n [ngClass]=\"\n openSide()\n ? 'zs:w-[75vw] zs:sm:w-[55vw] zs:md:w-[40vw] zs:lg:w-[25vw] zs:xl:w-[15vw] zs:opacity-100'\n : 'zs:w-0 zs:overflow-hidden zs:opacity-0'\n \"\n >\n <!-- Close Sidebar Button -->\n <button\n class=\"\n zs:absolute zs:rounded-lg zs:p-1 zs:cursor-pointer\n zs:top-3 zs:right-2\n zs:bg-gray-200 zs:dark:bg-gray-700 zs:hover:bg-gray-300\n zs:dark:hover:bg-gray-600\n zs:transition-[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;width:fit-content}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
|
|
3271
3271
|
}
|
|
3272
3272
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: Sidebar, decorators: [{
|
|
3273
3273
|
type: Component,
|
|
3274
|
-
args: [{ selector: 'ZS-sidebar', standalone: true, imports: [CommonModule], template: "<div class=\"zs:relative zs:h-full zs:w-fit {{ zIndices.sideBar }}\">\n <!-- Sidebar -->\n <div\n id=\"sidebar\"\n role=\"complementary\"\n aria-labelledby=\"sidebar-header\"\n class=\"\n zs:h-full \n zs:
|
|
3274
|
+
args: [{ selector: 'ZS-sidebar', standalone: true, imports: [CommonModule], template: "<div class=\"zs:relative zs:h-full zs:w-fit {{ zIndices.sideBar }}\">\n <!-- Sidebar -->\n <div\n id=\"sidebar\"\n role=\"complementary\"\n aria-labelledby=\"sidebar-header\"\n class=\"\n zs:h-full \n zs:relative\n zs:bg-white/90 zs:dark:bg-slate-800/90 zs:backdrop-blur-md \n zs:transition-[width,opacity,color,background-color]\n zs:duration-500 sidebar-shadow-right \n motion-reduce:zs:transition-none\n \"\n\n [attr.aria-hidden]=\"!openSide()\"\n [attr.inert]=\"!openSide() ? '' : null\"\n\n [ngClass]=\"\n openSide()\n ? 'zs:w-[75vw] zs:sm:w-[55vw] zs:md:w-[40vw] zs:lg:w-[25vw] zs:xl:w-[15vw] zs:opacity-100'\n : 'zs:w-0 zs:overflow-hidden zs:opacity-0'\n \"\n >\n <!-- Close Sidebar Button -->\n <button\n class=\"\n zs:absolute zs:rounded-lg zs:p-1 zs:cursor-pointer\n zs:top-3 zs:right-2\n zs:bg-gray-200 zs:dark:bg-gray-700 zs:hover:bg-gray-300\n zs:dark:hover:bg-gray-600\n zs:transition-[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;width:fit-content}\n"] }]
|
|
3275
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
3276
|
|
|
3277
3277
|
/*
|