@ziadshalaby/ngx-zs-component 3.2.4 → 3.2.6
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.
|
@@ -205,11 +205,11 @@ class Alert {
|
|
|
205
205
|
this.alertService.onAlertClosed(id);
|
|
206
206
|
}
|
|
207
207
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: Alert, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
208
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: Alert, isStandalone: true, selector: "ZS-alert", inputs: { positionClass: { classPropertyName: "positionClass", publicName: "positionClass", isSignal: true, isRequired: false, transformFunction: null }, direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null }, maxh: { classPropertyName: "maxh", publicName: "maxh", isSignal: true, isRequired: false, transformFunction: null }, defaultShowCloseButton: { classPropertyName: "defaultShowCloseButton", publicName: "defaultShowCloseButton", isSignal: true, isRequired: false, transformFunction: null }, defaultAutoClose: { classPropertyName: "defaultAutoClose", publicName: "defaultAutoClose", isSignal: true, isRequired: false, transformFunction: null }, defaultDuration: { classPropertyName: "defaultDuration", publicName: "defaultDuration", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<!-- ========================= Alert Container ========================= -->\n<div\n class=\"zs:fixed zs:ml-4 zs:break-all {{ zIndices.alert }} zs:flex zs:flex-col \n zs:overflow-y-auto scroll scroll-secondary zs:p-2 zs:gap-3\"\n [ngClass]=\"[positionClass(), maxh()]\"\n role=\"region\"\n aria-label=\"Notification area\"\n aria-live=\"polite\"\n>\n\n @for (alert of alertConfig(); track alert.id) {\n\n <!-- ========================= Alert Card ========================= -->\n <div\n class=\"zs:pointer-events-auto zs:max-w-sm zs:min-h-14 zs:rounded-lg zs:border zs:p-4 zs:shadow-md zs:dark:shadow-gray-400/30\n
|
|
208
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: Alert, isStandalone: true, selector: "ZS-alert", inputs: { positionClass: { classPropertyName: "positionClass", publicName: "positionClass", isSignal: true, isRequired: false, transformFunction: null }, direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null }, maxh: { classPropertyName: "maxh", publicName: "maxh", isSignal: true, isRequired: false, transformFunction: null }, defaultShowCloseButton: { classPropertyName: "defaultShowCloseButton", publicName: "defaultShowCloseButton", isSignal: true, isRequired: false, transformFunction: null }, defaultAutoClose: { classPropertyName: "defaultAutoClose", publicName: "defaultAutoClose", isSignal: true, isRequired: false, transformFunction: null }, defaultDuration: { classPropertyName: "defaultDuration", publicName: "defaultDuration", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<!-- ========================= Alert Container ========================= -->\n<div\n class=\"zs:fixed zs:ml-4 zs:break-all {{ zIndices.alert }} zs:flex zs:flex-col \n zs:overflow-y-auto scroll scroll-secondary zs:p-2 zs:gap-3\"\n [ngClass]=\"[positionClass(), maxh()]\"\n role=\"region\"\n aria-label=\"Notification area\"\n aria-live=\"polite\"\n>\n\n @for (alert of alertConfig(); track alert.id) {\n\n <!-- ========================= Alert Card ========================= -->\n <div\n class=\"zs:pointer-events-auto zs:max-w-sm zs:min-h-14 zs:rounded-lg zs:border zs:p-4 zs:shadow-md zs:dark:shadow-gray-400/30\n 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"] }] });
|
|
209
209
|
}
|
|
210
210
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: Alert, decorators: [{
|
|
211
211
|
type: Component,
|
|
212
|
-
args: [{ selector: 'ZS-alert', imports: [CommonModule], template: "<!-- ========================= Alert Container ========================= -->\n<div\n class=\"zs:fixed zs:ml-4 zs:break-all {{ zIndices.alert }} zs:flex zs:flex-col \n zs:overflow-y-auto scroll scroll-secondary zs:p-2 zs:gap-3\"\n [ngClass]=\"[positionClass(), maxh()]\"\n role=\"region\"\n aria-label=\"Notification area\"\n aria-live=\"polite\"\n>\n\n @for (alert of alertConfig(); track alert.id) {\n\n <!-- ========================= Alert Card ========================= -->\n <div\n class=\"zs:pointer-events-auto zs:max-w-sm zs:min-h-14 zs:rounded-lg zs:border zs:p-4 zs:shadow-md zs:dark:shadow-gray-400/30\n
|
|
212
|
+
args: [{ selector: 'ZS-alert', imports: [CommonModule], template: "<!-- ========================= Alert Container ========================= -->\n<div\n class=\"zs:fixed zs:ml-4 zs:break-all {{ zIndices.alert }} zs:flex zs:flex-col \n zs:overflow-y-auto scroll scroll-secondary zs:p-2 zs:gap-3\"\n [ngClass]=\"[positionClass(), maxh()]\"\n role=\"region\"\n aria-label=\"Notification area\"\n aria-live=\"polite\"\n>\n\n @for (alert of alertConfig(); track alert.id) {\n\n <!-- ========================= Alert Card ========================= -->\n <div\n class=\"zs:pointer-events-auto zs:max-w-sm zs:min-h-14 zs:rounded-lg zs:border zs:p-4 zs:shadow-md zs:dark:shadow-gray-400/30\n 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"] }]
|
|
213
213
|
}], ctorParameters: () => [], propDecorators: { positionClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "positionClass", required: false }] }], direction: [{ type: i0.Input, args: [{ isSignal: true, alias: "direction", required: false }] }], maxh: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxh", required: false }] }], defaultShowCloseButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultShowCloseButton", required: false }] }], defaultAutoClose: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultAutoClose", required: false }] }], defaultDuration: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultDuration", required: false }] }] } });
|
|
214
214
|
|
|
215
215
|
// ==============================================
|
|
@@ -353,7 +353,7 @@ class NavItem {
|
|
|
353
353
|
// Helper Methods
|
|
354
354
|
// ==============================================
|
|
355
355
|
getItemClasses = (item) => {
|
|
356
|
-
const base = 'zs:text-gray-600 zs:dark:text-gray-300
|
|
356
|
+
const base = 'zs:text-gray-600 zs:dark:text-gray-300';
|
|
357
357
|
const defaultTextClass = base + ' zs:hover:text-gray-900 zs:dark:hover:text-gray-100';
|
|
358
358
|
const defaultBgClass = base + ' zs:hover:bg-gray-100 zs:dark:hover:bg-gray-700';
|
|
359
359
|
if (item.colorClass) {
|
|
@@ -369,11 +369,11 @@ class NavItem {
|
|
|
369
369
|
: '';
|
|
370
370
|
}
|
|
371
371
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: NavItem, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
372
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: NavItem, isStandalone: true, selector: "ZS-nav-item", inputs: { item: { classPropertyName: "item", publicName: "item", isSignal: true, isRequired: true, transformFunction: null }, collectionName: { classPropertyName: "collectionName", publicName: "collectionName", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { anyItemClickedEv: "anyItemClickedEv" }, ngImport: i0, template: "<!-- ========================= Conditional Rendering ========================= -->\n@if (item()) {\n @if (item().children?.length) {\n\n <!-- ========================= Parent Item with Dropdown ========================= -->\n <div class=\"zs:relative zs:w-full\">\n\n <!-- ========================= Main Toggle Button ========================= -->\n <button\n type=\"button\"\n (click)=\"toggle()\"\n [ngClass]=\"getItemClasses(item())\"\n class=\"zs:flex zs:w-full zs:items-center zs:gap-2 zs:rounded-md zs:px-3 zs:py-2 zs:text-left \n zs:text-sm zs:font-medium zs:md:text-base\"\n aria-haspopup=\"true\"\n [attr.aria-expanded]=\"isOpen()\"\n [attr.aria-controls]=\"'submenu-' + index()\"\n >\n <div class=\"zs:flex zs:items-center\">\n @if (item().icon) {\n <i [ngClass]=\"[\n item().icon, \n item().iconClass ?? '',\n (item().icon && item().label) ? 'zs:mr-2' : ''\n ]\" aria-hidden=\"true\"></i>\n }\n <span class=\"zs:wrap-break-word\" [ngClass]=\"labelLineClass(item())\">{{ item().label }}</span>\n </div>\n <i class=\"fas fa-chevron-down zs:ml-auto zs:p-0.5 zs:text-xs\" aria-hidden=\"true\"></i>\n </button>\n\n <!-- ========================= Dropdown Menu ========================= -->\n <div\n [id]=\"'submenu-' + index()\"\n [ngClass]=\"{\n 'zs:block': isOpen(),\n 'zs:hidden': !isOpen(),\n 'zs:absolute zs:left-4 zs:w-54 zs:mt-1 zs:p-2 zs:bg-white zs:dark:bg-gray-800 \n zs:rounded-md shadow-md-all shadow-md-all-night
|
|
372
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: NavItem, isStandalone: true, selector: "ZS-nav-item", inputs: { item: { classPropertyName: "item", publicName: "item", isSignal: true, isRequired: true, transformFunction: null }, collectionName: { classPropertyName: "collectionName", publicName: "collectionName", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { anyItemClickedEv: "anyItemClickedEv" }, ngImport: i0, template: "<!-- ========================= Conditional Rendering ========================= -->\n@if (item()) {\n @if (item().children?.length) {\n\n <!-- ========================= Parent Item with Dropdown ========================= -->\n <div class=\"zs:relative zs:w-full\">\n\n <!-- ========================= Main Toggle Button ========================= -->\n <button\n type=\"button\"\n (click)=\"toggle()\"\n [ngClass]=\"getItemClasses(item())\"\n class=\"zs:flex zs:w-full zs:items-center zs:gap-2 zs:rounded-md zs:px-3 zs:py-2 zs:text-left \n zs:text-sm zs:font-medium zs:md:text-base\"\n aria-haspopup=\"true\"\n [attr.aria-expanded]=\"isOpen()\"\n [attr.aria-controls]=\"'submenu-' + index()\"\n >\n <div class=\"zs:flex zs:items-center\">\n @if (item().icon) {\n <i [ngClass]=\"[\n item().icon, \n item().iconClass ?? '',\n (item().icon && item().label) ? 'zs:mr-2' : ''\n ]\" aria-hidden=\"true\"></i>\n }\n <span class=\"zs:wrap-break-word\" [ngClass]=\"labelLineClass(item())\">{{ item().label }}</span>\n </div>\n <i class=\"fas fa-chevron-down zs:ml-auto zs:p-0.5 zs:text-xs\" aria-hidden=\"true\"></i>\n </button>\n\n <!-- ========================= Dropdown Menu ========================= -->\n <div\n [id]=\"'submenu-' + index()\"\n [ngClass]=\"{\n 'zs:block': isOpen(),\n 'zs:hidden': !isOpen(),\n 'zs:absolute zs:left-4 zs:w-54 zs:mt-1 zs:p-2 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 }} zs:flex zs:flex-col zs:gap-2\"\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"] }] });
|
|
373
373
|
}
|
|
374
374
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: NavItem, decorators: [{
|
|
375
375
|
type: Component,
|
|
376
|
-
args: [{ selector: 'ZS-nav-item', imports: [CommonModule, RouterModule], template: "<!-- ========================= Conditional Rendering ========================= -->\n@if (item()) {\n @if (item().children?.length) {\n\n <!-- ========================= Parent Item with Dropdown ========================= -->\n <div class=\"zs:relative zs:w-full\">\n\n <!-- ========================= Main Toggle Button ========================= -->\n <button\n type=\"button\"\n (click)=\"toggle()\"\n [ngClass]=\"getItemClasses(item())\"\n class=\"zs:flex zs:w-full zs:items-center zs:gap-2 zs:rounded-md zs:px-3 zs:py-2 zs:text-left \n zs:text-sm zs:font-medium zs:md:text-base\"\n aria-haspopup=\"true\"\n [attr.aria-expanded]=\"isOpen()\"\n [attr.aria-controls]=\"'submenu-' + index()\"\n >\n <div class=\"zs:flex zs:items-center\">\n @if (item().icon) {\n <i [ngClass]=\"[\n item().icon, \n item().iconClass ?? '',\n (item().icon && item().label) ? 'zs:mr-2' : ''\n ]\" aria-hidden=\"true\"></i>\n }\n <span class=\"zs:wrap-break-word\" [ngClass]=\"labelLineClass(item())\">{{ item().label }}</span>\n </div>\n <i class=\"fas fa-chevron-down zs:ml-auto zs:p-0.5 zs:text-xs\" aria-hidden=\"true\"></i>\n </button>\n\n <!-- ========================= Dropdown Menu ========================= -->\n <div\n [id]=\"'submenu-' + index()\"\n [ngClass]=\"{\n 'zs:block': isOpen(),\n 'zs:hidden': !isOpen(),\n 'zs:absolute zs:left-4 zs:w-54 zs:mt-1 zs:p-2 zs:bg-white zs:dark:bg-gray-800 \n zs:rounded-md shadow-md-all shadow-md-all-night
|
|
376
|
+
args: [{ selector: 'ZS-nav-item', imports: [CommonModule, RouterModule], template: "<!-- ========================= Conditional Rendering ========================= -->\n@if (item()) {\n @if (item().children?.length) {\n\n <!-- ========================= Parent Item with Dropdown ========================= -->\n <div class=\"zs:relative zs:w-full\">\n\n <!-- ========================= Main Toggle Button ========================= -->\n <button\n type=\"button\"\n (click)=\"toggle()\"\n [ngClass]=\"getItemClasses(item())\"\n class=\"zs:flex zs:w-full zs:items-center zs:gap-2 zs:rounded-md zs:px-3 zs:py-2 zs:text-left \n zs:text-sm zs:font-medium zs:md:text-base\"\n aria-haspopup=\"true\"\n [attr.aria-expanded]=\"isOpen()\"\n [attr.aria-controls]=\"'submenu-' + index()\"\n >\n <div class=\"zs:flex zs:items-center\">\n @if (item().icon) {\n <i [ngClass]=\"[\n item().icon, \n item().iconClass ?? '',\n (item().icon && item().label) ? 'zs:mr-2' : ''\n ]\" aria-hidden=\"true\"></i>\n }\n <span class=\"zs:wrap-break-word\" [ngClass]=\"labelLineClass(item())\">{{ item().label }}</span>\n </div>\n <i class=\"fas fa-chevron-down zs:ml-auto zs:p-0.5 zs:text-xs\" aria-hidden=\"true\"></i>\n </button>\n\n <!-- ========================= Dropdown Menu ========================= -->\n <div\n [id]=\"'submenu-' + index()\"\n [ngClass]=\"{\n 'zs:block': isOpen(),\n 'zs:hidden': !isOpen(),\n 'zs:absolute zs:left-4 zs:w-54 zs:mt-1 zs:p-2 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 }} zs:flex zs:flex-col zs:gap-2\"\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}" }]
|
|
377
377
|
}], ctorParameters: () => [], propDecorators: { item: [{ type: i0.Input, args: [{ isSignal: true, alias: "item", required: true }] }], collectionName: [{ type: i0.Input, args: [{ isSignal: true, alias: "collectionName", required: true }] }], anyItemClickedEv: [{ type: i0.Output, args: ["anyItemClickedEv"] }] } });
|
|
378
378
|
|
|
379
379
|
// Unified palette map with all configurations
|
|
@@ -906,7 +906,7 @@ class Card {
|
|
|
906
906
|
zs:will-change-transform
|
|
907
907
|
zs:translate-x-0
|
|
908
908
|
zs:translate-y-0
|
|
909
|
-
zs:transition zs:duration-500`;
|
|
909
|
+
zs:transition-[transform,opacity] zs:duration-500`;
|
|
910
910
|
}
|
|
911
911
|
// Hidden state
|
|
912
912
|
if (animation === 'none') {
|
|
@@ -926,7 +926,7 @@ class Card {
|
|
|
926
926
|
const bodyClass = this.bodyClass();
|
|
927
927
|
const ringPalette = ringPaletteMap.get(style);
|
|
928
928
|
const cardPalette = cardPaletteMap.get(style);
|
|
929
|
-
const base = 'zs:w-full zs:h-full zs:overflow-hidden zs:flex zs:flex-col zs:gap-4 zs:rounded-lg zs:transition-
|
|
929
|
+
const base = 'zs:w-full zs:h-full zs:overflow-hidden zs:flex zs:flex-col zs:gap-4 zs:rounded-lg zs:transition-transform zs:duration-300 motion-reduce:zs:transition-none';
|
|
930
930
|
// ---------------------
|
|
931
931
|
// Border Handling
|
|
932
932
|
// ---------------------
|
|
@@ -1153,11 +1153,11 @@ class Carousel {
|
|
|
1153
1153
|
trackEl.nativeElement.style.transition = transition ?? 'none';
|
|
1154
1154
|
}
|
|
1155
1155
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: Carousel, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1156
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: Carousel, isStandalone: true, selector: "ZS-carousel", inputs: { itemsNumber: { classPropertyName: "itemsNumber", publicName: "itemsNumber", isSignal: true, isRequired: true, transformFunction: null }, arrows: { classPropertyName: "arrows", publicName: "arrows", isSignal: true, isRequired: false, transformFunction: null }, arrowColor: { classPropertyName: "arrowColor", publicName: "arrowColor", isSignal: true, isRequired: false, transformFunction: null }, showIndicators: { classPropertyName: "showIndicators", publicName: "showIndicators", isSignal: true, isRequired: false, transformFunction: null }, autoPlay: { classPropertyName: "autoPlay", publicName: "autoPlay", isSignal: true, isRequired: false, transformFunction: null }, duration: { classPropertyName: "duration", publicName: "duration", isSignal: true, isRequired: false, transformFunction: null }, maxItemsPerBox: { classPropertyName: "maxItemsPerBox", publicName: "maxItemsPerBox", isSignal: true, isRequired: false, transformFunction: null }, itemMinWidth: { classPropertyName: "itemMinWidth", publicName: "itemMinWidth", isSignal: true, isRequired: false, transformFunction: null }, currentIndex: { classPropertyName: "currentIndex", publicName: "currentIndex", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { indexChangeEv: "indexChangeEv", currentIndex: "currentIndexChange" }, viewQueries: [{ propertyName: "carouselContainer", first: true, predicate: ["carouselContainer"], descendants: true, isSignal: true }, { propertyName: "carouselTrack", first: true, predicate: ["carouselTrack"], descendants: true, isSignal: true }], ngImport: i0, template: "<!-- =================================== Main Container =================================== -->\n<div \n class=\"zs:relative zs:w-full zs:mt-6\"\n role=\"region\"\n aria-label=\"Image carousel\"\n aria-roledescription=\"carousel\"\n>\n\n <!-- =================================== Carousel Track =================================== -->\n <div \n carousel-container\n #carouselContainer\n class=\"zs:overflow-hidden zs:relative\"\n role=\"group\"\n aria-label=\"Carousel track\"\n (pointerdown)=\"onDragStart($event)\"\n (pointermove)=\"onDragMove($event)\"\n (pointerup)=\"onDragEnd()\"\n (pointerleave)=\"onDragEnd()\"\n (pointercancel)=\"onDragEnd()\"\n [class.dragging]=\"dragging()\"\n >\n <div \n #carouselTrack \n [style.--carousel-item-width]=\"itemsPerBoxWidth()\"\n class=\"zs:flex zs:transition-transform zs:duration-500 zs:ease-in-out\"\n [style.transform]=\"'translateX(' + currentTranslate() + 'px)'\"\n >\n <!-- Cards -->\n <ng-content select=\"[carousel-item]\"></ng-content>\n <!-- /Cards -->\n </div>\n </div>\n <!-- =================================== /Carousel Track =================================== -->\n\n <!-- =================================== Navigation Arrows =================================== -->\n @if (arrows()) {\n <button\n type=\"button\"\n class=\"zs:absolute zs:top-1/2 zs:left-3 zs:size-10 zs:-translate-y-1/2 zs:p-3 zs:flex zs:items-center zs:justify-center
|
|
1156
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: Carousel, isStandalone: true, selector: "ZS-carousel", inputs: { itemsNumber: { classPropertyName: "itemsNumber", publicName: "itemsNumber", isSignal: true, isRequired: true, transformFunction: null }, arrows: { classPropertyName: "arrows", publicName: "arrows", isSignal: true, isRequired: false, transformFunction: null }, arrowColor: { classPropertyName: "arrowColor", publicName: "arrowColor", isSignal: true, isRequired: false, transformFunction: null }, showIndicators: { classPropertyName: "showIndicators", publicName: "showIndicators", isSignal: true, isRequired: false, transformFunction: null }, autoPlay: { classPropertyName: "autoPlay", publicName: "autoPlay", isSignal: true, isRequired: false, transformFunction: null }, duration: { classPropertyName: "duration", publicName: "duration", isSignal: true, isRequired: false, transformFunction: null }, maxItemsPerBox: { classPropertyName: "maxItemsPerBox", publicName: "maxItemsPerBox", isSignal: true, isRequired: false, transformFunction: null }, itemMinWidth: { classPropertyName: "itemMinWidth", publicName: "itemMinWidth", isSignal: true, isRequired: false, transformFunction: null }, currentIndex: { classPropertyName: "currentIndex", publicName: "currentIndex", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { indexChangeEv: "indexChangeEv", currentIndex: "currentIndexChange" }, viewQueries: [{ propertyName: "carouselContainer", first: true, predicate: ["carouselContainer"], descendants: true, isSignal: true }, { propertyName: "carouselTrack", first: true, predicate: ["carouselTrack"], descendants: true, isSignal: true }], ngImport: i0, template: "<!-- =================================== Main Container =================================== -->\n<div \n class=\"zs:relative zs:w-full zs:mt-6\"\n role=\"region\"\n aria-label=\"Image carousel\"\n aria-roledescription=\"carousel\"\n>\n\n <!-- =================================== Carousel Track =================================== -->\n <div \n carousel-container\n #carouselContainer\n class=\"zs:overflow-hidden zs:relative\"\n role=\"group\"\n aria-label=\"Carousel track\"\n (pointerdown)=\"onDragStart($event)\"\n (pointermove)=\"onDragMove($event)\"\n (pointerup)=\"onDragEnd()\"\n (pointerleave)=\"onDragEnd()\"\n (pointercancel)=\"onDragEnd()\"\n [class.dragging]=\"dragging()\"\n >\n <div \n #carouselTrack \n [style.--carousel-item-width]=\"itemsPerBoxWidth()\"\n class=\"zs:flex zs:transition-transform zs:duration-500 zs:ease-in-out\"\n [style.transform]=\"'translateX(' + currentTranslate() + 'px)'\"\n >\n <!-- Cards -->\n <ng-content select=\"[carousel-item]\"></ng-content>\n <!-- /Cards -->\n </div>\n </div>\n <!-- =================================== /Carousel Track =================================== -->\n\n <!-- =================================== Navigation Arrows =================================== -->\n @if (arrows()) {\n <button\n type=\"button\"\n class=\"zs:absolute zs:top-1/2 zs:left-3 zs:size-10 zs:-translate-y-1/2 zs:p-3 zs:flex \n zs:items-center zs:justify-center zs:rounded-full zs:bg-gray-100/50 zs:dark:bg-gray-500/50 \n zs:hover:bg-gray-100/70 zs:dark:hover:bg-gray-500/70 zs:transition-[background-color,box-shadow] \n shadow-lg-all shadow-lg-all-night\"\n (click)=\"previous()\"\n aria-label=\"Previous slide\"\n [attr.aria-controls]=\"carouselContainer?.id\"\n >\n <i [ngClass]=\"arrowColorClass()\" class=\"fas fa-chevron-left zs:text-xl\" aria-hidden=\"true\"></i>\n </button>\n\n <button\n type=\"button\"\n class=\"zs:absolute zs:top-1/2 zs:right-3 zs:size-10 zs:-translate-y-1/2 zs:p-3 zs:flex \n zs:items-center zs:justify-center zs:rounded-full zs:bg-gray-100/50 zs:dark:bg-gray-500/50 \n zs:hover:bg-gray-100/70 zs:dark:hover:bg-gray-500/70 zs:transition-[background-color,box-shadow] \n shadow-lg-all shadow-lg-all-night\"\n (click)=\"next()\"\n aria-label=\"Next slide\"\n [attr.aria-controls]=\"carouselContainer?.id\"\n >\n <i [ngClass]=\"arrowColorClass()\" class=\"fas fa-chevron-right zs:text-xl\" aria-hidden=\"true\"></i>\n </button>\n }\n <!-- =================================== /Navigation Arrows =================================== -->\n\n</div>\n<!-- =================================== /Main Container =================================== -->\n\n\n<!-- =================================== Indicators =================================== -->\n@if(showIndicators()) {\n <div class=\"zs:flex zs:justify-center zs:mt-4 zs:gap-2\" role=\"tablist\" aria-label=\"Carousel indicators\">\n @for (item of indicatorBoxes(); track $index; let i = $index) {\n <button\n type=\"button\"\n role=\"tab\"\n class=\"zs:w-3 zs:h-3 zs:rounded-full zs:transition\"\n [ngClass]=\"currentIndex() === i \n ? 'zs:bg-gray-800 zs:dark:bg-gray-200 zs:scale-110' \n : 'zs:bg-gray-400 zs:dark:bg-gray-600 zs:hover:bg-gray-600 zs:dark:hover:bg-gray-400'\"\n (click)=\"updateIndex(i)\"\n [attr.aria-label]=\"'Go to slide ' + (i + 1)\"\n [attr.aria-current]=\"currentIndex() === i ? 'true' : null\"\n tabindex=\"0\"\n ></button>\n }\n </div>\n}\n<!-- =================================== /Indicators =================================== -->", styles: [":host{display:block}[carousel-container]{touch-action:pan-y;cursor:grab}[carousel-container].dragging{cursor:grabbing!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
|
|
1157
1157
|
}
|
|
1158
1158
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: Carousel, decorators: [{
|
|
1159
1159
|
type: Component,
|
|
1160
|
-
args: [{ selector: 'ZS-carousel', imports: [CommonModule], template: "<!-- =================================== Main Container =================================== -->\n<div \n class=\"zs:relative zs:w-full zs:mt-6\"\n role=\"region\"\n aria-label=\"Image carousel\"\n aria-roledescription=\"carousel\"\n>\n\n <!-- =================================== Carousel Track =================================== -->\n <div \n carousel-container\n #carouselContainer\n class=\"zs:overflow-hidden zs:relative\"\n role=\"group\"\n aria-label=\"Carousel track\"\n (pointerdown)=\"onDragStart($event)\"\n (pointermove)=\"onDragMove($event)\"\n (pointerup)=\"onDragEnd()\"\n (pointerleave)=\"onDragEnd()\"\n (pointercancel)=\"onDragEnd()\"\n [class.dragging]=\"dragging()\"\n >\n <div \n #carouselTrack \n [style.--carousel-item-width]=\"itemsPerBoxWidth()\"\n class=\"zs:flex zs:transition-transform zs:duration-500 zs:ease-in-out\"\n [style.transform]=\"'translateX(' + currentTranslate() + 'px)'\"\n >\n <!-- Cards -->\n <ng-content select=\"[carousel-item]\"></ng-content>\n <!-- /Cards -->\n </div>\n </div>\n <!-- =================================== /Carousel Track =================================== -->\n\n <!-- =================================== Navigation Arrows =================================== -->\n @if (arrows()) {\n <button\n type=\"button\"\n class=\"zs:absolute zs:top-1/2 zs:left-3 zs:size-10 zs:-translate-y-1/2 zs:p-3 zs:flex zs:items-center zs:justify-center
|
|
1160
|
+
args: [{ selector: 'ZS-carousel', imports: [CommonModule], template: "<!-- =================================== Main Container =================================== -->\n<div \n class=\"zs:relative zs:w-full zs:mt-6\"\n role=\"region\"\n aria-label=\"Image carousel\"\n aria-roledescription=\"carousel\"\n>\n\n <!-- =================================== Carousel Track =================================== -->\n <div \n carousel-container\n #carouselContainer\n class=\"zs:overflow-hidden zs:relative\"\n role=\"group\"\n aria-label=\"Carousel track\"\n (pointerdown)=\"onDragStart($event)\"\n (pointermove)=\"onDragMove($event)\"\n (pointerup)=\"onDragEnd()\"\n (pointerleave)=\"onDragEnd()\"\n (pointercancel)=\"onDragEnd()\"\n [class.dragging]=\"dragging()\"\n >\n <div \n #carouselTrack \n [style.--carousel-item-width]=\"itemsPerBoxWidth()\"\n class=\"zs:flex zs:transition-transform zs:duration-500 zs:ease-in-out\"\n [style.transform]=\"'translateX(' + currentTranslate() + 'px)'\"\n >\n <!-- Cards -->\n <ng-content select=\"[carousel-item]\"></ng-content>\n <!-- /Cards -->\n </div>\n </div>\n <!-- =================================== /Carousel Track =================================== -->\n\n <!-- =================================== Navigation Arrows =================================== -->\n @if (arrows()) {\n <button\n type=\"button\"\n class=\"zs:absolute zs:top-1/2 zs:left-3 zs:size-10 zs:-translate-y-1/2 zs:p-3 zs:flex \n zs:items-center zs:justify-center zs:rounded-full zs:bg-gray-100/50 zs:dark:bg-gray-500/50 \n zs:hover:bg-gray-100/70 zs:dark:hover:bg-gray-500/70 zs:transition-[background-color,box-shadow] \n shadow-lg-all shadow-lg-all-night\"\n (click)=\"previous()\"\n aria-label=\"Previous slide\"\n [attr.aria-controls]=\"carouselContainer?.id\"\n >\n <i [ngClass]=\"arrowColorClass()\" class=\"fas fa-chevron-left zs:text-xl\" aria-hidden=\"true\"></i>\n </button>\n\n <button\n type=\"button\"\n class=\"zs:absolute zs:top-1/2 zs:right-3 zs:size-10 zs:-translate-y-1/2 zs:p-3 zs:flex \n zs:items-center zs:justify-center zs:rounded-full zs:bg-gray-100/50 zs:dark:bg-gray-500/50 \n zs:hover:bg-gray-100/70 zs:dark:hover:bg-gray-500/70 zs:transition-[background-color,box-shadow] \n shadow-lg-all shadow-lg-all-night\"\n (click)=\"next()\"\n aria-label=\"Next slide\"\n [attr.aria-controls]=\"carouselContainer?.id\"\n >\n <i [ngClass]=\"arrowColorClass()\" class=\"fas fa-chevron-right zs:text-xl\" aria-hidden=\"true\"></i>\n </button>\n }\n <!-- =================================== /Navigation Arrows =================================== -->\n\n</div>\n<!-- =================================== /Main Container =================================== -->\n\n\n<!-- =================================== Indicators =================================== -->\n@if(showIndicators()) {\n <div class=\"zs:flex zs:justify-center zs:mt-4 zs:gap-2\" role=\"tablist\" aria-label=\"Carousel indicators\">\n @for (item of indicatorBoxes(); track $index; let i = $index) {\n <button\n type=\"button\"\n role=\"tab\"\n class=\"zs:w-3 zs:h-3 zs:rounded-full zs:transition\"\n [ngClass]=\"currentIndex() === i \n ? 'zs:bg-gray-800 zs:dark:bg-gray-200 zs:scale-110' \n : 'zs:bg-gray-400 zs:dark:bg-gray-600 zs:hover:bg-gray-600 zs:dark:hover:bg-gray-400'\"\n (click)=\"updateIndex(i)\"\n [attr.aria-label]=\"'Go to slide ' + (i + 1)\"\n [attr.aria-current]=\"currentIndex() === i ? 'true' : null\"\n tabindex=\"0\"\n ></button>\n }\n </div>\n}\n<!-- =================================== /Indicators =================================== -->", styles: [":host{display:block}[carousel-container]{touch-action:pan-y;cursor:grab}[carousel-container].dragging{cursor:grabbing!important}\n"] }]
|
|
1161
1161
|
}], ctorParameters: () => [], propDecorators: { itemsNumber: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemsNumber", required: true }] }], arrows: [{ type: i0.Input, args: [{ isSignal: true, alias: "arrows", required: false }] }], arrowColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "arrowColor", required: false }] }], showIndicators: [{ type: i0.Input, args: [{ isSignal: true, alias: "showIndicators", required: false }] }], autoPlay: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoPlay", required: false }] }], duration: [{ type: i0.Input, args: [{ isSignal: true, alias: "duration", required: false }] }], maxItemsPerBox: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxItemsPerBox", required: false }] }], itemMinWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemMinWidth", required: false }] }], indexChangeEv: [{ type: i0.Output, args: ["indexChangeEv"] }], currentIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentIndex", required: false }] }, { type: i0.Output, args: ["currentIndexChange"] }], carouselContainer: [{ type: i0.ViewChild, args: ['carouselContainer', { isSignal: true }] }], carouselTrack: [{ type: i0.ViewChild, args: ['carouselTrack', { isSignal: true }] }] } });
|
|
1162
1162
|
|
|
1163
1163
|
class Connection {
|
|
@@ -1181,11 +1181,11 @@ class Connection {
|
|
|
1181
1181
|
this.offlineListener();
|
|
1182
1182
|
}
|
|
1183
1183
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: Connection, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1184
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: Connection, isStandalone: true, selector: "ZS-connection", outputs: { isOnlineEv: "isOnlineEv" }, ngImport: i0, template: "<div tabindex=\"0\" \n class=\"zs:inline-flex zs:items-center zs:justify-center zs:gap-2 zs:rounded-full \n zs:text-sm zs:font-medium zs:px-3 zs:h-8 zs:w-fit zs:cursor-pointer
|
|
1184
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: Connection, isStandalone: true, selector: "ZS-connection", outputs: { isOnlineEv: "isOnlineEv" }, ngImport: i0, template: "<div tabindex=\"0\" \n class=\"zs:inline-flex zs:items-center zs:justify-center zs:gap-2 zs:rounded-full \n zs:text-sm zs:font-medium zs:px-3 zs:h-8 zs:w-fit zs:cursor-pointer\"\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"] }] });
|
|
1185
1185
|
}
|
|
1186
1186
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: Connection, decorators: [{
|
|
1187
1187
|
type: Component,
|
|
1188
|
-
args: [{ selector: 'ZS-connection', imports: [CommonModule], template: "<div tabindex=\"0\" \n class=\"zs:inline-flex zs:items-center zs:justify-center zs:gap-2 zs:rounded-full \n zs:text-sm zs:font-medium zs:px-3 zs:h-8 zs:w-fit zs:cursor-pointer
|
|
1188
|
+
args: [{ selector: 'ZS-connection', imports: [CommonModule], template: "<div tabindex=\"0\" \n class=\"zs:inline-flex zs:items-center zs:justify-center zs:gap-2 zs:rounded-full \n zs:text-sm zs:font-medium zs:px-3 zs:h-8 zs:w-fit zs:cursor-pointer\"\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"] }]
|
|
1189
1189
|
}], ctorParameters: () => [], propDecorators: { isOnlineEv: [{ type: i0.Output, args: ["isOnlineEv"] }] } });
|
|
1190
1190
|
|
|
1191
1191
|
class ExtractorService {
|
|
@@ -1232,20 +1232,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImpor
|
|
|
1232
1232
|
}]
|
|
1233
1233
|
}] });
|
|
1234
1234
|
|
|
1235
|
-
// ==============================================
|
|
1236
|
-
// Types
|
|
1237
|
-
// ==============================================
|
|
1238
|
-
// ==============================================
|
|
1239
|
-
// Zform Class
|
|
1240
|
-
// ==============================================
|
|
1241
1235
|
class Form {
|
|
1242
1236
|
fields;
|
|
1243
|
-
|
|
1237
|
+
initialValues;
|
|
1244
1238
|
constructor(initial) {
|
|
1239
|
+
this.initialValues = { ...initial };
|
|
1245
1240
|
this.fields = Object.keys(initial).reduce((acc, key) => {
|
|
1246
1241
|
acc[key] = signal({
|
|
1247
1242
|
value: initial[key],
|
|
1248
1243
|
valid: false,
|
|
1244
|
+
touched: false,
|
|
1249
1245
|
});
|
|
1250
1246
|
return acc;
|
|
1251
1247
|
}, {});
|
|
@@ -1253,8 +1249,9 @@ class Form {
|
|
|
1253
1249
|
// ==============================================
|
|
1254
1250
|
// Field Accessors
|
|
1255
1251
|
// ==============================================
|
|
1256
|
-
set(key, value, valid = true) {
|
|
1257
|
-
this.fields[key]
|
|
1252
|
+
set(key, value, valid = true, touched = true) {
|
|
1253
|
+
const current = this.fields[key]();
|
|
1254
|
+
this.fields[key].set({ value, valid, touched: touched || current.touched });
|
|
1258
1255
|
}
|
|
1259
1256
|
patch(key, partial) {
|
|
1260
1257
|
const current = this.fields[key]();
|
|
@@ -1266,18 +1263,26 @@ class Form {
|
|
|
1266
1263
|
// ==============================================
|
|
1267
1264
|
// Form State & Validation
|
|
1268
1265
|
// ==============================================
|
|
1269
|
-
|
|
1270
|
-
const result = {};
|
|
1266
|
+
markAllTouched() {
|
|
1271
1267
|
for (const key in this.fields) {
|
|
1272
|
-
|
|
1273
|
-
|
|
1274
|
-
result[key] = val !== null && val !== undefined && val !== '';
|
|
1275
|
-
}
|
|
1268
|
+
const field = this.fields[key]();
|
|
1269
|
+
this.fields[key].set({ ...field, touched: true });
|
|
1276
1270
|
}
|
|
1277
|
-
return result;
|
|
1278
1271
|
}
|
|
1279
|
-
|
|
1280
|
-
this.
|
|
1272
|
+
allTouched() {
|
|
1273
|
+
return Object.keys(this.fields).every(key => this.fields[key]().touched);
|
|
1274
|
+
}
|
|
1275
|
+
// ==============================================
|
|
1276
|
+
// Reset
|
|
1277
|
+
// ==============================================
|
|
1278
|
+
reset() {
|
|
1279
|
+
for (const key in this.fields) {
|
|
1280
|
+
this.fields[key].set({
|
|
1281
|
+
value: this.initialValues[key],
|
|
1282
|
+
valid: false,
|
|
1283
|
+
touched: false,
|
|
1284
|
+
});
|
|
1285
|
+
}
|
|
1281
1286
|
}
|
|
1282
1287
|
// ==============================================
|
|
1283
1288
|
// Data Extraction & Submission
|
|
@@ -1300,21 +1305,25 @@ class Form {
|
|
|
1300
1305
|
}
|
|
1301
1306
|
return result;
|
|
1302
1307
|
}
|
|
1308
|
+
allFilled() {
|
|
1309
|
+
const result = {};
|
|
1310
|
+
for (const key in this.fields) {
|
|
1311
|
+
if (this.fields.hasOwnProperty(key)) {
|
|
1312
|
+
const val = this.fields[key]().value;
|
|
1313
|
+
result[key] = val !== null && val !== undefined && val !== '';
|
|
1314
|
+
}
|
|
1315
|
+
}
|
|
1316
|
+
return result;
|
|
1317
|
+
}
|
|
1303
1318
|
submit(callback, allowEmptyFields = [], allowInvalidFields = []) {
|
|
1304
1319
|
this.markAllTouched();
|
|
1305
1320
|
const filled = this.allFilled();
|
|
1306
1321
|
const validations = this.getValidations();
|
|
1307
|
-
// =============================
|
|
1308
|
-
// Check FILL
|
|
1309
|
-
// =============================
|
|
1310
1322
|
const allFilled = Object.keys(filled).every((key) => {
|
|
1311
1323
|
if (allowEmptyFields.includes(key))
|
|
1312
1324
|
return true;
|
|
1313
1325
|
return filled[key];
|
|
1314
1326
|
});
|
|
1315
|
-
// =============================
|
|
1316
|
-
// Check VALID
|
|
1317
|
-
// =============================
|
|
1318
1327
|
const allValid = Object.keys(validations).every((key) => {
|
|
1319
1328
|
if (allowInvalidFields.includes(key))
|
|
1320
1329
|
return true;
|
|
@@ -1394,11 +1403,11 @@ class Button {
|
|
|
1394
1403
|
}
|
|
1395
1404
|
}
|
|
1396
1405
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: Button, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1397
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: Button, isStandalone: true, selector: "ZS-button", inputs: { Id: { classPropertyName: "Id", publicName: "Id", isSignal: true, isRequired: false, transformFunction: null }, btnStyle: { classPropertyName: "btnStyle", publicName: "btnStyle", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clickedEv: "clickedEv" }, ngImport: i0, template: "<!-- ========================= Button Core Attributes ========================= -->\n<button \n [id]=\"Id()\"\n class=\"zs:w-full\"\n [attr.type]=\"type()\"\n [disabled]=\"disabled()\"\n [ngClass]=\"['zs:flex zs:gap-2
|
|
1406
|
+
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"] }] });
|
|
1398
1407
|
}
|
|
1399
1408
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: Button, decorators: [{
|
|
1400
1409
|
type: Component,
|
|
1401
|
-
args: [{ selector: 'ZS-button', imports: [CommonModule], template: "<!-- ========================= Button Core Attributes ========================= -->\n<button \n [id]=\"Id()\"\n class=\"zs:w-full\"\n [attr.type]=\"type()\"\n [disabled]=\"disabled()\"\n [ngClass]=\"['zs:flex zs:gap-2
|
|
1410
|
+
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"] }]
|
|
1402
1411
|
}], 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"] }] } });
|
|
1403
1412
|
|
|
1404
1413
|
// ==============================================
|
|
@@ -1506,11 +1515,11 @@ class Modal {
|
|
|
1506
1515
|
this.close();
|
|
1507
1516
|
}
|
|
1508
1517
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: Modal, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1509
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: Modal, isStandalone: true, selector: "ZS-modal", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, modalStyle: { classPropertyName: "modalStyle", publicName: "modalStyle", isSignal: true, isRequired: false, transformFunction: null }, showCancelIcon: { classPropertyName: "showCancelIcon", publicName: "showCancelIcon", isSignal: true, isRequired: false, transformFunction: null }, showFooter: { classPropertyName: "showFooter", publicName: "showFooter", isSignal: true, isRequired: false, transformFunction: null }, cancelConfig: { classPropertyName: "cancelConfig", publicName: "cancelConfig", isSignal: true, isRequired: false, transformFunction: null }, confirmConfig: { classPropertyName: "confirmConfig", publicName: "confirmConfig", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, closeOnOverlay: { classPropertyName: "closeOnOverlay", publicName: "closeOnOverlay", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange", confirmEv: "confirmEv", cancelEv: "cancelEv", closedEv: "closedEv" }, host: { listeners: { "document:keydown.escape": "onEscape()" } }, ngImport: i0, template: "<!-- ========================= Overlay ========================= -->\n@if (isOpen()) {\n <div #modalRef\n class=\"zs:fixed zs:inset-0 zs:flex {{ zIndices.modal }} zs:bg-black/50 zs:dark:bg-black/70
|
|
1518
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: Modal, isStandalone: true, selector: "ZS-modal", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, modalStyle: { classPropertyName: "modalStyle", publicName: "modalStyle", isSignal: true, isRequired: false, transformFunction: null }, showCancelIcon: { classPropertyName: "showCancelIcon", publicName: "showCancelIcon", isSignal: true, isRequired: false, transformFunction: null }, showFooter: { classPropertyName: "showFooter", publicName: "showFooter", isSignal: true, isRequired: false, transformFunction: null }, cancelConfig: { classPropertyName: "cancelConfig", publicName: "cancelConfig", isSignal: true, isRequired: false, transformFunction: null }, confirmConfig: { classPropertyName: "confirmConfig", publicName: "confirmConfig", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, closeOnOverlay: { classPropertyName: "closeOnOverlay", publicName: "closeOnOverlay", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange", confirmEv: "confirmEv", cancelEv: "cancelEv", closedEv: "closedEv" }, host: { listeners: { "document:keydown.escape": "onEscape()" } }, ngImport: i0, template: "<!-- ========================= Overlay ========================= -->\n@if (isOpen()) {\n <div #modalRef\n class=\"zs:fixed zs:inset-0 zs:flex {{ zIndices.modal }} zs:bg-black/50 zs:dark:bg-black/70\"\n [ngClass]=\"[positionClass(), open() ? 'animate-fadeIn' : 'animate-fadeOut']\"\n (click)=\"onOverlayClick($event)\"\n role=\"presentation\"\n [attr.inert]=\"isOpen() ? null : ''\"\n >\n\n <!-- ========================= Modal Container ========================= -->\n <div\n class=\"zs:relative zs:m-4 zs:bg-white zs:dark:bg-slate-900 zs:w-full zs:max-w-lg zs:mx-4 \n zs:rounded-2xl zs:shadow-lg zs:outline-hidden\"\n [ngClass]=\"[\n 'zs:border', \n palette().border,\n palette().text,\n open() ? 'animate-modalIn' : 'animate-modalOut'\n ]\"\n (click)=\"$event.stopPropagation()\"\n role=\"dialog\"\n aria-modal=\"true\"\n [attr.aria-labelledby]=\"'modal-title'\"\n [attr.aria-describedby]=\"'modal-body'\"\n tabindex=\"0\"\n (keydown.escape)=\"close()\"\n >\n\n <!-- ========================= Modal Header ========================= -->\n <div\n class=\"zs:flex zs:items-center zs:justify-between zs:px-4 zs:py-3 zs:border-b\"\n [class]=\"palette().border\"\n >\n <h3 id=\"modal-title\" class=\"zs:font-semibold zs:text-lg\">\n {{ title() }}\n </h3>\n @if(showCancelIcon()) {\n <button \n class=\"zs:text-xl zs:hover:opacity-85 zs:cursor-pointer\n zs:focus:outline-hidden zs:focus-visible:ring-2 \n zs:focus-visible:ring-offset-2 zs:focus-visible:ring-blue-500 \n zs:rounded-md zs:hover:scale-[1.02] zs:active:scale-[0.97]\"\n (click)=\"close()\"\n aria-label=\"Close dialog\"\n >\n <i class=\"fa-solid fa-xmark\"></i>\n </button>\n }\n </div>\n\n <!-- ========================= Modal Body ========================= -->\n <div id=\"modal-body\" class=\"zs:p-4 scroll zs:max-h-[75vh] scroll-{{ modalStyle() }}\">\n <ng-content></ng-content>\n </div>\n\n <!-- ========================= Modal Footer ========================= -->\n @if (showFooter()) {\n <div\n class=\"zs:flex zs:justify-end zs:gap-3 zs:p-4 zs:border-t\"\n [class]=\"palette().border\"\n >\n @if (cancelMerged().show) {\n <ZS-button\n [btnStyle]=\"cancelMerged().btnStyle\"\n variant=\"solid\"\n type=\"button\"\n (clickedEv)=\"cancelEv.emit()\"\n [icon]=\"cancelMerged().icon\"\n [disabled]=\"cancelMerged().disabled\"\n [size]=\"cancelMerged().size\"\n [variant]=\"cancelMerged().variant\"\n aria-label=\"Cancel\"\n >\n {{ cancelMerged().text}}\n </ZS-button>\n }\n @if (confirmMerged().show) {\n <ZS-button\n type=\"button\"\n [btnStyle]=\"confirmMerged().btnStyle\"\n (clickedEv)=\"confirmEv.emit()\"\n [icon]=\"confirmMerged().icon\"\n [disabled]=\"confirmMerged().disabled\"\n [size]=\"confirmMerged().size\"\n [variant]=\"confirmMerged().variant\"\n aria-label=\"Confirm\"\n >\n {{ confirmMerged().text}}\n </ZS-button>\n }\n </div>\n }\n </div>\n </div>\n}", styles: ["@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeOut{0%{opacity:1}to{opacity:0}}@keyframes modalIn{0%{opacity:0;transform:scale(.9) translateY(10px)}to{opacity:1;transform:scale(1) translateY(0)}}@keyframes modalOut{0%{opacity:1;transform:scale(1) translateY(0)}to{opacity:0;transform:scale(.9) translateY(10px)}}.animate-fadeIn{animation:fadeIn .25s ease-out forwards}.animate-modalIn{animation:modalIn .25s ease-out forwards}.animate-fadeOut{animation:fadeOut .25s ease-in forwards}.animate-modalOut{animation:modalOut .25s ease-in forwards}\n"], dependencies: [{ kind: "component", type: Button, selector: "ZS-button", inputs: ["Id", "btnStyle", "variant", "size", "disabled", "icon", "type"], outputs: ["clickedEv"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
|
|
1510
1519
|
}
|
|
1511
1520
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: Modal, decorators: [{
|
|
1512
1521
|
type: Component,
|
|
1513
|
-
args: [{ selector: 'ZS-modal', imports: [Button, CommonModule], template: "<!-- ========================= Overlay ========================= -->\n@if (isOpen()) {\n <div #modalRef\n class=\"zs:fixed zs:inset-0 zs:flex {{ zIndices.modal }} zs:bg-black/50 zs:dark:bg-black/70
|
|
1522
|
+
args: [{ selector: 'ZS-modal', imports: [Button, CommonModule], template: "<!-- ========================= Overlay ========================= -->\n@if (isOpen()) {\n <div #modalRef\n class=\"zs:fixed zs:inset-0 zs:flex {{ zIndices.modal }} zs:bg-black/50 zs:dark:bg-black/70\"\n [ngClass]=\"[positionClass(), open() ? 'animate-fadeIn' : 'animate-fadeOut']\"\n (click)=\"onOverlayClick($event)\"\n role=\"presentation\"\n [attr.inert]=\"isOpen() ? null : ''\"\n >\n\n <!-- ========================= Modal Container ========================= -->\n <div\n class=\"zs:relative zs:m-4 zs:bg-white zs:dark:bg-slate-900 zs:w-full zs:max-w-lg zs:mx-4 \n zs:rounded-2xl zs:shadow-lg zs:outline-hidden\"\n [ngClass]=\"[\n 'zs:border', \n palette().border,\n palette().text,\n open() ? 'animate-modalIn' : 'animate-modalOut'\n ]\"\n (click)=\"$event.stopPropagation()\"\n role=\"dialog\"\n aria-modal=\"true\"\n [attr.aria-labelledby]=\"'modal-title'\"\n [attr.aria-describedby]=\"'modal-body'\"\n tabindex=\"0\"\n (keydown.escape)=\"close()\"\n >\n\n <!-- ========================= Modal Header ========================= -->\n <div\n class=\"zs:flex zs:items-center zs:justify-between zs:px-4 zs:py-3 zs:border-b\"\n [class]=\"palette().border\"\n >\n <h3 id=\"modal-title\" class=\"zs:font-semibold zs:text-lg\">\n {{ title() }}\n </h3>\n @if(showCancelIcon()) {\n <button \n class=\"zs:text-xl zs:hover:opacity-85 zs:cursor-pointer\n zs:focus:outline-hidden zs:focus-visible:ring-2 \n zs:focus-visible:ring-offset-2 zs:focus-visible:ring-blue-500 \n zs:rounded-md zs:hover:scale-[1.02] zs:active:scale-[0.97]\"\n (click)=\"close()\"\n aria-label=\"Close dialog\"\n >\n <i class=\"fa-solid fa-xmark\"></i>\n </button>\n }\n </div>\n\n <!-- ========================= Modal Body ========================= -->\n <div id=\"modal-body\" class=\"zs:p-4 scroll zs:max-h-[75vh] scroll-{{ modalStyle() }}\">\n <ng-content></ng-content>\n </div>\n\n <!-- ========================= Modal Footer ========================= -->\n @if (showFooter()) {\n <div\n class=\"zs:flex zs:justify-end zs:gap-3 zs:p-4 zs:border-t\"\n [class]=\"palette().border\"\n >\n @if (cancelMerged().show) {\n <ZS-button\n [btnStyle]=\"cancelMerged().btnStyle\"\n variant=\"solid\"\n type=\"button\"\n (clickedEv)=\"cancelEv.emit()\"\n [icon]=\"cancelMerged().icon\"\n [disabled]=\"cancelMerged().disabled\"\n [size]=\"cancelMerged().size\"\n [variant]=\"cancelMerged().variant\"\n aria-label=\"Cancel\"\n >\n {{ cancelMerged().text}}\n </ZS-button>\n }\n @if (confirmMerged().show) {\n <ZS-button\n type=\"button\"\n [btnStyle]=\"confirmMerged().btnStyle\"\n (clickedEv)=\"confirmEv.emit()\"\n [icon]=\"confirmMerged().icon\"\n [disabled]=\"confirmMerged().disabled\"\n [size]=\"confirmMerged().size\"\n [variant]=\"confirmMerged().variant\"\n aria-label=\"Confirm\"\n >\n {{ confirmMerged().text}}\n </ZS-button>\n }\n </div>\n }\n </div>\n </div>\n}", styles: ["@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeOut{0%{opacity:1}to{opacity:0}}@keyframes modalIn{0%{opacity:0;transform:scale(.9) translateY(10px)}to{opacity:1;transform:scale(1) translateY(0)}}@keyframes modalOut{0%{opacity:1;transform:scale(1) translateY(0)}to{opacity:0;transform:scale(.9) translateY(10px)}}.animate-fadeIn{animation:fadeIn .25s ease-out forwards}.animate-modalIn{animation:modalIn .25s ease-out forwards}.animate-fadeOut{animation:fadeOut .25s ease-in forwards}.animate-modalOut{animation:modalOut .25s ease-in forwards}\n"] }]
|
|
1514
1523
|
}], ctorParameters: () => [], propDecorators: { open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], modalStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "modalStyle", required: false }] }], showCancelIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCancelIcon", required: false }] }], showFooter: [{ type: i0.Input, args: [{ isSignal: true, alias: "showFooter", required: false }] }], cancelConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "cancelConfig", required: false }] }], confirmConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "confirmConfig", required: false }] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], closeOnOverlay: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnOverlay", required: false }] }], confirmEv: [{ type: i0.Output, args: ["confirmEv"] }], cancelEv: [{ type: i0.Output, args: ["cancelEv"] }], closedEv: [{ type: i0.Output, args: ["closedEv"] }], onEscape: [{
|
|
1515
1524
|
type: HostListener,
|
|
1516
1525
|
args: ['document:keydown.escape']
|
|
@@ -1625,11 +1634,11 @@ class Navbar {
|
|
|
1625
1634
|
this.resizeObserver.disconnect();
|
|
1626
1635
|
}
|
|
1627
1636
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: Navbar, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1628
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: Navbar, isStandalone: true, selector: "ZS-navbar", inputs: { fixed: { classPropertyName: "fixed", publicName: "fixed", isSignal: true, isRequired: false, transformFunction: null }, logoUrl: { classPropertyName: "logoUrl", publicName: "logoUrl", isSignal: true, isRequired: false, transformFunction: null }, siteNameConfig: { classPropertyName: "siteNameConfig", publicName: "siteNameConfig", isSignal: true, isRequired: false, transformFunction: null }, authButtons: { classPropertyName: "authButtons", publicName: "authButtons", isSignal: true, isRequired: false, transformFunction: null }, showUserSection: { classPropertyName: "showUserSection", publicName: "showUserSection", isSignal: true, isRequired: false, transformFunction: null }, showSearchBar: { classPropertyName: "showSearchBar", publicName: "showSearchBar", isSignal: true, isRequired: false, transformFunction: null }, navItems: { classPropertyName: "navItems", publicName: "navItems", isSignal: true, isRequired: false, transformFunction: null }, isLoggedIn: { classPropertyName: "isLoggedIn", publicName: "isLoggedIn", isSignal: true, isRequired: false, transformFunction: null }, userProfile: { classPropertyName: "userProfile", publicName: "userProfile", isSignal: true, isRequired: false, transformFunction: null }, userMenuItems: { classPropertyName: "userMenuItems", publicName: "userMenuItems", isSignal: true, isRequired: false, transformFunction: null }, searchPlaceholder: { classPropertyName: "searchPlaceholder", publicName: "searchPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, searchValue: { classPropertyName: "searchValue", publicName: "searchValue", isSignal: true, isRequired: false, transformFunction: null }, isMobileMenuOpen: { classPropertyName: "isMobileMenuOpen", publicName: "isMobileMenuOpen", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { loginClickedEv: "loginClickedEv", signupClickedEv: "signupClickedEv", searchSubmittedEv: "searchSubmittedEv", anyItemClickedEv: "anyItemClickedEv", searchValue: "searchValueChange", isMobileMenuOpen: "isMobileMenuOpenChange" }, ngImport: i0, template: "<!-- ========================= Fixed Navbar Container ========================= -->\n\n<nav\n class=\"zs:bg-white zs:dark:bg-[#18202F] zs:top-0 zs:left-0 zs:right-0 {{ zIndices.navbar }} zs:shadow-md zs:dark:shadow-gray-400/30 zs:transition-colors\"\n [ngClass]=\"fixed() ? 'zs:fixed' : 'zs:relative'\"\n role=\"navigation\"\n aria-label=\"Main Navigation\"\n>\n <div class=\"zs:max-w-7xl zs:mx-auto zs:px-4 zs:sm:px-6 zs:lg:px-8\">\n <div class=\"zs:flex zs:justify-between zs:h-16 zs:gap-4\">\n\n <!-- ========================= Logo & Site Name ========================= -->\n <div class=\"zs:flex zs:items-center\">\n @if (logoUrl() || siteNameConfig()) {\n <a\n [routerLink]=\"[siteNameConfig()?.routerLink ?? '/']\"\n class=\"zs:shrink-0 zs:flex zs:items-center zs:gap-2 zs:focus:outline-hidden zs:focus-visible:ring-2 zs:focus-visible:ring-blue-500\"\n aria-label=\"Homepage\"\n >\n @if (logoUrl()) {\n <img\n [src]=\"logoUrl()\"\n alt=\"{{ siteNameConfig()?.siteName ?? 'Site Logo' }}\"\n class=\"zs:h-9 zs:w-auto\"\n />\n }\n @if (siteNameConfig()) {\n <span\n [class]=\"siteNameConfig()?.siteNameColorClass ?? 'zs:text-gray-800 zs:dark:text-gray-100 zs:transition-colors'\"\n class=\"zs:font-bold zs:text-xl\"\n >\n {{ siteNameConfig()?.siteName }}\n </span>\n }\n </a>\n }\n </div>\n\n <!-- ========================= Desktop Navigation ========================= -->\n <div class=\"zs:hidden zs:lg:flex zs:items-center zs:gap-3\" 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:p-2 zs:min-w-50 zs:z-200 \n zs:transition-colors zs:flex zs:flex-col zs:gap-2\"\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:flex zs:flex-col zs:gap-2 zs:pb-2 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:pb-2\" role=\"search\">\n <label for=\"mobile-search\" class=\"sr-only\">Search</label>\n <div class=\"zs:relative\">\n <input\n id=\"mobile-search\"\n type=\"text\"\n [value]=\"searchValue()\"\n (input)=\"searchValue.set($any($event.target).value)\"\n (keyup.enter)=\"onSearchSubmit()\"\n [placeholder]=\"searchPlaceholder()\"\n class=\"zs:w-full zs:bg-gray-100 zs:dark:bg-gray-700 zs:text-gray-800 zs:dark:text-gray-200\n zs:rounded-full zs:py-2 zs:px-4 zs:transition-all zs:duration-200 zs:focus:outline-hidden\n zs:focus:ring-2 zs:focus:ring-blue-500 zs:focus:bg-white zs:dark:focus:bg-gray-600\n zs:shadow-sm zs:dark:shadow-gray-500/40 zs:hover:shadow-md zs:dark:hover:shadow-gray-500/50\"\n />\n <button\n (click)=\"onSearchSubmit()\"\n class=\"zs:absolute zs:py-1 zs:px-2 zs:right-2 zs:top-1/2 zs:-translate-y-1/2 zs:text-gray-500 zs:dark:text-gray-400\n zs:hover:text-gray-700 zs:dark:hover:text-gray-300 zs:transition-colors zs:duration-200\"\n aria-label=\"Submit search\"\n >\n <i class=\"fas fa-search\"></i>\n </button>\n </div>\n </div>\n }\n\n <!-- Auth Buttons (Mobile) -->\n @if (authButtons().showAuthButtons && !isLoggedIn()) {\n <div\n class=\"zs:pt-3 zs:pb-4 zs:border-t zs:border-gray-300 zs:dark:border-gray-500\n zs:flex zs:flex-wrap zs:justify-start zs:items-center zs:gap-2 zs:transition-colors\"\n role=\"group\"\n aria-label=\"Authentication (mobile)\"\n >\n <ZS-button\n [btnStyle]=\"authButtons().login?.btnStyle ?? 'secondary'\"\n [variant]=\"authButtons().login?.variant ?? 'outline'\"\n [size]=\"authButtons().login?.size ?? 'md'\"\n [icon]=\"authButtons().login?.icon ?? ''\"\n (clickedEv)=\"onLogin(); isMobileMenuOpen.set(false)\"\n >\n Login\n </ZS-button>\n\n <ZS-button\n [btnStyle]=\"authButtons().signup?.btnStyle ?? 'primary'\"\n [variant]=\"authButtons().signup?.variant ?? 'solid'\"\n [size]=\"authButtons().signup?.size ?? 'md'\"\n [icon]=\"authButtons().signup?.icon ?? ''\"\n (clickedEv)=\"onSignup(); isMobileMenuOpen.set(false)\"\n >\n Sign Up\n </ZS-button>\n </div>\n }\n </div>\n </div>\n }\n</nav>\n\n<!-- ========================= Spacer for Fixed Navbar ========================= -->\n@if (fixed()) {\n <div class=\"zs:h-16\" aria-hidden=\"true\"></div>\n}\n\n<!-- ========================= Overlay for Menu Closing ========================= -->\n@if (isMobileMenuOpen()) {\n <div\n class=\"zs:fixed zs:inset-0 zs:bg-gray-700 zs:dark:bg-black {{ zIndices.navbarOverlay }} zs:transition-colors\"\n (click)=\"closeAllMenus()\"\n aria-hidden=\"true\"\n ></div>\n}\n", styles: [":host{display:block}body{font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif}a,button{transition:all .2s ease-in-out}img{object-fit:cover}.shadow-lg{box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d}@media (max-width: 768px){.rtl\\:space-x-reverse{margin-right:0;margin-left:.75rem}}\n"], dependencies: [{ kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: NavItem, selector: "ZS-nav-item", inputs: ["item", "collectionName"], outputs: ["anyItemClickedEv"] }, { kind: "component", type: Button, selector: "ZS-button", inputs: ["Id", "btnStyle", "variant", "size", "disabled", "icon", "type"], outputs: ["clickedEv"] }] });
|
|
1637
|
+
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-3\" 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\"\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 \n shadow-md-all-night zs:rounded-md zs:mt-1 zs:p-2 zs:min-w-50 zs:z-200 \n zs:flex zs:flex-col zs:gap-2\"\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-shadow 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\"\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:flex zs:flex-col zs:gap-2 zs:pb-2 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:pb-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-shadow 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\"\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 {{ zIndices.navbarOverlay }}\"\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"] }] });
|
|
1629
1638
|
}
|
|
1630
1639
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: Navbar, decorators: [{
|
|
1631
1640
|
type: Component,
|
|
1632
|
-
args: [{ selector: 'ZS-navbar', imports: [RouterModule, CommonModule, NavItem, Button], template: "<!-- ========================= Fixed Navbar Container ========================= -->\n\n<nav\n class=\"zs:bg-white zs:dark:bg-[#18202F] zs:top-0 zs:left-0 zs:right-0 {{ zIndices.navbar }} zs:shadow-md zs:dark:shadow-gray-400/30 zs:transition-colors\"\n [ngClass]=\"fixed() ? 'zs:fixed' : 'zs:relative'\"\n role=\"navigation\"\n aria-label=\"Main Navigation\"\n>\n <div class=\"zs:max-w-7xl zs:mx-auto zs:px-4 zs:sm:px-6 zs:lg:px-8\">\n <div class=\"zs:flex zs:justify-between zs:h-16 zs:gap-4\">\n\n <!-- ========================= Logo & Site Name ========================= -->\n <div class=\"zs:flex zs:items-center\">\n @if (logoUrl() || siteNameConfig()) {\n <a\n [routerLink]=\"[siteNameConfig()?.routerLink ?? '/']\"\n class=\"zs:shrink-0 zs:flex zs:items-center zs:gap-2 zs:focus:outline-hidden zs:focus-visible:ring-2 zs:focus-visible:ring-blue-500\"\n aria-label=\"Homepage\"\n >\n @if (logoUrl()) {\n <img\n [src]=\"logoUrl()\"\n alt=\"{{ siteNameConfig()?.siteName ?? 'Site Logo' }}\"\n class=\"zs:h-9 zs:w-auto\"\n />\n }\n @if (siteNameConfig()) {\n <span\n [class]=\"siteNameConfig()?.siteNameColorClass ?? 'zs:text-gray-800 zs:dark:text-gray-100 zs:transition-colors'\"\n class=\"zs:font-bold zs:text-xl\"\n >\n {{ siteNameConfig()?.siteName }}\n </span>\n }\n </a>\n }\n </div>\n\n <!-- ========================= Desktop Navigation ========================= -->\n <div class=\"zs:hidden zs:lg:flex zs:items-center zs:gap-3\" 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:p-2 zs:min-w-50 zs:z-200 \n zs:transition-colors zs:flex zs:flex-col zs:gap-2\"\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:flex zs:flex-col zs:gap-2 zs:pb-2 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:pb-2\" role=\"search\">\n <label for=\"mobile-search\" class=\"sr-only\">Search</label>\n <div class=\"zs:relative\">\n <input\n id=\"mobile-search\"\n type=\"text\"\n [value]=\"searchValue()\"\n (input)=\"searchValue.set($any($event.target).value)\"\n (keyup.enter)=\"onSearchSubmit()\"\n [placeholder]=\"searchPlaceholder()\"\n class=\"zs:w-full zs:bg-gray-100 zs:dark:bg-gray-700 zs:text-gray-800 zs:dark:text-gray-200\n zs:rounded-full zs:py-2 zs:px-4 zs:transition-all zs:duration-200 zs:focus:outline-hidden\n zs:focus:ring-2 zs:focus:ring-blue-500 zs:focus:bg-white zs:dark:focus:bg-gray-600\n zs:shadow-sm zs:dark:shadow-gray-500/40 zs:hover:shadow-md zs:dark:hover:shadow-gray-500/50\"\n />\n <button\n (click)=\"onSearchSubmit()\"\n class=\"zs:absolute zs:py-1 zs:px-2 zs:right-2 zs:top-1/2 zs:-translate-y-1/2 zs:text-gray-500 zs:dark:text-gray-400\n zs:hover:text-gray-700 zs:dark:hover:text-gray-300 zs:transition-colors zs:duration-200\"\n aria-label=\"Submit search\"\n >\n <i class=\"fas fa-search\"></i>\n </button>\n </div>\n </div>\n }\n\n <!-- Auth Buttons (Mobile) -->\n @if (authButtons().showAuthButtons && !isLoggedIn()) {\n <div\n class=\"zs:pt-3 zs:pb-4 zs:border-t zs:border-gray-300 zs:dark:border-gray-500\n zs:flex zs:flex-wrap zs:justify-start zs:items-center zs:gap-2 zs:transition-colors\"\n role=\"group\"\n aria-label=\"Authentication (mobile)\"\n >\n <ZS-button\n [btnStyle]=\"authButtons().login?.btnStyle ?? 'secondary'\"\n [variant]=\"authButtons().login?.variant ?? 'outline'\"\n [size]=\"authButtons().login?.size ?? 'md'\"\n [icon]=\"authButtons().login?.icon ?? ''\"\n (clickedEv)=\"onLogin(); isMobileMenuOpen.set(false)\"\n >\n Login\n </ZS-button>\n\n <ZS-button\n [btnStyle]=\"authButtons().signup?.btnStyle ?? 'primary'\"\n [variant]=\"authButtons().signup?.variant ?? 'solid'\"\n [size]=\"authButtons().signup?.size ?? 'md'\"\n [icon]=\"authButtons().signup?.icon ?? ''\"\n (clickedEv)=\"onSignup(); isMobileMenuOpen.set(false)\"\n >\n Sign Up\n </ZS-button>\n </div>\n }\n </div>\n </div>\n }\n</nav>\n\n<!-- ========================= Spacer for Fixed Navbar ========================= -->\n@if (fixed()) {\n <div class=\"zs:h-16\" aria-hidden=\"true\"></div>\n}\n\n<!-- ========================= Overlay for Menu Closing ========================= -->\n@if (isMobileMenuOpen()) {\n <div\n class=\"zs:fixed zs:inset-0 zs:bg-gray-700 zs:dark:bg-black {{ zIndices.navbarOverlay }} zs:transition-colors\"\n (click)=\"closeAllMenus()\"\n aria-hidden=\"true\"\n ></div>\n}\n", styles: [":host{display:block}body{font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif}a,button{transition:all .2s ease-in-out}img{object-fit:cover}.shadow-lg{box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d}@media (max-width: 768px){.rtl\\:space-x-reverse{margin-right:0;margin-left:.75rem}}\n"] }]
|
|
1641
|
+
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-3\" 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\"\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 \n shadow-md-all-night zs:rounded-md zs:mt-1 zs:p-2 zs:min-w-50 zs:z-200 \n zs:flex zs:flex-col zs:gap-2\"\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-shadow 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\"\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:flex zs:flex-col zs:gap-2 zs:pb-2 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:pb-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-shadow 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\"\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 {{ zIndices.navbarOverlay }}\"\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"] }]
|
|
1633
1642
|
}], 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"] }] } });
|
|
1634
1643
|
|
|
1635
1644
|
class Page404 {
|
|
@@ -1665,11 +1674,11 @@ class Page404 {
|
|
|
1665
1674
|
// ========================================================================
|
|
1666
1675
|
onAction = output();
|
|
1667
1676
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: Page404, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1668
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: Page404, isStandalone: true, selector: "ZS-page404", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, pageStyle: { classPropertyName: "pageStyle", publicName: "pageStyle", isSignal: true, isRequired: false, transformFunction: null }, showButton: { classPropertyName: "showButton", publicName: "showButton", isSignal: true, isRequired: false, transformFunction: null }, buttonText: { classPropertyName: "buttonText", publicName: "buttonText", isSignal: true, isRequired: false, transformFunction: null }, routerLink: { classPropertyName: "routerLink", publicName: "routerLink", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onAction: "onAction" }, ngImport: i0, template: "<!-- ========================= Page 404 Container ========================= -->\n<div class=\"zs:flex zs:flex-col zs:items-center zs:justify-center zs:min-h-[90vh]\n zs:text-center zs:
|
|
1677
|
+
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: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\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"] }] });
|
|
1669
1678
|
}
|
|
1670
1679
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: Page404, decorators: [{
|
|
1671
1680
|
type: Component,
|
|
1672
|
-
args: [{ selector: 'ZS-page404', imports: [RouterModule, CommonModule], template: "<!-- ========================= Page 404 Container ========================= -->\n<div class=\"zs:flex zs:flex-col zs:items-center zs:justify-center zs:min-h-[90vh]\n zs:text-center zs:
|
|
1681
|
+
args: [{ selector: 'ZS-page404', imports: [RouterModule, CommonModule], template: "<!-- ========================= Page 404 Container ========================= -->\n<div class=\"zs:flex zs:flex-col zs:items-center zs:justify-center zs:min-h-[90vh]\n zs:text-center zs:animate-fadeIn\"\n [ngClass]=\"[style().iconText]\"\n >\n\n <!-- ========================= Icon ========================= --> \n <div class=\"zs:text-[136px] zs:mb-8 animate-float zs:opacity-90 zs:leading-none\">\n <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\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"] }]
|
|
1673
1682
|
}], 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"] }] } });
|
|
1674
1683
|
|
|
1675
1684
|
// ========================================================================
|
|
@@ -1740,11 +1749,11 @@ class Pagination {
|
|
|
1740
1749
|
this.goToPage(this.currentPage() - 1);
|
|
1741
1750
|
}
|
|
1742
1751
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: Pagination, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1743
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: Pagination, isStandalone: true, selector: "ZS-pagination", inputs: { totalPages: { classPropertyName: "totalPages", publicName: "totalPages", isSignal: true, isRequired: true, transformFunction: null }, currentPage: { classPropertyName: "currentPage", publicName: "currentPage", isSignal: true, isRequired: true, transformFunction: null }, showTotalItems: { classPropertyName: "showTotalItems", publicName: "showTotalItems", isSignal: true, isRequired: false, transformFunction: null }, totalItemsMessage: { classPropertyName: "totalItemsMessage", publicName: "totalItemsMessage", isSignal: true, isRequired: false, transformFunction: null }, totalItems: { classPropertyName: "totalItems", publicName: "totalItems", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { pageChangeEv: "pageChangeEv" }, ngImport: i0, template: "<!-- ========================= Top Spacing ========================= -->\n<div class=\"zs:mt-6\"></div>\n\n<!-- ========================= Total Items Count ========================= -->\n@if (showTotalItems()) {\n <div\n class=\"zs:text-center zs:text-sm zs:text-gray-500 zs:dark:text-gray-300 zs:mb-2
|
|
1752
|
+
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-[opacity,color,background-color]\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-[opacity,color,background-color] zs:duration-200\"\n [ngClass]=\"{\n 'zs:bg-blue-500 zs:text-white zs:hover:text-black 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-[opacity,color,background-color] 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"] }] });
|
|
1744
1753
|
}
|
|
1745
1754
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: Pagination, decorators: [{
|
|
1746
1755
|
type: Component,
|
|
1747
|
-
args: [{ selector: 'ZS-pagination', imports: [CommonModule], template: "<!-- ========================= Top Spacing ========================= -->\n<div class=\"zs:mt-6\"></div>\n\n<!-- ========================= Total Items Count ========================= -->\n@if (showTotalItems()) {\n <div\n class=\"zs:text-center zs:text-sm zs:text-gray-500 zs:dark:text-gray-300 zs:mb-2
|
|
1756
|
+
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-[opacity,color,background-color]\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-[opacity,color,background-color] zs:duration-200\"\n [ngClass]=\"{\n 'zs:bg-blue-500 zs:text-white zs:hover:text-black 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-[opacity,color,background-color] 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"] }]
|
|
1748
1757
|
}], 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"] }] } });
|
|
1749
1758
|
|
|
1750
1759
|
// ========================================================================
|
|
@@ -1766,7 +1775,7 @@ class ScrollToTop {
|
|
|
1766
1775
|
/**
|
|
1767
1776
|
* Tailwind CSS class for the circle's color (background ring).
|
|
1768
1777
|
*/
|
|
1769
|
-
circleColorClass = input('zs:text-gray-400/60 zs:dark:text-gray-600/70 zs:group-hover:brightness-110
|
|
1778
|
+
circleColorClass = input('zs:text-gray-400/60 zs:dark:text-gray-600/70 zs:group-hover:brightness-110', ...(ngDevMode ? [{ debugName: "circleColorClass" }] : []));
|
|
1770
1779
|
/**
|
|
1771
1780
|
* BaseColors class for the arrow and progress indicator color.
|
|
1772
1781
|
*/
|
|
@@ -1816,11 +1825,11 @@ class ScrollToTop {
|
|
|
1816
1825
|
});
|
|
1817
1826
|
}
|
|
1818
1827
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: ScrollToTop, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1819
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.9", type: ScrollToTop, isStandalone: true, selector: "ZS-scroll-to-top", inputs: { position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, circleColorClass: { classPropertyName: "circleColorClass", publicName: "circleColorClass", isSignal: true, isRequired: false, transformFunction: null }, arrowProgressColor: { classPropertyName: "arrowProgressColor", publicName: "arrowProgressColor", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "window:scroll": "onScroll($event)" } }, ngImport: i0, template: "<!-- ========================= Scroll-to-Top Container ========================= -->\n<div\n [ngClass]=\"positionClass()\"\n class=\"zs:fixed zs:group zs:bottom-4 {{ zIndices.scrollToTop }} \n zs:transition-opacity zs:duration-300\"\n [style.opacity]=\"scrollY() > 200 ? 1 : 0\"\n>\n <!-- ========================= Scroll Button ========================= -->\n <button\n (click)=\"scrollToTop()\"\n class=\"zs:w-12 zs:h-12 zs:group-hover:scale-105 zs:rounded-full zs:flex zs:items-center \n zs:justify-center zs:relative zs:overflow-hidden zs:focus:outline-hidden\"\n type=\"button\"\n role=\"button\"\n aria-label=\"Scroll to top\"\n title=\"Scroll to top\"\n >\n <!-- ========================= Progress Ring (SVG) ========================= -->\n <svg\n class=\"zs:absolute zs:inset-0 zs:w-full zs:h-full zs:transform zs:-rotate-90\"\n aria-hidden=\"true\"\n focusable=\"false\"\n >\n <!-- Background Circle -->\n <circle\n cx=\"24\"\n cy=\"24\"\n r=\"22\"\n stroke=\"transparent\"\n stroke-width=\"5\"\n fill=\"currentColor\"\n [ngClass]=\"circleColorClass()\"\n />\n\n <!-- Animated Progress Circle -->\n <circle\n cx=\"24\"\n cy=\"24\"\n r=\"22\"\n stroke=\"currentColor\"\n stroke-width=\"5\"\n fill=\"transparent\"\n [attr.stroke-dasharray]=\"circleCircumference\"\n [attr.stroke-dashoffset]=\"progressOffset()\"\n [ngClass]=\"arrowProgressColorClass()\"\n class=\"zs:transition-
|
|
1828
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.9", type: ScrollToTop, isStandalone: true, selector: "ZS-scroll-to-top", inputs: { position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, circleColorClass: { classPropertyName: "circleColorClass", publicName: "circleColorClass", isSignal: true, isRequired: false, transformFunction: null }, arrowProgressColor: { classPropertyName: "arrowProgressColor", publicName: "arrowProgressColor", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "window:scroll": "onScroll($event)" } }, ngImport: i0, template: "<!-- ========================= Scroll-to-Top Container ========================= -->\n<div\n [ngClass]=\"positionClass()\"\n class=\"zs:fixed zs:group zs:bottom-4 {{ zIndices.scrollToTop }} \n zs:transition-opacity zs:duration-300\"\n [style.opacity]=\"scrollY() > 200 ? 1 : 0\"\n>\n <!-- ========================= Scroll Button ========================= -->\n <button\n (click)=\"scrollToTop()\"\n class=\"zs:w-12 zs:h-12 zs:group-hover:scale-105 zs:rounded-full zs:flex zs:items-center \n zs:justify-center zs:relative zs:overflow-hidden zs:focus:outline-hidden\"\n type=\"button\"\n role=\"button\"\n aria-label=\"Scroll to top\"\n title=\"Scroll to top\"\n >\n <!-- ========================= Progress Ring (SVG) ========================= -->\n <svg\n class=\"zs:absolute zs:inset-0 zs:w-full zs:h-full zs:transform zs:-rotate-90\"\n aria-hidden=\"true\"\n focusable=\"false\"\n >\n <!-- Background Circle -->\n <circle\n cx=\"24\"\n cy=\"24\"\n r=\"22\"\n stroke=\"transparent\"\n stroke-width=\"5\"\n fill=\"currentColor\"\n [ngClass]=\"circleColorClass()\"\n />\n\n <!-- Animated Progress Circle -->\n <circle\n cx=\"24\"\n cy=\"24\"\n r=\"22\"\n stroke=\"currentColor\"\n stroke-width=\"5\"\n fill=\"transparent\"\n [attr.stroke-dasharray]=\"circleCircumference\"\n [attr.stroke-dashoffset]=\"progressOffset()\"\n [ngClass]=\"arrowProgressColorClass()\"\n class=\"zs:transition-[stroke-dashoffset] zs:duration-300 zs:ease-out\"\n stroke-linecap=\"round\"\n />\n </svg>\n\n <!-- ========================= Up Arrow Icon ========================= -->\n <i\n class=\"fas fa-arrow-up zs:relative zs:z-100 zs:text-lg\"\n [ngClass]=\"arrowProgressColorClass()\"\n aria-hidden=\"true\"\n ></i>\n </button>\n</div>", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
|
|
1820
1829
|
}
|
|
1821
1830
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: ScrollToTop, decorators: [{
|
|
1822
1831
|
type: Component,
|
|
1823
|
-
args: [{ selector: 'ZS-scroll-to-top', imports: [CommonModule], template: "<!-- ========================= Scroll-to-Top Container ========================= -->\n<div\n [ngClass]=\"positionClass()\"\n class=\"zs:fixed zs:group zs:bottom-4 {{ zIndices.scrollToTop }} \n zs:transition-opacity zs:duration-300\"\n [style.opacity]=\"scrollY() > 200 ? 1 : 0\"\n>\n <!-- ========================= Scroll Button ========================= -->\n <button\n (click)=\"scrollToTop()\"\n class=\"zs:w-12 zs:h-12 zs:group-hover:scale-105 zs:rounded-full zs:flex zs:items-center \n zs:justify-center zs:relative zs:overflow-hidden zs:focus:outline-hidden\"\n type=\"button\"\n role=\"button\"\n aria-label=\"Scroll to top\"\n title=\"Scroll to top\"\n >\n <!-- ========================= Progress Ring (SVG) ========================= -->\n <svg\n class=\"zs:absolute zs:inset-0 zs:w-full zs:h-full zs:transform zs:-rotate-90\"\n aria-hidden=\"true\"\n focusable=\"false\"\n >\n <!-- Background Circle -->\n <circle\n cx=\"24\"\n cy=\"24\"\n r=\"22\"\n stroke=\"transparent\"\n stroke-width=\"5\"\n fill=\"currentColor\"\n [ngClass]=\"circleColorClass()\"\n />\n\n <!-- Animated Progress Circle -->\n <circle\n cx=\"24\"\n cy=\"24\"\n r=\"22\"\n stroke=\"currentColor\"\n stroke-width=\"5\"\n fill=\"transparent\"\n [attr.stroke-dasharray]=\"circleCircumference\"\n [attr.stroke-dashoffset]=\"progressOffset()\"\n [ngClass]=\"arrowProgressColorClass()\"\n class=\"zs:transition-
|
|
1832
|
+
args: [{ selector: 'ZS-scroll-to-top', imports: [CommonModule], template: "<!-- ========================= Scroll-to-Top Container ========================= -->\n<div\n [ngClass]=\"positionClass()\"\n class=\"zs:fixed zs:group zs:bottom-4 {{ zIndices.scrollToTop }} \n zs:transition-opacity zs:duration-300\"\n [style.opacity]=\"scrollY() > 200 ? 1 : 0\"\n>\n <!-- ========================= Scroll Button ========================= -->\n <button\n (click)=\"scrollToTop()\"\n class=\"zs:w-12 zs:h-12 zs:group-hover:scale-105 zs:rounded-full zs:flex zs:items-center \n zs:justify-center zs:relative zs:overflow-hidden zs:focus:outline-hidden\"\n type=\"button\"\n role=\"button\"\n aria-label=\"Scroll to top\"\n title=\"Scroll to top\"\n >\n <!-- ========================= Progress Ring (SVG) ========================= -->\n <svg\n class=\"zs:absolute zs:inset-0 zs:w-full zs:h-full zs:transform zs:-rotate-90\"\n aria-hidden=\"true\"\n focusable=\"false\"\n >\n <!-- Background Circle -->\n <circle\n cx=\"24\"\n cy=\"24\"\n r=\"22\"\n stroke=\"transparent\"\n stroke-width=\"5\"\n fill=\"currentColor\"\n [ngClass]=\"circleColorClass()\"\n />\n\n <!-- Animated Progress Circle -->\n <circle\n cx=\"24\"\n cy=\"24\"\n r=\"22\"\n stroke=\"currentColor\"\n stroke-width=\"5\"\n fill=\"transparent\"\n [attr.stroke-dasharray]=\"circleCircumference\"\n [attr.stroke-dashoffset]=\"progressOffset()\"\n [ngClass]=\"arrowProgressColorClass()\"\n class=\"zs:transition-[stroke-dashoffset] zs:duration-300 zs:ease-out\"\n stroke-linecap=\"round\"\n />\n </svg>\n\n <!-- ========================= Up Arrow Icon ========================= -->\n <i\n class=\"fas fa-arrow-up zs:relative zs:z-100 zs:text-lg\"\n [ngClass]=\"arrowProgressColorClass()\"\n aria-hidden=\"true\"\n ></i>\n </button>\n</div>" }]
|
|
1824
1833
|
}], propDecorators: { position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], circleColorClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "circleColorClass", required: false }] }], arrowProgressColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "arrowProgressColor", required: false }] }], onScroll: [{
|
|
1825
1834
|
type: HostListener,
|
|
1826
1835
|
args: ['window:scroll', ['$event']]
|
|
@@ -1903,11 +1912,11 @@ class Spinner {
|
|
|
1903
1912
|
borderColor = computed(() => ColorMapping.get(this.color())?.border, ...(ngDevMode ? [{ debugName: "borderColor" }] : []));
|
|
1904
1913
|
textColor = computed(() => ColorMapping.get(this.color())?.text, ...(ngDevMode ? [{ debugName: "textColor" }] : []));
|
|
1905
1914
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: Spinner, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1906
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: Spinner, isStandalone: true, selector: "ZS-spinner", inputs: { loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, isFloating: { classPropertyName: "isFloating", publicName: "isFloating", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, withBox: { classPropertyName: "withBox", publicName: "withBox", isSignal: true, isRequired: false, transformFunction: null }, boxColorClass: { classPropertyName: "boxColorClass", publicName: "boxColorClass", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<!-- ========================= Loader Wrapper ========================= -->\n@if(loading()) {\n <div \n [ngClass]=\"[wrapperClasses()
|
|
1915
|
+
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()]\" \n role=\"status\" \n aria-live=\"polite\" \n aria-busy=\"true\"\n >\n <div [ngClass]=\"[boxClasses()]\">\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"] }] });
|
|
1907
1916
|
}
|
|
1908
1917
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: Spinner, decorators: [{
|
|
1909
1918
|
type: Component,
|
|
1910
|
-
args: [{ selector: 'ZS-spinner', imports: [CommonModule], template: "<!-- ========================= Loader Wrapper ========================= -->\n@if(loading()) {\n <div \n [ngClass]=\"[wrapperClasses()
|
|
1919
|
+
args: [{ selector: 'ZS-spinner', imports: [CommonModule], template: "<!-- ========================= Loader Wrapper ========================= -->\n@if(loading()) {\n <div \n [ngClass]=\"[wrapperClasses()]\" \n role=\"status\" \n aria-live=\"polite\" \n aria-busy=\"true\"\n >\n <div [ngClass]=\"[boxClasses()]\">\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"] }]
|
|
1911
1920
|
}], 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 }] }] } });
|
|
1912
1921
|
|
|
1913
1922
|
// ==============================================
|
|
@@ -1926,7 +1935,7 @@ class ThemeToggle {
|
|
|
1926
1935
|
// ==============================================
|
|
1927
1936
|
// Inputs
|
|
1928
1937
|
// ==============================================
|
|
1929
|
-
bodyClass = input('zs:bg-white zs:dark:bg-gray-900 zs:text-gray-900 zs:dark:text-gray-100
|
|
1938
|
+
bodyClass = input('zs:bg-white zs:dark:bg-gray-900 zs:text-gray-900 zs:dark:text-gray-100', ...(ngDevMode ? [{ debugName: "bodyClass" }] : []));
|
|
1930
1939
|
showDefaultUI = input(true, ...(ngDevMode ? [{ debugName: "showDefaultUI" }] : []));
|
|
1931
1940
|
setManualTheme = input(null, ...(ngDevMode ? [{ debugName: "setManualTheme" }] : []));
|
|
1932
1941
|
fromTop = input(1 / 4, ...(ngDevMode ? [{ debugName: "fromTop" }] : []));
|
|
@@ -1935,7 +1944,7 @@ class ThemeToggle {
|
|
|
1935
1944
|
isDragging = signal(false, ...(ngDevMode ? [{ debugName: "isDragging" }] : []));
|
|
1936
1945
|
startY = 0;
|
|
1937
1946
|
startTop = 0;
|
|
1938
|
-
transitionValue = 'zs:transition-
|
|
1947
|
+
transitionValue = 'zs:transition-[translate] zs:duration-300';
|
|
1939
1948
|
transition = signal('', ...(ngDevMode ? [{ debugName: "transition" }] : []));
|
|
1940
1949
|
// ==============================================
|
|
1941
1950
|
// Outputs
|
|
@@ -2068,11 +2077,11 @@ class ThemeToggle {
|
|
|
2068
2077
|
}
|
|
2069
2078
|
}
|
|
2070
2079
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: ThemeToggle, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2071
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: ThemeToggle, isStandalone: true, selector: "ZS-theme-toggle", inputs: { bodyClass: { classPropertyName: "bodyClass", publicName: "bodyClass", isSignal: true, isRequired: false, transformFunction: null }, showDefaultUI: { classPropertyName: "showDefaultUI", publicName: "showDefaultUI", isSignal: true, isRequired: false, transformFunction: null }, setManualTheme: { classPropertyName: "setManualTheme", publicName: "setManualTheme", isSignal: true, isRequired: false, transformFunction: null }, fromTop: { classPropertyName: "fromTop", publicName: "fromTop", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { themeChangeEv: "themeChangeEv" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, ngImport: i0, template: "<!-- ========================= Theme Switcher Panel ========================= -->\n@if(showDefaultUI()) {\n <div\n class=\"zs:fixed zs:left-0 {{ zIndices.themeToggle }} zs:transform \n zs:-translate-y-1/2\"\n\n [style.top.px]=\"panelTop()\"\n [ngClass]=\"[!isOpen() ? 'zs:-translate-x-24' : '', transition()]\"\n\n (pointerdown)=\"onDragStart($event)\"\n (pointermove)=\"onDragMove($event)\"\n (pointerup)=\"onDragEnd($event)\"\n (pointercancel)=\"onDragEnd($event)\"\n\n style=\"touch-action: none; cursor: grab;\"\n >\n <!-- ========================= Theme Selection Buttons ========================= -->\n <div class=\"zs:flex zs:items-center\">\n <div \n class=\"zs:flex zs:overflow-hidden
|
|
2080
|
+
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\"\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: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: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 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"] }] });
|
|
2072
2081
|
}
|
|
2073
2082
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: ThemeToggle, decorators: [{
|
|
2074
2083
|
type: Component,
|
|
2075
|
-
args: [{ selector: 'ZS-theme-toggle', imports: [CommonModule], template: "<!-- ========================= Theme Switcher Panel ========================= -->\n@if(showDefaultUI()) {\n <div\n class=\"zs:fixed zs:left-0 {{ zIndices.themeToggle }} zs:transform \n zs:-translate-y-1/2\"\n\n [style.top.px]=\"panelTop()\"\n [ngClass]=\"[!isOpen() ? 'zs:-translate-x-24' : '', transition()]\"\n\n (pointerdown)=\"onDragStart($event)\"\n (pointermove)=\"onDragMove($event)\"\n (pointerup)=\"onDragEnd($event)\"\n (pointercancel)=\"onDragEnd($event)\"\n\n style=\"touch-action: none; cursor: grab;\"\n >\n <!-- ========================= Theme Selection Buttons ========================= -->\n <div class=\"zs:flex zs:items-center\">\n <div \n class=\"zs:flex zs:overflow-hidden
|
|
2084
|
+
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\"\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: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: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 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"] }]
|
|
2076
2085
|
}], 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: [{
|
|
2077
2086
|
type: HostListener,
|
|
2078
2087
|
args: ['document:click', ['$event']]
|
|
@@ -2106,11 +2115,11 @@ class Label {
|
|
|
2106
2115
|
return sizes[this.size()];
|
|
2107
2116
|
}, ...(ngDevMode ? [{ debugName: "sizeClasses" }] : []));
|
|
2108
2117
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: Label, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2109
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: Label, isStandalone: true, selector: "ZS-label", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, hintId: { classPropertyName: "hintId", publicName: "hintId", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, for: { classPropertyName: "for", publicName: "for", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<!-- ================= Label Wrapper ================= -->\n@if (label() || hint()) {\n <label \n [for]=\"for()\" \n class=\"zs:flex zs:items-center zs:flex-wrap\"\n >\n <!-- ========== Label Text ========== -->\n @if (label()) {\n <span class=\"zs:font-semibold\" \n [ngClass]=\"[\n sizeClasses().label,\n hint() ? 'zs:mr-1.5' : ''\n ]\">\n {{ label() }}\n\n <!-- Required Indicator -->\n @if (true) {\n <span class=\"zs:text-red-500 zs:ml-1\" aria-hidden=\"true\">*</span>\n <span class=\"sr-only\">(required)</span>\n }\n </span>\n }\n\n <!-- ========== Hint Text ========== -->\n @if (hint()) {\n <small\n [id]=\"hintId()\"\n class=\"zs:text-slate-500 zs:dark:text-slate-400
|
|
2118
|
+
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"] }] });
|
|
2110
2119
|
}
|
|
2111
2120
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: Label, decorators: [{
|
|
2112
2121
|
type: Component,
|
|
2113
|
-
args: [{ selector: 'ZS-label', imports: [CommonModule], template: "<!-- ================= Label Wrapper ================= -->\n@if (label() || hint()) {\n <label \n [for]=\"for()\" \n class=\"zs:flex zs:items-center zs:flex-wrap\"\n >\n <!-- ========== Label Text ========== -->\n @if (label()) {\n <span class=\"zs:font-semibold\" \n [ngClass]=\"[\n sizeClasses().label,\n hint() ? 'zs:mr-1.5' : ''\n ]\">\n {{ label() }}\n\n <!-- Required Indicator -->\n @if (true) {\n <span class=\"zs:text-red-500 zs:ml-1\" aria-hidden=\"true\">*</span>\n <span class=\"sr-only\">(required)</span>\n }\n </span>\n }\n\n <!-- ========== Hint Text ========== -->\n @if (hint()) {\n <small\n [id]=\"hintId()\"\n class=\"zs:text-slate-500 zs:dark:text-slate-400
|
|
2122
|
+
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"] }]
|
|
2114
2123
|
}], 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 }] }] } });
|
|
2115
2124
|
|
|
2116
2125
|
// ==============================================
|
|
@@ -2199,11 +2208,11 @@ class Checkbox {
|
|
|
2199
2208
|
}
|
|
2200
2209
|
}
|
|
2201
2210
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: Checkbox, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2202
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.9", type: Checkbox, isStandalone: true, selector: "ZS-checkbox", inputs: { Id: { classPropertyName: "Id", publicName: "Id", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, inputStyle: { classPropertyName: "inputStyle", publicName: "inputStyle", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, isReadonly: { classPropertyName: "isReadonly", publicName: "isReadonly", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, shape: { classPropertyName: "shape", publicName: "shape", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, ngImport: i0, template: "<div class=\"zs:flex zs:items-center zs:justify-start zs:w-full zs:select-none\">\n <!-- ===================== Checkbox Wrapper ===================== -->\n <div\n class=\"zs:cursor-pointer group leading-none\"\n >\n <!-- ===================== Hidden Input (Native for screen readers) ===================== -->\n <input\n type=\"checkbox\"\n class=\"zs:hidden\"\n [id]=\"Id()\"\n [checked]=\"isChecked()\"\n [disabled]=\"disabledOrReadonly()\"\n (change)=\"toggleChecked()\"\n />\n\n <!-- ===================== Custom Accessible Checkbox ===================== -->\n <span\n role=\"'checkbox'\"\n tabindex=\"0\"\n [attr.aria-checked]=\"isChecked()\"\n [attr.aria-disabled]=\"disabledOrReadonly()\"\n [attr.aria-labelledby]=\"Id() + '-label'\"\n [ngClass]=\"[\n sizeClass(),\n palette().checkboxTextPalette.checkBoxText,\n palette().checkboxTextPalette.checkBoxTextHover,\n palette().ringPalette.ring,\n 'zs:leading-none zs:inline-flex zs:items-center zs:justify-center zs:focus:outline-hidden zs:focus-visible:ring-2
|
|
2211
|
+
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"] }] });
|
|
2203
2212
|
}
|
|
2204
2213
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: Checkbox, decorators: [{
|
|
2205
2214
|
type: Component,
|
|
2206
|
-
args: [{ selector: 'ZS-checkbox', imports: [Label, CommonModule], template: "<div class=\"zs:flex zs:items-center zs:justify-start zs:w-full zs:select-none\">\n <!-- ===================== Checkbox Wrapper ===================== -->\n <div\n class=\"zs:cursor-pointer group leading-none\"\n >\n <!-- ===================== Hidden Input (Native for screen readers) ===================== -->\n <input\n type=\"checkbox\"\n class=\"zs:hidden\"\n [id]=\"Id()\"\n [checked]=\"isChecked()\"\n [disabled]=\"disabledOrReadonly()\"\n (change)=\"toggleChecked()\"\n />\n\n <!-- ===================== Custom Accessible Checkbox ===================== -->\n <span\n role=\"'checkbox'\"\n tabindex=\"0\"\n [attr.aria-checked]=\"isChecked()\"\n [attr.aria-disabled]=\"disabledOrReadonly()\"\n [attr.aria-labelledby]=\"Id() + '-label'\"\n [ngClass]=\"[\n sizeClass(),\n palette().checkboxTextPalette.checkBoxText,\n palette().checkboxTextPalette.checkBoxTextHover,\n palette().ringPalette.ring,\n 'zs:leading-none zs:inline-flex zs:items-center zs:justify-center zs:focus:outline-hidden zs:focus-visible:ring-2
|
|
2215
|
+
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>" }]
|
|
2207
2216
|
}], 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"] }] } });
|
|
2208
2217
|
|
|
2209
2218
|
// ==============================================================================
|
|
@@ -2435,11 +2444,11 @@ class FileInput {
|
|
|
2435
2444
|
});
|
|
2436
2445
|
}
|
|
2437
2446
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: FileInput, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2438
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: FileInput, isStandalone: true, selector: "ZS-file", inputs: { Id: { classPropertyName: "Id", publicName: "Id", isSignal: true, isRequired: false, transformFunction: null }, iName: { classPropertyName: "iName", publicName: "iName", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, inputStyle: { classPropertyName: "inputStyle", publicName: "inputStyle", isSignal: true, isRequired: false, transformFunction: null }, autofocus: { classPropertyName: "autofocus", publicName: "autofocus", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, isReadonly: { classPropertyName: "isReadonly", publicName: "isReadonly", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, validateFns: { classPropertyName: "validateFns", publicName: "validateFns", isSignal: true, isRequired: false, transformFunction: null }, accept: { classPropertyName: "accept", publicName: "accept", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, maxSize: { classPropertyName: "maxSize", publicName: "maxSize", isSignal: true, isRequired: false, transformFunction: null }, allowPreview: { classPropertyName: "allowPreview", publicName: "allowPreview", isSignal: true, isRequired: false, transformFunction: null }, maxFiles: { classPropertyName: "maxFiles", publicName: "maxFiles", isSignal: true, isRequired: false, transformFunction: null }, files: { classPropertyName: "files", publicName: "files", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { changeEv: "changeEv", files: "filesChange", touched: "touchedChange" }, viewQueries: [{ propertyName: "fileInputRef", first: true, predicate: ["fileInput"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\n class=\"zs:flex zs:flex-col zs:gap-2 zs:w-full\"\n [ngClass]=\"disabled() ? 'zs:opacity-60' : ''\"\n role=\"group\"\n [attr.aria-labelledby]=\"Id() + '-label'\"\n [attr.aria-describedby]=\"Id() + '-hint ' + Id() + '-error'\"\n>\n <!-- ========================= Label & Hint ========================= -->\n <ZS-label [class]=\"(label() || hint()) ? 'zs:mb-1' : ''\"\n [label]=\"label()\"\n [hint]=\"hint()\"\n [required]=\"required()\"\n [hintId]=\"Id() + '-hint'\"\n [for]=\"Id()\"\n [id]=\"Id() + '-label'\"\n >\n </ZS-label>\n\n <!-- ================= Input ================= -->\n <div\n [class]=\"[\n 'zs:relative zs:rounded-xl zs:flex zs:flex-col zs:justify-center zs:items-center zs:gap-2 zs:border-2 zs:border-dashed zs:transition-
|
|
2447
|
+
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 \n zs:items-center zs:gap-2 zs:border-2 zs:border-dashed \n zs:transition-[border-color,background-color,box-shadow] \n 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"] }] });
|
|
2439
2448
|
}
|
|
2440
2449
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: FileInput, decorators: [{
|
|
2441
2450
|
type: Component,
|
|
2442
|
-
args: [{ selector: 'ZS-file', imports: [Label, InputErrors, CommonModule, Button], template: "<div\n class=\"zs:flex zs:flex-col zs:gap-2 zs:w-full\"\n [ngClass]=\"disabled() ? 'zs:opacity-60' : ''\"\n role=\"group\"\n [attr.aria-labelledby]=\"Id() + '-label'\"\n [attr.aria-describedby]=\"Id() + '-hint ' + Id() + '-error'\"\n>\n <!-- ========================= Label & Hint ========================= -->\n <ZS-label [class]=\"(label() || hint()) ? 'zs:mb-1' : ''\"\n [label]=\"label()\"\n [hint]=\"hint()\"\n [required]=\"required()\"\n [hintId]=\"Id() + '-hint'\"\n [for]=\"Id()\"\n [id]=\"Id() + '-label'\"\n >\n </ZS-label>\n\n <!-- ================= Input ================= -->\n <div\n [class]=\"[\n 'zs:relative zs:rounded-xl zs:flex zs:flex-col zs:justify-center zs:items-center zs:gap-2 zs:border-2 zs:border-dashed zs:transition-
|
|
2451
|
+
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 \n zs:items-center zs:gap-2 zs:border-2 zs:border-dashed \n zs:transition-[border-color,background-color,box-shadow] \n 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"] }]
|
|
2443
2452
|
}], 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 }] }] } });
|
|
2444
2453
|
|
|
2445
2454
|
// ==============================================================================
|
|
@@ -2554,7 +2563,7 @@ class Input {
|
|
|
2554
2563
|
// ==============================================================================
|
|
2555
2564
|
disabledOrReadonly = computed(() => this.disabled() || this.isReadonly(), ...(ngDevMode ? [{ debugName: "disabledOrReadonly" }] : []));
|
|
2556
2565
|
containerClasses = computed(() => {
|
|
2557
|
-
const baseClasses = 'zs:border zs:transition-
|
|
2566
|
+
const baseClasses = 'zs:border zs:transition-[border-color,background-color,box-shadow,opacity] zs:duration-150 zs:ease-out zs:focus-within:ring-2 motion-reduce:zs:transition-none';
|
|
2558
2567
|
const hasError = this.error().length;
|
|
2559
2568
|
let styleConfig = inputPaletteMap.get(this.inputStyle());
|
|
2560
2569
|
let ringConfig = ringPaletteMap.get(this.inputStyle());
|
|
@@ -2775,11 +2784,11 @@ class Input {
|
|
|
2775
2784
|
this.changedEv.emit({ value, valid, fromForce });
|
|
2776
2785
|
}
|
|
2777
2786
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: Input, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2778
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: Input, isStandalone: true, selector: "ZS-input", inputs: { Id: { classPropertyName: "Id", publicName: "Id", isSignal: true, isRequired: false, transformFunction: null }, iName: { classPropertyName: "iName", publicName: "iName", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, inputStyle: { classPropertyName: "inputStyle", publicName: "inputStyle", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, isReadonly: { classPropertyName: "isReadonly", publicName: "isReadonly", isSignal: true, isRequired: false, transformFunction: null }, autocomplete: { classPropertyName: "autocomplete", publicName: "autocomplete", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, inputmode: { classPropertyName: "inputmode", publicName: "inputmode", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, showSearchIcon: { classPropertyName: "showSearchIcon", publicName: "showSearchIcon", isSignal: true, isRequired: false, transformFunction: null }, showLoaderIconOnSearchInput: { classPropertyName: "showLoaderIconOnSearchInput", publicName: "showLoaderIconOnSearchInput", isSignal: true, isRequired: false, transformFunction: null }, maxlength: { classPropertyName: "maxlength", publicName: "maxlength", isSignal: true, isRequired: false, transformFunction: null }, minlength: { classPropertyName: "minlength", publicName: "minlength", isSignal: true, isRequired: false, transformFunction: null }, spellcheck: { classPropertyName: "spellcheck", publicName: "spellcheck", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, validateFns: { classPropertyName: "validateFns", publicName: "validateFns", isSignal: true, isRequired: false, transformFunction: null }, formatFn: { classPropertyName: "formatFn", publicName: "formatFn", isSignal: true, isRequired: false, transformFunction: null }, autofocus: { classPropertyName: "autofocus", publicName: "autofocus", isSignal: true, isRequired: false, transformFunction: null }, searchDebounceDelay: { classPropertyName: "searchDebounceDelay", publicName: "searchDebounceDelay", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", touched: "touchedChange", enterEv: "enterEv", focusEv: "focusEv", blurEv: "blurEv", changedEv: "changedEv", searchEv: "searchEv", clearedEv: "clearedEv", keydownEv: "keydownEv" }, viewQueries: [{ propertyName: "inputEl", first: true, predicate: ["inputEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<!-- ==============================================\n Input Field Component (ZS-Input)\n ============================================== -->\n\n<div class=\"zs:w-full\">\n\n <!-- ========================= Label & Hint ========================= -->\n <ZS-label [class]=\"(label() || hint()) ? 'zs:mb-1' : ''\"\n [label]=\"label()\"\n [hint]=\"hint()\"\n [required]=\"required()\"\n [hintId]=\"Id() + '-hint'\"\n [size]=\"size()\"\n [for]=\"Id()\"\n >\n </ZS-label>\n\n <!-- ========================= Input Container ========================= -->\n <div\n class=\"zs:relative zs:flex zs:items-center zs:w-full
|
|
2787
|
+
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"] }] });
|
|
2779
2788
|
}
|
|
2780
2789
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: Input, decorators: [{
|
|
2781
2790
|
type: Component,
|
|
2782
|
-
args: [{ selector: 'ZS-input', imports: [CommonModule, Label, InputErrors], template: "<!-- ==============================================\n Input Field Component (ZS-Input)\n ============================================== -->\n\n<div class=\"zs:w-full\">\n\n <!-- ========================= Label & Hint ========================= -->\n <ZS-label [class]=\"(label() || hint()) ? 'zs:mb-1' : ''\"\n [label]=\"label()\"\n [hint]=\"hint()\"\n [required]=\"required()\"\n [hintId]=\"Id() + '-hint'\"\n [size]=\"size()\"\n [for]=\"Id()\"\n >\n </ZS-label>\n\n <!-- ========================= Input Container ========================= -->\n <div\n class=\"zs:relative zs:flex zs:items-center zs:w-full
|
|
2791
|
+
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>" }]
|
|
2783
2792
|
}], 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"] }] } });
|
|
2784
2793
|
|
|
2785
2794
|
// ==============================================
|
|
@@ -2948,11 +2957,11 @@ class Range {
|
|
|
2948
2957
|
});
|
|
2949
2958
|
}
|
|
2950
2959
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: Range, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2951
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: Range, isStandalone: true, selector: "ZS-range", inputs: { Id: { classPropertyName: "Id", publicName: "Id", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, inputStyle: { classPropertyName: "inputStyle", publicName: "inputStyle", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, isReadonly: { classPropertyName: "isReadonly", publicName: "isReadonly", isSignal: true, isRequired: false, transformFunction: null }, showValue: { classPropertyName: "showValue", publicName: "showValue", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, viewQueries: [{ propertyName: "trackRef", first: true, predicate: ["track"], descendants: true, isSignal: true }], ngImport: i0, template: "<!-- ========================= Label ========================= -->\n<div class=\"zs:flex zs:flex-col zs:w-full zs:select-none\">\n <ZS-label [class]=\"(label() || hint()) ? 'zs:mb-1' : ''\"\n [label]=\"label()\"\n [hint]=\"hint()\"\n [hintId]=\"Id() + '-hint'\"\n [size]=\"size()\"\n [for]=\"Id()\"\n ></ZS-label>\n\n <!-- ========================= Slider Container ========================= -->\n <div class=\"zs:flex zs:items-center\"\n [class]=\"gapCLasses()\">\n \n <!-- ========================= Track ========================= -->\n <div\n #track\n [class]=\"rangeClasses()\"\n (mousedown)=\"onMouseDown($event)\"\n >\n \n <!-- ========================= Track Background ========================= -->\n <div\n class=\"zs:absolute zs:inset-0 zs:rounded-full zs:bg-linear-to-r zs:from-gray-200 zs:to-gray-300 zs:transition-
|
|
2960
|
+
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 \n zs:bg-linear-to-r zs:from-gray-200 zs:to-gray-300 \n zs:transition-[filter,background-image] zs:duration-300 zs:ease-out\n motion-reduce:zs:transition-none 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 \n zs:transition-[width,background-color,box-shadow]\n zs:duration-200 zs:ease-out zs:shadow-sm motion-reduce:zs:transition-none\"\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-[transform,box-shadow,background-color] \n 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 });
|
|
2952
2961
|
}
|
|
2953
2962
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: Range, decorators: [{
|
|
2954
2963
|
type: Component,
|
|
2955
|
-
args: [{ selector: 'ZS-range', imports: [Label, CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- ========================= Label ========================= -->\n<div class=\"zs:flex zs:flex-col zs:w-full zs:select-none\">\n <ZS-label [class]=\"(label() || hint()) ? 'zs:mb-1' : ''\"\n [label]=\"label()\"\n [hint]=\"hint()\"\n [hintId]=\"Id() + '-hint'\"\n [size]=\"size()\"\n [for]=\"Id()\"\n ></ZS-label>\n\n <!-- ========================= Slider Container ========================= -->\n <div class=\"zs:flex zs:items-center\"\n [class]=\"gapCLasses()\">\n \n <!-- ========================= Track ========================= -->\n <div\n #track\n [class]=\"rangeClasses()\"\n (mousedown)=\"onMouseDown($event)\"\n >\n \n <!-- ========================= Track Background ========================= -->\n <div\n class=\"zs:absolute zs:inset-0 zs:rounded-full zs:bg-linear-to-r zs:from-gray-200 zs:to-gray-300 zs:transition-
|
|
2964
|
+
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 \n zs:bg-linear-to-r zs:from-gray-200 zs:to-gray-300 \n zs:transition-[filter,background-image] zs:duration-300 zs:ease-out\n motion-reduce:zs:transition-none 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 \n zs:transition-[width,background-color,box-shadow]\n zs:duration-200 zs:ease-out zs:shadow-sm motion-reduce:zs:transition-none\"\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-[transform,box-shadow,background-color] \n 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"] }]
|
|
2956
2965
|
}], 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 }] }] } });
|
|
2957
2966
|
|
|
2958
2967
|
// =================================================================================================
|
|
@@ -3022,7 +3031,7 @@ class Select {
|
|
|
3022
3031
|
}, ...(ngDevMode ? [{ debugName: "filteredItems" }] : []));
|
|
3023
3032
|
containerClasses = computed(() => {
|
|
3024
3033
|
const base = `
|
|
3025
|
-
zs:border zs:transition-
|
|
3034
|
+
zs:border zs:transition-opacity zs:duration-150
|
|
3026
3035
|
zs:flex zs:items-center zs:justify-between
|
|
3027
3036
|
zs:w-full zs:min-w-48 zs:px-3 zs:py-2
|
|
3028
3037
|
zs:rounded-lg zs:shadow-sm
|
|
@@ -3043,7 +3052,7 @@ class Select {
|
|
|
3043
3052
|
].filter(Boolean).join(' ');
|
|
3044
3053
|
}, ...(ngDevMode ? [{ debugName: "containerClasses" }] : []));
|
|
3045
3054
|
clearClass = computed(() => {
|
|
3046
|
-
const base = 'zs:mt-2 zs:text-sm zs:flex zs:items-center
|
|
3055
|
+
const base = 'zs:mt-2 zs:text-sm zs:flex zs:items-center';
|
|
3047
3056
|
return [
|
|
3048
3057
|
base,
|
|
3049
3058
|
this.styleEntry().selectEntry.cleartext,
|
|
@@ -3161,11 +3170,11 @@ class Select {
|
|
|
3161
3170
|
this.selectedItemsEv.emit({ value, valid, fromForce });
|
|
3162
3171
|
}
|
|
3163
3172
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: Select, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3164
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: Select, isStandalone: true, selector: "ZS-select", inputs: { Id: { classPropertyName: "Id", publicName: "Id", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, isReadonly: { classPropertyName: "isReadonly", publicName: "isReadonly", isSignal: true, isRequired: false, transformFunction: null }, inputStyle: { classPropertyName: "inputStyle", publicName: "inputStyle", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, showSearch: { classPropertyName: "showSearch", publicName: "showSearch", isSignal: true, isRequired: false, transformFunction: null }, searchPlaceholder: { classPropertyName: "searchPlaceholder", publicName: "searchPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, noResultsText: { classPropertyName: "noResultsText", publicName: "noResultsText", isSignal: true, isRequired: false, transformFunction: null }, showClearButton: { classPropertyName: "showClearButton", publicName: "showClearButton", isSignal: true, isRequired: false, transformFunction: null }, searchDebounceDelay: { classPropertyName: "searchDebounceDelay", publicName: "searchDebounceDelay", isSignal: true, isRequired: false, transformFunction: null }, showLoaderIconOnSearchInput: { classPropertyName: "showLoaderIconOnSearchInput", publicName: "showLoaderIconOnSearchInput", isSignal: true, isRequired: false, transformFunction: null }, preselectedIds: { classPropertyName: "preselectedIds", publicName: "preselectedIds", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, validateFns: { classPropertyName: "validateFns", publicName: "validateFns", isSignal: true, isRequired: false, transformFunction: null }, selectedItems: { classPropertyName: "selectedItems", publicName: "selectedItems", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedItems: "selectedItemsChange", touched: "touchedChange", selectedItemsEv: "selectedItemsEv", selectionClearedEv: "selectionClearedEv" }, ngImport: i0, template: "<!-- ========================= Label & Hint ========================= -->\n<div class=\"zs:relative zs:w-full\">\n <ZS-label [class]=\"(label() || hint()) ? 'zs:mb-1' : ''\"\n [label]=\"label()\"\n [hint]=\"hint()\"\n [required]=\"required()\"\n [hintId]=\"Id() + '-hint'\"\n [for]=\"Id() + '-trigger'\">\n </ZS-label>\n\n <!-- ========================= Trigger Button (Combobox) ========================= -->\n <button\n id=\"{{ Id() + '-trigger' }}\"\n type=\"button\"\n role=\"combobox\"\n aria-haspopup=\"listbox\"\n [attr.aria-expanded]=\"isOpen()\"\n [attr.aria-controls]=\"Id() + '-options'\"\n [attr.aria-describedby]=\"hint() ? Id() + '-hint' : null\"\n [disabled]=\"disabledOrReadonly()\"\n
|
|
3173
|
+
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 [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]\">\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: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\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\">\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: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\"></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\">\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"] }] });
|
|
3165
3174
|
}
|
|
3166
3175
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: Select, decorators: [{
|
|
3167
3176
|
type: Component,
|
|
3168
|
-
args: [{ selector: 'ZS-select', imports: [CommonModule, FormsModule, Input, Label, InputErrors], template: "<!-- ========================= Label & Hint ========================= -->\n<div class=\"zs:relative zs:w-full\">\n <ZS-label [class]=\"(label() || hint()) ? 'zs:mb-1' : ''\"\n [label]=\"label()\"\n [hint]=\"hint()\"\n [required]=\"required()\"\n [hintId]=\"Id() + '-hint'\"\n [for]=\"Id() + '-trigger'\">\n </ZS-label>\n\n <!-- ========================= Trigger Button (Combobox) ========================= -->\n <button\n id=\"{{ Id() + '-trigger' }}\"\n type=\"button\"\n role=\"combobox\"\n aria-haspopup=\"listbox\"\n [attr.aria-expanded]=\"isOpen()\"\n [attr.aria-controls]=\"Id() + '-options'\"\n [attr.aria-describedby]=\"hint() ? Id() + '-hint' : null\"\n [disabled]=\"disabledOrReadonly()\"\n
|
|
3177
|
+
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 [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]\">\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: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\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\">\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: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\"></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\">\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"] }]
|
|
3169
3178
|
}], 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"] }] } });
|
|
3170
3179
|
|
|
3171
3180
|
class Toggle {
|
|
@@ -3242,22 +3251,22 @@ class Toggle {
|
|
|
3242
3251
|
}
|
|
3243
3252
|
}
|
|
3244
3253
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: Toggle, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3245
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.9", type: Toggle, isStandalone: true, selector: "ZS-toggle", 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 }, color: { classPropertyName: "color", publicName: "color", 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 }, icon: { classPropertyName: "icon", publicName: "icon", 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 } }, 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 zs: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 Toggle ===================== -->\n <button\n (click)=\"value.set(!value())\"\n class=\"zs:relative zs:rounded-full zs:border-2 zs:flex zs:items-center zs:
|
|
3254
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.9", type: Toggle, isStandalone: true, selector: "ZS-toggle", 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 }, color: { classPropertyName: "color", publicName: "color", 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 }, icon: { classPropertyName: "icon", publicName: "icon", 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 } }, 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 zs: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 Toggle ===================== -->\n <button\n (click)=\"value.set(!value())\"\n class=\"zs:relative zs:rounded-full zs:border-2 zs:flex zs:items-center zs:overflow-hidden\"\n [ngClass]=\"[\n toggleClasses(),\n colorClasses('border'),\n value() ? colorClasses('bg') : '', \n value() ? '' : 'zs:bg-gray-100 zs:dark:bg-gray-700',\n btnSize(),\n ]\"\n >\n <div\n class=\"zs:absolute zs:left-1 zs:top-1/2 zs:-translate-1/2\n zs:rounded-full zs:flex zs:items-center zs:justify-center \n zs:transition-[translate] zs:duration-500 zs:ease-in-out zs:shadow-md\"\n [ngClass]=\"[\n value() ? '' : colorClasses('bg'),\n value() ? colorClasses('text') : 'zs:text-gray-100 zs:dark:text-gray-300',\n value() ? 'zs:bg-gray-100 zs:dark:bg-gray-300' : '',\n wrapperSize(),\n value() ? transSize() : 'zs:translate-x-0',\n ]\"\n >\n <i [class]=\"icon()\"></i>\n </div>\n </button>\n </div>\n\n <!-- ===================== Label (ZS-label component) ===================== -->\n <ZS-label [class]=\"(label() || hint()) ? 'zs:ml-1' : ''\"\n [id]=\"Id() + '-label'\"\n [label]=\"label()\"\n [hint]=\"hint()\"\n [size]=\"size()\"\n [hintId]=\"Id() + '-hint'\"\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"] }] });
|
|
3246
3255
|
}
|
|
3247
3256
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: Toggle, decorators: [{
|
|
3248
3257
|
type: Component,
|
|
3249
|
-
args: [{ selector: 'ZS-toggle', 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 zs: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 Toggle ===================== -->\n <button\n (click)=\"value.set(!value())\"\n class=\"zs:relative zs:rounded-full zs:border-2 zs:flex zs:items-center zs:
|
|
3258
|
+
args: [{ selector: 'ZS-toggle', 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 zs: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 Toggle ===================== -->\n <button\n (click)=\"value.set(!value())\"\n class=\"zs:relative zs:rounded-full zs:border-2 zs:flex zs:items-center zs:overflow-hidden\"\n [ngClass]=\"[\n toggleClasses(),\n colorClasses('border'),\n value() ? colorClasses('bg') : '', \n value() ? '' : 'zs:bg-gray-100 zs:dark:bg-gray-700',\n btnSize(),\n ]\"\n >\n <div\n class=\"zs:absolute zs:left-1 zs:top-1/2 zs:-translate-1/2\n zs:rounded-full zs:flex zs:items-center zs:justify-center \n zs:transition-[translate] zs:duration-500 zs:ease-in-out zs:shadow-md\"\n [ngClass]=\"[\n value() ? '' : colorClasses('bg'),\n value() ? colorClasses('text') : 'zs:text-gray-100 zs:dark:text-gray-300',\n value() ? 'zs:bg-gray-100 zs:dark:bg-gray-300' : '',\n wrapperSize(),\n value() ? transSize() : 'zs:translate-x-0',\n ]\"\n >\n <i [class]=\"icon()\"></i>\n </div>\n </button>\n </div>\n\n <!-- ===================== Label (ZS-label component) ===================== -->\n <ZS-label [class]=\"(label() || hint()) ? 'zs:ml-1' : ''\"\n [id]=\"Id() + '-label'\"\n [label]=\"label()\"\n [hint]=\"hint()\"\n [size]=\"size()\"\n [hintId]=\"Id() + '-hint'\"\n [for]=\"Id()\"\n ></ZS-label>\n</div>" }]
|
|
3250
3259
|
}], 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 }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], isReadonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "isReadonly", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }] } });
|
|
3251
3260
|
|
|
3252
3261
|
class Footer {
|
|
3253
3262
|
showDefultContent = input(true, ...(ngDevMode ? [{ debugName: "showDefultContent" }] : []));
|
|
3254
3263
|
pages = input([], ...(ngDevMode ? [{ debugName: "pages" }] : []));
|
|
3255
3264
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: Footer, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3256
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: Footer, isStandalone: true, selector: "ZS-footer", inputs: { showDefultContent: { classPropertyName: "showDefultContent", publicName: "showDefultContent", isSignal: true, isRequired: false, transformFunction: null }, pages: { classPropertyName: "pages", publicName: "pages", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<footer class=\"zs:bg-gray-700 zs:dark:bg-gray-950 \nzs:dark:text-gray-300 zs:text-white zs:py-6
|
|
3265
|
+
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"] }] });
|
|
3257
3266
|
}
|
|
3258
3267
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: Footer, decorators: [{
|
|
3259
3268
|
type: Component,
|
|
3260
|
-
args: [{ selector: 'ZS-footer', imports: [RouterModule], template: "<footer class=\"zs:bg-gray-700 zs:dark:bg-gray-950 \nzs:dark:text-gray-300 zs:text-white zs:py-6
|
|
3269
|
+
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" }]
|
|
3261
3270
|
}], propDecorators: { showDefultContent: [{ type: i0.Input, args: [{ isSignal: true, alias: "showDefultContent", required: false }] }], pages: [{ type: i0.Input, args: [{ isSignal: true, alias: "pages", required: false }] }] } });
|
|
3262
3271
|
|
|
3263
3272
|
class Sidebar {
|
|
@@ -3269,11 +3278,11 @@ class Sidebar {
|
|
|
3269
3278
|
this.openSide.update((v) => !v);
|
|
3270
3279
|
}
|
|
3271
3280
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: Sidebar, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3272
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.9", type: Sidebar, isStandalone: true, selector: "ZS-sidebar", inputs: { header: { classPropertyName: "header", publicName: "header", isSignal: true, isRequired: false, transformFunction: null }, openSide: { classPropertyName: "openSide", publicName: "openSide", isSignal: true, isRequired: false, transformFunction: null }, floating: { classPropertyName: "floating", publicName: "floating", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { openSide: "openSideChange" }, ngImport: i0, template: "<div \nclass=\"zs:h-full {{ zIndices.sideBar }} zs:transition-[max-width]\"\n[ngClass]=\"[\n floating() ? 'zs:absolute' : 'zs:md:relative zs:absolute',\n openSide() ? 'zs:max-w-[75vw]' : 'zs:max-w-0'\n]\"\n>\n <!-- Sidebar -->\n <div\n id=\"sidebar\"\n role=\"complementary\"\n aria-labelledby=\"sidebar-header\"\n class=\"\n zs:h-full \n zs:bg-white zs:dark:bg-slate-800 zs:backdrop-blur-md \n zs:w-[75vw] zs:sm:w-[55vw] zs:md:w-[40vw] zs:lg:w-[25vw] zs:xl:w-[15vw]\n zs:transition-[translate]\n zs:duration-600 sidebar-shadow-right \n motion-reduce:zs:transition-none zs:overflow-hidden\n \"\n\n [attr.aria-hidden]=\"!openSide()\"\n [attr.inert]=\"!openSide() ? '' : null\"\n\n [ngClass]=\"\n openSide()\n ? 'zs:translate-x-0'\n : 'zs:-translate-x-full'\n \"\n >\n <!-- Close Sidebar Button -->\n <button\n class=\"\n zs:absolute zs:rounded-lg zs:p-1 zs:cursor-pointer\n zs:top-3 zs:right-2\n zs:bg-gray-200 zs:dark:bg-gray-700 zs:hover:bg-gray-300\n zs:dark:hover:bg-gray-600\n zs:transition-
|
|
3281
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.9", type: Sidebar, isStandalone: true, selector: "ZS-sidebar", inputs: { header: { classPropertyName: "header", publicName: "header", isSignal: true, isRequired: false, transformFunction: null }, openSide: { classPropertyName: "openSide", publicName: "openSide", isSignal: true, isRequired: false, transformFunction: null }, floating: { classPropertyName: "floating", publicName: "floating", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { openSide: "openSideChange" }, ngImport: i0, template: "<div \nclass=\"zs:h-full {{ zIndices.sideBar }} zs:transition-[max-width]\"\n[ngClass]=\"[\n floating() ? 'zs:absolute' : 'zs:md:relative zs:absolute',\n openSide() ? 'zs:max-w-[75vw]' : 'zs:max-w-0'\n]\"\n>\n <!-- Sidebar -->\n <div\n id=\"sidebar\"\n role=\"complementary\"\n aria-labelledby=\"sidebar-header\"\n class=\"\n zs:h-full \n zs:bg-white zs:dark:bg-slate-800 zs:backdrop-blur-md \n zs:w-[75vw] zs:sm:w-[55vw] zs:md:w-[40vw] zs:lg:w-[25vw] zs:xl:w-[15vw]\n zs:transition-[translate]\n zs:duration-600 sidebar-shadow-right \n motion-reduce:zs:transition-none zs:overflow-hidden\n \"\n\n [attr.aria-hidden]=\"!openSide()\"\n [attr.inert]=\"!openSide() ? '' : null\"\n\n [ngClass]=\"\n openSide()\n ? 'zs:translate-x-0'\n : 'zs:-translate-x-full'\n \"\n >\n <!-- Close Sidebar Button -->\n <button\n class=\"\n zs:absolute zs:rounded-lg zs:p-1 zs:cursor-pointer\n zs:top-3 zs:right-2\n zs:bg-gray-200 zs:dark:bg-gray-700 zs:hover:bg-gray-300\n zs:dark:hover:bg-gray-600\n zs:transition-opacity zs:duration-300 zs:ease-in-out\n \"\n aria-label=\"Close sidebar\"\n aria-controls=\"sidebar\"\n [attr.aria-expanded]=\"openSide()\"\n [ngClass]=\"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\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-opacity\n zs:duration-300\n zs:ease-in-out\n \"\n aria-label=\"Open sidebar\"\n aria-controls=\"sidebar\"\n [attr.aria-expanded]=\"openSide()\"\n [ngClass]=\"openSide() ? 'zs:delay-0 zs:opacity-0 zs:pointer-events-none' : 'zs:delay-300 zs:opacity-100 zs:pointer-events-auto'\"\n (click)=\"toggleSide()\"\n >\n <svg\n aria-hidden=\"true\"\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n >\n <path\n d=\"M4 4m0 2a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2z\"\n />\n <path d=\"M9 4l0 16\" />\n </svg>\n </button>\n</div>\n", styles: [":host{display:block;position:relative;width:fit-content}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
|
|
3273
3282
|
}
|
|
3274
3283
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: Sidebar, decorators: [{
|
|
3275
3284
|
type: Component,
|
|
3276
|
-
args: [{ selector: 'ZS-sidebar', standalone: true, imports: [CommonModule], template: "<div \nclass=\"zs:h-full {{ zIndices.sideBar }} zs:transition-[max-width]\"\n[ngClass]=\"[\n floating() ? 'zs:absolute' : 'zs:md:relative zs:absolute',\n openSide() ? 'zs:max-w-[75vw]' : 'zs:max-w-0'\n]\"\n>\n <!-- Sidebar -->\n <div\n id=\"sidebar\"\n role=\"complementary\"\n aria-labelledby=\"sidebar-header\"\n class=\"\n zs:h-full \n zs:bg-white zs:dark:bg-slate-800 zs:backdrop-blur-md \n zs:w-[75vw] zs:sm:w-[55vw] zs:md:w-[40vw] zs:lg:w-[25vw] zs:xl:w-[15vw]\n zs:transition-[translate]\n zs:duration-600 sidebar-shadow-right \n motion-reduce:zs:transition-none zs:overflow-hidden\n \"\n\n [attr.aria-hidden]=\"!openSide()\"\n [attr.inert]=\"!openSide() ? '' : null\"\n\n [ngClass]=\"\n openSide()\n ? 'zs:translate-x-0'\n : 'zs:-translate-x-full'\n \"\n >\n <!-- Close Sidebar Button -->\n <button\n class=\"\n zs:absolute zs:rounded-lg zs:p-1 zs:cursor-pointer\n zs:top-3 zs:right-2\n zs:bg-gray-200 zs:dark:bg-gray-700 zs:hover:bg-gray-300\n zs:dark:hover:bg-gray-600\n zs:transition-
|
|
3285
|
+
args: [{ selector: 'ZS-sidebar', standalone: true, imports: [CommonModule], template: "<div \nclass=\"zs:h-full {{ zIndices.sideBar }} zs:transition-[max-width]\"\n[ngClass]=\"[\n floating() ? 'zs:absolute' : 'zs:md:relative zs:absolute',\n openSide() ? 'zs:max-w-[75vw]' : 'zs:max-w-0'\n]\"\n>\n <!-- Sidebar -->\n <div\n id=\"sidebar\"\n role=\"complementary\"\n aria-labelledby=\"sidebar-header\"\n class=\"\n zs:h-full \n zs:bg-white zs:dark:bg-slate-800 zs:backdrop-blur-md \n zs:w-[75vw] zs:sm:w-[55vw] zs:md:w-[40vw] zs:lg:w-[25vw] zs:xl:w-[15vw]\n zs:transition-[translate]\n zs:duration-600 sidebar-shadow-right \n motion-reduce:zs:transition-none zs:overflow-hidden\n \"\n\n [attr.aria-hidden]=\"!openSide()\"\n [attr.inert]=\"!openSide() ? '' : null\"\n\n [ngClass]=\"\n openSide()\n ? 'zs:translate-x-0'\n : 'zs:-translate-x-full'\n \"\n >\n <!-- Close Sidebar Button -->\n <button\n class=\"\n zs:absolute zs:rounded-lg zs:p-1 zs:cursor-pointer\n zs:top-3 zs:right-2\n zs:bg-gray-200 zs:dark:bg-gray-700 zs:hover:bg-gray-300\n zs:dark:hover:bg-gray-600\n zs:transition-opacity zs:duration-300 zs:ease-in-out\n \"\n aria-label=\"Close sidebar\"\n aria-controls=\"sidebar\"\n [attr.aria-expanded]=\"openSide()\"\n [ngClass]=\"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\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-opacity\n zs:duration-300\n zs:ease-in-out\n \"\n aria-label=\"Open sidebar\"\n aria-controls=\"sidebar\"\n [attr.aria-expanded]=\"openSide()\"\n [ngClass]=\"openSide() ? 'zs:delay-0 zs:opacity-0 zs:pointer-events-none' : 'zs:delay-300 zs:opacity-100 zs:pointer-events-auto'\"\n (click)=\"toggleSide()\"\n >\n <svg\n aria-hidden=\"true\"\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n >\n <path\n d=\"M4 4m0 2a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2z\"\n />\n <path d=\"M9 4l0 16\" />\n </svg>\n </button>\n</div>\n", styles: [":host{display:block;position:relative;width:fit-content}\n"] }]
|
|
3277
3286
|
}], propDecorators: { header: [{ type: i0.Input, args: [{ isSignal: true, alias: "header", required: false }] }], openSide: [{ type: i0.Input, args: [{ isSignal: true, alias: "openSide", required: false }] }, { type: i0.Output, args: ["openSideChange"] }], floating: [{ type: i0.Input, args: [{ isSignal: true, alias: "floating", required: false }] }] } });
|
|
3278
3287
|
|
|
3279
3288
|
/*
|