@shival99/z-ui 1.2.21 → 1.2.23
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.
- package/fesm2022/shival99-z-ui-components-z-breadcrumb.mjs +4 -3
- package/fesm2022/shival99-z-ui-components-z-breadcrumb.mjs.map +1 -1
- package/fesm2022/shival99-z-ui-components-z-calendar.mjs +6 -4
- package/fesm2022/shival99-z-ui-components-z-calendar.mjs.map +1 -1
- package/fesm2022/shival99-z-ui-components-z-pagination.mjs +1 -1
- package/fesm2022/shival99-z-ui-components-z-pagination.mjs.map +1 -1
- package/fesm2022/shival99-z-ui-components-z-popover.mjs +4 -1
- package/fesm2022/shival99-z-ui-components-z-popover.mjs.map +1 -1
- package/fesm2022/shival99-z-ui-components-z-select.mjs +15 -8
- package/fesm2022/shival99-z-ui-components-z-select.mjs.map +1 -1
- package/fesm2022/shival99-z-ui-components-z-table.mjs +157 -31
- package/fesm2022/shival99-z-ui-components-z-table.mjs.map +1 -1
- package/fesm2022/shival99-z-ui-services.mjs +3 -5
- package/fesm2022/shival99-z-ui-services.mjs.map +1 -1
- package/package.json +1 -1
- package/types/shival99-z-ui-components-z-calendar.d.ts +6 -5
- package/types/shival99-z-ui-components-z-select.d.ts +7 -5
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
2
|
import { inject, input, output, computed, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
|
|
3
3
|
import { RouterLink } from '@angular/router';
|
|
4
|
+
import { TranslatePipe } from '@ngx-translate/core';
|
|
4
5
|
import { ZIconComponent } from '@shival99/z-ui/components/z-icon';
|
|
5
6
|
import { ZTranslateService } from '@shival99/z-ui/services';
|
|
6
7
|
import { zTransform, zMergeClasses } from '@shival99/z-ui/utils';
|
|
@@ -66,13 +67,13 @@ class ZBreadcrumbComponent {
|
|
|
66
67
|
this.zItemClick.emit(item);
|
|
67
68
|
}
|
|
68
69
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ZBreadcrumbComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
69
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: ZBreadcrumbComponent, isStandalone: true, selector: "z-breadcrumb", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, zItems: { classPropertyName: "zItems", publicName: "zItems", isSignal: true, isRequired: false, transformFunction: null }, zSize: { classPropertyName: "zSize", publicName: "zSize", isSignal: true, isRequired: false, transformFunction: null }, zSeparator: { classPropertyName: "zSeparator", publicName: "zSeparator", isSignal: true, isRequired: false, transformFunction: null }, zSeparatorSize: { classPropertyName: "zSeparatorSize", publicName: "zSeparatorSize", isSignal: true, isRequired: false, transformFunction: null }, zHomeIcon: { classPropertyName: "zHomeIcon", publicName: "zHomeIcon", isSignal: true, isRequired: false, transformFunction: null }, zShowHome: { classPropertyName: "zShowHome", publicName: "zShowHome", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { zItemClick: "zItemClick" }, host: { properties: { "class": "zClasses()" } }, ngImport: i0, template: "<nav aria-label=\"Breadcrumb\">\n <ol class=\"flex items-center\">\n @if (zShowHome() && zHomeIcon()) {\n <li class=\"flex items-center\">\n <span\n class=\"text-muted-foreground hover:text-foreground cursor-pointer transition-colors\"\n (click)=\"onItemClick({ label: 'Home', path: '/' }, false)\">\n <z-icon [zType]=\"zHomeIcon()!\" [zSize]=\"zSeparatorSize()\" />\n </span>\n @if (translatedItems().length > 0) {\n <z-icon [zType]=\"zSeparator()\" [zSize]=\"zSeparatorSize()\" class=\"text-muted-foreground/50 mx-1.5 shrink-0\" />\n }\n </li>\n }\n\n @for (item of translatedItems(); track item.label; let isLast = $last; let isFirst = $first) {\n <li class=\"flex items-center\">\n @if (item.path && !isLast && !item.disabled) {\n <a [routerLink]=\"item.path\" [class]=\"getItemClasses(item, isLast)\" (click)=\"onItemClick(item, isLast)\">\n @if (item.icon) {\n <z-icon [zType]=\"item.icon\" [zSize]=\"zSeparatorSize()\" />\n }\n <span>{{ item.translatedLabel }}</span>\n </a>\n } @else {\n <span [class]=\"getItemClasses(item, isLast)\" (click)=\"onItemClick(item, isLast)\">\n @if (item.icon) {\n <z-icon [zType]=\"item.icon\" [zSize]=\"zSeparatorSize()\" />\n }\n <span>{{ item.translatedLabel }}</span>\n </span>\n }\n\n @if (!isLast) {\n <z-icon [zType]=\"zSeparator()\" [zSize]=\"zSeparatorSize()\" class=\"text-muted-foreground/50 mx-1.5 shrink-0\" />\n }\n </li>\n }\n </ol>\n</nav>\n", dependencies: [{ kind: "component", type: ZIconComponent, selector: "z-icon, [z-icon]", inputs: ["class", "zType", "zSize", "zStrokeWidth", "zSvg"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
70
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: ZBreadcrumbComponent, isStandalone: true, selector: "z-breadcrumb", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, zItems: { classPropertyName: "zItems", publicName: "zItems", isSignal: true, isRequired: false, transformFunction: null }, zSize: { classPropertyName: "zSize", publicName: "zSize", isSignal: true, isRequired: false, transformFunction: null }, zSeparator: { classPropertyName: "zSeparator", publicName: "zSeparator", isSignal: true, isRequired: false, transformFunction: null }, zSeparatorSize: { classPropertyName: "zSeparatorSize", publicName: "zSeparatorSize", isSignal: true, isRequired: false, transformFunction: null }, zHomeIcon: { classPropertyName: "zHomeIcon", publicName: "zHomeIcon", isSignal: true, isRequired: false, transformFunction: null }, zShowHome: { classPropertyName: "zShowHome", publicName: "zShowHome", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { zItemClick: "zItemClick" }, host: { properties: { "class": "zClasses()" } }, ngImport: i0, template: "<nav aria-label=\"Breadcrumb\">\n <ol class=\"flex items-center\">\n @if (zShowHome() && zHomeIcon()) {\n <li class=\"flex items-center\">\n <span\n class=\"text-muted-foreground hover:text-foreground cursor-pointer transition-colors\"\n (click)=\"onItemClick({ label: 'Home', path: '/' }, false)\">\n <z-icon [zType]=\"zHomeIcon()!\" [zSize]=\"zSeparatorSize()\" />\n </span>\n @if (translatedItems().length > 0) {\n <z-icon [zType]=\"zSeparator()\" [zSize]=\"zSeparatorSize()\" class=\"text-muted-foreground/50 mx-1.5 shrink-0\" />\n }\n </li>\n }\n\n @for (item of translatedItems(); track item.label; let isLast = $last; let isFirst = $first) {\n <li class=\"flex items-center\">\n @if (item.path && !isLast && !item.disabled) {\n <a [routerLink]=\"item.path\" [class]=\"getItemClasses(item, isLast)\" (click)=\"onItemClick(item, isLast)\">\n @if (item.icon) {\n <z-icon [zType]=\"item.icon\" [zSize]=\"zSeparatorSize()\" />\n }\n <span>{{ item.translatedLabel | translate }}</span>\n </a>\n } @else {\n <span [class]=\"getItemClasses(item, isLast)\" (click)=\"onItemClick(item, isLast)\">\n @if (item.icon) {\n <z-icon [zType]=\"item.icon\" [zSize]=\"zSeparatorSize()\" />\n }\n <span>{{ item.translatedLabel | translate }}</span>\n </span>\n }\n\n @if (!isLast) {\n <z-icon [zType]=\"zSeparator()\" [zSize]=\"zSeparatorSize()\" class=\"text-muted-foreground/50 mx-1.5 shrink-0\" />\n }\n </li>\n }\n </ol>\n</nav>\n", dependencies: [{ kind: "component", type: ZIconComponent, selector: "z-icon, [z-icon]", inputs: ["class", "zType", "zSize", "zStrokeWidth", "zSvg"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
70
71
|
}
|
|
71
72
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ZBreadcrumbComponent, decorators: [{
|
|
72
73
|
type: Component,
|
|
73
|
-
args: [{ selector: 'z-breadcrumb', imports: [ZIconComponent, RouterLink], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
|
|
74
|
+
args: [{ selector: 'z-breadcrumb', imports: [ZIconComponent, RouterLink, TranslatePipe], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
|
|
74
75
|
'[class]': 'zClasses()',
|
|
75
|
-
}, template: "<nav aria-label=\"Breadcrumb\">\n <ol class=\"flex items-center\">\n @if (zShowHome() && zHomeIcon()) {\n <li class=\"flex items-center\">\n <span\n class=\"text-muted-foreground hover:text-foreground cursor-pointer transition-colors\"\n (click)=\"onItemClick({ label: 'Home', path: '/' }, false)\">\n <z-icon [zType]=\"zHomeIcon()!\" [zSize]=\"zSeparatorSize()\" />\n </span>\n @if (translatedItems().length > 0) {\n <z-icon [zType]=\"zSeparator()\" [zSize]=\"zSeparatorSize()\" class=\"text-muted-foreground/50 mx-1.5 shrink-0\" />\n }\n </li>\n }\n\n @for (item of translatedItems(); track item.label; let isLast = $last; let isFirst = $first) {\n <li class=\"flex items-center\">\n @if (item.path && !isLast && !item.disabled) {\n <a [routerLink]=\"item.path\" [class]=\"getItemClasses(item, isLast)\" (click)=\"onItemClick(item, isLast)\">\n @if (item.icon) {\n <z-icon [zType]=\"item.icon\" [zSize]=\"zSeparatorSize()\" />\n }\n <span>{{ item.translatedLabel }}</span>\n </a>\n } @else {\n <span [class]=\"getItemClasses(item, isLast)\" (click)=\"onItemClick(item, isLast)\">\n @if (item.icon) {\n <z-icon [zType]=\"item.icon\" [zSize]=\"zSeparatorSize()\" />\n }\n <span>{{ item.translatedLabel }}</span>\n </span>\n }\n\n @if (!isLast) {\n <z-icon [zType]=\"zSeparator()\" [zSize]=\"zSeparatorSize()\" class=\"text-muted-foreground/50 mx-1.5 shrink-0\" />\n }\n </li>\n }\n </ol>\n</nav>\n" }]
|
|
76
|
+
}, template: "<nav aria-label=\"Breadcrumb\">\n <ol class=\"flex items-center\">\n @if (zShowHome() && zHomeIcon()) {\n <li class=\"flex items-center\">\n <span\n class=\"text-muted-foreground hover:text-foreground cursor-pointer transition-colors\"\n (click)=\"onItemClick({ label: 'Home', path: '/' }, false)\">\n <z-icon [zType]=\"zHomeIcon()!\" [zSize]=\"zSeparatorSize()\" />\n </span>\n @if (translatedItems().length > 0) {\n <z-icon [zType]=\"zSeparator()\" [zSize]=\"zSeparatorSize()\" class=\"text-muted-foreground/50 mx-1.5 shrink-0\" />\n }\n </li>\n }\n\n @for (item of translatedItems(); track item.label; let isLast = $last; let isFirst = $first) {\n <li class=\"flex items-center\">\n @if (item.path && !isLast && !item.disabled) {\n <a [routerLink]=\"item.path\" [class]=\"getItemClasses(item, isLast)\" (click)=\"onItemClick(item, isLast)\">\n @if (item.icon) {\n <z-icon [zType]=\"item.icon\" [zSize]=\"zSeparatorSize()\" />\n }\n <span>{{ item.translatedLabel | translate }}</span>\n </a>\n } @else {\n <span [class]=\"getItemClasses(item, isLast)\" (click)=\"onItemClick(item, isLast)\">\n @if (item.icon) {\n <z-icon [zType]=\"item.icon\" [zSize]=\"zSeparatorSize()\" />\n }\n <span>{{ item.translatedLabel | translate }}</span>\n </span>\n }\n\n @if (!isLast) {\n <z-icon [zType]=\"zSeparator()\" [zSize]=\"zSeparatorSize()\" class=\"text-muted-foreground/50 mx-1.5 shrink-0\" />\n }\n </li>\n }\n </ol>\n</nav>\n" }]
|
|
76
77
|
}], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], zItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "zItems", required: false }] }], zSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "zSize", required: false }] }], zSeparator: [{ type: i0.Input, args: [{ isSignal: true, alias: "zSeparator", required: false }] }], zSeparatorSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "zSeparatorSize", required: false }] }], zHomeIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "zHomeIcon", required: false }] }], zShowHome: [{ type: i0.Input, args: [{ isSignal: true, alias: "zShowHome", required: false }] }], zItemClick: [{ type: i0.Output, args: ["zItemClick"] }] } });
|
|
77
78
|
|
|
78
79
|
/**
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"shival99-z-ui-components-z-breadcrumb.mjs","sources":["../../../../libs/core-ui/components/z-breadcrumb/z-breadcrumb.variants.ts","../../../../libs/core-ui/components/z-breadcrumb/z-breadcrumb.component.ts","../../../../libs/core-ui/components/z-breadcrumb/z-breadcrumb.component.html","../../../../libs/core-ui/components/z-breadcrumb/shival99-z-ui-components-z-breadcrumb.ts"],"sourcesContent":["import { cva, type VariantProps } from 'class-variance-authority';\n\nexport const zBreadcrumbVariants = cva(['flex items-center text-sm'], {\n variants: {\n zSize: {\n sm: 'text-xs gap-1',\n default: 'text-sm gap-1.5',\n lg: 'text-base gap-2',\n },\n },\n defaultVariants: {\n zSize: 'default',\n },\n});\n\nexport const zBreadcrumbItemVariants = cva(['inline-flex items-center gap-1 transition-colors duration-150'], {\n variants: {\n isActive: {\n true: 'text-foreground font-medium',\n false: 'text-muted-foreground hover:text-foreground cursor-pointer',\n },\n isDisabled: {\n true: 'text-muted-foreground/50 cursor-not-allowed pointer-events-none',\n false: '',\n },\n },\n defaultVariants: {\n isActive: false,\n isDisabled: false,\n },\n});\n\nexport type ZBreadcrumbVariants = VariantProps<typeof zBreadcrumbVariants>;\nexport type ZBreadcrumbItemVariants = VariantProps<typeof zBreadcrumbItemVariants>;\n","import { ChangeDetectionStrategy, Component, computed, inject, input, output, ViewEncapsulation } from '@angular/core';\nimport { RouterLink } from '@angular/router';\nimport { ZIconComponent } from '@shival99/z-ui/components/z-icon';\nimport type { ZIconVariants, ZIcon } from '@shival99/z-ui/components/z-icon';\nimport { ZTranslateService } from '@shival99/z-ui/services';\nimport { zMergeClasses, zTransform } from '@shival99/z-ui/utils';\nimport type { ClassValue } from 'clsx';\nimport type { ZBreadcrumbItem } from './z-breadcrumb.types';\nimport { zBreadcrumbItemVariants, zBreadcrumbVariants, type ZBreadcrumbVariants } from './z-breadcrumb.variants';\n\n@Component({\n selector: 'z-breadcrumb',\n imports: [ZIconComponent, RouterLink],\n standalone: true,\n templateUrl: './z-breadcrumb.component.html',\n changeDetection: ChangeDetectionStrategy.OnPush,\n encapsulation: ViewEncapsulation.None,\n host: {\n '[class]': 'zClasses()',\n },\n})\nexport class ZBreadcrumbComponent {\n private readonly _zTranslate = inject(ZTranslateService);\n\n public readonly class = input<ClassValue>('');\n public readonly zItems = input<ZBreadcrumbItem[]>([]);\n public readonly zSize = input<ZBreadcrumbVariants['zSize']>('default');\n public readonly zSeparator = input<ZIcon>('lucideChevronRight');\n public readonly zSeparatorSize = input<ZIconVariants['zSize']>('14');\n public readonly zHomeIcon = input<ZIcon | undefined>(undefined);\n public readonly zShowHome = input(false, { transform: zTransform });\n\n public readonly zItemClick = output<ZBreadcrumbItem>();\n\n protected readonly zClasses = computed(() =>\n zMergeClasses(zBreadcrumbVariants({ zSize: this.zSize() }), this.class())\n );\n\n protected readonly translatedItems = computed(() => {\n this._zTranslate.currentLang();\n return this.zItems().map(item => ({\n ...item,\n translatedLabel: this._zTranslate.instant(item.label),\n }));\n });\n\n protected getItemClasses(item: ZBreadcrumbItem, isLast: boolean): string {\n return zBreadcrumbItemVariants({\n isActive: isLast,\n isDisabled: item.disabled ?? false,\n });\n }\n\n protected onItemClick(item: ZBreadcrumbItem, isLast: boolean): void {\n if (isLast || item.disabled) {\n return;\n }\n\n this.zItemClick.emit(item);\n }\n}\n","<nav aria-label=\"Breadcrumb\">\n <ol class=\"flex items-center\">\n @if (zShowHome() && zHomeIcon()) {\n <li class=\"flex items-center\">\n <span\n class=\"text-muted-foreground hover:text-foreground cursor-pointer transition-colors\"\n (click)=\"onItemClick({ label: 'Home', path: '/' }, false)\">\n <z-icon [zType]=\"zHomeIcon()!\" [zSize]=\"zSeparatorSize()\" />\n </span>\n @if (translatedItems().length > 0) {\n <z-icon [zType]=\"zSeparator()\" [zSize]=\"zSeparatorSize()\" class=\"text-muted-foreground/50 mx-1.5 shrink-0\" />\n }\n </li>\n }\n\n @for (item of translatedItems(); track item.label; let isLast = $last; let isFirst = $first) {\n <li class=\"flex items-center\">\n @if (item.path && !isLast && !item.disabled) {\n <a [routerLink]=\"item.path\" [class]=\"getItemClasses(item, isLast)\" (click)=\"onItemClick(item, isLast)\">\n @if (item.icon) {\n <z-icon [zType]=\"item.icon\" [zSize]=\"zSeparatorSize()\" />\n }\n <span>{{ item.translatedLabel }}</span>\n </a>\n } @else {\n <span [class]=\"getItemClasses(item, isLast)\" (click)=\"onItemClick(item, isLast)\">\n @if (item.icon) {\n <z-icon [zType]=\"item.icon\" [zSize]=\"zSeparatorSize()\" />\n }\n <span>{{ item.translatedLabel }}</span>\n </span>\n }\n\n @if (!isLast) {\n <z-icon [zType]=\"zSeparator()\" [zSize]=\"zSeparatorSize()\" class=\"text-muted-foreground/50 mx-1.5 shrink-0\" />\n }\n </li>\n }\n </ol>\n</nav>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"shival99-z-ui-components-z-breadcrumb.mjs","sources":["../../../../libs/core-ui/components/z-breadcrumb/z-breadcrumb.variants.ts","../../../../libs/core-ui/components/z-breadcrumb/z-breadcrumb.component.ts","../../../../libs/core-ui/components/z-breadcrumb/z-breadcrumb.component.html","../../../../libs/core-ui/components/z-breadcrumb/shival99-z-ui-components-z-breadcrumb.ts"],"sourcesContent":["import { cva, type VariantProps } from 'class-variance-authority';\n\nexport const zBreadcrumbVariants = cva(['flex items-center text-sm'], {\n variants: {\n zSize: {\n sm: 'text-xs gap-1',\n default: 'text-sm gap-1.5',\n lg: 'text-base gap-2',\n },\n },\n defaultVariants: {\n zSize: 'default',\n },\n});\n\nexport const zBreadcrumbItemVariants = cva(['inline-flex items-center gap-1 transition-colors duration-150'], {\n variants: {\n isActive: {\n true: 'text-foreground font-medium',\n false: 'text-muted-foreground hover:text-foreground cursor-pointer',\n },\n isDisabled: {\n true: 'text-muted-foreground/50 cursor-not-allowed pointer-events-none',\n false: '',\n },\n },\n defaultVariants: {\n isActive: false,\n isDisabled: false,\n },\n});\n\nexport type ZBreadcrumbVariants = VariantProps<typeof zBreadcrumbVariants>;\nexport type ZBreadcrumbItemVariants = VariantProps<typeof zBreadcrumbItemVariants>;\n","import { ChangeDetectionStrategy, Component, computed, inject, input, output, ViewEncapsulation } from '@angular/core';\nimport { RouterLink } from '@angular/router';\nimport { TranslatePipe } from '@ngx-translate/core';\nimport { ZIconComponent } from '@shival99/z-ui/components/z-icon';\nimport type { ZIconVariants, ZIcon } from '@shival99/z-ui/components/z-icon';\nimport { ZTranslateService } from '@shival99/z-ui/services';\nimport { zMergeClasses, zTransform } from '@shival99/z-ui/utils';\nimport type { ClassValue } from 'clsx';\nimport type { ZBreadcrumbItem } from './z-breadcrumb.types';\nimport { zBreadcrumbItemVariants, zBreadcrumbVariants, type ZBreadcrumbVariants } from './z-breadcrumb.variants';\n\n@Component({\n selector: 'z-breadcrumb',\n imports: [ZIconComponent, RouterLink, TranslatePipe],\n standalone: true,\n templateUrl: './z-breadcrumb.component.html',\n changeDetection: ChangeDetectionStrategy.OnPush,\n encapsulation: ViewEncapsulation.None,\n host: {\n '[class]': 'zClasses()',\n },\n})\nexport class ZBreadcrumbComponent {\n private readonly _zTranslate = inject(ZTranslateService);\n\n public readonly class = input<ClassValue>('');\n public readonly zItems = input<ZBreadcrumbItem[]>([]);\n public readonly zSize = input<ZBreadcrumbVariants['zSize']>('default');\n public readonly zSeparator = input<ZIcon>('lucideChevronRight');\n public readonly zSeparatorSize = input<ZIconVariants['zSize']>('14');\n public readonly zHomeIcon = input<ZIcon | undefined>(undefined);\n public readonly zShowHome = input(false, { transform: zTransform });\n\n public readonly zItemClick = output<ZBreadcrumbItem>();\n\n protected readonly zClasses = computed(() =>\n zMergeClasses(zBreadcrumbVariants({ zSize: this.zSize() }), this.class())\n );\n\n protected readonly translatedItems = computed(() => {\n this._zTranslate.currentLang();\n return this.zItems().map(item => ({\n ...item,\n translatedLabel: this._zTranslate.instant(item.label),\n }));\n });\n\n protected getItemClasses(item: ZBreadcrumbItem, isLast: boolean): string {\n return zBreadcrumbItemVariants({\n isActive: isLast,\n isDisabled: item.disabled ?? false,\n });\n }\n\n protected onItemClick(item: ZBreadcrumbItem, isLast: boolean): void {\n if (isLast || item.disabled) {\n return;\n }\n\n this.zItemClick.emit(item);\n }\n}\n","<nav aria-label=\"Breadcrumb\">\n <ol class=\"flex items-center\">\n @if (zShowHome() && zHomeIcon()) {\n <li class=\"flex items-center\">\n <span\n class=\"text-muted-foreground hover:text-foreground cursor-pointer transition-colors\"\n (click)=\"onItemClick({ label: 'Home', path: '/' }, false)\">\n <z-icon [zType]=\"zHomeIcon()!\" [zSize]=\"zSeparatorSize()\" />\n </span>\n @if (translatedItems().length > 0) {\n <z-icon [zType]=\"zSeparator()\" [zSize]=\"zSeparatorSize()\" class=\"text-muted-foreground/50 mx-1.5 shrink-0\" />\n }\n </li>\n }\n\n @for (item of translatedItems(); track item.label; let isLast = $last; let isFirst = $first) {\n <li class=\"flex items-center\">\n @if (item.path && !isLast && !item.disabled) {\n <a [routerLink]=\"item.path\" [class]=\"getItemClasses(item, isLast)\" (click)=\"onItemClick(item, isLast)\">\n @if (item.icon) {\n <z-icon [zType]=\"item.icon\" [zSize]=\"zSeparatorSize()\" />\n }\n <span>{{ item.translatedLabel | translate }}</span>\n </a>\n } @else {\n <span [class]=\"getItemClasses(item, isLast)\" (click)=\"onItemClick(item, isLast)\">\n @if (item.icon) {\n <z-icon [zType]=\"item.icon\" [zSize]=\"zSeparatorSize()\" />\n }\n <span>{{ item.translatedLabel | translate }}</span>\n </span>\n }\n\n @if (!isLast) {\n <z-icon [zType]=\"zSeparator()\" [zSize]=\"zSeparatorSize()\" class=\"text-muted-foreground/50 mx-1.5 shrink-0\" />\n }\n </li>\n }\n </ol>\n</nav>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;;;;;MAEa,mBAAmB,GAAG,GAAG,CAAC,CAAC,2BAA2B,CAAC,EAAE;AACpE,IAAA,QAAQ,EAAE;AACR,QAAA,KAAK,EAAE;AACL,YAAA,EAAE,EAAE,eAAe;AACnB,YAAA,OAAO,EAAE,iBAAiB;AAC1B,YAAA,EAAE,EAAE,iBAAiB;AACtB,SAAA;AACF,KAAA;AACD,IAAA,eAAe,EAAE;AACf,QAAA,KAAK,EAAE,SAAS;AACjB,KAAA;AACF,CAAA;AAEM,MAAM,uBAAuB,GAAG,GAAG,CAAC,CAAC,+DAA+D,CAAC,EAAE;AAC5G,IAAA,QAAQ,EAAE;AACR,QAAA,QAAQ,EAAE;AACR,YAAA,IAAI,EAAE,6BAA6B;AACnC,YAAA,KAAK,EAAE,4DAA4D;AACpE,SAAA;AACD,QAAA,UAAU,EAAE;AACV,YAAA,IAAI,EAAE,iEAAiE;AACvE,YAAA,KAAK,EAAE,EAAE;AACV,SAAA;AACF,KAAA;AACD,IAAA,eAAe,EAAE;AACf,QAAA,QAAQ,EAAE,KAAK;AACf,QAAA,UAAU,EAAE,KAAK;AAClB,KAAA;AACF,CAAA,CAAC;;MCRW,oBAAoB,CAAA;AACd,IAAA,WAAW,GAAG,MAAM,CAAC,iBAAiB,CAAC;AAExC,IAAA,KAAK,GAAG,KAAK,CAAa,EAAE,iDAAC;AAC7B,IAAA,MAAM,GAAG,KAAK,CAAoB,EAAE,kDAAC;AACrC,IAAA,KAAK,GAAG,KAAK,CAA+B,SAAS,iDAAC;AACtD,IAAA,UAAU,GAAG,KAAK,CAAQ,oBAAoB,sDAAC;AAC/C,IAAA,cAAc,GAAG,KAAK,CAAyB,IAAI,0DAAC;AACpD,IAAA,SAAS,GAAG,KAAK,CAAoB,SAAS,qDAAC;IAC/C,SAAS,GAAG,KAAK,CAAC,KAAK,sDAAI,SAAS,EAAE,UAAU,EAAA,CAAG;IAEnD,UAAU,GAAG,MAAM,EAAmB;IAEnC,QAAQ,GAAG,QAAQ,CAAC,MACrC,aAAa,CAAC,mBAAmB,CAAC,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,EAAE,CAAC,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC,EAAA,IAAA,SAAA,GAAA,CAAA,EAAA,SAAA,EAAA,UAAA,EAAA,CAAA,GAAA,EAAA,CAAA,CAC1E;AAEkB,IAAA,eAAe,GAAG,QAAQ,CAAC,MAAK;AACjD,QAAA,IAAI,CAAC,WAAW,CAAC,WAAW,EAAE;QAC9B,OAAO,IAAI,CAAC,MAAM,EAAE,CAAC,GAAG,CAAC,IAAI,KAAK;AAChC,YAAA,GAAG,IAAI;YACP,eAAe,EAAE,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC;AACtD,SAAA,CAAC,CAAC;AACL,IAAA,CAAC,2DAAC;IAEQ,cAAc,CAAC,IAAqB,EAAE,MAAe,EAAA;AAC7D,QAAA,OAAO,uBAAuB,CAAC;AAC7B,YAAA,QAAQ,EAAE,MAAM;AAChB,YAAA,UAAU,EAAE,IAAI,CAAC,QAAQ,IAAI,KAAK;AACnC,SAAA,CAAC;IACJ;IAEU,WAAW,CAAC,IAAqB,EAAE,MAAe,EAAA;AAC1D,QAAA,IAAI,MAAM,IAAI,IAAI,CAAC,QAAQ,EAAE;YAC3B;QACF;AAEA,QAAA,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC;IAC5B;uGAtCW,oBAAoB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAApB,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,oBAAoB,yjCCtBjC,6pDAwCA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,ED3BY,cAAc,EAAA,QAAA,EAAA,kBAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,OAAA,EAAA,OAAA,EAAA,cAAA,EAAA,MAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAE,UAAU,+NAAE,aAAa,EAAA,IAAA,EAAA,WAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,aAAA,EAAA,EAAA,CAAA,iBAAA,CAAA,IAAA,EAAA,CAAA;;2FASxC,oBAAoB,EAAA,UAAA,EAAA,CAAA;kBAXhC,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,cAAc,WACf,CAAC,cAAc,EAAE,UAAU,EAAE,aAAa,CAAC,EAAA,UAAA,EACxC,IAAI,EAAA,eAAA,EAEC,uBAAuB,CAAC,MAAM,iBAChC,iBAAiB,CAAC,IAAI,EAAA,IAAA,EAC/B;AACJ,wBAAA,SAAS,EAAE,YAAY;AACxB,qBAAA,EAAA,QAAA,EAAA,6pDAAA,EAAA;;;AEpBH;;AAEG;;;;"}
|
|
@@ -624,6 +624,7 @@ class ZCalendarComponent {
|
|
|
624
624
|
zShowCancel = input(false, { ...(ngDevMode ? { debugName: "zShowCancel" } : {}), transform: zTransform });
|
|
625
625
|
zCancelText = input(null, ...(ngDevMode ? [{ debugName: "zCancelText" }] : []));
|
|
626
626
|
zDisabledDate = input(null, ...(ngDevMode ? [{ debugName: "zDisabledDate" }] : []));
|
|
627
|
+
zScrollClose = input(false, { ...(ngDevMode ? { debugName: "zScrollClose" } : {}), transform: zTransform });
|
|
627
628
|
zControl = output();
|
|
628
629
|
zChange = output();
|
|
629
630
|
triggerRef = viewChild('triggerEl', ...(ngDevMode ? [{ debugName: "triggerRef" }] : []));
|
|
@@ -1334,6 +1335,7 @@ class ZCalendarComponent {
|
|
|
1334
1335
|
this._inputDisplayStart.set(this.displayValueStart());
|
|
1335
1336
|
this._inputDisplayEnd.set(this.displayValueEnd());
|
|
1336
1337
|
}
|
|
1338
|
+
this.triggerRef()?.nativeElement.blur();
|
|
1337
1339
|
}
|
|
1338
1340
|
_restoreFromBackup() {
|
|
1339
1341
|
this._selectedDate.set(this._backupSelectedDate());
|
|
@@ -2328,14 +2330,14 @@ class ZCalendarComponent {
|
|
|
2328
2330
|
this._updateTimeToDate();
|
|
2329
2331
|
}
|
|
2330
2332
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ZCalendarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2331
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: ZCalendarComponent, isStandalone: true, selector: "z-calendar", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, zMode: { classPropertyName: "zMode", publicName: "zMode", isSignal: true, isRequired: false, transformFunction: null }, zSize: { classPropertyName: "zSize", publicName: "zSize", isSignal: true, isRequired: false, transformFunction: null }, zLabel: { classPropertyName: "zLabel", publicName: "zLabel", isSignal: true, isRequired: false, transformFunction: null }, zLabelClass: { classPropertyName: "zLabelClass", publicName: "zLabelClass", isSignal: true, isRequired: false, transformFunction: null }, zPlaceholder: { classPropertyName: "zPlaceholder", publicName: "zPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, zRequired: { classPropertyName: "zRequired", publicName: "zRequired", isSignal: true, isRequired: false, transformFunction: null }, zDisabled: { classPropertyName: "zDisabled", publicName: "zDisabled", isSignal: true, isRequired: false, transformFunction: null }, zReadonly: { classPropertyName: "zReadonly", publicName: "zReadonly", isSignal: true, isRequired: false, transformFunction: null }, zShowTime: { classPropertyName: "zShowTime", publicName: "zShowTime", isSignal: true, isRequired: false, transformFunction: null }, zTimeFormat: { classPropertyName: "zTimeFormat", publicName: "zTimeFormat", isSignal: true, isRequired: false, transformFunction: null }, zShowHour: { classPropertyName: "zShowHour", publicName: "zShowHour", isSignal: true, isRequired: false, transformFunction: null }, zShowMinute: { classPropertyName: "zShowMinute", publicName: "zShowMinute", isSignal: true, isRequired: false, transformFunction: null }, zShowSecond: { classPropertyName: "zShowSecond", publicName: "zShowSecond", isSignal: true, isRequired: false, transformFunction: null }, zQuickSelect: { classPropertyName: "zQuickSelect", publicName: "zQuickSelect", isSignal: true, isRequired: false, transformFunction: null }, zAllowClear: { classPropertyName: "zAllowClear", publicName: "zAllowClear", isSignal: true, isRequired: false, transformFunction: null }, zFormat: { classPropertyName: "zFormat", publicName: "zFormat", isSignal: true, isRequired: false, transformFunction: null }, zMinDate: { classPropertyName: "zMinDate", publicName: "zMinDate", isSignal: true, isRequired: false, transformFunction: null }, zMaxDate: { classPropertyName: "zMaxDate", publicName: "zMaxDate", isSignal: true, isRequired: false, transformFunction: null }, zValueType: { classPropertyName: "zValueType", publicName: "zValueType", isSignal: true, isRequired: false, transformFunction: null }, zValidators: { classPropertyName: "zValidators", publicName: "zValidators", isSignal: true, isRequired: false, transformFunction: null }, zLocale: { classPropertyName: "zLocale", publicName: "zLocale", isSignal: true, isRequired: false, transformFunction: null }, zShowOk: { classPropertyName: "zShowOk", publicName: "zShowOk", isSignal: true, isRequired: false, transformFunction: null }, zOkText: { classPropertyName: "zOkText", publicName: "zOkText", isSignal: true, isRequired: false, transformFunction: null }, zShowCancel: { classPropertyName: "zShowCancel", publicName: "zShowCancel", isSignal: true, isRequired: false, transformFunction: null }, zCancelText: { classPropertyName: "zCancelText", publicName: "zCancelText", isSignal: true, isRequired: false, transformFunction: null }, zDisabledDate: { classPropertyName: "zDisabledDate", publicName: "zDisabledDate", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { zControl: "zControl", zChange: "zChange" }, providers: [
|
|
2333
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: ZCalendarComponent, isStandalone: true, selector: "z-calendar", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, zMode: { classPropertyName: "zMode", publicName: "zMode", isSignal: true, isRequired: false, transformFunction: null }, zSize: { classPropertyName: "zSize", publicName: "zSize", isSignal: true, isRequired: false, transformFunction: null }, zLabel: { classPropertyName: "zLabel", publicName: "zLabel", isSignal: true, isRequired: false, transformFunction: null }, zLabelClass: { classPropertyName: "zLabelClass", publicName: "zLabelClass", isSignal: true, isRequired: false, transformFunction: null }, zPlaceholder: { classPropertyName: "zPlaceholder", publicName: "zPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, zRequired: { classPropertyName: "zRequired", publicName: "zRequired", isSignal: true, isRequired: false, transformFunction: null }, zDisabled: { classPropertyName: "zDisabled", publicName: "zDisabled", isSignal: true, isRequired: false, transformFunction: null }, zReadonly: { classPropertyName: "zReadonly", publicName: "zReadonly", isSignal: true, isRequired: false, transformFunction: null }, zShowTime: { classPropertyName: "zShowTime", publicName: "zShowTime", isSignal: true, isRequired: false, transformFunction: null }, zTimeFormat: { classPropertyName: "zTimeFormat", publicName: "zTimeFormat", isSignal: true, isRequired: false, transformFunction: null }, zShowHour: { classPropertyName: "zShowHour", publicName: "zShowHour", isSignal: true, isRequired: false, transformFunction: null }, zShowMinute: { classPropertyName: "zShowMinute", publicName: "zShowMinute", isSignal: true, isRequired: false, transformFunction: null }, zShowSecond: { classPropertyName: "zShowSecond", publicName: "zShowSecond", isSignal: true, isRequired: false, transformFunction: null }, zQuickSelect: { classPropertyName: "zQuickSelect", publicName: "zQuickSelect", isSignal: true, isRequired: false, transformFunction: null }, zAllowClear: { classPropertyName: "zAllowClear", publicName: "zAllowClear", isSignal: true, isRequired: false, transformFunction: null }, zFormat: { classPropertyName: "zFormat", publicName: "zFormat", isSignal: true, isRequired: false, transformFunction: null }, zMinDate: { classPropertyName: "zMinDate", publicName: "zMinDate", isSignal: true, isRequired: false, transformFunction: null }, zMaxDate: { classPropertyName: "zMaxDate", publicName: "zMaxDate", isSignal: true, isRequired: false, transformFunction: null }, zValueType: { classPropertyName: "zValueType", publicName: "zValueType", isSignal: true, isRequired: false, transformFunction: null }, zValidators: { classPropertyName: "zValidators", publicName: "zValidators", isSignal: true, isRequired: false, transformFunction: null }, zLocale: { classPropertyName: "zLocale", publicName: "zLocale", isSignal: true, isRequired: false, transformFunction: null }, zShowOk: { classPropertyName: "zShowOk", publicName: "zShowOk", isSignal: true, isRequired: false, transformFunction: null }, zOkText: { classPropertyName: "zOkText", publicName: "zOkText", isSignal: true, isRequired: false, transformFunction: null }, zShowCancel: { classPropertyName: "zShowCancel", publicName: "zShowCancel", isSignal: true, isRequired: false, transformFunction: null }, zCancelText: { classPropertyName: "zCancelText", publicName: "zCancelText", isSignal: true, isRequired: false, transformFunction: null }, zDisabledDate: { classPropertyName: "zDisabledDate", publicName: "zDisabledDate", isSignal: true, isRequired: false, transformFunction: null }, zScrollClose: { classPropertyName: "zScrollClose", publicName: "zScrollClose", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { zControl: "zControl", zChange: "zChange" }, providers: [
|
|
2332
2334
|
{
|
|
2333
2335
|
provide: NG_VALUE_ACCESSOR,
|
|
2334
2336
|
useExisting: forwardRef(() => ZCalendarComponent),
|
|
2335
2337
|
multi: true,
|
|
2336
2338
|
},
|
|
2337
2339
|
TranslatePipe,
|
|
2338
|
-
], viewQueries: [{ propertyName: "triggerRef", first: true, predicate: ["triggerEl"], descendants: true, isSignal: true }, { propertyName: "inputRef", first: true, predicate: ["inputEl"], descendants: true, isSignal: true }], exportAs: ["zCalendar"], ngImport: i0, template: "<div class=\"z-calendar-wrapper flex w-full flex-col gap-2\">\n @if (zLabel()) {\n <label [for]=\"pickerId\" class=\"text-xs leading-none font-medium\" [class]=\"zLabelClass()\">\n {{ zLabel() }}\n @if (zRequired()) {\n <span class=\"text-destructive! ml-0.5\">*</span>\n }\n </label>\n }\n\n <div class=\"relative\">\n <div\n #triggerEl\n z-popover\n [zPopoverContent]=\"calendarTpl\"\n zPosition=\"bottom-left\"\n zPopoverWidth=\"auto\"\n [zOffset]=\"6\"\n [zDisabled]=\"isDisabled() || zReadonly()\"\n [zManualClose]=\"showCancelButton()\"\n zTrigger=\"click\"\n zClass=\"border-0 shadow-none bg-transparent p-0\"\n (zHideStart)=\"onPopoverHide()\"\n (zShow)=\"onPopoverShow()\"\n (zControl)=\"onPopoverControl($event)\"\n [id]=\"pickerId\"\n [class]=\"triggerClasses()\"\n (keydown)=\"onTriggerKeydown($event)\">\n <z-icon\n [zType]=\"isRangeMode() ? 'lucideCalendarRange' : 'lucideCalendar'\"\n zSize=\"16\"\n class=\"text-muted-foreground shrink-0 cursor-pointer\"\n (click)=\"$event.stopPropagation(); toggle()\" />\n\n @if (isRangeMode()) {\n <input\n type=\"text\"\n data-range-type=\"start\"\n class=\"placeholder:text-muted-foreground min-w-0 flex-1 truncate bg-transparent text-center text-sm outline-none\"\n [placeholder]=\"'i18n_z_ui_calendar_start_date' | translate\"\n [value]=\"inputDisplayStart()\"\n [disabled]=\"isDisabled()\"\n [readonly]=\"zReadonly()\"\n (click)=\"isOpen() && $event.stopPropagation()\"\n (focus)=\"onInputFocus($event)\"\n (input)=\"onStartInputChange($event)\"\n (blur)=\"onInputBlur($event)\"\n (keydown.enter)=\"onStartInputEnter($event)\" />\n <span class=\"text-muted-foreground text-sm\">-</span>\n <input\n type=\"text\"\n data-range-type=\"end\"\n class=\"placeholder:text-muted-foreground min-w-0 flex-1 truncate bg-transparent text-center text-sm outline-none\"\n [placeholder]=\"'i18n_z_ui_calendar_end_date' | translate\"\n [value]=\"inputDisplayEnd()\"\n [disabled]=\"isDisabled()\"\n [readonly]=\"zReadonly()\"\n (click)=\"isOpen() && $event.stopPropagation()\"\n (focus)=\"onInputFocus($event)\"\n (input)=\"onEndInputChange($event)\"\n (blur)=\"onInputBlur($event)\"\n (keydown.enter)=\"onEndInputEnter($event)\" />\n } @else {\n <input\n #inputEl\n type=\"text\"\n class=\"placeholder:text-muted-foreground min-w-0 flex-1 truncate bg-transparent text-sm outline-none\"\n [placeholder]=\"zPlaceholder()\"\n [value]=\"inputDisplayValue()\"\n [disabled]=\"isDisabled()\"\n [readonly]=\"zReadonly()\"\n (click)=\"isOpen() && $event.stopPropagation()\"\n (focus)=\"onInputFocus($event)\"\n (input)=\"onInputChange($event)\"\n (blur)=\"onInputBlur($event)\"\n (keydown.enter)=\"onInputEnter($event)\" />\n }\n\n @if (zAllowClear() && !isDisabled() && !zReadonly()) {\n <button\n type=\"button\"\n tabindex=\"-1\"\n class=\"text-muted-foreground hover:text-foreground flex size-5 shrink-0 cursor-pointer items-center justify-center rounded transition-all\"\n [class.opacity-0]=\"!hasValue()\"\n [class.pointer-events-none]=\"!hasValue()\"\n (click)=\"onClear($event)\">\n <z-icon zType=\"lucideX\" zSize=\"14\" />\n </button>\n }\n </div>\n </div>\n\n @if (showError()) {\n <p class=\"text-destructive animate-in fade-in slide-in-from-top-1 m-0 text-xs duration-200\">\n {{ errorMessage() }}\n </p>\n }\n</div>\n\n<ng-template #calendarTpl>\n <div\n class=\"z-calendar-calendar bg-popover border-border flex rounded-[6px] border shadow-lg\"\n (keydown)=\"onCalendarKeydown($event)\">\n @if (zQuickSelect() && zMode() === 'range') {\n <div class=\"border-border flex flex-col space-y-1 border-r p-2\">\n @for (preset of quickSelectPresets; track preset.key) {\n @let presetDisabled = preset | zIsPresetDisabled: zDisabledDate();\n <button\n type=\"button\"\n class=\"cursor-pointer rounded-[4px] px-3 py-1.5 text-left text-sm whitespace-nowrap transition-colors\"\n [class.hover:bg-muted]=\"activePresetKey() !== preset.key && !presetDisabled\"\n [class.bg-primary]=\"activePresetKey() === preset.key\"\n [class.text-primary-foreground]=\"activePresetKey() === preset.key\"\n [class.font-medium]=\"activePresetKey() === preset.key\"\n [class.opacity-40]=\"presetDisabled\"\n [class.cursor-not-allowed]=\"presetDisabled\"\n [disabled]=\"presetDisabled\"\n (click)=\"onQuickSelect(preset)\">\n {{ preset.label }}\n </button>\n }\n </div>\n }\n <div class=\"flex flex-col gap-2 p-3\">\n @if (!isTimeMode()) {\n <div class=\"z-calendars-wrapper flex gap-4\">\n <!-- First Calendar -->\n <div class=\"z-calendar-section flex flex-col justify-center gap-1\">\n @if (!isTimeMode()) {\n <div class=\"flex w-full items-center justify-between space-x-1\">\n <button\n type=\"button\"\n z-button\n zType=\"ghost\"\n zSize=\"sm\"\n class=\"size-8 p-0!\"\n [zWave]=\"false\"\n [zWave]=\"false\"\n (click)=\"navigatePrevious()\">\n <z-icon zType=\"lucideChevronsLeft\" zSize=\"16\" />\n </button>\n\n <button\n type=\"button\"\n z-button\n zType=\"ghost\"\n zSize=\"sm\"\n class=\"size-8 p-0!\"\n [zWave]=\"false\"\n [zWave]=\"false\"\n (click)=\"navigatePreviousFast()\">\n <z-icon zType=\"lucideChevronLeft\" zSize=\"16\" />\n </button>\n\n <div class=\"flex flex-1 items-center justify-center gap-0.5\">\n @if (!isYearMode() && !isQuarterMode()) {\n <button\n type=\"button\"\n z-button\n zType=\"ghost\"\n zSize=\"sm\"\n class=\"w-20 px-2!\"\n [zWave]=\"false\"\n [zDisabled]=\"false\"\n (click)=\"setView('month')\">\n {{ currentMonthName() }}\n </button>\n }\n\n <button\n type=\"button\"\n z-button\n zType=\"ghost\"\n zSize=\"sm\"\n class=\"px-2!\"\n [zWave]=\"false\"\n [zDisabled]=\"isYearMode()\"\n (click)=\"setView('year')\">\n {{ currentYear() }}\n </button>\n </div>\n\n <button\n type=\"button\"\n z-button\n zType=\"ghost\"\n zSize=\"sm\"\n class=\"size-8 p-0!\"\n [zDisabled]=\"!canNavigateStartNext()\"\n [zWave]=\"false\"\n (click)=\"navigateNextFast()\">\n <z-icon zType=\"lucideChevronRight\" zSize=\"16\" />\n </button>\n\n <button\n type=\"button\"\n z-button\n zType=\"ghost\"\n zSize=\"sm\"\n class=\"size-8 p-0!\"\n [zDisabled]=\"!canNavigateStartNext()\"\n [zWave]=\"false\"\n (click)=\"navigateNext()\">\n <z-icon zType=\"lucideChevronsRight\" zSize=\"16\" />\n </button>\n </div>\n\n <div class=\"z-calendar-views w-full\" [class.z-calendar-views-quarter]=\"isQuarterMode()\">\n @if (currentView() === 'day') {\n <div class=\"flex h-full w-full flex-col gap-1\" [class.z-calendar-animate]=\"hasViewChanged()\">\n <div class=\"grid w-full grid-cols-7\">\n @for (weekday of weekdayNames; track weekday) {\n <div class=\"text-muted-foreground flex h-7 items-center justify-center text-xs font-medium\">\n {{ weekday }}\n </div>\n }\n </div>\n\n @for (week of calendarDays(); track $index) {\n <div class=\"grid w-full grid-cols-7\">\n @for (day of week; track day.date.getTime()) {\n <button\n type=\"button\"\n [class]=\"day | zDayClasses\"\n [disabled]=\"day.isDisabled\"\n (click)=\"onDayClick(day)\"\n (mouseenter)=\"onDayHover(day)\"\n (mouseleave)=\"onDayLeave()\">\n {{ day.day }}\n </button>\n }\n </div>\n }\n </div>\n }\n\n @if (currentView() === 'month') {\n <div class=\"grid h-full w-full grid-cols-3 grid-rows-4\" [class.z-calendar-animate]=\"hasViewChanged()\">\n @for (month of monthNames; track month; let i = $index) {\n @let monthDisabled = isStartMonthDisabled(i);\n <div class=\"flex items-center justify-center\">\n <button\n type=\"button\"\n [class]=\"i | zMonthClasses: currentMonthIndex()\"\n [disabled]=\"monthDisabled\"\n [class.opacity-30]=\"monthDisabled\"\n [class.cursor-not-allowed]=\"monthDisabled\"\n (click)=\"onMonthSelect(i)\">\n {{ month }}\n </button>\n </div>\n }\n </div>\n }\n\n @if (currentView() === 'year') {\n <div\n class=\"grid h-full w-full grid-cols-3 gap-0.5\"\n [class.grid-rows-4]=\"!isYearMode() && !isQuarterMode()\"\n [class.grid-rows-3]=\"isYearMode() || isQuarterMode()\"\n [class.z-calendar-animate]=\"hasViewChanged()\">\n @for (year of isYearMode() || isQuarterMode() ? yearRangeSmall() : yearRange(); track year) {\n @let yearDisabled = isStartYearDisabled(year);\n <div class=\"flex items-center justify-center\">\n <button\n type=\"button\"\n [class]=\"year | zYearClasses: currentYear()\"\n [disabled]=\"yearDisabled\"\n [class.opacity-30]=\"yearDisabled\"\n [class.cursor-not-allowed]=\"yearDisabled\"\n (click)=\"onYearClick(year)\">\n {{ year }}\n </button>\n </div>\n }\n </div>\n }\n\n @if (currentView() === 'quarter') {\n <div class=\"grid w-full grid-cols-2 gap-2\" [class.z-calendar-animate]=\"hasViewChanged()\">\n @for (quarter of quarterNames; track quarter; let i = $index) {\n <div class=\"flex items-center justify-center\">\n <button\n type=\"button\"\n [class]=\"i | zQuarterClasses: currentQuarterIndex()\"\n (click)=\"onQuarterClick(i)\">\n {{ quarter }}\n </button>\n </div>\n }\n </div>\n }\n </div>\n }\n\n <!-- Start Time Picker for Range Mode -->\n @if (isRangeMode() && zShowTime() && currentView() === 'day') {\n <div class=\"flex items-center justify-center gap-2 pt-2\">\n <span class=\"text-muted-foreground text-xs\">{{ 'i18n_z_ui_calendar_start' | translate }}:</span>\n <div class=\"flex items-center gap-0.5\">\n @if (zShowHour()) {\n <input\n type=\"text\"\n tabindex=\"0\"\n inputmode=\"numeric\"\n data-time-type=\"hour\"\n class=\"border-input bg-background focus:border-ring focus:ring-ring/30 w-10 rounded border px-1.5 py-1 text-center text-sm outline-none focus:ring-2\"\n [value]=\"formattedHour()\"\n (input)=\"onHourInput($event)\"\n (blur)=\"onTimeBlur($event)\"\n maxlength=\"2\" />\n }\n @if (zShowHour() && zShowMinute()) {\n <span class=\"text-muted-foreground\">:</span>\n }\n @if (zShowMinute()) {\n <input\n type=\"text\"\n tabindex=\"0\"\n inputmode=\"numeric\"\n data-time-type=\"minute\"\n class=\"border-input bg-background focus:border-ring focus:ring-ring/30 w-10 rounded border px-1.5 py-1 text-center text-sm outline-none focus:ring-2\"\n [value]=\"formattedMinute()\"\n (input)=\"onMinuteInput($event)\"\n (blur)=\"onTimeBlur($event)\"\n maxlength=\"2\" />\n }\n @if (zShowMinute() && zShowSecond()) {\n <span class=\"text-muted-foreground\">:</span>\n }\n @if (zShowSecond()) {\n <input\n type=\"text\"\n tabindex=\"0\"\n inputmode=\"numeric\"\n data-time-type=\"second\"\n class=\"border-input bg-background focus:border-ring focus:ring-ring/30 w-10 rounded border px-1.5 py-1 text-center text-sm outline-none focus:ring-2\"\n [value]=\"formattedSecond()\"\n (input)=\"onSecondInput($event)\"\n (blur)=\"onTimeBlur($event)\"\n maxlength=\"2\" />\n }\n @if (zTimeFormat() === '12h') {\n <button\n type=\"button\"\n tabindex=\"0\"\n class=\"border-input bg-background hover:bg-muted focus:border-ring focus:ring-ring/30 ml-1 cursor-pointer rounded border px-2 py-1 text-sm font-medium transition-colors outline-none focus:ring-2\"\n (click)=\"togglePeriod()\">\n {{ period() }}\n </button>\n }\n </div>\n </div>\n }\n </div>\n\n <!-- Second Calendar (Range Mode Only) -->\n @if (isRangeMode()) {\n <!-- Divider -->\n <div class=\"border-border bg-border w-px self-stretch\"></div>\n\n <div class=\"z-calendar-section flex flex-col justify-center gap-1\">\n <div class=\"flex w-full items-center justify-between space-x-1\">\n <button\n type=\"button\"\n z-button\n zType=\"ghost\"\n zSize=\"sm\"\n class=\"size-8 p-0!\"\n [zDisabled]=\"!canNavigateEndPrev()\"\n [zWave]=\"false\"\n (click)=\"navigateEndPreviousFast()\">\n <z-icon zType=\"lucideChevronsLeft\" zSize=\"16\" />\n </button>\n\n <button\n type=\"button\"\n z-button\n zType=\"ghost\"\n zSize=\"sm\"\n class=\"size-8 p-0!\"\n [zDisabled]=\"!canNavigateEndPrev()\"\n [zWave]=\"false\"\n (click)=\"navigateEndPrevious()\">\n <z-icon zType=\"lucideChevronLeft\" zSize=\"16\" />\n </button>\n\n <div class=\"flex flex-1 items-center justify-center gap-0.5\">\n <button\n type=\"button\"\n z-button\n zType=\"ghost\"\n zSize=\"sm\"\n class=\"w-20 px-2!\"\n [zWave]=\"false\"\n (click)=\"setEndView('month')\">\n {{ endMonthName() }}\n </button>\n\n <button\n type=\"button\"\n z-button\n zType=\"ghost\"\n zSize=\"sm\"\n class=\"px-2!\"\n [zWave]=\"false\"\n (click)=\"setEndView('year')\">\n {{ endMonthYear() }}\n </button>\n </div>\n\n <button\n type=\"button\"\n z-button\n zType=\"ghost\"\n zSize=\"sm\"\n class=\"size-8 p-0!\"\n [zWave]=\"false\"\n [zWave]=\"false\"\n (click)=\"navigateEndNext()\">\n <z-icon zType=\"lucideChevronRight\" zSize=\"16\" />\n </button>\n\n <button\n type=\"button\"\n z-button\n zType=\"ghost\"\n zSize=\"sm\"\n class=\"size-8 p-0!\"\n [zWave]=\"false\"\n [zWave]=\"false\"\n (click)=\"navigateEndNextFast()\">\n <z-icon zType=\"lucideChevronsRight\" zSize=\"16\" />\n </button>\n </div>\n\n <div class=\"z-calendar-views w-full\">\n @if (endView() === 'day') {\n <div class=\"flex h-full w-full flex-col gap-1\" [class.z-calendar-animate]=\"hasEndViewChanged()\">\n <div class=\"grid grid-cols-7 gap-px\">\n @for (weekday of weekdayNames; track weekday) {\n <div class=\"text-muted-foreground flex h-8 w-8 items-center justify-center text-xs font-medium\">\n {{ weekday }}\n </div>\n }\n </div>\n\n @for (week of calendarDaysEnd(); track $index) {\n <div class=\"grid grid-cols-7 gap-px\">\n @for (day of week; track day.date.getTime()) {\n <button\n type=\"button\"\n [class]=\"day | zDayClasses\"\n [disabled]=\"day.isDisabled\"\n (click)=\"onDayClick(day)\"\n (mouseenter)=\"onDayHover(day)\"\n (mouseleave)=\"onDayLeave()\">\n {{ day.day }}\n </button>\n }\n </div>\n }\n </div>\n }\n\n @if (endView() === 'month') {\n <div\n class=\"grid h-full w-full grid-cols-3 grid-rows-4\"\n [class.z-calendar-animate]=\"hasEndViewChanged()\">\n @for (month of monthNames; track month; let i = $index) {\n @let endMonthDisabled = isEndMonthDisabled(i);\n <div class=\"flex items-center justify-center\">\n <button\n type=\"button\"\n [class]=\"i | zMonthClasses: endMonth().getMonth()\"\n [disabled]=\"endMonthDisabled\"\n [class.opacity-30]=\"endMonthDisabled\"\n [class.cursor-not-allowed]=\"endMonthDisabled\"\n (click)=\"onEndMonthClick(i)\">\n {{ month }}\n </button>\n </div>\n }\n </div>\n }\n\n @if (endView() === 'year') {\n <div\n class=\"grid h-full w-full grid-cols-3 grid-rows-4 gap-0.5\"\n [class.z-calendar-animate]=\"hasEndViewChanged()\">\n @for (year of endYearRange(); track year) {\n @let endYearDisabled = isEndYearDisabled(year);\n <div class=\"flex items-center justify-center\">\n <button\n type=\"button\"\n [class]=\"year | zYearClasses: endMonth().getFullYear()\"\n [disabled]=\"endYearDisabled\"\n [class.opacity-30]=\"endYearDisabled\"\n [class.cursor-not-allowed]=\"endYearDisabled\"\n (click)=\"onEndYearClick(year)\">\n {{ year }}\n </button>\n </div>\n }\n </div>\n }\n </div>\n\n <!-- End Time Picker for Range Mode -->\n @if (zShowTime()) {\n <div class=\"flex items-center justify-center gap-2 pt-2\">\n <span class=\"text-muted-foreground text-xs\">{{ 'i18n_z_ui_calendar_end' | translate }}:</span>\n <div class=\"flex items-center gap-0.5\">\n @if (zShowHour()) {\n <input\n type=\"text\"\n tabindex=\"0\"\n inputmode=\"numeric\"\n data-time-type=\"hour-end\"\n class=\"border-input bg-background focus:border-ring focus:ring-ring/30 w-10 rounded border px-1.5 py-1 text-center text-sm outline-none focus:ring-2\"\n [value]=\"formattedHourEnd()\"\n (input)=\"onHourEndInput($event)\"\n (blur)=\"onTimeBlurEnd($event)\"\n maxlength=\"2\" />\n }\n @if (zShowHour() && zShowMinute()) {\n <span class=\"text-muted-foreground\">:</span>\n }\n @if (zShowMinute()) {\n <input\n type=\"text\"\n tabindex=\"0\"\n inputmode=\"numeric\"\n data-time-type=\"minute-end\"\n class=\"border-input bg-background focus:border-ring focus:ring-ring/30 w-10 rounded border px-1.5 py-1 text-center text-sm outline-none focus:ring-2\"\n [value]=\"formattedMinuteEnd()\"\n (input)=\"onMinuteEndInput($event)\"\n (blur)=\"onTimeBlurEnd($event)\"\n maxlength=\"2\" />\n }\n @if (zShowMinute() && zShowSecond()) {\n <span class=\"text-muted-foreground\">:</span>\n }\n @if (zShowSecond()) {\n <input\n type=\"text\"\n tabindex=\"0\"\n inputmode=\"numeric\"\n data-time-type=\"second-end\"\n class=\"border-input bg-background focus:border-ring focus:ring-ring/30 w-10 rounded border px-1.5 py-1 text-center text-sm outline-none focus:ring-2\"\n [value]=\"formattedSecondEnd()\"\n (input)=\"onSecondEndInput($event)\"\n (blur)=\"onTimeBlurEnd($event)\"\n maxlength=\"2\" />\n }\n @if (zTimeFormat() === '12h') {\n <button\n type=\"button\"\n tabindex=\"0\"\n class=\"border-input bg-background hover:bg-muted focus:border-ring focus:ring-ring/30 ml-1 cursor-pointer rounded border px-2 py-1 text-sm font-medium transition-colors outline-none focus:ring-2\"\n (click)=\"togglePeriodEnd()\">\n {{ periodEnd() }}\n </button>\n }\n </div>\n </div>\n }\n </div>\n }\n </div>\n }\n\n @if (((zShowTime() && currentView() === 'day') || isTimeMode()) && !isRangeMode()) {\n <div class=\"flex items-center justify-center gap-2\">\n <div class=\"flex items-center gap-0.5\">\n @if (zShowHour()) {\n <input\n type=\"text\"\n tabindex=\"0\"\n inputmode=\"numeric\"\n data-time-type=\"hour\"\n class=\"border-input bg-background focus:border-ring focus:ring-ring/30 w-10 rounded border px-1.5 py-1 text-center text-sm outline-none focus:ring-2\"\n [value]=\"formattedHour()\"\n (input)=\"onHourInput($event)\"\n (blur)=\"onTimeBlur($event)\"\n maxlength=\"2\" />\n }\n\n @if (zShowHour() && zShowMinute()) {\n <span class=\"text-muted-foreground\">:</span>\n }\n\n @if (zShowMinute()) {\n <input\n type=\"text\"\n tabindex=\"0\"\n inputmode=\"numeric\"\n data-time-type=\"minute\"\n class=\"border-input bg-background focus:border-ring focus:ring-ring/30 w-10 rounded border px-1.5 py-1 text-center text-sm outline-none focus:ring-2\"\n [value]=\"formattedMinute()\"\n (input)=\"onMinuteInput($event)\"\n (blur)=\"onTimeBlur($event)\"\n maxlength=\"2\" />\n }\n\n @if (zShowMinute() && zShowSecond()) {\n <span class=\"text-muted-foreground\">:</span>\n }\n\n @if (zShowSecond()) {\n <input\n type=\"text\"\n tabindex=\"0\"\n inputmode=\"numeric\"\n data-time-type=\"second\"\n class=\"border-input bg-background focus:border-ring focus:ring-ring/30 w-10 rounded border px-1.5 py-1 text-center text-sm outline-none focus:ring-2\"\n [value]=\"formattedSecond()\"\n (input)=\"onSecondInput($event)\"\n (blur)=\"onTimeBlur($event)\"\n maxlength=\"2\" />\n }\n\n @if (zTimeFormat() === '12h') {\n <button\n type=\"button\"\n tabindex=\"0\"\n class=\"border-input bg-background hover:bg-muted focus:border-ring focus:ring-ring/30 ml-1 cursor-pointer rounded border px-2 py-1 text-sm font-medium transition-colors outline-none focus:ring-2\"\n (click)=\"togglePeriod()\">\n {{ period() }}\n </button>\n }\n </div>\n </div>\n }\n\n @if (!(zQuickSelect() && zMode() === 'range' && !showOkButton() && !showCancelButton())) {\n <div class=\"border-border flex items-center justify-between gap-2 border-t pt-2\">\n @if (!zQuickSelect() || zMode() !== 'range') {\n <button type=\"button\" z-button zType=\"secondary\" zSize=\"sm\" [zWave]=\"false\" (click)=\"onTodayClick()\">\n {{ todayButtonText() }}\n </button>\n } @else {\n <div></div>\n }\n\n @if (showOkButton() || showCancelButton()) {\n <div class=\"flex items-center gap-2\">\n @if (showCancelButton()) {\n <button type=\"button\" z-button zType=\"outline\" zSize=\"sm\" (click)=\"onCancelClick()\">\n {{ zCancelText() ?? ('i18n_z_ui_calendar_cancel' | translate) }}\n </button>\n }\n @if (showOkButton()) {\n <button type=\"button\" z-button zSize=\"sm\" [zDisabled]=\"!canApply()\" (click)=\"onOkClick()\">\n {{ zOkText() ?? ('i18n_z_ui_calendar_ok' | translate) }}\n </button>\n }\n </div>\n }\n </div>\n }\n </div>\n </div>\n</ng-template>\n", styles: [".z-calendar-calendar .z-calendar-section{width:280px;flex-shrink:0}.z-calendar-calendar .z-calendar-views{height:225px;width:100%;display:flex;align-items:center;justify-content:center;flex-direction:column}.z-calendar-calendar .z-calendar-views.z-calendar-views-quarter{height:auto}.z-calendar-calendar .z-calendar-animate{animation:z-calendar-view-enter .2s ease-out}@keyframes z-calendar-view-enter{0%{opacity:0;transform:scale(.95) translateY(4px)}to{opacity:1;transform:scale(1) translateY(0)}}\n"], dependencies: [{ kind: "component", type: ZIconComponent, selector: "z-icon, [z-icon]", inputs: ["class", "zType", "zSize", "zStrokeWidth", "zSvg"] }, { kind: "directive", type: ZPopoverDirective, selector: "[z-popover]", inputs: ["zPopoverContent", "zPosition", "zTrigger", "zClass", "zShowDelay", "zHideDelay", "zDisabled", "zOffset", "zPopoverWidth", "zManualClose", "zScrollClose", "zShowArrow"], outputs: ["zShow", "zHide", "zHideStart", "zControl"], exportAs: ["zPopover"] }, { kind: "component", type: ZButtonComponent, selector: "z-button, button[z-button], a[z-button]", inputs: ["class", "zType", "zSize", "zShape", "zLabel", "zLoading", "zDisabled", "zTypeIcon", "zSizeIcon", "zStrokeWidthIcon", "zWave"], exportAs: ["zButton"] }, { kind: "pipe", type: ZDayClassesPipe, name: "zDayClasses" }, { kind: "pipe", type: ZMonthClassesPipe, name: "zMonthClasses" }, { kind: "pipe", type: ZQuarterClassesPipe, name: "zQuarterClasses" }, { kind: "pipe", type: ZYearClassesPipe, name: "zYearClasses" }, { kind: "pipe", type: ZIsPresetDisabledPipe, name: "zIsPresetDisabled" }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
2340
|
+
], viewQueries: [{ propertyName: "triggerRef", first: true, predicate: ["triggerEl"], descendants: true, isSignal: true }, { propertyName: "inputRef", first: true, predicate: ["inputEl"], descendants: true, isSignal: true }], exportAs: ["zCalendar"], ngImport: i0, template: "<div class=\"z-calendar-wrapper flex w-full flex-col gap-2\">\n @if (zLabel()) {\n <label [for]=\"pickerId\" class=\"text-xs leading-none font-medium\" [class]=\"zLabelClass()\">\n {{ zLabel() }}\n @if (zRequired()) {\n <span class=\"text-destructive! ml-0.5\">*</span>\n }\n </label>\n }\n\n <div class=\"relative\">\n <div\n #triggerEl\n z-popover\n [zPopoverContent]=\"calendarTpl\"\n zPosition=\"bottom-left\"\n zPopoverWidth=\"auto\"\n [zOffset]=\"6\"\n [zDisabled]=\"isDisabled() || zReadonly()\"\n [zManualClose]=\"showCancelButton()\"\n [zScrollClose]=\"zScrollClose()\"\n zTrigger=\"click\"\n zClass=\"border-0 shadow-none bg-transparent p-0\"\n (zHideStart)=\"onPopoverHide()\"\n (zShow)=\"onPopoverShow()\"\n (zControl)=\"onPopoverControl($event)\"\n [id]=\"pickerId\"\n [class]=\"triggerClasses()\"\n (keydown)=\"onTriggerKeydown($event)\">\n <z-icon\n [zType]=\"isRangeMode() ? 'lucideCalendarRange' : 'lucideCalendar'\"\n zSize=\"16\"\n class=\"text-muted-foreground shrink-0 cursor-pointer\"\n (click)=\"$event.stopPropagation(); toggle()\" />\n\n @if (isRangeMode()) {\n <input\n type=\"text\"\n data-range-type=\"start\"\n class=\"placeholder:text-muted-foreground min-w-0 flex-1 truncate bg-transparent text-center text-sm outline-none\"\n [placeholder]=\"'i18n_z_ui_calendar_start_date' | translate\"\n [value]=\"inputDisplayStart()\"\n [disabled]=\"isDisabled()\"\n [readonly]=\"zReadonly()\"\n (click)=\"isOpen() && $event.stopPropagation()\"\n (focus)=\"onInputFocus($event)\"\n (input)=\"onStartInputChange($event)\"\n (blur)=\"onInputBlur($event)\"\n (keydown.enter)=\"onStartInputEnter($event)\" />\n <span class=\"text-muted-foreground text-sm\">-</span>\n <input\n type=\"text\"\n data-range-type=\"end\"\n class=\"placeholder:text-muted-foreground min-w-0 flex-1 truncate bg-transparent text-center text-sm outline-none\"\n [placeholder]=\"'i18n_z_ui_calendar_end_date' | translate\"\n [value]=\"inputDisplayEnd()\"\n [disabled]=\"isDisabled()\"\n [readonly]=\"zReadonly()\"\n (click)=\"isOpen() && $event.stopPropagation()\"\n (focus)=\"onInputFocus($event)\"\n (input)=\"onEndInputChange($event)\"\n (blur)=\"onInputBlur($event)\"\n (keydown.enter)=\"onEndInputEnter($event)\" />\n } @else {\n <input\n #inputEl\n type=\"text\"\n class=\"placeholder:text-muted-foreground min-w-0 flex-1 truncate bg-transparent text-sm outline-none\"\n [placeholder]=\"zPlaceholder()\"\n [value]=\"inputDisplayValue()\"\n [disabled]=\"isDisabled()\"\n [readonly]=\"zReadonly()\"\n (click)=\"isOpen() && $event.stopPropagation()\"\n (focus)=\"onInputFocus($event)\"\n (input)=\"onInputChange($event)\"\n (blur)=\"onInputBlur($event)\"\n (keydown.enter)=\"onInputEnter($event)\" />\n }\n\n @if (zAllowClear() && !isDisabled() && !zReadonly()) {\n <button\n type=\"button\"\n tabindex=\"-1\"\n class=\"text-muted-foreground hover:text-foreground flex size-5 shrink-0 cursor-pointer items-center justify-center rounded transition-all\"\n [class.opacity-0]=\"!hasValue()\"\n [class.pointer-events-none]=\"!hasValue()\"\n (click)=\"onClear($event)\">\n <z-icon zType=\"lucideX\" zSize=\"14\" />\n </button>\n }\n </div>\n </div>\n\n @if (showError()) {\n <p class=\"text-destructive animate-in fade-in slide-in-from-top-1 m-0 text-xs duration-200\">\n {{ errorMessage() }}\n </p>\n }\n</div>\n\n<ng-template #calendarTpl>\n <div\n class=\"z-calendar-calendar bg-popover border-border flex rounded-[6px] border shadow-lg\"\n (keydown)=\"onCalendarKeydown($event)\">\n @if (zQuickSelect() && zMode() === 'range') {\n <div class=\"border-border flex flex-col space-y-1 border-r p-2\">\n @for (preset of quickSelectPresets; track preset.key) {\n @let presetDisabled = preset | zIsPresetDisabled: zDisabledDate();\n <button\n type=\"button\"\n class=\"cursor-pointer rounded-[4px] px-3 py-1.5 text-left text-sm whitespace-nowrap transition-colors\"\n [class.hover:bg-muted]=\"activePresetKey() !== preset.key && !presetDisabled\"\n [class.bg-primary]=\"activePresetKey() === preset.key\"\n [class.text-primary-foreground]=\"activePresetKey() === preset.key\"\n [class.font-medium]=\"activePresetKey() === preset.key\"\n [class.opacity-40]=\"presetDisabled\"\n [class.cursor-not-allowed]=\"presetDisabled\"\n [disabled]=\"presetDisabled\"\n (click)=\"onQuickSelect(preset)\">\n {{ preset.label }}\n </button>\n }\n </div>\n }\n <div class=\"flex flex-col gap-2 p-3\">\n @if (!isTimeMode()) {\n <div class=\"z-calendars-wrapper flex gap-4\">\n <!-- First Calendar -->\n <div class=\"z-calendar-section flex flex-col justify-center gap-1\">\n @if (!isTimeMode()) {\n <div class=\"flex w-full items-center justify-between space-x-1\">\n <button\n type=\"button\"\n z-button\n zType=\"ghost\"\n zSize=\"sm\"\n class=\"size-8 p-0!\"\n [zWave]=\"false\"\n [zWave]=\"false\"\n (click)=\"navigatePrevious()\">\n <z-icon zType=\"lucideChevronsLeft\" zSize=\"16\" />\n </button>\n\n <button\n type=\"button\"\n z-button\n zType=\"ghost\"\n zSize=\"sm\"\n class=\"size-8 p-0!\"\n [zWave]=\"false\"\n [zWave]=\"false\"\n (click)=\"navigatePreviousFast()\">\n <z-icon zType=\"lucideChevronLeft\" zSize=\"16\" />\n </button>\n\n <div class=\"flex flex-1 items-center justify-center gap-0.5\">\n @if (!isYearMode() && !isQuarterMode()) {\n <button\n type=\"button\"\n z-button\n zType=\"ghost\"\n zSize=\"sm\"\n class=\"w-20 px-2!\"\n [zWave]=\"false\"\n [zDisabled]=\"false\"\n (click)=\"setView('month')\">\n {{ currentMonthName() }}\n </button>\n }\n\n <button\n type=\"button\"\n z-button\n zType=\"ghost\"\n zSize=\"sm\"\n class=\"px-2!\"\n [zWave]=\"false\"\n [zDisabled]=\"isYearMode()\"\n (click)=\"setView('year')\">\n {{ currentYear() }}\n </button>\n </div>\n\n <button\n type=\"button\"\n z-button\n zType=\"ghost\"\n zSize=\"sm\"\n class=\"size-8 p-0!\"\n [zDisabled]=\"!canNavigateStartNext()\"\n [zWave]=\"false\"\n (click)=\"navigateNextFast()\">\n <z-icon zType=\"lucideChevronRight\" zSize=\"16\" />\n </button>\n\n <button\n type=\"button\"\n z-button\n zType=\"ghost\"\n zSize=\"sm\"\n class=\"size-8 p-0!\"\n [zDisabled]=\"!canNavigateStartNext()\"\n [zWave]=\"false\"\n (click)=\"navigateNext()\">\n <z-icon zType=\"lucideChevronsRight\" zSize=\"16\" />\n </button>\n </div>\n\n <div class=\"z-calendar-views w-full\" [class.z-calendar-views-quarter]=\"isQuarterMode()\">\n @if (currentView() === 'day') {\n <div class=\"flex h-full w-full flex-col gap-1\" [class.z-calendar-animate]=\"hasViewChanged()\">\n <div class=\"grid w-full grid-cols-7\">\n @for (weekday of weekdayNames; track weekday) {\n <div class=\"text-muted-foreground flex h-7 items-center justify-center text-xs font-medium\">\n {{ weekday }}\n </div>\n }\n </div>\n\n @for (week of calendarDays(); track $index) {\n <div class=\"grid w-full grid-cols-7\">\n @for (day of week; track day.date.getTime()) {\n <button\n type=\"button\"\n [class]=\"day | zDayClasses\"\n [disabled]=\"day.isDisabled\"\n (click)=\"onDayClick(day)\"\n (mouseenter)=\"onDayHover(day)\"\n (mouseleave)=\"onDayLeave()\">\n {{ day.day }}\n </button>\n }\n </div>\n }\n </div>\n }\n\n @if (currentView() === 'month') {\n <div class=\"grid h-full w-full grid-cols-3 grid-rows-4\" [class.z-calendar-animate]=\"hasViewChanged()\">\n @for (month of monthNames; track month; let i = $index) {\n @let monthDisabled = isStartMonthDisabled(i);\n <div class=\"flex items-center justify-center\">\n <button\n type=\"button\"\n [class]=\"i | zMonthClasses: currentMonthIndex()\"\n [disabled]=\"monthDisabled\"\n [class.opacity-30]=\"monthDisabled\"\n [class.cursor-not-allowed]=\"monthDisabled\"\n (click)=\"onMonthSelect(i)\">\n {{ month }}\n </button>\n </div>\n }\n </div>\n }\n\n @if (currentView() === 'year') {\n <div\n class=\"grid h-full w-full grid-cols-3 gap-0.5\"\n [class.grid-rows-4]=\"!isYearMode() && !isQuarterMode()\"\n [class.grid-rows-3]=\"isYearMode() || isQuarterMode()\"\n [class.z-calendar-animate]=\"hasViewChanged()\">\n @for (year of isYearMode() || isQuarterMode() ? yearRangeSmall() : yearRange(); track year) {\n @let yearDisabled = isStartYearDisabled(year);\n <div class=\"flex items-center justify-center\">\n <button\n type=\"button\"\n [class]=\"year | zYearClasses: currentYear()\"\n [disabled]=\"yearDisabled\"\n [class.opacity-30]=\"yearDisabled\"\n [class.cursor-not-allowed]=\"yearDisabled\"\n (click)=\"onYearClick(year)\">\n {{ year }}\n </button>\n </div>\n }\n </div>\n }\n\n @if (currentView() === 'quarter') {\n <div class=\"grid w-full grid-cols-2 gap-2\" [class.z-calendar-animate]=\"hasViewChanged()\">\n @for (quarter of quarterNames; track quarter; let i = $index) {\n <div class=\"flex items-center justify-center\">\n <button\n type=\"button\"\n [class]=\"i | zQuarterClasses: currentQuarterIndex()\"\n (click)=\"onQuarterClick(i)\">\n {{ quarter }}\n </button>\n </div>\n }\n </div>\n }\n </div>\n }\n\n <!-- Start Time Picker for Range Mode -->\n @if (isRangeMode() && zShowTime() && currentView() === 'day') {\n <div class=\"flex items-center justify-center gap-2 pt-2\">\n <span class=\"text-muted-foreground text-xs\">{{ 'i18n_z_ui_calendar_start' | translate }}:</span>\n <div class=\"flex items-center gap-0.5\">\n @if (zShowHour()) {\n <input\n type=\"text\"\n tabindex=\"0\"\n inputmode=\"numeric\"\n data-time-type=\"hour\"\n class=\"border-input bg-background focus:border-ring focus:ring-ring/30 w-10 rounded border px-1.5 py-1 text-center text-sm outline-none focus:ring-2\"\n [value]=\"formattedHour()\"\n (input)=\"onHourInput($event)\"\n (blur)=\"onTimeBlur($event)\"\n maxlength=\"2\" />\n }\n @if (zShowHour() && zShowMinute()) {\n <span class=\"text-muted-foreground\">:</span>\n }\n @if (zShowMinute()) {\n <input\n type=\"text\"\n tabindex=\"0\"\n inputmode=\"numeric\"\n data-time-type=\"minute\"\n class=\"border-input bg-background focus:border-ring focus:ring-ring/30 w-10 rounded border px-1.5 py-1 text-center text-sm outline-none focus:ring-2\"\n [value]=\"formattedMinute()\"\n (input)=\"onMinuteInput($event)\"\n (blur)=\"onTimeBlur($event)\"\n maxlength=\"2\" />\n }\n @if (zShowMinute() && zShowSecond()) {\n <span class=\"text-muted-foreground\">:</span>\n }\n @if (zShowSecond()) {\n <input\n type=\"text\"\n tabindex=\"0\"\n inputmode=\"numeric\"\n data-time-type=\"second\"\n class=\"border-input bg-background focus:border-ring focus:ring-ring/30 w-10 rounded border px-1.5 py-1 text-center text-sm outline-none focus:ring-2\"\n [value]=\"formattedSecond()\"\n (input)=\"onSecondInput($event)\"\n (blur)=\"onTimeBlur($event)\"\n maxlength=\"2\" />\n }\n @if (zTimeFormat() === '12h') {\n <button\n type=\"button\"\n tabindex=\"0\"\n class=\"border-input bg-background hover:bg-muted focus:border-ring focus:ring-ring/30 ml-1 cursor-pointer rounded border px-2 py-1 text-sm font-medium transition-colors outline-none focus:ring-2\"\n (click)=\"togglePeriod()\">\n {{ period() }}\n </button>\n }\n </div>\n </div>\n }\n </div>\n\n <!-- Second Calendar (Range Mode Only) -->\n @if (isRangeMode()) {\n <!-- Divider -->\n <div class=\"border-border bg-border w-px self-stretch\"></div>\n\n <div class=\"z-calendar-section flex flex-col justify-center gap-1\">\n <div class=\"flex w-full items-center justify-between space-x-1\">\n <button\n type=\"button\"\n z-button\n zType=\"ghost\"\n zSize=\"sm\"\n class=\"size-8 p-0!\"\n [zDisabled]=\"!canNavigateEndPrev()\"\n [zWave]=\"false\"\n (click)=\"navigateEndPreviousFast()\">\n <z-icon zType=\"lucideChevronsLeft\" zSize=\"16\" />\n </button>\n\n <button\n type=\"button\"\n z-button\n zType=\"ghost\"\n zSize=\"sm\"\n class=\"size-8 p-0!\"\n [zDisabled]=\"!canNavigateEndPrev()\"\n [zWave]=\"false\"\n (click)=\"navigateEndPrevious()\">\n <z-icon zType=\"lucideChevronLeft\" zSize=\"16\" />\n </button>\n\n <div class=\"flex flex-1 items-center justify-center gap-0.5\">\n <button\n type=\"button\"\n z-button\n zType=\"ghost\"\n zSize=\"sm\"\n class=\"w-20 px-2!\"\n [zWave]=\"false\"\n (click)=\"setEndView('month')\">\n {{ endMonthName() }}\n </button>\n\n <button\n type=\"button\"\n z-button\n zType=\"ghost\"\n zSize=\"sm\"\n class=\"px-2!\"\n [zWave]=\"false\"\n (click)=\"setEndView('year')\">\n {{ endMonthYear() }}\n </button>\n </div>\n\n <button\n type=\"button\"\n z-button\n zType=\"ghost\"\n zSize=\"sm\"\n class=\"size-8 p-0!\"\n [zWave]=\"false\"\n [zWave]=\"false\"\n (click)=\"navigateEndNext()\">\n <z-icon zType=\"lucideChevronRight\" zSize=\"16\" />\n </button>\n\n <button\n type=\"button\"\n z-button\n zType=\"ghost\"\n zSize=\"sm\"\n class=\"size-8 p-0!\"\n [zWave]=\"false\"\n [zWave]=\"false\"\n (click)=\"navigateEndNextFast()\">\n <z-icon zType=\"lucideChevronsRight\" zSize=\"16\" />\n </button>\n </div>\n\n <div class=\"z-calendar-views w-full\">\n @if (endView() === 'day') {\n <div class=\"flex h-full w-full flex-col gap-1\" [class.z-calendar-animate]=\"hasEndViewChanged()\">\n <div class=\"grid grid-cols-7 gap-px\">\n @for (weekday of weekdayNames; track weekday) {\n <div class=\"text-muted-foreground flex h-8 w-8 items-center justify-center text-xs font-medium\">\n {{ weekday }}\n </div>\n }\n </div>\n\n @for (week of calendarDaysEnd(); track $index) {\n <div class=\"grid grid-cols-7 gap-px\">\n @for (day of week; track day.date.getTime()) {\n <button\n type=\"button\"\n [class]=\"day | zDayClasses\"\n [disabled]=\"day.isDisabled\"\n (click)=\"onDayClick(day)\"\n (mouseenter)=\"onDayHover(day)\"\n (mouseleave)=\"onDayLeave()\">\n {{ day.day }}\n </button>\n }\n </div>\n }\n </div>\n }\n\n @if (endView() === 'month') {\n <div\n class=\"grid h-full w-full grid-cols-3 grid-rows-4\"\n [class.z-calendar-animate]=\"hasEndViewChanged()\">\n @for (month of monthNames; track month; let i = $index) {\n @let endMonthDisabled = isEndMonthDisabled(i);\n <div class=\"flex items-center justify-center\">\n <button\n type=\"button\"\n [class]=\"i | zMonthClasses: endMonth().getMonth()\"\n [disabled]=\"endMonthDisabled\"\n [class.opacity-30]=\"endMonthDisabled\"\n [class.cursor-not-allowed]=\"endMonthDisabled\"\n (click)=\"onEndMonthClick(i)\">\n {{ month }}\n </button>\n </div>\n }\n </div>\n }\n\n @if (endView() === 'year') {\n <div\n class=\"grid h-full w-full grid-cols-3 grid-rows-4 gap-0.5\"\n [class.z-calendar-animate]=\"hasEndViewChanged()\">\n @for (year of endYearRange(); track year) {\n @let endYearDisabled = isEndYearDisabled(year);\n <div class=\"flex items-center justify-center\">\n <button\n type=\"button\"\n [class]=\"year | zYearClasses: endMonth().getFullYear()\"\n [disabled]=\"endYearDisabled\"\n [class.opacity-30]=\"endYearDisabled\"\n [class.cursor-not-allowed]=\"endYearDisabled\"\n (click)=\"onEndYearClick(year)\">\n {{ year }}\n </button>\n </div>\n }\n </div>\n }\n </div>\n\n <!-- End Time Picker for Range Mode -->\n @if (zShowTime()) {\n <div class=\"flex items-center justify-center gap-2 pt-2\">\n <span class=\"text-muted-foreground text-xs\">{{ 'i18n_z_ui_calendar_end' | translate }}:</span>\n <div class=\"flex items-center gap-0.5\">\n @if (zShowHour()) {\n <input\n type=\"text\"\n tabindex=\"0\"\n inputmode=\"numeric\"\n data-time-type=\"hour-end\"\n class=\"border-input bg-background focus:border-ring focus:ring-ring/30 w-10 rounded border px-1.5 py-1 text-center text-sm outline-none focus:ring-2\"\n [value]=\"formattedHourEnd()\"\n (input)=\"onHourEndInput($event)\"\n (blur)=\"onTimeBlurEnd($event)\"\n maxlength=\"2\" />\n }\n @if (zShowHour() && zShowMinute()) {\n <span class=\"text-muted-foreground\">:</span>\n }\n @if (zShowMinute()) {\n <input\n type=\"text\"\n tabindex=\"0\"\n inputmode=\"numeric\"\n data-time-type=\"minute-end\"\n class=\"border-input bg-background focus:border-ring focus:ring-ring/30 w-10 rounded border px-1.5 py-1 text-center text-sm outline-none focus:ring-2\"\n [value]=\"formattedMinuteEnd()\"\n (input)=\"onMinuteEndInput($event)\"\n (blur)=\"onTimeBlurEnd($event)\"\n maxlength=\"2\" />\n }\n @if (zShowMinute() && zShowSecond()) {\n <span class=\"text-muted-foreground\">:</span>\n }\n @if (zShowSecond()) {\n <input\n type=\"text\"\n tabindex=\"0\"\n inputmode=\"numeric\"\n data-time-type=\"second-end\"\n class=\"border-input bg-background focus:border-ring focus:ring-ring/30 w-10 rounded border px-1.5 py-1 text-center text-sm outline-none focus:ring-2\"\n [value]=\"formattedSecondEnd()\"\n (input)=\"onSecondEndInput($event)\"\n (blur)=\"onTimeBlurEnd($event)\"\n maxlength=\"2\" />\n }\n @if (zTimeFormat() === '12h') {\n <button\n type=\"button\"\n tabindex=\"0\"\n class=\"border-input bg-background hover:bg-muted focus:border-ring focus:ring-ring/30 ml-1 cursor-pointer rounded border px-2 py-1 text-sm font-medium transition-colors outline-none focus:ring-2\"\n (click)=\"togglePeriodEnd()\">\n {{ periodEnd() }}\n </button>\n }\n </div>\n </div>\n }\n </div>\n }\n </div>\n }\n\n @if (((zShowTime() && currentView() === 'day') || isTimeMode()) && !isRangeMode()) {\n <div class=\"flex items-center justify-center gap-2\">\n <div class=\"flex items-center gap-0.5\">\n @if (zShowHour()) {\n <input\n type=\"text\"\n tabindex=\"0\"\n inputmode=\"numeric\"\n data-time-type=\"hour\"\n class=\"border-input bg-background focus:border-ring focus:ring-ring/30 w-10 rounded border px-1.5 py-1 text-center text-sm outline-none focus:ring-2\"\n [value]=\"formattedHour()\"\n (input)=\"onHourInput($event)\"\n (blur)=\"onTimeBlur($event)\"\n maxlength=\"2\" />\n }\n\n @if (zShowHour() && zShowMinute()) {\n <span class=\"text-muted-foreground\">:</span>\n }\n\n @if (zShowMinute()) {\n <input\n type=\"text\"\n tabindex=\"0\"\n inputmode=\"numeric\"\n data-time-type=\"minute\"\n class=\"border-input bg-background focus:border-ring focus:ring-ring/30 w-10 rounded border px-1.5 py-1 text-center text-sm outline-none focus:ring-2\"\n [value]=\"formattedMinute()\"\n (input)=\"onMinuteInput($event)\"\n (blur)=\"onTimeBlur($event)\"\n maxlength=\"2\" />\n }\n\n @if (zShowMinute() && zShowSecond()) {\n <span class=\"text-muted-foreground\">:</span>\n }\n\n @if (zShowSecond()) {\n <input\n type=\"text\"\n tabindex=\"0\"\n inputmode=\"numeric\"\n data-time-type=\"second\"\n class=\"border-input bg-background focus:border-ring focus:ring-ring/30 w-10 rounded border px-1.5 py-1 text-center text-sm outline-none focus:ring-2\"\n [value]=\"formattedSecond()\"\n (input)=\"onSecondInput($event)\"\n (blur)=\"onTimeBlur($event)\"\n maxlength=\"2\" />\n }\n\n @if (zTimeFormat() === '12h') {\n <button\n type=\"button\"\n tabindex=\"0\"\n class=\"border-input bg-background hover:bg-muted focus:border-ring focus:ring-ring/30 ml-1 cursor-pointer rounded border px-2 py-1 text-sm font-medium transition-colors outline-none focus:ring-2\"\n (click)=\"togglePeriod()\">\n {{ period() }}\n </button>\n }\n </div>\n </div>\n }\n\n @if (!(zQuickSelect() && zMode() === 'range' && !showOkButton() && !showCancelButton())) {\n <div class=\"border-border flex items-center justify-between gap-2 border-t pt-2\">\n @if (!zQuickSelect() || zMode() !== 'range') {\n <button type=\"button\" z-button zType=\"secondary\" zSize=\"sm\" [zWave]=\"false\" (click)=\"onTodayClick()\">\n {{ todayButtonText() }}\n </button>\n } @else {\n <div></div>\n }\n\n @if (showOkButton() || showCancelButton()) {\n <div class=\"flex items-center gap-2\">\n @if (showCancelButton()) {\n <button type=\"button\" z-button zType=\"outline\" zSize=\"sm\" (click)=\"onCancelClick()\">\n {{ zCancelText() ?? ('i18n_z_ui_calendar_cancel' | translate) }}\n </button>\n }\n @if (showOkButton()) {\n <button type=\"button\" z-button zSize=\"sm\" [zDisabled]=\"!canApply()\" (click)=\"onOkClick()\">\n {{ zOkText() ?? ('i18n_z_ui_calendar_ok' | translate) }}\n </button>\n }\n </div>\n }\n </div>\n }\n </div>\n </div>\n</ng-template>\n", styles: [".z-calendar-calendar .z-calendar-section{width:280px;flex-shrink:0}.z-calendar-calendar .z-calendar-views{height:225px;width:100%;display:flex;align-items:center;justify-content:center;flex-direction:column}.z-calendar-calendar .z-calendar-views.z-calendar-views-quarter{height:auto}.z-calendar-calendar .z-calendar-animate{animation:z-calendar-view-enter .2s ease-out}@keyframes z-calendar-view-enter{0%{opacity:0;transform:scale(.95) translateY(4px)}to{opacity:1;transform:scale(1) translateY(0)}}\n"], dependencies: [{ kind: "component", type: ZIconComponent, selector: "z-icon, [z-icon]", inputs: ["class", "zType", "zSize", "zStrokeWidth", "zSvg"] }, { kind: "directive", type: ZPopoverDirective, selector: "[z-popover]", inputs: ["zPopoverContent", "zPosition", "zTrigger", "zClass", "zShowDelay", "zHideDelay", "zDisabled", "zOffset", "zPopoverWidth", "zManualClose", "zScrollClose", "zShowArrow"], outputs: ["zShow", "zHide", "zHideStart", "zControl"], exportAs: ["zPopover"] }, { kind: "component", type: ZButtonComponent, selector: "z-button, button[z-button], a[z-button]", inputs: ["class", "zType", "zSize", "zShape", "zLabel", "zLoading", "zDisabled", "zTypeIcon", "zSizeIcon", "zStrokeWidthIcon", "zWave"], exportAs: ["zButton"] }, { kind: "pipe", type: ZDayClassesPipe, name: "zDayClasses" }, { kind: "pipe", type: ZMonthClassesPipe, name: "zMonthClasses" }, { kind: "pipe", type: ZQuarterClassesPipe, name: "zQuarterClasses" }, { kind: "pipe", type: ZYearClassesPipe, name: "zYearClasses" }, { kind: "pipe", type: ZIsPresetDisabledPipe, name: "zIsPresetDisabled" }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
2339
2341
|
}
|
|
2340
2342
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ZCalendarComponent, decorators: [{
|
|
2341
2343
|
type: Component,
|
|
@@ -2356,8 +2358,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
|
|
|
2356
2358
|
multi: true,
|
|
2357
2359
|
},
|
|
2358
2360
|
TranslatePipe,
|
|
2359
|
-
], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, exportAs: 'zCalendar', template: "<div class=\"z-calendar-wrapper flex w-full flex-col gap-2\">\n @if (zLabel()) {\n <label [for]=\"pickerId\" class=\"text-xs leading-none font-medium\" [class]=\"zLabelClass()\">\n {{ zLabel() }}\n @if (zRequired()) {\n <span class=\"text-destructive! ml-0.5\">*</span>\n }\n </label>\n }\n\n <div class=\"relative\">\n <div\n #triggerEl\n z-popover\n [zPopoverContent]=\"calendarTpl\"\n zPosition=\"bottom-left\"\n zPopoverWidth=\"auto\"\n [zOffset]=\"6\"\n [zDisabled]=\"isDisabled() || zReadonly()\"\n [zManualClose]=\"showCancelButton()\"\n zTrigger=\"click\"\n zClass=\"border-0 shadow-none bg-transparent p-0\"\n (zHideStart)=\"onPopoverHide()\"\n (zShow)=\"onPopoverShow()\"\n (zControl)=\"onPopoverControl($event)\"\n [id]=\"pickerId\"\n [class]=\"triggerClasses()\"\n (keydown)=\"onTriggerKeydown($event)\">\n <z-icon\n [zType]=\"isRangeMode() ? 'lucideCalendarRange' : 'lucideCalendar'\"\n zSize=\"16\"\n class=\"text-muted-foreground shrink-0 cursor-pointer\"\n (click)=\"$event.stopPropagation(); toggle()\" />\n\n @if (isRangeMode()) {\n <input\n type=\"text\"\n data-range-type=\"start\"\n class=\"placeholder:text-muted-foreground min-w-0 flex-1 truncate bg-transparent text-center text-sm outline-none\"\n [placeholder]=\"'i18n_z_ui_calendar_start_date' | translate\"\n [value]=\"inputDisplayStart()\"\n [disabled]=\"isDisabled()\"\n [readonly]=\"zReadonly()\"\n (click)=\"isOpen() && $event.stopPropagation()\"\n (focus)=\"onInputFocus($event)\"\n (input)=\"onStartInputChange($event)\"\n (blur)=\"onInputBlur($event)\"\n (keydown.enter)=\"onStartInputEnter($event)\" />\n <span class=\"text-muted-foreground text-sm\">-</span>\n <input\n type=\"text\"\n data-range-type=\"end\"\n class=\"placeholder:text-muted-foreground min-w-0 flex-1 truncate bg-transparent text-center text-sm outline-none\"\n [placeholder]=\"'i18n_z_ui_calendar_end_date' | translate\"\n [value]=\"inputDisplayEnd()\"\n [disabled]=\"isDisabled()\"\n [readonly]=\"zReadonly()\"\n (click)=\"isOpen() && $event.stopPropagation()\"\n (focus)=\"onInputFocus($event)\"\n (input)=\"onEndInputChange($event)\"\n (blur)=\"onInputBlur($event)\"\n (keydown.enter)=\"onEndInputEnter($event)\" />\n } @else {\n <input\n #inputEl\n type=\"text\"\n class=\"placeholder:text-muted-foreground min-w-0 flex-1 truncate bg-transparent text-sm outline-none\"\n [placeholder]=\"zPlaceholder()\"\n [value]=\"inputDisplayValue()\"\n [disabled]=\"isDisabled()\"\n [readonly]=\"zReadonly()\"\n (click)=\"isOpen() && $event.stopPropagation()\"\n (focus)=\"onInputFocus($event)\"\n (input)=\"onInputChange($event)\"\n (blur)=\"onInputBlur($event)\"\n (keydown.enter)=\"onInputEnter($event)\" />\n }\n\n @if (zAllowClear() && !isDisabled() && !zReadonly()) {\n <button\n type=\"button\"\n tabindex=\"-1\"\n class=\"text-muted-foreground hover:text-foreground flex size-5 shrink-0 cursor-pointer items-center justify-center rounded transition-all\"\n [class.opacity-0]=\"!hasValue()\"\n [class.pointer-events-none]=\"!hasValue()\"\n (click)=\"onClear($event)\">\n <z-icon zType=\"lucideX\" zSize=\"14\" />\n </button>\n }\n </div>\n </div>\n\n @if (showError()) {\n <p class=\"text-destructive animate-in fade-in slide-in-from-top-1 m-0 text-xs duration-200\">\n {{ errorMessage() }}\n </p>\n }\n</div>\n\n<ng-template #calendarTpl>\n <div\n class=\"z-calendar-calendar bg-popover border-border flex rounded-[6px] border shadow-lg\"\n (keydown)=\"onCalendarKeydown($event)\">\n @if (zQuickSelect() && zMode() === 'range') {\n <div class=\"border-border flex flex-col space-y-1 border-r p-2\">\n @for (preset of quickSelectPresets; track preset.key) {\n @let presetDisabled = preset | zIsPresetDisabled: zDisabledDate();\n <button\n type=\"button\"\n class=\"cursor-pointer rounded-[4px] px-3 py-1.5 text-left text-sm whitespace-nowrap transition-colors\"\n [class.hover:bg-muted]=\"activePresetKey() !== preset.key && !presetDisabled\"\n [class.bg-primary]=\"activePresetKey() === preset.key\"\n [class.text-primary-foreground]=\"activePresetKey() === preset.key\"\n [class.font-medium]=\"activePresetKey() === preset.key\"\n [class.opacity-40]=\"presetDisabled\"\n [class.cursor-not-allowed]=\"presetDisabled\"\n [disabled]=\"presetDisabled\"\n (click)=\"onQuickSelect(preset)\">\n {{ preset.label }}\n </button>\n }\n </div>\n }\n <div class=\"flex flex-col gap-2 p-3\">\n @if (!isTimeMode()) {\n <div class=\"z-calendars-wrapper flex gap-4\">\n <!-- First Calendar -->\n <div class=\"z-calendar-section flex flex-col justify-center gap-1\">\n @if (!isTimeMode()) {\n <div class=\"flex w-full items-center justify-between space-x-1\">\n <button\n type=\"button\"\n z-button\n zType=\"ghost\"\n zSize=\"sm\"\n class=\"size-8 p-0!\"\n [zWave]=\"false\"\n [zWave]=\"false\"\n (click)=\"navigatePrevious()\">\n <z-icon zType=\"lucideChevronsLeft\" zSize=\"16\" />\n </button>\n\n <button\n type=\"button\"\n z-button\n zType=\"ghost\"\n zSize=\"sm\"\n class=\"size-8 p-0!\"\n [zWave]=\"false\"\n [zWave]=\"false\"\n (click)=\"navigatePreviousFast()\">\n <z-icon zType=\"lucideChevronLeft\" zSize=\"16\" />\n </button>\n\n <div class=\"flex flex-1 items-center justify-center gap-0.5\">\n @if (!isYearMode() && !isQuarterMode()) {\n <button\n type=\"button\"\n z-button\n zType=\"ghost\"\n zSize=\"sm\"\n class=\"w-20 px-2!\"\n [zWave]=\"false\"\n [zDisabled]=\"false\"\n (click)=\"setView('month')\">\n {{ currentMonthName() }}\n </button>\n }\n\n <button\n type=\"button\"\n z-button\n zType=\"ghost\"\n zSize=\"sm\"\n class=\"px-2!\"\n [zWave]=\"false\"\n [zDisabled]=\"isYearMode()\"\n (click)=\"setView('year')\">\n {{ currentYear() }}\n </button>\n </div>\n\n <button\n type=\"button\"\n z-button\n zType=\"ghost\"\n zSize=\"sm\"\n class=\"size-8 p-0!\"\n [zDisabled]=\"!canNavigateStartNext()\"\n [zWave]=\"false\"\n (click)=\"navigateNextFast()\">\n <z-icon zType=\"lucideChevronRight\" zSize=\"16\" />\n </button>\n\n <button\n type=\"button\"\n z-button\n zType=\"ghost\"\n zSize=\"sm\"\n class=\"size-8 p-0!\"\n [zDisabled]=\"!canNavigateStartNext()\"\n [zWave]=\"false\"\n (click)=\"navigateNext()\">\n <z-icon zType=\"lucideChevronsRight\" zSize=\"16\" />\n </button>\n </div>\n\n <div class=\"z-calendar-views w-full\" [class.z-calendar-views-quarter]=\"isQuarterMode()\">\n @if (currentView() === 'day') {\n <div class=\"flex h-full w-full flex-col gap-1\" [class.z-calendar-animate]=\"hasViewChanged()\">\n <div class=\"grid w-full grid-cols-7\">\n @for (weekday of weekdayNames; track weekday) {\n <div class=\"text-muted-foreground flex h-7 items-center justify-center text-xs font-medium\">\n {{ weekday }}\n </div>\n }\n </div>\n\n @for (week of calendarDays(); track $index) {\n <div class=\"grid w-full grid-cols-7\">\n @for (day of week; track day.date.getTime()) {\n <button\n type=\"button\"\n [class]=\"day | zDayClasses\"\n [disabled]=\"day.isDisabled\"\n (click)=\"onDayClick(day)\"\n (mouseenter)=\"onDayHover(day)\"\n (mouseleave)=\"onDayLeave()\">\n {{ day.day }}\n </button>\n }\n </div>\n }\n </div>\n }\n\n @if (currentView() === 'month') {\n <div class=\"grid h-full w-full grid-cols-3 grid-rows-4\" [class.z-calendar-animate]=\"hasViewChanged()\">\n @for (month of monthNames; track month; let i = $index) {\n @let monthDisabled = isStartMonthDisabled(i);\n <div class=\"flex items-center justify-center\">\n <button\n type=\"button\"\n [class]=\"i | zMonthClasses: currentMonthIndex()\"\n [disabled]=\"monthDisabled\"\n [class.opacity-30]=\"monthDisabled\"\n [class.cursor-not-allowed]=\"monthDisabled\"\n (click)=\"onMonthSelect(i)\">\n {{ month }}\n </button>\n </div>\n }\n </div>\n }\n\n @if (currentView() === 'year') {\n <div\n class=\"grid h-full w-full grid-cols-3 gap-0.5\"\n [class.grid-rows-4]=\"!isYearMode() && !isQuarterMode()\"\n [class.grid-rows-3]=\"isYearMode() || isQuarterMode()\"\n [class.z-calendar-animate]=\"hasViewChanged()\">\n @for (year of isYearMode() || isQuarterMode() ? yearRangeSmall() : yearRange(); track year) {\n @let yearDisabled = isStartYearDisabled(year);\n <div class=\"flex items-center justify-center\">\n <button\n type=\"button\"\n [class]=\"year | zYearClasses: currentYear()\"\n [disabled]=\"yearDisabled\"\n [class.opacity-30]=\"yearDisabled\"\n [class.cursor-not-allowed]=\"yearDisabled\"\n (click)=\"onYearClick(year)\">\n {{ year }}\n </button>\n </div>\n }\n </div>\n }\n\n @if (currentView() === 'quarter') {\n <div class=\"grid w-full grid-cols-2 gap-2\" [class.z-calendar-animate]=\"hasViewChanged()\">\n @for (quarter of quarterNames; track quarter; let i = $index) {\n <div class=\"flex items-center justify-center\">\n <button\n type=\"button\"\n [class]=\"i | zQuarterClasses: currentQuarterIndex()\"\n (click)=\"onQuarterClick(i)\">\n {{ quarter }}\n </button>\n </div>\n }\n </div>\n }\n </div>\n }\n\n <!-- Start Time Picker for Range Mode -->\n @if (isRangeMode() && zShowTime() && currentView() === 'day') {\n <div class=\"flex items-center justify-center gap-2 pt-2\">\n <span class=\"text-muted-foreground text-xs\">{{ 'i18n_z_ui_calendar_start' | translate }}:</span>\n <div class=\"flex items-center gap-0.5\">\n @if (zShowHour()) {\n <input\n type=\"text\"\n tabindex=\"0\"\n inputmode=\"numeric\"\n data-time-type=\"hour\"\n class=\"border-input bg-background focus:border-ring focus:ring-ring/30 w-10 rounded border px-1.5 py-1 text-center text-sm outline-none focus:ring-2\"\n [value]=\"formattedHour()\"\n (input)=\"onHourInput($event)\"\n (blur)=\"onTimeBlur($event)\"\n maxlength=\"2\" />\n }\n @if (zShowHour() && zShowMinute()) {\n <span class=\"text-muted-foreground\">:</span>\n }\n @if (zShowMinute()) {\n <input\n type=\"text\"\n tabindex=\"0\"\n inputmode=\"numeric\"\n data-time-type=\"minute\"\n class=\"border-input bg-background focus:border-ring focus:ring-ring/30 w-10 rounded border px-1.5 py-1 text-center text-sm outline-none focus:ring-2\"\n [value]=\"formattedMinute()\"\n (input)=\"onMinuteInput($event)\"\n (blur)=\"onTimeBlur($event)\"\n maxlength=\"2\" />\n }\n @if (zShowMinute() && zShowSecond()) {\n <span class=\"text-muted-foreground\">:</span>\n }\n @if (zShowSecond()) {\n <input\n type=\"text\"\n tabindex=\"0\"\n inputmode=\"numeric\"\n data-time-type=\"second\"\n class=\"border-input bg-background focus:border-ring focus:ring-ring/30 w-10 rounded border px-1.5 py-1 text-center text-sm outline-none focus:ring-2\"\n [value]=\"formattedSecond()\"\n (input)=\"onSecondInput($event)\"\n (blur)=\"onTimeBlur($event)\"\n maxlength=\"2\" />\n }\n @if (zTimeFormat() === '12h') {\n <button\n type=\"button\"\n tabindex=\"0\"\n class=\"border-input bg-background hover:bg-muted focus:border-ring focus:ring-ring/30 ml-1 cursor-pointer rounded border px-2 py-1 text-sm font-medium transition-colors outline-none focus:ring-2\"\n (click)=\"togglePeriod()\">\n {{ period() }}\n </button>\n }\n </div>\n </div>\n }\n </div>\n\n <!-- Second Calendar (Range Mode Only) -->\n @if (isRangeMode()) {\n <!-- Divider -->\n <div class=\"border-border bg-border w-px self-stretch\"></div>\n\n <div class=\"z-calendar-section flex flex-col justify-center gap-1\">\n <div class=\"flex w-full items-center justify-between space-x-1\">\n <button\n type=\"button\"\n z-button\n zType=\"ghost\"\n zSize=\"sm\"\n class=\"size-8 p-0!\"\n [zDisabled]=\"!canNavigateEndPrev()\"\n [zWave]=\"false\"\n (click)=\"navigateEndPreviousFast()\">\n <z-icon zType=\"lucideChevronsLeft\" zSize=\"16\" />\n </button>\n\n <button\n type=\"button\"\n z-button\n zType=\"ghost\"\n zSize=\"sm\"\n class=\"size-8 p-0!\"\n [zDisabled]=\"!canNavigateEndPrev()\"\n [zWave]=\"false\"\n (click)=\"navigateEndPrevious()\">\n <z-icon zType=\"lucideChevronLeft\" zSize=\"16\" />\n </button>\n\n <div class=\"flex flex-1 items-center justify-center gap-0.5\">\n <button\n type=\"button\"\n z-button\n zType=\"ghost\"\n zSize=\"sm\"\n class=\"w-20 px-2!\"\n [zWave]=\"false\"\n (click)=\"setEndView('month')\">\n {{ endMonthName() }}\n </button>\n\n <button\n type=\"button\"\n z-button\n zType=\"ghost\"\n zSize=\"sm\"\n class=\"px-2!\"\n [zWave]=\"false\"\n (click)=\"setEndView('year')\">\n {{ endMonthYear() }}\n </button>\n </div>\n\n <button\n type=\"button\"\n z-button\n zType=\"ghost\"\n zSize=\"sm\"\n class=\"size-8 p-0!\"\n [zWave]=\"false\"\n [zWave]=\"false\"\n (click)=\"navigateEndNext()\">\n <z-icon zType=\"lucideChevronRight\" zSize=\"16\" />\n </button>\n\n <button\n type=\"button\"\n z-button\n zType=\"ghost\"\n zSize=\"sm\"\n class=\"size-8 p-0!\"\n [zWave]=\"false\"\n [zWave]=\"false\"\n (click)=\"navigateEndNextFast()\">\n <z-icon zType=\"lucideChevronsRight\" zSize=\"16\" />\n </button>\n </div>\n\n <div class=\"z-calendar-views w-full\">\n @if (endView() === 'day') {\n <div class=\"flex h-full w-full flex-col gap-1\" [class.z-calendar-animate]=\"hasEndViewChanged()\">\n <div class=\"grid grid-cols-7 gap-px\">\n @for (weekday of weekdayNames; track weekday) {\n <div class=\"text-muted-foreground flex h-8 w-8 items-center justify-center text-xs font-medium\">\n {{ weekday }}\n </div>\n }\n </div>\n\n @for (week of calendarDaysEnd(); track $index) {\n <div class=\"grid grid-cols-7 gap-px\">\n @for (day of week; track day.date.getTime()) {\n <button\n type=\"button\"\n [class]=\"day | zDayClasses\"\n [disabled]=\"day.isDisabled\"\n (click)=\"onDayClick(day)\"\n (mouseenter)=\"onDayHover(day)\"\n (mouseleave)=\"onDayLeave()\">\n {{ day.day }}\n </button>\n }\n </div>\n }\n </div>\n }\n\n @if (endView() === 'month') {\n <div\n class=\"grid h-full w-full grid-cols-3 grid-rows-4\"\n [class.z-calendar-animate]=\"hasEndViewChanged()\">\n @for (month of monthNames; track month; let i = $index) {\n @let endMonthDisabled = isEndMonthDisabled(i);\n <div class=\"flex items-center justify-center\">\n <button\n type=\"button\"\n [class]=\"i | zMonthClasses: endMonth().getMonth()\"\n [disabled]=\"endMonthDisabled\"\n [class.opacity-30]=\"endMonthDisabled\"\n [class.cursor-not-allowed]=\"endMonthDisabled\"\n (click)=\"onEndMonthClick(i)\">\n {{ month }}\n </button>\n </div>\n }\n </div>\n }\n\n @if (endView() === 'year') {\n <div\n class=\"grid h-full w-full grid-cols-3 grid-rows-4 gap-0.5\"\n [class.z-calendar-animate]=\"hasEndViewChanged()\">\n @for (year of endYearRange(); track year) {\n @let endYearDisabled = isEndYearDisabled(year);\n <div class=\"flex items-center justify-center\">\n <button\n type=\"button\"\n [class]=\"year | zYearClasses: endMonth().getFullYear()\"\n [disabled]=\"endYearDisabled\"\n [class.opacity-30]=\"endYearDisabled\"\n [class.cursor-not-allowed]=\"endYearDisabled\"\n (click)=\"onEndYearClick(year)\">\n {{ year }}\n </button>\n </div>\n }\n </div>\n }\n </div>\n\n <!-- End Time Picker for Range Mode -->\n @if (zShowTime()) {\n <div class=\"flex items-center justify-center gap-2 pt-2\">\n <span class=\"text-muted-foreground text-xs\">{{ 'i18n_z_ui_calendar_end' | translate }}:</span>\n <div class=\"flex items-center gap-0.5\">\n @if (zShowHour()) {\n <input\n type=\"text\"\n tabindex=\"0\"\n inputmode=\"numeric\"\n data-time-type=\"hour-end\"\n class=\"border-input bg-background focus:border-ring focus:ring-ring/30 w-10 rounded border px-1.5 py-1 text-center text-sm outline-none focus:ring-2\"\n [value]=\"formattedHourEnd()\"\n (input)=\"onHourEndInput($event)\"\n (blur)=\"onTimeBlurEnd($event)\"\n maxlength=\"2\" />\n }\n @if (zShowHour() && zShowMinute()) {\n <span class=\"text-muted-foreground\">:</span>\n }\n @if (zShowMinute()) {\n <input\n type=\"text\"\n tabindex=\"0\"\n inputmode=\"numeric\"\n data-time-type=\"minute-end\"\n class=\"border-input bg-background focus:border-ring focus:ring-ring/30 w-10 rounded border px-1.5 py-1 text-center text-sm outline-none focus:ring-2\"\n [value]=\"formattedMinuteEnd()\"\n (input)=\"onMinuteEndInput($event)\"\n (blur)=\"onTimeBlurEnd($event)\"\n maxlength=\"2\" />\n }\n @if (zShowMinute() && zShowSecond()) {\n <span class=\"text-muted-foreground\">:</span>\n }\n @if (zShowSecond()) {\n <input\n type=\"text\"\n tabindex=\"0\"\n inputmode=\"numeric\"\n data-time-type=\"second-end\"\n class=\"border-input bg-background focus:border-ring focus:ring-ring/30 w-10 rounded border px-1.5 py-1 text-center text-sm outline-none focus:ring-2\"\n [value]=\"formattedSecondEnd()\"\n (input)=\"onSecondEndInput($event)\"\n (blur)=\"onTimeBlurEnd($event)\"\n maxlength=\"2\" />\n }\n @if (zTimeFormat() === '12h') {\n <button\n type=\"button\"\n tabindex=\"0\"\n class=\"border-input bg-background hover:bg-muted focus:border-ring focus:ring-ring/30 ml-1 cursor-pointer rounded border px-2 py-1 text-sm font-medium transition-colors outline-none focus:ring-2\"\n (click)=\"togglePeriodEnd()\">\n {{ periodEnd() }}\n </button>\n }\n </div>\n </div>\n }\n </div>\n }\n </div>\n }\n\n @if (((zShowTime() && currentView() === 'day') || isTimeMode()) && !isRangeMode()) {\n <div class=\"flex items-center justify-center gap-2\">\n <div class=\"flex items-center gap-0.5\">\n @if (zShowHour()) {\n <input\n type=\"text\"\n tabindex=\"0\"\n inputmode=\"numeric\"\n data-time-type=\"hour\"\n class=\"border-input bg-background focus:border-ring focus:ring-ring/30 w-10 rounded border px-1.5 py-1 text-center text-sm outline-none focus:ring-2\"\n [value]=\"formattedHour()\"\n (input)=\"onHourInput($event)\"\n (blur)=\"onTimeBlur($event)\"\n maxlength=\"2\" />\n }\n\n @if (zShowHour() && zShowMinute()) {\n <span class=\"text-muted-foreground\">:</span>\n }\n\n @if (zShowMinute()) {\n <input\n type=\"text\"\n tabindex=\"0\"\n inputmode=\"numeric\"\n data-time-type=\"minute\"\n class=\"border-input bg-background focus:border-ring focus:ring-ring/30 w-10 rounded border px-1.5 py-1 text-center text-sm outline-none focus:ring-2\"\n [value]=\"formattedMinute()\"\n (input)=\"onMinuteInput($event)\"\n (blur)=\"onTimeBlur($event)\"\n maxlength=\"2\" />\n }\n\n @if (zShowMinute() && zShowSecond()) {\n <span class=\"text-muted-foreground\">:</span>\n }\n\n @if (zShowSecond()) {\n <input\n type=\"text\"\n tabindex=\"0\"\n inputmode=\"numeric\"\n data-time-type=\"second\"\n class=\"border-input bg-background focus:border-ring focus:ring-ring/30 w-10 rounded border px-1.5 py-1 text-center text-sm outline-none focus:ring-2\"\n [value]=\"formattedSecond()\"\n (input)=\"onSecondInput($event)\"\n (blur)=\"onTimeBlur($event)\"\n maxlength=\"2\" />\n }\n\n @if (zTimeFormat() === '12h') {\n <button\n type=\"button\"\n tabindex=\"0\"\n class=\"border-input bg-background hover:bg-muted focus:border-ring focus:ring-ring/30 ml-1 cursor-pointer rounded border px-2 py-1 text-sm font-medium transition-colors outline-none focus:ring-2\"\n (click)=\"togglePeriod()\">\n {{ period() }}\n </button>\n }\n </div>\n </div>\n }\n\n @if (!(zQuickSelect() && zMode() === 'range' && !showOkButton() && !showCancelButton())) {\n <div class=\"border-border flex items-center justify-between gap-2 border-t pt-2\">\n @if (!zQuickSelect() || zMode() !== 'range') {\n <button type=\"button\" z-button zType=\"secondary\" zSize=\"sm\" [zWave]=\"false\" (click)=\"onTodayClick()\">\n {{ todayButtonText() }}\n </button>\n } @else {\n <div></div>\n }\n\n @if (showOkButton() || showCancelButton()) {\n <div class=\"flex items-center gap-2\">\n @if (showCancelButton()) {\n <button type=\"button\" z-button zType=\"outline\" zSize=\"sm\" (click)=\"onCancelClick()\">\n {{ zCancelText() ?? ('i18n_z_ui_calendar_cancel' | translate) }}\n </button>\n }\n @if (showOkButton()) {\n <button type=\"button\" z-button zSize=\"sm\" [zDisabled]=\"!canApply()\" (click)=\"onOkClick()\">\n {{ zOkText() ?? ('i18n_z_ui_calendar_ok' | translate) }}\n </button>\n }\n </div>\n }\n </div>\n }\n </div>\n </div>\n</ng-template>\n", styles: [".z-calendar-calendar .z-calendar-section{width:280px;flex-shrink:0}.z-calendar-calendar .z-calendar-views{height:225px;width:100%;display:flex;align-items:center;justify-content:center;flex-direction:column}.z-calendar-calendar .z-calendar-views.z-calendar-views-quarter{height:auto}.z-calendar-calendar .z-calendar-animate{animation:z-calendar-view-enter .2s ease-out}@keyframes z-calendar-view-enter{0%{opacity:0;transform:scale(.95) translateY(4px)}to{opacity:1;transform:scale(1) translateY(0)}}\n"] }]
|
|
2360
|
-
}], ctorParameters: () => [], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], zMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "zMode", required: false }] }], zSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "zSize", required: false }] }], zLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "zLabel", required: false }] }], zLabelClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "zLabelClass", required: false }] }], zPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "zPlaceholder", required: false }] }], zRequired: [{ type: i0.Input, args: [{ isSignal: true, alias: "zRequired", required: false }] }], zDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "zDisabled", required: false }] }], zReadonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "zReadonly", required: false }] }], zShowTime: [{ type: i0.Input, args: [{ isSignal: true, alias: "zShowTime", required: false }] }], zTimeFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "zTimeFormat", required: false }] }], zShowHour: [{ type: i0.Input, args: [{ isSignal: true, alias: "zShowHour", required: false }] }], zShowMinute: [{ type: i0.Input, args: [{ isSignal: true, alias: "zShowMinute", required: false }] }], zShowSecond: [{ type: i0.Input, args: [{ isSignal: true, alias: "zShowSecond", required: false }] }], zQuickSelect: [{ type: i0.Input, args: [{ isSignal: true, alias: "zQuickSelect", required: false }] }], zAllowClear: [{ type: i0.Input, args: [{ isSignal: true, alias: "zAllowClear", required: false }] }], zFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "zFormat", required: false }] }], zMinDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "zMinDate", required: false }] }], zMaxDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "zMaxDate", required: false }] }], zValueType: [{ type: i0.Input, args: [{ isSignal: true, alias: "zValueType", required: false }] }], zValidators: [{ type: i0.Input, args: [{ isSignal: true, alias: "zValidators", required: false }] }], zLocale: [{ type: i0.Input, args: [{ isSignal: true, alias: "zLocale", required: false }] }], zShowOk: [{ type: i0.Input, args: [{ isSignal: true, alias: "zShowOk", required: false }] }], zOkText: [{ type: i0.Input, args: [{ isSignal: true, alias: "zOkText", required: false }] }], zShowCancel: [{ type: i0.Input, args: [{ isSignal: true, alias: "zShowCancel", required: false }] }], zCancelText: [{ type: i0.Input, args: [{ isSignal: true, alias: "zCancelText", required: false }] }], zDisabledDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "zDisabledDate", required: false }] }], zControl: [{ type: i0.Output, args: ["zControl"] }], zChange: [{ type: i0.Output, args: ["zChange"] }], triggerRef: [{ type: i0.ViewChild, args: ['triggerEl', { isSignal: true }] }], inputRef: [{ type: i0.ViewChild, args: ['inputEl', { isSignal: true }] }] } });
|
|
2361
|
+
], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, exportAs: 'zCalendar', template: "<div class=\"z-calendar-wrapper flex w-full flex-col gap-2\">\n @if (zLabel()) {\n <label [for]=\"pickerId\" class=\"text-xs leading-none font-medium\" [class]=\"zLabelClass()\">\n {{ zLabel() }}\n @if (zRequired()) {\n <span class=\"text-destructive! ml-0.5\">*</span>\n }\n </label>\n }\n\n <div class=\"relative\">\n <div\n #triggerEl\n z-popover\n [zPopoverContent]=\"calendarTpl\"\n zPosition=\"bottom-left\"\n zPopoverWidth=\"auto\"\n [zOffset]=\"6\"\n [zDisabled]=\"isDisabled() || zReadonly()\"\n [zManualClose]=\"showCancelButton()\"\n [zScrollClose]=\"zScrollClose()\"\n zTrigger=\"click\"\n zClass=\"border-0 shadow-none bg-transparent p-0\"\n (zHideStart)=\"onPopoverHide()\"\n (zShow)=\"onPopoverShow()\"\n (zControl)=\"onPopoverControl($event)\"\n [id]=\"pickerId\"\n [class]=\"triggerClasses()\"\n (keydown)=\"onTriggerKeydown($event)\">\n <z-icon\n [zType]=\"isRangeMode() ? 'lucideCalendarRange' : 'lucideCalendar'\"\n zSize=\"16\"\n class=\"text-muted-foreground shrink-0 cursor-pointer\"\n (click)=\"$event.stopPropagation(); toggle()\" />\n\n @if (isRangeMode()) {\n <input\n type=\"text\"\n data-range-type=\"start\"\n class=\"placeholder:text-muted-foreground min-w-0 flex-1 truncate bg-transparent text-center text-sm outline-none\"\n [placeholder]=\"'i18n_z_ui_calendar_start_date' | translate\"\n [value]=\"inputDisplayStart()\"\n [disabled]=\"isDisabled()\"\n [readonly]=\"zReadonly()\"\n (click)=\"isOpen() && $event.stopPropagation()\"\n (focus)=\"onInputFocus($event)\"\n (input)=\"onStartInputChange($event)\"\n (blur)=\"onInputBlur($event)\"\n (keydown.enter)=\"onStartInputEnter($event)\" />\n <span class=\"text-muted-foreground text-sm\">-</span>\n <input\n type=\"text\"\n data-range-type=\"end\"\n class=\"placeholder:text-muted-foreground min-w-0 flex-1 truncate bg-transparent text-center text-sm outline-none\"\n [placeholder]=\"'i18n_z_ui_calendar_end_date' | translate\"\n [value]=\"inputDisplayEnd()\"\n [disabled]=\"isDisabled()\"\n [readonly]=\"zReadonly()\"\n (click)=\"isOpen() && $event.stopPropagation()\"\n (focus)=\"onInputFocus($event)\"\n (input)=\"onEndInputChange($event)\"\n (blur)=\"onInputBlur($event)\"\n (keydown.enter)=\"onEndInputEnter($event)\" />\n } @else {\n <input\n #inputEl\n type=\"text\"\n class=\"placeholder:text-muted-foreground min-w-0 flex-1 truncate bg-transparent text-sm outline-none\"\n [placeholder]=\"zPlaceholder()\"\n [value]=\"inputDisplayValue()\"\n [disabled]=\"isDisabled()\"\n [readonly]=\"zReadonly()\"\n (click)=\"isOpen() && $event.stopPropagation()\"\n (focus)=\"onInputFocus($event)\"\n (input)=\"onInputChange($event)\"\n (blur)=\"onInputBlur($event)\"\n (keydown.enter)=\"onInputEnter($event)\" />\n }\n\n @if (zAllowClear() && !isDisabled() && !zReadonly()) {\n <button\n type=\"button\"\n tabindex=\"-1\"\n class=\"text-muted-foreground hover:text-foreground flex size-5 shrink-0 cursor-pointer items-center justify-center rounded transition-all\"\n [class.opacity-0]=\"!hasValue()\"\n [class.pointer-events-none]=\"!hasValue()\"\n (click)=\"onClear($event)\">\n <z-icon zType=\"lucideX\" zSize=\"14\" />\n </button>\n }\n </div>\n </div>\n\n @if (showError()) {\n <p class=\"text-destructive animate-in fade-in slide-in-from-top-1 m-0 text-xs duration-200\">\n {{ errorMessage() }}\n </p>\n }\n</div>\n\n<ng-template #calendarTpl>\n <div\n class=\"z-calendar-calendar bg-popover border-border flex rounded-[6px] border shadow-lg\"\n (keydown)=\"onCalendarKeydown($event)\">\n @if (zQuickSelect() && zMode() === 'range') {\n <div class=\"border-border flex flex-col space-y-1 border-r p-2\">\n @for (preset of quickSelectPresets; track preset.key) {\n @let presetDisabled = preset | zIsPresetDisabled: zDisabledDate();\n <button\n type=\"button\"\n class=\"cursor-pointer rounded-[4px] px-3 py-1.5 text-left text-sm whitespace-nowrap transition-colors\"\n [class.hover:bg-muted]=\"activePresetKey() !== preset.key && !presetDisabled\"\n [class.bg-primary]=\"activePresetKey() === preset.key\"\n [class.text-primary-foreground]=\"activePresetKey() === preset.key\"\n [class.font-medium]=\"activePresetKey() === preset.key\"\n [class.opacity-40]=\"presetDisabled\"\n [class.cursor-not-allowed]=\"presetDisabled\"\n [disabled]=\"presetDisabled\"\n (click)=\"onQuickSelect(preset)\">\n {{ preset.label }}\n </button>\n }\n </div>\n }\n <div class=\"flex flex-col gap-2 p-3\">\n @if (!isTimeMode()) {\n <div class=\"z-calendars-wrapper flex gap-4\">\n <!-- First Calendar -->\n <div class=\"z-calendar-section flex flex-col justify-center gap-1\">\n @if (!isTimeMode()) {\n <div class=\"flex w-full items-center justify-between space-x-1\">\n <button\n type=\"button\"\n z-button\n zType=\"ghost\"\n zSize=\"sm\"\n class=\"size-8 p-0!\"\n [zWave]=\"false\"\n [zWave]=\"false\"\n (click)=\"navigatePrevious()\">\n <z-icon zType=\"lucideChevronsLeft\" zSize=\"16\" />\n </button>\n\n <button\n type=\"button\"\n z-button\n zType=\"ghost\"\n zSize=\"sm\"\n class=\"size-8 p-0!\"\n [zWave]=\"false\"\n [zWave]=\"false\"\n (click)=\"navigatePreviousFast()\">\n <z-icon zType=\"lucideChevronLeft\" zSize=\"16\" />\n </button>\n\n <div class=\"flex flex-1 items-center justify-center gap-0.5\">\n @if (!isYearMode() && !isQuarterMode()) {\n <button\n type=\"button\"\n z-button\n zType=\"ghost\"\n zSize=\"sm\"\n class=\"w-20 px-2!\"\n [zWave]=\"false\"\n [zDisabled]=\"false\"\n (click)=\"setView('month')\">\n {{ currentMonthName() }}\n </button>\n }\n\n <button\n type=\"button\"\n z-button\n zType=\"ghost\"\n zSize=\"sm\"\n class=\"px-2!\"\n [zWave]=\"false\"\n [zDisabled]=\"isYearMode()\"\n (click)=\"setView('year')\">\n {{ currentYear() }}\n </button>\n </div>\n\n <button\n type=\"button\"\n z-button\n zType=\"ghost\"\n zSize=\"sm\"\n class=\"size-8 p-0!\"\n [zDisabled]=\"!canNavigateStartNext()\"\n [zWave]=\"false\"\n (click)=\"navigateNextFast()\">\n <z-icon zType=\"lucideChevronRight\" zSize=\"16\" />\n </button>\n\n <button\n type=\"button\"\n z-button\n zType=\"ghost\"\n zSize=\"sm\"\n class=\"size-8 p-0!\"\n [zDisabled]=\"!canNavigateStartNext()\"\n [zWave]=\"false\"\n (click)=\"navigateNext()\">\n <z-icon zType=\"lucideChevronsRight\" zSize=\"16\" />\n </button>\n </div>\n\n <div class=\"z-calendar-views w-full\" [class.z-calendar-views-quarter]=\"isQuarterMode()\">\n @if (currentView() === 'day') {\n <div class=\"flex h-full w-full flex-col gap-1\" [class.z-calendar-animate]=\"hasViewChanged()\">\n <div class=\"grid w-full grid-cols-7\">\n @for (weekday of weekdayNames; track weekday) {\n <div class=\"text-muted-foreground flex h-7 items-center justify-center text-xs font-medium\">\n {{ weekday }}\n </div>\n }\n </div>\n\n @for (week of calendarDays(); track $index) {\n <div class=\"grid w-full grid-cols-7\">\n @for (day of week; track day.date.getTime()) {\n <button\n type=\"button\"\n [class]=\"day | zDayClasses\"\n [disabled]=\"day.isDisabled\"\n (click)=\"onDayClick(day)\"\n (mouseenter)=\"onDayHover(day)\"\n (mouseleave)=\"onDayLeave()\">\n {{ day.day }}\n </button>\n }\n </div>\n }\n </div>\n }\n\n @if (currentView() === 'month') {\n <div class=\"grid h-full w-full grid-cols-3 grid-rows-4\" [class.z-calendar-animate]=\"hasViewChanged()\">\n @for (month of monthNames; track month; let i = $index) {\n @let monthDisabled = isStartMonthDisabled(i);\n <div class=\"flex items-center justify-center\">\n <button\n type=\"button\"\n [class]=\"i | zMonthClasses: currentMonthIndex()\"\n [disabled]=\"monthDisabled\"\n [class.opacity-30]=\"monthDisabled\"\n [class.cursor-not-allowed]=\"monthDisabled\"\n (click)=\"onMonthSelect(i)\">\n {{ month }}\n </button>\n </div>\n }\n </div>\n }\n\n @if (currentView() === 'year') {\n <div\n class=\"grid h-full w-full grid-cols-3 gap-0.5\"\n [class.grid-rows-4]=\"!isYearMode() && !isQuarterMode()\"\n [class.grid-rows-3]=\"isYearMode() || isQuarterMode()\"\n [class.z-calendar-animate]=\"hasViewChanged()\">\n @for (year of isYearMode() || isQuarterMode() ? yearRangeSmall() : yearRange(); track year) {\n @let yearDisabled = isStartYearDisabled(year);\n <div class=\"flex items-center justify-center\">\n <button\n type=\"button\"\n [class]=\"year | zYearClasses: currentYear()\"\n [disabled]=\"yearDisabled\"\n [class.opacity-30]=\"yearDisabled\"\n [class.cursor-not-allowed]=\"yearDisabled\"\n (click)=\"onYearClick(year)\">\n {{ year }}\n </button>\n </div>\n }\n </div>\n }\n\n @if (currentView() === 'quarter') {\n <div class=\"grid w-full grid-cols-2 gap-2\" [class.z-calendar-animate]=\"hasViewChanged()\">\n @for (quarter of quarterNames; track quarter; let i = $index) {\n <div class=\"flex items-center justify-center\">\n <button\n type=\"button\"\n [class]=\"i | zQuarterClasses: currentQuarterIndex()\"\n (click)=\"onQuarterClick(i)\">\n {{ quarter }}\n </button>\n </div>\n }\n </div>\n }\n </div>\n }\n\n <!-- Start Time Picker for Range Mode -->\n @if (isRangeMode() && zShowTime() && currentView() === 'day') {\n <div class=\"flex items-center justify-center gap-2 pt-2\">\n <span class=\"text-muted-foreground text-xs\">{{ 'i18n_z_ui_calendar_start' | translate }}:</span>\n <div class=\"flex items-center gap-0.5\">\n @if (zShowHour()) {\n <input\n type=\"text\"\n tabindex=\"0\"\n inputmode=\"numeric\"\n data-time-type=\"hour\"\n class=\"border-input bg-background focus:border-ring focus:ring-ring/30 w-10 rounded border px-1.5 py-1 text-center text-sm outline-none focus:ring-2\"\n [value]=\"formattedHour()\"\n (input)=\"onHourInput($event)\"\n (blur)=\"onTimeBlur($event)\"\n maxlength=\"2\" />\n }\n @if (zShowHour() && zShowMinute()) {\n <span class=\"text-muted-foreground\">:</span>\n }\n @if (zShowMinute()) {\n <input\n type=\"text\"\n tabindex=\"0\"\n inputmode=\"numeric\"\n data-time-type=\"minute\"\n class=\"border-input bg-background focus:border-ring focus:ring-ring/30 w-10 rounded border px-1.5 py-1 text-center text-sm outline-none focus:ring-2\"\n [value]=\"formattedMinute()\"\n (input)=\"onMinuteInput($event)\"\n (blur)=\"onTimeBlur($event)\"\n maxlength=\"2\" />\n }\n @if (zShowMinute() && zShowSecond()) {\n <span class=\"text-muted-foreground\">:</span>\n }\n @if (zShowSecond()) {\n <input\n type=\"text\"\n tabindex=\"0\"\n inputmode=\"numeric\"\n data-time-type=\"second\"\n class=\"border-input bg-background focus:border-ring focus:ring-ring/30 w-10 rounded border px-1.5 py-1 text-center text-sm outline-none focus:ring-2\"\n [value]=\"formattedSecond()\"\n (input)=\"onSecondInput($event)\"\n (blur)=\"onTimeBlur($event)\"\n maxlength=\"2\" />\n }\n @if (zTimeFormat() === '12h') {\n <button\n type=\"button\"\n tabindex=\"0\"\n class=\"border-input bg-background hover:bg-muted focus:border-ring focus:ring-ring/30 ml-1 cursor-pointer rounded border px-2 py-1 text-sm font-medium transition-colors outline-none focus:ring-2\"\n (click)=\"togglePeriod()\">\n {{ period() }}\n </button>\n }\n </div>\n </div>\n }\n </div>\n\n <!-- Second Calendar (Range Mode Only) -->\n @if (isRangeMode()) {\n <!-- Divider -->\n <div class=\"border-border bg-border w-px self-stretch\"></div>\n\n <div class=\"z-calendar-section flex flex-col justify-center gap-1\">\n <div class=\"flex w-full items-center justify-between space-x-1\">\n <button\n type=\"button\"\n z-button\n zType=\"ghost\"\n zSize=\"sm\"\n class=\"size-8 p-0!\"\n [zDisabled]=\"!canNavigateEndPrev()\"\n [zWave]=\"false\"\n (click)=\"navigateEndPreviousFast()\">\n <z-icon zType=\"lucideChevronsLeft\" zSize=\"16\" />\n </button>\n\n <button\n type=\"button\"\n z-button\n zType=\"ghost\"\n zSize=\"sm\"\n class=\"size-8 p-0!\"\n [zDisabled]=\"!canNavigateEndPrev()\"\n [zWave]=\"false\"\n (click)=\"navigateEndPrevious()\">\n <z-icon zType=\"lucideChevronLeft\" zSize=\"16\" />\n </button>\n\n <div class=\"flex flex-1 items-center justify-center gap-0.5\">\n <button\n type=\"button\"\n z-button\n zType=\"ghost\"\n zSize=\"sm\"\n class=\"w-20 px-2!\"\n [zWave]=\"false\"\n (click)=\"setEndView('month')\">\n {{ endMonthName() }}\n </button>\n\n <button\n type=\"button\"\n z-button\n zType=\"ghost\"\n zSize=\"sm\"\n class=\"px-2!\"\n [zWave]=\"false\"\n (click)=\"setEndView('year')\">\n {{ endMonthYear() }}\n </button>\n </div>\n\n <button\n type=\"button\"\n z-button\n zType=\"ghost\"\n zSize=\"sm\"\n class=\"size-8 p-0!\"\n [zWave]=\"false\"\n [zWave]=\"false\"\n (click)=\"navigateEndNext()\">\n <z-icon zType=\"lucideChevronRight\" zSize=\"16\" />\n </button>\n\n <button\n type=\"button\"\n z-button\n zType=\"ghost\"\n zSize=\"sm\"\n class=\"size-8 p-0!\"\n [zWave]=\"false\"\n [zWave]=\"false\"\n (click)=\"navigateEndNextFast()\">\n <z-icon zType=\"lucideChevronsRight\" zSize=\"16\" />\n </button>\n </div>\n\n <div class=\"z-calendar-views w-full\">\n @if (endView() === 'day') {\n <div class=\"flex h-full w-full flex-col gap-1\" [class.z-calendar-animate]=\"hasEndViewChanged()\">\n <div class=\"grid grid-cols-7 gap-px\">\n @for (weekday of weekdayNames; track weekday) {\n <div class=\"text-muted-foreground flex h-8 w-8 items-center justify-center text-xs font-medium\">\n {{ weekday }}\n </div>\n }\n </div>\n\n @for (week of calendarDaysEnd(); track $index) {\n <div class=\"grid grid-cols-7 gap-px\">\n @for (day of week; track day.date.getTime()) {\n <button\n type=\"button\"\n [class]=\"day | zDayClasses\"\n [disabled]=\"day.isDisabled\"\n (click)=\"onDayClick(day)\"\n (mouseenter)=\"onDayHover(day)\"\n (mouseleave)=\"onDayLeave()\">\n {{ day.day }}\n </button>\n }\n </div>\n }\n </div>\n }\n\n @if (endView() === 'month') {\n <div\n class=\"grid h-full w-full grid-cols-3 grid-rows-4\"\n [class.z-calendar-animate]=\"hasEndViewChanged()\">\n @for (month of monthNames; track month; let i = $index) {\n @let endMonthDisabled = isEndMonthDisabled(i);\n <div class=\"flex items-center justify-center\">\n <button\n type=\"button\"\n [class]=\"i | zMonthClasses: endMonth().getMonth()\"\n [disabled]=\"endMonthDisabled\"\n [class.opacity-30]=\"endMonthDisabled\"\n [class.cursor-not-allowed]=\"endMonthDisabled\"\n (click)=\"onEndMonthClick(i)\">\n {{ month }}\n </button>\n </div>\n }\n </div>\n }\n\n @if (endView() === 'year') {\n <div\n class=\"grid h-full w-full grid-cols-3 grid-rows-4 gap-0.5\"\n [class.z-calendar-animate]=\"hasEndViewChanged()\">\n @for (year of endYearRange(); track year) {\n @let endYearDisabled = isEndYearDisabled(year);\n <div class=\"flex items-center justify-center\">\n <button\n type=\"button\"\n [class]=\"year | zYearClasses: endMonth().getFullYear()\"\n [disabled]=\"endYearDisabled\"\n [class.opacity-30]=\"endYearDisabled\"\n [class.cursor-not-allowed]=\"endYearDisabled\"\n (click)=\"onEndYearClick(year)\">\n {{ year }}\n </button>\n </div>\n }\n </div>\n }\n </div>\n\n <!-- End Time Picker for Range Mode -->\n @if (zShowTime()) {\n <div class=\"flex items-center justify-center gap-2 pt-2\">\n <span class=\"text-muted-foreground text-xs\">{{ 'i18n_z_ui_calendar_end' | translate }}:</span>\n <div class=\"flex items-center gap-0.5\">\n @if (zShowHour()) {\n <input\n type=\"text\"\n tabindex=\"0\"\n inputmode=\"numeric\"\n data-time-type=\"hour-end\"\n class=\"border-input bg-background focus:border-ring focus:ring-ring/30 w-10 rounded border px-1.5 py-1 text-center text-sm outline-none focus:ring-2\"\n [value]=\"formattedHourEnd()\"\n (input)=\"onHourEndInput($event)\"\n (blur)=\"onTimeBlurEnd($event)\"\n maxlength=\"2\" />\n }\n @if (zShowHour() && zShowMinute()) {\n <span class=\"text-muted-foreground\">:</span>\n }\n @if (zShowMinute()) {\n <input\n type=\"text\"\n tabindex=\"0\"\n inputmode=\"numeric\"\n data-time-type=\"minute-end\"\n class=\"border-input bg-background focus:border-ring focus:ring-ring/30 w-10 rounded border px-1.5 py-1 text-center text-sm outline-none focus:ring-2\"\n [value]=\"formattedMinuteEnd()\"\n (input)=\"onMinuteEndInput($event)\"\n (blur)=\"onTimeBlurEnd($event)\"\n maxlength=\"2\" />\n }\n @if (zShowMinute() && zShowSecond()) {\n <span class=\"text-muted-foreground\">:</span>\n }\n @if (zShowSecond()) {\n <input\n type=\"text\"\n tabindex=\"0\"\n inputmode=\"numeric\"\n data-time-type=\"second-end\"\n class=\"border-input bg-background focus:border-ring focus:ring-ring/30 w-10 rounded border px-1.5 py-1 text-center text-sm outline-none focus:ring-2\"\n [value]=\"formattedSecondEnd()\"\n (input)=\"onSecondEndInput($event)\"\n (blur)=\"onTimeBlurEnd($event)\"\n maxlength=\"2\" />\n }\n @if (zTimeFormat() === '12h') {\n <button\n type=\"button\"\n tabindex=\"0\"\n class=\"border-input bg-background hover:bg-muted focus:border-ring focus:ring-ring/30 ml-1 cursor-pointer rounded border px-2 py-1 text-sm font-medium transition-colors outline-none focus:ring-2\"\n (click)=\"togglePeriodEnd()\">\n {{ periodEnd() }}\n </button>\n }\n </div>\n </div>\n }\n </div>\n }\n </div>\n }\n\n @if (((zShowTime() && currentView() === 'day') || isTimeMode()) && !isRangeMode()) {\n <div class=\"flex items-center justify-center gap-2\">\n <div class=\"flex items-center gap-0.5\">\n @if (zShowHour()) {\n <input\n type=\"text\"\n tabindex=\"0\"\n inputmode=\"numeric\"\n data-time-type=\"hour\"\n class=\"border-input bg-background focus:border-ring focus:ring-ring/30 w-10 rounded border px-1.5 py-1 text-center text-sm outline-none focus:ring-2\"\n [value]=\"formattedHour()\"\n (input)=\"onHourInput($event)\"\n (blur)=\"onTimeBlur($event)\"\n maxlength=\"2\" />\n }\n\n @if (zShowHour() && zShowMinute()) {\n <span class=\"text-muted-foreground\">:</span>\n }\n\n @if (zShowMinute()) {\n <input\n type=\"text\"\n tabindex=\"0\"\n inputmode=\"numeric\"\n data-time-type=\"minute\"\n class=\"border-input bg-background focus:border-ring focus:ring-ring/30 w-10 rounded border px-1.5 py-1 text-center text-sm outline-none focus:ring-2\"\n [value]=\"formattedMinute()\"\n (input)=\"onMinuteInput($event)\"\n (blur)=\"onTimeBlur($event)\"\n maxlength=\"2\" />\n }\n\n @if (zShowMinute() && zShowSecond()) {\n <span class=\"text-muted-foreground\">:</span>\n }\n\n @if (zShowSecond()) {\n <input\n type=\"text\"\n tabindex=\"0\"\n inputmode=\"numeric\"\n data-time-type=\"second\"\n class=\"border-input bg-background focus:border-ring focus:ring-ring/30 w-10 rounded border px-1.5 py-1 text-center text-sm outline-none focus:ring-2\"\n [value]=\"formattedSecond()\"\n (input)=\"onSecondInput($event)\"\n (blur)=\"onTimeBlur($event)\"\n maxlength=\"2\" />\n }\n\n @if (zTimeFormat() === '12h') {\n <button\n type=\"button\"\n tabindex=\"0\"\n class=\"border-input bg-background hover:bg-muted focus:border-ring focus:ring-ring/30 ml-1 cursor-pointer rounded border px-2 py-1 text-sm font-medium transition-colors outline-none focus:ring-2\"\n (click)=\"togglePeriod()\">\n {{ period() }}\n </button>\n }\n </div>\n </div>\n }\n\n @if (!(zQuickSelect() && zMode() === 'range' && !showOkButton() && !showCancelButton())) {\n <div class=\"border-border flex items-center justify-between gap-2 border-t pt-2\">\n @if (!zQuickSelect() || zMode() !== 'range') {\n <button type=\"button\" z-button zType=\"secondary\" zSize=\"sm\" [zWave]=\"false\" (click)=\"onTodayClick()\">\n {{ todayButtonText() }}\n </button>\n } @else {\n <div></div>\n }\n\n @if (showOkButton() || showCancelButton()) {\n <div class=\"flex items-center gap-2\">\n @if (showCancelButton()) {\n <button type=\"button\" z-button zType=\"outline\" zSize=\"sm\" (click)=\"onCancelClick()\">\n {{ zCancelText() ?? ('i18n_z_ui_calendar_cancel' | translate) }}\n </button>\n }\n @if (showOkButton()) {\n <button type=\"button\" z-button zSize=\"sm\" [zDisabled]=\"!canApply()\" (click)=\"onOkClick()\">\n {{ zOkText() ?? ('i18n_z_ui_calendar_ok' | translate) }}\n </button>\n }\n </div>\n }\n </div>\n }\n </div>\n </div>\n</ng-template>\n", styles: [".z-calendar-calendar .z-calendar-section{width:280px;flex-shrink:0}.z-calendar-calendar .z-calendar-views{height:225px;width:100%;display:flex;align-items:center;justify-content:center;flex-direction:column}.z-calendar-calendar .z-calendar-views.z-calendar-views-quarter{height:auto}.z-calendar-calendar .z-calendar-animate{animation:z-calendar-view-enter .2s ease-out}@keyframes z-calendar-view-enter{0%{opacity:0;transform:scale(.95) translateY(4px)}to{opacity:1;transform:scale(1) translateY(0)}}\n"] }]
|
|
2362
|
+
}], ctorParameters: () => [], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], zMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "zMode", required: false }] }], zSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "zSize", required: false }] }], zLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "zLabel", required: false }] }], zLabelClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "zLabelClass", required: false }] }], zPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "zPlaceholder", required: false }] }], zRequired: [{ type: i0.Input, args: [{ isSignal: true, alias: "zRequired", required: false }] }], zDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "zDisabled", required: false }] }], zReadonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "zReadonly", required: false }] }], zShowTime: [{ type: i0.Input, args: [{ isSignal: true, alias: "zShowTime", required: false }] }], zTimeFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "zTimeFormat", required: false }] }], zShowHour: [{ type: i0.Input, args: [{ isSignal: true, alias: "zShowHour", required: false }] }], zShowMinute: [{ type: i0.Input, args: [{ isSignal: true, alias: "zShowMinute", required: false }] }], zShowSecond: [{ type: i0.Input, args: [{ isSignal: true, alias: "zShowSecond", required: false }] }], zQuickSelect: [{ type: i0.Input, args: [{ isSignal: true, alias: "zQuickSelect", required: false }] }], zAllowClear: [{ type: i0.Input, args: [{ isSignal: true, alias: "zAllowClear", required: false }] }], zFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "zFormat", required: false }] }], zMinDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "zMinDate", required: false }] }], zMaxDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "zMaxDate", required: false }] }], zValueType: [{ type: i0.Input, args: [{ isSignal: true, alias: "zValueType", required: false }] }], zValidators: [{ type: i0.Input, args: [{ isSignal: true, alias: "zValidators", required: false }] }], zLocale: [{ type: i0.Input, args: [{ isSignal: true, alias: "zLocale", required: false }] }], zShowOk: [{ type: i0.Input, args: [{ isSignal: true, alias: "zShowOk", required: false }] }], zOkText: [{ type: i0.Input, args: [{ isSignal: true, alias: "zOkText", required: false }] }], zShowCancel: [{ type: i0.Input, args: [{ isSignal: true, alias: "zShowCancel", required: false }] }], zCancelText: [{ type: i0.Input, args: [{ isSignal: true, alias: "zCancelText", required: false }] }], zDisabledDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "zDisabledDate", required: false }] }], zScrollClose: [{ type: i0.Input, args: [{ isSignal: true, alias: "zScrollClose", required: false }] }], zControl: [{ type: i0.Output, args: ["zControl"] }], zChange: [{ type: i0.Output, args: ["zChange"] }], triggerRef: [{ type: i0.ViewChild, args: ['triggerEl', { isSignal: true }] }], inputRef: [{ type: i0.ViewChild, args: ['inputEl', { isSignal: true }] }] } });
|
|
2361
2363
|
|
|
2362
2364
|
/**
|
|
2363
2365
|
* Generated bundle index. Do not edit.
|